/* clock.y6y.io v1.06 | 2026-10-12 21:45 | themes: terminalism, neobrutalist */

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains_mono_latin_400_normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/jetbrains_mono_latin_700_normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/space_grotesk_latin_500_normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space_grotesk_latin_700_normal.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root, :root[data-theme="terminalism"] {
  color-scheme: dark;
  --bg: #1c1d20;
  --card: #232428;
  --field: #1f2023;
  --line: #3a3b41;
  --line-strong: #55565e;
  --text: #ececee;
  --muted: #a3a4aa;
  --dim: #65666d;
  --glow: 0 0 6px rgba(255, 255, 255, .38), 0 0 18px rgba(255, 255, 255, .12);
  --danger: #ff6464;
  --danger-bg: #2c1e20;
  --danger-glow: 0 0 6px rgba(255, 100, 100, .55), 0 0 18px rgba(255, 100, 100, .2);
  --warn: #ffbd5a;
  --warn-bg: #2d2619;
  --warn-glow: 0 0 6px rgba(255, 189, 90, .5);
  --bar: #ececee;
  --radius: 16px;
  --radius-sm: 11px;
  --bw: 1.5px;
  --shadow: none;
  --btn-shadow: none;
  --btn-bg: transparent;
  --primary-bg: transparent;
  --primary-text: var(--text);
  --font-ui: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --num-weight: 400;
  --label-case: lowercase;
  --label-weight: 400;
  --chip-bg: transparent;
  --chip-bw: 0;
  --chip-pad: 0;
}

:root[data-theme="neobrutalist"] {
  color-scheme: light;
  --bg: #f3ede1;
  --card: #fffdf7;
  --field: #ffffff;
  --line: #111111;
  --line-strong: #111111;
  --text: #111111;
  --muted: #333333;
  --dim: #8b8b8b;
  --glow: none;
  --danger: #111111;
  --danger-bg: #ff7a7a;
  --danger-glow: none;
  --warn: #111111;
  --warn-bg: #ffd23f;
  --warn-glow: none;
  --bar: #111111;
  --radius: 10px;
  --radius-sm: 8px;
  --bw: 3px;
  --shadow: 6px 6px 0 #111111;
  --btn-shadow: 3px 3px 0 #111111;
  --btn-bg: #ffffff;
  --primary-bg: #ffd23f;
  --primary-text: #111111;
  --font-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --num-weight: 700;
  --label-case: uppercase;
  --label-weight: 700;
  --chip-bw: 2.5px;
  --chip-pad: 2px 8px;
}

/* per-section accent chips (neobrutalist only) */
:root[data-theme="neobrutalist"] .sec[data-mod="now"] { --chip-bg: #ffd23f; }
:root[data-theme="neobrutalist"] .sec[data-mod="alarms"] { --chip-bg: #ff9b85; }
:root[data-theme="neobrutalist"] .sec[data-mod="timers"] { --chip-bg: #ff8fc2; }
:root[data-theme="neobrutalist"] .sec[data-mod="watches"] { --chip-bg: #7fd4ff; }
:root[data-theme="neobrutalist"] .sec[data-mod="countdowns"] { --chip-bg: #b9f35e; }
:root[data-theme="neobrutalist"] .sec[data-mod="recurring"] { --chip-bg: #cbb0ff; }
:root[data-theme="neobrutalist"] .sec[data-mod="calc"] { --chip-bg: #ffaa62; }
:root[data-theme="neobrutalist"] .sec[data-mod="stamp"] { --chip-bg: #62e3c9; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.noscript { padding: 24px; }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: var(--bw) solid var(--line);
}
.brand { color: var(--text); text-decoration: none; font-size: 1.15rem; white-space: nowrap; }
.brand-main { font-weight: 700; text-shadow: var(--glow); }
.brand-dom { color: var(--muted); }
.top-actions { display: flex; gap: 8px; }

main {
  max-width: 2400px;
  margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* ---------- sections and grid ---------- */
.sec { margin-top: 18px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin-bottom: 8px; }
.sec-add { display: flex; gap: 8px; }
.add-btn { min-height: 34px; }
.sec-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 34px;
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  font-weight: var(--label-weight);
  letter-spacing: .06em;
  text-transform: var(--label-case);
  color: var(--muted);
  background: var(--chip-bg);
  border: var(--chip-bw) solid var(--line);
  padding: var(--chip-pad);
  border-radius: 6px;
}
:root[data-theme="terminalism"] .sec-title::before { content: '>'; color: var(--dim); transition: transform .15s; }
:root[data-theme="terminalism"] .sec-title[aria-expanded="true"]::before { transform: rotate(90deg); }
:root[data-theme="neobrutalist"] .sec-title::after { content: '\2212'; font-weight: 700; }
:root[data-theme="neobrutalist"] .sec-title[aria-expanded="false"]::after { content: '+'; }
:root[data-theme="terminalism"] .sec-title { padding: 4px 2px; }
.sec-title:hover { color: var(--text); }
.sec-title:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.empty { margin: 0; padding: 4px 2px; }
:root[data-theme="neobrutalist"] .sec-title { color: var(--text); box-shadow: 2px 2px 0 #111; }
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  align-items: start;
}
@media (min-width: 560px) { .card.span2 { grid-column: span 2; } }

/* ---------- cards ---------- */
.card {
  position: relative;
  min-width: 0;
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 16px;
  container-type: inline-size;
  transition: background-color .2s, border-color .2s;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  margin-bottom: 4px;
}
.label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-weight: var(--label-weight);
}
.head-right { display: flex; align-items: center; gap: 2px; flex: none; margin-right: -8px; }
.tag {
  flex: none;
  color: var(--muted);
  font-size: .85rem;
  text-transform: var(--label-case);
  white-space: nowrap;
}
:root[data-theme="neobrutalist"] .tag { font-weight: 700; font-size: .75rem; letter-spacing: .04em; }
.big {
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: clamp(1.6rem, 14.5cqi, 2.6rem);
  line-height: 1.15;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.big.mid { font-size: clamp(1.3rem, 11cqi, 2rem); }
.sub {
  font-family: var(--font-num);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.meta { color: var(--dim); font-size: .8rem; margin-top: 6px; overflow-wrap: anywhere; }
:root[data-theme="neobrutalist"] .meta { color: var(--muted); }

/* states */
.card.is-over, .card.is-alarm { background: var(--danger-bg); border-color: var(--danger); }
.card.is-over .big, .card.is-alarm .big { color: var(--danger); text-shadow: var(--danger-glow); }
.card.is-over .tag, .card.is-alarm .tag { color: var(--danger); }
.card.is-due { background: var(--warn-bg); border-color: var(--warn); }
.card.is-due .big { color: var(--warn); text-shadow: var(--warn-glow); }
.card.is-due .tag { color: var(--warn); }
.card.is-alarm { animation: pulse 1s steps(2, jump-none) infinite; }
.card.is-due .big, .card.is-due .sub { color: var(--warn); }
@keyframes pulse { 50% { border-color: var(--line); } }
:root[data-theme="neobrutalist"] .card.is-alarm { animation: none; }
@media (prefers-reduced-motion: reduce) { .card.is-alarm { animation: none; } }

/* ---------- buttons ---------- */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }
.btn {
  min-height: 42px;
  padding: 0 13px;
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--text);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  text-transform: var(--label-case);
  font-weight: var(--label-weight);
  font-size: .95rem;
  white-space: nowrap;
  touch-action: manipulation;
  transition: border-color .15s, color .15s, transform .05s;
}
.btn.small { min-height: 38px; padding: 0 12px; font-size: .85rem; }
.btn.primary { background: var(--primary-bg); color: var(--primary-text); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
:root[data-theme="neobrutalist"] .btn.danger { background: #ff7a7a; color: #111; border-color: #111; }
.btn:hover:not(:disabled) { border-color: var(--text); }
:root[data-theme="terminalism"] .btn:hover:not(:disabled) { text-shadow: var(--glow); }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.btn:disabled { color: var(--dim); border-color: var(--line); cursor: default; box-shadow: none; }
:root[data-theme="neobrutalist"] .btn:disabled { background: #eee7da; color: #8b8b8b; border-color: #8b8b8b; }
:root[data-theme="neobrutalist"] .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.icon-btn {
  flex: none;
  min-width: 40px;
  min-height: 34px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--dim);
  cursor: pointer;
  font-size: .8rem;
  text-transform: var(--label-case);
}
.icon-btn:hover { color: var(--text); }
.icon-btn.armed { color: var(--danger); }
:root[data-theme="neobrutalist"] .icon-btn.armed { color: #c1121f; }
:root[data-theme="neobrutalist"] .icon-btn { color: var(--muted); font-weight: 700; text-decoration: none; }

/* ---------- inputs ---------- */
.title-input {
  min-width: 0;
  flex: 1;
  padding: 2px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  border-radius: 0;
  color: var(--muted);
  font-weight: var(--label-weight);
}
.title-input::placeholder { color: var(--muted); opacity: 1; }
.title-input:hover, .title-input:focus { border-bottom-color: var(--line-strong); outline: none; color: var(--text); }
.hms { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.hms span { color: var(--muted); font-size: 1.3rem; }
.num-in {
  width: 100%;
  min-width: 0;
  height: 54px;
  text-align: center;
  font-family: var(--font-num);
  font-weight: var(--num-weight);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  background: var(--field);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.field { display: grid; gap: 6px; margin-top: 12px; }
.field > span { color: var(--muted); font-size: .85rem; text-transform: var(--label-case); font-weight: var(--label-weight); }
.in {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  background: var(--field);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-num);
}
select.in { font-family: var(--font-ui); }
.in:focus { outline: none; border-color: var(--text); }
.inline-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .inline-dates { grid-template-columns: 1fr; } }
.hint { color: var(--dim); font-size: .8rem; margin: 6px 0 0; }
:root[data-theme="neobrutalist"] .hint { color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--text); }
:root[data-theme="neobrutalist"] .check input { accent-color: #111; }

/* ---------- alarms ---------- */
.alarm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 6px; }
.alarm-row .hms { margin-top: 0; }
.btn.tall { min-height: 54px; min-width: 64px; }
.card.is-off .alarm-row .num-in { color: var(--dim); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 10px 0 8px; }
.day {
  min-width: 0;
  min-height: 38px;
  padding: 0;
  background: transparent;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-family: var(--font-num);
  font-size: .78rem;
  text-transform: var(--label-case);
  cursor: pointer;
  touch-action: manipulation;
}
.day[aria-pressed="true"] { color: var(--text); border-color: var(--text); text-shadow: var(--glow); }
.day:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
:root[data-theme="neobrutalist"] .day { background: #fff; border-color: #111; color: #8b8b8b; font-weight: 700; }
:root[data-theme="neobrutalist"] .day[aria-pressed="true"] { background: #ff9b85; color: #111; box-shadow: 2px 2px 0 #111; }

.vol-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.6em; align-items: center; gap: 8px; margin: 2px 0 6px; min-height: 36px; }
.vol-label { color: var(--muted); font-size: .78rem; text-transform: var(--label-case); font-weight: var(--label-weight); }
.vol { width: 100%; min-width: 0; margin: 0; accent-color: var(--text); }
.vol:disabled { opacity: .4; }
:root[data-theme="neobrutalist"] .vol { accent-color: #111; }
.vol-out { font-family: var(--font-num); font-size: .78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
/* sound toggle: plain button in both states (greying it would read as disabled) */
.mute-btn[aria-pressed] { color: var(--text); border-color: var(--line-strong); text-shadow: none; }
:root[data-theme="neobrutalist"] .mute-btn[aria-pressed] { background: #fff; border-color: #111; box-shadow: var(--btn-shadow); }

/* ---------- progress ---------- */
.bar { height: 4px; margin-top: 12px; background: var(--line); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 100%; background: var(--bar); transform-origin: left; }
:root[data-theme="neobrutalist"] .bar { height: 12px; border: 2.5px solid #111; background: #fff; border-radius: 4px; }
:root[data-theme="neobrutalist"] .bar > i { background: #ff8fc2; border-right: 2.5px solid #111; }

/* ---------- laps ---------- */
.laps { list-style: none; margin: 12px 0 0; padding: 0; max-height: 168px; overflow: auto; font-family: var(--font-num); font-size: .85rem; font-variant-numeric: tabular-nums; }
.laps li { display: grid; grid-template-columns: 3.5em 1fr 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); color: var(--muted); }
:root[data-theme="neobrutalist"] .laps li { border-top: 2px solid #111; }
.laps li b { font-weight: inherit; color: var(--text); }
.laps li span:last-child { text-align: right; }

/* ---------- timestamp ---------- */
.stamp-main {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  text-align: left;
  background: var(--field);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
}
.stamp-main .big { font-size: clamp(1.05rem, 4.6vw, 1.45rem); white-space: normal; overflow-wrap: anywhere; }
.stamp-main .sub { font-size: .8rem; text-transform: var(--label-case); }
:root[data-theme="neobrutalist"] .stamp-main { background: #62e3c9; }
:root[data-theme="neobrutalist"] .stamp-main:active { transform: translate(3px, 3px); box-shadow: none; }
.fmt-list { list-style: none; margin: 12px 0 0; padding: 0; }
.fmt-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
:root[data-theme="neobrutalist"] .fmt-list li { border-top: 2px solid #111; }
.fmt-list input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--text); }
:root[data-theme="neobrutalist"] .fmt-list input[type="radio"] { accent-color: #111; }
.fmt-name { font-size: .78rem; color: var(--muted); font-weight: var(--label-weight); }
.fmt-val { font-family: var(--font-num); font-size: .85rem; overflow-wrap: anywhere; }
.fmt-text { min-width: 0; }

/* ---------- calculator output ---------- */
.out { margin-top: 14px; padding-top: 12px; border-top: var(--bw) solid var(--line); }
.out .sentence { color: var(--muted); margin-top: 4px; }
.kv { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; color: var(--muted); font-family: var(--font-num); font-size: .85rem; }
.kv b { color: var(--text); font-weight: inherit; }

/* ---------- dialog ---------- */
dialog {
  width: min(calc(100vw - 32px), 460px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  background: var(--card);
  color: var(--text);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
:root[data-theme="neobrutalist"] dialog::backdrop { background: rgba(243, 237, 225, .75); }
.dlg-form { padding: 20px; }
.dlg-form h2 { margin: 0 0 4px; font-size: 1.05rem; text-transform: var(--label-case); font-weight: 700; }
.err { color: var(--danger); min-height: 1.2em; margin: 10px 0 0; font-size: .85rem; }
:root[data-theme="neobrutalist"] .err { color: #c1121f; font-weight: 700; }
.set-group { margin-top: 16px; padding-top: 12px; border-top: var(--bw) solid var(--line); }
.set-group h3 { margin: 0 0 4px; font-size: .85rem; color: var(--muted); text-transform: var(--label-case); font-weight: var(--label-weight); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.btn[aria-pressed="true"] { border-color: var(--text); color: var(--text); text-shadow: var(--glow); }
:root[data-theme="neobrutalist"] .btn[aria-pressed="true"] { background: #ffd23f; }

/* ---------- settings: sections and chimes ---------- */
.order-list { list-style: none; margin: 6px 0 0; padding: 0; }
.order-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.order-list .btn.small { min-width: 38px; padding: 0; }
.chime-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* ---------- front-of-screen alert ---------- */
.alert-dlg {
  width: min(calc(100vw - 32px), 420px);
  padding: 24px 22px 22px;
  text-align: center;
  background: var(--danger-bg);
  border-color: var(--danger);
  container-type: inline-size;
}
.alert-dlg::backdrop { background: rgba(0, 0, 0, .72); }
:root[data-theme="neobrutalist"] .alert-dlg { background: #ff7a7a; border-color: #111; }
:root[data-theme="neobrutalist"] .alert-dlg::backdrop { background: rgba(17, 17, 17, .55); }
.alert-kind { color: var(--danger); font-size: .8rem; letter-spacing: .08em; text-transform: var(--label-case); font-weight: var(--label-weight); }
:root[data-theme="neobrutalist"] .alert-kind { color: #111; }
.alert-title { margin-top: 6px; font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.alert-dlg .big { margin-top: 6px; font-size: clamp(2.6rem, 22cqi, 4rem); color: var(--danger); text-shadow: var(--danger-glow); white-space: normal; }
:root[data-theme="neobrutalist"] .alert-dlg .big { color: #111; }
.alert-dlg .sub { color: var(--text); }
.alert-actions { justify-content: center; margin-top: 18px; }
.alert-actions .btn { min-height: 52px; min-width: 120px; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="terminalism"] .alert-dlg[open] { animation: pulse 1s steps(2, jump-none) infinite; }
}

/* ---------- toast ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  background: var(--card);
  color: var(--text);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-family: var(--font-num);
  font-size: .85rem;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s, transform .18s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="neobrutalist"] #toast { background: #ffd23f; }

@media (max-width: 420px) {
  .brand { font-size: 1rem; }
}