/* CATwaale.in site chrome and content components. Loaded after base.css. */
a{color:inherit}
.container{max-width:1180px; margin:0 auto; padding:0 18px}
.skip{position:absolute; left:-999px; top:8px; background:var(--hi); color:var(--on-hi); padding:8px 12px; border-radius:6px; z-index:200}
.skip:focus{left:8px}

/* header */
.site-header{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1.5px solid var(--ink)}
.site-header .container{display:flex; align-items:center; gap:14px; min-height:64px}
.wordmark{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; margin-right:auto}
.wordmark img{width:38px; height:38px; display:block}
.wordmark mark{background:var(--hi); color:var(--on-hi); padding:0 4px; border-radius:4px; margin-right:1px}
.nav{display:none; gap:2px}
.nav a{text-decoration:none; font-weight:600; font-size:.93rem; padding:8px 11px; border-radius:8px; color:var(--muted)}
.nav a:hover{color:var(--ink); background:var(--hi-soft)}
.nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -3px 0 var(--hi)}
.nav-cta{display:none}
.menu-btn{border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); border-radius:8px; min-height:42px; padding:6px 12px; font-weight:700}
.mobile-nav{display:none; border-top:1px solid var(--line); padding:8px 18px 14px}
.mobile-nav a{display:block; padding:10px 4px; text-decoration:none; font-weight:600; border-bottom:1px dashed var(--line)}
body.nav-open .mobile-nav{display:block}
@media(min-width:1000px){
  .nav{display:flex} .nav-cta{display:inline-flex} .menu-btn{display:none}
  body.nav-open .mobile-nav{display:none}
}
a.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none}

/* page hero */
.page-hero{padding:48px 0 26px}
.page-hero h1{font-size:clamp(2.3rem,6.5vw,3.8rem); font-weight:800; max-width:16ch}
.page-hero p.intro{font-size:1.12rem; max-width:40em; margin-top:16px; color:var(--muted)}
.eyebrow{display:inline-block; font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; background:var(--hi); color:var(--on-hi); padding:3px 9px; border-radius:5px; border:1.5px solid var(--ink); margin-bottom:16px}
.hl{background:linear-gradient(transparent 58%,var(--hi) 58%,var(--hi) 92%,transparent 92%); padding:0 .08em}

/* home hero */
.home-hero{display:grid; gap:36px; padding:56px 0 40px; align-items:center}
.home-hero h1{font-size:clamp(2.7rem,8vw,5rem); font-weight:800; letter-spacing:-.03em}
.home-hero .intro{font-size:1.15rem; max-width:34em; margin:20px 0 26px}
.cta-row{display:flex; flex-wrap:wrap; gap:10px}
@media(min-width:920px){.home-hero{grid-template-columns:1.15fr 1fr}}
.countdown{background:var(--surface); border:1.5px solid var(--ink); border-radius:14px; padding:22px; box-shadow:8px 8px 0 var(--ink)}
.countdown h2{font-size:1.05rem; color:var(--muted); font-family:var(--sans); font-weight:600}
.cd-nums{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0 18px}
.cd-nums div{background:var(--hi); color:var(--on-hi); border:1.5px solid var(--ink); border-radius:10px; text-align:center; padding:10px 4px}
.cd-nums b{display:block; font-family:var(--display); font-size:clamp(1.6rem,5vw,2.3rem); line-height:1; font-variant-numeric:tabular-nums}
.cd-nums span{font-size:.75rem; font-weight:600}
.cd-meta{display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:.9rem}
.cd-meta div{border-top:1px dashed var(--line); padding-top:8px}
.cd-meta b{display:block; font-family:var(--display); font-size:1.15rem}

/* sections and panels */
.block{padding:34px 0}
.block > h2, .block-head h2{font-size:clamp(1.6rem,4vw,2.3rem); font-weight:800; margin-bottom:8px}
.block-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:12px; margin-bottom:20px}
.block-head p{color:var(--muted); max-width:40em; margin:0}
.cols{display:grid; gap:16px}
@media(min-width:720px){.cols.two{grid-template-columns:1fr 1fr} .cols.three{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cols.three{grid-template-columns:repeat(3,1fr)} .cols.four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:620px) and (max-width:999px){.cols.four{grid-template-columns:repeat(2,1fr)}}
.panel{background:var(--surface); border:1.5px solid var(--ink); border-radius:12px; padding:20px 22px; min-width:0}
.panel.soft{border-color:var(--line)}
.panel.sun{background:var(--hi); color:var(--on-hi)}
.panel h3{font-size:1.25rem; margin-bottom:8px}
.panel p:last-child{margin-bottom:0}
.panel.link{text-decoration:none; display:flex; flex-direction:column; transition:transform .12s ease, box-shadow .12s ease}
.panel.link:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink)}
.panel.link .go{margin-top:auto; padding-top:14px; font-weight:700}
.icon{width:44px; height:44px; border-radius:10px; border:1.5px solid var(--ink); background:var(--hi); color:var(--on-hi); display:grid; place-items:center; margin-bottom:14px}
.icon svg{width:24px; height:24px}
@media (prefers-reduced-motion:reduce){.panel.link{transition:none}}

.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(min-width:800px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface); border:1.5px solid var(--ink); border-radius:12px; padding:16px}
.kpi b{display:block; font-family:var(--display); font-size:2rem; line-height:1.05}
.kpi span{color:var(--muted); font-size:.9rem}

.pill{display:inline-block; font-size:.78rem; font-weight:700; padding:2px 9px; border-radius:99px; border:1.5px solid var(--ink); background:var(--surface)}
.pill.sun{background:var(--hi); color:var(--on-hi)}
.pill.ok{background:var(--ok); color:var(--on-ok); border-color:var(--ok)}
.pill.bad{background:var(--bad); color:#fff; border-color:var(--bad)}
.pill.mute{border-color:var(--line); color:var(--muted)}

/* tables */
.table-wrap{overflow-x:auto; border:1.5px solid var(--ink); border-radius:12px; background:var(--surface)}
.dtable{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.95rem}
.dtable th,.dtable td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.dtable thead th{background:var(--hi-soft); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0}
.dtable td.num,.dtable th.num{text-align:right}

/* prose */
.prose{max-width:46em}
.prose h2{font-size:1.7rem; margin:34px 0 12px}
.prose h3{font-size:1.2rem; margin:22px 0 8px}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin-bottom:8px}
.note{border-left:5px solid var(--hi); background:var(--surface); border-radius:0 10px 10px 0; padding:12px 16px; font-size:.95rem; margin:16px 0}
.note.warn{border-left-color:var(--bad)}
.toc{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px}
.toc a{font-weight:600; font-size:.9rem; text-decoration:none; border:1.5px solid var(--line); border-radius:99px; padding:5px 12px; background:var(--surface)}
.toc a:hover{border-color:var(--ink)}

/* timeline */
.timeline{list-style:none; padding:0; margin:0; border-left:3px solid var(--ink); margin-left:8px}
.timeline li{position:relative; padding:0 0 18px 22px}
.timeline li::before{content:""; position:absolute; left:-10px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--hi); border:2px solid var(--ink)}
.timeline b{font-family:var(--display); display:block; font-size:1.05rem}
.timeline span{color:var(--muted); font-size:.92rem}

/* forms (calculator) */
.field{display:grid; gap:6px; margin-bottom:14px}
.field label,.field legend{font-weight:600; font-size:.92rem}
.field small{color:var(--muted); font-size:.82rem}
.input,select.input{font:inherit; width:100%; padding:10px 12px; border:1.5px solid var(--ink); border-radius:8px; background:var(--surface); color:var(--ink); min-height:44px}
.field-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.seg{display:flex; flex-wrap:wrap; gap:6px; border:0; padding:0; margin:0 0 14px}
.seg legend{width:100%; margin-bottom:6px}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; margin:0}
.seg span{display:inline-block; padding:7px 12px; border:1.5px solid var(--line); border-radius:8px; font-weight:600; font-size:.9rem; background:var(--surface); cursor:pointer}
.seg input:checked + span{background:var(--btn); color:var(--on-btn); border-color:var(--btn)}
.seg input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.tabset{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px}
.tabset button{border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); border-radius:8px; padding:9px 16px; font-weight:700; min-height:44px}
.tabset button[aria-selected="true"]{background:var(--hi); color:var(--on-hi)}
.big-num{font-family:var(--display); font-weight:800; font-size:clamp(3.4rem,12vw,5.4rem); line-height:1}
.meter{height:12px; border-radius:6px; background:var(--line); overflow:hidden; margin-top:6px}
.meter i{display:block; height:100%; background:var(--ok); border-radius:6px}
.meter.mid i{background:#e8a317}
.meter.low i{background:var(--bad)}
.chance-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.chance-list li{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.chance-top{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.chance-top b{font-family:var(--display); font-size:1.05rem; margin-right:auto}
.chance-list small{color:var(--muted)}

/* practice questions */
.pq{background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:14px}
.pq-head{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px}
.pq-head b{font-family:var(--display); margin-right:auto}
.pq ol{margin:6px 0 10px; padding-left:1.4em}
.pq details{margin-top:6px}
.pq summary{cursor:pointer; font-weight:700}
.pq .sol{background:var(--hi-soft); border-radius:8px; padding:10px 12px; margin-top:8px; font-size:.95rem}
.year-card .meta{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin:12px 0; font-size:.9rem}
.year-card .meta b{display:block; font-family:var(--display); font-size:1.1rem}
.year-card .meta span{color:var(--muted)}
.year-card h3{display:flex; align-items:center; gap:10px; font-size:1.6rem}

/* footer */
.site-footer{margin-top:50px; border-top:1.5px solid var(--ink); background:var(--surface)}
.site-footer .container{display:grid; gap:24px; padding:30px 18px}
@media(min-width:820px){.site-footer .container{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h3{font-size:1rem; margin-bottom:10px}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.site-footer a{text-decoration:none; color:var(--muted)}
.site-footer a:hover{color:var(--ink); text-decoration:underline}
.site-footer .fine{margin-top:10px}