/* onlinetimer.app – "Tangerine Night" colour redesign (Design spec v2, 2026-11-12). PREVIEW ONLY until Design + Flemming approve.
   Loaded after app.css/visual.css/classroom.css; only colours, fonts, glows, header/sheet layout. Engine, copy and features unchanged. */
:root{color-scheme:light;
 --sun-1:#FFB443;--sun-2:#FF6A3D;--sun-3:#FF3D7F;--blush:#FFF1EA;--peach:#FFE3D6;--tn-ink:#2A0F1F;--tn-ink-soft:#5A2A3F;--tn-link:#A10E3A;
 --night:#0F1B3D;--night-2:#16235A;--tn-line:#2C3B73;--digits:#FFFFFF;--card-soft:#C9D1F2;
 --start:#FFC23D;--start-hover:#FFD166;--start-pressed:#F2A91F;--start-label:#0F1B3D;
 --btn-2:#22305C;--chip:#1B2850;--chip-on:#FF5E8A;--chip-on-label:#2A0F1F;
 --ring-a:#FFC23D;--ring-b:#FF5E8A;--ring-track:#24315F;--paused:#B8A6FF;--finished:#FF5E8A;
 --page-grad:linear-gradient(135deg,#FFB443 0%,#FF6A3D 50%,#FF3D7F 100%);
 /* remap the site's tokens */
 --bg:#FFF1EA;--bg-2:#FFF1EA;--bg-grad:var(--page-grad);--ink:#2A0F1F;--ink-soft:#5A2A3F;--line:rgba(42,15,31,.14);--link:#A10E3A;--link-hover:#2A0F1F;--focus:#2A0F1F;
 --card-bg:#0F1B3D;--card-solid:#0F1B3D;--card-line:#2C3B73;--card-shadow:0 18px 44px rgba(42,15,31,.22);
 --card-ink:#FFFFFF;--card-ink-soft:#C9D1F2;--card-rule:#2C3B73;--field-bg:#0F1B3D;--field-line:#2C3B73;--placeholder:#8F9BC9;
 --badge-bg:#0F1B3D;--badge-ink:#FFFFFF;
 --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"Archivo","Archivo Fallback",system-ui,sans-serif}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:104%;ascent-override:88%;descent-override:21%}
html[data-theme=dark]{color-scheme:dark;--bg:#0A1230;--bg-2:#0A1230;--ink:#FFFFFF;--ink-soft:#C9D1F2;--line:rgba(255,255,255,.14);--link:#FFC23D;--link-hover:#FFFFFF;--focus:#FFFFFF;--tn-ink:#FFFFFF;--tn-ink-soft:#C9D1F2;--tn-link:#FFC23D;--blush:#111B3F;
 --page-grad:radial-gradient(60% 50% at 0% 0%,#FF6A3D24,transparent 70%),radial-gradient(60% 50% at 100% 0%,#FF3D7F1F,transparent 70%)}
html{background:var(--blush)}
body{font-family:var(--font);color:var(--tn-ink);background:var(--page-grad) top/100% 1100px no-repeat,var(--blush)}
html[data-theme=dark] body{background:var(--page-grad) top/100% 1100px no-repeat,#0A1230}
a{color:var(--tn-link)}
:focus-visible{outline:3px solid #2A0F1F;outline-offset:3px}
html[data-theme=dark] :focus-visible{outline-color:#fff}
h1,h2,h3{font-family:var(--font-display);color:var(--tn-ink)}
h2,h3{font-weight:800;letter-spacing:-.02em}
h1{font-weight:900;font-stretch:112%;font-variation-settings:"wdth" 112;letter-spacing:-.03em;font-size:84px;line-height:1}
@media (max-width:600px){h1{font-size:44px}}

/* header */
.header{border-bottom:0;padding-block:16px}
.brand{color:var(--tn-ink);font-family:var(--font);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand:hover{color:var(--tn-ink)}
.brand-dot{display:none}
.brand-icon{width:30px;height:30px;border-radius:9px;background:#0F1B3D;box-shadow:none;position:relative}
.brand-icon svg{display:none}
.brand-icon::before{content:"";width:12px;height:12px;border-radius:50%;border:3px solid #FFC23D}
.header nav a{color:var(--tn-ink);font-weight:600;font-size:.92rem}
.header nav a:hover,.header nav a[aria-current=page]{color:var(--tn-ink);text-decoration:underline;text-underline-offset:6px}
.theme-btn{border:0;background:#0F1B3D;color:#fff;font-weight:700;font-family:var(--font)}
.theme-btn:hover{background:#16235A;color:#fff;border:0}
html[data-theme=dark] .theme-btn{background:#22305C}
/* language: one "Language" menu at every width (Figma header has no row of language pills) */
.header>.lang-switch{display:none!important}
.lang-fold{display:block!important}
.lang-fold-menu{background:#0F1B3D!important;border:1px solid #2C3B73}
.lang-fold-link{color:#fff!important}

/* kicker (v2.3) */
.intro .eyebrow,.ft-hero .eyebrow,.prose>.eyebrow{display:inline-block;background:#0F1B3D;color:#FFFFFF;font:800 14px/1.2 "Manrope",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;border:1px solid #FFC23D;box-shadow:0 0 14px rgba(255,194,61,.35);margin-bottom:18px}
@media (max-width:600px){.intro .eyebrow,.ft-hero .eyebrow,.prose>.eyebrow{font-size:13px}}
.intro{padding:18px 0 28px}
.intro h1{margin-bottom:14px}
.intro p{color:var(--tn-ink);font-weight:500;font-size:1.12rem}

/* timer card */
.timer-panel{max-width:900px;margin:0 auto;background:#0F1B3D;border:1.5px solid #2C3B73;border-radius:28px;box-shadow:0 18px 44px rgba(42,15,31,.22);color:#fff;transition:border-color .2s,box-shadow .2s}
.timer-panel:has(.timer-stage[data-status=running]){border-color:rgba(255,194,61,.55)}
.timer-panel:has(.timer-stage[data-status=paused]){border-color:rgba(184,166,255,.55)}
.timer-panel:has(.timer-stage.done){border:2px solid #FF5E8A;box-shadow:0 0 0 4px rgba(255,94,138,.18),0 0 34px rgba(255,94,138,.35),0 18px 44px rgba(42,15,31,.22)}
.timer-stage,.timer-stage[data-phase],.timer-stage[data-status=paused]{--c:#FFFFFF}
.timer-stage[data-phase=focus]{--c:#FFFFFF}
.stage-top>span:first-child{color:#C9D1F2;font-family:var(--font);font-weight:800;letter-spacing:.14em}
#ready-label{border:1px solid #2C3B73;color:#C9D1F2;font-weight:600;padding:4px 12px}
.timer-stage[data-status=running] #ready-label{border-color:#FFC23D;color:#FFC23D}
.timer-stage[data-status=running] #ready-label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#FFC23D;margin-right:7px;vertical-align:1px;animation:tn-breathe 1.6s ease-in-out infinite}
.timer-stage[data-status=paused] #ready-label{border-color:#B8A6FF;color:#B8A6FF}
.timer-stage.done #ready-label{background:#FF5E8A;border-color:#FF5E8A;color:#2A0F1F;font-weight:800}
@keyframes tn-breathe{50%{opacity:.45}}
.clock{font-family:var(--font-display);font-weight:800;font-stretch:100%;color:#FFFFFF;text-shadow:0 0 24px rgba(255,194,61,.33)}
.timer-stage[data-status=paused] .clock{color:#E9E3FF;text-shadow:none}
.timer-stage.tn-last10 .clock{color:#FF5E8A;text-shadow:0 0 24px rgba(255,94,138,.4)}
.timer-stage.done .clock{color:#FF5E8A;text-shadow:0 0 24px rgba(255,94,138,.53)}
.timer-stage.done{background:transparent}
.timer-status{color:#C9D1F2}
.timer-stage.done .timer-status{color:#FF5E8A;font-weight:800}
#activity-display{color:#fff;font-family:var(--font-display)}
/* ring: gradient mango -> pink (desktop), track #24315F */
.ring circle{stroke-width:6}
.ring-track{stroke:#24315F}
#ring-progress{stroke:url(#tn-ring-grad);filter:drop-shadow(0 0 6px rgba(255,194,61,.45))}
.timer-stage[data-status=paused] #ring-progress{stroke:#B8A6FF;filter:none}
.timer-stage.done #ring-progress,.timer-stage.tn-last10 #ring-progress{stroke:url(#tn-ring-done)}
.tn-ring{display:none}
@media (min-width:701px){.tn-ring{display:block}.clock-wrap:has(.tn-ring){min-height:290px}}
/* Design 09:22 (desktop only): ring ~344 px across the stroke centre so the 108 px digits keep ~20 px clear space; stroke stays ~5.3 px; +8 px above the status line */
@media (min-width:701px){.tn-ring{width:352px;height:352px;overflow:visible}.tn-ring circle{stroke-width:5.3}.clock-wrap:has(.tn-ring){min-height:372px}.clock-wrap:has(.tn-ring)+.timer-status,.clock-wrap:has(.tn-ring)~#timer-status{margin-top:8px}}
/* buttons */
.timer-panel button,.timer-panel .button,.cd-card button{background:#22305C;border:1px solid #2C3B73;color:#fff;border-radius:14px;font-family:var(--font);font-weight:700}
.timer-panel button:hover,.timer-panel .button:hover{border-color:#FFC23D;box-shadow:0 0 0 1px rgba(255,194,61,.35);color:#fff}
.timer-panel .primary,.primary,.button.primary,.stop-sound,.cm-card .cm-cta,.cm-full .cm-cta,.ft-cta{background:#FFC23D!important;border-color:#FFC23D!important;color:#0F1B3D!important;font-weight:800;border-radius:16px;box-shadow:0 8px 28px rgba(255,194,61,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.timer-panel .primary:hover,.primary:hover,.stop-sound:hover,.cm-cta:hover,.ft-cta:hover{background:#FFD166!important;border-color:#FFD166!important;color:#0F1B3D!important}
.primary:active,.stop-sound:active,.cm-cta:active,.ft-cta:active{background:#F2A91F!important;transform:translateY(1px)}
.timer-actions .primary{min-height:60px;padding:0 60px;font-size:1.12rem}
.timer-actions button{min-height:52px}
@media (max-width:600px){.timer-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.timer-actions .primary{grid-column:1/-1;width:100%;padding:0}}
.text-button{background:transparent!important;border:0!important;color:#FFC23D!important;box-shadow:none!important}
.session-note{color:#C9D1F2}
.progress{background:#24315F;height:6px}
.progress span{background:linear-gradient(90deg,#FFC23D,#FF5E8A);box-shadow:0 0 10px rgba(255,194,61,.5)}
.timer-stage[data-status=paused] .progress span{background:#B8A6FF;box-shadow:none}
.timer-stage.done .progress span{background:linear-gradient(90deg,#FF5E8A,#FF3D7F)}
/* setup band */
.timer-setup{background:#16235A;border-top:0}
.settings{border-top-color:#2C3B73}
.settings>summary{color:#fff}
.quick-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.quick-row button{flex:0 0 auto;min-width:56px;min-height:44px;padding:6px 16px;border-radius:999px;background:#1B2850;border:1px solid #2C3B73;color:#fff;transition:background-color .15s,border-color .15s,color .15s}
.quick-row button span{color:#C9D1F2;opacity:1}
.quick-row button[aria-pressed=true]{background:#FF5E8A;border-color:#FF5E8A;color:#2A0F1F;box-shadow:none}
.quick-row button[aria-pressed=true] span{color:#2A0F1F}
@media (max-width:600px){.quick-row button{flex:0 0 auto;min-width:74px}}
.custom-title{color:#fff;font-weight:600}
label{color:#fff}
.time-inputs>span{visibility:hidden}
input,select{background:#0F1B3D;border:1px solid #2C3B73;color:#fff;border-radius:12px}
input:focus,select:focus{border-color:#FFC23D;box-shadow:0 0 0 3px rgba(255,194,61,.25)}
select option{background:#0F1B3D;color:#fff}
input[type=range],.check input{accent-color:#FFC23D}
.settings-grid output{color:#FFC23D}
.awake-row button[aria-pressed=true]{border-color:#FFC23D;color:#FFC23D;box-shadow:none}
.pomo-guide span:nth-child(1) b{color:#FFC23D}.pomo-guide span:nth-child(2) b{color:#3DDC97}.pomo-guide span:nth-child(3) b{color:#B8A6FF}
.custom-pomo summary{color:#FFC23D}
.vt-toggle input:checked+.vt-switch{background:#FFC23D}
:root{--vt-a:#3DDC97;--vt-b:#FFC23D;--vt-c:#FF5A5F}
.vt-disc circle{stroke:#24315F}
.timer-panel :focus-visible,.cm-card :focus-visible,.cm-full :focus-visible{outline-color:#fff}

/* full screen + classroom (§8) */
.timer-stage.is-full{background:#0A1230!important}
.timer-stage.is-full.done{background:radial-gradient(90% 70% at 50% 45%,rgba(255,94,138,.16),transparent 70%),#0A1230!important}
.timer-stage.is-full .clock{text-shadow:none}
.cm-full{background:#0A1230;color:#fff;font-family:var(--font)}
.cm-clock{font-family:var(--font-display);font-weight:800;color:#fff;text-shadow:none}
.cm-digits-red .cm-clock{color:#FF5A5F}
.cm-state{color:#C9D1F2}
.cm-track,.cm-bar{background:#24315F}
.cm-track span,.cm-bar span{background:#3DDC97}
[data-level=amber] .cm-track span,[data-level=amber] .cm-bar span{background-color:#FFC23D}
[data-level=red] .cm-track span,[data-level=red] .cm-bar span,[data-level=done] .cm-bar span{background-color:#FF5A5F}
.cm-light{background:#0F1B3D}
.cm-light i:nth-child(1){background:#3DDC97}.cm-light i:nth-child(2){background:#FFC23D}.cm-light i:nth-child(3){background:#FF5A5F}
.cm-full button{background:#22305C;border-color:#2C3B73;color:#fff}
.cm-full .cm-exit{background:rgba(34,48,92,.4)}
.cm-full[data-level=done]{box-shadow:inset 0 0 0 6px #FF5E8A}
.cm-chip{background:#22305C}.cm-chip.now{box-shadow:inset 0 0 0 2px #FFC23D}
.cm-card{background:#0F1B3D;border:1.5px solid #2C3B73;border-radius:28px}
.cm-card button[aria-pressed=true],.cm-full button[aria-pressed=true]{outline-color:#FFC23D}
.cm-keys,.cm-keys kbd{background:#16235A}
.cm-switch{background:#24315F}.cm-check input:checked+.cm-switch{background:#FFC23D}

/* blush sheet (v2.2): everything after the tool */
.tn-sheet{background:var(--blush);border-radius:44px 44px 0 0;margin:56px calc(50% - 50vw) 0;padding:64px 0 80px}
.tn-sheet-in{width:min(900px,calc(100vw - 32px));margin:0 auto;display:flex;flex-direction:column}
.tn-sheet-in>.mode-cards{order:-1;margin:0 0 44px}
.tn-sheet-in>*:first-child{margin-top:0}
@media (max-width:600px){.tn-sheet{border-radius:32px 32px 0 0;padding:36px 0 48px;margin-top:40px}}
footer{background:var(--blush)}
.mode-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.mode-cards>a{--ink:#2A0F1F;--ink-soft:#5A2A3F;background:#fff;border:0;border-top:5px solid #FFC23D;border-radius:22px;color:#2A0F1F;box-shadow:0 10px 30px rgba(42,15,31,.08)}
.mode-cards>a+a{border-top-color:#FF5E8A}
.mode-cards>a:hover{color:#2A0F1F;box-shadow:0 14px 36px rgba(42,15,31,.14)}
.mode-cards>a .eyebrow{background:none;box-shadow:none;padding:0;color:#A10E3A;font:800 11px/1.4 var(--font);letter-spacing:.12em;margin-bottom:8px}
.mode-cards h2{color:#2A0F1F}
.mode-cards p{color:#5A2A3F}
.mode-cards .card-link{color:#A10E3A;font-weight:700}
.steps>div,.faq details,.ft-card{--ink:#2A0F1F;--ink-soft:#5A2A3F;--link:#A10E3A;background:#fff;border:1px solid rgba(42,15,31,.08);box-shadow:0 8px 24px rgba(42,15,31,.06);color:#2A0F1F}
.steps h2,.ft-card h3{color:#2A0F1F}.steps p,.ft-card p{color:#5A2A3F}
.steps>div>span,.steps>div:nth-child(n)>span{color:#A10E3A;text-shadow:none}
.faq summary{color:#2A0F1F}.faq details p{color:#5A2A3F}
.explain p,.prose p,.prose li{color:#2A0F1F}
.ft-svg,.ft-card svg{color:#A10E3A}
.ft-steps li::before{background:#FFC23D;color:#0F1B3D}
.notice,.restore{background:#0F1B3D;color:#fff;border-left-color:#FFC23D}
html[data-theme=dark] .mode-cards>a,html[data-theme=dark] .steps>div,html[data-theme=dark] .faq details{background:#0F1B3D;color:#fff;--ink:#fff;--ink-soft:#C9D1F2}
html[data-theme=dark] .mode-cards h2,html[data-theme=dark] .mode-cards p,html[data-theme=dark] .faq summary,html[data-theme=dark] .faq details p,html[data-theme=dark] .explain p,html[data-theme=dark] .prose p{color:#fff}
html[data-theme=dark] .mode-cards>a .eyebrow,html[data-theme=dark] .mode-cards .card-link{color:#FFC23D}
/* ads (v2.1): nothing visible before approval */
.ad-slot,.ads-slot{display:none!important;min-height:0!important}
.ad-slot--filled{display:block!important;background:transparent;border:0;box-shadow:none;padding:0}
.timer-panel .google-auto-placed,.timer-panel ins.adsbygoogle{display:none!important}
/* mobile menu (Figma: brand + "Menu") */
.tn-menu-btn{display:none}
@media (max-width:700px){
 .header{flex-wrap:nowrap;position:relative}
 .tn-js .tn-menu-btn{display:inline-flex;margin-left:auto;min-height:44px;padding:6px 18px;border:0;border-radius:999px;background:#0F1B3D;color:#fff;font:700 .9rem var(--font);cursor:pointer}
 .tn-js .header>nav,.tn-js .header>.lang-fold,.tn-js .header>#theme,.tn-js .header>.theme-btn:not(.tn-menu-btn){display:none!important}
 .tn-js .header.tn-open{flex-wrap:wrap}
 .tn-js .header.tn-open>nav{display:flex!important;flex-wrap:wrap;width:100%;margin:6px 0 0;padding:10px 14px;background:#0F1B3D;border-radius:18px;gap:2px 18px}
 .tn-js .header.tn-open>nav a{color:#fff}
 .tn-js .header.tn-open>.lang-fold,.tn-js .header.tn-open>#theme{display:inline-flex!important;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){.timer-stage[data-status=running] #ready-label::before{animation:none}.quick-row button{transition:none}}
@media print{.tn-sheet{background:none;margin:0;padding:0}body{background:#fff}}

/* compare-fix round 1 (v2 PNGs): finished = full pink ring + full pink bar, only Stop sound is mango; classroom label like Figma */
.timer-stage.done #ring-progress{stroke-dashoffset:0!important}
.timer-panel:has(.timer-stage.done) #progress-fill{width:100%!important}
.timer-panel:has(.timer-stage.done) .timer-actions .primary{background:#22305C!important;border-color:#2C3B73!important;color:#fff!important;box-shadow:none!important}
.cm-label{text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:700}
.cm-full .cm-cta,.cm-full #cm-start{min-height:52px;padding:0 48px;font-size:1.05rem}
/* ---- 2026-11-12 Design polish: Option A (tool above the fold, takeaways right under it) ---- */
.tn-after{max-width:900px;width:100%;box-sizing:border-box;margin:0 auto 32px;text-align:left;font-size:16px;line-height:1.65}
.tn-after>p,.tn-after li{max-width:70ch}
.tn-after>p{margin:0 0 12px}
.tn-after .short-answer{text-align:left;max-width:70ch;margin:0 0 14px;font-size:16px}
.tn-after .takeaways{text-align:left;max-width:900px;margin:16px 0 0;font-size:16px}
.tn-after .takeaways ul{padding-left:1.2em}
.timer-panel+.tn-after,.cd-card+.tn-after{margin-top:24px}
/* ja H1: no break inside words; natural breaks via <wbr> */
html[lang="ja"] .intro h1{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media (max-width:700px){
  html[lang="ja"] .intro h1{font-size:36px;line-height:1.2}
  .intro p.tn-lead-left{text-align:left}
}
.tn-sheet-in>.tn-after:first-child{order:-2;margin:0 0 40px}
/* ---- 2026-11-12 Design: compact card on tool pages (html.tn-compact = every page except the root home, which stays pixel-identical) ---- */
@media (min-width:701px){
  html.tn-compact .intro{padding-bottom:24px}
  html.tn-compact .intro h1{font-size:clamp(48px,5.6vw,72px);margin-top:12px}
  html.tn-compact .intro .eyebrow{display:table;margin:0 auto}
  html.tn-compact .intro .eyebrow+h1{margin-top:12px}
  html.tn-compact .intro p:last-child{margin-bottom:0}
}
@media (min-width:1200px) and (max-height:800px){
  html.tn-compact .timer-stage:not(.is-full){padding-top:20px}
  html.tn-compact .timer-stage:not(.is-full) .clock-wrap:has(.tn-ring){padding-top:0;margin-top:8px;min-height:352px}
  html.tn-compact .timer-stage:not(.is-full) .clock-wrap:has(.tn-ring)~#timer-status{margin-top:12px}
}
/* Visual circle on (desktop): the pie takes the ring's place, 344 px, centred, digits on top */
@media (min-width:701px){
  body.vt-on .clock-wrap:has(.tn-ring)>.vt-disc{position:absolute;left:50%;top:50%;width:344px;height:344px;margin:0;transform:translate(-50%,-50%);z-index:0}
  body.vt-on .clock-wrap:has(.vt-disc) .tn-ring{visibility:hidden}
  body.vt-on .clock-wrap:has(.vt-disc) .clock{position:relative;z-index:1}
  body.vt-on .timer-stage:not(.done) .clock-wrap:has(.vt-disc) .clock{color:#fff;text-shadow:0 2px 12px rgba(15,27,61,.6)}
}