/* Byzantine.live embeddable clock. Fills whatever box the host iframe gives it. */
@font-face {
  font-family: "Embed Didot";
  src: url("../../fonts/gfs-didot/GFSDidot-embed-subset.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0020, U+0030-003A, U+0374, U+0384, U+0391-0399, U+03DA;
}
@font-face {
  font-family: "Embed Baskervville";
  src: url("../../fonts/baskervville-embed-latin.woff2") format("woff2");
  font-display: swap;
}

:root {
  --serif: "Embed Baskervville", Georgia, "Times New Roman", serif;
  --numerals: "Embed Didot", "Embed Baskervville", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}
:root[data-theme="light"] {
  --bg: #faf7f1; --face: #fffdf9; --ink: #201f1d; --muted: #6b645a; --line: #ded4c5; --tick: #b9ad9c;
  --red: #a42825; --gold: #b78a45; --night: #2c3a5c; --day: #d9b46a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15110e; --face: #1c1613; --ink: #f3eadb; --muted: #b9ab97; --line: rgb(243 234 219 / .14); --tick: #6e6253;
  --red: #e07a6c; --gold: #c99b55; --night: #3a4670; --day: #c99b55;
}
/* host-chosen colours, set by embed-clock.js only after a contrast check */
:root[data-custom-bg] {
  --bg: var(--custom-bg); --face: var(--custom-bg);
  --ink: var(--custom-ink); --muted: var(--custom-muted); --red: var(--custom-red);
}
:root { --accent: var(--custom-accent, var(--red)); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font: 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
::selection { background: color-mix(in oklab, var(--red) 22%, transparent); }
p { margin: 0; }
.noscript { padding: 12px; }
.noscript a { color: inherit; }

.w { height: 100%; container-type: size; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-time { font-family: var(--numerals); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.t-half { font-family: var(--serif); }
.meta { color: var(--muted); line-height: 1.4; }
.sun { width: 18px; height: 11px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.35; stroke-linecap: round; }
a.t-link {
  color: var(--muted); font-size: 11px; letter-spacing: .01em;
  text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--muted) 45%, transparent); text-underline-offset: .24em;
}
a.t-link:hover { color: var(--ink); }
a.t-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
svg text { font-family: var(--numerals); }

/* dial card */
.dialcard { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 14px 10px; gap: 4px; }
.dialcard .dial { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; }
.dialcard .read { margin-top: 8px; display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.dialcard .read .t-time { font-size: clamp(22px, 9cqi, 32px); line-height: 1; }
.dialcard .read .t-half { font-size: clamp(15px, 5.6cqi, 19px); }
.dialcard .place { color: var(--muted); font-size: 12.5px; }
.place-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialcard .meta { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }

/* strips */
.strip { height: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 8px 14px 8px 10px; }
.strip .mini { height: min(56px, calc(100cqb - 16px)); width: auto; aspect-ratio: 1; display: block; }
.strip .lines { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.strip .read { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; line-height: 1.1; }
.strip .read .t-time { font-size: 24px; }
.strip .read .t-half { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.strip .row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; min-width: 0; }

/* digital card */
.band-card { height: 100%; display: flex; flex-direction: column; padding: 18px 20px 12px; }
.band-card .head { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
.band-card .head .sun { stroke: var(--gold); }
.band-card .read { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: auto 0 16px; }
.band-card .read .t-time { font-size: clamp(44px, 19cqi, 72px); line-height: .9; }
.band-card .read .t-half { font-size: clamp(17px, 6.5cqi, 22px); line-height: 1.1; }
.band { position: relative; height: 10px; border-radius: 2px; background: var(--day); }
.band .seg-n { position: absolute; left: 0; top: 0; bottom: 0; background: var(--night); border-radius: 2px 0 0 2px; }
.band::after {
  content: ""; position: absolute; left: 0; right: -1px; top: calc(100% + 3px); height: 4px; opacity: .55;
  background: repeating-linear-gradient(to right, var(--muted) 0 1px, transparent 1px calc(100% / 24));
}
.band .mid { position: absolute; left: 50%; top: 0; bottom: -8px; width: 1px; background: var(--bg); }
.band .now { position: absolute; top: -7px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--accent); border-radius: 1px; }
.band-labels { position: relative; height: 18px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.band-labels span { position: absolute; top: 0; white-space: nowrap; }
.band-card .foot { margin-top: auto; padding-top: 10px; text-align: right; }
.band-strip { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 14px; }
.band-strip .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.band-strip .read { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; min-width: 0; }
.band-strip .read .t-time { font-size: 28px; line-height: 1; }
.band-strip .read .t-half { font-size: 15px; }
.band-strip .band { height: 6px; }
.band-strip .band .now { top: -4px; bottom: -4px; }
.band-strip .band::after { display: none; }
.band-strip .row2 { font-size: 12px; color: var(--muted); }

/* polar */
.polar { max-width: 32ch; margin: 6px auto 0; text-align: center; }
.polar strong { display: block; font: 400 17px/1.25 var(--serif); }
.polar span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.band-card .polar { margin: auto 0 14px; text-align: left; max-width: none; }

/* hands rotate with CSS so the seconds tick can ease; rotations take the shortest path */
.pv { transform-box: view-box; }
.pv.sec { transition: transform 170ms var(--ease-out); }
.disc { transform-box: view-box; }
[data-seconds="0"] .sec { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sec { display: none; }
  .pv, .disc { transition: none; }
}

[hidden] { display: none !important; }