/* PhoenixOS readable office screens - the shared vocabulary.
 *
 * v137-v139 made the Order Book readable for staff who are not confident with
 * technology. This file carries that same vocabulary to every other office
 * screen so one release does not leave six dialects behind.
 *
 * Additive only. Every rule is a .rd- class, so linking this file changes
 * nothing until a screen opts a block in. It must be loaded AFTER the page's
 * own inline styles.
 *
 * Two surfaces exist in this app and both are already shipped:
 *   - the dark shell (lanes, cards, panels) - the default here;
 *   - the light cream table treatment (--ob-*) - opt in with .rd-light on
 *     any ancestor, which is what the order/stock tables sit on.
 * Nothing below invents a colour; the values are the shipped tokens.
 */
:root{
  --rd-ink:var(--ink,#e8edf4);
  --rd-dim:var(--ink-dim,#93a1b3);
  --rd-faint:var(--ink-faint,#5f6d80);
  --rd-line:var(--slate-300,#2e3947);
  --rd-well:var(--slate-150,#1a212c);
  --rd-surface:var(--slate-100,#151b24);
  --rd-accent:var(--accent,#37c6e0);
  --rd-warn:var(--orange,#ffab2e);
  --rd-stop:var(--red,#ff4d4f);
  --rd-tap:44px;
}
.rd-light{
  --rd-ink:var(--ob-ink,#1f2a22);
  --rd-dim:var(--ob-dim,#54615a);
  --rd-faint:var(--ob-faint,#7d8578);
  --rd-line:var(--ob-hair,#cbd5c1);
  --rd-well:var(--ob-cream,#faf6ea);
  --rd-surface:var(--ob-green,#e7f0df);
  --rd-accent:var(--ob-teal,#0e7d94);
  --rd-warn:var(--ob-amber,#8f6400);
  --rd-stop:var(--ob-red,#b3261e);
}

/* ---------- 1. Readable text -------------------------------------------
   Ordinary sentence case at a size a tired person reads across a desk.
   No uppercase-condensed labels on facts anybody has to act on. */
.rd-block{font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.5;color:var(--rd-ink)}
.rd-label{display:block;font:600 13px/1.5 'Inter',system-ui,sans-serif;
  text-transform:none;letter-spacing:0;color:var(--rd-dim);margin:0 0 4px}
.rd-value{display:block;font:400 16px/1.5 'Inter',system-ui,sans-serif;color:var(--rd-ink);
  overflow-wrap:anywhere}
.rd-value.strong{font-weight:600}
.rd-note{display:block;font:400 13px/1.5 'Inter',system-ui,sans-serif;color:var(--rd-dim);margin-top:6px;
  overflow-wrap:anywhere}
.rd-note b{font-weight:600;color:var(--rd-ink)}
/* A fact nobody has recorded says so. It is never a bare dash and never a
   silent zero - see the order-supply decision: 0 counted and "not counted"
   are different answers. */
.rd-missing{color:var(--rd-warn);font-weight:600}
/* ...but amber means "a human should act", and most missing values are just
   the ordinary state of the data. Measured on a 1,100-row stock list, marking
   every absence amber produced 1,299 amber strings, of which about half were
   facts nobody is waiting on: no reorder quantity set (793 rows), no trigger
   set (660), "nothing on order, so no supplier to chase" (367). Amber on all
   of them is amber on none of them. `.quiet` keeps the words and drops the
   alarm; keep plain .rd-missing for a gap somebody must close. */
.rd-missing.quiet{color:var(--rd-dim);font-weight:400}

/* ---------- 2. References ----------------------------------------------
   WO / job / customer PO / supplier PO stay prominent and stay labelled.
   Never render a reference this page does not actually hold. */
.rd-ref{font:600 18px/1.4 'JetBrains Mono',monospace;color:var(--rd-ink);white-space:nowrap}
.rd-ref-sub{display:block;font:500 13px/1.5 'JetBrains Mono',monospace;color:var(--rd-dim);
  white-space:normal;overflow-wrap:anywhere}
.rd-party{display:block;font:600 17px/1.4 'Inter',system-ui,sans-serif;color:var(--rd-ink);margin-bottom:5px}
.rd-thing{display:block;font:400 16px/1.45 'Inter',system-ui,sans-serif;color:var(--rd-ink)}
.rd-qty{font:500 17px/1.4 'JetBrains Mono',monospace;color:var(--rd-ink)}
.rd-date{display:block;font:600 16px/1.4 'Inter',system-ui,sans-serif;color:var(--rd-ink)}

/* ---------- 3. Written status ------------------------------------------
   Colour is never the only cue: every state is a word. The outline carries
   emphasis; the text carries the meaning. */
.rd-status{display:inline-block;max-width:100%;font:600 14px/1.4 'Inter',system-ui,sans-serif;
  text-transform:none;letter-spacing:0;color:var(--rd-ink);background:var(--rd-well);
  border:1px solid var(--rd-line);border-radius:6px;padding:6px 10px;white-space:normal;
  overflow-wrap:anywhere}
.rd-status.attention{color:var(--rd-warn);border-color:var(--rd-warn)}
.rd-status.stop{color:var(--rd-stop);border-color:var(--rd-stop)}
.rd-status.done{border-color:var(--rd-accent)}

/* ---------- 4. Grouping ------------------------------------------------- */
.rd-group{border:1px solid var(--rd-line);border-radius:12px;padding:16px 18px;margin:0 0 14px;
  background:var(--rd-well)}
.rd-group > h3,.rd-group > .rd-group-title{margin:0 0 12px;font:600 15px/1.4 'Inter',system-ui,sans-serif;
  text-transform:none;letter-spacing:0;color:var(--rd-ink)}
.rd-group-note{margin:-6px 0 12px;font:400 13px/1.5 'Inter',system-ui,sans-serif;color:var(--rd-dim)}
.rd-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 22px}
.rd-facts.wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rd-fact{min-width:0}

/* ---------- 5. Cards ---------------------------------------------------
   Used where a table would be too crowded to read. Every value keeps its
   written label, so a card is the same information in a taller shape. */
.rd-card{border:1px solid var(--rd-line);border-radius:12px;padding:18px 20px;margin:0 0 14px;
  background:var(--rd-well);color:var(--rd-ink)}
.rd-card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:12px}
.rd-card-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 22px}
.rd-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--rd-line)}

/* ---------- 6. Actions --------------------------------------------------
   A primary action is at least 44px high and says what it does. */
.rd-actions{display:flex;flex-wrap:wrap;gap:10px;max-width:100%;min-width:0}
.rd-btn{display:inline-flex;justify-content:center;align-items:center;min-height:var(--rd-tap);
  max-width:100%;padding:9px 14px;font:500 15px/1.35 'Inter',system-ui,sans-serif;text-align:center;
  text-decoration:none;white-space:normal;border-radius:8px;border:1px solid var(--rd-line);
  background:var(--rd-surface);color:var(--rd-ink);cursor:pointer}
.rd-btn.primary{background:var(--rd-accent);border-color:var(--rd-accent);color:#fff;font-weight:600}
.rd-btn.caution{color:var(--rd-stop);border-color:var(--rd-stop)}
.rd-btn[disabled],.rd-btn[aria-disabled="true"]{opacity:.55;cursor:default}
.rd-btn:focus-visible,.rd-field:focus-visible,.rd-disclose > summary:focus-visible{
  outline:3px solid var(--rd-accent);outline-offset:3px}
/* An action nobody can use explains itself where the hand already is. */
.rd-why{display:block;flex-basis:100%;font:400 13px/1.5 'Inter',system-ui,sans-serif;
  color:var(--rd-warn);margin-top:2px}

/* ---------- 7. Fields ---------------------------------------------------
   Saved values, suggestions and gaps must never look alike. */
.rd-field{font:400 16px/1.4 'Inter',system-ui,sans-serif;min-height:var(--rd-tap);padding:9px 12px;
  color:var(--rd-ink);background:var(--rd-well);border:1px solid var(--rd-line);border-radius:8px;
  max-width:100%}
.rd-origin{display:inline-block;font:600 12px/1.4 'Inter',system-ui,sans-serif;text-transform:none;
  letter-spacing:0;border-radius:5px;padding:3px 8px;border:1px solid var(--rd-line);color:var(--rd-dim);
  background:transparent}
.rd-origin.saved{color:var(--rd-ink);border-color:var(--rd-accent)}
.rd-origin.suggested{color:var(--rd-dim);border-style:dashed}
.rd-origin.needed{color:var(--rd-warn);border-color:var(--rd-warn)}

/* ---------- 8. Advanced detail -----------------------------------------
   Reachable, never in the way, and never hiding a warning. */
.rd-disclose{border:1px solid var(--rd-line);border-radius:10px;margin:0 0 12px;background:transparent}
.rd-disclose > summary{list-style:none;cursor:pointer;min-height:var(--rd-tap);display:flex;
  align-items:center;gap:8px;padding:10px 14px;font:600 15px/1.4 'Inter',system-ui,sans-serif;
  color:var(--rd-ink)}
.rd-disclose > summary::-webkit-details-marker{display:none}
.rd-disclose > summary::before{content:"Show";font-weight:500;font-size:13px;color:var(--rd-dim)}
.rd-disclose[open] > summary::before{content:"Hide"}
.rd-disclose > div{padding:0 14px 14px}

/* ---------- 9. Narrow widths -------------------------------------------
   Tables become labelled cards rather than a sideways search. */
@media(max-width:1240px){
  .rd-facts,.rd-card-body{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .rd-facts,.rd-card-body{grid-template-columns:minmax(0,1fr)}
  .rd-actions .rd-btn{flex:1 1 100%}
  .rd-ref{white-space:normal;overflow-wrap:anywhere}
}

/* ---------- 10. The shared office shell ---------------------------------
   THE ONE EXCEPTION to the .rd- rule above, and it is deliberate.

   Every office screen carries its own copy of the same topbar, and every
   copy wraps at 860px. Between about 861 and 1100px the nav therefore
   still sits on one line with the data pill and the clock, and draws
   underneath them - two readable things on top of each other. On the
   pages with the longest nav it is worse than ugly: purchasing.html
   scrolled the whole page sideways by 208px at 861px and 45px at 1024px.

   Measured on stock.html and purchasing.html before any of this release's
   work, so it is pre-existing and not something a lane introduced. It is
   fixed here rather than in six page files because it is one defect in one
   shared component, and a screen gets the fix by linking this stylesheet.

   The 860px rules in each page are untouched and still win below that. */
/* The floor is 861px, NOT "all widths", and that is load-bearing. Below
   860px every page already has its own block turning the nav into a
   horizontal scroll strip (overflow-x:auto, nowrap links, clock hidden).
   That is a deliberate phone design: a ten-link nav that wraps eats three
   or four lines of vertical space on the screen with the least of it. An
   unscoped `.topbar .nav` here is specificity 0,2,0 and silently outranks
   their `.nav` at 0,1,0 even inside their own media query, which would
   replace that strip with a wrapping block. So this range stops where
   theirs begins.

   Not narrower than 1240px either, because the overlap is not a
   narrow-screen problem: purchasing.html has ten nav links and its nav
   still ran over the status pill at 1280px and 1440px, measured identically
   on pristine main. Wrapping is inert while everything fits - at 1600px
   nothing moves - so a page with a short nav is unaffected. */
@media(min-width:861px){
  .topbar{flex-wrap:wrap;row-gap:10px}
  .topbar .brand{flex-wrap:wrap;min-width:0}
  .topbar .nav{flex-wrap:wrap;min-width:0;max-width:100%}
  /* Wrapping the nav must wrap it between links, never inside one:
     "TV Wallboard" breaking after "TV" is how a wrapped nav stops
     looking like a nav. Each page's own 860px block already says this
     for the strip below. */
  .topbar .nav a{white-space:nowrap}
  .topbar .clock{margin-left:auto}
}
@media(min-width:861px) and (max-width:1240px){
  .topbar{column-gap:14px}
  .topbar .nav{margin-left:0}
}