/* manual.css — the Entertainment Wire's reader manual, manual.html (AQ-407).
 *
 * Shared Wire handbook based on assets/manual/manual.css. The house palette below
 * is legal.css's, value for value (:root dark, [data-theme="light"] light, the
 * same convention as every stylesheet on this site); the manual's own tokens
 * are named from it in the block after. public.css reads the house tokens for
 * the header's menu panel; footer.css and wire-header.css carry their own.
 */
:root {
  --bg:        #0A2032;
  --bg2:       #081B2B;
  --panel:     #0E2A3D;
  --panel2:    #13314A;
  --field:     #163952;
  --grid:      #1B374F;
  --grid-soft: #163045;
  --text:      #E9F1F8;
  --text-dim:  #A9BDCD;
  --faint:     #7A93A6;
  --brand:     #4D9BE0;
  --brand-l:   #5BA6E8;
  --brand-d:   #1D6BB4;
  --cont:      #D8944A;
  --up:        #1f9d6b;
  --up-l:      #3ec78f;
  --footer:    #071521;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", "AXIOM Symbols", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}
[data-theme="light"] {
  --bg:        #FFFFFF;
  --bg2:       #F2F5F8;
  --panel:     #F2F5F8;
  --panel2:    #E6F1FB;
  --field:     #FFFFFF;
  --grid:      #D8E0E8;
  --grid-soft: #E9EEF3;
  --text:      #0A2032;
  --text-dim:  #5B6B7A;
  --faint:     #547392;
  --brand:     #2F6FAE;
  --brand-l:   #2F6FAE;
  --brand-d:   #1D6BB4;
  --cont:      #B06A1E;
  --up:        #1f9d6b;
  --up-l:      #178a5d;
  --footer:    #F2F5F8;
}

/* ---- the manual's names for the house tokens ------------------------------ */
:root { --paper: var(--bg); --card: var(--panel); --ink: var(--text); --muted: var(--text-dim); --line: var(--grid); --blue: var(--brand-l); --blue-soft: var(--panel2); --accent: var(--brand-l); --tap: 44px; color-scheme: dark; }
[data-theme="light"] { --accent: var(--brand-d); color-scheme: light; }

/* ---- base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.65 var(--sans); overflow-wrap: break-word; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, summary { font: inherit; }
button, a, summary, input { touch-action: manipulation; }
button { cursor: pointer; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; min-height: var(--tap); }
button:hover { background: var(--blue-soft); }
:is(button, a, input, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 300; padding: 10px 18px; background: var(--card); color: var(--ink); }
.skip:focus { top: 10px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ---- layout: contents beside the guide ------------------------------------- */
/* AQ-693: the title is first in the document (hero, then sidebar, then the
   guide) so a phone reads title, search, contents, guide. On a wide screen the
   grid keeps the sidebar in its own full-height column, as before. */
.guide-layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: auto 1fr; max-width: 1600px; margin: auto; }
.guide-hero { grid-column: 2; grid-row: 1; }
.guide-body { grid-column: 2; grid-row: 2; }
.guide-hero, .guide-body { min-width: 0; max-width: 1220px; padding-inline: clamp(24px, 3vw, 48px); }
.guide-hero { padding-top: 30px; }
.guide-body { padding-bottom: 32px; }
.guide-sidebar { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--wire-header-height, 122px); height: calc(100dvh - var(--wire-header-height, 122px)); overflow: auto; padding: 32px 22px; border-right: 1px solid var(--line); background: var(--card); font-size: 13px; }
.sidebar-label { display: flex; justify-content: space-between; gap: 8px; font: 600 10px/1.5 var(--mono); letter-spacing: .09em; margin-bottom: 28px; color: var(--blue); }
.sidebar-label span { color: var(--muted); }
.guide-search > span { display: block; font-weight: 650; margin-bottom: 8px; }
.guide-search input { width: 100%; min-width: 0; min-height: var(--tap); padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 14px; }
#search-status { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 10px 0 20px; min-height: 36px; }
.guide-contents summary { display: none; }
.search-jump { display: none; }
.guide-contents nav { display: grid; gap: 2px; }
.guide-contents a { display: flex; align-items: center; gap: 11px; min-height: var(--tap); padding: 6px 10px; border-radius: 3px; text-decoration: none; color: var(--muted); line-height: 1.35; }
.guide-contents a span { font: 11px/1.6 var(--mono); opacity: 1; }
.guide-contents a:hover, .guide-contents a[aria-current] { background: var(--blue-soft); color: var(--blue); }
.guide-contents a[aria-current] { box-shadow: inset 2px 0 var(--blue); }
.sidebar-bottom { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 25px; font-size: 12px; color: var(--muted); }
.sidebar-bottom button { width: 100%; font-size: 12px; }

/* ---- the opening ------------------------------------------------------------ */
.eyebrow { font: 600 11px/1.4 var(--mono); letter-spacing: .15em; color: var(--blue); margin: 0 0 20px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; }
h1 { font: 600 clamp(32px, 3.4vw, 48px)/1.1 var(--serif); letter-spacing: -.03em; margin: 0 0 22px; }
.hero-lede { font-size: 16px; line-height: 1.6; max-width: 680px; color: var(--muted); margin: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 21px; padding: 18px 0; font: 11px/1.5 var(--mono); color: var(--muted); }
.hero-meta span::before { content: "•"; color: var(--accent); margin-right: 7px; }
.quick-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px; }
.quick-start a { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; padding: 19px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); }
.quick-start a > span { grid-row: span 2; font: 12px/2 var(--mono); color: var(--blue); }
.quick-start strong { font: 600 12px/1.5 var(--mono); }
.quick-start small { font-size: 12px; color: var(--muted); }
.quick-start a:hover { border-color: var(--blue); }
.guide-caption { font-size: 12px; color: var(--muted); line-height: 1.65; }
.intro-caption { max-width: 780px; margin-bottom: 28px; }
#guide-no-results { padding: 30px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 30px; }

/* ---- a topic ------------------------------------------------------------------ */
.guide-section { padding: 28px 0 30px; border-top: 1px solid var(--line); }
.guide-section:target > h2 { color: var(--blue); }
.section-kicker { font: 11px/1.4 var(--mono); letter-spacing: .11em; color: var(--blue); text-transform: uppercase; margin: 0 0 20px; padding: 9px 12px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--blue); background: var(--card); }
.guide-section h2 { font: 600 26px/1.2 var(--serif); margin: 0 0 14px; }
/* A search jump moves focus to the first match's heading (AQ-693); mark it in the house accent. */
.guide-section h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.guide-section > p:first-of-type:not(.section-kicker) { color: var(--muted); }
.guide-section h3 { font-size: 18px; margin: 28px 0 11px; }
.guide-section p { margin: 0 0 16px; }
.guide-section li { margin: 7px 0; }
.guide-section ul, .guide-section ol { padding-left: 23px; }
.guide-section strong { font-weight: 650; }
.walkthrough { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 24px 0; padding: 0 !important; list-style: none; counter-reset: step; }
.walkthrough li { padding: 20px 17px; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 13px; line-height: 1.65; counter-increment: step; }
.walkthrough li::before { content: counter(step, decimal-leading-zero); display: block; color: var(--blue); font: 500 12px/1 var(--mono); margin-bottom: 15px; }
.walkthrough strong { display: block; font-size: 15px; margin-bottom: 6px; }
.note { border-left: 3px solid var(--accent); background: var(--blue-soft); padding: 17px 20px; margin: 22px 0; font-size: 14px; }
.note p:last-child { margin-bottom: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini-card { padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.mini-card h3 { margin: 0 0 10px; font-size: 17px; }
.mini-card p:last-child { margin-bottom: 0; }

/* the control path: an accessible diagram of where to press, in order */
.path-diagram { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 24px; background: var(--blue-soft); border: 1px solid var(--line); border-radius: 9px; margin: 24px 0; list-style: none; }
.guide-section .path-diagram { padding-left: 24px; }
.path-diagram li { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.path-diagram li + li::before { content: "→"; font-size: 20px; color: var(--blue); }
.path-diagram li span { display: block; background: var(--card); border: 1px solid var(--line); padding: 10px 14px; border-radius: 6px; }
.path-diagram small { display: block; color: var(--muted); font-size: 11px; }

.table-wrap { overflow-x: auto; max-width: 100%; margin: 20px 0; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--card); }
th, td { padding: 13px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--blue-soft); font-weight: 600; color: var(--blue); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
caption { text-align: left; padding: 12px 15px; font-weight: 650; }
td:first-child { min-width: 140px; }
kbd { display: inline-block; min-width: 25px; text-align: center; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 4px; background: var(--card); color: var(--ink); padding: 1px 6px; font: 12px/1.8 var(--mono); }
.key-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0; }
.key-grid div { padding: 18px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; text-align: center; font-size: 12px; }
.key-grid kbd { margin: 0 2px 10px; font-size: 18px; }

/* ---- questions -------------------------------------------------------------------- */
.faq-group { margin-top: 25px; }
.faq-group details { background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin: 9px 0; overflow: hidden; }
.faq-group summary { padding: 15px 19px; min-height: var(--tap); cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.5; }
.faq-group details[open] summary { border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.faq-answer { padding: 19px; font-size: 14px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-path { font: 11px/1.6 var(--mono); color: var(--blue); border-left: 3px solid var(--accent); padding: 8px 12px; background: var(--blue-soft); margin: 0 0 14px; }

@media (min-width: 1400px) {
  .quick-start { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick-start a { display: flex; flex-direction: column; }
  .quick-start a > span { margin-bottom: 5px; }
}
@media (max-width: 980px) {
  .guide-layout { grid-template-columns: 216px minmax(0, 1fr); }
  .guide-sidebar { padding: 25px 15px; }
  .guide-hero, .guide-body { padding-inline: 25px; }
  .guide-hero { padding-top: 36px; }
  .guide-body { padding-bottom: 36px; }
  .walkthrough, .two-col { grid-template-columns: 1fr; }
  /* AQ-693 (R1-10): the step number hangs in its own column beside the title,
     and every line of the step starts at one edge. It was a float, shorter
     than the step, so only the first line after the title was indented. */
  .walkthrough li { position: relative; padding-left: 47px; }
  .walkthrough li::before { position: absolute; left: 17px; top: 26px; margin: 0; }
}
/* A phone: one column, 16px gutters; title, then search, then the contents
   folded under it, then the guide (AQ-693). */
@media (max-width: 720px) {
  .guide-layout { display: block; }
  .guide-hero { padding: 30px 16px 0; }
  .guide-body { padding: 30px 16px; }
  .guide-sidebar { position: static; height: auto; border-right: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 16px; }
  .sidebar-label, .sidebar-bottom { display: none; }
  #search-status { margin: 8px 0 12px; min-height: 0; }
  .search-jump:not([hidden]) { display: inline-flex; align-items: center; min-height: var(--tap); margin: -6px 0 6px; padding: 0; border: 0; background: none; color: var(--blue); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
  /* AQ-693: a flex summary loses the native marker, so "In this guide" read as
     an empty heading. It is a bordered row with a count and a chevron that turns. */
  .guide-contents summary { display: flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-weight: 650; font-size: 13px; list-style: none; cursor: pointer; }
  .guide-contents summary::-webkit-details-marker { display: none; }
  .guide-contents .guide-count { font-weight: 400; color: var(--muted); }
  .guide-contents summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 3px 0 auto; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
  .guide-contents[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
  .guide-contents nav { grid-template-columns: 1fr 1fr; padding-top: 8px; }
  .guide-contents:not([open]) nav { display: none; }
  h1 { font-size: 34px; }
  .hero-lede { font-size: 15px; }
  .hero-meta { font-size: 10px; gap: 8px; }
  .quick-start { gap: 8px; }
  .quick-start a { padding: 14px 12px; grid-template-columns: 1fr; gap: 3px; }
  .quick-start a > span { display: none; }
  .intro-caption { font-size: 11px; }
  .guide-section { padding: 30px 0; }
  .guide-section h2 { font-size: 25px; }
  .guide-section p { font-size: 15px; }
  .path-diagram, .guide-section .path-diagram { padding: 14px; gap: 7px; }
  .path-diagram li { font-size: 12px; }
  .path-diagram li span { padding: 8px; }
  .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-group summary, .faq-answer { padding: 15px; }
}
@media (max-width: 400px) {
  .guide-contents nav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .guide-contents summary::after { transition: none; } }

@media print {
  :root, [data-theme="light"], [data-theme="dark"] { --paper: #fff; --card: #fff; --ink: #111; --muted: #444; --line: #bbb; --blue: #204d80; --blue-soft: #f2f5f8; --accent: #204d80; color-scheme: light; }
  body { font-size: 10pt; }
  #publicWireHeader, .guide-sidebar, .quick-start, .hero-meta, .intro-caption, .ftr, #guide-no-results, .skip { display: none !important; }
  .guide-layout { display: block; }
  .guide-hero, .guide-body { max-width: none; padding: 0; }
  h1 { font-size: 32pt; }
  .guide-section, .guide-section[hidden], .faq-group[hidden], .faq-group details[hidden] { display: block !important; padding: 22px 0; }
  .guide-section h2, .guide-section h3 { break-after: avoid; }
  .mini-card, .walkthrough li { break-inside: avoid; }
  .walkthrough { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table-wrap { overflow: visible; }
  details > summary { list-style: none; }
  .faq-answer { display: block !important; }
  button { display: none !important; }
  @page { margin: 16mm; }
}

/* Shared reader handbook: two dimensions, clear results, complete written workflows. */
.guide-layout{max-width:1440px;margin:auto;grid-template-columns:270px minmax(0,1fr);column-gap:48px;padding:42px 36px 80px}
.guide-hero{grid-column:2;padding:0 0 28px}.guide-hero h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.035em;line-height:1.08;margin:12px 0 18px}.hero-lede{font-size:20px;line-height:1.5;max-width:36em}
.guide-sidebar{grid-column:1;grid-row:1 / span 2;align-self:start;top:calc(var(--wire-header-height,140px) + 16px);max-height:calc(100vh - 175px);padding:18px 14px;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:auto}
.guide-body{grid-column:2;min-width:0;max-width:900px}.guide-contents nav{display:grid;gap:2px}.guide-contents a{font-size:12px;line-height:1.5;padding:7px 8px}.guide-search input{font-size:16px;width:100%;min-height:44px;box-sizing:border-box}
.guide-dimensions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 18px}.guide-dimensions a{padding:22px 20px;display:grid;grid-template-columns:26px 1fr;align-content:start}.guide-dimensions strong{font-size:18px;line-height:1.35;font-family:inherit}.guide-dimensions small{font-size:13px;line-height:1.55}.guide-dimensions span{grid-row:span 2}
.guide-section{scroll-margin-top:16px;padding:38px 0}.guide-section h2{font-size:30px;line-height:1.25;letter-spacing:-.02em}.guide-section p,.guide-section li{line-height:1.75}.guide-section>p,.guide-section>ul{max-width:75ch}.guide-section[data-part=practice] .section-kicker{color:var(--ink);border-left-color:var(--accent)}
#how-it-works,#best-practices{border-top:3px solid var(--blue);margin-top:22px}#best-practices h2{font-size:36px}.workflow-index{display:grid;gap:0;border-top:1px solid var(--line);margin:24px 0}.workflow-index a{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}.workflow-index span{grid-row:span 2;font:12px var(--mono);color:var(--muted);padding-top:5px}.workflow-index strong{font-size:18px}.workflow-index small{font-size:14px;color:var(--muted)}
.workflow-steps{display:block;counter-reset:step}.workflow-steps li{position:relative;padding:20px 20px 20px 62px;margin:0 0 12px;max-width:none}.workflow-steps li::before{position:absolute;left:20px;top:26px;float:none}.workflow-outcome{font-size:18px}.worked-example{padding:20px 24px;border-left:3px solid var(--blue);background:var(--blue-soft);margin:24px 0}.worked-example h3{margin:0 0 10px}.workflow-checks{padding-left:24px}.related-guide{border-top:1px solid var(--line);padding-top:16px;font-size:14px}
.manual-results{list-style:none;padding:0!important;margin:0 0 32px}.manual-results li{border-bottom:1px solid var(--line);padding:18px 0}.manual-results a{display:block;font-size:20px;font-weight:650;line-height:1.4}.manual-results small{display:block;color:var(--muted);font:11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}.manual-results p{font-size:14px;line-height:1.6;color:var(--muted);margin:8px 0 0}
#guide-search-reset,#search-jump,#guide-print{min-height:44px;padding:9px 12px;margin:5px 0;font-size:13px;cursor:pointer}.preview-label{display:inline-block;border:1px solid var(--line);padding:6px 10px;border-radius:4px;font-size:13px}.table-wrap a{overflow-wrap:anywhere}.table-wrap th{min-width:100px}.guide-section a:focus-visible,.guide-sidebar a:focus-visible,.guide-body button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.guide-section h2:focus{outline:2px solid var(--blue);outline-offset:5px}
@media(max-width:980px){.guide-layout{grid-template-columns:220px minmax(0,1fr);gap:24px;padding:28px 20px 60px}.guide-dimensions{grid-template-columns:1fr}.guide-hero h1{font-size:42px}.walkthrough li{position:relative;padding-left:52px}.walkthrough li::before{float:none;position:absolute;left:16px;top:25px}}
@media(max-width:720px){.guide-layout{display:flex;flex-direction:column;padding:24px 18px 50px;gap:0}.guide-hero{order:0;padding:0 0 20px}.guide-hero h1{font-size:38px}.hero-lede{font-size:17px}.guide-sidebar{order:1;position:static;max-height:none;width:100%;box-sizing:border-box;margin:0 0 22px;padding:14px}.guide-body{order:2;width:100%}.guide-contents nav{grid-template-columns:1fr}.guide-contents summary{display:flex;align-items:center;gap:6px;justify-content:space-between;min-height:44px;cursor:pointer}.guide-contents summary::after{content:'⌄';font-size:20px;display:inline-block}.guide-contents[open] summary::after{transform:rotate(180deg)}.guide-count{font-size:11px;font-weight:400}.guide-dimensions{grid-template-columns:1fr}.guide-dimensions a{padding:16px;grid-template-columns:24px 1fr}.guide-dimensions a>span{display:block}.guide-dimensions strong{font-size:17px}.guide-section{padding:30px 0;scroll-margin-top:16px}.guide-section h2{font-size:27px}#best-practices h2{font-size:30px}.sidebar-bottom{display:block;margin-top:12px}.sidebar-bottom p,.sidebar-bottom>a{display:none}.guide-figure{margin:20px 0}.workflow-steps li{padding:16px 16px 16px 52px}.workflow-steps li::before{left:16px;top:23px}.path-diagram{padding:14px;gap:8px}.path-diagram li{max-width:100%}.guide-section table{min-width:0}.guide-section th,.guide-section td{padding:12px 10px}.guide-section td:first-child{min-width:0}.workflow-index strong{font-size:17px}.worked-example{padding:18px}.manual-results a{font-size:19px}}
@media print{.guide-layout{display:block;padding:0}.guide-sidebar,.guide-dimensions,#guide-results,#guide-search-reset,#search-jump{display:none!important}.guide-hero,.guide-body{max-width:none;padding:0}.guide-section[hidden]{display:block!important}.workflow-steps{display:block}.workflow-index a{break-inside:avoid}.guide-section{scroll-margin-top:0}.guide-section h2{font-size:22pt}.guide-section a[href^="http"]::after{content:' (' attr(href) ')';font-size:8pt;overflow-wrap:anywhere}.worked-example{break-inside:avoid}.table-wrap{overflow:visible}}

/* DFC baseline figures, retained alongside the Entertainment mobile shell. */
.guide-figure{margin:24px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}.guide-figure>a{display:block;position:relative;max-width:100%}.guide-figure img{display:block;width:100%;max-width:100%;height:auto}.guide-figure figcaption{padding:16px 18px;color:var(--muted);font-size:13px;line-height:1.65}.guide-figure figcaption b{color:var(--ink)}.enlarge{position:absolute;right:10px;bottom:10px;background:#17354e;color:white;padding:5px 9px;font-size:12px}.marker{position:absolute;display:grid;place-items:center;width:26px;height:26px;border:2px solid white;border-radius:50%;background:#244a68;color:white;font-size:13px;font-weight:700}.callouts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-left:22px}.guide-section .guide-figure{max-width:100%}.guide-section img{max-width:100%;height:auto}.guide-body{padding-left:0;padding-right:0}.guide-section .section-kicker{max-width:none}
@media(max-width:720px){.callouts{grid-template-columns:1fr}.guide-body{padding:0}.guide-figure figcaption{padding:12px}.guide-figure{margin:20px 0}}

.guide-contents summary::after{border:0;width:auto;height:auto;transform:none}.guide-contents[open] summary::after{transform:rotate(180deg)}

/* Illustrated field guide: image-led routes and chapter-specific visual teaching. */
.manual-page .guide-layout{max-width:1540px;grid-template-columns:234px minmax(0,1fr);column-gap:58px;row-gap:38px;padding:36px 44px 100px}
.manual-page .guide-hero{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:42px;padding:20px 0 38px;border-bottom:1px solid var(--line)}
.manual-page .hero-copy{min-width:0}.manual-page .guide-hero h1{font-size:clamp(42px,5.1vw,72px);max-width:8ch;line-height:.98;margin:20px 0 22px;font-weight:600}.manual-page .hero-lede{font-size:20px;max-width:29em;line-height:1.55}.manual-page .hero-meta{margin-top:28px;font-size:11px}.manual-page .hero-visual{display:block;min-width:0}.manual-page .hero-visual img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:0}
.manual-page .guide-sidebar{grid-row:2;grid-column:1;border:0;border-right:1px solid var(--line);border-radius:0;background:none;padding:0 24px 0 0;top:calc(var(--wire-header-height,140px) + 24px);max-height:calc(100vh - var(--wire-header-height,140px) - 48px)}
.manual-page .guide-sidebar .guide-search{margin:0}.manual-page .guide-search input{border-radius:3px;padding:12px;font-size:14px}.manual-page .guide-contents nav{gap:0}.manual-page .guide-contents a{padding:8px 0;font-size:12px;border-radius:0}.manual-page .guide-contents a[aria-current=location]{font-weight:700;background:none;border-left:3px solid var(--blue);padding-left:8px;color:var(--ink)}
.manual-page .guide-body{max-width:none;grid-row:2}.manual-page .guide-dimensions{grid-template-columns:1fr 1fr;gap:28px;margin:0 0 24px}.manual-page .guide-dimensions a{display:grid;grid-template-columns:25px 1fr;gap:8px 12px;padding:0 0 22px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;overflow:hidden}.manual-page .guide-dimensions a img{grid-column:1 / -1;display:block;width:100%;height:auto;margin:0 0 12px;border:1px solid var(--line)}.manual-page .guide-dimensions strong{font-size:23px;letter-spacing:-.025em}.manual-page .guide-dimensions small{font-size:14px;line-height:1.45}.manual-page .guide-dimensions a:hover{background:none}.manual-page .guide-dimensions a:hover strong{text-decoration:underline;text-underline-offset:5px}
.manual-page .guide-section{padding:56px 0 64px;border-top:1px solid var(--line)}.manual-page #how-it-works,.manual-page #best-practices{border-top:1px solid var(--line)}.manual-page .section-kicker{background:none;border:0;padding:0;margin:0 0 16px;font:11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.manual-page .section-kicker>span{font-size:15px;color:var(--blue);padding-right:14px}.manual-page .guide-section h2,.manual-page #best-practices h2{font:600 clamp(29px,3.4vw,44px)/1.12 var(--serif);letter-spacing:-.025em;max-width:24ch;margin:0 0 26px}.manual-page .guide-section h3{font-size:22px;letter-spacing:-.025em;margin-top:32px}.manual-page .guide-section>p{font-size:16px;line-height:1.8;max-width:73ch}.manual-page .guide-section>ul{font-size:16px}.manual-page .guide-section li{font-size:15px}
.chapter-visual{margin:0 0 34px;break-inside:avoid;max-width:100%}.chapter-visual>a{display:block;position:relative;border:1px solid var(--line);background:var(--card);overflow:hidden}.chapter-visual img{width:100%;height:auto;display:block}.visual-enlarge{position:absolute;right:12px;bottom:12px;padding:10px 13px;min-height:44px;display:flex;align-items:center;font-size:12px;background:var(--paper);color:var(--ink);border:1px solid var(--line)}.chapter-visual figcaption{display:grid;grid-template-columns:130px 1fr;gap:18px;margin-top:14px;font-size:14px;line-height:1.65;color:var(--muted);max-width:75ch}.chapter-visual figcaption>span{font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--blue);padding-top:4px}.chapter-visual>a:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.manual-page .path-diagram{background:none;border:0;padding:4px 0;margin:22px 0;gap:16px}.manual-page .path-diagram li{background:none;border:0;padding:0 22px 0 0;border-radius:0;font-size:13px}.manual-page .path-diagram li span{background:none;border:0}.manual-page .walkthrough{gap:25px;margin:28px 0}.manual-page .walkthrough li{background:none;border:0;border-top:2px solid var(--line);border-radius:0;padding:18px 0 16px 42px}.manual-page .walkthrough li::before{left:0;top:24px}.manual-page .walkthrough strong{font-size:17px;line-height:1.4;margin-bottom:8px}.manual-page .workflow-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}.manual-page .workflow-steps li{margin:0;max-width:none}.manual-page .workflow-outcome{font-size:19px}.manual-page .worked-example{padding:26px 30px;background:var(--card);border-left:3px solid var(--blue);margin:32px 0}.manual-page .worked-output{margin:20px 0 0;border-top:1px solid var(--line);padding-top:12px}.manual-page .worked-output summary{min-height:44px;font-weight:600}.manual-page .worked-output dd{margin:6px 0 18px;max-width:67ch}.manual-page .worked-example h3{margin-top:0}
.manual-page .workflow-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;border:0;margin:30px 0}.manual-page .workflow-index a{display:grid;grid-template-columns:22px 1fr;align-content:start;border:0;padding:0 0 18px;gap:8px;background:none}.manual-page .workflow-index img{grid-column:1/-1;width:100%;height:auto;border:1px solid var(--line);display:block;margin-bottom:5px}.manual-page .workflow-index strong{font-size:17px;line-height:1.35}.manual-page .workflow-index small{font-size:13px;line-height:1.5}.manual-page .workflow-index a:hover strong{text-decoration:underline;text-underline-offset:4px}
.manual-page .guide-section .table-wrap{border-radius:0}.manual-page .guide-section .mini-card{background:none;border-radius:0;border:0;border-top:1px solid var(--line);padding:20px 0}.manual-page .guide-section .guide-figure{border-radius:0}.manual-page .guide-section .guide-figure figcaption{background:none}
@media(min-width:1600px){.manual-page .guide-layout{grid-template-columns:250px minmax(0,1fr);column-gap:70px}.manual-page .guide-body{max-width:1050px}}
@media(max-width:1050px){.manual-page .guide-layout{grid-template-columns:200px minmax(0,1fr);gap:28px;padding:26px 24px 70px}.manual-page .guide-hero{gap:20px}.manual-page .guide-hero h1{font-size:52px}.manual-page .hero-lede{font-size:17px}.manual-page .workflow-index{grid-template-columns:1fr 1fr}.manual-page .guide-dimensions{gap:20px}.manual-page .guide-dimensions strong{font-size:20px}}
@media(max-width:720px){.manual-page .guide-layout{display:flex;padding:22px 18px 60px;gap:0}.manual-page .guide-hero{display:flex;flex-direction:column;gap:18px;align-items:stretch;padding:0 0 26px;margin-bottom:26px}.manual-page .guide-hero h1{font-size:48px;max-width:12ch;margin:12px 0 16px}.manual-page .hero-lede{font-size:17px}.manual-page .hero-meta{margin-top:18px}.manual-page .hero-visual{display:none}.manual-page .guide-sidebar{border:0;padding:0;margin:0 0 30px;max-height:none}.manual-page .guide-search input{font-size:16px}.manual-page .guide-contents{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:14px 0}.manual-page .guide-contents summary{border:0;background:none;padding:10px 0}.manual-page .guide-contents a{padding:10px 4px}.manual-page .guide-dimensions{grid-template-columns:1fr 1fr;gap:16px}.manual-page .guide-dimensions a{grid-template-columns:1fr;gap:5px}.manual-page .guide-dimensions a>span{display:none}.manual-page .guide-dimensions a img{grid-column:1;margin-bottom:7px}.manual-page .guide-dimensions strong{font-size:18px}.manual-page .guide-dimensions small{font-size:12px}.manual-page .guide-section{padding:36px 0 42px}.manual-page .guide-section h2,.manual-page #best-practices h2{font-size:32px;max-width:100%;margin-bottom:22px}.chapter-visual{margin:0 -0px 26px}.chapter-visual figcaption{display:block;font-size:14px;margin-top:12px}.chapter-visual figcaption>span{display:block;margin-bottom:5px}.visual-enlarge{position:static;border:0;border-top:1px solid var(--line);padding:10px 12px;justify-content:flex-end;font-size:12px}.manual-page .guide-section>p{font-size:16px}.manual-page .workflow-steps{display:block}.manual-page .workflow-steps li{margin-bottom:10px}.manual-page .workflow-index{grid-template-columns:1fr 1fr;gap:22px 14px}.manual-page .workflow-index a{grid-template-columns:1fr}.manual-page .workflow-index span{display:none}.manual-page .workflow-index strong{font-size:16px}.manual-page .workflow-index small{font-size:12px}.manual-page .worked-example{padding:20px}.manual-page .guide-section h3{font-size:21px}.manual-page .sidebar-bottom{margin-top:12px}}
@media print{.manual-page .guide-layout,.manual-page .guide-hero{display:block;padding:0}.manual-page .hero-visual,.visual-enlarge{display:none!important}.manual-page .guide-hero h1{max-width:none;font-size:34pt}.manual-page .guide-section{padding:24px 0}.chapter-visual{max-width:155mm;break-inside:avoid}.chapter-visual figcaption{font-size:10pt}.chapter-visual>a{border:0}.chapter-visual a::after{display:none}.manual-page .guide-section h2{font-size:24pt}.manual-page .workflow-index{grid-template-columns:repeat(3,1fr)}.manual-page .workflow-steps{display:block}}

@media(max-width:720px){.manual-page .guide-hero{gap:16px;margin-bottom:22px;padding-bottom:22px}.manual-page .hero-copy{display:contents}.manual-page .guide-hero .eyebrow{order:0;margin-bottom:0}.manual-page .guide-hero h1{order:1;margin:0}.manual-page .hero-visual{display:block;order:2}.manual-page .hero-visual img{max-height:190px;object-fit:contain;background:#F2F5F8}.manual-page .hero-lede{order:3;margin:0}.manual-page .hero-lede br{display:none}.manual-page .hero-meta{display:none}}

.click-guide { margin: 1rem 0 1.5rem; border: 1px solid var(--line); padding: 0 1rem; background: var(--card); }
.click-guide summary { cursor: pointer; padding: .85rem 0; font-weight: 650; }
.click-guide img { display: block; max-width: 100%; width: auto; height: auto; margin: 1rem 0; border: 1px solid var(--line); }
.click-guide .demo-play { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); cursor: pointer; }
@media print { .click-guide .demo-play, .click-guide img { display: none; } }

.click-guide .demo-full { display: inline-flex; align-items: center; min-height: 44px; margin-inline: .5rem; white-space: nowrap; }
@media (max-width: 720px) { .click-guide .demo-full { display: flex; width: fit-content; margin-inline: 0; } }
@media print { .click-guide .demo-full { display: none; } }

/* Actual Wire controls are illustrations in the guide. Keep their names searchable. */
.control-example { display:inline-block; position:relative; max-width:100%; vertical-align:middle; line-height:1; margin:1px 2px; }
.control-example > b { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.manual-page .control-example img { display:block; max-width:100%; width:auto; height:auto; max-height:34px; border-radius:3px; }
.control-key { padding:14px 0 16px; margin:18px 0; border-block:1px solid var(--line); }
.control-key > p { font-weight:650; margin:0 0 8px; }
.control-key ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:12px 24px; }
.control-key li { display:grid; align-content:start; align-items:start; justify-items:start; gap:5px; max-width:28ch; }
.control-key li > span:last-child { color:var(--muted); font-size:14px; }
.annotated-screen { display:block; position:relative; }
.numbered-screen .marker, .numbered-screen .callouts li::before { display:grid; place-items:center; box-sizing:border-box; color:#102638; background:#ffdb58; border:2px solid #102638; border-radius:50%; font:800 18px/1 Arial,sans-serif; }
.numbered-screen .marker { width:32px; height:32px; box-shadow:0 0 0 2px white,0 2px 6px #102638; }
.numbered-screen .enlarge { position:static; display:block; padding:12px; text-align:right; }
.numbered-screen .callouts { list-style:none; padding:0; counter-reset:landmark; }
.numbered-screen .callouts li { position:relative; counter-increment:landmark; padding-left:36px; }
.numbered-screen .callouts li::before { content:counter(landmark); position:absolute; left:0; top:0; width:27px; height:27px; font-size:15px; }
@media(max-width:720px) {
 .control-key ul { display:grid; }
 .control-key li { max-width:none; }
 .numbered-screen .marker[data-number="2"] { margin-left:12%; }
 .numbered-screen .marker[data-number="1"] { margin-left:10%; }
}
@media print { .control-example img,.numbered-screen .marker,.numbered-screen .callouts li::before { print-color-adjust:exact; } }

.diagram-labels { margin:-16px 0 24px; }
.diagram-labels summary { width:fit-content; padding:10px 0; min-height:44px; box-sizing:border-box; cursor:pointer; font-size:14px; }
.number-key { list-style:none; padding:0; counter-reset:guide-step; }
.number-key li { position:relative; padding:2px 0 2px 38px; margin:.4em 0; min-height:26px; counter-increment:guide-step; }
.number-key li::before { content:counter(guide-step); position:absolute; left:0; top:2px; display:grid; place-items:center; box-sizing:border-box; width:26px; height:26px; border:2px solid #102638; border-radius:50%; color:#102638; background:#ffdb58; font:800 15px/1 Arial,sans-serif; }
@media print { .number-key li::before { print-color-adjust:exact; } }