/* =========================================================
   Tuxedo Time Guy — 2026 rebuild
   Midnight blue ground, brass dial, ivory shirt-front.
   Bodoni Moda (display) / IBM Plex Sans (UI) / IBM Plex Mono (numerals)
   ========================================================= */

:root[data-theme="midnight"]{
  --ground:#0e1118;
  --ground-2:#12161f;
  --panel:#171c27;
  --panel-2:#1d2331;
  --ink:#e9ebf2;
  --ink-soft:#a3abbe;
  --ink-faint:#767f95;
  --rule:#252c3b;
  --rule-soft:#1e2430;
  --brass:#d3ab5d;
  --brass-ink:#e3c184;
  --brass-wash:rgba(211,171,93,.13);
  --oxblood:#dd7b84;
  --verdigris:#5cc4a6;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 46px rgba(0,0,0,.42);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}

:root[data-theme="ivory"]{
  --ground:#eeeeea;
  --ground-2:#f5f5f2;
  --panel:#ffffff;
  --panel-2:#f7f7f4;
  --ink:#14161c;
  --ink-soft:#535a68;
  --ink-faint:#7b8290;
  --rule:#d5d6d0;
  --rule-soft:#e5e6e1;
  --brass:#8a6a1c;
  --brass-ink:#6f5416;
  --brass-wash:rgba(180,142,60,.14);
  --oxblood:#98333c;
  --verdigris:#1f6b57;
  --shadow:0 1px 2px rgba(24,26,32,.06), 0 16px 40px rgba(24,26,32,.09);
  --shadow-sm:0 1px 2px rgba(24,26,32,.07);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

/* The hidden attribute must win. Any rule that sets `display` — .btn is
   inline-flex, for instance — otherwise overrides the browser default of
   [hidden]{display:none}, leaving supposedly hidden elements on screen. */
[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16.5px/1.6 "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}

.shell{ width:100%; max-width:1120px; margin:0 auto; padding:0 24px }

h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul{margin:0; padding:0; list-style:none}
a{color:var(--brass-ink); text-decoration:none}
a:hover{color:var(--brass)}
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:3px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--panel); color:var(--ink); padding:12px 18px;
  border:1px solid var(--brass); border-radius:0 0 6px 0;
}
.skip:focus{ left:0 }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule);
}
.head-inner{
  display:flex; align-items:center; gap:28px;
  min-height:66px; padding-top:10px; padding-bottom:10px;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); flex:0 0 auto }
.brand:hover{ color:var(--ink) }
.brand-mark{ color:var(--brass); display:grid; place-items:center; flex:0 0 auto }
.brand-words{ display:flex; flex-direction:column; line-height:1.15 }
.brand-name{
  font:600 19px/1.1 "Bodoni Moda", Didot, Georgia, serif;
  letter-spacing:.005em;
}
.brand-tag{
  font:500 10px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin-top:3px;
}

.tool-nav{
  display:flex; gap:2px; margin-left:auto; flex-wrap:wrap;
  font:500 14px/1 "IBM Plex Sans", sans-serif;
}
.tool-nav a{
  color:var(--ink-soft); padding:9px 13px; border-radius:5px;
  border:1px solid transparent; white-space:nowrap;
}
.tool-nav a:hover{ color:var(--ink); background:var(--panel) }
.tool-nav a[aria-current="page"]{
  color:var(--brass-ink); background:var(--brass-wash);
  border-color:color-mix(in srgb, var(--brass) 32%, transparent);
}

.theme-toggle{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:var(--panel); border:1px solid var(--rule);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:border-color .18s ease;
}
.theme-toggle:hover{ border-color:var(--brass) }
.theme-dot{
  width:15px; height:15px; border-radius:50%;
  background:var(--brass);
  box-shadow:inset -4px -1px 0 0 var(--panel);
}
:root[data-theme="ivory"] .theme-dot{ box-shadow:none }

/* ---------- page head ---------- */
main{ flex:1 0 auto; padding-bottom:80px }
.page-head{ padding:52px 0 30px; max-width:60ch }
.page-head h1{
  font:600 clamp(32px,5.2vw,46px)/1.08 "Bodoni Moda", Didot, Georgia, serif;
  letter-spacing:-.012em; text-wrap:balance;
}
.lede{ margin-top:14px; color:var(--ink-soft); font-size:18px; line-height:1.55 }

/* ---------- the tool stage ---------- */
.stage{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.stage-main{ padding:clamp(26px,4vw,44px) clamp(20px,4vw,44px) }
.stage-foot{
  border-top:1px solid var(--rule-soft);
  background:var(--ground-2);
  padding:18px clamp(20px,4vw,44px);
  display:flex; flex-wrap:wrap; gap:16px 26px; align-items:flex-end;
}

.readout{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center }
.readout-label{
  font:500 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.digits{
  font:600 clamp(52px,15vw,132px)/1 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  display:flex; align-items:baseline; justify-content:center; gap:.06em;
  color:var(--ink);
}
.digits .frac{
  font-size:.34em; color:var(--brass); letter-spacing:0;
}
.digits .meridiem{
  font-size:.24em; color:var(--ink-faint); letter-spacing:.1em;
  margin-left:.15em; text-transform:uppercase;
}
.digits.is-running{ color:var(--ink) }
.digits.is-done{ color:var(--brass) }
.sub-readout{
  font:500 14px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  color:var(--ink-soft); letter-spacing:.02em;
}

/* ---------- controls ---------- */
.controls{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px }

.btn{
  font:600 14px/1 "IBM Plex Sans", sans-serif;
  padding:12px 20px; border-radius:7px; cursor:pointer;
  border:1px solid var(--rule); background:var(--panel-2); color:var(--ink);
  transition:border-color .16s ease, background .16s ease, color .16s ease;
  display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{ border-color:var(--ink-faint) }
.btn.primary{
  background:var(--brass); border-color:var(--brass); color:#16130a; font-weight:700;
}
:root[data-theme="ivory"] .btn.primary{ color:#fff }
.btn.primary:hover{ filter:brightness(1.07) }
.btn.ghost{ background:transparent }
.btn.danger{ color:var(--oxblood); border-color:color-mix(in srgb, var(--oxblood) 40%, transparent) }
.btn.danger:hover{ border-color:var(--oxblood) }
.btn.lg{ padding:15px 30px; font-size:16px }
.btn:disabled{ opacity:.4; cursor:not-allowed }

.field{ display:flex; flex-direction:column; gap:6px }
.field > label{
  font:500 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
}
input[type="text"], input[type="number"], input[type="time"], select{
  font:500 15px/1 "IBM Plex Sans", sans-serif;
  padding:11px 12px; border-radius:6px;
  background:var(--ground-2); color:var(--ink);
  border:1px solid var(--rule); min-width:0; width:100%;
}
input:focus, select:focus{ border-color:var(--brass); outline:none }
input[type="number"]{ font-variant-numeric:tabular-nums }

.check{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:14px; color:var(--ink-soft); user-select:none;
}
.check input{ accent-color:var(--brass); width:16px; height:16px; cursor:pointer }

.opt-row{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; width:100% }

/* ---------- item rows (timers, alarms, laps, clocks) ---------- */
.item-list{ display:flex; flex-direction:column; gap:8px; margin-top:22px }
.item{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border-radius:9px;
  background:var(--ground-2); border:1px solid var(--rule-soft);
  position:relative; overflow:hidden;
}
.item.is-running{ border-color:color-mix(in srgb, var(--verdigris) 34%, transparent) }
.item.is-done{ border-color:var(--brass); background:var(--brass-wash) }
.item-bar{
  position:absolute; left:0; bottom:0; height:2px;
  background:var(--verdigris); width:0; transition:width .25s linear;
}
.item.is-done .item-bar{ background:var(--brass) }
.item-name{ font-weight:600; flex:1 1 130px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.item-time{
  font:600 21px/1 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; flex:0 0 auto;
}
.item-actions{ display:flex; gap:6px; margin-left:auto; flex:0 0 auto }
.item-actions .btn{ padding:8px 12px; font-size:13px }

.pill{
  font:600 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.11em; text-transform:uppercase;
  padding:5px 8px; border-radius:4px; flex:0 0 auto;
  background:var(--panel-2); color:var(--ink-faint); border:1px solid var(--rule-soft);
}
.pill.on{ color:var(--verdigris); border-color:color-mix(in srgb, var(--verdigris) 40%, transparent); background:transparent }
.pill.brass{ color:var(--brass-ink); border-color:color-mix(in srgb, var(--brass) 40%, transparent); background:var(--brass-wash) }

.empty{
  padding:26px 18px; text-align:center; color:var(--ink-faint);
  border:1px dashed var(--rule); border-radius:9px; font-size:14.5px; margin-top:22px;
}

/* world clock grid */
.clock-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:22px }
.clock-cell{
  background:var(--ground-2); border:1px solid var(--rule-soft);
  border-radius:9px; padding:15px 16px; position:relative;
}
.clock-cell .cc-label{
  font:500 11px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  padding-right:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.clock-cell .cc-time{
  font:600 27px/1.15 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin-top:7px;
}
.clock-cell .cc-meta{ font-size:12.5px; color:var(--ink-faint); margin-top:3px }
.clock-cell .cc-rm{
  position:absolute; top:10px; right:10px; width:24px; height:24px;
  border-radius:5px; border:1px solid transparent; background:transparent;
  color:var(--ink-faint); cursor:pointer; line-height:1; font-size:16px;
}
.clock-cell .cc-rm:hover{ color:var(--oxblood); border-color:var(--rule) }

/* lap table */
.laps{ margin-top:22px; max-height:280px; overflow-y:auto; border:1px solid var(--rule-soft); border-radius:9px }
.laps table{ width:100%; border-collapse:collapse; font-size:14px }
.laps th,.laps td{ padding:9px 14px; text-align:left; border-bottom:1px solid var(--rule-soft) }
.laps th{
  font:600 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint);
  background:var(--panel-2); position:sticky; top:0;
}
.laps td{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums }
.laps tr:last-child td{ border-bottom:0 }
.laps .best{ color:var(--verdigris) }
.laps .worst{ color:var(--oxblood) }

/* pomodoro phase ring */
.phase-track{ display:flex; gap:6px; justify-content:center; margin-top:20px }
.phase-pip{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--rule); background:transparent;
}
.phase-pip.filled{ background:var(--brass); border-color:var(--brass) }

/* epoch converter */
.convert-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:26px }
@media (min-width:760px){ .convert-grid{ grid-template-columns:1fr 1fr; gap:26px } }
.convert-box{ display:flex; flex-direction:column; gap:10px }
.copyline{ display:flex; gap:8px; align-items:stretch }
.copyline input{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:14px }
.copyline .btn{ flex:0 0 auto; padding:11px 14px; font-size:13px }
.detect{
  font:500 12px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  color:var(--brass-ink); letter-spacing:.03em; min-height:1.4em;
}
.snippets{ margin-top:26px }
.snippets h3{
  font:600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;
}
.snip-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px }
.snip-tabs button{
  font:500 12.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  padding:8px 12px; border-radius:5px; cursor:pointer;
  background:transparent; border:1px solid var(--rule); color:var(--ink-soft);
}
.snip-tabs button[aria-selected="true"]{
  color:var(--brass-ink); background:var(--brass-wash);
  border-color:color-mix(in srgb, var(--brass) 34%, transparent);
}
pre.snip{
  margin:0; padding:16px 18px; overflow-x:auto;
  background:var(--ground-2); border:1px solid var(--rule-soft); border-radius:8px;
  font:400 13.5px/1.6 "IBM Plex Mono", ui-monospace, monospace; color:var(--ink);
}

/* ---------- fullscreen display mode ---------- */
body.ttg-fs .site-head,
body.ttg-fs .page-head,
body.ttg-fs .prose-wrap,
body.ttg-fs .site-foot,
body.ttg-fs .stage-foot,
body.ttg-fs .ad-slot{ display:none !important }
body.ttg-fs .stage{
  border:0; border-radius:0; background:var(--ground); box-shadow:none;
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
}
body.ttg-fs .stage-main{ width:100% }
body.ttg-fs .digits{ font-size:min(23vw, 34vh) }
body.ttg-fs .controls{ opacity:.25; transition:opacity .2s ease }
body.ttg-fs .stage:hover .controls{ opacity:1 }
.fs-hint{ display:none }
body.ttg-fs .fs-hint{
  display:block; margin-top:22px; text-align:center;
  font:500 11px/1 "IBM Plex Mono", monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ---------- hub ---------- */
.hub-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px; margin-top:34px;
}
.hub-card{
  display:flex; flex-direction:column; gap:9px;
  padding:24px 24px 26px; border-radius:12px;
  background:var(--panel); border:1px solid var(--rule);
  box-shadow:var(--shadow-sm); color:var(--ink);
  transition:border-color .18s ease, transform .18s ease;
}
.hub-card:hover{ border-color:var(--brass); transform:translateY(-2px); color:var(--ink) }
.hub-card h2{
  font:600 21px/1.2 "Bodoni Moda", Didot, Georgia, serif; letter-spacing:-.005em;
}
.hub-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55 }
.hub-card .go{
  font:600 11px/1 "IBM Plex Mono", monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass-ink); margin-top:auto; padding-top:8px;
}

/* ---------- prose ---------- */
.prose-wrap{
  display:grid; gap:44px; margin-top:64px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .prose-wrap{ grid-template-columns:minmax(0,1fr) minmax(0,360px); align-items:start }
}
.prose{ max-width:68ch; display:flex; flex-direction:column; gap:30px }
.prose h2{
  font:600 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brass-ink);
  padding-bottom:11px; border-bottom:1px solid var(--rule); margin-bottom:14px;
}
.prose p{ color:var(--ink-soft); line-height:1.72 }

.faq{ align-self:start }
.faq h2{
  font:600 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brass-ink);
  padding-bottom:11px; border-bottom:1px solid var(--rule); margin-bottom:20px;
}
.faq dl{ display:flex; flex-direction:column; gap:20px }
.faq dt{ font-weight:600; font-size:15.5px; margin-bottom:6px; text-wrap:balance }
.faq dd{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.65 }

/* ---------- ads ---------- */
.ad-slot{
  margin:56px auto 0; text-align:center; min-height:90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; max-width:100%; overflow:hidden;
}
.ad-slot::before{
  content:"Advertisement";
  font:500 9.5px/1 "IBM Plex Mono", monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--rule); background:var(--ground-2);
  margin-top:auto; padding:52px 0 30px;
}
.foot-inner{
  display:grid; gap:34px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:720px){
  .foot-inner{ grid-template-columns:2.2fr 1fr 1fr }
}
.foot-brand{
  font:600 18px/1.2 "Bodoni Moda", Didot, Georgia, serif; margin-bottom:10px;
}
.foot-note{ color:var(--ink-faint); font-size:14px; line-height:1.65; max-width:44ch }
.foot-h{
  font:600 11px/1 "IBM Plex Mono", monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;
}
.foot-col ul{ display:flex; flex-direction:column; gap:9px }
.foot-col ul a{ color:var(--ink-soft); font-size:14.5px }
.foot-col ul a:hover{ color:var(--brass) }
.tipjar{
  display:inline-block; margin-top:16px; padding:9px 15px;
  border:1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius:6px; background:var(--brass-wash); color:var(--brass-ink);
  font:600 13px/1 "IBM Plex Sans", sans-serif;
}
.tipjar:hover{ border-color:var(--brass) }
.foot-legal{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--rule-soft);
  color:var(--ink-faint); font-size:13px;
}

/* ---------- toast + confetti ---------- */
.toast-host{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.toast{
  background:var(--panel); border:1px solid var(--brass);
  color:var(--ink); padding:11px 18px; border-radius:7px;
  font-size:14px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity:1; transform:none }
#confetti{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:70; display:none;
}
#confetti.on{ display:block }

/* alarm flash */
@keyframes ttg-flash{ 0%,100%{ background:var(--ground) } 50%{ background:var(--brass-wash) } }
body.ttg-alarm{ animation:ttg-flash .8s ease-in-out 6 }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .hub-card:hover{ transform:none }
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .shell{ padding:0 18px }
  .head-inner{ flex-wrap:wrap; gap:12px 16px; padding-bottom:12px }
  .tool-nav{ order:3; width:100%; margin-left:0; overflow-x:auto; padding-bottom:2px }
  .theme-toggle{ margin-left:auto }
  .page-head{ padding:36px 0 24px }
  .brand-tag{ display:none }
}
@media (max-width:540px){
  .item-actions{ width:100%; margin-left:0 }
  .item-time{ font-size:19px }
  .controls .btn{ flex:1 1 auto; justify-content:center }
}

/* no-JS */
.nojs-warn{
  display:none; margin-top:24px; padding:16px 18px; border-radius:9px;
  border:1px solid var(--oxblood); color:var(--oxblood); font-size:14.5px;
}
html.no-js .nojs-warn{ display:block }
html.no-js .stage-main .controls{ display:none }

/* ---------- daylight saving ---------- */
.dst-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px; margin-top:30px;
}
.fact{
  background:var(--ground-2); border:1px solid var(--rule-soft);
  border-radius:9px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.fact-label{
  font:500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
}
.fact-value{
  font:600 16px/1.35 "IBM Plex Sans", sans-serif; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.dst-progress{ margin-top:26px }
.dst-track{
  height:6px; border-radius:3px; background:var(--ground-2);
  border:1px solid var(--rule-soft); overflow:hidden;
}
.dst-bar{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--verdigris), var(--brass));
  transition:width .4s linear;
}

/* ---------- country index ---------- */
.country-index{ margin-top:46px }
.country-index h2{
  font:600 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brass-ink);
  padding-bottom:11px; border-bottom:1px solid var(--rule); margin-bottom:18px;
}
.country-index ul{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px;
}
.country-index a{
  display:block; padding:11px 14px; border-radius:7px;
  background:var(--ground-2); border:1px solid var(--rule-soft);
  color:var(--ink); font-size:14.5px;
}
.country-index a:hover{ border-color:var(--brass); color:var(--brass-ink) }

/* ---------- timezone converter ---------- */
.cz-controls{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; margin-bottom:28px;
}
.cz-list{ display:flex; flex-direction:column; gap:8px }
.cz-row{
  display:grid; grid-template-columns:1fr auto auto; gap:6px 18px;
  align-items:center; position:relative;
  padding:15px 44px 15px 18px; border-radius:10px;
  background:var(--ground-2); border:1px solid var(--rule-soft);
}
.cz-row.is-source{
  border-color:color-mix(in srgb, var(--brass) 45%, transparent);
  background:var(--brass-wash);
}
.cz-zone{ font-weight:600; display:flex; flex-direction:column; gap:3px; min-width:0 }
.cz-tzname{
  font:400 11.5px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  color:var(--ink-faint); font-weight:400;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cz-time{
  font:600 25px/1 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap;
}
.cz-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-faint); justify-content:flex-end;
}
.cz-band{
  font:500 10.5px/1 "IBM Plex Mono", monospace; letter-spacing:.09em;
  text-transform:uppercase;
}
.cz-row.work  .cz-band{ color:var(--verdigris) }
.cz-row.ok    .cz-band{ color:var(--ink-faint) }
.cz-row.asleep .cz-band{ color:var(--oxblood) }
.cz-rm{
  position:absolute; top:50%; right:12px; transform:translateY(-50%);
  width:26px; height:26px; border-radius:6px; cursor:pointer; line-height:1;
  background:transparent; border:1px solid transparent; color:var(--ink-faint); font-size:17px;
}
.cz-rm:hover{ color:var(--oxblood); border-color:var(--rule) }

.cz-h{
  font:600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  margin:34px 0 14px;
}
.cz-grid{ display:flex; flex-direction:column; gap:6px; overflow-x:auto }
.cz-strip{ display:flex; align-items:center; gap:12px; min-width:520px }
.cz-strip-label{
  flex:0 0 108px; font-size:13px; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cz-cells{ display:grid; grid-template-columns:repeat(24,1fr); gap:2px; flex:1 }
.cz-cells .cell{
  height:26px; border-radius:3px; display:grid; place-items:center;
  font:500 9.5px/1 "IBM Plex Mono", monospace; color:var(--ink-faint);
}
.cell.work{ background:color-mix(in srgb, var(--verdigris) 34%, transparent) }
.cell.ok{ background:var(--rule-soft) }
.cell.asleep{ background:transparent; border:1px solid var(--rule-soft) }
.cell.now{ outline:2px solid var(--brass); outline-offset:-2px }
.cz-key{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:14px;
  font-size:12.5px; color:var(--ink-faint);
}
.cz-key span{ display:flex; align-items:center; gap:7px }
.cz-key .sw{ width:13px; height:13px; border-radius:3px; display:inline-block }
.cz-key .sw.work{ background:color-mix(in srgb, var(--verdigris) 34%, transparent) }
.cz-key .sw.ok{ background:var(--rule-soft) }
.cz-key .sw.asleep{ border:1px solid var(--rule-soft) }

@media (max-width:600px){
  .cz-row{ grid-template-columns:1fr auto; padding-right:40px }
  .cz-meta{ grid-column:1 / -1; justify-content:flex-start }
}

/* ---------- interval timer ---------- */
body.iv-work  .digits{ color:var(--verdigris) }
body.iv-rest  .digits{ color:var(--brass) }
body.iv-work  .stage{ border-color:color-mix(in srgb, var(--verdigris) 45%, transparent) }
body.iv-rest  .stage{ border-color:color-mix(in srgb, var(--brass) 45%, transparent) }

/* ---------- classroom ---------- */
.cr-ring{ position:relative; width:min(74vw,420px); margin:0 auto; aspect-ratio:1 }
.cr-ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.cr-track{ fill:none; stroke:var(--rule); stroke-width:5 }
.cr-arc{
  fill:none; stroke:var(--verdigris); stroke-width:5; stroke-linecap:round;
  transition:stroke .3s ease;
}
.cr-ring.warn .cr-arc{ stroke:var(--brass) }
.cr-ring.over .cr-arc{ stroke:var(--oxblood) }
.cr-time{
  position:absolute; inset:0; display:grid; place-items:center;
  font:600 clamp(46px,15vw,104px)/1 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; margin:0;
}
.cr-ring.over .cr-time{ color:var(--oxblood) }
body.ttg-fs .cr-ring{ width:min(84vw,74vh) }
body.ttg-fs .cr-time{ font-size:min(17vw,22vh) }

/* ---------- meeting cost calculator ---------- */
.mc-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin-top:30px;
}
.mc-card{
  background:var(--ground-2); border:1px solid var(--rule-soft);
  border-radius:9px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.mc-card-label{
  font:500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint);
}
.mc-card-value{
  font:600 21px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink);
}
.mc-privacy{
  margin-top:26px; padding:14px 16px; border-radius:8px;
  background:var(--brass-wash); border:1px solid var(--rule-soft);
  font-size:13.5px; line-height:1.6; color:var(--ink-soft); max-width:62ch;
}

.mc-foot{ flex-direction:column; align-items:stretch; gap:24px }
.mc-attendees{ width:100% }
.mc-head-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:14px; flex-wrap:wrap;
}
.mc-h{
  font:600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0;
}
.mc-rows{ display:flex; flex-direction:column; gap:10px }
.mc-row{
  display:grid; grid-template-columns:88px 1fr 1fr 32px;
  gap:12px; align-items:end;
}
.mc-rm{
  width:32px; height:42px; border-radius:6px; cursor:pointer; line-height:1;
  background:transparent; border:1px solid var(--rule-soft);
  color:var(--ink-faint); font-size:17px;
}
.mc-rm:hover{ color:var(--oxblood); border-color:var(--oxblood) }
.mc-rm-spacer{ display:block; width:32px }

#mcTotal.is-done{ color:var(--verdigris) }

@media (max-width:640px){
  .mc-row{ grid-template-columns:1fr 1fr; gap:10px }
  .mc-row .field:nth-child(3){ grid-column:1 / -1 }
  .mc-rm, .mc-rm-spacer{ grid-column:2; justify-self:end; width:32px }
}