/* GAR PPWR FAQ prototype (step 4.8). One accent colour (deep teal); regulation text set in a serif on a paper
   panel so it always reads apart from what the page adds. No custom properties: the file holds no double hyphen. */

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
    margin: 0;
    background: #f6f5f1;
    color: #1d2227;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

a { color: #0b5f6e; text-underline-offset: 0.15em; }
a:hover { color: #073f49; }

:focus-visible {
    outline: 3px solid #0b5f6e;
    outline-offset: 2px;
    border-radius: 2px;
}

button, input, select, textarea { font: inherit; color: inherit; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip { position: absolute; left: 0.5rem; top: -3rem; background: #ffffff; padding: 0.5rem 0.75rem; z-index: 50; }
.skip:focus { top: 0.5rem; }

.proto-bar {
    background: #1d2227; color: #f6f5f1; font-size: 0.85rem; text-align: center; padding: 0.3rem 1rem;
}

/* Header */
.site-head { background: #ffffff; border-bottom: 1px solid #dedbd2; }
.head-inner {
    max-width: 72rem; margin: 0 auto; padding: 0.75rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
}
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.brand { font-weight: 700; font-size: 1.1rem; color: #1d2227; text-decoration: none; }
/* The corner ribbon (D-147), in place of the round header badge: a dark purple band (D-149) at 45 degrees across the top right corner of
   the window, opening "What is GAR?" (D-142). The corner box clips the band's ends at the window edges and lets clicks
   through everywhere but the band. The band's centre sits 96 pixels from the corner (72 on a phone). */
.ribbon-box { position: fixed; top: 0; right: 0; width: 168px; height: 168px; overflow: hidden; pointer-events: none; z-index: 30; }
.ribbon {
    position: absolute; top: 50px; right: -52px; width: 240px; height: 36px; line-height: 36px;
    transform: rotate(45deg); pointer-events: auto;
    background: #651094; color: #ffffff; text-decoration: none; text-align: center; white-space: nowrap;
    font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding-left: 0.12em;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.ribbon:hover, .ribbon:focus-visible { background: #7d1cb5; color: #ffffff; }
.ribbon:focus-visible { outline: 3px solid #ffffff; outline-offset: -6px; border-radius: 0; }
.main-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.95rem; }
.main-nav a { text-decoration: none; padding: 0.2rem 0; }
.main-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-left: auto; }

main { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; outline: none; }

/* Footer */
.site-foot { border-top: 1px solid #dedbd2; background: #ffffff; font-size: 0.9rem; color: #4c5761; }
.foot-inner { max-width: 72rem; margin: 0 auto; padding: 1rem; }
.foot-inner p { margin: 0.3rem 0; }

h1 { font-size: 1.6rem; line-height: 1.3; margin: 0.25rem 0 0.75rem; }
h2 { font-size: 1.25rem; line-height: 1.35; margin: 1.75rem 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 0.4rem; }

.muted { color: #5b6670; }
.small { font-size: 0.875rem; }

.note {
    background: #ffffff; border: 1px solid #dedbd2; border-radius: 0.4rem; padding: 0.6rem 0.8rem; margin: 0.6rem 0;
}

/* Buttons and switches */
.btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: #ffffff; border: 1px solid #b9c2c8; border-radius: 0.4rem;
    padding: 0.35rem 0.75rem; cursor: pointer; text-decoration: none; color: #1d2227; font-size: 0.92rem;
}
.btn:hover { border-color: #0b5f6e; }
.btn.primary { background: #0b5f6e; border-color: #0b5f6e; color: #ffffff; }
.btn.primary:hover { background: #073f49; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
/* D-149: display above would otherwise override the hidden attribute (View print selection while the selection is empty). */
.btn[hidden] { display: none; }

.switch {
    display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid #b9c2c8;
    border-radius: 999px; padding: 0.25rem 0.75rem 0.25rem 0.35rem; cursor: pointer; font-size: 0.92rem;
}
.switch .track {
    position: relative; width: 2.2rem; height: 1.25rem; border-radius: 999px; background: #c9cfd3; flex: none;
}
.switch .track::after {
    content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 0.95rem; height: 0.95rem;
    border-radius: 50%; background: #ffffff; transition: left 0.15s ease;
}
.switch[aria-checked="true"] { border-color: #0b5f6e; }
.switch[aria-checked="true"] .track { background: #0b5f6e; }
.switch[aria-checked="true"] .track::after { left: 1.1rem; }
.switch .state { font-weight: 600; min-width: 1.8rem; }

/* Search */
.search-box { position: relative; max-width: 44rem; }
.search-box.big { margin: 0.5rem 0 0.25rem; }
.search-row { display: flex; gap: 0.5rem; }
.search-row input[type="search"] {
    flex: 1; min-width: 0; padding: 0.55rem 0.75rem; border: 1px solid #9aa5ad; border-radius: 0.4rem; background: #ffffff;
}
.search-box.big input[type="search"] { font-size: 1.1rem; padding: 0.7rem 0.9rem; }
.search-box.compact { width: 18rem; max-width: 100%; }
.search-box.compact .search-row input[type="search"] { padding: 0.3rem 0.6rem; }
.search-opts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; margin-top: 0.4rem; font-size: 0.9rem; }
.suggest {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0.2rem 0 0; padding: 0.25rem 0;
    list-style: none; background: #ffffff; border: 1px solid #9aa5ad; border-radius: 0.4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); max-height: 22rem; overflow-y: auto;
}
.suggest li { padding: 0.45rem 0.75rem; cursor: pointer; line-height: 1.35; }
.suggest li[aria-selected="true"], .suggest li:hover { background: #e3f0f2; }
.suggest .sub { display: block; font-size: 0.8rem; color: #5b6670; }

/* Landing */
/* D-143, D-145: the landing title block. A band of colours runs through the first line, left to right, every 4
   seconds; the gradient is two tiles wide and its first and last colour are the same, so each pass joins the next
   without a jump. Where text clipping is not supported the line is plain teal. */
/* D-150: the space above the search panel reduced, never the text sizes, so the panel shows whole at 1280 by 800. */
h1.hero { margin: 0; line-height: 1.2; font-weight: 700; }
.hero-1 { display: inline-block; font-size: 3.75rem; color: #0b5f6e; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-1 {
        background-image: linear-gradient(90deg, #b753ed, #0b5f6e, #1f6feb, #c2185b, #d9480f, #2e7d32, #b753ed);
        background-size: 200% 100%;
        background-repeat: repeat-x;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: shimmer 4s linear infinite;
    }
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: 0% 0; }
}
/* The owner, 2026-11-12: breathing room, 24 pixels under line 1 and the same between the tagline and the paragraph. */
.hero-2 { display: block; font-size: 1.9rem; margin-top: 1.5rem; line-height: 1.1; }
.tagline { margin: 1rem 0 0.5rem; font-size: 1.375rem; font-style: italic; font-weight: 400; color: #0b5f6e; }
/* D-149: the introductory paragraph, plain body text at the size and width of the subtitle. */
.intro { font-size: 1.1rem; max-width: 44rem; margin: 1.5rem 0 0.5rem; font-style: normal; font-weight: 400; }
/* D-150: the landing search in a cream panel with brown accents, from the brown-gold of the key provisions; no teal
   inside. Every text reaches 4.5 to 1 on its background. The panel does not clip, so the suggestions drop over the
   content below it. */
.search-panel {
    max-width: 44rem; margin: 0.5rem 0 1.25rem; padding: 1.25rem 1.5rem; background: #ece6d6; color: #4a4128;
    border: 2px solid #8c7b4a; border-radius: 12px; box-shadow: 0 2px 10px rgba(107, 93, 51, 0.15);
}
.search-panel h2 { margin: 0 0 0.75rem; font-size: 1.35rem; font-weight: 700; line-height: 1.3; color: #6b5d33; }
.search-panel .search-box.big { margin: 0; max-width: none; }
.search-panel .search-row input[type="search"] {
    height: 3.2rem; padding: 0 0.9rem; font-size: 1.25rem; color: #1d2227;
    background: #ffffff; border: 2px solid #8c7b4a; border-radius: 8px;
}
.search-panel .search-row input[type="search"]::placeholder { color: #6b6252; opacity: 1; }
.search-panel .search-row input[type="search"]:focus { border-color: #6b5d33; }
.search-panel :focus-visible { outline-color: #6b5d33; }
.search-panel .search-row .btn.primary {
    height: 3.2rem; padding: 0 1.25rem; font-size: 1.1rem; font-weight: 700; justify-content: center;
    background: #6b5d33; border: 2px solid #6b5d33; border-radius: 8px; color: #ffffff;
}
.search-panel .search-row .btn.primary:hover, .search-panel .search-row .btn.primary:focus-visible { background: #574b28; border-color: #574b28; }
.search-panel .search-opts { margin-top: 0.75rem; font-size: 0.95rem; color: #4a4128; }
.search-panel input[type="checkbox"] { accent-color: #6b5d33; width: 1.05rem; height: 1.05rem; }
.search-panel .search-hint { color: #6b5d33; }
.search-panel .muted { color: #4a4128; }
.search-panel #privacy-line { margin: 0.4rem 0 0; }
/* The suggestions open right under the box (3.2 rem), over the tick box and the lines below it, not under the whole
   search area, which would put them below the panel and out of view. */
.search-panel .suggest { top: 3.2rem; border-color: #8c7b4a; }
/* D-152: the panel's last line, the size of the privacy line, its links in the panel's brown. */
.search-panel .panel-ways { margin: 0.75rem 0 0; font-size: 0.875rem; color: #4a4128; }
.search-panel .panel-ways a { color: #6b5d33; text-decoration: underline; text-underline-offset: 0.15em; }
.search-panel .panel-ways a:hover { color: #6b5d33; font-weight: 700; }
.search-panel .suggest li[aria-selected="true"], .search-panel .suggest li:hover { background: #f3eee1; }
.lead { font-size: 1.1rem; max-width: 44rem; }
.points { max-width: 44rem; margin: 0.5rem 0 0.4rem; padding-left: 1.2rem; }
.points li { margin: 0.3rem 0; }
.official { margin: 0.4rem 0 0.9rem; font-weight: 600; }
.official:has(+ .gar-more) { margin-bottom: 0.25rem; }
.search-hint { margin: 0.3rem 0 0; color: #0b5f6e; }
.results-label { margin: 0.75rem 0 0.25rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #0b5f6e; }

/* "What is GAR?" (D-142): the landing page's reading width; the GAR column of the table in light teal. */
.gar-page { max-width: 44rem; }
.gar-page p, .gar-page li { line-height: 1.65; }
.gar-page ul { padding-left: 1.2rem; }
.gar-page li { margin: 0.35rem 0; }
.table-scroll { overflow-x: auto; margin: 1rem 0 1.25rem; border: 1px solid #dedbd2; border-radius: 0.4rem; background: #ffffff; }
.compare { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 0.95rem; }
.compare th, .compare td { border-bottom: 1px solid #e6e3da; padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; }
.compare thead th { font-size: 0.9rem; background: #f6f5f1; }
.compare tbody th { font-weight: 600; width: 28%; }
.compare .gar-col { background: #e3f0f2; }
.compare thead th.gar-col { background: #cfe6ea; color: #073f49; }
.gar-page .closing {
    margin: 1.75rem 0 0.5rem; padding: 0.75rem 1rem; font-size: 1.2rem; line-height: 1.45;
    color: #0b5f6e; background: #e3f0f2; border-left: 4px solid #0b5f6e; border-radius: 0.3rem;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; padding: 0; list-style: none; }
.grid li a {
    display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; height: 100%;
    background: #ffffff; border: 1px solid #dedbd2; border-radius: 0.4rem; padding: 0.6rem 0.75rem;
    text-decoration: none; color: #1d2227;
}
.grid li a:hover { border-color: #0b5f6e; }
.count { color: #5b6670; font-size: 0.85rem; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; margin: 0.4rem 0; }
.chips a {
    display: inline-block; background: #ffffff; border: 1px solid #c9cfd3; border-radius: 999px;
    padding: 0.15rem 0.65rem; font-size: 0.9rem; text-decoration: none; color: #1d2227;
}
.chips a:hover { border-color: #0b5f6e; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.panel { background: #ffffff; border: 1px solid #dedbd2; border-radius: 0.5rem; padding: 1rem; }
.panel h2 { margin-top: 0; }
.sphere-panel { overflow: hidden; }
.sphere-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
/* D-145: sphere tags in purple, a darker purple on hover and focus; the list view and the Tags page keep their colour. */
.tc-face a { color: #b753ed; background: rgba(255, 255, 255, 0.85); }
.tc-face a:hover, .tc-face a:focus { color: #8e2fc4; background: #f3e8fb; }
.tc-face a:focus-visible { outline: 3px solid #0b5f6e; background: #ffffff; }

/* Lists of questions */
.layout { display: grid; grid-template-columns: 17rem 1fr; gap: 1.5rem; align-items: start; }
.filters { background: #ffffff; border: 1px solid #dedbd2; border-radius: 0.5rem; padding: 0.75rem 0.9rem; }
.filters label { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 0.6rem; }
.filters select, .filters input[type="search"] {
    width: 100%; margin-top: 0.15rem; padding: 0.3rem 0.4rem; border: 1px solid #9aa5ad; border-radius: 0.3rem; background: #ffffff;
}
.filters .check { display: flex; gap: 0.4rem; align-items: baseline; font-weight: 400; }
.filters .check input { margin: 0; }
.filters-toggle { display: none; }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.active-filters .btn { font-size: 0.82rem; padding: 0.15rem 0.55rem; }
.qlist { list-style: none; padding: 0; margin: 0; }
.qlist li { border-bottom: 1px solid #e6e3da; padding: 0.6rem 0; }
.qlist li:first-child { border-top: 1px solid #e6e3da; }
.qlist a.q { font-weight: 600; text-decoration: none; }
.qlist a.q:hover { text-decoration: underline; }
.meta { font-size: 0.82rem; color: #5b6670; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin-top: 0.15rem; }
.badge { border: 1px solid #c9cfd3; border-radius: 0.25rem; padding: 0 0.3rem; font-size: 0.75rem; color: #3f4a53; }

/* Answer view */
.crumbs { font-size: 0.88rem; color: #5b6670; margin-bottom: 0.25rem; }
.rowid { font-size: 0.82rem; color: #5b6670; }
.alts { font-size: 0.92rem; color: #4c5761; margin: 0 0 0.75rem; padding-left: 1.1rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0 1rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.section-head h2 { margin-bottom: 0.2rem; }

.law {
    background: #fffdf7; border: 1px solid #e2dccb; border-left: 4px solid #8c7b4a; border-radius: 0.4rem;
    padding: 0.4rem 1rem 0.6rem;
}
.law-note { font-size: 0.85rem; color: #5b6670; margin: 0.2rem 0 0.5rem; }
.vt { padding: 0.65rem 0; border-top: 1px solid #ece6d6; }
.vt:first-child { border-top: none; }
.vt-label { font-size: 0.78rem; color: #6b5d33; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0.01em; }
.vt-key-mark { font-weight: 700; color: #6b5d33; margin-left: 0.4rem; }
.vt-lead, .vt-text, .vt-table, .vt-foot, .def-text {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    font-size: 1.04rem; line-height: 1.65;
}
.vt-lead { margin: 0.15rem 0; color: #3a3f44; }
.vt-text { margin: 0.15rem 0; white-space: pre-line; }
.vt.key .vt-text, .vt.key .vt-table { font-weight: 700; }
.vt.key { border-left: 3px solid #8c7b4a; padding-left: 0.7rem; margin-left: -0.75rem; }
.vt-notice { margin-top: 0.1rem; }
.linkish {
    background: none; border: none; padding: 0; font-size: 0.8rem; color: #0b5f6e; cursor: pointer;
    text-decoration: underline; text-underline-offset: 0.15em;
}
h1[tabindex="-1"]:focus { outline: none; }
.vt-table { overflow-x: auto; margin: 0.4rem 0; }
.vt-table table { border-collapse: collapse; font-size: 0.95rem; width: 100%; }
.vt-table caption { text-align: left; font-style: italic; padding-bottom: 0.25rem; }
.vt-table th, .vt-table td { border: 1px solid #d8d0b8; padding: 0.3rem 0.45rem; vertical-align: top; text-align: left; }
.vt-table th { background: #f5efdc; }
.vt-foot { font-size: 0.9rem; margin: 0.3rem 0 0; padding-left: 1.2rem; color: #3a3f44; }
.jump { padding: 0.5rem 0 0.6rem; border-bottom: 1px solid #ece6d6; }
.jump h3 { font-size: 0.9rem; margin: 0.2rem 0 0.3rem; color: #4c5761; text-transform: uppercase; letter-spacing: 0.03em; }
.jump ol { margin: 0; padding-left: 1.4rem; columns: 2 22rem; column-gap: 2rem; }
.jump li { break-inside: avoid; padding: 0.1rem 0; }
.jump .linkish { font-size: 0.92rem; text-align: left; }
.jump + .vt { border-top: none; }
.vt { scroll-margin-top: 0.75rem; }
.vt:focus { outline: none; }
.vt.landed { outline: 3px solid #0b5f6e; outline-offset: 0.25rem; border-radius: 2px; }

.always { margin: 0.75rem 0; display: grid; gap: 0.5rem; }
.always .box { background: #ffffff; border: 1px solid #dedbd2; border-radius: 0.4rem; padding: 0.55rem 0.8rem; }
.always .box.act { border-left: 4px solid #0b5f6e; }
.always .box.gap { border-left: 4px solid #a8641a; }
.always .box.notice { border-left: 4px solid #6b7780; font-size: 0.92rem; }
.box-label { font-size: 0.78rem; font-weight: 700; color: #4c5761; text-transform: uppercase; letter-spacing: 0.03em; }
.notice details { margin-top: 0.2rem; }
.notice summary { cursor: pointer; font-size: 0.85rem; }

.interp {
    margin: 1rem 0; background: #f0f5f6; border: 1px dashed #6f8f96; border-radius: 0.4rem; padding: 0.6rem 1rem;
}
.interp-label { font-weight: 700; font-size: 0.9rem; color: #2d4b52; }
.interp p { margin: 0.5rem 0; white-space: pre-line; }

button.term {
    background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help;
    text-decoration: underline dotted #8c7b4a; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
    display: inline; text-align: inherit; white-space: inherit; font-weight: inherit; line-height: inherit;
}
button.term:hover { background: #f3ead1; }

.popover {
    position: absolute; z-index: 40; max-width: 30rem; background: #ffffff; border: 1px solid #9aa5ad;
    border-radius: 0.45rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 0.7rem 0.9rem;
}
.popover h2 { font-size: 1rem; margin: 0 0 0.3rem; }
.def-unit { margin: 0.35rem 0; }
.def-text { font-size: 0.98rem; }
.popover .btn { margin-top: 0.4rem; }

.related { padding-left: 1.1rem; }
.next { margin-top: 1rem; }

/* Dialog */
.backdrop { position: fixed; inset: 0; background: rgba(20, 24, 28, 0.55); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dialog { background: #ffffff; border-radius: 0.6rem; max-width: 34rem; width: 100%; padding: 1.1rem 1.25rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.dialog h2 { margin-top: 0.2rem; }
.dialog .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

/* Forms */
.form { max-width: 40rem; }
.form fieldset { border: 1px solid #dedbd2; border-radius: 0.4rem; padding: 0.5rem 0.9rem; margin: 0.75rem 0; }
.form legend { font-weight: 600; padding: 0 0.3rem; }
.form label { display: block; margin: 0.25rem 0; }
.form textarea, .form input[type="text"] {
    width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #9aa5ad; border-radius: 0.35rem; background: #ffffff;
}
.form textarea { min-height: 7rem; }

/* Timeline and article lists */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px solid #c9cfd3; }
.timeline > li { position: relative; padding: 0.3rem 0 0.3rem 1rem; }
.timeline > li::before {
    content: ""; position: absolute; left: -0.5rem; top: 0.85rem; width: 0.7rem; height: 0.7rem;
    border-radius: 50%; background: #0b5f6e;
}
.year-head { font-size: 1.15rem; font-weight: 700; margin: 1rem 0 0.25rem; }
details.block { background: #ffffff; border: 1px solid #dedbd2; border-radius: 0.4rem; padding: 0.4rem 0.75rem; margin: 0.35rem 0; }
details.block > summary { cursor: pointer; }
details.block ul { margin: 0.4rem 0; padding-left: 1.1rem; }

table.simple { border-collapse: collapse; width: 100%; font-size: 0.95rem; background: #ffffff; }
table.simple th, table.simple td { border: 1px solid #dedbd2; padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; }

.print-item { border-top: 2px solid #1d2227; padding-top: 0.75rem; margin-top: 1.25rem; }

/* Narrow screens */
@media (max-width: 52rem) {
    .layout { grid-template-columns: 1fr; }
    .filters-toggle { display: inline-flex; margin-bottom: 0.5rem; }
    .filters[data-open="false"] { display: none; }
    .ways { grid-template-columns: 1fr; }
    .head-tools { margin-left: 0; width: 100%; }
    .search-box.compact { width: 100%; }
    h1 { font-size: 1.35rem; }
    .vt.key { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-1 { animation: none; background-position: 0% 0; }
}

@media (max-width: 40rem) {
    /* D-149, D-151: line 1 about 44 pixels, or the largest size that keeps it on one line; narrower phones scale down. */
    .hero-1 { font-size: min(2.75rem, calc((100vw - 2rem) / 8.1)); }
    .search-panel { padding: 1rem; }
    .hero-2 { font-size: 1.4rem; }
    .ribbon-box { width: 126px; height: 126px; }
    .ribbon { top: 37px; right: -39px; width: 180px; height: 28px; line-height: 28px; font-size: 0.85rem; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body { background: #14171a; color: #e6e3dc; }
    a { color: #7fcbdb; }
    a:hover { color: #b3e3ed; }
    :focus-visible { outline-color: #7fcbdb; }
    .site-head, .site-foot, .panel, .filters, .note, .grid li a, .chips a, .always .box, details.block, .dialog, .popover, .suggest, table.simple, .btn, .skip {
        background: #1c2024; border-color: #353b41; color: #e6e3dc;
    }
    .brand, .grid li a, .chips a { color: #e6e3dc; }
    .site-foot, .muted, .count, .meta, .crumbs, .rowid, .law-note, .alts { color: #a6aeb5; }
    .proto-bar { background: #e6e3dc; color: #14171a; }
    .search-row input[type="search"], .filters select, .filters input[type="search"], .form textarea, .form input[type="text"] {
        background: #14171a; border-color: #4a525a;
    }
    .suggest li[aria-selected="true"], .suggest li:hover { background: #22343a; }
    .law { background: #1e1c16; border-color: #3d3726; border-left-color: #b39d5c; }
    .vt { border-top-color: #34301f; }
    .vt-label, .vt-key-mark { color: #cdb878; }
    .vt-lead, .vt-foot { color: #cfcabe; }
    .vt.key { border-left-color: #b39d5c; }
    .vt-table th { background: #2a2618; }
    .vt-table th, .vt-table td { border-color: #4a4430; }
    .jump { border-bottom-color: #34301f; }
    .vt.landed { outline-color: #7fcbdb; }
    .interp { background: #172226; border-color: #5d8790; }
    .interp-label { color: #a9d3dc; }
    .btn.primary { background: #3e9cb0; border-color: #3e9cb0; color: #0b1316; }
    .switch { border-color: #4a525a; }
    .switch[aria-checked="true"] .track { background: #3e9cb0; }
    .switch[aria-checked="true"] { border-color: #3e9cb0; }
    .tc-face a { color: #b753ed; background: rgba(28, 32, 36, 0.85); }
    .tc-face a:hover, .tc-face a:focus { color: #8e2fc4; background: #2a2231; }
    .search-panel { background: #2a2418; border-color: #b39d5c; color: #e6e3dc; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
    .search-panel h2 { color: #e3d3a6; }
    .search-panel .search-row input[type="search"] { background: #14171a; border-color: #b39d5c; color: #e6e3dc; }
    .search-panel .search-row input[type="search"]::placeholder { color: #a6aeb5; }
    .search-panel .search-row input[type="search"]:focus { border-color: #e3d3a6; }
    .search-panel :focus-visible { outline-color: #e3d3a6; }
    .search-panel .search-row .btn.primary { background: #b39d5c; border-color: #b39d5c; color: #1c2024; }
    .search-panel .search-row .btn.primary:hover, .search-panel .search-row .btn.primary:focus-visible { background: #c8b273; border-color: #c8b273; color: #1c2024; }
    .search-panel .search-opts, .search-panel .muted { color: #e6e3dc; }
    .search-panel .search-hint { color: #e3d3a6; }
    .search-panel input[type="checkbox"] { accent-color: #b39d5c; }
    .search-panel .suggest { border-color: #b39d5c; }
    .search-panel .panel-ways { color: #e6e3dc; }
    .search-panel .panel-ways a, .search-panel .panel-ways a:hover { color: #e3d3a6; }
    .search-panel .suggest li[aria-selected="true"], .search-panel .suggest li:hover { background: #2a2418; }
    .search-hint, .results-label, .gar-page .closing, .tagline { color: #7fcbdb; }
    .gar-page .closing { background: #172226; border-left-color: #7fcbdb; }
    .compare th, .compare td { border-color: #353b41; }
    .compare thead th, .compare tbody th { background: #1c2024; }
    .compare .gar-col { background: #183238; }
    .compare thead th.gar-col { background: #1f4048; color: #e6e3dc; }
    .table-scroll { background: #1c2024; border-color: #353b41; }
    .badge { border-color: #4a525a; color: #c3cad0; }
    .qlist li, .qlist li:first-child { border-color: #2c3238; }
    button.term:hover { background: #2e2a1c; }
    .box-label, .jump h3 { color: #a6aeb5; }
    table.simple th, table.simple td { border-color: #353b41; }
    .timeline { border-left-color: #353b41; }
}

/* Print: only the print selection, with its regulation text and references */
@media print {
    body { background: #ffffff; color: #000000; font-size: 11pt; }
    .proto-bar, .ribbon-box, .site-head, .site-foot .foot-links, .site-foot .foot-wip, .site-foot .foot-contact, .no-print, .skip, #dialog-root { display: none !important; }
    main { max-width: none; padding: 0; }
    .law { border: none; border-left: 2px solid #000000; background: #ffffff; }
    .vt-label { color: #000000; }
    a { color: #000000; text-decoration: none; }
    .print-item { break-before: page; border-top: none; }
    .print-item:first-of-type { break-before: auto; }
    .table-scroll { overflow: visible; border: none; }
    .compare { min-width: 0; }
    .compare .gar-col, .compare thead th, .gar-page .closing { background: #ffffff; color: #000000; }
    button.term { text-decoration: none; }
    .vt.key { margin-left: 0; }
}

.tc-ball { margin: 0; padding: 0; }