/*
 * mns.css — one stylesheet for every Meme Name Service page.
 *
 * Light, dark and system, with every token defined for both. The rule
 * learned the hard way on the old site: anything that does not state its
 * own colour inherits something from somewhere else and ends up as near
 * black on near black. State it.
 *
 * Contrast was measured, not eyeballed — every text token against its
 * real background clears WCAG AA (4.5:1) in both modes.
 */

/* light is the default; system follows the OS; dark is explicit */
:root,
:root[data-theme="light"] {
  --bg:#f7f7f5;      --panel:#ffffff;   --panel2:#f1f1ee;  --line:#e2e2dd;
  --ink:#16161a;     --strong:#000000;  --dim:#4e4e58;     --faint:#63636d;
  --accent:#0f6e5c;  --accent-ink:#ffffff; --accent-soft:#e6f4f0;
  --ok:#146c43;      --warn:#8a5a00;    --err:#b3261e;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
}
:root[data-theme="dark"] {
  --bg:#0e0f12;      --panel:#17181d;   --panel2:#1e2027;  --line:#2a2c34;
  --ink:#eceef2;     --strong:#ffffff;  --dim:#aeb3bf;     --faint:#949bab;
  --accent:#3fd9b4;  --accent-ink:#04211c; --accent-soft:#12261f;
  --ok:#4ade80;      --warn:#fbbf24;    --err:#fca5a5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg:#0e0f12;      --panel:#17181d;   --panel2:#1e2027;  --line:#2a2c34;
    --ink:#eceef2;     --strong:#ffffff;  --dim:#aeb3bf;     --faint:#949bab;
    --accent:#3fd9b4;  --accent-ink:#04211c; --accent-soft:#12261f;
    --ok:#4ade80;      --warn:#fbbf24;    --err:#fca5a5;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  }
}

/* The clerk's own palette.
 *
 * Fixed hues rather than the theme's, because a pixel man drawn in
 * whatever colour the page happens to use stops reading as a person.
 * Only the shirt follows the accent, which is enough to tie him to the
 * site — and only the darkest values shift for dark mode, so he does not
 * glow. */
:root, :root[data-theme="light"] {
  --clerk-skin:#e8b28a;  --clerk-hair:#3a2b22;  --clerk-eye:#16161a;
  --clerk-mouth:#8a4a44;  --clerk-shirt:#0f6e5c; --clerk-sleeve:#06382e; --clerk-pants:#3b4256;
  --clerk-shoe:#241f1c;   --clerk-glass:#5a6068; --clerk-paper:#fdfbf2;
  --clerk-cup:#c85a3c;
}
:root[data-theme="dark"] {
  --clerk-skin:#d79c74;  --clerk-hair:#2a1f19;  --clerk-eye:#0b0b0e;
  --clerk-mouth:#7a3b36;  --clerk-shirt:#3fd9b4; --clerk-sleeve:#1c8b70; --clerk-pants:#2c3244;
  --clerk-shoe:#17140f;   --clerk-glass:#9aa2b0; --clerk-paper:#f2efe4;
  --clerk-cup:#b04c31;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --clerk-skin:#d79c74;  --clerk-hair:#2a1f19;  --clerk-eye:#0b0b0e;
    --clerk-mouth:#7a3b36;  --clerk-shirt:#3fd9b4; --clerk-sleeve:#1c8b70; --clerk-pants:#2c3244;
    --clerk-shoe:#17140f;   --clerk-glass:#9aa2b0; --clerk-paper:#f2efe4;
    --clerk-cup:#b04c31;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light dark}
body{
  background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,"JetBrains Mono",monospace}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.muted{color:var(--dim)} .faint{color:var(--faint)} .strong{color:var(--strong)}

/* ---- top bar, identical on every page ---- */
.topbar{
  position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar .inner{
  max-width:1080px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:14px;
  /* FIXED, not min-height. A floor still let a tall wallet card push the
     bar out — measured 65px on three pages and 77px on the fourth. The
     bar is chrome; its height must not depend on what is inside it. */
  height:64px;
}
/* Pending deployment, admin only. Amber rather than red: it is work
   outstanding, not something broken. */
.deploychip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
  border:1px solid var(--warn,#e0a33a);color:var(--warn,#e0a33a);white-space:nowrap;
  transition:background .14s}
.deploychip:hover{background:color-mix(in srgb,var(--warn,#e0a33a) 14%,transparent)}
.deploychip[hidden]{display:none}
.deploychip .dchip-dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:dchip 2s ease-in-out infinite}
/* A number that may be days old should not pulse as though it were live. */
.deploychip.stale{opacity:.72}
.deploychip.stale .dchip-dot{animation:none}
@keyframes dchip{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.deploychip .dchip-dot{animation:none}}
@media (max-width:760px){.deploychip span:last-child{display:none}
  .deploychip{padding:6px}}

/* A FIXED BOX, and that is the whole fix for the flicker.
   
   The anchor used to be sized by its text, so its hit area was the
   UNROTATED footprint. Tip the mark 70° and the glyphs you can see sit
   outside the box that responds to hover — so moving toward them crossed
   in and out of the target, and the mark snapped upright and back over
   and over. The box is now the region the mark can occupy, not the
   region the text happens to fill, and the mark is centred inside it. */
.brand{font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  width:132px;height:52px;flex:0 0 auto}
.brand b{color:var(--accent)}
/* A different angle every load, on all three axes.
   
   The transform is on an inner span so the anchor keeps its own box: a
   transformed element is still laid out untransformed, so nothing beside
   it moves however far over it tips.

   PERSPECTIVE IS WHAT MAKES X AND Y READ AS ROTATION. Without it a
   rotateX is an orthographic squash — the text just gets shorter, which
   looks like a rendering bug rather than a tilt. The perspective sits on
   the anchor (the parent) rather than in the transform, so all three
   axes share one vanishing point.

   X and Y are held to a much smaller range than Z. A wordmark turned 60°
   away from the viewer is edge-on and unreadable; Z can go the whole way
   round because a rotation in the plane of the screen never costs
   legibility. */
.brand{perspective:520px}
/* The scale is computed at load, not guessed here: it is whatever keeps
   the rotated mark inside the box above. See shell.js. */
/* The lockup: wordmark over a justified sub-line. Both inside the one
   transformed span, so the tilt applies to the pair as an object.

   width:max-content on the wrapper matters. It is a flex item, which
   blockifies it, and a block stretches — which made the sub-line report
   the CONTAINER's width instead of its own, so the justify arithmetic
   had nothing to work with. Shrink-wrapped, the wrapper is as wide as
   the wordmark and the sub-line can be measured against it. */
.brandmain{display:block;line-height:1}
.brandsub{display:inline-block;font-size:8.5px;font-weight:600;text-transform:uppercase;
  color:var(--faint);line-height:1;margin-top:3px;white-space:nowrap}
.brandspin{display:inline-block;width:max-content;transform-style:preserve-3d;
  transform:rotateX(var(--spin-x,0deg)) rotateY(var(--spin-y,0deg)) rotateZ(var(--spin-z,0deg))
            scale(var(--spin-s,1));
  transition:transform .45s cubic-bezier(.2,.8,.25,1)}
.brand:hover .brandspin,.brand:focus-visible .brandspin{
  transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1)}
@media (prefers-reduced-motion:reduce){
  .brandspin{transform:none;transition:none}
}
/* Adding a seventh link pushed the row wide enough that two labels
   wrapped onto a second line. Flex items stretch by default, so the
   single-word links stayed the height of the wrapped ones with their
   text pinned to the TOP — the whole bar read as top-aligned when only
   two items were actually taller than the rest.

   Labels no longer wrap, and every link centres its own text, so a bar
   that does run out of room scrolls instead of growing a second line of
   half-height words. */
.navlinks{display:flex;gap:4px;margin-left:6px;align-items:center;
  min-width:0;overflow-x:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  color:var(--dim);text-decoration:none;font-size:13.5px;padding:6px 10px;border-radius:7px;
  display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto;
}
.navlinks a:hover{background:var(--panel2);color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink);background:var(--panel2)}
.spacer{flex:1}

/* Theme picker: one small icon that opens a menu, rather than three
   permanently-visible buttons eating horizontal space in the bar. */
.themepick{position:relative}
.tp-toggle{
  background:none;border:1px solid var(--line);border-radius:8px;color:var(--dim);
  cursor:pointer;width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.tp-toggle:hover{background:var(--panel2);color:var(--ink)}
.tp-toggle svg{width:16px;height:16px;display:block}
.tp-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:132px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:5px;
}
.tp-menu[hidden]{display:none}
.tp-menu button{
  display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;
  color:var(--ink);cursor:pointer;padding:8px 9px;border-radius:7px;
  font:inherit;font-size:13px;text-align:left;
}
.tp-menu button:hover{background:var(--panel2)}
.tp-menu button[aria-pressed="true"]{color:var(--accent);font-weight:600}
.tp-menu button svg{width:15px;height:15px;flex:none;opacity:.85}

.wallet{display:flex;align-items:center;gap:9px}
.btn{
  background:var(--accent);color:var(--accent-ink);border:1px solid transparent;border-radius:9px;
  padding:9px 15px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.btn:hover{filter:brightness(1.06)} .btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn.ghost{background:none;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--panel2);filter:none}
.btn.sm{padding:6px 11px;font-size:12.5px}

/* The wallet card is deliberately short: two tight lines plus a chip
   row, with the disconnect tucked into its own corner instead of
   sitting outside as a second full-height button. The address is
   truncated to 5+5 and carries the whole thing in the tooltip — the
   full 40 characters were setting the height of the entire bar. */
/* No frame. The identity is information, not a control — a box around
   it just competed with the buttons either side of it. */
.whoami{display:flex;align-items:center;gap:8px;padding:0 20px 0 0;
  max-width:270px;position:relative;overflow:hidden;max-height:52px}
.whoami canvas{image-rendering:pixelated;border-radius:5px;flex:none}
.whoami .t{min-width:0;line-height:1.2}
.whoami .n{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whoami .a{font-size:10.5px;color:var(--faint);white-space:nowrap;font-family:ui-monospace,monospace}
/* Chips clip rather than stack. Wrapping made the card 76px tall on a
   narrow column and dragged the whole bar with it. */
.whoami .meta{display:flex;gap:4px;margin-top:1px;flex-wrap:nowrap;overflow:hidden}
.whoami .chip{flex:0 0 auto}
.whoami .x{
  position:absolute;top:50%;transform:translateY(-50%);right:0;width:16px;height:16px;padding:0;line-height:1;
  background:none;border:none;color:var(--faint);cursor:pointer;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:4px;
}
.whoami .x:hover{background:var(--panel2);color:var(--err)}
.chip{font-size:9.5px;padding:1px 6px;border-radius:99px;background:var(--panel2);color:var(--dim);white-space:nowrap}
.chip.net{background:var(--accent-soft);color:var(--accent)}
.chip.net.mainnet{background:#fdecea;color:#b3261e}
.chip.net.unknown{background:#fff4e0;color:#8a5a00}

/* ---- the page header, rendered by shell.js from pages.js ----
   Defined exactly once. Four pages previously declared their own head
   block with their own padding, which is how they ended up looking like
   four different sites. */
/* A chromeless page: one link back, and nothing that would make
   somebody else's profile look like a section of our site. */
.minibar{padding:14px 22px 0;max-width:1240px;margin:0 auto;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* The right-hand slot holds whatever action the page owns — on a profile
   that is "edit this one", which belongs up here beside the way out
   rather than buried under the card. */
.minislot{margin-left:auto;display:flex;gap:8px;align-items:center}
.miniback{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);
  text-decoration:none;padding:6px 11px;border:1px solid var(--line);border-radius:999px;
  transition:color .14s,border-color .14s}
.miniback:hover{color:var(--accent);border-color:var(--accent)}
.miniback:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pagehead{padding:30px 0 18px}
/* when a page hosts the header inside its own layout, the outer padding
   and centring belong to that layout, not to the header */
.pagehead.inline{padding:0 0 14px}
.pagehead h1{margin:0}
/* Fixed two-line box. The subtitles were 1, 2 and 3 lines long, so the
   headers came out 129, 153 and 184px tall — same position, different
   height, which reads as four different headers. */
.pagehead p{color:var(--dim);margin-top:8px;max-width:66ch;font-size:14.5px;
  min-height:2.9em;display:flex;align-items:flex-start}
.pagehead.wide p{max-width:66ch;font-size:14.5px}
@media(max-width:760px){ .pagehead{padding:24px 0 16px} }

/* ---- generic surfaces ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.card.pad0{padding:0;overflow:hidden}
h1{font-size:clamp(26px,4.2vw,38px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
h2{font-size:20px;letter-spacing:-.015em;font-weight:650}
h3{font-size:15px;font-weight:600}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.field{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;color:var(--ink);font:inherit;outline:none}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field::placeholder{color:var(--faint)}
label.lbl{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:5px}
.row{display:flex;gap:10px;align-items:flex-end}
.row > *{min-width:0}
.sep{font-family:ui-monospace,monospace;color:var(--accent);font-size:20px;padding-bottom:10px;flex:none}
.empty{color:var(--faint);font-style:italic;font-size:14px}
.err{color:var(--err)} .ok{color:var(--ok)} .warn{color:var(--warn)}

/* ---- the footer ----
   One block, not a strip of links above an unrelated line of text.
   Identity in the first column, every destination across the other two,
   and the small print under all of it. */
footer.foot{border-top:1px solid var(--line);margin-top:60px;padding:30px 0 46px;
  color:var(--faint);font-size:12.5px}
footer.foot .inner{max-width:1080px;margin:0 auto;padding:0 22px}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px 34px;align-items:start}
.footbrand{display:flex;flex-direction:column;gap:3px}
.footbrand strong{color:var(--ink);font-size:13.5px;font-weight:650;letter-spacing:-.01em}
/* The card's own words, stamped across the top of every token. */
.footbrand span{color:var(--dim)}
.footbrand a{color:var(--faint);text-decoration:none;margin-top:5px}
.footbrand a:hover{color:var(--accent)}
.footcol{display:flex;flex-direction:column;gap:7px}
.footcol a{color:var(--dim);text-decoration:none;font-size:13px}
.footcol a:hover{color:var(--accent)}
.footcol a[aria-current="page"]{color:var(--ink);font-weight:600}
.footfine{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);
  color:var(--faint);font-size:12px}
@media(max-width:640px){
  .footgrid{grid-template-columns:1fr 1fr}
  .footbrand{grid-column:1/-1}
}

/* ---- mobile ----
   The nav used to be display:none here, which meant My names and
   Profiles simply did not exist on a phone. Adena is coming to mobile
   and people may pay from a phone wallet, so every destination has to be
   reachable at 375px. It wraps to its own row instead of vanishing.

   Touch targets are 44px minimum on coarse pointers — the theme switch
   was 23px, which is a thumb-sized problem. */
@media(max-width:760px){
  .topbar .inner{flex-wrap:wrap;gap:9px;padding:9px 16px;height:auto}
  /* the flex spacer is what keeps the wallet right on desktop; once the
     bar wraps it just steals a row and shoves the brand off the left */
  .spacer{display:none}
  .brand{order:1}
  .wallet{order:2;margin-left:auto}
  .themepick{order:3}
  .navlinks{order:4;flex-basis:100%;margin-left:0;gap:2px;
    border-top:1px solid var(--line);padding-top:7px;overflow-x:auto}
  .navlinks a{flex:1;text-align:center;white-space:nowrap;padding:9px 8px}
  .whoami{max-width:none}
  .wrap{padding:0 16px}
}
@media(pointer:coarse){
  .btn,.navlinks a,.terms button,.ci button,.tp-toggle,.tp-menu button{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .tp-toggle{width:44px;height:44px}
  .field{min-height:44px}
  .ci button{min-width:44px;min-height:44px}
  .whoami .x{width:26px;height:26px;right:0}
}
@media(max-width:460px){
  /* name * domain stops fitting side by side around here; the asterisk
     moves to a label rather than being dropped, so the format still reads */
  .row{flex-wrap:wrap}
  .row > div{flex:1 1 100% !important}
  .sep{display:none}
}

/* ---------------- loaders ----------------
   A row of dots and an ellipsis reads the same whether something is
   working or wedged, which is the one thing a waiting state must not do.
   Each of these MOVES continuously, so a stall is visible, and each is
   picked for where it appears rather than being one spinner reused.
   All inherit currentColor, so they take the colour of whatever they sit
   in without extra classes. */
.ldr{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.ldr-t{font-size:inherit;opacity:.75}

/* blocks being produced — for anything reading or waiting on the chain */
.ldr-chain{display:inline-flex;gap:3px;align-items:flex-end;height:11px}
.ldr-chain i{width:6px;height:6px;background:currentColor;border-radius:1px;opacity:.22;
  animation:ldr-blk 1.15s infinite ease-in-out}
.ldr-chain i:nth-child(2){animation-delay:.13s}
.ldr-chain i:nth-child(3){animation-delay:.26s}
.ldr-chain i:nth-child(4){animation-delay:.39s}
@keyframes ldr-blk{0%,64%,100%{opacity:.22;transform:translateY(0)}
                   32%{opacity:1;transform:translateY(-4px)}}

/* a signature being drawn — for "your wallet has the ball" */
.ldr-sign{position:relative;display:inline-block;width:34px;height:11px;overflow:hidden}
.ldr-sign::before{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;
  background:currentColor;transform-origin:left;animation:ldr-sign 1.5s infinite}
@keyframes ldr-sign{0%{transform:scaleX(0);opacity:1}
                    70%{transform:scaleX(1);opacity:1}
                    100%{transform:scaleX(1);opacity:0}}

/* a coin on its edge — for prices and payments */
.ldr-coin{display:inline-block;width:11px;height:11px;border-radius:50%;
  background:currentColor;animation:ldr-coin .9s infinite ease-in-out}
@keyframes ldr-coin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}

/* the brand mark, turning — the generic one */
.ldr-asterisk{display:inline-block;font-weight:700;line-height:1;
  animation:ldr-asterisk 1.7s linear infinite}
@keyframes ldr-asterisk{to{transform:rotate(360deg)}}

/* a pixel pickaxe swinging — for deploys, which are the slow ones */
.ldr-dig{position:relative;display:inline-block;width:14px;height:14px}
.ldr-dig::before{content:"";position:absolute;inset:0;background:currentColor;
  clip-path:polygon(0 0,42% 0,100% 58%,100% 100%,58% 100%,0 42%);
  transform-origin:100% 100%;animation:ldr-dig .7s infinite ease-in-out}
@keyframes ldr-dig{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(6deg)}}

/* a skeleton row, for grids that are about to be filled with real rows */
.ldr-rows{display:flex;flex-direction:column;gap:8px;width:100%}
.ldr-rows span{display:block;height:12px;border-radius:4px;
  background:linear-gradient(90deg,var(--line) 25%,var(--panel2) 50%,var(--line) 75%);
  background-size:280% 100%;animation:ldr-sweep 1.3s linear infinite}
.ldr-rows span:nth-child(2){width:82%;animation-delay:.1s}
.ldr-rows span:nth-child(3){width:64%;animation-delay:.2s}
@keyframes ldr-sweep{to{background-position:-180% 0}}

@media (prefers-reduced-motion:reduce){
  /* keep a visible change so "working" is still distinguishable from
     "wedged", but drop the movement */
  .ldr-chain i,.ldr-sign::before,.ldr-coin,.ldr-asterisk,.ldr-dig::before,.ldr-rows span{
    animation-duration:2.4s;animation-timing-function:steps(2,end)}
  .ldr-asterisk,.ldr-dig::before{animation:ldr-fade 2.4s infinite steps(2,end)}
  @keyframes ldr-fade{0%,49%{opacity:1}50%,100%{opacity:.35}}
}

/* ---------------- the name bag ----------------
   Lives in the top bar so it is reachable from every page, and stays in
   localStorage so wandering off does not empty it. */
.bag{position:relative;display:flex;align-items:center}
.bagbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--ink);font:inherit;font-size:13px;cursor:pointer;transition:border-color .14s}
.bagbtn:hover{border-color:var(--accent)}
.bagbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bagicon{width:13px;height:13px;border:2px solid currentColor;border-top:0;
  border-radius:0 0 3px 3px;position:relative;flex:none}
.bagicon::before{content:"";position:absolute;left:2px;right:2px;top:-5px;height:5px;
  border:2px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.bagn{font-family:ui-monospace,monospace;font-size:12px;font-weight:700;
  min-width:15px;text-align:center;color:var(--accent)}
.bagbtn.empty .bagn{color:var(--faint);font-weight:400}
.bagpanel{position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:270px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
.bagpanel[hidden]{display:none}
.baghead{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.bagempty{margin:0;font-size:13px;color:var(--dim);line-height:1.45}
.bagitems{display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto}
.bagitem{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  background:var(--panel2)}
.bagnm{flex:1;min-width:0;font-family:ui-monospace,monospace;font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bagyr{font-size:11px;color:var(--faint);flex:none}
.bagx{background:transparent;border:0;color:var(--faint);font-size:17px;line-height:1;
  cursor:pointer;padding:0 2px;border-radius:5px;flex:none}
.bagx:hover{color:var(--err)}
.bagtot{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.bagtot strong{color:var(--strong);font-size:15px;font-family:ui-monospace,monospace}
.bagpanel .btn{text-align:center;text-decoration:none}
@media(max-width:640px){
  .bagpanel{position:fixed;left:12px;right:12px;top:70px;width:auto}
}

/* Term picker inside a bag row. Small, quiet, and it must not look like
   the row is a form — it is one editable field among static text. */
.bagyrs{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--dim);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:2px 4px;cursor:pointer;flex:none}
.bagyrs:hover{border-color:var(--accent);color:var(--ink)}
.bagyrs:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bagnote{margin:0;font-size:12px;color:var(--dim);line-height:1.4}
.bagnote.bad{color:var(--err)}
.baglink{font-size:12px;color:var(--faint);text-align:center;text-decoration:none}
.baglink:hover{color:var(--accent)}

/* ---- referral ----
   The strip on the register page that names whoever sent you, and the
   pages that let a holder build a link and see what it has earned. */
.ref{margin-top:12px;font-size:13px;color:var(--dim);line-height:1.55}
.ref:empty{display:none}
.ref b{color:var(--ink);font-weight:650}
.refwarn{color:var(--warn);font-weight:600}
.reflink{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.reflink .field{flex:1 1 260px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.reftiers{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.reftiers th,.reftiers td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
.reftiers th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.reftiers td:not(:first-child),.reftiers th:not(:first-child){text-align:right}
.reftiers tr[data-you="1"] td{background:var(--accent-soft);font-weight:650;color:var(--ink)}
.refboard{width:100%;border-collapse:collapse;font-size:13px}
.refboard th,.refboard td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.refboard th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.refboard td.n,.refboard th.n{text-align:right;font-variant-numeric:tabular-nums}
.refboard .rank{color:var(--faint);width:2.5em}
.refstat{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 4px}
.refstat div{min-width:110px}
.refstat .big{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.refstat .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
@media (max-width:560px){
  .reflink .field{flex:1 1 100%}
}

/* The way out of the price list and into the register page. */
.pgo{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;
  color:var(--accent);text-decoration:none}
.pgo:hover{text-decoration:underline}
.pgo.inline{margin-top:5px;font-size:11.5px}

/* ---- the activity feed ----
   Recent registrations: a strip of stats and a list of rows, on the home
   page and on the community page. Real registrations only, never padded
   and never reordered to look busier — see the note in feed.js. */
.feedsection{margin-top:64px;padding-top:34px;border-top:1px solid var(--line)}
.feedhead{display:flex;align-items:baseline;gap:14px;margin:0 0 16px}
.feedhead h2{margin:0}
.feedhead a{margin-left:auto;font-size:13px;color:var(--accent);text-decoration:none;flex:0 0 auto}
.feedhead a:hover{text-decoration:underline}

.feedstats{display:flex;gap:34px;flex-wrap:wrap;margin:0 0 22px}
.feedstats .big{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.15}
.feedstats .lbl{font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-top:3px}

.feed{display:flex;flex-direction:column;gap:6px}
/* A row is a grid so the columns line up down the list. Anything less
   is five ragged edges, which is what a list of facts must not be. */
.frow{display:grid;grid-template-columns:34px minmax(0,1fr) 108px 118px 92px;
  gap:14px;align-items:center;padding:11px 14px;border:1px solid var(--line);
  border-radius:11px;background:var(--panel);text-decoration:none;color:var(--ink);
  transition:border-color .14s,transform .14s}
.frow:hover{border-color:var(--accent);transform:translateY(-1px)}
.frow.gone{opacity:.6}
.fart{width:34px;height:34px;border-radius:8px;overflow:hidden;line-height:0}
.fart svg{width:100%;height:100%;display:block}
.fmain{min-width:0;display:flex;flex-direction:column;gap:2px}
.fname{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;
  font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fquip{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.fwho{font-family:ui-monospace,monospace;font-size:12px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwhen{font-size:12.5px;color:var(--dim);white-space:nowrap}
.fleft{font-size:12.5px;color:var(--faint);white-space:nowrap;text-align:right}
.fleft.bad{color:var(--warn);font-weight:600}
.feedempty{color:var(--dim);font-size:13.5px;line-height:1.6;margin-top:12px}

/* Below this the five columns stop fitting, so the two that are context
   rather than content fold under the name instead of being cut off. */
@media(max-width:760px){
  .frow{grid-template-columns:34px minmax(0,1fr) auto;gap:10px}
  .fwho{grid-column:2;font-size:11.5px}
  .fwhen{grid-column:3;text-align:right}
  .fleft{grid-column:3;text-align:right;font-size:11.5px}
  .feedstats{gap:22px}
  .feedstats .big{font-size:19px}
}



/* ---- the filterable picker (picker.js) ----
   One control, wherever a domain is chosen. Forty-nine options is past
   the point where scrolling to the one you want is reasonable, and a
   native select can only be typed at from the START of an option. */
.pick{position:relative;min-width:0}
.pickbtn{display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;text-align:left}
.picklabel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickcaret{color:var(--faint);font-size:11px;flex:0 0 auto}
.pickmark{display:flex;flex:0 0 auto;line-height:0}
.pickmark canvas{image-rendering:pixelated;border-radius:4px;display:block}
.picklist{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);min-width:210px}
.picklist[hidden]{display:none}
.pickfilter{width:100%;margin-bottom:7px;font-size:13px}
/* Scrolls, rather than growing a panel taller than the window. */
.pickopts{max-height:270px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.pickopt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;
  border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;text-align:left}
.pickopt:hover,.pickopt.on{background:var(--panel2)}
.pickopt[aria-selected="true"]{color:var(--accent);font-weight:600}
.pickopttext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picknone{padding:9px;font-size:12px;color:var(--dim);line-height:1.5}

/* Name suggestions on the find page. Same rows as the picker's options,
   anchored under the input rather than inside a panel of their own. */
.namewrap{position:relative;flex:1;min-width:0}
.namewrap .field{width:100%}
.namelist{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);max-height:280px;overflow-y:auto;min-width:220px}
.namelist[hidden]{display:none}
.nameopt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;
  border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;text-align:left}
.nameopt:hover,.nameopt.on{background:var(--panel2)}

/* ---- the Clerk ----
   The site's own asterisk, with a face, drawn on the same twelve-pixel
   grid as every domain's artwork. Labelled as machine-written wherever
   he speaks: "a person wrote this" and "a machine wrote this from what a
   person wrote" are different promises. */
/* THE CLERK'S CORNER.
 *
 * He had fourteen pixels of margin above and four below, wedged between
 * a paragraph and a row of category chips, at the size of a favicon. A
 * man whose entire job is to be visibly unimpressed needs to be visible.
 *
 * His own panel now, with room above and below it, a floor to stand on
 * and a counter edge to stand behind. */
.botbox{margin:26px 0 30px;padding:16px 18px 18px;border:1px solid var(--line);
  border-radius:16px;background:var(--panel2)}
.botbox[hidden]{display:none}
.botrow{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.clerkstage{flex:0 0 auto;position:relative;padding-bottom:7px}
/* The counter he stands behind — a line under his feet, so he is in a
   place rather than floating in a box. */
.clerkstage::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;
  height:3px;border-radius:2px;background:var(--line)}
.clerkicon{display:block;line-height:0}
.clerkicon canvas{display:block}
.botside{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;padding-bottom:9px}
.botwho{margin:0;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.botwho span{font-weight:500;color:var(--faint);letter-spacing:.06em;text-transform:none}
.botnote{font-size:12px;color:var(--faint);line-height:1.55;max-width:46ch}
.botout{margin-top:16px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;
  background:var(--panel);display:flex;gap:14px;align-items:flex-start}
.botout[hidden]{display:none}
.clerkface{flex:0 0 44px;line-height:0}
.clerkface svg{display:block}
.clerkbody{min-width:0;flex:1}
.botout .who{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:6px}
.clerksays{margin:0;font-size:14px;line-height:1.65;color:var(--ink)}
/* Where he points, so the eye lands on the right card. */
.clerkflash{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px;
  transition:outline-color .5s}
@media (prefers-reduced-motion:reduce){ .clerkflash{transition:none} }

/* The clerk's pointers: up to three written answers, so it is a choice
   rather than a guess, plus the way out of the loop. */
.clerkpoints{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:11px}
.clerkpoint{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-block;text-align:left}
.clerkpoint.first{border-color:var(--accent);color:var(--accent)}
.clerkesc{margin:5px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5}