/* Skin: flat color, hard edges and a quiet paper surface. */
:root { --paper: #f5f1e7; --ink: #202623; --blue: #173f68; --red: #a22e22; --yellow: #e9c34b; --line: #8f9287; }
body { background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
button, summary { cursor: pointer; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.page-skin-yellow { --accent: var(--yellow); --accent-text: var(--ink); }
.page-skin-blue { --accent: var(--blue); --accent-text: var(--paper); }
.page-skin-red { --accent: var(--red); --accent-text: var(--paper); }
.page-masthead { border-bottom: 2px solid var(--ink); }
.page-brand { text-decoration: none; }
.page-brand-shape { background: var(--red); border-radius: 50%; }
.page-menu > summary { background: var(--ink); color: var(--paper); list-style: none; }
.page-menu > summary::-webkit-details-marker { display: none; }
.page-menu-mark { font-size: 24px; line-height: 1; }
.page-menu[open] .page-menu-mark { transform: rotate(45deg); }
.page-menu-grid { background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--yellow); }
.page-menu-group summary { border-bottom: 1px solid var(--line); font-weight: 700; }
.page-menu-group a { text-decoration: none; border-bottom: 1px solid var(--line); }
.page-menu-group a:hover, .page-menu-group a[aria-current="page"] { background: var(--yellow); }
.page-type-panel { background: var(--yellow); color: var(--ink); }
.page-type-circle { background: var(--blue); }
.page-margin { border-top: 8px solid var(--accent); }
.page-margin dt { color: var(--ink); }
.page-section, .page-evidence, .page-comparison { border-top: 1px solid var(--line); }
.page-reading-link { color: var(--ink); background: var(--yellow); border-left: 8px solid var(--blue); text-decoration: none; }
.page-reading-link:hover .page-reading-label { text-decoration: underline; text-underline-offset: .2em; }
.page-evidence-card { border: 1px solid var(--ink); background: #fffdf7; }
.page-evidence-card a { text-decoration: none; }
.page-evidence-card a:hover { background: var(--yellow); }
.page-next a { background: var(--accent); color: var(--accent-text); text-decoration: none; }
.page-next a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.page-footer { border-top: 2px solid var(--ink); }
.page-skip { color: var(--paper); background: var(--ink); }
.page-compare-controls button { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0; }
.page-compare-controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.page-compare-part { border-top: 1px solid var(--line); }
.page-compare-office { background: var(--yellow); color: var(--ink); }
.page-compare-remote { background: var(--blue); color: var(--paper); }
.page-emergency { background: var(--red); color: var(--paper); }
.page-next a:focus-visible, .page-compare-remote a:focus-visible, .page-menu > summary:focus-visible { outline-color: var(--red); }
@media (max-width: 760px) {
  .page-menu-grid { box-shadow: none; }
  .page-margin { background: #fffdf7; }
}
@media (forced-colors: active) {
  .page-brand-shape, .page-type-circle { border: 2px solid CanvasText; }
  .page-next a, .page-reading-link, .page-compare-controls button { border: 2px solid ButtonText; }
}
@media print {
  .page-type-panel { display: none; }
  .page-compare-columns > div { background: white; color: black; border: 1px solid black; }
}