/* ==========================================================================
   THE LISTING SPACE — landing page
   Palette and type come straight from brand/README.md. Signal Cyan is spent
   on the primary CTA, active states and the orbit only — nowhere else.
   ========================================================================== */

:root{
  --ink:#080D1A;          /* brand Ink Navy — the ground */
  --ink-deep:#05080F;     /* footer / recessed bands */
  --surface:#0E1729;      /* brand Surface Navy — cards */
  --surface-2:#131F38;    /* hover / raised */
  --rule:#1B2740;
  --rule-soft:#141D30;
  --text:#E8EDF6;
  --muted:#8494B0;
  --muted-dim:#63728E;
  --cyan:#00C8FF;         /* brand Signal Cyan — dark grounds only */
  --cyan-press:#00A6D6;
  --cyan-soft:rgba(0,200,255,.12);
  --white:#FFFFFF;

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --wrap:1180px;
  --gap:clamp(3.5rem,2rem + 5vw,6.5rem);
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan);
}
.section-head{max-width:60ch;margin-bottom:2.4rem}
.section-head h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.35rem);margin:.7rem 0 .6rem}
.section-head p{color:var(--muted);font-size:1.02rem}

/* ---------- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-size:.94rem;font-weight:600;line-height:1;
  padding:.78rem 1.25rem;border-radius:10px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{background:var(--cyan);color:#04121C;}
.btn-primary:hover{background:var(--cyan-press)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--rule)}
.btn-ghost:hover{background:var(--surface-2);border-color:#2A3A5C}
.btn-sm{padding:.55rem .9rem;font-size:.85rem}

/* ---------- preview notice --------------------------------------------- */
/* Remove this whole block (and its markup) once real listings are wired in. */
.notice{
  background:var(--cyan-soft);border-bottom:1px solid rgba(0,200,255,.2);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:#9FE4FF;
  text-align:center;padding:.5rem 1rem;
}

/* ---------- header ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(8,13,26,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-soft);
}
.nav{display:flex;align-items:center;gap:1.5rem;height:68px}
.nav .logo{display:flex;align-items:center;flex:none}
.nav .logo img{height:26px;width:auto}      /* 26px tall = 241px wide, above the 180px floor */
.nav .logo .mark-only{display:none;height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.6rem;margin-left:.75rem}
.nav-links a{color:var(--muted);font-size:.93rem;font-weight:500;transition:color .15s ease}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:.7rem;margin-left:auto}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:9px;padding:.5rem;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px}
.nav-toggle span + span{margin-top:4px}

@media(max-width:900px){
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;margin:0;
    background:var(--ink);border-bottom:1px solid var(--rule);padding:.5rem 24px 1rem;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.8rem 0;width:100%;border-bottom:1px solid var(--rule-soft)}
  .nav-toggle{display:block}
  .nav .logo img{display:none}
  .nav .logo .mark-only{display:block}
  .nav-actions .hide-sm{display:none}
}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(3.5rem,2rem + 7vw,6.5rem) 0 clamp(3rem,2rem + 4vw,4.5rem)}
.hero-orbit{
  position:absolute;top:50%;right:-30px;width:min(660px,62vw);
  transform:translateY(-50%);pointer-events:none;z-index:0;
}
/* on narrow screens it would sit behind the headline — drop it rather than fight it */
@media(max-width:760px){ .hero-orbit{display:none} }
.hero-orbit .ring{fill:none;stroke:var(--white);stroke-width:2;opacity:.07}
.hero-orbit .arc{fill:none;stroke:var(--cyan);stroke-width:5;stroke-linecap:round;opacity:.75}
.hero-orbit .node{fill:var(--cyan);opacity:.75}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.25rem,1.5rem + 3.6vw,4rem);line-height:1.05;margin:1rem 0 1.1rem;max-width:15ch}
.hero .sub{color:var(--muted);font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);max-width:56ch}

.search{display:flex;gap:.6rem;margin:2.2rem 0 1.3rem;max-width:620px}
.search-field{position:relative;flex:1}
.search-field svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted-dim);fill:none;stroke-width:2}
.search-field input{
  width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:11px;
  color:var(--text);font-family:var(--body);font-size:.98rem;padding:.92rem 1rem .92rem 2.75rem;
  transition:border-color .15s ease;
}
.search-field input::placeholder{color:var(--muted-dim)}
.search-field input:focus{outline:none;border-color:var(--cyan)}
/* the browse toolbar sits on one line, so its field is a touch shorter */
.toolbar .search-field input{font-size:.92rem;padding:.62rem .9rem .62rem 2.6rem}
.toolbar .search-field svg{left:13px}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font-family:var(--body);font-size:.85rem;font-weight:500;color:var(--muted);
  background:transparent;border:1px solid var(--rule);border-radius:999px;
  padding:.42rem .85rem;cursor:pointer;transition:all .15s ease;
}
.chip:hover{color:var(--text);border-color:#2A3A5C}
.chip[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#04121C;font-weight:600}

/* ---------- listing cards ---------------------------------------------- */
.listings{padding:var(--gap) 0}
.section-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap}
/* [hidden] must win over any display we set ourselves.

   The browser's own stylesheet says [hidden]{display:none}, but that is a UA
   rule and ANY author rule beats it — so `.grid{display:grid}` below kept the
   bots panel on screen no matter how many times the script set el.hidden.
   Both panels rendered at once, which read as "the Bots tab does nothing".
   One line, and it protects every future toggle too. */
[hidden]{display:none!important}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
@media(max-width:940px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.35rem;display:flex;flex-direction:column;gap:.9rem;
  transition:border-color .16s ease,background .16s ease;
}
.card:hover{border-color:#2A3A5C;background:var(--surface-2)}
.card-top{display:flex;gap:.9rem;align-items:flex-start}
.avatar{
  width:48px;height:48px;border-radius:14px;flex:none;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:#04121C;
  background:hsl(var(--hue) 85% 62%);
}
.card-id{min-width:0;flex:1}
.card-id h3{font-size:1.02rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.4rem}
.card-id .cat{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dim);margin-top:.2rem}
.verified{width:14px;height:14px;flex:none;fill:var(--cyan)}
.card p.blurb{color:var(--muted);font-size:.9rem;line-height:1.55}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{font-family:var(--mono);font-size:.68rem;color:var(--muted);background:var(--ink);border:1px solid var(--rule-soft);border-radius:5px;padding:.2rem .45rem}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rule-soft)}
.members{display:flex;align-items:center;gap:.4rem;font-size:.83rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;background:#3BA55D;flex:none}
.empty{
  grid-column:1/-1;text-align:center;color:var(--muted);padding:3rem 1rem;
  border:1px dashed var(--rule);border-radius:var(--radius);
}

/* ---------- how it works ------------------------------------------------ */
.how{padding:var(--gap) 0;background:var(--ink-deep);border-block:1px solid var(--rule-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:1.6rem}
.step svg{width:74px;height:auto;margin-bottom:1.2rem}
.step .lo{fill:var(--text);opacity:.16}
.step .hi{fill:var(--cyan)}
.step h3{font-size:1.06rem;margin-bottom:.45rem}
.step p{color:var(--muted);font-size:.91rem}
.step .n{font-family:var(--mono);font-size:.7rem;color:var(--muted-dim);letter-spacing:.12em}

/* ---------- features ---------------------------------------------------- */
.features{padding:var(--gap) 0}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2rem}
@media(max-width:760px){.feat-grid{grid-template-columns:1fr}}
.feat{display:flex;gap:1rem;padding:1.4rem;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.feat .ico{width:38px;height:38px;flex:none;border-radius:10px;background:var(--cyan-soft);display:grid;place-items:center}
.feat .ico svg{width:19px;height:19px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1rem;margin-bottom:.35rem}
.feat p{color:var(--muted);font-size:.9rem}

/* ---------- cta --------------------------------------------------------- */
.cta{padding:var(--gap) 0}
.cta-inner{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:20px;
  padding:clamp(2.2rem,1.5rem + 3vw,3.6rem);text-align:center;
}
.cta-inner h2{font-size:clamp(1.6rem,1.3rem + 1.6vw,2.4rem);margin-bottom:.7rem}
.cta-inner p{color:var(--muted);max-width:48ch;margin:0 auto 1.8rem}
.cta-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ---------- footer ------------------------------------------------------ */
.site-footer{background:var(--ink-deep);border-top:1px solid var(--rule-soft);padding:3.5rem 0 2.5rem}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{height:24px;width:auto;margin-bottom:1rem}
.foot-brand p{color:var(--muted);font-size:.88rem;max-width:34ch}
.foot-col h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim);margin:0 0 .9rem;font-weight:500}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-col a{color:var(--muted);font-size:.9rem;transition:color .15s ease}
.foot-col a:hover{color:var(--text)}
.foot-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--muted-dim);font-size:.83rem;
}
.foot-bottom .mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em}

/* ==========================================================================
   BROWSE + LISTING pages
   ========================================================================== */

/* card titles are links; .stretch makes the whole card clickable */
.card-id h3 a{color:inherit}
.card-id h3 a:hover{color:var(--cyan)}
.card{position:relative}
.stretch::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.card-foot button,.card-foot a{position:relative;z-index:1}

/* ---------- browse ------------------------------------------------------ */
.browse{padding:2.6rem 0 var(--gap)}
.browse-head{margin-bottom:1.8rem}
.browse-head h1{font-size:clamp(1.7rem,1.35rem + 1.6vw,2.5rem);margin:.6rem 0 .5rem}
.browse-head .sub{color:var(--muted);max-width:62ch}

.toolbar{
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
  padding-bottom:1.6rem;border-bottom:1px solid var(--rule-soft);margin-bottom:1.8rem;
}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:3px;flex:none}
.seg-btn{
  font-family:var(--body);font-size:.87rem;font-weight:600;color:var(--muted);
  background:none;border:0;border-radius:7px;padding:.5rem .95rem;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.seg-btn:hover{color:var(--text)}
.seg-btn[aria-pressed="true"]{background:var(--cyan);color:#04121C}
.search-field.grow{flex:1 1 220px;min-width:0}
.sort{display:flex;align-items:center;gap:.5rem;flex:none}
.sort span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dim)}
.sort select{
  background:var(--surface);color:var(--text);border:1px solid var(--rule);border-radius:10px;
  font-family:var(--body);font-size:.88rem;padding:.6rem 2rem .6rem .8rem;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238494B0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:11px;
}
.sort select:focus{outline:none;border-color:var(--cyan)}

.browse-body{display:grid;grid-template-columns:210px minmax(0,1fr);gap:2.2rem;align-items:start}
/* grid items default to min-width:auto (their content size). Without this the
   horizontally-scrolling category list forces the whole page wide on mobile. */
.filters,.results-col{min-width:0}
@media(max-width:820px){.browse-body{grid-template-columns:1fr;gap:1.4rem}}
.filters h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dim);font-weight:500;margin-bottom:.8rem}
.filters ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
@media(max-width:820px){.filters ul{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;overscroll-behavior-x:contain;gap:.4rem;padding-bottom:.4rem;max-width:100%}}
.filters button{
  width:100%;text-align:left;display:flex;justify-content:space-between;gap:.6rem;align-items:center;
  background:none;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--body);font-size:.9rem;color:var(--muted);padding:.5rem .65rem;
  transition:background .14s ease,color .14s ease;white-space:nowrap;
}
.filters button:hover{background:var(--surface);color:var(--text)}
.filters button[aria-current="true"]{background:var(--cyan-soft);color:var(--cyan);font-weight:600}
.filters .n{font-family:var(--mono);font-size:.75rem;color:var(--muted-dim);font-variant-numeric:tabular-nums}
.filters button[aria-current="true"] .n{color:var(--cyan)}

.result-count{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--muted-dim);margin-bottom:1rem}
.results-col .grid{margin-top:0}
.results-col .grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:1080px){.results-col .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.results-col .grid{grid-template-columns:1fr}}
.empty a{color:var(--cyan)}

/* ---------- listing detail --------------------------------------------- */
.detail{padding:2rem 0 var(--gap)}
.back{display:inline-block;font-size:.88rem;color:var(--muted);margin-bottom:1.6rem}
.back:hover{color:var(--cyan)}
.listing-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.4rem;align-items:start;
  padding-bottom:1.8rem;border-bottom:1px solid var(--rule-soft);
}
@media(max-width:760px){.listing-head{grid-template-columns:auto minmax(0,1fr);}
  .listing-actions{grid-column:1/-1}}
.avatar.xl{width:88px;height:88px;border-radius:22px;font-size:1.8rem}
.listing-id h1{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.2rem);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.listing-id h1 .verified{width:20px;height:20px}
.listing-cat{color:var(--muted);font-size:.9rem;margin:.35rem 0 .8rem}
.listing-cat a{color:var(--cyan)}
.listing-cat a:hover{text-decoration:underline}
a.tag{transition:border-color .14s ease,color .14s ease}
a.tag:hover{color:var(--cyan);border-color:var(--cyan)}
.listing-actions{display:flex;gap:.6rem;flex-wrap:wrap}

.listing-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem;padding-top:2rem}
@media(max-width:860px){.listing-body{grid-template-columns:1fr;gap:1.8rem}}
.listing-main h2{font-size:1.15rem;margin-bottom:.9rem}
.listing-main .lead{font-size:1.05rem;color:var(--text);margin-bottom:.9rem}
.listing-main p{color:var(--muted);max-width:68ch}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin-bottom:1.2rem}
.stat{background:var(--surface);padding:1rem 1.1rem;display:grid;gap:.15rem}
.stat .v{font-family:var(--display);font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dim)}
.side-note{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:1.2rem}
.side-note h3{font-size:.95rem;margin-bottom:.45rem}
.side-note p{color:var(--muted);font-size:.87rem}

.not-found{text-align:center;padding:4rem 1rem}
.not-found h1{font-size:1.8rem;margin-bottom:.6rem}
.not-found p{color:var(--muted);margin-bottom:1.5rem}
.not-found code{font-family:var(--mono);font-size:.9em;color:var(--cyan)}

/* ==========================================================================
   ADD LISTING page
   ========================================================================== */
.add{padding:2.6rem 0 var(--gap)}
.auth-note{
  display:flex;gap:.9rem;align-items:flex-start;
  background:var(--cyan-soft);border:1px solid rgba(0,200,255,.22);
  border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:2.2rem;
}
.auth-note svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:var(--cyan);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-note p{font-size:.92rem;color:#BEE9FA}
.auth-note strong{color:#fff;font-weight:600}

.add-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:2.6rem;align-items:start}
@media(max-width:960px){.add-grid{grid-template-columns:1fr;gap:2rem}}

.add-form fieldset{border:0;margin:0 0 2.2rem;padding:0}
.add-form legend{
  font-family:var(--display);font-weight:700;font-size:1.05rem;padding:0;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.6rem;
}
.step-n{font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--cyan);letter-spacing:.1em}

.field{margin-bottom:1.3rem}
.field label,.field .label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.4rem}
.field input[type="text"],.field input[type="url"],.field select,.field textarea{
  width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  color:var(--text);font-family:var(--body);font-size:.95rem;padding:.7rem .85rem;
  transition:border-color .15s ease;
}
.field textarea{resize:vertical;line-height:1.55}
.field select{
  appearance:none;cursor:pointer;padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238494B0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:11px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan)}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#E5484D}
.field .hint{font-size:.8rem;color:var(--muted-dim);margin-top:.4rem}
.field .hint code{font-family:var(--mono);font-size:.95em;color:var(--muted)}
/* float, not flex: the hint also holds ordinary inline text that must not be spread */
.counter{font-family:var(--mono);font-variant-numeric:tabular-nums;float:right;margin-left:1rem}
.counter.near{color:var(--cyan)}
.err{font-size:.82rem;color:#FF8085;margin-top:.4rem}

.radio-row{display:flex;gap:.6rem;flex-wrap:wrap}
.radio{display:inline-flex;align-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:.6rem .95rem;
  font-size:.9rem;transition:border-color .15s ease,background .15s ease}
.radio:hover{border-color:#2A3A5C}
.radio input{accent-color:var(--cyan);margin:0 .55rem 0 0;flex:none}
.radio:has(input:checked){border-color:var(--cyan);background:var(--cyan-soft)}

.tag-input{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:.5rem .6rem;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tag-input:focus-within{border-color:var(--cyan)}
.tag-input input{flex:1 1 160px;min-width:120px;background:none;border:0;color:var(--text);
  font-family:var(--body);font-size:.92rem;padding:.25rem}
.tag-input input:focus{outline:none}
.tag-input input:disabled{cursor:not-allowed;color:var(--muted-dim)}
.tag-chips{display:contents}
.chip-tag{display:inline-flex;align-items:center;gap:.35rem;background:var(--ink);border-color:var(--rule)}
.chip-tag button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 .1rem}
.chip-tag button:hover{color:#FF8085}

.form-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.5rem}
.form-status{margin-top:1.2rem;font-size:.9rem}
.form-status.bad{color:#FF8085}
.form-status.good{color:var(--muted);background:var(--surface);border:1px solid var(--rule);
  border-left:2px solid var(--cyan);border-radius:0 10px 10px 0;padding:1rem 1.2rem}
.form-status.good strong{color:var(--text)}
.form-status code{font-family:var(--mono);font-size:.9em;color:var(--cyan)}
.form-status pre{
  font-family:var(--mono);font-size:.78rem;line-height:1.6;color:var(--text);
  background:var(--ink);border:1px solid var(--rule);border-radius:8px;
  padding:.9rem 1rem;margin:.8rem 0;overflow-x:auto;
}

.preview-col{position:relative}
.preview-sticky{position:sticky;top:92px}
.preview-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dim);font-weight:500}
.preview-sub{font-size:.85rem;color:var(--muted);margin:.35rem 0 1rem}
.preview-grid{grid-template-columns:1fr;margin-top:0}
.preview-grid .card:hover{border-color:var(--rule);background:var(--surface)}
.preview-grid .btn[disabled]{opacity:.5;cursor:default}
.preview-meta{margin-top:1.4rem;border-top:1px solid var(--rule-soft);padding-top:1.2rem}
.preview-meta h3{font-size:.9rem;margin-bottom:.7rem}
.preview-meta ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.preview-meta li{font-size:.84rem;color:var(--muted);padding-left:1rem;position:relative}
.preview-meta li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--cyan);opacity:.7}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dash{padding:2.6rem 0 var(--gap)}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.5rem;margin-bottom:1.4rem}
.panel-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem}
.panel-id{flex:1;min-width:0}
.panel-id h2{font-size:1.1rem}
.panel-id h2 a{color:inherit}
.panel-id h2 a:hover{color:var(--cyan)}
.panel-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-dim);margin-top:.25rem}
.status{display:inline-flex;align-items:center;gap:.45rem;flex:none;
  font-size:.78rem;font-weight:600;border-radius:999px;padding:.3rem .7rem;border:1px solid}
.status .sdot{width:7px;height:7px;border-radius:50%;background:currentColor}
.status.live{color:#3BA55D;border-color:rgba(59,165,93,.35);background:rgba(59,165,93,.1)}
.status.paused{color:#8494B0;border-color:var(--rule);background:var(--ink)}

.dash-stats{grid-template-columns:repeat(3,1fr);margin-bottom:1.4rem}
@media(max-width:560px){.dash-stats{grid-template-columns:1fr}}

.chart-block{border-top:1px solid var(--rule-soft);padding-top:1.3rem;margin-bottom:1.3rem}
.chart-block h3{font-size:.88rem;margin-bottom:.9rem;color:var(--text)}
.chart-wrap{position:relative}
.chart-wrap{max-width:640px}   /* keep marks and type at their intended size */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .g{stroke:var(--rule);stroke-width:1}          /* solid hairline, one shade off the surface */
.chart .line{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.chart .area{fill:var(--cyan);opacity:.10}
.chart .end{fill:var(--cyan)}
.chart .endl{fill:var(--text);font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500}
/* the HTML `hidden` attribute has no effect on SVG elements — use a class */
.chart .cross{visibility:hidden}
.chart .cross.on{visibility:visible}
.chart .cross .cl{stroke:var(--muted-dim);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .cross .cd{fill:var(--cyan);stroke:var(--surface);stroke-width:2}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .hit:focus-visible{fill:rgba(0,200,255,.10);outline:none}
.chart .yl,.chart .xl{fill:var(--muted-dim);font-family:"IBM Plex Mono",monospace;font-size:11px}
.tip{position:absolute;top:-6px;background:var(--ink);border:1px solid var(--rule);border-radius:7px;
  padding:.35rem .6rem;font-family:var(--mono);font-size:.72rem;color:var(--text);
  pointer-events:none;white-space:nowrap;z-index:2}

.data-table{margin-top:.9rem}
.data-table summary{font-size:.8rem;color:var(--muted);cursor:pointer;padding:.3rem 0}
.data-table summary:hover{color:var(--text)}
.data-table table{width:100%;border-collapse:collapse;margin-top:.6rem;font-size:.82rem}
.data-table caption{text-align:left;color:var(--muted-dim);font-size:.75rem;padding-bottom:.4rem}
.data-table th,.data-table td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--rule-soft)}
.data-table th{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-dim);font-weight:500}
.data-table td:last-child{font-variant-numeric:tabular-nums;color:var(--muted)}

.panel-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  border-top:1px solid var(--rule-soft);padding-top:1.2rem}
.panel-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.panel-actions .btn.bump:disabled{background:var(--surface-2);color:var(--muted);border-color:var(--rule)}
.bump-note{font-size:.8rem;color:var(--muted-dim);flex:1 1 auto;min-width:0}

/* ==========================================================================
   DOC PAGES (rules, bumping, contact, legal)
   ========================================================================== */
.doc{padding:2.6rem 0 var(--gap)}
.doc-head{max-width:60ch;margin-bottom:2.4rem;padding-bottom:1.8rem;border-bottom:1px solid var(--rule-soft)}
.doc-head h1{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.6rem);margin:.6rem 0 .6rem}
.doc-head .sub{color:var(--muted);font-size:1.02rem}
.doc-body{max-width:68ch}
.doc-body h2{font-size:1.15rem;margin:2.2rem 0 .8rem}
.doc-body h2:first-child{margin-top:0}
.doc-body p{color:var(--muted);margin-bottom:1rem}
.doc-body strong{color:var(--text);font-weight:600}
.doc-body a{color:var(--cyan)}
.doc-body a:hover{text-decoration:underline}
.doc-body ul,.doc-body ol{color:var(--muted);margin:0 0 1.2rem;padding-left:1.3rem;display:grid;gap:.6rem}
.doc-body li{padding-left:.2rem}
.doc-body li::marker{color:var(--muted-dim)}
.callout-box{background:var(--surface);border:1px solid var(--rule);border-left:2px solid var(--cyan);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.2rem 1.4rem;margin:1.6rem 0}
.callout-box h3{font-size:1rem;margin-bottom:.5rem}
.callout-box p{color:var(--muted);margin:0;font-size:.93rem}

/* signed-in chip in the header */
.user-chip{display:flex;align-items:center;gap:.5rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:999px;padding:.3rem .35rem .3rem .5rem;font-size:.85rem}
.user-chip img{border-radius:50%;display:block}
.user-chip span{font-weight:600;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip a{color:var(--muted);font-size:.78rem;padding:.25rem .55rem;border-radius:999px;
  background:var(--ink);transition:color .15s ease}
.user-chip a:hover{color:var(--cyan)}
@media(max-width:900px){.user-chip span{display:none}}

/* ---- instant search -------------------------------------------------------
   The search box is the first thing anyone uses on a directory, so it answers
   while you type instead of making you submit and wait for a page. The results
   panel is absolutely positioned over the page rather than pushing it down —
   a hero that jumps as you type is worse than one that does nothing. */
.seek{position:relative;max-width:760px}

.seek-kind{display:flex;gap:.25rem;margin:0 0 .7rem;padding:.25rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;width:max-content}
.seek-tab{appearance:none;border:0;background:none;cursor:pointer;
  font:600 .82rem/1 var(--body);letter-spacing:.01em;color:var(--muted);
  padding:.5rem 1.05rem;border-radius:999px;transition:color .15s,background .15s}
.seek-tab:hover{color:var(--text)}
.seek-tab.is-on{background:var(--cyan);color:#04121C}
.seek-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.search-field{position:relative}
.seek-hint{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);
  font:500 .72rem/1 var(--mono);color:var(--muted-dim);
  border:1px solid var(--rule);border-radius:5px;padding:.2rem .42rem;
  background:var(--ink);pointer-events:none}
.search-field input:focus ~ .seek-hint,
.search-field input:not(:placeholder-shown) ~ .seek-hint{opacity:0}

.seek-results{position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:40;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 22px 60px rgba(0,0,0,.55);overflow:hidden;max-height:60vh;overflow-y:auto}
.seek-row{display:grid;grid-template-columns:38px 1fr auto;gap:.8rem;align-items:center;
  width:100%;text-align:left;padding:.7rem .9rem;background:none;border:0;cursor:pointer;
  border-bottom:1px solid var(--rule-soft);color:inherit;font:inherit}
.seek-row:last-child{border-bottom:0}
.seek-row:hover,.seek-row.is-active{background:var(--surface-2)}
.seek-row:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.seek-av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font:700 .8rem/1 var(--display);color:#04121C;
  background:hsl(var(--hue,190) 90% 62%)}
.seek-name{font:600 .95rem/1.25 var(--body);color:var(--text);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seek-meta{font:400 .78rem/1.3 var(--body);color:var(--muted);
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seek-num{font:600 .8rem/1 var(--mono);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.seek-none{padding:1.1rem .9rem;color:var(--muted);font-size:.9rem}
.seek-none b{color:var(--text);font-weight:600}
.seek-all{display:block;width:100%;text-align:center;padding:.7rem;
  background:var(--ink);color:var(--cyan);font:600 .84rem/1 var(--body);
  text-decoration:none;border-top:1px solid var(--rule)}
.seek-all:hover{background:var(--surface-2)}

.hero-counts{margin:1.15rem 0 0;color:var(--muted-dim);font-size:.86rem}
.hero-counts b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- the band --------------------------------------------------------------
   Sits where a directory usually puts an advert. Three cards, equal weight, so
   none of them reads as the "real" one with the others as filler. */
.band{padding:clamp(2.5rem,1.5rem + 3vw,4rem) 0 0}
.band-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.band-card{display:flex;flex-direction:column;gap:.55rem;min-width:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.35rem 1.4rem 1.2rem;text-decoration:none;color:inherit}
.band-card h2{font:600 1.16rem/1.25 var(--display);color:var(--text);margin:0;letter-spacing:-.01em}
.band-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.band-eyebrow{font:600 .7rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-dim)}
.band-go{margin-top:auto;padding-top:.7rem;display:inline-flex;align-items:center;gap:.4rem;
  color:var(--cyan);font:600 .85rem/1 var(--body);text-decoration:none}
.band-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.band-card:hover{border-color:#24334f}
.band-card:hover .band-go svg{transform:translateX(3px)}
.band-card a.band-go:focus-visible,.band-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* The Discord card is the one thing here we do want people to click. */
.band-discord{background:linear-gradient(160deg,#141F38 0%,var(--surface) 62%);
  border-color:#22314e}
/* The honesty card is deliberately quiet — a claim about not selling placement
   should not itself look like an advert. */
.band-honest h2{color:var(--cyan)}

.trend-list{list-style:none;margin:.15rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.trend-list li{display:grid;grid-template-columns:1.2rem 1fr auto;gap:.6rem;align-items:baseline;
  font-size:.88rem;min-width:0}
.trend-rank{font:700 .78rem/1.4 var(--mono);color:var(--muted-dim);font-variant-numeric:tabular-nums}
.trend-list a{color:var(--text);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.trend-list a:hover{color:var(--cyan)}
.trend-n{font:500 .76rem/1.4 var(--mono);color:var(--muted-dim);font-variant-numeric:tabular-nums}
.trend-empty{color:var(--muted-dim);font-size:.86rem;display:block}

@media (max-width:640px){
  .seek-results{max-height:50vh}
  .band{padding-top:2rem}
}
@media (prefers-reduced-motion:reduce){
  .band-go svg{transition:none}
}

/* ---- dashboard sidebar ----------------------------------------------------
   Two columns on a wide screen, one on a narrow one. The nav collapses to a
   horizontal scroller rather than a hamburger: four items do not need a menu. */
.dash-layout{display:grid;gap:1.6rem;align-items:start;
  grid-template-columns:minmax(0,232px) minmax(0,1fr)}
.dash-main{min-width:0}

.dash-side{position:sticky;top:1.25rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);padding:1.1rem 1rem;
  display:flex;flex-direction:column;gap:1.1rem}

.dash-me{display:flex;align-items:center;gap:.7rem;min-width:0}
.dash-avatar{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--rule);background:var(--surface-2);object-fit:cover}
.dash-avatar-fallback{display:grid;place-items:center;
  font:700 1.05rem/1 var(--display);color:#04121C;background:var(--cyan)}
.dash-me-id{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.dash-me-id strong{font:600 .93rem/1.2 var(--body);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-me-id span{font:400 .78rem/1.2 var(--body);color:var(--muted-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.side-nav{display:flex;flex-direction:column;gap:.35rem}
.side-nav ul{list-style:none;margin:0 0 .5rem;padding:0;display:flex;flex-direction:column;gap:.12rem}
.side-label{font:600 .68rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-dim);margin:.3rem 0 .45rem;padding:0 .15rem}
.side-link{display:flex;align-items:center;gap:.6rem;width:100%;
  appearance:none;border:0;background:none;cursor:pointer;text-align:left;
  font:500 .875rem/1 var(--body);color:var(--muted);text-decoration:none;
  padding:.55rem .6rem;border-radius:9px;transition:background .14s,color .14s}
.side-link svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-link:hover{background:var(--surface-2);color:var(--text)}
.side-link.is-on{background:var(--cyan-soft);color:var(--cyan)}
.side-link:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.side-out:hover{color:#E5484D}
.side-n{margin-left:auto;font:600 .74rem/1 var(--mono);color:var(--muted-dim);
  background:var(--ink);border:1px solid var(--rule);border-radius:99px;
  padding:.2rem .42rem;font-variant-numeric:tabular-nums}
.side-link.is-on .side-n{color:var(--cyan);border-color:transparent;background:rgba(0,200,255,.14)}
.side-n:empty{display:none}

.dash-head{margin:0 0 1.1rem}
.dash-head h1{font:600 1.6rem/1.2 var(--display);color:var(--text);margin:0 0 .3rem;letter-spacing:-.015em}
.dash-head .sub{margin:0;color:var(--muted);font-size:.92rem}

.dash-group{font:600 .72rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-dim);margin:1.6rem 0 .75rem}
.dash-group:first-child{margin-top:0}

/* submissions read as status, not as listings — no chart, no controls */
.sub-panel{gap:.5rem}
.sub-detail{margin:0;color:var(--muted);font-size:.89rem;line-height:1.6}
.sub-detail strong{color:var(--text);font-weight:600}
.sub-detail code{font:500 .82rem/1 var(--mono);color:var(--muted-dim);
  background:var(--ink);border:1px solid var(--rule);border-radius:5px;padding:.14rem .34rem}
.sub-detail a{color:var(--cyan)}

@media (max-width:900px){
  .dash-layout{grid-template-columns:1fr}
  .dash-side{position:static;flex-direction:row;align-items:center;gap:1rem;
    overflow-x:auto;padding:.8rem}
  .dash-me{flex:0 0 auto}
  .side-nav{flex-direction:row;align-items:center;gap:.4rem;flex:1 1 auto}
  .side-nav ul{flex-direction:row;margin:0;gap:.25rem}
  .side-label{display:none}
  .side-link{white-space:nowrap;padding:.5rem .7rem}
}

/* ---- owner controls: edit, transfer, delete -------------------------------
   Both drawers open inside the panel they belong to, so the listing you are
   changing stays on screen while you change it. */
.drawer{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--rule)}

.edit-form{display:flex;flex-direction:column;gap:.85rem}
.f{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.f-label{font:600 .78rem/1 var(--body);letter-spacing:.02em;color:var(--text)}
.f-hint{font:400 .76rem/1.4 var(--body);color:var(--muted-dim)}
.f input[type="text"],.f textarea,.f select{
  width:100%;box-sizing:border-box;background:var(--ink);color:var(--text);
  border:1px solid var(--rule);border-radius:9px;padding:.6rem .7rem;
  font:400 .9rem/1.5 var(--body)}
.f textarea{resize:vertical;min-height:5.5rem}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px var(--cyan-soft)}

.f-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.f-actions input[type="text"]{background:var(--ink);color:var(--text);
  border:1px solid var(--rule);border-radius:9px;padding:.55rem .7rem;
  font:400 .88rem/1.4 var(--body);min-width:0;flex:1 1 15rem}
.f-actions input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}

.f-msg{font:500 .82rem/1.45 var(--body);color:var(--muted);flex:1 1 100%}
.f-msg.good{color:var(--cyan)}
.f-msg.bad{color:#F1707A}

.mblock{padding:1rem 0;border-bottom:1px solid var(--rule-soft)}
.mblock:last-child{border-bottom:0;padding-bottom:0}
.mblock:first-child{padding-top:0}
.mblock h3{font:600 .95rem/1.3 var(--display);color:var(--text);margin:0 0 .35rem}
.mblock p{margin:0 0 .7rem;color:var(--muted);font-size:.87rem;line-height:1.6}
.mblock code{font:500 .82rem/1 var(--mono);color:var(--text);
  background:var(--ink);border:1px solid var(--rule);border-radius:5px;padding:.14rem .34rem}

/* Shown once, never again — so make it obviously copyable and obviously temporary. */
.tokenbox{margin:0 0 .7rem;padding:.7rem .8rem;overflow-x:auto;
  background:var(--ink);border:1px dashed var(--cyan);border-radius:9px;
  font:500 .84rem/1.5 var(--mono);color:var(--cyan);user-select:all}

/* The danger block is quiet until you are in it, then unmistakable. */
.mblock.danger h3{color:#F1707A}
.mblock.danger p strong{color:var(--text)}
.btn-danger{background:#B3373D;border-color:#B3373D;color:#fff}
.btn-danger:hover{background:#C8434A;border-color:#C8434A}
.btn-danger:focus-visible{outline:2px solid #F1707A;outline-offset:2px}

.incoming-panel{border-color:var(--cyan)}
.incoming-panel .status.live{color:var(--cyan)}

@media (max-width:560px){
  .f-actions input[type="text"]{flex:1 1 100%}
}

/* "optional" beside a label — quieter than the label, louder than a hint. */
.opt{font:500 .7rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-dim);margin-left:.45rem;vertical-align:.08em}

/* The empty directory. On launch day this IS the homepage, so it gets the same
   care as a full grid rather than looking like something failed to load. */
.empty-state{grid-column:1/-1;text-align:center;padding:3.5rem 1.5rem;
  background:var(--surface);border:1px dashed var(--rule);border-radius:var(--radius)}
.empty-state h3{font:600 1.25rem/1.3 var(--display);color:var(--text);margin:0 0 .6rem;
  letter-spacing:-.01em}
.empty-state p{margin:0 auto;max-width:52ch;color:var(--muted);font-size:.95rem;line-height:1.65}
.empty-cta{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.4rem!important}

/* ---------- phones ------------------------------------------------------

   The layout was already responsive down to 480px. What follows is the set of
   things that only show up on an actual handset: a URL that will not wrap, an
   input that makes iOS zoom the whole page, 24px of gutter on a 360px screen,
   and tap targets sized for a mouse pointer.
*/

/* A single overflowing child should not send the entire page sideways.

   `clip` rather than `hidden` on purpose: `overflow:hidden` on a scroll
   ancestor silently kills `position:sticky`, and the header, the listing
   preview and the dashboard sidebar all rely on it. */
body{overflow-x:clip}

/* Anything that can carry a raw URL, slug or token has to be able to break
   mid-string. Prose only — never the grid containers, which need to keep their
   own sizing. Without this a link like
   https://thelistingspace.com/listing?id=varko-support is one unbreakable word
   wider than a phone. */
.doc-body p,.doc-body li,.doc-body h2,
.card .blurb,.seek-name,.seek-meta,.tokenbox,.mono{overflow-wrap:anywhere}

/* Media never outgrows its column. */
img,svg,video{max-width:100%;height:auto}

/* iOS zooms the viewport whenever a focused input is under 16px, and nothing
   zooms back out. 16px everywhere a finger can land is the whole fix. */
@media(max-width:768px){
  input,select,textarea,
  .search-field input,
  .toolbar .search-field input{font-size:16px}
  /* the toolbar field was shortened to sit on one line with the chips; on a
     phone it is on its own line anyway, so it can have its height back */
  .toolbar .search-field input{padding:.8rem 1rem .8rem 2.75rem}
}

/* Touch targets. WCAG asks for 44x44; a 28px chip is a coin toss with a thumb. */
@media(hover:none) and (pointer:coarse){
  .btn{min-height:44px}
  .chip{min-height:36px;padding-inline:1rem}
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .filters li a,.filters li button{min-height:40px;display:flex;align-items:center}
}

@media(max-width:560px){
  /* 24px each side takes 13% of a 360px screen before any content exists */
  .wrap{padding:0 16px}

  /* Buttons were nowrap so they would not break mid-label on desktop. On a
     phone a long label has nowhere to go, so let it wrap and keep the button
     inside the screen. */
  .btn{white-space:normal;text-align:center}

  /* Full-width calls to action read as buttons rather than as scattered links,
     and are far easier to hit. */
  .cta-actions .btn,.form-actions .btn{width:100%}
  .cta-actions,.form-actions{display:grid;gap:.6rem}

  /* The nav sheet is anchored to the header height; keep them in step. */
  .nav-links{padding-left:16px;padding-right:16px}
}

@media(max-width:400px){
  .wrap{padding:0 14px}
  /* Two stat tiles side by side at 360px leaves ~150px each — one column reads
     better than two cramped ones. */
  .dash-stats,.foot-grid{grid-template-columns:1fr}
  .chips{gap:.4rem}
}

/* ---------- the sign-in gate on /add ------------------------------------
   A signed-out visitor gets a locked form and a way in, rather than a form
   that quietly wastes their time and refuses at the last step. */
.auth-note.is-gate{border-color:var(--cyan);background:var(--cyan-soft)}
.auth-note.is-gate svg{display:none}
.gate-body{display:grid;gap:.9rem;justify-items:start}
.gate-body p{margin:0}
.auth-note.is-signed-in{border-color:var(--rule);background:var(--surface)}
.add-form.is-locked{opacity:.55;filter:saturate(.6)}
.add-form.is-locked input,.add-form.is-locked select,
.add-form.is-locked textarea,.add-form.is-locked button{cursor:not-allowed}
@media(max-width:560px){
  .gate-body{justify-items:stretch}
  .gate-body .btn{width:100%}
}

/* ---------- the front-page directory switch -----------------------------
   Servers and bots are both on the homepage now; these pick which is shown.
   Styled as a segmented control rather than links, because nothing navigates. */
.dir-switch{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid var(--rule);
  border-radius:12px;background:var(--surface)}
.dir-tab{display:inline-flex;align-items:center;gap:.45rem;
  font:600 .88rem/1 var(--body);color:var(--muted);
  background:transparent;border:0;border-radius:9px;padding:.55rem .95rem;cursor:pointer;
  transition:background .14s ease,color .14s ease}
.dir-tab:hover{color:var(--text)}
.dir-tab.is-on{background:var(--cyan-soft);color:var(--cyan)}
.dir-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.dir-count{font:600 .72rem/1 var(--mono);padding:.2rem .4rem;border-radius:999px;
  background:var(--surface-2);color:var(--muted)}
.dir-tab.is-on .dir-count{background:rgba(0,200,255,.16);color:var(--cyan)}

@media(max-width:560px){
  /* the bar stacks, so the switch gets the full width and real tap targets */
  .section-bar{flex-direction:column;align-items:stretch;gap:.9rem}
  .dir-switch{width:100%}
  .dir-tab{flex:1 1 0;justify-content:center;min-height:44px}
}

/* ---------- dashboard: everything you own, added up ---------------------
   The panels answer "how is this listing doing?"; this answers "how am I
   doing?", which is the question the page is opened with. */
.dash-summary{margin:0 0 1.6rem}
.sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem}
.sum-tile{display:grid;gap:.15rem;padding:.9rem 1rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:12px}
.sum-l{font:600 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-dim)}
.sum-v{font:700 1.5rem/1.1 var(--display);color:var(--text);
  font-variant-numeric:tabular-nums}
.sum-sub{font-size:.78rem;color:var(--muted)}
.sum-bump{margin:.8rem 0 0;font-size:.86rem;color:var(--muted)}
.sum-bump strong{color:var(--text)}
@media(max-width:560px){
  .sum-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:400px){
  .sum-grid{grid-template-columns:1fr}
}

/* ---------- the reviewer console ----------------------------------------
   Reviewing on Discord means scrolling a channel: newest at the bottom, the
   checklist inside an embed, the reason box a modal covering the thing being
   judged. Here the submission and the checklist sit side by side. */
.review{padding:2.5rem 0 4rem}
.rv-loading{color:var(--muted)}
.rv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  margin:0 0 1.4rem;flex-wrap:wrap}
.rv-top h1{font:700 1.8rem/1.15 var(--display);margin:0 0 .25rem;letter-spacing:-.02em}
.rv-sub{margin:0;color:var(--muted);font-size:.9rem}

.rv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.7rem;margin:0 0 1.4rem}
.rv-stat{display:grid;gap:.15rem;padding:.8rem .95rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:12px}
.rv-stat-l{font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-dim)}
.rv-stat-v{font:700 1.35rem/1.1 var(--display);color:var(--text);
  font-variant-numeric:tabular-nums}

.rv-group{margin:0 0 2rem}
.rv-group-head{font:600 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-dim);margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem}
.rv-count{font-family:var(--mono);background:var(--surface-2);color:var(--muted);
  border-radius:999px;padding:.15rem .5rem;font-size:.72rem}
.rv-none{color:var(--muted);font-size:.9rem;margin:0}

.rv-card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:1rem 1.1rem;margin:0 0 .7rem}
.rv-card.has-question{border-color:var(--amber,#E8A33D)}
.rv-card-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;flex-wrap:wrap}
.rv-card-head h3{font:600 1.05rem/1.2 var(--display);margin:0 0 .2rem}
.rv-meta{margin:0;color:var(--muted);font-size:.82rem}
.rv-card-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.rv-held{font-size:.82rem;color:var(--muted)}
.rv-blurb{margin:.7rem 0 0;color:var(--muted);font-size:.9rem}
.rv-question{margin:.7rem 0 0;font-size:.88rem;color:var(--text);
  background:var(--surface-2);border-radius:9px;padding:.6rem .75rem}
.rv-progress{margin:.6rem 0 0;font:600 .8rem/1 var(--mono);color:var(--cyan)}
.rv-flags{margin:.7rem 0 0;padding-left:1.1rem;color:var(--amber,#E8A33D);font-size:.85rem}

.rv-work{display:grid;grid-template-columns:1.1fr .9fr;gap:1.4rem;align-items:start}
.rv-detail,.rv-checklist{background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:1.1rem 1.2rem}
.rv-detail h2,.rv-checklist h2{font:600 .78rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-dim);margin:0 0 .9rem}
.rv-fields{margin:0;display:grid;gap:.55rem}
.rv-fields dt{font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-dim)}
.rv-fields dd{margin:0 0 .4rem;color:var(--text);font-size:.9rem;overflow-wrap:anywhere}
.rv-hint{margin:-.4rem 0 .9rem;color:var(--muted);font-size:.84rem}
.rv-checks{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.55rem}
.rv-checks label{display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start;
  cursor:pointer;font-size:.9rem}
.rv-checks input{margin-top:.2rem;width:17px;height:17px;accent-color:var(--cyan)}
.rv-checks em{grid-column:2;display:block;color:var(--muted);font-style:normal;
  font-size:.8rem;margin-top:.15rem}
.rv-decide{display:grid;gap:.7rem;border-top:1px solid var(--rule);padding-top:1rem}
.rv-decide summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.rv-decide summary:hover{color:var(--text)}
.rv-decide label{display:block;margin:.6rem 0 .35rem;color:var(--muted);font-size:.82rem}
.rv-decide textarea{width:100%;box-sizing:border-box;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:10px;color:var(--text);
  font:400 .9rem/1.5 var(--body);padding:.6rem .7rem;resize:vertical}
.rv-decide textarea:focus{outline:none;border-color:var(--cyan)}
.rv-decide .btn[disabled]{opacity:.5;cursor:not-allowed}

.review-note{margin:0 0 1rem;padding:.65rem .85rem;border-radius:10px;font-size:.88rem}
.review-note.is-ok{background:var(--cyan-soft);color:var(--cyan)}
.review-note.is-bad{background:rgba(229,72,77,.12);color:#E5484D}

.rv-empty{text-align:center;padding:3rem 1rem;max-width:52ch;margin:0 auto}
.rv-empty h2{font:700 1.5rem/1.2 var(--display);margin:0 0 .6rem}
.rv-empty p{color:var(--muted);margin:0 0 1.2rem}

@media(max-width:860px){
  .rv-work{grid-template-columns:1fr}
}
@media(max-width:560px){
  .rv-card-head{flex-direction:column}
  .rv-card-actions{width:100%}
  .rv-card-actions .btn{flex:1 1 0}
  .rv-stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- the directory on a phone ------------------------------------

   Measured against Top.gg's mobile view, which this beats on purpose:

     - their first card is an advert, and another sits below it. There is no
       paid slot here at all, so the top of the list is the best thing listed.
     - their cards are so tall you see one at a time, and carry no numbers, so
       nothing on screen is comparable. Ours pair reach with votes.
     - their category chips run off the edge with no hint there is more.
     - their filters scroll away; ours stay put.
*/
.card-votes{display:inline-flex;align-items:center;gap:.28rem;
  font:600 .78rem/1 var(--mono);color:var(--muted);
  font-variant-numeric:tabular-nums}
.card-votes svg{opacity:.75}

@media(max-width:760px){
  /* The one control people actually use stays reachable while they scroll.
     A filter you have to scroll back up to reach is a filter nobody changes. */
  .listings .section-bar{position:sticky;top:56px;z-index:20;
    background:color-mix(in srgb, var(--ink) 92%, transparent);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    margin-inline:-16px;padding:.7rem 16px;
    border-bottom:1px solid var(--rule-soft)}
  @supports not (backdrop-filter: blur(8px)) {
    .listings .section-bar{background:var(--ink)}
  }

  /* Chips scroll sideways with a fade at the edge, so it is obvious there is
     more rather than the last one simply being sliced in half. */
  .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;padding-bottom:.3rem;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start}

  /* Denser cards: three fit where Top.gg shows one. */
  .card{padding:.9rem 1rem}
  .card .blurb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin:.55rem 0 .5rem;font-size:.88rem}
  .card .tags{gap:.3rem}
  .card .tag{font-size:.72rem;padding:.15rem .45rem}
  .card-foot{padding-top:.6rem}
}

/* The reason there is no advert at the top of that list. */
.no-ads{display:flex;align-items:center;gap:.45rem;margin:.25rem 0 1.1rem;
  font-size:.82rem;color:var(--muted)}
.no-ads svg{flex:0 0 auto;color:var(--cyan)}
@media(min-width:761px){ .no-ads{display:none} }

/* The reviewer link only exists for reviewers, so it is worth marking as
   staff rather than letting it read as another public section. */
.nav-review{color:var(--cyan)!important;font-weight:600}
.nav-review::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--cyan);margin-right:.45rem;vertical-align:middle}

/* A listing whose invite has gone. Said plainly rather than offered as a
   button that goes nowhere. */
.listing-noinvite{display:inline-block;font-size:.85rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--rule);
  border-radius:9px;padding:.5rem .8rem}

/* ---------- card actions ------------------------------------------------
   Top.gg gives every card View / Invite / Vote, which is the right set: tell
   me more, give it to me, this one is good. Theirs are three identical grey
   buttons, so nothing tells you which to press. Here the action that leaves
   the site is the primary one, and the vote button carries its own count so
   the row says something before you touch it. */
.card-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.card-vote{display:inline-flex;align-items:center;gap:.3rem;
  font-variant-numeric:tabular-nums}
.card-vote svg{opacity:.8}
.card-vote:hover svg{opacity:1}
.card-foot{display:flex;justify-content:space-between;align-items:center;
  gap:.75rem;flex-wrap:wrap}

@media(max-width:560px){
  /* Stacked, full width, and in reading order: what it is, then what to do. */
  .card-foot{flex-direction:column;align-items:stretch;gap:.6rem}
  .card-actions{width:100%}
  .card-actions .btn{flex:1 1 0;min-height:40px;justify-content:center}
}

/* ---------- directory sort ----------------------------------------------
   Top.gg buries sorting behind a filter page. It belongs next to the thing it
   reorders, so the change is visible in the same glance that caused it. */
.dir-controls{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.dir-sort{display:inline-flex;align-items:center;gap:.45rem}
.dir-sort-l{font:600 .72rem/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-dim)}
.dir-sort select{appearance:none;background:var(--surface);color:var(--text);
  border:1px solid var(--rule);border-radius:10px;
  font:600 .85rem/1 var(--body);padding:.55rem 2rem .55rem .8rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.dir-sort select:focus{outline:2px solid var(--cyan);outline-offset:1px}

@media(max-width:560px){
  .dir-controls{width:100%;flex-direction:column;align-items:stretch}
  .dir-sort{justify-content:space-between}
  .dir-sort select{flex:1 1 auto;min-height:44px;margin-left:.6rem}
}

/* ---------- the owner console -------------------------------------------
   One screen, everything measured now. The numbers count up on arrival: a
   figure that animates from zero says it was just taken, where one that simply
   appears could be from any point in the past. Motion is short, runs once, and
   is dropped entirely for anyone who asked for less of it. */
.owner .own-top{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;margin:0 0 1.4rem;flex-wrap:wrap}
.owner h1{font:700 1.8rem/1.15 var(--display);margin:0 0 .25rem;letter-spacing:-.02em}
.own-sub{margin:0;color:var(--muted);font-size:.9rem}

.own-card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:1.1rem 1.2rem;margin:0 0 1.1rem;opacity:1}
.own-card h2{font:600 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-dim);margin:0 0 .9rem}
.own-hint{margin:-.5rem 0 .9rem;color:var(--muted);font-size:.85rem}

.own-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem}
.own-tile{display:grid;gap:.15rem;padding:.85rem .95rem;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:11px}
.own-tile.is-warn{border-color:var(--amber,#E8A33D)}
.own-l{font:600 .68rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-dim)}
.own-v{font:700 1.5rem/1.1 var(--display);color:var(--text);
  font-variant-numeric:tabular-nums}
.own-tile.is-warn .own-v{color:var(--amber,#E8A33D)}
.own-s{font-size:.75rem;color:var(--muted)}
.own-foot{margin:.9rem 0 0;color:var(--muted);font-size:.86rem}
.own-kind{display:inline-block;margin-right:.8rem}
.own-dim{color:var(--muted-dim);font-size:.8rem}

.own-search{width:100%;box-sizing:border-box;margin:0 0 .8rem;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:10px;color:var(--text);
  font:400 .9rem/1.4 var(--body);padding:.6rem .8rem}
.own-search:focus{outline:none;border-color:var(--cyan)}
.own-scroll{overflow-x:auto}
.own-table{width:100%;border-collapse:collapse;font-size:.88rem}
.own-table th{text-align:left;font:600 .68rem/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-dim);padding:.5rem .6rem;
  border-bottom:1px solid var(--rule)}
.own-table td{padding:.65rem .6rem;border-bottom:1px solid var(--rule-soft);
  vertical-align:top}
.own-table tr:last-child td{border-bottom:0}
.own-nums{font-variant-numeric:tabular-nums;white-space:nowrap}
.own-right{text-align:right}
.own-id{font:500 .74rem/1 var(--mono);color:var(--muted);background:var(--surface-2);
  padding:.2rem .4rem;border-radius:6px}
.own-pill{font:600 .7rem/1 var(--mono);padding:.25rem .5rem;border-radius:999px;
  text-transform:uppercase;letter-spacing:.05em}
.own-pill.is-live{background:rgba(59,165,93,.16);color:#3BA55D}
.own-pill.is-paused{background:rgba(232,163,61,.16);color:#E8A33D}

.own-audit{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.own-audit li{padding:.6rem .75rem;background:var(--surface-2);border-radius:10px;
  font-size:.85rem}

.owner-note{margin:0 0 1rem;padding:.65rem .85rem;border-radius:10px;font-size:.88rem}
.owner-note.is-ok{background:var(--cyan-soft);color:var(--cyan)}
.owner-note.is-bad{background:rgba(229,72,77,.12);color:#E5484D}

/* Cards arrive in sequence, once. Starting visible on purpose: if the script
   never runs, the page is still readable rather than a column of blanks. */
@keyframes own-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.own-in{animation:own-rise .34s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .own-in{animation:none}
}

@media(max-width:560px){
  .own-grid{grid-template-columns:repeat(2,1fr)}
  .own-table{font-size:.82rem}
}

/* ---------- the application dashboard ------------------------------------
   Sized for a phone first, then a tablet, then a desk. The questions are long
   answers, so the writing area is the thing that gets the space at every
   width — everything else gives way to it. */
.apply{padding:2.2rem 0 4rem}
.apply-top{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;margin:0 0 1.2rem;flex-wrap:wrap}
.apply h1{font:700 1.7rem/1.15 var(--display);margin:0 0 .25rem;letter-spacing:-.02em}
.apply-sub{margin:0;color:var(--muted);font-size:.9rem}
.apply-hint{margin:.25rem 0 .5rem;color:var(--muted);font-size:.82rem}

.apply-gate{max-width:34rem;margin:2rem auto;text-align:left}
.apply-gate h1{margin-bottom:.6rem}
.apply-gate p{color:var(--muted);margin:0 0 1.1rem}

.apply-grid{display:grid;gap:1rem;grid-template-columns:1fr}
.apply-card{background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:1.1rem 1.2rem}
.apply-card h2{font:600 1.05rem/1.2 var(--display);margin:0 0 .4rem}
.apply-card p{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
.apply-card.is-shut{opacity:.65}
.apply-blocked{color:var(--amber,#E8A33D);font-size:.86rem;margin:0}

.apply-watched{background:var(--cyan-soft);border:1px solid var(--cyan);
  border-radius:12px;padding:.85rem 1rem;margin:0 0 1.4rem;
  font-size:.87rem;line-height:1.6;color:var(--text)}
.apply-watched b{display:block;margin-bottom:.2rem}

.apply-form{display:grid;gap:1.4rem}
.apply-q{display:grid;gap:.4rem}
.apply-label{font-weight:600;font-size:.95rem;display:flex;align-items:baseline;
  gap:.5rem;flex-wrap:wrap}
.apply-n{display:inline-flex;align-items:center;justify-content:center;
  width:1.35rem;height:1.35rem;border-radius:50%;background:var(--surface-2);
  color:var(--muted);font:600 .72rem/1 var(--mono);flex:0 0 auto}
.apply-opt{font:500 .74rem/1 var(--mono);color:var(--muted-dim);
  text-transform:uppercase;letter-spacing:.06em}
.apply-input{width:100%;box-sizing:border-box;background:var(--surface);
  border:1px solid var(--rule);border-radius:11px;color:var(--text);
  font:400 1rem/1.6 var(--body);padding:.75rem .9rem;resize:vertical}
.apply-input:focus{outline:none;border-color:var(--cyan)}
select.apply-input{cursor:pointer}
.apply-count{font:500 .74rem/1 var(--mono);color:var(--muted-dim);text-align:right}
.apply-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}

.apply-mine{margin-top:2rem}
.apply-mine h2{font:600 .78rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-dim);margin:0 0 .7rem}
.apply-mine ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.apply-mine li{background:var(--surface);border:1px solid var(--rule);
  border-radius:10px;padding:.6rem .8rem;font-size:.88rem}
.apply-status{font:600 .72rem/1 var(--mono);text-transform:uppercase;
  padding:.2rem .45rem;border-radius:999px}
.apply-status.is-pending{background:var(--surface-2);color:var(--muted)}
.apply-status.is-accepted{background:rgba(59,165,93,.16);color:#3BA55D}
.apply-status.is-declined{background:rgba(229,72,77,.16);color:#E5484D}

.apply-note{margin:0 0 1rem;padding:.65rem .85rem;border-radius:10px;font-size:.88rem}
.apply-note.is-ok{background:var(--cyan-soft);color:var(--cyan)}
.apply-note.is-bad{background:rgba(229,72,77,.12);color:#E5484D}

/* Tablet: two cards side by side, but the form stays one column — a long
   answer in a narrow column is harder to write, not easier. */
@media(min-width:700px){
  .apply-grid{grid-template-columns:repeat(2,1fr)}
}
/* Desk: give the writing area a comfortable measure rather than the full
   width of a monitor. */
@media(min-width:1000px){
  .apply-form,.apply-watched{max-width:52rem}
  .apply-input{font-size:1.02rem}
}
/* Phone: full-width controls and targets a thumb can hit. */
@media(max-width:560px){
  .apply-actions{flex-direction:column;align-items:stretch}
  .apply-actions .btn{width:100%;min-height:46px}
  .apply-card .btn{width:100%}
  .apply-input{font-size:16px}
}

/* ---------- picking a timezone -------------------------------------------
   Nobody can verify "Europe/London" at a glance. Everybody can verify the
   clock. So the guess leads with the time, and the list is a search rather
   than four hundred options in a dropdown. */
.tz-guess{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:.9rem 1rem;margin:0 0 1.4rem;flex-wrap:wrap}
.tz-guess-main{display:grid;gap:.15rem;min-width:0}
.tz-guess-l{font:600 .68rem/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-dim)}
.tz-guess-z{font:600 1.05rem/1.2 var(--display);color:var(--text)}
.tz-guess-t{font-size:.85rem;color:var(--muted)}
.tz-guess-t b{color:var(--cyan)}

.tz-picker{margin:0 0 1.4rem}
.tz-list{max-height:16rem;overflow-y:auto;margin-top:.6rem;
  border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.tz-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-soft);
  color:var(--text);font:inherit;text-align:left;padding:.6rem .8rem;cursor:pointer}
.tz-row:last-child{border-bottom:0}
.tz-row:hover{background:var(--surface-2)}
.tz-row.is-on{background:var(--cyan-soft)}
.tz-row.is-on .tz-name{color:var(--cyan);font-weight:600}
.tz-name{font-size:.9rem}
.tz-meta{font:500 .76rem/1 var(--mono);color:var(--muted);white-space:nowrap}

.apply-saved{font:500 .78rem/1 var(--mono);color:var(--muted-dim)}

@media(max-width:560px){
  .tz-guess{flex-direction:column;align-items:stretch}
  .tz-guess .btn{width:100%}
  .tz-row{padding:.7rem .8rem;min-height:44px}
  .tz-meta{font-size:.72rem}
}

/* ---------- the application flow, dressed -------------------------------
   Motion here is doing a job in every case: the rail says how far through you
   are, the bar says how much is left, the tick confirms an irreversible thing
   happened. Nothing moves for the sake of moving, and all of it stops under
   prefers-reduced-motion. */

.ap-rail{display:flex;list-style:none;margin:0 0 1.6rem;padding:0;gap:.4rem;
  flex-wrap:wrap}
.ap-step{display:flex;align-items:center;gap:.45rem;flex:1 1 auto;min-width:0;
  font-size:.82rem;color:var(--muted-dim)}
.ap-step + .ap-step::before{content:"";flex:1 1 auto;height:1px;
  background:var(--rule);margin-right:.45rem;min-width:.8rem}
.ap-dot{display:inline-flex;align-items:center;justify-content:center;
  width:1.55rem;height:1.55rem;border-radius:50%;flex:0 0 auto;
  background:var(--surface-2);border:1px solid var(--rule);
  font:600 .74rem/1 var(--mono);color:var(--muted-dim);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.ap-step.is-now .ap-dot{background:var(--cyan);border-color:var(--cyan);color:#04121C}
.ap-step.is-now{color:var(--text);font-weight:600}
.ap-step.is-done .ap-dot{background:var(--cyan-soft);border-color:var(--cyan);
  color:var(--cyan)}
.ap-step.is-done{color:var(--muted)}
.ap-step-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ap-progress{height:5px;border-radius:999px;background:var(--surface-2);
  overflow:hidden;margin:0 0 .4rem}
.ap-progress-bar{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),#6FE3FF);
  transition:width .35s cubic-bezier(.22,.61,.36,1)}
.ap-progress-l{margin:0 0 1.6rem;font:500 .78rem/1 var(--mono);color:var(--muted-dim)}

/* An answered question steps back visually so the unanswered ones stand out —
   the opposite of highlighting what is done, which makes the remaining work
   harder to find. */
.apply-q{border-left:2px solid transparent;padding-left:.8rem;
  transition:border-color .25s ease}
.apply-q.is-answered{border-left-color:var(--cyan)}
.apply-q.is-missing{border-left-color:#E5484D}
.apply-q.is-missing .apply-input{border-color:#E5484D}
.apply-count.is-near{color:var(--amber,#E8A33D)}

.btn.is-working{opacity:.75;pointer-events:none}

/* Toasts: bottom on a phone where the thumb is, top-right on a desk where the
   eye already is. */
.ap-toasts{position:fixed;z-index:200;display:grid;gap:.5rem;
  right:1rem;top:1rem;max-width:min(24rem,calc(100vw - 2rem))}
.ap-toast{display:flex;align-items:flex-start;gap:.6rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:.7rem .9rem;font-size:.88rem;color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1)}
.ap-toast.is-in{opacity:1;transform:none}
.ap-toast-i{display:inline-flex;align-items:center;justify-content:center;
  width:1.25rem;height:1.25rem;border-radius:50%;flex:0 0 auto;
  font:700 .78rem/1 var(--mono)}
.ap-toast.is-ok{border-color:var(--cyan)}
.ap-toast.is-ok .ap-toast-i{background:var(--cyan-soft);color:var(--cyan)}
.ap-toast.is-bad{border-color:#E5484D}
.ap-toast.is-bad .ap-toast-i{background:rgba(229,72,77,.16);color:#E5484D}

/* The tick draws itself once, then stops. */
.ap-sent{text-align:center}
.ap-tick{width:64px;height:64px;margin:0 auto 1rem}
.ap-tick svg{width:100%;height:100%;fill:none;stroke-linecap:round;
  stroke-linejoin:round}
.ap-tick-c{stroke:var(--cyan);stroke-width:2;stroke-dasharray:151;
  stroke-dashoffset:151;animation:ap-draw .5s ease forwards}
.ap-tick-p{stroke:var(--cyan);stroke-width:3.5;stroke-dasharray:36;
  stroke-dashoffset:36;animation:ap-draw .32s ease .42s forwards}
@keyframes ap-draw{to{stroke-dashoffset:0}}

@media(max-width:560px){
  .ap-toasts{right:.75rem;left:.75rem;top:auto;bottom:.75rem;max-width:none}
  .ap-toast{transform:translateY(8px)}
  .ap-step-l{display:none}
  .ap-step{flex:0 0 auto}
  .ap-step.is-now .ap-step-l{display:inline}
}

@media (prefers-reduced-motion:reduce){
  .ap-progress-bar,.ap-toast,.ap-dot{transition:none}
  .ap-tick-c,.ap-tick-p{animation:none;stroke-dashoffset:0}
}