/* Site chrome for /holiday-index/ only.
   John's Holiday AI Index page keeps its own stylesheet, wrapped in @layer hi by src/p_holiday.py. Everything here is
   unlayered, so it wins over his layer for the site header, the "About the index" section and the site footer, all of
   which sit inside .lhs. The rules are the site.css ones for those parts, scoped to .lhs, with .btn renamed .lbtn
   (his layer styles every .btn with !important, which an unlayered rule cannot beat). */

/* tokens: site.css :root values, scoped so they never touch his variables */
.lhs {
  --ground:#05052E; --sunken:#07073F; --card:#0B0B52; --elev:#10105F; --hover:#13136A; --bar:#1B1B70;
  --brand:#0A0A7E; --hair:#22227A; --strong:#6666B2;
  --t1:#F3F3FF; --t2:#BCBCE4; --t3:#9C9CCF;
  --gold:#FDD017; --on-gold:#0A0A7E; --line:#E4E4FF; --neg:#FF5C6C; --warn:#F5B25C;
  --shadow-pop:0 24px 60px rgba(2,2,24,.55), 0 2px 8px rgba(2,2,24,.35);
  --ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);
  --wrap:1200px; --gut:24px; --top:64px;
  color:var(--t1); font:400 17px/1.6 var(--ui); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
:root[data-theme="light"] .lhs {
  --ground:#F7F7FC; --sunken:#EEEFF8; --card:#FFFFFF; --elev:#FFFFFF; --hover:#EEF0FA; --bar:#D3D7EF;
  --hair:#DCDEEE; --strong:#8487B4; --t1:#12123A; --t2:#3F4170; --t3:#5E6188; --line:#0A0A7E; --neg:#B81F33; --warn:#806200;
  --shadow-pop:0 24px 60px rgba(20,20,60,.16), 0 2px 8px rgba(20,20,60,.08);
}
.lhs .navy {
  --ground:#05052E; --sunken:#07073F; --card:#0B0B52; --elev:#10105F; --hover:#13136A;
  --hair:#22227A; --strong:#6666B2; --t1:#F3F3FF; --t2:#BCBCE4; --t3:#9C9CCF; --line:#E4E4FF; --neg:#FF5C6C;
  background:var(--ground); color:var(--t1);
}
@media (max-width:640px) { .lhs { --gut:16px; font-size:16px; } }

/* undo his element and class rules inside the chrome (svg keeps its presentation attributes) */
.lhs :where(:not(svg):not(svg *)) { all:revert; box-sizing:border-box; }
.lhs [hidden] { display:none; }
.lhs img, .lhs svg { display:block; max-width:100%; }
.lhs a { color:inherit; text-decoration-color:var(--strong); text-underline-offset:3px; text-decoration-thickness:1px; }
.lhs a:hover { text-decoration-color:currentColor; }
.lhs button { font:inherit; color:inherit; }
.lhs :focus-visible { outline:2px solid var(--line); outline-offset:3px; border-radius:4px; }
.lhs p { margin:0 0 1em; }
.lhs h2, .lhs h4 { margin:0; font-weight:600; color:var(--t1); text-wrap:balance; }
.lhs .sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lhs .skip { position:absolute; left:-9999px; top:8px; z-index:200; background:var(--card); padding:8px 14px; border-radius:8px; }
.lhs .skip:focus { left:12px; }
.lhs .wrap { display:block; width:100%; max-width:calc(var(--wrap) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }

/* buttons */
.lhs .lbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border-radius:10px; font:600 16px/1 var(--ui); text-decoration:none; cursor:pointer; border:1px solid var(--strong); background:transparent; color:var(--t1); transition:background .18s var(--ease), border-color .18s var(--ease); white-space:nowrap; }
.lhs .lbtn:hover { background:var(--hover); border-color:var(--t3); }
.lhs .lbtn-gold { background:var(--gold); color:var(--on-gold); border-color:var(--gold); }
.lhs .lbtn-gold:hover { background:#FFDD45; border-color:#FFDD45; }
.lhs .lbtn-white { background:#fff; color:#0A0A7E; border-color:#fff; }
.lhs .lbtn-white:hover { background:#E9E9FF; border-color:#E9E9FF; }
.lhs .lbtn-sm { min-height:38px; padding:0 14px; font-size:15px; border-radius:9px; }
.lhs .actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* header: the site's one header, not sticky on this page so his report bar can stick under it */
.lhs .hd { position:relative; z-index:60; height:var(--top); background:var(--brand); color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.lhs .hd .wrap { height:100%; display:flex; align-items:center; gap:20px; }
.lhs .hd-logo { display:flex; align-items:center; text-decoration:none; color:#fff; height:40px; padding:0 4px; margin-left:-4px; border-radius:8px; flex:none; }
.lhs .hd-logo .tb-anim { position:relative; display:block; height:24px; flex:none; overflow:visible; width:177px; }
.lhs .hd-logo .tb-anim svg { position:absolute; left:0; top:0; overflow:visible; max-width:none; }
.lhs .hd-nav { display:flex; align-items:center; gap:2px; margin-left:12px; height:100%; }
.lhs .hd-nav > .ni { position:relative; height:100%; display:flex; align-items:center; }
.lhs .hd-nav .nb { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:8px; background:none; border:0; color:#E4E4FF; font:500 15px/1 var(--ui); text-decoration:none; cursor:pointer; }
.lhs .hd-nav .nb:hover, .lhs .hd-nav .ni.open .nb, .lhs .hd-nav .nb[aria-current="page"] { background:rgba(255,255,255,.1); color:#fff; }
.lhs .hd-nav .nb svg { width:12px; height:12px; transition:transform .2s var(--ease); }
.lhs .hd-nav .ni.open .nb svg { transform:rotate(180deg); }
.lhs .hd-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.lhs .hd-right .signin { color:#E4E4FF; text-decoration:none; font:500 15px/1 var(--ui); padding:10px 12px; border-radius:8px; }
.lhs .hd-right .signin:hover { background:rgba(255,255,255,.1); color:#fff; }
.lhs .icon-btn { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:none; border:0; color:#E4E4FF; cursor:pointer; padding:0; }
.lhs .icon-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.lhs .icon-btn svg { width:18px; height:18px; }
.lhs .menu-btn { display:none; }
.lhs .mega { position:absolute; top:calc(100% - 4px); left:-12px; min-width:560px; background:var(--elev); color:var(--t1); border:1px solid var(--hair); border-radius:14px; box-shadow:var(--shadow-pop); padding:10px; display:none; z-index:70; }
.lhs .ni.open .mega { display:grid; animation:lhsMegaIn .22s var(--ease); }
@keyframes lhsMegaIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.lhs .mega.m2 { grid-template-columns:1fr 1fr; gap:2px 8px; min-width:620px; }
.lhs .mega.m1 { min-width:300px; }
.lhs .mega a { display:block; padding:10px 12px; border-radius:9px; text-decoration:none; }
.lhs .mega a:hover, .lhs .mega a:focus-visible { background:var(--hover); }
.lhs .mega a b { display:block; font:600 15px/1.35 var(--ui); }
.lhs .mega a span { display:block; font:400 14px/1.4 var(--ui); color:var(--t3); margin-top:2px; }
.lhs .mega .mfoot { grid-column:1/-1; border-top:1px solid var(--hair); margin-top:6px; padding:10px 12px 4px; font-size:14px; color:var(--t3); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lhs .mega .mfoot a { display:inline; padding:0; color:var(--t1); font-weight:600; }
.lhs .mega .mfoot a:hover { background:none; text-decoration:underline; }
.lhs .sheet { position:fixed; inset:var(--top) 0 0 0; z-index:59; background:var(--ground); overflow:auto; padding:16px var(--gut) 40px; display:none; }
.lhs .sheet.open { display:block; }
.lhs .sheet details { display:block; border-bottom:1px solid var(--hair); }
.lhs .sheet summary, .lhs .sheet > a { display:flex; justify-content:space-between; align-items:center; padding:16px 0; font:600 19px/1.3 var(--ui); text-decoration:none; cursor:pointer; list-style:none; }
.lhs .sheet summary::-webkit-details-marker { display:none; }
.lhs .sheet summary svg { width:12px; height:12px; }
.lhs .sheet > a { border-bottom:1px solid var(--hair); }
.lhs .sheet details a { display:block; padding:10px 0 10px 4px; text-decoration:none; color:var(--t2); font-size:16px; }
.lhs .sheet details > div { padding-bottom:12px; }
.lhs .sheet .actions { margin-top:24px; }
@media (max-width:1060px) {
  .lhs .hd-nav, .lhs .hd-right .signin, .lhs .hd-right .hd-cta { display:none; }
  .lhs .menu-btn { display:grid; }
}
@media (max-width:340px) { .lhs .hd-logo .tb-anim { width:24px; overflow:hidden; } }

/* About the index: breadcrumbs, the answer-first block and the deck download, under his report */
.lhs .hi-about { background:var(--ground); padding:clamp(48px, 6vw, 80px) 0; border-top:1px solid var(--hair); }
.lhs .crumbs { display:flex; flex-wrap:wrap; gap:6px; font-size:14px; color:var(--t3); margin:0 0 20px; padding:0; list-style:none; }
.lhs .crumbs li + li::before { content:'/'; margin-right:6px; color:var(--strong); }
.lhs .crumbs a { color:var(--t3); text-decoration:none; }
.lhs .crumbs a:hover { color:var(--t1); text-decoration:underline; }
.lhs .kicker { display:inline-block; font:500 15px/1.4 var(--ui); color:var(--t3); margin-bottom:14px; }
.lhs .hi-about h2 { font-size:clamp(28px, 3.3vw, 42px); line-height:1.12; letter-spacing:-0.015em; max-width:22ch; }
.lhs .hi-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 5vw, 72px); align-items:start; margin-top:32px; }
@media (max-width:900px) { .lhs .hi-grid { grid-template-columns:minmax(0,1fr); } }
.lhs .answer { background:var(--card); border:1px solid var(--hair); border-radius:14px; padding:22px 24px; max-width:820px; }
.lhs .answer .q { font:600 15px/1.4 var(--ui); color:var(--t3); margin:0 0 8px; }
.lhs .answer p { margin:0; font-size:18px; line-height:1.6; color:var(--t1); }
.lhs .answer p + p { margin-top:10px; font-size:16px; color:var(--t2); }
.lhs .hi-side { display:grid; gap:14px; color:var(--t2); font-size:16px; }
.lhs .hi-side h3 { margin:0; font:600 17px/1.4 var(--ui); color:var(--t1); }
.lhs .hi-side p { margin:0; }
.lhs .hi-side .note { font-size:14px; color:var(--t3); }
.lhs .hi-side .actions { margin-top:6px; }

/* footer: a div with role=contentinfo here, because his layer hides every <footer> except his own */
.lhs .ft { display:block; background:#05052E; color:#BCBCE4; padding:72px 0 32px; margin-top:0; }
.lhs .ft a { color:#BCBCE4; text-decoration:none; }
.lhs .ft a:hover { color:#fff; text-decoration:underline; }
.lhs .ft-top { display:grid; grid-template-columns:1.4fr repeat(5, 1fr); gap:32px; }
.lhs .ft h4 { color:#F3F3FF; font-size:15px; margin-bottom:14px; }
.lhs .ft ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:15px; }
.lhs .ft-brand p { font-size:15px; max-width:30ch; margin-top:16px; }
.lhs .ft-mid { display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap; border-top:1px solid #22227A; margin-top:56px; padding-top:32px; }
.lhs .ft-line { font:600 clamp(24px, 3vw, 36px)/1.15 var(--ui); color:#F3F3FF; letter-spacing:-0.015em; max-width:22ch; margin:0; }
.lhs .ft-news { min-width:min(420px, 100%); }
.lhs .ft-news label { display:block; font-size:14px; margin-bottom:8px; }
.lhs .inline-form { display:flex; gap:8px; max-width:560px; }
.lhs .err { color:#FF5C6C; font-size:14px; margin-top:8px; }
.lhs .form-done { font-weight:600; color:#F3F3FF; margin:0; }
.lhs .ft-bot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; font-size:14px; color:#9C9CCF; }
.lhs .ft-bot nav { display:flex; gap:18px; flex-wrap:wrap; }
@media (max-width:1000px) { .lhs .ft-top { grid-template-columns:1fr 1fr 1fr; } .lhs .ft-brand { grid-column:1/-1; } }
@media (max-width:560px) { .lhs .ft-top { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .lhs .inline-form { flex-direction:column; } }
/* the newsletter field: his layer styles every input[type=email] with !important, so the site look is set inline in the
   markup (inline !important outranks any layer); these are the parts his rules do not force */
.lhs .ft-news input { flex:1; min-width:0; width:100%; min-height:48px; padding:12px 14px; font:400 16px/1.4 var(--ui); color:#F3F3FF; }
.lhs .ft-news input::placeholder { color:#9C9CCF; }

/* toast (site.js) */
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#10105F; color:#F3F3FF; border:1px solid #22227A; padding:12px 18px; border-radius:10px; font:400 15px/1.4 'IBM Plex Sans',system-ui,sans-serif; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:120; max-width:calc(100vw - 32px); }
.toast.on { opacity:1; transform:translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .lhs .ni.open .mega { animation:none; } }