/* ==========================================================================
   Meridian ERP — design system
   One stylesheet. Every screen in the product is built from these pieces.

   Load once, near the top of the app:
     import './meridian.css'

   Set the active skin on any container:
     <div class="mrd" data-skin="water"> ... </div>

   Skins: water (default) · earth · air · fire · space
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foundation
   -------------------------------------------------------------------------- */

.mrd {
  /* Neutrals. Warm grey rather than blue grey, so the element skins sit on
     a surface that does not fight them. */
  --ink:            #1C1A17;
  --ink-2:          #56524B;
  --ink-3:          #857F76;

  --surface:        #FFFFFF;
  --surface-sunk:   #F7F5F2;
  --surface-raised: #FCFBF9;

  --line:           #E7E3DD;
  --line-strong:    #D3CDC4;

  /* Status. Used the same way everywhere: green means settled, amber means
     someone must look, red means it is already a problem. */
  --ok:             #2F6B34;
  --ok-bg:          #E4F0E4;
  --hold:           #96650B;
  --hold-bg:        #FAEEDA;
  --bad:            #A32D2D;
  --bad-bg:         #FBE7E7;

  /* Type. System stack — an ERP is read for eight hours a day and a webfont
     that fails to load is worse than no webfont at all. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Radii. Three steps, each meaning something: controls, cards, panels. */
  --r-control: 10px;
  --r-card:    12px;
  --r-panel:   16px;

  /* Spacing step. Everything is a multiple of 4. */
  --gap: 4px;

  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. The five element skins

   Each skin sets four things:
     --skin        the panel colour and the accent
     --skin-tint   a pale wash for icon wells and selected states
     --skin-glow   the focus ring
     --on-skin*    text colours that sit on the panel

   Earth is the exception. A yellow bright enough to read as yellow cannot
   carry white text, so it flips the panel foreground to a dark brown. This
   is why the foreground is a variable rather than hardcoded white.
   -------------------------------------------------------------------------- */

.mrd[data-skin="water"] {
  --skin: #1565C0; --skin-deep: #0D4A91;
  --skin-tint: #E8F1FB; --skin-glow: rgba(21,101,192,.16);
}
.mrd[data-skin="earth"] {
  --skin: #8A6300; --skin-deep: #6B4D00;
  --skin-panel: #F2B705;
  --skin-tint: #FDF3D6; --skin-glow: rgba(138,99,0,.16);
}
.mrd[data-skin="air"] {
  --skin: #2E7D32; --skin-deep: #1F5C23;
  --skin-tint: #E8F3E9; --skin-glow: rgba(46,125,50,.16);
}
.mrd[data-skin="fire"] {
  --skin: #C2410C; --skin-deep: #99330A;
  --skin-tint: #FBEBE3; --skin-glow: rgba(194,65,12,.16);
}
.mrd[data-skin="space"] {
  --skin: #5B3FA8; --skin-deep: #452F80;
  --skin-tint: #EFEBF9; --skin-glow: rgba(91,63,168,.16);
}

.mrd {
  --skin: #1565C0; --skin-deep: #0D4A91;
  --skin-tint: #E8F1FB; --skin-glow: rgba(21,101,192,.16);

  /* Panel colour defaults to the accent; earth overrides it above. */
  --skin-panel: var(--skin);

  /* Panel foreground. Overridden for earth. */
  --on-skin:   #FFFFFF;
  --on-skin-2: rgba(255,255,255,.78);
  --on-skin-3: rgba(255,255,255,.62);
  --on-skin-line: rgba(255,255,255,.14);
  --on-skin-dot:  rgba(255,255,255,.34);
}

.mrd[data-skin="earth"] {
  --on-skin:   #3B2A00;
  --on-skin-2: rgba(59,42,0,.80);
  --on-skin-3: rgba(59,42,0,.60);
  --on-skin-line: rgba(59,42,0,.16);
  --on-skin-dot:  rgba(59,42,0,.28);
}

/* --------------------------------------------------------------------------
   3. Screen shell

   Every screen is the same object: a coloured panel that states where you
   are and what the headline number is, then tabs, then content on white.
   The panel is the only place colour is used at full strength.
   -------------------------------------------------------------------------- */

.mrd-screen {
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 0.5px solid var(--line);
  background: var(--surface);
}

.mrd-panel {
  background: var(--skin-panel);
  padding: 20px 20px 22px;
  position: relative;
  overflow: hidden;
  transition: background .3s ease;
}

/* Concentric rings. The one decorative element in the system, and it earns
   its place by giving the panel depth without a gradient. */
.mrd-panel::before,
.mrd-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--on-skin-line);
  pointer-events: none;
}
.mrd-panel::before { width: 180px; height: 180px; right: -68px; top: -74px; }
.mrd-panel::after  { width: 112px; height: 112px; right: 8px;   top: 20px;  }

.mrd-crumb {
  position: relative;
  font-size: 11.5px;
  letter-spacing: .012em;
  color: var(--on-skin-3);
  margin-bottom: 6px;
}
.mrd-title {
  position: relative;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.024em;   /* large type tightens */
  line-height: 1.2;
  color: var(--on-skin);
}
.mrd-sub {
  position: relative;
  font-size: 13px;
  line-height: 1.45;
  color: var(--on-skin-2);
  margin-top: 4px;
}

/* Headline figures on the panel. Two or three, never more. */
.mrd-figures { position: relative; display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.mrd-fig-n {
  font-size: 21px; font-weight: 500;
  letter-spacing: -.026em; line-height: 1.12;
  color: var(--on-skin);
}
.mrd-fig-l { font-size: 11px; color: var(--on-skin-3); margin-top: 2px; }

/* Skin picker. Round, always — the shape is set three ways so an inherited
   button style cannot square it off. */
.mrd-skins { position: relative; display: flex; gap: 15px; margin-top: 16px; }
.mrd-skin {
  display: block;
  width: 25px; height: 25px;
  min-width: 25px; min-height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px var(--on-skin-dot);
  transition: box-shadow .2s, transform .2s;
}
.mrd-skin:hover { transform: scale(1.1); }
.mrd-skin[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--on-skin), 0 0 0 5px var(--on-skin-dot);
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   4. Tabs and body
   -------------------------------------------------------------------------- */

.mrd-tabs { display: flex; border-bottom: 0.5px solid var(--line); }
.mrd-tab {
  flex: 1;
  padding: 13px 5px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.mrd-tab[aria-selected="true"] { color: var(--skin); border-bottom-color: var(--skin); }

.mrd-body { padding: 18px 17px 22px; }

/* A section heading is a label and an optional count, nothing more. */
.mrd-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.mrd-head + .mrd-head, .mrd-head.spaced { margin-top: 22px; }
.mrd-label {
  font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-3);
}
.mrd-count { font-size: 12px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   5. Key and value rows

   The workhorse of the product. Label left, value right, hairline between.
   Money and dates always right aligned so columns of figures scan.
   -------------------------------------------------------------------------- */

.mrd-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 7px 0;
  border-bottom: 0.5px solid var(--line);
  font-size: 13px;
}
.mrd-kv:last-child { border-bottom: none; }
.mrd-k { color: var(--ink-2); }
.mrd-v { color: var(--ink); letter-spacing: -.01em; text-align: right; }
.mrd-v.is-total { font-size: 16px; font-weight: 500; }
.mrd-v.is-pos { color: var(--ok); }
.mrd-v.is-neg { color: var(--bad); }
.mrd-note { font-size: 10.5px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   6. Cards and list rows
   -------------------------------------------------------------------------- */

.mrd-card {
  border-radius: var(--r-card);
  border: 0.5px solid var(--line);
  background: var(--surface-raised);
  padding: 14px 15px;
  margin-bottom: 10px;
}
.mrd-card.is-hold { border-color: var(--hold); }
.mrd-card.is-bad  { border-color: var(--bad); }
.mrd-card.is-done { opacity: .55; }

.mrd-row { display: flex; align-items: flex-start; gap: 10px; }
.mrd-row-main { flex: 1; min-width: 0; }
.mrd-row-name { font-size: 13.5px; font-weight: 500; letter-spacing: -.012em; line-height: 1.3; }
.mrd-row-desc { font-size: 11.5px; color: var(--ink-2); line-height: 1.42; margin-top: 2px; }
.mrd-row-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.mrd-row-end  { text-align: right; flex-shrink: 0; }

/* Icon well. Square for things, round for people. */
.mrd-well {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px;
  background: var(--skin-tint); color: var(--skin);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.mrd-avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--skin-tint); color: var(--skin);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. Controls
   -------------------------------------------------------------------------- */

.mrd-field { margin-bottom: 14px; }
.mrd-field-label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.mrd-field-hint  { font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.45; }

.mrd-input, .mrd-select {
  width: 100%;
  height: 44px;
  border-radius: var(--r-control);
  border: 0.5px solid var(--line-strong);
  background: var(--surface-raised);
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  padding: 0 13px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.mrd-input::placeholder { color: var(--ink-3); }
.mrd-input:focus, .mrd-select:focus {
  border-color: var(--skin);
  box-shadow: 0 0 0 3px var(--skin-glow);
  background: var(--surface);
}
.mrd-input.is-bad { border-color: var(--bad); background: var(--bad-bg); }
.mrd-input:disabled { color: var(--ink-3); background: var(--surface-sunk); }

/* Amounts and quantities right align so they can be compared down a column. */
.mrd-input.is-figure { text-align: right; font-variant-numeric: tabular-nums; }

.mrd-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }

/* Chips. Selection, not decoration. */
.mrd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mrd-chip {
  padding: 7px 12px;
  border-radius: 9999px;
  border: 0.5px solid var(--line-strong);
  background: var(--surface-raised);
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.mrd-chip[aria-pressed="true"] { background: var(--skin); border-color: var(--skin); color: #fff; }
.mrd-chip:disabled { opacity: .45; cursor: not-allowed; }

/* Buttons. One primary per screen area. */
.mrd-btn {
  width: 100%;
  min-height: 48px;
  border-radius: var(--r-control);
  border: none;
  background: var(--skin);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity .15s, transform .1s;
}
.mrd-btn:hover { opacity: .92; }
.mrd-btn:active { transform: scale(.99); }
.mrd-btn:disabled { background: var(--surface-sunk); color: var(--ink-3); cursor: not-allowed; }

.mrd-btn.is-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 0.5px solid var(--line-strong);
}
.mrd-btn.is-add {
  background: transparent;
  color: var(--skin);
  border: 0.5px dashed var(--line-strong);
  min-height: 44px;
  font-size: 14px;
}
.mrd-btn.is-add:hover { background: var(--skin-tint); border-color: var(--skin); }

/* Small round action button used inside rows. */
.mrd-icon-btn {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 9999px;
  border: 0.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  padding: 0;
}
.mrd-icon-btn:hover { border-color: var(--skin); color: var(--skin); }
.mrd-icon-btn.is-on { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.mrd-icon-btn.is-danger:hover { border-color: var(--bad); color: var(--bad); }

/* --------------------------------------------------------------------------
   8. Badges and status

   Three states only. If a fourth is needed, the screen is doing too much.
   -------------------------------------------------------------------------- */

.mrd-badge {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 9999px;
  white-space: nowrap;
  display: inline-block;
}
.mrd-badge.is-ok   { background: var(--ok-bg);   color: var(--ok); }
.mrd-badge.is-hold { background: var(--hold-bg); color: var(--hold); }
.mrd-badge.is-bad  { background: var(--bad-bg);  color: var(--bad); }
.mrd-badge.is-mute { background: var(--surface-sunk); color: var(--ink-3); }
.mrd-badge.is-skin { background: var(--skin-tint); color: var(--skin); }

/* A message that tells the reader what to do about it. */
.mrd-message {
  border-radius: var(--r-control);
  padding: 12px 13px;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 12px;
}
.mrd-message.is-ok   { background: var(--ok-bg);   color: var(--ok); }
.mrd-message.is-hold { background: var(--hold-bg); color: var(--hold); }
.mrd-message.is-bad  { background: var(--bad-bg);  color: var(--bad); }

/* --------------------------------------------------------------------------
   9. Progress and limits

   Every bar in the product carries a marker showing where the value should
   be — budget, entitlement, schedule, minimum stock. A bar without a
   reference point tells you nothing.
   -------------------------------------------------------------------------- */

.mrd-bar {
  height: 9px;
  border-radius: 9999px;
  background: var(--surface-sunk);
  overflow: hidden;
  position: relative;
  display: flex;
  margin: 8px 0 5px;
}
.mrd-bar-fill { height: 100%; border-radius: 9999px; transition: width .35s ease; }
.mrd-bar-fill.is-ok   { background: var(--ok); }
.mrd-bar-fill.is-hold { background: var(--hold); }
.mrd-bar-fill.is-bad  { background: var(--bad); }
.mrd-bar-fill.is-skin { background: var(--skin); }

.mrd-bar-mark {
  position: absolute;
  top: -2px;
  width: 2px; height: 13px;
  background: var(--ink);
  opacity: .45;
}
.mrd-bar-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   10. Steps and chains

   Used for approval routing, milestones and delivery status. Green is
   cleared, amber is where it sits now, grey has not started.
   -------------------------------------------------------------------------- */

.mrd-step { display: flex; gap: 11px; padding: 8px 0; }
.mrd-step-rail { width: 26px; flex: 0 0 26px; display: flex; flex-direction: column; align-items: center; }
.mrd-step-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  background: var(--surface-sunk); color: var(--ink-3);
  flex-shrink: 0;
}
.mrd-step-dot.is-done { background: var(--ok);   color: #fff; }
.mrd-step-dot.is-now  { background: var(--hold); color: #fff; }
.mrd-step-dot.is-late { background: var(--bad);  color: #fff; }
.mrd-step-line { width: 1.5px; flex: 1; background: var(--line-strong); margin-top: 3px; min-height: 14px; }
.mrd-step-main { flex: 1; min-width: 0; padding-bottom: 4px; }
.mrd-step-name { font-size: 13.5px; letter-spacing: -.008em; line-height: 1.3; }
.mrd-step-when { font-size: 11.5px; color: var(--ink-2); line-height: 1.42; margin-top: 2px; }

/* --------------------------------------------------------------------------
   11. Empty states

   An empty screen says what belongs there and how it arrives.
   -------------------------------------------------------------------------- */

.mrd-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
}

/* Footnote under a section, explaining a rule the reader cannot see. */
.mrd-foot {
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 18px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   12. Wider screens

   The product is built mobile first because field staff outnumber office
   staff. On a desktop the panel moves beside the content rather than above.
   -------------------------------------------------------------------------- */

@media (min-width: 620px) {
  .mrd-panel { padding: 24px 26px; }
  .mrd-title { font-size: 25px; }
  .mrd-body  { padding: 22px 24px 26px; }

  /* Opt in per screen with .mrd-screen.is-split */
  .mrd-screen.is-split { display: flex; }
  .mrd-screen.is-split .mrd-panel {
    width: 42%; flex-shrink: 0;
    display: flex; flex-direction: column;
  }
  .mrd-screen.is-split .mrd-main { flex: 1; min-width: 0; }
}

/* --------------------------------------------------------------------------
   13. Quality floor
   -------------------------------------------------------------------------- */

.mrd :focus-visible {
  outline: 2px solid var(--skin);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mrd *, .mrd *::before, .mrd *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Figures line up in columns. Applied wherever numbers are compared. */
.mrd-figures, .mrd-v, .mrd-fig-n, .mrd-input.is-figure {
  font-variant-numeric: tabular-nums;
}

/* Screen reader only. */
.mrd-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}