/* THE BOARD, what you kept, and what happened.
   The deck decides; this is where you live with them. Two surfaces:
     BOARD     the things, images first, words out of the way
     HAPPENED  the evidence. dated on both sides, and it counts NOTHING. */
#view-board *{box-sizing:border-box;margin:0;padding:0}
html.v-board, body.v-board{overflow-x:clip;max-width:100%}
body.v-board{background:var(--void);
  color:var(--txt1);font-family:"JetBrains Mono",ui-monospace,monospace;padding:22px 20px 80px;
  line-height:1.5}
/* the glow, pinned to the viewport so it never stretches and bands */
body.v-board::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 70% at 50% -8%,var(--s3) 0%,rgba(27,27,36,0) 62%)}
#view-board .wrap{max-width:1120px;margin:0 auto}
#view-board header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
#view-board h1{font-family:Fraunces,Georgia,serif;font-size:24px;font-weight:600;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
#view-board .tabs{display:flex;gap:4px;margin-left:auto}
#view-board .tabs button{font-family:inherit;font-size:11px;letter-spacing:.08em;padding:8px 15px;
  border-radius:100px;background:transparent;border:1px solid var(--edge);color:var(--dim);
  cursor:pointer;transition:.14s}
#view-board .tabs button.on{background:var(--txt1);border-color:var(--txt1);color:var(--s1);font-weight:700}
#view-board .gear{font-family:inherit;font-size:15px;line-height:1;padding:7px 11px;border-radius:100px;
  background:transparent;border:1px solid var(--edge);color:var(--dim);cursor:pointer;transition:.14s}
#view-board .gear:hover{border-color:var(--txt1);color:var(--txt1)}
#view-board .gear{font-family:inherit;font-size:15px;line-height:1;padding:6px 11px;
  border-radius:100px;background:transparent;border:1px solid var(--edge);
  color:var(--dim);cursor:pointer;transition:.14s}
#view-board .gear:hover{border-color:var(--txt1);color:var(--txt1)}
#view-board .deckbtn{font-family:inherit;font-size:11px;letter-spacing:.06em;padding:8px 16px;
  border-radius:100px;background:var(--lime);border:0;color:var(--on-accent);cursor:pointer;font-weight:700}

/* ── the board: pictures first ─────────────────────────────────────────── */
/* one quiet row that scrolls itself. Wrapping turned ten categories into three
   stacked rows of pills above the actual board. */
#view-board .cats{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;max-width:100%}
#view-board .cats::-webkit-scrollbar{display:none}
#view-board .cats .chip{flex:0 0 auto}
/* ⭐ The other way into the questions. The deck's ending is the better moment,
   because attention is already there and there is nothing else to spend it on.
   But somebody looking at a thin board and wondering why is having exactly the
   right thought, and this is where they are having it. */
#view-board .knows{display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-size:10.5px;color:var(--dim);flex-wrap:wrap}
#view-board .knows .track{flex:0 0 120px;height:3px;border-radius:2px;background:var(--s3);overflow:hidden}
#view-board .knows .fill{height:100%;background:var(--lime);border-radius:2px;transition:width .5s}
#view-board .knows button{font-family:inherit;font-size:10.5px;padding:6px 13px;border-radius:100px;
  background:transparent;border:1px dashed var(--edge);color:var(--dim);cursor:pointer;
  transition:.14s}
#view-board .knows button:hover{border-style:solid;border-color:var(--lime-txt);color:var(--lime-txt)}
#view-board .chip{font-family:inherit;font-size:10px;padding:5px 11px;border-radius:100px;
  background:transparent;border:1px solid var(--edge);border-left:3px solid var(--cc);
  color:var(--dim);cursor:pointer;transition:.14s}
#view-board .chip.on{background:var(--cc);border-color:var(--cc);color:var(--on-accent);font-weight:700}
#view-board .grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
#view-board .it{position:relative;border-radius:var(--r);overflow:hidden;background:var(--s2);
  border:1px solid var(--edge);cursor:pointer;transition:transform .16s,box-shadow .16s}
#view-board .it:hover{transform:translateY(-2px);box-shadow:0 18px 36px -20px #000}
#view-board .it img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block;background:var(--s3)}
#view-board .it .noimg{width:100%;aspect-ratio:5/4;background:repeating-linear-gradient(135deg,var(--s2) 0 9px,var(--s2) 9px 18px)}
#view-board .it .cap{padding:10px 12px 12px}
#view-board .it .cat{font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cc)}
#view-board .it .t{font-family:Fraunces,Georgia,serif;font-size:13.5px;line-height:1.25;margin-top:4px;
  color:var(--txt1);font-variation-settings:"SOFT" 30,"WONK" 1;text-wrap:balance}
#view-board .it .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(8,8,11,.55)}
#view-board .d-warm{background:var(--lime)} #view-board .d-tight{background:var(--amber)}
#view-board .d-boring{background:var(--sky)} #view-board .d-flat{background:var(--dim3)}
#view-board .it.landed{outline:1.5px solid var(--lime);outline-offset:-1.5px}
#view-board .it.landed .cap{background:linear-gradient(180deg,transparent,rgba(202,240,0,.08))}

/* ── happened: the evidence, and it totals nothing ─────────────────────── */
#view-board .ev{display:flex;flex-direction:column;gap:11px;max-width:760px}
#view-board .row{display:flex;gap:14px;align-items:center;background:var(--s1);border:1px solid var(--edge);
  border-radius:14px;padding:11px 14px}
#view-board .row img{width:78px;height:60px;object-fit:cover;border-radius:9px;flex:none;background:var(--s3)}
#view-board .row .txt{min-width:0}
#view-board .row .t{font-family:Fraunces,Georgia,serif;font-size:14.5px;line-height:1.25;color:var(--txt1);
  font-variation-settings:"SOFT" 30,"WONK" 1}
#view-board .row .dates{font-size:9.5px;color:var(--dim);margin-top:5px;letter-spacing:.04em}
#view-board .row .gap{margin-left:auto;text-align:right;flex:none}
#view-board .row .gap b{display:block;font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:500;
  color:var(--lime-txt)}
#view-board .row .gap span{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#view-board .empty{color:var(--dim);font-size:12px;line-height:1.75;max-width:56ch;padding:26px 0}

/* ── the re-read sheet ─────────────────────────────────────────────────── */
#view-board #sh{position:fixed;inset:0;background:rgba(8,8,11,.62);z-index:30;display:none;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
#view-board #sh.on{display:flex}
#view-board .panel{width:100%;max-width:520px;background:var(--s1);border:1px solid var(--edge);
  border-radius:20px 20px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  animation:up 300ms cubic-bezier(.16,.84,.28,1) both}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
#view-board .panel h3{font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:500;line-height:1.25;
  font-variation-settings:"SOFT" 30,"WONK" 1;margin-bottom:4px}
#view-board .panel .why{font-size:11px;color:var(--dim);line-height:1.6;margin-bottom:16px}
#view-board .lab{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:9px;margin:14px 0 8px}
#view-board .lab i{flex:1;height:1px;background:var(--edge)}
#view-board .opts{display:flex;flex-direction:column;gap:6px}
#view-board .opts button{text-align:left;font-family:inherit;padding:10px 13px;border-radius:11px;
  background:var(--s2);border:1px solid var(--edge);border-left:3px solid var(--tone,var(--edge));
  color:var(--txt2);cursor:pointer;transition:.14s}
#view-board .opts button:hover{border-color:var(--tone);background:var(--s2);color:var(--txt1)}
#view-board .opts b{display:block;font-size:11.5px;font-weight:400}
#view-board .opts span{display:block;font-size:9.5px;color:var(--dim);margin-top:3px}
#view-board .opts span::before{content:"→ ";color:var(--tone);opacity:.85}
#view-board .t-still{--tone:var(--lime)} #view-board .t-normal{--tone:var(--sky)}
#view-board .t-far{--tone:var(--amber)} #view-board .t-gone{--tone:var(--dim3)}
#view-board .closebtn{margin-top:14px;width:100%;font-family:inherit;font-size:11px;padding:10px;
  border-radius:11px;background:transparent;border:1px solid var(--edge);color:var(--dim);cursor:pointer}
/* the standing invitation. Fixed, so it is reachable from anywhere on the page,
   and it carries the NUMBER because "5 waiting" is an actual reason to tap and
   "today's cards" is a label. */
#view-board .tonight{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:25;display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--lime);color:var(--on-accent);font-family:"JetBrains Mono",monospace;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:13px 22px;
  border-radius:100px;box-shadow:0 14px 40px -12px rgba(202,240,0,.45),
  0 0 0 1px rgba(202,240,0,.5);transition:.16s}
#view-board .tonight:hover{background:var(--lime-hi);transform:translateX(-50%) translateY(-2px);
  box-shadow:0 20px 48px -12px rgba(202,240,0,.55),0 0 0 1px rgba(202,240,0,.6)}
#view-board .tn-count{background:var(--on-accent);color:var(--lime-txt);border-radius:100px;
  padding:3px 9px;font-size:11px;font-variant-numeric:tabular-nums}
#view-board .tn-arrow{opacity:.75}
/* with no cards waiting it is an offer rather than a summons */
#view-board .tonight.quiet{background:transparent;color:var(--txt2);border:1px solid var(--edge2);
  box-shadow:none;font-weight:400}
#view-board .tonight.quiet:hover{background:var(--s3);border-color:var(--lime-txt);color:var(--txt1);
  box-shadow:none;transform:translateX(-50%) translateY(-2px)}
/* the header keeps its own link on a desk, where nothing scrolls out of reach */
@media (max-width: 640px){  }
@media (min-width: 641px){ #view-board .tonight{bottom:26px} }
#view-board .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--txt1);color:var(--s1);font-size:11.5px;padding:10px 18px;border-radius:100px;
  opacity:0;transition:.22s;pointer-events:none;z-index:50}
#view-board .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* the toast must clear the standing button rather than land under it */
body.v-board:has(.tonight:not([style*="none"])) .toast{bottom:88px}

/* ═══ THE HEADER BAR — one definition, pasted into each page's own stylesheet.
   ⛔ It lived in style.css, which only the auth page loads: deck, board and
   settings each carry their own inline <style>, so every pill rendered as a raw
   browser button. A shared component has to live somewhere every consumer of it
   actually reads. ══════════════════════════════════════════════════════════ */











@media (max-width: 640px) {
  body.v-board{padding:16px 13px calc(50px + env(safe-area-inset-bottom))}
  #view-board header{gap:10px;margin-bottom:14px;flex-wrap:wrap}
  #view-board h1{font-size:19px;flex:none}
  /* ⛔ Two different kinds of control were sharing a row: tabs that change what
     you are looking at, and links that take you elsewhere. On a phone that reads
     as four equal options. The destinations go top right with the title; the
     tabs get their own line underneath. */
  
  
  
  
  
  
  #view-board .cats{gap:5px;margin-bottom:12px}
  #view-board .chip{font-size:9.5px;padding:5px 9px}
  #view-board .knows{font-size:9.5px;gap:8px;margin-bottom:16px}
  #view-board .knows .track{flex:1 1 50px;min-width:40px}
  #view-board .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #view-board .it .t{font-size:12px}
  #view-board .it .cap{padding:8px 10px 10px}
  #view-board .ev{gap:9px}
  #view-board .row{padding:9px 11px;gap:10px}
  #view-board .row img{width:58px;height:46px}
  #view-board .row .t{font-size:12.5px}
  #view-board .panel{padding:18px 16px calc(20px + env(safe-area-inset-bottom))}
}



#view-board .taphint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;padding:9px 13px;border-radius:11px;
  border:1px solid var(--edge2,var(--edge2));background:rgba(201,242,74,.05);
  font:400 11.5px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--txt3)}
#view-board .taphint button{margin-left:auto;background:transparent;border:1px solid var(--lime-edge);
  color:var(--lime-txt);border-radius:100px;padding:4px 12px;cursor:pointer;
  font:400 10px/1 "JetBrains Mono",monospace}

#view-board .cmt{margin:0 0 4px}
#view-board .cmt textarea{width:100%;min-height:74px;resize:vertical;border-radius:11px;
  padding:10px 12px;background:rgba(255,255,255,.03);color:var(--txt1);
  border:1px solid var(--edge2,var(--edge2));
  font:400 14px/1.5 "JetBrains Mono",ui-monospace,monospace}
#view-board .cmt textarea:focus{outline:none;border-color:var(--lime-txt)}
#view-board .cwhy{font:400 10.5px/1.5 "JetBrains Mono",monospace;color:var(--dim1);margin:7px 2px 9px}
#view-board .csave{width:100%;padding:10px;border-radius:11px;cursor:pointer;
  background:var(--lime);border:1px solid var(--lime);color:var(--on-accent);
  font:400 12px/1 "JetBrains Mono",monospace}
#view-board .csave:disabled{opacity:.6;cursor:default}

#view-board .row{cursor:pointer}
#view-board .dnote{font:400 11.5px/1.45 "JetBrains Mono",ui-monospace,monospace;color:var(--txt3);
  margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
#view-board .dask{font:400 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--lime-txt);margin-top:6px;opacity:.85}



@media (max-width:720px){
  /* ⛔ THE BOTTOM NAV CARRIES ALL OF THIS. Two controls for one destination is
     what the bar was built to end, and the pills were sitting on top of the
     page title. */
  
  
  #view-board .pagename{display:none}

  /* content never runs under the bar, on any page */
  body.v-board{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important}
}

#view-board .catlab{font:400 9px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim2);align-self:center;margin-right:4px}
#view-board .chip.all{border-style:dashed}
#view-board .chip.all.on{background:var(--txt1);border-color:var(--txt1);color:var(--s0);
  border-style:solid;font-weight:700}

/* ── the card panel, quieter ─────────────────────────────────────────────── */
#view-board .sayline{display:block;width:100%;text-align:left;margin-top:14px;padding:11px 13px;
  border:1px dashed var(--edge2);border-radius:12px;background:transparent;
  color:var(--dim1);cursor:pointer;
  font:400 12px/1 "JetBrains Mono",ui-monospace,monospace}
#view-board .sayline:hover{border-color:var(--lime-txt);color:var(--txt1)}
#view-board .cmt.hide, #view-board .cardmenu.hide, #view-board .sayline.hide{display:none}
#view-board .cmt{margin-top:12px}
#view-board .csave{width:100%;margin-top:8px}
#view-board .cardmenu{margin-top:12px;display:flex;flex-direction:column;gap:6px}
#view-board .cardmenu button{width:100%;text-align:left;padding:11px 13px;border-radius:12px;
  border:1px solid var(--edge2);background:transparent;color:var(--txt2);cursor:pointer;
  font:400 12px/1 "JetBrains Mono",ui-monospace,monospace}
#view-board .cardmenu button:hover{border-color:var(--lime-txt);color:var(--txt1)}
#view-board .dots{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:100px;
  border:1px solid var(--edge2);background:transparent;color:var(--dim1);cursor:pointer;
  font-size:15px;line-height:1;z-index:2}
#view-board .dots:hover{color:var(--txt1);border-color:var(--edge3)}

/* ⭐ THE COMMENT IS FIRST AND IT LOOKS LIKE IT.
   Two of his notes read as opposites and are not: "there are 20 things going on"
   and "say something is hidden, it is THE thing we want". The answer is fewer
   controls AND the remaining one being unmissable. What got cut was three lines
   of persuasion; what came back is the prominence. A filled, lime-edged block at
   the top of the card, before the buttons. */
#view-board .say{background:rgba(201,242,74,.10);border:1px solid var(--lime-txt);
  border-radius:14px;padding:13px 14px;margin:14px 0 4px}
#view-board .saylab{font:400 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime-txt);margin-bottom:9px}
#view-board .say textarea{width:100%;background:var(--s0);color:var(--txt1);
  border:1px solid var(--edge2);border-radius:10px;padding:10px 11px;resize:vertical;
  font:400 14px/1.5 "JetBrains Mono",ui-monospace,monospace}
#view-board .say textarea:focus{outline:none;border-color:var(--lime-txt)}
#view-board .say .csave{width:100%;margin-top:8px;background:var(--lime);border-color:var(--lime);
  color:var(--on-accent);padding:10px;border-radius:10px;cursor:pointer;
  font:400 12px/1 "JetBrains Mono",monospace}

/* the ⋯ on a tile, and the two glyphs it opens over that tile's corner */
#view-board .it{position:relative}
#view-board .tiledots{position:absolute;top:7px;left:7px;z-index:3;width:26px;height:26px;
  border-radius:100px;border:1px solid rgba(255,255,255,.34);
  background:rgba(12,12,18,.42);color:#fff;cursor:pointer;font-size:14px;line-height:1;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .14s}
#view-board .it:hover .tiledots, #view-board .tiledots:focus{opacity:1}
@media (hover:none){#view-board .tiledots{opacity:.9}}
#view-board .tilemenu{position:absolute;top:38px;left:7px;z-index:4;display:flex;gap:6px;
  padding:6px;border-radius:12px;background:var(--s0);border:1px solid var(--edge2);
  box-shadow:0 16px 34px -22px rgba(0,0,0,.5)}
#view-board .tilemenu.hide{display:none}
#view-board .tilemenu button{width:34px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid var(--edge2);background:transparent;color:var(--txt2);
  display:grid;place-items:center;padding:0}
#view-board .tilemenu button:hover{border-color:var(--lime-txt);color:var(--lime-txt)}
#view-board .tilemenu svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Happened uses the board's own tile. The only additions are the elapsed days
   and a quieter frame, because it is a record rather than an offer. */
#view-board .it.done{opacity:.94}
#view-board .it.done .cat{color:var(--dim2)}
#view-board .gapdot{position:absolute;top:8px;right:8px;z-index:3;min-width:38px;padding:5px 8px;
  border-radius:10px;background:rgba(12,12,18,.55);color:#fff;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:700 15px/1 "Fraunces",Georgia,serif}
#view-board .gapdot i{display:block;font:400 8px/1.4 "JetBrains Mono",monospace;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase;opacity:.75}
#view-board .taphint{font-size:11.5px;padding:7px 11px;margin-bottom:12px}

/* proof it happened. A photograph you took is the difference between a record
   and a receipt, and it is the thing anybody would actually show someone. */
#view-board .proof{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;
  padding:12px 14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--edge2);background:transparent;color:var(--txt2);
  font:400 12px/1.3 "JetBrains Mono",ui-monospace,monospace;text-align:left}
#view-board .proof:hover{border-color:var(--lime-txt);color:var(--txt1)}
#view-board .proof svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── which board you are on ──────────────────────────────────────────────────
   ⛔ This was a pill per group, which put the entire membership list in the
   header permanently and stacked a second row of pills under it. You are only
   ever on ONE board: the header names it, and a tap opens the rest. */
#view-board .boards{position:relative;margin:0 0 12px}
#view-board .boards:empty{display:none}
#view-board .bpick{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:0;background:transparent;padding:0;color:var(--txt1);
  font:600 24px/1.15 Fraunces,Georgia,serif;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
#view-board .bpick:hover .bnm{border-bottom-color:var(--dim2)}
#view-board .bpick .bnm{border-bottom:1px solid var(--edge2);padding-bottom:2px}
/* an explicit chevron, because a name that opens something has to look like it */
#view-board .bpick .bcar{width:17px;height:17px;border-radius:100px;flex:0 0 auto;
  border:1px solid var(--edge2);position:relative;transition:border-color 140ms}
#view-board .bpick .bcar::after{content:"";position:absolute;left:50%;top:46%;
  width:5px;height:5px;border-right:1.4px solid var(--dim2);
  border-bottom:1.4px solid var(--dim2);
  transform:translate(-50%,-50%) rotate(45deg)}
#view-board .bpick[aria-expanded="true"] .bcar{border-color:var(--dim2)}
#view-board .bpick[aria-expanded="true"] .bcar::after{
  transform:translate(-50%,-30%) rotate(225deg)}
#view-board .bmenu{position:absolute;top:calc(100% + 7px);left:0;z-index:30;
  min-width:212px;padding:5px;border-radius:14px;background:var(--s0);
  border:1px solid var(--edge2);box-shadow:0 22px 50px -26px rgba(0,0,0,.42);
  display:flex;flex-direction:column;gap:1px}
#view-board .bmenu .bmi{text-align:left;cursor:pointer;border:0;background:transparent;
  padding:10px 12px;border-radius:10px;color:var(--txt2);
  font:400 12.5px/1 "JetBrains Mono",ui-monospace,monospace}
#view-board .bmenu .bmi:hover{background:var(--s1);color:var(--txt1)}
#view-board .bmenu .bmi.on{color:var(--txt1)}
#view-board .bmenu .bmi.on::before{content:"\2713\00a0\00a0";color:var(--lime-txt)}
#view-board .bmenu .bmi:not(.on)::before{content:"\00a0\00a0\00a0\00a0"}

/* ── the group interview, given here rather than buried in Settings ──────────
   Its own controls style themselves (see /group-interview.js); this is only the
   frame it sits in, so it reads as the group's screen and not as a form. */
#view-board .ginterview{max-width:560px;margin:0 auto;padding:4px 0 28px}
#view-board .gilede{font:400 12.5px/1.7 "JetBrains Mono",ui-monospace,monospace;
  color:var(--dim2);margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid var(--edge)}
#view-board .gilede b{color:var(--txt1);font-weight:400}
@media (max-width:720px){
  #view-board .ginterview{padding:2px 14px 24px}
  #view-board .gilede{font-size:11.5px;margin-bottom:18px;padding-bottom:16px}
}

/* the switcher IS the page's name now, so the static label beside the wordmark
   was saying it twice. */
#view-board .pagename{display:none}
@media (max-width:720px){
  #view-board .bpick{font-size:20px}
  #view-board .bmenu{min-width:190px}
}