/* Approved 8 Oct counter redesign; shared site chrome remains in site-chrome.css. */
.tl-calc{gap:24px}
.tl-calc>.tl-card{padding:30px}
.tl-card h2{font-size:24px}
.counter-calendar{display:inline-block;vertical-align:-4px;margin-right:6px}
.tl-calc .tl-fs:first-of-type{border:0;margin-top:18px;padding-top:0}
.tl-calc .tl-field label{font-size:13px;color:var(--muted)}
.tl-calc .tl-fs{margin-top:26px;padding-top:0;border:0}
.tl-calc .tl-fs legend{font-size:16px;margin-bottom:10px}
.tl-calc .tl-sub{font-size:14px}
.tl-res#result{padding:28px;min-height:0}
.tl-res:after{display:none}
#result>.tl-example-tag{position:absolute;top:7px;left:28px;font-size:10px;padding:1px 7px;margin:0}
#result>.tl-example-tag[hidden]{display:none!important}
#result #count-content{min-height:0}
.counter-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.counter-top .eyebrow{margin:0;font-size:12px;letter-spacing:.14em}
.counter-top .tl-state{margin:0;height:28px;padding:0 11px;gap:7px;font-size:13px;white-space:nowrap;background:#ffffff1f;box-shadow:inset 0 0 0 1px #ffffff33}
.counter-top .tl-state i{background:#9FE8C4!important;border-radius:50%!important;transform:none!important}
#counter-badge[data-warning=true] .tl-state i{background:#FFD27A!important}
.counter-g{position:relative;width:230px;height:230px;margin:14px auto 4px}
.rg{width:100%;height:100%;filter:drop-shadow(0 10px 18px rgba(3,8,20,.35))}
.rg-seg{fill:none;stroke-width:13;stroke-linecap:butt}
.rg-on{stroke:#fff}.rg-off{stroke:#ffffff30}.rg-over{stroke:#FFD27A}
@media(prefers-reduced-motion:no-preference){.rg-on,.rg-over{animation:counter-fill 160ms ease-out calc(var(--i)*9ms) both}}
@keyframes counter-fill{from{stroke:#ffffff30}}
.counter-centre{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.counter-centre .big{font-family:var(--display);font-weight:300;font-size:64px;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;color:var(--panel-text)}
.counter-centre .big--4{font-size:48px}
.counter-centre .lab{font-size:14px;color:var(--panel-muted);margin-top:4px}
.counter-centre .sub{font-size:12.5px;color:var(--panel-muted);margin-top:8px}
.counter-answer{text-align:center;margin-top:8px}
.counter-answer p{margin:0}
.counter-answer .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-accent)}
.counter-answer .v{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.03em;margin-top:4px;line-height:1.3}
.counter-answer .s{font-size:14px;color:var(--panel-muted);margin-top:4px}
.counter-facts{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid #ffffff22}
.counter-facts li{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid #ffffff1a;font-size:14px;color:var(--panel-muted);line-height:1.5}
.counter-facts b{color:var(--panel-text);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.counter-facts li>*{min-width:0}
.counter-facts .has-warning>span:before{content:"";display:inline-block;width:8px;height:8px;background:#FFD27A;border-radius:50%;margin-right:7px}
.counter-how{margin-top:0;color:var(--panel-muted);font-size:14px;line-height:1.5}
.counter-how summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 0;cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--panel-text)}
.counter-how summary::-webkit-details-marker{display:none}
.counter-how summary svg{width:16px;height:16px;transition:transform .24s var(--ease-out)}
.counter-how[open] summary svg{transform:rotate(90deg)}
.counter-how.is-closing summary svg{transform:none}
#result .legacy-counter .tl-bar,#result .legacy-counter .tl-big{display:none}
#result .legacy-counter .tl-earliest{min-height:0;margin:12px 0;padding:0;border:0}
#result .legacy-counter .tl-earliest .v{font:inherit;letter-spacing:0;margin:0 0 8px}
#result .legacy-counter .tl-note{margin:12px 0 0}
#result .legacy-counter .sc-back,#result .legacy-counter .uk-projections{min-height:0;margin:12px 0;padding:0;border:0}
#result .legacy-counter [hidden]{display:none!important}
#result .tl-cta{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;margin-top:6px;padding:14px;border:0;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.12));box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 14px 28px -16px rgba(3,8,20,.6);backdrop-filter:blur(6px);background-color:rgba(11,31,82,.56)}
#result .tl-cta>img{width:44px;height:44px;border-radius:11px;box-shadow:0 6px 14px -6px rgba(3,8,20,.55)}
#result .tl-cta p strong{font-size:14px;margin:0 0 4px}
#result .tl-cta p span{font-size:12.5px;color:var(--panel-text)}
#result .tl-cta__button{grid-column:auto;border-radius:11px;padding:0 14px;color:#0B1F52;background:#fff;box-shadow:none;white-space:nowrap}
#result .tl-cta__button:hover{background:#eaf0ff}
.tl-example #count-content{opacity:1}
.tl-example .counter-reading,.tl-example .legacy-counter{opacity:.65}
.tl-example #res-total{opacity:1}
#mobile-summary:not(.is-past-result){display:none!important}

/* The original labelled fields remain the authoritative inputs inside inline editors. */
.tl-rows{gap:8px}
.tl-rows>.compact-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto 44px 44px;gap:8px;align-items:center;padding:12px 10px 12px 14px;border-radius:14px;background:var(--subtle)}
.tl-rows>.compact-row[hidden]{display:none}
.compact-emoji{width:36px;height:36px;filter:drop-shadow(0 4px 6px rgba(15,34,55,.18))}
.compact-dates{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;line-height:1.45}
.compact-dates small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:2px}
.tl-rows>.compact-row>.tl-away{grid-column:3;grid-row:1;min-width:0;margin:0;color:var(--text);font-size:14px;font-weight:600;background:var(--surface);border-radius:999px;padding:5px 10px;box-shadow:inset 0 0 0 1px var(--line)}
.tl-rows>.compact-row>.tl-away.is-open{color:#0B7A47;background:#EAF8F1;box-shadow:inset 0 0 0 1px #9AD9BA}
[data-theme=night] .tl-rows>.compact-row>.tl-away.is-open{color:#9FE8C4;background:#123528;box-shadow:inset 0 0 0 1px #2C6B50}
.compact-edit{grid-column:4;grid-row:1}
.tl-rows>.compact-row>.tl-x{grid-column:5;grid-row:1}
.compact-edit,.tl-rows>.compact-row>.tl-x{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--muted)}
.compact-edit svg{width:16px;height:16px}
.compact-edit:hover,.tl-rows>.compact-row>.tl-x:hover{background:var(--surface);color:var(--text)}
.compact-row:not(.is-editing)>.tl-field,.compact-row:not(.is-editing)>:is(.sc-open,.uk-still,.pr-still,.us-still,.tl-row-hint),.compact-row:not(.is-editing)>.compact-save{display:none}
.tl-rows>.compact-row.is-editing{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:start;background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent);padding:14px}
.compact-row.is-editing>:is(.compact-emoji,.compact-dates,.compact-edit,.tl-away,.tl-x){display:none!important}
.compact-row.is-editing>.tl-field{grid-row:1}
.compact-row.is-editing>.tl-field:nth-of-type(1){grid-column:1}
.compact-row.is-editing>.tl-field:nth-of-type(2){grid-column:2}
.compact-save{grid-column:3;grid-row:1;margin-top:25px;min-height:48px;border-radius:12px;padding:0 16px;background:var(--fill);color:#fff;font-weight:600}
.compact-row.is-editing .tl-input{background:var(--bg)}
.compact-row.is-editing>:is(.sc-open,.uk-still,.pr-still,.us-still,.tl-row-hint){grid-column:1/-1;grid-row:auto}
.tl-rows>.compact-row .tl-err:empty,.tl-rows>.compact-row .tl-row-hint:empty{display:none;min-height:0}
.compact-row .tl-row-hint{font-size:13px;color:var(--muted)}
.compact-edit:focus-visible,.compact-save:focus-visible,.tl-x:focus-visible,.counter-how summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.counter-how summary:focus-visible{outline-color:var(--panel-text)}
@media(max-width:1000px){.tl-res#result{position:relative;top:0}}
@media(max-width:640px){
 .tl-calc>.tl-card{padding:22px 18px}
 .tl-res#result{padding:24px}
 .counter-top{gap:8px}.counter-top .eyebrow{font-size:11px}
 .counter-answer .v{font-size:28px}
 .counter-facts li{font-size:13px}
 #result .tl-cta{grid-template-columns:44px minmax(0,1fr)}
 #result .tl-cta__button{grid-column:2}
 .tl-rows>.compact-row{grid-template-columns:28px minmax(0,1fr) 44px 44px;gap:4px 6px;padding:10px}
 .compact-emoji{width:28px;height:28px;grid-column:1;grid-row:1}
 .compact-dates{grid-column:2/-1;grid-row:1;font-size:14px}
 .tl-rows>.compact-row>.tl-away{grid-column:2;grid-row:2;justify-self:start;font-size:12px;padding:5px 8px;white-space:normal}
 .compact-edit{grid-column:3;grid-row:2}
 .tl-rows>.compact-row>.tl-x{grid-column:4;grid-row:2}
 .tl-rows>.compact-row.is-editing{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .compact-save{grid-column:1/-1;grid-row:2;margin-top:0;justify-self:end}
 .compact-row.is-editing .tl-input{padding:0 8px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.rg-seg{animation:none!important}.counter-how summary svg{transition:none}}

/* A 34 px switch drawing inside a 44 px native checkbox target. */
.tl-calc .tl-date-section{margin-top:18px}
.tl-calc .tl-field>.tl-err:empty{display:none;min-height:0}
.compact-row.is-editing input[type=checkbox]{appearance:none;position:relative;width:44px;height:44px;flex:none;border:0;background:none;cursor:pointer}
.compact-row.is-editing input[type=checkbox]::before{content:"";position:absolute;left:5px;top:12px;width:34px;height:20px;border-radius:999px;background:var(--line)}
.compact-row.is-editing input[type=checkbox]::after{content:"";position:absolute;left:8px;top:15px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease-out)}
.compact-row.is-editing input[type=checkbox]:checked::before{background:var(--fill)}
.compact-row.is-editing input[type=checkbox]:checked::after{transform:translateX(14px)}