/* Session Clock — the countdown to the next thing, big and in colour.
   One colour per session. Amber = inside an alert lead. Red = news / last minute. */
:root {
  --bg: rgba(16, 16, 18, 0.94); --bg2: rgba(255,255,255,0.05); --line: rgba(255,255,255,0.09);
  --fg: #eeece7; --dim: #9a978f; --dimmer: #5f5d58;
  --asia: #56b4d3; --london: #b48ee6; --newyork: #e6c97a; --news: #e0685c; --timer: #f0a642; --other: #9fd3a4;
  --amber: #f0a642; --red: #e0685c;
  --glow: #ff4fd8;
  --mono: "SF Mono", Menlo, "JetBrains Mono", monospace; --sans: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
}
body.light {
  --bg: rgba(248,247,244,0.96); --bg2: rgba(0,0,0,0.045); --line: rgba(0,0,0,0.09);
  --fg: #1a1917; --dim: #66645e; --dimmer: #aaa8a1;
  --asia: #1f7f9e; --london: #6d4fb3; --newyork: #9a7a1c; --news: #b8433a; --timer: #b86f0e; --other: #2f7d4a;
  --amber: #b86f0e; --red: #b8433a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--page); }
body { font-family: var(--sans); color: var(--fg); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; overflow-x: hidden; overflow-y: auto; font-size: 14px; cursor: default; min-height: 100vh; min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
.drag { -webkit-app-region: drag; }
.nodrag, button, input, .grp .h, .ev .bell, .ev .x { -webkit-app-region: no-drag; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.hidden { display: none !important; }
#widget { width: 100%; max-width: 680px; margin: 0 auto; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
body.glow #widget { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow), 0 0 14px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 34px color-mix(in srgb, var(--glow) 28%, transparent), inset 0 0 18px color-mix(in srgb, var(--glow) 8%, transparent); }
body.glow-pink { --glow: #ff4fd8; } body.glow-purple { --glow: #a26bff; } body.glow-blue { --glow: #3fb6ff; } body.glow-teal { --glow: #2fe6c2; }
html { padding: 0; }
body { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }

#bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; row-gap: 2px; padding: 9px 10px 0 14px; font-size: 13px; }
#bar .lbl { font-size: 9px; letter-spacing: .12em; color: var(--dimmer); font-weight: 700; margin-right: 6px; }
#bar .spacer { flex: 1; }
#bar .ic { background: transparent; border: 0; color: var(--dimmer); font-size: 14px; width: 24px; height: 22px; border-radius: 6px; cursor: pointer; }
#bar .ic:hover { background: var(--bg2); color: var(--fg); }
#bar .ic.on { color: var(--fg); }

#hero { padding: 6px 14px 12px; border-bottom: 1px solid var(--line); }
#hero .lbl { font-size: 10px; letter-spacing: .16em; color: var(--dim); font-weight: 700; }
#heroName { font-size: clamp(19px, 3.4vw, 28px); font-weight: 700; margin-top: 2px; line-height: 1.15; }
#heroCount { font-size: clamp(46px, 13vw, 112px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-top: 2px; color: var(--c, var(--fg)); }
#heroWhen { font-size: clamp(12.5px, 2vw, 15px); margin-top: 4px; }
#hero.lead #heroCount, #hero.lead .lbl { color: var(--amber); }
#hero.soon #heroCount { color: var(--red); animation: throb 1s ease-in-out infinite; }
#hero.closed #heroCount { color: var(--dim); }
@keyframes throb { 50% { opacity: .55; } }

#addBox { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg2); }
#addBox .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#addBox input { font: inherit; font-size: 16px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; min-width: 0; }
#addMin { width: 62px; } #addAt { width: 82px; } #addLabel { flex: 1 1 110px; }
#addBox .or { font-size: 11px; color: var(--dim); white-space: nowrap; }
#addBox button { font: inherit; font-size: 12px; font-weight: 700; background: var(--timer); color: #141416; border: 0; border-radius: 7px; padding: 6px 9px; cursor: pointer; }
#addBox .hint { font-size: 10.5px; color: var(--dim); margin-top: 5px; }

.grp { border-bottom: 1px solid var(--line); }
.grp:last-child { border-bottom: 0; }
.grp .h { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; }
.grp .h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.grp .h .name { font-size: 11px; letter-spacing: .16em; font-weight: 800; color: var(--c); }
.grp .h .caret { font-size: 9px; color: var(--dimmer); transition: transform .15s; }
.grp.open .h .caret { transform: rotate(90deg); }
.grp .h .peek { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--c); }
.grp .h .peek .n { color: var(--dim); font-weight: 500; margin-right: 6px; font-family: var(--sans); }
.grp.open .h .peek { display: none; }
.grp .body { display: none; padding: 0 8px 6px; }
.grp.open .body { display: block; }

.ev { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 9px; }
.ev:hover { background: var(--bg2); }
.ev .bell { font-size: 11px; text-align: center; cursor: pointer; color: var(--dimmer); }
.ev .bell.on { color: var(--c); }
.ev .nm { font-size: 14px; font-weight: 500; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev .nm small { display: block; font-size: 10.5px; color: var(--dim); font-weight: 400; }
.ev .at { font-size: 13px; color: var(--dim); }
.ev .cd { font-size: 15px; font-weight: 700; min-width: 66px; text-align: right; color: var(--c); }
.ev .x { font-size: 12px; color: var(--dimmer); cursor: pointer; padding: 0 2px; }
.ev.done { opacity: .38; } .ev.done .cd { color: var(--dim); font-weight: 400; font-size: 12px; }
.ev.lead { background: rgba(240,166,66,0.13); } .ev.lead .cd { color: var(--amber); }
.ev.soon .cd { color: var(--red); animation: throb 1s ease-in-out infinite; }
.ev.skip { opacity: .82; }
.ev.skip .nm small { color: var(--amber); }
.ev.pulse { animation: pulse 1s ease-in-out 4; }
@keyframes pulse { 0%, 100% { background: transparent; } 50% { background: rgba(240,166,66,0.25); } }
#hero.pulse { animation: pulse 1s ease-in-out 4; }
.empty { padding: 8px 14px 10px; font-size: 12px; color: var(--dim); }

/* pocket-watch pill */
body.pill #pill { margin: 32px auto 0; }
#pill { display: none; width: 74px; height: 74px; border-radius: 50%; background: #16121e; border: 1px solid var(--line); position: relative; align-items: center; justify-content: center; cursor: grab; overflow: visible; }
#pill:active { cursor: grabbing; }
body.pill #pill { display: flex; }
body.pill #widget { display: none; }
body.glow #pill { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow), 0 0 12px color-mix(in srgb, var(--glow) 65%, transparent), 0 0 26px color-mix(in srgb, var(--glow) 30%, transparent); }
#pill:hover { transform: scale(1.04); }
#pill svg { width: 78px; height: 78px; }
#pill .sub { bottom: -6px; }
#pill .sub { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 9px; font-weight: 700; color: #fff; background: rgba(20,16,26,.92); padding: 0 5px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; }
#pill .sub.lead { color: var(--amber); } #pill .sub.soon { color: var(--red); }
#pill .sub:empty { display: none; }

#pill img.own { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* web: page ground, touch sizes, narrow (iPad Slide Over) */
:root { --page: #0d0b12; }
body.light { --page: #ecebe7; }
.ev .nm { min-width: 0; }
@media (pointer: coarse) {
  #bar .ic { width: 34px; height: 32px; font-size: 17px; }
  .ev { padding: 9px 6px; }
  .ev .bell { font-size: 14px; padding: 6px 0; }
  .grp .h { padding: 12px 14px; }
}
@media (max-width: 380px) {
  #bar { padding: 8px 6px 0 12px; }
  #bar .lbl { margin-right: 2px; }
  #bar .ic { width: 28px; }
  .ev { gap: 6px; grid-template-columns: 18px 1fr auto auto; }
  .ev .cd { min-width: 56px; font-size: 14px; }
  .ev .at { font-size: 12px; }
  #addMin { width: 70px; } #addAt { width: 96px; }
}
#pill.own svg { display: none; }