/* Code library (technician pages) */
.lib { padding: 24px 0 56px; }
.lib .wrap { max-width: 900px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs span[aria-current] { color: var(--text); }

.lib-search { display: flex; gap: 8px; margin-bottom: 24px; }
.lib-search input { flex: 1; min-width: 0; }

.lib h1 { font-size: 30px; line-height: 1.25; color: var(--navy); margin: 0 0 10px; }
.lead-sm { color: var(--muted); margin: 0 0 20px; }
.muted { color: var(--muted); font-size: 14px; }
h2.sec { font-size: 22px; color: var(--navy); margin: 36px 0 12px; }

.code-head { margin-bottom: 18px; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 6px; }
.code-page h1 { font-size: 28px; }
.code-badge {
  display: inline-block; background: var(--navy); color: #fff; border-radius: 8px; padding: 2px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; vertical-align: 2px; margin-right: 4px;
}
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.chip { display: inline-block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: #3a404b; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.sev { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sev-critical { background: #fdecea; color: #a1190f; }
.sev-high { background: #fff1e6; color: #a5470b; }
.sev-medium { background: #fff8e1; color: #7a5a00; }
.sev-low { background: #e6f4ea; color: #145a2a; }

.card-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.card-block h2 { font-size: 19px; color: var(--navy); margin: 0 0 10px; }
.card-block h3 { font-size: 18px; color: var(--navy); margin: 0 0 4px; }
.card-block p { margin: 0 0 8px; }
.applies-to { font-size: 15px; color: #3a404b; }

ul.causes { margin: 0; padding-left: 20px; }
ul.causes li { margin-bottom: 6px; }

ol.steps { margin: 0; padding-left: 0; list-style: none; counter-reset: step; }
ol.steps li { counter-increment: step; position: relative; padding: 10px 0 10px 44px; border-top: 1px solid var(--border); }
ol.steps li:first-child { border-top: 0; }
ol.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 9px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
ol.steps li.step-warn, ol.steps li.step-note { counter-increment: none; }
ol.steps li.step-warn { background: #fdecea; border-radius: 8px; border-top: 0; margin: 6px 0; padding-right: 12px; }
ol.steps li.step-warn::before { content: "!"; background: #d93025; color: #fff; }
ol.steps li.step-note { background: var(--bg-alt); border-radius: 8px; border-top: 0; margin: 6px 0; padding-right: 12px; }
ol.steps li.step-note::before { content: "i"; }
.applies { display: inline-block; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-right: 4px; }

.link-list { margin: 0; padding-left: 20px; }
.link-list li { margin-bottom: 4px; }

.app-cta { display: flex; gap: 20px; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px 22px; margin: 20px 0; }
.app-cta h2 { color: #fff; font-size: 19px; margin: 0 0 4px; }
.app-cta p { color: #d6dcf0; margin: 0; font-size: 15px; }
.app-cta .btn { background: #fff; color: var(--navy); border-color: #fff; flex-shrink: 0; }

.source { font-size: 14px; color: var(--muted); }
.homeowner { font-size: 15px; background: var(--blue-soft); border-radius: 10px; padding: 12px 16px; }
.safety { font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 24px; }

.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 15px; }
.pager a { text-decoration: none; font-weight: 600; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; margin: 8px 0 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--bg-alt); font-size: 13px; color: var(--muted); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.codes-table td:first-child { white-space: nowrap; }
.code-link { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; text-decoration: none; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-decoration: none; color: var(--text); }
.tile:hover { border-color: var(--blue); }
.tile strong { color: var(--navy); font-size: 17px; }
.tile span { color: var(--muted); font-size: 14px; }

.results { display: grid; gap: 8px; }
.result { display: block; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); background: #fff; }
.result:hover { border-color: var(--blue); }
.result strong { color: var(--navy); }
.result small { display: block; color: var(--muted); }

/* Make bulk copying a little harder (text stays readable and searchable). */
.code-page .card-block, .codes-table { -webkit-user-select: none; user-select: none; }

@media (max-width: 640px) {
  .lib h1, .code-page h1 { font-size: 24px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .app-cta { flex-direction: column; align-items: flex-start; }
  .card-block { padding: 16px; }
  .lib-search .btn { padding: 12px 14px; }
}

/* ===== Aurora accent for code pages ===== */
.code-head {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; border-radius: var(--radius);
  padding: 26px 24px; background: #0a1230;
}
.code-head::before, .code-head::after {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%; filter: blur(60px); opacity: .85;
}
.code-head::before { background: radial-gradient(circle, #e8501c, transparent 62%); left: -140px; top: -200px; animation: cdrift1 14s ease-in-out infinite alternate; }
.code-head::after { background: radial-gradient(circle, #1565c0, transparent 62%); right: -120px; bottom: -220px; animation: cdrift2 18s ease-in-out infinite alternate; }
@keyframes cdrift1 { to { transform: translate(180px, 90px) scale(1.2); } }
@keyframes cdrift2 { to { transform: translate(-200px, -60px) scale(1.1); } }
.code-head h1, .code-head .lead-sm { color: #fff; }
.code-head .eyebrow { color: #ffb48a; }
.code-head .chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.code-head .code-badge { background: linear-gradient(135deg, #e8501c, #ff7a3d); }
.tile { transition: transform .2s ease, box-shadow .2s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(20,35,92,.4); }
.card-block { transition: box-shadow .25s ease; }
.card-block:hover { box-shadow: 0 14px 34px -22px rgba(20,35,92,.35); }
@media (prefers-reduced-motion: reduce) { .code-head::before, .code-head::after { animation: none; } }

/* ===== v3: library banner + effects ===== */
main.lib { padding-top: 0; position: relative; }
.lib-hero { position: relative; isolation: isolate; overflow: hidden; background: #0a1230; color: #fff; padding: 34px 0 44px; margin-bottom: 30px; }
.lib-hero .aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lib-hero .aurora i { position: absolute; width: 52vmax; height: 52vmax; border-radius: 50%; filter: blur(64px); mix-blend-mode: screen; opacity: .85; will-change: transform; }
.lib-hero .aurora i:nth-child(1) { background: radial-gradient(circle, #e8501c, transparent 62%); left: -16vmax; top: -26vmax; animation: drift1 16s ease-in-out infinite alternate; }
.lib-hero .aurora i:nth-child(2) { background: radial-gradient(circle, #1565c0, transparent 62%); right: -18vmax; top: -20vmax; animation: drift2 20s ease-in-out infinite alternate; }
.lib-hero .aurora i:nth-child(3) { background: radial-gradient(circle, #ff7a3d, transparent 60%); left: 35%; bottom: -34vmax; opacity: .5; animation: drift3 24s ease-in-out infinite alternate; }
.lib-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.lib-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,.13), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 84px);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.lib-hero h1 { color: #fff; font-size: clamp(32px, 5.4vw, 56px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; margin: 6px 0 10px;
  background: linear-gradient(100deg, #fff 30%, #ffb48a 55%, #8ec2ff 85%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 9s linear infinite; }
.lib-hero .lead-sm { color: rgba(255,255,255,.8); font-size: 18px; max-width: 640px; margin: 0; }
.lib-hero .crumbs, .lib-hero .crumbs a { color: rgba(255,255,255,.68); }
.lib-hero .crumbs span[aria-current] { color: #fff; }
.lib-hero .lib-search { margin: 14px 0 26px; max-width: 720px; }
.lib-hero .lib-search input { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; padding: 14px 16px; border-radius: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, box-shadow .25s, border-color .25s; }
.lib-hero .lib-search input::placeholder { color: rgba(255,255,255,.6); }
.lib-hero .lib-search input:focus { outline: none; background: rgba(255,255,255,.18); border-color: #ff9d6c; box-shadow: 0 0 0 4px rgba(255,122,61,.28), 0 0 30px -4px rgba(255,122,61,.6); }
.lib-hero .lib-search .btn { background: linear-gradient(135deg, #e8501c, #ff7a3d); border-color: transparent; box-shadow: 0 10px 26px -8px rgba(232,80,28,.75); }
/* pages with no banner (code pages): search stays plain */

/* tiles */
.tile { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 18px; border-radius: 14px; }
.tile .mono { grid-row: span 2; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, #1565c0, #e8501c); box-shadow: 0 8px 20px -8px rgba(21,101,192,.7); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.tile:hover .mono { transform: scale(1.1) rotate(-8deg); }
.tile strong, .tile span { grid-column: 2; }
.tile .bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: #eef1f6; margin-top: 14px; overflow: hidden; }
.tile .bar u { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; border-radius: inherit; background: linear-gradient(90deg, #e8501c, #ff7a3d, #1565c0); transition: transform 1.2s cubic-bezier(.22,1,.36,1) .25s; }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,122,61,.16), rgba(21,101,192,.09) 45%, transparent 70%); }
.tile:hover::after { opacity: 1; }
.tile:hover { border-color: transparent; box-shadow: 0 20px 44px -20px rgba(20,35,92,.5), 0 0 0 1px rgba(255,122,61,.55); translate: 0 -3px; }

/* tables */
.codes-table tbody tr { transition: background .2s, box-shadow .2s; }
.codes-table tbody tr:hover { background: linear-gradient(90deg, rgba(255,122,61,.1), rgba(21,101,192,.06)); box-shadow: inset 3px 0 0 #e8501c; }
.code-link { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.sev-critical { animation: sevp 2.4s infinite; }
@keyframes sevp { 0% { box-shadow: 0 0 0 0 rgba(200,40,28,.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(200,40,28,0); } }

/* code detail page */
.code-head .code-badge { animation: glow 3.2s ease-in-out infinite; }
@keyframes glow { 50% { text-shadow: 0 0 16px rgba(255,255,255,.85); box-shadow: 0 0 26px -2px rgba(255,122,61,.8); } }
.card-block { position: relative; overflow: hidden; }
.card-block::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,122,61,.08), transparent 70%); }
.card-block:hover::after { opacity: 1; }
ol.steps li::before { transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s; }
ol.steps li:hover::before { transform: scale(1.18); background: linear-gradient(135deg, #e8501c, #ff7a3d); color: #fff; }
.app-cta { background: linear-gradient(135deg, #14235c, #0d4c9a, #8a3a12, #14235c); background-size: 300% 300%; animation: flow 14s ease infinite; position: relative; overflow: hidden; }
.app-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px circle at var(--mx, 80%) var(--my, 50%), rgba(255,255,255,.12), transparent 70%); }
.chip { transition: transform .2s, background .2s, border-color .2s; }
.chip:hover { transform: translateY(-2px); border-color: #ff9d6c; background: #fff4ec; }

@media (max-width: 640px) { .lib-hero { padding: 24px 0 32px; } .tile { padding: 14px; } .tile .mono { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .lib-hero .aurora i, .lib-hero h1, .sev-critical, .code-badge, .app-cta { animation: none !important; } }
.lib > .wrap:first-child { padding-top: 24px; }

/* v4: code page extras + parts catalog */
.card-block h3 .muted { font-weight: 400; }
ul.near-codes { list-style: none; padding: 0; margin: 0; }
ul.near-codes li { padding: 6px 0; border-top: 1px solid var(--border); }
ul.near-codes li:first-child { border-top: 0; }
.parts-table td:nth-child(2) { white-space: nowrap; }
.parts-table td.fits { font-size: 13px; color: #3a404b; max-width: 320px; }
.parts-table tbody tr, .parts-table tr { transition: background .2s, box-shadow .2s; }
.parts-table tr:hover td { background: linear-gradient(90deg, rgba(255,122,61,.08), rgba(21,101,192,.05)); }
.parts .chips .chip { text-decoration: none; }
.parts .card-block, .parts-table { -webkit-user-select: none; user-select: none; }

/* Site-wide search page */
.site-search { display: flex; gap: 8px; margin-bottom: 14px; }
.site-search input { flex: 1; min-width: 0; font-size: 18px; }
.sfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sfilters button { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.sfilters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.sresult { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); background: #fff; }
.sresult:hover { border-color: var(--blue); }
.sresult strong { display: block; color: var(--navy); }
.sresult small { display: block; color: var(--muted); margin-top: 2px; }
.sresult .tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 600; }
.smore { margin-top: 12px; }