/* ═══════════════════════════════════════════════════════════════
   THE VILLAGE BULLETIN BOARD (built 26 Sep 2026; the board residents use from 7 Oct 2026)
   The first board's palette, type and card language (see ../app.css), laid out one
   question per screen. Everything inside .app is sized in em from ONE font size that
   follows the width of the screen it is on (container queries on .stage), so the same
   page is a telephone, a tablet or a laptop without separate stylesheets.
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Inter';src:url('/fonts/inter-v20-latin-variable.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap;
}

:root{
  --ink:#1F2B27; --ink-mid:#46564F;
  /* The look, as numbers the tuning panel can move (guided.js applyTune); these are the standard. */
  --wash-top:.5; --wash-bottom:.66; --card-a:.96; --head-a:.8; --door-a:.86; --band-l:.88; --band-r:.5;
  --card:rgba(253,251,244,var(--card-a));
  --gold:#EFCF88; --gold-hi:#FFE7A8;
  --green:#00674A; --green-hi:#00875E;
  --line:rgba(83,71,48,.18);
  --on-dark:#F4EFE2; --on-dark-mid:#D9D2BF;
  --edge:inset 0 0 0 1px rgba(233,200,134,.3),0 6px 20px rgba(0,0,0,.22);
  --warn:#A3341F;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  display:flex;flex-direction:column;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  background:#0E1714;color:var(--on-dark);-webkit-font-smoothing:antialiased;
}
button,input,textarea{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── the screen, framed or not ── */
.viewport{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start}
.frame{position:relative;width:100%;height:100%}
.stage{
  container-type:inline-size;container-name:stage;
  position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;
  /* The door photograph, darkened, behind every screen. The stage is the scroller, so the
     picture stays put while the notes move over it, framed or not, iPad included (where a
     fixed background attachment is ignored). */
  background:linear-gradient(rgba(12,20,17,var(--wash-top)),rgba(12,20,17,var(--wash-bottom))),var(--photo,none) center/cover no-repeat,#16231E;
  -webkit-overflow-scrolling:touch;
}
.viewport.framed{align-items:center;padding:18px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,#1B2A24 0%,#0A100E 70%)}
.framed .frame{flex:none;border-radius:22px;
  box-shadow:0 0 0 9px #1A1E1D,0 0 0 11px #343B38,0 22px 60px rgba(0,0,0,.55)}
.framed .stage{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:20px}

/* ── one font size, by the width of the screen ── */
.app{--scale:1;font-size:calc(19px * var(--scale));line-height:1.55;min-height:100%;display:flex;flex-direction:column;
  overflow-wrap:anywhere}   /* an email address wraps inside its box rather than running out of it */
@container stage (min-width:600px){.app{font-size:calc(21px * var(--scale))}}
@container stage (min-width:1000px){.app{font-size:calc(22px * var(--scale))}}
.app.big{--scale:1.15}

/* ── the bar across the top of every screen once in ── */
.topbar{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.9em;
  padding:.6em 1em;background:rgba(11,19,16,var(--head-a));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(239,207,136,.18);
}
.brand{display:flex;align-items:center;gap:.55em;font-weight:800;font-size:.9em;color:var(--on-dark);min-width:0;flex:0 1 auto}
/* The time, between the name and Home. It takes the free space on its left, so Home never moves. */
.clock{margin-left:auto;flex:none;font-weight:800;font-size:1.05em;color:var(--gold-hi);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.brand img{height:2.2em;width:auto;flex:none}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* On a telephone the name is cut short beside the Home button; the logo says it anyway. */
@container stage (max-width:599px){.brand span{display:none}}
/* On the narrowest telephones the logo gives way to the time and Home (with Larger text on, a
   little sooner). */
.stage.no-clock .clock{display:none}
.stage.no-clock .top-btn{margin-left:auto}   /* Home keeps its place on the right */
@container stage (max-width:374px){.stage:not(.no-clock) .app.big .brand{display:none}}
@container stage (max-width:329px){.stage:not(.no-clock) .brand{display:none}}
.top-btn{display:inline-flex;align-items:center;gap:.4em;flex:none;background:var(--gold);color:#18261F;border:0;
  border-radius:.65em;padding:.5em 1.05em;font-weight:800;cursor:pointer}
.top-btn:hover{background:var(--gold-hi)}
.top-btn svg,.btn svg,.back-btn svg{width:1.05em;height:1.05em;flex:none}

/* ── a screen ── */
.screen{width:100%;max-width:44em;margin:0 auto;padding:1.1em 1em 3em;flex:1}
@container stage (min-width:1000px){.screen{max-width:54em;padding:1.5em 2em 3em}}
.screen h1{font-size:1.55em;line-height:1.2;margin:.15em 0 .35em;color:var(--on-dark);letter-spacing:-.01em;
  text-shadow:0 1px 14px rgba(0,0,0,.4)}
h1:focus{outline:none}
.lead{color:var(--on-dark-mid);margin:0 0 1.1em;font-size:.95em;text-shadow:0 1px 10px rgba(0,0,0,.4)}
/* A heading and its note sit on their own dark panel, so neither is lost against the photograph
   (Trace, 26 Sep 2026: the Step line and the question on the posting screens). */
.head{background:rgba(11,19,16,var(--head-a));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:1em;
  padding:.75em 1.1em .9em;margin:0 0 1em;box-shadow:inset 0 0 0 1px rgba(233,200,134,.18)}
.head h1{margin:.05em 0 .15em}
.head .lead{margin:0;text-shadow:none}
.head .progress{margin:0 0 .25em}
.backrow{display:flex;flex-wrap:wrap;gap:.6em;margin:0 0 .9em}
.back-btn{display:inline-flex;align-items:center;gap:.45em;background:var(--card);color:var(--ink);border:0;
  border-radius:.7em;padding:.6em 1.1em;font-weight:800;cursor:pointer;box-shadow:var(--edge);text-align:left}
.back-btn:hover{background:#fff}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;border:0;border-radius:.8em;
  padding:.75em 1.5em;min-height:3em;font-weight:800;cursor:pointer;text-align:center}
.btn-gold{background:var(--gold);color:#18261F}
.btn-gold:hover{background:var(--gold-hi)}
.btn-green{background:var(--green);color:#FFF6E6}
.btn-green:hover{background:var(--green-hi)}
.btn-quiet{background:var(--card);color:var(--ink);box-shadow:var(--edge)}
.btn-quiet:hover{background:#fff}
.btn[disabled]{opacity:.6;cursor:default}

/* ── the door ── */
.door{flex:1;display:flex;align-items:center;justify-content:center;padding:.8em 1em}
.door-card{width:100%;max-width:28em;background:rgba(11,19,16,var(--door-a));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:1.1em;padding:1.2em 1.4em 1.1em;font-size:.94em;box-shadow:inset 0 0 0 1px rgba(233,200,134,.24),0 12px 34px rgba(0,0,0,.45)}
/* small enough that the whole card fits a 1280x800 laptop without scrolling */
.door-logo{display:block;width:100%;max-width:8.5em;height:auto;margin:0 0 .6em}
.door-card p{margin:0 0 1em}
.door-card label.lbl{display:block;font-weight:800;margin:0 0 .3em}
.pw{width:100%;font-size:1.3em;letter-spacing:.05em;padding:.55em .75em;border-radius:.6em;
  border:2px solid rgba(239,207,136,.6);background:#FDFBF4;color:var(--ink)}
.pw:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 .2em rgba(239,207,136,.35)}
.door .hint{font-size:.82em;color:var(--on-dark-mid);margin:.45em 0 0}
.door .btn{width:100%;margin-top:1em;font-size:1.05em}
.door .err{min-height:1.4em;color:#F3B7A4;font-size:.9em;margin-top:.7em}
.door .err.calm{color:var(--on-dark)}
.door .foot{font-size:.8em;color:var(--on-dark-mid);margin:.6em 0 0;border-top:1px solid rgba(239,207,136,.18);padding-top:.8em}
/* A saved login opening the board (11 Oct 2026): the door's card with the logo and one line, and a
   thin gold light moving along under it, so the screen is plainly at work. */
.door-card.opening{max-width:22em;text-align:center;padding:1.5em 1.6em 1.6em}
.opening .door-logo{margin:0 auto .9em}
.door-card .opening-say{margin:0;font-size:1.08em;font-weight:700;min-height:1.55em}
.opening-bar{display:block;position:relative;height:.28em;margin:1em auto 0;max-width:12em;border-radius:999px;
  background:rgba(239,207,136,.18);overflow:hidden}
.opening-bar i{position:absolute;top:0;bottom:0;left:0;width:35%;border-radius:inherit;background:var(--gold);
  animation:opening-go 1.6s ease-in-out infinite}
@keyframes opening-go{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
@media(prefers-reduced-motion:reduce){.opening-bar i{animation:none;left:32.5%}}

.checkbox{display:flex;gap:.6em;align-items:flex-start;margin-top:1em;font-size:.92em;cursor:pointer}
.checkbox input{width:1.35em;height:1.35em;margin:.12em 0 0;flex:none;accent-color:var(--green)}

/* ── Home ── */
/* Three choices in the middle of the screen rather than the top, since on an upright tablet
   they otherwise leave the lower half empty. */
.screen.home{display:flex;flex-direction:column;justify-content:center}
.hello h1{font-size:1.9em;margin-bottom:0}
.hello p{margin:0;color:var(--on-dark-mid)}
.choices{display:grid;gap:.9em}
@container stage (min-width:600px){.choices{grid-template-columns:1fr 1fr}}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:.3em;text-align:left;border:0;border-radius:1em;
  padding:1.25em 1.3em 1.4em;min-height:8.5em;cursor:pointer;box-shadow:var(--edge);transition:transform .2s}
.choice svg{width:2.1em;height:2.1em;margin-bottom:.2em}
.c-title{font-size:1.4em;font-weight:800;line-height:1.15}
.c-sub{font-size:.9em;line-height:1.35}
.choice-post{background:var(--gold);color:#18261F}
.choice-post:hover{background:var(--gold-hi)}
.choice-read{background:var(--card);color:var(--ink)}
.choice-read svg{color:var(--green)}
/* What's new is green, with a gold bell (Trace, 26 Sep 2026): the board's own gold on green, so it
   stands apart from the cream "See the notes" card beside it. Cream words on the green read at about
   7.5:1; the green bell on its gold circle at about 4.7:1. */
.whatsnew{margin-top:.9em;width:100%;display:flex;align-items:center;gap:.85em;text-align:left;border:0;border-radius:1em;
  padding:1em 1.2em;background:var(--green);color:#FFF6E6;cursor:pointer;box-shadow:var(--edge);transition:transform .2s,background .2s}
.whatsnew:hover{background:var(--green-hi)}
.wn-icon{flex:none;width:2.3em;height:2.3em;border-radius:50%;background:var(--gold);color:var(--green);display:grid;place-items:center}
.wn-icon svg{width:1.25em;height:1.25em}
.wn-text{flex:1;display:flex;flex-direction:column;min-width:0}
.wn-text b{font-size:1.15em;line-height:1.2}
.wn-count{color:rgba(255,246,230,.88);font-size:.9em}
.whatsnew .go{color:var(--gold-hi)}
.go{flex:none;color:var(--ink-mid);display:grid;place-items:center}
.go svg{width:1.3em;height:1.3em}
.home-foot{display:flex;flex-wrap:wrap;gap:.7em;margin-top:1.5em}
/* four buttons on a telephone: two and two, the same size, rather than a ragged three rows */
@container stage (max-width:599px){.home-foot{display:grid;grid-template-columns:1fr 1fr}.home-foot .foot-btn{width:100%;padding-left:.6em;padding-right:.6em}}
/* on a tablet, the same two and two once Add to my screen makes four (13 Oct 2026), rather than one left on a row
   of its own */
@container stage (min-width:600px) and (max-width:899px){.home-foot:has(> :nth-child(4)){display:grid;grid-template-columns:1fr 1fr}
  .home-foot:has(> :nth-child(4)) .foot-btn{width:100%}}
/* Our Protocol: the board's own words, as plain paragraphs in a card */
.protocol p{margin:0 0 .9em}
.protocol p:last-child{margin-bottom:0}
/* Solid and a size up (Trace, 26 Sep 2026): the see-through ones were lost against the photograph.
   The same cream as the Back buttons; Larger text turns gold while it is on. */
.foot-btn{background:#FDFBF4;color:var(--ink);border:2px solid #FDFBF4;border-radius:.75em;
  padding:.7em 1.3em;min-height:2.9em;cursor:pointer;font-size:1em;font-weight:700;box-shadow:var(--edge)}
.foot-btn:hover{background:#fff;border-color:#fff}
.foot-btn[aria-pressed=true]{background:var(--gold);color:#18261F;border-color:var(--gold)}

/* ── section tiles (reading, and choosing where a note goes) ── */
.tiles{display:grid;gap:.8em}
@container stage (min-width:600px){.tiles{grid-template-columns:1fr 1fr}}
@container stage (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;text-align:left;border:0;padding:0;border-radius:1em;overflow:hidden;
  background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--edge);border-top:.32em solid var(--c);transition:transform .2s}
.tile-pic{display:block;height:5.2em;background:center/cover no-repeat #2B3A34}
.tile-body{display:flex;align-items:center;gap:.7em;padding:.8em 1em 1em}
.tile-icon{flex:none;width:2.2em;height:2.2em;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center}
.tile-icon svg{width:1.2em;height:1.2em}
.icon-tick{display:none;place-items:center}
/* a long section name hyphenates rather than breaking anywhere */
.tile-name{hyphens:auto;-webkit-hyphens:auto}
.tile-words{display:flex;flex-direction:column;min-width:0}
.tile-name{font-weight:800;font-size:1.05em;line-height:1.2}
.tile-count{color:var(--ink-mid);font-size:.85em;line-height:1.3}
.tile-count b{color:var(--green)}
/* On a telephone the pictures go (Trace, 26 Sep 2026): the name, the icon and the count are
   what matter, and there is no room for both. */
@container stage (max-width:599px){
  .tile{border-top:0;border-left:.4em solid var(--c)}
  .tile-pic{display:none}
  .tile-body{padding:.85em 1em}
  /* The chosen tile's tick sits where its icon was, so the name keeps its full width: a tick in
     the corner squeezed "Suggestions" into "Suggestion / s" with Larger text on. */
  .tick-badge{display:none!important}
  .tiles.picking .tile[aria-pressed=true] .tile-icon{background:var(--green)}
  .tiles.picking .tile[aria-pressed=true] .tile-icon>svg{display:none}
  .tiles.picking .tile[aria-pressed=true] .icon-tick{display:grid}
}
/* The narrowest telephones (320-359px), where Larger text otherwise broke "Suggestions" in two:
   a little less padding and a slightly smaller icon keep every section name whole. */
@container stage (max-width:359px){
  .tile-body{padding:.75em .75em;gap:.5em}
  .tile-icon{width:1.9em;height:1.9em}
  .tile-name{font-size:1em}
}
/* Choosing where a note goes: once one is picked the others dim, so it is plain which one it is. */
.tiles.has-pick .tile:not([aria-pressed=true]){opacity:.45;filter:saturate(.35)}
.tiles.has-pick .tile:not([aria-pressed=true]):hover{opacity:.75}
.tile[aria-pressed=true]{box-shadow:0 0 0 .22em var(--gold),var(--edge)}
.tick-badge{position:absolute;top:.5em;right:.5em;width:1.8em;height:1.8em;border-radius:50%;background:var(--green);color:#fff;
  display:none;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tick-badge svg{width:1.1em;height:1.1em}
.tile[aria-pressed=true] .tick-badge{display:grid}

/* ── a section's banner ── */
.banner{border-radius:1em;overflow:hidden;padding:1.1em 1.3em 1.2em;margin-bottom:1em;border-left:.4em solid var(--c);
  background:linear-gradient(90deg,rgba(11,19,16,var(--band-l)),rgba(11,19,16,var(--band-r))),var(--pic) center/cover no-repeat}
.banner h1{margin:.05em 0 .2em}
.banner p{margin:0;color:var(--on-dark-mid);font-size:.92em;max-width:34em}
.banner-sec{display:flex;align-items:center;gap:.5em;color:var(--gold);font-weight:800;font-size:.8em;
  text-transform:uppercase;letter-spacing:.06em}
.banner-sec svg{width:1.2em;height:1.2em}

/* ── notes in a list ── */
.cards{display:grid;gap:.8em}
/* a group's name above its cards (Taken off and set aside), on the same dark glass as a heading */
.shelf-h{display:flex;align-items:baseline;gap:.6em;margin:1.3em 0 .6em;padding:.45em .95em;border-radius:.7em;
  font-size:1em;line-height:1.3;color:var(--on-dark);background:rgba(11,19,16,var(--head-a));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(233,200,134,.18)}
.head+.shelf-h{margin-top:0}
.shelf-n{margin-left:auto;color:var(--gold-hi);font-variant-numeric:tabular-nums}
@container stage (min-width:1000px){.cards{grid-template-columns:1fr 1fr}}
.card{display:flex;gap:1em;align-items:flex-start;text-align:left;width:100%;border:0;border-left:.4em solid var(--c);
  border-radius:1em;padding:1em 1.1em;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--edge);transition:transform .2s}
.card-text{flex:1;display:flex;flex-direction:column;gap:.2em;min-width:0}
.card-flags{display:flex;gap:.4em;flex-wrap:wrap}
.card-title{font-weight:800;font-size:1.1em;line-height:1.25}
.card-excerpt{color:var(--ink-mid);font-size:.92em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-price{font-size:.9em}
.card-meta{font-size:.82em;color:var(--ink-mid)}
.card-pic{flex:none;width:5.2em;height:5.2em;object-fit:cover;border-radius:.6em}
.card .go{align-self:center}
.chip{font-size:.72em;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--c);
  border-radius:999px;padding:.15em .75em}
.new{font-size:.72em;font-weight:800;color:#18261F;background:var(--gold);border-radius:999px;padding:.15em .75em}
.empty{background:var(--card);color:var(--ink);border-radius:1em;padding:1.2em 1.3em;box-shadow:var(--edge)}
.empty p{margin:0 0 .9em}

/* ── one note, full size ── */
.note-full{background:var(--card);color:var(--ink);border-radius:1em;padding:1.3em 1.5em 1.5em;border-left:.45em solid var(--c);box-shadow:var(--edge)}
.note-full h1{color:var(--ink);text-shadow:none;font-size:1.6em}
.note-sec{display:flex;align-items:center;gap:.5em;margin:0;color:var(--c);font-weight:800;font-size:.82em;
  text-transform:uppercase;letter-spacing:.05em}
.note-sec svg{width:1.2em;height:1.2em}
.note-pic{display:block;max-width:100%;max-height:22em;border-radius:.7em;margin:.3em 0 .9em}
.note-body p{margin:0 0 .7em}
.note-price{margin:.2em 0 .6em}
.note-meta{color:var(--ink-mid);font-size:.92em;margin:.8em 0 1em}
.reach{margin-top:.9em;border-radius:.8em;background:#EEF3EC;border:1px solid rgba(0,103,74,.25);padding:1em 1.1em}
.reach[hidden]{display:none}
.reach-head{font-weight:800;margin:0 0 .5em}
.reach-row{display:flex;gap:.3em 1em;flex-wrap:wrap;align-items:baseline;font-size:1.1em;margin:.3em 0}
.reach-what{color:var(--ink-mid);min-width:5.5em;font-size:.85em}
.reach-val{font-weight:800;word-break:break-word}
.reach-note{color:var(--ink-mid);font-size:.88em;margin:.6em 0 0}
.copy{margin-left:auto;flex:none;background:#fff;border:2px solid rgba(0,103,74,.45);color:var(--green);border-radius:.6em;
  padding:.3em .9em;font-weight:800;font-size:.8em;cursor:pointer}
.copy:hover{background:#EAF4EE}
.reach-link{display:flex;flex-direction:column;gap:.05em;margin:.5em 0;padding:.7em .95em;border-radius:.75em;background:#fff;
  border:2px solid rgba(0,103,74,.4);color:var(--ink);text-decoration:none}
.reach-link .reach-what{min-width:0}
.reach-link .reach-val{font-size:1.1em}
.reach-hint{color:var(--green);font-weight:800;font-size:.88em}

/* ── posting, one question at a time ── */
.progress{display:flex;align-items:center;gap:.8em;margin-bottom:.35em;color:var(--on-dark-mid);font-weight:800;font-size:.9em}
.bar{flex:1;max-width:14em;height:.5em;border-radius:999px;background:rgba(253,251,244,.2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);border-radius:inherit}
.ask{background:var(--card);color:var(--ink);border-radius:1em;padding:1.2em 1.3em 1.3em;box-shadow:var(--edge)}
.ask .lbl{display:block;font-weight:800;margin:0 0 .35em}
.ask input[type=text],.ask input[type=tel],.ask input[type=email],.ask textarea{
  width:100%;font-size:1.05em;padding:.65em .8em;border:2px solid rgba(66,74,79,.35);border-radius:.6em;background:#fff;color:var(--ink)}
.ask input:focus,.ask textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 .2em rgba(0,117,80,.18)}
.ask textarea{min-height:8em;resize:vertical;line-height:1.5}
.eg{color:var(--ink-mid);font-size:.86em;margin:.45em 0 0}
.eg b{color:var(--ink)}
.field+.field{margin-top:1.1em}
.pair{display:grid;gap:1em}
@container stage (min-width:600px){.pair{grid-template-columns:1fr 1fr}}
.say{min-height:1.4em;margin:.8em 0 0;color:var(--warn);font-weight:800}
.say:empty{margin:0;min-height:0}
.wiz-nav{display:flex;gap:.8em;margin-top:1.1em;flex-wrap:wrap}
.wiz-nav .btn{flex:1 1 9em}
.wiz-nav .btn-quiet{flex:0 1 9em}
@container stage (max-width:599px){.wiz-nav{flex-direction:column-reverse}.wiz-nav .btn,.wiz-nav .btn-quiet{flex:none;width:100%}}
/* The section step on a tablet or telephone (Trace, 26 Sep 2026): once a section is picked, Next
   comes up from the foot of the screen, the full width of the card, and stays there while the
   sections are scrolled, so nobody has to scroll down to find it. It comes to rest in its own place
   under the last section. The step has no Back: Home at the top, and a telephone's own back, do
   that. A laptop keeps Next where it was, and so does every other step. */
.stage.touch-ui .wiz-dock.up{position:sticky;bottom:calc(.8em + env(safe-area-inset-bottom,0px));z-index:4;
  border-radius:.9em;box-shadow:0 10px 28px rgba(0,0,0,.42);animation:dock-up .3s ease-out}
.stage.touch-ui .wiz-dock.up .btn{flex:1 1 100%;width:100%;margin:0;min-height:3.4em;border-radius:.9em;font-size:1.08em;box-shadow:none}
@keyframes dock-up{from{transform:translateY(140%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.stage.touch-ui .wiz-dock.up{animation:none}}
.options{display:grid;gap:.6em}
.opt{display:flex;align-items:center;gap:.75em;text-align:left;width:100%;border:2px solid rgba(66,74,79,.25);background:#fff;
  color:var(--ink);border-radius:.8em;padding:.75em 1em;cursor:pointer}
.opt:hover{border-color:rgba(0,103,74,.5)}
.opt .tick{flex:none;width:1.45em;height:1.45em;border-radius:50%;border:2px solid rgba(66,74,79,.45);display:grid;place-items:center;color:transparent}
.opt .tick svg{width:.9em;height:.9em}
.opt[aria-pressed=true]{border-color:var(--green);background:#EAF4EE}
.opt[aria-pressed=true] .tick{background:var(--green);border-color:var(--green);color:#fff}
.opt-words{display:flex;flex-direction:column}
.opt-words small{color:var(--ink-mid);font-size:.82em}
.money{display:flex;align-items:center;gap:.35em;max-width:12em}
.money span{font-weight:800;font-size:1.25em}
.pick-photo{position:relative;display:inline-flex;align-items:center;gap:.5em;cursor:pointer}
.options.two{grid-template-columns:1fr}
@container stage (min-width:600px){.options.two{grid-template-columns:1fr 1fr}}
label.opt.pick-photo{display:flex}
label.opt.pick-photo .tick{color:var(--green);border-color:rgba(0,103,74,.5)}
.pick-photo input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.photo-prev img{display:block;max-width:100%;max-height:14em;border-radius:.6em;margin:0 0 .8em}
.photo-row{display:flex;gap:.6em;flex-wrap:wrap}

/* the last step: the note as neighbours will see it, and every answer with a Change beside it */
.preview-label{font-weight:800;color:var(--on-dark-mid);font-size:.85em;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .4em}
.check-rows{margin:1.1em 0 0;padding:0}
.check-row{display:flex;gap:1em;align-items:center;justify-content:space-between;padding:.65em 0;border-bottom:1px solid var(--line)}
.check-row:first-child{border-top:1px solid var(--line)}
.check-row dl{margin:0;min-width:0}
.check-row dt{color:var(--ink-mid);font-size:.82em}
.check-row dd{margin:0;font-weight:700;word-break:break-word}
.change{flex:none;background:transparent;border:2px solid rgba(0,103,74,.45);color:var(--green);border-radius:.6em;padding:.35em .9em;font-weight:800;cursor:pointer}
.change:hover{background:#EAF4EE}
.send-note{color:var(--ink-mid);font-size:.86em;margin:.9em 0 0}
.help-list{margin:0;padding-left:1.2em}
.help-list li{margin:.35em 0}

/* ── on a telephone: room to read (Trace, 26 Sep 2026, "too crunched") ── */
@container stage (max-width:599px){
  .screen{padding:.85em .7em 2.5em}
  .topbar{padding:.5em .75em;gap:.6em}
  .card{flex-direction:column;gap:.55em;padding:.95em 1em 1em}
  .card-pic{width:100%;height:9.5em}
  .card .go{display:none}
  .card-excerpt{-webkit-line-clamp:3}
  .note-full{padding:1.1em 1.05em 1.2em;border-left-width:.35em}
  .note-full h1{font-size:1.4em}
  .reach{padding:.9em .9em}
  .reach-row{flex-direction:column;align-items:flex-start;gap:.1em}
  .reach-row .copy{margin-left:0;margin-top:.25em}
  .banner{padding:.95em 1em 1em}
  .head{padding:.7em .95em .85em}
  .back-btn{padding:.6em .95em}
}
/* ── back to the top of a long note or list ── */
.to-top{display:flex;justify-content:center;margin-top:1.2em}
.to-top[hidden]{display:none}

.choice:hover,.whatsnew:hover,.tile:hover,.card:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── a writer's own note, and taking it off (26 Sep 2026) ── */
.mine-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .9em;margin-top:1em;padding-top:.9em;border-top:1px dashed rgba(83,71,48,.3)}
.mine-say{font-weight:800}
.mine-btn{border:2px solid rgba(0,103,74,.45);color:var(--green);background:#fff;box-shadow:none}
.mine-quote{font-weight:800;border-left:.3em solid var(--green);padding:.5em .9em;background:#F3F1E8;border-radius:0 .5em .5em 0;margin:0 0 1em}
/* ── Help and FAQ ── */
.faq-list{display:grid;gap:.8em}
@container stage (min-width:1000px){.faq-list{grid-template-columns:1fr 1fr}}
.faq{background:var(--card);color:var(--ink);border-radius:1em;padding:1em 1.2em;box-shadow:var(--edge)}
.faq h2{font-size:1.1em;line-height:1.25;margin:0 0 .35em;color:var(--ink)}
.faq p{margin:0}
.faq-mail{margin-top:.8em;border-left:.4em solid var(--green)}
.faq-mail p{margin:0 0 .6em}
.faq p+.reach-row{margin-top:.5em}
/* Your login and Your saved details, first on the page (11 Oct 2026): side by side from 1000px, as the
   questions are, with a gold edge to set them apart from the questions */
.me-pair{display:grid;gap:.8em;margin:0 0 .8em}
@container stage (min-width:1000px){.me-pair{grid-template-columns:1fr 1fr}}
.me-card{border-left:.4em solid #B08234;display:flex;flex-direction:column}
.me-acts{display:flex;flex-wrap:wrap;gap:.6em;margin-top:auto;padding-top:.9em}
.me-acts .btn{min-height:2.6em;padding:.5em 1.3em}
/* Bookmark the board (13 Oct 2026): numbered steps, the number in a green disc; the Share symbol and the star drawn
   in the line where the step names them, the size of the words, with no box (a box looked like a button) */
.app-steps{list-style:none;counter-reset:st;margin:0 0 1em;padding:0;display:grid;gap:.8em}
.app-steps li{counter-increment:st;position:relative;padding-left:2.4em;line-height:1.45}
.app-steps li::before{content:counter(st);position:absolute;left:0;top:-.05em;width:1.7em;height:1.7em;border-radius:50%;
  background:var(--green);color:#fff;font-weight:800;display:grid;place-items:center}
.app-glyph{display:inline-grid;place-items:center;vertical-align:-.3em;width:1.3em;height:1.5em;color:#0A7AFF}
.app-glyph svg{width:1.05em;height:1.05em}
.app-glyph.plain{color:#3C4043}
.app-ask>p{margin:0 0 .9em}
.app-ask>.wiz-nav{margin:0 0 1em}
.app-more{border-top:1px solid var(--line);padding-top:.8em;margin-bottom:.4em}
.app-more h2{font-size:1.05em;margin:0 0 .3em}
.app-more p{margin:0 0 .8em}
.app-more p:last-child{margin-bottom:0}
/* Bookmark the board's pictures (13 Oct 2026): the whole screen drawn small (shotHTML), beside the steps on a laptop
   and under them below 1000px. A picture, not a control: an arrow cursor, nothing to select or drag, no hover; a
   press on it (either button, or a long press) swaps the caption for the bold line (data-act app-pic) */
.app-show{display:grid;gap:.7em 1.4em;margin:0 0 1.1em}
.app-show>.app-steps{margin:0}
@container stage (min-width:1000px){.app-show{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.shot{margin:0;max-width:28em;cursor:default;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.shot>svg{display:block;width:100%;height:auto;pointer-events:none}
.shot text{font-family:inherit}
.shot-cap{margin:0 0 .3em;padding:.15em .4em;border-radius:.4em;text-align:center;color:var(--ink-mid);font-size:.95em;line-height:1.35}
.shot-cap .told{display:none}
.shot.told .shot-cap{color:var(--ink);font-weight:800;animation:shot-told 1.6s ease-out}
.shot.told .shot-cap .plain{display:none}
.shot.told .shot-cap .told{display:inline}
@keyframes shot-told{0%,40%{background:#FFF1CC}100%{background:rgba(255,241,204,0)}}
@media (prefers-reduced-motion:reduce){.shot.told .shot-cap{animation:none}}
.me-rows{margin:.5em 0 0;display:grid;gap:.15em}
.me-rows div{display:grid;grid-template-columns:5.3em minmax(0,1fr);gap:.7em;align-items:baseline}
.me-rows dt{color:var(--ink-mid);font-size:.88em}
.me-rows dd{margin:0;font-weight:700}
.me-confirm{margin-top:.9em;padding:.85em 1em;border-radius:.8em;background:#FFF4D6;border:1px solid rgba(176,130,52,.45)}
.me-confirm p{margin:0;font-weight:700}
.me-confirm .wiz-nav{margin-top:.7em}
/* each button's words on one line; Cancel only as wide as its word, side by side (on a telephone they
   stack, the full width) */
.me-confirm .btn{white-space:nowrap;overflow-wrap:normal}
@container stage (min-width:600px){.me-confirm .btn-quiet{flex:0 0 auto}}
.me-card .say.ok{color:var(--green)}
.me-card .say:not(:empty){margin-top:.6em}

/* ── tuning the look, for the team (outside the board's screens, so plain px) ── */
.tune{position:fixed;z-index:50;top:calc(var(--bar-h,0px) + 8px);right:12px;width:min(340px,calc(100vw - 24px));
  max-height:calc(100vh - var(--bar-h,0px) - 20px);
  overflow:auto;background:#0F1A16;color:var(--on-dark);border:1px solid rgba(239,207,136,.35);border-radius:12px;
  padding:12px 14px 14px;font:14px/1.4 'Inter',Arial,sans-serif;box-shadow:0 14px 40px rgba(0,0,0,.5)}
@supports (height:100dvh){.tune{max-height:calc(100dvh - var(--bar-h,0px) - 20px)}}
.tune[hidden]{display:none}
.tune-head{display:flex;align-items:center;justify-content:space-between}
.tune-head b{font-size:15px;color:var(--gold-hi)}
.tune-x{background:none;border:0;color:var(--on-dark-mid);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.tune-x:hover{color:var(--on-dark)}
.tune label{display:flex;justify-content:space-between;font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--on-dark-mid);margin:14px 0 4px}
.tune label span{color:var(--gold-hi);letter-spacing:0}
.tune input[type=range]{width:100%;margin:0;accent-color:var(--gold)}
.tune-note{margin:4px 0 0;font-size:12.5px;color:var(--on-dark-mid)}
.tune-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:14px}
.tune-line b{color:var(--gold-hi)}
.tune-line button,.tune-row button{background:transparent;border:1px solid rgba(239,207,136,.4);color:var(--on-dark);
  border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer}
.tune-line button:hover,.tune-row button:hover{border-color:var(--gold)}
.tune-row{display:flex;gap:8px;margin-top:16px}

/* ═══════════ the board team's side (3 Oct 2026) ═══════════
   Only the team sees any of this. The amber of the board's own menu marks what is waiting. */
:root{--amber:#E3A33B}
/* Home: the team's way in, above the three choices everybody has */
.teamcard{width:100%;display:flex;align-items:center;gap:.85em;text-align:left;border:0;border-radius:1em;margin:0 0 .9em;
  padding:.9em 1.2em;background:rgba(11,19,16,var(--head-a));color:var(--on-dark);cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(233,200,134,.4),0 6px 20px rgba(0,0,0,.22);transition:transform .2s}
.teamcard:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--gold),0 6px 20px rgba(0,0,0,.22)}
.teamcard.has-wait{box-shadow:inset 0 0 0 2px var(--amber),0 6px 20px rgba(0,0,0,.22)}
.teamcard .wn-count{color:var(--on-dark-mid)}
.teamcard.has-wait .wn-count{color:var(--gold-hi);font-weight:700}
.teamcard .go{color:var(--gold-hi)}
.tc-icon{flex:none;width:2.3em;height:2.3em;border-radius:50%;background:var(--gold);color:#18261F;display:grid;place-items:center}
.tc-icon svg{width:1.3em;height:1.3em}
.tc-count{flex:none;min-width:1.9em;height:1.9em;padding:0 .5em;border-radius:999px;background:var(--amber);color:#1B1408;
  font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.tc-count.calm{background:#E4DFD0;color:var(--ink)}
/* "this is the real one" */
.real{display:flex;gap:.55em;align-items:center;background:rgba(227,163,59,.16);border:1px solid rgba(227,163,59,.7);
  color:#FFE2B0;border-radius:.6em;padding:.45em .8em;font-size:.82em;font-weight:700;margin-bottom:.9em}
.real svg{width:1.2em;height:1.2em;flex:none}
/* the Team's Page: one row per job */
.trows{display:grid;gap:.7em;margin-bottom:1em}
.trow{display:flex;align-items:center;gap:.9em;width:100%;text-align:left;border:0;border-left:.4em solid var(--green);border-radius:1em;
  padding:1em 1.1em;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--edge);transition:transform .2s}
.trow:hover{transform:translateY(-2px)}
.trow.has-wait{border-left-color:var(--amber)}
.trow-words{flex:1;display:flex;flex-direction:column;min-width:0}
.trow-words b{font-size:1.15em;line-height:1.25}
.trow-words span{color:var(--ink-mid);font-size:.88em;line-height:1.35}
.ask.tinted{background:#EEF3EC}
.ask.tinted p{margin:0 0 .7em}
.ask.tinted p:last-child{margin:0}
/* what only the team sees about a note: how to reach the writer, what they asked for */
.private{margin:.9em 0 0;border-radius:1em;background:#FFF4D6;color:var(--ink);border:1px dashed #B08234;padding:.95em 1.15em}
.private-head{margin:0 0 .45em;font-weight:800;font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:#7A5418}
.private-line{margin:.2em 0}
.private .copy{background:#fff}
/* the rule before writing a scam warning */
.ask.rule{margin:0 0 1em;border-left:.4em solid var(--amber)}
.ask.rule p{margin:0}
.ask.rule .private-head{margin-bottom:.4em}
/* the buttons under a waiting note: the main one the full width, the rest beside each other */
.tactions{margin-top:1em;display:flex;flex-wrap:wrap;gap:.7em}
.tactions .btn{flex:1 1 11em}
.tactions .btn-gold{flex:1 1 100%;font-size:1.08em}
.tactions .say,.tactions .send-note{flex:1 1 100%;margin:0}
.btn-warn{color:var(--warn)}
.btn-danger{background:var(--warn);color:#FFF6E6}
.btn-danger:hover{background:#B83E27}
/* the one form */
.tform .field{margin-top:0}
.tform .field+.field,.tform .eg+.field,.tform .field+.checkbox{margin-top:1.1em}
.ask select{width:100%;font-size:1.05em;padding:.65em .8em;border:2px solid rgba(66,74,79,.35);border-radius:.6em;background:#fff;color:var(--ink)}
.ask select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 .2em rgba(0,117,80,.18)}
.tform .options{margin-top:.1em}
/* after a job: what happened, and what next */
.done-nav{flex-direction:column}
.done-nav .btn,.done-nav .btn-quiet{flex:none;width:100%}
/* the team's buttons on a note that is up */
.team-tools{margin-top:1.1em;padding-top:.9em;border-top:2px dashed rgba(176,130,52,.45)}
.tt-head{margin:0 0 .55em;font-weight:800;font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:#7A5418;
  display:flex;flex-wrap:wrap;gap:.3em .8em;align-items:baseline}
.tt-when{text-transform:none;letter-spacing:0;font-weight:700;color:var(--ink-mid);font-size:1.1em}
.tt-row{display:flex;flex-wrap:wrap;gap:.6em}
.tt-row .btn{flex:1 1 10em;min-height:2.7em;padding:.6em 1em}
.team-tools .say{margin-top:.6em}
.edited{font-style:italic}
/* a note off the board, in a list */
.tag-kept{font-size:.72em;font-weight:800;color:var(--ink);background:#E4DFD0;border-radius:999px;padding:.15em .75em}
@container stage (max-width:599px){
  .tactions .btn,.tt-row .btn{flex:1 1 100%}
  .trow{padding:.9em .95em}
}
/* ── the board's numbers ── */
.stat-days{display:flex;flex-wrap:wrap;gap:.6em;margin:0 0 1em}
/* the survey that is up, at the top of The board's numbers */
.n-survey{margin:0 0 1em}
.n-survey h2{font-size:1.1em;margin:0 0 .25em;color:var(--ink)}
.n-survey p{margin:0}
.n-survey .wiz-nav{margin-top:.8em}
.stat-now{display:flex;align-items:center;gap:.8em;background:var(--green);color:#FFF6E6;border-radius:1em;padding:.85em 1.2em;
  margin:0 0 1em;box-shadow:var(--edge)}
.stat-now b{font-size:2em;line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.stat-busy{color:var(--on-dark-mid);margin:0 0 .6em;font-size:.88em}
.stat-grid{display:grid;gap:.8em}
@container stage (min-width:700px){.stat-grid{grid-template-columns:1fr 1fr}}
.stat-group{background:var(--card);color:var(--ink);border-radius:1em;padding:.9em 1.2em 1em;box-shadow:var(--edge)}
.stat-group h2{font-size:.8em;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin:0 0 .4em}
.stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .8em;padding:.4em 0;border-top:1px solid var(--line)}
.stat:first-of-type{border-top:0}
.stat-k{flex:1 1 9em;color:var(--ink-mid);font-size:.92em}
.stat-v{font-size:1.15em;font-variant-numeric:tabular-nums}
.stat-n{flex:1 1 100%;color:var(--ink-mid);font-size:.8em}
.stat-foot{margin-top:.9em}
.stat-foot p{margin:0 0 .6em}
.stat-warn{color:var(--warn);font-weight:700}
.stat-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.8em 1.2em;margin:.9em 0 .4em}
.stat-dl{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-size:.9em;color:var(--ink-mid)}
.stat-dl .copy{margin-left:0}

/* ── the answer to "Did anyone get in touch?", on the door's card (7 Oct 2026) ── */
.reply-card h1{font-size:1.4em;line-height:1.2;margin:.35em 0 .55em;color:var(--on-dark)}
.reply-card .mine-quote{color:var(--ink)}
.reply-card p{margin:0 0 .9em}
.reply-card .options{margin:0 0 .4em}
.reply-card .wiz-nav{margin-top:.6em}

/* ── "Tell us what you think": the survey's card on Home (Trace, 10 Oct 2026) ──
   Asked to look unlike anything else there, so it reads "this is new, press it": warm paper with a
   dashed gold edge like a raffle ticket, a berry-coloured disc and a "New" sticker (a colour none of the
   sections use), and one light passing over it twice when Home opens. Gone once this device has sent
   its answers. */
.survey-card{position:relative;width:100%;display:flex;align-items:center;gap:.9em;text-align:left;cursor:pointer;
  border:3px dashed #B08234;border-radius:1em;padding:1em 4.6em 1em 1.2em;color:#2A1F12;overflow:hidden;
  background:linear-gradient(115deg,#FFF7E3 0%,#FDEBCD 55%,#F8DDB6 100%);box-shadow:var(--edge);transition:transform .2s}
.survey-card:hover{transform:translateY(-2px)}
.survey-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 48%,transparent 61%);transform:translateX(-110%);
  animation:sv-shine 1.5s .7s ease-in-out 2}
@keyframes sv-shine{to{transform:translateX(110%)}}
.sv-icon{flex:none;width:2.5em;height:2.5em;border-radius:50%;background:#8E3B5E;color:#fff;display:grid;place-items:center}
.sv-icon svg{width:1.35em;height:1.35em}
.sv-text{flex:1;display:flex;flex-direction:column;min-width:0}
.sv-text b{font-size:1.15em;line-height:1.2}
.sv-text span{color:#5B4631;font-size:.9em}
.sv-sticker{position:absolute;top:50%;right:.9em;transform:translateY(-50%) rotate(-8deg);background:#8E3B5E;color:#fff;
  font-size:.78em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.35em .8em;border-radius:.4em;
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
@media(prefers-reduced-motion:reduce){.survey-card::after{animation:none;display:none}}
/* the questions: a choice of several has square ticks, like a form's check boxes; one-of has round */
.opt.many .tick{border-radius:.35em}
.options.sv-grid{grid-template-columns:1fr}
@container stage (min-width:600px){.options.sv-grid{grid-template-columns:1fr 1fr}}
.sv-other{margin-top:1.1em}
/* in the greeting's bar: the words on the left, the ticket on the right; on a narrow screen it drops below */
.hello.with-survey{display:flex;align-items:center;flex-wrap:wrap;gap:.8em 1.4em}
.hello-words{flex:1 1 13em;min-width:0}
.hello .survey-card{flex:1 1 22em;max-width:30em;padding:.65em 4.4em .65em .95em;gap:.75em}
.hello .sv-icon{width:2.2em;height:2.2em}
.hello .sv-text b{font-size:1.08em}
/* a telephone: the sticker moves up into the corner, so the words have the card's whole width */
@container stage (max-width:599px){
  .hello .survey-card{padding-right:.95em}
  .hello .sv-sticker{top:.5em;right:.5em;transform:rotate(-6deg);font-size:.68em}
  .hello .sv-text b{padding-right:3.6em}
  .hello .sv-text span{text-wrap:balance}
}

/* ── the survey's results, for the team (10 Oct 2026) ── */
.sv-results .ask+.ask{margin-top:.9em}
.sv-sum .wiz-nav .btn{flex:1 1 auto;white-space:nowrap;overflow-wrap:normal}
.sv-q h2{font-size:1.1em;line-height:1.25;margin:0 0 .25em;color:var(--ink)}
.sv-sub{font-size:.95em;margin:1.1em 0 .2em;color:var(--ink)}
.sv-count{margin:0 0 .7em}
.sv-bars{display:grid;gap:.5em}
.sv-bar{display:grid;grid-template-columns:minmax(7em,13em) 1fr auto;gap:.7em;align-items:center}
.sv-lbl{font-weight:700;line-height:1.25}
.sv-track{height:1.05em;border-radius:999px;background:#E7E2D3;overflow:hidden}
.sv-track i{display:block;height:100%;background:var(--green);border-radius:inherit;min-width:3px}
.sv-n{white-space:nowrap;min-width:4.4em;text-align:right}
.sv-n small{color:var(--ink-mid)}
.sv-texts{margin:.2em 0 0;padding-left:1.2em}
.sv-texts li{margin:.35em 0}
.sv-texts small{color:var(--ink-mid);white-space:nowrap}
@container stage (max-width:599px){.sv-bar{grid-template-columns:1fr auto}.sv-track{grid-column:1 / -1;grid-row:2}}
/* ── The survey's prize drawing (Trace, 11 Oct 2026) ──
   On the survey's first screen, Guess the Resident's gold prize card (.g-prize, below). Under the
   thank-you, and on its own screen from Home, a cream card asks for a name and a telephone or email,
   with the prize on a small strip of the same gold. */
/* a little less air than on Guess the Resident, so Begin stays on a laptop's screen below it */
.g-prize.sv-prize{margin:0 0 1em;padding-top:.95em;padding-bottom:1em}
.sv-prize .g-prize-top{margin-bottom:.4em}
.sv-prize .g-gift{width:2.1em;height:2.1em}
.g-prize.sv-prize p{margin-top:.35em}
.sv-entry{margin-top:1em}
.sv-entry h2{font-size:1.15em;line-height:1.25;margin:0 0 .6em;color:var(--ink)}
.sv-entry h1{font-size:1.4em;line-height:1.2;margin:0 0 .6em;color:var(--ink);text-shadow:none}
.backrow+.sv-entry{margin-top:0}
.g-prize.sv-ticket{display:flex;align-items:center;gap:.8em;margin:0 0 1.1em;padding:.75em 1em;border-radius:.8em}
.g-prize.sv-ticket::before{inset:.25em;border-radius:.6em}
.sv-ticket .g-gift{width:2.1em;height:2.1em}
.sv-ticket-words{display:flex;flex-direction:column;min-width:0}
.sv-ticket .g-prize-name{font-size:1.1em}
.g-prize.sv-ticket .g-from{display:block;margin-top:.15em}
.sv-entry .pair .field+.field{margin-top:0}   /* the pair's own gap spaces them, side by side or one above the other */
.sv-entry .wiz-nav{margin-top:.8em}
.sv-entry .eg{margin-top:.55em}
.sv-nothanks .btn-quiet{flex:0 1 auto;min-height:2.6em;padding:.5em 1.3em}
.sv-in{margin:0;font-size:1.1em;font-weight:700;line-height:1.45}
.sv-in:focus{outline:none}
/* the team's side, on the results screen: who entered, by name, and the draw */
.sv-draw h2{font-size:1.1em;line-height:1.25;margin:0 0 .25em;color:var(--ink)}
.sv-draw>p{margin:0 0 .4em}
.sv-dn{font-size:1.05em}
.sv-entries{list-style:none;margin:.5em 0 .3em;padding:0}
.sv-erow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.15em 1em;align-items:center;padding:.45em 0;border-top:1px solid var(--line)}
.sv-erow:first-child{border-top:0}
.sv-en{font-weight:700}
.sv-erow.out .sv-en,.sv-erow.out .sv-ec{color:var(--ink-mid);opacity:.55}
.sv-eb{min-height:2.3em;padding:.3em 1em;font-size:.85em}
.sv-win{background:var(--gold);color:#18261F;border-radius:999px;padding:.1em .7em;font-size:.72em;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.sv-draw .eg{margin-top:.3em}
.sv-draw .sv-winner{font-size:1.15em;margin:.6em 0 0}
.sv-draw>.wiz-nav .btn-quiet{flex:0 0 auto;white-space:nowrap}
.sv-confirm{margin-top:.8em;padding:.85em 1em;border-radius:.8em;background:#FFF4D6;border:1px solid rgba(176,130,52,.45)}
.sv-confirm p{margin:0;font-weight:700}
.sv-confirm .wiz-nav{margin-top:.7em}
/* side by side only: on a telephone the buttons stack, where a basis would be a height (Not yet was a tall box) */
@container stage (min-width:600px){.sv-confirm .btn-quiet{flex:0 1 9em}}
@container stage (max-width:599px){
  /* a telephone: the name and its button, then the telephone or email the card's full width under them */
  .sv-erow{grid-template-columns:minmax(0,1fr) auto}
  .sv-ec{grid-column:1 / -1;grid-row:2}
  .sv-eb{grid-column:2;grid-row:1}
}
/* Print, from the results screen only (its Print button, or the browser's own while it is open):
   black on white, no picture, no buttons, every answer on paper */
@media print{
  html.print-results,html.print-results body{background:#fff!important;height:auto!important;overflow:visible!important;display:block!important}
  html.print-results .viewport,html.print-results .frame,html.print-results .stage{display:block!important;height:auto!important;
    overflow:visible!important;background:none!important;position:static!important;transform:none!important;box-shadow:none!important}
  html.print-results .topbar,html.print-results .backrow,html.print-results .no-print,html.print-results .to-top,
  html.print-results .tune{display:none!important}
  html.print-results .app{font-size:12pt!important;color:#000}
  html.print-results .screen{max-width:none;padding:0}
  html.print-results .head,html.print-results .ask{background:#fff!important;color:#000!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid #999;border-radius:6px;break-inside:avoid}
  html.print-results .head h1,html.print-results .lead{color:#000!important;text-shadow:none!important}
  html.print-results .sv-track{border:1px solid #666;background:#fff!important}
  html.print-results .sv-track i{background:#444!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* and whatever starts a print, what is marked no-print (the drawing's names above all) stays off the paper */
@media print{.no-print{display:none!important}}

/* ═══════════ The Village Corner and Guess the Resident (10 Oct 2026) ═══════════
   Built from the board's own pieces, so it reads as part of the board: the dark glass of the heading
   panels with their gold hairline, cream cards, the gold button, small capitals for labels. The one
   new thing is the portrait: a dark silhouette on a warm, softly lit ground, framed like a picture
   in a lobby, a dark mat inside a gold hairline. */

/* Home: the corner's card beside What's new, two equal halves on a computer, so Home gains no height
   there. Below 900px (an upright tablet is 834px at most) a half is too narrow for "The Village Corner"
   on one line (it broke into three on an 820px tablet), and a tablet or telephone has the height, so
   the two stack. */
.home-row{display:grid;gap:.9em;margin-top:.9em}
.home-row .whatsnew{margin-top:0}
/* Side by side, each line must stay on one line, or the row grows and the bottom buttons leave a 1366x768
   screen: "You have seen everything new this week" and "Guess the Resident is taking a week off" are the
   longest, so the two cards give their words a little more of their width there. */
@container stage (min-width:900px){
  .home-row.two{grid-template-columns:1fr 1fr}
  .home-row.two .whatsnew,.home-row.two .cornercard{padding:1em .8em 1em 1.05em;gap:.75em}
  .home-row.two .wn-count,.home-row.two .cc-line{font-size:.88em}
}
.cornercard{position:relative;width:100%;display:flex;align-items:center;gap:.85em;text-align:left;border:0;border-radius:1em;
  padding:1em 1.2em;background:rgba(11,19,16,var(--head-a));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--on-dark);cursor:pointer;box-shadow:var(--edge);transition:transform .2s}
.cornercard:hover{transform:translateY(-2px)}
.cornercard .wn-text b{color:var(--on-dark)}
.cc-line{color:var(--gold-hi);font-size:.9em}
.cornercard .go{color:var(--gold);margin-left:auto}
.cornercard .wn-text{flex:0 1 auto}
/* the sticker sits on the card's top edge, so it never takes room from the words */
.cornercard .c-sticker{position:absolute;top:0;right:3.6em;transform:translateY(-38%) rotate(-6deg)}
/* "New", as on the survey's card */
.c-sticker{flex:none;background:#8E3B5E;color:#fff;font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.3em .75em;border-radius:.4em;transform:rotate(-8deg);box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* ── the portrait ──
   Any head-and-shoulders drawing on a 200 by 200 box: sized a little wider than the frame and set on
   its bottom edge, so the shoulders run out of the frame as in a photograph, with light above the head. */
.portrait{position:relative;display:block;overflow:hidden;border-radius:.9em;isolation:isolate;
  background:radial-gradient(115% 90% at 50% 34%,#FFF9EA 0%,#FBEDCB 28%,#F3D89F 55%,#DDB878 80%,#C29A55 100%);
  box-shadow:0 0 0 .2em rgba(11,19,16,.92),0 0 0 calc(.2em + 1.5px) rgba(239,207,136,.75),0 .6em 1.6em rgba(0,0,0,.4)}
.portrait svg{position:absolute;left:50%;bottom:0;width:112%;height:auto;aspect-ratio:1/1;transform:translateX(-50%);display:block}
/* the light: brightest behind the head, a soft shade at the edges and the foot */
.portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,244,214,.5),inset 0 0 1.8em rgba(110,74,24,.3),inset 0 -1.6em 1.8em -1em rgba(80,52,16,.25)}
.portrait.fig-unknown svg{width:100%}
/* Home: small, on the left of the card */
.cc-pic{flex:none;width:2.75em;height:2.75em;border-radius:.6em;
  box-shadow:0 0 0 1.5px rgba(11,19,16,.9),0 0 0 2.5px rgba(239,207,136,.6)}
.cc-pic::after{box-shadow:inset 0 0 0 1px rgba(255,244,214,.45),inset 0 0 .8em rgba(110,74,24,.3)}
/* the portrait's frame, so a prize week's small gold gift can sit on its corner, outside the picture */
.cc-frame{position:relative;flex:none;display:block}
.cc-gift{position:absolute;right:-.5em;bottom:-.45em;width:1.45em;height:1.45em;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#F6DFA0 0%,#EFCF88 50%,#E2B65A 100%);color:#0E4A36;
  box-shadow:0 0 0 2px rgba(11,19,16,.95),0 2px 5px rgba(0,0,0,.35)}
.cc-gift svg{width:.88em;height:.88em}

/* ── The Village Corner ── */
.corner-tiles{display:grid;gap:.9em}
.g-tile{border-top:0}
.g-tile .tile-body{padding:.85em 1.2em 1em}
.g-tile .tile-name{font-size:1.25em}
.g-tile .tile-count{font-size:.92em}
.g-tile .tile-words{flex:1}
.g-tile .c-sticker{position:absolute;top:.85em;right:.95em;font-size:.78em}
/* the tile's picture: the portrait as a band across the top, the figure standing on its foot */
.g-band{position:relative;display:block;height:8em;overflow:hidden;background:#2B3A34}
.portrait.band{position:absolute;inset:0;border-radius:0;box-shadow:none;
  background:radial-gradient(42% 135% at 50% 78%,#FFFBF0 0%,#FCF0D4 26%,#F4DDAA 55%,#E7C68A 80%,#DDB878 100%)}
.portrait.band svg{left:50%;width:auto;height:100%}
.portrait.band.fig-unknown svg{height:92%}
.portrait.band::after{box-shadow:inset 0 -1px 0 rgba(176,130,52,.5),inset 0 0 3em rgba(110,74,24,.28)}
/* the three still to come: quieter, flat, nothing to press. A row each on a telephone, three across on a
   tablet, and on a computer a column of rows beside Guess the Resident, so the screen fits a laptop;
   there "Coming soon" sits under the line, as on a telephone, so each line stays whole (D5). */
.soon-tiles{display:grid;gap:.8em}
@container stage (min-width:600px){.soon-tiles{grid-template-columns:repeat(3,1fr)}}
.soon-tile{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.3em .8em;border-radius:1em;padding:1em 1.1em 1.05em;
  background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(233,200,134,.3)}
.soon-tile .tile-words{flex:1 1 0;min-width:0}
.soon-icon{flex:none;width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;color:#7C8A84;
  box-shadow:inset 0 0 0 1.5px rgba(70,86,79,.28)}
.soon-icon svg{width:1.2em;height:1.2em}
.soon-tile .tile-name{color:var(--ink-mid)}
.soon-label{flex:1 1 100%;padding-left:calc(2.3em / .7 + .8em / .7);font-size:.7em;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#7A6A4E}
@container stage (min-width:600px) and (max-width:999px){
  .soon-tile{flex-direction:column;flex-wrap:nowrap;gap:.55em}
  .soon-tile .tile-words{flex:none}
  .soon-label{flex:none;padding-left:0}
}
@container stage (min-width:1000px){
  .corner-tiles{grid-template-columns:1fr 1fr;align-items:stretch}
  .g-tile .g-band{flex:1 1 auto;height:auto;min-height:8em}
  .soon-tiles{grid-template-columns:1fr}
  .soon-tile{padding:.9em 1.1em}
  /* Larger text: the Guess tile keeps its own height rather than the taller column's, so its name
     and line stay on a laptop's screen (D6) */
  .app.big .corner-tiles{align-items:start}
  .app.big .g-tile .g-band{flex:none;height:9em}
}
/* Guess the Resident on its own, while the three to come are kept off (10 Oct 2026): one tile at the
   width of a picture, centered under the heading, rather than half of an empty grid */
.corner-tiles.single{grid-template-columns:minmax(0,28em);justify-content:center}
.corner-tiles.single .g-band{flex:none;height:8.5em}
@container stage (min-width:600px){.corner-tiles.single .g-band{height:10em}}
/* with no week planned, its quiet tile: the name level with its icon, "Coming soon" under the name */
.corner-tiles.single .soon-tile{align-items:center}

/* ── Guess the Resident ── */
.kicker{margin:0 0 .3em;color:var(--gold);font-weight:800;font-size:.78em;letter-spacing:.08em;text-transform:uppercase}
/* it breaks after the dot, never inside "Week of October 12" (D7) */
.kicker span{white-space:nowrap}
.g-hero{display:flex;align-items:center;gap:1em 1.6em;padding:1em 1.2em 1.1em}
.g-hero-words{flex:1 1 auto;min-width:0}
.g-pic{flex:none;width:7em;height:7.6em;margin:.2em .25em .2em 0}
.guess .ask h2{font-size:1.15em;line-height:1.25;margin:0 0 .55em;color:var(--ink)}
.g-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1em;align-items:start}
@container stage (min-width:1000px){.g-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.g-main,.g-side{display:grid;grid-template-columns:minmax(0,1fr);gap:1em}
/* A tablet or telephone: one column, today's clue first and the guess straight after it, so the box is
   on a tablet's first screen and under the clue it is about on a telephone (D1, 10 Oct 2026); then the
   prize, the earlier clues and the record. Saturday and Sunday: the guess, the prize, the clues. */
@container stage (max-width:999px){
  .g-grid{display:flex;flex-direction:column;align-items:stretch}
  .g-main,.g-side{display:contents}
  .g-today{order:1}
  .g-guess,.g-was{order:2}
  .g-prize{order:3}
  .g-clues:not(.g-today){order:4}
  .g-record{order:5}
}
.guess>.ask+.ask,.guess>.head+.ask{margin-top:0}
.guess>.ask{margin-bottom:1em}
/* The prize, as the event it is (Trace, 10 Oct 2026: "spice that up a bit"): a gold card in the
   board's own golds, lit from its top corner, a fine darker gold line inside its edge like a ticket,
   dark ink, the gift in the board's green beside a small "Prize week", and the prize as the headline.
   A light passes over it once as the screen opens (not with reduced motion). */
.g-prize{position:relative;overflow:hidden;padding:1.1em 1.3em 1.2em;color:#1E1A10;
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,250,230,.55) 0%,rgba(255,250,230,0) 55%),
    linear-gradient(135deg,#F6DFA0 0%,#EFCF88 50%,#E2B65A 100%);
  box-shadow:inset 0 0 0 1px rgba(255,246,220,.6),0 6px 20px rgba(0,0,0,.22)}
.g-prize::before{content:"";position:absolute;inset:.35em;border:1px solid rgba(150,108,40,.38);border-radius:.7em;pointer-events:none}
.g-prize h2,.guess .g-prize h2{margin:0;font-size:1em;line-height:1.2;color:#1E1A10}
.g-prize-top{display:flex;align-items:center;gap:.65em;margin:0 0 .6em}
.g-gift{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:var(--green);color:var(--gold-hi);display:grid;place-items:center;
  box-shadow:0 0 0 2px rgba(255,248,226,.65),0 3px 8px rgba(90,60,16,.3)}
.g-gift svg{width:1.25em;height:1.25em}
.g-pill{background:#0E4A36;color:var(--gold-hi);border-radius:999px;padding:.32em .9em;font-size:.68em;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.g-prize-name{display:block;font-size:1.4em;font-weight:800;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.g-prize p{margin:.5em 0 0;color:#47391C;font-size:.92em;line-height:1.45}
.g-prize .g-from{margin-top:.35em;font-size:.84em;font-weight:600;color:#5A4520}
.g-prize .g-from b{font-weight:800;color:#3E2F12}
.g-when{white-space:nowrap}
.g-prize.shine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 48%,transparent 61%);transform:translateX(-110%);
  animation:sv-shine 1.6s .5s ease-in-out 1}
@media(prefers-reduced-motion:reduce){.g-prize.shine::after{animation:none;display:none}}
/* the clues: one card, a hairline between them, today's larger with a gold rule beside it */
.clue-list{list-style:none;margin:0;padding:0}
.clue{position:relative;padding:.8em 0 .85em;border-top:1px solid var(--line)}
.clue:first-child{border-top:0;padding-top:0}
.clue-day{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .7em;font-size:.76em;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mid)}
.clue-text{margin:.2em 0 0;line-height:1.5}
.clue.today{padding-left:1em}
.clue.today::before{content:"";position:absolute;left:0;top:.8em;bottom:.85em;width:.25em;border-radius:999px;background:var(--gold)}
.clue.today:first-child::before{top:0}
.clue.today .clue-text{font-size:1.2em;line-height:1.45;font-weight:600;color:#14201B}
.pill-new{background:var(--gold);color:#18261F;border-radius:999px;padding:.15em .8em;letter-spacing:.06em}
.g-today .clue+.clue.today .clue-text{font-size:1.05em}
.g-next{margin:.85em 0 0;padding-top:.75em;border-top:1px solid var(--line);color:var(--ink-mid);font-size:.9em}
/* the guess */
.g-row{display:flex;flex-wrap:wrap;gap:.6em}
.g-row input[type=text]{flex:1 1 10em;width:auto;min-width:0}
.g-row .btn{flex:1 0 auto}
.g-guess .eg{margin-top:.6em}
.g-guess .say{margin-top:.6em}
.g-cap{margin:0 0 .2em;font-size:.76em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid)}
.g-mine{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5em 1em}
.g-name{font-size:1.4em;line-height:1.2;color:var(--ink)}
.g-change{min-height:2.4em;padding:.4em 1.1em}
.g-was p{margin:0}
.g-was b{font-size:1.15em}
.g-was p+.say:not(:empty){margin-top:.6em}
/* the record */
.g-stats{display:flex;flex-wrap:wrap;gap:.3em 2.2em}
.g-stats p{margin:0;color:var(--ink-mid)}
.g-stats b{font-size:1.7em;line-height:1.2;color:var(--green);font-variant-numeric:tabular-nums;margin-right:.1em}
.g-record .eg{margin-top:.3em}
/* the team's preview of a day */
.g-preview{display:flex;align-items:center;gap:.5em;background:rgba(11,19,16,var(--head-a));color:var(--gold-hi);border-radius:.7em;
  padding:.5em 1em;font-size:.88em;font-weight:700;margin:0 0 .9em;box-shadow:inset 0 0 0 1px rgba(239,207,136,.45)}
@container stage (max-width:599px){
  .g-hero{flex-direction:column;align-items:flex-start;padding:.85em .95em 1em}
  .g-pic{order:-1;width:6.6em;height:7.1em;margin:.25em 0 .35em .25em}
  .g-band{height:7em}
  .g-prize{padding:.9em 1em}
  .g-name{font-size:1.35em}
}

/* ── Guess the Resident, for the team: the Team's Page look ── */
.gteam .head .say{color:#F3B7A4}
.gteam .head .say:not(:empty){margin-top:.5em}
/* a change made says so in the board's colors, not a trouble's */
.gteam .head .say.ok{color:var(--gold-hi)}
.gteam .ask .say.ok{color:var(--green)}
/* the week as last fetched, while it cannot be fetched again: a line and Try again above it */
.g-stale{display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1em;padding:.85em 1.2em;margin:0 0 .9em}
.g-stale p{flex:1 1 16em;margin:0;color:var(--warn);font-weight:700}
.g-stale .btn{min-height:2.6em;padding:.5em 1.1em}
.g-weeks{margin-bottom:.9em}
.g-weeks .foot-btn{display:inline-flex;align-items:center;gap:.4em;padding:.5em 1em;min-height:2.6em;font-size:.92em}
.g-weeks .foot-btn svg{width:1em;height:1em}
.gteam .g-sec+.g-sec{margin-top:.9em}
.gteam .g-sec h2{font-size:1.15em;line-height:1.25;margin:0 0 .5em;color:var(--ink)}
.g-acts{display:flex;flex-wrap:wrap;gap:.7em;margin-top:1em}
.g-acts .btn{min-height:2.7em;padding:.6em 1.2em}
.g-pause{margin-top:1.1em}
.gt-row{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;gap:.2em 1em;align-items:start;padding:.65em 0;border-top:1px solid var(--line)}
.gt-row:first-child{border-top:0;padding-top:.1em}
.gt-row.more{border-top:0;padding-top:0}
.gt-day{font-size:.76em;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mid);padding-top:.35em}
.gt-row.more .gt-day{color:#7A5418}
.gt-text{line-height:1.45}
.gt-none{color:var(--ink-mid)}
.gt-row .change{padding:.25em .9em}
.gt-facts{margin:0}
.gt-fact{display:grid;grid-template-columns:minmax(8em,13em) minmax(0,1fr);gap:.1em 1em;padding:.55em 0;border-top:1px solid var(--line)}
.gt-fact:first-child{border-top:0;padding-top:0}
.gt-fact dt{color:var(--ink-mid);font-size:.92em}
.gt-fact dd{margin:0;font-weight:700}
.gt-sub{display:block;font-weight:400;color:var(--ink-mid);font-size:.9em}
.g-days{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.3em}
.g-counts{display:flex;flex-wrap:wrap;gap:.2em 2em;margin:0 0 .3em}
.g-counts p{margin:0;color:var(--ink-mid)}
.g-counts b{font-size:1.5em;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:.1em}
.gt-h3{font-size:.76em;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mid);margin:1.2em 0 .5em}
.gteam .sv-bar{grid-template-columns:7.5em 1fr 2.5em}
.gteam .sv-n{min-width:0}
.gt-guess{display:flex;align-items:center;gap:.8em;padding:.5em 0;border-top:1px solid var(--line)}
.gt-guess:first-child{border-top:0;padding-top:0}
.gt-g{flex:1;min-width:0;font-weight:700}
.gt-n{font-variant-numeric:tabular-nums;color:var(--ink-mid);min-width:2em;text-align:right}
/* the same size as "Count as right" in the rows that have it, so every row is the same height and
   the words line up; a close spelling in gold, as one to look at */
.gt-right{flex:none;min-width:13em;text-align:center;background:#EAF4EE;color:var(--green);font-weight:800;font-size:.8em;
  border:2px solid transparent;border-radius:.6em;padding:.35em .9em}
.gt-right.close{background:#FFF4D6;color:#7A5418}
.gt-count{flex:none;min-width:13em;font-size:.8em}
/* Not right: quiet, a word rather than a button, since it takes back what the row says */
.gt-not{flex:none;min-width:6.5em;font-size:.8em;font-weight:700;text-align:left;background:none;border:0;padding:.35em .2em;
  color:var(--ink-mid);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.gt-not:hover{color:var(--warn)}
.gt-guesses+.say:not(:empty){margin-top:.7em}
/* the weekdays side by side where they fit whole ("Wednesday" broke in two at a fifth of the card) */
.g-dayopts{grid-template-columns:1fr}
.g-dayopts .opt{padding:.65em .8em;gap:.55em}
.g-dayopts .opt-words{overflow-wrap:normal}
@container stage (min-width:600px){.g-dayopts{grid-template-columns:repeat(auto-fit,minmax(8.8em,1fr))}.g-dayopts.three{grid-template-columns:repeat(3,1fr)}}
.gteam #gt-alts{min-height:5.2em}
.gteam .tform .field+.field{margin-top:1.1em}
.g-confirm .wiz-nav .btn-quiet{flex:0 0 auto;white-space:nowrap}
@container stage (max-width:599px){
  /* a telephone: the day and its button on one line, the clue the card's full width under them */
  .gt-row{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .gt-day{grid-column:1;grid-row:1;padding-top:0}
  .gt-row .change{grid-column:2;grid-row:1}
  .gt-text{grid-column:1 / -1;grid-row:2}
  .gt-fact{grid-template-columns:1fr}
  .gteam .sv-bar{grid-template-columns:1fr auto}
  /* a guess and its count on one line, whether it counts under them */
  .gt-guess{flex-wrap:wrap;row-gap:.35em}
  .gt-g{flex-basis:calc(100% - 3em)}
  .gt-right,.gt-count{min-width:0}
  .gt-not.none{display:none}
}