/* ==========================================================================
   chrome.css — canonical screen-mockup chrome for the Om Apex product family
   Home: tools/sdlc-standards/formats/chrome.css  (Om Forge format-pack, wave-1)
   Spec: formats/FORMAT-SCREEN-SKETCH.md  ·  Standard: FORMAT-SCREEN-SKETCH v2

   Every HTML screen mockup imports this file and renders the fixed chrome frame:
     top-left  = product name + heartbeat logo   (co-branding; FIRM)
     center    = screen heading                   (FIRM)
     top-right = the logged-in human's NAME       (name-first; FIRM)
     top-right = Chief-of-Staff chat affordance   (PROPOSED — pending Nishad)

   White-label: override the --brand-* tokens in a mockup's own <style>; nothing
   below hardcodes a brand string or colour. Defaults render the Om Apex brand.
   ========================================================================== */

:root {
  /* ---- brand tokens (override per install / white-label) ---- */
  --brand-name:   "Om Apex";           /* set to "Om Business" / customer brand */
  --brand-accent: #4f46e5;             /* logo + heartbeat + focus colour       */
  --brand-fg:     #0f172a;             /* primary text                          */
  --brand-muted:  #64748b;             /* secondary text                        */
  --brand-bg:     #ffffff;             /* chrome background                     */
  --brand-line:   #e2e8f0;             /* hairline separators                   */
  --brand-radius: 10px;
  --chrome-h:     56px;                /* chrome bar height (desktop)           */
  --oa-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--oa-font);
  color: var(--brand-fg);
  background: #f8fafc;
}

/* ---- the fixed chrome bar -------------------------------------------------
   3-column grid: brand (left) · heading (center) · user+cos (right).
   The center heading is truly centered regardless of side widths.          */
.oa-chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: var(--chrome-h);
  padding: 0 16px;
  background: var(--brand-bg);
  border-bottom: 1px solid var(--brand-line);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* top-left: heartbeat logo + product name (FIRM) */
.oa-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  letter-spacing: .2px;
  justify-self: start;
}
.oa-brand::after {                       /* product name from the brand token */
  content: var(--brand-name);
}
.oa-logo {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--brand-accent);
  position: relative;
  flex: 0 0 auto;
}
.oa-logo::after {                        /* the "heartbeat" pulse             */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--brand-accent);
  animation: oa-heartbeat 2s ease-in-out infinite;
}
@keyframes oa-heartbeat {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.9);  opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .oa-logo::after { animation: none; }
}

/* center: screen heading (FIRM) */
.oa-heading {
  justify-self: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

/* top-right: the logged-in human's NAME (name-first, FIRM) + CoS affordance */
.oa-right {                              /* optional wrapper for user + cos    */
  display: flex; align-items: center; gap: 10px; justify-self: end;
}
.oa-user {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 550;
  color: var(--brand-fg);
}
.oa-user::before {                       /* name-first avatar = first initial  */
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent) 18%, #fff);
  border: 1px solid var(--brand-line);
  flex: 0 0 auto;
}

/* PROPOSED (pending Nishad): Chief-of-Staff chat affordance. Hidden by default;
   a mockup opts in by removing [hidden] — the chrome-lint treats it as optional. */
.oa-cos {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  color: var(--brand-accent);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.oa-cos[hidden] { display: none; }
/* Label lives in the button's real text (accessibility) — e.g.
   <button class="oa-cos" title="Chief of Staff">💬 Chief of Staff</button>.
   chrome.css does NOT paint it via ::before/::after (that double-renders on top
   of the button text — same class as the .oa-brand fix). */

/* ---- the screen body ------------------------------------------------------ */
.oa-screen {
  max-width: 1200px;
  margin: 18px auto;
  padding: 0 16px 48px;
}

/* ---- shared status convention: ICON + TEXT, never colour-only -------------
   Shared with the dashboard + voice panels (accessibility + house convention).
   Usage: <span class="oa-status" data-state="live">LIVE</span>              */
.oa-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--brand-line);
}
.oa-status::before { font-size: 11px; }
.oa-status[data-state="live"]::before    { content: "🟢"; }
.oa-status[data-state="hold"]::before    { content: "⏳"; }
.oa-status[data-state="ended"]::before   { content: "🛑"; }
.oa-status[data-state="routing"]::before { content: "🔄"; }
.oa-status[data-state="ok"]::before      { content: "✅"; }
.oa-status[data-state="blocked"]::before { content: "🔴"; }
.oa-status[data-state="needs-you"]::before { content: "⛔"; }
.oa-status[data-state="offline"]::before { content: "○"; }

/* ---- phone (first-class secondary watch screen) --------------------------- */
@media (max-width: 640px) {
  :root { --chrome-h: 50px; }
  .oa-heading { max-width: 38vw; font-size: 14px; }
  .oa-cos::after { content: none; }      /* icon-only on phone                 */
  .oa-user { font-size: 14px; }
  .oa-screen { margin: 12px auto; padding: 0 12px 40px; }
}

/* ---- action-flow footer (TECH-657 LINK-PAIR) ------------------------------
   Every screen ends with a link to its PRD action-flow / Screen-Behavior
   section (and the PRD links back). Nishad's ask 2026-07-21; the LINK-PAIR
   lint catches a missing pairing mechanically.
   Usage: <footer class="oa-actionflow"><a href="…PRD…#screen-behavior">Action Flow</a></footer> */
.oa-actionflow {
  max-width: 1200px;
  margin: 30px auto 44px;
  padding: 13px 16px 0;
  border-top: 1px solid var(--brand-line);
  font-size: 13px;
  color: var(--brand-muted);
  display: block;
}
.oa-actionflow::before {
  content: "↳ Action flow";
  display: block; margin-bottom: 9px;
  color: var(--brand-accent); font-weight: 700;
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
}
/* legacy single-link footers still render until reformatted */
.oa-actionflow > a { color: var(--brand-accent); font-weight: 600; text-decoration: none; }
.oa-actionflow > a:hover { text-decoration: underline; }

/* ---- Action-Flow step cards (ACTION-FLOW-FORMAT-STANDARD / TECH-660) ----
   Canonical rule — copied VERBATIM into every tree's chrome.css (om-cortex,
   om-forge, om-business) so the three catalogs match by construction. Markup:
     <footer class="oa-actionflow">
       <ol class="oa-flow">
         <li><b>You</b> → open X → panel Y shows → <a href="…">Z page</a></li>
         <li class="branch">2a. …approve… · 2b. …send back…</li>
       </ol>
       <a class="oa-flow-spec" href="…">Full behavior in the spec →</a>
     </footer>                                                                */
.oa-flow {
  margin: 0; padding: 0 0 0 1.5em;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; line-height: 1.5; color: var(--brand-fg);
}
.oa-flow li { padding-left: 2px; }
.oa-flow li::marker { color: var(--brand-accent); font-weight: 700; }
.oa-flow li b { font-weight: 650; }
.oa-flow li.branch { list-style: none; color: var(--brand-muted); font-size: 12px; }
.oa-flow a { color: var(--brand-accent); font-weight: 600; text-decoration: none; }
.oa-flow a:hover { text-decoration: underline; }
.oa-flow-spec {
  display: inline-block; margin-top: 10px;
  font-size: 12px; font-weight: 600; color: var(--brand-muted); text-decoration: none;
}
.oa-flow-spec:hover { color: var(--brand-accent); }

/* ---- icon set (Nishad 2026-07-21) — replaces bare Unicode glyphs as UI icons
   Bare glyphs (⊕, +, etc.) render font-dependently — Nishad saw the My Team
   button's plus touching its ring. These are crisp inline SVGs, drawn with a
   PADDED plus (strokes clear of the ring), inheriting currentColor via mask so
   they take the button's color. Usage:
     <button class="oa-btn"><span class="oa-icon oa-icon-add" aria-hidden="true"></span> Add New Hire</button>
   ALWAYS pair with real text or an aria-label — the icon is decorative.
   Add more icons here as the set grows; never hardcode a Unicode glyph as an icon. */
.oa-icon {
  display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--oa-icon) center / contain no-repeat;
          mask: var(--oa-icon) center / contain no-repeat;
}
/* add-circle: circle r=9, plus spanning 8→16 (a clear 3px pad from the ring) */
.oa-icon-add {
  --oa-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8 v8 M8 12 h8"/></svg>');
}

/* ---- sequence nav (FEATURE-1353 catalog walk) ----------------------------
   Prev/next bar so Nishad can walk the full 27-screen om-cortex catalog in
   order, with a "Screen N of 27" completeness counter. Two copies per screen:
   .oa-seqnav sits flush under the chrome header (top); .oa-seqnav--foot sits
   at the bottom of the page (foot) — same look, hairline flips side. */
.oa-seqnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--brand-muted);
  border-bottom: 1px solid var(--brand-line);
  background: var(--brand-bg);
}
.oa-seqnav--foot {
  border-bottom: none;
  border-top: 1px solid var(--brand-line);
  margin-top: 18px;
}
.oa-seqnav a {
  color: var(--brand-accent);
  font-weight: 600;
  text-decoration: none;
}
.oa-seqnav a:hover { text-decoration: underline; }
.oa-seqnav span { font-weight: 600; color: var(--brand-muted); }

/* ---- "What's on this screen" data-story block (SCREEN-DATA-STORY-STANDARD / TECH-660 extension) ----
   Canonical — copy VERBATIM into every tree's chrome.css. Answers: how the screen is built · on which
   data (plain, no table names) · what each element means to the user. Placed just above .oa-actionflow. */
.oa-datastory {
  max-width: 1200px; margin: 26px auto 0; padding: 13px 16px 0;
  border-top: 1px solid var(--brand-line);
}
.oa-datastory > h3 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--brand-accent); font-weight: 700;
}
.oa-datastory > h3::before { content: "▤ "; }
.ds-built { margin: 0 0 10px; font-size: 13px; color: var(--brand-fg); }
.ds-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ds-table th {
  text-align: left; font-weight: 650; color: var(--brand-muted);
  border-bottom: 1px solid var(--brand-line); padding: 4px 12px 6px 0;
  font-size: 11px; letter-spacing: .3px; text-transform: uppercase;
}
.ds-table td { padding: 6px 12px 6px 0; vertical-align: top; border-bottom: 1px solid var(--brand-bg);
  color: var(--brand-fg); line-height: 1.45; }
.ds-table td:first-child { font-weight: 600; white-space: nowrap; }
.ds-table td:nth-child(2) { color: var(--brand-muted); }