/* Dusk: shared semantic tokens, with no layout or element resets. */
:root, .light, [data-theme="light"] {
  color-scheme: light;
  --background: #d7e0e9;
  --foreground: #182235;
  --surface-soft: #dee6ed;
  --surface: #e6ecf2;
  --surface-raised: #edf1f5;
  --surface-muted: #d0dae4;
  --border: #aebdcd;
  --control-border: #5f7691;
  --muted: #485a70;
  --muted-soft: #4f6075;
  --accent: #0f8f83;
  --accent-strong: #0b756c;
  --accent-readable: #0b6b63;
  --accent-foreground: #edf1f5;
  --on-accent: #ffffff;
  --info-readable: #00598a;
  --caution-readable: #973c00;
  --danger-readable: #a50036;
  --focus-ring: rgb(15 143 131 / 0.34);
  --shadow-subtle: 0 2px 5px rgb(0 0 0 / 0.04);
  /* Elevation: what lifts a control, a card and a popup off the page. */
  --edge-highlight: rgb(255 255 255 / 0.6);
  --shadow-control: 0 1px 2px rgb(24 34 53 / 0.14), inset 0 1px 0 var(--edge-highlight);
  --shadow-card: 0 1px 2px rgb(24 34 53 / 0.1), 0 4px 14px rgb(24 34 53 / 0.12), inset 0 1px 0 var(--edge-highlight);
  --shadow-raised: 0 4px 10px rgb(24 34 53 / 0.1), 0 18px 40px rgb(24 34 53 / 0.18), inset 0 1px 0 var(--edge-highlight);
  /* What sits behind a modal, and the dropdown's own arrow. The arrow is a
     token because a data URI cannot read a custom property: each palette
     carries the chevron drawn in its own muted colour. */
  --scrim: rgb(24 34 53 / 0.38);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23485a70' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.5 4 4 4-4'/%3E%3C/svg%3E");
  --font-sans: Inter, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI Variable", Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;
}

/* CSS alone follows the machine until the provider has applied an explicit theme. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark):not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --background: #070b14;
    --foreground: #eef2f7;
    --surface: #101827;
    --surface-soft: #0a101c;
    --surface-raised: #182338;
    --surface-muted: #1c2740;
    --border: #34435c;
    --control-border: #6a7c98;
    --muted: #94a3b8;
    --muted-soft: #7f8ea3;
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --accent-readable: #5eead4;
    --accent-foreground: #121b2b;
    --on-accent: #070b14;
    --info-readable: #7dd3fc;
    --caution-readable: #fcd34d;
    --danger-readable: #fda4af;
    --focus-ring: rgb(45 212 191 / 0.3);
    --shadow-subtle: 0 2px 5px rgb(0 0 0 / 0.12);
    --edge-highlight: rgb(255 255 255 / 0.14);
    --shadow-control: 0 1px 0 rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.5), inset 0 1px 0 var(--edge-highlight);
    --shadow-card: 0 1px 0 rgb(0 0 0 / 0.6), 0 8px 24px rgb(0 0 0 / 0.55), inset 0 1px 0 var(--edge-highlight), inset 0 0 0 1px rgb(255 255 255 / 0.03);
    --shadow-raised: 0 12px 32px rgb(0 0 0 / 0.65), 0 32px 72px rgb(0 0 0 / 0.7), inset 0 1px 0 var(--edge-highlight), inset 0 0 0 1px rgb(255 255 255 / 0.05);
  --scrim: rgb(2 5 12 / 0.62);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.5 4 4 4-4'/%3E%3C/svg%3E");
  }
}

.dark, [data-theme="dark"] {
  color-scheme: dark;
  --background: #070b14;
  --foreground: #eef2f7;
  --surface: #101827;
  --surface-soft: #0a101c;
  --surface-raised: #182338;
  --surface-muted: #1c2740;
  --border: #34435c;
  --control-border: #6a7c98;
  --muted: #94a3b8;
  --muted-soft: #7f8ea3;
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --accent-readable: #5eead4;
  --accent-foreground: #121b2b;
  --on-accent: #070b14;
  --info-readable: #7dd3fc;
  --caution-readable: #fcd34d;
  --danger-readable: #fda4af;
  --focus-ring: rgb(45 212 191 / 0.3);
  --shadow-subtle: 0 2px 5px rgb(0 0 0 / 0.12);
  --edge-highlight: rgb(255 255 255 / 0.14);
  --shadow-control: 0 1px 0 rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.5), inset 0 1px 0 var(--edge-highlight);
  --shadow-card: 0 1px 0 rgb(0 0 0 / 0.6), 0 8px 24px rgb(0 0 0 / 0.55), inset 0 1px 0 var(--edge-highlight), inset 0 0 0 1px rgb(255 255 255 / 0.03);
  --shadow-raised: 0 12px 32px rgb(0 0 0 / 0.65), 0 32px 72px rgb(0 0 0 / 0.7), inset 0 1px 0 var(--edge-highlight), inset 0 0 0 1px rgb(255 255 255 / 0.05);
  --scrim: rgb(2 5 12 / 0.62);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.5 4 4 4-4'/%3E%3C/svg%3E");
}

/* Optional application baseline. Import after tokens.css; existing apps can keep
   their own backdrop and reset while importing only tokens.css. */
* { box-sizing: border-box; }
html {
  min-width: 320px;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv02" 1, "cv03" 1, "cv04" 1;
  letter-spacing: -0.006em;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent-readable); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.tivup-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--muted);
  transition: color 140ms ease, background-color 140ms ease;
}
.tivup-theme-toggle:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); }
.tivup-theme-toggle:focus-visible { outline: 3px solid var(--accent-readable); outline-offset: 3px; }
.tivup-theme-toggle:disabled { cursor: default; opacity: 0.5; }
.tivup-theme-toggle svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .tivup-theme-toggle { transition: none; } }

/* Elevation classes for applications that do not run Tailwind. Tailwind
   applications use the shadow-control, shadow-card and shadow-raised
   utilities from tailwind.css on their own class lists; both read the same
   tokens. A control, a card and a popup each sit at their own height, so
   nothing on the page is flat against it. */
.tivup-control {
  min-height: 44px;
  padding: 0 12px;
  color: var(--foreground);
  background: var(--surface-raised);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-control);
}
.tivup-control:focus-visible { outline: 3px solid var(--accent-readable); outline-offset: 2px; }
.tivup-button { font-weight: 600; }
.tivup-button-primary { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.tivup-button-primary:hover:not(:disabled) { background: var(--accent-strong); }
.tivup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.tivup-raised {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-raised);
}

/* An outlined pill in the accent colour: navigation to another screen, never
   an action on this one (that stays a filled .tivup-button-primary). */
.tivup-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent-readable);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-readable);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: var(--shadow-control);
}
.tivup-link-pill:hover { background: var(--surface-muted); }
.tivup-link-pill:focus-visible { outline: 3px solid var(--accent-readable); outline-offset: 2px; }

/* The one visible sign that an autosaving field actually saved: a check mark
   and a word, fading in then out, so the person can look away and trust it
   stuck. A Save/Send button stays only where a submission is one atomic act. */
.tivup-saved-mark { font-size: 0.875rem; }
.tivup-saved-mark[data-status="saved"] { color: var(--muted); animation: tivup-save-flash 2000ms ease-in-out both; }
.tivup-saved-mark[data-status="failed"] { color: var(--danger-readable); }
@keyframes tivup-save-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tivup-saved-mark[data-status="saved"] { animation: none; opacity: 1; }
}

/* Going back is said in words: one fading line per screen per browser session,
   sitting above the page's own chrome and out of the way of it, on any device.
   A machine asking for less motion gets the same words, held still. */
.tivup-back-hint {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 60;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-raised);
  color: var(--muted);
  font-size: 0.75rem;
  pointer-events: none;
  user-select: none;
  animation: tivup-back-hint 3200ms ease-in-out both;
}
@keyframes tivup-back-hint {
  0% { opacity: 0; }
  10% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tivup-back-hint { animation: none; opacity: 1; }
}

/* A field that fails a check says so beside itself, in the application's own
   voice, in place of the browser's bubble (attachFieldMessages or
   useFieldMessages writes the paragraph after the control). The field itself
   is marked by controls.css, and .tivup-control here, through aria-invalid. */
.tivup-control[aria-invalid="true"] {
  border-color: var(--danger-readable);
  box-shadow: 0 0 0 1px var(--danger-readable), var(--shadow-control);
}
.tivup-field-message {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 6px 0 0;
  color: var(--danger-readable);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.4;
}
.tivup-field-message::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--danger-readable);
  color: var(--surface);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

/* Native form controls on the shared tokens. Import after tokens.css.
 *
 * Separate from base.css because the two answer different questions. base.css
 * is a whole application baseline -- it claims html, body, the backdrop and the
 * type stack -- so an application with its own reset cannot take it; Operator
 * imports the tokens alone for exactly that reason. This file claims nothing
 * but the controls, so that application can still stop hand-rolling a field.
 *
 * Every rule is wrapped in :where(), which has no specificity at all. The
 * baseline therefore loses to any application rule that says otherwise, down to
 * a bare `select {}` of its own, and reaches only the controls nobody has
 * styled -- which, across this fleet, is most of them. Adopting this file is
 * meant to delete an application's own field recipes, not to fight them.
 *
 * One conflict it cannot win, and the one to look for when adopting: a rule
 * that sets the `background` shorthand resets `background-image` to none, which
 * takes the chevron off the select and leaves a dropdown with no affordance at
 * all. Change such a rule to `background-color`, or delete it in favour of this
 * file.
 */

/* A control nobody styled is the operating system's: three machines show three
   different dropdown arrows, three field heights and a palette that ignores the
   page. These give a field, a dropdown and a text area one shape. */
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]),
  select,
  textarea
) {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  color: var(--foreground);
  box-shadow: var(--shadow-control);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

:where(input, select, textarea):hover:not(:disabled):not([readonly]):not([aria-invalid="true"]) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--control-border));
}

:where(input, select, textarea):focus-visible {
  outline: 3px solid var(--accent-readable);
  outline-offset: 2px;
}

/* A field flagged by the field messages (base.css, .tivup-field-message) wears
   the danger colour until it is right. The attribute sits outside :where() on
   purpose, so the flag outranks an application's bare element rule and still
   yields to an application class that styles its own invalid state. */
:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger-readable);
  box-shadow: 0 0 0 1px var(--danger-readable), var(--shadow-control);
}

/* The message a flagged field gets (field-messages.ts writes the paragraph after
   the control). base.css carries the same rules for applications that take the
   whole baseline; an application with its own reset imports only this file and
   still gets them. A test keeps the two in step. */
:where(.tivup-field-message) {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 6px 0 0;
  color: var(--danger-readable);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.4;
}
:where(.tivup-field-message)::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: var(--danger-readable);
  color: var(--surface);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

:where(input, select, textarea):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

:where(input, textarea)::placeholder { color: var(--muted-soft); }

/* The chevron is a token rather than a shape drawn here because a data URI
   cannot read a custom property: each palette carries its own, drawn in its own
   muted colour, so the arrow follows light and dark like everything else.
   A list box -- multiple, or size greater than one -- keeps its native
   presentation, since it has no closed state for an arrow to describe. */
:where(select:not([multiple]):not([size])) {
  appearance: none;
  padding-inline-end: 36px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

:where(select:not([multiple]):not([size])):dir(rtl) {
  background-position: left 12px center;
  padding-inline-end: 12px;
  padding-inline-start: 36px;
}

/* The open list is drawn by the operating system, not by this file. It follows
   the page because tokens.css sets color-scheme; these two keep the options
   legible on the platforms that do let a page colour them. */
:where(select) option,
:where(select) optgroup {
  background-color: var(--surface-raised);
  color: var(--foreground);
}

:where(textarea) {
  min-height: 80px;
  resize: vertical;
}

/* One line that themes every tick and dot in the fleet: 37 of them across
   these applications, each otherwise the browser's own blue. */
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }

:where(input[type="range"]) { accent-color: var(--accent); }

/* The date and time pickers' own button is drawn by the browser and takes its
   colour from color-scheme, so it is already right in both themes; this only
   says it is something to click. */
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
}
:where(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* A white scrollbar down the side of a dark log pane is the one part of the
   page that never got the memo. scrollbar-color inherits, so this reaches every
   scrolling pane from one declaration. */
:where(html) {
  scrollbar-color: var(--border) transparent;
  scrollbar-width: thin;
}

/* An unstyled dialog is a 2px inset border in the middle of the screen. */
:where(dialog) {
  color: var(--foreground);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-raised);
}
:where(dialog)::backdrop { background-color: var(--scrim); }

@media (prefers-reduced-motion: reduce) {
  :where(input, select, textarea) { transition: none; }
}

/* Authentication has one palette and type scale across host applications.
   App theme overrides cannot recolor or resize the shared sign-in surface. */
.auth-screen {
  color-scheme: light;
  --auth-background: #d7e0e9;
  --auth-foreground: #182235;
  --auth-surface: #e6ecf2;
  --auth-surface-raised: #edf1f5;
  --auth-surface-muted: #d0dae4;
  --auth-border: #aebdcd;
  --auth-control-border: #5f7691;
  --auth-muted: #485a70;
  --auth-accent-readable: #0b6b63;
  --auth-danger-readable: #a50036;
  --auth-on-accent: #fff;
  --auth-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
:where(.dark, [data-theme="dark"]) .auth-screen, .auth-screen[data-theme="dark"] {
    color-scheme: dark;
    --auth-background: #070b14;
    --auth-foreground: #eef2f7;
    --auth-surface: #0e1523;
    --auth-surface-raised: #121b2b;
    --auth-surface-muted: #172132;
    --auth-border: #243044;
    --auth-control-border: #475569;
    --auth-muted: #94a3b8;
    --auth-accent-readable: #5eead4;
    --auth-danger-readable: #fda4af;
    --auth-on-accent: #070b14;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark):not([data-theme="light"]):not([data-theme="dark"]) .auth-screen {
    color-scheme: dark;
    --auth-background: #070b14;
    --auth-foreground: #eef2f7;
    --auth-surface: #0e1523;
    --auth-surface-raised: #121b2b;
    --auth-surface-muted: #172132;
    --auth-border: #243044;
    --auth-control-border: #475569;
    --auth-muted: #94a3b8;
    --auth-accent-readable: #5eead4;
    --auth-danger-readable: #fda4af;
    --auth-on-accent: #070b14;
  }
}
/* Import @tivup/theme/tokens.css and optionally @tivup/theme/base.css before
   this stylesheet. No Tailwind compiler or application source scanning is
   needed to render the shared components. */
.auth-screen {
  box-sizing: border-box;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 3rem 1.25rem;
  background: var(--auth-background, #d7e0e9);
  color: var(--auth-foreground, #182235);
  font-family: var(--auth-font-sans, system-ui, sans-serif);
  line-height: 1.5;
}
.auth-screen *, .auth-screen *::before, .auth-screen *::after { box-sizing: border-box; }
.auth-column { width: 100%; max-width: 25rem; min-width: 0; }
.auth-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.5rem;
  margin: 0 auto 2rem;
  color: var(--auth-accent-readable, #0b6b63);
  font-size: 1rem;
  font-weight: 600;
}
.auth-brand img, .auth-brand svg { display: block; max-width: 100%; }
.auth-brand-content { min-width: 0; max-width: 100%; overflow-wrap: break-word; text-align: center; }
/* The row owns the spacing; equal-width flanks keep the name optically centred
   whether or not a control is present. */
.auth-brand-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 2rem;
}
.auth-brand-row .auth-brand { flex: 1 1 auto; min-width: 0; margin: 0; }
.auth-brand-row-spacer, .auth-brand-row-action {
  display: flex;
  flex: 0 0 2.25rem;
  align-items: center;
  justify-content: flex-end;
  min-height: 2.5rem;
}
/* The gate keeps its own palette, so the shared control is restated here
   rather than inherited from an application stylesheet that may not load. */
.auth-screen .tivup-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--auth-muted, #485a70);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}
.auth-screen .tivup-theme-toggle:hover:not(:disabled) {
  background: var(--auth-surface-muted, #d0dae4);
  color: var(--auth-foreground, #182235);
}
.auth-screen .tivup-theme-toggle:focus-visible {
  outline: 3px solid var(--auth-accent-readable, #0b6b63);
  outline-offset: 3px;
}
.auth-screen .tivup-theme-toggle:disabled { cursor: default; opacity: 0.5; }
.auth-screen .tivup-theme-toggle svg { display: block; width: 18px; height: 18px; }
.auth-heading { margin: 0 0 2rem; text-align: center; }
.auth-title {
  font-family: var(--auth-font-sans);
  margin: 0;
  color: var(--auth-foreground, #182235);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
.auth-subtitle {
  margin: 0.75rem 0 0;
  color: var(--auth-muted, #485a70);
  font-size: 0.9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.auth-form { display: grid; gap: 1rem; margin: 0; }
.auth-field-group { min-width: 0; }
.auth-label {
  display: grid;
  gap: 0.5rem;
  color: var(--auth-foreground, #182235);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}
.auth-field {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  border: 1px solid var(--auth-control-border, #5f7691);
  border-radius: 0.75rem;
  padding: 0.6875rem 0.875rem;
  background: var(--auth-surface-raised, #edf1f5);
  color: var(--auth-foreground, #182235);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.auth-field::placeholder { color: var(--auth-muted, #485a70); opacity: 1; }
.auth-field:hover { border-color: var(--auth-muted, #485a70); }
.auth-field:focus-visible {
  border-color: var(--auth-accent-readable, #0b6b63);
  outline: 2px solid var(--auth-accent-readable, #0b6b63);
  outline-offset: 2px;
}
.auth-field:disabled { opacity: 0.65; cursor: not-allowed; }
.auth-field[aria-invalid="true"] { border-color: var(--auth-danger-readable, #a50036); }
.auth-field-hint, .auth-field-error {
  margin: 0.375rem 0 0;
  color: var(--auth-muted, #485a70);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.auth-field-error { color: var(--auth-danger-readable, #a50036); }
.auth-submit, .auth-alternate {
  box-sizing: border-box;
  display: flex;
  min-height: 3rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  padding: 0.6875rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.auth-submit {
  background: var(--auth-accent-readable, #0b6b63);
  color: var(--auth-on-accent, #fff);
}
.auth-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--auth-accent-readable, #0b6b63) 90%, var(--auth-foreground, #182235)); }
.auth-alternate { background: transparent; color: var(--auth-foreground, #182235); }
.auth-alternate:hover:not(:disabled) { background: var(--auth-surface-muted, #d0dae4); }
.auth-submit:disabled, .auth-alternate:disabled { opacity: 0.65; cursor: not-allowed; }
.auth-submit:focus-visible, .auth-alternate:focus-visible, .auth-quiet:focus-visible, .auth-disclosure > summary:focus-visible {
  outline: 2px solid var(--auth-accent-readable, #0b6b63);
  outline-offset: 3px;
}
.auth-action-icon { display: inline-flex; width: 1.125rem; height: 1.125rem; }
.auth-action-icon > svg { width: 100%; height: 100%; }
.auth-alternates { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
.auth-quiet {
  display: block;
  width: fit-content;
  margin: 0 auto;
  border-radius: 0.25rem;
  color: var(--auth-muted, #485a70);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.auth-quiet:hover { color: var(--auth-accent-readable, #0b6b63); text-decoration-color: currentColor; }
.auth-disclosure { margin-top: 1.5rem; color: var(--auth-muted, #485a70); font-size: 0.875rem; }
.auth-disclosure > summary {
  width: fit-content;
  margin: 0 auto;
  border-radius: 0.25rem;
  padding: 0.25rem;
  cursor: pointer;
  line-height: 1.6;
}
.auth-disclosure > summary:hover { color: var(--auth-accent-readable, #0b6b63); }
.auth-disclosure-content { display: grid; gap: 0.875rem; padding-top: 1rem; }
.auth-disclosure-content > p { margin: 0; }
.auth-panel, .auth-fineprint {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--auth-muted, #485a70);
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.auth-panel { margin-top: 1.5rem; font-size: 0.875rem; }
.auth-panel > p { margin: 0.375rem 0; }
.auth-fineprint { margin-top: 1.75rem; font-size: 0.8125rem; text-align: center; }
.auth-panel a, .auth-fineprint a, .auth-disclosure-content a { color: var(--auth-accent-readable, #0b6b63); text-underline-offset: 3px; }
.auth-notice {
  --auth-notice-hue: #a72d49;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--auth-notice-hue) 35%, var(--auth-border, #aebdcd));
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: color-mix(in srgb, var(--auth-notice-hue) 7%, var(--auth-surface, #e6ecf2));
  color: var(--auth-foreground, #182235);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.auth-notice-warning { --auth-notice-hue: #b37716; }
.auth-notice-positive { --auth-notice-hue: #087f65; }
.auth-notice-info { --auth-notice-hue: var(--auth-accent-readable, #0b6b63); }
.auth-notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.auth-spinner {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 2rem auto 0;
  border: 3px solid var(--auth-border, #aebdcd);
  border-top-color: var(--auth-accent-readable, #0b6b63);
  border-radius: 50%;
  animation: auth-spin 800ms linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .auth-screen { padding: 2rem 1.25rem; }
  .auth-brand { margin-bottom: 1.5rem; }
  .auth-brand-row { margin-bottom: 1.5rem; }
  .auth-brand-row .auth-brand { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-field, .auth-submit, .auth-alternate, .auth-screen .tivup-theme-toggle { transition: none; }
  .auth-spinner { animation: none; }
}

.auth-handoff {
  display: grid;
  justify-items: center;
  gap: 1rem;
}
.auth-handoff-visual {
  width: min(100%, 12.5rem);
  border: 1px solid color-mix(in srgb, var(--auth-accent-readable) 22%, var(--auth-border));
  border-radius: 1.5rem;
  padding: 0.625rem 0.875rem;
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--auth-accent-readable) 16%, transparent), transparent 42%),
    var(--auth-surface-raised);
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--auth-foreground) 10%, transparent);
  color: var(--auth-accent-readable);
}
.auth-handoff-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.auth-handoff-track, .auth-handoff-progress, .auth-handoff-check, .auth-handoff-arrow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-handoff-track { stroke: var(--auth-border); stroke-width: 4; }
.auth-handoff-progress {
  stroke: currentColor;
  stroke-width: 4;
  stroke-dasharray: 18 12;
  animation: auth-handoff-flow 1s linear infinite;
}
.auth-handoff-node { fill: var(--auth-surface); stroke: currentColor; stroke-width: 2; }
.auth-handoff-node-destination { fill: color-mix(in srgb, var(--auth-accent-readable) 12%, var(--auth-surface)); }
.auth-handoff-check, .auth-handoff-arrow { stroke: currentColor; stroke-width: 4; }
.auth-handoff-signal {
  fill: var(--auth-accent-readable);
  transform-origin: 90px 52px;
  animation: auth-handoff-pulse 1.2s ease-in-out infinite;
}
.auth-handoff-status { text-align: center; }
@keyframes auth-handoff-flow { to { stroke-dashoffset: -30; } }
@keyframes auth-handoff-pulse { 50% { opacity: 0.45; transform: scale(0.72); } }
@media (prefers-reduced-motion: reduce) {
  .auth-handoff-progress, .auth-handoff-signal { animation: none; }
}

.auth-screen [hidden] { display: none !important; }
.auth-screen-overlay { position: fixed; inset: 0; z-index: 50; }
.auth-column-status { display: flex; flex-direction: column; align-items: center; }
.auth-status-spinner { margin-top: 2rem; }
.auth-stack { display: grid; gap: 1rem; }
.auth-copy { margin: 0; color: var(--auth-muted); font-size: 0.875rem; line-height: 1.6; overflow-wrap: anywhere; }
.auth-steps { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: auth-step; }
.auth-steps > li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--auth-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.auth-steps > li::before {
  counter-increment: auth-step;
  content: counter(auth-step);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--auth-accent-readable);
  color: var(--auth-on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.375rem;
}
.auth-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: break-word;
  margin: 0 auto;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.25rem;
  background: transparent;
  color: var(--auth-accent-readable);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-link:focus-visible { outline: 2px solid var(--auth-accent-readable); outline-offset: 3px; }
.auth-link:disabled { opacity: 0.65; cursor: not-allowed; }
.auth-status:not([hidden]) { margin-bottom: 1rem; }
.auth-screen section > .auth-copy { margin-bottom: 1rem; }
.auth-title:focus { outline: none; }