/* Everything a writer's look can change beyond site.css, the gadgets that sit in a sidebar, and
   the writer's desk. Loaded after site.css.

   The vocabulary is what Chobots fan blogs did between 2008 and 2012: a loud page colour or a
   tiled background, a header picture, snow falling over the page, a scrolling welcome, and a
   sidebar of gadgets (followers, archive, a hit counter, "Am I online?", a poll, a blogroll).
   Every value below is a key from src/design.mjs or src/widgets.mjs; the two free-form colours
   arrive through /look.css as --page-custom and the accent's roles. */

/* ==== The page behind everything ============================================================
   "cosmic" is site.css's stage and follows the reader's Light or Space. Any other page is the
   writer's own colour, the same for every reader, so the sky's extras step aside. */
:root[data-page="black"]     { --page-bg: #000000; }
:root[data-page="white"]     { --page-bg: #ffffff; }
:root[data-page="royal"]     { --page-bg: #3a00cc; }
:root[data-page="ocean"]     { --page-bg: #0066cc; }
:root[data-page="skyblue"]   { --page-bg: #76c3e9; }
:root[data-page="grass"]     { --page-bg: #03ab1f; }
:root[data-page="forest"]    { --page-bg: #01613b; }
:root[data-page="lime"]      { --page-bg: #caf99b; }
:root[data-page="rose"]      { --page-bg: #ce436e; }
:root[data-page="grape"]     { --page-bg: #9c36c6; }
:root[data-page="tangerine"] { --page-bg: #f79443; }
:root[data-page="sand"]      { --page-bg: #c0a154; }
:root[data-page="custom"]    { --page-bg: var(--page-custom, #04071c); }
:root[data-page]:not([data-page="cosmic"]) .site-shell::before,
:root[data-page]:not([data-page="cosmic"]) .site-shell::after { display: none; }

/* Words that sit straight on the page (only the footer and the report link do) get a frosted
   plate, so they read on any colour in either theme. */
:root[data-page]:not([data-page="cosmic"]) .site-foot p,
:root[data-page]:not([data-page="cosmic"]) .report > summary {
  display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.site-foot p { margin: 0; }

/* ==== A pattern tiled over the page ==========================================================
   Drawn on the shell's second layer in the page's own ink: light on a dark page, dark on a light
   one (data-ink for the writer's page, the reader's theme for the Chobots sky). */
:root { --pattern-ink: rgba(255, 255, 255, 0.16); }
:root[data-theme="light"], :root[data-ink="dark"] { --pattern-ink: rgba(11, 29, 69, 0.13); }
:root[data-ink="light"] { --pattern-ink: rgba(255, 255, 255, 0.16); }
:root[data-pattern]:not([data-pattern="none"]) .site-shell::after { display: block; inset: 0; animation: none; }
:root[data-pattern="stars"] .site-shell::after, :root[data-pattern="hearts"] .site-shell::after,
:root[data-pattern="clovers"] .site-shell::after, :root[data-pattern="confetti"] .site-shell::after {
  background: var(--pattern-ink); -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
:root[data-pattern="stars"] .site-shell::after    { -webkit-mask-image: url("../img/patterns/star.svg"); mask-image: url("../img/patterns/star.svg"); }
:root[data-pattern="hearts"] .site-shell::after   { -webkit-mask-image: url("../img/patterns/heart.svg"); mask-image: url("../img/patterns/heart.svg"); }
:root[data-pattern="clovers"] .site-shell::after  { -webkit-mask-image: url("../img/patterns/clover.svg"); mask-image: url("../img/patterns/clover.svg"); }
:root[data-pattern="confetti"] .site-shell::after { -webkit-mask-image: url("../img/patterns/confetti.svg"); mask-image: url("../img/patterns/confetti.svg"); }
:root[data-pattern="dots"] .site-shell::after {
  background: radial-gradient(circle, var(--pattern-ink) 0 7px, transparent 8px) 0 0 / 48px 48px, radial-gradient(circle, var(--pattern-ink) 0 7px, transparent 8px) 24px 24px / 48px 48px;
}
:root[data-pattern="stripes"] .site-shell::after { background: repeating-linear-gradient(135deg, var(--pattern-ink) 0 16px, transparent 16px 48px); }
:root[data-pattern="checks"] .site-shell::after  { background: conic-gradient(var(--pattern-ink) 25%, transparent 0 50%, var(--pattern-ink) 0 75%, transparent 0) 0 0 / 64px 64px; }
:root[data-pattern="zigzag"] .site-shell::after {
  background:
    linear-gradient(135deg, var(--pattern-ink) 25%, transparent 25%) -24px 0 / 48px 48px,
    linear-gradient(225deg, var(--pattern-ink) 25%, transparent 25%) -24px 0 / 48px 48px,
    linear-gradient(315deg, var(--pattern-ink) 25%, transparent 25%) 0 0 / 48px 48px,
    linear-gradient(45deg, var(--pattern-ink) 25%, transparent 25%) 0 0 / 48px 48px;
}
:root[data-pattern="bubbles"] .site-shell::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 16px, var(--pattern-ink) 17px 20px, transparent 21px) 0 0 / 96px 96px,
    radial-gradient(circle at 50% 50%, transparent 0 8px, var(--pattern-ink) 9px 11px, transparent 12px) 48px 56px / 96px 96px;
}

/* ==== Falling things ==========================================================================
   One fixed layer under the panels, never over the words. A tile slides by exactly its own
   height, so the loop has no seam. */
.site-shell > .effect { position: fixed; inset: -200px 0 0 0; z-index: 0; pointer-events: none; }
:root[data-effect="snow"] .effect {
  background:
    radial-gradient(circle, #ffffff 0 3px, transparent 4px) 0 0 / 130px 200px,
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 2px, transparent 3px) 60px 90px / 170px 200px,
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 4px, transparent 5px) 30px 40px / 230px 200px;
  filter: drop-shadow(0 0 2px rgba(60, 110, 170, 0.5));
  animation: fall 14s linear infinite;
}
:root[data-effect="bubbles"] .effect {
  background:
    radial-gradient(circle, transparent 0 9px, rgba(255, 255, 255, 0.7) 10px 11px, transparent 12px) 0 0 / 150px 200px,
    radial-gradient(circle, transparent 0 5px, rgba(190, 235, 255, 0.8) 6px 7px, transparent 8px) 80px 100px / 190px 200px;
  filter: drop-shadow(0 0 2px rgba(40, 110, 180, 0.5));
  animation: rise 18s linear infinite;
}
:root[data-effect="sparkles"] .effect, :root[data-effect="hearts"] .effect, :root[data-effect="leaves"] .effect {
  -webkit-mask-repeat: repeat; mask-repeat: repeat; animation: fall 20s linear infinite;
}
:root[data-effect="sparkles"] .effect { background: #ffd65a; -webkit-mask-image: url("../img/patterns/star.svg"); mask-image: url("../img/patterns/star.svg"); -webkit-mask-size: 220px 200px; mask-size: 220px 200px; animation: fall 26s linear infinite, twinkle 2.400s ease-in-out infinite alternate; }
:root[data-effect="hearts"] .effect   { background: #ff7fb8; -webkit-mask-image: url("../img/patterns/heart.svg"); mask-image: url("../img/patterns/heart.svg"); -webkit-mask-size: 180px 200px; mask-size: 180px 200px; }
:root[data-effect="leaves"] .effect   { background: #e8862a; -webkit-mask-image: url("../img/patterns/leaf.svg"); mask-image: url("../img/patterns/leaf.svg"); -webkit-mask-size: 240px 200px; mask-size: 240px 200px; }
@keyframes fall { to { transform: translate3d(0, 200px, 0); } }
@keyframes rise { from { transform: translate3d(0, 200px, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }

/* ==== Lettering: faces a browser already has, beside the two Chobots ones ==================== */
/* System faces have real bold weights; let the browser use them (site.css switches synthesis off
   for the Chobots faces, which ship one weight each). */

/* ==== Where the gadgets go ==================================================================== */
:root[data-side="left"] .blog-body { grid-template-columns: 300px minmax(0, 1fr); }
:root[data-side="left"] .blog-main { order: 2; }
:root[data-side="below"] .blog-body { grid-template-columns: minmax(0, 1fr); }
:root[data-side="below"] .blog-side { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }

/* ==== More panels and pictures ================================================================ */
:root[data-cards="boxy"] .panel, :root[data-cards="boxy"] .hero, :root[data-cards="boxy"] .plate, :root[data-cards="boxy"] .tile { border-radius: 4px; }
.art-rainbow { background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 60%), linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #7be495, #5bc0eb, #9b5de5); }
.art-night {
  background:
    linear-gradient(0deg, #0b1026 0 26%, transparent 26%),
    repeating-linear-gradient(90deg, #0b1026 0 46px, transparent 46px 60px, #0b1026 60px 96px, transparent 96px 104px) 0 100% / 100% 48% no-repeat,
    radial-gradient(circle at 80% 22%, #fff6c8 0 22px, rgba(255, 244, 200, 0.25) 23px 46px, transparent 47px),
    var(--stars), linear-gradient(180deg, #0a0f2e 0%, #2b1b5e 60%, #6b2f7f 100%);
}

/* ==== Gadgets ================================================================================= */
.btn.wide { width: 100%; min-height: 52px; font-size: 17px; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.link-list a { font-weight: 800; }
.words { margin: 0; overflow-wrap: anywhere; }
.writer-name + .chips + .words { margin-top: 4px; }

/* The hit counter the old blogs wore: seven digits on little black tiles. */
.odometer { display: flex; gap: 3px; margin: 0; }
.odometer b {
  display: grid; place-items: center; width: 28px; height: 40px; border-radius: 6px; color: #ffe27a;
  background: linear-gradient(180deg, #2a2a35 0 49%, #0c0c12 51% 100%); border: 1px solid rgba(255, 255, 255, 0.25);
  font: 800 22px/1 "Courier New", Courier, monospace;
}

.online { display: flex; gap: 10px; align-items: center; margin: 0; font-weight: 700; }
.online .dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #8793a8; border: 2px solid rgba(255, 255, 255, 0.7); }
.online.yes .dot { background: #3ddc6b; box-shadow: 0 0 0 4px rgba(61, 220, 107, 0.25); animation: twinkle 1.200s ease-in-out infinite alternate; }

.poll-question { margin: 0 0 12px; font: 800 17px/1.25 var(--display); color: var(--heading); overflow-wrap: anywhere; }
.poll-results { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.poll-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-weight: 700; overflow-wrap: anywhere; }
.poll-results li.mine > span:first-child { color: var(--accent-text); }
.poll-results progress { grid-column: 1; width: 100%; height: 12px; border: 0; border-radius: 999px; overflow: hidden; background: var(--tile-bg-hi); accent-color: var(--band-top); }
.poll-results progress::-webkit-progress-bar { background: var(--tile-bg-hi); }
.poll-results progress::-webkit-progress-value { background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); border-radius: 999px; }
.poll-results progress::-moz-progress-bar { background: var(--band-top); border-radius: 999px; }
.poll-results li > .meta { grid-column: 2; grid-row: 2; }
.poll-form label.check { margin-bottom: 8px; }
.countdown { margin: 0; }
.countdown strong { display: inline; margin-right: 6px; }

/* A line that scrolls across, as <marquee> did. Stops for anyone who asks for less motion. */
.marquee { overflow: hidden; margin: 0 0 20px; padding: 10px 0; border-radius: 999px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); border: 2px solid rgba(255, 255, 255, 0.5); white-space: nowrap; }
/* (It begins part of the way across: started from the far edge, the bar was empty for the first seconds of every visit.) */
.marquee span { display: inline-block; padding-left: 100%; font: 800 16px/1.2 var(--display); animation: scroll-left 16s linear -5s infinite; }
@keyframes scroll-left { to { transform: translate3d(-100%, 0, 0); } }
.marquee:hover span, .marquee:focus-within span, .marquee:focus span { animation-play-state: paused; }

.sticky-note { margin: 0 6px 22px; padding: 18px 16px 16px; background: #fff3a8; color: #3a2b00; border-radius: 3px 3px 18px 3px; box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.22); transform: rotate(-2deg); font: 700 16px/1.4 var(--font-text); }
.sticky-note p { margin: 0; overflow-wrap: anywhere; }

/* ==== The writer's desk ======================================================================= */
.save-bar { position: sticky; bottom: 12px; z-index: 5; padding: 10px; margin-bottom: 20px; border-radius: 999px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); width: fit-content; }

.gadget-row { padding: 16px; }
.gadget-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 6px; }
.gadget-head .chips { margin: 0; flex: 1 1 auto; }
.gadget-head .actions { margin-left: auto; }
.gadget-row .form { margin-top: 12px; }
/* A gadget's boxes are folded away until they are wanted ("Change it"), a save comes back to the
   gadget it was for, and adding one is a press from the top of the list. */
.gadget-row { scroll-margin-top: 16px; }
.gadget-row > .meta { margin-bottom: 6px; }
.gadget-fold > summary, .picker-more > summary { cursor: pointer; width: fit-content; padding: 4px 0; font-weight: 800; color: var(--accent-text); }
.picker-more { margin-top: 18px; }
.picker-more > summary { color: var(--muted); }
.picker-more > .picker { margin: 12px 0 0; }
.gadget-jump { justify-content: flex-end; margin: 0 0 12px; }
#add-gadget { scroll-margin-top: 16px; }

/* A look in one press: the same chips as the pickers, but each is a button. */
.presets { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); margin-bottom: 12px; }
button.choice {
  position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 8px; cursor: pointer; text-align: left;
  border-radius: var(--radius); background: var(--tile-bg); border: 2px solid var(--tile-edge); font: 800 13px/1.2 var(--display); color: var(--chip-ink);
}
button.choice:hover:not(:disabled) { background: var(--grad-gold); color: #3a2500; border-color: rgba(255, 255, 255, 0.85); }
button.choice:disabled { cursor: default; }
.preset .swatch { height: 64px; }
.swatch.preset-stage     { background: var(--stars), linear-gradient(180deg, #04071c, #164a9a); }
.swatch.preset-minima    { background: radial-gradient(circle, #ffffff 0 1px, transparent 2px) 0 0 / 22px 22px, #000000; }
.swatch.preset-meadow    { background: radial-gradient(ellipse 80% 60% at 30% 120%, #3fae48 0 62%, transparent 63%), linear-gradient(180deg, #58b4f2, #bfe8ff); }
.swatch.preset-thisaway  { background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 4px, transparent 5px) 0 0 / 18px 18px, #ce436e; }
.swatch.preset-denim     { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 18px), #0066cc; }
.swatch.preset-watermark { background: radial-gradient(circle, rgba(11, 29, 69, 0.2) 0 5px, transparent 6px) 0 0 / 24px 24px, #c0a154; }
.swatch.preset-awesome   { background: linear-gradient(0deg, #000000 0 40%, transparent 40%), linear-gradient(90deg, #f08a1c, #b85400); box-shadow: inset 0 0 0 2px #f08a1c; }
.swatch.preset-window    { background: linear-gradient(0deg, #f5dfa0 0 30%, #1aa3d8 30% 55%, #76c3e9 55%); }
.swatch.preset-arcade    { background: conic-gradient(rgba(255, 255, 255, 0.2) 25%, transparent 0 50%, rgba(255, 255, 255, 0.2) 0 75%, transparent 0) 0 0 / 20px 20px, #3a00cc; box-shadow: inset 0 0 0 3px #ffd24a; }
.swatch.preset-snowday   { background: radial-gradient(circle, #ffffff 0 3px, transparent 4px) 0 0 / 20px 20px, #76c3e9; }
.swatch.preset-comic     { background: radial-gradient(circle, rgba(11, 29, 69, 0.2) 0 4px, transparent 5px) 0 0 / 16px 16px, #f79443; box-shadow: inset 0 0 0 3px #d6322e; }
.swatch.preset-valentine { background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0 4px, transparent 5px) 0 0 / 20px 20px, linear-gradient(180deg, #9c36c6, #e2569f); }

/* Swatches for the newer pickers. */
.picker-page .swatch, .picker-pattern .swatch, .picker-effect .swatch, .picker-side .swatch { height: 40px; }
.swatch.page-cosmic    { background: linear-gradient(90deg, #0b1d45 0 50%, #6cb9f2 50%); }
.swatch.page-black     { background: #000000; }
.swatch.page-white     { background: #ffffff; }
.swatch.page-royal     { background: #3a00cc; }
.swatch.page-ocean     { background: #0066cc; }
.swatch.page-skyblue   { background: #76c3e9; }
.swatch.page-grass     { background: #03ab1f; }
.swatch.page-forest    { background: #01613b; }
.swatch.page-lime      { background: #caf99b; }
.swatch.page-rose      { background: #ce436e; }
.swatch.page-grape     { background: #9c36c6; }
.swatch.page-tangerine { background: #f79443; }
.swatch.page-sand      { background: #c0a154; }
.swatch.page-custom, .swatch.accent-custom { background: conic-gradient(#ff5f6d, #ffc371, #f9f871, #7be495, #5bc0eb, #9b5de5, #ff5f6d); }
.swatch[class*="pattern-"], .swatch[class*="effect-"] { background-color: #1a55b8; }
.swatch.pattern-stars    { background-image: radial-gradient(circle, #ffffff 0 1.500px, transparent 2.500px); background-size: 16px 14px; }
.swatch.pattern-dots     { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 4px, transparent 5px); background-size: 16px 16px; }
.swatch.pattern-stripes  { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 5px, transparent 5px 14px); }
.swatch.pattern-checks   { background-image: conic-gradient(rgba(255, 255, 255, 0.4) 25%, transparent 0 50%, rgba(255, 255, 255, 0.4) 0 75%, transparent 0); background-size: 18px 18px; }
.swatch.pattern-zigzag   { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%), linear-gradient(225deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%); background-size: 16px 16px; }
.swatch.pattern-bubbles  { background-image: radial-gradient(circle, transparent 0 4px, rgba(255, 255, 255, 0.6) 5px 6px, transparent 7px); background-size: 20px 20px; }
.swatch.pattern-hearts, .swatch.effect-hearts { background-image: url("../img/patterns/heart.svg"); background-size: 34px; background-color: #ff9ccf; }
.swatch.pattern-clovers  { background-image: url("../img/patterns/clover.svg"); background-size: 34px; background-color: #6fe38a; }
.swatch.pattern-confetti { background-image: url("../img/patterns/confetti.svg"); background-size: 40px; background-color: #ffd65a; }
.swatch.effect-snow      { background-image: radial-gradient(circle, #ffffff 0 2.500px, transparent 3.500px); background-size: 18px 15px; background-color: #76c3e9; }
.swatch.effect-sparkles  { background-image: url("../img/patterns/star.svg"); background-size: 40px; background-color: #ffd65a; }
.swatch.effect-bubbles   { background-image: radial-gradient(circle, transparent 0 4px, #ffffff 5px 6px, transparent 7px); background-size: 22px 18px; }
.swatch.effect-leaves    { background-image: url("../img/patterns/leaf.svg"); background-size: 44px; background-color: #f0a04a; }
.swatch.side-right { background: linear-gradient(90deg, var(--muted) 0 62%, transparent 62% 68%, var(--accent-text) 68%); opacity: 0.8; }
.swatch.side-left  { background: linear-gradient(90deg, var(--accent-text) 0 32%, transparent 32% 38%, var(--muted) 38%); opacity: 0.8; }
.swatch.side-below { background: linear-gradient(180deg, var(--muted) 0 56%, transparent 56% 66%, var(--accent-text) 66%); opacity: 0.8; }
.swatch.art-rainbow, .swatch.art-night { background-size: cover; }
/* Lettering shows itself. */
.picker-heading .swatch, .picker-text .swatch { display: grid; place-items: center; height: 44px; background: var(--tile-bg-hi); }
.picker-heading .swatch::after, .picker-text .swatch::after { content: "Chobots"; font-size: 19px; font-weight: 800; color: var(--heading); }
.swatch.heading-crow::after { font-family: "ChoUiDisplay", "Arial Black", sans-serif; }
.swatch.text-wave::after { font-family: "ChoUiText", "Century Gothic", sans-serif; font-weight: 500; }
.swatch.heading-round::after, .swatch.text-round::after { font-family: "Trebuchet MS", "Lucida Grande", sans-serif; }
.swatch.heading-serif::after, .swatch.text-serif::after { font-family: Georgia, "Times New Roman", serif; }
.swatch.heading-comic::after, .swatch.text-comic::after { font-family: "Comic Sans MS", "Chalkboard SE", cursive; }
.swatch.heading-type::after { font-family: "Courier New", Courier, monospace; }
.swatch.heading-wide::after, .swatch.text-wide::after { font-family: Verdana, Tahoma, sans-serif; font-size: 16px; }
.picker-text .swatch::after { font-weight: 500; }

.own-colour { grid-column: 1 / -1; display: flex !important; gap: 12px; align-items: center; margin: 4px 0 0 !important; font: 700 15px/1.3 var(--font-text) !important; color: var(--text) !important; }
.own-colour input { width: 56px; height: 36px; padding: 0; border: 2px solid var(--chip-edge); border-radius: 10px; background: none; cursor: pointer; }
.own-colour.locked { opacity: 0.6; }
.own-colour.locked input { cursor: default; }

/* Choosing a gadget: a list of chips, each saying what it is. */
.picker-gadget { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.choice-about { font: 500 13px/1.35 var(--font-text); opacity: 0.85; }

/* The owner's switches: three pills, the chosen one gold. */
.rule { margin: 0 0 18px; padding: 0; border: 0; }
.rule legend { padding: 0; font: 800 16px/1.3 var(--display); color: var(--heading); }
.rule .meta { margin: 2px 0 8px; }
.rule .chips { margin: 8px 0 0; }
.form label.pill-choice { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.pill-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink); font: 800 14px/1 var(--display); }
.pill-choice input:checked + span { background: var(--grad-gold); border-color: rgba(255, 255, 255, 0.8); color: #3a2500; box-shadow: 0 2px 0 var(--gold-lip); }
.pill-choice input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pill-choice input:disabled + span { opacity: 0.6; cursor: default; }
.pill-choice input:disabled:checked + span { opacity: 1; }
.tile.row select, .gadget-head select { padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--chip-edge); background: var(--field-bg); color: var(--text); font: 700 14px/1 var(--font-text); }

/* ==== The writer's desk: the frame ============================================================
   Which blog and what I am there, a way to every part of it I may use, and Write a post always
   one press away. Down the side on a wide screen; across the top on a narrow one, and on a page
   that needs the width (.desk.focus, the look studio). */
.wrap.wide { width: min(100% - 24px, 1320px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.desk { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.desk-main { min-width: 0; }
.desk-nav { position: sticky; top: 12px; display: grid; gap: 14px; margin: 0; padding: 16px; }
.desk-id h1 { margin: 0 0 4px; font: 800 22px/1.15 var(--display); color: var(--heading); overflow-wrap: anywhere; }
.desk-address { display: block; margin-bottom: 10px; font-size: 0.9rem; font-weight: 700; overflow-wrap: anywhere; }
.desk-copy { margin: -4px 0 10px; }
.desk-id .chips { margin: 0; }
.desk-write { width: 100%; min-height: 48px; }
.desk-links { display: grid; gap: 4px; }
.desk-link { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid transparent; color: var(--text); text-decoration: none; font: 800 16px/1 var(--display); }
.desk-link:hover { background: var(--tile-bg-hi); }
.desk-link.on { background: var(--grad-gold); color: #3a2500; border-color: rgba(255, 255, 255, 0.8); box-shadow: 0 2px 0 var(--gold-lip); }
.desk-foot { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--panel-line); }
.desk.focus { grid-template-columns: minmax(0, 1fr); }
.desk.focus .desk-nav { position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.desk.focus .desk-id { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.desk.focus .desk-id h1, .desk.focus .desk-address { margin: 0; }
.desk.focus .desk-write { grid-column: 2; grid-row: 1; width: auto; }
.desk.focus .desk-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--panel-line); }
.desk.focus .desk-foot { grid-column: 1 / -1; }
/* ...and it keeps to which blog this is and where else to go: how much room its pictures take
   and the way to the tour are one press away on every other page, and here they pushed the
   studio most of a laptop's screen down. */
.desk.focus .storage, .desk.focus .desk-foot { display: none; }

.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 20px; }
.stat-tile { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--panel-bg); border: 3px solid var(--panel-rim); box-shadow: inset 0 0 0 2px var(--panel-ring); }
.stat-tile strong { display: block; font: 800 32px/1 var(--display); color: var(--heading); }
.stat-tile span { color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.first-post { margin-top: 14px; }

/* ==== Writing a post ==========================================================================
   The sheet is the post: a big title with no box round it, then the page. With script on, the
   page is typed on as it will look (.editor-visual wears .story, the blog's own post styles);
   with it off, the plain-text box shows instead. */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.post-rail { position: sticky; top: 12px; }
/* Not clipped like other panels: the toolbar inside it sticks to the top of the window. */
.post-sheet { overflow: visible; padding: clamp(16px, 2.400vw, 28px); }
.form label.title-label { margin: 0; }
.title-field { display: block; width: 100%; padding: 4px 0 10px; border: 0; border-bottom: 2px solid var(--panel-line); border-radius: 0; background: transparent; color: var(--heading); font: 800 clamp(26px, 3.400vw, 38px)/1.15 var(--display); }
.title-field::placeholder { color: var(--muted); opacity: 0.7; }
.title-field:focus-visible { outline: 0; box-shadow: none; border-bottom-color: var(--accent-text); }
.post-address { margin: 8px 0 0; overflow-wrap: anywhere; }
.post-address strong { color: var(--accent-text); }
.editor { margin-top: 18px; }
.editor-bar { position: sticky; top: 8px; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; margin-bottom: 14px; border-radius: 16px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); }
.tool { min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; color: var(--chip-ink); font: 800 14px/1 var(--display); cursor: pointer; }
.tool:hover { background: var(--chip-bg-hi); border-color: var(--chip-edge); }
.tool[aria-pressed="true"] { background: var(--grad-gold); color: #3a2500; border-color: rgba(255, 255, 255, 0.8); }
.tool b, .tool i { font: 700 18px/1 Georgia, "Times New Roman", serif; }
.tool i { font-style: italic; }
.tool-gap { align-self: stretch; width: 1.5px; margin: 6px 4px; background: var(--chip-edge); }
.tool-gap.grow { flex: 1; background: none; }
.tool-label { padding: 0 2px 0 4px; color: var(--muted); font: 700 13px/1 var(--font-text); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--tile-bg); border: 1.5px solid var(--tile-edge); }
.seg .tool { min-height: 34px; min-width: 0; padding: 0 9px; }
/* Paint: "Colour" opens ten dots beside itself, in the row (eight colours, the highlighter, "No
   colour"). In the row and not over it, so the bar's own guard keeps the writer's selection, and
   nothing has to pop out of a row that slides on a phone. Each dot wears the class the painted
   word will have (site.css), so it is the shade words get on this page. */
.tool[aria-expanded="true"] { background: var(--chip-bg-hi); border-color: var(--chip-edge); }
.paints { display: inline-flex; gap: 2px; align-items: center; }
.paints[hidden] { display: none; }
.tool[data-paint] { min-width: 40px; padding: 0; }
.paint-dot { display: block; width: 22px; height: 22px; margin: auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1.5px var(--chip-edge); }
.paint-dot.cho-mark { width: 26px; height: 18px; padding: 0; margin: auto; border-radius: 5px 3px 6px 4px; }
.paint-dot.none { background: linear-gradient(to top right, transparent 44%, var(--danger) 45% 55%, transparent 56%); }
/* A dot is a swatch: where the system chooses the colours it keeps its own, or all ten are empty. */
@media (forced-colors: active) { .paint-dot { forced-color-adjust: none; } }
/* On the page a painted run is a <font> (editor.js). One that says "No colour" is drawn as plain
   words are, whatever paint it sits inside. */
.editor-visual font.cho-ink-none { color: var(--text); }
.editor-visual :is(h2, h3, h4, h5, h6) font.cho-ink-none { color: var(--heading); }
.editor-visual { min-height: 420px; padding: 4px 2px 48px; cursor: text; }
.editor-visual:focus-visible { outline: 0; box-shadow: none; }
.editor:has(.editor-visual:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 6px; border-radius: 10px; }
/* An empty page says where to write (editor.js marks it; the words are the plain box's own). */
.editor-visual { position: relative; }
.editor-visual.is-empty::before { content: attr(data-placeholder); position: absolute; top: 4px; left: 2px; color: var(--muted); opacity: 0.75; pointer-events: none; }
.editor-visual > :first-child { margin-top: 0; }
/* The part of the page a refusal is in (editor.js, markRefused): ringed in the colour of the
   notice that says why, until the writer types. */
.editor-visual > .refused { outline: 2px dashed var(--danger); outline-offset: 6px; border-radius: 4px; }
.editor-visual p { margin: 0 0 14px; }
.editor-visual .cho-card { position: relative; display: flex; width: fit-content; padding-right: 42px; -webkit-user-select: none; user-select: none; }
.card-x { position: absolute; right: 8px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); border: 0; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); font: 800 17px/1 var(--display); cursor: pointer; }
.card-x:hover { background: #c62828; color: #ffffff; }
.editor-text { min-height: 420px; font-family: "Courier New", Courier, monospace; }
.editor-count { margin: 8px 0 0; text-align: right; }
.editor-count.over { color: var(--danger); }
/* What must never be written, under the page where it would be written (it was only in a panel far below Publish). */
.editor-safety { margin: 10px 0 0; font-weight: 700; }
.post-sheet .help { margin: 14px 0 0; }
.stack { display: grid; gap: 10px; }
.stack .btn { width: 100%; }
.tips { display: grid; gap: 8px; margin: 0; padding-left: 1.200em; color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.card-dialog { width: min(92vw, 420px); margin: auto; padding: 22px; color: var(--text); }
.card-dialog::backdrop { background: rgba(2, 8, 24, 0.62); }
.card-dialog h2 { margin: 0 0 14px; font: 800 22px/1.2 var(--display); color: var(--heading); }

/* ==== The look studio =========================================================================
   A workshop: a bar of tools across the top, a rail of parts down the left, one part's settings
   in a panel of their own that scrolls by itself, and the blog filling the rest of the screen.
   Without script every part is on the page in order, and the rail and the tools are not. */
.studio-top { position: sticky; top: 8px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; padding: 8px 14px; border-radius: 18px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.studio-where { flex: 1 1 auto; margin: 0; font: 800 18px/1.2 var(--display); color: var(--heading); }
.studio-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.studio-tools .btn:disabled { opacity: 0.45; cursor: default; }
.studio-work { display: grid; grid-template-columns: 84px minmax(300px, 400px) minmax(0, 1fr); gap: 14px; align-items: start; }
.studio-rail { display: none; position: sticky; top: 72px; gap: 4px; }
/* (No taller than the panel beside it: eleven parts are taller than a laptop's screen, and the last of them hung under the studio.) */
.studio.live .studio-rail { display: grid; align-content: start; max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.studio-rail button { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 7px; border-radius: 12px; border: 1.5px solid transparent; background: none; color: var(--text); font: 800 11px/1.1 var(--display); cursor: pointer; }
.studio-rail button:hover { background: var(--tile-bg-hi); }
.studio-rail button[aria-pressed="true"] { background: var(--grad-gold); color: #3a2500; border-color: rgba(255, 255, 255, 0.8); box-shadow: 0 2px 0 var(--gold-lip); }
.studio-rail button[aria-pressed="true"] .disc { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.studio-rail button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.studio-panel { min-width: 0; padding: 14px; border-radius: var(--radius-lg); background: var(--panel-bg); border: 3px solid var(--panel-rim); box-shadow: inset 0 0 0 2px var(--panel-ring); }
.studio.live .studio-panel { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.studio-search { display: none; margin: 0 0 12px; }
.studio.live .studio-search { display: block; }
.studio-search input { width: 100%; }
.studio-section > h3 { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; font: 800 17px/1.2 var(--display); color: var(--heading); }
.studio-section > h3 .disc { width: 32px; height: 32px; }
.studio-section > .meta { margin: 0 0 12px; }
.studio-section + .studio-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--panel-line); }
.studio.live .studio-section + .studio-section { margin-top: 0; padding-top: 0; border-top: 0; }
.searching .studio-section + .studio-section { margin-top: 18px !important; padding-top: 14px !important; border-top: 1px solid var(--panel-line) !important; }
.studio-panel .picker { gap: 6px; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); margin-bottom: 16px; }
.studio-panel .picker.big { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.studio-panel .picker-artpos, .studio-panel .picker-platepos { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 270px; }
.studio-panel .picker legend { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; width: 100%; margin-bottom: 8px; font-size: 14px; }
.studio-panel .picker legend output { flex: none; max-width: 55%; font: 700 12px/1.3 var(--font-text); color: var(--accent-text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-panel .form .picker .choice, .studio-panel .picker .choice { gap: 5px; padding: 5px; border-width: 1.5px; font-size: 11px; line-height: 1.15; }
.studio-panel .picker .swatch { height: 36px; border-radius: 8px; }
.studio-panel .picker.big .swatch { height: 58px; }
.studio-panel .picker-era .swatch { height: 68px; }
.studio-panel .choice-about { display: none; }
.studio-panel .lock { padding: 2px 6px; font-size: 10px; }
.studio-panel .presets { gap: 6px; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); margin-bottom: 0; }
.studio-panel .presets .choice { gap: 5px; padding: 5px; font-size: 11px; }
.studio-panel .preset .swatch { height: 58px; }
.studio-panel .own-colour { margin-top: 2px !important; font-size: 13px !important; }
.studio-panel .own-colour input { width: 44px; height: 30px; }
.studio-panel .picker-note { font-size: 12px; }
.field-find { grid-column: 1 / -1; margin: 0 0 4px; padding: 6px 10px; font-size: 13px; }
.studio-panel .choice[hidden] { display: none; }
button.choice[aria-pressed="true"] { background: var(--grad-gold); color: #3a2500; border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 3px 0 var(--gold-lip); }
.studio-preview { position: sticky; top: 72px; min-width: 0; }
.preview-frame { height: calc(100vh - 118px); min-height: 420px; overflow: hidden; border: 3px solid var(--panel-rim); border-radius: 18px; background: #04071c; }
.preview-frame iframe { display: block; width: 100%; height: 100%; border: 0; transform-origin: 0 0; }
.studio-preview > .meta { margin: 6px 0 0; }
/* The blog inside the frame is for looking at: nothing in it can be pressed. */
:root[data-preview] a, :root[data-preview] button, :root[data-preview] summary, :root[data-preview] input, :root[data-preview] select { pointer-events: none; }
:root[data-preview] .theme-dock { display: none; }

/* ==== Showing a new writer around (src/tour.mjs) ==============================================
   Getting started is a list on the desk's front page. The tour's coach sits at the top of the page
   a step is about, and numbers the parts of the page it talks about: a part carries data-mark,
   and the desk is .touring while a step is on its own page. */
.desk-foot form { margin: 0; }
.switches { display: grid; gap: 12px; margin-bottom: 16px; }
.form .switches label.check { margin: 0; align-items: flex-start; }
.switches small { margin-top: 2px; }

.start-list { display: grid; gap: 8px; margin: 14px 0 18px; padding: 0; list-style: none; }
.start-list li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-height: 52px; padding: 8px 12px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); font-weight: 800; }
.start-list .tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--muted); color: #ffffff; font-size: 16px; line-height: 1; }
.start-list .done .tick { background: #1f9d55; border-color: #1f9d55; }
.start-list .done .start-what { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.start-what { flex: 1 1 12em; min-width: 0; }
.start-what small { margin-top: 2px; }
.start-tour { padding-top: 16px; border-top: 1px solid var(--panel-line); }
.start-tour p { margin: 0 0 12px; }
.start-tour .actions { margin: 0; }

.coach {
  margin: 0 0 20px; padding: 18px 20px; border-radius: var(--radius-lg); color: #2b1c00;
  background: linear-gradient(180deg, #fff6cf 0%, #ffe9a3 100%); border: 3px solid #e0a000; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.coach-step { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 8px; font: 800 14px/1 var(--display); color: #6b4a00; }
.coach-dots { display: inline-flex; gap: 5px; margin-left: auto; }
.coach-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(107, 74, 0, 0.22); }
.coach-dots .was { background: #b97900; }
.coach-dots .now { background: #2b1c00; box-shadow: 0 0 0 3px rgba(43, 28, 0, 0.2); }
.coach h2 { margin: 0 0 6px; font: 800 clamp(22px, 2.600vw, 28px)/1.15 var(--display); color: #2b1c00; }
.coach p { margin: 0 0 12px; }
.coach-lead { font-size: 1.05rem; font-weight: 700; }
.coach a { color: #0b4fa8; font-weight: 800; }
.coach-points, .coach-ends { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.coach-points { counter-reset: coach; }
.coach-points li { counter-increment: coach; position: relative; min-height: 30px; padding-left: 42px; }
.coach-points li::before {
  content: counter(coach); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #2b1c00; color: #ffe27a; font: 800 15px/1 var(--display);
}
.coach-ends li { padding-left: 22px; position: relative; }
.coach-ends li::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: #b97900; }
.coach-try { padding: 10px 14px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.6); border: 1.5px dashed #b97900; font-weight: 700; }
.coach-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.coach-nav .btn:not(.primary) { background: rgba(255, 255, 255, 0.7); border-color: rgba(43, 28, 0, 0.35); color: #2b1c00; }
.coach-nav .coach-end { margin-left: auto; background: none; border-color: transparent; text-decoration: underline; }
.coach-bar {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0 0 20px; padding: 10px 14px 10px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #fff6cf 0%, #ffe9a3 100%); border: 2px solid #e0a000; color: #2b1c00; font-weight: 700;
}
.coach-bar p { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.coach-bar .btn.ghost { background: none; border-color: rgba(43, 28, 0, 0.35); color: #2b1c00; }

.touring [data-mark] { outline: 3px dashed #ffc21a; outline-offset: 4px; }
.touring [data-mark]:where(:not(.editor-bar, .save-bar, .studio-preview, .panel)) { position: relative; }
.touring [data-mark]::after {
  content: attr(data-mark); position: absolute; z-index: 6; top: -14px; left: -14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #2b1c00; color: #ffe27a; border: 2px solid #ffc21a; font: 800 16px/1 "ChoUiDisplay", "Arial Black", sans-serif; text-shadow: none; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
/* Panels clip what leaves them, so theirs sits where the band's icon is. */
.touring .panel[data-mark]::after, .touring .studio-group[data-mark]::after { top: 9px; left: 9px; width: 42px; height: 42px; font-size: 20px; }
.touring .studio-preview[data-mark]::after { top: 6px; left: 6px; }
.touring .desk-write[data-mark]::after { top: -10px; left: -10px; }
/* Where the corner is the first thing to read, the number takes the other corner. */
.touring .title-label[data-mark]::after { left: auto; right: -10px; }

@media (max-width: 1000px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk .desk-nav { position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .desk .desk-id { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
  .desk .desk-id h1, .desk .desk-address { margin: 0; }
  .desk .desk-write { grid-column: 2; grid-row: 1; width: auto; }
  .desk .desk-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--panel-line); }
  .desk .desk-foot { grid-column: 1 / -1; }
  .post-layout, .studio-work { grid-template-columns: minmax(0, 1fr); }
  .post-rail, .studio-preview, .studio-top, .studio.live .studio-panel { position: static; }
  .studio.live .studio-panel { max-height: none; }
  .studio.live .studio-rail { position: static; display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }
  .studio-rail button { flex: none; min-width: 72px; }
  .touring .studio-preview[data-mark] { position: relative; }
  .studio-preview { order: -1; }
  .preview-frame { height: 52vh; }
}
/* There the studio is one column: a choice was pressed far under the preview it changes, and Save
   was back at the top. So the blog stays in sight above what is being chosen, and the tools stay
   in reach below it. (Flex, not grid: a grid item only sticks inside its own row.) Not without
   script, where nothing in the preview changes; and not on a screen too short to hold it all,
   where everything is simply in order. */
@media (max-width: 1000px) and (min-height: 560px) {
  .studio.live .studio-form, .studio.live .studio-work { display: flex; flex-direction: column; align-items: stretch; }
  .studio.live .studio-preview, .touring .studio.live .studio-preview[data-mark] { position: sticky; top: 6px; z-index: 5; }
  .studio.live .preview-frame { height: 36vh; min-height: 200px; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5); }
  .studio.live .studio-preview > .meta { display: none; }
  .studio.live .studio-top { order: 2; position: sticky; top: auto; bottom: 8px; margin: 12px 0 0; }
}
@media (max-width: 560px) {
  .desk .desk-nav { grid-template-columns: minmax(0, 1fr); }
  .desk .desk-write { grid-column: 1; grid-row: auto; width: 100%; }
  /* The studio's tools in two rows a thumb can reach. What part this is, is said by the rail; the
     preview is a phone's, on a phone; and the blog itself is in the preview. */
  .studio.live .studio-where, .studio.live .studio-tools > a.btn, .studio.live .studio-tools > .seg { display: none; }
  .studio.live .studio-top { gap: 6px; padding: 6px 8px; border-radius: 16px; }
  .studio.live .studio-tools { flex: 1 1 auto; gap: 6px; justify-content: space-between; }
  /* ...and above the studio the desk's card keeps to which blog this is and where else to go:
     the rest of it is one press away, on every other page of the desk. */
  .desk.focus .desk-id .chips, .desk.focus .storage, .desk.focus .desk-foot { display: none; }
  /* On a phone the desk's card was a whole screen before the page it leads to: the blog, a big
     button, seven links in four rows, how full the pictures are, three more buttons. A post's
     title box was off the first screen. Here it is the blog and two rows that slide sideways:
     the parts of the desk, and the ways out of it. (desk.js brings the part that is open into
     sight.) */
  .desk .desk-nav { gap: 10px; padding: 12px; }
  .desk .desk-id h1 { font-size: 19px; }
  .desk .desk-id .chips .chip { min-height: 26px; padding: 2px 9px; font-size: 12px; }
  .desk .desk-links { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: thin; }
  .desk .desk-link { flex: none; min-height: 40px; padding: 0 12px; font-size: 15px; }
  .desk .desk-foot { flex-wrap: nowrap; overflow-x: auto; padding-top: 8px; scrollbar-width: thin; }
  .desk .desk-foot > * { flex: none; }
  .desk .desk-foot .btn { min-height: 36px; white-space: nowrap; }
  /* How full the pictures are is said where pictures are; and where a post or a page is being
     written, "Write a post" and the ways out are not what the screen is for. */
  .desk .storage { display: none; }
  .desk:has(.desk-link.on[href$="/pictures"]) .storage { display: block; }
  .desk:has(.post-form) .desk-write, .desk:has(.post-form) .desk-foot { display: none; }
  /* The editor's tools were four rows that stayed at the top of the screen as the post was
     scrolled: a quarter of a phone, and half of what a keyboard leaves. One row that slides. */
  .editor-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .editor-bar > * { flex: none; }
  .editor-bar .tool-gap.grow { flex: none; width: 1.5px; background: var(--chip-edge); }
  /* Ten dots in a row are wider than a phone, and the last three were out of sight: two rows of
     five, all in sight at once. The bar is two rows tall only while they are open (editor.js
     shuts them when a colour has been given to the words that were selected). */
  .paints { display: inline-grid; grid-template-columns: repeat(5, 40px); }
  /* A card's box (a photo, a postcard, a player) can be taller than a phone: it scrolls, and its
     buttons stay at its foot, in sight. ("Add it" was under the pictures, out of sight.) */
  .card-dialog { max-height: 88vh; overflow: auto; }
  .card-dialog form > .actions { position: sticky; bottom: -22px; margin: 14px -22px -22px; padding: 12px 22px; background: var(--chip-bg-hi); border-top: 1px solid var(--panel-line); }
}

/* ==== Hearts and comments ====================================================================== */
.hearts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--panel-line); }
/* A post's own address, to pass on: a box that takes the whole of it at one press. A span, not a
   field (a field that cannot be typed in still opens a phone's keyboard). */
.share { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--panel-line); color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.share-address { min-width: 0; max-width: 100%; padding: 6px 12px; border-radius: 10px; background: var(--tile-bg); border: 1.5px solid var(--tile-edge); color: var(--text); font: 700 0.92rem/1.3 var(--font-text); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; cursor: text; }
@media print { .share { display: none; } }
/* Where a reader is brought back to after a press (a reaction, a comment, a vote): a little air above it. */
#reactions, #comments, #page-posts, [id^="poll-"], [id^="comment-"] { scroll-margin-top: 18px; }
/* The way to the older conversations, above the newest (render.mjs, commentsPanel). */
.comments-older { justify-content: center; margin: 0 0 16px; }
.heart-count { color: var(--muted); font-weight: 700; }
.heart-count strong { color: var(--heading); font: 800 20px/1 var(--display); }
.comment-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.comment { padding: 12px 14px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); }
.comment.held { border-style: dashed; opacity: 0.85; }
.comment:target { border-color: var(--accent-text); }
.comment-by { margin: 0 0 6px; }
.comment-by strong { font: 800 16px/1.2 var(--display); color: var(--heading); }
.comment-body { margin: 0; overflow-wrap: anywhere; }
.comment-tools { display: flex; gap: 14px; margin-top: 8px; }
.comment-tools form { margin: 0; }
.link-button { min-height: 32px; padding: 6px 4px; border: 0; background: none; color: var(--muted); font: 700 13px/1.2 var(--font-text); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--accent-text); }
.comment-form label { margin-bottom: 10px; }
/* A reply sits under the comment it answers, one step in. Its box is a <details> with a plain form
   in it: a blog's pages run no script. Closed it is one more word beside Remove and Report; open it
   takes a line of its own. */
.comment-tools { flex-wrap: wrap; align-items: baseline; }
.reply-box > summary { display: inline-block; list-style: none; }
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box[open] { flex: 1 0 100%; }
.reply-box[open] > summary { margin-bottom: 10px; color: var(--accent-text); }
.reply-box .actions { margin-bottom: 0; }
.comment-list.replies { margin: 12px 0 0 4px; padding-left: 14px; border-left: 3px solid var(--tile-edge); gap: 10px; }
.replies .comment { background: var(--tile-bg-hi); }
@media (max-width: 560px) {
  .comment-list.replies { margin-left: 0; padding-left: 10px; }
  .replies .comment { padding: 10px 12px; }
}

/* ==== Staff ==================================================================================== */
.staff-columns { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 0; }
.quoted { margin: 8px 0 10px; padding: 8px 12px; border-left: 4px solid var(--panel-line); background: var(--tile-bg-hi); border-radius: 0 10px 10px 0; overflow-wrap: anywhere; }
.staff-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.field.inline-field { flex: 1 1 220px; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 8px 12px; }
/* (The two columns were set here after the rule that makes columns one on a narrow screen, and so
   stayed two on a phone, each too narrow to read.) */
@media (max-width: 860px) { .staff-columns { grid-template-columns: minmax(0, 1fr); } }
.photo-tile > div { min-width: 0; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.log li { padding-bottom: 8px; border-bottom: 1px solid var(--panel-line); overflow-wrap: anywhere; }
/* The team's pages on a phone (render.mjs marks their <main>): what is pressed is as tall as a
   thumb needs. Eighteen of the nineteen things to press on a blog's page for the team were
   under 40px, and "Hide" sat a few pixels from "Put it back". */
@media (max-width: 700px) {
  .team-pages .btn.small, .team-pages .field.inline-field { min-height: 44px; }
}
/* A box that opens first (.ask-box) whose handle is a button: drawn as the button it is. */
.team-pages .ask-box > summary.btn { display: inline-flex; }
/* "Undo", under the line that says what was just done (render.mjs, justDone). */
.undo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: -6px 0 16px; }
.undo .meta { margin: 0; }
/* A ticked box in a row of things to press: no line of its own under it, as a form's labels have. */
.staff-act label.check { margin: 0; }
/* What a row was sent back to say (a hide with no reason), in the row, above its box. */
.team-pages .tile > .notice { margin: 10px 0 0; }
/* "Clear all 16 reports by <a Chobot's name>" under a report: a long name wraps inside the
   button, where every other button is one line. */
/* A reported thing in the queue (render.mjs, staffPage): what it said is on the tile, and all of
   it, as it was reported and as it is now, opens under that. A chip that holds a sentence
   ("Removed from the page by whoever runs the blog, ...: kept for you") is a box with corners,
   not a pill, once it runs to a second line. */
.read-all { margin: 8px 0 10px; }
.read-all > summary { cursor: pointer; width: fit-content; max-width: 100%; font-weight: 800; color: var(--accent-text); }
.read-all > .quoted { margin-top: 8px; }
.report-tile .chips { margin: 8px 0; }
.report-tile .chip { min-width: 0; border-radius: 15px; }
/* Each report of it, and then whose words they are, under a line of its own: on a phone every
   chip is a row, and three readers' reports ran together as fifteen. */
.report-tile .sent-by, .report-tile .written-by { margin: 0; padding: 8px 0; border-top: 1px solid var(--panel-line); }
.report-clear { margin-top: 12px; }
.report-clear > summary.btn { max-width: 100%; padding-top: 6px; padding-bottom: 6px; line-height: 1.2; white-space: normal; text-align: left; overflow-wrap: anywhere; }
/* The list of every blog (render.mjs, staffBlogsPage): a tile a blog, never a table, so that it
   reads on a phone 320 wide. A chip here can hold a reason somebody typed, or a line of names:
   it wraps where every other chip is one line. */
.team-list .find { align-items: flex-end; }
.team-list .find .field { margin-top: 6px; }
.team-rows { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); align-items: start; margin: 0 0 16px; }
.team-rows .tile { min-width: 0; margin: 0; }
.team-row .staff-act > .meta { flex: 1 1 100%; margin: 0; }
.team-row-name { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: 0; }
.team-row-name .meta { overflow-wrap: anywhere; }
.team-row .chips { margin: 10px 0 8px; }
.team-row .chip { min-width: 0; min-height: 30px; padding: 5px 12px; border-radius: 15px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.team-row .chip.on-air { color: var(--green); border-color: currentColor; }
.team-facts { margin: 0; overflow-wrap: anywhere; }
.team-row .ask-box .form { margin-top: 4px; }
/* What is hidden (render.mjs, staffHiddenPage) is drawn as the list of every blog is. A row's
   words, and a picture's own small copy, sit between its chips and what is pressed. */
.team-row > .excerpt, .team-row > .quoted, .team-row > .read-all { margin: 0 0 10px; }
.team-row > .photo-thumb { display: block; width: 96px; margin: 0 0 8px; }
.team-row .staff-act > form { margin: 0; }
/* The team's whole log (render.mjs, staffLogPage). The boxes that narrow it are side by side
   where there is room and one under another on a phone; under a line, the ways to what it was
   about are a row of chips. */
.log-find { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); align-items: end; margin: 0 0 20px; }
.log-find label { margin: 0; }
.log-find .field { margin-top: 6px; }
.log-find .actions { grid-column: 1 / -1; }
.log-ways { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.log-ways .chip { min-height: 28px; padding: 0 11px; font-size: 12px; }
.log + h3 { margin-top: 20px; }
.log + .pager, .log + .meta { margin-top: 16px; }
.log-more { margin: 12px 0 8px; }
/* A picture on the team's pages says more than one on its writer's desk (where it is used, who
   took it down and when, what is pressed): its tile is wider, and never wider than the screen. */
.team-pages .photo-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
/* (On a phone its small copy is above what is said of it: beside it, the box for the reason was
   seven letters wide.) */
@media (max-width: 480px) { .team-pages .photo-tile { grid-template-columns: minmax(0, 1fr); } }

/* ==== Browsing: labels, pages of posts, the directory ========================================= */
.chips.labels { margin: 12px 0 0; }
.post-tile .chips.labels .chip { min-height: 26px; padding: 0 10px; font-size: 12px; }
.pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.pager .meta { padding: 6px 12px; border-radius: 999px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink); }
.pager .btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
.find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.form.find label { flex: 1 1 200px; margin: 0; }
.find .field { margin: 0; border-radius: 999px; padding-left: 18px; }
.blog-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.blog-grid .tile { margin: 0; }
.blog-tile .chips { display: flex; margin: 8px 0 0; }

/* ==== The front door =========================================================================
   For readers first. A hello for someone signed in, the team's recognised blogs under a gold
   band, and one small card that says a reader can write too. */
.columns > div { min-width: 0; }
.greeting { padding: clamp(16px, 2.400vw, 26px); margin-bottom: 20px; }
.greeting h1 { margin: 0 0 12px; font: 800 clamp(28px, 4vw, 40px)/1.1 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); overflow-wrap: anywhere; }
.greeting .chips { margin: 0; }
.landing-card { margin-bottom: 20px; }
.journalists { --band-top: #ffd24a; --band-bottom: #e09a00; --band-ink: #3a2500; --band-shadow: rgba(255, 255, 255, 0.5); --disc: radial-gradient(circle at 35% 28%, #fff0a8 0%, #f0b21a 62%, #b97a00 100%); border-color: #f0b21a; }
.journalist-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.form .actions + .meta { margin-top: 12px; }
.journalist-card { display: flex; flex-direction: column; gap: 6px; margin: 0; align-items: flex-start; }
.journalist-card strong { font: 800 19px/1.2 var(--display); color: var(--heading); overflow-wrap: anywhere; }
.band-link { margin-left: auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; color: inherit; text-decoration: none; font: 800 14px/1 var(--display); background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.4); }
.band-link:hover { background: rgba(255, 255, 255, 0.28); }
.nudge { margin: 0 0 20px; padding: 16px; border-radius: var(--radius-lg); background: var(--chip-bg); border: 2px dashed var(--chip-edge); color: var(--chip-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nudge p { margin: 0 0 10px; }
.nudge p:last-child { margin: 0; }
.address-preview { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); font: 500 18px/1.3 var(--font-text); color: var(--muted); overflow-wrap: anywhere; }
.address-preview strong { font: 800 22px/1.2 var(--display); color: var(--heading); }
.plate-badge { margin: 0 0 8px; }

@media (max-width: 860px) {
  :root[data-side="left"] .blog-body { grid-template-columns: minmax(0, 1fr); }
  :root[data-side="left"] .blog-main { order: 0; }
  .desk-head { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .effect { display: none; }
  .marquee { white-space: normal; padding: 10px 16px; border-radius: var(--radius); }
  .marquee span { padding-left: 0; }
}
@media print { .effect { display: none; } }

/* ==== The desk: a small drawing of the blog's page, to drag gadgets about on ===================
   Shown by public/js/arrange.js. Without script each gadget's "Where it sits" box does the same. */
.arrange { margin: 0 0 18px; padding: 14px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); }
.arrange > .meta { margin: 0 0 12px; }
.arrange-page { display: grid; gap: 8px; max-width: 760px; margin: 0 auto 14px; padding: 10px; border-radius: 14px; background: var(--field-bg); border: 2px solid var(--chip-edge); }
.arrange-block { display: grid; place-items: center; min-height: 34px; padding: 6px 10px; border-radius: 9px; background: var(--chip-bg-hi); color: var(--muted); font: 800 13px/1.2 var(--display); text-align: center; }
.arrange-posts { min-height: 150px; }
.arrange-middle { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; }
.arrange-zone { list-style: none; margin: 0; padding: 8px; min-height: 52px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-content: flex-start; border-radius: 9px; border: 2px dashed var(--chip-edge); background: rgba(127, 190, 255, 0.07); }
.arrange-middle .arrange-zone { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.arrange-zone.over { border-style: solid; border-color: var(--accent-text); background: rgba(127, 190, 255, 0.2); }
.arrange-zone.locked { opacity: 0.6; }
.arrange-name { flex: 1 1 100%; color: var(--muted); font: 800 11px/1.3 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.arrange-name .lock { font-size: 10px; letter-spacing: 0; text-transform: none; }
.arrange-item {
  padding: 7px 12px 7px 26px; border-radius: 9px; cursor: grab; user-select: none; touch-action: none; overflow-wrap: anywhere;
  background: radial-gradient(circle, currentColor 0 1.5px, transparent 2px) 7px 50% / 6px 6px repeat-y, linear-gradient(180deg, var(--band-top), var(--band-bottom));
  background-size: 6px 6px, auto; background-repeat: repeat-y, no-repeat; background-position: 8px 3px, 0 0;
  color: var(--band-ink); font: 800 13px/1.2 var(--display); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.arrange-item.held { cursor: grabbing; opacity: 0.75; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); scale: 1.04; }
@media (max-width: 560px) { .arrange-middle { grid-template-columns: minmax(0, 1fr); } .arrange-posts { min-height: 60px; } }

/* --- a blog's pictures: how much room is used, and the list of them --------------------------- */
.storage { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 12px; color: inherit; font-size: 0.86rem; text-decoration: none; }
.storage p { margin: 0; }
.storage > span { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: space-between; }
.storage progress { display: block; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(127, 127, 127, 0.26); appearance: none; -webkit-appearance: none; }
.storage progress::-webkit-progress-bar { background: transparent; }
.storage progress::-webkit-progress-value { border-radius: 999px; background: var(--accent); }
.storage progress::-moz-progress-bar { border-radius: 999px; background: var(--accent); }
.storage.nearly progress::-webkit-progress-value { background: #e2553d; }
.storage.nearly progress::-moz-progress-bar { background: #e2553d; }
a.storage:hover, a.storage:focus-visible { border-color: var(--accent); }
.storage.big { margin-bottom: 18px; font-size: 1rem; }
.storage.big progress { height: 12px; }
.photo-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.photo-tile { display: grid; gap: 12px; grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
.photo-tile .chips, .photo-tile .meta { margin: 0 0 8px; }
.photo-thumb img { display: block; width: 96px; height: 96px; border-radius: 10px; object-fit: cover; }
.photo-tile.is-down .photo-thumb img { opacity: 0.4; }
.photo-tile code { user-select: all; overflow-wrap: anywhere; }
.photo-tile .staff-act { margin-top: 0; }

/* --- asking first, and words given back ---------------------------------------------------------- */
.ask-box > summary { display: inline-block; list-style: none; }
.ask-box > summary::-webkit-details-marker { display: none; }
.ask-box[open] { flex: 1 0 100%; }
.ask-box[open] > summary { margin-bottom: 6px; color: var(--accent-text); }
.ask-box .actions { margin-bottom: 0; }
.ask-box .meta { margin: 0 0 8px; }
.ask-box select { max-width: 100%; }
/* On an account's own page of what the team told it (render.mjs, toldPage), "Delete" opens first
   as well, and its handle is a button: drawn as the button it is, as on the team's pages. */
.told .ask-box > summary.btn { display: inline-flex; }
/* ...and good news, a post of theirs put in the spotlight, on a tile of its own: the spotlight's
   gold edge and the game's star, so it is never read as one more thing taken down. */
.told .told-good { border: 2px solid #e0a50e; background: linear-gradient(180deg, rgba(255, 210, 74, 0.2), rgba(255, 210, 74, 0.06)), var(--tile-bg); }
.told-good-line { display: flex; gap: 12px; align-items: flex-start; }
.told-star { flex: none; width: 40px; height: 40px; }
.told-good q { font-style: italic; }
.kept-words { display: grid; gap: 6px; margin: 14px 0; font-weight: 700; }
.kept-words textarea { font-weight: 500; }
.draft-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.draft-bar > span { flex: 1 1 220px; }