/* Shared wireframe stylesheet for all three concept prototypes.
   Deliberately plain: greyscale plus ONE action accent and ONE attention accent.
   No shadows, no icons, no per-concept styling — so the prettiest concept
   cannot win the comparison on looks. */

@font-face {
  font-family: "Geist";
  src: url("https://storage.googleapis.com/ronanrx-public-assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("https://storage.googleapis.com/ronanrx-public-assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

:root {
  /* Type tokens. The repo's design-system test requires every type stack to
     be referenced through a --font-* token rather than declared inline. */
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --ground: #eceff0;
  --card: #fff;
  --ink: #14191a;
  --ink-soft: #5a6467;
  --ink-faint: #8b9497;
  --line: #d8dedf;
  --line-soft: #e9edee;
  --action: #0f766e;        /* the ONE action accent */
  --action-bg: #eef6f5;
  --attention: #8a5a00;     /* the ONE attention accent */
  --attention-bg: #fdf5e6;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-width: 320px;
  background: var(--ground); color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.content { max-width: 1120px; margin: 0 auto; padding: 24px 20px 80px; }
.content--narrow { max-width: 720px; }

/* ---------- chrome ---------- */

.chrome {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.wordmark { font-weight: 650; letter-spacing: -0.01em; }
.wordmark span {
  background: var(--action); color: #fff; border-radius: 5px;
  padding: 2px 7px; margin-right: 6px; font-size: 13px;
}
.chrome nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.chrome nav a { color: var(--ink-soft); text-decoration: none; }
.chrome nav a.is-active { color: var(--ink); font-weight: 600; }
.chrome .spacer { margin-left: auto; }
.who { font-size: 13px; color: var(--ink-faint); }

/* ---------- tabs ----------
   Matches the shape already shipping in app/views/ops/shared/_fulfillment_subnav
   — small uppercase labels, horizontal scroll, accent underline on the active
   one — so this reads as the same product as the rest of the Ops console. */

/* The tab row is a bar attached to the header, not page content. It sits in the
   same place on every screen so it never drifts below a title block. */
.tabbar { background: var(--card); border-bottom: 1px solid var(--line); }
.tabs {
  display: flex; gap: 26px; overflow-x: auto;
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
}
.tabs a {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 7px;
  padding: 13px 0; margin-bottom: -1px; text-decoration: none;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--action); border-bottom-color: var(--action); }
.tabs .n {
  font-size: 12px; letter-spacing: 0; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.tabs a.is-active .n { color: var(--action); }
.tabs a.has-attention .n { color: var(--attention); }

/* The attention strip sits ABOVE the tabs, never inside one.
   A stall behind a tab is a stall nobody chose to look at. */
.attention-strip {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  background: var(--attention-bg); border: 1px solid #e8d5aa;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
}
.attention-strip strong { color: var(--attention); }
.attention-strip .spacer { margin-left: auto; }

/* ---------- headings ---------- */

/* Geist sans, matching the app's locked type register (2026-07-10): sans for
   every title, name, number and datum. Newsreader is reserved for note-body
   prose, and a serif heading fails the register even in an allowlisted file.
   Size matches the console's text-2xl font-semibold. */
.h1 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 24px; line-height: 1.2; letter-spacing: -0.012em; margin: 0 0 4px;
}
.subtitle { color: var(--ink-soft); margin: 0 0 22px; font-size: 14px; }
.pagehead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
h2 { font-size: 16px; margin: 0; font-weight: 620; }
.eyebrow {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 6px;
}

/* ---------- cards & lists ---------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px;
}
.card__head {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card__body { padding: 16px 18px; }
.card__body > :first-child { margin-top: 0; }
.card__body > :last-child { margin-bottom: 0; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.rows li:last-child { border-bottom: 0; }
.rows a { color: var(--action); text-decoration: none; font-weight: 550; }
.rows a:hover { text-decoration: underline; }
.row__main { flex: 1 1 260px; min-width: 0; }
.row__meta { color: var(--ink-soft); font-size: 13px; }
.row__act { flex-shrink: 0; }

/* A bucket row: the queue-first primitive */
.bucket {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.bucket:last-child { border-bottom: 0; }
.bucket:hover { background: var(--action-bg); }
.bucket__n {
  font-size: 26px; font-weight: 640; min-width: 54px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.bucket__t { flex: 1 1 auto; min-width: 0; }
.bucket__t strong { display: block; font-weight: 600; }
.bucket__t span { color: var(--ink-soft); font-size: 13px; }
.bucket__go { color: var(--action); font-weight: 600; font-size: 14px; flex-shrink: 0; }
.bucket--attention { background: var(--attention-bg); }
.bucket--attention:hover { background: #faedd4; }
.bucket--attention .bucket__n { color: var(--attention); }
.bucket--quiet .bucket__n { color: var(--ink-faint); }

/* ---------- pills ---------- */

.pill {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 99px;
  background: #eceff0; color: var(--ink-soft); border: 1px solid var(--line);
}
.pill--attention { background: var(--attention-bg); color: var(--attention); border-color: #e8d5aa; }
.pill--action { background: var(--action-bg); color: var(--action); border-color: #bcdedb; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 14px;
  min-height: 40px; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn--attention { background: var(--card); border-color: #e0c48a; color: var(--attention); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* `.rows a` colours link text accent-teal, which is the same value as the
   primary button's background — a button inside a row rendered invisible.
   These restate the button colours at a specificity that beats it. */
.rows a.btn { color: var(--ink); }
.rows a.btn--primary { color: #fff; }
.rows a.btn--attention { color: var(--attention); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
th {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }

/* ---------- timeline (the cross-cutting capability) ---------- */

.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 16px 18px; font-size: 14px; }
.timeline li::before {
  content: ""; position: absolute; left: -25px; top: 6px;
  width: 9px; height: 9px; border-radius: 99px;
  background: var(--card); border: 2px solid var(--line);
}
.timeline li.is-done::before { background: var(--action); border-color: var(--action); }
.timeline li.is-gap::before { border-style: dashed; border-color: var(--attention); }
.timeline .when { color: var(--ink-faint); font-size: 12.5px; display: block; }

.field-label {
  display: block; margin-top: 14px;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}

.lp-wrap { flex-basis: 100%; margin-top: 6px; }
.lp-wrap > summary {
  cursor: pointer; font-size: 13px; color: var(--action); font-weight: 550;
  list-style: none;
}
.lp-wrap > summary::-webkit-details-marker { display: none; }
.lp-wrap > summary::before { content: "\25B8 "; }
.lp-wrap[open] > summary::before { content: "\25BE "; }

/* ---------- rendered label proof, and printing it for real ----------
   A 3x2in label at screen scale. The print rules below reduce the page to the
   one open label so the browser print dialog produces the label itself rather
   than a screenshot of the console. */

.label-proof {
  width: 3in; height: 2in; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 3px; background: #fff; color: #111;
  padding: 9px 11px; margin: 12px 0 4px;
  font-family: var(--font-sans); font-size: 6.5pt; line-height: 1.28;
  display: flex; flex-direction: column; gap: 4px;
}
.label-proof .lp-bar { border-bottom: 1.5px solid #111; padding-bottom: 3px; }
.label-proof .lp-pharm { font-weight: 700; font-size: 8pt; letter-spacing: -0.01em; }
.label-proof .lp-line2 { font-size: 5.6pt; color: #333; }
.label-proof .lp-pt { font-weight: 700; font-size: 8.5pt; }
.label-proof .lp-drug { font-weight: 700; font-size: 9.5pt; line-height: 1.15; }
.label-proof .lp-sig { font-size: 7.5pt; }
.label-proof .lp-foot {
  margin-top: auto; border-top: 1px solid #999; padding-top: 3px;
  display: flex; justify-content: space-between; gap: 8px; font-size: 5.6pt; color: #333;
}
.label-proof .lp-warn { font-weight: 700; text-transform: uppercase; font-size: 5.8pt; }

@media print {
  @page { size: 3in 2in; margin: 0; }
  body * { visibility: hidden !important; }
  .label-proof.is-printing,
  .label-proof.is-printing * { visibility: visible !important; }
  .label-proof.is-printing {
    display: flex !important; position: fixed; left: 0; top: 0;
    margin: 0; border: 0; border-radius: 0;
  }
  body.is-printing-batch > :not(.label-print-stage) { display: none !important; }
  body.is-printing-batch .label-print-stage { display: block !important; }
  body.is-printing-batch .label-proof.is-printing {
    position: static; break-after: page; page-break-after: always;
  }
  body.is-printing-batch .label-proof.is-printing:last-child {
    break-after: auto; page-break-after: auto;
  }
}

/* ---------- icons (Lucide paths, inlined as SVG so no image files are needed) ---------- */

.icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }
.btn--icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: 40px; min-height: 40px; padding: 0;
}
/* An icon beside a text label needs the gap; an icon-only button does not.
   :only-child does not work here because the label is a text node, not an element. */
.btn .icon { margin-right: 7px; }
.btn--icon .icon { margin-right: 0; }

/* ---------- disclosures + simple forms ---------- */

.disclose { border-top: 1px solid var(--line-soft); }
.disclose:first-of-type { border-top: 0; }
.disclose > summary {
  cursor: pointer; padding: 13px 18px; font-size: 14px; color: var(--ink);
  list-style: none;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before { content: "+"; color: var(--action); font-weight: 700; margin-right: 9px; }
.disclose[open] > summary::before { content: "\2212"; }
.disclose > summary:hover { background: var(--action-bg); }

.formgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.control {
  display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  min-height: 40px; padding: 8px 11px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}

/* ---------- code panes (JSON out, tracking paste back) ---------- */

.codepane {
  display: block; width: 100%; box-sizing: border-box; margin-top: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ground); color: var(--ink);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre; overflow: auto; resize: vertical;
}
.codepane--input { background: var(--card); }

/* ---------- search ---------- */

.omnibox {
  width: 100%; font: inherit; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
/* When the omnibox sits in a page header next to a button, it should share
   the line rather than claim it. */
.pagehead .omnibox { width: 270px; min-height: 40px; padding: 9px 14px; }
@media (max-width: 560px) { .pagehead .omnibox { width: 100%; } }

/* ---------- misc ---------- */

.empty { padding: 22px 18px; color: var(--ink-faint); font-size: 14px; }
.note {
  border-left: 2px solid var(--line); padding: 2px 0 2px 14px;
  color: var(--ink-soft); font-size: 13.5px; margin: 14px 0;
}
.checkrow { display: flex; gap: 11px; align-items: baseline; padding: 9px 0; }
.checkrow input { width: 17px; height: 17px; flex-shrink: 0; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.split { display: grid; gap: 16px; grid-template-columns: 320px 1fr; }

.what-changed { margin-top: 30px; font-size: 13.5px; color: var(--ink-soft); }
.what-changed summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.what-changed ul { margin: 10px 0 0; padding-left: 20px; }
.what-changed li { margin-bottom: 5px; }

/* In-flow rather than fixed: these pages are also rendered inside the
   comparison iframes, where a fixed chip pins to the frame viewport and
   covers content. */
.mockup-chip {
  display: block; width: fit-content; margin: 8px 20px 24px auto;
  background: var(--ink); color: #fff; border-radius: 99px;
  padding: 7px 15px; font-size: 12px; font-weight: 600; text-decoration: none;
}

.concept-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}

/* ---------- compare view ---------- */

.compare { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); align-items: start; }
.compare .col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare .col > header { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.compare .col > header h2 { font-size: 15px; }
.compare .col > header p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.compare .frame { height: 620px; border: 0; width: 100%; background: var(--ground); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .grid-2, .split, .compare { grid-template-columns: 1fr; }
  .compare .frame { height: 460px; }
}
@media (max-width: 560px) {
  /* Seven sections cannot fit one 390px line at any sensible label length, and a
     scrolling row hides the active tab off the right edge — measured at 594px on
     a 390px strip. Wrapping costs two lines of height and hides nothing. */
  .tabs { flex-wrap: wrap; gap: 0 18px; padding: 4px 14px; }
  .tabs a { padding: 9px 0; }

  .content { padding: 18px 14px 70px; }
  .h1 { font-size: 25px; }
  .card__body, .rows li, .bucket, th, td { padding-left: 14px; padding-right: 14px; }
  .actions .btn { width: 100%; text-align: center; }
  .bucket__n { font-size: 22px; min-width: 44px; }

  /* Tables collapse to cards rather than scrolling sideways.
     This is the fix for teardown finding F4 and is deliberately in the SHARED
     stylesheet so all three concepts inherit it equally. */
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; }
  table.responsive thead { display: none; }
  table.responsive tr { border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
  table.responsive tr:last-child { border-bottom: 0; }
  table.responsive td { border: 0; padding: 3px 14px; display: flex; gap: 12px; justify-content: space-between; }
  table.responsive td::before {
    content: attr(data-label); color: var(--ink-faint); font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase; font-weight: 600; flex-shrink: 0;
  }
  table.responsive td.num { text-align: left; }
}