/* ==========================================================================
   THE HUB — Inside Spaceman internal portal
   Design tokens + base. Spec: HANDOFF.md (design directions folder).
   ========================================================================== */

/* Registered custom property for the laser-sweep angle.
   Browsers without @property support simply ignore this rule: the sweep
   then appears/retracts instantly instead of animating (accepted fallback
   per handoff — "outline appears without animation"). */
@property --hub-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/* ---------- Design tokens (dark mode = primary) ---------- */
:root {
  /* surfaces */
  --bg: #0D0D11;
  --panel: rgba(28, 28, 28, .82);
  --panel-deep: rgba(19, 19, 19, .85);   /* passphrase field */
  --line: #33312E;

  /* text */
  --text: #F2F0EC;
  --dim: #98948C;
  --faint: #5C5850;                       /* decorative micro-labels only (below AA) */

  /* brand */
  --accent: #E8442E;
  /* accent measures 4.44:1 on the panel — a hair under AA (4.5:1) for
     small text. Small red text (agenda times) uses this readable variant
     (4.97:1); large red (44px countdown) keeps pure accent (AA large ≥3:1). */
  --accent-readable: #EC5540;
  --accent-dark: #B03123;                 /* T-Minus widget chrome */
  /* text/blocks sitting ON the accent color (inverse ink). Dark accents
     (red) take light ink; light accents (cyan/amber/gold) flip to dark. */
  --on-accent: #F2F0EC;
  --ok: #5BE3A0;                          /* reserved EXCLUSIVELY for healthy/OK states */

  /* tag blocks keep fixed ink colors in both themes */
  --ink-dark: #131313;
  --ink-light: #F2F0EC;

  /* glow above the fold (accent at ~8% alpha) */
  --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(232, 68, 46, .08), transparent 70%);

  /* geometry & motion */
  --radius: 6px;
  --gap: 12px;
  --ease-sweep: cubic-bezier(.65, 0, .35, 1);
  --sweep-dur: .55s;

  /* type */
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--hud-glow);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--text); }

[hidden] { display: none !important; }

/* screens */
.screen { position: relative; min-height: 100vh; }
.screen--center { display: grid; place-items: center; overflow: hidden; }

/* starfield carrier — dots are box-shadows set by JS */
#starfield {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Shared building blocks ---------- */

/* Panel: the standard bordered box */
.panel-look {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
}

/* Tick: the 26×2px marker on the top border at left:16px, both ends cut
   diagonally. Colored via --tc (each component sets its own). */
.tick {
  position: absolute;
  top: -1px; left: 16px;
  width: 26px; height: 2px;
  background: var(--tc, var(--dim));
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 4px 100%);
  pointer-events: none;
}

/* Tag labels — signature element.
   A colored tag whose LEADING block is set in the inverse colors. */
.tag {
  display: inline-flex;
  align-items: center;
  font: 700 13px var(--font-mono);
  letter-spacing: .06em;
}
.tag .tag__block { padding: 3px 7px; margin-right: 8px; }
.tag .tag__rest  { padding: 3px 9px 3px 0; }

/* Word-inverted wordmark: [INSIDE]SPACEMAN — white block (red text)
   butted straight into a red block (white text). */
.tag--wordmark { background: var(--accent); color: var(--on-accent); font-size: 15px; letter-spacing: .08em; }
.tag--wordmark .tag__block { background: var(--on-accent); color: var(--accent); }

/* ---------- Airlock (login) ---------- */
.airlock {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  margin: 0;
  padding: 40px 36px;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.airlock__wordmark { display: flex; justify-content: center; }

.airlock__head { text-align: center; }
.screen-title {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
}
.screen-sub {
  margin: 5px 0 0;
  font: 400 10.5px var(--font-mono);
  color: var(--dim);
  letter-spacing: .1em;
}

/* user picker */
.user-picker {
  display: flex;
  gap: var(--gap);
  width: 100%;
  margin: 0; padding: 0;
  border: 0;
}
.user-tile {
  flex: 1;
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px 14px 14px;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-height: 44px;
}
.user-tile__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--tc);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  color: var(--tc);
  font: 700 14px var(--font-mono);
}
.user-tile__name { display: flex; justify-content: center; }

/* Both crew boxes are gray by default. Hovering turns the tick red and the
   red beam sweeps; selecting a user turns the whole tile red (tick, avatar
   ring, tag) and reveals the passphrase. */
.user-tile { --tc: var(--dim); }
.user-tile:hover > .tick,
.user-tile:focus-visible > .tick { background: var(--accent); }
.user-tile:hover > .sweep,
.user-tile:focus-visible > .sweep { --tc: var(--accent); }
.user-tile.is-selected { --tc: var(--accent); }

/* initial-inverted user tags: gray, red when the user is selected */
.tag--user { background: rgba(152, 148, 140, .25); color: #C8C4BC; }
.tag--user .tag__block { background: var(--dim); color: var(--ink-dark); }
.user-tile.is-selected .tag--user { background: var(--accent); color: var(--on-accent); }
.user-tile.is-selected .tag--user .tag__block { background: var(--on-accent); color: var(--accent); }

.user-tile { opacity: .75; transition: opacity .3s ease; }
.user-tile.is-selected, .user-tile:hover, .user-tile:focus-visible { opacity: 1; }

/* passphrase + button */
.airlock__fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel-deep);
  border-radius: var(--radius);
}
.field input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;                     /* focus ring is the wrapper's sweep */
  padding: 12px 14px;
  min-height: 44px;
  font: 400 12px var(--font-mono);
  color: var(--text);
  letter-spacing: .06em;
}
.field input::placeholder { color: var(--faint); }

.btn-airlock {
  position: relative;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius);
  padding: 12px;
  min-height: 44px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  cursor: pointer;
}
.btn-airlock__block {
  background: var(--on-accent);
  color: var(--accent);
  padding: 2px 6px;
  margin-right: 7px;
}

.airlock__footer {
  margin: 0;
  font: 400 9.5px var(--font-mono);
  color: var(--faint);
  letter-spacing: .08em;
  text-align: center;
}

/* ---------- Hub layout ---------- */
.hub-frame {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 40px;
}

.hub-header {
  display: flex;
  flex-wrap: wrap;                 /* header wraps on mobile */
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.hub-header__id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hub-header .screen-sub { margin-top: 2px; font-size: 11px; letter-spacing: .08em; }

.tag--wordmark-sm { font-size: 13px; }
.tag--wordmark-sm .tag__block { padding: 3px 6px; margin-right: 7px; }
.tag--wordmark-sm .tag__rest { padding: 3px 8px 3px 0; }

/* ---------- Tool tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gap);
  margin-top: 20px;
}

/* Each tile sets --tc (its hue) and --tile-bg (hue at ~5% alpha) inline. */
.tile {
  position: relative;
  border: 1px solid var(--line);
  background: var(--tile-bg, var(--panel));
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
}
.tile:hover { color: inherit; }

.tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tile__glyph { font: 500 15px var(--font-mono); color: var(--tc); }
.tile__code  { font: 400 9px var(--font-mono); color: var(--faint); letter-spacing: .1em; }

.tile__name { display: flex; }
/* initial-inverted tool tag: block = dark bg + hue text, rest = hue bg + dark text */
.tag--tool { background: var(--tc); color: var(--ink-dark); font-size: 12px; letter-spacing: .05em; }
.tag--tool .tag__block { background: var(--ink-dark); color: var(--tc); padding: 2px 6px; margin-right: 7px; }
.tag--tool .tag__rest { padding: 2px 8px 2px 0; }

.tile__hint {
  font: 400 10.5px var(--font-mono);
  color: var(--dim);
  margin-top: 6px;
}

/* ---------- Header status module ---------- */
.status {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  font: 500 11px var(--font-mono);
  color: var(--text);
}

/* normal state: one clickable summary row */
.status__summary {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  min-height: 44px;
  cursor: pointer;
  border-radius: var(--radius);
}

/* menu state: the box's content swaps to three crew options */
.status__menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  min-height: 44px;
}
.status__opt {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  display: inline-flex;
  cursor: pointer;
}
.tag--opt { font-size: 10.5px; background: rgba(152, 148, 140, .25); color: #C8C4BC; }
.tag--opt .tag__block { background: var(--dim); color: var(--ink-dark); padding: 2px 5px; margin-right: 5px; }
.tag--opt .tag__rest { padding: 2px 6px 2px 0; }
.tag--opt-accent { background: var(--accent); color: var(--on-accent); }
.tag--opt-accent .tag__block { background: var(--on-accent); color: var(--accent); }
.status__opt:hover .tag { filter: brightness(1.15); }
.status__opt:focus-visible { outline: 1px solid var(--dim); outline-offset: 2px; }
/* the option whose panel is open stays marked while the menu persists */
.status__opt.is-active .tag { filter: brightness(1.2); box-shadow: 0 2px 0 0 var(--dim); }

/* SYS label sits ON the top border, just right of the tick; it fades out on
   hover so the laser beam passes cleanly, and fades back on mouseout. */
.status__sys {
  position: absolute;
  top: -6px; left: 48px;
  font: 600 8.5px var(--font-mono);
  color: var(--faint);
  letter-spacing: .2em;
  background: var(--bg);        /* cuts the border line behind it */
  padding: 0 5px;
  line-height: 11px;
  opacity: 1;
  transition: opacity .3s ease;
  pointer-events: none;
}
.status:hover .status__sys,
.status:focus-visible .status__sys { opacity: 0; }

/* OK-green is reserved exclusively for healthy states */
.status__ok {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ok);
}
.status__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: hub-pulse 2.4s ease-in-out infinite;
}
@keyframes hub-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--ok); opacity: 1; }
  50%      { box-shadow: 0 0 3px var(--ok); opacity: .7; }
}

.status__pipe { color: var(--line); }
.status__time { color: var(--dim); }

/* the signed-in user always wears the accent tag */
.tag--status-user { font-size: 10.5px; background: var(--accent); color: var(--on-accent); }
.tag--status-user .tag__block { background: var(--on-accent); color: var(--accent); padding: 2px 5px; margin-right: 5px; }
.tag--status-user .tag__rest { padding: 2px 6px 2px 0; }

/* ---------- Widgets row ---------- */
.widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}

.widget {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
}
.widget__title { margin: 0 0 12px; display: flex; }

/* widget title tags (initial-inverted), one flavor per widget */
.widget .tag { font-size: 10px; letter-spacing: .14em; }
.widget .tag .tag__block { padding: 2px 5px; margin-right: 6px; }
.widget .tag .tag__rest { padding: 2px 7px 2px 0; }

.tag--w-today { background: var(--text); color: var(--ink-dark); }
.tag--w-today .tag__block { background: var(--ink-dark); color: var(--text); }

.tag--w-tminus { background: var(--accent-dark); color: var(--on-accent); }
.tag--w-tminus .tag__block { background: var(--on-accent); color: var(--accent-dark); }

.tag--w-systems { background: rgba(152, 148, 140, .25); color: #C8C4BC; }
.tag--w-systems .tag__block { background: var(--dim); color: var(--ink-dark); }

/* Today — agenda */
.agenda {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 400 12px var(--font-mono);
}
.agenda__row { display: flex; gap: 12px; }
.agenda__time { color: var(--accent-readable, var(--accent)); }
.agenda__label { color: var(--text); }

/* T-Minus — countdown + mission-elapsed bar */
.widget--tminus {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.tminus__days {
  margin: 4px 0 0;
  font: 700 44px var(--font-mono);
  color: var(--accent);
  line-height: 1;
}
.tminus__unit { font: 400 16px var(--font-mono); color: var(--dim); }
.tminus__bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.tminus__fill { height: 100%; width: 0%; background: var(--accent); }
.tminus__legend {
  display: flex;
  justify-content: space-between;
  font: 400 10px var(--font-mono);
  color: var(--dim);
  margin-top: 7px;
}

/* Ship Systems */
.sysrows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font: 400 11.5px var(--font-mono);
  color: var(--text);
}
.sysrows__row { display: flex; justify-content: space-between; }
.sysrows__value--ok { color: var(--ok); }

/* ---------- Signature: tick + clockwise laser sweep ----------
   A conic-gradient ring, masked to the 2px border band via
   mask-composite: exclude. The beam grows from --hub-f (just past the
   tick's end) to --hub-a; hover/focus drives --hub-a to --hub-m (a ~4px
   sliver before the tick's start). Both angles are computed per element
   by calib() in hub.js, so the sweep is correct at any box size.

   Fallback: browsers without @property can't interpolate --hub-a, so the
   ring appears/disappears instantly on hover/focus — the accepted
   "static outline, no animation" fallback from the handoff. */
.sweepable {
  --hub-a: 1.5deg;
  transition: --hub-a var(--sweep-dur) var(--ease-sweep);
}
.sweepable.dimmable,
.user-tile.sweepable {
  transition: opacity .3s ease, --hub-a var(--sweep-dur) var(--ease-sweep);
}
.sweepable:hover,
.sweepable:focus-visible,
.sweepable:focus-within {
  --hub-a: var(--hub-m, 353deg);
}
/* the sweep ring itself is the focus indicator */
.sweepable:focus-visible { outline: none; }

.sweep {
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  padding: 2px;                     /* ring thickness */
  background: conic-gradient(from var(--hub-f, 300deg),
    transparent 0deg, transparent 1.5deg,
    var(--tc) 1.5deg, var(--tc) var(--hub-a),
    transparent var(--hub-a));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Signature: dim-the-rest ---------- */
.is-dim { opacity: .4; }

/* ---------- Light mode (dark stays primary) ----------
   Handoff light palette: bg #F2F5F8, text #0E141D, accent #C93A26,
   green kept for OK (darkened to hold WCAG AA on light surfaces). */
:root[data-theme="light"] {
    --bg: #F2F5F8;
    --panel: rgba(255, 255, 255, .82);
    --panel-deep: rgba(255, 255, 255, .92);
    --line: #C6CCD4;
    --text: #0E141D;
    --dim: #49525F;
    --faint: #7C8595;
    --accent: #C93A26;
    --accent-readable: #B33420;   /* darker for AA on light panels */
    --accent-dark: #A32E1E;
    --ok: #0E8C57;
    --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(201, 58, 38, .08), transparent 70%);
}
/* white box-shadow stars are invisible on a light sky — flip them dark */
[data-theme="light"] #starfield { filter: invert(1); opacity: .35; }
/* Today-widget tag inverts with --text, keep its block readable */
[data-theme="light"] .tag--w-today { color: var(--bg); }
[data-theme="light"] .tag--w-today .tag__block { background: var(--bg); color: var(--text); }
[data-theme="light"] .tag--user,
[data-theme="light"] .tag--opt,
[data-theme="light"] .tag--w-systems { color: #3D4550; }

/* ---------- Reduced motion ----------
   Sweep and pulse are disabled; outlines/states appear instantly. */
@media (prefers-reduced-motion: reduce) {
  .sweepable,
  .sweepable.dimmable,
  .user-tile.sweepable { transition: none; }
  .status__dot { animation: none; }
  .status__sys { transition: none; }
  .is-dim { transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .hub-frame { padding: 20px 16px 32px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .status__summary, .status__menu { flex-wrap: wrap; gap: 8px 12px; }
  .airlock { padding: 32px 20px; }
}

/* ---------- Accent variants (Settings > ACCENT) ----------
   Alternates from the original design file. Light accents flip
   --on-accent to dark ink; light-theme rows use darkened hues for AA. */
:root[data-accent="cyan"] {
  --accent: #63D8F1; --accent-readable: #63D8F1; --accent-dark: #3E97AA;
  --on-accent: #131313;
  --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(99, 216, 241, .08), transparent 70%);
}
:root[data-theme="light"][data-accent="cyan"] {
  --accent: #0F7A96; --accent-readable: #0F7A96; --accent-dark: #0A5B70;
  --on-accent: #F2F5F8;
  --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(15, 122, 150, .08), transparent 70%);
}
:root[data-accent="amber"] {
  --accent: #FFB000; --accent-readable: #FFB000; --accent-dark: #B87F00;
  --on-accent: #131313;
  --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(255, 176, 0, .08), transparent 70%);
}
:root[data-theme="light"][data-accent="amber"] {
  --accent: #8A6100; --accent-readable: #8A6100; --accent-dark: #6B4B00;
  --on-accent: #F2F5F8;
  --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(138, 97, 0, .08), transparent 70%);
}
:root[data-accent="gold"] {
  --accent: #D8B36A; --accent-readable: #D8B36A; --accent-dark: #A8854A;
  --on-accent: #131313;
  --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(216, 179, 106, .08), transparent 70%);
}
:root[data-theme="light"][data-accent="gold"] {
  --accent: #7E5E1E; --accent-readable: #7E5E1E; --accent-dark: #5F4614;
  --on-accent: #F2F5F8;
  --hud-glow: radial-gradient(900px 340px at 50% -8%, rgba(126, 94, 30, .08), transparent 70%);
}

/* ---------- Motion off (Settings > MOTION) ----------
   Same effect as prefers-reduced-motion, driven by the manual toggle. */
:root[data-motion="off"] .sweepable,
:root[data-motion="off"] .sweepable.dimmable,
:root[data-motion="off"] .user-tile.sweepable { transition: none; }
:root[data-motion="off"] .status__dot { animation: none; }
:root[data-motion="off"] .status__sys { transition: none; }

/* ---------- Crew panels (Settings / Profile dropdowns) ---------- */
.status-wrap { position: relative; display: flex; }

.hud-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, 92vw);
  max-height: min(70vh, 560px);
  z-index: 6;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: 400 11px var(--font-mono);
  color: var(--text);
}

/* Only this inner body scrolls — the panel frame (and its tick/sweep
   overlay, which is absolutely positioned and would otherwise scroll
   away with the content) stays fixed, as do the title and CLOSE. */
.hud-panel__body {
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hud-panel__section { display: flex; flex-direction: column; gap: 8px; }
.hud-panel__label {
  font: 600 9px var(--font-mono);
  letter-spacing: .18em;
  color: var(--dim);
}

.tag--w-profile { background: var(--accent); color: var(--on-accent); }
.tag--w-profile .tag__block { background: var(--on-accent); color: var(--accent); }

/* segmented buttons (theme, motion, save) */
.seg { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.seg__btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--dim);
  font: 500 10px var(--font-mono);
  letter-spacing: .08em;
  padding: 7px 10px;
  cursor: pointer;
}
.seg__btn:hover { color: var(--text); border-color: var(--dim); }
.seg__btn.is-active { color: var(--text); border-color: var(--accent); }

/* accent swatches */
.swatch {
  width: 24px; height: 24px;
  border-radius: 4px;
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
}
/* ring drawn inward (border + inset gap) — an outer shadow would get
   cropped by the scrollable panel body at its edges */
.swatch.is-active { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--bg); }

/* tile manager / pin rows */
.tm-row { display: flex; align-items: center; gap: 8px; }
.tm-row[draggable="true"] { cursor: grab; }
.tm-row.is-dragging { opacity: .4; }
.tm-row__name { flex: 1; letter-spacing: .06em; }
.tm-row__grip { color: var(--faint); font-size: 12px; letter-spacing: -1px; cursor: grab; }
.tm-row.is-off .tm-row__name { color: var(--faint); text-decoration: line-through; }
.tm-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--dim);
  font: 500 11px var(--font-mono);
  width: 26px; height: 26px;
  flex: none;
  cursor: pointer;
}
.tm-btn:hover { color: var(--text); border-color: var(--dim); }
.tm-btn:disabled { opacity: .35; cursor: default; }
.tm-btn.is-pinned { color: var(--accent); border-color: var(--accent); }

.hud-panel__close { align-self: stretch; text-align: center; margin-top: 2px; }

/* discreet gray cousin of the airlock button, tick + sweep included */
.btn-close {
  position: relative;
  background: rgba(152, 148, 140, .14);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px;
  min-height: 34px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  cursor: pointer;
}
.btn-close:hover { color: var(--text); }
.btn-close__block {
  background: var(--dim);
  color: var(--ink-dark);
  padding: 1px 5px;
  margin-right: 6px;
}

/* profile name + note */
.name-row { display: flex; gap: 8px; }
.name-row input {
  flex: 1;
  min-width: 0;
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font: 400 11px var(--font-mono);
  padding: 7px 9px;
}
.hud-note { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.6; }
.hud-note code { font-family: var(--font-mono); color: var(--text); }

/* utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- weekly backup reminder --- */
.backup-reminder{display:block;align-items:center;gap:12px;margin:0 0 18px;
padding:10px 14px;border-radius:8px;font-size:12px;letter-spacing:.04em;
border:1px solid var(--line,#232a34);background:#12161d;color:var(--text,#e6e9ef)}
.backup-reminder[data-tier="due"]{border-color:#5a6472}
.backup-reminder[data-tier="warn"]{border-color:#E8C468;background:rgba(232,196,104,.08);color:#E8C468}
.backup-reminder[data-tier="over"]{border-color:#e5484d;background:#1a0e10;color:#ff9a9d;
position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9000;
max-width:520px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.backup-reminder__msg{flex:1 1 auto;font-weight:500}
.backup-reminder__done,.backup-reminder__later{flex:0 0 auto;cursor:pointer;
font-family:inherit;font-size:11px;letter-spacing:.06em;padding:6px 10px;border-radius:6px;
border:1px solid currentColor;background:transparent;color:inherit}
.backup-reminder__done{background:#e6e9ef;color:#0a0c10;border-color:#e6e9ef;font-weight:600}
.backup-reminder__done:hover{background:#fff}
.backup-reminder__later{opacity:.7}
.backup-reminder__later:hover{opacity:1}

/* backup reminder command hint */
.backup-reminder__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.backup-reminder__cmd{margin-top:8px;font-size:11px;line-height:1.5;opacity:1}
.backup-reminder__cmd code{display:inline-block;margin-top:3px;padding:3px 7px;border-radius:5px;
background:rgba(0,0,0,.35);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
user-select:all;color:inherit}

/* copyright */
.hub-footer{margin:24px 0 32px;text-align:center;font-size:10px;
letter-spacing:.14em;color:var(--dim);opacity:.55}

/* backup reminder command row */
.backup-reminder__cmdrow{display:flex;align-items:center;gap:10px;margin:8px 0}
.backup-reminder__copy{font:inherit;font-size:10px;letter-spacing:.1em;
padding:4px 10px;border:1px solid currentColor;background:transparent;
color:inherit;border-radius:4px;cursor:pointer;white-space:nowrap}
.backup-reminder__copy:hover{background:rgba(255,255,255,.08)}
.backup-reminder__note{display:block;opacity:.7;font-size:10px;margin-top:6px}