:root {
  color-scheme: dark;
  --bg: #090c13; --surface: rgba(18,23,35,.76); --line: rgba(255,255,255,.095); --line-strong: rgba(255,255,255,.16);
  --text: #f5f7fb; --muted: #929bad; --muted-strong: #b8c0ce; --accent: #91a8ff; --accent-strong: #afbdff;
  --danger: #ff808b; --night: #11182c; --morning: #766650; --day: #4a6e79; --evening: #4b405e;
  --radius: 22px; --shadow: 0 24px 80px rgba(0,0,0,.3);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 15% -10%,rgba(72,94,167,.16),transparent 32rem),radial-gradient(circle at 88% 24%,rgba(101,72,133,.1),transparent 30rem),linear-gradient(180deg,#0b0e16,#080b11); line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; } button { color:inherit; } button,select { cursor:pointer; } a { color:inherit; } [hidden] { display:none!important; }
.ambient { position:fixed; z-index:-1; border-radius:999px; filter:blur(100px); opacity:.16; pointer-events:none; }
.ambient-one { width:26rem;height:26rem;top:18rem;left:-16rem;background:#4267c7; } .ambient-two { width:22rem;height:22rem;right:-12rem;bottom:7rem;background:#6c4d8e; }
.app-shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:28px 0 36px; }
.site-header { display:flex;align-items:center;justify-content:space-between;gap:24px; }
.brand { display:inline-flex;align-items:center;gap:12px;text-decoration:none; } .brand strong { display:block;font-size:.91rem;letter-spacing:.01em; } .brand small { display:block;margin-top:-2px;color:var(--muted);font-size:.72rem; }
.brand-mark { position:relative;width:37px;height:37px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px rgba(255,255,255,.06); }
.brand-mark span { position:absolute;width:4px;border-radius:4px;background:var(--accent-strong);box-shadow:0 0 12px rgba(145,168,255,.42); }
.brand-mark span:nth-child(1){height:12px;transform:translateX(-7px)}.brand-mark span:nth-child(2){height:20px}.brand-mark span:nth-child(3){height:8px;transform:translateX(7px)}
.header-actions{display:flex;align-items:center;gap:10px}
.button,.icon-button,.modal-close,.row-menu{border:0;border-radius:11px;transition:background-color .18s,border-color .18s,color .18s,transform .18s,opacity .18s}
.button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border:1px solid transparent;font-size:.8rem;font-weight:700;letter-spacing:.01em}.button:hover:not(:disabled){transform:translateY(-1px)}.button:disabled{opacity:.5;cursor:wait}
.button-primary{color:#101420;background:#d8dfff;box-shadow:0 8px 22px rgba(101,124,220,.18)}.button-primary:hover:not(:disabled){background:#eef0ff}.button-quiet{border-color:var(--line);color:var(--muted-strong);background:rgba(255,255,255,.035)}.button-quiet:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.07)}.button-reset{border-color:rgba(145,168,255,.22);color:var(--accent-strong);background:rgba(120,143,232,.09);white-space:nowrap}.button-danger{color:#21090d;background:#ff929c}.button-danger-text{color:var(--danger);background:transparent;padding-inline:3px}.button-danger-text:hover:not(:disabled){background:rgba(255,128,139,.08);padding-inline:11px}
.plus{position:relative;width:12px;height:12px}.plus:before,.plus:after{content:"";position:absolute;background:currentColor;border-radius:2px}.plus:before{width:12px;height:2px;top:5px}.plus:after{width:2px;height:12px;left:5px}.count-badge{min-width:20px;padding:1px 6px;border-radius:99px;color:var(--muted-strong);background:rgba(255,255,255,.08);font-size:.68rem}
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:end;gap:64px;padding:84px 28px 46px}.eyebrow{margin:0 0 15px;color:var(--accent-strong);font-size:.69rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.eyebrow.compact{margin-bottom:8px;font-size:.62rem}.live-dot{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#8ba5ff;box-shadow:0 0 0 4px rgba(139,165,255,.1),0 0 13px #7894f2}.hero h1{margin:0;font-size:clamp(2.35rem,5vw,4.55rem);line-height:.98;letter-spacing:-.062em;font-weight:620}.hero h1 span{color:#8e96a8}.hero-copy{max-width:390px;margin:0 0 5px;color:var(--muted);font-size:.98rem;line-height:1.7}
.clock-card,.time-console{border:1px solid var(--line);background:linear-gradient(155deg,rgba(22,28,42,.88),rgba(13,17,26,.76));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.025);backdrop-filter:blur(24px)}.clock-card{overflow:hidden;border-radius:var(--radius)}
.clock-toolbar{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 23px;border-bottom:1px solid var(--line)}.section-heading-row{display:flex;align-items:center;gap:10px}.clock-toolbar h2,.time-console h2{margin:0;font-size:1rem;letter-spacing:-.015em}.member-count{padding:2px 7px;border-radius:99px;color:var(--muted);background:rgba(255,255,255,.055);font-size:.64rem;font-weight:700}.toolbar-note{margin:3px 0 0;color:var(--muted);font-size:.72rem}.toolbar-note.is-error{color:#ff9ba4}.legend{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:.65rem}.legend span{display:inline-flex;align-items:center;gap:5px}.legend i{width:7px;height:7px;border-radius:2px}.legend-night{background:var(--night);border:1px solid #303c5d}.legend-morning{background:var(--morning)}.legend-day{background:var(--day)}.legend-evening{background:var(--evening)}
.timeline-ruler,.member-row{display:grid;grid-template-columns:210px minmax(360px,1fr) 154px 56px}.timeline-ruler{min-height:45px;color:#6d7688;background:rgba(4,7,12,.25);font-size:.6rem}.ruler-labels{grid-column:2;position:relative;display:flex;align-items:center;justify-content:space-between}.ruler-labels span{transform:translateX(-50%)}.ruler-labels span:last-child{transform:translateX(50%)}.ruler-cursor{grid-column:2;grid-row:1;justify-self:center;align-self:stretch}.member-list{min-height:336px}.member-row{position:relative;min-height:84px;border-top:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.008)}.member-row:first-child{border-top:0}.member-row:hover{background:rgba(255,255,255,.018)}
.member-identity{min-width:0;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 23px}.avatar{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:11px;color:#d5dcf2;background:linear-gradient(145deg,rgba(132,152,218,.2),rgba(86,78,135,.13));font-size:.69rem;font-weight:800;letter-spacing:.03em}.member-name-wrap{min-width:0}.member-name{overflow:hidden;margin:0;font-size:.8rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.member-zone{overflow:hidden;margin:2px 0 0;color:var(--muted);font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}
.member-timeline{position:relative;overflow:hidden;margin:14px 0;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:var(--night)}.time-bands{position:absolute;inset:0;background:var(--phase-night)}.time-bands:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 52%,rgba(15,25,38,.07))}.cursor-line{width:1px;position:relative;z-index:2;pointer-events:none;background:rgba(221,227,255,.9);box-shadow:0 0 11px rgba(178,190,255,.72)}.member-timeline>.cursor-line{position:absolute;top:-5px;bottom:-5px;left:50%}.member-timeline>.cursor-line span{position:absolute;top:-1px;left:-3px;width:7px;height:7px;border-radius:50%;background:#e5e9ff;box-shadow:0 0 9px rgba(180,193,255,.8)}.timeline-edge{position:absolute;top:0;bottom:0;z-index:1;width:32px;pointer-events:none}.timeline-edge-left{left:0;background:linear-gradient(90deg,rgba(8,11,17,.45),transparent)}.timeline-edge-right{right:0;background:linear-gradient(-90deg,rgba(8,11,17,.45),transparent)}
.member-local-time{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:8px 17px 8px 12px}.local-time{font-variant-numeric:tabular-nums;font-size:1.12rem;letter-spacing:-.025em}.local-date{color:var(--muted);font-size:.63rem;text-align:right}.row-menu{align-self:center;justify-self:center;padding:7px 8px;color:#778093;background:transparent;font-size:.67rem}.row-menu:hover{color:var(--text);background:rgba(255,255,255,.06)}
.member-row.placeholder{opacity:.58}.placeholder .avatar{background:rgba(255,255,255,.025)}.placeholder-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06)}.placeholder-name{width:73px;margin-bottom:7px}.placeholder-zone{width:102px;height:6px}.placeholder-time{width:70px;height:13px;margin-left:auto}.placeholder-date{width:92px;height:6px;margin:7px 0 0 auto}.placeholder .member-timeline{background:linear-gradient(90deg,rgba(163,200,220,.13),rgba(203,176,208,.16),rgba(163,200,220,.13))}.placeholder-action{align-self:center;justify-self:center;color:#697183;font-size:.72rem}.skeleton{position:relative;overflow:hidden}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{to{transform:translateX(100%)}}
.error-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 22px;border-top:1px solid rgba(255,128,139,.18);background:rgba(120,35,46,.1)}.error-banner strong{font-size:.75rem}.error-banner p{margin:2px 0 0;color:#ba8e94;font-size:.68rem}
.time-console{display:grid;grid-template-columns:245px minmax(0,1fr);gap:32px;margin-top:18px;padding:25px 28px 22px;border-radius:19px}.time-console-copy p:last-child{margin:5px 0 0;color:var(--muted);font-size:.7rem}.time-controls{display:flex;align-items:flex-end;gap:11px}.selected-time-wrap{flex:1}.control-label{display:block;margin-bottom:7px;color:var(--muted);font-size:.61rem;font-weight:650;letter-spacing:.03em}.date-stepper{display:grid;grid-template-columns:auto 1fr auto;gap:7px}.icon-button{min-width:44px;height:40px;border:1px solid var(--line);color:var(--muted-strong);background:rgba(255,255,255,.03);font-size:.68rem;font-weight:700}.icon-button:hover{border-color:var(--line-strong);color:var(--text);background:rgba(255,255,255,.065)}.datetime-field input{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:11px;color:var(--text);background:rgba(7,10,16,.6);font-size:.76rem;color-scheme:dark}.reset-icon{width:12px;height:12px;border:1.5px solid currentColor;border-left-color:transparent;border-radius:50%;position:relative}.reset-icon:after{content:"";position:absolute;top:-3px;left:-2px;border:3px solid transparent;border-right-color:currentColor;transform:rotate(40deg)}.slider-wrap{grid-column:2;padding-top:1px}.slider-label-row{display:flex;justify-content:space-between;margin-bottom:7px;color:#626b7e;font-size:.58rem}.slider-label-row strong{color:var(--muted-strong);font-size:.62rem;font-variant-numeric:tabular-nums}
.time-slider{width:100%;height:16px;margin:0;appearance:none;background:transparent}.time-slider::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,#32394b,#7689cd 50%,#32394b)}.time-slider::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5.5px;appearance:none;border:3px solid #dae1ff;border-radius:50%;background:#5c6da9;box-shadow:0 0 0 4px rgba(123,145,224,.12),0 0 13px rgba(124,148,235,.5)}.time-slider::-moz-range-track{height:3px;border-radius:99px;background:linear-gradient(90deg,#32394b,#7689cd 50%,#32394b)}.time-slider::-moz-range-thumb{width:9px;height:9px;border:3px solid #dae1ff;border-radius:50%;background:#5c6da9}.slider-ticks{display:flex;justify-content:space-between;padding:0 4px}.slider-ticks i{width:1px;height:3px;background:#353c4c}.site-footer{display:flex;justify-content:space-between;gap:30px;padding:18px 5px 0;color:#555e70;font-size:.61rem}.site-footer p{margin:0}
.modal{width:min(100% - 30px,540px);max-height:min(90vh,760px);padding:0;border:0;border-radius:21px;color:var(--text);background:transparent;box-shadow:0 30px 100px rgba(0,0,0,.6)}.modal::backdrop{background:rgba(3,5,9,.74);backdrop-filter:blur(9px)}.modal-card{overflow:hidden;border:1px solid var(--line-strong);border-radius:21px;background:#121722}.modal-card-small{max-width:480px;margin:auto}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 25px 19px;border-bottom:1px solid var(--line)}.modal-header h2{margin:0;font-size:1.25rem;letter-spacing:-.025em}.modal-header p:last-child{max-width:390px;margin:6px 0 0;color:var(--muted);font-size:.72rem}.modal-close{flex:0 0 auto;width:32px;height:32px;color:var(--muted);background:rgba(255,255,255,.04);font-size:1.3rem;line-height:1}.modal-close:hover{color:var(--text);background:rgba(255,255,255,.08)}.modal-body{padding:22px 25px}.field{display:block;margin-bottom:17px}.field>span{display:block;margin-bottom:7px;color:var(--muted-strong);font-size:.68rem;font-weight:750}.field input,.field select{width:100%;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:11px;outline:none;color:var(--text);background:#0d111a;font-size:.78rem}.field input::placeholder{color:#555e70}.field input:focus,.field select:focus,.datetime-field input:focus-visible{border-color:rgba(145,168,255,.75);box-shadow:0 0 0 3px rgba(120,145,235,.11)}.field small{display:block;margin-top:5px;color:#60697a;font-size:.6rem}.field-divider{display:flex;align-items:center;gap:10px;margin:-2px 0 14px;color:#5c6577;font-size:.6rem}.field-divider:before,.field-divider:after{content:"";flex:1;height:1px;background:var(--line)}.form-error{margin-top:4px;padding:10px 12px;border:1px solid rgba(255,128,139,.22);border-radius:9px;color:#ffadb4;background:rgba(255,90,105,.07);font-size:.69rem}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:16px 25px;border-top:1px solid var(--line);background:rgba(6,9,14,.3)}.footer-spacer{flex:1}.danger-eyebrow{color:var(--danger)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:900px){.hero{padding-inline:10px;gap:35px}.timeline-ruler,.member-row{grid-template-columns:178px minmax(310px,1fr) 136px 48px}.member-identity{padding-left:17px}.time-console{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:740px){.app-shell{width:min(100% - 24px,620px);padding-top:17px}.site-header{align-items:flex-start}.header-actions{gap:6px}.header-actions .button{padding-inline:10px}.hero{display:block;padding:64px 4px 32px}.hero-copy{margin-top:25px}.clock-toolbar{align-items:flex-start;padding:17px}.legend{display:grid;grid-template-columns:repeat(2,auto);gap:4px 12px}.timeline-ruler{display:none}.member-list{min-height:0}.member-row{min-height:122px;grid-template-columns:minmax(0,1fr) 105px 43px;grid-template-rows:56px 58px}.member-identity{grid-column:1;grid-row:1;padding:10px 12px 4px 15px}.member-local-time{grid-column:2;grid-row:1;padding:9px 8px 2px}.row-menu,.placeholder-action{grid-column:3;grid-row:1}.member-timeline{grid-column:1/4;grid-row:2;margin:5px 15px 11px}.time-console{display:block;padding:20px 18px}.time-console-copy{margin-bottom:18px}.time-controls{align-items:stretch;flex-direction:column}.time-controls .button-reset{align-self:flex-end}.slider-wrap{margin-top:18px}.site-footer{display:block;padding-inline:3px}.site-footer p+p{margin-top:5px}}
@media(max-width:470px){.brand small{display:none}.brand-mark{width:34px;height:34px}.header-actions .button{min-height:36px;font-size:.72rem}.hero{padding-top:54px}.hero h1{font-size:clamp(2.3rem,12vw,3.4rem)}.clock-toolbar{display:block}.legend{margin-top:13px;display:flex;flex-wrap:wrap}.avatar{width:31px;height:31px}.member-row{grid-template-columns:minmax(0,1fr) 96px 38px}.member-identity{gap:9px}.local-time{font-size:1rem}.date-stepper{grid-template-columns:39px minmax(0,1fr) 39px}.icon-button{min-width:39px}.datetime-field input{padding-inline:7px;font-size:.7rem}.split-footer{flex-wrap:wrap}.split-footer .button-danger-text{width:100%;justify-content:flex-start}.modal-header,.modal-body,.modal-footer{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Quieter, lighter, less card-shaped clock surface. */
:root {
  --bg:#22374b; --surface:rgba(38,58,75,.68);
  --line:rgba(234,244,253,.17); --line-strong:rgba(234,244,253,.26);
  --muted:#b6c6d5; --muted-strong:#d5e2ed;
  --night:#2c4054; --morning:#9a765f; --day:#668d98; --evening:#725c82;
  --phase-night:#2c4054; --phase-morning:#8c6d5a; --phase-day:#5c8794; --phase-evening:#6a5878;
}
body {
  background:radial-gradient(circle at 5% -10%,rgba(142,172,226,.25),transparent 37rem),
    radial-gradient(circle at 94% 50%,rgba(158,167,205,.15),transparent 37rem),
    linear-gradient(165deg,#2b4156 0%,#21384b 52%,#1b3043 100%);
}
.ambient { opacity:.28; }
.app-shell { padding-top:31px; }
.clock-card,.time-console {
  background:none; border:0; border-radius:0;
  box-shadow:none; backdrop-filter:none;
}
.clock-card { margin-top:46px; overflow:visible; }
.clock-toolbar { min-height:66px; padding:0 3px 15px; border-bottom:1px solid var(--line); }
.clock-toolbar h2 { font-size:1.1rem; }
.toolbar-note:not(.is-error) { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.timeline-ruler { background:none; color:#bbcada; }
.member-row { background:none; border-top:0; border-bottom:1px solid rgba(230,240,250,.12); min-height:100px; }
.member-row:first-child { border-top:0; }
.member-row:hover { background:rgba(245,250,255,.035); }
.member-identity { padding-left:5px; }
.member-timeline { background:var(--phase-night); border-color:rgba(239,247,255,.13); }
.timeline-edge { display:none; }
.time-console {
  grid-template-columns:120px minmax(0,1fr);
  margin-top:27px; padding:27px 3px 16px;
  border-top:1px solid var(--line);
}
.time-console h2 { font-size:1.1rem; }
.time-console-copy p { display:none; }
.icon-button,.datetime-field input { background:rgba(22,40,58,.4); }
.site-footer { color:#b4c6d7; padding:9px 3px 2px; }
/* A single continuous gradient and exact, non-dividing phase anchors. */
.phase-markers { position:absolute; inset:0; z-index:2; pointer-events:none; }
.phase-marker { position:absolute; top:0; bottom:0; width:0; }
.phase-marker:before {
  content:""; position:absolute; top:calc(50% - 2px); left:-2px;
  width:4px; height:4px; border-radius:50%; background:#f5faff;
  box-shadow:0 0 0 2px rgba(39,61,79,.45);
}
.phase-marker-tag {
  position:absolute; left:0; top:5px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; min-width:50px;
  color:#f9fcff; line-height:1.15; white-space:nowrap; text-align:center;
  text-shadow:0 1px 6px rgba(13,24,36,.85);
}
.phase-marker:nth-child(even) .phase-marker-tag { top:auto; bottom:5px; }
.phase-marker.is-right .phase-marker-tag { transform:translateX(-100%); align-items:flex-end; text-align:right; }
.phase-marker.is-left .phase-marker-tag { transform:none; align-items:flex-start; text-align:left; }
.phase-marker-name { font-size:.56rem; font-weight:750; letter-spacing:.01em; }
.phase-marker-time { font-size:.59rem; font-weight:700; color:#ecf5ff; }
@media(max-width:740px) {
  .app-shell { padding-top:20px; }
  .clock-card { margin-top:35px; }
  .clock-toolbar { padding:0 2px 15px; }
  .member-row { min-height:135px; grid-template-rows:54px 81px; }
  .member-identity { padding-left:12px; }
  .member-timeline { margin:3px 13px 12px; }
  .phase-marker-name { display:none; }
  .phase-marker-tag { top:4px; min-width:25px; }
  .phase-marker:nth-child(even) .phase-marker-tag { bottom:4px; }
  .phase-marker-time { font-size:.61rem; }
  .time-console { display:block; padding:20px 1px 12px; }
  .time-console-copy { margin-bottom:12px; }
  .site-footer { padding-inline:1px; }
}
@media(max-width:470px) {
  .member-row { grid-template-rows:54px 81px; }
  .brand strong { font-size:.83rem; }
}
/* Boundary labels remain readable without turning the timeline into a card grid. */
.legend { font-size:.72rem; }
.phase-marker-name { font-size:.63rem; }
.phase-marker-time { font-size:.66rem; }
@media(max-width:740px) { .phase-marker-time { font-size:.7rem; } }

/* The phase times float above a slim, uninterrupted strip. */
.member-timeline {
  align-self:center; display:grid; grid-template-rows:34px 28px;
  height:62px; margin:0; border:0; border-radius:0;
  background:none; overflow:visible;
}
.phase-markers { position:relative; inset:auto; grid-row:1; overflow:visible; }
.phase-marker { top:0; bottom:0; width:0; }
.phase-marker:before { content:none; }
.phase-marker-tag {
  left:0; top:0; bottom:auto; gap:1px; min-width:32px;
  text-shadow:none; color:var(--text);
}
.phase-marker:nth-child(even) .phase-marker-tag { top:0; bottom:auto; }
.phase-marker-time { font-size:.69rem; line-height:1.05; font-weight:700; color:var(--muted-strong); }
.phase-icon { display:block; width:17px; height:17px; flex:none; }
.phase-marker.morning .phase-icon { color:#ffdaaa; }
.phase-marker.day .phase-icon { color:#b6e6ea; }
.phase-marker.evening .phase-icon { color:#e0bce0; }
.phase-marker.night .phase-icon { color:#cadbff; }
.timeline-track {
  position:relative; grid-row:2; height:28px;
  border:1px solid rgba(239,247,255,.18); border-radius:8px;
  background:var(--phase-night); overflow:hidden;
}
.timeline-track>.cursor-line { position:absolute; top:0; bottom:0; left:50%; }
.placeholder .member-timeline { background:none; }
.placeholder .timeline-track {
  background:linear-gradient(90deg,rgba(163,200,220,.13),rgba(203,176,208,.16),rgba(163,200,220,.13));
}
@media(max-width:740px) {
  .member-timeline { margin:0 13px; height:62px; }
  .phase-marker-tag,.phase-marker:nth-child(even) .phase-marker-tag { top:0; bottom:auto; min-width:28px; }
  .phase-marker-time { font-size:.68rem; }
}

/* Boundary times stay above; phase icons sit at the center of each colored area. */
.member-timeline { grid-template-rows:18px 28px; height:46px; }
.phase-marker-tag,.phase-marker:nth-child(even) .phase-marker-tag { top:2px; bottom:auto; }
.phase-area-icons { position:absolute; inset:0; z-index:1; pointer-events:none; }
.phase-area-icon {
  position:absolute; top:50%; display:grid; place-items:center;
  width:20px; height:20px; transform:translate(-50%,-50%);
  filter:drop-shadow(0 1px 3px rgba(15,29,43,.68));
}
.phase-area-icon .phase-icon { width:18px; max-width:calc(100% - 2px); height:18px; }
.phase-area-icon.morning { color:#fff2d5; }
.phase-area-icon.day { color:#edffff; }
.phase-area-icon.evening { color:#f6e4ff; }
.phase-area-icon.night { color:#e7eeff; }
@media(max-width:740px) {
  .member-timeline { height:46px; }
  .phase-marker-tag,.phase-marker:nth-child(even) .phase-marker-tag { top:2px; }
  .phase-area-icon .phase-icon { width:16px; height:16px; }
}

/* Follow the device theme: the page itself is white or black, not blue. */
:root {
  color-scheme:light;
  --bg:#fff; --text:#1d2938; --muted:#607083; --muted-strong:#405269;
  --line:rgba(25,43,63,.15); --line-strong:rgba(25,43,63,.24);
  --accent:#385eaf; --accent-strong:#355d9b; --danger:#a9354c;
  --control:#f4f6f8; --field:#fff; --modal-surface:#fff;
  --avatar-ink:#334761; --avatar-surface:#e9eef6;
  /* Translucent, restrained day phases on a neutral base. */
  --phase-base:#fff;
  --phase-night:rgba(0,0,0,.14); --phase-morning:rgba(122,97,79,.14);
  --phase-day:rgba(92,123,114,.12); --phase-evening:rgba(117,98,116,.14);
}
html, body { background:#fff; }
.ambient { display:none; }
.brand-mark, .button-quiet, .icon-button, .modal-close, .count-badge,
.member-count, .placeholder .avatar, .placeholder-bar { background:var(--control); }
.button-primary { color:#fff; background:#345b98; box-shadow:none; }
.button-primary:hover:not(:disabled) { background:#254879; }
.button-quiet:hover:not(:disabled), .icon-button:hover, .modal-close:hover { background:#e8edf3; }
.button-reset { color:var(--accent-strong); background:#edf2fa; border-color:var(--line); }
.clock-toolbar, .member-row, .time-console { border-color:var(--line); }
.member-row:hover { background:rgba(25,43,63,.025); }
.timeline-ruler, .site-footer, .slider-label-row, .field small, .field-divider,
.placeholder-action { color:var(--muted); }
.row-menu { color:var(--muted-strong); }
.row-menu:hover { background:var(--control); }
.datetime-field input, .field input, .field select {
  color-scheme:light; color:var(--text); background:var(--field);
}
.field input::placeholder { color:var(--muted); }
.modal-card { color:var(--text); background:var(--modal-surface); box-shadow:0 25px 80px rgba(18,30,48,.16); }
.modal-footer { background:var(--control); }
.form-error { color:#99243d; background:#fff2f4; }
.error-banner p { color:var(--muted); }
.slider-ticks i { background:var(--line-strong); }
.time-slider::-webkit-slider-runnable-track { background:linear-gradient(90deg,#bdc7d5,#5573ad 50%,#bdc7d5); }
.time-slider::-moz-range-track { background:linear-gradient(90deg,#bdc7d5,#5573ad 50%,#bdc7d5); }
.time-slider::-webkit-slider-thumb, .time-slider::-moz-range-thumb { border-color:#fff; }

/* The input and date stepper can shrink without letting native controls overlap. */
.time-controls { min-width:0; flex-direction:column; align-items:stretch; }
.selected-time-wrap, .slider-wrap { min-width:0; width:100%; }
.date-stepper { width:100%; min-width:0; grid-template-columns:44px minmax(0,1fr) 44px; }
.date-stepper .icon-button { width:44px; min-width:0; }
.datetime-field { display:block; min-width:0; width:100%; overflow:hidden; }
.datetime-field input { display:block; min-width:0; max-width:100%; padding-inline:8px; }
.time-controls .button-reset { align-self:center; min-width:88px; }
.slider-label-row { align-items:baseline; gap:4px; }
.slider-label-row span { flex:none; }
.slider-label-row strong { min-width:0; text-align:center; }
.time-slider { height:30px; cursor:pointer; }
.time-slider::-webkit-slider-thumb {
  width:24px; height:24px; margin-top:-10.5px; border-width:3px;
  box-shadow:0 0 0 4px rgba(85,115,173,.13);
}
.time-slider::-moz-range-thumb { width:18px; height:18px; border-width:3px; }

/* Each phase is translucent over one neutral strip; stops meet exactly. */
.timeline-track { background:var(--phase-base); border-color:var(--line); }
.time-bands { background-color:var(--phase-base); }
.time-bands:after { content:none; }
.timeline-edge-left, .timeline-edge-right { background:none; }
.placeholder .timeline-track { background:var(--control); }
.phase-area-icon { filter:none; }
.phase-area-icon.night { color:#485363; }
.phase-area-icon.morning { color:#776459; }
.phase-area-icon.day { color:#57726d; }
.phase-area-icon.evening { color:#756374; }
.legend-night { background:var(--phase-night); border-color:var(--line); }
.legend-morning { background:var(--phase-morning); }
.legend-day { background:var(--phase-day); }
.legend-evening { background:var(--phase-evening); }

.avatar {
  width:46px; height:46px; border-radius:50%; overflow:hidden;
  border:1px solid var(--line); background:var(--avatar-surface); color:var(--avatar-ink);
  font-size:.8rem; font-weight:750; letter-spacing:.015em;
}
.avatar img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avatar-button { appearance:none; padding:0; cursor:zoom-in; }
.avatar-button:hover { border-color:var(--accent); transform:scale(1.045); }
.member-identity { gap:13px; }
.edit-photo { display:flex; align-items:center; gap:15px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.edit-photo-avatar { width:62px; height:62px; font-size:1rem; }
.edit-photo-actions { min-width:0; }
.edit-photo-actions>span { display:block; margin-bottom:8px; color:var(--muted-strong); font-size:.72rem; font-weight:700; }
.edit-photo-actions>div { display:flex; flex-wrap:wrap; gap:8px; }
.edit-photo-actions .button { min-height:34px; padding:0 10px; font-size:.68rem; }
.edit-photo-actions .button:disabled { opacity:.44; }
.photo-dialog {
  position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; border-radius:0; color:#fff; background:#000;
  overflow-y:auto; overscroll-behavior:contain;
}
.photo-dialog::backdrop { background:#000; }
.photo-close {
  position:fixed; z-index:2; top:max(18px,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right));
  width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; font-size:1.55rem; line-height:1; cursor:pointer;
}
.photo-close:hover { background:rgba(255,255,255,.18); }
.photo-content { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:19px; padding:75px 20px max(65px,env(safe-area-inset-bottom)); }
.photo-avatar { width:clamp(190px,54vw,270px); height:clamp(190px,54vw,270px); font-size:3.2rem; color:#fff; background:#34465b; border:2px solid rgba(255,255,255,.23); box-shadow:0 18px 60px rgba(0,0,0,.5); }
.photo-avatar.has-picture { background:#111; }
.photo-name { font-size:1.1rem; font-weight:650; }
.photo-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.photo-action-primary { color:#111; background:#fff; }
.photo-action-primary:hover:not(:disabled) { background:#dfe7f3; }
.photo-action-secondary { border:1px solid rgba(255,255,255,.32); color:#fff; background:transparent; }
.photo-action-secondary:hover:not(:disabled) { background:rgba(255,255,255,.12); }
.photo-message { color:#ffabb8; font-size:.8rem; text-align:center; }

@media(prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --bg:#000; --text:#f4f6f9; --muted:#a1afbe; --muted-strong:#c5d1dd;
    --line:rgba(232,241,250,.18); --line-strong:rgba(232,241,250,.27);
    --accent:#a1b8ff; --accent-strong:#b3c4ff; --danger:#ff8998;
    --control:#141a21; --field:#10151d; --modal-surface:#111820;
    --avatar-ink:#e1eaf7; --avatar-surface:#233347;
    --phase-base:#141920;
    --phase-night:rgba(0,0,0,.38); --phase-morning:rgba(161,138,118,.18);
    --phase-day:rgba(142,164,157,.17); --phase-evening:rgba(155,131,149,.17);
  }
  html,body { background:#000; }
  .button-primary { color:#111923; background:#d7e2ff; }
  .button-primary:hover:not(:disabled) { background:#edf2ff; }
  .button-quiet:hover:not(:disabled), .icon-button:hover, .modal-close:hover { background:#242f3d; }
  .button-reset { background:#1a2638; }
  .member-row:hover { background:rgba(245,250,255,.035); }
  .datetime-field input, .field input, .field select { color-scheme:dark; }
  .modal-footer { background:#111820; }
  .form-error { color:#ffb3bd; background:#28131a; }
  .time-slider::-webkit-slider-runnable-track { background:linear-gradient(90deg,#424b58,#879ed0 50%,#424b58); }
  .time-slider::-moz-range-track { background:linear-gradient(90deg,#424b58,#879ed0 50%,#424b58); }
  .phase-area-icon.night { color:#dce3eb; }
  .phase-area-icon.morning { color:#ead8c5; }
  .phase-area-icon.day { color:#d1e7e0; }
  .phase-area-icon.evening { color:#e5d5e4; }
}
@media(max-width:740px) {
  .avatar { width:44px; height:44px; }
  .edit-photo-avatar { width:60px; height:60px; }
  .photo-avatar { width:min(56vw,230px); height:min(56vw,230px); }
  .member-identity { gap:11px; }
}
@media(max-width:470px) {
  .avatar { width:43px; height:43px; }
  .edit-photo-avatar { width:58px; height:58px; }
  .photo-avatar { width:200px; height:200px; }
  .photo-actions .button { min-height:44px; }
}

/* A single, compact title and add control at every width. */
.page-title { margin:0; font-size:1rem; font-weight:750; line-height:1; }
.brand { gap:10px; font-size:1rem; }
.brand-clock { width:60px; height:60px; flex:none; color:var(--accent-strong); }
.header-actions { gap:11px; }
/* Icon-only add control: quiet at rest, a full-size tap target on phones. */
.header-actions .add-control {
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; padding:0; border:0; border-radius:11px;
  color:var(--muted-strong); background:transparent;
  transition:color .18s, background-color .18s;
}
.header-actions .add-control:hover { color:var(--text); background:var(--control); }
.header-actions .add-control svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.clock-card { margin-top:31px; }
.clock-card > .toolbar-note.is-error { margin:0; padding:10px 3px; color:var(--danger); border-bottom:1px solid var(--line); }
.timeline-track>.cursor-line, .ruler-cursor {
  z-index:3; width:2px; background:#f44152; box-shadow:none; filter:none;
}
.timeline-track>.cursor-line { transform:translateX(-50%); }
/* Progressive, real display-headroom colors rather than a fake CSS blur.
   Unknown HDR syntax is ignored and the straight SDR red line remains. */
@media (dynamic-range: high) {
  @supports (background-color: color(rec2100-linear 6 0.16 0.22)) {
    .timeline-track>.cursor-line, .ruler-cursor {
      background-color:color(rec2100-linear 6 0.16 0.22);
      dynamic-range-limit:no-limit;
    }
    .phase-area-icon.morning { color:color(rec2100-linear 1.6 1.2 0.65); }
    .phase-area-icon.day { color:color(rec2100-linear 1.15 1.65 1.8); }
    .phase-area-icon.evening { color:color(rec2100-linear 1.65 1.0 1.8); }
    .phase-area-icon.night { color:color(rec2100-linear 1.0 1.4 1.85); }
  }
}
@media(max-width:740px) {
  .site-header { align-items:center; }
  .clock-card { margin-top:27px; }
}
@media(max-width:470px) {
  .date-stepper { grid-template-columns:44px minmax(0,1fr) 44px; }
  .date-stepper .icon-button { width:44px; }
  .datetime-field input { font-size:.75rem; }
  .brand { gap:8px; }
  .brand-clock { width:54px; height:54px; }
  .header-actions { gap:7px; }
}

@media(max-width:350px) {
  .datetime-field { grid-column:1/-1; grid-row:1; }
  .date-stepper .icon-button { grid-row:2; }
  #previousDay { grid-column:1; }
  #nextDay { grid-column:3; }
}

/* Keep the desktop controls as easy to scan as the phone controls. */
.time-controls, .slider-wrap { max-width:520px; margin-inline:auto; }

/* One readable, white button treatment on light devices at every width. */
@media(prefers-color-scheme:light) {
  .button-primary, .button-quiet, .icon-button, .button-reset {
    color:#243447; background:#fff; border:1px solid #9baaba;
    box-shadow:0 1px 2px rgba(25,43,63,.07);
  }
  .button-primary { border-color:#64798d; }
  .button-primary:hover:not(:disabled), .button-quiet:hover:not(:disabled),
  .icon-button:hover:not(:disabled), .button-reset:hover:not(:disabled) {
    color:#172637; background:#f0f3f6; border-color:#64798d;
  }
}

/* City suggestions stay inside the member dialog and remain keyboard reachable. */
.place-field > label { display:block; margin-bottom:7px; color:var(--muted-strong); font-size:.68rem; font-weight:750; }
.place-suggestions { margin:6px 0 0; padding:4px; list-style:none; min-height:50px; max-height:190px; overflow-y:auto; border:1px solid var(--line-strong); border-radius:11px; background:var(--modal-surface); }
.place-suggestions li { margin:0; padding:9px 10px; border-radius:8px; color:var(--text); font-size:.76rem; cursor:pointer; }
.place-suggestions li:hover, .place-suggestions li[aria-selected="true"] { background:var(--control); }
.place-suggestions[aria-busy="true"] li[role="option"] { pointer-events:none; }
.place-suggestions .place-hint { color:var(--muted); cursor:default; }
/* Make the state-only explanation unmistakable in either device theme. */
.place-suggestions .place-hint.is-guidance { color:#000; font-size:.8rem; font-weight:800; line-height:1.45; }
@media(prefers-color-scheme:dark) { .place-suggestions .place-hint.is-guidance { color:#fff; } }
.place-field .place-credit { margin-top:7px; font-size:.58rem; }
.place-credit a { color:var(--muted-strong); text-decoration:underline; text-underline-offset:2px; }

/* A single lightweight quotation floats between the header and the clocks. */
.daily-quote {
  width:min(100%,720px); margin:18px auto 0; padding:14px 18px;
  border:1px solid var(--line); border-radius:15px;
  color:var(--text); background:var(--control); text-align:center;
}
.daily-quote-label { display:block; margin-bottom:6px; color:var(--muted-strong); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.daily-quote blockquote { margin:0; font-size:.84rem; font-weight:400; font-style:italic; line-height:1.5; overflow-wrap:anywhere; text-wrap:pretty; }
.daily-quote figcaption { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:3px 12px; margin-top:7px; color:var(--muted); font-size:.64rem; }
.daily-quote a { color:var(--muted-strong); text-decoration:underline; text-underline-offset:2px; }
.daily-quote:not([hidden]) + .clock-card { margin-top:18px; }
@media(max-width:470px) {
  .daily-quote { margin-top:12px; padding:13px 15px; }
  .daily-quote blockquote { font-size:.78rem; }
}

/* Weather is always current, independent of the time scrubber; never an emoji. */
.member-weather { display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; margin-top:2px; color:var(--muted-strong); font-size:.64rem; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; }
.member-weather .weather-icon { flex:none; width:15px; height:15px; }
.member-weather.is-clear .weather-icon, .member-weather.is-partly-cloudy .weather-icon { color:#a77841; }
.member-weather.is-rain .weather-icon, .member-weather.is-storm .weather-icon { color:#5079aa; }
.member-weather.is-snow .weather-icon { color:#6994b4; }
.weather-now { margin-left:2px; color:var(--muted); font-size:.55rem; }
.weather-credit { color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
@media(prefers-color-scheme:dark) {
  .member-weather.is-clear .weather-icon, .member-weather.is-partly-cloudy .weather-icon { color:#dfb887; }
  .member-weather.is-rain .weather-icon, .member-weather.is-storm .weather-icon { color:#a4c7ee; }
  .member-weather.is-snow .weather-icon { color:#b5dbef; }
}
@media(max-width:740px) {
  .member-row { min-height:153px; grid-template-rows:72px 81px; }
  .member-local-time { justify-content:flex-start; padding:8px 8px 0; }
}
@media(max-width:470px) {
  .member-weather { gap:2px; font-size:.6rem; }
  .member-weather .weather-icon { width:13px; height:13px; }
  .weather-now { margin-left:1px; font-size:.52rem; }
}

/* The group link opens straight into the clock; this brief page contains no member data. */
.invite-shell { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:24px; text-align:center; }
.invite-shell h1 { margin:0; font-size:1.1rem; }
.invite-shell p { margin:0; color:var(--muted-strong); font-size:.76rem; }