:root{
  color-scheme:dark;
  --ground:#10141f;
  --ground-deep:#0c0f18;
  --raised:#151a28;
  --hairline:#2a3143;
  --hairline-strong:#3a4358;
  --grid-line:rgba(139,147,165,.055);
  --ink:#e6e4dc;
  --ink-2:#b9bfcb;
  --muted:#8b93a5;
  --brass:#d9a441;
  --brass-dim:#8a6a2e;
  --brass-hover:#e5b457;
  --on-brass:#241b08;
  --warn:#c98f4e;
  --warn-dim:#5a4526;
  --down:#c96a5e;
  --down-dim:#5c352f;
  --down-hover:#e08a7e;
  --loc-live:#171b27;
  --error-ground:#1d1216;
  --qr-plate:#fff;
  --sans:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --display:'Marcellus',Georgia,serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
}
*{box-sizing:border-box}
html{scrollbar-color:var(--hairline-strong) var(--ground)}
body{
  font-family:var(--sans);font-size:.98rem;line-height:1.5;
  color:var(--ink);
  background-color:var(--ground);
  /* the coordinate grid of the chart table */
  background-image:
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 56px);
  margin:0;caret-color:var(--brass);
}
body.plate{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.25rem}
/* the auth card sits directly on the plate; main supplies the landmark only */
body.plate main{display:contents}
::selection{background:var(--brass);color:var(--on-brass)}
/* screen-reader-only: present for assistive tech, invisible on canvas */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
a{color:var(--ink);text-decoration-color:var(--brass-dim);text-underline-offset:2px}
a:hover{color:var(--brass)}
main{max-width:960px;margin:0 auto;padding:1.5rem}

/* headings are atlas plate titles, set in the engraved display face */
h1{font-family:var(--display);font-weight:400;font-size:1.55rem;letter-spacing:.02em;margin:0;color:var(--ink)}
h1.wordmark{font-size:1.35rem}
h2{font-family:var(--display);font-weight:400;font-size:1.02rem;letter-spacing:.05em;
   margin:2.3rem 0 .8rem;padding-bottom:.45rem;border-bottom:1px solid var(--hairline);color:var(--ink)}
h2 a{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;
       padding-bottom:.9rem;border-bottom:1px solid var(--hairline-strong);margin-bottom:1.3rem}
nav{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
footer{text-align:center;padding:2.5rem 0 1rem;font-size:.78rem;color:var(--muted)}
.stamp{font-family:var(--mono);font-size:.76rem;color:var(--muted);white-space:nowrap}
.adduser{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.adduser input{flex:1 1 160px;min-width:0}
.chart-note{font-size:.72rem}

table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--hairline);vertical-align:top}
th{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
   color:var(--muted);border-bottom:1px solid var(--hairline-strong);padding-bottom:.4rem}
td .muted{font-size:.85rem}

/* instrument keys: the brass key acts, the rest are drawn buttons */
button{font:inherit;font-size:.85rem;padding:.34rem .85rem;border-radius:3px;
  border:1px solid var(--brass);background:var(--brass);color:var(--on-brass);cursor:pointer}
button:hover{background:var(--brass-hover)}
button:disabled,button[aria-disabled="true"]{opacity:.55;cursor:default}
button.ghost,a.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--hairline-strong);
  text-decoration:none;display:inline-block;font-size:.85rem;padding:.3rem .8rem;border-radius:3px}
button.ghost:hover,a.ghost:hover{color:var(--brass);border-color:var(--brass-dim)}
button.danger{background:transparent;color:var(--down);border-color:var(--down-dim)}
button.danger:hover{color:var(--down-hover);border-color:var(--down)}
form.inline{display:inline}

input{font:inherit;padding:.42rem .6rem;border-radius:3px;
  border:1px solid var(--hairline);background:var(--ground-deep);color:var(--ink)}
input::placeholder{color:var(--muted)}
input:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}

.badge{display:inline-block;font-family:var(--sans);font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  padding:.12rem .55rem;border:1px solid var(--hairline);border-radius:2px;color:var(--muted)}
.badge.live{color:var(--brass);border-color:var(--brass-dim)}
.badge.creating,.badge.recovering{color:var(--warn);border-color:var(--warn-dim)}
.badge.down,.badge.deleting{color:var(--down);border-color:var(--down-dim)}

.notice,.error{padding:.55rem .85rem;border-radius:3px;margin:.6rem 0;font-size:.92rem;border:1px solid var(--hairline-strong);background:var(--raised);color:var(--ink-2)}
.error{color:var(--down);border-color:var(--down-dim);background:var(--error-ground)}
.ok{color:var(--ink-2)}
.err{color:var(--down);font-size:.92rem;margin-bottom:.5rem}

code{font-family:var(--mono);font-size:.78rem;background:var(--raised);
  border:1px solid var(--hairline);border-radius:3px;padding:.1rem .35rem;word-break:break-all}
.muted{color:var(--muted)}

/* the atlas of exits: catalog tiles, the live one banded in brass */
.locs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;margin:.7rem 0}
.loc{background:var(--raised);border:1px solid var(--hairline);border-radius:3px;padding:.55rem .75rem}
.loc .city{font-size:.95rem;font-weight:600}
.loc .country{color:var(--muted);font-size:.8rem;margin-top:.1rem}
.loc.live{border-color:var(--brass-dim);background:var(--loc-live)}
.loc .dot{color:var(--brass);font-size:.7rem;vertical-align:.08em}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.4}}
.loc.live .dot{animation:breathe 2.4s ease-in-out infinite}

/* daily usage: brass columns rising once, like a tide chart being drawn */
.usage-chart{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:.4rem}
.usage-bar{flex:1;min-width:3px;min-height:4px;background:var(--brass-dim);border-radius:1px 1px 0 0;
  transform-origin:bottom;animation:rise .7s cubic-bezier(.22,.8,.26,1) backwards}
.usage-bar.empty{background:var(--hairline);animation:none}
@keyframes rise{from{transform:scaleY(0)}}

/* the quickstart: numbered margin column, catalog-style */
ol.steps{margin:.5rem 0 0;padding:0;list-style:none;counter-reset:step}
ol.steps li{counter-increment:step;position:relative;padding-left:1.9rem;margin:.3rem 0;font-size:.9rem}
ol.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font-family:var(--mono);font-size:.72rem;color:var(--brass)}
details{margin:.25rem 0}
summary{cursor:pointer;color:var(--ink-2)}
summary:hover{color:var(--brass)}
/* size comes from the img's width/height attributes, so the plate is laid
   out before the stylesheet arrives */
.qr{background:var(--qr-plate);padding:8px;border-radius:3px}

/* the auth plate: a framed chart card, double-ruled like an engraving */
.card{background:var(--raised);border:1px solid var(--hairline);outline:1px solid var(--hairline);
  outline-offset:4px;padding:2.1rem 2.3rem;width:340px;max-width:100%}
.card h1{font-size:1.3rem;margin:0 0 1.2rem;text-align:center}
.card input{width:100%;margin:.35rem 0;padding:.6rem .7rem}
.card button{width:100%;padding:.62rem;margin-top:.85rem;font-size:.95rem}
.card button.ghost{width:auto;padding:.3rem .8rem;font-size:.85rem}
.card .hint,.card .alt{font-size:.88rem;text-align:center;color:var(--muted)}
.card .hint{margin-top:1rem}
.card .alt{margin-top:.9rem}
.card .alt a{color:var(--ink-2)}
.card .alt a:hover{color:var(--brass)}
.widget{margin:.8rem 0}
.pager{display:flex;gap:.5rem;justify-content:center;margin:1.2rem 0}
.card.wide{width:520px}
.addr{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .8rem;padding:.55rem 0;border-bottom:1px solid var(--hairline)}
.addrform{margin-left:auto;display:flex;gap:.5rem}
.mono{font-family:var(--mono);font-size:.85rem}

@media (max-width:640px){
  main{padding:1rem .9rem}
  th,td{padding:.45rem .4rem}
  .card{padding:1.6rem 1.3rem}
  /* thumb-sized tap targets: the default button is ~30px tall */
  button{padding:.6rem .95rem}
  .adduser input{flex:1 1 100%}
  /* A five-column profile table cannot breathe at phone width: let the
     whole table keep its natural width and scroll sideways instead of
     crushing every cell into mid-word wraps. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .usage-bar{animation:none}
  .loc.live .dot{animation:none}
}