/* Daybook styles. Layout: nav rail | one finite feed headed by a day ribbon | channel and privacy controls. */
:root{
  color-scheme:light;
  --bg:#ECEEF3; --surface:#FFFFFF; --surface-2:#F4F5F9; --ink:#141722; --ink-2:#596075; --line:#DCDFE8;
  --accent:#2A3AE0; --accent-ink:#FFFFFF; --up:#14825A; --down:#C23B32; --mat:#F5F5F7; --mat-line:#D9DBE3;
  --shadow:0 1px 2px rgba(20,23,34,.05),0 8px 24px rgba(20,23,34,.05);
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --f-text:'Newsreader',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1017; --surface:#161924; --surface-2:#1D212E; --ink:#ECEEF5; --ink-2:#9AA1B6; --line:#2A2F3E;
    --accent:#8391FF; --accent-ink:#0E1017; --up:#3FC995; --down:#F0746B; --mat:#E9E9EE; --mat-line:#BFC2CE;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1017; --surface:#161924; --surface-2:#1D212E; --ink:#ECEEF5; --ink-2:#9AA1B6; --line:#2A2F3E;
  --accent:#8391FF; --accent-ink:#0E1017; --up:#3FC995; --down:#F0746B; --mat:#E9E9EE; --mat-line:#BFC2CE;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;
  padding-block:24px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:32px;align-items:start}
.left,.right{position:sticky;top:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.center{min-width:0;max-width:680px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.tiny{font-size:12px;color:var(--ink-2)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* sign-in */
.gate{min-height:calc(100vh - 72px);display:grid;place-items:center}
.gate-box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:12px}
.gate-box label{font-size:13px;font-weight:600}
.gate-err{margin:0;color:var(--down);font-size:13px}
.fatal{max-width:560px;margin:10vh auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.fatal h1{font-family:var(--f-display);margin:0 0 8px}
.fatal code{font-family:var(--f-mono);background:var(--surface-2);padding:1px 6px;border-radius:6px}

/* left */
.brand{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.brand i{width:12px;height:12px;border-radius:3px;background:var(--accent);display:block;transform:rotate(45deg)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:12px;background:none;border:0;padding:10px 12px;border-radius:10px;text-align:left;color:var(--ink-2);font-weight:500}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:10px 16px;font-weight:600;background:var(--accent);color:var(--accent-ink)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.btn[disabled],.keep[disabled]{opacity:.4;cursor:not-allowed}
.btn.sm{padding:6px 12px;font-size:13px}

/* day head, search */
.dayhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dayhead h1{font-family:var(--f-display);font-size:30px;line-height:1.1;margin:0;letter-spacing:-.02em;text-wrap:balance}
.banner{background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:8px 12px;font-size:13px;color:var(--ink-2);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.search{position:relative;display:flex;align-items:center}
.search .ic{position:absolute;left:12px;color:var(--ink-2);pointer-events:none}
.search input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.search input::placeholder{color:var(--ink-2)}
.hit{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:start;text-align:left;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:12px 4px}
.hit:first-child{border-top:0}
.hit:hover{background:var(--surface-2)}
.hit i{width:8px;height:8px;border-radius:2px;background:var(--c);margin-top:7px}
.hit b{display:block;font-weight:600}
.hit .sn{color:var(--ink-2);font-size:14px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
mark{background:color-mix(in srgb,var(--accent) 22%,transparent);color:inherit;border-radius:3px;padding:0 1px}

/* day ribbon */
.ribbon{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:14px 14px 10px}
.rb-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:10px;flex-wrap:wrap}
.rb-h b{font-family:var(--f-display);font-size:16px}
.rb-grid{display:grid;grid-template-columns:92px minmax(0,1fr)}
.rb-ticks{position:relative;height:18px}
.rb-ticks span{position:absolute;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.rb-lab{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0 6px 0 0;height:24px;font-size:12px;font-weight:500;color:var(--ink-2);text-align:left;border-top:1px solid var(--line)}
.rb-lab::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
.rb-lab:hover,.rb-lab[aria-pressed="true"]{color:var(--ink)}
.rb-lab[aria-pressed="true"]{font-weight:600}
.rb-lane{position:relative;height:24px;border-top:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),color-mix(in srgb,var(--line) 60%,transparent) calc(16.666% - 1px),color-mix(in srgb,var(--line) 60%,transparent) 16.666%)}
.rb-mark{position:absolute;top:4px;width:10px;height:16px;margin-left:-5px;border-radius:3px;border:0;padding:0;background:var(--c)}
.rb-mark:hover{transform:scaleY(1.25);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}
.rb-now{position:absolute;top:0;width:0;border-left:2px solid var(--accent);pointer-events:none}
.rb-now::after{content:"now";position:absolute;top:-17px;left:-12px;font-family:var(--f-mono);font-size:10px;color:var(--accent)}

/* composer */
.opener{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--ink-2);box-shadow:var(--shadow)}
.opener:hover{border-color:var(--accent)}
.composer{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;display:inline-flex;gap:6px;align-items:center}
.chip .ic{width:16px;height:16px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.field{width:100%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:10px;padding:10px 12px;resize:vertical}
.field::placeholder{color:var(--ink-2)}
.crow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crow .field{flex:1;min-width:160px}

/* cards */
#feed{display:flex;flex-direction:column;gap:20px}
.card{--c:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card.flash{animation:flash 1.2s ease}
@keyframes flash{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 3px var(--c),var(--shadow)}}
.card header{display:flex;align-items:center;gap:12px;padding:14px 16px 10px}
.av{--c:var(--accent);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,var(--surface));color:var(--c);flex:none}
.card header b{font-weight:600;display:block;line-height:1.2}
.card header .tiny{display:block}
.sample{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.body{padding:0 16px 14px;display:flex;flex-direction:column;gap:10px}
.body p{margin:0}
.body h3{font-family:var(--f-display);font-size:24px;line-height:1.15;margin:0;letter-spacing:-.015em;text-wrap:balance}
.foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.keep{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:8px;padding:6px 10px;color:var(--ink-2);font-size:13px;font-weight:500}
.keep:hover:not([disabled]){background:var(--surface-2);color:var(--ink)}
.keep[aria-pressed="true"]{color:var(--c)}
.keep[aria-pressed="true"] .ic{fill:currentColor}
.meta{display:flex;gap:8px;flex-wrap:wrap}
.meta span{font-family:var(--f-mono);font-size:12px;background:var(--surface-2);border-radius:6px;padding:2px 8px;color:var(--ink-2)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list label{display:flex;gap:12px;align-items:center;cursor:pointer;flex:1}
.list input[type=checkbox]{width:18px;height:18px;accent-color:var(--c);flex:none}
.list .done span{text-decoration:line-through;color:var(--ink-2)}
.up{color:var(--up)}.down{color:var(--down)}
.welcome{padding:22px}
.welcome h2{font-family:var(--f-display);font-size:24px;margin:0 0 6px}

/* journal: notebook with page turn */
.book{perspective:1500px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);outline-offset:3px}
.pages{display:grid}
.pg{grid-area:1/1;position:relative;z-index:calc(100 - var(--i));padding:16px 22px 18px 26px;border-radius:12px;min-height:190px;
  background:var(--surface) repeating-linear-gradient(transparent 0 29px,color-mix(in srgb,var(--ink) 9%,transparent) 29px 30px);background-position:0 34px;
  border-left:3px solid color-mix(in srgb,var(--c) 60%,var(--surface));
  transform-origin:left center;transition:transform .8s cubic-bezier(.55,.1,.2,1),opacity .6s;backface-visibility:hidden;box-shadow:0 1px 0 var(--line)}
.pg.turned{transform:rotateY(-105deg);opacity:0;pointer-events:none}
.pg .tab{display:block;font-size:12px;color:var(--c);height:30px;line-height:30px}
.pg .entry{font-family:var(--f-text);font-size:18px;line-height:30px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.pg.cur .entry{animation:ink 1s .35s both}
@keyframes ink{from{opacity:0;filter:blur(4px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* blog: stacked deck */
.deck{display:grid;padding:0 30px 24px 0}
.dk{grid-area:1/1;z-index:calc(10 - var(--p,0));background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;
  transform:translate(calc(var(--p,0)*15px),calc(var(--p,0)*11px)) scale(calc(1 - var(--p,0)*.04));transform-origin:top left;
  opacity:max(0,calc(1 - var(--p,0)*.3));transition:transform .55s cubic-bezier(.5,.1,.2,1),opacity .4s}
.dk:not([data-pos="0"]){pointer-events:none}
.dk .ban{height:120px;overflow:hidden;background:var(--surface-2)}
.dk .ban svg{width:100%;height:100%;display:block;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.12) translateX(-2%)}}
@media (prefers-reduced-motion:reduce){.card,.pg,.dk,.dk .ban svg,.pg.cur .entry{animation:none;transition:none}}
.dkb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.dkb .ex{font-family:var(--f-text);font-size:16px;color:var(--ink-2)}

/* collection: museum plates */
.frame{display:block;width:100%;background:none;border:0;padding:0}
.mat{display:block;background:var(--mat);padding:clamp(10px,3%,18px);border:1px solid var(--mat-line);box-shadow:0 1px 1px rgba(0,0,0,.08),0 10px 24px rgba(20,23,34,.16)}
.mat svg,.mat img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.frame:hover .mat{box-shadow:0 1px 1px rgba(0,0,0,.08),0 14px 30px rgba(20,23,34,.24)}
.plate .pl-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;padding:22px;align-items:center}
.plate.rev .frame{order:2}
.label{display:flex;flex-direction:column;gap:6px;min-width:0}
.acc{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.label h3{font-family:var(--f-display);font-size:26px;line-height:1.1;margin:0;letter-spacing:-.02em;text-wrap:balance}
.label .med{font-size:13px;color:var(--ink-2)}
.cap{font-family:var(--f-text);font-size:16px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;overflow-wrap:anywhere}
.cap p+p{margin-top:.7em}
.label .keep{align-self:flex-start;padding-left:0}
.yr{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:8px;margin:6px 0 18px}
.yr h2{font-family:var(--f-display);font-size:44px;line-height:1;margin:0;letter-spacing:-.03em}
.wall{columns:2 240px;column-gap:26px}
.pl{break-inside:avoid;margin-bottom:28px;display:flex;flex-direction:column;gap:8px}
.pl .lb{display:flex;flex-direction:column;gap:1px}
.pl .lb b{font-family:var(--f-display);font-size:16px}

/* spread / reader */
.spread{position:fixed;inset:0;z-index:30;background:rgba(8,10,16,.78);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:max(24px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.sp-box{width:100%;max-width:1020px;margin:auto;background:var(--surface);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;position:relative}
.sp-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sp-l{background:var(--mat);padding:34px;display:flex;flex-direction:column;justify-content:center;gap:14px;background-image:linear-gradient(90deg,transparent 94%,rgba(0,0,0,.1))}
.sp-l .mat{background:#fff;border:0}
.sp-l .mat svg,.sp-l .mat img{max-height:70vh}
.sp-l .folio{font-family:var(--f-mono);font-size:11px;color:#6b7080;text-align:center}
.sp-r{padding:38px 40px 28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.sp-r h2{font-family:var(--f-display);font-size:36px;line-height:1.05;margin:0;letter-spacing:-.025em;text-wrap:balance}
.sp-r .cap{display:block;-webkit-line-clamp:unset;font-size:19px;line-height:1.7;margin-top:10px;overflow:visible}
.sp-nav{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:18px;flex-wrap:wrap}
.sp-x{position:absolute;top:10px;right:10px;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:999px;width:34px;height:34px;display:grid;place-items:center}
.sp-1{max-width:760px}
.sp-1 .ban{height:150px;overflow:hidden}
.sp-1 .ban svg{width:100%;height:100%;display:block}
.sp-1 .art-body{padding:28px 36px 30px;display:flex;flex-direction:column;gap:12px}
.sp-1 h2{font-family:var(--f-display);font-size:38px;line-height:1.05;margin:0;letter-spacing:-.025em;text-wrap:balance}
.sp-1 .txt{font-family:var(--f-text);font-size:19px;line-height:1.75;overflow-wrap:anywhere}
.sp-1 .txt p+p{margin-top:.9em}

/* memoir calendar */
.mem{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.mem-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mem-h h2{font-family:var(--f-display);font-size:24px;margin:0;letter-spacing:-.02em;flex:1;min-width:140px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{font-family:var(--f-mono);font-size:11px;color:var(--ink-2);text-align:center;padding-bottom:2px}
.day{position:relative;min-height:56px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:6px 6px 4px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left}
.day:hover:not([disabled]){border-color:var(--accent)}
.day b{font-family:var(--f-mono);font-size:13px;font-weight:500}
.day[disabled]{opacity:.35;cursor:default}
.day.today b{color:var(--accent);font-weight:700}
.day[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.dots{display:flex;gap:3px}
.dots i{width:7px;height:7px;border-radius:2px;background:var(--c)}
.mem-day{display:flex;flex-direction:column;gap:14px}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.mini .entry{font-family:var(--f-text);font-size:17px;line-height:1.6;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.mini .tiny{display:flex;gap:8px;align-items:center}
.mini .tiny i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.mini-plate{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;align-items:center}

/* news, replay, football */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;align-self:flex-start}
.seg button{background:var(--surface-2);border:0;padding:6px 14px;font-size:13px;font-weight:500;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.news{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.news .n{color:var(--ink-2);font-size:13px;padding-top:2px}
.news a{color:var(--ink);font-weight:600;text-decoration:none;line-height:1.3;display:block;overflow-wrap:anywhere}
.news a:hover{color:var(--c);text-decoration:underline}
.news .tiny{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.sector{font-family:var(--f-mono);font-size:11px;border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));color:var(--c);border-radius:6px;padding:0 6px}
.song{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;align-items:center}
.song .cover{width:44px;height:44px;border-radius:8px;background:var(--surface-2);overflow:hidden;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}
.song .cover img{width:100%;height:100%;object-fit:cover;display:block}
.song b{display:block;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.src{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink-2)}
.open{text-decoration:none;font-weight:600;font-size:13px;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,var(--line));border-radius:8px;padding:4px 10px}
.open:hover{background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.lib{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:12px}
.dstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dchip{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:6px 0;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.dchip span{font-size:11px;color:var(--ink-2)}
.dchip b{font-family:var(--f-mono);font-size:15px}
.dchip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.dchip[aria-pressed="true"] span{color:inherit;opacity:.8}
.lgh{font-family:var(--f-mono);font-size:12px;color:var(--c);text-transform:uppercase;letter-spacing:.08em;margin-top:6px}
.match{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
.match .t{font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}
.match .t.live{color:var(--down);font-weight:600}
.sc{padding:0 6px}
.stat{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.stat .n{font-family:var(--f-display);font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1}
.spark{width:140px;height:44px}
.hold{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;font-size:14px}
.note{background:color-mix(in srgb,var(--c) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 25%,var(--line));border-radius:10px;padding:12px 14px}
.mail p{color:var(--ink-2);font-size:14px}
.archive{display:flex;flex-direction:column}
.archive button{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 4px}
.archive button:hover{background:var(--surface-2)}
.archive span.x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.end{text-align:center;padding:28px 16px;border:1px dashed var(--line);border-radius:16px;color:var(--ink-2)}
.end b{display:block;font-family:var(--f-display);font-size:20px;color:var(--ink);margin-bottom:4px}

/* right rail */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.panel h2{font-family:var(--f-display);font-size:16px;margin:0 0 4px}
.chrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.chrow:first-of-type{border-top:0}
.chrow .nm{flex:1;min-width:0}
.chrow .nm b{display:block;font-weight:600;font-size:14px;line-height:1.2}
.pin{background:none;border:0;padding:4px;color:var(--ink-2);border-radius:6px}
.pin[aria-pressed="true"]{color:var(--accent)}
.pin[aria-pressed="true"] .ic{fill:currentColor}
.lock{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600;color:var(--ink-2)}
.lock .ic{width:13px;height:13px}
.lock[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.sw{width:36px;height:22px;border-radius:999px;border:0;background:var(--line);position:relative;flex:none;padding:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s}
.sw[aria-checked="true"]{background:var(--accent)}
.sw[aria-checked="true"]::after{transform:translateX(14px)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:10px;font-weight:500;z-index:40;max-width:90vw}

@media (max-width:1100px){
  .app{grid-template-columns:190px minmax(0,1fr)}
  .right{grid-column:2;position:static;max-width:680px;margin:0 auto;width:100%}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;gap:20px}
  .left{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .nav{flex-direction:row;flex-wrap:wrap;order:3;width:100%}
  .right{grid-column:1}
  .dayhead h1{font-size:25px}
  .plate .pl-in{grid-template-columns:1fr}
  .plate.rev .frame{order:0}
  .sp-2{grid-template-columns:1fr}
  .sp-l{padding:22px}.sp-r{padding:24px 22px}
  .rb-grid{grid-template-columns:72px minmax(0,1fr)}
  .mini-plate{grid-template-columns:100px minmax(0,1fr)}
  .day{min-height:46px}
}
.rb-lane .rb-now::after{content:none}
.rb-ticks{position:relative}
.rb-ticks .rb-now{position:absolute}