/* CYS servo site - shared stylesheet. Extracted from per-page inline CSS 2026-09-15; keep in sync across all pages. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#1f2933;background:#fff;line-height:1.5}
.topbar{background:#0f1b2d;color:#c9d6e3;font-size:13px;padding:8px 0}
.topbar .wrap{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e4e7eb;z-index:100}
.nav{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:22px}
.logo{font-size:20px;font-weight:700;color:#0f1b2d;letter-spacing:.5px}
.logo span{color:#0f6ecd}
.nav-item{position:relative;font-size:14px;color:#3e4c59;cursor:pointer;padding:6px 0}
.nav-item:hover{color:#0f6ecd}
.nav-item > a{color:inherit;text-decoration:none}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid #e4e7eb;border-radius:8px;box-shadow:0 8px 24px rgba(15,27,45,.12);min-width:230px;padding:8px;z-index:200}
.nav-item:hover .dropdown{display:block}
.dropdown div{padding:9px 12px;font-size:13px;border-radius:6px}
.dropdown div:hover{background:#e6f0fb;color:#0f6ecd}
.dropdown a{display:block;padding:9px 12px;font-size:13px;border-radius:6px;color:#3e4c59;text-decoration:none}
.dropdown a:hover{background:#e6f0fb;color:#0f6ecd}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.search-wrap{position:relative}
.search-box{border:1px solid #cbd2d9;border-radius:6px;padding:7px 12px;width:210px;font-size:13px}
#search-results{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #e4e7eb;border-radius:8px;box-shadow:0 8px 24px rgba(15,27,45,.15);width:340px;max-height:380px;overflow:auto;z-index:300}
#search-results .sr-item{padding:10px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid #f0f4f8}
#search-results .sr-item:hover{background:#e6f0fb}
#search-results .sr-code{font-weight:700;color:#0f1b2d}
#search-results .sr-meta{color:#7b8794;font-size:12px;margin-top:2px}
#search-results .sr-empty{padding:14px;color:#9aa5b1;font-size:13px}
.btn{display:inline-block;border:none;border-radius:6px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-primary{background:#0f6ecd;color:#fff}
.btn-primary:hover{background:#0b5cb0}
.btn-outline{background:#fff;color:#0f6ecd;border:1px solid #0f6ecd}
.btn-outline:hover{background:#e6f0fb}
.cta h2{font-size:26px;margin-bottom:10px;color:#fff}
.foot{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot h4{color:#fff;font-size:14px;margin-bottom:14px}
.foot p,.foot div{font-size:13px;margin-bottom:8px}
.foot-links a{display:block;color:#9fb3c8;font-size:13px;margin-bottom:8px;text-decoration:none}
.foot-links a:hover{color:#fff}

/* ---- narrow-screen navigation fixes (rolled out site-wide 2026-09-15) ---- */
:root{--nav-h:68px}
.nav{flex-wrap:wrap;row-gap:8px}
#search-results{width:min(340px,calc(100vw - 32px))}
.nav-item.open>.dropdown{display:block}
.dd-toggle{display:none;align-items:center;justify-content:center;width:26px;height:26px;margin-left:6px;padding:0;border:0;border-radius:6px;background:none;color:inherit;font-size:10px;line-height:1;cursor:pointer;vertical-align:middle}
.dd-toggle:hover{background:#eef3f9}
@media(hover:none){.nav-item>.dd-toggle{display:inline-flex}}
.nav-item.open>.dd-toggle{background:#e6f0fb;color:#0f6ecd;transform:rotate(180deg)}
@media(min-width:961px) and (max-width:1100px){.nav{gap:14px}.search-box{width:140px}}
@media(max-width:960px){:root{--nav-h:99px}.nav{padding:10px 16px;gap:6px 16px}.nav-right{width:100%;margin-left:0;order:9;gap:10px}.search-box{flex:1 1 auto;width:auto;min-width:0}.dropdown{max-width:calc(100vw - 32px)}}
@media(max-width:600px){:root{--nav-h:82px}.nav{padding:8px 12px;gap:2px 10px}.nav-item{font-size:13px;padding:5px 0}}
@media(max-width:490px){:root{--nav-h:114px}}
@media(max-width:340px){:root{--nav-h:133px}}
@media(max-width:560px){.dd-toggle{width:18px;height:18px;margin-left:1px;font-size:9px}.nav-item{position:static}.dropdown{left:12px;right:12px;top:100%;min-width:0;max-width:none}.topbar{font-size:11px;padding:5px 0}.topbar .wrap{gap:4px 14px;padding:0 12px}}
/* Header search results are links (assets/search.js, 2026-09-20). */
#search-results .sr-item{display:block}
#search-results a.sr-item{text-decoration:none;color:inherit}
#search-results a.sr-item:focus-visible{outline:2px solid #0f6ecd;outline-offset:-2px;background:#e6f0fb}
#search-results .sr-code{display:block}
#search-results .sr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#search-results .sr-line{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#7b8794;white-space:nowrap}
#search-results .sr-empty a{display:inline-block;margin-top:8px;color:#0f6ecd;font-weight:600;text-decoration:underline}
/* Overflow row: the panel caps its results and scrolls, so the count and the way
   to the rest of them are pinned to the bottom of the panel instead of waiting
   below the fold the reader may never reach (assets/search.js). */
#search-results .sr-more{position:sticky;bottom:0;display:block;padding:10px 14px;font-size:12px;font-weight:600;color:#0f6ecd;background:#f4f8fc;border-top:1px solid #e4e7eb;text-decoration:none}
#search-results .sr-more:hover{background:#e6f0fb;text-decoration:underline}
#search-results .sr-more:focus-visible{outline:2px solid #0f6ecd;outline-offset:-2px;background:#e6f0fb}
/* Starter panel: shown when the search box is focused while empty, so a first-time
   visitor is told what the field accepts instead of having to guess a model code
   (assets/search.js). */
#search-results .sr-start{padding:12px 14px}
#search-results .sr-lead{margin:0 0 10px;font-size:12px;color:#7b8794;line-height:1.4}
#search-results .sr-chips{display:flex;flex-wrap:wrap;gap:6px}
#search-results .sr-chip{font-family:inherit;border:1px solid #cbd2d9;background:#fff;border-radius:999px;padding:5px 11px;font-size:12px;line-height:1.2;color:#0f1b2d;cursor:pointer}
#search-results .sr-chip:hover{border-color:#0f6ecd;background:#e6f0fb;color:#0a4f9e}
#search-results .sr-chip:focus-visible{outline:2px solid #0f6ecd;outline-offset:1px}
#search-results .sr-links{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:11px;border-top:1px solid #f0f4f8}
#search-results .sr-links a{font-size:13px;font-weight:600;color:#0f6ecd;text-decoration:none}
#search-results .sr-links a:hover{text-decoration:underline}
#search-results .sr-links a:focus-visible{outline:2px solid #0f6ecd;outline-offset:2px}
/* Row targeted by a #CODE deep link, added by assets/search.js on arrival. */
tr.sr-flash>td{animation:srflash 1.8s ease-out}
@keyframes srflash{0%,55%{background:#fff2c9}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){tr.sr-flash>td{animation:none;background:#fff2c9}}
/* Narrow screens: the search box sits at the LEFT of a full-width nav row, so the
   right-anchored panel used to hang off the left edge of the viewport (at 390px,
   198 of its 340px were off-screen). Anchor it to the box's left edge instead;
   the width cap above keeps it inside the viewport. Found 2026-09-20. */
@media(max-width:960px){#search-results{left:0;right:auto}}