/*
 * wireframe-kit.css - the low-fi system-flows render kit (doc 16, phase F2).
 *
 * The SHARED stylesheet for every output that draws a wireframe screen: the live
 * board, and (F5) the src/flow-pack.ts PDF deck. Live and PDF link this one file
 * so they can never drift. It owns the device frames and the fixed ~16 wireframe
 * primitives only; the board canvas, the SVG connector chrome, the Outline and
 * the flows index live in styles.css (platform chrome, not the kit).
 *
 * House constraints: GREYSCALE ONLY inside a wireframe (no brand colour, no
 * azure here); azure rings / focus are added by styles.css on the board, never
 * in the kit. Labels clear WCAG AA on the tinted fill. All-Manrope. No motion.
 * No em-dashes anywhere.
 */

:root {
  --wf-fill: #e9ebee;       /* primitive body fill */
  --wf-fill-strong: #dfe2e6; /* emphasis / header tint */
  --wf-line: #cfd4da;       /* primitive border */
  --wf-line-soft: #dde0e4;  /* inner dividers */
  --wf-label: #5f6368;      /* >= AA on white and on --wf-fill */
  --wf-label-soft: #767676; /* secondary text, still AA on white */
  --wf-paper: #ffffff;      /* device "screen" background */
  --wf-ink: #c2c7cd;        /* ink for faux content lines / glyphs */
}

/* ---- device frames ---- */
/* The screen "paper" inside a low-fi device. Mobile is narrow with a status
 * notch; web is wider with a browser chrome bar. Both stay pure greyscale. */
.wf-device {
  background: var(--wf-paper);
  border: 1px solid var(--wf-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wf-device-mobile { width: 232px; border-radius: 20px; }
.wf-device-web { width: 360px; border-radius: 8px; }

/* Device chrome bar (the non-content header of the frame itself). */
.wf-chrome {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--wf-fill-strong);
  border-bottom: 1px solid var(--wf-line);
}
.wf-device-mobile .wf-chrome { justify-content: center; }
.wf-chrome-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wf-line); }
.wf-device-mobile .wf-chrome-notch { width: 56px; height: 5px; border-radius: 3px; background: var(--wf-line); }
.wf-chrome-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--wf-line); }

/* The content area: primitives flow top to bottom, wrapping by width hint. */
.wf-screen-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 10px;
  min-height: 220px;
}

/* ---- width hints ---- */
.wf-prim { box-sizing: border-box; flex: 1 1 100%; min-width: 0; }
.wf-w-full { flex-basis: 100%; }
.wf-w-half { flex-basis: calc(50% - 4px); }
.wf-w-third { flex-basis: calc(33.333% - 6px); }
.wf-w-inline { flex: 0 1 auto; }

/* ---- primitive base ---- */
.wf-prim {
  background: var(--wf-fill);
  border: 1px solid var(--wf-line);
  border-radius: 5px;
  min-height: 26px;
  padding: 6px 8px;
  font: 500 11px/1.3 "Manrope", system-ui, sans-serif;
  color: var(--wf-label);
  display: flex;
  align-items: center;
}
.wf-label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- per-primitive looks (greyscale, structural cues only) ---- */
.wf-app-bar, .wf-nav {
  background: var(--wf-fill-strong);
  min-height: 30px;
  font-weight: 600;
}
.wf-tab-bar { background: var(--wf-fill-strong); min-height: 34px; padding: 4px; gap: 4px; }
.wf-tab-bar .wf-cell { flex: 1; min-height: 24px; }

.wf-hero {
  min-height: 78px;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(135deg, var(--wf-fill), var(--wf-fill) 9px, var(--wf-fill-strong) 9px, var(--wf-fill-strong) 18px);
}
.wf-hero .wf-label { white-space: normal; font-weight: 600; }

.wf-search { border-radius: 14px; padding-left: 26px; position: relative; color: var(--wf-label-soft); }
.wf-search::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 9px;
  margin-top: -6px; border: 1.5px solid var(--wf-label-soft); border-radius: 50%;
}

.wf-card { min-height: 56px; align-items: flex-start; }
.wf-card-grid { display: grid; gap: 6px; padding: 6px; background: transparent; border: none; }
.wf-card-grid .wf-cell { min-height: 44px; border-radius: 5px; }

.wf-list, .wf-table { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.wf-list .wf-row, .wf-list-row { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 6px 8px; }
.wf-list .wf-row + .wf-row { border-top: 1px solid var(--wf-line-soft); }
.wf-list .wf-bullet { width: 14px; height: 14px; border-radius: 50%; background: var(--wf-line); flex: none; }
.wf-list .wf-line { height: 7px; border-radius: 4px; background: var(--wf-line); flex: 1; }

.wf-table .wf-trow { display: flex; }
.wf-table .wf-trow + .wf-trow { border-top: 1px solid var(--wf-line-soft); }
.wf-table .wf-tcell { flex: 1; min-height: 22px; padding: 4px 6px; border-right: 1px solid var(--wf-line-soft); }
.wf-table .wf-tcell:last-child { border-right: none; }
.wf-table .wf-trow-head .wf-tcell { background: var(--wf-fill-strong); font-weight: 600; }

.wf-field { background: var(--wf-paper); border-color: var(--wf-line); min-height: 30px; color: var(--wf-label-soft); }
.wf-field .wf-label { font-weight: 400; }

.wf-button { justify-content: center; text-align: center; border-radius: 16px; min-height: 30px; font-weight: 600; }
.wf-button .wf-label { white-space: normal; text-align: center; }
.wf-e-primary { background: var(--wf-label); border-color: var(--wf-label); color: #fff; }
.wf-e-muted { background: transparent; }

.wf-segmented { padding: 3px; gap: 3px; background: var(--wf-fill-strong); border-radius: 16px; }
.wf-segmented .wf-cell { flex: 1; min-height: 22px; border-radius: 13px; text-align: center; justify-content: center; }
.wf-segmented .wf-cell.is-on { background: var(--wf-paper); }

.wf-avatar { flex: 0 0 auto; width: 30px; height: 30px; min-height: 30px; border-radius: 50%; padding: 0; }
.wf-fab {
  flex: 0 0 auto; width: 34px; height: 34px; min-height: 34px; padding: 0;
  border-radius: 50%; justify-content: center; background: var(--wf-fill-strong); font-size: 16px;
}
.wf-fab::after { content: "+"; color: var(--wf-label); }

.wf-image {
  min-height: 64px;
  background: linear-gradient(135deg, transparent calc(50% - 1px), var(--wf-line) 50%, transparent calc(50% + 1px)),
              linear-gradient(45deg, transparent calc(50% - 1px), var(--wf-line) 50%, transparent calc(50% + 1px));
}
.wf-image .wf-label { align-self: flex-end; }

.wf-stat { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 48px; }
.wf-stat .wf-statnum { width: 38px; height: 16px; border-radius: 4px; background: var(--wf-line); }
.wf-stat .wf-label { font-weight: 400; color: var(--wf-label-soft); }

.wf-text { flex-direction: column; align-items: stretch; gap: 5px; background: transparent; border: none; padding: 4px 2px; }
.wf-text .wf-line { height: 7px; border-radius: 4px; background: var(--wf-line); }
.wf-text .wf-line-2 { width: 86%; }
.wf-text .wf-line-3 { width: 64%; }
.wf-text .wf-label { color: var(--wf-label); font-weight: 600; }

.wf-divider { min-height: 0; height: 1px; padding: 0; background: var(--wf-line); border: none; border-radius: 0; }

.wf-modal, .wf-bottom-sheet {
  min-height: 60px; border-style: dashed; border-width: 1.5px; align-items: flex-start;
  background: var(--wf-paper);
}
.wf-bottom-sheet::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 3px;
  background: var(--wf-line); margin: 0 auto 6px;
}

.wf-note {
  border-style: dashed; background: transparent; color: var(--wf-label-soft);
  font-style: italic; font-weight: 400; min-height: 0;
}
.wf-note .wf-label { white-space: normal; }

/* The generic fallback for any unknown primitive `t` (server coerces to `box`,
 * but the renderer also never breaks on one it does not special-case). */
.wf-box { background: var(--wf-fill); }

/* Faux content cells reused by grid / tab-bar / segmented. */
.wf-cell {
  background: var(--wf-fill); border: 1px solid var(--wf-line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font: 500 10px/1.2 "Manrope", system-ui, sans-serif; color: var(--wf-label-soft);
  padding: 2px; overflow: hidden; box-sizing: border-box;
}

/* ---- sidebar: a vertical navigation rail (two-pane screen layout) ----
 * A screen that contains a `sidebar` block stacks any full-width top bar
 * (app-bar) ABOVE a split row: the vertical rail on the left, the remaining
 * blocks in a content column on the right. This is why `sidebar` reads as a
 * vertical left rail rather than a full-width bar, and the top bar still runs
 * the full width above it. Greyscale only. */
.wf-screen-body.wf-has-sidebar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.wf-split-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; flex: 1; min-height: 0; }
.wf-split-row > .wf-sidebar {
  flex: 0 0 34%; align-self: stretch;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 7px; background: var(--wf-fill-strong);
}
.wf-body-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px;
}
.wf-navitem { display: flex; align-items: center; gap: 6px; }
.wf-navmark { width: 12px; height: 12px; border-radius: 3px; background: var(--wf-ink); flex: none; }
.wf-sidebar .wf-line { height: 7px; border-radius: 4px; background: var(--wf-line); flex: 1; }
/* Data-table body cells show a faux content bar so a table reads as a data grid. */
.wf-table .wf-tcell .wf-line { display: block; height: 6px; width: 72%; border-radius: 3px; background: var(--wf-line); }