/* The guide inherits Fast AAC's type, colors and shared site chrome. */
.guide-page { --guide-accent: var(--teal); }
.guide-masthead { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-block: 48px 38px; border-bottom: 1px solid var(--line); }
.guide-masthead .eyebrow { color: var(--teal); margin-bottom: 12px; }
.guide-masthead h1 { font-size: clamp(36px, 4vw, 56px); }
.guide-masthead p:last-child { color: var(--muted); margin-top: 14px; font-size: 17px; }
.guide-search { position: relative; width: 340px; flex-shrink: 0; }
.guide-search label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.search-field { display: flex; align-items: center; gap: 10px; border: 1px solid #869992; background: var(--paper-light); border-radius: 6px; padding: 3px 12px; }
.search-field:focus-within { outline: 3px solid var(--teal); outline-offset: 3px; }
.search-field input { width: 100%; min-width: 0; padding: 11px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field button { border: 0; background: none; padding: 8px; min-width: 36px; }
.guide-icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.guide-layout { display: grid; grid-template-columns: 211px minmax(0,1fr); gap: 48px; padding-block: 35px 80px; align-items: start; }
.guide-sidebar { position: sticky; top: 24px; }
.guide-sidebar .eyebrow { color: var(--muted); padding: 0 12px 14px; font-size: 10px; }
.topic-links { display: grid; gap: 3px; }
.topic-links a { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 12px; font-size: 15px; font-weight: 500; line-height: 1.3; border-radius: 5px; }
.topic-links a:hover { background: #e9ebe0; }
.topic-links a[aria-current] { background: var(--teal); color: white; }
.topic-links .guide-icon { width: 19px; height: 19px; }
.guide-sidebar-bottom { margin: 25px 12px 0; border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 10px; font-size: 13px; color: var(--muted); }
.platform-field { margin-top: 22px; padding: 0 12px; }
.platform-field label { display: block; font-size: 12px; margin-bottom: 7px; font-weight: 550; }
.platform-field select { max-width: 100%; width: 100%; font: inherit; font-size: 14px; background: var(--paper-light); color: var(--ink); padding: 10px 8px; border: 1px solid #869992; border-radius: 5px; }
.guide-topic { min-width: 0; scroll-margin-top: 25px; }
.guide-topic + .guide-topic { margin-top: 55px; }
.js .guide-topic + .guide-topic { margin-top: 0; }
.topic-heading { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 25px; }
.topic-heading h2 { font-size: clamp(29px, 3vw, 38px); }
.topic-heading p { margin-top: 10px; font-size: 16px; color: var(--muted); }
.topic-number { font-size: 13px; color: var(--teal); border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.quick-map { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 30px; background: #edf0e5; border-radius: 8px; padding: 20px 14px; gap: 10px; }
.quick-map a { padding: 17px 12px; text-align: center; text-decoration: none; display: grid; justify-items: center; gap: 12px; border-radius: 5px; }
.quick-map a:hover { background: var(--paper-light); }
.quick-map .guide-icon { width: 33px; height: 33px; color: var(--teal); }
.quick-map strong { font-size: 15px; font-weight: 600; line-height: 1.4; }
.quick-map small { color: var(--muted); font-size: 12px; }
.task-label { display: flex; justify-content: space-between; margin-block: 28px 10px; align-items: center; }
.task-label .eyebrow { font-size: 10px; color: var(--muted); }
.expand-all { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--teal); font-size: 12px; padding: 5px 0; }
.guide-task { border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.guide-task:last-of-type { border-bottom: 1px solid var(--line); }
.guide-task summary { display: flex; align-items: center; gap: 10px; list-style: none; padding: 19px 0; cursor: pointer; font-size: 17px; line-height: 1.4; font-weight: 550; }
.guide-task summary::-webkit-details-marker { display: none; }
.guide-task summary::after { content: '+'; margin-left: auto; font-size: 23px; font-weight: 400; color: var(--teal); flex-shrink: 0; }
.guide-task[open] summary::after { content: '−'; }
.task-body { padding: 0 28px 23px 0; font-size: 15px; }
.task-body p { max-width: 660px; }
.app-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 18px; }
.app-path span:not(.path-arrow) { background: #e9ecdf; border-radius: 4px; padding: 4px 9px; color: #344a44; font-weight: 550; }
.path-arrow { color: #66796d; }
.guide-steps { list-style: none; counter-reset: guide-step; padding: 0; margin: 0; display: grid; gap: 13px; }
.guide-steps li { counter-increment: guide-step; display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 10px; align-items: baseline; }
.guide-steps li::before { content: counter(guide-step); border: 1px solid #a2b3a5; border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; font-size: 12px; }
.guide-note { margin-top: 17px; padding-left: 12px; border-left: 2px solid var(--ochre); color: var(--muted); font-size: 13px; }
.task-actions { margin-top: 18px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.task-actions a, .copy-task { color: var(--teal); background: none; border: 0; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; padding: 4px 0; }
.platform-tag { font-size: 10px; background: var(--aqua); color: var(--teal-deep); border-radius: 4px; padding: 3px 6px; font-weight: 550; }
.topic-next { display: flex; justify-content: space-between; gap: 15px; margin-top: 30px; font-size: 14px; color: var(--teal); text-decoration: none; padding: 18px 20px; background: #e9ecdf; border-radius: 5px; }
.topic-next small { color: var(--muted); display: block; font-size: 11px; margin-bottom: 2px; }
.guide-help { margin-top: 34px; font-size: 13px; color: var(--muted); }
.search-results h2 { font-size: 32px; margin-bottom: 8px; }
.search-results > p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.result-topic { font-size: 10px; color: var(--teal); text-transform: uppercase; letter-spacing: .07em; display: block; margin-bottom: 6px; }
.search-empty { border: 1px solid var(--line); border-radius: 8px; padding: 30px; }
.search-empty p { margin-block: 12px 20px; }
.guide-page input:focus-visible, .guide-page select:focus-visible { outline-color: var(--teal); }
.guide-page .desktop-nav [aria-current=page] { border-bottom: 1px solid var(--teal); color: var(--teal); }
.guide-page .site-footer { padding-top: 45px; }
.no-js-notice { padding: 18px; background: var(--aqua); }
/* Keep navigation legible as the shared header gains a Guide link. */
@media (min-width: 621px) and (max-width: 1000px) { .guide-page .header-inner { gap: 20px; } .guide-page .desktop-nav { gap: 18px; } .guide-page .brand img { width: 170px; } }
@media (max-width: 1100px) { .guide-layout { gap: 30px; grid-template-columns: 185px minmax(0,1fr); } .guide-search { width: 290px; } }
@media (max-width: 800px) { .guide-masthead { align-items: start; gap: 25px; flex-direction: column; padding-block: 34px 26px; } .guide-search { width: 100%; } .guide-search label { display: none; } .guide-layout { grid-template-columns: 1fr; padding-top: 22px; gap: 25px; } .guide-sidebar { position: static; } .guide-sidebar > .eyebrow, .guide-sidebar-bottom { display: none; } .topic-links { display: flex; overflow-x: auto; padding-bottom: 9px; gap: 5px; scrollbar-width: thin; } .topic-links a { flex-shrink: 0; padding: 11px 12px; border: 1px solid var(--line); font-size: 13px; } .platform-field { display: flex; align-items: center; gap: 10px; padding: 0; margin-top: 12px; } .platform-field label { margin: 0; } .platform-field select { width: auto; padding: 6px 9px; font-size: 12px; } .topic-heading { margin-bottom: 20px; } }
@media (max-width: 620px) { .guide-page .desktop-nav { flex-wrap: wrap; gap: 14px 23px; } .guide-page .header-download { margin-left: auto; } .guide-masthead h1 { font-size: 36px; } .guide-masthead p:last-child { font-size: 15px; } .topic-heading p { font-size: 14px; } .topic-number { width: 32px; height: 32px; font-size: 11px; } .quick-map { gap: 2px; padding: 10px 4px; } .quick-map a { padding: 15px 5px; gap: 8px; } .quick-map strong { font-size: 12px; } .quick-map small { font-size: 10px; } .guide-task summary { font-size: 16px; padding-block: 17px; } .task-body { padding-right: 0; font-size: 14px; } .app-path { font-size: 11px; } }
@media print { .guide-layout { display: block; } .guide-topic[hidden] { display: block !important; margin-top: 40px !important; } .guide-task > .task-body { display: block !important; } .search-results { display: none; } }
@media (min-width: 1101px) {
  .guide-masthead { padding-block: 32px 30px; }
  .guide-masthead h1 { font-size: 48px; }
}
.no-js-only { display: inline-block; margin-bottom: 12px; }
.js .no-js-only { display: none; }
.guide-style-example { background: #edf0e5; border-radius: 8px; padding: 12px 26px 18px; margin-bottom: 28px; }
.guide-style-example .style-tabs { gap: 22px; margin: 0; }
.guide-style-example .style-tabs button { font-size: 14px; }
.guide-symbols { display: flex; justify-content: space-evenly; align-items: center; gap: 20px; padding: 28px 10px; }
.guide-symbols img { width: 26%; max-width: 135px; aspect-ratio: 1; object-fit: contain; }
.guide-style-example .small-note { font-size: 12px; text-align: center; }
@media (max-width: 620px) { .guide-style-example { padding-inline: 14px; } .guide-style-example .style-tabs { gap: 14px; } .guide-style-example .style-tabs button { font-size: 12px; } .guide-symbols { padding: 24px 0; } }
/* Screens are editorial references. Numbered annotations belong to the guide. */
.screen-switcher-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.screen-switcher-bar > .eyebrow { color: var(--muted); font-size: 10px; }
.screen-tabs { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid #c9d1c8; border-radius: 9px; background: #edf0e5; }
.screen-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 15px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 550; }
.screen-tabs button:hover { background: #e0e7db; color: var(--teal-deep); }
.screen-tabs button[aria-selected=true] { background: var(--paper-light); border-color: #b2c6b8; color: var(--teal-deep); box-shadow: 0 1px 4px #172d4310; }
.screen-tab-number { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; border: 1px solid #b3c4b9; }
.screen-tabs [aria-selected=true] .screen-tab-number { color: white; background: var(--teal); border-color: var(--teal); }
html:not(.js) .screen-switcher-bar { display: none; }
html:not(.js) .screen-panel[hidden] { display: block !important; }
@media (max-width: 620px) { .screen-switcher-bar { align-items: stretch; flex-direction: column; gap: 9px; } .screen-tabs button { flex: 1; padding-inline: 10px; font-size: 12px; } }
@media print { .screen-switcher-bar { display: none !important; } .screen-panel[hidden] { display: block !important; } }
.guide-content, .guide-sidebar, .visual-guide figure { min-width: 0; }
.visual-guide { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 24px; align-items: start; margin-bottom: 32px; }
.visual-card { background: var(--paper-light); border: 1px solid #c9d1c8; border-radius: 12px; padding: 14px; box-shadow: 0 4px 16px #172d4305; }
.visual-card-bar { display: flex; align-items: center; gap: 8px; padding: 0 0 13px; color: var(--ink); font-size: 12px; font-weight: 600; }
.visual-card-bar .guide-icon { width: 17px; height: 17px; color: var(--teal); }
.visual-card-bar small { margin-left: auto; font-size: 10px; color: var(--muted); font-weight: 400; }
.guide-screen { position: relative; border: 3px solid #2a3238; border-radius: 7px; isolation: isolate; background: #272832; }
.screen-capture { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; }
.screen-capture > img { width: 100%; height: auto; aspect-ratio: 4/3; display: block; border-radius: 4px; user-select: none; }
.visual-guide--portrait .visual-card { width: min(100%, 380px); justify-self: center; }
.guide-zoom .visual-guide--portrait .visual-card { width: min(100%, 440px); }
.cue-connectors { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.cue-leader { fill: none; stroke: #f4c960; stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 1px 1px #172d43); }
.cue-region { position: absolute; pointer-events: none; z-index: 1; border: 3px solid #f4c960; outline: 1px solid #172d4399; box-shadow: 0 0 0 2px #fffef6; border-radius: 5px; opacity: 0; }
.cue-region.is-selected, .cue-leader.is-selected { opacity: 1; }
.cue-marker { position: absolute; transform: translate(-50%,-50%); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; border-radius: 50%; }
.cue-marker span { width: 36px; height: 36px; display: grid; place-items: center; border: 3px solid #fffdf5; background: #185e62; color: white; font-size: 16px; font-weight: 650; line-height: 1; border-radius: 50%; box-shadow: 0 0 0 1px #133d45, 0 3px 7px #122b3d6b; transition: background .16s, transform .16s; }
.cue-marker[aria-pressed=true] span { background: #f4c960; color: #172d43; transform: scale(1.1); box-shadow: 0 0 0 2px #173f47, 0 3px 9px #122b3d80; }
.cue-marker:hover span { transform: scale(1.12); }
.cue-marker:focus-visible { outline: 3px solid white; outline-offset: 2px; box-shadow: 0 0 0 6px #172d43; }
.visual-footnote { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.guide-enlarge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; color: var(--teal-deep); font-weight: 600; padding: 5px 0; }
.guide-enlarge .guide-icon { width: 15px; height: 15px; }
.cue-reader { padding-top: 5px; }
.cue-reader > .eyebrow { font-size: 10px; color: var(--muted); margin-bottom: 15px; }
.cue-list { display: grid; gap: 8px; }
.cue-choice { display: grid; grid-template-columns: 28px 1fr 14px; align-items: center; gap: 10px; width: 100%; min-height: 56px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: left; padding: 10px; font-size: 14px; line-height: 1.35; font-weight: 550; }
.cue-choice:hover { background: #e9ece2; }
.cue-num { width: 27px; height: 27px; display: grid; place-items: center; color: var(--teal-deep); background: var(--paper-light); border: 1px solid #b3c4b9; font-size: 12px; font-weight: 650; border-radius: 50%; }
.cue-choice[aria-pressed=true] { background: #e1ebe2; border-color: #afc7b7; color: var(--teal-deep); }
.cue-choice[aria-pressed=true] .cue-num { background: #f4c960; color: var(--ink); border-color: #ab904c; }
.cue-arrow { opacity: 0; color: var(--teal); }
.cue-choice[aria-pressed=true] .cue-arrow { opacity: 1; }
.cue-explanations { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; min-height: 158px; }
.cue-explanation > p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.cue-explanation > a { font-size: 13px; line-height: 1.4; display: inline-flex; align-items: center; gap: 18px; color: var(--teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid #a2b5a9; padding: 8px 0 5px; margin-top: 14px; }
.cue-explanation > a:hover { border-color: var(--teal); }
.task-context { margin-bottom: 12px; font-size: 11px; font-weight: 600; color: var(--muted); }
.task-description { margin-bottom: 18px; color: var(--muted); line-height: 1.6; }
.guide-zoom { width: min(1250px,96vw); max-width: 96vw; max-height: 95dvh; border: 1px solid #9cafab; border-radius: 14px; background: var(--paper); padding: 0; color: var(--ink); box-shadow: 0 20px 100px #0005; }
.guide-zoom::backdrop { background: #122b3dcc; backdrop-filter: blur(5px); }
.guide-zoom-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 19px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 5; }
.guide-zoom-bar .eyebrow { font-size: 9px; color: var(--teal); margin-bottom: 5px; }
.guide-zoom-bar h2 { font-size: 23px; letter-spacing: -.025em; }
.guide-zoom-close { font-size: 13px; border: 1px solid #a2b5a9; border-radius: 5px; background: var(--paper-light); padding: 10px 15px; white-space: nowrap; }
.guide-zoom-close span { font-size: 19px; margin-left: 15px; }
.guide-zoom-content { padding: 24px; }
.guide-zoom .visual-guide { grid-template-columns: minmax(0,1fr) 260px; margin: 0; }
.guide-zoom .guide-enlarge { display: none; }
.visual-placeholder { border-radius: 12px; background: #ebeee3; }
html:not(.js) .cue-marker, html:not(.js) .cue-list { display: none; }
html:not(.js) .cue-explanation[hidden] { display: block !important; }
html:not(.js) .cue-explanation { padding-bottom: 20px; }
@media (min-width: 1101px) { .guide-layout { gap: 38px; grid-template-columns: 195px minmax(0,1fr); } }
@media (min-width: 801px) and (max-width: 1100px) { .visual-guide { grid-template-columns: 1fr; gap: 20px; } .cue-reader { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 25px; } .cue-reader > .eyebrow { grid-column: 1 / -1; } .cue-explanations { margin-top: 0; border-top: 0; border-left: 1px solid var(--line); padding: 6px 0 0 25px; } }
@media (max-width: 800px) { .visual-guide { grid-template-columns: 1fr; gap: 20px; } .cue-reader { padding: 0 3px; } .cue-list { display: flex; gap: 8px; } .cue-choice { grid-template-columns: 26px 1fr; font-size: 13px; min-height: 58px; padding: 9px; } .cue-arrow { display: none; } .cue-explanations { min-height: 100px; margin-top: 16px; padding-top: 15px; } .guide-zoom .visual-guide { grid-template-columns: 1fr; } .guide-zoom-bar { padding: 15px; } .guide-zoom-content { padding: 15px; } }
@media (max-width: 480px) { .visual-card { padding: 10px; border-radius: 9px; } .visual-card-bar { font-size: 11px; padding-bottom: 11px; } .visual-card-bar small { font-size: 9px; } .guide-screen { border-width: 2px; } .visual-footnote { align-items: start; font-size: 10px; } .visual-footnote > span { max-width: 165px; } .guide-enlarge { padding-top: 0; } .cue-choice { display: flex; flex-direction: column; align-items: flex-start; justify-content: start; gap: 8px; font-size: 12px; min-height: 89px; padding: 9px 8px; } .cue-num { width: 25px; height: 25px; flex-shrink: 0; } .cue-explanation > p { font-size: 14px; } .guide-zoom-bar h2 { font-size: 18px; } .guide-zoom-close { padding: 8px 10px; } .guide-zoom-content { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .cue-marker span { transition: none; } }
@media print { .guide-page .site-header, .guide-sidebar, .guide-search, .guide-page .site-footer, .expand-all, .copy-task, .topic-next, .cue-marker, .cue-connectors, .cue-region, .guide-enlarge { display: none !important; } }
/* Every number stays visibly attached to the control it explains. */
.cue-region { border: 2px solid #fffdf5; opacity: .95; box-shadow: 0 0 0 1px #173f47; }
.cue-leader { stroke: #fffdf5; stroke-width: 2px; opacity: 1; }
.cue-region.is-selected { border: 3px solid #f4c960; box-shadow: 0 0 0 2px #fffdf5, 0 0 0 3px #173f47; opacity: 1; }
.cue-leader.is-selected { stroke: #f4c960; stroke-width: 3px; }
@media (min-width: 1101px) { .visual-guide { grid-template-columns: minmax(0, 640px) minmax(250px, 1fr); } .cue-reader { padding: 5px 8px 0; } }
html:not(.js) .guide-search, html:not(.js) .platform-field, html:not(.js) .expand-all, html:not(.js) .copy-task, html:not(.js) .cue-instruction { display: none; }

/* Keep the selected app control bright while softly dimming its surroundings. */
.cue-shading { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-radius: 4px; overflow: hidden; }
.cue-shade { fill: #10232c; opacity: 0; transition: opacity 160ms ease; }
.cue-shade.is-selected { opacity: .26; }
html:not(.js) .cue-shading { display: none; }
@media (prefers-reduced-motion: reduce) { .cue-shade { transition: none; } }
@media print { .cue-shading { display: none !important; } }
@media (max-width: 800px) {
  .visual-guide[data-cue-count="4"] .cue-list,
  .visual-guide[data-cue-count="5"] .cue-list,
  .visual-guide[data-cue-count="6"] .cue-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .visual-guide[data-cue-count="5"] .cue-choice,
  .visual-guide[data-cue-count="6"] .cue-choice { grid-template-columns: 26px 1fr; display: grid; align-items: center; min-height: 58px; }
  .visual-guide[data-cue-count="5"] .cue-choice:last-child { grid-column: 1 / -1; }
}

.task-body .guide-style-example { margin-top: 20px; }

/* Device-specific guidance stays visible within the relevant answer. */
.task-body [data-platform] + [data-platform] { margin-top: 22px; }
.task-body .platform-tag { display: inline-block; margin-bottom: 12px; }

/* Compact guide header and quieter screenshot navigation. */
.guide-masthead { padding:26px 0; align-items:center; gap:30px; }
.guide-masthead h1 { font-size:27px; letter-spacing:-.5px; }
.guide-masthead p:last-child { font-size:15px; margin-top:5px; }
.guide-search { width:350px; }
.guide-search label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.guide-layout { padding-top:32px; gap:42px; grid-template-columns:210px minmax(0,1fr); }
.topic-number,.screen-tab-number { display:none; }
.topic-links a { padding:12px 14px; font-size:14px; }
.topic-links a[aria-current] { background:var(--aqua); color:var(--teal-deep); }
.topic-heading { margin-bottom:22px; }
.topic-heading h2 { font-size:38px; letter-spacing:-1px; }
.topic-heading p { font-size:16px; margin-top:8px; }
.screen-switcher-bar { justify-content:flex-start; margin-bottom:20px; }
.screen-tabs { background:transparent; border:0; padding:0; border-radius:0; gap:28px; }
.screen-tabs button { font-size:16px; border:0; border-radius:0; background:transparent; box-shadow:none; padding:10px 0; color:var(--muted); }
.screen-tabs button[aria-selected=true] { background:transparent; box-shadow:none; border:0; border-bottom:2px solid var(--teal); color:var(--teal); margin-bottom:-2px; }
.visual-card { padding:0; border:0; background:transparent; box-shadow:none; }
.visual-card-bar { padding:0 0 12px; font-size:12px; font-weight:400; color:var(--muted); }
.cue-hint { font-size:14px; color:var(--muted); margin:0 0 18px; }
.cue-choice { font-size:17px; min-height:62px; }
.cue-explanation>p { font-size:16px; line-height:1.6; }
.cue-reader { padding-top:30px; }
.visual-footnote .cue-instruction { display:none; }
.visual-footnote { justify-content:flex-end; }
@media(min-width:1101px) {
 .guide-content .visual-guide--portrait { grid-template-columns:minmax(0,380px) minmax(260px,320px); gap:40px; }
 .guide-content .visual-guide--portrait .visual-card { max-width:380px; justify-self:start; }
}
@media(min-width:801px) and (max-width:1100px) { .guide-layout { grid-template-columns:185px minmax(0,1fr); gap:30px; } .cue-hint { grid-column:1 / -1; } }
@media(max-width:800px) {
 .guide-masthead { align-items:stretch; gap:20px; }
 .guide-search { width:100%; }
 .guide-search label { display:block; }
 .guide-layout { grid-template-columns:1fr; gap:25px; }
 .topic-heading h2 { font-size:30px; }
 .topic-heading p { font-size:15px; }
 .cue-reader { padding-top:0; }
 .cue-choice { font-size:14px; }
 .screen-switcher-bar { align-items:start; }
 .screen-tabs { gap:24px; }
 .screen-tabs button { flex:none; font-size:15px; }
}