/* workspace.css — the main working window (mockups/workspace.html, mockups/snippets.html):
   sidebar + chat (+ the right panel, or snippets inside the chat).
   Two schemes, swapped live via the swatch row (data-border, ?border=): `lab` (the default — cream
   paper, ink frames, hard stamp shadows, a yellow do-this cue) and `green` (a white canvas + soft
   grey lines with the Pine green accent). Everything reads --ws-* tokens; the base .win block holds
   shared defaults and each scheme overrides ground / line / accent. See journal *_28. */

/* ---- layout ----------------------------------------------------------------------------
   The workspace (.ws) and the full-screen view (.fs) share the same shell: a flex row filling
   the window, the --lead left edge, and the collapsed-sidebar behaviour. Grouped here. */
.ws,
.fs {
  position: relative;                            /* positions the drag-to-resize handles */
  display: flex; height: 100%; --lead: 40px;    /* shared left edge for title, chat and input (leaves the title icon breathing room on its left) */
  font: 14px/1.5 var(--ws-font); color: var(--ws-ink); background: var(--ws-main-bg);
}
/* drag-to-resize handles straddling the sidebar's right edge and the panel/block's left edge; JS
   (Darwin.initResizers) creates them and drives --side-w / --panel-w. A hairline shows on hover/drag. */
.rz { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 4; cursor: col-resize; touch-action: none; }
.rz::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--ws-accent); opacity: 0; transition: opacity .12s ease; }
.rz:hover::before, .rz.is-drag::before { opacity: .55; }
.rz--side { left: var(--side-w, 248px); transform: translateX(-50%); }
.rz--panel { right: var(--panel-w, 485px); transform: translateX(50%); }
.ws.is-side-hidden .rz--side, .fs.is-side-hidden .rz--side { display: none; }
.ws.is-panel-hidden .rz--panel, .ws--solo .rz--panel,
.fs:not(.is-explore):not(.is-traffic) .rz--panel { display: none; }
.win[data-skin="float"] .rz--panel { top: 60px; }   /* the floating block's edge is grabbable only BELOW the title bar, not across the tabs */
.ws.is-side-hidden,
.fs.is-side-hidden { --lead: 116px; }            /* collapsed: sit close to the sidebar toggle (~107px in); the session icon is hidden, so the toggle reads as the title icon */
.side {
  flex: none; width: var(--side-w, 248px); overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 44px 10px 12px;                    /* clears the title bar and its controls */
  background: var(--ws-side-bg); color: var(--ws-side-ink);
  border-right: 1px solid var(--ws-sep);
}
.ws.is-side-hidden .side,
.fs.is-side-hidden .side { display: none; }
/* the DRWN wordmark at the foot of the sidebar, centred — sits at the same height as the DRWN prompt
   shows in the composer when the sidebar is hidden */
.side__mark {
  margin-top: auto; margin-bottom: 24px; text-align: center;    /* aligns with the composer's first row (2-row input, 12px pad) — no jump when the sidebar toggles */
  font-family: var(--dw-display); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .01em;
  color: var(--ws-accent); user-select: none;
}
.win[data-skin="float"] .side__mark { margin-bottom: 30px; }   /* float composer sits higher (its 18px pad) */
/* the work area is a grid so header / chat / panel / composer can be arranged two ways by skin:
   integrated → panel is a full-height right column; float → header and input span the full row. */
.work {
  flex: 1; min-width: 0; min-height: 0; display: grid;
  grid-template-columns: 1fr var(--panel-w, 485px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head panel" "chat panel" "composer panel";
}
.main__head { grid-area: head; }
.chat { grid-area: chat; min-height: 0; }
.panel { grid-area: panel; }
.composer { grid-area: composer; }
/* solo: no right panel at all (mockups/snippets.html) — one column, a wider reading measure */
.ws--solo .work { grid-template-columns: 1fr; grid-template-areas: "head" "chat" "composer"; }
.ws--solo .chat__col, .ws--solo .composer__inner { max-width: 680px; }

/* bar controls (rendered into the window's title bar, right after the traffic lights) */
.bar-tools { display: flex; gap: 2px; margin-left: 12px; }
/* collapsed: the sidebar toggle drops onto the title's line (it reads as the title icon) — the offset
   is the title band's centre minus the title-bar's centre, which differs by skin (taller float header) */
.win:has(.ws.is-side-hidden) .bar-tools,
.win:has(.fs.is-side-hidden) .bar-tools { transform: translateY(6px); }
.win[data-skin="float"]:has(.ws.is-side-hidden) .bar-tools,
.win[data-skin="float"]:has(.fs.is-side-hidden) .bar-tools { transform: translateY(13px); }
.bar-btn {
  width: 26px; height: 22px; padding: 0; border: 0; border-radius: var(--ws-radius);
  background: none; color: var(--ws-bar-ink); display: grid; place-items: center; cursor: pointer;
}
.bar-btn:hover { background: var(--ws-bar-hover); }
.bar-btn:disabled { opacity: .3; cursor: default; }
.bar-btn:disabled:hover { background: none; }
.bar-btn--right { margin-left: auto; }          /* the right-panel toggle, top-right of the title bar */
/* a labelled bar button (e.g. Traffic controls on the full-screen view): auto width, standard rounding */
.bar-btn--wide { width: auto; gap: 6px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 500; }
.bar-btn[aria-pressed="true"] { color: var(--ws-accent); }
.bar-btn[aria-pressed="true"]:hover { background: var(--ws-bar-hover); }

/* skin selector: a mockup review control in the mockup-browser bar (top-right), swaps data-skin */
.skin-switch { margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.skin-opt { border: 0; background: none; color: #cbcbc9; font: 500 12px/1 var(--font, system-ui); padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.skin-opt:hover { color: #fff; }
.skin-opt.is-on { background: #fff; color: #1b1b18; }

/* border trigger: a swatch row beside the skin switch — each swatch is the option's stronger line
   colour; the active one gets a white ring. Swaps data-border on the window (?border=). */
.bd-switch { margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.bd-opt { width: 16px; height: 16px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; background: var(--sw); cursor: pointer; transition: transform .1s ease; }
.bd-opt:hover { transform: scale(1.14); }
.bd-opt.is-on { border-color: #fff; box-shadow: 0 0 0 2px #fff; }

/* property switch */
.prop { position: relative; }
.prop__btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
  border: 0; border-radius: var(--ws-radius); background: none; color: inherit;
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.prop__btn:hover, .prop__btn[aria-expanded="true"] { background: var(--ws-side-hover); }
.prop__name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prop__chev { color: var(--ws-side-muted); }
.prop__pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  margin: 0; padding: 6px; list-style: none;
  background: var(--ws-pop-bg); color: var(--ws-pop-ink);
  border: 1px solid var(--ws-pop-line); border-radius: var(--ws-radius-lg); box-shadow: var(--ws-pop-shadow);
}
.prop__opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--ws-radius); cursor: pointer; }
.prop__opt:hover { background: var(--ws-pop-hover); }
.prop__opt span { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.prop__opt b { font-weight: 500; }
.prop__opt small { font-size: 11.5px; color: var(--ws-pop-muted); }
.prop__opt .ico { color: var(--ws-accent); }

/* sessions */
.sessions h2 {
  margin: 12px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ws-side-muted);
}
.sessions ul { margin: 0; padding: 0; list-style: none; }
.sess {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--ws-radius);
  color: inherit; text-decoration: none; font-size: 13.5px;
  white-space: nowrap; overflow: hidden;
}
/* the title is the flex item that shrinks and clips — text-overflow needs a block/inline
   box, not the flex container itself, so it lives here and not on .sess */
.sess__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sess:hover { background: var(--ws-side-hover); }
.sess.is-active { background: var(--ws-side-active); color: var(--ws-side-active-ink, inherit); }
/* one fixed marker slot for every session row, so a pinned icon and a recent dot share the same
   footprint — the text lines up whichever marker sits there, and the two are interchangeable */
.sess__mark { flex: none; width: 16px; display: grid; place-items: center; }
.sess__mark .ico { width: 15px; height: 15px; color: var(--ws-side-muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ws-side-muted); }
.dot--running { background: var(--ws-run); animation: ws-pulse 1.6s ease-in-out infinite; }
.dot--done { background: var(--ws-done); animation: ws-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ws-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes ws-ping { 0% { box-shadow: 0 0 0 0 var(--ws-done-glow); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* main: header aligned with the title bar; when the sidebar is hidden, clear the bar controls */
.main__head {
  position: relative; flex: none; height: 46px; display: flex; align-items: center;   /* roomier title band */
  padding: 0 24px 0 var(--lead); border-bottom: 1px solid var(--ws-sep);
}
.main__head h1 { margin: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the session icon sits in the gutter, left of the title, so the title text stays on the shared edge.
   Sidebar shown: centred in the gutter (equal margins). Collapsed: right after the sidebar toggle. */
.main__head-ico {
  position: absolute; left: calc((var(--lead) - 15px) / 2); top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ws-muted);
}
.ws.is-side-hidden .main__head-ico,
.fs.is-side-hidden .main__head-ico { display: none; }   /* collapsed: no session icon, so the title sits tighter left */

/* chat — smaller type, open leading, a reading-width measure */
/* the top breathing room lives on the inner column, not as chat padding, so a sticky snippet header
   sticks flush to the scrollport's top edge (chat padding would leave a gap where content peeks above it) */
.chat { flex: 1; overflow: auto; padding: 0 24px 12px var(--lead); font-size: 14px; line-height: 1.72; }
.chat__col { max-width: 600px; margin: 0; padding-top: 16px; }     /* left-aligned, compact — not centred */
.msg { margin: 0 0 20px; }
.msg p { margin: 0 0 11px; }
.msg p:last-child { margin-bottom: 0; }
.msg--user {
  padding: 10px 14px; border-radius: var(--ws-radius-lg);
  background: var(--ws-user-bg); border: 1px solid var(--ws-user-line);
}
.msg.is-working p:last-child::after {              /* the assistant is still writing */
  content: ""; display: inline-block; width: 7px; height: 13px; margin-left: 5px; vertical-align: -2px;
  background: var(--ws-accent); animation: ws-pulse 1s ease-in-out infinite;
}
.tbl { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; }
.tbl th, .tbl td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--ws-line); }
.tbl th { font-weight: 600; color: var(--ws-muted); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.opts { margin: 4px 0 12px; padding: 0; list-style: none; }
.opts li { margin: 0 0 12px; }
.opts strong { display: block; font-weight: 600; margin-bottom: 2px; color: var(--ws-accent-strong); }
.fig { margin: 4px 0 12px; }
.fig .plan { display: block; width: 100%; height: auto; color: var(--ws-ink); }
.fig figcaption { margin-top: 6px; font-size: 12px; color: var(--ws-muted); }
.plan__t { font: 11px var(--ws-font); fill: currentColor; }
.plan__t--small { font-size: 10px; opacity: .7; }
.plan__t--street { opacity: .7; }
.plan__t--cand { font-weight: 600; fill: var(--ws-accent); }
.plan__street { fill: currentColor; opacity: .06; }
.plan__gap { fill: var(--ws-main-bg); }
.plan__b { fill: currentColor; opacity: .12; }
.plan__cand { fill: var(--ws-tint); stroke: var(--ws-accent); stroke-width: 1.25; }

/* chat snippets: a card in the reading column. Header = the title (click toggles open ⇄ collapsed to
   the header alone) with the "open in the side panel" and pin glyphs on the right; below it the
   sections (map, simulation controls, table) glued together with a rule between them, no tabs; an
   optional footer of actions. The map section is a horizontal cut (2.3:1 at the column's width). */
/* two skins, matching the panel: integrated (default) is a flush bordered card with square corners;
   floating rounds the corners 3px, lifts the card on a light shadow and insets the map 3px. */
.snip { margin: 6px 0 12px; border: 1px solid var(--ws-snip-line); background: var(--ws-main-bg); overflow: clip; }
.win[data-skin="float"] .snip {
  border-color: var(--ws-snip-line); border-radius: 3px;   /* snippet echoes the accent, but muted — not the bright floating-window line */
  box-shadow: var(--ws-float-shadow);
}
.win[data-skin="float"] .snip__sec--map .map { padding: 3px; background: var(--ws-main-bg); }
/* the header is sticky: it holds at the top of the chat while a tall snippet scrolls past
   (overflow:clip on the card, not hidden, so the sticky header escapes to the chat scroller). */
.snip__head { position: sticky; top: 0; z-index: 2; height: 34px; display: flex; align-items: center; padding: 0 6px 0 6px; background: var(--ws-main-bg); border-bottom: 1px solid var(--ws-line); }
.snip.is-collapsed .snip__head { border-bottom: 0; }
.snip.is-collapsed .snip__body { display: none; }
.snip__title {
  flex: 1; min-width: 0; height: 100%; padding: 0 4px; display: flex; align-items: center; gap: 6px;
  border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ws-ink);
  text-align: left; cursor: pointer; text-shadow: 0 1px 1px rgba(0, 0, 0, .10);   /* a soft lift, so the snippet title reads as a heading */
}
.snip__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snip__chev { flex: none; width: 14px; height: 14px; color: var(--ws-accent); transition: transform .15s ease; }   /* clickable snippet glyphs take the accent */
.snip.is-collapsed .snip__chev { transform: rotate(-90deg); }
.snip__acts { flex: none; display: flex; gap: 2px; }
.snip__act {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none;
  color: var(--ws-accent); display: grid; place-items: center; cursor: pointer;   /* clickable snippet glyphs take the accent */
}
.snip__act:hover { background: var(--ws-side-hover); color: var(--ws-ink); }
.snip__act .ico { width: 14px; height: 14px; }
.snip__sec + .snip__sec { border-top: 1px solid var(--ws-line); }
.snip__sec--map .map { height: 296px; }
.snip__sec--map .map img { object-position: 50% 62%; }   /* the band sits a little low: clears the map control baked into the screenshots' top-left */
.snip__sec--table { padding: 2px 4px 0; }
.snip__sec--table .tbl { margin: 0; }
.snip__sec--table .tbl tr:last-child td { border-bottom: 0; }
.snip__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--ws-line); }
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px;
  border: 1px solid var(--ws-line-strong); border-radius: var(--ws-radius); background: var(--ws-main-bg);
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ws-ink); white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--ws-user-bg); }
.btn .ico { width: 14px; height: 14px; color: var(--ws-accent); }   /* grey border → coloured glyph */

/* composer: no floating block — a clean split (a rule across the main column), a borderless input
   with the DRWN › prompt on the left, no send button */
.composer { flex: none; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--ws-sep); background: var(--ws-main-bg); }
.composer__inner {                             /* input text on the shared left edge (--lead) */
  --cmp-pad: 12px;                             /* the input's top padding — shared with the prompt so it tracks the first row across skins */
  position: relative; max-width: 600px; margin-left: var(--lead); margin-right: 0; padding: var(--cmp-pad) 0;   /* symmetric top/bottom */
  display: flex; align-items: flex-start; gap: 8px;    /* top-aligned: the prompt sits on the first line of the two-row input */
}
.composer__mark {                              /* the prompt sits in the gutter, so the input text stays on the edge */
  position: absolute; right: 100%; top: var(--cmp-pad); height: 21px; margin-right: 8px;   /* top = input padding, height = one input line (13px × 1.62), so the prompt centres on the first row */
  display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  font-family: var(--dw-display); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0;
  color: var(--ws-accent); user-select: none;
}
.composer__word { display: none; }             /* expanded: only the › chevron shows */
.ws.is-side-hidden .composer__word { display: inline; }   /* collapsed: DRWN › (the freed gutter fits it) */
.composer__caret { color: var(--ws-accent); }
.composer__input {                             /* borderless, starts at two rows, auto-grows (JS) up to a cap */
  flex: 1; min-height: 42px; max-height: 168px; padding: 0; border: 0; background: none; resize: none;
  font: inherit; font-size: 13px; line-height: 1.62; color: inherit; outline: none; overflow-y: auto;
}
.composer__input::placeholder { color: var(--ws-muted); }

/* right panel: two rows — the maps (large, two tabs) over the simulation (small, one tab) */
.panel {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--ws-sep); background: var(--ws-main-bg);
}
.ws.is-panel-hidden .panel { display: none; }
.ws.is-panel-hidden .work { grid-template-columns: 1fr 0; }
/* no panel → give the chat more room (a wider reading column, still left-aligned) */
.ws.is-panel-hidden .chat__col,
.ws.is-panel-hidden .composer__inner { max-width: 820px; }
.pane { display: flex; flex-direction: column; min-height: 0; }
.pane[hidden] { display: none; }                  /* closing the last tab hides the whole block */
.pane--maps { flex: 1; position: relative; }
/* a floating square button pinned to the top-right of the map content; click toggles pinned ⇄ to-pin */
.pin-float, .full-float {
  position: absolute; top: 55px; z-index: 3; width: 26px; height: 26px; padding: 0;   /* clear the 46px tab strip */
  display: grid; place-items: center; border: 1px solid var(--ws-line); border-radius: 5px;
  background: var(--ws-main-bg); color: var(--ws-accent); cursor: pointer; text-decoration: none;   /* grey border → coloured glyph */
  box-shadow: 0 1px 3px rgba(20, 20, 20, .12);
}
.pin-float { right: 9px; }              /* top-right of the map */
.full-float { left: 9px; }             /* top-left, symmetrical to the pin: enter full screen */
.pin-float:hover, .full-float:hover { color: var(--ws-accent-strong); }
.pin-float .ico, .full-float .ico { width: 14px; height: 14px; }
.pin-float[data-pinned="true"] { border-color: var(--ws-accent); }
/* any pin button (the map's floating one, a snippet header's): outline glyph ⇄ filled accent glyph */
[data-pin] .ic-pinned { display: none; }
[data-pin][data-pinned="true"] { color: var(--ws-accent); }
[data-pin][data-pinned="true"] .ic-topin { display: none; }
[data-pin][data-pinned="true"] .ic-pinned { display: block; }
.pane--sim { flex: none; position: relative; border-top: 1px solid var(--ws-sep); }
.pane--sim .tabs { height: 34px; }   /* the sim block isn't the title band — keep its tab strip tight, less margin above the sim */
.sim[hidden], .filter[hidden] { display: none; }

/* the "Filter spots" tab: label + control per row, like the sim conditions */
.filter { display: grid; grid-template-columns: 56px 1fr; gap: 11px 12px; align-items: center; padding: 16px; }
.filter__walk { display: flex; align-items: center; gap: 10px; }
.filter__walk input { flex: 1; min-width: 0; accent-color: var(--ws-accent); }
.filter__out { flex: none; width: 46px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ws-muted); }

/* secondary block with a single tab: hide the tab row, float the close X in the content's top-right.
   (Maps keep their tab row even at one tab — this is only for .pane--sim.) */
.close-float {                                    /* same look + margins as the tab's close X, just floated */
  display: none; position: absolute; top: 8px; right: 8px; z-index: 3; width: 16px; height: 18px; padding: 0;
  place-items: center; border: 0; border-radius: 4px; background: none; color: var(--ws-muted); cursor: pointer;
}
.close-float:hover { background: var(--ws-side-hover); color: var(--ws-ink); }
.close-float .ico { width: 13px; height: 13px; }
.pane--sim.is-single .tabs { display: none; }
.pane--sim.is-single .close-float { display: grid; }
/* District overview selected → drop the simulation block; the map fills the whole right area */
.panel[data-tab="district"] .pane--sim { display: none; }
/* tabs: folder tabs with no fill behind the headers — the tab strip and the content share one
   border (the strip's bottom rule), and the active tab's own bottom edge merges across it */
.tabs {                                        /* strip height = .main__head, so the rules align; tabs sit at the bottom (flex-end), leaving space above them (integrated) and putting the card's top border at the title's height (float, seamless 2nd tab) */
  flex: none; height: 46px; display: flex; align-items: flex-end; gap: 0; padding: 0;
  border-bottom: 1px solid var(--ws-sep);
}
.tab {
  position: relative; height: 33px; padding: 0 12px; margin-bottom: -1px;   /* the tab content stays small; the strip's extra height is space above it */
  display: flex; align-items: center; gap: 4px; border: 1px solid transparent; background: none;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ws-side-muted); cursor: pointer;   /* idle tabs recede */
}
.tab:not(.is-on):hover { color: var(--ws-ink); }   /* text sharpens on hover */

/* the close action on the right of a tab — tight against the tab's right edge */
.tab__name { white-space: nowrap; }
.tab__act {
  flex: none; width: 16px; height: 18px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--ws-muted); cursor: pointer; display: none; place-items: center;
}
.tab__act:hover { background: var(--ws-side-hover); color: var(--ws-ink); }
.tab__act .ico { width: 13px; height: 13px; }
/* the selected tab shows its close button inline on the right */
.tab.is-on { padding-right: 7px; }
.tab.is-on .tab__act { display: grid; }
/* the active tab is flush and squared: its side borders drop to the strip's bottom rule and its own
   bottom merges into the content, so tab + content read as one cut-out block, and the bottom rule
   continues to the right after the tabs. The first tab shares the block's left edge. */
.tab.is-on {
  color: var(--ws-ink); font-weight: 600; background: var(--ws-main-bg); cursor: default;   /* selected = high contrast (bold ink) */
  border-color: var(--ws-line-strong); border-top-color: transparent; border-bottom-color: var(--ws-main-bg);
}
.tab.is-on:first-child { border-left-color: transparent; }

.map { flex: 1; min-height: 0; overflow: hidden; background: #ECE9E2; }
.map[hidden] { display: none; }
.map img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* simulation controls. The clock is the hero: time in the display face, play under it, and the
   hourly curve with the scrubber riding on it (the whole graph is the range input). Below, the
   conditions: days as a calendar strip, weather as icons, season as words. Pressed = ink;
   time and traffic = accent. */
.sim {                                         /* one grid for the pane: 72 px column (time, play, labels) + the rest */
  display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; row-gap: 10px; align-items: center;
  padding: 16px;
}
.clock__lead { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 8px; }
.clock__time {
  font-family: var(--dw-display); font-size: 27px; font-weight: 600; line-height: 1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ws-ink);
}
.clock__play {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--ws-radius);
  background: var(--ws-accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.clock__play:hover { background: var(--ws-accent-strong); }
.clock__play .ico-pause { display: none; }
.clock__play.is-on .ico-play { display: none; }
.clock__play.is-on .ico-pause { display: block; }
.clock__track { min-width: 0; margin-bottom: 8px; }
.clock__graph { position: relative; height: 58px; }
.clock__curve { display: block; width: 100%; height: 100%; }
.clock__area { fill: var(--ws-accent); fill-opacity: .12; }
.clock__line { fill: none; stroke: var(--ws-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.clock__head {                                 /* playhead: a hairline at --t, a dot on the curve at --y */
  position: absolute; top: 0; bottom: 0; left: calc(var(--t, 0) * 100%);
  border-left: 1.5px solid var(--ws-warm); opacity: .9; pointer-events: none;  /* clay playhead */
}
.clock__dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; pointer-events: none;
  left: calc(var(--t, 0) * 100%); top: calc(var(--y, 1) * 100%); transform: translate(-50%, -50%);
  background: var(--ws-warm-2); box-shadow: 0 0 0 2px var(--ws-main-bg);   /* ochre value dot */
}
.clock__range {                                /* invisible, over the graph: drag or click anywhere */
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none;
}
.clock__range::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 58px; }
.clock__range::-moz-range-thumb { width: 4px; height: 58px; border: 0; }
.clock__graph:has(.clock__range:focus-visible) .clock__dot { box-shadow: 0 0 0 2px var(--ws-main-bg), 0 0 0 4px var(--ws-accent); }
.clock__ticks { position: relative; height: 15px; margin-top: 3px; font-size: 10.5px; color: var(--ws-muted); font-variant-numeric: tabular-nums; }
.clock__ticks span { position: absolute; top: 0; left: calc(var(--x, 0) * 100%); transform: translateX(-50%); }
.clock__ticks span:first-child { transform: none; }
.clock__ticks span:last-child { transform: translateX(-100%); }

/* the conditions: a label and a standard segmented control per row, at natural width */
.sim__lab { font-size: 12px; font-weight: 500; color: var(--ws-muted); }
.seg { justify-self: start; display: inline-flex; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); overflow: hidden; }
.seg button {
  height: 26px; padding: 0 9px; border: 0; border-left: 1px solid var(--ws-line); background: none;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ws-muted); white-space: nowrap; cursor: pointer;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--ws-user-bg); color: var(--ws-ink); }
.seg button.is-on, .seg button.is-on + button { border-left-color: var(--ws-ink); }
.seg button.is-on { background: var(--ws-ink); color: var(--ws-main-bg); cursor: default; }

/* ---- base tokens: shared defaults for both schemes -------------------------------------
   Sans throughout, near-black ink, rounded radii, soft shadows. The `green` and `lab` scheme
   blocks (below, under the scheme trigger) override ground / line / accent on top of these. --- */
.win {
  --ws-font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ws-main-bg: #FFFFFF;
  --ws-ink: #201F1D; --ws-muted: #6E6E6A;
  --ws-sep: #6A685E;            /* structural separators — the heaviest layer (soft grey, not black); they build the grid */
  --ws-line: #D4D4CF; --ws-line-strong: #C4C4BF; --ws-head-line: #D4D4CF;   /* fine in-content rules (tables), neutral control borders */
  --ws-side-bg: #F6F6F5; --ws-side-ink: #34332F; --ws-side-muted: #9A9A95;
  --ws-side-hover: #EDEDEB; --ws-side-active: var(--ws-tint); --ws-side-line: #EAEAE8;
  --ws-user-bg: #F5F5F4; --ws-user-line: transparent;
  --ws-composer-bg: #FFFFFF; --ws-composer-shadow: 0 2px 10px -4px rgba(0, 0, 0, .10);
  --ws-pop-bg: #FFFFFF; --ws-pop-ink: #201F1D; --ws-pop-muted: #6E6E6A; --ws-pop-line: #ECECEA;
  --ws-pop-hover: #F4F4F2; --ws-pop-shadow: 0 12px 32px -8px rgba(0, 0, 0, .16);
  --ws-bar-ink: #5C5B57; --ws-bar-hover: #EAEAE8;
  --ws-radius: 6px; --ws-radius-lg: 12px;
  /* floating windows carry the bright accent; in-chat snippets echo it, muted; both lift on one shadow */
  --ws-line-float: #12A150;      /* floating-window border — the bright green accent */
  --ws-snip-line: #9AD1B8;       /* in-chat snippet border — same green, muted (references the same block) */
  --ws-float-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 10px 24px -12px rgba(20, 20, 20, .12);
  /* accent: the brighter green — buttons, dots, curve, cursor, clickable icons, snippet echo. */
  --ws-accent: #12A150; --ws-run: #12A150; --ws-done: #12A150; --ws-done-glow: #12A15080;
  --ws-accent-strong: #0E7F40;   /* deep green: option titles, pressed accent controls */
  --ws-tint: #E3F5EC;            /* green tint: selected rows, callout fills */
  --ws-warm: #C15F3C;            /* clay: warm marker — the clock playhead */
  --ws-warm-2: #B07A2E;          /* ochre: estimate / provenance captions */
}

/* ---- scheme trigger (mockup review control, ?border= / the swatch row) --------------------------
   Two schemes. `green` is a soft-grey line family with the Pine green accent on the buttons / dots /
   curve / clickable icons. `lab` (the default) is the Galileo Viewer Kit skin — cream paper, ink
   frames, hard stamp shadows — with a yellow do-this cue (defined lower down). See journal *_28. */
.win[data-border="green"] {
  --ws-sep: #CFCFCA;                                           /* structure: soft light grey */
  --ws-line: #E2E2DE; --ws-line-strong: #DCDCD8; --ws-head-line: #E2E2DE;
  --ws-line-float: #C6C6C0;                                    /* floating windows: neutral grey */
  --ws-snip-line: #DCDCD8;                                     /* snippets: neutral grey */
  --ws-main-bg: #FFFFFF; --ws-side-bg: #F1F1EF;
  --ws-accent: #2F6E52; --ws-accent-strong: #244F3A;          /* Pine green accent */
  --ws-tint: #E9F1ED; --ws-run: #2F6E52; --ws-done: #2F6E52; --ws-done-glow: #2F6E5280;
}


/* ---- skin: float — no separated right column; the map and the controls become floating cards.
   The header and the input each take the full row with their own separator; the map/controls float
   between them. All region rules use one contrasty line (--ws-line-float). ------------------------- */
.win[data-skin="float"] .work {                 /* header and input span both columns (full row) */
  grid-template-areas: "head head" "chat panel" "composer composer";
}
.win[data-skin="float"] .side { border-right-color: var(--ws-sep); }                      /* separators stay structural, even in float */
/* float: the title band reaches down to the card's top border (tab-strip height 46 + the panel's 14px
   top padding, less the 1px tab overlap), so the header's separator continues as the card's top edge —
   the active tab reads as a seamless "second tab" after the title. */
.win[data-skin="float"] .main__head { height: 61px; border-bottom: 1px solid var(--ws-sep); }   /* own separator, full row; its bottom border shares the SAME pixel row as the card's top border (so the line isn't 1px doubled), and the title bar ends at the tabs (the panel covers its right) */
.win[data-skin="float"] .composer { border-top-color: var(--ws-sep); }
.win[data-skin="float"] .composer__inner { --cmp-pad: 18px; }               /* roomier, but symmetric — prompt tracks via --cmp-pad */
.win[data-skin="float"] .work .panel {
  border-left: 0; padding: 14px 14px 14px 0; gap: 4px;   /* no left inset: blocks sit flush to the column
                                        edge so the header/input separators meet their left border */
  background: var(--ws-main-bg);     /* own ground, bleeding to the right — covers the header's bottom
                                        rule and the composer's top rule under the right column */
  grid-column: 2; grid-row: 1 / 4;   /* span the header, chat AND composer rows: the tab bar runs up into
                                        the title bar, and the cards flow over the input below */
  z-index: 2;                        /* float above the header's right side and the full-width input */
}
/* the block outline is ONE continuous line: the border lives on the contents (map / sim); the active
   tab is a bump sitting on top of it and merging in; inactive tabs are borderless labels. The pane
   itself draws nothing — no rectangle around the whole block, no top/right frame above the contents. */
.win[data-skin="float"] .work .pane { border: 0; background: transparent; overflow: visible; box-shadow: none; }
.win[data-skin="float"] .work .pane--sim { border-top: 0; }
.win[data-skin="float"] .work .tabs { border-bottom: 0; margin-bottom: 0; }   /* no overlap: the selected tab sits ABOVE the card's top line, not spilling 1px into it */
/* lab: the yellow title-bar band runs along the tab strip too, behind the (transparent) non-selected
   tabs, and stops at the block's edge — the raised white selected tab breaks it. */
.win[data-skin="float"][data-border="lab"] .pane--maps .tabs { box-shadow: inset 0 -3px 0 var(--ws-yellow-tint); }
.win[data-skin="float"] .work .panel .map,
.win[data-skin="float"] .work .panel .sim,
.win[data-skin="float"] .work .panel .filter {
  border: 1px solid var(--ws-line-float); border-radius: 0 3px 3px 3px;   /* top-left square: the active tab sits there */
  background: var(--ws-main-bg);                             /* white ground inside the card */
  box-shadow: var(--ws-float-shadow);
}
.win[data-skin="float"] .work .panel .map { padding: 3px; background: var(--ws-main-bg); }  /* white inset between border and map */
/* single-tab (no tab row): the card's top-left rounds like the others */
.win[data-skin="float"] .work .pane--sim.is-single .sim,
.win[data-skin="float"] .work .pane--sim.is-single .filter { border-radius: 3px; }
.win[data-skin="float"] .work .tab.is-on {                   /* the bump: top + sides sit ABOVE the line, its bottom on it */
  position: relative; z-index: 1;                            /* paint above the contents */
  background: var(--ws-main-bg); margin-bottom: 0;           /* bottom exactly on the card's top line — no spill below it */
  border: 1px solid var(--ws-line-float); border-bottom: 0; border-radius: 3px 3px 0 0;
}
/* open the card's top line UNDER the tab, but only BETWEEN the side borders (left:0/right:0 = the tab's
   inner edges) — so the tab merges into the card cleanly while the two bottom corners stay continuous
   ink (no cream gaps, no black line). */
.win[data-skin="float"] .work .tab.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ws-main-bg);
}


/* ---- full-screen map view (mockups/fullscreen.html) -------------------------------------------
   Laid out like the workspace: a grid with the header over the map and the right panel a full-height
   column, so (integrated) the traffic tab row sits up in the title band. Two skins:
     · Integrated — a bordered right column: traffic on top as a tabbed section, the chat below with no
       tabs, just a floated close. Traffic controls is a title-bar button.
     · Floating — the blocks are floating cards over the map (the workspace float-card design). Traffic
       controls is a map button (top-right) like Explore (bottom-right).
   A section's map button hides while that section is open. A collapse button (top-left) exits.
   The .fs shell (flex row, --lead, collapsed-sidebar rules) is grouped with .ws up in ---- layout ----. */

/* work area grid: header over the map; the panel a full-height right column (tab row in the band) */
.fs-work {
  flex: 1; min-width: 0; min-height: 0; position: relative; display: grid;
  grid-template-columns: 1fr var(--panel-w, 485px); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head panel" "map panel";
}
.fs:not(.is-explore):not(.is-traffic) .fs-work { grid-template-columns: 1fr 0; }   /* no panel → map fills */
.fs.is-explore:not(.is-traffic) .fs-work { grid-template-areas: "head head" "map panel"; }   /* chat-only → header full width, panel below it (out of the title band) */
.fs .main__head { grid-area: head; }
.fs-map { grid-area: map; }
.fs-panel { grid-area: panel; }

/* header: the session title, then the sub-page as a dot-separated muted subtitle (one line) */
.main__sub { font-weight: 500; color: var(--ws-muted); }

/* the RECENT sub-page: no marker, shifted right and smaller, so it reads as a child of its session */
.subsess { margin: 1px 0 0; padding: 0; list-style: none; }
.sess--sub { margin-left: 25px; padding: 4px 8px; font-size: 12.5px; }

/* a right-side group in the title bar (Traffic controls toggle + the panel icon) */
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* the map, full-bleed below the header */
.fs-map { position: relative; min-width: 0; overflow: hidden; background: #ECE9E2; }
.fs-mapimg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* map buttons: rounded like the app's buttons; a button hides while its section is open */
.map-fab {
  position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--ws-line-strong); border-radius: var(--ws-radius);
  background: var(--ws-main-bg); color: var(--ws-ink); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 8px 20px -8px rgba(20, 20, 20, .22);
  border-radius: 0;                     /* integrated: square, like the snippet card */
}
.map-fab:hover { background: var(--ws-user-bg); }
.map-fab .ico { width: 16px; height: 16px; color: var(--ws-accent); }   /* grey border → coloured glyph */
.map-fab[aria-pressed="true"] { border-color: var(--ws-accent); color: var(--ws-accent); }
.map-fab[aria-pressed="true"] .ico { color: var(--ws-accent); }
.map-fab--explore { bottom: 8px; right: 8px; }   /* tight in the corner, like the exit-fullscreen button */
.map-fab--traffic { display: none; }                 /* a map button only in the float skin */
.fs.is-explore .map-fab--explore { display: none; }

/* the title-bar Traffic-controls toggle: integrated only, and gone while the traffic tab is open */
.win[data-skin="float"] .bar-btn--traffic,
.win.is-traffic .bar-btn--traffic { display: none; }
.win[data-skin="float"] .map-fab { border-radius: 3px; }   /* float: like the float snippet card */

/* ---- integrated: a bordered right column ----------------------------------------------------------
   Traffic docks as a tabbed top section (its tab row is at the panel's top, in the title band, exactly
   like the workspace panel); the chat below has no tabs, just a floated close. */
.fs-panel { display: none; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--ws-sep); background: var(--ws-main-bg); }
.fs.is-explore .fs-panel, .fs.is-traffic .fs-panel { display: flex; }
.tc { display: flex; flex-direction: column; min-height: 0; }
.pane--tc { flex: none; display: none; }
.fs.is-traffic .pane--tc { display: flex; }
.fs.is-explore.is-traffic .pane--tc { border-bottom: 1px solid var(--ws-line); }
.pane--chat { flex: 1; min-height: 0; position: relative; display: none; }
.fs.is-explore .pane--chat { display: flex; flex-direction: column; }
.pane--chat .close-float { display: grid; }
.pane--chat .chat { flex: 1; min-height: 0; padding: 14px 18px 8px; }
.pane--chat .chat__col { max-width: none; padding-top: 0; }
.pane--chat .composer { border-top: 1px solid var(--ws-line); }
.pane--chat .composer__inner { margin-left: 18px; max-width: none; padding: 12px 18px 12px 0; }   /* symmetric, matches the main composer */
.pane--chat .composer__mark { display: none; }        /* no DRWN prompt in the panel chat */

/* ---- float: PARITY with the workspace float panel — the right panel is a column of floating cards
   (NOT an overlay). Same recipe as `.win[data-skin="float"] .work .panel`: no left border, 14px
   padding, 8px gap between the cards, the tab bar pulled up into the title band; the map is the column
   to the left. Integrated and float share the SAME grid; only the card styling differs. ----------- */
.win[data-skin="float"] .fs .side { border-right-color: var(--ws-sep); }
.win[data-skin="float"] .fs .main__head { border-bottom-color: var(--ws-sep); }
.win[data-skin="float"] .fs-panel { border-left: 0; padding: 14px 14px 14px 0; gap: 8px; background: transparent; z-index: 2; }
.win[data-skin="float"] .fs-map { grid-column: 1 / -1; }   /* map spans full width behind the transparent panel, so it shows through around the cards */
/* the traffic map button (float only), top-right of the map; hidden while the card is open */
.win[data-skin="float"] .map-fab--traffic { display: inline-flex; top: 8px; right: 8px; }   /* tight in the corner */
/* Explore-only (no traffic): drop the chat card below the traffic-controls button so it ends short of it */
.win[data-skin="float"] .fs.is-explore:not(.is-traffic) .fs-panel { padding-top: 54px; }
.win[data-skin="float"] .fs.is-traffic .map-fab--traffic { display: none; }
/* traffic card: the tab is a bump; the sim carries the border + rounding + shadow */
.win[data-skin="float"] .pane--tc .tabs { border-bottom: 0; margin-bottom: -1px; }
.win[data-skin="float"] .pane--tc .sim {
  border: 1px solid var(--ws-line-float); border-radius: 0 3px 3px 3px; background: var(--ws-main-bg);
  box-shadow: var(--ws-float-shadow);
}
.win[data-skin="float"] .pane--tc .tab.is-on {
  position: relative; z-index: 1; background: var(--ws-main-bg); margin-bottom: 0;
  border: 1px solid var(--ws-line-float); border-bottom: 0; border-radius: 3px 3px 0 0;
}
/* chat card: a plain floating card (no tabs) with a floated close */
.win[data-skin="float"] .pane--chat {
  border: 1px solid var(--ws-line-float); border-radius: 3px; background: var(--ws-main-bg); overflow: clip;
  box-shadow: var(--ws-float-shadow);
}
.win[data-skin="float"] .pane--chat .close-float { top: 8px; }

/* exit full screen: the same corner button as the workspace's enter button, at the map's top-left */
.full-float--exit { top: 6px; left: 9px; z-index: 6; }


/* ================================================================================================
   LAB — a darwin skin built on the Galileo Viewer Kit's "Lab DS" ideas: CREAM PAPER surfaces (not
   white), INK borders, HARD-OFFSET (no-blur, translucent-ink) "stamp" shadows, tight rectangles, a
   green "active" accent with a yellow "do-this" cue, and mono UPPERCASE micro-labels. Ported from
   ~/a2ic/k12/galileo/galileo_viewer_kit/css/tokens.css. See journal *_26 / *_28.
   ================================================================================================ */
.win[data-border="lab"] {
  --ws-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* paper + ink */
  --ws-main-bg: #FFFDF5;                        /* cream paper (Lab --color-surface) */
  --ws-side-bg: #F4F1E1;                        /* warm cream chrome (Lab --color-bg) */
  --ws-ink: #1A1A1A; --ws-muted: #6A695F; --ws-side-ink: #43423D; --ws-side-muted: #8A8776;
  --ws-side-hover: #EDE9D9; --ws-user-bg: #F3EFDF; --ws-bar-hover: #EDE9D9;
  --ws-pop-bg: #FFFDF5; --ws-pop-hover: #EDE9D9; --ws-pop-line: rgba(26, 26, 26, .14);
  /* borders: translucent-ink hairlines for separators, solid ink for card frames */
  --ws-sep: rgba(26, 26, 26, .24); --ws-line: rgba(26, 26, 26, .14); --ws-line-strong: rgba(26, 26, 26, .22); --ws-head-line: rgba(26, 26, 26, .14);
  --ws-snip-line: #1A1A1A; --ws-line-float: #1A1A1A;
  /* accent: Lab green (active / live / done) + yellow (do-this) */
  --ws-accent: #0E8646; --ws-accent-strong: #0D773E; --ws-run: #0E8646; --ws-done: #0E8646; --ws-done-glow: #0E864680;
  --ws-tint: #D8EFDF; --ws-side-active: #FBE9B5;   /* selected session row → yellow tint */
  --ws-yellow: #F5C24E; --ws-yellow-hover: #EDB22D; --ws-yellow-tint: #FBE9B5;   /* Lab "do-this" yellow (hover DARKER) */
  --ws-warm: #E07A2A; --ws-warm-2: #C8A21A;
  /* tight radii + hard "stamp" shadows */
  --ws-radius: 5px; --ws-radius-lg: 6px;
  --ws-solid-card: 3px 3px 0 rgba(26, 26, 26, .14);
  --ws-solid-float: 6px 6px 0 rgba(26, 26, 26, .18);
  --ws-float-shadow: 6px 6px 0 rgba(26, 26, 26, .18);   /* floating windows: the Lab --shadow-panel stamp */
}
/* cards are ink-framed paper on a hard stamp shadow */
.win[data-border="lab"] .snip { border-width: 1.5px; border-radius: 5px; box-shadow: var(--ws-solid-card); }
.win[data-border="lab"] .snip__title { font-family: var(--ws-mono); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 500; text-shadow: none; }
/* tab + section labels → the Lab instrument look: mono, uppercase, tracked */
.win[data-border="lab"] .tab { font-family: var(--ws-mono); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
/* buttons, the map's floating controls and the full-screen FABs become paper STAMPS (ink frame + hard shadow) */
.win[data-border="lab"] .btn,
.win[data-border="lab"] .pin-float,
.win[data-border="lab"] .full-float,
.win[data-border="lab"] .map-fab { border-color: var(--ws-ink); box-shadow: var(--ws-solid-card); }
.win[data-border="lab"] .clock__play { border-radius: 5px; box-shadow: var(--ws-solid-card); }

/* ---- the yellow "do-this" affordances — Lab leaning HARD into yellow.
   On top of the paper/ink/stamp base above: a yellow primary action, tab cap and header rule. ---- */
/* the primary snippet action (first in the footer) is a yellow stamp; the rest stay cream stamps */
.win[data-border="lab"] .snip__foot .btn:first-child {
  background: var(--ws-yellow); border-color: var(--ws-ink); color: var(--ws-ink);
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
}
.win[data-border="lab"] .snip__foot .btn:first-child:hover { background: var(--ws-yellow-hover); }
.win[data-border="lab"] .snip__foot .btn:first-child .ico { color: var(--ws-ink); }
/* a yellow "you are here" cap on the selected tab, and a yellow rule under the session header */
.win[data-border="lab"] .tab.is-on { box-shadow: inset 0 3px 0 var(--ws-yellow); }
.win[data-border="lab"] .main__head { border-bottom-color: var(--ws-ink); box-shadow: inset 0 -3px 0 var(--ws-yellow-tint); }