@import url("fonts.css");

/* ============================================================
   ImmoX customer portal, my.jerimmox.com

   The portal is the paperwork side of a bench: it exists to say
   what you have and how long it lasts. Everything is built from
   plates -- a stamped label, then the fact set large underneath.
   The one ornament in the whole panel is the stamp on the status
   plate, because a plan that runs out on a date is exactly what a
   workshop already reads off a validity sticker.

   One rule governs every number:
     money      -> amber, mono
     quantity   -> navy, condensed
     date or id -> mono, always
   ============================================================ */

/* ---- tokens ---------------------------------------------- */
:root {
  /* brand, sampled from the ImmoX logo */
  --ink:      #0B1F3A;
  --ink-2:    #45596F;
  --ink-3:    #7A8CA0;

  --sheet:    #E9EEF4;
  --plate:    #FFFFFF;
  --sunken:   #F3F6FA;
  --line:     #D3DDE8;
  --line-2:   #E4EAF1;

  /* interactive, and nothing else */
  --cyan:     #1188B4;
  --cyan-hi:  #16A5D6;
  --cyan-bg:  #E4F3F9;

  /* meaning */
  --stamp:    #15734C;
  --stamp-bg: #E3F1E9;
  --money:    #A9670A;
  --money-hi: #E09420;
  --money-bg: #FBF0DC;
  --warn:     #8A5B06;
  --warn-bg:  #FCF2DA;
  --alarm:    #9E1F16;
  --alarm-bg: #FAE8E6;

  /* on the navy plate */
  --on-ink:   #E7EEF7;
  --on-ink-2: #93AACA;

  /* type */
  --f:  "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fc: "Barlow Condensed", "Barlow", "Segoe UI", system-ui, sans-serif;
  --fm: "IBM Plex Mono", "Consolas", ui-monospace, monospace;

  --r:    4px;
  --r-lg: 6px;
  --shadow: 0 1px 1px rgba(11, 31, 58, .05), 0 10px 28px -18px rgba(11, 31, 58, .35);
  --ring: 0 0 0 3px rgba(17, 136, 180, .28);
}

*, *::before, *::after { box-sizing: border-box; }

/* The default [hidden] rule is display:none, which any later display value
   silently beats -- a hidden .alert or .card is display:flex and shows up as
   an empty coloured bar. Everything the panel hides from JS relies on this. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--sheet);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* ---- type ------------------------------------------------- */
.eyebrow {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}

.h1 {
  font-family: var(--fc);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--ink);
}

.h2 {
  font-family: var(--fc);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .005em;
  margin: 0;
  color: var(--ink);
}

.h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}

.lede { font-size: 16.5px; color: var(--ink-2); margin: 0; max-width: 62ch; }
.small { font-size: 13.5px; }
.muted { color: var(--ink-3); }
.mono  { font-family: var(--fm); font-size: .93em; letter-spacing: -.01em; }
.money { color: var(--money); font-family: var(--fm); font-weight: 600; }
.r     { text-align: right; }
.opt   { color: var(--ink-3); font-weight: 400; }

/* ---- shell ------------------------------------------------ */
.topbar {
  background: var(--ink);
  border-bottom: 1px solid #071528;
}

.topbar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.topbar-brand { display: block; flex: 0 0 auto; }
.topbar-brand:hover { text-decoration: none; }
.topbar-logo { height: 26px; width: auto; }

.mainnav { display: flex; gap: 4px; flex: 1 1 auto; }

.nav-link {
  font-family: var(--fc);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  padding: 8px 12px;
  border-radius: var(--r);
  white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); text-decoration: none; }
.nav-link.is-on { color: #fff; background: rgba(255, 255, 255, .1); }

/* The balance is a reading, so it is set like one: mono, amber, no chrome
   around it until you point at it. */
.balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--on-ink-2);
  font-size: 12px;
  white-space: nowrap;
}
.balance:hover { text-decoration: none; border-color: rgba(255, 255, 255, .3); }
.balance-value {
  font-family: var(--fm);
  font-size: 14px;
  font-weight: 600;
  color: var(--money-hi);
}

.usermenu { position: relative; flex: 0 0 auto; }

.usermenu-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 5px 6px;
  cursor: pointer;
  color: var(--on-ink);
  font: inherit;
  font-size: 14.5px;
  border-radius: var(--r);
}
.usermenu-btn:hover { background: rgba(255, 255, 255, .07); }

.avatar {
  width: 28px; height: 28px;
  border-radius: 3px;
  background: var(--cyan);
  color: #fff;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  letter-spacing: .02em;
}

.usermenu-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usermenu-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--on-ink-2);
}

.usermenu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 40;
}
.usermenu-list a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--r);
  color: var(--ink);
  font-size: 14.5px;
}
.usermenu-list a:hover { background: var(--sunken); text-decoration: none; }
.usermenu-list a.is-danger { color: var(--alarm); }
.usermenu-list hr { border: 0; border-top: 1px solid var(--line-2); margin: 6px 4px; }

.usermenu-head {
  padding: 8px 10px 10px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 600;
}
.usermenu-head span {
  display: block;
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 2px;
}

.page { max-width: 1180px; margin: 0 auto; padding: 34px 22px 60px; }
.page-head { margin-bottom: 26px; }
.page-head .lede { margin-top: 4px; }

.foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px 40px;
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-3);
}
.foot a { color: var(--ink-3); }
.foot a:hover { color: var(--cyan); }
.foot span { font-family: var(--fc); font-weight: 700; letter-spacing: .16em; }

/* ---- layout ----------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 18px; }
.grid { display: grid; gap: 18px; }
/* Cards in a two-column grid keep their own height. Stretching a short card to
   match a tall one leaves a pane of empty white with nothing in it. */
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* =============================================================
   THE STATUS PLATE
   The signature of the panel. It answers the only question that
   matters on arrival: what have I got, and until when. Exactly
   one per page, never two.
   ============================================================= */
.plate {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-lg);
  padding: 26px 28px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 40px;
  overflow: hidden;
}

/* A single hairline of brand cyan along the top edge: the plate is the one
   place the logo colour is allowed to be decorative. */
.plate::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-hi), rgba(22, 165, 214, 0));
}

.plate-main { flex: 1 1 340px; min-width: 0; }

.plate-k {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  margin: 0 0 10px;
}

.plate-fig {
  font-family: var(--fc);
  font-size: clamp(46px, 8vw, 72px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.015em;
  /* fmt.num groups thousands with a real space. Condensed digits at this size
     close that gap up until 1 240 reads as 1240, so the separator is widened
     rather than left to chance. */
  word-spacing: .1em;
  margin: 0;
  color: #fff;
  overflow-wrap: anywhere;
}
.plate-fig .unit {
  font-size: .3em;
  font-family: var(--fm);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  margin-left: 12px;
  vertical-align: .55em;
}

.plate-note {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--on-ink-2);
}
.plate-note b { color: var(--on-ink); font-weight: 600; }

.plate-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }

/* The stamp. Double rule, wide tracking, knocked a few degrees off square,
   because that is what a stamp pressed by hand looks like. */
.plate-stamp {
  font-family: var(--fc);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 16px 5px;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
  border-radius: 3px;
  transform: rotate(-3deg);
  white-space: nowrap;
  color: #4FD09A;
  opacity: .92;
}
.plate-stamp.is-warn  { color: var(--money-hi); }
.plate-stamp.is-alarm { color: #F08A80; }
.plate-stamp.is-quiet { color: var(--on-ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .plate-stamp { animation: stamp .26s cubic-bezier(.2, .9, .3, 1.1) both; }
  @keyframes stamp {
    from { transform: rotate(-3deg) scale(1.14); opacity: 0; }
    to   { transform: rotate(-3deg) scale(1); opacity: .92; }
  }
}

/* The default button is navy on white, which on the navy plate is a button
   that is not there. Inverted, so the primary action stays the loudest thing
   in the corner. */
.plate .btn {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.plate .btn:hover { background: var(--sheet); border-color: var(--sheet); color: var(--ink); }

.plate .btn.is-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.plate .btn.is-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.plate .btn-row { justify-content: flex-end; }

/* ---- cards ------------------------------------------------ */
.card {
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}
.stat-row:last-of-type { border-bottom: 0; padding-bottom: 0; }

.stat-key { color: var(--ink-2); font-size: 14.5px; }
.stat-val {
  font-family: var(--fm);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.stat-val.is-text { font-family: var(--f); font-size: 15px; font-weight: 600; }
.stat-val.money { color: var(--money); }

.kv { margin: 0; font-size: 14.5px; }
.kv dt { color: var(--ink-3); font-size: 12.5px; margin-bottom: 1px; }
.kv dd { margin: 0 0 12px; color: var(--ink); }
.kv dd:last-child { margin-bottom: 0; }

/* ---- badges and stamps in flow ---------------------------- */
.badge {
  display: inline-block;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--sunken);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge.is-ok    { background: var(--stamp-bg); color: var(--stamp); border-color: #BFE0CE; }
.badge.is-money { background: var(--money-bg); color: var(--money); border-color: #EBD5A8; }
.badge.is-warn  { background: var(--warn-bg);  color: var(--warn);  border-color: #EBD5A8; }
.badge.is-bad   { background: var(--alarm-bg); color: var(--alarm); border-color: #EFC5C0; }

/* ---- buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border-radius: var(--r);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #14355e; border-color: #14355e; text-decoration: none; color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.is-ghost { background: var(--plate); color: var(--ink); border-color: var(--line); }
.btn.is-ghost:hover { background: var(--sunken); border-color: var(--ink-3); color: var(--ink); }

.btn.is-quiet { background: none; border-color: transparent; color: var(--ink-2); padding-left: 8px; padding-right: 8px; }
.btn.is-quiet:hover { background: var(--sunken); color: var(--ink); }

.btn.is-danger { background: var(--alarm); border-color: var(--alarm); }
.btn.is-danger:hover { background: #85190f; border-color: #85190f; }

.btn.is-small { font-size: 13.5px; padding: 8px 13px; }
.btn.is-block { display: flex; width: 100%; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.backlink {
  display: inline-block;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 18px;
}

/* ---- alerts ----------------------------------------------- */
.alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--plate);
  font-size: 14.5px;
  color: var(--ink-2);
}
.alert-mark { flex: 0 0 3px; border-radius: 2px; background: var(--ink-3); align-self: stretch; }
.alert-body { min-width: 0; }
.alert-body p { margin: 0; }
.alert-title { font-weight: 600; color: var(--ink); margin-bottom: 2px !important; }

.alert.is-bad  { background: var(--alarm-bg); border-color: #EFC5C0; color: #6E1B15; }
.alert.is-bad  .alert-mark { background: var(--alarm); }
.alert.is-bad  .alert-title { color: #6E1B15; }
.alert.is-warn { background: var(--warn-bg); border-color: #EBD5A8; color: #6B4705; }
.alert.is-warn .alert-mark { background: var(--warn); }
.alert.is-warn .alert-title { color: #6B4705; }
.alert.is-ok   { background: var(--stamp-bg); border-color: #BFE0CE; color: #0F5637; }
.alert.is-ok   .alert-mark { background: var(--stamp); }
.alert.is-ok   .alert-title { color: #0F5637; }
.alert.is-info { background: var(--cyan-bg); border-color: #B7DDEC; color: #0B5570; }
.alert.is-info .alert-mark { background: var(--cyan); }
.alert.is-info .alert-title { color: #0B5570; }

/* ---- tables ----------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 -20px -20px; padding: 0 20px 20px; }
.table-wrap.can-scroll { box-shadow: inset -14px 0 12px -14px rgba(11, 31, 58, .22); }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table.is-wide { min-width: 620px; }

.table th {
  text-align: left;
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table th.r { text-align: right; padding-right: 0; }

.table td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line-2);
  vertical-align: baseline;
}
.table td.r { text-align: right; padding-right: 0; }
.table tr:last-child td { border-bottom: 0; }
.table td.mono, .table td.money { font-family: var(--fm); font-size: 13.5px; }

/* ---- figures ---------------------------------------------- */
.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px;
}
.fig { background: var(--plate); padding: 14px 16px; }
.fig-k {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.fig-v {
  font-family: var(--fc);
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.fig-v.is-money { color: var(--money); }

/* ---- chips ------------------------------------------------ */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--f);
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--plate);
  color: var(--ink-2);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-3); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- forms ------------------------------------------------ */
.field { margin-bottom: 16px; }

.field-label {
  display: block;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.input {
  width: 100%;
  font-family: var(--f);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  transition: border-color .12s, box-shadow .12s;
}
.input::placeholder { color: #A9B7C6; }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: 0; border-color: var(--cyan); box-shadow: var(--ring); }
.input.mono { font-family: var(--fm); font-size: 14.5px; }

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.field.is-bad .input { border-color: var(--alarm); }
.field.is-bad .input:focus { box-shadow: 0 0 0 3px rgba(158, 31, 22, .2); }

.field-hint { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }
.field-error { font-size: 13px; color: var(--alarm); margin: 6px 0 0; font-weight: 500; }

.input-wrap { position: relative; }
.input-wrap .input { padding-right: 62px; }
.reveal {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 3px;
}
.reveal:hover { color: var(--ink); background: var(--sunken); }

.check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--cyan); cursor: pointer; }

.rules { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rules li {
  font-size: 13px;
  color: var(--ink-3);
  padding-left: 18px;
  position: relative;
}
.rules li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.rules li.is-met { color: var(--stamp); }
.rules li.is-met::before { background: var(--stamp); border-color: var(--stamp); }

.strength { margin-top: 12px; }
.strength-bar { height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.strength-fill { height: 100%; width: 0; background: var(--alarm); transition: width .18s, background .18s; }
.strength-label { font-size: 13px; color: var(--ink-3); margin: 7px 0 0; }

.form-foot { font-size: 14.5px; color: var(--ink-2); margin: 20px 0 0; text-align: center; }

/* ---- codes ------------------------------------------------ */
/* Six single-character inputs in a row, not one field: .code is the row and
   .code-box is a character. Written the other way round once, and the six
   boxes stacked down the page as full-width inputs. */
.code {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.code-box {
  flex: 1 1 0;
  min-width: 0;
  height: 62px;
  font-family: var(--fm);
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0;
  transition: border-color .12s, box-shadow .12s;
}
.code-box:hover { border-color: var(--ink-3); }
.code-box:focus { outline: 0; border-color: var(--cyan); box-shadow: var(--ring); }
.code-box.is-filled { border-color: var(--ink); }
.code.is-bad .code-box { border-color: var(--alarm); }
.code-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-3);
  margin: 8px 2px 0;
}
.countdown { font-family: var(--fm); font-weight: 600; }
.countdown.is-low { color: var(--alarm); }

/* ---- the tokens page --------------------------------------
   Order is the argument. Someone paying per operation is shown the packs
   first and the plan second. Someone already on unlimited is shown their
   own plan first and the packs last, because for them a pack is a spare
   can of fuel, not the next step. */
.tokens { display: flex; flex-direction: column; gap: 24px; }
.tokens .t-plan  { order: 1; }
.tokens .t-packs { order: 2; }
.tokens .t-unlim { order: 3; }
.tokens.is-unlimited .t-packs { order: 4; }

/* Prices stay readable, buying does not. Fading the whole block would hide the
   thing somebody came to check. */
.t-packs.is-locked .plan { background: var(--sunken); border-style: dashed; }
.t-packs.is-locked .plan.is-pick { border-color: var(--line); box-shadow: none; }
.t-packs.is-locked .plan-tag { display: none; }
.t-packs.is-locked .price { color: var(--ink-3); }
/* The most-bought pack keeps a filled button, which is the loudest thing on a
   page that is telling you not to buy. All four go quiet together. */
.t-packs.is-locked .btn {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-3);
  opacity: 1;
}

.packs-head { margin-bottom: 14px; }
.packs-head .h2 { margin-bottom: 3px; }
.packs-head p { margin: 0; }

/* ---- token packs and the plan block ----------------------- */
.plan {
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 18px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan.is-pick { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

.plan-tag {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--ink);
  color: #fff;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 0 var(--r-lg) 0 var(--r);
}

.plan-amount {
  font-family: var(--fc);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--ink);
}
.plan-amount .unit {
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 8px;
  vertical-align: .5em;
}

.plan-price { margin: 0 0 2px; }
.price { font-family: var(--fm); font-size: 24px; font-weight: 600; color: var(--money); }
.cur { font-size: .62em; font-weight: 400; }
.plan-rate { font-size: 13px; color: var(--ink-3); margin: 0 0 18px; }
.plan .btn { margin-top: auto; }

/* The unlimited block. Same navy as the status plate on purpose: they are the
   same subject, seen from the offer side and from the account side. */
.unlim {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 40px;
  align-items: center;
}
.unlim .eyebrow { color: var(--on-ink-2); }
.unlim .h1 { color: #fff; margin-bottom: 8px; }
.unlim-copy p { margin: 0; color: var(--on-ink-2); }
.unlim-copy p + p { margin-top: 8px; }

.unlim-price { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.unlim-k {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  margin: 0 0 4px;
}
.unlim-v {
  font-family: var(--fc);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  color: var(--money-hi);
}
.unlim-v span { font-size: .5em; font-weight: 400; }
.unlim-n { font-family: var(--fm); font-size: 11.5px; color: var(--on-ink-2); margin: 5px 0 0; }
.unlim .btn { background: var(--money-hi); border-color: var(--money-hi); color: #2B1B00; }
.unlim .btn:hover { background: #F0A63C; border-color: #F0A63C; color: #2B1B00; }
.unlim .btn.is-ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.unlim .btn.is-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }

/* ---- the download strip ----------------------------------- */
.getapp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 20px;
}
.getapp-k {
  font-family: var(--fm);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 4px;
}
.getapp-t { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.getapp-v { font-family: var(--fm); font-size: 12px; color: var(--ink-3); margin: 5px 0 0; }

/* ---- the signed-out split --------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 100vh; }

.brandside {
  background: var(--ink);
  color: var(--on-ink);
  padding: 40px 46px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.brandside::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan-hi), rgba(22, 165, 214, 0) 62%);
}
.brandside-home { display: block; }
.brandside-logo { height: 52px; width: auto; }
.brandside-copy { max-width: 30ch; }
.brandside-copy .eyebrow { color: var(--on-ink-2); }
.brandside-copy .h1 { color: #fff; font-size: 42px; }
.brandside-copy p { color: var(--on-ink-2); margin: 0; font-size: 16.5px; }
.brandside-foot { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; align-items: center; }
.brandside-foot a { color: var(--on-ink-2); }
.brandside-foot a:hover { color: #fff; }
.brandside-foot span { font-family: var(--fc); font-weight: 700; letter-spacing: .16em; color: var(--on-ink-2); margin-left: auto; }

.formside { display: flex; align-items: center; justify-content: center; padding: 46px 32px; }
.formside-inner { width: 100%; max-width: 400px; }
.formside-inner .h1 { font-size: 32px; }
.formside-inner .lede { font-size: 15.5px; margin-bottom: 24px; }
.formside-inner .alert { margin-bottom: 20px; }
.formside-inner .getapp { margin-top: 28px; }

/* ---- turnstile -------------------------------------------- */
.turnstile { margin-bottom: 18px; }
.turnstile-box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.turnstile-text { flex: 1 1 auto; }
.turnstile-brand { font-family: var(--fm); font-size: 11px; color: var(--ink-3); }

/* ---- the try rail -----------------------------------------
   The logo's PCB routing: a wire with round pads, one per attempt. A lit pad
   is a try you still have. It appears only where something is running out. */
.rail { display: inline-flex; align-items: center; gap: 0; vertical-align: middle; }
.rail-pad {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 2px var(--cyan-bg);
  flex: 0 0 auto;
}
.rail-wire { width: 16px; height: 2px; background: var(--cyan); flex: 0 0 auto; }
.rail-pad.is-spent { background: var(--line); box-shadow: 0 0 0 2px var(--plate); }
.rail-wire.is-spent { background: var(--line); }
.rail-cap {
  margin-left: 12px;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- the confirm dialog ------------------------------------
   Built entirely in JS by ask(), so none of this appears in the markup. It
   was missing once and the dialog rendered as plain text at the foot of the
   page, which is what an unstyled fixed-position element looks like. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 31, 58, .55);
}
.modal-card {
  width: 100%;
  max-width: 430px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -24px rgba(11, 31, 58, .5);
  padding: 24px;
}
.modal-card .h2 { margin-bottom: 10px; }
.modal-text { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

body.is-locked { overflow: hidden; }

/* ---- odds and ends the JS sets ----------------------------- */
.hide-sm { display: table-cell; }

/* ---- responsive ------------------------------------------- */
@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .brandside { padding: 30px 26px; gap: 26px; }
  .brandside-copy .h1 { font-size: 32px; }
  .brandside-copy { max-width: none; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .topbar-in { height: auto; padding: 12px 18px; flex-wrap: wrap; gap: 12px 16px; }
  /* Stacked, the bar reads brand, balance, you, then the sections. Without the
     order the account avatar lands against the logo and the balance floats off
     on its own. */
  .balance { order: 1; margin-left: auto; }
  .usermenu { order: 2; }
  .mainnav { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 2px; }
  .grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unlim { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 26px 18px 48px; }
  .foot { padding: 0 18px 32px; flex-wrap: wrap; gap: 12px 18px; }
}

@media (max-width: 560px) {
  .plate { padding: 22px 20px; gap: 20px; }
  .plate-side { align-items: flex-start; width: 100%; }
  .plate .btn-row { justify-content: flex-start; width: 100%; }
  .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .figs { grid-template-columns: minmax(0, 1fr); }
  .h1 { font-size: 30px; }
  .usermenu-name { display: none; }
  .card { padding: 16px; }
  .table-wrap { margin: 0 -16px -16px; padding: 0 16px 16px; }
  .formside { padding: 30px 20px; }
  .hide-sm { display: none; }
  .code { gap: 6px; }
  .code-box { height: 52px; font-size: 21px; }
  .modal { padding: 14px; align-items: flex-end; }
  .modal-card { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}