/* Fortify The Court.
   The chapter's original design (19 Sep 2026), restored on 9 Oct 2026 around the
   current rules. The rules below are copied from the original page and its old
   court-configuration.css, which now lives in docs/archive. */

/* Page frame: the same ivory as every chapter, wide on large screens. */
.court-guide-page { --maxw: 58rem; --half-maxw: 29rem; }
body.mvp-page.court-guide-page { background-color: var(--canvas); }
@media (min-width: 980px) {
  .court-guide-page { --maxw: clamp(72rem, calc(100vw - 8rem), 80rem); --half-maxw: 40rem; }
}
.court-guide-page #series-top { width: calc(100% - 2rem); margin: 1.1rem auto 0; }
.court-guide-page #series-top .series-pos { color: var(--muted); }
.court-guide-page main > .content > section:first-child { margin-top: clamp(1.75rem, 3vw, 2.35rem); }
.bulletproof-hero { padding-top: clamp(1.8rem, 3vw, 2.2rem); padding-bottom: .35rem; }

/* Section switcher: the original two-tab shell, now four links to the chapter's parts. */
.bulletproof-tab-shell { position: sticky; top: 4rem; z-index: 35; display: flex; justify-content: center; margin-top: clamp(1.25rem, 3vw, 2rem); }
.bulletproof-tabs { display: grid; width: min(100%, 35rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; border: 1px solid var(--line-strong); border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--shadow); padding: .42rem; backdrop-filter: blur(14px); transition: width .2s ease, padding .2s ease, border-radius .2s ease, box-shadow .2s ease; }
.bulletproof-tab { display: grid; min-height: 4.1rem; align-content: center; border: 1px solid transparent; border-radius: 12px; background: transparent; padding: .7rem .8rem; color: var(--muted); font-family: var(--sans); text-align: left; cursor: pointer; transition: min-height .2s ease, padding .2s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
.bulletproof-tab b, .bulletproof-tab small { display: block; }
.bulletproof-tab b { font-size: .9rem; line-height: 1.2; transition: font-size .2s ease; }
.bulletproof-tab small { max-height: 3.95em; overflow: hidden; margin-top: .24rem; font-size: .72rem; line-height: 1.3; opacity: 1; transform: translateY(0); visibility: visible; transition: max-height .2s ease, margin-top .2s ease, opacity .12s ease, transform .2s ease, visibility 0s linear; }
.bulletproof-tab-shell.is-stuck .bulletproof-tabs { width: min(calc(100% - .75rem), 32rem); border-radius: 14px; padding: .28rem; box-shadow: 0 8px 22px rgba(73, 61, 52, .14); }
.bulletproof-tab-shell.is-stuck .bulletproof-tab { min-height: 0; padding: .58rem .72rem; }
.bulletproof-tab-shell.is-stuck .bulletproof-tab b { font-size: .85rem; }
.bulletproof-tab-shell.is-stuck .bulletproof-tab small { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-.2rem); visibility: hidden; transition: max-height .2s ease, margin-top .2s ease, opacity .1s ease, transform .2s ease, visibility 0s linear .2s; }
.bulletproof-tab:hover { border-color: color-mix(in srgb, var(--dt-emission) 34%, var(--line)); color: var(--ink); }
.bulletproof-tab[aria-selected="true"] { border-color: var(--dt-emission); background: var(--dt-emission-wash); color: var(--dt-emission-ink); box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .08); }
.bulletproof-tab:focus-visible { outline: 3px solid rgba(var(--dt-emission-rgb), .24); outline-offset: 2px; }
.bulletproof-tabs { width: min(100%, 54rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bulletproof-tab { text-decoration: none; }
.bulletproof-tab[aria-current="true"] { border-color: var(--dt-emission); background: var(--dt-emission-wash); color: var(--dt-emission-ink); box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .08); }
.bulletproof-tab-shell.is-stuck .bulletproof-tabs { width: min(calc(100% - .75rem), 46rem); }
@media (max-width: 760px) {
  .bulletproof-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bulletproof-hero { padding-top: 2.35rem; }
  .bulletproof-hero .brand-hero-mark { width: 3.55rem; height: 3.55rem; margin-bottom: .85rem; }
  .bulletproof-hero .kicker { margin-bottom: .65rem; font-size: .7rem; line-height: 1.45; }
  .bulletproof-hero h1 { margin-bottom: .75rem; font-size: clamp(2.15rem, 11vw, 2.65rem); }
  .bulletproof-hero .dek { margin-bottom: 1.1rem; font-size: 1.08rem; line-height: 1.55; }
  .bulletproof-hero .meta { gap: .4rem .55rem; padding: .7rem 0; font-size: .78rem; line-height: 1.35; }
  .bulletproof-hero .meta .dot { display: none; }
  .bulletproof-tab-shell { margin-top: 1.25rem; }
  .bulletproof-tab { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bulletproof-tabs, .bulletproof-tab, .bulletproof-tab b, .bulletproof-tab small { transition: none; }
}

/* Paired cards: what the application sets and what DemoThemis applies. */
.config-duos { margin: .9rem 0 .55rem; font-family: var(--sans); }
.config-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
/* while the pair is closed the two cards match height, so the row reads level;
   once either opens they take their natural heights again */
.config-duo:not(:has(> details[open])) { align-items: stretch; }
.config-duo + .config-duo { margin-top: 1.5rem; }
.config-duo > details { min-width: 0; border: 1px solid rgba(var(--dt-emission-rgb), .34); border-radius: 16px; background: var(--surface); overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .08), 0 0 4px rgba(var(--dt-emission-rgb), .035), 0 10px 26px -22px rgba(41, 37, 34, .5); transition: border-color .25s ease, box-shadow .25s ease; }
.config-duo > details:hover, .config-duo > details[open] { border-color: rgba(var(--dt-emission-rgb), .82); box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .68), 0 0 12px rgba(var(--dt-emission-rgb), .25), 0 10px 26px -22px rgba(41, 37, 34, .5); }
/* while one card is engaged its partner rests, so the pair reads directionally */
.config-duo:has(> details:first-of-type:is(:hover, [open])) > details:last-of-type:not(:is(:hover, [open])),
.config-duo:has(> details:last-of-type:is(:hover, [open])) > details:first-of-type:not(:is(:hover, [open])) { border-color: rgba(var(--dt-emission-rgb), .18); box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .03), 0 10px 26px -22px rgba(41, 37, 34, .5); }

.config-wire { position: relative; width: 1.7rem; height: 2px; align-self: start; margin-top: 2.2rem; }
.config-wire i { position: absolute; inset: 0; border-radius: 999px; transition: opacity .3s ease; }
.config-wire .wire-base { background: linear-gradient(90deg, rgba(var(--dt-emission-rgb), .16) 0%, rgba(var(--dt-emission-rgb), .58) 20%, var(--dt-emission) 42%, var(--dt-emission) 50%, var(--dt-emission) 58%, rgba(var(--dt-emission-rgb), .58) 80%, rgba(var(--dt-emission-rgb), .16) 100%); filter: drop-shadow(0 0 3px rgba(var(--dt-emission-rgb), .16)); opacity: .52; }
.config-wire .wire-a, .config-wire .wire-b { filter: drop-shadow(0 0 2px rgba(var(--dt-emission-rgb), .96)) drop-shadow(0 0 6px rgba(var(--dt-emission-rgb), .76)) drop-shadow(0 0 11px rgba(var(--dt-emission-rgb), .42)); opacity: 0; }
.config-wire .wire-a { background: linear-gradient(90deg, var(--dt-emission) 0%, var(--dt-emission) 28%, rgba(var(--dt-emission-rgb), .58) 55%, rgba(var(--dt-emission-rgb), .16) 82%, rgba(var(--dt-emission-rgb), 0) 100%); }
.config-wire .wire-b { background: linear-gradient(270deg, var(--dt-emission) 0%, var(--dt-emission) 28%, rgba(var(--dt-emission-rgb), .58) 55%, rgba(var(--dt-emission-rgb), .16) 82%, rgba(var(--dt-emission-rgb), 0) 100%); }
.config-duo:has(> details:first-of-type:is(:hover, [open])) .wire-a { opacity: 1; }
.config-duo:has(> details:last-of-type:is(:hover, [open])) .wire-b { opacity: 1; }
.config-duo:has(> details:is(:hover, [open])) .wire-base { opacity: .16; }

.config-duo summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.config-duo summary::-webkit-details-marker { display: none; }
.config-duo summary:focus-visible { outline: none; }
.config-duo summary:focus-visible .config-row { box-shadow: inset 0 0 0 2px var(--dt-emission-ink); border-radius: 12px; }
.config-row { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.1rem; transition: background .16s ease; }
.config-duo summary:hover .config-row { background: var(--dt-emission-wash); }
.config-title { min-width: 0; flex: 1 1 auto; }
.config-duo h3 { margin: 0; color: var(--ink); font-size: .8rem; font-weight: 800; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; transition: color .16s ease; }
.config-duo summary:hover h3, .config-duo details[open] h3 { color: var(--dt-emission-ink); }
.config-title p { margin: .16rem 0 0; color: var(--muted); font-size: .8rem; font-weight: 500; line-height: 1.4; }
.config-owner { flex: 0 0 auto; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .07em; padding: .24rem .6rem; border-radius: 999px; color: var(--accent-ink); background: color-mix(in srgb, var(--accent-soft) 65%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-strong)); }
.is-court .config-owner { color: var(--dt-emission-ink); background: color-mix(in srgb, var(--dt-emission-wash) 70%, var(--surface)); border-color: rgba(var(--dt-emission-rgb), .34); }
.config-count { flex: 0 0 auto; color: var(--faint); font-family: var(--mono); font-size: .66rem; font-weight: 700; }
.config-caret { flex: 0 0 auto; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); transition: transform .2s ease, border-color .16s ease, background .16s ease; }
.config-caret::before { content: ""; width: .4em; height: .4em; border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted); transform: rotate(45deg) translate(-8%, -8%); transition: border-color .16s ease; }
.config-duo summary:hover .config-caret, .config-duo details[open] .config-caret { border-color: var(--dt-emission-ink); background: var(--dt-emission-wash); }
.config-duo summary:hover .config-caret::before, .config-duo details[open] .config-caret::before { border-color: var(--dt-emission-ink); }
.config-duo details[open] .config-caret { transform: rotate(180deg); }
.config-body { padding: .9rem 1.1rem 1.1rem; border-top: 1px solid color-mix(in srgb, var(--dt-emission) 18%, var(--line)); }
.config-duo details[open] .config-body { animation: config-body-in .24s ease; }
@keyframes config-body-in { from { opacity: 0; transform: translateY(-3px); } }
.config-body ul { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; gap: .7rem .95rem; list-style: none; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
.config-body li { margin: 0; position: relative; padding-left: .85rem; }
.config-body li::before { content: ""; position: absolute; left: .08rem; top: .42em; width: .34em; height: .34em; border-radius: 50%; background: var(--accent-ink); }
.is-court .config-body li::before { background: var(--dt-emission-ink); }
.config-body li b { display: block; margin-bottom: .12rem; color: var(--ink); font-size: .86rem; line-height: 1.35; }
.config-body li[data-wide] { grid-column: auto; }
@media (max-width: 860px) {
  .config-duo { grid-template-columns: minmax(0, 1fr); }
  .config-wire { width: 2px; height: 1.1rem; align-self: center; justify-self: center; margin-top: 0; }
  .config-wire .wire-base { background: linear-gradient(180deg, rgba(var(--dt-emission-rgb), .16) 0%, rgba(var(--dt-emission-rgb), .58) 20%, var(--dt-emission) 42%, var(--dt-emission) 50%, var(--dt-emission) 58%, rgba(var(--dt-emission-rgb), .58) 80%, rgba(var(--dt-emission-rgb), .16) 100%); }
  .config-wire .wire-a { background: linear-gradient(180deg, var(--dt-emission) 0%, var(--dt-emission) 28%, rgba(var(--dt-emission-rgb), .58) 55%, rgba(var(--dt-emission-rgb), .16) 82%, rgba(var(--dt-emission-rgb), 0) 100%); }
  .config-wire .wire-b { background: linear-gradient(0deg, var(--dt-emission) 0%, var(--dt-emission) 28%, rgba(var(--dt-emission-rgb), .58) 55%, rgba(var(--dt-emission-rgb), .16) 82%, rgba(var(--dt-emission-rgb), 0) 100%); }
}
@media (max-width: 700px) {
  .config-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title caret" "meta caret"; align-items: center; gap: .45rem .8rem; padding: .95rem 1rem; }
  .config-title { grid-area: title; }
  .config-owner { grid-area: meta; justify-self: start; }
  .config-count { display: none; }
  .config-caret { grid-area: caret; }
  .config-body { padding: .85rem 1rem 1rem; }
  .config-body ul { grid-template-columns: 1fr; gap: .65rem; }
  .config-body li[data-wide] { grid-column: auto; }
}
@media (max-width: 420px) { .config-duo h3 { font-size: .76rem; letter-spacing: .05em; } .config-row { padding: .85rem .85rem; gap: .4rem .6rem; } .config-body { padding: .8rem .85rem .95rem; } }
@media (prefers-reduced-motion: reduce) { .config-duo details[open] .config-body { animation: none; } .config-caret, .config-duo > details, .config-wire i { transition: none; } }
@media print { .config-body { display: block; } .config-caret { display: none; } .config-wire { display: none; } }

/* Route map. */
.court-route-map { overflow: hidden; margin: 1.35rem 0 0; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 28%, var(--surface)), var(--surface) 54%, color-mix(in srgb, var(--triad-lavender) 50%, var(--surface))); box-shadow: var(--shadow); padding: 1rem; font-family: var(--sans); }
.court-route-map figcaption { margin-bottom: .8rem; color: var(--accent-ink); font-family: var(--mono); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.court-route-node { position: relative; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); padding: .72rem .8rem; text-align: center; }
.court-route-node b, .court-route-node span { display: block; }
.court-route-node b { color: var(--ink); font-size: .86rem; line-height: 1.3; }
.court-route-node span { margin-top: .16rem; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.court-route-start, .court-route-finish { width: min(100%, 25rem); box-sizing: border-box; margin-inline: auto; }
.court-route-start, .court-route-paths { margin-bottom: 2.85rem; }
.court-route-start::after, .court-route-paths::after { content: "\2193"; position: absolute; top: calc(100% + .5rem); left: 50%; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; margin: 0; transform: translateX(-50%); border: 1px solid rgba(var(--dt-emission-rgb), .28); border-radius: 999px; background: var(--dt-emission-wash); color: var(--dt-emission-ink); font-weight: 850; }
.court-route-paths { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .62rem; }
.court-route-path { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); text-align: left; }
.court-route-path:first-child { background: color-mix(in srgb, var(--triad-mint) 42%, var(--surface)); }
.court-route-path:last-child { background: color-mix(in srgb, var(--triad-lavender) 58%, var(--surface)); }
.court-route-fresh { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .45rem; border-radius: 999px; background: color-mix(in srgb, var(--dt-emission-wash) 76%, var(--surface)); padding: .28rem .5rem; color: var(--dt-emission-ink); font-size: .64rem; font-style: normal; font-weight: 750; }
.court-route-finish {
  border-color: color-mix(in srgb, var(--dt-emission) 46%, var(--line));
  background:
    linear-gradient(180deg, rgba(var(--dt-emission-rgb), .13), transparent 52%),
    var(--surface);
}
.court-route-paths.is-single { grid-template-columns: minmax(0, 25rem); justify-content: center; }

/* Finality and accountability clocks. */
.clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.clock { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); font-family: var(--sans); }
.clock.money {
  border-color: color-mix(in srgb, var(--good) 30%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--good) 13%, var(--surface)) 0, var(--surface) 48%);
}
.clock.justice {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, var(--surface)) 0, var(--surface) 48%);
}
.clock h4 { margin: 0 0 .6rem; font-size: .95rem; }
.clock .step { position: relative; padding: .28rem 0 .28rem 1.4rem; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.clock .step::before { content: "\2193"; position: absolute; left: .2rem; color: var(--faint); }
.clock .step:first-of-type::before { content: ""; }
.clock .ends { margin-top: .55rem; font-size: .86rem; font-weight: 700; }
.clock.money .ends { color: var(--good); }
.clock.justice .ends { color: var(--accent-ink); }

.deep-note { border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line)); border-radius: 12px; background: var(--surface); padding: .85rem 1rem; color: var(--muted); font-family: var(--sans); }

@media (max-width: 640px) {
  .court-route-map { border-radius: 17px; padding: .78rem; }
  .court-route-paths, .clocks { grid-template-columns: 1fr; }
}

/* Audit diagrams on this page. */
.court-guide-page .audit-choice select { max-width: 100%; }
.court-guide-page .rule-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.court-guide-page .am-stamp { right: 4px; transform-origin: top right; transform: rotate(-8deg) scale(.8); visibility: hidden; }
.court-guide-page .am-stamp.show { transform: rotate(-8deg) scale(1); visibility: visible; }

/* Spacing around the restored components, and room for the sticky switcher when a link jumps. */
.court-guide-page .content [id] { scroll-margin-top: 9.5rem; }
.court-guide-page .config-duos { margin-bottom: 1.4rem; }
.court-guide-page #court-routes > h3 { margin-top: 2.4rem; }

/* The switcher keeps its full footprint while it is compact, so sticking never moves the page.
   The empty part of the footprint lets clicks through to the content below. */
.court-guide-page .bulletproof-tab-shell { align-items: flex-start; pointer-events: none; }
.court-guide-page .bulletproof-tabs { pointer-events: auto; }

/* ===== Chapter 1's design system, 9 Oct 2026 =====
   Each part of the chapter is a tinted reading category, the way chapter 1 is built.
   The heading, banner and button rules below are copied from chapter 1's head. The
   category colours, peer washes and emission rims come from assets/v/784507b345f4/styles.css. */
.simple-category-heading { margin: 3.8rem 0 2rem; border: 1px solid var(--line-strong); border-radius: 16px; padding: 1rem 1.1rem; background: var(--surface); box-shadow: var(--shadow); }
.simple-category-heading .sec-label { margin: 0 0 .35rem; }
.simple-category-heading h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.simple-category-heading .simple-category-copy { margin: .6rem 0 0; }
.deep-category-heading { position: relative; isolation: isolate; overflow: hidden; padding: 1.2rem 1.3rem; }
.deep-category-heading::after { content: attr(data-part); position: absolute; z-index: 0; top: .42rem; right: .8rem; color: color-mix(in srgb, var(--ink) 10%, transparent); font-family: var(--mono); font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 850; line-height: .9; letter-spacing: -.08em; }
.deep-category-heading > * { position: relative; z-index: 1; }
.deep-category-heading h2, .deep-category-heading .simple-category-copy { padding-right: clamp(3.8rem, 10vw, 5.8rem); }
.deep-category-heading .sec-label { display: inline-flex; align-items: center; gap: .42rem; }
.deep-category-heading .sec-label::before { content: ""; width: .55rem; height: .55rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 10%, transparent); }
.reader-end-action { display: flex; margin-top: 1.15rem; }
.reader-mode-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; max-width: 100%; min-height: 3.1rem; align-items: center; gap: .78rem; border: 1px solid rgba(var(--dt-emission-rgb), .78); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--dt-emission-ink) 88%, var(--dt-ink)), color-mix(in srgb, var(--dt-emission-ink) 70%, var(--dt-ink))); padding: .62rem .66rem .62rem 1.05rem; color: #fff; box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .1), 0 11px 25px rgba(0, 111, 123, .18), inset 0 1px 0 rgba(255, 255, 255, .14); font-family: var(--sans); font-size: .88rem; font-weight: 780; letter-spacing: .005em; line-height: 1.25; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease; }
.reader-mode-cta::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, .14) 47%, transparent 62%); transform: translateX(-120%); transition: transform .48s ease; }
.reader-mode-cta > span { display: grid; flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid rgba(var(--dt-emission-rgb), .58); border-radius: 999px; background: rgba(var(--dt-emission-rgb), .12); color: var(--dt-emission); font-family: var(--mono); font-size: .9rem; line-height: 1; transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.reader-mode-cta:hover { border-color: var(--dt-emission); box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .38), 0 14px 30px rgba(0, 111, 123, .24), 0 0 18px rgba(var(--dt-emission-rgb), .16), inset 0 1px 0 rgba(255, 255, 255, .17); filter: saturate(1.08); transform: translateY(-2px); }
.reader-mode-cta:hover::before { transform: translateX(120%); }
.reader-mode-cta:hover > span { border-color: var(--dt-emission); background: var(--dt-emission); color: var(--dt-ink); box-shadow: 0 0 12px rgba(var(--dt-emission-rgb), .42); transform: translateX(2px); }
.reader-mode-cta:active { transform: translateY(0) scale(.985); }
.reader-mode-cta:focus-visible { outline: 3px solid rgba(var(--dt-emission-rgb), .36); outline-offset: 3px; box-shadow: 0 0 0 1px var(--dt-emission), 0 0 18px rgba(var(--dt-emission-rgb), .24); }
.court-guide-page .reading-category > section { margin: 3.2rem 0; }
.court-guide-page .reading-category[id] { scroll-margin-top: 9.5rem; }
.court-guide-page main > .content > .reading-category:first-child > .simple-category-heading { margin-top: clamp(1.75rem, 3vw, 2.35rem); }
@media (prefers-reduced-motion: reduce) { .reader-mode-cta, .reader-mode-cta::before, .reader-mode-cta > span { transition: none; } }

/* A fourth tint for the fourth part. Chapter 1 has three parts, so it never needed one. */
body[data-page-brand="demothemis"] .reading-category[data-reader-category="audit"] {
  --dt-category-accent: #3f7fae;
  --dt-category-border: #a9c7e2;
  --dt-category-ink: #2d5f88;
  --dt-category-surface: radial-gradient(120% 145% at 0% 0%, rgba(74, 140, 200, .24), transparent 60%), var(--dt-brand-gradient-soft);
}

/* The section switcher carries each part's colour. */
.bulletproof-tab:nth-child(1) { --part-accent: #3d9279; --part-ink: #246d58; }
.bulletproof-tab:nth-child(2) { --part-accent: #7562b7; --part-ink: #58489a; }
.bulletproof-tab:nth-child(3) { --part-accent: #b77c26; --part-ink: #8a5a18; }
.bulletproof-tab:nth-child(4) { --part-accent: #3f7fae; --part-ink: #2d5f88; }
.bulletproof-tab { background-image: linear-gradient(180deg, color-mix(in srgb, var(--part-accent) 11%, transparent), transparent 70%); }
.bulletproof-tab b { display: flex; align-items: center; gap: .45rem; color: var(--part-ink); }
.bulletproof-tab b::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 999px; background: var(--part-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--part-accent) 14%, transparent); }
.bulletproof-tab[aria-current="true"] b { color: var(--dt-emission-ink); }

/* Figures inside a part take its colour on the same ivory material as chapter 1's cards. */
.court-guide-page .reading-category :is(.court-rule, .court-route-map) {
  border-color: color-mix(in srgb, var(--dt-category-accent) 26%, var(--line));
  background-color: var(--dt-canvas);
  background-image: radial-gradient(125% 145% at 0% 0%, color-mix(in srgb, var(--dt-category-accent) 10%, transparent), transparent 58%), var(--dt-brand-gradient-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-category-accent) 8%, transparent), var(--shadow);
}
.court-guide-page .reading-category .court-rule figcaption b,
.court-guide-page .reading-category .court-rule > b,
.court-guide-page .reading-category .court-route-map figcaption { color: var(--dt-category-ink); }

/* Steps read like chapter 1's numbered lifecycle cards. */
.court-guide-page .reading-category .rule-flow { counter-reset: flow-step; }
.court-guide-page .reading-category .rule-flow li {
  counter-increment: flow-step;
  border-color: color-mix(in srgb, var(--dt-category-accent) 24%, var(--line));
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dt-category-accent) 9%, var(--dt-surface)) 0, var(--dt-surface) 72%);
  padding: 1rem .9rem .85rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-category-accent) 6%, transparent), 0 10px 22px -20px rgba(41, 37, 34, .5);
}
.court-guide-page .reading-category .rule-flow li::after {
  content: counter(flow-step, decimal-leading-zero);
  position: absolute; top: -.62rem; right: .7rem;
  display: grid; min-width: 1.78rem; height: 1.42rem; place-items: center; padding: 0 .35rem;
  border: 2px solid var(--dt-surface); border-radius: 999px;
  background: var(--dt-category-ink); color: #fff;
  font: 800 .62rem/1 var(--mono);
  box-shadow: 0 0 7px color-mix(in srgb, var(--dt-category-accent) 30%, transparent);
}
.court-guide-page .reading-category .rule-flow li b { color: var(--ink); }
.court-guide-page .reading-category .rule-flow li + li::before { color: var(--dt-category-ink); font-weight: 700; }

/* Paired examples and nested periods use the part colour instead of grey. */
.court-guide-page .reading-category .money-branches p {
  border: 1px solid color-mix(in srgb, var(--dt-category-accent) 24%, var(--line));
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dt-category-accent) 9%, var(--dt-surface)) 0, var(--dt-surface) 72%);
}
.court-guide-page .reading-category .history-period { border-color: color-mix(in srgb, var(--dt-category-accent) 28%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--dt-category-accent) 5%, var(--dt-surface)); }
.court-guide-page .reading-category .history-period.week { background: color-mix(in srgb, var(--dt-category-accent) 9%, var(--dt-surface)); }
.court-guide-page .reading-category .history-period.day { background: color-mix(in srgb, var(--dt-category-accent) 15%, var(--dt-surface)); }
.court-guide-page .reading-category .rule-code {
  border: 1px solid color-mix(in srgb, var(--dt-category-accent) 20%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--dt-category-accent) 7%, var(--dt-surface));
}
.court-guide-page .reading-category .deep-note {
  border-color: color-mix(in srgb, var(--dt-category-accent) 44%, var(--line));
  background-color: var(--dt-canvas);
  background-image: radial-gradient(125% 145% at 0% 0%, color-mix(in srgb, var(--dt-category-accent) 13%, transparent), transparent 58%), var(--dt-brand-gradient-soft);
  color: var(--ink-soft);
}
.court-guide-page .reading-category .deep-note b { color: var(--dt-category-ink); }
.court-guide-page .reading-category .court-route-path { border-color: color-mix(in srgb, var(--dt-category-accent) 30%, var(--line)); background: color-mix(in srgb, var(--dt-category-accent) 9%, var(--dt-surface)); }
.court-guide-page .reading-category .clock.justice {
  border-color: color-mix(in srgb, var(--dt-category-accent) 32%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--dt-category-accent) 14%, var(--surface)) 0, var(--surface) 48%);
}
.court-guide-page .reading-category .clock.justice .ends { color: var(--dt-category-ink); }

/* ===== Everything you can configure, restored 9 Oct 2026 =====
   The rules below are the original panel's, copied from docs/archive/automatic-mode-and-security-2026-09-21/assets/v/784507b345f4/court-configuration.css.
   Rules for the retired cost, capture and Automatic Mode parts are left out. */
.selection-story { overflow: hidden; margin: 1.35rem 0 .9rem; border: 1px solid color-mix(in srgb, var(--dt-emission) 38%, var(--line)); border-radius: 22px; background: color-mix(in srgb, var(--surface) 97%, var(--dt-emission-wash)); box-shadow: var(--shadow); font-family: var(--sans); }
.selection-story-toolbar { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(19rem, auto); align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); padding: 1rem; background: linear-gradient(105deg, color-mix(in srgb, var(--triad-lavender) 46%, var(--surface)), var(--surface) 48%, var(--dt-emission-wash)); }
.selection-story-title { display: grid; min-width: 0; gap: .22rem; }
.selection-story-title h3 { margin: 0; max-width: 30rem; color: var(--muted); font: 600 clamp(.95rem, 1.85vw, 1.12rem)/1.32 var(--sans); letter-spacing: -.012em; text-wrap: balance; }
.selection-story-title .story-title-lede { display: block; margin-bottom: .16rem; color: var(--ink); font-size: clamp(1.2rem, 2.6vw, 1.55rem); font-weight: 800; line-height: 1.12; letter-spacing: -.032em; }
.selection-story-title .story-title-brand { color: var(--dt-emission-ink); font-weight: 800; }
.selection-axis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .48rem; }
.selection-axis { min-width: 0; margin: 0; border: 0; padding: 0; }
.selection-axis legend { margin: 0 0 .25rem .28rem; padding: 0; color: var(--muted); font-family: var(--mono); font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.selection-mode-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 84%, transparent); padding: .25rem; }
.selection-mode-toggle button { min-height: 44px; border: 1px solid transparent; border-radius: 9px; background: transparent; padding: .32rem .45rem; color: var(--muted); font-family: var(--sans); cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; }
.selection-mode-toggle button b, .selection-mode-toggle button small { display: block; }
.selection-mode-toggle button b { font-size: .73rem; line-height: 1.1; }
.selection-mode-toggle button small { margin-top: .12rem; color: inherit; font-size: .58rem; line-height: 1.15; }
.selection-mode-toggle button:hover { border-color: rgba(var(--dt-emission-rgb), .34); color: var(--ink); }
.selection-mode-toggle button:focus-visible, .selection-presets button:focus-visible, .selection-rung:focus-visible, .manual-route-head button:focus-visible, .manual-route-chip:focus-visible, .manual-action:focus-visible, .manual-field input:focus-visible, .selection-budget input:focus-visible { outline: 3px solid rgba(var(--dt-emission-rgb), .24); outline-offset: 2px; }
.selection-mode-toggle button.is-active { border-color: var(--dt-emission); background: var(--dt-emission-wash); color: var(--dt-emission-ink); box-shadow: 0 0 0 1px rgba(var(--dt-emission-rgb), .08); }
.selection-body { padding: .9rem 1rem .8rem; }
.selection-case-strip { display: grid; grid-template-columns: minmax(9rem, 1fr) auto; align-items: center; gap: .7rem; margin-bottom: .72rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: .64rem .72rem; }
.appeal-timing-config { margin-bottom: .72rem; border: 1px solid color-mix(in srgb, var(--dt-emission) 34%, var(--line)); border-radius: 14px; background: var(--surface); padding: .72rem; }
.appeal-timing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .58rem; }
.appeal-timing-head h4 { margin: 0; color: var(--ink); font-size: .78rem; }
.appeal-timing-head p { margin: .14rem 0 0; color: var(--muted); font-size: .64rem; line-height: 1.35; }
.appeal-timing-head > span { flex: 0 0 auto; border-radius: 999px; background: var(--dt-emission-wash); padding: .22rem .45rem; color: var(--dt-emission-ink); font-family: var(--mono); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.appeal-timing-fields { display: grid; grid-template-columns: minmax(12rem, 1.25fr) minmax(9rem, .75fr) minmax(12rem, 1fr); gap: .5rem; }
.appeal-timing-field { display: grid; gap: .24rem; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: .48rem .52rem; color: var(--muted); font-size: .62rem; font-weight: 700; }
.appeal-timing-inputs { display: grid; grid-template-columns: minmax(4.5rem, 1fr) minmax(3rem, auto); gap: .35rem; align-items: center; }
.appeal-timing-field input[type="number"], .appeal-timing-field select { min-width: 0; width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: .42rem .46rem; color: var(--ink); font: 700 .72rem/1 var(--sans); }
.appeal-timing-field input:focus-visible, .appeal-timing-field select:focus-visible { outline: 3px solid color-mix(in srgb, var(--dt-emission) 24%, transparent); outline-offset: 1px; border-color: var(--dt-emission); }
.appeal-timing-floor { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.appeal-timing-floor input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--dt-emission); }
.appeal-timing-fixed-head { display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
.appeal-timing-fixed-flag { flex: 0 0 auto; border-radius: 999px; background: var(--dt-emission-wash); padding: .2rem .42rem; color: var(--dt-emission-ink); font-family: var(--mono); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.appeal-timing-fixed-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: .18rem .42rem; padding: .26rem 0 .08rem; }
.appeal-timing-fixed-value b { color: var(--ink); font-size: .84rem; line-height: 1; }
.appeal-timing-fixed-value small { color: var(--muted); font-size: .6rem; font-weight: 600; line-height: 1.35; }
.appeal-timing-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .8rem; align-items: center; margin-top: .55rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.appeal-timing-preview b { min-width: 0; color: var(--ink); font-size: .65rem; line-height: 1.45; overflow-wrap: anywhere; }
.appeal-timing-preview span { color: var(--muted); font-size: .61rem; white-space: nowrap; }
.appeal-timing-config.is-compact { margin: .55rem 0 0; }
.control-card .appeal-timing-config .appeal-timing-fields { grid-template-columns: 1fr; }
.control-card .appeal-timing-config .appeal-timing-head { display: grid; }
.selection-case-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: .22rem .6rem; min-width: 0; }
.selection-case-value span { color: var(--muted); font-family: var(--mono); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.selection-case-value strong { color: var(--ink); font-size: 1.15rem; line-height: 1; }
.selection-case-value small { width: 100%; color: var(--faint); font-family: var(--sans); font-size: .61rem; line-height: 1.35; }
.selection-presets { display: inline-grid; grid-template-columns: repeat(3, minmax(4.1rem, 1fr)); gap: .28rem; }
.selection-presets button { min-height: 44px; border: 1px solid transparent; border-radius: 9px; background: var(--bg); padding: .3rem .45rem; color: var(--muted); font-family: var(--sans); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease; }
.selection-presets button:hover { border-color: rgba(var(--dt-emission-rgb), .28); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); color: var(--ink); }
.selection-presets button:active { transform: translateY(1px); background: var(--surface); }
.selection-presets button b, .selection-presets button small { display: block; }
.selection-presets button b { font-size: .76rem; line-height: 1.1; }
.selection-presets button small { margin-top: .1rem; font-size: .58rem; }
.selection-presets button.is-active { border-color: var(--dt-emission); background: var(--dt-emission-wash); color: var(--dt-emission-ink); }
.selection-story[data-result-mode="ruling"] .selection-presets { grid-template-columns: repeat(4, minmax(4.1rem, 1fr)); }
.selection-story[data-result-mode="ruling"] .selection-no-escrow-preset { display: block; }
.selection-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr); align-items: stretch; gap: .72rem; }
.selection-config, .selection-result { min-width: 0; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); padding: .82rem; }
.selection-config[hidden] { display: none; }
.selection-route-rail, .manual-route-rail { display: flex; align-items: center; gap: .32rem; overflow-x: auto; padding: .08rem .05rem .28rem; scrollbar-width: thin; }
.selection-result { border: 2px solid color-mix(in srgb, var(--dt-emission) 54%, var(--line)); background: linear-gradient(145deg, var(--dt-emission-wash), color-mix(in srgb, var(--surface) 94%, var(--dt-emission-wash))); }
.selection-result[data-state="unavailable"] { border-color: color-mix(in srgb, var(--bad) 54%, var(--line)); background: color-mix(in srgb, var(--bad) 5%, var(--surface)); }
.selection-result-label { color: var(--muted); font-family: var(--mono); font-size: .59rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.selection-choice { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .42rem 0 .55rem; }
.selection-choice strong { color: var(--dt-emission-ink); font-size: clamp(1.45rem, 3.5vw, 1.95rem); line-height: 1; letter-spacing: -.035em; }
.selection-choice span { border-radius: 999px; background: var(--dt-emission); padding: .27rem .48rem; color: #fff; font-family: var(--mono); font-size: .54rem; font-weight: 800; letter-spacing: .02em; text-align: center; text-transform: uppercase; }
.selection-output-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(var(--dt-emission-rgb), .18); }
.selection-output-metric { min-width: 0; padding: .48rem .4rem .12rem 0; }
.selection-output-metric:nth-child(even) { border-left: 1px solid rgba(var(--dt-emission-rgb), .16); padding-left: .5rem; }
.selection-output-metric b, .selection-output-metric small { display: block; }
.selection-output-metric b { color: var(--ink); font-size: .8rem; line-height: 1.2; }
.selection-output-metric small { margin-top: .1rem; color: var(--muted); font-size: .61rem; line-height: 1.25; }
.selection-result-route { margin-top: .58rem; border-top: 1px solid rgba(var(--dt-emission-rgb), .18); padding-top: .5rem; }
.selection-result-route b, .selection-result-route span { display: block; }
.selection-result-route b { color: var(--ink); font-size: .68rem; line-height: 1.35; }
.selection-result-route span { margin-top: .14rem; color: var(--muted); font-size: .61rem; line-height: 1.35; }
.selection-explanation { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .62rem; margin-top: .72rem; border: 1px solid rgba(var(--dt-emission-rgb), .22); border-radius: 12px; background: rgba(var(--dt-emission-rgb), .055); padding: .62rem .72rem; }
.selection-explanation > span { border-radius: 999px; background: var(--dt-emission); padding: .25rem .43rem; color: #fff; font-family: var(--mono); font-size: .54rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.selection-explanation p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.42; }
.selection-explanation strong { color: var(--ink); }
.manual-route-head { display: flex; align-items: center; justify-content: space-between; gap: .55rem; margin-bottom: .42rem; }
.manual-route-head strong { color: var(--ink); font-size: .76rem; }
.manual-route-head button { min-height: 44px; border: 1px solid color-mix(in srgb, var(--dt-emission) 32%, var(--line)); border-radius: 9px; background: var(--dt-emission-wash); padding: .35rem .5rem; color: var(--dt-emission-ink); font-family: var(--sans); font-size: .61rem; font-weight: 750; cursor: pointer; }
.manual-route-chip { min-height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: .35rem .55rem; color: var(--muted); font-family: var(--sans); font-size: .62rem; font-weight: 750; cursor: pointer; }
.manual-route-chip.is-active { border-color: var(--dt-emission); background: var(--dt-emission-wash); color: var(--dt-emission-ink); }
.manual-route-chip:not(:last-child)::after { content: "\2192"; display: inline-block; margin-left: .5rem; color: var(--faint); }
.manual-explainer { display: grid; grid-template-columns: minmax(0, 1fr) 1.2rem minmax(0, 1fr); align-items: center; gap: .35rem; margin: .58rem 0; border: 1px solid rgba(var(--dt-emission-rgb), .24); border-radius: 12px; background: rgba(var(--dt-emission-rgb), .05); padding: .56rem .62rem; }
.manual-explainer div { min-width: 0; }
.manual-explainer small, .manual-explainer b { display: block; }
.manual-explainer small { color: var(--dt-emission-ink); font-family: var(--mono); font-size: .52rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.manual-explainer b { margin-top: .15rem; color: var(--ink); font-size: .68rem; line-height: 1.35; }
.manual-explainer > span { color: var(--dt-emission-ink); text-align: center; }
.manual-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; margin-top: .55rem; }
.manual-action { min-height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: .35rem .3rem; color: var(--muted); font-family: var(--sans); font-size: .58rem; font-weight: 750; cursor: pointer; }
.manual-action:hover:not(:disabled) { border-color: var(--dt-emission); color: var(--dt-emission-ink); }
.manual-action:disabled { cursor: default; opacity: .4; }
.selection-rules { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 42%, var(--surface)); }
.selection-rules summary { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .72rem 1rem; color: var(--ink); font-size: .72rem; font-weight: 750; cursor: pointer; list-style: none; transition: background .12s ease; }
.selection-rules summary:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.selection-rules summary:hover::after { border-color: rgba(var(--dt-emission-rgb), .5); }
.selection-rules summary:active { background: color-mix(in srgb, var(--surface) 95%, transparent); }
.selection-rules summary::-webkit-details-marker { display: none; }
.selection-rules summary::after { content: "+"; display: grid; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(var(--dt-emission-rgb), .28); border-radius: 999px; background: var(--surface); color: var(--dt-emission-ink); font-family: var(--mono); font-size: .78rem; }
.selection-rules[open] summary::after { content: "\2212"; }
.selection-rules summary small { color: var(--muted); font-size: .61rem; font-weight: 500; text-align: right; }
.selection-rules[open] summary { border-bottom: 1px solid var(--line); }
.selection-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem; padding: .72rem 1rem .9rem; }
.selection-details-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: .68rem .72rem; }
.selection-details-card h4 { margin: 0 0 .4rem; color: var(--ink); font-size: .72rem; }
.selection-details-card p, .selection-details-card li { color: var(--muted); font-size: .64rem; line-height: 1.45; }
.selection-details-card p { margin: .32rem 0 0; }
.selection-details-card ul { margin: .35rem 0 0; padding-left: 1rem; }
.selection-story[data-result-mode="ruling"] #selectionAffordabilityCard { display: none; }
@media (max-width: 880px) {
  .selection-story-toolbar, .selection-workspace { grid-template-columns: 1fr; }
}
@media (min-width: 881px) {
  .selection-axis legend, .selection-case-value span { font-size: .63rem; }
  .selection-mode-toggle button b { font-size: .78rem; }
  .selection-mode-toggle button small, .selection-presets button small { font-size: .64rem; }
  .selection-route-label, .selection-result-label { font-size: .66rem; }
  .selection-choice span { font-size: .6rem; }
  .selection-output-metric b { font-size: .86rem; }
  .selection-output-metric small, .selection-result-route span { font-size: .68rem; }
  .selection-result-route b { font-size: .74rem; }
  .selection-explanation p { font-size: .72rem; }
  .selection-rules summary { font-size: .76rem; }
  .selection-rules summary small { font-size: .67rem; }
  .selection-details-card p, .selection-details-card li { font-size: .69rem; }
}
@media (max-width: 640px) {
  .selection-story { border-radius: 17px; }
  .selection-story-toolbar, .selection-body { padding: .78rem; }
  .selection-axis-grid, .selection-case-strip, .manual-fields, .selection-details-grid, .appeal-timing-fields { grid-template-columns: 1fr; }
  .appeal-timing-preview { grid-template-columns: 1fr; }
  .appeal-timing-preview span { white-space: normal; }
  .selection-presets { width: 100%; box-sizing: border-box; }
  .selection-case-value { justify-content: space-between; }
  .manual-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selection-rules summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .7rem; }
  .selection-rules summary > span, .selection-rules summary small { grid-column: 1; text-align: left; }
  .selection-rules summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .selection-mode-toggle button, .selection-rung, .selection-stress-cta, .selection-stress-cta b, .selection-stress-cta b::before, .selection-stress-cta b > span { transition: none; }
}

/* Additions for the restored panel. */
.selection-story[data-result-mode="ruling"] .selection-case-strip .selection-presets { visibility: hidden; }
.route-sizes { display: flex; flex-wrap: wrap; gap: .45rem; margin: .85rem 0 0; }
.route-sizes-label { flex: 1 0 100%; margin: 0 0 .1rem; color: var(--muted); font: 700 .66rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.route-sizes button { min-width: 3.4rem; }
.route-price-note { display: block; margin-top: .3rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }
@media (min-width: 900px) { #routeConfigurator .selection-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }