/* ============================================================================
   WIREFRAME DEVICES — schematic line-art "windows" onto the assistant's work.
   Shared by Home.html (decorative margin bleed) and Workflows.html (gallery).

   Each workflow is drawn as one of several DISTINCT device archetypes, so the
   collection reads as many different tools — not one rounded rectangle repeated:

     .wf--chat    phone chat / Slack   — narrow, tall, big radius, bubbles
     .wf--email   email client          — medium, list rows or a compose head
     .wf--sheet   spreadsheet           — wide, true aligned grid + row gutter
     .wf--cal     calendar / day agenda — wide, time gutter + hour rules
     .wf--doc     document / page       — portrait, letterhead + text lines
     .wf--board   pipeline / kanban      — wide, columns of chips

   Frame color: gray (default), .wf--white (bright), .wf--emerald (green chrome).
   Each device sets --wf-w (its natural max width) so ratios vary by type.
   Depends on design tokens from tokens.css / page :root (--ink*, --surface,
   --ink-red, --font-app, --font-tw).
   ============================================================================ */

.wf {
    --wf-line: oklch(40% 0.012 220);
    --wf-soft: oklch(30% 0.01 220);
    --wf-ink: var(--ink-soft);
    --wf-ink-strong: var(--ink);
    --wf-accent: var(--ink-red);
    --wf-w: 22rem;
    border: 1.5px solid var(--wf-frame, var(--wf-line));
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    color: var(--wf-ink);
    font-family: var(--font-app);
    overflow: hidden;
    position: relative;
}

/* ---- color variants ---- */
.wf--white {
    --wf-frame: oklch(97% 0 0);
    --wf-line: oklch(80% 0.006 220);
    --wf-soft: oklch(58% 0.006 220);
    --wf-ink: oklch(92% 0.004 210);
    --wf-ink-strong: #fff;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.wf--emerald {
    --wf-frame: var(--ink-red);
    border-width: 2px;
}

/* ---- device silhouettes: width + radius ---- */
.wf--chat  { --wf-w: 16.5rem; border-radius: 20px; }
.wf--email { --wf-w: 25rem;   border-radius: 8px; }
.wf--sheet { --wf-w: 27rem;   border-radius: 6px; }
.wf--cal   { --wf-w: 24rem;   border-radius: 8px; }
.wf--doc   { --wf-w: 17.5rem; border-radius: 3px; }
.wf--board { --wf-w: 26rem;   border-radius: 8px; }

/* ============================================================================
   CHROME — top bar (shared)
   ============================================================================ */
.wf-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--wf-line);
}
.wf-top__dots { display: flex; gap: 4px; }
.wf-top__dots i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--wf-line); display: block; }
.wf-top__label {
    font-family: var(--font-tw);
    font-size: 10.5px;
    color: var(--ink-dust);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-top__spacer { flex: 1; }
.wf-tag {
    font-family: var(--font-app);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dust);
    border: 1px solid var(--wf-line);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.3;
}

/* ---- email-style toolbar: window dots + a strip of "menu" lines ---- */
.wf-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--wf-line);
}
.wf-bar__tabs { display: flex; gap: 5px; margin-left: auto; }
.wf-bar__tabs i { display: block; width: 16px; height: 5px; border-radius: 3px; background: var(--wf-soft); }

.wf-body { padding: 12px; display: flex; flex-direction: column; gap: 11px; }

/* ============================================================================
   SHARED PRIMITIVES — text, bars, ticks, notes, avatars
   ============================================================================ */
.wf-line { height: 6px; border-radius: 3px; background: var(--wf-soft); }
.wf-real { font-size: 11.5px; line-height: 1.4; color: var(--wf-ink); }
.wf-real--strong { color: var(--wf-ink-strong); font-weight: 600; }
.wf-muted { color: var(--ink-dust); }

.wf-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--wf-line);
    display: grid; place-items: center;
    font-size: 9px; font-weight: 600; color: var(--ink-dust);
    flex-shrink: 0;
}
.wf-avatar--sq { border-radius: 6px; }
.wf-avatar--accent { border-color: var(--wf-accent); color: var(--wf-accent); }

.wf-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wf-ticks li { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; line-height: 1.35; color: var(--wf-ink); }
.wf-ticks li::before {
    content: "";
    width: 9px; height: 9px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid var(--wf-accent);
    flex-shrink: 0;
}
.wf-ticks li b { color: var(--wf-ink-strong); font-weight: 600; }

.wf-note {
    padding: 8px 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--wf-ink);
    border-left: 2px solid var(--wf-accent);
    background: color-mix(in srgb, var(--wf-accent) 7%, transparent);
}
.wf-note b { color: var(--wf-ink-strong); }

/* ============================================================================
   CHAT — message bubbles
   ============================================================================ */
.wf-msg { display: flex; gap: 8px; }
.wf-msg__body { flex: 1; min-width: 0; }
.wf-author { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.wf-author__name { font-size: 11px; font-weight: 600; color: var(--wf-ink-strong); }
.wf-author__time { font-family: var(--font-tw); font-size: 9px; color: var(--ink-dust); white-space: nowrap; }
.wf-bubble {
    border: 1px solid var(--wf-line);
    border-radius: 9px;
    padding: 9px 10px;
    display: flex; flex-direction: column; gap: 7px;
}
.wf-bubble--accent { border-color: color-mix(in srgb, var(--wf-accent) 55%, var(--wf-line)); }

/* ============================================================================
   EMAIL — inbox rows and compose header
   ============================================================================ */
.wf-mail { display: flex; flex-direction: column; }
.wf-mail__row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 8px 2px;
}
.wf-mail__row + .wf-mail__row { border-top: 1px solid var(--wf-line); }
.wf-mail__row--unread { position: relative; }
.wf-mail__row--unread::before {
    content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--wf-accent);
}
.wf-mail__txt { min-width: 0; }
.wf-mail__from { font-size: 11px; font-weight: 600; color: var(--wf-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-mail__subj { font-size: 10.5px; color: var(--wf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-mail__time { font-family: var(--font-tw); font-size: 9px; color: var(--ink-dust); white-space: nowrap; }

.wf-mail__head { display: flex; flex-direction: column; }
.wf-mail__field {
    display: flex; gap: 7px; align-items: baseline;
    font-size: 11px; color: var(--wf-ink);
    padding: 6px 0;
}
.wf-mail__field + .wf-mail__field { border-top: 1px solid var(--wf-line); }
.wf-mail__field .lbl { color: var(--ink-dust); font-family: var(--font-tw); font-size: 9px; width: 34px; flex-shrink: 0; }
.wf-mail__field .val { color: var(--wf-ink-strong); font-weight: 500; }

/* ============================================================================
   SPREADSHEET — a true aligned grid with row-number gutter + column headers
   ============================================================================ */
.wf-sheet {
    --cols: 3;
    display: grid;
    grid-template-columns: 26px repeat(var(--cols), 1fr);
    border-top: 1px solid var(--wf-line);
    border-left: 1px solid var(--wf-line);
    border-radius: 5px;
    overflow: hidden;
    font-family: var(--font-tw);
}
.wf-sheet > div {
    padding: 5px 7px;
    border-right: 1px solid var(--wf-line);
    border-bottom: 1px solid var(--wf-line);
    font-size: 10px;
    color: var(--wf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.wf-sheet .gh {
    background: color-mix(in srgb, var(--wf-line) 32%, transparent);
    color: var(--ink-dust);
    font-size: 9px;
    text-align: center;
}
.wf-sheet .rn {
    background: color-mix(in srgb, var(--wf-line) 32%, transparent);
    color: var(--ink-dust);
    font-size: 9px;
    text-align: center;
}
.wf-sheet .num { text-align: right; font-variant-numeric: tabular-nums; }
.wf-sheet .pos { text-align: right; font-variant-numeric: tabular-nums; color: var(--wf-accent); }
.wf-sheet .lbl { color: var(--wf-ink-strong); }

/* ============================================================================
   CALENDAR — day agenda: time gutter + hour rules, an event block, a move cue
   ============================================================================ */
.wf-cal { display: flex; flex-direction: column; border: 1px solid var(--wf-line); border-radius: 6px; overflow: hidden; }
.wf-cal__row { display: grid; grid-template-columns: 38px 1fr; min-height: 30px; }
.wf-cal__row + .wf-cal__row { border-top: 1px solid var(--wf-line); }
.wf-cal__t {
    font-family: var(--font-tw); font-size: 8.5px; color: var(--ink-dust);
    padding: 4px 6px; border-right: 1px solid var(--wf-line); text-align: right;
}
.wf-cal__cell { position: relative; padding: 4px 6px; display: flex; align-items: center; }
.wf-cal__ev {
    width: 100%;
    border: 1px solid var(--wf-line);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--wf-ink);
    background: color-mix(in srgb, var(--surface) 40%, transparent);
}
.wf-cal__ev--accent {
    border-color: var(--wf-accent);
    color: var(--wf-accent);
    font-weight: 600;
    background: color-mix(in srgb, var(--wf-accent) 12%, transparent);
}
.wf-cal__ghost {
    width: 100%;
    border: 1px dashed var(--wf-line);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 9.5px;
    color: var(--ink-dust);
    font-style: italic;
}
.wf-cal__foot {
    grid-column: 1 / -1;
    font-size: 9.5px; font-style: italic; color: var(--wf-accent);
    padding: 6px 8px; border-top: 1px solid var(--wf-line);
    display: flex; align-items: center; gap: 6px;
}
.wf-cal__foot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wf-accent); flex-shrink: 0; }

/* ============================================================================
   DOCUMENT — a page: letterhead rule, title, headings + body lines
   ============================================================================ */
.wf-doc { display: flex; flex-direction: column; gap: 10px; }
.wf-doc__brand {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font-family: var(--font-tw); font-size: 8.5px; color: var(--ink-dust);
    padding-bottom: 8px; border-bottom: 1px solid var(--wf-line);
    white-space: nowrap;
}
.wf-doc__brand span:first-child { overflow: hidden; text-overflow: ellipsis; }
.wf-doc__title { font-size: 13px; font-weight: 700; color: var(--wf-ink-strong); line-height: 1.25; letter-spacing: -0.01em; }
.wf-doc__h { font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-dust); margin-top: 2px; }
.wf-doc__lines { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================================
   BOARD — pipeline columns of chips
   ============================================================================ */
.wf-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.wf-board__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wf-board__h {
    font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-dust); padding-bottom: 5px; border-bottom: 1px solid var(--wf-line);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-board__card {
    border: 1px solid var(--wf-line);
    border-radius: 5px;
    padding: 6px 7px;
    font-size: 9.5px;
    color: var(--wf-ink);
    display: flex; flex-direction: column; gap: 4px;
}
.wf-board__card--accent { border-color: var(--wf-accent); }
.wf-board__card b { color: var(--wf-ink-strong); font-weight: 600; }
.wf-board__bar { height: 4px; border-radius: 2px; background: var(--wf-soft); }
.wf-board__bar--accent { background: var(--wf-accent); }

/* draft tag reused by chat/email */
.wf-draftrow { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.wf-draftrow__tag { color: var(--wf-accent); font-weight: 700; font-size: 10px; margin-right: 4px; }