/* ---------------------------------------------------------------------------
   Sectional Trainer — "night VFR": a dimmed cockpit panel rendered in the two
   inks of an aeronautical chart, chart magenta and chart blue.
   --------------------------------------------------------------------------- */

:root {
  --ink:        #0a0e13;
  --ink-2:      #0f151d;
  --panel:      #141d27;
  --panel-2:    #1a2531;
  --rule:       #26333f;
  --rule-hot:   #34465a;

  --text:       #d8e2ea;
  --text-dim:   #8496a6;
  --text-faint: #5b6b7a;

  --magenta:    #e2679b;   /* chart magenta, lifted for a dark ground */
  --magenta-lo: #7d2b4c;
  --blue:       #6aa9e0;   /* chart blue */
  --blue-lo:    #23486e;
  --amber:      #e9b45a;   /* instrument backlighting */
  --green:      #7fc08a;
  --red:        #e2686b;

  --shadow: 0 18px 48px rgba(0,0,0,.55);

  --display: "Avenir Next Condensed", "HelveticaNeue-CondensedBold",
             "Roboto Condensed", "Oswald", "Arial Narrow", sans-serif;
  --body:    "Iowan Old Style", "Charter", "Palatino Linotype", Palatino,
             "Book Antiqua", Georgia, serif;
  --mono:    ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute is only a user-agent rule, so any author-level
   `display` silently beats it. Make it win everywhere — nothing should ever
   render while marked hidden. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
  /* faint contour-line wash, the way terrain reads on a chart */
  background-image:
    radial-gradient(1200px 700px at 78% -10%, rgba(106,169,224,.09), transparent 62%),
    radial-gradient(900px 600px at 4% 108%, rgba(226,103,155,.07), transparent 58%);
  display: flex;
  flex-direction: column;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

/* ── bezel / header ─────────────────────────────────────────────────────── */

.bezel {
  flex: none;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  height: 62px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.4);
  position: relative;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rose  { width: 30px; height: 30px; color: var(--magenta); flex: none; opacity: .9; }
.brand-text h1 {
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: .085em;
  text-transform: uppercase;
  margin: 0;
  font-weight: 600;
}
.brand-text p {
  margin: 1px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text-faint);
  white-space: nowrap;
}

.modes { display: flex; gap: 2px; margin-left: auto; }
.mode {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  padding: 8px 15px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.mode:hover { color: var(--text); }
.mode.is-on {
  color: var(--ink);
  background: var(--amber);
  border-color: var(--amber);
}

.readout { display: flex; gap: 22px; padding-left: 22px; border-left: 1px solid var(--rule); }
.gauge { text-align: right; line-height: 1; }
.gauge-n {
  display: block;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.gauge-l {
  display: block;
  margin-top: 3px;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── layout ─────────────────────────────────────────────────────────────── */

.deck {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 430px;
}

.stage-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 68px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 68px),
    var(--ink-2);
}

.stage {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.stage.is-dragging { cursor: grabbing; }

.canvas {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.canvas img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.6);
  background: #fff;
}

.focusbox {
  position: absolute;
  border: 3px solid var(--magenta);
  border-radius: 2px;
  box-shadow: 0 0 0 9999px rgba(6,10,14,.55), 0 0 26px rgba(226,103,155,.8);
  animation: ping 1.5s ease-out 3;
  pointer-events: none;
}
@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(6,10,14,.55), 0 0 0 rgba(226,103,155,.0); }
  50%      { box-shadow: 0 0 0 9999px rgba(6,10,14,.55), 0 0 34px rgba(226,103,155,.95); }
}

.stage-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--text-faint);
}

/* These carry padding and a border, so emptying their text would otherwise
   leave a visible husk behind. */
.chip:empty, .figtag:empty { display: none; }

.figtag {
  position: absolute;
  top: 14px; left: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--text-dim);
  background: rgba(10,14,19,.82);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--blue);
  padding: 6px 11px;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  max-width: 70%;
}

.tools {
  position: absolute;
  /* Raised clear of the Ko-fi tip widget, which fixes itself to the viewport's
     bottom-left corner and would otherwise sit on top of the zoom controls.
     Moving ours is safer than overriding theirs — their DOM is not our API. */
  left: 16px; bottom: 104px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(10,14,19,.86);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 5px;
  backdrop-filter: blur(8px);
}
.tools button {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  min-width: 30px;
  height: 27px;
  padding: 0 9px;
  background: var(--panel);
  color: var(--text-dim);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: all .15s;
}
.tools button:hover { color: var(--text); border-color: var(--rule-hot); background: var(--panel-2); }
.tools .tool-accent { color: var(--magenta); border-color: var(--magenta-lo); }
.tools .tool-accent:hover { background: var(--magenta-lo); color: #fff; }
.tools .tool-accent:disabled { opacity: .3; cursor: default; }
.tools .tool-accent:disabled:hover { background: var(--panel); color: var(--magenta); }
.zoomlvl {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
  padding: 0 7px 0 4px;
  min-width: 46px;
  font-variant-numeric: tabular-nums;
}

.hint {
  flex: none;
  margin: 0;
  padding: 8px 16px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--text-faint);
  border-top: 1px solid var(--rule);
}

/* ── question rail ──────────────────────────────────────────────────────── */

.rail {
  border-left: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--panel) 0%, var(--ink-2) 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.rail-top { padding: 16px 20px 12px; border-bottom: 1px solid var(--rule); }
.rail-h {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 13px;
  margin: 0;
  color: var(--text-dim);
}

.picker { display: block; }
.picker span {
  display: block;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.picker select {
  width: 100%;
  font-family: var(--display);
  font-size: 14.5px;
  letter-spacing: .05em;
  padding: 9px 11px;
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--rule-hot);
  border-radius: 3px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0h10L5 7z' fill='%238496a6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.picker select:focus { outline: 2px solid var(--blue-lo); outline-offset: 1px; }

.bar {
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  margin-top: 14px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--magenta));
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
}
.bar-meta span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card { padding: 20px; flex: 1; }

.tagrow { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.chip {
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  background: var(--magenta-lo);
  color: #ffd8e7;
}
.chip-ghost { background: transparent; border: 1px solid var(--rule-hot); color: var(--text-faint); }

.prompt {
  font-size: 17.5px;
  line-height: 1.44;
  margin: 0 0 18px;
  color: #eaf1f7;
  animation: rise .38s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.choices { display: flex; flex-direction: column; gap: 8px; }

.choice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.4;
  padding: 12px 13px;
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
  animation: rise .38s cubic-bezier(.2,.7,.3,1) both;
}
.choice:nth-child(1) { animation-delay: .04s; }
.choice:nth-child(2) { animation-delay: .09s; }
.choice:nth-child(3) { animation-delay: .14s; }
.choice:nth-child(4) { animation-delay: .19s; }
.choice:hover:not(:disabled) { border-color: var(--rule-hot); background: var(--panel); }
.choice:active:not(:disabled) { transform: translateY(1px); }
.choice:disabled { cursor: default; }

.key {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-faint);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px 5px;
  flex: none;
  margin-top: 1px;
}

.choice.is-right {
  border-color: var(--green);
  background: rgba(127,192,138,.16);
  box-shadow: 0 0 0 1px var(--green) inset, 0 0 22px rgba(127,192,138,.18);
  color: #e6f5e9;
}
.choice.is-right .key { border-color: var(--green); color: var(--green); }
.choice.is-wrong {
  border-color: var(--red);
  background: rgba(226,104,107,.16);
  box-shadow: 0 0 0 1px var(--red) inset;
  color: #fbe4e5;
}
.choice.is-wrong .key { border-color: var(--red); color: var(--red); }
.choice.is-wrong > span:last-child { text-decoration: line-through; text-decoration-color: rgba(226,104,107,.6); }
.choice.is-muted { opacity: .38; }

.verdict {
  margin-top: 18px;
  padding: 15px;
  border-radius: 3px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  animation: rise .3s cubic-bezier(.2,.7,.3,1) both;
}
.verdict.bad { border-left-color: var(--red); }
.verdict.good { border-left-color: var(--green); }
.verdict-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 9px;
}
.verdict.good .verdict-head { color: var(--green); }
.verdict.bad  .verdict-head { color: var(--red); }
.why { margin: 0; font-size: 14.5px; line-height: 1.56; color: var(--text-dim); }

.rail-foot {
  flex: none;
  display: flex;
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--ink-2);
}
.rail-foot button {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--rule-hot);
  transition: all .15s;
}
.ghost { background: transparent; color: var(--text-dim); }
.ghost:hover { color: var(--text); border-color: var(--text-faint); }
.primary {
  flex: 1;
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
  font-weight: 600;
}
.primary:hover:not(:disabled) { background: #f3c675; border-color: #f3c675; }
.primary:disabled { opacity: .28; cursor: default; }

/* ── reference plates ───────────────────────────────────────────────────── */

.plates { list-style: none; margin: 0; padding: 8px 0 20px; overflow-y: auto; }
.plates li { margin: 0; }
.plates button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 14px;
  cursor: pointer;
  transition: all .14s;
}
.plates button:hover { background: var(--panel); color: var(--text); }
.plates button.is-on {
  border-left-color: var(--magenta);
  background: var(--panel);
  color: var(--text);
}
.plates .grp {
  padding: 16px 20px 6px;
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  body { overflow: auto; }
  .bezel { height: auto; flex-wrap: wrap; gap: 14px; padding: 12px 16px; }
  .readout { padding-left: 0; border-left: none; gap: 18px; width: 100%; }
  .deck { grid-template-columns: 1fr; }
  .stage-wrap { height: 58vh; }
  .rail { border-left: none; border-top: 1px solid var(--rule); overflow: visible; }
  .modes { margin-left: 0; }
}

/* ── badges ─────────────────────────────────────────────────────────────── */

.deck-badges { grid-template-columns: 1fr; }

.badge-wrap {
  overflow-y: auto;
  padding: 34px 36px 60px;
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(233,180,90,.06), transparent 60%),
    var(--ink-2);
}

.badge-intro { max-width: 620px; margin-bottom: 30px; }
.badge-intro h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 24px;
  margin: 0 0 10px;
}
.badge-intro p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-dim); }
.badge-intro em { color: var(--text); font-style: italic; }
.badge-tally {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--amber);
  border: 1px solid var(--rule-hot);
  border-radius: 2px;
  padding: 4px 10px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.badge {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 17px 15px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color .18s, transform .18s;
}
.badge:hover { transform: translateY(-2px); border-color: var(--rule-hot); }
.badge p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-faint); }

.badge-head { display: flex; align-items: baseline; gap: 9px; }
.badge-head h3 {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 15px;
  color: var(--text-dim);
}
.badge-mark { font-size: 14px; color: var(--rule-hot); line-height: 1; }

.badge.is-earned {
  background: linear-gradient(180deg, rgba(233,180,90,.09), transparent 70%), var(--panel);
  border-color: var(--amber);
}
.badge.is-earned .badge-head h3 { color: var(--amber); }
.badge.is-earned .badge-mark { color: var(--amber); }
.badge.is-earned p { color: var(--text-dim); }

.badge-bar {
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  overflow: hidden;
  margin-top: auto;
}
.badge-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--magenta));
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.badge-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.badge-locked { margin-top: auto; opacity: .6; }
.badge-when {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--amber);
}

/* ── badge toast ────────────────────────────────────────────────────────── */

.toasts {
  position: absolute;
  right: 18px;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-end;
  pointer-events: none;
  z-index: 20;
}
.toast {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 300px;
  padding: 12px 15px;
  border-radius: 4px;
  background: rgba(16,23,31,.96);
  border: 1px solid var(--amber);
  border-left-width: 3px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  animation: toast-in .42s cubic-bezier(.2,.8,.3,1) both;
  transition: opacity .35s, transform .35s;
}
.toast.is-out { opacity: 0; transform: translateX(14px); }
.toast-kicker {
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.toast strong {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
}
.toast-blurb { font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(26px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .badge-wrap { padding: 22px 18px 40px; }
}

.badge-tiers { display: flex; gap: 5px; margin-top: auto; padding-bottom: 2px; }
.pip {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--rule) inset;
}
.pip.is-on { background: var(--amber); box-shadow: none; }
.badge-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-faint);
  font-style: italic;
  opacity: .85;
}
.badge-tiers + .badge-bar { margin-top: 4px; }

/* ── sync chip and account sheet ────────────────────────────────────────── */

.sync-chip {
  margin-left: 18px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.sync-chip:hover { border-color: var(--rule-hot); color: var(--text); }
.chip-local   { color: var(--text-faint); }
.chip-syncing { color: var(--amber);   border-color: #4a3a1c; }
.chip-synced  { color: var(--green);   border-color: #2b4a30; }
.chip-offline { color: var(--red);     border-color: #4a2626; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5,8,11,.72);
  backdrop-filter: blur(4px);
  animation: fade .2s ease both;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.sheet-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 30px 32px 28px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--rule-hot);
  border-top: 3px solid var(--magenta);
  border-radius: 5px;
  box-shadow: var(--shadow);
  animation: rise .28s cubic-bezier(.2,.7,.3,1) both;
}
.sheet-x {
  position: absolute;
  top: 10px; right: 12px;
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.sheet-x:hover { color: var(--text); }

.sheet-card h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sheet-lede { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.sheet-note { margin: 0 0 18px; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }

.field { display: block; margin-bottom: 13px; }
.field span {
  display: block;
  margin-bottom: 5px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 15px;
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--rule-hot);
  border-radius: 3px;
}
.field input:focus { outline: 2px solid var(--blue-lo); outline-offset: 1px; }

.auth-actions { display: flex; gap: 9px; margin-top: 18px; }
.auth-actions button {
  flex: 1;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 11px 14px;
  border-radius: 3px;
  border: 1px solid var(--rule-hot);
  cursor: pointer;
  transition: all .15s;
}
.auth-actions button:disabled { opacity: .4; cursor: default; }

.linkish {
  display: block;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  cursor: pointer;
  text-decoration: underline;
}
.linkish:hover { color: var(--blue); }

.auth-msg {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--ink);
  border-left: 3px solid var(--rule-hot);
  color: var(--text-dim);
}
.auth-msg.is-ok  { border-left-color: var(--green); color: #d6ead9; }
.auth-msg.is-bad { border-left-color: var(--red);   color: #f6dcdd; }

@media (max-width: 1000px) {
  .sync-chip { margin-left: 0; }
}

/* footer links live in the hint strip, the only persistent full-width row */
.hint { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hint-links { display: flex; gap: 14px; flex: none; }
.hint-links a { color: var(--text-faint); text-decoration: none; }
.hint-links a:hover { color: var(--blue); text-decoration: underline; }

.sheet-foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-faint);
  display: flex;
  gap: 8px;
}
.sheet-foot a { color: var(--text-faint); text-decoration: none; }
.sheet-foot a:hover { color: var(--blue); text-decoration: underline; }

.linkish.danger { color: #b56a6d; }
.linkish.danger:hover { color: var(--red); }