/* Twinwright: styles only the refreshed site needs (build.py loads this file only when the refresh is built); the live
   site's site.css stays as it is. */

/* three languages: the header carries a link to each other language; on phones they move into the menu */
.lang-links { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lang-links .lang-sep { color: var(--steel); }
.mobile-nav .lang-links { display: none; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* more than three: a menu under the current language's name */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; display: inline-block; white-space: nowrap; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px; display: grid; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.lang-menu-list a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.lang-menu-list a:hover, .lang-menu-list a:focus-visible { background: var(--surface-2, rgba(127, 127, 127, 0.12)); color: var(--ink); }

@media (max-width: 560px) {
  .header-tools .lang-links, .header-tools .lang-menu { display: none; }
  .mobile-nav .lang-links { display: flex; }
  .mobile-nav .lang-links .lang-sep { display: none; }
  /* longer languages: a pricing card's badge and a row's buttons wrap instead of widening the page (site.css does
     this for buttons only below 360 px) */
  .price-card .badge { white-space: normal; max-width: 100%; border-radius: var(--radius-sm); }
  .btn-row .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* Studio's checkout (only with config.PADDLE set up): "Buy: monthly · yearly · to own" under a card's trial button */
.card-actions { display: grid; gap: 10px; justify-items: start; }
.buy-row { color: var(--ink-2); margin: 0; }
.buy-row button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--twin); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.buy-row button:hover, .buy-row button:focus-visible { color: var(--twin-strong); }
.buy-failed { display: none; }
.buy-row[data-failed] .buy-failed { display: block; color: var(--warn); margin-top: 4px; }

/* Japanese pages: Japanese fonts before the Chinese ones in the shared stacks, so kanji take their Japanese forms */
html[lang="ja"] {
  --font-display: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo",
    "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Archivo", -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
    "Meiryo", "Noto Sans JP", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Yu Gothic UI", "Meiryo", monospace;
}
:lang(ja) body, body:lang(ja) { line-height: 1.75; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing: 0.01em; line-height: 1.24; font-stretch: 100%; }
/* headings break between phrases, not inside a word (削|る); browsers without auto-phrase break as before */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .lead { word-break: auto-phrase; }
:lang(ja) .fact b, :lang(ja) .card h3, :lang(ja) .flow .node b, :lang(ja) .part-body h3 { font-stretch: 100%; }

/* pictures that open full size (zoom.js): a hand-free cue on hover, the look switch on Studio's pictures */
figure[data-zoom] { position: relative; }
figure[data-zoom] img { cursor: zoom-in; transition: filter 0.2s ease; }
figure[data-zoom] img:focus-visible { outline: 2px solid var(--twin); outline-offset: -2px; }
figure[data-zoom]::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 8px; pointer-events: none;
  background: rgba(10, 14, 20, 0.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8f6fb' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0; transform: scale(0.9); transition: opacity 0.18s ease, transform 0.18s ease;
}
figure[data-zoom]:hover::after, figure[data-zoom]:focus-within::after { opacity: 1; transform: none; }
figure[data-zoom]:hover img { filter: brightness(1.04); }
.looks {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(10, 14, 20, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
figure > .looks { position: absolute; top: 10px; left: 10px; z-index: 2; }
.looks button {
  border: 0; background: none; color: #c8d4dc; font: 600 12px/1 var(--font-body); letter-spacing: 0.01em;
  padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.looks button:hover { color: #fff; }
.looks button[aria-pressed="true"] { background: var(--twin); color: #04121a; }
.looks button:focus-visible { outline: 2px solid var(--twin); outline-offset: 1px; }
@media (max-width: 560px) {
  figure > .looks { position: static; display: flex; width: max-content; margin: 8px auto 0; }
}

/* the viewer */
html.lb-open { overflow: hidden; }
dialog.lb {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #05080c; color: #e6eef3; overflow: hidden;
}
dialog.lb::backdrop { background: #05080c; }
dialog.lb[open] { display: grid; grid-template-rows: auto 1fr auto; animation: lb-in 0.18s ease-out; }
dialog.lb.lb-still[open] { animation: none; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-bar {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(20, 28, 36, 0.9), rgba(10, 14, 20, 0.6));
}
.lb-cap { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; color: #c8d4dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-count { font: 12px/1 var(--font-mono); color: #7f93a1; white-space: nowrap; }
.lb-looks { position: static; }
.lb-tools { display: inline-flex; gap: 6px; }
.lb-btn {
  min-width: 36px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04); color: #e6eef3; font: 600 15px/1 var(--font-body); cursor: pointer;
}
.lb-btn.lb-wide { font-size: 12px; }
.lb-btn:hover { background: rgba(63, 211, 240, 0.14); border-color: rgba(63, 211, 240, 0.5); }
.lb-btn:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--twin); outline-offset: 2px; }
.lb-close { font-size: 20px; }
.lb-stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; }
.lb-stage:active { cursor: grabbing; }
.lb-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none;
  image-rendering: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(10, 14, 20, 0.6); color: #e6eef3; font-size: 30px; cursor: pointer;
}
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-nav:hover { background: rgba(63, 211, 240, 0.16); }
.lb-hint { margin: 0; padding: 8px 14px 12px; text-align: center; font-size: 12px; color: #7f93a1; }
@media (max-width: 720px) {
  .lb-bar { flex-wrap: wrap; gap: 8px; }
  .lb-cap { flex-basis: 100%; white-space: normal; }
  .lb-nav { display: none; }
  .lb-hint { display: none; }
}

/* ---- the refresh's look of a working twin (fx.js): a real program traced behind the hero, its numbers read out, a
   blueprint grid, glow where the twin is, things below the fold arriving as they are reached. Nothing moves with
   "reduce motion". */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(60% 70% at 78% 45%, rgba(63, 211, 240, 0.10), transparent 70%),
    radial-gradient(40% 50% at 15% 85%, rgba(224, 122, 60, 0.06), transparent 70%),
    linear-gradient(rgba(63, 211, 240, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 211, 240, 0.055) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
:root[data-theme="light"] .hero::before { opacity: 0.55; }
.trace-band {
  position: relative; isolation: isolate; overflow: hidden; height: clamp(190px, 24vw, 300px); margin-block: 8px 28px;
  background-color: #05090d; border-block: 1px solid rgba(63, 211, 240, 0.16);
  background-image: linear-gradient(rgba(63, 211, 240, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 211, 240, 0.06) 1px, transparent 1px),
    radial-gradient(50% 90% at 66% 50%, rgba(63, 211, 240, 0.10), transparent 70%);
  background-size: 24px 24px, 24px 24px, auto;
}
.trace-band .wrap { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; pointer-events: none; }
.trace-tag { margin: 0; font: 600 11px/1 var(--font-mono); letter-spacing: 0.22em; color: #3fd3f0; }
.trace-band .hero-hud { max-width: min(46ch, 42%); white-space: normal; color: #9fe8f7; }
@media (max-width: 760px) { .trace-band .hero-hud { max-width: none; } .trace-band .wrap { justify-content: flex-end; padding-bottom: 14px; } }
.hero-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.95; }
.hero-trace.hero-tip { opacity: 1; mix-blend-mode: screen; }
.hero-hud {
  margin: 0; min-height: 1.6em; font: 500 11.5px/1.6 var(--font-mono); color: #5fd6ee; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  text-shadow: 0 0 12px rgba(63, 211, 240, 0.35);
}
.hero-hud::before { content: "●"; color: #3fd3f0; margin-right: 8px; font-size: 9px; vertical-align: 1px; animation: hud-pulse 1.6s ease-in-out infinite; }
@keyframes hud-pulse { 50% { opacity: 0.25; } }
.hero h1 .accent-twin { text-shadow: 0 0 34px rgba(63, 211, 240, 0.35); }
.hero h1 .accent-real { text-shadow: 0 0 34px rgba(240, 146, 74, 0.28); }

/* glow where the pointer is */
.card, .facts, figure.shot { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.card:hover, .card-link:hover { border-color: rgba(63, 211, 240, 0.45); box-shadow: 0 0 0 1px rgba(63, 211, 240, 0.18), 0 22px 60px -28px rgba(63, 211, 240, 0.45); }
figure.shot { will-change: transform; transform-style: preserve-3d; }
figure.shot:hover { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(63, 211, 240, 0.25); }
.facts { position: relative; }
.facts::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(63, 211, 240, 0.7), transparent);
}
.fact b { font-variant-numeric: tabular-nums; }

/* arriving into view (only what was below the fold when the page opened; fx.js marks it) */
[data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-rv].rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1; transform: none; transition: none; }
  .hero-hud::before { animation: none; }
}

/* ---- what Studio 1.0 does (build.v10_block): groups like a spec sheet, each item tagged where it is used */
.section.v10 { position: relative; }
.v10-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.v10-group {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 18px 18px 8px;
  position: relative; overflow: hidden;
}
.v10-group::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--twin), rgba(63, 211, 240, 0) 70%);
}
.v10-group header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.v10-group h3 { margin: 0; font-size: var(--step-1); }
.v10-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--twin);
  background: rgba(63, 211, 240, 0.10); border: 1px solid rgba(63, 211, 240, 0.25); flex: none; }
.v10-icon svg { width: 18px; height: 18px; }
.v10-group ul { list-style: none; margin: 0; padding: 0; }
.v10-group li { display: grid; gap: 3px; padding: 11px 0; border-top: 1px dashed var(--rule); }
.v10-group li:first-child { border-top: 0; }
.v10-group li b { font-size: var(--step-0); }
.v10-group li > span:not(.tgs) { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.tgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.tg { font: 600 10.5px/1 var(--font-mono); font-style: normal; letter-spacing: 0.04em; padding: 4px 7px; border-radius: 6px;
  border: 1px solid var(--rule-strong, var(--rule)); color: var(--steel); white-space: nowrap; }
.tg-window { color: #3fd3f0; border-color: rgba(63, 211, 240, 0.35); }
.tg-ai { color: #b693ff; border-color: rgba(182, 147, 255, 0.4); }
.tg-cli { color: #c8d4dc; }
.tg-maker, .tg-pro { color: #f0924a; border-color: rgba(240, 146, 74, 0.45); }
:root[data-theme="light"] .tg-window { color: #0b7f99; }
:root[data-theme="light"] .tg-ai { color: #6b46c1; }
:root[data-theme="light"] .tg-maker, :root[data-theme="light"] .tg-pro { color: #b5541b; }
.v10-note { margin-top: 14px; }

/* the home page's six highlights */
.v10-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v10-tile {
  display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--radius); border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(63, 211, 240, 0.05), transparent 60%), var(--surface); color: inherit; text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.v10-tile b { font-size: var(--step-1); }
.v10-tile > span:last-child { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.v10-tile:hover { border-color: rgba(63, 211, 240, 0.5); box-shadow: 0 22px 60px -30px rgba(63, 211, 240, 0.5); transform: translateY(-2px); }
@media (max-width: 860px) { .v10-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .v10-tiles { grid-template-columns: 1fr; } .v10-grid { grid-template-columns: 1fr; } }

/* the other pages' heads get the same blueprint and glow as the home page's hero */
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(55% 80% at 80% 40%, rgba(63, 211, 240, 0.09), transparent 70%),
    linear-gradient(rgba(63, 211, 240, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 211, 240, 0.05) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
  mask-image: linear-gradient(180deg, #000 50%, transparent);
}
:root[data-theme="light"] .page-hero::before { opacity: 0.55; }
.page-hero h1 { text-wrap: balance; }
.section-head h2 { text-wrap: balance; }

/* the 1.0 examples (build.py page_examples10): what each part shows, its batch, its drawing, the downloads' sizes */
.part-shows { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; font-size: 0.86rem; color: var(--ink-2); }
.part .result.pending { color: var(--steel); }
.part-drawing figure.shot { margin: 0; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: #fff; }
.part-drawing figure.shot img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.part-drawing figcaption { padding: 6px 10px; font-size: 0.74rem; color: #5f6c78; background: #fff; border-top: 1px solid #e3e8ec; }
.part-actions .dl-size { margin-left: 6px; font-size: 0.74rem; color: var(--steel); font-weight: 400; }
.page-hero .btn-row .btn.small { font-family: var(--font-mono); letter-spacing: 0.02em; }
.part .result.partial { color: var(--warn, #b45309); }

/* ---- the manual, /docs/ (site/docs.py): the book's chapters left, the text, its sections right ---- */
.docs { padding: clamp(20px, 3vw, 40px) 0 var(--section-y); }
.docs-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr) 196px; gap: clamp(20px, 3vw, 48px); align-items: start; }
.docs-nav, .docs-toc { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; font-size: 0.86rem; }
.docs-book summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--ink); }
.docs-book ul, .docs-toc ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 10px; border-left: 1px solid var(--rule); }
.docs-book a, .docs-toc a { display: block; padding: 3px 8px; color: var(--ink-2); text-decoration: none; border-radius: var(--radius-sm); line-height: 1.4; }
.docs-book a:hover, .docs-toc a:hover { color: var(--twin); }
.docs-book a[aria-current="page"] { color: var(--twin-strong); background: var(--twin-soft); font-weight: 600; }
.docs-toc-h { margin: 6px 0 6px; color: var(--steel); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 600; }
.docs-crumbs { font-size: 0.84rem; color: var(--steel); margin: 0 0 6px; }
.docs-crumbs a { color: var(--steel); }
.manual { min-width: 0; max-width: 80ch; }
.manual h1 { font-size: var(--step-3); margin: 0 0 18px; }
.manual h2 { font-size: var(--step-2); margin: 2em 0 0.6em; scroll-margin-top: 84px; }
.manual h3 { font-size: var(--step-1); margin: 1.6em 0 0.5em; scroll-margin-top: 84px; }
.manual h4 { font-size: var(--step-0); margin: 1.4em 0 0.4em; scroll-margin-top: 84px; }
.manual p, .manual li { line-height: 1.65; }
.manual li + li { margin-top: 0.25em; }
.manual code { font-family: var(--font-mono); font-size: 0.84em; background: var(--sunken); padding: 0.08em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
.manual pre.code { background: var(--code-bg); color: var(--code-ink); padding: 14px 16px; border-radius: var(--radius-sm); overflow: auto; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.55; }
.manual table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; font-size: 0.88rem; margin: 1.1em 0; }
.manual th, .manual td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top; line-height: 1.5; }
.manual th { background: var(--sunken); font-weight: 600; }
.manual .note { border-left: 4px solid var(--twin); background: var(--sunken); padding: 10px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.2em 0; }
.manual .note .label { font-weight: 700; margin: 0 0 4px; color: var(--twin-strong); }
.manual .note.caution { border-left-color: var(--warn); }
.manual .note.caution .label { color: var(--warn); }
.manual .note.warning { border-left-color: var(--bad); }
.manual .note.warning .label { color: var(--bad); }
.manual .note > :last-child { margin-bottom: 0; }
.manual .top { font-size: 0.86rem; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink-2); border: 1px dashed var(--rule-strong); }
.manual .top.preview, .manual .top.stale { border-color: var(--warn); }
.docs-pn { display: flex; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); }
.docs-pn a { display: flex; flex-direction: column; gap: 2px; max-width: 48%; padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); text-decoration: none; }
.docs-pn a:hover { border-color: var(--twin); }
.docs-pn a span { font-size: 0.72rem; color: var(--steel); text-transform: uppercase; letter-spacing: 0.06em; }
.docs-pn a b { color: var(--ink); font-weight: 600; }
.docs-pn .docs-next { margin-left: auto; text-align: right; }
.docs-home h1 { margin: 6px 0 14px; }
.docs-home .lead { font-size: var(--step-1); color: var(--ink-2); max-width: 44em; line-height: 1.55; }
.docs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; }
.docs-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; }
.docs-card h2 { font-size: var(--step-1); margin: 0 0 6px; }
.docs-card p { color: var(--steel); font-size: 0.9rem; margin: 0 0 12px; }
.docs-card ul { list-style: none; margin: 0; padding: 0; }
.docs-card li { padding: 3px 0; font-size: 0.92rem; }
.docs-card a { color: var(--ink-2); text-decoration: none; }
.docs-card a:hover { color: var(--twin); }
.docs-en { font-size: 0.7rem; color: var(--steel); border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.docs-note { margin-top: 28px; color: var(--steel); font-size: 0.9rem; }
/* the manual's search (docs-search.js): in the book list on a chapter, under the lead on /docs/; the results in the flow */
.docs-search { margin: 0 0 12px; }
.docs-home .docs-search { max-width: 720px; margin: 22px 0 6px; }
.docs-search input { width: 100%; box-sizing: border-box; padding: 8px 12px; font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); }
.docs-home .docs-search input { font-size: 1rem; padding: 11px 14px; }
.docs-search input:focus { outline: 2px solid var(--twin); outline-offset: 1px; border-color: var(--twin); }
.docs-results { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 62vh; overflow: auto; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.docs-results li a { display: block; padding: 7px 8px; color: var(--ink-2); text-decoration: none; border-radius: var(--radius-sm); line-height: 1.4; }
.docs-results li a:hover, .docs-results li a:focus { background: var(--twin-soft); color: var(--ink); outline: none; }
.docs-results b { color: var(--ink); font-weight: 600; }
.docs-results span { display: block; margin-top: 2px; color: var(--steel); font-size: 0.85em; }
.docs-results mark { background: var(--twin-soft); color: var(--twin-strong); border-radius: 2px; padding: 0 1px; }
.docs-results .none { padding: 8px; color: var(--steel); }
.docs-nav .docs-results { max-height: none; overflow: visible; }      /* (the book list scrolls already) */
/* an older version's manual (docs.py, refresh.MANUAL_ARCHIVE): which version, and the latest's same page */
.docs-old { margin: 0 0 18px; padding: 10px 14px; background: var(--real-soft); color: var(--ink); border-left: 3px solid var(--real);
  border-radius: var(--radius-sm); font-size: 0.92rem; }
.docs-old a { color: var(--real-strong); font-weight: 600; }
.docs-older { margin-top: 10px; color: var(--steel); font-size: 0.9rem; }
.docs-pdf { margin: 4px 0 0; font-size: 0.92rem; }
.docs-pdf a { font-weight: 600; }
@media (max-width: 1100px) { .docs-grid { grid-template-columns: 220px minmax(0, 1fr); } .docs-toc { display: none; } }
@media (max-width: 760px) {
  .docs-grid { grid-template-columns: 1fr; }
  .docs-nav { order: 2; position: static; max-height: none; padding-top: 16px; border-top: 1px solid var(--rule); }   /* (the text first on a phone) */
  .docs-pn { flex-direction: column; } .docs-pn a { max-width: none; }
}
/* the manual's version switch (docs.py _versions; only once an older version is archived) */
.docs-ver { margin: 0 0 12px; font-size: 0.86rem; color: var(--steel); }
.docs-ver b { color: var(--ink); }
/* the download page with other systems (config.STUDIO_PLATFORMS): one block per system */
.dl-os + .dl-os { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 20px; }
.dl-os h3 { margin: 0 0 8px; font-size: 1rem; }
/* a support ticket's conversation (the support page, support.js; the account centre's Support page, account.js) */
.ticket-thread { list-style: none; margin: 12px 0 16px; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.ticket-thread li { padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.ticket-thread li:last-child { border-bottom: 0; }
.ticket-thread li p { margin: 4px 0 0; overflow-wrap: anywhere; }
.ticket-thread li.from-team { background: var(--surface-2, transparent); }