/* =============================================================================
   AiBLE CRM — new component atoms
   PR 7b.  Load after 01-tokens.delta.css (this bundle) and 03-fact-atom.css
   (shell bundle).  Additive only — nothing here overrides an existing rule.
   Revert = delete the file.

   Five atoms. Each one replaces markup that four modules were about to invent
   separately. All of them are built from tokens; there is no hex in this file
   except inside the two token definitions it does not own.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. .factstrip — a row of facts under a record title
   Used by: customer hub header (6 slots), proforma payment header (4 slots).

   It is a row of .fact (shell PR 3), separated by rules rather than gaps, so
   the strip reads as one object and holds its slot count in every state. When
   an account goes on credit hold NOTHING reflows — the values recolour and a
   banner appears above.
   -------------------------------------------------------------------------- */
.factstrip{display:flex;align-items:stretch;gap:0;
  padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.factstrip > .fact{flex:1;min-width:0;padding:0 18px;
  border-right:1px solid var(--line-2);display:flex;flex-direction:column;gap:5px}
.factstrip > .fact:first-child{padding-left:0}
.factstrip > .fact:last-child{border-right:0;padding-right:0}
.factstrip .fact-v{font-family:var(--mono);font-size:15px;font-weight:500;line-height:1.1}
.factstrip .fact-sub{font-size:10.5px;color:var(--ink-3)}
.factstrip .is-bad .fact-v{color:var(--danger)}
.factstrip .is-warn .fact-v{color:var(--warn)}

/* A slot may be wider when it carries a meter. */
.factstrip > .fact.is-wide{flex:1.3}

@media (max-width:900px){
  .factstrip{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 14px}
  .factstrip > .fact{padding:0;border-right:0}
}


/* -----------------------------------------------------------------------------
   2. .meter — one quantity against a limit
   Used by: credit utilisation, advance received vs required, margin guard.

   Deliberately not a chart. Height 6–7px, no label inside the bar, no
   animation on load. The number above it is the message; the bar is the shape
   of the number.
   -------------------------------------------------------------------------- */
.meter{display:block;height:6px;border-radius:var(--r-pill);
  background:var(--meter-track);overflow:hidden}
.meter > i{display:block;height:100%;border-radius:var(--r-pill);
  background:var(--ok);font-style:normal}
.meter.is-warn > i{background:var(--warn)}
.meter.is-bad  > i{background:var(--danger)}
.meter.is-lg{height:7px}


/* -----------------------------------------------------------------------------
   3. .agebar — a total split into severity buckets
   Used by: receivables ageing. Reusable for any 3–5 bucket split.

   Segments carry their figure when the segment is wide enough; the four
   .fact items below always carry it. Colour order is the status palette in
   ascending severity, which is why this needs no legend.
   -------------------------------------------------------------------------- */
.agebar{display:flex;height:24px;border-radius:var(--r-sm);
  overflow:hidden;border:1px solid var(--line)}
.agebar > span{display:grid;place-items:center;min-width:0;
  font-family:var(--mono);font-size:10.5px;color:var(--on-primary)}
.agebar > .s1{background:var(--ok)}
.agebar > .s2{background:var(--warn)}
.agebar > .s3{background:var(--copper);color:var(--on-copper)}
.agebar > .s4{background:var(--danger)}
.agebar + .agebar-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:10px}
.agebar-keys .fact-k{display:flex;align-items:center;gap:5px}
.agebar-keys .dot{width:7px;height:7px;border-radius:2px;flex:none}


/* -----------------------------------------------------------------------------
   4. .checklist — conditions between here and the next document
   Used by: proforma readiness ("before it can become a sales order").

   Every unmet row states the blocker in --danger and is the same string the
   disabled primary button's tooltip uses. Do not use this for optional steps;
   it is a gate, not a to-do list.
   -------------------------------------------------------------------------- */
.checklist{display:flex;flex-direction:column;gap:6px}
.checklist li{display:flex;align-items:center;gap:7px;list-style:none;
  font-size:11.5px;color:var(--ink-2)}
.checklist .mark{width:14px;height:14px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;font-size:8px;
  background:var(--ok-50);color:var(--ok);border:1px solid var(--ok)}
.checklist .is-open{color:var(--danger)}
.checklist .is-open .mark{background:var(--danger-50);color:var(--danger);
  border-color:var(--danger)}


/* -----------------------------------------------------------------------------
   5. .railfilter — the module filter rail
   Used by: Activities. Next candidates: Approvals, Tenders.

   Replaces stacked chip rows above a table. Three groups max, in this order:
   what kind of thing · when it is due · what state it is in. The active row
   takes the copper edge marker, matching the sidebar's active treatment, so
   "selected" means the same thing in both columns of the screen.
   -------------------------------------------------------------------------- */
.railfilter{width:var(--rail-w);flex:none;background:var(--surface);
  border-right:1px solid var(--line);padding:13px 0;
  display:flex;flex-direction:column;gap:14px}
.railfilter .rf-group{display:flex;flex-direction:column;gap:2px}
.railfilter .rf-label{font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding:0 14px 6px}
.railfilter .rf-row{display:flex;align-items:center;gap:9px;padding:7px 14px;
  border-left:3px solid transparent;cursor:pointer;color:var(--ink-2);font-size:12.5px}
.railfilter .rf-row:hover{background:var(--bg)}
.railfilter .rf-row.is-on{background:var(--rail-active);border-left-color:var(--copper);
  color:var(--ink);font-weight:600}
.railfilter .rf-n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.railfilter .rf-row.is-on .rf-n{color:var(--ink-2)}
.railfilter .rf-chip{width:20px;height:20px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;font-size:9.5px;font-weight:600;color:var(--on-primary)}

/* Sub-views of an expanded row (Calls → all / recorded / logged / awaiting). */
.railfilter .rf-sub{display:flex;flex-direction:column;gap:1px;
  margin:3px 0 5px 31px;padding-left:10px;border-left:1px solid var(--line)}
.railfilter .rf-sub .rf-row{padding:5px 10px 5px 4px;border-left:0;
  border-radius:var(--r-sm);font-size:12px}
.railfilter .rf-sub .rf-row.is-on{background:var(--rail-active);color:var(--primary)}

/* Below 1100px the rail becomes the existing "Filters (n)" bottom sheet.
   Reuse the inquiry-list sheet from shell PR 4 — do not build a second one. */
@media (max-width:1100px){
  .railfilter{display:none}
}


/* -----------------------------------------------------------------------------
   6. .chain state modifiers — additive to the existing .chain
   The chain already ships. It gains three states so a not-yet-raised step is
   visibly a placeholder rather than a broken link.
   -------------------------------------------------------------------------- */
.chain-step.is-now{background:var(--primary-50);border:1px solid var(--primary)}
.chain-step.is-now .chain-no{color:var(--primary)}
.chain-step.is-empty{background:var(--surface);border:1px solid var(--line-2)}
.chain-step.is-empty .chain-no{color:var(--ink-3)}
.chain-step.is-done .chain-no{color:var(--ok)}


/* -----------------------------------------------------------------------------
   7. .pill countdown variants — additive to the existing .pill
   Validity as time remaining, not a date. The thresholds are the design's:
   ≤3 days danger, ≤10 days warn, otherwise neutral. Compute the string
   server-side or client-side, but keep the DATE in a title attribute — a rep
   forwarding the quote by email needs the actual date.
   -------------------------------------------------------------------------- */
.pill-countdown{font-family:var(--mono)}