/* The Workforce desk's shared parts that accounts.smitzlabs.com will want, taken from the desk's own
   stylesheets (shell.css, ui.css, wall.css, wordmark.css) and renamed only where a name was the desk's
   alone. Tokens by name only, never a raw color (tokens.css). Accounts keeps its own page structure;
   these are the parts it builds with. specimen.html shows each one in both themes. */

/* --- The wordmark (G-14, G-15) ------------------------------------------------------------------
   The product name in Charcoal Grey, bold, over "BY SMITZ LABORATORIES" in Signal Red, wide-tracked
   uppercase fine print. Accounts' is "ACCOUNTS" over the same line, once Kyle approves it. */
.wordmark { line-height: 1; }
.wordmark-name { margin: 0; font-weight: var(--weight-head); letter-spacing: 0.01em; color: var(--grey); }
.wordmark-by { margin: var(--space-2) 0 0; color: var(--red); font-size: var(--type-mark); letter-spacing: var(--track-label); text-transform: uppercase; }
.wordmark-large .wordmark-name { font-size: var(--type-header); }
.wordmark-header .wordmark-name { font-size: var(--type-name); }
.wordmark-header .wordmark-by { margin-top: var(--space-1); }

/* --- The header (H-1, H-2, CO-7) ----------------------------------------------------------------
   The mark and the wordmark on the left, and what belongs to the person on the right. Paper, with a
   Line rule under it. The mark is the logo file, 40 px (36 on a narrow screen), never under 36. */
.header { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.header-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.header-mark { width: 40px; height: 40px; flex: none; }
/* A small outlined label after the wordmark, in Signal Red: BETA or STAGING (CO-7). */
.env-mark { flex: none; align-self: center; padding: 2px var(--space-2); font-size: var(--type-mark); font-weight: var(--weight-head);
  letter-spacing: var(--track-label); color: var(--red); border: 1px solid var(--red); line-height: 1.4; }
.header-aside { margin: 0; font-size: var(--type-title); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- The art (G-7, G-8, G-9; T-2) ---------------------------------------------------------------
   A full-bleed threshold (a sign-in page): .art-fill behind everything. A banner over the top of a
   page, fading into the ground as it goes down: .art-banner, with the page's content stacked on it
   as glass cards. The SVG comes from art.ts's artSvg() or seed_sheet.py --svg. */
.art-fill, .art-fill svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.art-banner { position: absolute; inset: 0 0 auto 0; height: min(560px, 75vh); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
.art-banner svg { display: block; width: 100%; height: 100%; }
.art-ground { fill: var(--paper); }
.on-art { position: relative; z-index: 1; }

/* --- Frosted glass (G-13, G-16) -----------------------------------------------------------------
   A card over the art: the art blurred behind translucent white (dark glass on the dark theme), with
   a lit top edge. At this density Charcoal Grey text holds 4.5:1 even over Charcoal Deep. Where a
   browser cannot blur, the card is solid. Menus and dialogs over content stay Paper, not glass. */
.glass { background: var(--glass-pane); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line); border-top-color: var(--glass-edge); }
/* The sign-in card on a full-bleed threshold: lighter glass, a 2 px lit edge (the desk's wall, G-13 B). */
.glass-threshold { background: var(--wall-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 2px solid var(--wall-glass-edge); border-bottom: 1px solid var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--paper); }
  .glass-threshold { background: var(--wall-glass-solid); }
}

/* --- Buttons and links -------------------------------------------------------------------------- */
.text-button { padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--type-body); color: var(--grey);
  background: none; border: 1px solid var(--line); cursor: pointer; }
.text-button:hover { background: var(--tint); }
.text-button-strong { color: var(--paper); background: var(--grey); border-color: var(--grey); }
.text-button-strong:hover { background: var(--deep); }
.text-button:disabled { opacity: 0.45; cursor: default; }
/* The one strong act on a threshold card, such as Sign in: larger, with a Charcoal Deep underline. */
.threshold-button { display: inline-block; padding: var(--space-3) var(--space-5); font: inherit; font-size: var(--type-title);
  color: var(--paper); background: var(--grey); text-decoration: none; border: 0; border-bottom: 2px solid var(--deep); cursor: pointer; }
.threshold-button:hover { background: var(--deep); }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none;
  color: var(--grey); background: none; border: 0; cursor: pointer; }
.icon-button:hover { background: var(--tint); }
.icon-button:disabled { opacity: 0.4; cursor: default; }
.icon-tile { background: var(--icon-glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-top-color: var(--glass-edge); }
.icon-tile:hover { background: var(--icon-glass-hover); }
.text-link { color: var(--grey); text-underline-offset: 3px; }

/* --- Fields ------------------------------------------------------------------------------------- */
.field-label { display: block; margin-bottom: var(--space-2); font-size: var(--type-body); font-weight: var(--weight-head); }
.field { width: 100%; height: 36px; padding: 0 var(--space-3); font: inherit; color: var(--grey); background: var(--surface);
  border: 1px solid var(--line); border-radius: 0; }
.field:focus { outline: none; border-color: var(--grey); }
/* A field on a threshold card: glass, brighter than the card, a Line edge and a Charcoal underline. */
.field-threshold { height: 44px; font-size: var(--type-title); background: var(--wall-field); border-bottom: 2px solid var(--grey); }
.field-threshold:focus { background: var(--wall-field-focus); border-color: var(--line); border-bottom-color: var(--grey); }
.field-error { margin: var(--space-2) 0 0; font-size: var(--type-body); }

/* A two-state switch (TH-1): white when off, Signal Red when on; its words say the state it is in
   ("Light Theme", "Dark Theme"), the words first and the switch to their right. */
.toggle { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 32px; padding: 0;
  font: inherit; color: var(--grey); background: none; border: 0; cursor: pointer; }
.toggle:disabled { cursor: default; opacity: 0.6; }
.toggle-text { font-weight: var(--weight-head); }
.toggle-track { position: relative; display: inline-block; width: 44px; height: 24px; background: var(--switch-off);
  border: 1px solid var(--switch-edge); transition: background 120ms, border-color 120ms; }
.toggle-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--switch-knob); transition: left 120ms, background 120ms; }
.toggle-on .toggle-track { background: var(--red); border-color: var(--red); }
.toggle-on .toggle-knob { left: 23px; background: var(--switch-off); }

/* --- Small parts -------------------------------------------------------------------------------- */
.chip, .mark { display: inline-block; font-size: var(--type-mark); line-height: 1.5; padding: 0 var(--space-2);
  background: var(--tint); border: 1px solid var(--line); white-space: nowrap; }
.mark, .label { letter-spacing: var(--track-label); text-transform: uppercase; }
.mark { background: none; }
.label { font-size: var(--type-mark); }
.section-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  background: var(--tint); border-top: 1px solid var(--line); }
.section-title { margin: 0; font-size: var(--type-mark); font-weight: var(--weight-head); letter-spacing: var(--track-label); text-transform: uppercase; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* --- States (U4, UI-2, ES-1) ---------------------------------------------------------------------
   Loading: the spinner and one line. Error: "Could not load …" and Try again, never shown as empty.
   Empty: the drawing, with its line under it, centered; never the line alone in a corner. */
.state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.state[role="status"] { flex-direction: row; justify-content: center; }
.state p { margin: 0; }
.empty-drawing { width: min(240px, 60%); height: auto; }
.empty-line { max-width: 44ch; font-size: var(--type-title); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--grey); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

:focus-visible { outline: 2px solid var(--grey); outline-offset: 2px; }

@media (max-width: 720px) {
  .header-bar { padding: var(--space-3) var(--space-4); }
  .header-mark { width: 36px; height: 36px; }
}