/* Puppy Pad additions on top of the shared mdog look in base.css */
.top .wrap { gap: 10px 14px; }
.top nav { margin-right: auto; }
.top nav a { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink-dim); padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; }
.top nav a:hover { color: #fff; border-color: var(--line-2); }
select, input[type=number], input[type=text], input:not([type]) { background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink); border-radius: 10px; padding: 11px 13px; font-family: "JetBrains Mono", monospace; font-size: 14px; width: 100%; }
select { width: auto; padding: 9px 11px; }
input:focus, select:focus { outline: 2px solid var(--teal-line); outline-offset: 1px; }
.btn { border: 1px solid transparent; cursor: pointer; }

.warnbar { margin-top: 22px; border: 1px solid rgba(224,102,63,.5); background: rgba(224,102,63,.08); border-radius: 12px; padding: 12px 16px; color: var(--ink-dim); font-size: 15px; max-width: 70ch; }
.warnbar b { color: var(--warn); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
label { display: block; font-size: 13px; color: var(--ink-dim); }
label input { margin-top: 7px; }
label small { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 12.5px; }
.field { margin-top: 18px; }
.flabel { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.curves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 640px) { .curves { grid-template-columns: 1fr; } }
.curve { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); background: var(--bg-3); border-radius: 12px; padding: 14px; cursor: pointer; }
.curve:has(input:checked) { border-color: var(--teal-line); }
.curve input { width: auto; margin-top: 3px; accent-color: var(--teal); }
.curve-name { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.curve-blurb { font-size: 13.5px; color: var(--ink-dim); margin-top: 3px; }
.curve-sweep { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--teal); margin-top: 7px; }
.check { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-dim); font-size: 14.5px; }
.check input { width: auto; accent-color: var(--teal); }

.status { margin-top: 14px; font-size: 14px; color: var(--ink-dim); min-height: 20px; }
.status.ok { color: var(--teal); }
.status.warn { color: var(--warn); }

.list { padding: 8px 14px; }
.row { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 14px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 14px 8px; cursor: pointer; color: inherit; font: inherit; }
.row:first-child { border-top: 0; }
.row:hover { background: rgba(46,232,221,.04); }
.rank { font-family: "JetBrains Mono", monospace; color: var(--ink-faint); font-size: 13px; }
.rid { min-width: 0; }
.sym { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 17px; margin-right: 9px; }
.nm { color: var(--ink-dim); font-size: 14px; }
.mc { font-family: "JetBrains Mono", monospace; font-size: 15px; color: var(--teal); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 8px; }
.tag.ok { color: var(--teal); border-color: var(--teal-line); }
.tag.warn { color: var(--warn); border-color: rgba(224,102,63,.5); }
.empty { color: var(--ink-faint); font-size: 15px; padding: 16px 4px; margin: 0; }

.thead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.addr { margin: 8px 0 18px; }
.addr code { font-size: 12px; color: var(--data); }
.tform { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
@media (max-width: 640px) { .tform { grid-template-columns: 1fr; } }
.quote { margin-top: 12px; font-family: "JetBrains Mono", monospace; font-size: 13.5px; color: var(--ink-dim); min-height: 18px; }
.net { margin-left: auto; font-size: 13px; color: var(--ink-faint); }
.net b { color: var(--ink-dim); }
.sec-head { align-items: baseline; }
.caveat { margin: 14px 0 0; color: var(--ink-faint); font-size: 13px; max-width: 62ch; }

/* ---------------------------------------------------------------------------
   Restructure: MDOG masthead, trust strip, board, per-token page, proof page.
   --------------------------------------------------------------------------- */

/* Masthead. MDOG is the brand, Puppy Pad is the product on it. */
.top .home .brand { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .04em; }
.top .home .prod { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); border-left: 1px solid var(--line-2); padding-left: 9px; margin-left: 1px; }
.top .wrap { padding-top: 11px; padding-bottom: 11px; }
.top .home { gap: 9px; }

/* Prototype bar. Thin, loud, on every page. */
.protobar { margin: 0; padding: 7px 24px; text-align: center; background: rgba(224,102,63,.12); border-bottom: 1px solid rgba(224,102,63,.4); color: var(--ink-dim); font-size: 13px; line-height: 1.4; }
.protobar b { color: var(--warn); }

/* Trust strip. Compact by design: it must not push the board below the fold. */
.strip { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.strip .wrap { padding-top: 9px; padding-bottom: 9px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; }
.chips li { font-size: 12px; line-height: 1.35; color: var(--ink-faint); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px; }
.chips li b { color: var(--ink); font-weight: 600; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; margin-right: 6px; }
.chips li a { color: var(--teal); }
.strip-warn { margin: 7px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-faint); max-width: 100ch; }

@media (max-width: 900px) { .chips li { font-size: 11.5px; } }

/* Board */
main { display: block; }
.board-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 16px 0 0; }
.board-head h1 { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.02em; margin: 0; }
.board-head .net { margin-left: 0; }
.sortl { margin-left: auto; display: flex; align-items: center; gap: 9px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); width: auto; }
.sortl select { font-size: 12.5px; padding: 6px 9px; }
.boardmeta { margin: 8px 0 14px; font-size: 13.5px; color: var(--ink-faint); max-width: 90ch; }

.row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; gap: 10px 14px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 13px 8px; color: inherit; font: inherit; text-decoration: none; }
.row:hover { background: rgba(46,232,221,.04); }
.rid-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.rid-ca { margin-top: 3px; }
.rid-ca code { font-size: 11px; color: var(--ink-faint); }
.sym { margin-right: 0; }
.mcw { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.mcw > * { white-space: nowrap; }
.mcl { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.tag.flat { color: var(--ink-faint); border-color: var(--line-2); background: var(--bg-3); }
@media (max-width: 780px) {
  .row { grid-template-columns: 34px minmax(0,1fr) auto; }
  .row .tags { grid-column: 2 / -1; }
}

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
@media (max-width: 700px) { .tiles { grid-template-columns: 1fr; } }

/* Per-token page */
.tk-head { padding: 26px 0 20px; border-bottom: 1px solid var(--line); }
.tk-h1 { font-family: "Chakra Petch", sans-serif; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; letter-spacing: -.02em; }
.tk-sym { font-size: clamp(28px, 6vw, 44px); line-height: 1.05; }
.tk-nm { font-family: "Archivo", system-ui, sans-serif; font-weight: 400; font-size: 17px; color: var(--ink-dim); }
.tk-mc { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tk-mc .v { font-family: "JetBrains Mono", monospace; font-size: 22px; color: var(--teal); }
.tk-mc .t { font-size: 12.5px; color: var(--ink-faint); }
.tk-head .tags { margin-top: 14px; }
.tk-ca { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-ca .t { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.tk-ca a { font-size: 12.5px; color: var(--data); overflow-wrap: anywhere; }
.tk-sec { padding: 30px 0; }
.panel.pad { padding: 20px 22px; }
@media (max-width: 640px) { .panel.pad { padding: 16px; } }
.fact dd a.mono { font-size: 12.5px; color: var(--data); overflow-wrap: anywhere; }
.warnv { color: var(--warn); }

/* Code blocks. They scroll on their own; the page never does. */
.code { background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 0; }
.code code { display: block; white-space: pre; font-size: 12px; line-height: 1.7; color: var(--ink-dim); }
.lede.small { font-size: 15.5px; margin: 0 0 16px; }

/* Launch preview */
.preview { margin-top: 10px; border: 1px solid var(--line); background: var(--bg-3); border-radius: 12px; padding: 6px 16px; }
.preview .row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-top: 1px solid var(--line); padding: 10px 0; grid-template-columns: none; }
.preview .row:first-child { border-top: 0; }
.preview .row:hover { background: none; }
.preview .t { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.preview .v { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--ink); text-align: right; }

/* 400px: nothing may push the page sideways. */
@media (max-width: 440px) {
  .wrap { padding: 0 14px; }
  .protobar { padding: 7px 14px; font-size: 12px; }
  .top .home .prod { border-left: 0; padding-left: 0; }
  .tform { grid-template-columns: 1fr; }
  .code code { font-size: 11px; }
}

/* ===========================================================================
   VISUAL DESIGN LAYER
   Everything below is presentation only. No token value is changed, no DOM id
   or class the JS reads is renamed. Colour carries meaning throughout:
     --teal  a fact the contract enforces or you can verify on chain
     --warn  a risk the reader must notice
     --data  a neutral number, neither good nor bad
     grey    everything else
   =========================================================================== */

/* --- the grid field, reused wherever a band needs depth ------------------- */
.strip::before,
.stage::after,
.list .row::before {
  content: "";
  position: absolute;
  pointer-events: none;
}
.strip::before, .stage::after {
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .5;
}
.strip::before {
  -webkit-mask-image: radial-gradient(74% 130% at 16% 0%, #000, transparent 72%);
          mask-image: radial-gradient(74% 130% at 16% 0%, #000, transparent 72%);
}
.stage::after {
  -webkit-mask-image: radial-gradient(70% 90% at 22% 0%, #000, transparent 74%);
          mask-image: radial-gradient(70% 90% at 22% 0%, #000, transparent 74%);
  opacity: .45;
}

/* --- masthead ------------------------------------------------------------ */
.top { position: relative; z-index: 3; }
.top .home img {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--teal-line);
  box-shadow: 0 0 0 4px rgba(46,232,221,.07);
  background: var(--bg-3);
}
.top .home .brand { font-size: 18px; }
.top nav a.on {
  color: var(--ink); background: var(--bg-3); border-color: var(--line-2);
}
.top .btn { padding: 8px 15px; font-size: 12px; letter-spacing: .06em; border-radius: 999px; }

/* --- prototype bar. This is a risk, so it is --warn and it looks like one. */
.protobar {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .04em;
  background: rgba(224,102,63,.1);
  border-bottom: 1px solid rgba(224,102,63,.4);
  position: relative; z-index: 2;
}
.protobar::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 3px rgba(224,102,63,.2);
}
.protobar b { font-family: "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

/* --- the hero band on the board -----------------------------------------
   Deliberately compact: the first token row has to survive at 1450x900. */
.strip { position: relative; overflow: hidden; }
.strip::after {
  content: ""; position: absolute; inset: -70% 0 auto 0; height: 420px; pointer-events: none;
  background: radial-gradient(46% 66% at 18% 0%, rgba(46,232,221,.14), rgba(46,232,221,0) 70%);
}
.strip .wrap { position: relative; z-index: 1; padding-top: 20px; padding-bottom: 15px; }

.hero { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.dogtile { position: relative; flex: 0 0 auto; display: block; }
.dogtile img {
  display: block; width: 86px; height: 86px; border-radius: 20px; object-fit: cover;
  border: 1px solid var(--teal-line); background: var(--bg-3);
  box-shadow: 0 0 0 6px rgba(46,232,221,.07), 0 24px 60px -24px rgba(0,0,0,.8);
}
.dogtile .badge {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 10px; letter-spacing: .12em;
  color: #04211f; background: var(--teal); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 20px -6px rgba(46,232,221,.55);
}
.wordmark {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: clamp(34px, 6.6vw, 60px); line-height: .9; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--teal); min-width: 0;
}
.wordmark .wm2 { display: block; color: var(--ink-dim); font-size: .46em; letter-spacing: .02em; margin-top: .12em; }

/* Trust chips. Every one of these is contract-enforced, so every one gets the
   teal rule. They read as data cells, not as decoration. */
.chips { gap: 8px; }
.chips li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 13px; border: 1px solid var(--line); border-left: 2px solid var(--teal);
  border-radius: 3px 11px 11px 3px; background: var(--bg-3);
  font-size: 13.5px; line-height: 1.3; color: var(--ink);
}
.chips li b {
  font-family: "JetBrains Mono", monospace; font-weight: 700;
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--teal); margin: 0;
}
.chips li a { color: var(--ink); text-decoration-color: var(--teal-line); }
.chips li a:hover { color: var(--teal); }

/* The unvetted warning is a risk, so it is --warn and it is not a footnote. */
.strip-warn {
  margin: 12px 0 0; padding: 9px 0 9px 14px;
  border-left: 2px solid var(--warn);
  color: var(--ink-dim); font-size: 13px; line-height: 1.5; max-width: 96ch;
}

/* --- live status pill ----------------------------------------------------- */
.net {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line-2); background: var(--bg-2);
  border-radius: 999px; padding: 5px 12px 5px 11px; white-space: nowrap;
}
.net::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--teal); box-shadow: 0 0 0 3px rgba(46,232,221,.18);
  animation: livedot 2.6s ease-in-out infinite;
}
.net b { color: var(--ink); font-weight: 400; }
@keyframes livedot { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* --- board head ---------------------------------------------------------- */
.board-head { padding: 26px 0 0; align-items: center; gap: 12px 16px; }
.board-head h1 { font-size: clamp(26px, 4vw, 34px); position: relative; padding-left: 14px; }
.board-head h1::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px;
  background: var(--teal); border-radius: 2px;
}
.boardmeta { margin: 10px 0 16px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .02em; color: var(--ink-faint); }

/* --- the board -----------------------------------------------------------
   The list is not a panel. Each launch is its own tile, so one launch on the
   board reads as one deliberate card rather than as a broken table. */
.panel.list {
  background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.list .row {
  position: relative; overflow: hidden;
  grid-template-columns: 54px minmax(0,1fr) auto auto;
  gap: 12px 18px; align-items: center;
  border: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: 14px; background: var(--bg-2);
  padding: 18px 20px 18px 16px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.list .row::before {
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(60% 200% at 100% 50%, #000, transparent 70%);
          mask-image: radial-gradient(60% 200% at 100% 50%, #000, transparent 70%);
  opacity: .35;
}
.list .row > * { position: relative; }
.list .row:hover {
  background: var(--bg-3); border-color: var(--teal-line); transform: translateY(-1px);
}
.list .row:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.list .rank {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--bg-3);
  font-size: 13px; font-weight: 700; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; transition: border-color .18s ease, color .18s ease;
}
.list .row:hover .rank { border-color: var(--teal-line); color: var(--ink); }

.list .rid-top { gap: 10px; align-items: baseline; }
.list .sym {
  font-size: clamp(22px, 3.4vw, 28px); line-height: 1; letter-spacing: -.025em; color: var(--ink);
}
.list .nm { font-size: 14px; }
.list .rid-ca { margin-top: 5px; }
.list .rid-ca code { font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }

/* Market cap is a neutral number. It is --data, never teal. */
.list .mcw { gap: 3px; }
.list .mc {
  font-family: "JetBrains Mono", monospace; font-weight: 700;
  font-size: clamp(19px, 2.6vw, 24px); line-height: 1; color: var(--data);
  font-variant-numeric: tabular-nums;
}
.list .mcl { font-size: 9px; letter-spacing: .16em; }

/* --- tags. Weight, and colour that means something. ---------------------- */
.tags { gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  border-radius: 7px; padding: 5px 9px;
  background: var(--bg-3); border-color: var(--line-2); color: var(--ink-dim);
}
.tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 1px; flex: 0 0 auto;
  background: currentColor; opacity: .55;
}
.tag.ok {
  color: var(--teal); border-color: var(--teal-line); background: var(--teal-soft);
}
.tag.ok::before { opacity: 1; box-shadow: 0 0 0 2px rgba(46,232,221,.15); }
.tag.warn {
  color: #1a0904; background: var(--warn); border-color: var(--warn);
}
.tag.warn::before { background: #1a0904; opacity: .8; }
.tag.flat {
  color: var(--ink-faint); background: none; border-style: dashed; border-color: var(--line-2);
}
.tag.flat::before { opacity: .4; }

/* --- the sparse board ----------------------------------------------------
   One launch must not look like a failure. The open slot closes the stack and
   gives the single row something to sit against. */
.slot {
  display: flex; align-items: center; gap: 16px;
  border: 1px dashed var(--line-2); border-radius: 14px;
  padding: 16px 20px 16px 16px; text-decoration: none; color: var(--ink-faint);
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px);
  transition: border-color .18s ease, color .18s ease;
}
.slot:hover { border-color: var(--teal-line); color: var(--ink-dim); }
.slot .slot-n {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 10px; border: 1px dashed var(--line-2);
  font-family: "JetBrains Mono", monospace; font-size: 17px; line-height: 1;
}
.slot .slot-t { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.slot .slot-go {
  margin-left: auto; font-family: "JetBrains Mono", monospace; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
}
.empty {
  border: 1px dashed var(--line-2); border-radius: 14px; background: var(--bg-2);
  padding: 30px 22px; text-align: center; font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: .02em; line-height: 1.7; color: var(--ink-faint);
}

/* --- the two tiles under the board. They are not the same thing, so they
   should not look the same. Launch is the action, Proof is the evidence. --- */
.tiles { margin-top: 34px; }
.tiles .card { padding: 26px 24px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.tiles .card:hover { transform: translateY(-2px); }
.tiles .card .k { font-size: 24px; }
.tiles .card:first-child {
  border-color: var(--teal-line);
  background: radial-gradient(90% 130% at 0% 0%, var(--teal-soft), transparent 58%), var(--bg-2);
}
.tiles .card:first-child:hover { box-shadow: 0 0 0 5px rgba(46,232,221,.06), 0 24px 60px -30px rgba(0,0,0,.9); }
.tiles .card:first-child .go {
  background: var(--teal); color: #04211f; border-color: var(--teal);
  box-shadow: 0 6px 20px -6px rgba(46,232,221,.55);
}
.tiles .card:last-child {
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--bg-2);
}
.tiles .card:last-child .go { color: var(--ink-dim); border-color: var(--line-2); }
.tiles .card:last-child:hover { border-color: var(--line-2); }
.card .k .go { font-weight: 700; padding: 4px 11px; border-radius: 7px; }

/* --- stage heroes on /launch, /proof, /agents ---------------------------- */
.stage { position: relative; padding: 44px 0 30px; }
.stage .wrap { z-index: 1; }
.eyebrow {
  display: inline-block; font-size: 10.5px; letter-spacing: .18em;
  border: 1px solid var(--line-2); background: var(--bg-2);
  border-radius: 999px; padding: 5px 12px; color: var(--ink-dim);
}
.stage h1 { font-size: clamp(34px, 7vw, 64px); line-height: .98; margin-top: 18px; max-width: 18ch; }
.stage h1 .g { color: var(--teal); }
.stage .lede { font-size: 17px; max-width: 62ch; }

/* --- section heads ------------------------------------------------------- */
.sec-head { gap: 12px; margin-bottom: 22px; align-items: center; }
.sec-head .idx {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; border-radius: 7px; font-size: 11.5px; letter-spacing: .06em;
  border: 1px solid var(--teal-line); background: var(--teal-soft); color: var(--teal);
}
.sec-head h2 { font-size: clamp(22px, 3.6vw, 30px); }

/* --- panels and fact rows ------------------------------------------------ */
.panel { background: var(--bg-2); }
.fact { transition: background .16s ease; border-radius: 8px; }
.panel .fact:hover { background: rgba(255,255,255,.015); }
.fact dt { color: var(--ink-faint); }
.fact dd .mono, .fact dd a.mono { color: var(--data); }
.warnv { color: var(--warn); font-weight: 600; }

/* --- terminal treatment for the runnable commands ------------------------ */
.code {
  padding: 0; border-radius: 14px; border: 1px solid var(--line-2);
  background: #05080a;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.9);
}
.code::before {
  content: ""; display: block; height: 34px; border-bottom: 1px solid var(--line);
  border-radius: 13px 13px 0 0; background-color: var(--bg-2);
  background-image:
    radial-gradient(circle 4px at 18px 17px, var(--line-2) 97%, transparent 100%),
    radial-gradient(circle 4px at 34px 17px, var(--line-2) 97%, transparent 100%),
    radial-gradient(circle 4px at 50px 17px, var(--teal-line) 97%, transparent 100%);
  background-repeat: no-repeat;
}
.code code {
  padding: 16px 20px 18px; font-size: 12.5px; line-height: 1.75; color: var(--ink-dim);
}
.note code, .plain code, .fact code { color: var(--data); }

/* --- the "what none of this protects you from" box ----------------------- */
.redbox { border-left: 3px solid var(--warn); border-radius: 4px 16px 16px 4px; padding: 20px 22px; }
.redbox p { margin: 0 0 12px; }
.redbox p:last-child { margin-bottom: 0; }

/* --- buttons: mono pills, one filled teal primary ------------------------ */
.btn { border-radius: 999px; letter-spacing: .04em; transition: background .16s ease, border-color .16s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-teal { box-shadow: 0 6px 20px -6px rgba(46,232,221,.55); }
.btn-teal::after { content: "\2192"; font-weight: 400; }
.btn-ghost:hover { color: #fff; }

/* --- launch form --------------------------------------------------------- */
.curve { transition: border-color .16s ease, background .16s ease; }
.curve:hover { border-color: var(--line-2); }
.curve:has(input:checked) {
  background: radial-gradient(90% 140% at 0% 0%, var(--teal-soft), transparent 60%), var(--bg-3);
  box-shadow: 0 0 0 4px rgba(46,232,221,.06);
}
.curve-sweep { font-weight: 700; letter-spacing: .02em; }
.flabel { display: block; margin-bottom: 4px; }
.preview { border-radius: 14px; }
.preview .v { color: var(--data); }
.preview .row:first-child .v { color: var(--teal); }
.status.ok { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.status.warn { font-family: "JetBrains Mono", monospace; font-size: 13px; }

/* --- per-token page ------------------------------------------------------ */
.tk-head { position: relative; padding: 30px 0 24px; }
.tk-sym { font-size: clamp(34px, 7vw, 56px); }
.tk-mc .v { font-size: 26px; color: var(--data); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-mc .t { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.tk-ca .t { color: var(--ink-faint); }
.tk-ca a { color: var(--data); }
.tform select, .tform input { border-radius: 999px; }
.quote { color: var(--data); }

/* --- motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .list .row:hover, .tiles .card:hover, .btn:active { transform: none; }
}

/* --- narrow ------------------------------------------------------------- */
@media (max-width: 700px) {
  .hero { gap: 14px; }
  .dogtile img { width: 66px; height: 66px; border-radius: 16px; }
  .chips li { flex: 1 1 100%; }
  .board-head { padding-top: 20px; }
}
@media (max-width: 780px) {
  .list .row { grid-template-columns: 38px minmax(0,1fr) auto; padding: 16px; }
  .list .row .tags { grid-column: 1 / -1; }
  .list .rank { width: 32px; height: 32px; }
}
@media (max-width: 440px) {
  .list .row { grid-template-columns: minmax(0,1fr) auto; row-gap: 12px; }
  .list .rank { grid-column: 1 / -1; width: auto; height: 28px; justify-content: flex-start; padding: 0 10px; align-self: start; }
  .list .mcw { align-items: flex-start; }
  .protobar { font-size: 11px; }
  .slot { gap: 12px; padding: 14px; }
  .code code { padding: 14px; }
}
.slot { margin-top: 10px; }
.panel.list + .slot + .note { margin-top: 18px; }

/* Identity column must not be crushed by the tag column. */
.list .row { grid-template-columns: 54px minmax(190px,1fr) minmax(0,auto) auto; }
.list .sym { white-space: nowrap; }
.list .rid-ca code { white-space: nowrap; }
.list .tags { justify-content: flex-end; }
@media (max-width: 980px) {
  .list .row { grid-template-columns: 54px minmax(0,1fr) auto; }
  .list .row .tags { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 780px) {
  .list .row { grid-template-columns: 38px minmax(0,1fr) auto; padding: 16px; }
  .list .rank { width: 32px; height: 32px; }
}
@media (max-width: 440px) {
  .list .row { grid-template-columns: minmax(0,1fr) auto; row-gap: 12px; }
  .list .rank { grid-column: 1 / -1; width: auto; height: 28px; justify-content: flex-start; padding: 0 10px; align-self: start; }
  .list .mcw { align-items: flex-start; }
}

/* The dog gets to be an object on every hero, not a favicon. */
.stage .wrap { position: relative; }
.stage-dog { position: absolute; right: 0; top: 4px; }
.stage-dog img { width: 96px; height: 96px; }
@media (max-width: 860px) { .stage-dog { display: none; } }

/* Feature cards on /launch: a teal rule marks a contract-enforced promise. */
.grid .card { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.grid .card::before { background: var(--teal); opacity: .55; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--teal); opacity: 0; transition: opacity .18s ease; }
.grid .card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 24px 60px -34px rgba(0,0,0,.9); }
.grid .card .k { color: var(--ink); }

/* Token page head carries the same band treatment as a hero. */
.tk-head { overflow: hidden; }
.tk-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .4;
  -webkit-mask-image: radial-gradient(60% 100% at 10% 0%, #000, transparent 72%);
          mask-image: radial-gradient(60% 100% at 10% 0%, #000, transparent 72%);
}
.tk-head > * { position: relative; }

/* An unavailable option is not an enforced fact: it must not read as teal. */
.curve:has(input:disabled) { opacity: .72; }
.curve:has(input:disabled) .curve-sweep { color: var(--ink-faint); }
/* Opening market cap is a neutral number; the fee share is contract-enforced. */
.preview .row:first-child .v { color: var(--data); }
.preview .row:last-child .v { color: var(--teal); }
@media (max-width: 440px) {
  .list .rank { justify-self: start; width: fit-content; min-width: 42px; }
  .list .row { padding: 14px; row-gap: 10px; }
}

/* Bullets are decoration, so they are grey. Only the list of things the
   contracts actually enforce earns the teal marker. */
.plain li::before { background: var(--line-2); }
#rules li::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(46,232,221,.12); }

/* ============================================================
   BOARD AS A CARD GRID  (supersedes the earlier list styling)
   ============================================================ */
#list.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 16px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.tcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);
}
.tcard:hover {
  border-color: var(--teal-line);
  background: var(--bg-3);
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(46,232,221,.06), 0 22px 44px -26px rgba(0,0,0,.9);
}

.tcard-head { display: flex; align-items: flex-start; justify-content: space-between; }
.av {
  width: 46px; height: 46px; border-radius: 12px; display: block; padding: 7px;
  background: hsl(var(--av-hue) 44% 13%);
  border: 1px solid hsl(var(--av-hue) 40% 26%);
}
.av svg { display: block; width: 100%; height: 100%; fill: hsl(var(--av-hue) 72% 64%); shape-rendering: crispEdges; }
.tcard-rank {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em;
  color: var(--ink-faint); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 8px;
}

.tcard-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tcard-sym {
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 27px; line-height: 1;
  letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcard-nm { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tcard-mc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tcard-mc .mc {
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 23px; line-height: 1;
  color: var(--data); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tcard-mc .mcl {
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}

.tcard .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.tcard .tag { font-size: 10px; padding: 3px 8px; }

.tcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.tcard-curve {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.tcard-foot code { font-size: 10.5px; color: var(--ink-faint); }

/* The open slot: a designed absence, so one launch does not read as a broken page. */
.tcard.slot {
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: none; border-style: dashed; border-color: var(--line-2); min-height: 196px;
}
.tcard.slot::before { display: none; }
.tcard.slot:hover { border-color: var(--teal-line); background: rgba(46,232,221,.03); transform: none; box-shadow: none; }
.slot-plus { font-size: 24px; line-height: 1; color: var(--ink-faint); }
.slot-t { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.slot-s { font-size: 12px; color: var(--teal); }

.unvetted {
  margin: 0 0 16px; font-size: 12.5px; line-height: 1.45; color: var(--ink-dim);
  border-left: 2px solid var(--warn); padding-left: 11px; max-width: 96ch;
}
.heroclaim { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-dim); max-width: 62ch; }
.heroclaim a { color: var(--teal); }
.hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard:hover { transition: none; transform: none; }
}
@media (max-width: 460px) {
  #list.list { grid-template-columns: 1fr; }
}

/* Tags sit on one line where they can; the card is the unit, not the row. */
.tcard .tags { gap: 5px 5px; }
.tcard .tag { white-space: nowrap; }

/* Hero claim: one statement per line, no wrapping at desktop width. */
.heroclaim { margin: 0; max-width: none; }
.heroclaim p { margin: 0 0 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); white-space: nowrap; }
.heroclaim p:last-child { margin-bottom: 0; }
.heroclaim a { color: var(--teal); }
@media (max-width: 1100px) { .heroclaim p { white-space: normal; } }

/* MDOG identity bar: the token this pad was built by, and the two things anyone asks for. */
.mdogbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mb-l {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal);
  border: 1px solid var(--teal-line); background: var(--teal-soft); border-radius: 999px; padding: 4px 9px;
}
.mb-ca {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--ink-dim);
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 9px;
  overflow-wrap: anywhere;
}
.mb-btn {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); background: none; border: 1px solid var(--line-2); border-radius: 7px;
  padding: 5px 10px; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.mb-btn:hover { color: var(--ink); border-color: var(--teal-line); }
.mb-go { color: var(--teal); }

/* The testnet bar is an invitation now, not only a warning. */
.protobar a { color: var(--teal); }

/* One line, centred, never justified across the full width. */
.protobar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; text-align: center; text-wrap: balance;
}
.protobar b { flex: none; }

/* ============================================================
   SITE-WIDE FURNITURE
   /launch, /proof, /token, /agents and /share are built from the
   same parts as the board: the masthead, the testnet bar, the
   .strip hero with the dog tile and the wordmark, then a page
   head with the teal rule. Nothing below introduces a second
   visual language, it only makes the rest of the site use the
   one the board already has.
   ============================================================ */

/* The subpage hero is the board hero. The claim lines are shorter there, so
   they may wrap at any width rather than holding one line to 1100px. */
.strip .heroclaim.claim-wrap p { white-space: normal; }
.strip .wrap { padding-top: 20px; padding-bottom: 16px; }

/* Page head. Same rule, same type, same rhythm as the board head. */
.page-head { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 26px 0 0; }
.page-head h1 {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; margin: 0;
  position: relative; padding-left: 14px;
}
.page-head h1::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px;
  background: var(--teal); border-radius: 2px;
}
.page-head .net { margin-left: 0; }
.pagelede { margin: 12px 0 0; color: var(--ink-dim); font-size: 16px; line-height: 1.55; max-width: 70ch; }
.pagelede b { color: var(--ink); font-weight: 600; }
.pagelede a { color: var(--teal); }
.page-top { padding: 0 0 4px; }

/* ---- runnable commands -------------------------------------------------
   These blocks are the point of /proof, so a long line must be readable and
   selectable in full. The block scrolls sideways on its own and the page
   never does. The header bar is sticky so it stays put while the command
   scrolls under it, and it carries the words that say scrolling is possible,
   because an overlay scrollbar is invisible until it is touched. The command
   text itself is never wrapped: a wrapped command is a misread command. */
.code {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* No scrollbar-width here on purpose: setting the standard property makes
     Chrome ignore the ::-webkit-scrollbar rules below and fall back to an
     overlay scrollbar, which is invisible until it is touched. These blocks
     have to show that they scroll. */
}
.code::before {
  content: "scrolls sideways";
  position: sticky; left: 0; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end;
  height: 34px; padding: 0 14px 0 66px;
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.code code {
  display: block;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
}
.code::-webkit-scrollbar { height: 11px; }
.code::-webkit-scrollbar-track { background: var(--bg-3); border-radius: 0 0 13px 13px; }
.code::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--bg-3); border-radius: 999px; }
.code:hover::-webkit-scrollbar-thumb { background: var(--teal-line); }

/* ---- long hex, one deliberate rule -------------------------------------
   An address is 42 characters and will not fit a 400px line. Where it is a
   thing to copy it wraps at any character, so the whole of it is readable.
   Where it sits in a row with a label it is allowed to wrap the same way,
   never to overflow and never to be clipped. Numbers never wrap. */
.mb-ca, .tk-ca a, .fact dd a.mono, .fact dd code, .addr code { overflow-wrap: anywhere; word-break: normal; }
/* base.css breaks every code span at any character. That is right for a 42
   character address in a narrow cell and wrong for a URL in a sentence, which
   should move to its own line first and only then break. */
code { word-break: normal; overflow-wrap: anywhere; }
.mdogbar > * { min-width: 0; }
.tcard-mc .mc, .tk-mc .v, .preview .v, .stat .v, .boardmeta b { white-space: nowrap; }
.tk-mc, .preview .row { flex-wrap: wrap; }

/* ---- the share page ----------------------------------------------------- */
.postlist { display: flex; flex-direction: column; gap: 14px; }
.post {
  display: flex; flex-direction: column; gap: 13px;
  border: 1px solid var(--line-2); background: var(--bg-3);
  border-radius: 14px; padding: 16px 18px;
}
.post p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.post-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.post-foot .lbl {
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: auto;
}
.copyrow { margin-top: 14px; }
.linkrow { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.linkrow a {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--bg-2); border-radius: 12px;
  padding: 13px 16px; text-decoration: none;
}
.linkrow a:hover { border-color: var(--teal-line); background: var(--bg-3); }
.linkrow .lk {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); flex: 0 0 auto;
}
.linkrow .lv { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--ink-dim); overflow-wrap: anywhere; min-width: 0; }

/* ---- narrow --------------------------------------------------------- */
@media (max-width: 700px) {
  .page-head { padding-top: 20px; }
  .strip .heroclaim p { white-space: normal; }
}
@media (max-width: 440px) {
  .post { padding: 14px; }
  .linkrow a { padding: 12px 14px; }
  .code::before { padding-left: 62px; }
}

/* The masthead carries five links, a network select and the wallet button. It has to
   hold one line at 1400 wide, so the pills are tightened rather than allowed to wrap
   the button onto a row of its own. Below 760 it wraps deliberately instead. */
.top .wrap { gap: 8px 12px; }
.top nav { gap: 2px; }
.top nav a { padding: 7px 9px; letter-spacing: .07em; }
.top select { font-size: 11.5px; padding: 7px 9px; }
.top .btn { padding: 8px 13px; }
@media (max-width: 760px) {
  .top nav { margin-right: 0; }
  .top .home { margin-right: auto; }
}

/* ---- the contact form --------------------------------------------------- */
textarea {
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 12px; padding: 12px 13px; width: 100%;
  font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.55;
  resize: vertical; min-height: 120px;
}
textarea:focus { outline: 2px solid var(--teal-line); outline-offset: 1px; }
#contact .field:first-child { margin-top: 0; }
#contact label[for] { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
#contact select { width: 100%; max-width: 340px; }
#contact .btn { margin-top: 20px; }
#contact button[disabled] { opacity: .6; cursor: progress; }
/* The honeypot. It is hidden from people and from screen readers, and the form
   service uses it to spot anything that fills every field it can find. */
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#cstatus { max-width: 70ch; line-height: 1.5; }

/* ============================================================
   MOBILE NAV
   One network exists, so the selector is gone. Six links do not
   belong in a row on a phone, so they collapse behind a button.
   ============================================================ */
.navtoggle { display: none; }

@media (max-width: 860px) {
  .navtoggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 34px; padding: 0 9px; margin-left: auto;
    background: none; border: 1px solid var(--line-2); border-radius: 9px; cursor: pointer;
  }
  .navtoggle span { display: block; height: 1.5px; background: var(--ink-dim); border-radius: 2px; }
  .navtoggle[aria-expanded="true"] { border-color: var(--teal-line); }
  .navtoggle[aria-expanded="true"] span { background: var(--teal); }

  .top nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .top nav.open { display: flex; }
  .top nav a { padding: 10px 12px; border-radius: 9px; }
  .top nav a.on { background: var(--teal-soft); }
}

/* ============================================================
   NAV AT THE FOOT
   The masthead is now just identity and the wallet. People came
   for the board, so it starts immediately; navigation waits at
   the bottom for anyone who wants it.
   ============================================================ */
.top nav { display: none; }
.navtoggle { display: none !important; }
.top .wrap { justify-content: space-between; }

.footnav {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px;
}
.footnav a {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px;
}
.footnav a:hover { color: var(--ink); border-color: var(--teal-line); }

@media (max-width: 600px) {
  .footnav a { font-size: 10.5px; padding: 6px 10px; }
}