/* The Comic look: inked panels on halftone paper, yellow caption boxes, one red thread.
   Every rule here is scoped to :root[data-theme="comic"]; studio.css alone is the Thread look.
   The comic genre only: no characters, logos or lines from anyone else's comics.
   Motion stays slow and never flashes; reduced motion holds everything still. */

:root[data-theme="comic"] {
  color-scheme: light;
  --ground: #f4ecd8;
  --panel: #fbf6ea;
  --panel-hi: #ffffff;
  --ink: #141414;
  --ink-2: #47433e;
  --ink-3: #6b665f;
  --hair: rgba(20, 20, 20, .16);
  --rule: #141414;
  --amber: #e2372a;
  --amber-hi: #c92d21;
  --on-amber: #ffffff;
  --yellow: #ffd23f;
  --pop: 6px 6px 0 var(--ink);
}
:root[data-theme="comic"] body { background: radial-gradient(rgba(20, 20, 20, .085) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--ground); }
:root[data-theme="comic"] :is(p, .prose) a { color: var(--amber-hi); }
:root[data-theme="comic"] :is(.brand, .nav a) { color: var(--ink); }

/* Type: Archivo pushed heavy and condensed, like a masthead. No serif, no italics anywhere. */
:root[data-theme="comic"] :is(.h1, .h2, .h3, .feature-name, .brand, .foot-brand, .card strong, .tool strong, .pc-head strong, .app strong) {
  font-family: var(--face); font-weight: 900; font-stretch: 72%; text-transform: uppercase; letter-spacing: .005em; line-height: .95;
}
:root[data-theme="comic"] .h1 { font-size: clamp(44px, 6.4vw, 92px); }
:root[data-theme="comic"] .h2 { font-size: clamp(34px, 4.4vw, 60px); }
:root[data-theme="comic"] .h3 { font-size: clamp(26px, 2.8vw, 36px); }
:root[data-theme="comic"] .card strong, :root[data-theme="comic"] .tool strong { font-size: 24px; }
:root[data-theme="comic"] .brand { font-size: 28px; }
:root[data-theme="comic"] .lede { color: var(--ink-2); }

/* Caption boxes and corner tags. */
:root[data-theme="comic"] .caption { display: inline-block; padding: 4px 12px; background: var(--yellow); border: 3px solid var(--ink); color: var(--ink); font: 800 14px/1.3 var(--face); letter-spacing: .04em; }
:root[data-theme="comic"] .tag { position: absolute; z-index: 3; top: -3px; left: -3px; padding: 2px 10px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 6px 0 6px 0; color: var(--ink); font: 900 13px/1.4 var(--face); font-stretch: 80%; letter-spacing: .08em; }
:root[data-theme="comic"] .map > .tag { top: -3px; left: -3px; color: var(--ink); }
:root[data-theme="comic"] .feature > .tag { grid-column: auto; }

/* Panels: thick ink, a hard offset shadow. */
:root[data-theme="comic"] :is(.panel, .pc, .card, .tool, .thread, .app-art) { background: var(--panel); border: 3px solid var(--ink); border-radius: 6px; box-shadow: var(--pop); }
:root[data-theme="comic"] .band { background: #efe3c4; border-block: 3px solid var(--ink); }
:root[data-theme="comic"] .band .card { background: var(--panel); }
:root[data-theme="comic"] :is(.pc, .card):hover { border-color: var(--ink); box-shadow: 9px 9px 0 var(--ink); transform: translate(-2px, -2px); }
@media (prefers-reduced-motion: no-preference) { :root[data-theme="comic"] :is(.pc, .card, .btn, .chip) { transition: transform .15s ease, box-shadow .15s ease; } }

/* Header */
:root[data-theme="comic"] .nav a { padding: 0 12px; border: 2px solid transparent; border-radius: 999px; font: 700 15px var(--face); letter-spacing: 0; text-transform: none; }
:root[data-theme="comic"] .nav a:hover { border-color: var(--ink); background: var(--panel); color: var(--ink); }
:root[data-theme="comic"] .theme-switch { border: 3px solid var(--ink); background: var(--panel); box-shadow: 3px 3px 0 var(--ink); }
:root[data-theme="comic"] .theme-switch button { color: var(--ink); font-weight: 800; }
:root[data-theme="comic"] .theme-switch button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }

/* Buttons, chips, pills */
:root[data-theme="comic"] .btn { border: 3px solid var(--ink); border-radius: 999px; background: var(--amber); color: #fff; font-weight: 800; box-shadow: 4px 4px 0 var(--ink); }
:root[data-theme="comic"] .btn:hover { background: var(--amber); color: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
:root[data-theme="comic"] .btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--ink); }
:root[data-theme="comic"] .chip { border: 3px solid var(--ink); border-radius: 4px; background: var(--panel); color: var(--ink); font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
:root[data-theme="comic"] .chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
:root[data-theme="comic"] .chip[aria-current] { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
:root[data-theme="comic"] .pill { font: 800 12px/1.5 var(--face); letter-spacing: .06em; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); }
:root[data-theme="comic"] .pill.live { background: #6cc788; }
:root[data-theme="comic"] :is(.pill.dev, .pill.prep) { background: #f28fb8; }
:root[data-theme="comic"] :is(.pill.open, .pill.github) { background: #2ec4d6; }
:root[data-theme="comic"] :is(.pill.web, .pill.preview) { background: var(--yellow); }

/* Hero: the cover beside the inked web. */
:root[data-theme="comic"] .hero-page { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-block: 16px 8px; }
:root[data-theme="comic"] .cover { justify-content: center; padding: 56px clamp(24px, 4vw, 48px) clamp(28px, 4vw, 44px); background: radial-gradient(rgba(226, 55, 42, .16) 1.6px, transparent 2px) 0 0 / 9px 9px, var(--panel); }
:root[data-theme="comic"] .cover .h1 em { color: var(--amber); }
:root[data-theme="comic"] .web-sky { display: none; }
:root[data-theme="comic"] .inkweb { display: grid; margin: 0; padding: 40px 8px 8px; min-height: 420px; overflow: hidden; }
:root[data-theme="comic"] .inkweb svg { width: 100%; height: 100%; }
.ink-thread { fill: none; stroke: #e2372a; stroke-width: 5; stroke-linecap: round; }
.ink-thread.dash { stroke-dasharray: 12 10; }
.ink-ring { fill: #fff; stroke: #141414; stroke-width: 4; }
.ink-dots.t0 { fill: url(#ink-t0); } .ink-dots.t1 { fill: url(#ink-t1); } .ink-dots.t2 { fill: url(#ink-t2); } .ink-dots.t3 { fill: url(#ink-t3); } .ink-dots.t4 { fill: url(#ink-t4); }
.ink-init { font: 900 40px "Archivo", system-ui, sans-serif; font-stretch: 75%; text-anchor: middle; fill: #141414; }
.ink-name { font: 800 17px "Archivo", system-ui, sans-serif; text-anchor: middle; fill: #141414; }
.inkweb a:hover .ink-ring, .inkweb a:focus-visible .ink-ring { stroke: #e2372a; }
.bubble rect, .bubble path { fill: #fff; stroke: #141414; stroke-width: 3; stroke-linejoin: round; }
.bubble text { font: 700 16px "Archivo", system-ui, sans-serif; fill: #141414; }
.bubble .who { font-weight: 900; fill: #e2372a; }
/* The bubbles speak one after another, slowly, then stay. */
@media (prefers-reduced-motion: no-preference) {
  .bubble { animation: say .8s ease both; }
  .inkweb svg > g:nth-of-type(1) .bubble { animation-delay: .6s; }
  .inkweb svg > g:nth-of-type(2) .bubble { animation-delay: 1.7s; }
  .inkweb svg > g:nth-of-type(3) .bubble { animation-delay: 2.8s; }
  .inkweb svg > g:nth-of-type(4) .bubble { animation-delay: 3.9s; }
}
@keyframes say { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The picker and its panel. */
:root[data-theme="comic"] .feature { padding-top: 52px; background: var(--panel); border: 3px solid var(--ink); }
:root[data-theme="comic"] .feature-name { font-size: clamp(48px, 6.4vw, 92px); }
:root[data-theme="comic"] .phone { border: 4px solid var(--ink); border-radius: 34px; background: #111; box-shadow: var(--pop); }
:root[data-theme="comic"] .say { position: relative; padding: 5px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; color: var(--ink); font-weight: 600; }
:root[data-theme="comic"] .say::after { content: ""; position: absolute; left: 18px; bottom: -10px; width: 12px; height: 12px; background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewX(30deg) rotate(45deg); }
:root[data-theme="comic"] .passes { color: var(--ink-2); font-weight: 700; padding-bottom: 8px; }
:root[data-theme="comic"] .ask-more a { color: var(--ink); font-weight: 800; }

/* Drawn tiles on paper. */
:root[data-theme="comic"] .ht { background: radial-gradient(var(--c) 2.2px, transparent 2.6px) 0 0 / 10px 10px, color-mix(in srgb, var(--c) 35%, #fff); }
:root[data-theme="comic"] .ficon { border: 3px solid var(--ink); }

/* Shelves */
:root[data-theme="comic"] .shelf { border-top: 3px solid var(--ink); }
:root[data-theme="comic"] .pc { overflow: hidden; }
:root[data-theme="comic"] .pc-shot { background: var(--yellow); border-bottom: 3px solid var(--ink); }
:root[data-theme="comic"] .pc-shot img { border: 3px solid var(--ink); border-bottom: 0; }
:root[data-theme="comic"] .pc-icon img { border: 3px solid var(--ink); }
:root[data-theme="comic"] .pc-cover img { border: 0; }
:root[data-theme="comic"] .pc-icon.pc-drawn { background: none; }
:root[data-theme="comic"] .shelf-row { padding: 4px 10px 14px 2px; }

/* The thread map, inked. */
:root[data-theme="comic"] .thread .grid line { stroke: rgba(20, 20, 20, .06); }
:root[data-theme="comic"] .t-line.built { filter: none; stroke-width: 5; }
:root[data-theme="comic"] .t-node circle.ring { fill: #fff; stroke: var(--ink); stroke-width: 3.5; }
:root[data-theme="comic"] .t-tag { font-weight: 700; stroke: var(--panel); }
:root[data-theme="comic"] .links { border-top: 3px solid var(--ink); }
:root[data-theme="comic"] .links li { border-bottom: 2px solid var(--hair); }

/* Cards, tools, story, app pages, footer. */
:root[data-theme="comic"] .card img { border: 3px solid var(--ink); }
:root[data-theme="comic"] .card.amber { border-color: var(--amber); }
:root[data-theme="comic"] .tool-apps a { border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 600; }
:root[data-theme="comic"] .map { border: 3px solid var(--ink); }
:root[data-theme="comic"] .map-btn { border: 3px solid var(--ink); background: var(--panel); color: var(--ink); }
:root[data-theme="comic"] .map-cap { color: var(--ink); }
:root[data-theme="comic"] .story-text { border: 3px solid var(--ink); padding-top: 28px; }
:root[data-theme="comic"] .steps span { border: 2px solid var(--ink); background: #fff; color: var(--ink); font-weight: 800; }
:root[data-theme="comic"] .steps span.on { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
:root[data-theme="comic"] .app-hero .icon { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-theme="comic"] .shots img { border: 3px solid var(--ink); }
:root[data-theme="comic"] .crumb { color: var(--ink); }
:root[data-theme="comic"] footer { border-top: 3px solid var(--ink); background: var(--panel); }
:root[data-theme="comic"] .foot a { color: var(--ink); }

@media (max-width: 860px) {
  :root[data-theme="comic"] .hero-page { grid-template-columns: 1fr; }
  :root[data-theme="comic"] .inkweb { min-height: 0; }
}