/* ============================================================================
   SAARTHIOS SUITE CHASSIS: the layer every SaarthiOS product shares.
   One file, served once at /shared/suite.css. Workforce loads it as ../shared/suite.css
   (so it still works from a file:// path); Collect loads /shared/suite.css.

   ONE HOUSE, SEPARATE ROOMS.
   The chassis is identical everywhere: type, status inks, corner scale, focus ring,
   the wordmark lockup, the stamp, the suite footer.
   Each product owns its room: paper tint, cover material, accent, signature object.
   A product sets its room through the --p-* variables below and never redefines an --s-*.

   Load order: fonts → suite.css → the product's own stylesheet.
   Fonts (one Google Fonts link, identical in every product):
   https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Martian+Mono:wdth,wght@75..112.5,400..600&display=swap
   ============================================================================ */

:root{
  /* type: one family for everything readable, one mono for what a machine printed */
  --s-sans:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --s-mono:"Martian Mono", ui-monospace, monospace;

  /* status inks: the same meaning and the same hex in every product.
     Each ink holds 4.5:1 or better as small text on every product paper. */
  --s-ok:#166b42;    --s-ok-tint:rgba(22,107,66,.09);
  --s-warn:#8a5a12;  --s-warn-tint:rgba(138,90,18,.10);   /* caution: deferred, paused. Never alarm. */
  --s-alarm:#b8262b; --s-alarm-tint:rgba(184,38,43,.08);  /* at risk, refused, overdue */
  --s-info:#1a57c0;  --s-info-tint:rgba(26,87,192,.09);
  --s-focus:#1a57c0;

  /* corners: three steps. Pills and big radii belong only to depicted devices (the phone). */
  --s-r1:3px;   /* stamps, tags, inputs */
  --s-r2:6px;   /* buttons, nav items, the mark */
  --s-r3:12px;  /* panels and lifted objects */

  --s-ease:cubic-bezier(.16,1,.3,1);

  /* product room: defaults, overridden by each product */
  --p-accent:#17181c;        /* the product's own colour (the mark tile, primary action) */
  --p-on-accent:#ffffff;
  --p-ink:#17181c;           /* headings on the product's paper */
  --p-ink-soft:#4a4f57;      /* secondary text on the product's paper */
  --p-rule:rgba(23,24,28,.14);
}

/* ---- the focus ring: one ring, every product -------------------------------- */
:focus-visible{ outline:2px solid var(--s-focus); outline-offset:3px; border-radius:2px }

/* ---- wordmark lockup ---------------------------------------------------------
   <a class="s-mark" href="…"><span class="s-mark-tile">S</span>
     <span class="s-mark-name">SaarthiOS<span class="s-mark-product">Workforce</span></span></a>
   On a dark surface add .on-dark. The tile carries the product accent; the structure never changes. */
.s-mark{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--p-ink) }
.s-mark-tile{ flex:none; width:30px; height:30px; border-radius:var(--s-r2); display:grid; place-items:center;
  background:var(--p-accent); color:var(--p-on-accent);
  font:800 15px/1 var(--s-sans); font-variation-settings:"wdth" 75; letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) }
.s-mark-name{ display:inline-flex; align-items:baseline; gap:9px; white-space:nowrap;
  font:800 16px/1 var(--s-sans); font-variation-settings:"wdth" 100; letter-spacing:-.02em }
.s-mark-product{ position:relative; padding-left:10px; font:700 11.5px/1 var(--s-sans); font-variation-settings:"wdth" 75;
  letter-spacing:.14em; text-transform:uppercase; color:var(--p-mark-product, var(--p-ink-soft)) }
.s-mark-product::before{ content:""; position:absolute; left:0; top:-2px; bottom:-2px; width:1px; background:currentColor; opacity:.45 }
.s-mark.on-dark{ color:#fff }

/* ---- the stamp ----------------------------------------------------------------
   Status as a branch clerk would apply it: condensed caps, a ruled border in its own ink,
   a faint bleed behind. Same component, same inks, in every product. */
.s-stamp{ display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
  font:700 .7rem/1 var(--s-sans); font-variation-settings:"wdth" 75; letter-spacing:.09em; text-transform:uppercase;
  padding:.42em .6em .38em; border-radius:var(--s-r1); border:1.5px solid currentColor;
  color:var(--p-ink-soft); background:transparent }
.s-stamp.ok{ color:var(--s-ok); background:var(--s-ok-tint) }
.s-stamp.warn{ color:var(--s-warn); background:var(--s-warn-tint) }
.s-stamp.alarm{ color:var(--s-alarm); background:var(--s-alarm-tint) }
.s-stamp.info{ color:var(--s-info); background:var(--s-info-tint) }

/* ---- the suite footer -----------------------------------------------------------
   One line at the foot of every product's public pages, naming the siblings.
   <nav class="s-suite" aria-label="SaarthiOS suite">
     <span>Part of the SaarthiOS suite</span>
     <a href="…" aria-current="page">Workforce</a><a href="…">Collect</a><a href="…">All products</a></nav> */
.s-suite{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  font:500 13px/1.4 var(--s-sans); font-variation-settings:"wdth" 100; color:inherit }
.s-suite > span{ font-weight:700; font-variation-settings:"wdth" 75; letter-spacing:.12em; text-transform:uppercase; font-size:11px; opacity:.75 }
.s-suite a{ color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, currentColor 35%, transparent) }
.s-suite a:hover{ text-decoration-color:currentColor }
.s-suite a[aria-current="page"]{ text-decoration:none; font-weight:700 }