/* ============================================================
   CertWatch — "The Watch"
   Deep teal-ink instrument panel · parchment text · status lamps
   Signature: the validity timeline (issued → now → expiry)
   ============================================================ */

:root {
  --ink:      #0C1A24;  /* background — instrument panel at night */
  --ink-2:    #102733;  /* raised surface */
  --ink-3:    #0A141C;  /* recessed / footer */
  --bone:     #ECE7DA;  /* primary text — printed-certificate parchment */
  --bone-dim: #8DA0AC;  /* secondary text — cool grey-blue */
  --line:     #1E3543;  /* hairlines, timeline track */
  --line-2:   #2A4759;  /* brighter hairline */

  --valid:    #46B39A;  /* healthy */
  --warn:     #E0A33E;  /* expiring soon */
  --expired:  #E2574C;  /* expired / critical */
  --none:     #5E7280;  /* no reading */

  --display: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --maxw: 940px;
  --r: 4px;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* faint top vignette — the only atmospheric touch */
  background-image: radial-gradient(120% 60% at 50% -10%, #11283500 0%, #0C1A2400 60%),
                    linear-gradient(180deg, #102733 0%, var(--ink) 320px);
}

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 5vw, 56px) clamp(18px, 5vw, 40px) 64px;
}

/* expanded display face — reads like an instrument readout / station board */
.wordmark, .hero__domain, .hero__num, .card__num, .summary dd {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
}

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: clamp(28px, 5vw, 48px);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tick {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--valid);
  position: relative;
  flex: none;
}
.tick::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--valid);
  opacity: .55;
}

.wordmark {
  margin: 0;
  font-size: clamp(26px, 6vw, 40px);
  letter-spacing: .14em;
  line-height: 1;
}

.tagline {
  margin: 14px 0 0;
  color: var(--bone-dim);
  font-size: 14px;
  letter-spacing: .01em;
}

.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 24px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.summary__cell {
  background: var(--ink-2);
  padding: 14px 16px;
}
.summary dt {
  margin: 0;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.summary dd {
  margin: 6px 0 0;
  font-size: 28px;
  font-stretch: 125%;
  line-height: 1;
}
.summary__cell.is-ok dd       { color: var(--valid); }
.summary__cell.is-expiring dd { color: var(--warn); }
.summary__cell.is-expired dd  { color: var(--expired); }

/* ---------- hero: the nearest edge ---------- */

.hero {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, var(--ink-2), var(--ink-3));
  padding: clamp(22px, 4vw, 36px);
  position: relative;
  overflow: hidden;
}
.hero::before {  /* status hairline along the top edge */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tone, var(--none));
}
.hero.is-ok       { --tone: var(--valid); }
.hero.is-expiring { --tone: var(--warn); }
.hero.is-expired  { --tone: var(--expired); }
.hero.is-none     { --tone: var(--none); }

.hero__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}
.hero__domain {
  margin: 0;
  font-size: clamp(26px, 5vw, 44px);
  letter-spacing: .005em;
  word-break: break-word;
  line-height: 1.02;
}
.hero__readout {
  text-align: right;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hero__num {
  font-size: clamp(40px, 9vw, 72px);
  line-height: .9;
  color: var(--tone, var(--bone));
}
.hero__unit {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.hero__meta {
  margin: 22px 0 0;
  color: var(--bone-dim);
  font-size: 13px;
}

.hero--empty { text-align: left; }
.hero--empty .hero__domain { font-size: clamp(22px, 4vw, 32px); }

/* ---------- the timeline (signature) ---------- */

.timeline { --tone: var(--none); margin-top: 24px; }
.timeline.is-ok       { --tone: var(--valid); }
.timeline.is-expiring { --tone: var(--warn); }
.timeline.is-expired  { --tone: var(--expired); }
.timeline.is-none     { --tone: var(--none); }

.timeline__track {
  position: relative;
  height: 8px;
  background: var(--line);
  border-radius: 99px;
}
.timeline--hero .timeline__track { height: 12px; }

.timeline__fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--tone);
  border-radius: 99px;
  transform-origin: left center;
}

.timeline__now {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--bone);
  border-radius: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 35%, transparent),
              0 0 10px color-mix(in srgb, var(--tone) 70%, transparent);
}
.timeline--hero .timeline__now { top: -6px; bottom: -6px; }

.timeline__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--bone-dim);
}

/* ---------- add bar ---------- */

.add { margin: clamp(26px, 5vw, 40px) 0; }
.add__label {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 10px;
}
.add__row { display: flex; gap: 10px; flex-wrap: wrap; }
.add__input {
  flex: 1 1 280px;
  min-width: 0;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 15px;
  padding: 13px 15px;
}
.add__input::placeholder { color: #5b6d78; }
.add__input:focus-visible {
  outline: none;
  border-color: var(--valid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--valid) 25%, transparent);
}

/* ---------- buttons ---------- */

.btn {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  border-radius: var(--r);
  padding: 12px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary {
  background: var(--valid);
  color: #06120e;
  font-weight: 600;
}
.btn--primary:hover { background: #5cc6ac; }
.btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--bone-dim);
  padding: 9px 14px;
}
.btn--ghost:hover { border-color: var(--bone-dim); color: var(--bone); }
.btn--danger:hover { border-color: var(--expired); color: var(--expired); }
.btn:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 2px;
}

/* ---------- watchlist ---------- */

.watchlist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.watchlist__head h3 {
  margin: 0;
  font-family: var(--display);
  font-stretch: 110%;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.watchlist__count { color: var(--bone-dim); font-size: 12px; }
.watchlist__empty { color: var(--bone-dim); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.card {
  --tone: var(--none);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--tone);
  border-radius: var(--r);
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}
.card.is-ok       { --tone: var(--valid); }
.card.is-expiring { --tone: var(--warn); }
.card.is-expired  { --tone: var(--expired); }
.card.is-none     { --tone: var(--none); }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__id { min-width: 0; }
.card__domain {
  font-size: 17px;
  word-break: break-word;
}
.card__port { color: var(--bone-dim); }

.badge {
  flex: none;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}

.card__readout { display: flex; align-items: baseline; gap: 8px; }
.card__num {
  font-size: 30px;
  line-height: 1;
  color: var(--tone);
}
.card__num--none { color: var(--bone-dim); }
.card__unit {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.card__error { margin: 0; color: var(--bone-dim); font-size: 13px; }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.card__meta { margin: 0; color: var(--bone-dim); font-size: 12px; min-width: 0; }
.card__actions { display: flex; gap: 8px; flex: none; }
.card__actions form { margin: 0; }

/* ---------- colophon ---------- */

.colophon {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  color: var(--bone-dim);
  font-size: 12px;
}
.colophon__stub { color: var(--warn); }

/* ---------- entrance motion (timeline fill grows in once) ---------- */

.has-js .timeline__fill {
  transform: scaleX(0);
  transition: transform .9s cubic-bezier(.16, .84, .44, 1);
}
.has-js.is-ready .timeline__fill { transform: scaleX(1); }
.has-js .timeline__now { opacity: 0; transition: opacity .5s ease .5s; }
.has-js.is-ready .timeline__now { opacity: 1; }

/* ============================================================
   AWSWATCH + shared nav
   ============================================================ */

/* ---------- top nav (between the two watches) ---------- */

.topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(22px, 4vw, 36px);
  font-size: 12px;
}
.topnav__mark {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 8px color-mix(in srgb, var(--valid) 70%, transparent);
}
.topnav__sys {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 11px;
  color: var(--bone-dim);
  margin-right: 6px;
}
.topnav__link {
  color: var(--bone-dim);
  text-decoration: none;
  letter-spacing: .08em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.topnav__link:hover { color: var(--bone); }
.topnav__link.is-on {
  color: var(--bone);
  border-bottom-color: var(--valid);
}
.topnav__link:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

.tick--aws { border-color: var(--warn); }
.tick--aws::after { background: var(--warn); }

.masthead__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.masthead__topline form { margin: 0; }

/* ---------- ledger: the four answers ---------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: clamp(22px, 4vw, 36px);
}
.ledger__cell { background: var(--ink-2); padding: 18px 18px 16px; }
.ledger__cell dt {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-dim);
}
.ledger__cell dd {
  margin: 10px 0 4px;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 40px;
  line-height: .95;
}
.ledger__cell dd.ledger__money { font-size: 26px; }
.ledger__cell p { margin: 0; font-size: 12px; color: var(--bone-dim); }
.ledger__cell.is-bad dd { color: var(--expired); }

/* ---------- month-by-month strip ---------- */

.months__row {
  display: flex;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.month {
  flex: 1;
  background: var(--ink-2);
  padding: 14px 12px;
  text-align: center;
}
.month.is-accruing { background: var(--ink-3); }
.month__val { display: block; font-family: var(--mono); font-size: 14px; }
.month.is-accruing .month__val { color: var(--warn); }
.month__lbl {
  display: block; margin-top: 6px;
  font-size: 11px; letter-spacing: .05em; color: var(--bone-dim);
}
.months { margin-bottom: clamp(22px, 4vw, 36px); }

/* ---------- account panels ---------- */

.accounts { margin-bottom: 8px; }

.acct {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--valid);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.acct.is-bad { border-left-color: var(--expired); }

.acct__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.acct__name { font-size: 17px; }
.acct__num { color: var(--bone-dim); margin-left: 10px; font-size: 13px; }
.acct__entity { margin: 6px 0 0; color: var(--bone-dim); font-size: 12px; }

/* signature: the billing pulse (month-wise spend bars) */
.pulse-wrap { margin: 18px 0 10px; }
.pulse {
  display: flex; align-items: flex-end; gap: 8px;
  height: 76px;
}
.pulse__col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pulse__bar {
  width: 72%;
  min-height: 3px;
  background: var(--line-2);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
}
.pulse__bar.is-accruing {
  background: repeating-linear-gradient(
    -45deg, var(--warn) 0 2px, color-mix(in srgb, var(--warn) 30%, transparent) 2px 6px);
}
.pulse-axis { display: flex; gap: 8px; margin-top: 7px; }
.pulse-axis span { flex: 1; text-align: center; font-size: 10px; color: var(--bone-dim); }
.acct__cur { margin: 4px 0 0; font-size: 13px; color: var(--bone-dim); }
.acct__cur strong { color: var(--bone); font-family: var(--mono); }

/* invoices table */
.inv { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.inv thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-dim);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--line);
}
.inv tbody td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.inv__amt { font-variant-numeric: tabular-nums; }
.inv__usd { display: block; color: var(--bone-dim); font-size: 11px; }
.inv__due { color: var(--bone-dim); }
.inv__actcol, .inv__act { text-align: right; width: 1%; white-space: nowrap; }
.inv__act form { margin: 0; }
.inv__row.is-overdue .inv__due { color: var(--expired); }

.tag {
  --tone: var(--none);
  display: inline-block;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}
.tag--paid    { --tone: var(--valid); }
.tag--due     { --tone: var(--warn); }
.tag--overdue { --tone: var(--expired); }

.acct__none, .acct__err, .acct__refreshed { font-size: 12px; color: var(--bone-dim); }
.acct__err { color: var(--warn); }
.acct__refreshed { margin: 12px 0 0; }
.acct__none { margin: 14px 0 0; }

/* badge tones work standalone (CertWatch sets them via the parent card too) */
.badge--ok       { --tone: var(--valid); }
.badge--expiring { --tone: var(--warn); }
.badge--expired  { --tone: var(--expired); }
.badge--none     { --tone: var(--none); }

.btn--xs { padding: 6px 11px; font-size: 12px; }

/* entrance: pulse bars grow up with the timeline fills */
.has-js .pulse__bar {
  transform: scaleY(0);
  transition: transform .8s cubic-bezier(.16, .84, .44, 1);
}
.has-js.is-ready .pulse__bar { transform: scaleY(1); }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
  .inv thead { display: none; }
  .inv tbody td { display: inline-block; border: none; padding: 2px 12px 2px 0; }
  .inv__row { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .inv__act { display: block; text-align: left; margin-top: 6px; }
}

@media (max-width: 560px) {
  .summary { grid-template-columns: repeat(2, 1fr); }
  .hero__readout { text-align: left; }
  .card__foot { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .timeline__fill { transform: scaleX(1); transition: none; }
  .has-js .timeline__now { opacity: 1; transition: none; }
  .has-js .pulse__bar { transform: scaleY(1); transition: none; }
  .btn { transition: none; }
}

/* ============================================================
   Auth — sign-in + user management
   ============================================================ */

/* user area pushed to the right of the top nav */
.topnav__user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topnav__user form { margin: 0; }
.topnav__who { color: var(--bone); letter-spacing: .04em; }

/* flash banner (sign-in errors, "user added", etc.) */
.flash {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--ink-2));
  color: var(--bone);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: 13px;
}

/* labelled fields (sign-in + add-user) */
.field { display: grid; gap: 8px; }
.field__label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.field .add__input { width: 100%; flex: none; }
.field--check {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 9px;
}
.field--check span { font-size: 13px; color: var(--bone-dim); }
.field--check input { accent-color: var(--valid); width: 15px; height: 15px; }

/* sign-in page (standalone, centred) */
.auth-body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.auth {
  width: 100%;
  max-width: 380px;
  padding: 32px clamp(18px, 5vw, 32px);
}
.auth__brand { display: flex; align-items: center; gap: 12px; }
.auth .wordmark { font-size: 28px; letter-spacing: .14em; }
.auth__tagline { margin: 12px 0 26px; color: var(--bone-dim); font-size: 14px; }
.auth__form { display: grid; gap: 16px; }
.auth__submit { width: 100%; margin-top: 4px; }
.auth__form--card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.auth__hint { margin: 24px 0 0; color: var(--bone-dim); font-size: 12.5px; line-height: 1.7; }
.auth__hint code {
  display: inline-block;
  margin-top: 6px;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 4px 9px;
  color: var(--bone);
}