/* What makes one blog a different website from the next: how the page is laid out, what its
   panels are made of, how its name is lettered, real display faces, a room behind the whole page,
   and the writer's own colours. Loaded after site.css and looks.css.

   Two parts of every blog are NOT the writer's: the strip at the very top (.platform-bar) and
   the one at the very bottom (.platform-foot). They say whose site this is, that a player wrote
   it, and hold Follow and Report. Everything in them is painted from literals, never from a
   token a look can change, and the writer's lettering and panel colours are scoped to .blog-zone
   so they cannot reach them. A blog can look like anything except something it is not. */

/* ==== Faces (public/fonts; licences beside them). A face is fetched only when something is
   drawn in it. ================================================================================ */
@font-face { font-family: "Blog Fredoka"; src: url("../fonts/Fredoka-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Playfair"; src: url("../fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Bangers"; src: url("../fonts/Bangers-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Luckiest"; src: url("../fonts/LuckiestGuy-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Marker"; src: url("../fonts/PermanentMarker-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Pacifico"; src: url("../fonts/Pacifico-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Elite"; src: url("../fonts/SpecialElite-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Pixel"; src: url("../fonts/PressStart2P-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Orbitron"; src: url("../fonts/Orbitron-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Bungee"; src: url("../fonts/Bungee-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Pirata"; src: url("../fonts/PirataOne-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Creepster"; src: url("../fonts/Creepster-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Nunito"; src: url("../fonts/Nunito-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Hand"; src: url("../fonts/PatrickHand-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Comic"; src: url("../fonts/ComicNeue-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Blog Easy"; src: url("../fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* The writer's lettering reaches their part of the page only. */
.blog-zone { font-family: var(--font-text); }
/* So does their ink. A look can give this part of the page its own --text (a panel colour of the
   writer's own: design.mjs, panelRoles), but the colour words are drawn in is handed down from
   <body>, which read --text before the zone changed it. So whatever is painted in the zone's
   panel or plate colour takes the zone's ink again. Without this a post's own words, a page's
   and an About's stayed white on a light panel colour (a tester's orange: 2.8 to 1), while the
   tiles, which always asked for their ink themselves, were right. :where(), so that any rule
   that gives one of these its own colour still wins. */
:where(.blog-zone) :where(.panel, .plate, .foot-simple, .foot-big) { color: var(--text); }
:root[data-heading="round"]  .blog-zone { --display: "Blog Fredoka", "Trebuchet MS", sans-serif; }
:root[data-heading="serif"]  .blog-zone { --display: "Blog Playfair", Georgia, serif; }
:root[data-heading="comic"]  .blog-zone { --display: "Blog Bangers", "Comic Sans MS", cursive; }
:root[data-heading="toon"]   .blog-zone { --display: "Blog Luckiest", "Arial Black", sans-serif; }
:root[data-heading="marker"] .blog-zone { --display: "Blog Marker", "Comic Sans MS", cursive; }
:root[data-heading="script"] .blog-zone { --display: "Blog Pacifico", "Brush Script MT", cursive; }
:root[data-heading="type"]   .blog-zone { --display: "Blog Elite", "Courier New", monospace; }
:root[data-heading="pixel"]  .blog-zone { --display: "Blog Pixel", "Courier New", monospace; }
:root[data-heading="space"]  .blog-zone { --display: "Blog Orbitron", Verdana, sans-serif; }
:root[data-heading="sign"]   .blog-zone { --display: "Blog Bungee", "Arial Black", sans-serif; }
:root[data-heading="gothic"] .blog-zone { --display: "Blog Pirata", Georgia, serif; }
:root[data-heading="spooky"] .blog-zone { --display: "Blog Creepster", "Comic Sans MS", cursive; }
:root[data-text="round"] .blog-zone { --font-text: "Blog Nunito", "Trebuchet MS", sans-serif; }
:root[data-text="serif"] .blog-zone { --font-text: Georgia, "Palatino Linotype", "Times New Roman", serif; }
:root[data-text="comic"] .blog-zone { --font-text: "Blog Comic", "Comic Sans MS", cursive; }
:root[data-text="hand"]  .blog-zone { --font-text: "Blog Hand", "Comic Sans MS", cursive; font-size: 1.12em; }
:root[data-text="type"]  .blog-zone { --font-text: "Blog Elite", "Courier New", monospace; }
:root[data-text="easy"]  .blog-zone { --font-text: "Blog Easy", Verdana, sans-serif; }
/* Faces with one weight: never a faked bold, and the pixel face needs to be smaller to fit. */
:root[data-heading="pixel"] .blog-zone .plate h1 { font-size: clamp(20px, 3.200vw, 34px); line-height: 1.3; }
:root[data-heading="pixel"] .blog-zone .post-tile h3 { font-size: 14px; line-height: 1.4; }
/* (Not below 12px: at 10 the chips and buttons were the smallest words on any blog, in its hardest face.) */
:root[data-heading="pixel"] .blog-zone .chip, :root[data-heading="pixel"] .blog-zone .btn { font-size: 12px; line-height: 1.3; }
/* The pixel face is a whole square a letter: twice as wide as any other face at the same size. A
   tester found its headings "too big for some areas, like the side panels": a gadget's heading
   was 23px in a column 215 wide, and the one rule above lost to the rules of the themes, the
   panel kinds and the layouts. Each of these is written to win wherever it sits (measured on
   every theme, bare and window panels, the magazine, newspaper and journal layouts, a phone and
   a laptop: no word cut, nothing sideways). */
:root[data-heading="pixel"] .blog-zone .blog-main .panel > .band :is(h1, h2) { font-size: 14px; line-height: 1.4; letter-spacing: 0; }
:root[data-heading="pixel"] .blog-zone .gadget .panel > .band :is(h1, h2) { font-size: 12px; line-height: 1.5; letter-spacing: 0; }
:root[data-heading="pixel"] .blog-zone .blog-main .panel:is(.post, .page-sheet) > .band :is(h1, h2) { font-size: clamp(15px, 2.2vw, 18px); }
:root[data-heading="pixel"] .blog-zone .feed .post-tile h3 { font-size: 14px; line-height: 1.4; }
:root[data-heading="pixel"] .blog-zone .feed .post-tile:is(.feature, .full) h3 { font-size: clamp(16px, 2.6vw, 24px); line-height: 1.35; }
:root[data-heading="pixel"] .blog-zone .writer-name { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
:root[data-heading="pixel"] .blog-zone .stat strong { font-size: 24px; }
:root[data-heading="pixel"] .blog-zone .poll-question { font-size: 13px; line-height: 1.5; }
:root[data-heading="pixel"] .blog-zone .motto p { font-size: 13px; line-height: 1.6; }
:root[data-heading="pixel"] .blog-zone .mood { font-size: 16px; line-height: 1.4; }
:root[data-heading="pixel"] .blog-zone .cal-month { font-size: 12px; line-height: 1.5; }
:root[data-heading="pixel"] .blog-zone .gadget-art figcaption { font-size: 12px; line-height: 1.4; }
:root[data-heading="pixel"] .blog-zone .marquee span { font-size: 13px; }
:root[data-heading="pixel"] .blog-zone .story :is(h2, h3, h4, h5, h6) { font-size: 15px; line-height: 1.5; }
:root[data-heading="pixel"] .blog-zone .form label { font-size: 12px; line-height: 1.5; }
:root[data-heading="pixel"] .blog-zone .comment-by strong { font-size: 13px; }
/* (The two retro looks set a button's lettering themselves, lines touching: the pixel face needs its room there too.) */
:root[data-heading="pixel"]:is([data-era="classic"], [data-era="y2008"]) .blog-zone :is(.chip, .btn) { font-size: 12px; line-height: 1.3; padding-block: 5px; }
:root[data-heading="script"] .blog-zone .plate h1, :root[data-heading="gothic"] .blog-zone .plate h1 { font-weight: 400; }
/* The faces that are drawn for a headline (old newspaper, handwriting, dripping letters) are hard
   to read at the size of a button: "Playing since 2026" and "Say something kind or useful" in
   13px blackletter. Headings keep the face; what is small and has to be read wears the blog's
   reading lettering. (The menu under the blog's name is part of the heading, and keeps it.) */
:root:is([data-heading="gothic"], [data-heading="script"], [data-heading="spooky"]) .blog-zone :is(.chip, .btn, .form label, .comment-by, .pager):not(.blog-menu *) { font-family: var(--font-text); letter-spacing: 0; }

/* ==== The platform's strip, top and bottom: not the writer's ================================= */
.platform-bar {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-height: 46px; padding: 6px 14px; margin: 0 0 16px;
  background: rgba(4, 10, 32, 0.94); border-bottom: 2px solid #2a62c9; color: #ffffff;
  font: 700 14px/1.2 "ChoUiText", "Century Gothic", "Trebuchet MS", sans-serif;
}
.platform-mark { color: #ffffff; text-decoration: none; font: 800 16px/1 "ChoUiDisplay", "Arial Black", sans-serif; letter-spacing: 0.01em; }
.platform-mark:hover { color: #bfe6ff; }
.platform-tag { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #dbeeff; font-size: 12px; white-space: nowrap; }
.platform-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.platform-side form { margin: 0; }
.pbtn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.34); color: #ffffff;
  font: 800 13px/1 "ChoUiDisplay", "Arial Black", sans-serif;
}
.pbtn:hover { background: rgba(255, 255, 255, 0.22); }
.pbtn.go { border: 0; background: linear-gradient(180deg, #69f94a 0%, #20df54 58%, #09b94d 100%); color: #06390f; text-shadow: none; }
.pbtn.on { background: linear-gradient(180deg, #ffe27a 0%, #ffb300 55%, #e08a00 100%); border-color: rgba(255, 255, 255, 0.8); color: #3a2500; }
/* "Following": pressed, it opens what that means and the way to stop (render.mjs, followingBox).
   In the strip the box hangs under the row of buttons, as wide as the row on a phone; in a
   blog's own panel it opens under the button, in the page. */
.follow-pick > summary { list-style: none; cursor: pointer; }
.follow-pick > summary::-webkit-details-marker { display: none; }
.follow-pick > summary::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.follow-pick-list p { margin: 0 0 10px; }
.platform-side { position: relative; }
.platform-side .follow-pick-list {
  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(280px, 100%); margin: 0; padding: 12px 14px; border-radius: 14px;
  background: #061633; border: 1.5px solid rgba(126, 218, 255, 0.4); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: 700; text-align: left;
}
.platform-side .follow-pick-list a { color: #9fd8ff; }
@media (max-width: 720px) { .platform-side .follow-pick-list { left: 0; right: 0; width: auto; } }
.follow-pick.in-panel > summary { display: inline-flex; }
.follow-pick.in-panel[open] { flex: 1 1 100%; text-align: right; }
.follow-pick.in-panel > .follow-pick-list { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); font-size: 0.92rem; text-align: left; }
.platform-foot { margin: 28px auto 0; padding: 0 16px; text-align: center; font: 700 14px/1.5 "ChoUiText", "Century Gothic", "Trebuchet MS", sans-serif; }
.platform-foot > p, .platform-foot > .report > summary {
  display: inline-block; margin: 0 0 8px; padding: 8px 16px; border-radius: 999px; background: rgba(4, 10, 32, 0.88); border: 1.5px solid rgba(255, 255, 255, 0.3); color: #ffffff;
}
.platform-foot a { color: #bfe6ff; font-weight: 800; }
.platform-foot .report { max-width: 420px; margin: 0 auto; text-align: left; }
.platform-foot .report > summary { display: block; width: fit-content; margin: 0 auto 8px; cursor: pointer; }

/* ==== The team's strip: above the platform's, drawn only for the Chobots team ================
   (render.mjs, teamStrip). Literals only, as the platform's strip is: it must read the same on
   every look, and look like no part of the blog. What acts is in a box that opens first; open,
   the box takes a row of its own, so on a phone the reason and its button are as wide as the
   screen. On a phone everything to press is 44px tall: it is pressed with a thumb, at the top. */
.team-strip {
  --focus-ring: #ffffff; --focus-halo: #ffd84d;
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0; padding: 8px 14px;
  background: #2a1247; border-bottom: 2px solid #c79bff; color: #ffffff;
  font: 700 14px/1.35 "ChoUiText", "Century Gothic", "Trebuchet MS", sans-serif;
}
.team-strip p { margin: 0; }
.team-word { padding: 4px 9px; border-radius: 6px; background: #c79bff; color: #1d0b33; font: 800 12px/1.2 "ChoUiDisplay", "Arial Black", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.team-states { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 180px; min-width: 0; }
.team-state { min-width: 0; padding: 4px 10px; border-radius: 12px; background: #ffd24a; color: #2b1c00; overflow-wrap: anywhere; }
.team-state.on-air { background: #7df29a; color: #06390f; }
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 16px; border-radius: 999px; cursor: pointer; text-align: center; text-decoration: none;
  background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.42); color: #ffffff;
  font: 800 13px/1.2 "ChoUiDisplay", "Arial Black", sans-serif;
}
.tbtn:hover { background: rgba(255, 255, 255, 0.24); }
.tbtn.danger { background: #b3261e; border-color: #ffb0a3; }
.tbtn.danger:hover { background: #c9342b; }
.tbtn.go { background: #1f7a35; border-color: #9be7a8; }
.tbtn.go:hover { background: #26913f; }
.team-act > summary { list-style: none; }
.team-act > summary::-webkit-details-marker { display: none; }
.team-act > summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.team-act[open] { flex: 1 0 100%; }
.team-act[open] > summary { background: #ffffff; border-color: #ffffff; color: #1d0b33; }
.team-form { display: grid; gap: 10px; justify-items: start; max-width: 560px; margin: 8px 0 2px; padding: 12px; border-radius: 12px; background: #1b0a30; border: 1.5px solid #c79bff; }
.team-form label { display: grid; gap: 6px; width: 100%; font-weight: 800; }
.team-why { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid #c79bff; background: #ffffff; color: #1d0b33; font: 600 16px/1.3 "ChoUiText", "Century Gothic", "Trebuchet MS", sans-serif; }
.team-note { flex: 1 1 100%; color: #e9dcff; overflow-wrap: anywhere; }
.team-note a { color: #ffffff; }
/* The post or the page being read (render.mjs, teamThing): a row of its own under the blog's,
   with its state and its own boxes. A reason somebody typed can be in its state: it wraps. */
.team-thing { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; flex: 1 1 100%; min-width: 0; padding-top: 8px; border-top: 1px solid rgba(199, 155, 255, 0.5); }
.team-thing .team-note { flex: 1 1 100%; }
/* A ticked box beside its words, in a box that opened. */
.team-form label.team-tick { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.team-tick input { flex: none; width: 22px; height: 22px; accent-color: #c79bff; }
:root[data-preview] .team-strip { display: none; }
@media (max-width: 720px) {
  .team-strip { padding: 8px 12px; }
  .tbtn { min-height: 44px; }
}
@media print { .team-strip { display: none; } }

/* ==== The writer's own panel colour ==========================================================
   The hexes arrive from /look.css as tokens on .blog-zone; this only removes what a colour of
   one's own cannot keep from the theme. */
:root[data-glass="custom"] .blog-zone { --heading-shadow: none; --panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
:root[data-glass="custom"] .blog-zone .panel, :root[data-glass="custom"] .blog-zone .plate { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ==== The page: two colours of one's own, or a room behind everything ======================== */
:root[data-page="blend"] { --page-bg: linear-gradient(160deg, var(--page-custom, #04071c) 0%, var(--page-custom-b, #164a9a) 100%); }
:root[data-backdrop="square"]  { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/loc0.webp") center / cover no-repeat; }
:root[data-backdrop="cafe"]    { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locCafe.webp") center / cover no-repeat; }
:root[data-backdrop="academy"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locAcademy.webp") center / cover no-repeat; }
:root[data-backdrop="stage"]   { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locMusicStage.webp") center / cover no-repeat; }
:root[data-backdrop="cinema"]  { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locCinema.webp") center / cover no-repeat; }
:root[data-backdrop="beach"]   { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locBeach.webp") center / cover no-repeat; }
:root[data-backdrop="park"]    { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locPark.webp") center / cover no-repeat; }
:root[data-backdrop]:not([data-backdrop="none"]) .site-shell::before { display: none; }
:root[data-backdrop]:not([data-backdrop="none"]):not([data-pattern]) .site-shell::after,
:root[data-backdrop]:not([data-backdrop="none"])[data-pattern="none"] .site-shell::after { display: none; }

/* ==== How the name is lettered =============================================================== */
:root[data-title="lifted"] .plate h1 { text-shadow: 0 2px 0 var(--band-top), 0 4px 0 var(--band-bottom), 0 7px 10px rgba(0, 0, 0, 0.35); }
:root[data-title="glow"] .plate h1 { text-shadow: 0 0 8px var(--accent), 0 0 22px var(--accent), 0 0 44px var(--accent); }
:root[data-title="rainbow"] .plate h1 a {
  background: linear-gradient(90deg, #ff5f6d, #ffa63d, #e8c900, #3dbb6c, #2f9fe0, #9b5de5); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
:root[data-title="rainbow"] .plate h1 { text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
:root[data-title="stamp"] .plate h1 { display: inline-block; padding: 6px 16px 4px; border: 4px solid currentColor; border-radius: 12px; transform: rotate(-2deg); text-transform: uppercase; letter-spacing: 0.03em; text-shadow: none; }

/* ==== What panels are made of ================================================================
   Glass, flat, paper, neon, sticker and square corners are in site.css and looks.css. These four
   are different furniture: the band and the disc are replaced, not recoloured. */

/* Computer windows: a title bar with three lights, a hard edge and a hard shadow. */
:root[data-cards="window"] .blog-zone .panel, :root[data-cards="window"] .blog-zone .hero {
  border-radius: 8px; border: 2px solid #10131c; box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-cards="window"] .blog-zone .band { min-height: 38px; padding: 6px 10px 6px 12px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); box-shadow: none; border-bottom: 2px solid #10131c; }
:root[data-cards="window"] .blog-zone .band h1, :root[data-cards="window"] .blog-zone .band h2 { font-size: 16px; text-shadow: none; }
:root[data-cards="window"] .blog-zone .disc { order: 9; width: 58px; height: 16px; margin-left: 8px; border-radius: 0; box-shadow: none;
  background: radial-gradient(circle at 8px 8px, #ff5f57 0 6px, transparent 7px), radial-gradient(circle at 29px 8px, #febc2e 0 6px, transparent 7px), radial-gradient(circle at 50px 8px, #28c840 0 6px, transparent 7px); }
:root[data-cards="window"] .blog-zone .disc svg { display: none; }
:root[data-cards="window"] .blog-zone .plate { border-radius: 6px; border: 2px solid #10131c; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4); }

/* Comic panels: ink outlines, a yellow caption box, halftone dots. Light in both themes. */
:root[data-cards="comic"] .blog-zone .panel, :root[data-cards="comic"] .blog-zone .plate {
  --panel-bg: #fffef6; --panel-line: #111111; --tile-bg: #fff6cf; --tile-bg-hi: #ffeea0; --tile-edge: #111111;
  --plate-bg: #fffef6; --plate-edge: #111111; --chip-bg: #ffffff; --chip-bg-hi: #fff6cf; --chip-edge: #111111; --chip-ink: #111111;
  --field-bg: #ffffff; --text: #111111; --heading: #111111; --heading-shadow: none; --muted: #444444;
  --accent-text: var(--accent-ink); --green: #167f45; --warn: #a34b00; --danger: #b3261e; --focus-ring: #111111;
  --ink-red: var(--ink-red-l); --ink-orange: var(--ink-orange-l); --ink-gold: var(--ink-gold-l); --ink-green: var(--ink-green-l); --ink-teal: var(--ink-teal-l); --ink-blue: var(--ink-blue-l); --ink-purple: var(--ink-purple-l); --ink-pink: var(--ink-pink-l);
  color: #111111; border: 4px solid #111111; border-radius: 6px; box-shadow: 8px 8px 0 #111111; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-cards="comic"] .blog-zone .panel { background: radial-gradient(circle, rgba(17, 17, 17, 0.07) 0 1.500px, transparent 2px) 0 0 / 9px 9px, #fffef6; }
:root[data-cards="comic"] .blog-zone .hero { border: 4px solid #111111; border-radius: 6px; box-shadow: 8px 8px 0 #111111; }
:root[data-cards="comic"] .blog-zone .band { min-height: 0; width: fit-content; max-width: calc(100% - 24px); margin: 12px 12px 0; padding: 6px 14px; background: #ffd400; color: #111111; border: 3px solid #111111; box-shadow: 3px 3px 0 #111111; transform: rotate(-1deg); }
:root[data-cards="comic"] .blog-zone .band h1, :root[data-cards="comic"] .blog-zone .band h2 { text-shadow: none; text-transform: uppercase; }
:root[data-cards="comic"] .blog-zone .disc { display: none; }
:root[data-cards="comic"] .blog-zone .tile { border-width: 3px; border-radius: 4px; }

/* Pixel: no curves anywhere, stepped corners made of shadows. */
:root[data-cards="pixel"] .blog-zone .panel, :root[data-cards="pixel"] .blog-zone .hero, :root[data-cards="pixel"] .blog-zone .plate {
  border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 -4px 0 0 var(--panel-rim), 0 4px 0 0 var(--panel-rim), -4px 0 0 0 var(--panel-rim), 4px 0 0 0 var(--panel-rim), 8px 8px 0 0 rgba(0, 0, 0, 0.45);
}
:root[data-cards="pixel"] .blog-zone .panel, :root[data-cards="pixel"] .blog-zone .hero { margin: 4px 4px 24px; }
:root[data-cards="pixel"] .blog-zone .band { background: var(--band-top); box-shadow: inset 0 -4px 0 var(--band-bottom); }
:root[data-cards="pixel"] .blog-zone .band h1, :root[data-cards="pixel"] .blog-zone .band h2 { text-shadow: 2px 2px 0 var(--band-shadow); }
:root[data-cards="pixel"] .blog-zone .disc { border-radius: 0; background: var(--band-bottom); box-shadow: 0 0 0 2px var(--band-ink); }
:root[data-cards="pixel"] .blog-zone .tile, :root[data-cards="pixel"] .blog-zone .chip, :root[data-cards="pixel"] .blog-zone .btn { border-radius: 0; }

/* No panels: the words sit on the page itself, on a wash just strong enough to read on. */
:root[data-cards="bare"] .blog-zone .panel { border: 0; border-radius: 12px; box-shadow: none; background: rgba(4, 10, 32, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="light"][data-cards="bare"] .blog-zone .panel { background: rgba(255, 255, 255, 0.78); }
:root[data-cards="bare"][data-glass="custom"] .blog-zone .panel { background: var(--panel-bg); }
/* A painted word on that wash (story.mjs). The wash is see-through: over a page of the other
   lightness (a white page read in Space) it is a middling grey, and a colour made for a dark
   panel is faint on it. So a painted word there carries an edge in the wash's own tone, close
   round each letter. A panel of the writer's own colour is solid, and its colours are made for
   it (design.mjs, paintRoles). */
:root[data-cards="bare"]:not([data-glass="custom"]) .blog-zone .story .cho-ink { text-shadow: 0 0 1px var(--ink-halo), 0 0 2px var(--ink-halo), 0 0 3px var(--ink-halo), 0 0 6px var(--ink-halo); }
:root[data-cards="bare"] .blog-zone .band { min-height: 0; padding: 16px 18px 0; background: none; box-shadow: none; border: 0; color: var(--heading); }
:root[data-cards="bare"] .blog-zone .band h1, :root[data-cards="bare"] .blog-zone .band h2 { padding-bottom: 8px; border-bottom: 3px solid var(--band-top); text-shadow: none; font-size: clamp(22px, 2.600vw, 28px); }
:root[data-cards="bare"] .blog-zone .disc { display: none; }
:root[data-cards="bare"] .blog-zone .hero { border: 0; box-shadow: none; border-radius: 12px; }
:root[data-cards="bare"] .blog-zone .tile { background: none; border-width: 0 0 1.500px; border-radius: 0; padding-left: 0; padding-right: 0; }

/* ==== How the page is laid out ===============================================================
   Classic is site.css: posts beside a column of gadgets. The others move the furniture. */
.dateline { display: none; }

/* Layouts with no side column put the gadgets in a row underneath. */
:root[data-layout="magazine"] .blog-body, :root[data-layout="scrapbook"] .blog-body { grid-template-columns: minmax(0, 1fr); }
:root[data-layout="magazine"] .blog-main, :root[data-layout="scrapbook"] .blog-main, :root[data-layout="journal"] .blog-main { order: 0; }
:root[data-layout="magazine"] .blog-side, :root[data-layout="scrapbook"] .blog-side, :root[data-layout="journal"] .blog-side {
  display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start;
}

/* Magazine: the newest post is the lead story, the rest a grid of cards. */
:root[data-layout="magazine"] .hero { min-height: 380px; }
:root[data-layout="magazine"] .feed { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
:root[data-layout="magazine"] .feed .post-tile { margin: 0; }
:root[data-layout="magazine"] .feed .post-tile.feature { grid-column: 1 / -1; padding: clamp(18px, 3vw, 34px); border-width: 0 0 0 8px; border-color: var(--band-top); border-radius: 0 var(--radius) var(--radius) 0; }
:root[data-layout="magazine"] .feed .post-tile.feature h3 { font-size: clamp(28px, 4.400vw, 46px); line-height: 1.08; }
:root[data-layout="magazine"] .feed .post-tile.feature .excerpt { font-size: 1.12rem; max-width: 70ch; }

/* Newspaper: a masthead between rules with today's date, then columns of articles. */
:root[data-layout="newspaper"] .hero { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
:root[data-layout="newspaper"] .hero-art { display: none; }
:root[data-layout="newspaper"] .plate { max-width: none; padding: 14px 16px 12px; text-align: center; border-radius: 0; border-style: double; border-width: 6px 0; border-color: var(--heading); }
:root[data-layout="newspaper"] .plate h1 { font-size: clamp(40px, 8vw, 88px); line-height: 1; transform: none; }
/* (With somebody standing beside it the name has less of the header, and with two, less again.) */
:root[data-layout="newspaper"] .hero:is(.with-self, .with-mascot) .plate h1 { font-size: clamp(36px, 6.4vw, 76px); }
:root[data-layout="newspaper"] .hero.with-self.with-mascot .plate h1 { font-size: clamp(30px, 5vw, 64px); }
:root[data-layout="newspaper"] .plate .chips { justify-content: center; }
/* (overflow-wrap: a long address on a small phone ran out of the side of the header.) */
:root[data-layout="newspaper"] .dateline { overflow-wrap: anywhere; display: block; margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--heading); color: var(--muted); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* The date and the address each stay whole: beside each other where there is room, the address
   on a line of its own (smaller, and without the wide spacing) where there is not. It was broken
   in the middle of a word: "...CHOBOTSBLOG.NE / T". */
:root[data-layout="newspaper"] .dateline > span { display: inline-block; max-width: 100%; }
@media (max-width: 620px) {
  :root[data-layout="newspaper"] .dateline > .dateline-dot { display: none; }
  :root[data-layout="newspaper"] .dateline > .dateline-host { display: block; font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
}
:root[data-layout="newspaper"] .tagline { font-style: italic; }
:root[data-layout="newspaper"] .blog-body { grid-template-columns: minmax(0, 1fr) 250px; }
:root[data-layout="newspaper"][data-side="left"] .blog-body { grid-template-columns: 250px minmax(0, 1fr); }
:root[data-layout="newspaper"][data-side="below"] .blog-body { grid-template-columns: minmax(0, 1fr); }
:root[data-layout="newspaper"] .feed { column-count: 2; column-gap: 30px; column-rule: 1px solid var(--panel-line); }
:root[data-layout="newspaper"] .feed .post-tile { break-inside: avoid; margin: 0 0 16px; padding: 0 0 16px; background: none; border-width: 0 0 1px; border-color: var(--panel-line); border-radius: 0; }
:root[data-layout="newspaper"] .feed .post-tile.feature { column-span: all; text-align: center; border-bottom-width: 3px; border-bottom-style: double; }
:root[data-layout="newspaper"] .feed .post-tile.feature h3 { font-size: clamp(30px, 4.600vw, 52px); line-height: 1.05; }
:root[data-layout="newspaper"] .feed .post-tile.feature .excerpt { max-width: 68ch; margin: 0 auto; font-size: 1.08rem; }
:root[data-layout="newspaper"] .feed .post-tile h3 { font-size: 24px; }

/* Scrapbook: every post is a note taped to the page, none of them quite straight. */
:root[data-layout="scrapbook"] .feed-wrap, :root[data-layout="journal"] .feed-wrap {
  overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none;
}
:root[data-layout="scrapbook"] .feed-wrap > .band, :root[data-layout="journal"] .feed-wrap > .band { display: none; }
:root[data-layout="scrapbook"] .feed-wrap > .panel-body, :root[data-layout="journal"] .feed-wrap > .panel-body { padding: 0; }
:root[data-layout="scrapbook"] .feed { display: grid; gap: 30px 24px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 14px 8px 10px; }
:root[data-layout="scrapbook"] .feed .post-tile {
  --heading: #2b2413; --muted: #6b5d3a; --accent-text: var(--accent-ink);
  position: relative; margin: 0; padding: 28px 18px 18px; background: #fffdf3; color: #2b2413; border: 0; border-radius: 2px;
  box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.28), 0 14px 24px rgba(0, 0, 0, 0.18); transform: rotate(-1.500deg); transition: transform 0.2s;
}
:root[data-layout="scrapbook"] .feed .post-tile:nth-child(3n+2) { background: #eaf6ff; transform: rotate(1.300deg); }
:root[data-layout="scrapbook"] .feed .post-tile:nth-child(3n) { background: #fff0f4; transform: rotate(-0.600deg); }
:root[data-layout="scrapbook"] .feed .post-tile:hover, :root[data-layout="scrapbook"] .feed .post-tile:focus-within { transform: rotate(0deg) scale(1.02); }
:root[data-layout="scrapbook"] .feed .post-tile::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 229, 130, 0.9); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
:root[data-layout="scrapbook"] .feed .post-tile:nth-child(even)::before { transform: translateX(-50%) rotate(4deg); background: rgba(160, 220, 255, 0.9); }
:root[data-layout="scrapbook"] .blog-side > .gadget:nth-child(odd) { transform: rotate(0.700deg); }
:root[data-layout="scrapbook"] .blog-side > .gadget:nth-child(even) { transform: rotate(-0.800deg); }

/* Journal: one column, every post written out in full, newest first. */
:root[data-layout="journal"] .blog-body { grid-template-columns: minmax(0, 780px); justify-content: center; }
:root[data-layout="journal"] .feed .post-tile.full {
  margin: 0 0 22px; padding: clamp(18px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--panel-bg); border: 3px solid var(--panel-rim);
  box-shadow: var(--panel-shadow), inset 0 0 0 2px var(--panel-ring);
}
:root[data-layout="journal"] .feed .post-tile.full h3 { font-size: clamp(26px, 3.600vw, 36px); }
:root[data-layout="journal"] .feed .post-tile.full .meta { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--panel-line); }
:root[data-layout="journal"][data-cards="paper"] .feed .post-tile.full {
  --heading: #0d2450; --muted: #475e83; --accent-text: var(--accent-ink); color: #122550; border-color: rgba(18, 37, 80, 0.22);
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(60, 120, 200, 0.2) 31px 32px), linear-gradient(90deg, transparent 0 46px, rgba(220, 70, 70, 0.35) 46px 48px, transparent 48px), #fffdf7;
  padding-left: 64px;
}

/* ==== Swatches for the studio =================================================================
   One per choice above, so a writer picks by eye. */
.picker-layout { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.picker-layout .swatch { height: 64px; background-color: var(--tile-bg-hi); }
.swatch.layout-classic   { background-image: linear-gradient(90deg, var(--muted) 0 64%, transparent 64% 70%, var(--accent-text) 70%), linear-gradient(var(--accent-text), var(--accent-text)); background-size: 100% 60%, 100% 28%; background-position: 0 100%, 0 0; background-repeat: no-repeat; opacity: 0.85; }
.swatch.layout-magazine  { background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(90deg, var(--muted) 0 30%, transparent 30% 35%, var(--muted) 35% 65%, transparent 65% 70%, var(--muted) 70%); background-size: 100% 46%, 100% 42%; background-position: 0 0, 0 100%; background-repeat: no-repeat; opacity: 0.85; }
.swatch.layout-newspaper { background-image: linear-gradient(var(--heading), var(--heading)), linear-gradient(90deg, var(--muted) 0 47%, transparent 47% 53%, var(--muted) 53%); background-size: 70% 14%, 100% 62%; background-position: 50% 8%, 0 100%; background-repeat: no-repeat; opacity: 0.85; }
.swatch.layout-scrapbook { background-image: linear-gradient(#fffdf3, #fffdf3), linear-gradient(#eaf6ff, #eaf6ff), linear-gradient(#fff0f4, #fff0f4); background-size: 30% 60%, 30% 60%, 30% 60%; background-position: 6% 30%, 50% 70%, 94% 34%; background-repeat: no-repeat; }
.swatch.layout-journal   { background-image: linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)); background-size: 56% 40%, 56% 40%; background-position: 50% 8%, 50% 92%; background-repeat: no-repeat; opacity: 0.85; }
.picker-title .swatch, .picker-glass .swatch, .picker-backdrop .swatch { height: 44px; }
.picker-title .swatch { display: grid; place-items: center; background: var(--tile-bg-hi); }
.picker-title .swatch::after { content: "Name"; font: 800 20px/1 "ChoUiDisplay", "Arial Black", sans-serif; color: var(--heading); }
.swatch.title-lifted::after { text-shadow: 0 2px 0 #3d8ae8, 0 4px 0 #1a55b8; }
.swatch.title-glow::after { text-shadow: 0 0 6px #24bdff, 0 0 14px #24bdff; }
.swatch.title-rainbow::after { background: linear-gradient(90deg, #ff5f6d, #ffa63d, #e8c900, #3dbb6c, #2f9fe0, #9b5de5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swatch.title-stamp::after { padding: 2px 8px; border: 3px solid currentColor; border-radius: 8px; transform: rotate(-3deg); text-transform: uppercase; font-size: 15px; }
.swatch.backdrop-none { background: var(--tile-bg-hi); }
.swatch.backdrop-square  { background-image: url("../img/rooms2/loc0.webp"); }
.swatch.backdrop-cafe    { background-image: url("../img/rooms2/locCafe.webp"); }
.swatch.backdrop-academy { background-image: url("../img/rooms2/locAcademy.webp"); }
.swatch.backdrop-stage   { background-image: url("../img/rooms2/locMusicStage.webp"); }
.swatch.backdrop-cinema  { background-image: url("../img/rooms2/locCinema.webp"); }
.swatch.backdrop-beach   { background-image: url("../img/rooms2/locBeach.webp"); }
.swatch.backdrop-park    { background-image: url("../img/rooms2/locPark.webp"); }
.swatch.glass-theme { background: linear-gradient(90deg, #0b2a55 0 50%, #f4f9ff 50%); }
.swatch.glass-custom, .swatch.page-blend { background: conic-gradient(#ff5f6d, #ffc371, #f9f871, #7be495, #5bc0eb, #9b5de5, #ff5f6d); }
.swatch.page-blend { background: linear-gradient(160deg, #ff5f6d, #5bc0eb); }
.swatch.cards-boxy   { background: #0b2a55; border: 3px solid #5cccff; border-radius: 0; }
.swatch.cards-window { background: linear-gradient(180deg, #3d8ae8 0 34%, #f4f9ff 34%); border: 2px solid #10131c; border-radius: 4px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); }
.swatch.cards-comic  { background: radial-gradient(circle, rgba(17, 17, 17, 0.12) 0 1.500px, transparent 2px) 0 0 / 7px 7px, #fffef6; border: 3px solid #111111; border-radius: 3px; box-shadow: 3px 3px 0 #111111; }
.swatch.cards-pixel  { background: #0b2a55; border: 0; border-radius: 0; box-shadow: 0 -3px 0 #5cccff, 0 3px 0 #5cccff, -3px 0 0 #5cccff, 3px 0 0 #5cccff; }
.swatch.cards-bare   { background: linear-gradient(#5cccff, #5cccff) 12% 78% / 60% 3px no-repeat, rgba(4, 10, 32, 0.5); border: 0; }
.swatch.heading-round::after  { font-family: "Blog Fredoka", sans-serif; }
.swatch.heading-serif::after  { font-family: "Blog Playfair", Georgia, serif; }
.swatch.heading-comic::after  { font-family: "Blog Bangers", cursive; font-weight: 400; font-size: 22px; }
.swatch.heading-toon::after   { font-family: "Blog Luckiest", sans-serif; font-weight: 400; }
.swatch.heading-marker::after { font-family: "Blog Marker", cursive; font-weight: 400; }
.swatch.heading-script::after { font-family: "Blog Pacifico", cursive; font-weight: 400; }
.swatch.heading-type::after   { font-family: "Blog Elite", monospace; font-weight: 400; }
.swatch.heading-pixel::after  { font-family: "Blog Pixel", monospace; font-weight: 400; font-size: 11px; }
.swatch.heading-space::after  { font-family: "Blog Orbitron", sans-serif; font-size: 16px; }
.swatch.heading-sign::after   { font-family: "Blog Bungee", sans-serif; font-weight: 400; font-size: 16px; }
.swatch.heading-gothic::after { font-family: "Blog Pirata", serif; font-weight: 400; font-size: 23px; }
.swatch.heading-spooky::after { font-family: "Blog Creepster", cursive; font-weight: 400; font-size: 22px; }
.swatch.text-round::after { font-family: "Blog Nunito", sans-serif; }
.swatch.text-serif::after { font-family: Georgia, serif; }
.swatch.text-comic::after { font-family: "Blog Comic", cursive; }
.swatch.text-hand::after  { font-family: "Blog Hand", cursive; font-size: 22px; }
.swatch.text-type::after  { font-family: "Blog Elite", monospace; }
.swatch.text-easy::after  { font-family: "Blog Easy", sans-serif; font-size: 16px; }
.swatch.preset-paper     { background: linear-gradient(#111111, #111111) 50% 22% / 70% 4px no-repeat, linear-gradient(90deg, #b9b9b9 0 46%, transparent 46% 54%, #b9b9b9 54%) 50% 78% / 84% 44% no-repeat, #fffdf7; }
.swatch.preset-scrapbook { background: linear-gradient(#fffdf3, #fffdf3) 12% 40% / 34% 60% no-repeat, linear-gradient(#eaf6ff, #eaf6ff) 88% 60% / 34% 60% no-repeat, radial-gradient(circle, rgba(11, 29, 69, 0.2) 0 4px, transparent 5px) 0 0 / 20px 20px, #c0a154; }
.swatch.preset-diary     { background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(60, 120, 200, 0.35) 9px 10px) 50% 50% / 62% 80% no-repeat, linear-gradient(#fffdf7, #fffdf7) 50% 50% / 62% 80% no-repeat, #caf99b; }
.swatch.preset-magazine  { background: linear-gradient(#8a55e0, #8a55e0) 0 0 / 100% 46% no-repeat, linear-gradient(90deg, #d7d7e4 0 30%, transparent 30% 35%, #d7d7e4 35% 65%, transparent 65% 70%, #d7d7e4 70%) 0 100% / 100% 40% no-repeat, #ffffff; }
.swatch.preset-desktop   { background: linear-gradient(180deg, #17a7a7 0 26%, #f4f9ff 26%) 50% 50% / 64% 70% no-repeat, #0066cc; box-shadow: inset 0 0 0 2px #10131c; }
.swatch.preset-spooky    { background: radial-gradient(circle at 74% 30%, #ffb347 0 9px, transparent 10px), linear-gradient(180deg, #120b1e, #3a1a12); }
.swatch.preset-arcade    { box-shadow: none; }
.swatch.preset-comic     { box-shadow: inset 0 0 0 3px #111111; }
.own-colour + .own-colour { margin-top: 0 !important; }

@media (max-width: 760px) {
  :root[data-layout="newspaper"] .blog-body, :root[data-layout="newspaper"][data-side="left"] .blog-body { grid-template-columns: minmax(0, 1fr); }
  :root[data-layout="newspaper"] .feed { column-count: 1; }
  :root[data-layout="journal"][data-cards="paper"] .feed .post-tile.full { padding-left: 54px; }
  /* The strip still says whose blog this is ("A player's blog"): as a small line under our name,
     where there is no room for it beside it. (It was taken away on a phone, where a blog with a
     pass then said nowhere near its top that a player wrote it.) */
  .platform-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark side" "tag side"; gap: 2px 10px; }
  .platform-mark { grid-area: mark; align-self: end; }
  .platform-tag { grid-area: tag; align-self: start; justify-self: start; padding: 0; border: 0; border-radius: 0; background: none; font-size: 11px; line-height: 1.2; color: #b9d6f5; }
  .platform-side { grid-area: side; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-layout="scrapbook"] .feed .post-tile, :root[data-layout="scrapbook"] .blog-side > .gadget { transform: none; }
}
@media print { .platform-bar, .free-banner, .platform-foot .report { display: none; } }

/* ==== "Created for free": the platform's line on a free blog =================================
   Part of the strip, so literals only. A pass or a group blog takes it away. */
.free-banner {
  --focus-ring: #3a2500;
  margin: -16px 0 16px; padding: 7px 14px; text-align: center; background: #fff1b8; border-bottom: 2px solid #e0a000; color: #3a2500;
  font: 700 13px/1.4 "ChoUiText", "Century Gothic", "Trebuchet MS", sans-serif;
}
.free-banner a { color: #0b4fa8; font-weight: 800; }

/* ==== The foot of the blog: the writer's, so it wears the blog's own tokens ================== */
.blog-foot { margin: 28px 0 0; padding: 16px 20px; text-align: center; color: var(--text); font-size: 14px; line-height: 1.5; }
.blog-foot p { margin: 0; overflow-wrap: anywhere; }
.blog-foot a { color: var(--accent-text); font-weight: 800; }
.blog-foot-name { font: 800 22px/1.15 var(--display); color: var(--heading); }
.blog-foot-copy { font-weight: 700; }
.blog-foot-note { margin-top: 4px !important; font-style: italic; }
.blog-foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; margin: 10px 0; }
.blog-foot-host { font-size: 12.5px; color: var(--muted); }
/* A quiet line: no name, one small plate. */
.foot-simple { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 12px 22px; border-radius: var(--radius-lg); background: var(--plate-bg); border: 1.5px solid var(--plate-edge); }
.foot-simple .blog-foot-name { display: none; }
.foot-simple .blog-foot-links { margin: 6px 0; }
/* A coloured bar, in the colour of the blog's bands. */
.foot-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; text-align: left; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); box-shadow: var(--panel-shadow);
}
.foot-bar .blog-foot-name { color: var(--band-ink); text-shadow: 0 2px 0 var(--band-shadow); }
.foot-bar a, .foot-bar .blog-foot-host { color: var(--band-ink); }
.foot-bar .blog-foot-links { margin: 0; justify-content: flex-end; }
.foot-bar .blog-foot-host { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.3); opacity: 0.92; }
/* A panel like the rest of the blog's panels. */
.foot-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; text-align: left; padding: 20px 24px;
  background: var(--panel-bg); border: 2px solid var(--panel-rim); border-radius: var(--radius-lg); box-shadow: var(--panel-shadow);
}
.foot-card .blog-foot-links { margin: 0; flex-direction: column; align-items: flex-end; gap: 2px; }
.foot-card .blog-foot-host { grid-column: 1 / -1; padding-top: 10px; border-top: 1.5px solid var(--panel-line); }
/* Big and bold: the blog's name once more, as large as it was at the top. */
.foot-big { padding: 30px 20px 22px; border-radius: var(--radius-lg); background: var(--plate-bg); border-top: 6px solid var(--accent); box-shadow: var(--panel-shadow); }
.foot-big .blog-foot-name { font-size: clamp(30px, 5vw, 54px); line-height: 1.05; text-shadow: var(--heading-shadow); margin-bottom: 8px; }
.foot-big .blog-foot-links { margin: 14px 0; gap: 8px 12px; }
.foot-big .blog-foot-links a { padding: 6px 14px; border-radius: 999px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink); text-decoration: none; }
:root[data-cards="boxy"] .blog-foot, :root[data-cards="pixel"] .blog-foot, :root[data-cards="pixel"] .foot-big .blog-foot-links a { border-radius: 0; }
:root[data-heading="pixel"] .blog-zone .blog-foot-name { font-size: 16px; line-height: 1.4; }
:root[data-heading="pixel"] .blog-zone .foot-big .blog-foot-name { font-size: clamp(18px, 3vw, 28px); }
@media (max-width: 760px) {
  .foot-bar, .foot-card { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .foot-bar .blog-foot-links, .foot-card .blog-foot-links { flex-direction: row; justify-content: center; gap: 4px 18px; }
}
/* The foot in the studio's picker. */
.picker-foot .swatch { height: 44px; background-color: var(--tile-bg-hi); background-repeat: no-repeat; }
.swatch.foot-simple { margin: 0; padding: 0; width: auto; border-radius: 10px; background-image: linear-gradient(var(--muted), var(--muted)); background-size: 50% 4px; background-position: 50% 72%; }
.swatch.foot-bar    { margin: 0; padding: 0; display: block; border-radius: 10px; box-shadow: none; background-image: linear-gradient(#3d8ae8, #1a55b8); background-size: 100% 42%; background-position: 0 100%; }
.swatch.foot-card   { margin: 0; padding: 0; display: block; box-shadow: none; background-image: linear-gradient(#f4f9ff, #f4f9ff), linear-gradient(#2a62c9, #2a62c9); background-size: calc(84% - 4px) calc(46% - 4px), 84% 46%; background-position: 50% calc(82% - 0px), 50% 82%; border: 1.5px solid var(--tile-edge); border-radius: 10px; }
.swatch.foot-big    { margin: 0; padding: 0; display: grid; place-items: center; box-shadow: none; border: 0; border-top: 4px solid var(--accent); border-radius: 10px; background-image: none; }
.swatch.foot-big::after { content: "Name"; font: 800 22px/1 "ChoUiDisplay", "Arial Black", sans-serif; color: var(--heading); }

/* ==== .net or .com, when a blog is started and in its settings =============================== */
.home-choice .chips { margin: 8px 0 6px; }
.home-choice .pill-choice span { font-family: var(--font-text); font-weight: 800; }

/* ==== A colour of its own: a blog's card on the main site, or one gadget ======================
   The same eight colours a blog can choose, set on the card or the gadget instead of the page. */
.look-card[data-accent="blue"], .gadget[data-tint="blue"]     { --accent: #24bdff; --accent-ink: #0b6fb0; --band-top: #3477c8; --band-bottom: #1a55b8; --band-ink: #ffffff; --band-shadow: rgba(23, 64, 143, 0.9); --disc: radial-gradient(circle at 35% 28%, #6fb6ff 0%, #2a74de 60%, #1f5bb8 100%); }
.look-card[data-accent="green"], .gadget[data-tint="green"]   { --accent: #6fe38a; --accent-ink: #137a3c; --band-top: #22883c; --band-bottom: #116a29; --band-ink: #ffffff; --band-shadow: rgba(8, 58, 22, 0.9); --disc: radial-gradient(circle at 35% 28%, #5fd67c 0%, #1c8a39 62%, #0f5f25 100%); }
.look-card[data-accent="pink"], .gadget[data-tint="pink"]     { --accent: #ff9ccf; --accent-ink: #a8266d; --band-top: #c24a89; --band-bottom: #a52a6c; --band-ink: #ffffff; --band-shadow: rgba(96, 16, 58, 0.9); --disc: radial-gradient(circle at 35% 28%, #ff9ccf 0%, #cf3f8b 62%, #8f1f5c 100%); }
.look-card[data-accent="orange"], .gadget[data-tint="orange"] { --accent: #ffb35c; --accent-ink: #a34b00; --band-top: #f08a1c; --band-bottom: #cd680a; --band-ink: #2e1600; --band-shadow: rgba(255, 255, 255, 0.45); --disc: radial-gradient(circle at 35% 28%, #ffb866 0%, #dc7410 62%, #a34b00 100%); }
.look-card[data-accent="purple"], .gadget[data-tint="purple"] { --accent: #c9a8ff; --accent-ink: #5b2bb5; --band-top: #8a55e0; --band-bottom: #5226a8; --band-ink: #ffffff; --band-shadow: rgba(44, 16, 100, 0.9); --disc: radial-gradient(circle at 35% 28%, #b792ff 0%, #6f3bd0 62%, #46209a 100%); }
.look-card[data-accent="red"], .gadget[data-tint="red"]       { --accent: #ff9a8c; --accent-ink: #b3261e; --band-top: #ce4939; --band-bottom: #a3231a; --band-ink: #ffffff; --band-shadow: rgba(96, 14, 8, 0.9); --disc: radial-gradient(circle at 35% 28%, #ff8f7d 0%, #cf3a2a 62%, #8f1c13 100%); }
.look-card[data-accent="gold"], .gadget[data-tint="gold"]     { --accent: #ffd65a; --accent-ink: #8a5a00; --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%); }
.look-card[data-accent="teal"], .gadget[data-tint="teal"]     { --accent: #6fe6e0; --accent-ink: #0a6f6f; --band-top: #128484; --band-bottom: #0b6b6b; --band-ink: #ffffff; --band-shadow: rgba(4, 60, 60, 0.9); --disc: radial-gradient(circle at 35% 28%, #6fe6e0 0%, #129090 62%, #086060 100%); }
.gadget[data-tint] { --accent-text: var(--accent); }
:root[data-theme="light"] .gadget[data-tint] { --accent-text: var(--accent-ink); }

/* ==== Blog cards on the main site: each one a little of its blog ==============================
   A strip of the blog's header picture, its colours (from /card-looks.css), its lettering and
   the shape of its panels. */
.look-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-width: 2px; border-color: var(--card-edge, var(--tile-edge)); background: var(--card-page, var(--tile-bg)); color: var(--card-ink, var(--text)); }
a.look-card:hover { background: var(--card-page, var(--tile-bg-hi)); filter: brightness(1.06); }
.look-card-art { display: block; flex: none; height: 66px; background-size: cover; background-position: center; border-bottom: 4px solid var(--band-top, #3d8ae8); }
.look-card-body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 14px 14px; }
.blog-tile.look-card strong { font: 800 19px/1.2 var(--display); color: var(--card-ink, var(--heading)); overflow-wrap: anywhere; }
.look-card .meta { color: var(--card-soft, var(--muted)); }
.look-card .excerpt { color: var(--card-ink, var(--text)); }
.look-card .chip:not(.gold) { background: var(--card-chip, var(--chip-bg)); color: var(--card-ink, var(--chip-ink)); border-color: var(--card-soft, var(--chip-edge)); }
.journalist-row .look-card, .blog-grid .look-card { margin: 0; }
.look-card[data-heading="round"]  { --display: "Blog Fredoka", "Trebuchet MS", sans-serif; }
.look-card[data-heading="serif"]  { --display: "Blog Playfair", Georgia, serif; }
.look-card[data-heading="comic"]  { --display: "Blog Bangers", "Comic Sans MS", cursive; }
.look-card[data-heading="toon"]   { --display: "Blog Luckiest", "Arial Black", sans-serif; }
.look-card[data-heading="marker"] { --display: "Blog Marker", "Comic Sans MS", cursive; }
.look-card[data-heading="script"] { --display: "Blog Pacifico", "Brush Script MT", cursive; }
.look-card[data-heading="type"]   { --display: "Blog Elite", "Courier New", monospace; }
.look-card[data-heading="pixel"]  { --display: "Blog Pixel", "Courier New", monospace; }
.look-card[data-heading="space"]  { --display: "Blog Orbitron", Verdana, sans-serif; }
.look-card[data-heading="sign"]   { --display: "Blog Bungee", "Arial Black", sans-serif; }
.look-card[data-heading="gothic"] { --display: "Blog Pirata", Georgia, serif; }
.look-card[data-heading="spooky"] { --display: "Blog Creepster", "Comic Sans MS", cursive; }
.blog-tile.look-card[data-heading="pixel"] strong { font-size: 13px; line-height: 1.4; }
.blog-tile.look-card[data-heading="gothic"] strong, .blog-tile.look-card[data-heading="script"] strong { font-weight: 400; font-size: 23px; }
.look-card[data-cards="boxy"], .look-card[data-cards="pixel"], .look-card[data-cards="window"] { border-radius: 0; }
.look-card[data-cards="pixel"] { border: 0; box-shadow: 0 -3px 0 var(--band-top, #5cccff), 0 3px 0 var(--band-top, #5cccff), -3px 0 0 var(--band-top, #5cccff), 3px 0 0 var(--band-top, #5cccff), 6px 6px 0 rgba(0, 0, 0, 0.4); margin: 3px 3px 15px; }
.look-card[data-cards="window"] { border: 2px solid #10131c; border-radius: 6px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4); }
.look-card[data-cards="comic"] { border: 3px solid #111111; border-radius: 4px; box-shadow: 5px 5px 0 #111111; }
.look-card[data-cards="sticker"] { border-width: 4px; border-radius: 22px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--band-top, #3d8ae8) 45%, transparent); }
.look-card[data-cards="neon"] { box-shadow: 0 0 0 1px var(--band-top, #24bdff), 0 0 18px var(--band-top, #24bdff); }
.look-card[data-cards="bubble"] { border-radius: 26px; border-width: 3px; }
.look-card[data-cards="chalk"] { border: 3px dashed var(--card-soft, rgba(255, 255, 255, 0.7)); }
.look-card[data-cards="paper"] .look-card-art { border-bottom-style: dashed; }
.look-card[data-title="glow"] strong { text-shadow: 0 0 8px var(--band-top, #24bdff), 0 0 18px var(--band-top, #24bdff); }
.look-card[data-title="lifted"] strong, .look-card[data-title="shadow"] strong { text-shadow: 0 2px 0 var(--band-top, #3d8ae8); }
.look-card[data-title="stamp"] strong { padding: 2px 8px; border: 3px solid currentColor; border-radius: 8px; transform: rotate(-1.500deg); text-transform: uppercase; }
.look-card[data-title="rainbow"] strong { background: linear-gradient(90deg, #ff5f6d, #ffa63d, #e8c900, #3dbb6c, #2f9fe0, #9b5de5); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ==== More pictures, patterns, panels, titles and a layout ==================================== */
.art-sunrise    { background: radial-gradient(circle at 50% 108%, #fff6c8 0 16%, #ffcf6b 17% 30%, transparent 46%), linear-gradient(180deg, #5b3fa6 0%, #e86a8f 45%, #ffb36b 78%, #ffe29a 100%); }
.art-nebula     { background: var(--stars), radial-gradient(ellipse 50% 60% at 25% 40%, rgba(255, 92, 214, 0.55), transparent 70%), radial-gradient(ellipse 50% 60% at 75% 55%, rgba(60, 200, 255, 0.5), transparent 70%), linear-gradient(180deg, #0b0524, #2a0f5c); }
.art-underwater { background: radial-gradient(circle at 20% 78%, transparent 0 9px, rgba(255, 255, 255, 0.55) 10px 11px, transparent 12px), radial-gradient(circle at 70% 40%, transparent 0 6px, rgba(255, 255, 255, 0.5) 7px 8px, transparent 9px), radial-gradient(ellipse 60% 26% at 30% 108%, #1f9a6a 0 62%, transparent 63%), radial-gradient(ellipse 50% 22% at 82% 110%, #e2c170 0 62%, transparent 63%), linear-gradient(180deg, #5fd0ee 0%, #1179b8 55%, #0a3f78 100%); }
.art-forest     { background: conic-gradient(from 150deg at 18% 104%, #1c6b34 0 60deg, transparent 0) 0 0 / 15% 100%, conic-gradient(from 150deg at 50% 104%, #2a8a45 0 60deg, transparent 0) 6% 0 / 19% 100%, linear-gradient(0deg, #1c5a2c 0 14%, transparent 14%), linear-gradient(180deg, #9fdcff 0%, #e9f7d8 100%); }
.art-snowy      { background: radial-gradient(circle, #ffffff 0 2px, transparent 3px) 0 0 / 46px 40px, radial-gradient(ellipse 70% 44% at 24% 112%, #ffffff 0 62%, transparent 63%), radial-gradient(ellipse 80% 50% at 82% 118%, #e6f1fb 0 62%, transparent 63%), linear-gradient(180deg, #7fb2e6 0%, #cfe6fa 100%); }
.art-lava       { background: radial-gradient(ellipse 34% 60% at 50% 118%, #2a1512 0 62%, transparent 63%), radial-gradient(circle at 50% 36%, #ffd24a 0 4%, #ff7a1a 5% 12%, transparent 24%), linear-gradient(180deg, #1a0d14 0%, #5a1a12 60%, #c2410c 100%); }
:root[data-pattern="plaid"] .site-shell::after { background: repeating-linear-gradient(0deg, var(--pattern-ink) 0 10px, transparent 10px 44px), repeating-linear-gradient(90deg, var(--pattern-ink) 0 10px, transparent 10px 44px); }
:root[data-pattern="waves"] .site-shell::after { background: radial-gradient(circle at 50% 0, transparent 0 15px, var(--pattern-ink) 16px 20px, transparent 21px) 0 0 / 44px 26px, radial-gradient(circle at 50% 100%, transparent 0 15px, var(--pattern-ink) 16px 20px, transparent 21px) 22px 13px / 44px 26px; }
:root[data-pattern="moons"] .site-shell::after { background: var(--pattern-ink); -webkit-mask: url("../img/patterns/moon.svg") repeat; mask: url("../img/patterns/moon.svg") repeat; }
.swatch.pattern-plaid { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0 4px, transparent 4px 14px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 4px, transparent 4px 14px); }
.swatch.pattern-waves { background-image: radial-gradient(circle at 50% 0, transparent 0 6px, rgba(255, 255, 255, 0.6) 7px 9px, transparent 10px); background-size: 20px 12px; }
.swatch.pattern-moons { background-image: url("../img/patterns/moon.svg"); background-size: 40px; background-color: #c9a8ff; }

:root[data-title="shadow"] .plate h1 { text-shadow: 1px 1px 0 var(--band-bottom), 2px 2px 0 var(--band-bottom), 3px 3px 0 var(--band-bottom), 4px 4px 0 var(--band-bottom), 5px 5px 0 var(--band-bottom), 6px 6px 0 var(--band-bottom), 9px 9px 12px rgba(0, 0, 0, 0.3); }
:root[data-title="outline"] .plate h1, :root[data-title="outline"] .plate h1 a { color: transparent; -webkit-text-stroke: 2px var(--heading); text-shadow: none; }
.swatch.title-shadow::after { text-shadow: 1px 1px 0 #1a55b8, 2px 2px 0 #1a55b8, 3px 3px 0 #1a55b8, 4px 4px 0 #1a55b8; }
.swatch.title-outline::after { color: transparent; -webkit-text-stroke: 1.500px var(--heading); }

/* Chalkboard: white chalk on green slate in a wooden frame. Dark in both themes. */
:root[data-cards="chalk"] .blog-zone .panel, :root[data-cards="chalk"] .blog-zone .plate, .gs-chalk > .panel {
  --panel-bg: #22302c; --panel-line: rgba(255, 255, 255, 0.3); --tile-bg: rgba(255, 255, 255, 0.07); --tile-bg-hi: rgba(255, 255, 255, 0.13); --tile-edge: rgba(255, 255, 255, 0.3);
  --plate-bg: #22302c; --plate-edge: rgba(255, 255, 255, 0.5); --chip-bg: rgba(255, 255, 255, 0.1); --chip-bg-hi: rgba(255, 255, 255, 0.2); --chip-edge: rgba(255, 255, 255, 0.45); --chip-ink: #ffffff;
  --field-bg: rgba(0, 0, 0, 0.3); --text: #f4f7ee; --heading: #ffffff; --heading-shadow: none; --muted: #c5d3c2; --accent-text: #ffe27a; --green: #9be7a8; --warn: #ffcf8a; --danger: #ffb0a3; --focus-ring: #ffffff;
  --ink-red: var(--ink-red-d); --ink-orange: var(--ink-orange-d); --ink-gold: var(--ink-gold-d); --ink-green: var(--ink-green-d); --ink-teal: var(--ink-teal-d); --ink-blue: var(--ink-blue-d); --ink-purple: var(--ink-purple-d); --ink-pink: var(--ink-pink-d);
  background: #22302c; color: #f4f7ee; border: 3px dashed rgba(255, 255, 255, 0.7); border-radius: 8px; box-shadow: 0 0 0 7px #7a5a36, 0 14px 26px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-cards="chalk"] .blog-zone .panel, .gs-chalk > .panel { margin: 7px 7px 27px; }
:root[data-cards="chalk"] .blog-zone .band, .gs-chalk .band { background: none; box-shadow: none; border-bottom: 2px dashed rgba(255, 255, 255, 0.5); color: #ffffff; }
:root[data-cards="chalk"] .blog-zone .band h1, :root[data-cards="chalk"] .blog-zone .band h2, .gs-chalk .band h2 { text-shadow: none; }
:root[data-cards="chalk"] .blog-zone .disc, .gs-chalk .disc { display: none; }
:root[data-cards="chalk"] .blog-zone .hero { border: 0; border-radius: 8px; box-shadow: 0 0 0 7px #7a5a36; }
/* Bubbles: everything round and soft, the heading in a pill of its own. */
:root[data-cards="bubble"] .blog-zone .panel, :root[data-cards="bubble"] .blog-zone .hero { border-radius: 34px; border: 4px solid rgba(255, 255, 255, 0.75); box-shadow: 0 16px 0 -8px rgba(0, 0, 0, 0.14), 0 18px 36px rgba(0, 0, 0, 0.25); }
:root[data-cards="bubble"] .blog-zone .band { margin: 10px 10px 0; min-height: 48px; border-radius: 999px; border: 0; }
:root[data-cards="bubble"] .blog-zone .plate, :root[data-cards="bubble"] .blog-zone .tile { border-radius: 26px; }
.swatch.cards-chalk  { background: #22302c; border: 2px dashed rgba(255, 255, 255, 0.8); box-shadow: 0 0 0 3px #7a5a36; }
.swatch.cards-bubble { background: #0b2a55; border: 3px solid rgba(255, 255, 255, 0.8); border-radius: 999px; }

/* Timeline: posts along a line, a dot for each, newest at the top. */
:root[data-layout="timeline"] .blog-body { grid-template-columns: minmax(0, 1fr); }
:root[data-layout="timeline"] .blog-main { order: 0; }
:root[data-layout="timeline"] .blog-side { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; }
:root[data-layout="timeline"] .feed-wrap { overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-left: 0; margin-right: 0; }
:root[data-layout="timeline"] .feed-wrap > .band { display: none; }
:root[data-layout="timeline"] .feed-wrap > .panel-body { padding: 0; }
:root[data-layout="timeline"] .feed { position: relative; max-width: 820px; margin: 0 auto; padding: 6px 0 6px 40px; }
:root[data-layout="timeline"] .feed::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 5px; border-radius: 5px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
:root[data-layout="timeline"] .feed .post-tile { position: relative; margin: 0 0 20px; padding: 18px 20px; background: var(--panel-bg); border: 3px solid var(--panel-rim); border-radius: var(--radius-lg); box-shadow: var(--panel-shadow); }
:root[data-layout="timeline"] .feed .post-tile::before { content: ""; position: absolute; left: -38px; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--band-top); border: 4px solid #ffffff; box-shadow: 0 0 0 2px var(--band-bottom); }
:root[data-layout="timeline"] .feed .post-tile::after { content: ""; position: absolute; left: -17px; top: 30px; width: 14px; height: 3px; background: var(--panel-rim); }
.swatch.layout-timeline { background-image: linear-gradient(var(--accent-text), var(--accent-text)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)), linear-gradient(var(--muted), var(--muted)); background-size: 4px 86%, 62% 20%, 62% 20%, 62% 20%; background-position: 14% 50%, 70% 10%, 70% 50%, 70% 90%; background-repeat: no-repeat; opacity: 0.85; }
.swatch.preset-chalkboard { background: #22302c; box-shadow: inset 0 0 0 4px #7a5a36; }
.swatch.preset-deepsea    { background: radial-gradient(circle at 30% 60%, transparent 0 5px, #ffffff 6px 7px, transparent 8px), radial-gradient(circle at 70% 30%, transparent 0 3px, #ffffff 4px 5px, transparent 6px), linear-gradient(180deg, #5fd0ee, #0a3f78); }
.swatch.preset-volcano    { background: radial-gradient(circle at 50% 100%, #ffd24a 0 10%, #ff7a1a 11% 26%, transparent 46%), linear-gradient(180deg, #1a0d14, #5a1a12); }
.swatch.preset-winter     { background: repeating-linear-gradient(0deg, rgba(214, 50, 46, 0.35) 0 4px, transparent 4px 14px), repeating-linear-gradient(90deg, rgba(214, 50, 46, 0.35) 0 4px, transparent 4px 14px), #ffffff; }
.swatch.preset-logbook    { background: linear-gradient(#2aa84a, #2aa84a) 16% 50% / 4px 84% no-repeat, linear-gradient(#fffdf7, #fffdf7) 72% 16% / 58% 22% no-repeat, linear-gradient(#fffdf7, #fffdf7) 72% 50% / 58% 22% no-repeat, linear-gradient(#fffdf7, #fffdf7) 72% 84% / 58% 22% no-repeat, #c0a154; }
.swatch.preset-dreamy     { background: radial-gradient(ellipse 50% 60% at 30% 40%, rgba(255, 92, 214, 0.7), transparent 70%), radial-gradient(ellipse 50% 60% at 75% 60%, rgba(60, 200, 255, 0.6), transparent 70%), #9c36c6; }

/* ==== A gadget's own style ====================================================================
   .gs-panel is the blog's own panels and needs nothing. */
.gadget { margin: 0 0 20px; }
.gadget > .panel, .gadget > .marquee { margin-bottom: 0; }
.gadget > .sticky-note { margin-bottom: 2px; }
.gs-plain > .panel { border: 0; border-radius: 12px; box-shadow: none; background: rgba(4, 10, 32, 0.56); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="light"] .gs-plain > .panel { background: rgba(255, 255, 255, 0.8); }
:root[data-glass="custom"] .gs-plain > .panel { background: var(--panel-bg); }
.gs-plain .band, .gs-frame .band, .gs-note .band { min-height: 0; padding: 14px 16px 0; background: none; box-shadow: none; border: 0; color: var(--heading); transform: none; margin: 0; width: auto; max-width: none; }
.gs-plain .band h2, .gs-frame .band h2, .gs-note .band h2 { padding-bottom: 6px; border-bottom: 3px solid var(--band-top); text-shadow: none; text-transform: none; }
.gs-plain .disc, .gs-frame .disc, .gs-note .disc, .gs-badge .disc { display: none; }
.gs-note > .panel {
  --panel-line: rgba(0, 0, 0, 0.15); --tile-bg: rgba(0, 0, 0, 0.06); --tile-bg-hi: rgba(0, 0, 0, 0.1); --tile-edge: rgba(0, 0, 0, 0.2); --chip-bg: rgba(255, 255, 255, 0.6); --chip-bg-hi: #ffffff; --chip-edge: rgba(0, 0, 0, 0.28); --chip-ink: #3a2b00;
  --field-bg: #ffffff; --text: #3a2b00; --heading: #3a2b00; --heading-shadow: none; --muted: #6d5a1c; --accent-text: #7a4a00; --green: #1f6a2c; --warn: #8a4200; --danger: #9c1f16; --focus-ring: #3a2b00;
  --ink-red: var(--ink-red-l); --ink-orange: var(--ink-orange-l); --ink-gold: var(--ink-gold-l); --ink-green: var(--ink-green-l); --ink-teal: var(--ink-teal-l); --ink-blue: var(--ink-blue-l); --ink-purple: var(--ink-purple-l); --ink-pink: var(--ink-pink-l);
  background: #fff3a8; color: #3a2b00; border: 0; border-radius: 3px 3px 18px 3px; box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.22); transform: rotate(-1.200deg); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.gs-note[data-tint="pink"] > .panel { background: #ffd9ea; }
.gs-note[data-tint="blue"] > .panel, .gs-note[data-tint="teal"] > .panel { background: #d6f0ff; }
.gs-note[data-tint="green"] > .panel { background: #d9f7d0; }
.gs-note[data-tint="purple"] > .panel { background: #eadcff; }
.gs-note[data-tint="orange"] > .panel, .gs-note[data-tint="red"] > .panel { background: #ffe0c2; }
.gs-badge > .panel { border-radius: 30px; border: 4px solid var(--band-top); box-shadow: 0 6px 0 var(--band-bottom), var(--panel-shadow); text-align: center; }
.gs-badge .band { justify-content: center; min-height: 0; padding: 8px 14px; margin: 0; width: auto; max-width: none; transform: none; }
.gs-badge .band h2 { flex: 0 1 auto; font-size: 16px; }
.gs-badge .stat-row, .gs-badge .chips, .gs-badge .actions, .gs-badge .odometer, .gs-badge .online, .gs-badge .hearts { justify-content: center; }
.gs-badge .link-list, .gs-badge .todo { text-align: left; }
.gs-frame > .panel { margin: 9px; border: 3px double var(--band-top); border-radius: 4px; outline: 3px solid var(--band-bottom); outline-offset: 4px; box-shadow: none; }
.gs-frame .band { justify-content: center; text-align: center; }
.gs-bold > .panel {
  --panel-line: rgba(255, 255, 255, 0.35); --tile-bg: rgba(255, 255, 255, 0.16); --tile-bg-hi: rgba(255, 255, 255, 0.26); --tile-edge: rgba(255, 255, 255, 0.42); --chip-bg: rgba(255, 255, 255, 0.2); --chip-bg-hi: rgba(255, 255, 255, 0.34);
  --chip-edge: rgba(255, 255, 255, 0.55); --chip-ink: var(--band-ink); --text: var(--band-ink); --heading: var(--band-ink); --heading-shadow: none; --muted: var(--band-ink); --accent-text: var(--band-ink); --focus-ring: var(--band-ink);
  background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); border-color: rgba(255, 255, 255, 0.65); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.gs-bold .band { background: none; box-shadow: none; border-bottom-color: rgba(255, 255, 255, 0.35); transform: none; }
.gs-bold .disc { background: rgba(255, 255, 255, 0.24); }

/* ==== The newer gadgets ======================================================================= */
.link-list.ranked { list-style: decimal; padding-left: 1.300em; }
.link-list .said { display: block; color: var(--muted); font-size: 0.92rem; overflow-wrap: anywhere; }
.cal-month { margin: 0 0 8px; font: 800 16px/1.2 var(--display); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-weight: 700; font-size: 0.86rem; }
.cal .dow { color: var(--muted); font-size: 0.76rem; }
.cal .day { padding: 5px 0; border-radius: 8px; background: var(--tile-bg); }
.cal .day.posted { background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); }
.cal .day.today { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.stat strong + br, .stat strong { margin-bottom: 4px; }
.motto { margin: 0; padding: 0 0 0 14px; border-left: 5px solid var(--band-top); }
.motto p { margin: 0; font: 800 20px/1.3 var(--display); color: var(--heading); overflow-wrap: anywhere; }
.motto footer { margin-top: 8px; color: var(--muted); font-weight: 700; }
.motto footer::before { content: "\2014\00a0"; }
.mood { margin: 0; font: 800 26px/1.2 var(--display); color: var(--accent-text); overflow-wrap: anywhere; }
progress.goal { display: block; width: 100%; height: 18px; margin: 0 0 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--tile-bg-hi); accent-color: var(--band-top); }
progress.goal::-webkit-progress-bar { background: var(--tile-bg-hi); }
progress.goal::-webkit-progress-value { background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); border-radius: 999px; }
progress.goal::-moz-progress-bar { background: var(--band-top); border-radius: 999px; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; overflow-wrap: anywhere; }
.todo .tick { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--muted); }
.todo .done .tick { border-color: var(--band-top); background: var(--band-top) linear-gradient(135deg, transparent 0 44%, var(--band-ink) 45% 56%, transparent 57%); }
.todo .done > span:nth-child(2) { color: var(--muted); text-decoration: line-through; }

/* ==== Reactions =============================================================================== */
.face { font-size: 1.250em; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.btn.react { min-height: 42px; padding: 0 18px; font-size: 15px; }
.hearts > .face { font-size: 1.600em; }
.picker-reaction { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.face.big { display: grid; place-items: center; height: 44px; font-size: 30px; }
.dress { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.form .dress label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; max-width: 100%; margin: 0; font: 700 14px/1.2 var(--font-text); color: var(--muted); }
/* (A box of choices is as wide as its longest choice, which can be wider than a phone: it went
   under its words' row and out of the panel. It goes under them now, and no wider than its row.) */
.form .dress select { display: inline-block; flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 6px 10px; }

/* ==== Every room in the library as a header picture or behind the page (generated from
   src/library.mjs; add a room there and a line here), and the characters for the header. ==== */
.art-room-loc1, .swatch.backdrop-room-loc1 { background-image: url("../img/rooms2/loc1.webp"); }
:root[data-backdrop="room-loc1"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/loc1.webp") center / cover no-repeat; }
.art-room-loc2, .swatch.backdrop-room-loc2 { background-image: url("../img/rooms2/loc2.webp"); }
:root[data-backdrop="room-loc2"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/loc2.webp") center / cover no-repeat; }
.art-room-loc3, .swatch.backdrop-room-loc3 { background-image: url("../img/rooms2/loc3.webp"); }
:root[data-backdrop="room-loc3"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/loc3.webp") center / cover no-repeat; }
.art-room-loc5, .swatch.backdrop-room-loc5 { background-image: url("../img/rooms2/loc5.webp"); }
:root[data-backdrop="room-loc5"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/loc5.webp") center / cover no-repeat; }
.art-room-locEco, .swatch.backdrop-room-locEco { background-image: url("../img/rooms2/locEco.webp"); }
:root[data-backdrop="room-locEco"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locEco.webp") center / cover no-repeat; }
.art-room-locMusic, .swatch.backdrop-room-locMusic { background-image: url("../img/rooms2/locMusic.webp"); }
:root[data-backdrop="room-locMusic"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locMusic.webp") center / cover no-repeat; }
.art-room-locAcademyRoom, .swatch.backdrop-room-locAcademyRoom { background-image: url("../img/rooms2/locAcademyRoom.webp"); }
:root[data-backdrop="room-locAcademyRoom"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locAcademyRoom.webp") center / cover no-repeat; }
.art-room-locAgents, .swatch.backdrop-room-locAgents { background-image: url("../img/rooms2/locAgents.webp"); }
:root[data-backdrop="room-locAgents"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locAgents.webp") center / cover no-repeat; }
.art-room-locBeach_fish, .swatch.backdrop-room-locBeach_fish { background-image: url("../img/rooms2/locBeach_fish.webp"); }
:root[data-backdrop="room-locBeach_fish"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locBeach_fish.webp") center / cover no-repeat; }
.art-room-locCitizen, .swatch.backdrop-room-locCitizen { background-image: url("../img/rooms2/locCitizen.webp"); }
:root[data-backdrop="room-locCitizen"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locCitizen.webp") center / cover no-repeat; }
.art-room-locGames, .swatch.backdrop-room-locGames { background-image: url("../img/rooms2/locGames.webp"); }
:root[data-backdrop="room-locGames"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locGames.webp") center / cover no-repeat; }
.art-room-locHome, .swatch.backdrop-room-locHome { background-image: url("../img/rooms2/locHome.webp"); }
:root[data-backdrop="room-locHome"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locHome.webp") center / cover no-repeat; }
.art-room-locMissions, .swatch.backdrop-room-locMissions { background-image: url("../img/rooms2/locMissions.webp"); }
:root[data-backdrop="room-locMissions"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locMissions.webp") center / cover no-repeat; }
.art-room-locRobots, .swatch.backdrop-room-locRobots { background-image: url("../img/rooms2/locRobots.webp"); }
:root[data-backdrop="room-locRobots"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locRobots.webp") center / cover no-repeat; }
.art-room-locAccShop, .swatch.backdrop-room-locAccShop { background-image: url("../img/rooms2/locAccShop.webp"); }
:root[data-backdrop="room-locAccShop"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locAccShop.webp") center / cover no-repeat; }
.art-room-locEcoShop, .swatch.backdrop-room-locEcoShop { background-image: url("../img/rooms2/locEcoShop.webp"); }
:root[data-backdrop="room-locEcoShop"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locEcoShop.webp") center / cover no-repeat; }
.art-room-locHomeShop, .swatch.backdrop-room-locHomeShop { background-image: url("../img/rooms2/locHomeShop.webp"); }
:root[data-backdrop="room-locHomeShop"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locHomeShop.webp") center / cover no-repeat; }
.art-room-locMagicShop, .swatch.backdrop-room-locMagicShop { background-image: url("../img/rooms2/locMagicShop.webp"); }
:root[data-backdrop="room-locMagicShop"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locMagicShop.webp") center / cover no-repeat; }
.art-room-locPark_spring, .swatch.backdrop-room-locPark_spring { background-image: url("../img/rooms2/locPark_spring.webp"); }
:root[data-backdrop="room-locPark_spring"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locPark_spring.webp") center / cover no-repeat; }
.art-room-locPark_autumn, .swatch.backdrop-room-locPark_autumn { background-image: url("../img/rooms2/locPark_autumn.webp"); }
:root[data-backdrop="room-locPark_autumn"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locPark_autumn.webp") center / cover no-repeat; }
.art-room-locWinterPark, .swatch.backdrop-room-locWinterPark { background-image: url("../img/rooms2/locWinterPark.webp"); }
:root[data-backdrop="room-locWinterPark"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locWinterPark.webp") center / cover no-repeat; }
.art-room-locSanta, .swatch.backdrop-room-locSanta { background-image: url("../img/rooms2/locSanta.webp"); }
:root[data-backdrop="room-locSanta"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locSanta.webp") center / cover no-repeat; }
.art-room-locParty, .swatch.backdrop-room-locParty { background-image: url("../img/rooms2/locParty.webp"); }
:root[data-backdrop="room-locParty"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locParty.webp") center / cover no-repeat; }
.art-room-locKongregateSweetBattle, .swatch.backdrop-room-locKongregateSweetBattle { background-image: url("../img/rooms2/locKongregateSweetBattle.webp"); }
:root[data-backdrop="room-locKongregateSweetBattle"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locKongregateSweetBattle.webp") center / cover no-repeat; }
.art-room-locNichos, .swatch.backdrop-room-locNichos { background-image: url("../img/rooms2/locNichos.webp"); }
:root[data-backdrop="room-locNichos"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos.webp") center / cover no-repeat; }
.art-room-locNichos1, .swatch.backdrop-room-locNichos1 { background-image: url("../img/rooms2/locNichos1.webp"); }
:root[data-backdrop="room-locNichos1"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos1.webp") center / cover no-repeat; }
.art-room-locNichos2, .swatch.backdrop-room-locNichos2 { background-image: url("../img/rooms2/locNichos2.webp"); }
:root[data-backdrop="room-locNichos2"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos2.webp") center / cover no-repeat; }
.art-room-locNichos3, .swatch.backdrop-room-locNichos3 { background-image: url("../img/rooms2/locNichos3.webp"); }
:root[data-backdrop="room-locNichos3"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos3.webp") center / cover no-repeat; }
.art-room-locNichos4, .swatch.backdrop-room-locNichos4 { background-image: url("../img/rooms2/locNichos4.webp"); }
:root[data-backdrop="room-locNichos4"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos4.webp") center / cover no-repeat; }
.art-room-locNichos5, .swatch.backdrop-room-locNichos5 { background-image: url("../img/rooms2/locNichos5.webp"); }
:root[data-backdrop="room-locNichos5"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos5.webp") center / cover no-repeat; }
.art-room-locNichos6, .swatch.backdrop-room-locNichos6 { background-image: url("../img/rooms2/locNichos6.webp"); }
:root[data-backdrop="room-locNichos6"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos6.webp") center / cover no-repeat; }
.art-room-locNichos7, .swatch.backdrop-room-locNichos7 { background-image: url("../img/rooms2/locNichos7.webp"); }
:root[data-backdrop="room-locNichos7"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos7.webp") center / cover no-repeat; }
.art-room-locNichos8, .swatch.backdrop-room-locNichos8 { background-image: url("../img/rooms2/locNichos8.webp"); }
:root[data-backdrop="room-locNichos8"] { --page-bg: linear-gradient(rgba(4, 7, 28, 0.4), rgba(4, 7, 28, 0.4)), url("../img/rooms2/locNichos8.webp") center / cover no-repeat; }
.swatch.mascot-fairy { background-image: url("../img/lib/stickers/fairy.png"); }
.swatch.mascot-pointing { background-image: url("../img/lib/stickers/pointing.png"); }
.swatch.mascot-space-blue { background-image: url("../img/lib/stickers/space-blue.png"); }
.swatch.mascot-space-green { background-image: url("../img/lib/stickers/space-green.png"); }
.swatch.mascot-space-pink { background-image: url("../img/lib/stickers/space-pink.png"); }
.swatch.mascot-councilor { background-image: url("../img/lib/stickers/councilor.webp"); }
.swatch.mascot-magic { background-image: url("../img/lib/stickers/magic.webp"); }
.swatch.mascot-chistochob { background-image: url("../img/lib/stickers/chistochob.svg"); }
.swatch.mascot-chopix { background-image: url("../img/lib/stickers/chopix.svg"); }
.swatch.mascot-choproff { background-image: url("../img/lib/stickers/choproff.svg"); }
.swatch.mascot-professor { background-image: url("../img/lib/stickers/professor.png"); }
.swatch.mascot-nicho { background-image: url("../img/lib/stickers/nicho.png"); }
.picker-mascot .swatch { height: 64px; background-size: contain; background-repeat: no-repeat; background-color: var(--tile-bg-hi); }
.swatch.mascot-none { background-image: none; }

/* ==== Art from the game, in a post =============================================================
   A room, a postcard, a sticker, a mood face: pictures from the library (src/library.mjs), each
   one of our own files. */
.cho-card.cho-pic { display: block; max-width: 640px; margin: 6px 0 18px; padding: 0; overflow: hidden; border-radius: var(--radius); border: 2px solid var(--tile-edge); background: var(--tile-bg); }
.cho-pic img { display: block; width: 100%; height: auto; }
.cho-pic figcaption { display: flex; gap: 10px; align-items: center; padding: 8px 12px; }
.cho-card.cho-sticker { display: block; margin: 6px 0 14px; padding: 0; border: 0; border-radius: 0; background: none; }
.cho-sticker img { display: block; max-width: min(240px, 70%); max-height: 240px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25)); }
.cho-card.cho-mood { padding: 6px 18px 6px 8px; }
.cho-mood img { width: 44px; height: 44px; }
.editor-visual .cho-card.cho-pic { display: block; max-width: 420px; padding-right: 0; }
.editor-visual .cho-card.cho-sticker { width: fit-content; padding-right: 40px; }
.editor-visual .cho-pic .card-x, .editor-visual .cho-sticker .card-x { top: 8px; right: 8px; transform: none; background: rgba(4, 10, 32, 0.8); color: #ffffff; }

/* Choosing one, in the editor: a grid of the pictures themselves. */
.card-dialog.picking { width: min(94vw, 780px); max-height: 86vh; overflow: auto; }
.pick-field h3 { margin: 14px 0 8px; font: 800 15px/1.2 var(--display); color: var(--muted); }
.pick-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.pick-grid.wide { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
/* A long list of pictures: Cancel stays in reach instead of waiting at the end of it. */
.card-dialog.picking 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); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pick-grid.small { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.pick { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 6px; border-radius: 12px; border: 2px solid var(--tile-edge); background: var(--tile-bg); color: var(--text); font: 700 12px/1.2 var(--font-text); text-align: center; cursor: pointer; }
.pick img { width: 100%; height: 84px; object-fit: contain; }
.pick-grid.wide .pick img { height: 84px; object-fit: cover; border-radius: 8px; }
.pick-grid.small .pick img { height: 52px; }
.pick:hover, .pick:focus-visible { background: var(--grad-gold); color: #3a2500; border-color: rgba(255, 255, 255, 0.85); }

/* (A character standing in the header: themes.css, "Who stands in the header".) */
/* (A character stands beside a newspaper's name as beside any other: hidden, the room made for it was a hole.) */
.picker-mascot { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

/* A sticker or a postcard as a gadget. */
.gadget-art { margin: 0; text-align: center; }
.gadget-art img { max-width: 100%; max-height: 240px; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3)); }
.gadget-art figcaption { display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--chip-bg); border: 1.5px solid var(--chip-edge); color: var(--chip-ink); font: 800 14px/1.2 var(--display); }
.postcard-gadget .panel-body { padding: 0; }
.postcard-gadget img { display: block; width: 100%; height: auto; }

/* ==== The front page ========================================================================== */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); min-height: 400px; margin-bottom: 16px; }
.home-hero-words { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 5vw, 56px); }
.kicker { align-self: flex-start; margin: 0 0 14px; padding: 7px 14px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.8); background: var(--grad-gold); color: #0b1d45; font: 800 14px/1.2 var(--display); box-shadow: 0 3px 0 var(--gold-lip); transform: rotate(-2deg); }
.home-hero h1 { margin: 0 0 12px; font: 800 clamp(40px, 6vw, 68px)/1 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); }
.lead { margin: 0 0 20px; max-width: 52ch; color: var(--muted); font-size: 1.1rem; font-weight: 700; }
.home-hero .btn { min-height: 48px; }
.hero-numbers { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; color: var(--muted); font-weight: 700; }
.hero-numbers strong { margin-right: 4px; font: 800 24px/1 var(--display); color: var(--heading); }
.home-hero-scene { position: relative; overflow: hidden; min-height: 300px; background: var(--stars), radial-gradient(ellipse 60% 50% at 50% 30%, rgba(95, 190, 254, 0.35), transparent 70%), linear-gradient(180deg, #071233 0%, #0e2a63 60%, #1a54a8 100%); }
:root[data-theme="light"] .home-hero-scene { background: radial-gradient(ellipse 30% 12% at 20% 20%, rgba(255, 255, 255, 0.9), transparent 70%), radial-gradient(ellipse 30% 12% at 76% 34%, rgba(255, 255, 255, 0.85), transparent 70%), linear-gradient(180deg, #3f97e4 0%, #6cb9f2 50%, #b4e0ff 100%); }
/* Scoped to the front page's row: a blog's lead story is also called .feature (.post-tile.feature). */
.features { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.features > .feature { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 14px; align-items: center; 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); color: var(--text); text-decoration: none; transition: transform 0.15s; }
.features > .feature:hover { transform: translateY(-3px); }
.features > .feature img { grid-row: 1 / span 2; width: 56px; height: 56px; }
.features > .feature strong { font: 800 20px/1.2 var(--display); color: var(--heading); }
.features > .feature span { color: var(--muted); font-weight: 700; font-size: 0.95rem; }
.greeting { display: flex; gap: 18px; align-items: center; }
.greeting-art { flex: none; height: 96px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3)); }
.nudge { display: flex; gap: 12px; align-items: flex-end; }
.nudge img { flex: none; width: 76px; margin-bottom: -6px; }

/* ==== The pages about the place ================================================================ */
.page-head { display: flex; gap: 20px; align-items: center; padding: clamp(18px, 3vw, 32px); }
.page-head img { flex: none; width: 92px; height: 92px; }
.page-head h1 { margin: 0 0 8px; font: 800 clamp(30px, 4.400vw, 46px)/1.05 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); }
.page-head .lead { margin-bottom: 0; }
.page-head .actions { margin-top: 16px; }
.prose .panel-body p { max-width: 70ch; }
.plain-list { margin: 0; padding-left: 1.300em; display: grid; gap: 8px; }
.plain-list li::marker { color: var(--accent-text); }
.steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { display: flex; gap: 12px; 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); }
.step-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grad-gold); color: #3a2500; font: 800 20px/1 var(--display); box-shadow: 0 3px 0 var(--gold-lip); }
.steps strong { font: 800 18px/1.2 var(--display); color: var(--heading); }
.steps p { margin: 4px 0 0; color: var(--muted); font-weight: 700; font-size: 0.95rem; }
.table-scroll { overflow-x: auto; }
.tiers { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.95rem; }
.tiers th, .tiers td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--panel-line); }
.tiers thead th { font: 800 16px/1.2 var(--display); color: var(--heading); }
.tiers tbody th { color: var(--muted); font-weight: 700; }
.tiers td:nth-child(3), .tiers thead th:nth-child(3) { background: var(--tile-bg); }
.faq { padding: 12px 0; border-bottom: 1px solid var(--panel-line); }
.faq summary { cursor: pointer; padding: 3px 0; font: 800 17px/1.3 var(--display); color: var(--heading); }
.faq p { margin: 8px 0 0; }
.page-links { justify-content: center; margin: 4px 0 0; }
.look-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.look-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0; }
.look-item .swatch { width: 100%; height: 86px; }
/* (Two to a row on a phone: one to a row, the forty-four of them were a page ten thousand pixels long.) */
@media (max-width: 480px) { .look-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; } .look-item .swatch { height: 64px; } }
.look-item strong { font: 800 16px/1.2 var(--display); color: var(--heading); }
.center { text-align: center; }

@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-hero-scene { min-height: 240px; order: -1; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .page-head { flex-direction: column; align-items: flex-start; }
}

/* ==== A blog run like a small website: a notice, a menu of pages, a page, a search box ========
   All of it the writer's, so it wears the blog's own tokens (src/pages.mjs). */
.blog-notice {
  margin: 0 0 16px; padding: 10px 18px; border-radius: var(--radius); text-align: center; overflow-wrap: anywhere;
  background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); font: 800 16px/1.4 var(--display); box-shadow: var(--panel-shadow);
}
:root[data-cards="boxy"] .blog-notice, :root[data-cards="pixel"] .blog-notice { border-radius: 0; }
.blog-menu { row-gap: 8px; }
.page-sheet .story > :first-child { margin-top: 0; }
.more-posts { margin-top: 14px; }
.pin-chip { vertical-align: middle; font-size: 12px; }
.search-box { display: flex; gap: 8px; align-items: center; margin: 0; }
.search-box .field { flex: 1; min-width: 0; margin: 0; }
/* The desk's list of pages. */
.pages-what { margin: 0 0 14px; }
.add-page { margin-top: 14px; }
.menu-reads { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--panel-line); }
.row .actions form { margin: 0; }

/* ==== A Chobot's card: their picture, name and facts, and the way to their profile ============
   The picture is Chobots' own (src/chobots.mjs). It sits over the first letter of the name, so
   a picture that does not arrive leaves the letter. */
.chobot-face { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--tile-bg-hi); border: 2px solid var(--tile-edge); text-decoration: none; }
.chobot-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chobot-face .face-letter { font: 800 1em/1 var(--display); color: var(--muted); }
.chobot-face.face-36 { width: 36px; height: 36px; font-size: 16px; }
.chobot-face.face-44 { width: 44px; height: 44px; font-size: 20px; }
.chobot-face.face-64 { width: 64px; height: 64px; font-size: 28px; }
.chobot-face.face-96 { width: 96px; height: 96px; font-size: 40px; border-radius: 22px; }
.chobot-face.face-160 { width: 160px; height: 160px; font-size: 64px; border-radius: 26px; }
/* A whole Chobot is not cropped to a circle: it stands in a soft box. */
.chobot-face.face-160 img, .chobot-face.face-96 img { object-fit: contain; }
a.chobot-face:hover, a.chobot-face:focus-visible { border-color: var(--accent); }
.chobot-card { display: flex; gap: 14px; align-items: flex-start; }
.chobot-card .chobot-facts { flex: 1; min-width: 0; }
.chobot-card .writer-name { margin: 0 0 6px; overflow-wrap: anywhere; }
.chobot-card .writer-name a { color: inherit; }
.chobot-card .chips { margin: 0 0 8px; }
.chobot-card .words { margin: 0 0 10px; }
.chobot-card.shape-tall { flex-direction: column; align-items: center; text-align: center; }
.chobot-card.shape-tall .chips, .chobot-card.shape-tall .actions { justify-content: center; }
.chobot-card.shape-slim { align-items: center; }
.chobot-card.shape-slim .writer-name { margin: 0 0 4px; font-size: 1.05rem; }
.chobot-card.shape-slim .chips { margin: 0; }
.chobot-card.shape-slim + .words { margin: 10px 0 0; }
.byline { display: flex; gap: 10px; align-items: center; }
.byline a { font-weight: 800; }
.online-row { display: flex; gap: 12px; align-items: center; }
.online-row .online { margin: 0; }
.writers-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.face-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px 8px; margin: 0; padding: 0; list-style: none; text-align: center; }
.face-row li { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.face-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 0.9rem; }
.face-row .meta { font-size: 0.78rem; }
.playercard { display: grid; place-items: center; }
.playercard img, .playercard iframe { display: block; width: 235px; max-width: 100%; height: auto; aspect-ratio: 235 / 336; border: 0; border-radius: 14px; background: var(--tile-bg); }
.playercard-name { margin: 8px 0 0; text-align: center; font-weight: 800; }
/* A player card inside a post, a page or an About (src/story.mjs): the game's own picture of the
   card, or the Chobot where there is no card to fetch, over the first letter of the name; the
   name under it; all of it the way to their profile. Two sit side by side where there is room,
   and one fits a phone 320 wide. */
.cho-card.cho-player { display: inline-block; vertical-align: top; max-width: 100%; margin: 6px 12px 18px 0; padding: 0; overflow: hidden; border-radius: var(--radius); border: 2px solid var(--tile-edge); background: var(--tile-bg); }
.cho-player-in { display: grid; justify-items: center; gap: 10px; padding: 12px 12px 10px; color: inherit; text-decoration: none; }
.cho-player-pic { display: grid; place-items: center; overflow: hidden; width: 235px; max-width: 100%; aspect-ratio: 235 / 336; border-radius: 14px; background: var(--tile-bg-hi); }
.cho-player-pic .face-letter { font: 800 64px/1 var(--display); color: var(--muted); }
/* The picture lies over the letter, in the same square of the frame, and takes its size from
   the frame, never a width and a height of its own: a browser draws its broken-picture mark and
   an edge for a picture that did not arrive wherever one has a size of its own, and nothing at
   all where it has none. So a card whose picture is missing is the letter, and only the letter. */
.cho-player :is(.cho-player-pic, .chobot-face) { grid-template: 100% / 100%; }
.cho-player :is(.cho-player-pic, .chobot-face) > * { grid-area: 1 / 1; }
/* (The picture wears the frame's own ground, so a Chobot drawn on nothing covers the letter once it has arrived.) */
.cho-player :is(.cho-player-pic, .chobot-face) img { position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: var(--tile-bg-hi); }
.cho-player-name { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; max-width: 235px; }
.cho-player-name .cho-card-value { min-width: 0; overflow-wrap: anywhere; }
a.cho-player-in .cho-card-value { text-decoration: underline; text-underline-offset: 3px; }
a.cho-player-in:hover :is(.cho-player-pic, .chobot-face) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The link fills a frame that cuts off what hangs over its edge, so the frame wears the site's
   focus ring for it. */
.cho-card.cho-player:has(a:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-halo); }
a.cho-player-in:focus-visible { outline: 0; box-shadow: none; }
/* The pill a player card is where there is no card: while it is typed, and for the blog's own
   writers when there is nobody to show. A long name, or the note, goes onto a second line. */
.cho-card.cho-card-player { flex-wrap: wrap; max-width: 100%; border-radius: 22px; }
.cho-card-note { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
@media (max-width: 520px) { .cho-player-pic { width: 188px; } .cho-player-name { max-width: 188px; } }
.flags { margin-bottom: 16px; }
.form label .lock, .flags legend .lock { margin-left: 6px; }
/* Beside the posts there is little room: the picture is a size smaller and a long button wraps. */
.blog-side .chobot-card.shape-card .chobot-face.face-96 { width: 76px; height: 76px; font-size: 32px; border-radius: 18px; }
.blog-side .chobot-card { gap: 12px; }
.chobot-card .actions .btn { white-space: normal; text-align: center; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
/* Who said it, with their Chobot. */
.comment-by { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.comment-by strong a { color: inherit; }

/* ==== Following: the blogs as cards, then their posts, each dressed as its blog ===============
   A card and a post both wear a blog's look through .look-card (its colours come from
   /card-looks.css, its lettering and edges from the attributes above). */
.follow-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px); gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.follow-strip .look-card { margin: 0; scroll-snap-align: start; }
.follow-strip .look-card-art { height: 84px; }
.follow-strip .look-card .chips { margin: 6px 0 0; gap: 6px; }
.follow-strip .look-card .chip { font-size: 12px; min-height: 26px; padding: 0 10px; }
.unfollow { margin-top: 4px; color: var(--muted); }
.unfollow > summary { cursor: pointer; width: fit-content; font-weight: 800; }
.unfollow-list { display: grid; gap: 8px; margin-top: 10px; }
.unfollow-list .tile { margin: 0; }
.feed-title { margin: 6px 0 14px; font: 800 clamp(22px, 2.600vw, 28px)/1.15 var(--display); color: var(--heading); text-shadow: var(--heading-shadow); }
.follow-feed { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; margin-bottom: 20px; }
.feed-post { margin: 0; border-radius: var(--radius-lg); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.feed-post-head { position: relative; display: block; text-decoration: none; }
.feed-post-head .look-card-art { height: 78px; }
.feed-post-blog {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 5px 12px; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(180deg, var(--band-top, #3477c8), var(--band-bottom, #1a55b8)); color: var(--band-ink, #ffffff); font: 800 15px/1.2 var(--display); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.feed-post-head:hover .feed-post-blog, .feed-post-head:focus-visible .feed-post-blog { filter: brightness(1.12); }
.feed-post-pic { display: block; background: rgba(0, 0, 0, 0.18); }
.feed-post-pic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feed-post-pic.pic-sticker img { aspect-ratio: auto; height: 150px; object-fit: contain; padding: 10px; }
.feed-post-body { display: grid; gap: 8px; padding: 14px 16px 16px; }
.feed-post h3 { margin: 0; font: 800 22px/1.2 var(--display); overflow-wrap: anywhere; }
.feed-post h3 a { color: var(--card-ink, var(--heading)); text-decoration: none; }
.feed-post h3 a:hover { text-decoration: underline; }
.feed-post .excerpt, .feed-post .meta, .feed-post .chips { margin: 0; }
.feed-post-by { display: flex; gap: 8px; align-items: center; }
.feed-post-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 0; }
.feed-post-foot .btn { margin-left: auto; }
.feed-post .labels .chip { text-decoration: none; }
.feed-post[data-heading="pixel"] h3 { font-size: 14px; line-height: 1.5; }
.feed-post[data-heading="pixel"] .feed-post-blog { font-size: 10px; }
.feed-post[data-heading="gothic"] h3, .feed-post[data-heading="script"] h3 { font-weight: 400; font-size: 26px; }
.feed-post[data-cards="boxy"], .feed-post[data-cards="pixel"], .feed-post[data-cards="window"], .feed-post[data-cards="comic"] { border-radius: 0; }
.feed-post[data-cards="boxy"] .feed-post-blog, .feed-post[data-cards="pixel"] .feed-post-blog, .feed-post[data-cards="comic"] .feed-post-blog { border-radius: 0; }
@media (max-width: 820px) {
  .follow-feed { grid-template-columns: minmax(0, 1fr); }
  .follow-strip { grid-auto-columns: minmax(210px, 78vw); }
}
.follow-strip .look-card .chip { white-space: normal; height: auto; padding: 4px 10px; line-height: 1.25; text-align: left; }
.follow-strip .look-card[data-heading="pixel"] .chip, .feed-post[data-heading="pixel"] .chip { font-size: 9px; }

/* ==== A child's blog waits for a grown-up; and why a post is waiting for the team ============== */
.grownup-steps { display: grid; gap: 10px; margin: 14px 0 16px; padding: 0; list-style: none; counter-reset: grownup; }
.grownup-steps li { counter-increment: grownup; position: relative; min-height: 32px; padding: 4px 0 4px 44px; }
.grownup-steps li::before { content: counter(grownup); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tile-bg-hi); border: 2px solid var(--tile-edge); font: 800 15px/1 var(--display); color: var(--heading); }
.grownup-steps li.done::before { content: "\2713"; background: #1f9d55; border-color: #1f9d55; color: #ffffff; }
.grownup .actions { margin: 0 0 12px; }
.trust { margin: 0 0 10px; }
.trust > summary { cursor: pointer; width: fit-content; font-weight: 800; color: var(--accent-text); }
.trust .plain-list { margin: 8px 0; }

/* ==== The long documents: Rules, Terms, Privacy ================================================
   Numbered parts, numbered rules, and examples side by side, so a rule can be read on its own
   and pointed at by its number. */
.doc-updated { margin: 6px 0 0; }
.doc-short .plain-list { font-weight: 700; }
.doc-toc h2 { margin: 0 0 10px; font: 800 20px/1.2 var(--display); color: var(--heading); }
.doc-toc ol { margin: 0; padding-left: 1.6em; columns: 2 220px; column-gap: 28px; }
.doc-toc li { padding: 3px 0; break-inside: avoid; }
.doc-toc a { font-weight: 800; }
.doc-part { scroll-margin-top: 16px; }
.doc-n { font: 800 20px/1 var(--display); color: #ffffff; }
.doc-intro { font-weight: 700; }
.doc-rule { display: grid; grid-template-columns: 3.200em minmax(0, 1fr); gap: 4px 10px; padding: 14px 0; border-top: 1px solid var(--panel-line); scroll-margin-top: 16px; }
.doc-rule:first-child, .doc-intro + .doc-rule { border-top: 0; padding-top: 4px; }
.doc-rule-n { font: 800 17px/1.5 var(--display); color: var(--accent-text); }
.doc-rule p { margin: 0 0 8px; }
.doc-rule-text { font: 800 1.08rem/1.4 var(--display); color: var(--heading); }
.doc-egs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.doc-eg { padding: 10px 14px; border-radius: var(--radius); background: var(--tile-bg); border: 1.5px solid var(--tile-edge); border-left-width: 6px; }
.doc-eg.ok { border-left-color: #1f9d55; }
.doc-eg.no { border-left-color: var(--danger); }
.doc-eg strong { display: block; margin-bottom: 4px; font: 800 14px/1.2 var(--display); }
.doc-eg.ok strong { color: var(--green); }
.doc-eg.no strong { color: var(--danger); }
.doc-eg ul { margin: 0; padding-left: 1.200em; }
.doc-eg li { padding: 2px 0; }
.doc-list li { padding: 4px 0; }
.agree { margin: 12px 0 0; }
@media print { .doc-part, .doc-short, .doc-toc { break-inside: avoid; box-shadow: none; } }

/* --- a writer's own pictures, and videos, in a post ------------------------------------------ */
/* A picture is never drawn bigger than it is: a small screenshot stays sharp. */
.cho-card.cho-photo { width: fit-content; max-width: 100%; }
.cho-photo img { width: auto; max-width: 100%; height: auto; max-height: 86vh; }
.cho-photo figcaption { display: block; padding: 8px 12px; color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.cho-card.cho-video { display: block; max-width: 720px; margin: 6px 0 18px; padding: 0; overflow: hidden; border-radius: var(--radius); }
.cho-youtube { background: #000; }
.cho-youtube iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.cho-tiktok a { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 18px; color: inherit; text-decoration: none; }
.cho-tiktok .cho-card-go { margin-left: auto; font-weight: 800; text-decoration: underline; }
.cho-tiktok a:hover .cho-card-go, .cho-tiktok a:focus-visible .cho-card-go { text-decoration-thickness: 2px; }
.editor-visual .cho-card.cho-photo { max-width: 420px; padding-right: 0; }
.editor-visual .cho-photo .card-x { top: 8px; right: 8px; transform: none; background: rgba(4, 10, 30, 0.72); }

/* A gallery: pictures on lines one under the other (story.mjs, "galleries"). A blog runs no
   script, so it is a strip that slides sideways by itself: with a finger, a trackpad, the
   scrollbar under it, or the arrow keys once Tab has reached it. Each picture keeps its shape and
   is never drawn bigger than it is (as one picture alone), no taller than a picture alone in a
   column of text would want to be, and never as wide as the strip, so the next one shows at the
   edge and says there is more. Its place ("2 of 5") is on it, on the look's own band; its words
   are under it. The panel's tile and edge, as a picture alone has them, on every look. */
.cho-gallery { container-type: inline-size; max-width: 100%; margin: 6px 0 18px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--band-top) transparent; border-radius: var(--radius); }
.cho-gallery:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus-halo); }
/* (Two classes: a list in a post has room for its bullets, site.css .story ul, and this one has none.)
   Every picture's tile is as tall as the tallest, the picture in the middle of what is above its
   words and the words at the foot, so the words of all of them are on one line: a picture with
   fewer words under it, or a wider one on a phone, left a hole under it. */
.cho-gallery > .cho-gallery-strip { display: flex; align-items: stretch; gap: 12px; width: max-content; margin: 0; padding: 0 0 10px; list-style: none; }
.cho-gallery-item { position: relative; display: flex; flex: none; margin: 0; padding: 0; scroll-snap-align: start; }
.cho-gallery .cho-card.cho-photo { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: min-content; max-width: none; margin: 0; }
.cho-gallery .cho-photo img { width: auto; height: auto; max-width: 86cqi; max-height: min(340px, 62cqi); margin: auto; }
.cho-gallery .cho-photo figcaption { flex: none; overflow-wrap: anywhere; }
.cho-gallery-n { position: absolute; top: 8px; left: 8px; padding: 5px 9px; border-radius: 999px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); font: 800 12px/1 var(--display); letter-spacing: 0.02em; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); pointer-events: none; }
/* Where the system chooses the colours the band is not drawn: the place keeps an edge of its own. */
@media (forced-colors: active) { .cho-gallery-n { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } }
/* On paper every picture is there to see. */
@media print {
  .cho-gallery { overflow: visible; }
  .cho-gallery > .cho-gallery-strip { flex-wrap: wrap; width: auto; }
}
/* While a writer types it is the same strip, smaller, and every picture in it has its own ×. */
.editor-visual .cho-gallery { -webkit-user-select: none; user-select: none; }
.editor-visual .cho-gallery .cho-card.cho-photo { display: flex; width: min-content; max-width: none; padding-right: 0; }
.editor-visual .cho-gallery .cho-photo img { max-height: min(220px, 50cqi); }
/* (A picture that is not shown is its pill there, as tall as a pill.) */
.editor-visual .cho-gallery-item > .cho-card-photo { align-self: flex-start; margin: 34px 0 0; }
.photo-field { display: grid; gap: 12px; }
.photo-field h3 { margin: 4px 0 0; font-size: 0.95rem; }
.photo-field .pick img { width: 100%; }
/* Several pictures at a time (editor.js): the dialog is wider, Add stays in reach under a long
   list, a picture uploaded before that is chosen says so (a gold edge and a tick, and to a
   screen reader "pressed"), and each one chosen is a line with its words. */
.card-dialog.photos { width: min(94vw, 560px); max-height: 88vh; overflow: auto; }
.card-dialog.photos 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); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.photo-field .pick { position: relative; }
.photo-field .pick[aria-pressed="true"] { border-color: #ffb300; box-shadow: 0 0 0 3px #ffb300; }
.photo-field .pick[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-gold); color: #3a2500; font: 800 15px/1 var(--display); }
.photo-chosen { display: grid; gap: 8px; }
.photo-chosen small, .photo-chosen .meta { margin: 0; }
.photo-picks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: pick; }
.photo-pick { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 44px 8px 8px; border-radius: 12px; border: 1.5px solid var(--tile-edge); background: var(--tile-bg); counter-increment: pick; }
.photo-pick-pic { position: relative; display: grid; place-items: center; width: 76px; height: 56px; overflow: hidden; border-radius: 8px; background: var(--tile-bg-hi); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.photo-pick-pic img { width: 100%; height: 100%; object-fit: cover; }
.photo-pick-pic::before { content: counter(pick); position: absolute; top: 3px; left: 3px; z-index: 1; min-width: 18px; padding: 2px 4px; border-radius: 999px; background: linear-gradient(180deg, var(--band-top), var(--band-bottom)); color: var(--band-ink); font: 800 11px/1 var(--display); }
.photo-pick-words { margin: 0; font-size: 0.9rem; }
.photo-pick-words .field { margin-top: 4px; }