/* modules/mintorprint/public/mop-pages.css — series, cards, binder.
 *
 * mop-app-pages.html's stylesheet, verbatim, with the edits below. The rip
 * screen has its own (mop.css) because it is a 9:17 cabinet and these are
 * documents; they share only the palette, which is stated in both rather than
 * split into a third file nobody would remember to load.
 *
 * EDITS:
 *   1. The mockup was a single-page app with a .nav that swapped .pg sections.
 *      These are real, separately addressable, separately INDEXABLE pages
 *      (/rips/mint and /rips/mint/cards/:slug are in lib/indexable.js), so the
 *      nav is links and every .pg is `on`.
 *   2. .card .art img gets object-fit:contain and the tier background moves to
 *      the .art box — the mockup had two fixed data URIs, these are fifteen
 *      photographs at whatever aspect the plant happened to be.
 *   3. .back renders the REPO's Civitas Seal (public/arizona/img/civitas-seal.svg
 *      geometry — seven circles and one ring at r=38), not the rip screen's
 *      36-tick reconstruction. Founder ruling: the card back is black, the seal
 *      is Sacred Gold, and it is the real asset.
 */



:root{--cosmos:#080D1A;--gold:#C9A84C;--gold-hi:#F1DDA0;--teal:#00B8A9;--silver:#A8B5BD;--ink:#F5F1E6;
  --mgu-orange:#E8782C;--mgu-teal:#1FA38B;--mgu-green:#7CDB3A;--t1:#1FA38B;--t2:#E8782C;--t3:#C9A84C;--t4:#F1DDA0}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#04070F;color:var(--ink);font-family:'Exo 2',sans-serif;padding:40px 4vw 80px;background-image:radial-gradient(ellipse at 70% -10%,#11203a 0%,transparent 50%)}
h1{font-family:Cinzel,serif;font-size:30px;margin-top:8px;letter-spacing:.04em}
h2{font-family:Cinzel,serif;font-size:16px;letter-spacing:.22em;color:var(--gold-hi);margin:54px 0 6px;text-transform:uppercase}
.sub{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.2em;color:var(--silver);text-transform:uppercase;margin-bottom:18px}
.eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal)}
p.lede{color:var(--silver);max-width:780px;font-weight:300;font-size:15px;margin-top:8px}
.setrow{display:grid;grid-template-columns:170px repeat(3,260px);gap:18px;align-items:start;padding:18px 0;border-top:1px solid rgba(201,168,76,.14)}
.setrow .lab{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;line-height:1.9;padding-top:6px}
.setrow .lab b{display:block;font-family:'Permanent Marker',cursive;font-size:19px;color:var(--ink);letter-spacing:.02em;text-transform:none;margin-bottom:4px}
.setrow .lab i{display:block;font-style:normal;color:var(--gold-hi)}
.colhead{display:grid;grid-template-columns:170px repeat(3,260px);gap:18px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.22em;color:var(--teal);text-transform:uppercase;margin-top:10px}
/* ---- card ---- */
.card{width:260px;height:384px;border-radius:12px;position:relative;overflow:hidden;--tier:var(--t1);
  background:radial-gradient(circle at 30% 20%,rgba(31,163,139,.10),transparent 40%),radial-gradient(circle at 80% 85%,rgba(232,120,44,.08),transparent 40%),#07100E;
  box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;padding:12px 14px 10px}
.frame{position:absolute;inset:6px;border-radius:9px;border:1.5px solid var(--tier);pointer-events:none;opacity:.9;z-index:1}
.card>*:not(.frame){position:relative;z-index:2}
.frame::after{content:"";position:absolute;inset:3px;border-radius:7px;border:.5px solid rgba(255,255,255,.12)}
.top{display:flex;justify-content:space-between;align-items:center;z-index:2;height:26px;flex:none}
.helix{width:24px;height:24px}
.pills{display:flex;gap:4px}
.pill{font-family:'DM Mono',monospace;font-size:6.5px;letter-spacing:.2em;color:var(--cosmos);background:var(--tier);padding:3px 6px;border-radius:3px;font-weight:500}
.pill.v{background:var(--teal)}.pill.ap{background:linear-gradient(180deg,var(--gold-hi),var(--gold))}
.art{margin-top:6px;height:232px;border-radius:7px;overflow:hidden;position:relative;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.6)}
.art img{width:100%;height:100%;object-fit:contain;display:block}
.art .stamp{position:absolute;right:6px;bottom:6px;font-family:'DM Mono',monospace;font-size:6px;letter-spacing:.2em;color:var(--gold-hi);background:rgba(8,13,26,.75);border:1px solid rgba(201,168,76,.5);padding:2px 5px;border-radius:3px}
.band{margin-top:5px;height:14px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:3px;font-family:'DM Mono',monospace;font-size:6.5px;letter-spacing:.16em;color:var(--cosmos);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.band.v{background:var(--teal)}.band.ap{background:linear-gradient(180deg,var(--gold-hi),var(--gold))}.band.none{visibility:hidden}
.name{margin-top:5px;z-index:2;min-width:0}
.name .t{font-family:'Permanent Marker',cursive;font-size:15px;color:var(--mgu-green);line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name .s{font-family:'DM Mono',monospace;font-size:6.5px;letter-spacing:.16em;color:var(--silver);margin-top:3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{margin-top:auto;display:grid;grid-template-columns:1.1fr .75fr .9fr;gap:4px;z-index:2}
.meta div{font-family:'DM Mono',monospace;font-size:5.8px;letter-spacing:.14em;color:var(--silver);text-transform:uppercase;min-width:0}
.meta b{display:block;font-family:'Exo 2',sans-serif;font-weight:700;font-size:9px;color:var(--ink);letter-spacing:0;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta b.serial{font-family:'DM Mono',monospace;color:var(--tier)}
.foot{margin-top:6px;border-top:1px solid rgba(255,255,255,.1);padding-top:4px;display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:5.6px;letter-spacing:.18em;color:var(--silver);white-space:nowrap}
.foot b{color:var(--gold);font-weight:500}
.card.t2{--tier:var(--t2)}.card.t2 .frame{box-shadow:0 0 14px rgba(232,120,44,.25)}
.card.t3{--tier:var(--t3)}.card.t3 .frame{border-width:2.5px;box-shadow:0 0 18px rgba(201,168,76,.35),inset 0 0 0 1px rgba(241,221,160,.4)}.card.t3 .name .t{color:var(--gold-hi)}
.card.t4{--tier:var(--t4)}.card.t4 .frame{border:3px solid transparent;background:linear-gradient(#07100E,#07100E) padding-box,conic-gradient(from 0deg,#F1DDA0,#1FA38B,#E8782C,#7CDB3A,#F1DDA0) border-box;opacity:1;animation:hue 8s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.card.t4 .name .t{color:#fff;text-shadow:0 0 12px rgba(241,221,160,.8)}
.card.t4::after,.card.ap::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 58%);mix-blend-mode:screen;animation:sheen 3.4s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.card.v .frame{border-style:double;border-width:3px}.card.v .meta b.serial{color:var(--teal)}
.card.ap .frame{border:2.5px solid var(--gold);box-shadow:0 0 18px rgba(201,168,76,.35),inset 0 0 0 1px rgba(241,221,160,.4)}
.card.ap .name .t{color:var(--gold-hi)}.card.ap .meta b.serial{color:var(--gold-hi)}
.back{width:260px;height:384px;border-radius:12px;background:#000;display:grid;place-items:center;box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 0 1px rgba(201,168,76,.25)}
.back svg{width:190px;height:190px}
.back circle{fill:none;stroke:#C9A84C;stroke-width:.7;opacity:.95}.back .outer{stroke-width:1.1;opacity:1}.back .tick{stroke:#C9A84C;stroke-width:.9}
.backrow{display:grid;grid-template-columns:170px repeat(3,260px);gap:18px;align-items:start;padding:18px 0;border-top:1px solid rgba(201,168,76,.14)}
@media (max-width:1000px){.setrow,.colhead{grid-template-columns:1fr 1fr}.setrow .lab{grid-column:1/-1}.card{width:100%;max-width:260px}}

body{padding:0;background:#04070F}
.nav{position:sticky;top:0;z-index:10;background:rgba(4,7,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,168,76,.2);display:flex;gap:6px;padding:12px 4vw;overflow-x:auto;align-items:center}
.nav b{font-family:Cinzel,serif;font-size:12px;letter-spacing:.2em;color:var(--gold);margin-right:12px;white-space:nowrap}
/* .nav button replaced by .nav a — see EDIT 1 */
.pg{padding:30px 4vw 80px;max-width:1200px;margin:0 auto}   /* display: EDIT 1 */
.pg.on{display:block}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;margin-bottom:30px}
.hero h1{font-size:40px;line-height:1.05}
.hero h1 span{color:var(--mgu-orange)}
.counter{font-family:'Rubik Mono One',monospace;font-size:44px;color:var(--mgu-green);text-shadow:0 0 20px rgba(124,219,58,.35)}
.cl{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--silver);text-transform:uppercase}
.btnp{display:inline-block;font-family:Cinzel,serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:14px 22px;border-radius:8px;color:var(--cosmos);background:linear-gradient(180deg,#FFB36B,var(--mgu-orange));text-decoration:none;margin-top:14px}
/* The ops-page action buttons. `.btn sm` / `.btn sm ghost` were referenced by
   the admin queue and never defined anywhere in this stylesheet, so Approve and
   Decline rendered as raw browser chrome — grey bevels on a black page, on the
   one screen where the destructive control sits a few pixels from the
   constructive one. Approve carries the accent; Decline is an outline, because
   the safe reading of a mis-click is "nothing happened". */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:Cinzel,serif;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;font-size:11px;padding:9px 15px;border-radius:7px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  color:var(--cosmos);background:linear-gradient(180deg,#FFB36B,var(--mgu-orange));
  transition:filter .18s,border-color .18s,color .18s}
.btn.sm{font-size:10px;padding:7px 12px}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--mgu-green);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:default;filter:none}
.btn.ghost{background:none;color:var(--silver);border-color:rgba(201,168,76,.30)}
.btn.ghost:hover{color:var(--ink);border-color:var(--contam);filter:none}

.btng{display:inline-block;font-family:Cinzel,serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:13px 21px;border-radius:8px;color:var(--silver);background:none;border:1px solid rgba(201,168,76,.30);text-decoration:none;margin-top:14px}
.btng:hover{color:var(--ink);border-color:var(--mgu-orange)}
.ladder5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}
.ladder5 div{background:rgba(13,20,38,.7);border:1px solid rgba(168,181,189,.15);border-radius:10px;padding:12px;text-align:center}
.ladder5 span{display:block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.ladder5 b{display:block;font-family:'DM Mono',monospace;font-size:14px;color:var(--ink);margin-top:4px}
.ladder5 i{display:block;font-style:normal;font-family:'DM Mono',monospace;font-size:9px;color:var(--silver);margin-top:2px}
.story{max-width:760px;color:var(--ink)}
.story h1{font-size:30px;margin:10px 0}
.story h2{font-family:Cinzel,serif;font-size:16px;letter-spacing:.2em;color:var(--gold-hi);margin:34px 0 10px;text-transform:uppercase}
.story p{color:var(--silver);font-weight:300;font-size:15.5px;line-height:1.65;margin:0 0 12px}
.story p b{color:var(--ink);font-weight:600}
.story hr{border:0;height:1px;background:rgba(201,168,76,.18);margin:26px 0}
.story code{font-family:'DM Mono',monospace;font-size:12px;color:var(--mgu-green);background:#0D1426;padding:2px 6px;border-radius:4px}
table.md{width:100%;border-collapse:collapse;font-family:'DM Mono',monospace;font-size:11.5px;margin:10px 0 18px}
table.md td{padding:8px 10px;border-bottom:1px solid rgba(168,181,189,.12);color:var(--silver)}
table.md tr:first-child td{color:var(--teal);letter-spacing:.14em;text-transform:uppercase;font-size:9.5px}
.editnote{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--mgu-orange);border:1px dashed rgba(232,120,44,.5);padding:10px 12px;border-radius:8px;margin-bottom:18px;text-transform:uppercase}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.cards .card{width:100%;max-width:260px;cursor:pointer}
.cards .cap{font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase;margin-top:8px;line-height:1.8}
.cards .cap b{color:var(--gold-hi);font-weight:500}
.tierhead{font-family:Cinzel,serif;font-size:15px;letter-spacing:.24em;color:var(--gold-hi);margin:30px 0 4px;text-transform:uppercase}
.tiersub{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--silver);text-transform:uppercase;margin-bottom:14px}
.panel{background:rgba(13,20,38,.7);border:1px solid rgba(201,168,76,.16);border-radius:14px;padding:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.kpi div{background:#0D1426;border-radius:10px;padding:12px;text-align:center}
.kpi span{display:block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--silver);text-transform:uppercase}
.kpi b{display:block;font-family:'Rubik Mono One',monospace;font-size:18px;color:var(--mgu-green);margin-top:4px}
.log{font-family:'DM Mono',monospace;font-size:11.5px}
.log div{display:grid;grid-template-columns:90px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid rgba(168,181,189,.1);color:var(--silver);align-items:center}
.log b{color:var(--ink);font-weight:500}
.log .tt{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.18em;padding:3px 6px;border-radius:3px;color:var(--cosmos);display:inline-block;margin-right:8px}
.tt.t1{background:var(--t1)}.tt.t2{background:var(--t2)}.tt.t3{background:var(--t3)}.tt.t4{background:var(--t4)}.tt.tc{background:var(--contam);color:#fff}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{background:none;border:1px solid rgba(168,181,189,.25);color:var(--silver);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;padding:7px 11px;border-radius:6px;cursor:pointer;text-transform:uppercase}
.tabs button.on{border-color:var(--teal);color:var(--ink)}
.stand{font-family:'DM Mono',monospace;font-size:11.5px}
.stand div{display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid rgba(168,181,189,.1);color:var(--silver)}
.stand b{color:var(--ink);font-weight:500}
.stand .n{color:var(--gold);font-family:'Rubik Mono One',monospace;font-size:12px}
.binderhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.binderhead h1{font-size:26px}
.ref{display:flex;gap:8px;align-items:center;font-family:'DM Mono',monospace;font-size:12px;background:#0D1426;border:1px solid rgba(168,181,189,.2);border-radius:8px;padding:10px 12px}
.ref b{color:var(--mgu-green)}
.ref button{background:var(--mgu-orange);border:0;color:var(--cosmos);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;padding:6px 10px;border-radius:5px;cursor:pointer}
.five{display:flex;gap:6px}
.five i{width:38px;height:52px;border-radius:5px;border:1px dashed rgba(168,181,189,.3);display:grid;place-items:center;font-family:'DM Mono',monospace;font-size:8px;color:var(--silver);overflow:hidden}
.five i.c{border:1px solid rgba(224,58,58,.55);color:var(--contam);background:rgba(40,8,8,.6)}
.five i.h{border:1.5px solid var(--gold)}
.five i img{width:100%;height:100%;object-fit:cover}
.empty{border:1px dashed rgba(168,181,189,.25);border-radius:12px;padding:30px;text-align:center;color:var(--silver);font-weight:300}
.toggle{display:flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--silver);text-transform:uppercase}
/* The mockup drew this switch ONLY in its on state — hardcoded teal, knob
   pinned right — because a static page never had to show it off. Rendered from
   a stored value it would then read as on no matter what was saved, which is a
   control lying about its own state. Off is the default; .on is the change. */
.toggle{cursor:pointer;user-select:none}
.toggle i{width:34px;height:18px;border-radius:9px;background:rgba(168,181,189,.3);position:relative;
  flex:0 0 auto;transition:background .18s}
.toggle i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .18s}
.toggle.on i{background:var(--teal)}
.toggle.on i::after{transform:translateX(16px)}
.vendor{display:grid;grid-template-columns:1fr 1.4fr;gap:22px;align-items:start}
.qr{width:140px;height:140px;background:repeating-conic-gradient(#111 0 25%,transparent 0 50%) 0 0/18px 18px,#fff;border-radius:10px}
.code{font-family:'Rubik Mono One',monospace;font-size:28px;color:var(--mgu-green);letter-spacing:.1em}
input,select,textarea{width:100%;background:#0D1426;border:1px solid rgba(168,181,189,.2);border-radius:8px;color:var(--ink);padding:11px 12px;font-family:'Exo 2',sans-serif;font-size:14px}
label{display:block;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);margin:12px 0 6px}
.cardpage{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start}
@media (max-width:900px){.hero,.grid2,.vendor,.cardpage{grid-template-columns:1fr}.ladder5,.kpi{grid-template-columns:1fr 1fr}}

/* ── EDIT 1: real pages, not a tab switcher ── */
.nav a{background:none;border:1px solid rgba(201,168,76,.28);color:var(--silver);padding:7px 12px;border-radius:8px;
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.nav a.on{border-color:var(--mgu-orange);color:var(--ink)}
.nav a:hover{color:var(--ink)}

/* ── EDIT 2: real photographs in the frame ── */
.card .art{background:#07100E}
.card .art img{width:100%;height:100%;object-fit:contain;display:block}

/* ── EDIT 3: the card back, per the brand ruling ──
   Black, the repo's Civitas Seal in Sacred Gold, and nothing else. */
.back{width:260px;height:384px;border-radius:12px;background:#000;display:grid;place-items:center;
  box-shadow:0 20px 40px rgba(0,0,0,.7),0 0 0 1px rgba(201,168,76,.25);color:#C9A84C}
.back svg{width:190px;height:190px}

/* Pull history and the binder's credit breakdown reuse .log; these two rules
   keep a long card name from shoving the town off the end of the row. */
.log b{min-width:0;overflow-wrap:anywhere}
.log div{align-items:baseline}

/* The grid caption is "12 / 125 left" then "113 pulled". The mockup emits them
   as a <b> and a bare text node with no separator, which on a real page renders
   "12 / 125 LEFT113 PULLED" — it never showed because the mockup's counts were
   all round numbers at full supply and the seam sat between a word and a digit
   nobody read twice. The <b> becomes its own line, which is also how it reads
   in the mockup's own screenshot. */
.cards .cap b{display:block}

/* Standings tabs are LINKS — each board is its own URL, so a tab survives a
   reload and can be sent to somebody. The mockup used buttons because it was
   one page swapping a div. */
.tabs a{background:none;border:1px solid rgba(201,168,76,.28);color:var(--silver);padding:7px 12px;border-radius:8px;
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.tabs a.on{border-color:var(--mgu-orange);color:var(--ink)}
.tabs a:hover{color:var(--ink)}
.log.board div{grid-template-columns:34px 1fr auto}
.log .n{font-family:Cinzel,serif;color:var(--gold-hi)}

/* The hit log's first column is a full timestamp — "Aug 21, 1:13 PM" — which
   wrapped onto two lines in the mockup's 80px slot. The mockup only ever showed
   "Aug 22 · 4:12p", which fits; a real toLocaleString does not. */
.log.feed div{grid-template-columns:132px 1fr auto}
@media (max-width:900px){.log.feed div{grid-template-columns:1fr}}

/* THREE VERSIONS OF EVERY CARD, plus the back.
   A hit writes three copies in one transaction; showing one frame implies the
   card is a single object. Four across on a desk, two on a tablet, one on a
   phone — the frame is a fixed 260px so it never squeezes. */
.versions{display:grid;grid-template-columns:repeat(4,260px);gap:22px;align-items:start;margin-bottom:26px;
  overflow-x:auto;padding-bottom:6px}
@media (max-width:1180px){.versions{grid-template-columns:repeat(2,260px)}}
@media (max-width:620px){.versions{grid-template-columns:260px}}
.versions .vlab{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-hi);margin-bottom:8px}
.versions .vnote{font-family:'Exo 2',sans-serif;font-weight:300;font-size:12px;color:var(--silver);margin-top:8px;max-width:260px}

/* The chooser on /rips/start, and the same object the Local Rips landing uses. */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 4px}
@media (max-width:760px){.doors{grid-template-columns:1fr}}
.door{display:block;text-decoration:none;padding:18px;border-radius:14px;
  background:rgba(13,20,38,.7);border:1px solid rgba(201,168,76,.22);transition:border-color .15s,transform .15s}
.door:hover{border-color:var(--gold);transform:translateY(-2px)}
.door.on{border-color:var(--mgu-teal)}
.door b{display:block;font-family:Cinzel,serif;font-size:19px;color:var(--ink)}
.door span{display:block;font-weight:300;font-size:13.5px;color:var(--silver);line-height:1.6;margin-top:7px}
.door i{display:block;font-family:'DM Mono',monospace;font-style:normal;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-top:12px}
.chip.on{border-color:var(--mgu-teal);color:var(--ink)}

/* Who this ripper is ripping for. Sticky (0173), so it is a statement with a
   change link rather than a field to fill in again. */
.ripfor{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  background:var(--cosmos-2);border-radius:10px;padding:14px 16px}
.ripfor b{font-family:Cinzel,serif;font-size:16px;color:var(--ink)}
.ripfor span{grid-column:1;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--silver)}
.ripfor button{grid-row:1/3;grid-column:2}
/* The ladder's "per card" qualifier — quiet, but it has to be readable. */
.ladder5 b em,.ladder b em{font-style:normal;font-size:.72em;letter-spacing:.1em;color:var(--silver);text-transform:uppercase}

/* The real Civitas Seal, top-left of every page — the same mark DT uses in its
   own header, not the rip screen's pack-art reconstruction. */
/* The seal is a mark, not a nav pill. `.nav a` gives every child a 1px
   border and 7px/12px of padding; with box-sizing:border-box that left this
   28px box a 2x12px content area, so the seal rendered as a sliver inside an
   empty outline — which is what "the seal is wrong" looked like on every
   Mint page. Reset both here rather than narrowing `.nav a`, which the real
   nav links need. */
.nav .navseal{display:inline-flex;width:28px;height:28px;color:var(--gold);flex:0 0 auto;
  margin-right:2px;padding:0;border:0;background:none}
.nav .navseal svg{width:100%;height:100%}