/* /chess-clock/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.cc-head .sub{margin-bottom:0.875rem}
@media(max-width:520px){.cc-head h1{margin-bottom:0.25rem}.cc-head .sub{font-size:0.875rem;margin-bottom:0.625rem;line-height:1.45}}
.cc-modes{margin-bottom:0.875rem}

/* the eight player colours: the site's score and status tokens */
.cc-c0{--pc:var(--s1)}.cc-c1{--pc:var(--s2)}.cc-c2{--pc:var(--s3)}.cc-c3{--pc:var(--s4)}
.cc-c4{--pc:var(--s5)}.cc-c5{--pc:var(--accent)}.cc-c6{--pc:var(--warn)}.cc-c7{--pc:var(--ink-2)}

.cc-duo{display:grid;gap:1rem;align-items:start}
.cc-duo[hidden]{display:none}
@media(min-width:920px){.cc-duo{grid-template-columns:minmax(0,1fr) 20rem;gap:1.5rem}}
.cc-clockcard,.cc-boardcard{display:grid;gap:0.75rem;min-width:0}
.cc-settings{display:grid;gap:0.75rem;align-content:start}
.cc-settings>.k,.cc-subk{margin:0;font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cc-subk{margin-top:0.25rem}
@media(max-width:520px){.cc-clockcard,.cc-settings,.cc-boardcard{padding:0.625rem}}
.cc-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.cc-help b{color:var(--ink-2)}
.cc-meta{margin:0;font-family:var(--mono);font-size:0.75rem;color:var(--muted);text-align:center}
.cc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
.cc-grid2[hidden]{display:none}
.cc-grid3{display:grid;grid-template-columns:5rem minmax(0,1fr) 6rem;gap:0.625rem}
.cc-settings input[type=number],.cc-settings select,.cc-boardcard input[type=number],.cc-boardcard select{width:100%}
.cc-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.5rem,1fr));gap:0.3125rem}
.cc-presets .chip{font-family:var(--mono);font-weight:600;font-size:0.8125rem;padding:0.5rem 0.125rem;min-width:0;text-align:center}
.cc-presets .chip:disabled,.cc-skip:disabled{opacity:.5;cursor:not-allowed}
.cc-customtoggle{justify-self:start}
.cc-custom{display:grid;gap:0.75rem;padding-top:0.25rem}
.cc-custom[hidden]{display:none}
.cc-save{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem;padding-top:0.5rem;border-top:1px solid var(--line)}

/* the clock face: far half (turned round on phones), the bar, near half */
.cc-face{display:grid;gap:0.5rem;grid-template-areas:"far" "bar" "near"}
.cc-far{grid-area:far}.cc-near{grid-area:near}.cc-face>.cc-bar{grid-area:bar}
.cc-half{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-height:clamp(8.5rem,18vh,15rem);padding:0.75rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s,color .15s}
.cc-who{font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cc-time{font-family:var(--mono);font-weight:700;font-size:clamp(3.25rem,16vw,6.5rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cc-info{display:flex;gap:0.75rem;font-family:var(--mono);font-size:0.8125rem;color:var(--muted);min-height:1.2em}
.cc-delay{color:var(--accent);font-weight:600}
.cc-half.is-active{background:var(--mat);border-color:var(--mat-2);color:var(--mat-ink);box-shadow:inset 0 0 0 3px var(--signal)}
.cc-half.is-active .cc-who,.cc-half.is-active .cc-info{color:var(--mat-muted)}
.cc-half.is-active .cc-delay{color:var(--signal)}
.cc-half.is-paused{box-shadow:inset 0 0 0 3px var(--line-2)}
.cc-half.is-low .cc-time{color:var(--bad)}
.cc-half.is-active.is-low .cc-time{color:var(--signal)}
.cc-half.is-flag{background:var(--bad);border-color:var(--bad);color:#fff}
.cc-half.is-flag .cc-who,.cc-half.is-flag .cc-info,.cc-half.is-flag .cc-time{color:#fff}
@media(max-width:760px){.cc-far{transform:rotate(180deg)}}
.cc-bar{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center}
.cc-bar .btn{height:2.5rem;padding:0 0.875rem}
.cc-bar .btn[hidden]{display:none}
.cc-bar .btn:disabled{opacity:.5;cursor:not-allowed}
@media(min-width:761px){
  .cc-face{grid-template-columns:1fr 1fr;grid-template-areas:"near far" "bar bar"}
  .cc-half{min-height:16rem}
  .cc-time{font-size:clamp(4rem,7vw,6.5rem)}
}

/* table view: the two halves fill the screen, for a phone laid flat */
body.cc-table{overflow:hidden}
body.cc-table .cc-face{position:fixed;inset:0;z-index:60;background:var(--bg);padding:max(0.5rem,env(safe-area-inset-top)) 0.5rem max(0.5rem,env(safe-area-inset-bottom));grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-template-areas:"far" "bar" "near"}
body.cc-table .cc-half{min-height:0;height:100%}
body.cc-table .cc-far{transform:rotate(180deg)}
body.cc-table .cc-time{font-size:min(22vw,16vh)}

.cc-banner{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 0.875rem;border-radius:0.625rem;background:var(--signal);color:var(--signal-ink);box-shadow:var(--shadow)}
.cc-banner[hidden]{display:none}
.cc-banner p{flex:1;margin:0;font-weight:700;font-size:1rem}
.cc-banner .btn.ghost{height:2.5rem;background:transparent;color:var(--signal-ink);border-color:var(--signal-ink)}
body.cc-table .cc-banner{position:fixed;left:0.75rem;right:0.75rem;top:50%;transform:translateY(-50%);z-index:61}

/* board game */
.cc-setup{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.cc-setup li{display:flex;align-items:center;gap:0.5rem;min-width:0}
.cc-setup .cc-pname{flex:1;min-width:0;font-size:1rem;box-shadow:inset 0.25rem 0 0 var(--pc)}
.cc-dot{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;border:2px solid var(--surface);outline:1px solid var(--line-2);background:var(--pc);padding:0}
button.cc-dot{cursor:pointer}
.cc-wide{width:100%}
.cc-turn{display:grid;gap:0.25rem;width:100%;min-height:clamp(12rem,32vh,20rem);align-content:center;justify-items:center;padding:1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0.5rem 0 var(--pc);color:var(--ink);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.cc-turnhead{display:flex;gap:1rem;font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.cc-turnhead b{color:var(--ink);font-size:1rem}
.cc-tap{text-transform:uppercase;letter-spacing:.06em}
.cc-turnname{font-weight:700;font-size:clamp(1.375rem,6vw,2.25rem);max-width:100%;overflow-wrap:anywhere;text-align:center}
.cc-turntime{font-family:var(--mono);font-weight:700;font-size:clamp(3.5rem,17vw,7rem);line-height:1;font-variant-numeric:tabular-nums}
.cc-turn.is-low .cc-turntime{color:var(--bad)}
.cc-turn.is-over{background:var(--bad);border-color:var(--bad);color:#fff}
.cc-turn.is-over .cc-turnhead,.cc-turn.is-over .cc-turnhead b{color:#fff}
.cc-turn.is-paused{opacity:.7}
.cc-blist{list-style:none;margin:0;padding:0;display:grid;gap:0.375rem}
.cc-blist li{display:flex;align-items:center;gap:0.5rem;padding:0.375rem 0.5rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface);min-width:0}
.cc-blist li.is-turn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cc-blist li.is-skip,.cc-blist li.is-out{opacity:.6}
.cc-blist li.is-skip .cc-bn,.cc-blist li.is-out .cc-bn{text-decoration:line-through}
.cc-blist .cc-dot{width:1rem;height:1rem}
.cc-bn{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-bt{font-family:var(--mono);font-size:0.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cc-skip{padding:0.25rem 0.625rem;font-size:0.8125rem}
#bsetupwrap,#bplay{display:grid;gap:0.75rem}
#bsetupwrap[hidden],#bplay[hidden]{display:none}

@media(prefers-reduced-motion:reduce){.cc-half{transition:none}}
.cc-half:focus-visible,.cc-turn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(min-width:920px){.cc-presets{grid-template-columns:repeat(4,1fr)}}
/* the dark --bad is a light red: dark ink reads on it, white does not */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cc-half.is-flag,:root:not([data-theme="light"]) .cc-half.is-flag .cc-who,:root:not([data-theme="light"]) .cc-half.is-flag .cc-info,:root:not([data-theme="light"]) .cc-half.is-flag .cc-time,
  :root:not([data-theme="light"]) .cc-turn.is-over,:root:not([data-theme="light"]) .cc-turn.is-over .cc-turnhead,:root:not([data-theme="light"]) .cc-turn.is-over .cc-turnhead b{color:var(--signal-ink)}
}
:root[data-theme="dark"] .cc-half.is-flag,:root[data-theme="dark"] .cc-half.is-flag .cc-who,:root[data-theme="dark"] .cc-half.is-flag .cc-info,:root[data-theme="dark"] .cc-half.is-flag .cc-time,:root[data-theme="dark"] .cc-turn.is-over,:root[data-theme="dark"] .cc-turn.is-over .cc-turnhead,:root[data-theme="dark"] .cc-turn.is-over .cc-turnhead b{color:var(--signal-ink)}