/* ============================================================================
   WELL & GOOD — CLIENT PORTAL DESIGN SYSTEM
   "Same person, fresh out the shower and in spanx."

   The website is full glam. The portal is the same identity, bare-faced:
   warm light ground, a fine + faint grid breathing in the gutters, hard
   corners and hairlines doing the structural work (the spanx), the dark
   chrome washed off, one Sulfur accent worn like a single earring.

   Organised atomically so it stays replicable:
     0 · FONTS        the ZT Talk faces, by width and weight
     0 · TOKENS       every value the system is allowed to use
     1 · FOUNDATIONS  ground, grid, base type, links, focus
     2 · ATOMS        labels, buttons, inputs, state marks
     3 · MOLECULES    rows, cards, progress, statebar, wizard, panels, wayfinding
     4 · ORGANISMS    nav, footer, page shells, board
     5 · RESPONSIVE + MOTION

   Brand source: brands/wellgoodco/brand.md + web.md. Floor: VISUAL.md.
   Mode: product (restraint is the floor; personality stays on the website).
   ========================================================================== */

/* ── 0 · FONTS ─────────────────────────────────────────────────────────────
   One family, three width registers. Condensed carries display and structure,
   Expanded carries prose and controls, SemiCondensed at Medium carries the
   label register (uppercase tracked readouts). Light weights never appear
   below display sizes: thin strokes at label size failed legibility. */
@font-face { font-family:"WG Talk Condensed"; src:url("/assets/projects/fonts/ZTTalk-BlackCondensed.woff") format("woff"); font-weight:900; font-display:swap; }
@font-face { font-family:"WG Talk Condensed"; src:url("/assets/projects/fonts/ZTTalk-BoldCondensed.woff")  format("woff"); font-weight:700; font-display:swap; }
@font-face { font-family:"WG Talk Condensed"; src:url("/assets/projects/fonts/ZTTalk-LightCondensed.woff") format("woff"); font-weight:300; font-display:swap; }

@font-face { font-family:"WG Talk Expanded"; src:url("/assets/projects/fonts/ZTTalk-LightExpanded.woff")  format("woff"); font-weight:300; font-display:swap; }
@font-face { font-family:"WG Talk Expanded"; src:url("/assets/projects/fonts/ZTTalk-Expanded.woff")       format("woff"); font-weight:400; font-display:swap; }
@font-face { font-family:"WG Talk Expanded"; src:url("/assets/projects/fonts/ZTTalk-MediumExpanded.woff")  format("woff"); font-weight:500; font-display:swap; }
@font-face { font-family:"WG Talk Expanded"; src:url("/assets/projects/fonts/ZTTalk-BoldExpanded.woff")    format("woff"); font-weight:700; font-display:swap; }

/* Label register → Medium SemiCondensed (declared across 300–500 so any
   legacy weight request resolves to the Medium file). The earlier Light
   Condensed remap failed on screen: thin strokes, uppercase, tracked, small
   is unreadable. Labels are Medium 500 per web.md; readability wins. */
@font-face { font-family:"WG Talk SemiCondensed"; src:url("/assets/projects/fonts/ZTTalk-MediumSemiCondensed.woff") format("woff"); font-weight:300; font-display:swap; }
@font-face { font-family:"WG Talk SemiCondensed"; src:url("/assets/projects/fonts/ZTTalk-MediumSemiCondensed.woff") format("woff"); font-weight:400; font-display:swap; }
@font-face { font-family:"WG Talk SemiCondensed"; src:url("/assets/projects/fonts/ZTTalk-MediumSemiCondensed.woff") format("woff"); font-weight:500; font-display:swap; }

/* ── 0 · TOKENS ───────────────────────────────────────────────────────────
   Nothing in the system uses a value that is not declared here. */
:root {
  /* grounds — warm, light, fresh */
  --wg-bg:        #faf9f8;   /* Seasalt, page ground */
  --wg-bg-2:      #eceae6;   /* warm soft: hover, quiet fills, board columns */
  --wg-bg-3:      #e5e6e3;   /* Platinum: context panels, deeper fill */
  --wg-card:      #faf9f8;   /* card ground, solid so the grid never shows through text */

  /* ink */
  --wg-text:      #051a00;   /* Midnight, primary ink ~18:1 */
  --wg-text-2:    #49514a;   /* secondary text, 7.4:1 on Seasalt. AAA on purpose:
                                the light/expanded faces run optically thin, so
                                AA-passing greys still read washed out. */
  --wg-ink:       #051a00;   /* Midnight: titles, primary action, current state */

  /* lines — hairlines do the structural work */
  --wg-border:        #dcdcd6;   /* quiet hairline, inner dividers */
  --wg-border-strong: #b7bbb4;   /* card frames, structure */

  /* accent + progress — the only saturated colour in the system */
  --wg-sulfur:    #bfff00;   /* worn once per surface: progress fill + primary-button hover */
  --wg-woodsmoke: #041606;   /* progress track */

  /* shape — hard corners always (brand); circles only for status dots + radio */
  --wg-radius:    0;
  --wg-radius-lg: 0;

  /* grid signature — fine + faint, present only in the gutters */
  --wg-grid-alpha: 0.022;
  --wg-grid:       rgba(5, 26, 0, var(--wg-grid-alpha));
  --wg-grid-cell:  0.5rem;

  /* body weight dial — 400 reads fresh/light; bump to 500 if real ZT Talk
     reads spindly on the page in long passages. One value, whole portal. */
  --wg-body-weight: 400;

  /* page gutter — fluid, never a fixed cap on the chrome */
  --wg-gutter: clamp(1rem, 4vw, 3rem);
}

/* ── 1 · FOUNDATIONS ──────────────────────────────────────────────────────
   Ground + grid, base type, links, focus. The grid lives on the body; every
   text-bearing surface paints solid over it (the hard rule: no text on grid). */
html.wg-portal body {
  background-color: var(--wg-bg);
  background-image:
    linear-gradient(to right,  var(--wg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wg-grid) 1px, transparent 1px);
  background-size: var(--wg-grid-cell) var(--wg-grid-cell);
  color: var(--wg-text);
  font-family: "WG Talk Expanded", "Segoe UI", sans-serif;
  font-weight: var(--wg-body-weight);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;   /* lock to light: a visitor's OS/browser dark mode must
                            not darken native form controls (inputs, selects). */
  /* Sticky footer: body is a full-height flex column, main stretches. */
  min-height: 100vh;
  display: flex; flex-direction: column;
}
html.wg-portal body .wg-main { flex: 1 0 auto; }

/* Display + structure: Condensed. Bones restored, drama dialed back from the
   website's 5.7rem to a portal-appropriate scale. */
.wg-portal h1 {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--wg-ink);
  margin: 0 0 0.6rem;
}
.wg-portal h2 {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 900; font-size: 2rem; line-height: 1.06;
  color: var(--wg-ink); margin: 2.5rem 0 0.75rem;
}
.wg-portal h3 {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.45rem; line-height: 1.15;
  color: var(--wg-ink); margin: 2rem 0 0.6rem;
}
.wg-portal h4 {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.2rem; line-height: 1.2;
  color: var(--wg-ink); margin: 1.5rem 0 0.5rem;
}
/* Lede: the first paragraph after a page title. Expanded, light, capped in ch. */
.wg-lede { font-size: 1.3rem; line-height: 1.4; color: var(--wg-text); max-width: 60ch; margin: 0 0 1.75rem; }
.wg-portal strong { font-weight: 700; font-family: "WG Talk Expanded", sans-serif; }

/* Links — ink, quiet hairline underline that darkens on hover. */
.wg-portal a { color: inherit; }
.wg-portal main a {
  color: var(--wg-ink); text-decoration: underline;
  text-underline-offset: 0.15em; text-decoration-color: var(--wg-border-strong);
}
.wg-portal main a:hover, .wg-portal main a:focus-visible { text-decoration-color: var(--wg-ink); }

/* Focus — ink ring, always visible. Brand specifies a Sulfur ring, but raw
   Sulfur on Seasalt is ~1.2:1 and fails visibility; ink is the accessible
   choice on the light substrate. Accessibility is the floor. */
.wg-portal :focus-visible { outline: 2px solid var(--wg-ink); outline-offset: 2px; }

/* Skip-link — keyboard escape hatch from chrome to content (WCAG 2.4.1). */
.wg-skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 1000;
  background: var(--wg-ink); color: var(--wg-bg);
  padding: 0.5rem 0.875rem; font-weight: 700; text-decoration: none;
  border: 1px solid var(--wg-ink);
}
.wg-skip-link:focus, .wg-skip-link:focus-visible {
  top: 0.5rem; outline: 2px solid var(--wg-ink); outline-offset: 2px;
  color: var(--wg-bg); text-decoration: none;
}

/* Media blocks — real room, hairline frame, hard corners. */
.eco-img { display: block; width: 100%; height: auto; margin: 1.75rem 0;
  border: 1px solid var(--wg-border); border-radius: var(--wg-radius); }
.eco-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  margin: 1.75rem 0; border: 1px solid var(--wg-border); border-radius: var(--wg-radius);
  background: var(--wg-bg-3); }

/* ── 2 · ATOMS ────────────────────────────────────────────────────────────
   Labels, buttons, inputs, state marks — the smallest reusable pieces. */

/* Label / eyebrow — the condensed technical readout. Light 300, uppercase,
   tracked open so the thin strokes stay legible. The single most-repeated
   atom: every section label, field group, status tag, sidebar key uses it.
   Held at 14px (0.875rem), the accessibility floor for labels. */
:where(.wg-eyebrow, .wg-label) {
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wg-text-2); margin: 0 0 0.4rem;
}
.wg-label { margin: 0; }

/* Buttons — primary is ink that flips to Sulfur on hover (one of the two
   sanctioned Sulfur moments). Ghost is a hairline outline. Hard corners. */
.wg-btn {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  background: var(--wg-ink); color: var(--wg-bg);
  border: 1px solid var(--wg-ink); border-radius: var(--wg-radius);
  padding: 0.5rem 1rem; cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.wg-btn:hover, .wg-btn:focus-visible { background: var(--wg-sulfur); color: var(--wg-ink); border-color: var(--wg-ink); }

/* Secondary: solid white button with the same dark border as the fields.
   Not a transparent ghost — a real, filled control. */
.wg-btn-ghost {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 1rem;
  background: var(--wg-bg); color: var(--wg-ink);
  border: 1px solid var(--wg-ink); border-radius: var(--wg-radius);
  padding: 0.375rem 0.75rem; cursor: pointer;
  transition: background 150ms ease;
}
.wg-btn-ghost:hover, .wg-btn-ghost:focus-visible { background: var(--wg-bg-2); }

/* An <a class="wg-btn"> in main inherits the link underline + ink colour;
   scope the button colours so they win over `.wg-portal main a`. */
.wg-portal a.wg-btn { color: var(--wg-bg); text-decoration: none; }
.wg-portal a.wg-btn:hover, .wg-portal a.wg-btn:focus-visible { color: var(--wg-ink); text-decoration: none; }
.wg-portal a.wg-btn-ghost { color: var(--wg-text); text-decoration: none; }
.wg-portal a.wg-btn-ghost:hover, .wg-portal a.wg-btn-ghost:focus-visible { color: var(--wg-text); text-decoration: none; }

/* Inputs — quiet fields, ink focus, hairline frames. */
.wg-field { margin-bottom: 1.75rem; max-width: 60ch; }
.wg-field > label {
  display: block; margin-bottom: 0.4rem;
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif;
  font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wg-text-2);
}
.wg-field .wg-hint { font-size: 1rem; color: var(--wg-text-2); margin: 0 0 0.6rem; line-height: 1.4; }
/* Fields: white fill, dark text, a solid dark border. Highest-contrast,
   unmistakably light mode. appearance:none strips native control rendering so
   no browser dark mode (or rounded/shadowed UA style) can override it. */
.wg-input, .wg-portal textarea.wg-input, .wg-portal select.wg-input {
  appearance: none; -webkit-appearance: none;
  width: 100%; background: var(--wg-bg); color: var(--wg-text);
  border: 1px solid var(--wg-ink); border-radius: var(--wg-radius);
  padding: 0.625rem 0.875rem; font-family: inherit; font-size: 1rem; line-height: 1.5;
  box-shadow: none; transition: box-shadow 120ms ease;
}
.wg-input:hover { box-shadow: inset 0 0 0 1px var(--wg-ink); }
.wg-input:focus { background: var(--wg-bg); border-color: var(--wg-ink);
  outline: 2px solid var(--wg-ink); outline-offset: 2px; box-shadow: none; }
.wg-form-section {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.0625rem; color: var(--wg-ink);
  margin: 2rem 0 0.875rem;
}
.wg-check { width: 1.125rem; height: 1.125rem; accent-color: var(--wg-ink); }

/* Form layout — fields are content-sized and flow across the full width, never
   one full-width stack capped at a reading measure. Wrap a fieldset in
   .wg-form-grid and size each field by what it holds; the form renderer maps
   Frappe field types to these widths (Date/Select -> sm, Data -> md,
   Text/Small Text -> full). Inputs fill their field; the field sets the width. */
/* Two-column grid — short fields take one column, long fields and textareas
   span both, so every field's edges land on the same grid lines down the whole
   form. Capped so the columns never get absurdly wide; one column on phones. */
.wg-form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--wg-card);
  gap: 1.6rem 1.75rem; align-items: start; max-width: 64rem;
}
.wg-form-grid .wg-field { grid-column: span 1; min-width: 0; margin: 0;
  display: flex; flex-direction: column; }
/* Label reserves two lines and bottom-aligns to its input, so inputs line up
   across a row whether a label is one line or two; the description sits below. */
.wg-form-grid .wg-field > label { min-height: 2.8em; display: flex; align-items: flex-end; }
.wg-form-grid .wg-field .wg-hint-under { margin: 0.4rem 0 0; }
.wg-form-grid .wg-field--lg,
.wg-form-grid .wg-field--full { grid-column: 1 / -1; }
.wg-form-grid textarea.wg-input { max-width: 46rem; }
@media (max-width: 40rem) { .wg-form-grid { grid-template-columns: 1fr; } }

/* Form submit row — shared by single-page forms (billing details, support). */
.wg-form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--wg-border); max-width: 64rem; }

/* State mark — a four-step monochrome ramp (empty ring → half → full →
   full-with-check), keyed to the state name, never to colour. Always paired
   with a label so the signal survives greyscale and colour-blindness. */
.wg-state {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 1rem; color: var(--wg-text-2); white-space: nowrap;
}
.wg-state-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--wg-border-strong); background: transparent;
  display: inline-block; position: relative; flex: none; }
.wg-state-dot.is-progress { border-color: var(--wg-ink);
  background: conic-gradient(var(--wg-ink) 0 50%, transparent 50% 100%); }
.wg-state-dot.is-done, .wg-state-dot.is-reviewed { border-color: var(--wg-ink); background: var(--wg-ink); }
.wg-state-dot.is-reviewed::after { content: ""; position: absolute; left: 50%; top: 47%;
  width: 0.16rem; height: 0.34rem; border: solid var(--wg-bg); border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -55%) rotate(45deg); }
.wg-meta { color: var(--wg-text-2); font-size: 1rem; }
.wg-status-line { min-height: 1.25rem; color: var(--wg-text-2); font-size: 1rem; }

/* Meta row — a compact horizontal strip of key/value metadata under a page
   title. Use this instead of a heavy sidebar column when the metadata is sparse
   (assigned-to, due, pillar): a few lines don't earn a whole column. */
.wg-metarow { display: flex; flex-wrap: wrap; gap: 0.6rem 2.25rem;
  margin: 0 0 1.75rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--wg-border); }
.wg-metaitem { display: flex; flex-direction: column; gap: 0.15rem; }
.wg-metakey { font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wg-text-2); }
.wg-metaval { font-size: 1rem; color: var(--wg-ink); }
.wg-task-intro { max-width: 72ch; color: var(--wg-text-2); margin: 0 0 1.75rem; }

/* ── 3 · MOLECULES ────────────────────────────────────────────────────────
   Small pieces composed into recognisable units. */

/* Bordered row lists — definition by hairline, not by fill. */
.wg-rows { border: 1px solid var(--wg-border-strong); border-radius: var(--wg-radius); overflow: hidden; }
.wg-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--wg-border);
  color: inherit; text-decoration: none; background: var(--wg-bg);
}
.wg-row:last-child { border-bottom: none; }
.wg-portal main a.wg-row,
.wg-portal main a.wg-row:hover,
.wg-portal main a.wg-row:focus-visible { text-decoration: none; color: inherit; }
a.wg-row:hover { background: var(--wg-bg-2); }
.wg-row-title { font-size: 1rem; color: var(--wg-ink); }
.wg-row-child { padding-left: 2.25rem; background: var(--wg-bg-2); position: relative; }
.wg-row-child .wg-row-title { font-size: 1rem; }
.wg-row-child::before { content: "\21B3"; position: absolute; margin-left: -1.4rem; color: var(--wg-text-2); }
.wg-row .wg-meta { margin-left: auto; white-space: nowrap; }

/* Section heading above row lists — a clear level above the row titles. */
.wg-portal .wg-group-head {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.375rem; line-height: 1.2;
  color: var(--wg-ink); letter-spacing: 0; text-transform: none;
  margin: 3rem 0 0.875rem;
}
.wg-portal section:first-child > .wg-group-head,
.wg-portal .bi-main section:first-of-type > .wg-group-head,
.wg-portal > .wg-group-head:first-child { margin-top: 1rem; }

/* Project cards — solid card over the grid, hairline frame, hard corners,
   no shadow, no lift. Hover firms the border and warms the ground. */
.wg-projects { display: grid; gap: 0.75rem; }
.wg-project {
  display: block; background: var(--wg-card); padding: 1.25rem 1.5rem;
  border: 1px solid var(--wg-border-strong); border-radius: var(--wg-radius-lg);
  color: inherit; text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}
.wg-project:hover { background: var(--wg-bg-2); border-color: var(--wg-ink); text-decoration: none; color: inherit; }
.wg-project-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.wg-project-title { font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.25rem; color: var(--wg-ink); }

/* Progress — Sulfur fill on a Woodsmoke track (the second sanctioned Sulfur
   moment). Inset ink hairline keeps the fill legible on the bright accent. */
.wg-progress { margin-top: 0.875rem; height: 0.7rem; background: var(--wg-woodsmoke);
  padding: 1.5px; box-sizing: border-box; }
.wg-progress > div { height: 100%; background: var(--wg-sulfur);
  box-shadow: inset 0 0 0 0.75px var(--wg-ink); }

/* Status bar — ordered task states, one segmented control. Current is ink. */
.wg-statebar { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--wg-border-strong);
  border-radius: var(--wg-radius); overflow: hidden; max-width: 100%; }
.wg-stateseg { display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: inherit; font-size: 1rem; color: var(--wg-text-2);
  background: var(--wg-bg); border: none; border-right: 1px solid var(--wg-border);
  padding: 0.5rem 0.9rem; cursor: pointer; white-space: nowrap; }
.wg-stateseg:last-child { border-right: none; }
.wg-stateseg:not(.is-current):not(.is-locked):hover,
.wg-stateseg:not(.is-current):not(.is-locked):focus-visible { background: var(--wg-bg-2); color: var(--wg-ink); }
.wg-stateseg.is-current { background: var(--wg-ink); color: #ffffff; cursor: default; }
.wg-stateseg.is-current .wg-state-dot { border-color: var(--wg-bg); }
.wg-stateseg.is-current .wg-state-dot.is-progress { background: conic-gradient(var(--wg-bg) 0 50%, transparent 50% 100%); }
.wg-stateseg.is-current .wg-state-dot.is-done,
.wg-stateseg.is-current .wg-state-dot.is-reviewed { background: var(--wg-bg); }
.wg-stateseg.is-current .wg-state-dot.is-reviewed::after { border-color: var(--wg-ink); }
.wg-stateseg.is-locked { cursor: default; }
.wg-stateseg .wg-col-tag { margin-left: 0.1rem; }

/* Wizard — numbered steps + sections. */
/* Stepper — numbered circles that wrap (never scroll). Only the current step
   shows its name inline; the rest reveal their name on hover (title attr). */
.wg-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  list-style: none; margin: 0 0 2.5rem; padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--wg-border);
}
.wg-step { display: flex; align-items: center; gap: 0.45rem; color: var(--wg-text-2); cursor: pointer; flex: none; }
.wg-step:hover { color: var(--wg-ink); }
.wg-step:hover .wg-step-num { border-color: var(--wg-ink); }
.wg-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--wg-border-strong); background: var(--wg-bg);
  font-family: "WG Talk Condensed", sans-serif; font-weight: 700;
  font-size: 1rem; line-height: 1; flex: none;
}
.wg-step-name { display: none; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.wg-step.is-active .wg-step-name { display: inline; font-weight: 700; }
.wg-step.is-active { color: var(--wg-ink); }
.wg-step.is-active .wg-step-num { background: var(--wg-ink); color: #ffffff; border-color: var(--wg-ink); }
.wg-step.is-done .wg-step-num { background: var(--wg-ink); border-color: var(--wg-ink); color: var(--wg-bg); }
.wg-section { border: none; padding: 0; margin: 0 0 2.5rem; min-width: 0; }
.wg-section-head {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.375rem; color: var(--wg-ink);
  padding: 0 0 0.625rem; margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--wg-border);
}
.wg-section-intro { color: var(--wg-text-2); margin: 0 0 1.5rem; max-width: 60ch; line-height: 1.5; }
.wg-checkgroup { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.wg-checkitem { display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 1rem; color: var(--wg-text); cursor: pointer; }
.wg-checkitem .wg-check { flex: none; }
.wg-mother { max-width: 40ch; margin: 0.25rem 0 0.25rem 1.6rem; }
.wg-checklist { display: flex; flex-direction: column; gap: 0.625rem; }
.wg-checklist .wg-checkitem { font-size: 1rem; }
.wg-checklist input:disabled + span { color: var(--wg-text); }
.wg-cols { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.wg-colfields { flex: 1 1 16rem; min-width: 0; }
.wg-colfields .wg-field { max-width: none; }
.wg-wizard-nav {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--wg-border);
}

/* Child tables in portal forms. */
.wg-childtable table { width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--wg-border); border-radius: var(--wg-radius); overflow: hidden; }
.wg-childtable th { text-align: left; font-weight: 400; font-size: 1rem;
  color: var(--wg-text-2); background: var(--wg-bg-2);
  padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--wg-border); }
.wg-childtable td { padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--wg-border); vertical-align: top; }
.wg-childtable tbody tr:last-child td { border-bottom: none; }
.wg-childtable .wg-input { background: var(--wg-bg); border-color: transparent; }
.wg-childtable .wg-input:focus { border-color: var(--wg-border-strong); }
.wg-childtable td:last-child { width: 2.5rem; text-align: center; }

/* Discussion. */
.wg-comment { padding: 0.75rem 0; border-bottom: 1px solid var(--wg-border); }
.wg-comment:last-child { border-bottom: none; }
.wg-comment-meta { font-size: 1rem; color: var(--wg-text-2); margin-bottom: 0.2rem; }
.wg-h2 {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--wg-ink); margin: 2.5rem 0 0.875rem;
}

/* View-switcher tabs. */
.wg-tabs { display: flex; gap: 0.25rem; align-items: center;
  background: var(--wg-bg-2); border-radius: var(--wg-radius);
  padding: 0.25rem; width: fit-content; margin: 1.75rem 0 1.25rem; }
.wg-tab {
  font-size: 1rem; font-family: inherit;
  background: transparent; border: none; border-radius: 0; cursor: pointer;
  color: var(--wg-text-2); padding: 0.3125rem 0.875rem;
}
.wg-tab[aria-selected="true"] { color: var(--wg-ink); background: var(--wg-bg); }

/* Siblings — jump between detail records without leaving the section. */
.wg-siblings { display: inline-flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  font-size: 1rem; color: var(--wg-text-2); }
.wg-siblings label { color: var(--wg-text-2); }
.wg-siblings select {
  font: inherit; padding: 0.25rem 0.5rem; max-width: 22rem;
  border: 1px solid var(--wg-border-strong); border-radius: var(--wg-radius);
  background: var(--wg-bg); color: var(--wg-ink);
}
.wg-siblings-pos { white-space: nowrap; color: var(--wg-text-2); }
.wg-siblings-nav { display: inline-flex; gap: 0.25rem; }
.wg-siblings-nav a, .wg-siblings-nav span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; padding: 0.2rem 0.5rem; line-height: 1;
  border: 1px solid var(--wg-border-strong); border-radius: var(--wg-radius);
  color: var(--wg-ink); text-decoration: none;
}
.wg-siblings-nav a:hover, .wg-siblings-nav a:focus-visible { background: var(--wg-bg-2); }
.wg-siblings-nav .is-disabled { color: var(--wg-text-2); border-color: var(--wg-border); cursor: default; }

/* Context panel (page sidebar) — WASHED LIGHT. This was the portal's heavy
   dark rail; now a quiet Platinum panel with ink text and condensed-light
   keys. Same information, none of the weight. Solid paint over the grid. */
.wg-sidebar {
  font-size: 1rem;
  background: var(--wg-bg-3); color: var(--wg-text);
  border: 1px solid var(--wg-border-strong);
  padding: 1.5rem;
}
.wg-sidebar-block { border-top: 1px solid var(--wg-border); padding: 1rem 0; }
.wg-sidebar-block:first-child { border-top: none; padding-top: 0; }
.wg-sidebar-block:last-child { padding-bottom: 0; }
.wg-sidebar-label {
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wg-text-2); margin: 0 0 0.35rem;
}
.wg-sidebar-value { color: var(--wg-text); }
.wg-sidebar-link { display: inline-block; margin-top: 0.4rem;
  text-decoration: underline; text-underline-offset: 0.15em; }
.wg-sidebar-note { color: var(--wg-text-2); font-size: 1rem; line-height: 1.5; }
.wg-portal main .wg-sidebar a { color: var(--wg-ink); }
.wg-portal main .wg-sidebar a:hover,
.wg-portal main .wg-sidebar a:focus-visible { color: var(--wg-ink); text-decoration-color: var(--wg-ink); }

/* Wayfinding rail — Platinum panel painting over the grid, the sticky left
   rail on wide viewports. Current sibling is marked by a single Sulfur square
   (one accent, marks where you are), never a side-stripe. */
.wg-wayfinding {
  position: static; align-self: stretch; max-height: none; overflow: visible;
  background: var(--wg-bg); border: 0; border-right: 1px solid var(--wg-border-strong);
  padding: 2rem 1.5rem; font-size: 1rem; line-height: 1.4;
}
.wg-way-section {
  display: inline-block;
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif;
  font-weight: 500; font-size: 1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wg-text-2); text-decoration: none;
}
a.wg-way-section:hover, a.wg-way-section:focus-visible { color: var(--wg-ink); }
.wg-way-section.is-current { color: var(--wg-ink); }
.wg-way-trail { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.wg-way-trail li { padding: 0.15rem 0; color: var(--wg-text-2); }
.wg-way-trail a { color: var(--wg-text-2); text-decoration: none; }
.wg-way-trail a:hover, .wg-way-trail a:focus-visible {
  color: var(--wg-ink); text-decoration: underline; text-underline-offset: 0.15em; }
.wg-way-current {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 700; font-size: 1.125rem; color: var(--wg-ink);
  margin: 0.625rem 0 1.5rem; line-height: 1.2;
}
.wg-way-groups { margin: 0; }
.wg-way-group { margin: 0 0 0.25rem; }
.wg-way-group summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 0.4rem; padding: 0.375rem 0;
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif;
  font-weight: 500; font-size: 1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wg-text-2); user-select: none;
}
.wg-way-group summary::-webkit-details-marker { display: none; }
.wg-way-group-title { flex: 1; min-width: 0; }
.wg-way-group-count { font-size: 1rem; color: var(--wg-text-2); }
.wg-way-group summary::after {
  content: "+"; margin-left: 0.25rem;
  font-family: "WG Talk Condensed", sans-serif; font-weight: 400;
  font-size: 1rem; color: var(--wg-text-2); line-height: 1;
}
.wg-way-group[open] summary::after { content: "\2212"; }
.wg-way-group summary:hover { color: var(--wg-ink); }
.wg-way-group summary:hover::after { color: var(--wg-ink); }
.wg-way-siblings { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; }
.wg-way-sibling a {
  display: flex; align-items: center; gap: 0.5rem; position: relative;
  padding: 0.35rem 0 0.35rem 0.85rem;
  font-size: 1rem; color: var(--wg-text-2);
  text-decoration: none; line-height: 1.35;
  transition: color 120ms ease;
}
.wg-way-nm { flex: 1; min-width: 0; }
.wg-way-sibling .wg-state-dot { flex: none; }
.wg-way-sibling a:hover, .wg-way-sibling a:focus-visible { color: var(--wg-ink); }
.wg-way-sibling.is-current a { color: var(--wg-ink); font-weight: 700; }
.wg-way-sibling.is-current a::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.4rem; height: 0.4rem; background: var(--wg-sulfur); border: 1px solid var(--wg-ink);
}
.wg-way-marker { display: none; }
.wg-wayfinding .wg-siblings { display: none; }

/* Waiting on you — the pinned, open group of actionable tasks at the rail top. */
.wg-way-wait { margin: 0 0 1.1rem; }
.wg-way-wait > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 0.4rem; padding: 0.375rem 0;
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wg-ink);
}
.wg-way-wait > summary::-webkit-details-marker { display: none; }
.wg-way-wait-count { margin-left: auto; font-size: 1rem; letter-spacing: 0; color: var(--wg-text-2); }
/* The path — the project's milestones in order, collapsed by default. */
.wg-way-pathlabel {
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wg-text-2);
  margin: 0 0 0.25rem; padding-top: 0.9rem; border-top: 1px solid var(--wg-border);
}

.wg-crumbs { font-size: 1rem; min-width: 0; }
.wg-crumbs ol { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.wg-crumbs li { color: var(--wg-text-2); }
.wg-crumbs li[aria-current="page"] { color: var(--wg-ink); font-weight: 700; }
.wg-crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--wg-border-strong); }
.wg-crumbs a { color: var(--wg-text-2); text-decoration: none; }
.wg-crumbs a:hover, .wg-crumbs a:focus-visible { color: var(--wg-ink); text-decoration: underline; }

/* Hub tiles (legacy icon-tile pattern; door cards live in hub.html). */
.wg-tiles-wrap { max-width: 46rem; margin: 4rem auto 0; text-align: center; }
.wg-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3.25rem; margin-top: 3rem; }
.wg-tile { display: block; width: 8rem; color: inherit; text-decoration: none; }
.wg-tile img { width: 4.5rem; height: 4.5rem; display: block; margin: 0 auto; transition: transform 150ms ease; }
.wg-tile:hover img { transform: translateY(-2px); }
.wg-tile:hover { text-decoration: none; color: inherit; }
.wg-tile-label { display: block; margin-top: 0.75rem; font-size: 1rem; color: var(--wg-text); }

/* ── 4 · ORGANISMS ────────────────────────────────────────────────────────
   Full assembled regions: chrome, page shells, board. All chrome paints solid
   over the grid (the hard rule). */

/* Nav — solid Seasalt, hairline base, condensed-black wordmark, light links. */
.wg-nav { background: var(--wg-bg); border-bottom: 1px solid var(--wg-border); }
.wg-nav-inner {
  min-height: 3.25rem; padding: 0 var(--wg-gutter);
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.wg-brand {
  font-family: "WG Talk Condensed", sans-serif;
  font-weight: 900; font-size: 1.25rem; line-height: 1;
  color: var(--wg-ink); text-decoration: none;
}
.wg-brand:hover { text-decoration: none; color: var(--wg-ink); }
.wg-links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-left: auto; align-self: stretch; align-items: stretch; }
.wg-links a { display: flex; align-items: center; min-height: 2.75rem; padding: 0; font-size: 1rem; color: var(--wg-text-2); text-decoration: none; }
.wg-links a:hover, .wg-links a:focus-visible { color: var(--wg-ink); }
.wg-links a[aria-current="page"] {
  color: var(--wg-ink); font-weight: 700; text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--wg-ink);
}
.wg-customer-switcher { display: flex; align-items: center; gap: 0.4rem; }
.wg-customer-switcher select {
  font: inherit; font-size: 1rem; padding: 0.25rem 0.5rem; max-width: 18rem;
  border: 1px solid var(--wg-border-strong); border-radius: var(--wg-radius);
  background: var(--wg-bg); color: var(--wg-ink);
}
.wg-customer-switcher-label {
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wg-text-2);
}

.wg-main { padding: 2.5rem var(--wg-gutter) 4rem; }

/* Footer — solid, hairline top. */
.wg-foot { border-top: 1px solid var(--wg-border); background: var(--wg-bg); flex-shrink: 0; }
.wg-foot-inner {
  padding: 1.25rem var(--wg-gutter);
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-size: 1rem; color: var(--wg-text-2);
}
.wg-foot-inner a { color: inherit; }

/* Page shell — main + context panel (detail surfaces). Fluid main, clamped
   panel, stacks at narrow with the panel on top so context stays reachable. */
.wg-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(16rem, 24%, 22rem);
  gap: 3rem; align-items: start;
}
.wg-shell > * { min-width: 0; }

/* Page wrap — wayfinding rail + main (+ optional context panel). */
.wg-portal-wrap {
  display: grid; grid-template-columns: clamp(18rem, 19vw, 20rem) minmax(0, 1fr);
  gap: 0; padding: 0; align-items: stretch; flex: 1 0 auto;
}
.wg-portal-wrap > .wg-main {
  min-width: 0; padding: 2rem clamp(2rem, 4vw, 4.5rem) 3rem;
  background: transparent;
}
.wg-portal-wrap--with-sidebar {
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) minmax(14rem, 1fr);
}
.wg-portal-wrap--solo { grid-template-columns: 1fr; gap: 0; }

/* Board (kanban). */
.wg-board { display: flex; gap: 0.75rem; overflow-x: auto; min-height: 24rem; align-items: stretch; background: var(--wg-card); }
.wg-col { flex: 1 0 13.5rem; min-width: 13.5rem; background: var(--wg-bg-2);
  border-radius: var(--wg-radius-lg); padding: 0.75rem;
  display: flex; flex-direction: column; }
.wg-col-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem;
  font-size: 1rem; color: var(--wg-text-2); }
.wg-col-count { margin-left: auto; }
.wg-col-list { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 3rem; }
.wg-card { display: block; background: var(--wg-card); border: 1px solid var(--wg-border-strong);
  border-radius: var(--wg-radius); padding: 0.625rem 0.75rem; cursor: grab;
  color: inherit; text-decoration: none; transition: border-color 140ms ease; }
.wg-card:active { cursor: grabbing; }
.wg-card-locked { cursor: default; }
.wg-card:hover { border-color: var(--wg-ink); text-decoration: none; color: inherit; }
.wg-card-title { display: block; font-size: 1rem; color: var(--wg-ink); line-height: 1.35; }
.wg-card-meta { display: block; margin-top: 0.3125rem; font-size: 1rem; color: var(--wg-text-2); }
.wg-card-ghost { opacity: 0.4; }
.wg-col-locked .wg-col-head { color: var(--wg-text-2); }
.wg-col-tag {
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wg-text-2); border: 1px solid var(--wg-border-strong);
  border-radius: 0; padding: 0 0.3125rem; margin-left: 0.375rem;
}
.wg-board-hint { margin: 0.75rem 0 0; }

/* Timeline (frappe-gantt overrides). */
#wg-gantt .gantt .bar { fill: #c7c7c7; }
#wg-gantt .gantt .bar-progress { fill: var(--wg-ink); }
#wg-gantt .gantt-container { border: 1px solid var(--wg-border); border-radius: var(--wg-radius); }

/* Billing documents (quote, invoice) — shared line-item layout + status pill,
   used by /billing/quote and /billing/invoice so the two read identically. */
.wg-status-pill {
  display: inline-block;
  font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border: 1px solid var(--wg-border-strong); color: var(--wg-text-2);
}
.wg-status-pill.is-active { color: var(--wg-ink); border-color: var(--wg-ink); }   /* awaiting action */
.wg-status-pill.is-done { background: var(--wg-ink); color: var(--wg-bg); border-color: var(--wg-ink); }  /* settled */

.wg-lineitems { width: 100%; border-collapse: collapse; margin: 0 0 2rem; table-layout: fixed; }
.wg-lineitems col.item { width: auto; }
.wg-lineitems col.qty { width: 5rem; }
.wg-lineitems col.rate { width: 8rem; }
.wg-lineitems col.amt { width: 9rem; }
.wg-lineitems thead th {
  text-align: left; font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-text-2);
  padding: 0.625rem 1rem 0.625rem 0; border-bottom: 1px solid var(--wg-border);
}
.wg-lineitems thead th.num { text-align: right; }
.wg-lineitems tbody td { padding: 0.875rem 1rem 0.875rem 0; border-bottom: 1px solid var(--wg-border); vertical-align: top; }
.wg-lineitems tbody td.num { text-align: right; white-space: nowrap; }
.wg-lineitem-name { font-weight: 700; color: var(--wg-ink); }
.wg-lineitem-desc { font-size: 1rem; color: var(--wg-text-2); margin-top: 0.2rem; max-width: 60ch; }

.wg-totals { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.5rem; margin-left: auto; max-width: 26rem; padding: 1rem 0; }
.wg-totals dt { color: var(--wg-text-2); }
.wg-totals dd { margin: 0; text-align: right; }
.wg-totals .grand { font-family: "WG Talk Condensed", sans-serif; font-weight: 700;
  font-size: 1.25rem; color: var(--wg-ink); padding-top: 0.5rem; border-top: 1px solid var(--wg-border); }

.wg-doc-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; margin-top: 0.5rem; }
.wg-doc-actions .wg-btn, .wg-doc-actions .wg-btn-ghost { text-align: center; }

/* Document viewer (/billing/document) — embedded PDF + a download fallback. */
.wg-docframe { width: 100%; height: 80vh; min-height: 30rem; border: 1px solid var(--wg-border-strong);
  background: var(--wg-bg-2); }
.wg-doc-fallback { margin-top: 1rem; font-size: 1rem; color: var(--wg-text-2); }

/* Support ticket thread (/support/ticket) — client messages vs W&G messages. */
.wg-tk-msg { padding: 0.9rem 1.1rem; margin: 0 0 0.85rem; border: 1px solid var(--wg-border); }
.wg-tk-you { background: var(--wg-bg); }
.wg-tk-wg { background: var(--wg-bg-2); }
.wg-tk-meta { font-family: "WG Talk SemiCondensed", "WG Talk Expanded", sans-serif; font-weight: 500; font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-text-2); margin: 0 0 0.4rem; }
.wg-tk-body { color: var(--wg-text); line-height: 1.55; }
.wg-tk-body p:last-child { margin-bottom: 0; }

/* ── 5 · RESPONSIVE + MOTION ──────────────────────────────────────────────
   Wide-viewport dashboard shell, narrow-viewport collapses, reduced motion. */

/* No 100vh shell — the whole page scrolls normally. The wayfinding rail is
   sticky (see .wg-wayfinding above), so it stays in view as the content scrolls. */

/* Wayfinding collapses to a horizontal subhead strip at narrow viewports. */
@media (min-width: 56.26rem) {
  html.wg-portal body { height: 100vh; min-height: 100vh; overflow: hidden; }
  html.wg-portal body .wg-workspace-shell {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
  }
  html.wg-portal body .wg-portal-wrap {
    flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 0;
  }
  html.wg-portal body .wg-portal-wrap > .wg-main {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  html.wg-portal body .wg-wayfinding,
  html.wg-portal body .wg-portal-wrap > .wg-sidebar {
    position: static; align-self: stretch; min-height: 0; max-height: none;
    overflow-y: auto; overscroll-behavior: contain;
  }
}

@media (max-width: 56.25rem) {
  .wg-portal-wrap { display: block; padding: 0; }
  .wg-portal-wrap > .wg-main { padding: 2.5rem var(--wg-gutter) 4rem; }
  .wg-wayfinding {
    position: static;
    background: var(--wg-bg); border: none; border-bottom: 1px solid var(--wg-border);
    padding: 0.625rem var(--wg-gutter);
    flex-direction: row; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline;
  }
  .wg-way-section {
    padding: 0; border: none; text-transform: none;
    font-family: inherit; font-weight: 400; font-size: 1rem; letter-spacing: 0;
  }
  .wg-way-section::after { content: " /"; color: var(--wg-border-strong); margin-left: 0.4rem; }
  .wg-way-trail { padding: 0; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 0.4rem; align-items: baseline; }
  .wg-way-trail li { font-size: 1rem; }
  .wg-way-trail li::before { content: ""; margin: 0; }
  .wg-way-trail li::after { content: " /"; color: var(--wg-border-strong); margin-left: 0.4rem; }
  .wg-way-current { padding: 0; font-family: inherit; font-weight: 700; font-size: 1rem; line-height: inherit; margin-left: auto; }
  .wg-way-siblings, .wg-way-groups { display: none; }
  .wg-wayfinding .wg-siblings {
    display: inline-flex; flex-direction: row; align-items: center; gap: 0.75rem;
    width: 100%; padding-top: 0.5rem; border-top: 1px solid var(--wg-border);
  }
  .wg-wayfinding .wg-siblings select { max-width: 22rem; width: auto; }
}

/* Detail-page shell stacks the context panel above main at narrow. */
@media (max-width: 56rem) {
  .wg-shell { grid-template-columns: 1fr; gap: 1.5rem; }
  .wg-shell > .wg-sidebar { order: -1; }
}

@media (max-width: 640px) {
  .wg-portal h1 { font-size: 2rem; }
  .wg-row { flex-wrap: wrap; }
  .wg-row .wg-meta { margin-left: 0; width: 100%; }
  .wg-statebar { display: flex; flex-direction: column; }
  .wg-stateseg { border-right: none; border-bottom: 1px solid var(--wg-border); justify-content: flex-start; }
  .wg-stateseg:last-child { border-bottom: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-btn, .wg-btn-ghost, .wg-tile img, .wg-project, .wg-card { transition: none; }
  .wg-tile:hover img { transform: none; }
}

/* Shared workspace orientation */
.wg-portal :where(a, button, input, select, textarea, label, small, summary, li, p, span) {
  font-size: max(1rem, 1em);
}
.wg-page-head {
  margin: 0 0 2rem;
  padding: 0 0 1.25rem;
  background: var(--wg-bg);
  border-bottom: 1px solid var(--wg-border);
}
.wg-page-head h1 { margin-bottom: 0.65rem; }
.wg-page-head .wg-crumbs { margin-top: 0; }
.wg-hubcard,
.wg-panel,
.wg-empty { background-color: var(--wg-card); }
/* Hub doors */
/* Home: a small set of stable doors. The client sees only the surfaces that
     have a durable role in the portal. */
  .wg-hero-eyebrow {
    font-family: "WG Talk SemiCondensed", sans-serif; font-weight: 500;
    font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--wg-text-2); margin: 0 0 0.75rem;
  }
  .wg-hub-home h1 { font-size: 2.75rem; line-height: 1.0; }
  .wg-doorgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.25rem; margin-top: 2rem;
  }
  .wg-doorcard {
    min-width: 0; min-height: 13rem;
    display: flex; flex-direction: column;
    background: var(--wg-bg); border: 1px solid var(--wg-border-strong); border-radius: 0;
    padding: 1.5rem 1.5rem 1.4rem; color: inherit; text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
  }
  .wg-doorcard:hover {
    background: var(--wg-bg-2); border-color: var(--wg-ink);
    text-decoration: none; color: inherit;
  }
  /* The card is one big link; outrank `.wg-portal main a` so the whole card
     does not render underlined. The hover border is the affordance. */
  .wg-portal main a.wg-doorcard,
  .wg-portal main a.wg-doorcard:hover,
  .wg-portal main a.wg-doorcard:focus-visible {
    text-decoration: none; color: inherit;
  }
  .wg-doorcard-name {
    font-family: "WG Talk Condensed", sans-serif; font-weight: 700;
    font-size: 1.4rem; line-height: 1.05; color: var(--wg-ink); margin-top: 0;
  }
  .wg-doorcard-sub {
    font-family: "WG Talk Expanded", sans-serif; font-weight: 500;
    font-size: 1rem; line-height: 1.4; color: var(--wg-text-2);
    margin-top: 0.5rem;
  }
  .wg-doortag {
    display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 1rem;
    font-family: "WG Talk SemiCondensed", sans-serif; font-weight: 500;
    font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-text);
  }
  .wg-doortag-mark { width: 0.45rem; height: 0.45rem; background: var(--wg-sulfur);
    border: 1px solid var(--wg-ink); flex: none; }
  @media (max-width: 560px) { .wg-hub-home h1 { font-size: 2rem; } }

/* Small shared layout utilities. Dynamic values remain inline; static layout does not. */
.wg-mt-0 { margin-top: 0; }
.wg-mt-xs { margin-top: 0.4rem; }
.wg-mt-sm { margin-top: 0.5rem; }
.wg-mt-md { margin-top: 0.75rem; }
.wg-mt-lg { margin-top: 1rem; }
.wg-mt-xl { margin-top: 1.25rem; }
.wg-mt-2xl { margin-top: 2rem; }
.wg-mb-xs { margin-bottom: 0.4rem; }
.wg-mb-sm { margin-bottom: 0.75rem; }
.wg-mb-md { margin-bottom: 1rem; }
.wg-mb-lg { margin-bottom: 1.5rem; }
.wg-mb-xl { margin-bottom: 1.75rem; }
.wg-mb-2xl { margin-bottom: 2rem; }
.wg-mx-copy { margin: 0 0 1.5rem; }
.wg-ml-auto { margin-left: auto; }
.wg-ml-md { margin-left: 1rem; }
.wg-block { display: block; }
.wg-inline-block { display: inline-block; }
.wg-text-muted { color: var(--wg-text-2); }
.wg-max-38 { max-width: 38rem; }
.wg-max-40 { max-width: 40rem; }
.wg-max-46 { max-width: 46rem; }
.wg-max-copy { max-width: 62ch; }
.wg-field-unbounded { max-width: none; }
.wg-title-flush { margin: 0 0 1rem; }
.wg-title-tight { margin: 0 0 0.4rem; }
.wg-action-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.wg-filter-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2rem; }
.wg-filter-label {
  font-family: "WG Talk SemiCondensed", sans-serif; font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--wg-text-2);
}
.wg-filter-select {
  font: inherit; padding: 0.5rem 0.75rem; min-width: 16rem;
  border: 1px solid var(--wg-border-strong); background: var(--wg-bg); color: var(--wg-ink);
}
.wg-btn--wide { display: block; text-align: center; }
.wg-color-input { border: 1px solid var(--wg-border-strong); width: 4rem; height: 2.5rem; }
.tk-cal { width: 100%; min-height: 36rem; background: var(--wg-bg); border: 1px solid var(--wg-border); overflow: hidden; }
.tk-cal-fallback { margin-top: 0.75rem; color: var(--wg-text-2); }

/* Shared routed-workspace header. Tool-specific styles belong below this shell. */
.wg-workspace-shell { display: flex; flex: 1 0 auto; flex-direction: column; min-width: 0; }
.wg-workspace-shell > .wg-tool-head {
  display: flex; justify-content: space-between; gap: 2rem; align-items: end;
  margin: 0; padding: 1.1rem clamp(2rem, 4vw, 4.5rem) 0.9rem;
  background: transparent; border-bottom: 1px solid var(--wg-border-strong);
}
.wg-tool-head h1 { margin: 0; font-family: "WG Talk Condensed", sans-serif; font-size: clamp(2.25rem, 3vw, 2.75rem); font-weight: 900; line-height: 1; letter-spacing: 0; text-transform: none; }
.wg-tool-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; color: var(--wg-text-2); font: 400 1rem/1.35 "WG Talk Expanded", "Segoe UI", sans-serif; }
.wg-tool-crumbs a { color: inherit; }
.wg-tool-actions { display: flex; gap: 0.75rem; align-items: center; font-family: "WG Talk Expanded", "Segoe UI", sans-serif; font-size: 1rem; }
.wg-tool-status { min-height: 3rem; border: 1px solid var(--wg-border-strong); background: var(--wg-bg); padding-inline: 0.75rem; font: 500 1rem/1.2 "WG Talk Expanded", "Segoe UI", sans-serif; }
@media (max-width: 48rem) {
  .wg-workspace-shell > .wg-tool-head { display: grid; align-items: start; }
  .wg-tool-actions { flex-wrap: wrap; }
}
.wg-resource-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wg-border); }
.wg-resource-list li { border-bottom: 1px solid var(--wg-border); }
.wg-resource-list a { display: block; min-height: 2.75rem; padding: 0.7rem 0; color: var(--wg-ink); font-size: 1rem; line-height: 1.4; text-underline-offset: 0.2em; }
.wg-project-group {
  border-top: 1px solid var(--wg-border-strong);
}
.wg-project-group:last-child {
  border-bottom: 1px solid var(--wg-border-strong);
}
.wg-project-group > summary {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem; padding: 0.9rem 1rem;
  background: var(--wg-card); color: var(--wg-ink);
  cursor: pointer; list-style: none;
}
.wg-project-group > summary::-webkit-details-marker { display: none; }
.wg-project-group > summary::before {
  content: "+"; width: 1.25rem; flex: 0 0 1.25rem;
  font-size: 1.35rem; line-height: 1; font-weight: 400;
}
.wg-project-group[open] > summary::before { content: "−"; }
.wg-project-group > summary:hover { background: var(--wg-bg-2); }
.wg-project-group > summary:focus-visible {
  outline: 2px solid var(--wg-ink); outline-offset: -2px;
}
.wg-project-group-title {
  font-size: 1.125rem; font-weight: 700;
}
.wg-project-group > summary .wg-meta { margin-left: auto; }
.wg-project-group > .wg-rows { border-left: 0; border-right: 0; border-bottom: 0; }
.wg-discussion {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--wg-border-strong);
}
.wg-comment-list { display: grid; gap: 0.75rem; max-width: 52rem; }
.wg-comment {
  padding: 1rem; border: 1px solid var(--wg-border);
  background: var(--wg-card);
}
.wg-comment .wg-meta { margin: 0 0 0.5rem; }
.wg-comment-body > :last-child { margin-bottom: 0; }
.wg-comment-form { max-width: 52rem; margin-top: 1.25rem; }
.wg-comment-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }