/* Chess Timer — site styles.
 *
 * Two worlds on purpose. Marketing sections use the deep teal-navy from the app
 * icon (#073b5e) against paper; the clock itself uses the app's own theme
 * palette, so the clock on the page and the clock in your pocket read as one
 * product. Colour tokens come from the app source (src/utils/constants.ts) and
 * from sampling the App Store icon.
 */

:root {
  --navy: #073b5e;
  --navy-2: #0a4a75;
  --navy-3: #062f4b;
  --ink: #0c1c26;
  --ink-2: #1d2f3b;

  --accent: #8bc34a;         /* the app's green — bright, for dark grounds only */
  --accent-dark: #4c7619;    /* >=4.5:1 on paper, paper-2 and white; safe for body links */
  --accent-soft: #eef6e3;
  --accent-line: #cfe3b4;

  --amber: #d98324;
  --red: #c62828;
  --red-bright: #ff5252;

  --paper: #faf9f5;
  --paper-2: #f2f0e9;
  --white: #ffffff;
  --slate: #43535e;
  --slate-2: #5c6b76;        /* 4.5:1 on --paper */
  --slate-3: #656e75;        /* used for .card__tag, so it has to clear 4.5:1 as text */
  --line: #e3e0d6;

  --radius: 16px;
  --radius-lg: 26px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(7, 59, 94, 0.06), 0 10px 30px rgba(7, 59, 94, 0.08);
  --shadow-lg: 0 28px 70px rgba(7, 59, 94, 0.18);
  --wrap: 1120px;

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;
}

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

/* The UA rule for [hidden] is display:none, but any author rule that sets
   display wins on cascade origin regardless of specificity — .cc__bar{display:flex}
   would otherwise keep hidden sheets on screen. normalize.css ships the same rule. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 800; }
h1 { font-size: clamp(2.05rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }

:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 40px, 760px); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__in {
  display: flex; align-items: center; gap: 18px;
  min-height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a {
  color: var(--slate); font-size: 0.95rem; font-weight: 600;
  padding: 7px 11px; border-radius: 8px;
}
.nav a:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent-dark); background: var(--accent-soft); }

@media (max-width: 720px) {
  .site-header__in { flex-wrap: wrap; padding-block: 6px; min-height: 0; gap: 6px; }
  .brand { font-size: 0.98rem; }
  .brand img { width: 26px; height: 26px; }
  .nav { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; gap: 2px; }
  .nav a { white-space: nowrap; font-size: 0.88rem; padding: 6px 9px; }
}

/* ------------------------------------------------------------------ *
 * Buttons and badges
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  background: var(--accent-dark); color: #fff; text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { text-decoration: none; background: #3d6316; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--white); border-color: var(--slate-3); }
.btn--dark { background: var(--navy); }
.btn--dark:hover { background: var(--navy-2); }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }

.badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.badges a { display: block; line-height: 0; }
.badges svg { height: 46px; width: auto; border-radius: 7px; }
.badges a:hover svg { opacity: 0.88; }

.rating { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--slate-2); }
.rating strong { color: var(--ink); }
/* On the navy hero the default ink is all but invisible. */
.hero .rating, .section--dark .rating { color: #bed3e2; }
.hero .rating strong, .section--dark .rating strong { color: #fff; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-line);
}
.pill--dark { background: rgba(139, 195, 74, 0.16); color: #b9e07c; border-color: rgba(139, 195, 74, 0.35); }

/* ------------------------------------------------------------------ *
 * Sections
 * ------------------------------------------------------------------ */

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tight { padding: clamp(34px, 5vw, 60px) 0; }
.section--paper { background: var(--paper-2); }
.section--dark { background: var(--navy); color: #e8f1f7; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: #b9e07c; }

.section__head { max-width: 720px; margin-bottom: 34px; }
.section__head p { color: var(--slate-2); font-size: 1.06rem; margin-bottom: 0; }
.section--dark .section__head p { color: #b8ccdb; }

.eyebrow {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 10px;
}
.section--dark .eyebrow { color: #a9d96a; }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.hero {
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(139, 195, 74, 0.16), transparent 60%),
    linear-gradient(170deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #eaf3f9;
  padding: clamp(38px, 6vw, 70px) 0 clamp(44px, 6vw, 76px);
}
.hero h1 { color: #fff; margin-bottom: 16px; }
.hero__lede { font-size: clamp(1.05rem, 2.1vw, 1.24rem); color: #bed3e2; max-width: 46ch; }
.hero__grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 26px 0 18px; }
.hero__points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
.hero__points li { position: relative; padding-left: 26px; color: #cfe0ec; font-size: 0.97rem; }
.hero__points li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 9px; height: 9px; border-radius: 3px; background: var(--accent);
}

/* ------------------------------------------------------------------ *
 * Cards and grids
 * ------------------------------------------------------------------ */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.card h3 { margin: 0; font-size: 1.12rem; }
.card p { color: var(--slate-2); margin: 0; font-size: 0.97rem; }
.card__link { margin-top: auto; padding-top: 12px; font-weight: 700; }
.card__link::after { content: ' \2192'; }

a.card { color: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent-line); }
a.card:hover h3 { color: var(--accent-dark); }

.section--dark .card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.13); }
.section--dark .card p { color: #b8ccdb; }
.section--dark a.card:hover { border-color: rgba(139, 195, 74, 0.5); }
.section--dark a.card:hover h3 { color: #b9e07c; }

.card__tag {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--slate-3);
}

/* Numbered steps */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li {
  counter-increment: step; position: relative; padding-left: 56px;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 800; font-size: 1.05rem;
  border: 1px solid var(--accent-line);
}
.steps h3 { margin: 0 0 4px; font-size: 1.08rem; }
.steps p { margin: 0; color: var(--slate-2); font-size: 0.97rem; }
.section--dark .steps li::before { background: rgba(139, 195, 74, 0.16); color: #b9e07c; border-color: rgba(139, 195, 74, 0.35); }
.section--dark .steps p { color: #b8ccdb; }

/* ------------------------------------------------------------------ *
 * Screenshots
 * ------------------------------------------------------------------ */

.shots {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.shot { margin: 0; }
.shot img {
  width: 100%; border-radius: 18px; border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--shadow);
}
.shot figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--slate-2); text-align: center; }
.section--dark .shot img { border-color: rgba(255, 255, 255, 0.14); }
.section--dark .shot figcaption { color: #b8ccdb; }

.hero__shot { max-width: 300px; margin-inline: auto; }
.hero__shot img { border-radius: 22px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.16); }

/* ------------------------------------------------------------------ *
 * FAQ
 * ------------------------------------------------------------------ */

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 20px;
}
.faq details[open] { border-color: var(--accent-line); }
.faq summary {
  cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none;
  display: flex; align-items: flex-start; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; font-weight: 700; font-size: 1.35rem; line-height: 1;
  color: var(--accent-dark); flex: none;
}
.faq details[open] summary::after { content: '\2212'; }
.faq__body { padding-bottom: 16px; }
.faq__body p { color: var(--slate-2); margin-bottom: 0.8em; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__more { font-weight: 700; }
.faq__more::after { content: ' \2192'; }

.section--dark .faq details { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.13); }
.section--dark .faq__body p { color: #b8ccdb; }

/* ------------------------------------------------------------------ *
 * CTA band
 * ------------------------------------------------------------------ */

.cta {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #eaf3f9; border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 54px);
  display: grid; gap: 24px; align-items: center;
}
@media (min-width: 860px) { .cta { grid-template-columns: 1.4fr auto; } }
.cta h2 { color: #fff; margin-bottom: 8px; }
.cta p { color: #bed3e2; margin: 0; }
.cta__icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: var(--shadow-lg); }
.cta__side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* ------------------------------------------------------------------ *
 * Prose (guides)
 * ------------------------------------------------------------------ */

.prose { font-size: 1.06rem; }
.prose h2 { margin-top: 1.9em; scroll-margin-top: 90px; }
.prose h3 { margin-top: 1.5em; scroll-margin-top: 90px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose li > ul, .prose li > ol { margin-top: 0.5em; }
.prose strong { font-weight: 700; }

.prose blockquote {
  margin: 1.6em 0; padding: 18px 24px;
  border-left: 4px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.96rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--paper-2); font-weight: 700; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }

.tablewrap {
  overflow-x: auto; margin: 1.5em 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.tablewrap:focus-visible { outline: 3px solid var(--accent-dark); }

.callout {
  margin: 1.7em 0; padding: 20px 24px;
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong:first-child { color: var(--accent-dark); }

.toc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin: 0 0 34px;
}
.toc h2 { font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate-2); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 4px; font-size: 0.97rem; }

.meta-line { color: var(--slate-2); font-size: 0.92rem; margin-bottom: 26px; }

.breadcrumb { font-size: 0.9rem; color: var(--slate-2); margin-bottom: 18px; }
.breadcrumb a { color: var(--slate-2); }
.breadcrumb span { margin: 0 7px; color: var(--slate-3); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.site-footer {
  background: var(--ink); color: #a8bcc9;
  padding: clamp(38px, 5vw, 62px) 0 30px; margin-top: 0;
  font-size: 0.94rem;
}
.site-footer h2 { color: #fff; font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 12px; }
.site-footer a { color: #cddbe4; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.11);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; color: #8ba1af; font-size: 0.88rem;
}

/* ------------------------------------------------------------------ *
 * THE CLOCK
 * ------------------------------------------------------------------ */

.cc {
  --cc-active: #8bc34a;
  --cc-inactive: #808080;
  --cc-active-text: #ffffff;
  --cc-inactive-text: #333333;
  --cc-active-sub: #2d5016;
  --cc-inactive-sub: #4a4a4a;
  --cc-bar: #3d3d3d;
  --cc-icon: #c9c9c9;

  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cc-bar);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.cc__stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  height: clamp(440px, 66vh, 660px);
  touch-action: manipulation;
}
.cc--compact .cc__stage { height: clamp(340px, 48vh, 440px); }

.cc__side {
  appearance: none; border: 0; margin: 0; padding: 0; width: 100%; height: 100%;
  font: inherit; cursor: pointer; position: relative;
  display: grid; place-items: center;
  background: var(--cc-inactive); color: var(--cc-inactive-text);
  transition: background 0.14s ease, color 0.14s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cc__side--black { transform: rotate(180deg); }
.cc--noflip .cc__side--black { transform: none; }

.cc__side.is-active { background: var(--cc-active); color: var(--cc-active-text); }
.cc__side.is-flagged { background: #d32f2f; color: #fff; }
.cc__side.is-dimmed { opacity: 0.42; }

.cc__inner { display: grid; justify-items: center; gap: 4px; pointer-events: none; }

.cc__time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.cc--compact .cc__time { font-size: clamp(2.8rem, 8vw, 4.2rem); }

.cc__meta {
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--cc-inactive-sub);
}
.cc__side.is-active .cc__meta { color: var(--cc-active-sub); }
.cc__side.is-flagged .cc__meta { color: #ffd9d9; }

.cc__name {
  font-size: 0.98rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cc-inactive-sub);
}
.cc__side.is-active .cc__name { color: var(--cc-active-sub); }
.cc__side.is-flagged .cc__name { color: #ffd9d9; }

/* The bonus flash is the whole demonstration on the increment page: you press,
   and you watch the seconds arrive. It occupies no layout space when idle. */
.cc__bonus {
  position: absolute; inset-inline: 0; bottom: 12%;
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  color: currentColor; opacity: 0; pointer-events: none;
}
.cc__bonus.is-flash { animation: cc-bonus 0.9s ease-out 1; }
@keyframes cc-bonus {
  0% { opacity: 0; transform: translateY(6px); }
  18% { opacity: 0.95; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .cc__bonus.is-flash { animation: none; } }

.cc__stagehint {
  font-size: 0.82rem; font-weight: 600;
  color: var(--cc-inactive-sub); opacity: 0.85; min-height: 1.2em;
}
.cc__side.is-active .cc__name {
  font-size: 0.98rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cc-inactive-sub);
}
.cc__side.is-active .cc__name { color: var(--cc-active-sub); }
.cc__side.is-flagged .cc__name { color: #ffd9d9; }

/* The bonus flash is the whole demonstration on the increment page: you press,
   and you watch the seconds arrive. It occupies no layout space when idle. */
.cc__bonus {
  position: absolute; inset-inline: 0; bottom: 12%;
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  color: currentColor; opacity: 0; pointer-events: none;
}
.cc__bonus.is-flash { animation: cc-bonus 0.9s ease-out 1; }
@keyframes cc-bonus {
  0% { opacity: 0; transform: translateY(6px); }
  18% { opacity: 0.95; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .cc__bonus.is-flash { animation: none; } }

.cc__stagehint { color: var(--cc-active-sub); }

.cc__side.is-low.is-active .cc__time { animation: cc-pulse 1s ease-in-out infinite; }
@keyframes cc-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .cc__side.is-low.is-active .cc__time { animation: none; } }

.cc__adjust {
  position: absolute; top: 14px; left: 0; right: 0;
  display: flex; justify-content: space-between; padding: 0 16px;
  opacity: 0.55;
}
.cc.is-idle .cc__adjust, .cc.is-over .cc__adjust { visibility: hidden; }
.cc__adjustbtn {
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  color: currentColor; border-radius: 50%;
}
.cc__adjustbtn:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
.cc__adjustbtn svg { width: 27px; height: 27px; }

.cc__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: var(--cc-bar);
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.cc__btn {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--cc-icon);
  transition: background 0.12s ease, color 0.12s ease;
}
.cc__btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.cc__btn svg { width: 23px; height: 23px; }
.cc__btn--wide { margin-left: 0; }
.cc.is-over [data-act="playpause"] { opacity: 0.3; pointer-events: none; }
.cc.is-over [data-act="reset"] { background: #d32f2f; color: #fff; }

.cc__control {
  flex: 1 1 auto; text-align: center; min-width: 0;
  color: #fff; font-size: 0.92rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-inline: 6px;
}

/* Overlay — the idle prompt and the result card.
   The idle state must not hide the clock it is describing, and a tap anywhere
   on the stage should still start the game, so it passes pointer events
   straight through to the halves underneath. */
.cc__overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; z-index: 3; pointer-events: none;
}
/* Sit the idle prompt low, clear of the control bar and of both sets of digits.
   The reader needs to see the clock it is describing. */
.cc__overlay--idle { align-items: end; padding: 0; }
.cc__overlay--result {
  background: rgba(6, 16, 22, 0.74); backdrop-filter: blur(3px);
  pointer-events: auto;
}
.cc__overlay .cc__apply { pointer-events: auto; }
.cc__result {
  background: #12222c; color: #eaf3f9; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius); padding: 26px 28px; text-align: center;
  max-width: 420px; box-shadow: var(--shadow-lg);
}
/* Idle sits as a strip along the bottom edge rather than a card in the middle:
   a first-time reader needs the instruction, but not at the cost of hiding the
   very clock it is telling them to tap. */
.cc__result--idle {
  background: rgba(12, 28, 38, 0.95);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
  border-radius: 14px 14px 0 0; border-bottom: 0;
  padding: 12px 18px; width: 100%; max-width: 620px;
  display: flex; align-items: center; gap: 16px; text-align: left;
  pointer-events: auto;
}
.cc__idletext { display: block; min-width: 0; }
.cc__result--idle .cc__resulttitle { display: block; font-size: 0.98rem; margin: 0 0 2px; }
.cc__result--idle .cc__resultsub { display: block; font-size: 0.85rem; margin: 0; }
.cc__result--idle .cc__apply { flex: none; padding: 9px 16px; font-size: 0.88rem; }
@media (max-width: 600px) {
  /* A phone's white half is only about 180px tall, so the strip has to stay
     shallow or it hides the very digits it is pointing at. One row, small type,
     and no repeat of the control name that is already in the bar above. */
  .cc__result--idle { gap: 10px; padding: 8px 10px 10px; border-radius: 12px 12px 0 0; }
  .cc__result--idle .cc__resulttitle { display: none; }
  .cc__result--idle .cc__resultsub { font-size: 0.76rem; line-height: 1.35; }
  .cc__result--idle .cc__apply { padding: 8px 11px; font-size: 0.76rem; }
}
.cc__resulttitle { font-size: 1.35rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.cc__resultsub { font-size: 0.96rem; color: #b8ccdb; margin: 0 0 18px; }
.cc__apply {
  appearance: none; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--accent); color: #12222c; border: 0;
  padding: 12px 22px; border-radius: 11px;
}
.cc__apply:hover { background: #9fd45f; }

/* Sheets */
.cc__sheet {
  background: #1c1c1c; color: #f1f1f1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-height: 62vh; overflow-y: auto;
}
.cc__sheethead {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; position: sticky; top: 0; background: #1c1c1c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); z-index: 2;
}
.cc__sheettitle { margin: 0; font-size: 1.05rem; color: #fff; }
.cc__btn--sheet { margin-left: auto; color: #b6b6b6; }
.cc__sheetbody { padding: 16px 18px 24px; }
.cc__subhead {
  margin: 18px 0 9px; font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; color: #9a9a9a;
}
.cc__group:first-child .cc__subhead { margin-top: 0; }
.cc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc__chip {
  appearance: none; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  background: #2c2c2c; color: #eee; border: 1px solid #3d3d3d;
  padding: 9px 14px; border-radius: 10px;
}
.cc__chip:hover { background: #383838; border-color: var(--accent); color: #fff; }

.cc__custom { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 16px; }
.cc__custom > summary { cursor: pointer; font-weight: 700; color: #fff; padding: 6px 0; }
.cc__customgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 14px 0; }
.cc__field { display: grid; gap: 5px; }
.cc__label { font-size: 0.8rem; font-weight: 700; color: #b6b6b6; }
.cc__input, .cc__select {
  font: inherit; width: 100%;
  background: #2c2c2c; color: #fff; border: 1px solid #3d3d3d;
  border-radius: 9px; padding: 10px 12px;
}
.cc__hint { font-size: 0.8rem; color: #9a9a9a; margin: 0; }
.cc__check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; font-size: 0.95rem; cursor: pointer; }
.cc__check input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.cc__preview { font-size: 0.92rem; color: var(--accent); margin: 12px 0; font-weight: 600; }

.cc__themes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.cc__swatch {
  appearance: none; font: inherit; cursor: pointer; padding: 0; overflow: hidden;
  background: #2c2c2c; border: 2px solid #3d3d3d; border-radius: 11px;
  display: grid; grid-template-rows: 26px 26px auto;
}
.cc__swatch[aria-pressed="true"] { border-color: var(--accent); }
.cc__swatchtop, .cc__swatchbottom { display: block; }
.cc__swatchname { display: block; font-size: 0.72rem; color: #cfcfcf; padding: 6px 4px; text-align: center; }

.cc__estimate {
  margin: 0; padding: 13px 18px; background: #1c1c1c; color: #c2c2c2;
  font-size: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cc__estimate strong { color: #fff; }

.cc__keys {
  margin: 0; padding: 11px 16px; background: #141414; color: #9a9a9a;
  font-size: 0.84rem; text-align: center;
}
.cc__keys strong { color: #cfcfcf; }
.cc__keys kbd {
  font-family: var(--mono); font-size: 0.78rem;
  background: #2c2c2c; border: 1px solid #444; border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; color: #eee;
}
@media (max-width: 640px) { .cc__keys { display: none; } }

/* Seven 44px buttons plus the control name do not fit across a phone. Wrap the
   name onto its own line above the icons rather than letting the bar overflow
   and hide the sound and full-screen controls off the right edge. */
@media (max-width: 600px) {
  .cc__bar { flex-wrap: wrap; justify-content: center; padding: 6px 6px 8px; gap: 2px; }
  .cc__control { order: -1; flex: 1 0 100%; padding: 4px 0 2px; }
  .cc__btn { width: 40px; height: 40px; }
  .cc__btn svg { width: 21px; height: 21px; }
}

.cc__error { color: #f1f1f1; padding: 28px; text-align: center; }

/* Reserve the clock's footprint before the script runs, so the page does not
   jump when it mounts. is-running is a hook for anything that wants to react
   to a live game — right now it only dims the idle affordances. */
.cc-mount { display: block; min-height: 200px; }
.cc.is-running .cc__adjust { opacity: 0.45; }

/* Full screen — the whole point of a clock you put between two players */
.cc:fullscreen { border-radius: 0; }
.cc:fullscreen .cc__stage { height: 100vh; }
.cc:fullscreen .cc__keys, .cc:fullscreen .cc__sheet[hidden] { display: none; }
/* With a sheet open the stage gives up some height, so the presets are visible
   without the reader having to scroll the page underneath them. */
.cc.is-sheet-open .cc__stage { height: clamp(240px, 34vh, 340px); }
.cc.is-sheet-open .cc__time { font-size: clamp(2.2rem, 6vw, 3rem); }

/* The native fullscreen path stamps is-full on the root so the expand icon can
   flip; the faux path is the fallback for browsers that refuse the request. */
.cc.is-full { border-radius: 0; }
.cc.is-faux-full {
  position: fixed; inset: 0; z-index: 99; border-radius: 0; max-height: 100vh; overflow: auto;
}
.cc.is-faux-full .cc__stage { height: 100vh; }

/* Full screen in landscape is the one case that should look like a physical
   chess clock: two faces side by side with the buttons between them. Scoped to
   full screen deliberately — an in-page clock on a short wide window must keep
   its normal height, or it swallows the whole article. */
@media (orientation: landscape) {
  .cc:fullscreen .cc__stage,
  .cc.is-faux-full .cc__stage {
    grid-template-rows: none;
    grid-template-columns: 1fr auto 1fr;
    height: 100vh;
  }
  .cc:fullscreen .cc__bar,
  .cc.is-faux-full .cc__bar {
    flex-direction: column; justify-content: center; gap: 8px;
    padding: 14px 10px;
    border-block: 0; border-inline: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Vertical text is hard to read at a glance and the control is already named
     on the idle strip, so the column bar drops it rather than rotating it. */
  .cc:fullscreen .cc__control,
  .cc.is-faux-full .cc__control { display: none; }
  .cc:fullscreen .cc__adjust,
  .cc.is-faux-full .cc__adjust { top: 50%; transform: translateY(-50%); flex-direction: column; }
  .cc:fullscreen .cc__side--black .cc__adjust,
  .cc.is-faux-full .cc__side--black .cc__adjust { transform: translateY(-50%); }
}

/* ------------------------------------------------------------------ *
 * Tool page furniture
 * ------------------------------------------------------------------ */

.tool-hero { padding: clamp(20px, 4vw, 46px) 0 0; }
.tool-hero h1 { margin-bottom: 12px; }
.tool-hero__lede { color: var(--slate-2); font-size: 1.08rem; max-width: 62ch; }
.tool-shell { padding: clamp(18px, 3vw, 34px) 0 clamp(34px, 5vw, 54px); }

/* On a phone the clock is the reason the reader is here, so give the copy above
   it less room and bring the tap zones closer to the fold. */
@media (max-width: 600px) {
  .tool-hero__lede { font-size: 1rem; margin-bottom: 0; }
  .tool-hero .breadcrumb { margin-bottom: 10px; }
  .cc__stage { height: clamp(400px, 58vh, 560px); }
}

.tool-notes {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 26px;
}
.tool-note {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
}
.tool-note h3 { font-size: 1rem; margin: 0 0 5px; }
.tool-note p { margin: 0; font-size: 0.94rem; color: var(--slate-2); }

.notes-heading {
  font-size: 1.02rem; font-weight: 800; letter-spacing: 0.01em;
  margin: 30px 0 14px; color: var(--ink);
}
.notes-heading + .tool-notes { margin-top: 0; }

.privacy-strip {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  padding: 14px 20px; margin-top: 20px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius); font-size: 0.93rem; color: #33500f;
}
.privacy-strip strong { color: #2b430c; }

.noscript {
  padding: 22px 24px; background: #fff4e0; border: 1px solid #f0d5a8;
  border-radius: var(--radius); color: #6b4a10; margin-bottom: 20px;
}