/* Uncharted Works — account site styles
   Direction: Option C "Distinct" — UW palette on a dashboard chassis.
   Inter throughout (ergonomic dashboard language), Cardo reserved for
   the sidebar wordmark only, JetBrains Mono for license keys + amounts.
   Full light/dark parity keyed off :root[data-theme="dark"]. */

/* ---------- Tokens ---------- */
:root {
  --bg: #f6f4ef;            /* UW paper */
  --surface: #fdfbf6;       /* warm white for panels */
  --border: #c8c0ae;        /* UW rule */
  --border-soft: #e0d8c7;   /* softer rule for internal separators */
  --text: #231f20;          /* UW ink */
  --text-muted: #6a6255;    /* UW ink-muted */
  --text-subtle: #897f6f;   /* quieter labels */
  --accent: #2190c1;        /* UW accent */
  --accent-hover: #1a7ba4;
  --good: #5a8a4f;
  --good-bg: #e9ecd9;
  --warn: #a3672d;
  --warn-bg: #f5ecd4;
  --danger: #a14a44;
  --danger-bg: #f3dfdc;

  /* Cross-site bar tokens (shared/styles/crosssite.css) */
  --cs-bg: var(--surface);
  --cs-fg: var(--text-muted);
  --cs-fg-strong: var(--text);
  --cs-rule: var(--border);
  --cs-accent: var(--accent);
  --cs-hover: rgba(35, 31, 32, 0.05);
}
:root[data-theme="dark"] {
  --bg: #1a1713;            /* UW dark paper */
  --surface: #221e19;       /* slightly lifted dark surface */
  --border: #3a342c;        /* UW dark rule */
  --border-soft: #2b2620;
  --text: #e8e2d3;          /* UW dark ink */
  --text-muted: #968c7a;    /* UW dark ink-muted */
  --text-subtle: #6f6656;
  --accent: #4ab5e8;        /* UW dark accent */
  --accent-hover: #6ec3ed;
  --good: #80c088;
  --good-bg: #1e2a1d;
  --warn: #d6a055;
  --warn-bg: #2a1f12;
  --danger: #cc6a66;
  --danger-bg: #2a1715;

  /* Dark-mode cross-site bar hover */
  --cs-hover: rgba(232, 226, 211, 0.06);
}

/* ---------- Base ----------
   Universal reset (box-sizing, html/body margin-zero, antialiasing, line-height)
   lives in shared/styles/base.css. Only Account-specific body typography below. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
  font-size: 14px;
  /* App-shell layout: body owns the viewport height and stacks
     [impersonation-bar?] [cross-site-bar] [.app] vertically. The
     cross-site bar stays pinned at top because the body doesn't
     scroll — `overflow: hidden` plus `height: 100vh` makes the
     sidebar and main scroll independently within the .app track. */
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- App shell ---------- */
.app {
  display: grid;
  /* 360px sidebar — wider than the other UW sites' headers so
     the Cardo wordmark and the 12px/0.18em uppercase tag both
     sit on one line at the brand's canonical proportions. */
  grid-template-columns: 360px 1fr;
  /* Take the rest of the viewport below the cross-site bar. min-height: 0
     is required for grid children to honor overflow inside a flex parent. */
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Sidebar ----------
   Full-height column inside .app. The brand sits pinned at top, the
   middle (.sb-mid) scrolls if the nav list is long, and the user
   block stays pinned at the bottom regardless. The sidebar itself
   never scrolls — only its middle does. That keeps the user
   identity always visible per the layout spec. */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.sb-mid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.sb-brand:hover { text-decoration: none; }
.sb-brand img { height: 36px; width: auto; display: block; flex: 0 0 auto; }
.sb-brand .logo-light { display: block; }
.sb-brand .logo-dark  { display: none; }
:root[data-theme="dark"] .sb-brand .logo-light { display: none; }
:root[data-theme="dark"] .sb-brand .logo-dark  { display: block; }
.sb-brand .brand-text { display: block; min-width: 0; }
.sb-brand .wordmark {
  font-family: 'Cardo', Georgia, Garamond, 'Times New Roman', Times, serif;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.sb-brand .tag {
  display: block;
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
}

.sb-section {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 16px 8px 8px;
  font-weight: 600;
}
.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.sb-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-nav a .icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.sb-nav a:hover { background: var(--border-soft); color: var(--text); text-decoration: none; }
.sb-nav a.current { background: var(--border-soft); color: var(--text); font-weight: 600; }
.sb-nav a.current .icon { opacity: 1; }

.sb-user {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  position: relative;       /* anchor for the popover */
}
/* Trigger reuses the row layout — avatar + name/email block — but is
   a real button so it's keyboard-focusable + announces aria-expanded. */
.sb-user .user-menu-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.sb-user .user-menu-trigger:hover { background: var(--border-soft); }
.sb-user .user-menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Popover sits above the user pill (sidebar bottom-anchored). */
.user-menu-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.user-menu-popover a[role="menuitem"] {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 4px;
}
.user-menu-popover a[role="menuitem"]:hover {
  background: var(--border-soft);
  color: var(--text);
  text-decoration: none;
}
.user-menu-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 0;
}

/* Cross-site bar variant — same script, different positioning. The bar
   lives at the top of the page, so the popover drops BELOW the
   trigger and right-aligns to the trigger's right edge. */
.cs-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cs-user-menu .user-menu-trigger {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.user-menu-caret {
  font-size: 9px;
  opacity: 0.7;
  margin-left: 2px;
}
.cs-user-menu .user-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  left: auto;
  min-width: 200px;
  z-index: 30;
}
.sb-user .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
}
.sb-user .sb-user-text { min-width: 0; }
.sb-user .u-name { font-size: 13px; font-weight: 500; color: var(--text); }
.sb-user .u-email {
  font-size: 11px;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* ---------- Main ----------
   Independent scroll container. Page content (panels, tables, forms)
   scrolls here while the sidebar stays still. min-width: 0 keeps
   wide cells from blowing out the grid track. */
.main {
  padding: 24px 32px 48px;
  min-width: 0;
  overflow-y: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}
.topbar h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--text); }
.topbar .crumbs { font-size: 12px; color: var(--text-subtle); margin-bottom: 2px; }

.theme-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.theme-toggle svg { width: 14px; height: 14px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

/* ---------- Stats row ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.stat .label {
  font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: 4px;
  font-weight: 500;
}
.stat .value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat .sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.stat.warn .value   { color: var(--warn); }
.stat.good .value   { color: var(--good); }
.stat.danger .value { color: var(--danger); }

/* ---------- Panel ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.panel-head h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text); }
.panel-head .actions { display: flex; gap: 8px; }
.panel-head .meta {
  font-size: 12px;
  color: var(--text-subtle);
}
.panel-head .meta-link {
  font-size: 12px;
  color: var(--accent);
}

/* ---------- Empty-row placeholders ----------
   Used inside .panel for empty states: licenses table with no rows,
   billing list with no transactions, etc. Mirrors the spacing of the
   populated content rows (.lic, .bil-row) so panels don't visually
   collapse when empty. Optional CTA link sits at the right. */
.empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--text-subtle);
  font-size: 13px;
}
.empty-row-msg { color: var(--text-subtle); }
.empty-row-cta {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.empty-row-cta:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--border-soft); text-decoration: none; color: var(--text); }
.btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* ---------- Licenses table ---------- */
table.lic {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.lic th, table.lic td {
  padding: 8px 10px;
  text-align: left;
}
table.lic thead th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
table.lic tbody tr + tr td { border-top: 1px solid var(--border-soft); }
table.lic td.name { font-weight: 600; color: var(--text); }
table.lic td.key {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted);
}
table.lic td.acts { font-variant-numeric: tabular-nums; }
table.lic td.actions a {
  color: var(--text-muted);
  font-size: 12px;
  margin-right: 12px;
}
table.lic td.actions a:last-child { margin-right: 0; }
table.lic td.actions a:hover { color: var(--accent); }
/* Destructive action — red treatment so Revoke / Delete / Unassign
   read as consequence-bearing, not as routine "View" links. Mirrors
   the admin-site treatment so the visual vocabulary stays one. */
table.lic td.actions a.action-danger { color: var(--danger); }
table.lic td.actions a.action-danger:hover { color: var(--danger); text-decoration: underline; }
/* Inline annotation for the current row (e.g., "this device" on
   /security/, "you" on /org/seats/). Just typography — italic, muted,
   slightly smaller. Not a chip; not a pill. Reads as a quiet label
   that doesn't compete with the action links on neighboring rows. */
.row-self {
  font-style: italic;
  color: var(--text-muted);
  font-size: 12px;
}

.bar {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 4px;
  background: var(--border-soft);
  border-radius: 99px;
  overflow: hidden;
  margin-left: 8px;
}
.bar span { display: block; height: 100%; background: var(--accent); }

/* ---------- Pills ---------- */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pill.active   { background: var(--good-bg);   color: var(--good); }
.pill.expiring { background: var(--warn-bg);   color: var(--warn); }
.pill.danger   { background: var(--danger-bg); color: var(--danger); }
.pill.expired  { background: var(--danger-bg); color: var(--danger); }
/* Category badge — neutral surface, muted text. Use for taxonomy
   labels (e.g., session type) where the meaning is "what kind of
   thing is this", not "how is this thing doing". Visually quieter
   than the colored state pills so a row reads as one State + one
   Tag, not two competing color blocks. */
.pill.tag {
  background: var(--surface-raised);
  color: var(--text-muted);
  font-weight: 500;
  border: 1px solid var(--border-soft);
}

/* ---------- Two-column lower ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

/* ---------- Downloads list ---------- */
.dl-list .dl-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}
.dl-list .dl-row + .dl-row { border-top: 1px solid var(--border-soft); }
.platform-chip {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--border-soft);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.dl-list .name { font-size: 13px; font-weight: 500; color: var(--text); }
.dl-list .meta { font-size: 12px; color: var(--text-subtle); margin-top: 1px; }

/* ---------- Billing list ---------- */
.bil-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
}
.bil-row + .bil-row { border-top: 1px solid var(--border-soft); }
.bil-row .line { font-size: 13px; font-weight: 500; color: var(--text); }
.bil-row .date { font-size: 12px; color: var(--text-subtle); }
.bil-row .amt {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bil-row .rx { font-size: 12px; color: var(--text-muted); }
.bil-row .rx:hover { color: var(--accent); }
.bil-row .dash {
  font-size: 11px;
  color: var(--text-subtle);
}

/* ---------- Attribution footer ---------- */
.attribution {
  margin-top: 40px;
  padding: 22px 0 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.attribution-nav a {
  color: var(--text-muted);
  margin: 0 9px;
}
.attribution-nav a:hover { color: var(--accent); }

/* Centered UW marker. [data-bouncy-marker] is picked up by
   shared/scripts/footer-marker.js — hard scrolls give it a
   velocity kick and it falls back under gravity. */
.footer-marker-wrap {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  will-change: transform;
}
.footer-marker {
  height: 32px;
  width: auto;
  display: block;
  transform-origin: 50% 100%;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.85;
}
.footer-marker:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: 300px 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; overflow-y: visible; }
  .main { padding: 20px; }
}

/* ---------- Profile forms ----------
   Stacked label+input pairs, minimal chrome. Each panel hosts one
   focused form so a name-change error doesn't visually compete with
   a password-change attempt. */
.profile-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 12px 16px 16px;
  max-width: 520px;
}
.profile-form label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  margin-top: 6px;
}
.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="password"] {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.profile-form input:focus {
  outline: none;
  border-color: var(--accent);
}
.profile-form .form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.profile-form .form-status {
  font-size: 13px;
  color: var(--text-muted);
}
.profile-form .form-status--good { color: var(--good); }
.profile-form .form-status--bad  { color: var(--danger); }
.profile-form .form-note {
  font-size: 12px;
  color: var(--text-subtle);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* ---------- Utility classes (parity with admin-site vocabulary) ----------
   Account-site previously used these tokens inline (color:
   var(--text-subtle), etc.); naming them as classes lets dynamic
   per-page renderers reuse the same vocabulary admin-site has and
   keeps both sides of the family visually coherent. */
.text-subtle { color: var(--text-subtle); }
.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Filter bar ----------
   Used at the top of list pages (currently /licenses/). Field shape
   mirrors admin-site so both surfaces feel like the same family of
   tools — a customer flipping between "see my licenses" and an admin
   flipping between "see all licenses" gets the same affordance. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}
.filter-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 2px;
}
.filter-select {
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.filter-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* ---------- Detail-page layout ----------
   Single-column grid that stacks panels with consistent spacing.
   Used on /licenses/<id>/ and any future per-resource detail page. */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ---------- Key-value definition lists ----------
   Two-column dl for "Profile / License / Billing detail" panels.
   Labels are 10px caps in subtle ink; values are normal-size on the
   panel surface so scanning is fast. Mirrors admin-site .kv. */
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  padding: 12px 16px 16px;
  font-size: 13px;
}
.kv dt {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 3px;
}
.kv dd {
  margin: 0;
  color: var(--text);
}

/* ---------- Empty/loading row inside .lic + .bil-row tables ----------
   Existing .empty-row already exists for the dashboard; add a
   tighter td.empty variant the new dynamic templates use directly
   inside <tbody> (loading state, "no results" state). */
table.lic td.empty {
  padding: 16px;
  text-align: center;
  color: var(--text-subtle);
  font-style: italic;
}
table.lic td.empty a {
  color: var(--accent);
  text-decoration: none;
  font-style: normal;
}
table.lic td.empty a:hover { text-decoration: underline; }

/* ---------- Archive (older entitled versions) — collapsible blocks ----------
   Used on /downloads/. <details>/<summary> for native disclosure
   without bringing in JS. Each block holds a .dl-list that mirrors
   the dashboard's downloads section. */
details.archive-version {
  border-top: 1px solid var(--border-soft);
}
details.archive-version:first-child { border-top: none; }
details.archive-version > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
details.archive-version > summary::-webkit-details-marker { display: none; }
details.archive-version > summary:hover { background: var(--bg); }
details.archive-version[open] > summary { background: var(--bg); }
.archive-ver {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--text);
}
.archive-date {
  color: var(--text-subtle);
  font-size: 12px;
}

/* ---------- Sign-in / Sign-up / Forgot / Reset (signin-layout.njk) ----------
   Pre-auth pages: no chassis (no sidebar / cross-site bar / sidebar
   user-info — all session-derived). Single centered card on a plain
   background. Visual vocabulary mirrors admin-site so the family
   reads as one product across the *.unchartedworksllc.com surface. */
.signin-body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
  font-size: 13px;
  min-height: 100vh;
}
.signin-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 16px 48px;
  gap: 24px;
}
.signin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}
.signin-brand:hover { text-decoration: none; }
.signin-brand img { height: 36px; width: auto; }
.signin-brand .logo-light { display: block; }
.signin-brand .logo-dark  { display: none; }
[data-theme="dark"] .signin-brand .logo-light { display: none; }
[data-theme="dark"] .signin-brand .logo-dark  { display: block; }
.signin-brand-text { display: flex; flex-direction: column; }
.signin-brand-text .wordmark {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.signin-brand-text .tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.signin-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 24px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signin-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.signin-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}
.signin-field { display: flex; flex-direction: column; gap: 4px; }
.signin-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.signin-optional {
  font-weight: 400;
  color: var(--text-subtle);
  text-transform: none;
  letter-spacing: 0;
}
.signin-field input {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
}
.signin-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.signin-hint {
  font-size: 12px;
  color: var(--text-subtle);
  margin: 4px 0 0 0;
  line-height: 1.35;
}
.signin-error {
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 8px 10px;
}
.signin-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.signin-remember input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.signin-submit { width: 100%; justify-content: center; padding: 8px 12px; }
.signin-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
  text-align: center;
  line-height: 1.5;
}
.signin-meta a { color: var(--accent); }
.signin-meta-divider {
  margin: 0 6px;
  color: var(--text-subtle);
}
.signin-flash {
  font-size: 12px;
  color: var(--good);
  background: var(--good-bg);
  border: 1px solid var(--good);
  border-radius: 4px;
  padding: 8px 10px;
}

/* ---------- Org picker (multi-org admin landing) ---------- */
.org-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px 16px;
}
.org-picker-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.org-picker-card:hover {
  border-color: var(--accent);
  background: var(--surface-raised);
  text-decoration: none;
}
.org-picker-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.org-picker-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Contextual back-link (nav-context.js) ----------
   Rendered above the page title on a detail page when the page was
   reached via ?from=<origin>. Subtle — reads as navigation chrome,
   not a primary action. */
a.back-link {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-subtle);
  text-decoration: none;
}
a.back-link:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Sortable table headers (client-sortable-table.js) ----------
   Wired by clientTableSort.attach() — adds .sortable + role=button +
   aria-sort on data-sort headers. Indicator is appended as a span;
   arrow is the active-direction triangle. Hover affords interactivity. */
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable:hover { color: var(--accent); }
th.sortable[aria-sort="ascending"],
th.sortable[aria-sort="descending"] {
  color: var(--accent);
}
th .sort-indicator {
  font-size: 11px;
  color: var(--accent);
  margin-left: 2px;
}

/* Visually hidden helper (a11y) — the seat-form's email <label>
   uses this to keep the form clean while staying screen-reader-
   accessible. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}