/* HNS.ONE account panel.
 *
 * Same palette, type and voice as hns.one, mail.hns.one and the webmail
 * client: warm neutral ground, one accent (#7a5c00 light / #e8c766 dark),
 * system fonts, no external assets of any kind — the panel is served under a
 * CSP that would refuse them, and a self-contained stylesheet is the point.
 *
 * Structure:
 *   1  tokens          6  banners & notes    11  forms
 *   2  base & focus    7  panels & cards     12  empty states
 *   3  shell           8  tables             13  anonymous pages
 *   4  navigation      9  tags               14  utilities
 *   5  typography     10  buttons            15  responsive
 *
 * Two rules worth keeping when editing:
 *   - state is never carried by colour alone (see §9) — every tag has a shape
 *     marker and a word, because a red and a green pill are the same pill to a
 *     lot of people, and to anyone printing a page;
 *   - destructive actions look different from safe ones (see §10), because
 *     "Withdraw" and "Re-check" sitting side by side as identical grey buttons
 *     is how a published key gets taken down by accident.
 */

/* ------------------------------------------------------------- 1  tokens */

:root{
  /* Ground and ink */
  --bg:#fbfaf8; --panel:#fff; --ink:#17150f; --muted:#5f5a4e; --dim:#776f60;
  --line:#e6e1d6; --line-soft:#efebe2; --hover:#f2efe8; --sel:#f0e9d6;

  /* One accent, shared with every public page */
  --accent:#7a5c00; --accent-ink:#fff; --accent-soft:#f3ecd8;

  /* Status. --warn is deliberately distinct from --accent: the accent is
     "this is the thing to press", amber is "read this before you do". */
  --ok:#2f6f3e;  --ok-bg:#2f6f3e14;
  --warn:#8a5300; --warn-bg:#8a530014;
  --bad:#a0192f; --bad-bg:#a0192f12;
  --note:#fdf6e3; --note-line:#e8d9a8;

  /* Spacing scale — everything in the panel is a multiple of these */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;

  /* Radii and depth */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;
  --shadow:0 1px 2px rgb(23 21 15 / .04), 0 4px 16px rgb(23 21 15 / .05);

  --sidebar:15rem;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Dark, twice over: once for the system preference (unless the reader has
   explicitly asked for light), and once for an explicit choice. Every token
   defined on :root above is redefined here — none is left to inherit a light
   value into a dark page. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12110e; --panel:#1a1815; --ink:#f2efe6; --muted:#a8a292; --dim:#8b8474;
  --line:#2e2b25; --line-soft:#252118; --hover:#221f1a; --sel:#2b2519;
  --accent:#e8c766; --accent-ink:#17150f; --accent-soft:#332c1a;
  --ok:#7fc48f;  --ok-bg:#7fc48f1a;
  --warn:#dfae3c; --warn-bg:#dfae3c1a;
  --bad:#f4839a; --bad-bg:#f4839a1a;
  --note:#241f14; --note-line:#4a3f22;
  --shadow:0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
}}
:root[data-theme="dark"]{
  --bg:#12110e; --panel:#1a1815; --ink:#f2efe6; --muted:#a8a292; --dim:#8b8474;
  --line:#2e2b25; --line-soft:#252118; --hover:#221f1a; --sel:#2b2519;
  --accent:#e8c766; --accent-ink:#17150f; --accent-soft:#332c1a;
  --ok:#7fc48f;  --ok-bg:#7fc48f1a;
  --warn:#dfae3c; --warn-bg:#dfae3c1a;
  --bad:#f4839a; --bad-bg:#f4839a1a;
  --note:#241f14; --note-line:#4a3f22;
  --shadow:0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
}

/* ---- compatibility aliases -------------------------------------------
 * The previous stylesheet's token names, kept alive because templates owned
 * by OTHER sessions still use them inline: templates/names.html and
 * templates/verify_name.html reference --fg, --panel and --line directly.
 * Dropping these would silently degrade those pages, which is not this
 * redesign's call to make. Delete the block once those templates stop
 * carrying inline colours -- nothing in this stylesheet uses them.
 */
:root,:root[data-theme="dark"]{
  --fg:var(--ink); --mut:var(--muted);
  --acc:var(--accent); --accbg:var(--accent-soft);
  --red:var(--bad);  --redbg:var(--bad-bg);
  --grn:var(--ok);   --grnbg:var(--ok-bg);
  --amb:var(--warn); --ambbg:var(--warn-bg);
  --line2:var(--line-soft);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fg:var(--ink); --mut:var(--muted);
  --acc:var(--accent); --accbg:var(--accent-soft);
  --red:var(--bad);  --redbg:var(--bad-bg);
  --grn:var(--ok);   --grnbg:var(--ok-bg);
  --amb:var(--warn); --ambbg:var(--warn-bg);
  --line2:var(--line-soft);
}}

/* --------------------------------------------------------- 2  base & focus */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* One visible focus treatment for everything that takes focus. :focus-visible
   so a mouse click on a button does not leave a ring behind, while every
   keyboard path shows one. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

::selection{background:var(--sel);color:var(--ink)}

/* Keyboard users land on the navigation on every page load; this lets them
   jump past it. Off-screen until focused. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--panel);color:var(--ink);border:1px solid var(--accent);
  border-radius:var(--r);padding:var(--s2) var(--s4);font-weight:600;
}
.skip:focus{left:var(--s3);top:var(--s3);text-decoration:none}

code,kbd,samp{
  font-family:var(--mono);font-size:.88em;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.08em .38em;
  overflow-wrap:anywhere;      /* a CID or a TLSA record must not widen a page */
}
pre{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4);overflow-x:auto;margin:var(--s3) 0;
}
pre code{background:0;border:0;padding:0;font-size:.85rem;line-height:1.55}

/* ------------------------------------------------------------- 3  shell */

.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

.side{
  grid-column:1;
  border-right:1px solid var(--line);
  background:var(--panel);
  padding:var(--s5) 0 var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  min-width:0;
}

.main{
  padding:var(--s6) var(--s6) var(--s8);
  max-width:72rem;
  min-width:0;   /* without this a wide table stretches the grid track and the
                    whole page scrolls sideways, .tw's overflow-x notwithstanding */
}

.brand{
  font-size:1.15rem;font-weight:650;letter-spacing:-.02em;
  padding:0 var(--s5) var(--s4);
}
.brand a{color:var(--ink)}
.brand a:hover{text-decoration:none;color:var(--accent)}
.brand i{font-style:normal;color:var(--muted);font-weight:400}

/* -------------------------------------------------------- 4  navigation */

.grp{display:flex;flex-direction:column;gap:1px;padding:0 var(--s3)}
.grp .lbl{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:700;padding:var(--s2) var(--s2) var(--s1);
}
.grp a{
  display:flex;align-items:center;gap:var(--s3);
  padding:.5rem .6rem;border-radius:var(--r-sm);
  font-size:.94rem;color:var(--muted);
}
.grp a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
/* Current page: accent text AND a left rule AND a tinted ground, so it is not
   the colour alone doing the work. */
.grp a.on{
  background:var(--accent-soft);color:var(--accent);font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent);
}
.grp .ic{width:1.1em;text-align:center;opacity:.8;font-size:.8rem;flex:none}

/* Registry is deliberately quieter: smaller, dimmer, behind a rule. It should
   read as "another room", not as more of the same menu. */
.divide{
  display:flex;align-items:center;gap:var(--s2);
  margin:var(--s4) var(--s5) var(--s1);
  font-size:.62rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--dim);font-weight:700;
}
.divide:before,.divide:after{content:"";height:1px;background:var(--line);flex:1}
.grp.adv a{font-size:.88rem;padding:.42rem .6rem;color:var(--dim)}
.grp.adv a:hover{color:var(--ink)}
.grp.adv .lbl{
  font-size:.68rem;color:var(--dim);opacity:.85;font-weight:600;
  text-transform:none;letter-spacing:.01em;padding-bottom:var(--s2);
}

.side-foot{
  margin-top:auto;padding:var(--s4) var(--s5) 0;
  border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);
  display:flex;flex-direction:column;gap:var(--s2);
}
.nstat{display:flex;align-items:center;gap:var(--s2);font-size:.78rem}
.nstat.w{color:var(--warn)} .nstat.e{color:var(--bad)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);flex:none}
.dot.w{background:var(--warn)} .dot.e{background:var(--bad)}
.who{font-weight:600;color:var(--ink);font-size:.86rem;
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.op{
  font-size:.6rem;font-weight:700;background:var(--warn-bg);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  padding:.1rem .4rem;border-radius:var(--r-pill);
  letter-spacing:.05em;text-transform:uppercase;
}
.linkish{
  background:0;border:0;font:inherit;font-size:.82rem;color:var(--muted);
  cursor:pointer;text-align:left;text-decoration:underline;
  text-underline-offset:2px;
  /* A real control, so it gets a real target: 24px is the WCAG 2.2 minimum
     and this used to be a 21px-tall word. */
  padding:.2rem 0;min-height:24px;display:inline-flex;align-items:center;
}
.linkish:hover{color:var(--ink)}

/* -------------------------------------------------------- 5  typography */

h1{font-size:1.7rem;line-height:1.2;letter-spacing:-.025em;font-weight:650;margin-bottom:var(--s1)}
h1 .sl{color:var(--dim);font-weight:400}
.sub,.lede{color:var(--muted);font-size:1rem;margin-bottom:var(--s5);max-width:44rem}
h2{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
  margin:var(--s6) 0 var(--s3);font-weight:700;
}
h2:first-child{margin-top:0}
h3{font-size:1rem;font-weight:650;letter-spacing:-.01em;margin:var(--s5) 0 var(--s2)}
.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s2);
}
p{margin:var(--s3) 0}
p:first-child{margin-top:0}
p:last-child{margin-bottom:0}
ul,ol{padding-left:1.15rem;margin:var(--s3) 0}
li{margin:var(--s1) 0}

/* --------------------------------------------------- 6  banners & notes */

.banner{
  padding:var(--s3) var(--s4);border-radius:var(--r);margin-bottom:var(--s4);
  font-size:.94rem;border:1px solid var(--line);background:var(--panel);
  border-left-width:3px;
}
.banner a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.banner strong{font-weight:650}
/* Django's message tags land here verbatim, hence the doubled names. */
.banner.warn,.banner.warning{border-color:var(--note-line);border-left-color:var(--warn);
  background:var(--note);color:var(--ink)}
.banner.err,.banner.error{border-color:color-mix(in srgb,var(--bad) 30%,var(--line));
  border-left-color:var(--bad);background:var(--bad-bg);color:var(--ink)}
.banner.success{border-color:color-mix(in srgb,var(--ok) 30%,var(--line));
  border-left-color:var(--ok);background:var(--ok-bg);color:var(--ink)}
.banner.info{border-left-color:var(--accent)}

/* The advisory block the public pages use for "being straight with you" text.
   Same treatment here so the honesty reads as the same voice. */
.note{
  background:var(--note);border:1px solid var(--note-line);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin:var(--s4) 0;font-size:.94rem;
}
.note strong{display:block;margin-bottom:var(--s1)}
.note p{margin:var(--s2) 0 0}
.note p:first-of-type{margin-top:0}

/* -------------------------------------------------- 7  panels & cards */

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
}
.panel.pad{padding:var(--s4) var(--s5)}
/* Measure for panels that hold a form or prose. A form wider than this stops
   scanning as one thing, and the labels drift away from their controls. */
.panel.form{max-width:36rem}
.panel.wide{max-width:48rem}
.panel + .panel{margin-top:var(--s4)}
.panel-head{
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);
  font-weight:650;font-size:.94rem;
}
.panel-row{padding:var(--s3) var(--s5);border-bottom:1px solid var(--line-soft);font-size:.9rem}
.panel-row:last-child{border-bottom:0}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s3)}
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4) var(--s4);
}
.card .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--dim);font-weight:700}
.card .v{font-size:1.6rem;font-weight:650;letter-spacing:-.03em;margin-top:var(--s1);
  line-height:1.15}
.card .v.sm{font-size:1rem;letter-spacing:-.01em;font-weight:600}
.card .v.r{color:var(--bad)} .card .v.a{color:var(--warn)}
.card .n{font-size:.82rem;color:var(--muted);margin-top:var(--s1)}

/* A labelled pair, for the "what this is / what it says" blocks. */
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s4);font-size:.9rem}
.kv dt{font-weight:650;color:var(--muted)}
.kv dd{overflow-wrap:anywhere}

/* ------------------------------------------------------------ 8  tables */

.tw{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background-color:var(--panel);
  /* Scroll shadows, pure CSS: the two `local` gradients travel with the
     content and cover the shadows when there is nothing more to see, so the
     hint at the edge appears ONLY when the table really does continue past
     it. Without this a phone user has no way to know the last two columns
     exist. */
  background-image:
    linear-gradient(to right, var(--panel) 30%, transparent),
    linear-gradient(to left,  var(--panel) 30%, transparent),
    linear-gradient(to right, rgb(23 21 15 / .13), transparent),
    linear-gradient(to left,  rgb(23 21 15 / .13), transparent);
  background-position:left center,right center,left center,right center;
  background-size:2.5rem 100%,2.5rem 100%,.9rem 100%,.9rem 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.tw table{border:0}
/* Let a table keep its columns and scroll inside the wrapper rather than
   crushing "owned name 14898" into a three-line stack on a phone. This is
   safe only because .main sets min-width:0 -- without that the min-width here
   stretches the grid track and scrolls the whole PAGE sideways, which is
   exactly the bug this stylesheet replaced. */
.tw table{min-width:32rem}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{
  text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--dim);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap;
  background:var(--panel);
}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--hover)}
td.nm{font-weight:600;white-space:nowrap}
/* A cell whose whole content is a link is a control, so it gets a 24px target
   rather than the 20px line box the text alone would give it. */
td > a:only-child{display:inline-flex;align-items:center;min-height:24px}
td.nm .sl{color:var(--dim);font-weight:400}
.num{font-variant-numeric:tabular-nums}
/* Ledger movements. The sign is already in the text (a leading + or -), so
   the colour is reinforcement, never the only cue. */
td.spend{color:var(--bad)}
td.add{color:var(--ok)}
/* Deliberately NOT right-aligned: the templates mark value cells .num for
   tabular figures but do not mark the matching header, so right-aligning here
   puts every column's numbers under a left-aligned title. */
/* Long opaque strings (CIDs, fingerprints, xpubs) get to wrap rather than
   force the table wider than the screen. */
td code{white-space:normal}

/* -------------------------------------------------------------- 9  tags */

/* State is never colour alone: every tag carries a shape marker and the word
   itself. The single-letter class names come from the views (core.views
   ._expiry_tag and mail.pgp.destinations) and from the CLI's own buckets, so
   they are kept as the API and given readable aliases alongside. */
.tag{
  font-size:.7rem;padding:.15rem .5rem;border-radius:var(--r-pill);font-weight:650;
  display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;
  border:1px solid currentColor;line-height:1.5;vertical-align:.05em;
}
.tag:before{font-size:.85em;line-height:1}

.tag.o,.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.o:before,.tag.ok:before{content:"●"}

.tag.u,.tag.pending{background:var(--warn-bg);color:var(--warn)}
.tag.u:before,.tag.pending:before{content:"◆"}

.tag.s,.tag.off{background:transparent;color:var(--muted);border-color:var(--line)}
.tag.s:before,.tag.off:before{content:"○"}

.tag.c,.tag.critical{background:var(--bad-bg);color:var(--bad)}
.tag.c:before,.tag.critical:before{content:"▲"}

.tag.x,.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.x:before,.tag.bad:before{content:"✕"}

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

.btn,button{font:inherit}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-size:.94rem;font-weight:600;padding:.5rem 1rem;
  border-radius:var(--r);border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);
  cursor:pointer;text-align:center;
}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn:active{filter:brightness(.95)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}

/* Secondary. `.secondary` is the name several templates already use. */
.btn.ghost,.btn.secondary{
  background:transparent;color:var(--ink);border-color:var(--line);font-weight:600;
}
.btn.ghost:hover,.btn.secondary:hover{background:var(--hover);border-color:var(--dim);filter:none}

/* Destructive. Never the same shape as the safe button beside it: outlined,
   in the bad colour, and it says so. */
.btn.danger{
  background:transparent;color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 45%,transparent);
}
.btn.danger:hover{background:var(--bad-bg);border-color:var(--bad);filter:none}

.btn.sm{font-size:.82rem;padding:.3rem .65rem;border-radius:var(--r-sm)}
.btn.block{width:100%}

/* A row of actions. */
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:var(--s4) 0}
.actions form{margin:0}

/* ------------------------------------------------------------- 11  forms */

/* Every control shares one shape. Before this, selects and textareas were
   styled inline per template and each one drifted. */
/* Matched by exclusion, not by listing types: `<input name="bid">` with no
   type attribute is a text field and was missing every style here, so the
   auctions form rendered half raw-browser and half designed. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
select,textarea{
  font-family:inherit;font-size:.94rem;font-weight:400;line-height:1.5;
  padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--ink);width:100%;max-width:26rem;
  text-transform:none;letter-spacing:normal;
}
select{max-width:26rem;cursor:pointer}
textarea{resize:vertical;font-family:var(--mono);font-size:.85rem;max-width:100%;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--dim)}
input[type=file]{
  font:inherit;font-size:.9rem;width:100%;max-width:26rem;
  padding:var(--s4);border:1px dashed var(--line);border-radius:var(--r);
  background:var(--bg);color:var(--muted);cursor:pointer;
}
input[type=file]:hover{border-color:var(--accent);color:var(--ink)}
input[type=number]{max-width:12rem}

label{
  display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--dim);font-weight:700;margin-bottom:var(--s2);
}
/* Auctions wraps its controls inside the <label> itself. Give the control its
   own line so the fields line up on a common left edge instead of starting
   wherever each label's text happens to end. */
label input,label select,label textarea{display:block;margin-top:var(--s2)}
.field{margin-bottom:var(--s4)}
.field:last-of-type{margin-bottom:var(--s3)}
.stack{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.stack label{width:100%;max-width:26rem}
/* An input and its button on one line, wrapping cleanly on a phone. */
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.row input,.row select{width:auto;flex:1 1 12rem;min-width:0}
form.inline{display:inline-flex;gap:var(--s2);align-items:center;margin:0;flex-wrap:wrap}
form.inline input{width:auto;flex:0 1 10rem;min-width:0}

/* ------------------------------------------- 12  empty states and hints */

.hint{font-size:.86rem;color:var(--muted);margin-top:var(--s3);line-height:1.6;max-width:48rem}
.hint p{margin:var(--s2) 0 0}
.hint p:first-child{margin-top:0}

/* An empty state should say what to do next, not just report absence. */
.empty{padding:var(--s7) var(--s5);text-align:center;color:var(--muted);font-size:.94rem}
.empty strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:var(--s2);font-weight:650}
.empty p{margin:0 auto;max-width:32rem}
.empty .btn{margin-top:var(--s4)}

/* --------------------------------------------------- 13  anonymous pages */

.plain{
  max-width:24rem;margin:0 auto;padding:var(--s7) var(--s5) var(--s8);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
}
.plain .brand{font-size:1.5rem;padding:0 0 var(--s1);text-align:center}
.plain .sub{text-align:center;font-size:.94rem;margin-bottom:var(--s5)}
.plain .card{padding:var(--s5);box-shadow:var(--shadow)}
.plain input{max-width:100%}
.plain .btn{width:100%;margin-top:var(--s2)}
.plain .foot{text-align:center;margin-top:var(--s4);font-size:.88rem;color:var(--muted)}
.errlist{
  color:var(--bad);font-size:.88rem;margin-bottom:var(--s3);
  background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);
  border-radius:var(--r);padding:var(--s2) var(--s3);
}

/* --------------------------------------------------------- 14  utilities */

.muted{color:var(--muted)}
.small{font-size:.86rem}
.mono{font-family:var(--mono)}
.wrap-any{overflow-wrap:anywhere}
.scroll{overflow-x:auto}
.mt0{margin-top:0} .mb0{margin-bottom:0}
.stack-sm{display:flex;flex-direction:column;gap:var(--s2)}
/* A fingerprint or a key id, given room to be read in groups. */
.fpr{font-family:var(--mono);font-size:.95rem;letter-spacing:.06em;overflow-wrap:anywhere}
.wide-hint{max-width:48rem}
.backlink{margin-top:var(--s6)}
.backlink a{display:inline-flex;align-items:center;min-height:24px;padding:.15rem 0}
/* The published-key card: the fingerprint is the thing to read, so it leads. */
.keycard .fpr{font-size:1.02rem;font-weight:600}
.keyform textarea{max-width:100%}
.full{max-width:100%}
/* A form that IS a panel needs its own bottom margin; .panel + .panel only
   covers panels that happen to be siblings. */
form.panel{margin-bottom:var(--s5)}
.pending{margin-bottom:var(--s5)}
.challenge{margin-top:var(--s2);font-size:.88rem}
.challenge code{display:inline-block;margin-bottom:var(--s1)}
/* A titled block of prose plus its one action, used all down domain detail. */
.section{margin-bottom:var(--s5)}
.section p:first-child{margin-top:0}
.section .actions{margin-bottom:0}
.ml{margin-left:var(--s3)}
/* An unrevealed bid is lost when the window closes, so the deadline column is
   given weight as well as a tag -- never the colour on its own. */
td.urgent{font-weight:650}

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

/* The sidebar becomes a header. Every destination stays visible and reachable
   — it wraps onto two or three short rows rather than hiding behind a control
   that would need JavaScript to open. */
@media (max-width:60rem){
  .shell{grid-template-columns:1fr}
  .side{
    position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
    padding:var(--s4) var(--s3) var(--s3);gap:var(--s1);
  }
  .brand{padding:0 var(--s2) var(--s3)}
  .grp{flex-direction:row;flex-wrap:wrap;gap:var(--s1);padding:0 var(--s2)}
  .grp .lbl{width:100%;padding:var(--s1) var(--s1) 0}
  .grp a{padding:.35rem .6rem;border-radius:var(--r-pill);border:1px solid var(--line);
    font-size:.86rem;gap:var(--s1)}
  .grp a.on{box-shadow:none;border-color:var(--accent)}
  .grp.adv a{font-size:.82rem;padding:.3rem .55rem}
  .divide{margin:var(--s3) var(--s2) var(--s1)}
  .side-foot{
    margin-top:var(--s3);padding:var(--s3) var(--s2) 0;
    flex-direction:row;align-items:center;gap:var(--s4);flex-wrap:wrap;
  }
  .main{padding:var(--s5) var(--s4) var(--s7)}
  h1{font-size:1.45rem}
  .cards{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:var(--s2)}
  .card{padding:var(--s3)}
  .card .v{font-size:1.35rem}
}

@media (max-width:26rem){
  .main{padding:var(--s4) var(--s3) var(--s7)}
  .panel.pad{padding:var(--s3)}
  th,td{padding:var(--s2) var(--s3)}
  .cards{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}