/* Meeting time zone planner OVL-35. Instrument Sheet chassis, accent #1F6A5A (deep green). */
:root{
  --paper:#EDE9E2;
  --ink:#1E1D1B;
  --panel:#DEDACF;
  --line:#B7B0A2;
  --chassis:#2A2924;
  --accent:#1F6A5A;
  --on-accent:#EDE9E2;          /* paper on this green is 5.3:1 */
  --font-ui:"Familjen Grotesk",system-ui,sans-serif;
  --font-spec:"Martian Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --who:340px;                  /* the person column on the board */
  --rd:104px;                   /* the readout column */
}
@media (prefers-color-scheme:dark){
  :root{--paper:#1E1D1B;--ink:#EDE9E2;--panel:#2A2924;--line:#4A473F;--chassis:#111;color-scheme:dark}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.55;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ol,ul,figure,pre,fieldset{margin:0}
[hidden]{display:none!important}
code{font-family:var(--font-spec);font-size:.8em}

/* label strip */
.strip{max-width:1120px;margin:0 auto;padding:18px 32px 0;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;border-bottom:1px solid var(--line)}
.strip-maker{text-decoration:none;padding-bottom:12px}
.strip-maker:hover{text-decoration:underline;text-underline-offset:3px}
.strip-code{padding-bottom:12px}

/* page */
.wrap{max-width:1120px;margin:0 auto;padding:40px 32px 0}
.title{font-size:4.5rem;font-weight:600;line-height:1;letter-spacing:-.01em;margin-bottom:16px}
.lede{font-size:1.125rem;max-width:58ch;margin-bottom:28px}
.subhead{font-size:1.375rem;font-weight:500;line-height:1.25;margin-bottom:6px}
.section-head{font-size:2rem;font-weight:600;line-height:1.1;margin:40px 0 14px}

/* hero panel: paper, 1px line, corner ticks in the accent */
.hero{position:relative;border:1px solid var(--line);background:var(--paper);padding:28px 32px 24px}
.hero::before,.hero::after,.hero>.ticks::before,.hero>.ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--accent);pointer-events:none;z-index:2}
.hero::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.hero::after{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.hero>.ticks::before{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.hero>.ticks::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}

.top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:start;margin-bottom:28px}

/* the answer: enormous, in the accent */
.answer-label{font-weight:500;font-size:1.0625rem;margin-bottom:2px}
.answer-time{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 18px;line-height:1;margin-bottom:12px}
.big{display:inline-block;font-size:6.5rem;font-weight:600;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:.95}
.big.is-stamp{animation:stamp .26s var(--ease)}
@keyframes stamp{0%{transform:translateY(-.06em) scale(1.04);opacity:.6}70%{transform:translateY(.01em) scale(1)}100%{transform:none;opacity:1}}
.big-day{font-size:1.375rem;font-weight:500;color:var(--ink)}
.lines{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px 0;max-width:60ch}
.lines li{display:inline-flex;align-items:baseline;gap:8px;padding:2px 14px 2px 0;margin-right:14px;border-right:1px solid var(--line);font-size:1.0625rem;line-height:1.3}
.lines li:last-child{border-right:0;margin-right:0;padding-right:0}
.lines .t{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.lines .d{font-family:var(--font-spec);font-size:.7rem;font-weight:500;opacity:.8}
.lines .opt{opacity:.62}
.nope{max-width:52ch;font-size:1.0625rem;margin-bottom:16px}
.nope b{font-weight:600}

/* buttons */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn{position:relative;display:inline-block;padding:12px 18px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:500;line-height:1.2;cursor:pointer;border-radius:0;text-decoration:none}
.btn:hover{background:var(--panel)}
.btn:disabled{opacity:.45;cursor:default}
.btn.is-done{background:var(--ink);color:var(--paper)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent)}
.btn-primary.is-done{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-primary .ticks{position:absolute;inset:0;pointer-events:none}
.btn-primary::before,.btn-primary::after,.btn-primary .ticks::before,.btn-primary .ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--accent);opacity:0;pointer-events:none}
.btn-primary::before{top:-6px;left:-6px;border-top-width:1px;border-left-width:1px}
.btn-primary::after{top:-6px;right:-6px;border-top-width:1px;border-right-width:1px}
.btn-primary .ticks::before{bottom:-6px;left:-6px;border-bottom-width:1px;border-left-width:1px}
.btn-primary .ticks::after{bottom:-6px;right:-6px;border-bottom-width:1px;border-right-width:1px}
.btn-primary:hover::before,.btn-primary:hover::after,.btn-primary:hover .ticks::before,.btn-primary:hover .ticks::after,
.btn-primary:focus-visible::before,.btn-primary:focus-visible::after,.btn-primary:focus-visible .ticks::before,.btn-primary:focus-visible .ticks::after{opacity:1}
.btn-primary:focus-visible{outline-offset:4px}

/* settings */
.settings{display:grid;gap:18px;padding-top:6px}
.field{min-width:0}
.field>label,.field-label{display:block;font-weight:500;margin-bottom:8px}
input[type=text],input[type=date],input[type=time]{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:9px 12px;line-height:1.2;min-width:0;max-width:100%}
input[type=text]:focus,input[type=date]:focus,input[type=time]:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
input::placeholder{color:var(--ink);opacity:.5}
input[type=date]{width:100%;max-width:220px;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--ink)}
.seg button{padding:9px 14px;border:0;background:var(--paper);color:var(--ink);font-weight:500;cursor:pointer;border-radius:0;white-space:nowrap}
.seg button+button{border-left:1px solid var(--ink)}
.seg button[aria-checked=true]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline-offset:-3px}
.add{position:relative}
.add input{width:100%}
.add-hint{font-size:.9375rem;opacity:.75;margin-top:6px}

/* pickers (shared by the add box and every row) */
.pick{position:absolute;left:0;right:0;top:100%;z-index:20;list-style:none;padding:0;margin:2px 0 0;background:var(--paper);border:1px solid var(--ink);max-height:270px;overflow:auto}
.pick li{display:flex;gap:12px;align-items:baseline;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.pick li:last-child{border-bottom:0}
.pick li[aria-selected=true],.pick li:hover{background:var(--panel)}
.pick .p-name{font-weight:500;white-space:nowrap}
.pick .p-zone{font-family:var(--font-spec);font-size:.7rem;font-weight:500;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.pick .p-off{font-family:var(--font-spec);font-size:.7rem;font-weight:500;white-space:nowrap}

/* THE BOARD: the accent shape */
.board{position:relative;border-top:1px solid var(--ink);padding-top:6px}
.axis,.score-row,.row{display:grid;grid-template-columns:var(--who) minmax(0,1fr) var(--rd);gap:0 18px;align-items:center}
.axis{font-family:var(--font-spec);font-size:.7rem;font-weight:500;letter-spacing:.02em;height:46px;align-items:end}
.axis-hours{position:relative;height:100%}
.axis-hours span{position:absolute;bottom:4px;transform:translateX(-50%)}
.axis-right{text-align:right;opacity:0}
.axis-label{opacity:.75;padding-bottom:4px}
.cells{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));gap:0;height:52px;position:relative;touch-action:none;cursor:col-resize}
.cells .mark{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);pointer-events:none;display:none}
.cells i{display:block;height:100%;background:transparent;border-left:1px solid transparent;transition:background .12s}
.cells i:nth-child(6n+1){border-left-color:var(--line)}
.cells i.is-on{background:var(--accent)}
.score{height:34px}
.score i.is-full{background:var(--accent)}
.score i.is-part{background:var(--panel)}
.score i.is-cand::after{content:"";display:block;height:4px;margin-top:-4px;background:var(--ink)}
.score-row{margin-bottom:6px}
.score-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:500;min-width:0}
.score-count{font-family:var(--font-spec);font-size:.7rem;font-weight:500;white-space:nowrap;opacity:.8}
.readout{font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.readout b{font-family:var(--font-ui);font-weight:600;font-size:1.375rem;letter-spacing:-.01em;display:block;line-height:1.1}
.readout .rd-day{opacity:.75}
.readout-score{font-size:.7rem;opacity:.8}

.rows{display:grid}
.row{padding:12px 0;border-top:1px solid var(--line)}
.row.is-new{animation:drop .3s var(--ease)}
@keyframes drop{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.who{display:grid;gap:8px;min-width:0}
.who-line{display:flex;gap:6px;align-items:center;min-width:0}
.name{width:38%;flex:0 0 auto;font-weight:500}
.zone-wrap{position:relative;flex:1;min-width:0}
.zone-wrap input{width:100%;font-weight:500}
.row input[type=time]{padding:7px 8px;font-size:.9375rem;flex:0 0 auto;width:92px;font-variant-numeric:tabular-nums}
.row input[type=time]::-webkit-calendar-picker-indicator{display:none}
.to{font-size:.9375rem;opacity:.7}
.req{padding:7px 10px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:500;font-size:.9375rem;cursor:pointer;border-radius:0;white-space:nowrap;line-height:1.2}
.req[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.rm{margin-left:auto;width:34px;height:34px;padding:0;border:1px solid var(--line);background:transparent;cursor:pointer;border-radius:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.rm:hover{border-color:var(--ink)}
.rm svg{width:14px;height:14px;stroke:var(--ink);stroke-width:1.5;fill:none}
.row.is-opt .cells i.is-on{background:var(--accent);opacity:.45}
.row.is-out .readout b{opacity:.5}

/* the needle */
.needle{position:absolute;top:0;width:1px;background:var(--accent);z-index:5;cursor:col-resize;touch-action:none;outline:none}
.needle .knob{position:absolute;top:0;left:-7px;width:15px;height:15px;background:var(--paper);border:1px solid var(--accent);pointer-events:auto}
.needle::after{content:"";position:absolute;top:0;bottom:0;left:-9px;width:19px}
.needle:focus-visible .knob{outline:2px solid var(--accent);outline-offset:2px}
.needle-time{position:absolute;top:-44px;left:-1px;font-family:var(--font-spec);font-size:.7rem;font-weight:500;background:var(--ink);color:var(--paper);padding:2px 6px;white-space:nowrap;line-height:1.2}
.needle.is-left .needle-time{left:auto;right:-1px}
.board-hint{font-size:.9375rem;opacity:.75;margin-top:10px}

/* reading line */
.reading{font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;white-space:pre-wrap;margin:12px 0 0}

/* ranked list */
.ranked{margin-top:36px;max-width:900px}
.ranked-note{font-size:.9375rem;opacity:.8;margin-bottom:12px;max-width:70ch}
.ranked-list{list-style:none;padding:0;border-top:1px solid var(--line)}
.ranked-list li{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:10px 16px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.ranked-list li.is-hot{background:var(--panel);box-shadow:none}
.ranked-list .rk{font-family:var(--font-spec);font-size:.75rem;font-weight:500}
.ranked-list .rk-lines{display:flex;flex-wrap:wrap;gap:4px 0;min-width:0}
.ranked-list .rk-lines span{padding:0 12px 0 0;margin-right:12px;border-right:1px solid var(--line);white-space:nowrap;font-size:1rem}
.ranked-list .rk-lines span:last-child{border-right:0;margin-right:0;padding-right:0}
.ranked-list .rk-lines b{font-weight:600;font-variant-numeric:tabular-nums}
.ranked-list .rk-lines .opt{opacity:.62}
.ranked-list .rk-acts{display:flex;gap:8px}
.ranked-list .btn{padding:6px 10px;font-size:.9375rem}
.ranked-empty{font-size:.9375rem;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* notes */
.notes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.notes>*{grid-column:span 8}
.notes p{max-width:68ch;margin-bottom:14px}

.foot{max-width:1120px;margin:0 auto;padding:20px 32px 40px;font-size:.875rem;opacity:.8}
.foot p{max-width:70ch}

/* narrow screens */
@media (max-width:1000px){
  :root{--who:340px;--rd:92px}
  .top{grid-template-columns:1fr}
  .notes>*{grid-column:span 12}
  .big{font-size:5rem}
}
@media (max-width:760px){
  :root{--rd:84px}
  .axis,.score-row,.row{grid-template-columns:minmax(0,1fr) var(--rd);gap:6px 12px}
  .axis-label{display:none}
  .score-label{grid-column:1 / -1}
  .who{grid-column:1 / -1}
  .who-line{flex-wrap:wrap}
  .name{width:40%}
  .cells{height:40px}
  .cells .mark{display:block}
  .score .mark{display:none}
  .needle-time{top:12px;left:10px}
  .needle.is-left .needle-time{left:auto;right:10px}
}
@media (max-width:640px){
  .strip{padding:14px 16px 0}
  .wrap{padding:28px 16px 0}
  .title{font-size:2.75rem}
  .lede{font-size:1rem}
  .hero{padding:20px 16px 18px}
  .big{font-size:3.75rem}
  .big-day{font-size:1.125rem}
  .lines li{font-size:1rem}
  .seg button{padding:8px 10px;font-size:.9375rem}
  .name{width:100%}
  .row input[type=time]{font-size:.875rem;padding:6px 4px;width:86px}
  .req{padding:7px 8px}
  .readout-score{white-space:normal;line-height:1.3}
  .ranked-list li{grid-template-columns:1.75rem minmax(0,1fr)}
  .ranked-list .rk-acts{grid-column:2}
  .section-head{font-size:1.625rem}
  .foot{padding:16px 16px 32px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}