:root{
  --paper:#ECEDE8; --paper-2:#F4F4F0; --ink:#1B1F22; --ink-2:rgba(27,31,34,.64); --ink-3:rgba(27,31,34,.34);
  --seal:#B7402F; --now:#B7402F; --icon:#1B1F22; --icon-contrast:#ECEDE8; --badge:none; --art-scale:1;
  --glass-top:#ECEDE8; --scene-text:#ECEDE8;
  --cal-personal:#4E8377; --cal-fleet:#5B6B8C; --cal-music:#8C5B6B; --cal-birding:#3E7F86;
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","Iowan Old Style",Georgia,serif;
  --font-sans:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --breath:1; color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#122A26; --paper-2:#193732; --ink:#DCEBE0; --ink-2:rgba(220,235,224,.66); --ink-3:rgba(220,235,224,.36);
  --icon:#CFE3C5; --icon-contrast:#122A26; --badge:block; --art-scale:.72; --glass-top:#1E3A34; color-scheme:dark; } }
:root[data-theme="dark"]{
  --paper:#122A26; --paper-2:#193732; --ink:#DCEBE0; --ink-2:rgba(220,235,224,.66); --ink-3:rgba(220,235,224,.36);
  --icon:#CFE3C5; --icon-contrast:#122A26; --badge:block; --art-scale:.72; --glass-top:#1E3A34; color-scheme:dark; }

*{ box-sizing:border-box } [hidden]{ display:none !important }
html{ background:var(--paper) }
body{ margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 var(--font-sans); -webkit-font-smoothing:antialiased }
button{ font-family:inherit }
button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

.top{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; padding:10px 14px 8px;
      background:linear-gradient(var(--glass-top), var(--paper)); max-width:640px; margin:0 auto }
.brand{ display:flex; align-items:center; gap:9px; margin-right:auto }
.seal{ width:26px; height:26px; border-radius:3px; background:var(--seal); color:#ECEDE8; font:15px/26px var(--font-serif); text-align:center }
.word{ font:500 20px/1 var(--font-serif); letter-spacing:.01em }
.views{ display:flex; gap:2px; background:var(--paper-2); border-radius:999px; padding:2px }
.views button{ border:0; background:transparent; color:var(--ink-2); font:500 13px/1 var(--font-sans); padding:7px 12px; border-radius:999px; cursor:pointer }
.views button[aria-selected="true"]{ background:var(--ink); color:var(--paper) }
.tools{ display:flex; gap:2px }
.tools button{ border:0; background:transparent; color:var(--ink-2); font:500 13px/1 var(--font-sans); padding:7px 8px; border-radius:999px; cursor:pointer }
.tools button:hover{ color:var(--ink) }

.strip{ position:sticky; top:46px; z-index:4; background:var(--paper); padding:2px 8px 6px; max-width:640px; margin:0 auto }
.strip .head{ display:flex; justify-content:space-between; align-items:baseline; padding:2px 6px 4px }
.strip .head button{ border:0; background:none; color:var(--ink); font:500 16px/1.2 var(--font-serif); cursor:pointer; padding:2px 0 }
.strip .head span{ font-size:12px; color:var(--ink-2) }
.strip .cells{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.strip .cell{ border:0; background:transparent; color:var(--ink-2); font:11px/1.2 var(--font-sans); padding:5px 0 4px; border-radius:8px; text-align:center; cursor:pointer }
.strip .cell b{ display:block; font:500 15px/1.3 var(--font-serif); color:var(--ink) }
.strip .cell i{ display:block; width:4px; height:4px; border-radius:50%; background:var(--ink-3); margin:3px auto 0 }
.strip .cell.busy i{ background:var(--ink) }
.strip .cell.today b{ color:var(--seal) }
.strip .cell.other b{ color:var(--ink-3) }
.strip .cell:hover{ background:var(--paper-2) }

main{ max-width:640px; margin:0 auto; padding:0 0 110px }
.view{ display:block }

.brief{ margin:8px 14px 12px; padding:14px 16px 12px; background:var(--paper-2); border-radius:14px }
.brief h2{ margin:0 0 8px; font:500 19px/1.35 var(--font-serif) }
.brief ul{ list-style:none; margin:0; padding:0 }
.brief li{ display:flex; gap:10px; padding:4px 0; font-size:14px; line-height:1.4 }
.brief li .k{ flex:none; width:18px; text-align:center; color:var(--ink-2) }
.brief li.conflict .k{ color:var(--seal) }
.brief .dismiss{ margin-top:8px; border:0; background:none; color:var(--ink-2); font:13px var(--font-sans); padding:4px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px }

.day{ margin:6px 0 2px; scroll-margin-top:118px }
.scene{ position:relative; height:74px; overflow:hidden; background:var(--paper-2) }
.day.empty .scene{ height:132px }
.scene canvas{ display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; image-rendering:crisp-edges; filter:brightness(var(--breath)) }
.scene .cap{ position:absolute; left:14px; right:14px; bottom:8px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; color:var(--scene-text); text-shadow:0 1px 0 rgba(0,0,0,.35) }
.scene .cap b{ font:500 17px/1 var(--font-serif); white-space:nowrap }
.scene .cap span{ font-size:13px; white-space:nowrap }
.scene .bird{ position:absolute; left:18px; bottom:44px; width:44px; height:44px; display:none }
:root[data-theme="light"] .day.empty .scene .bird{ display:block }
.scene .bird path{ fill:#1B1F22; opacity:.85; filter:url(#brush) } .scene .bird circle{ fill:#ECEDE8 }
.day.empty .note{ padding:8px 14px 8px; color:var(--ink-2); font-size:14px }

.ev{ display:grid; grid-template-columns:3px 36px 1fr auto; align-items:center; gap:0 12px; padding:9px 14px; cursor:pointer; background:none; border:0; width:100%; text-align:left; color:var(--ink); font:inherit }
.ev:hover{ background:var(--paper-2) }
.ev .tick{ width:3px; height:26px; border-radius:2px; background:var(--c) }
.ev .name{ font-size:15px; line-height:1.3 }
.ev .loc{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:1px }
.ev .when{ font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--ink-2); white-space:nowrap; text-align:right }
.ic svg{ width:36px; height:36px; display:block; overflow:visible }
.ic .badge{ display:var(--badge) }
.ic .art{ transform-box:view-box; transform-origin:32px 32px; transform:scale(var(--art-scale)) }
.ic .body{ fill:var(--icon) } .ic .eye{ fill:var(--icon-contrast) } .ic .mark{ fill:var(--icon-contrast) }
.ic .line{ stroke:var(--icon); stroke-width:2.4; stroke-linecap:round; fill:none } .ic .hatch{ stroke:var(--icon-contrast); stroke-width:1.6; stroke-linecap:round; fill:none }
:root[data-theme="light"] .ic .brush{ filter:url(#brush) }

.foot{ padding:18px 14px 0; display:flex; gap:14px; align-items:center }
.foot button{ border:0; background:none; color:var(--ink-2); font:13px var(--font-sans); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0 }
.foot span{ font-size:12px; color:var(--ink-3) }

.week{ display:flex; padding:6px 0 0 }
.gutter{ flex:0 0 44px; position:relative; font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums }
.gutter .sp{ height:76px }
.gutter div.h{ height:48px; text-align:right; padding-right:6px; transform:translateY(-7px) }
.cols{ flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.col{ flex:0 0 calc(100% / 3); scroll-snap-align:start; border-left:1px solid var(--paper-2); min-width:0 }
@media (min-width:900px){ main{ max-width:1120px } .col{ flex-basis:calc(100% / 7) } .top,.strip{ max-width:1120px } }
.colhead{ height:48px; padding:4px 6px 0; font-size:12px; color:var(--ink-2) }
.colhead b{ display:block; font:500 18px/1.2 var(--font-serif); color:var(--ink) }
.col.today .colhead b{ color:var(--seal) }
.allday{ height:28px; padding:2px 4px; overflow:hidden }
.allday .blk{ position:static; height:22px; line-height:16px }
.grid{ position:relative; background:repeating-linear-gradient(to bottom, var(--paper-2) 0 1px, transparent 1px 48px) }
.blk{ position:absolute; left:2px; right:2px; border-radius:6px; background:color-mix(in srgb, var(--c) 22%, var(--paper)); border-left:3px solid var(--c); padding:3px 6px; font-size:12px; line-height:1.25; overflow:hidden; cursor:pointer; color:var(--ink); text-align:left }
.blk small{ display:block; color:var(--ink-2); font-size:11px }
.nowline{ position:absolute; left:0; right:0; height:0; border-top:2px solid var(--now); pointer-events:none }
.nowline::before{ content:""; position:absolute; left:-4px; top:-4px; width:6px; height:6px; border-radius:50%; background:var(--now) }

.quick{ position:fixed; left:0; right:0; bottom:0; z-index:10; display:flex; gap:8px; padding:10px 14px calc(12px + env(safe-area-inset-bottom));
        background:linear-gradient(transparent, var(--paper) 30%); max-width:640px; margin:0 auto }
.quick input{ flex:1; min-width:0; border:0; background:var(--paper-2); color:var(--ink); font:15px var(--font-sans); padding:12px 14px; border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.06) }
.quick input::placeholder{ color:var(--ink-3) }
.quick button{ border:0; background:var(--ink); color:var(--paper); font:500 14px var(--font-sans); padding:0 16px; border-radius:12px; cursor:pointer }

.scrim{ position:fixed; inset:0; z-index:19; background:rgba(0,0,0,.28) }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:20; max-width:640px; margin:0 auto; background:var(--paper-2); border-radius:18px 18px 0 0;
        padding:16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -12px 30px -18px rgba(0,0,0,.5); max-height:88vh; overflow:auto }
.sheet h3{ margin:0 0 4px; font:500 19px/1.35 var(--font-serif) }
.sheet .reads{ color:var(--ink-2); font-size:14px; margin:0 0 6px }
.sheet label{ display:block; font-size:12px; color:var(--ink-2); margin:8px 0 3px }
.sheet input, .sheet select{ width:100%; border:0; background:var(--paper); color:var(--ink); font:15px var(--font-sans); padding:9px 12px; border-radius:10px }
.sheet .row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.sheet .assume{ list-style:none; padding:0; margin:10px 0 0; font-size:13px; color:var(--ink-2) }
.sheet .assume li{ padding:2px 0 2px 14px; text-indent:-14px } .sheet .assume li::before{ content:"◦"; margin-right:6px }
.sheet .actions{ display:flex; gap:10px; margin-top:14px }
.sheet .actions button{ flex:1; border:0; padding:12px; border-radius:12px; font:500 15px var(--font-sans); cursor:pointer }
.sheet .primary{ background:var(--ink); color:var(--paper) } .sheet .ghost{ background:transparent; color:var(--ink-2) }
.sheet .detail{ display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:start }
.sheet .detail .ic svg{ width:56px; height:56px }
.sheet .detail dl{ margin:6px 0 0; font-size:14px } .sheet .detail dt{ color:var(--ink-2); font-size:12px; margin-top:6px } .sheet .detail dd{ margin:0 }

.zen{ position:fixed; inset:0; z-index:30; background:#0E211E; color:#DCEBE0 }
.zen canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; image-rendering:crisp-edges; filter:brightness(var(--breath)) }
.zen .glass{ position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.06), transparent 30%, transparent 70%, rgba(0,0,0,.35)); pointer-events:none }
.zen svg.ff{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.zen .ff circle{ fill:#F3E88F; animation:ff 4.6s ease-in-out infinite }
@keyframes ff{ 0%,100%{opacity:.06} 50%{opacity:.95} }
.zen .clock{ position:absolute; left:22px; bottom:calc(64px + env(safe-area-inset-bottom)); font:500 46px/1 var(--font-serif); letter-spacing:.01em; text-shadow:0 1px 0 rgba(0,0,0,.4) }
.zen .next{ position:absolute; left:22px; right:22px; bottom:calc(30px + env(safe-area-inset-bottom)); font-size:14px; opacity:.88; text-shadow:0 1px 0 rgba(0,0,0,.4) }
.zen .leave{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; border:0; background:rgba(255,255,255,.12); color:#DCEBE0; padding:9px 13px; border-radius:999px; font:500 13px var(--font-sans); cursor:pointer }
.zen .cue{ position:absolute; top:calc(18px + env(safe-area-inset-top)); left:22px; font:400 13px var(--font-sans); opacity:.7 }

.lab{ position:fixed; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:15; background:var(--paper-2); border-radius:12px; padding:10px 12px; font-size:13px; box-shadow:0 8px 24px -12px rgba(0,0,0,.5); display:flex; gap:8px; align-items:center; flex-wrap:wrap; max-width:calc(100vw - 24px) }
.lab select, .lab label{ font:13px var(--font-sans); color:var(--ink) } .lab select{ border:0; background:var(--paper); padding:6px 8px; border-radius:8px }
.lab button{ border:0; background:var(--ink); color:var(--paper); padding:6px 10px; border-radius:8px; cursor:pointer; font-size:13px }
.toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:25; background:var(--ink); color:var(--paper); padding:9px 14px; border-radius:999px; font-size:13.5px; box-shadow:0 8px 20px -10px rgba(0,0,0,.6) }
@media (prefers-reduced-motion:reduce){ .zen .ff circle{ animation:none; opacity:.5 } }
/* v0.2 additions */
.scene::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:40px; background:linear-gradient(transparent, rgba(0,0,0,.22)); pointer-events:none }
.day[data-grade^="snow"] .scene::after{ background:linear-gradient(transparent, rgba(0,0,0,.36)) }
.scene .cap{ z-index:1 }
:root[data-theme="light"] .ic .clean{ display:none } :root[data-theme="dark"] .ic .rough{ display:none }
.strip .head{ justify-content:flex-start; gap:4px } .strip .head span{ margin-left:auto }
.strip .nav{ border:0; background:none; color:var(--ink-2); font:500 20px/1 var(--font-sans); padding:0 8px; cursor:pointer; border-radius:8px } .strip .nav:hover{ color:var(--ink) }
.week{ display:block; padding:6px 0 0 }
.wkhead{ position:sticky; top:118px; z-index:3; display:flex; background:var(--paper) }
.wkhead .gsp{ flex:0 0 44px }
.heads{ flex:1; display:flex; overflow:hidden; min-width:0 }
.heads .colhead{ flex:0 0 calc(100% / 3); height:auto; padding:0; border-left:1px solid var(--paper-2); min-width:0; color:var(--ink-2) }
.heads .hd{ height:48px; padding:4px 6px 0; font-size:12px }
.heads .hd b{ display:block; font:500 18px/1.2 var(--font-serif); color:var(--ink) }
.heads .colhead.today .hd b{ color:var(--seal) }
.wkbody{ display:flex }
.gutter .sp{ display:none }
@media (min-width:900px){ .heads .colhead{ flex-basis:calc(100% / 7) } }
.lab label:first-child{ color:var(--ink-2) }
/* ---- tasks ---- */
.ev.task .box{ width:36px; height:36px; display:grid; place-items:center } .ev.task .box i{ width:18px; height:18px; border:1.5px solid var(--ink-2); border-radius:50%; display:block }
.ev.task.done .box i{ background:var(--ink-2) } .ev.task.done .name{ text-decoration:line-through; opacity:.6 } .ev.task .when{ font-size:12px }
.blk.task{ opacity:.85 }
/* ---- skin sheet ---- */
.sheet .choice{ display:flex; gap:8px; margin:2px 0 } .sheet .choice button{ flex:1; border:1px solid var(--ink-3); background:transparent; color:var(--ink); padding:9px 6px; border-radius:10px; font:14px var(--font-sans); cursor:pointer }
.sheet .choice button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.scene .reticle{ display:none } .ic .bracket{ display:none; fill:none; stroke:var(--phos,#8CF0A8); stroke-width:1.5 }

/* ---- skin: Plate (engraving by day, pencil in Zen) ---- */
:root[data-skin="plate"]{ --paper:#ECE8DC; --paper-2:#F1EEE4; --ink:#2A2622; --ink-2:rgba(42,38,34,.66); --ink-3:rgba(42,38,34,.36); --icon:#2A2622; --icon-contrast:#ECE8DC; --badge:none; --art-scale:1; --glass-top:#ECE8DC; --seal:#2A2622; --now:#8C2F22;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; --font-sans:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif; color-scheme:light }
:root[data-skin="plate"] .seal{ background:none; color:var(--ink); border:1px solid var(--ink); border-radius:0 }
:root[data-skin="plate"] .scene{ height:auto; margin:0 14px; border:1px solid var(--ink); background:var(--paper) }
:root[data-skin="plate"] .scene canvas{ height:84px; image-rendering:auto } :root[data-skin="plate"] .day.empty .scene canvas{ height:140px }
:root[data-skin="plate"] .scene::after{ display:none } :root[data-skin="plate"] .scene .bird{ display:none }
:root[data-skin="plate"] .scene .cap{ position:static; color:var(--ink); text-shadow:none; padding:5px 8px; font-style:italic; border-top:1px solid var(--ink); font-size:13px }
:root[data-skin="plate"] .scene .cap b{ font-style:normal; font-variant:small-caps; letter-spacing:.04em; font-weight:500; font-size:15px }
:root[data-skin="plate"] .ic .clean{ display:none } :root[data-skin="plate"] .ic .rough{ display:block; fill:url(#hatch); stroke:var(--ink); stroke-width:1.1; stroke-linejoin:round }
:root[data-skin="plate"] .ic .eye, :root[data-skin="plate"] .ic .mark{ stroke:var(--ink); stroke-width:.9 }
:root[data-skin="plate"] .brief{ background:none; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); border-radius:0; padding:8px 0 6px; margin:10px 14px 12px }
:root[data-skin="plate"] .brief h2{ font-size:13px; font-variant:small-caps; letter-spacing:.05em; font-weight:500; margin-bottom:4px }
:root[data-skin="plate"] .brief li{ border-top:1px solid var(--ink); padding:6px 0 } :root[data-skin="plate"] .brief li .k{ display:none }
:root[data-skin="plate"] .brief li::before{ content:"Note"; font-style:italic; flex:none; min-width:66px; color:var(--ink-2) }
:root[data-skin="plate"] .brief li.conflict::before{ content:"Overlap" } :root[data-skin="plate"] .brief li.transition::before{ content:"Transit" }
:root[data-skin="plate"] .brief li.prep::before{ content:"Prepare" } :root[data-skin="plate"] .brief li.weather::before{ content:"Weather" }
:root[data-skin="plate"] .brief .dismiss{ font-style:italic }
:root[data-skin="plate"] .views{ background:none; border:1px solid var(--ink); border-radius:0; padding:1px } :root[data-skin="plate"] .views button{ border-radius:0 }
:root[data-skin="plate"] .quick input{ border:1px solid var(--ink); background:var(--paper); border-radius:0; box-shadow:none } :root[data-skin="plate"] .quick button{ border-radius:0 }
:root[data-skin="plate"] .sheet{ border-radius:0; border-top:2px solid var(--ink) } :root[data-skin="plate"] .sheet input, :root[data-skin="plate"] .sheet select, :root[data-skin="plate"] .sheet .actions button, :root[data-skin="plate"] .sheet .choice button{ border-radius:0 }
:root[data-skin="plate"] .ev .tick{ width:2px } :root[data-skin="plate"] .ev + .ev{ border-top:1px dotted var(--ink-3) }
:root[data-skin="plate"] .blk{ border-radius:0; background:var(--paper-2); border-left:2px solid var(--ink) }
:root[data-skin="plate"] .strip .cell{ border-radius:0 } :root[data-skin="plate"] .toast{ border-radius:0 }
:root[data-skin="plate"] .zen{ background:#EEEBE3; color:#2A2622 } :root[data-skin="plate"] .zen svg.ff, :root[data-skin="plate"] .zen .glass{ display:none }
:root[data-skin="plate"] .zen canvas{ image-rendering:auto } :root[data-skin="plate"] .zen .leave{ background:none; border:1px solid #2A2622; color:#2A2622; border-radius:0 }
:root[data-skin="plate"] .zen .clock, :root[data-skin="plate"] .zen .next{ text-shadow:none } :root[data-skin="plate"] .zen .cue{ font-style:italic }

/* ---- skin: Cockpit (TALON HUD) ---- */
:root[data-skin="cockpit"]{ --paper:#1E2327; --paper-2:#262C31; --ink:#C9D1D9; --ink-2:rgba(201,209,217,.66); --ink-3:rgba(201,209,217,.36); --icon:#C9D1D9; --icon-contrast:#0B0E10; --badge:none; --art-scale:1; --glass-top:#262C31; --seal:#F0B35A; --now:#F0B35A; --phos:#8CF0A8; --amber:#F0B35A;
  --font-serif:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; --font-sans:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; color-scheme:dark }
:root[data-skin="cockpit"] body{ font-size:13.5px }
:root[data-skin="cockpit"] .seal{ background:none; color:var(--phos); border:1px solid var(--phos); border-radius:2px }
:root[data-skin="cockpit"] .word{ letter-spacing:.1em; text-transform:uppercase; font-size:14px; font-weight:500 }
:root[data-skin="cockpit"] .scene{ margin:0 14px; background:#0B0E10; outline:1px solid #3A4249; outline-offset:-1px }
:root[data-skin="cockpit"] .scene::after{ top:0; height:100%; background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.28) 2px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45)) }
:root[data-skin="cockpit"] .scene::before{ content:""; position:absolute; inset:5px; z-index:1; pointer-events:none;
  background:linear-gradient(var(--phos),var(--phos)) top left/12px 1px no-repeat, linear-gradient(var(--phos),var(--phos)) top left/1px 12px no-repeat, linear-gradient(var(--phos),var(--phos)) top right/12px 1px no-repeat, linear-gradient(var(--phos),var(--phos)) top right/1px 12px no-repeat, linear-gradient(var(--phos),var(--phos)) bottom left/12px 1px no-repeat, linear-gradient(var(--phos),var(--phos)) bottom left/1px 12px no-repeat, linear-gradient(var(--phos),var(--phos)) bottom right/12px 1px no-repeat, linear-gradient(var(--phos),var(--phos)) bottom right/1px 12px no-repeat }
:root[data-skin="cockpit"] .scene .cap{ color:var(--phos); text-shadow:none; text-transform:uppercase; font-size:11px; letter-spacing:.04em; z-index:2; left:16px; right:16px; bottom:9px }
:root[data-skin="cockpit"] .scene .cap b{ font-size:12.5px; font-weight:500 }
:root[data-skin="cockpit"] .scene .reticle{ display:block; position:absolute; border:1px solid var(--phos); z-index:2; pointer-events:none }
:root[data-skin="cockpit"] .scene .reticle::after{ content:"HERON 01"; position:absolute; left:100%; top:-13px; margin-left:6px; font:9px var(--font-sans); color:var(--phos); white-space:nowrap }
:root[data-skin="cockpit"] .scene .bird{ display:none }
:root[data-skin="cockpit"] .brief{ background:none; border:1px solid #3A4249; border-radius:2px }
:root[data-skin="cockpit"] .brief h2{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); font-weight:500 }
:root[data-skin="cockpit"] .brief li{ text-transform:uppercase; font-size:12px } :root[data-skin="cockpit"] .brief li .k{ font-size:0; color:var(--phos) } :root[data-skin="cockpit"] .brief li .k::before{ content:"●"; font-size:9px; line-height:18px }
:root[data-skin="cockpit"] .brief li.conflict .k, :root[data-skin="cockpit"] .brief li.transition .k{ color:var(--amber) }
:root[data-skin="cockpit"] .brief li.conflict{ border-bottom:3px solid; border-image:repeating-linear-gradient(135deg,var(--amber) 0 6px,transparent 6px 12px) 1; padding-bottom:6px }
:root[data-skin="cockpit"] .ev .name{ text-transform:uppercase; font-size:12.5px } :root[data-skin="cockpit"] .ev .loc{ text-transform:uppercase; font-size:11px }
:root[data-skin="cockpit"] .ic .bracket{ display:block } :root[data-skin="cockpit"] .ic .rough{ display:none } :root[data-skin="cockpit"] .ic .clean{ display:block }
:root[data-skin="cockpit"] .views{ border-radius:2px; background:#0B0E10 } :root[data-skin="cockpit"] .views button{ border-radius:2px; text-transform:uppercase; font-size:11px; letter-spacing:.06em }
:root[data-skin="cockpit"] .views button[aria-selected="true"]{ background:var(--phos); color:#0B0E10 }
:root[data-skin="cockpit"] .tools button{ text-transform:uppercase; font-size:11px; letter-spacing:.06em }
:root[data-skin="cockpit"] .quick input, :root[data-skin="cockpit"] .sheet input, :root[data-skin="cockpit"] .sheet select{ border-radius:2px; background:#0B0E10; border:1px solid #3A4249; box-shadow:none }
:root[data-skin="cockpit"] .quick button, :root[data-skin="cockpit"] .sheet .primary{ border-radius:2px; background:var(--phos); color:#0B0E10 }
:root[data-skin="cockpit"] .sheet{ border-radius:4px 4px 0 0; border-top:1px solid #3A4249 } :root[data-skin="cockpit"] .sheet .choice button, :root[data-skin="cockpit"] .sheet .actions button{ border-radius:2px }
:root[data-skin="cockpit"] .sheet .choice button[aria-pressed="true"]{ background:var(--phos); color:#0B0E10; border-color:var(--phos) }
:root[data-skin="cockpit"] .blk{ border-radius:2px; text-transform:uppercase; font-size:11px } :root[data-skin="cockpit"] .strip .cell{ border-radius:2px } :root[data-skin="cockpit"] .toast{ border-radius:2px; background:var(--phos); color:#0B0E10 }
:root[data-skin="cockpit"] .zen{ background:#0B0E10; color:var(--phos) } :root[data-skin="cockpit"] .zen svg.ff{ display:none }
:root[data-skin="cockpit"] .zen .glass{ background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.3) 2px 3px), radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5)) }
:root[data-skin="cockpit"] .zen .clock{ font-weight:500; text-shadow:none } :root[data-skin="cockpit"] .zen .next{ text-shadow:none } :root[data-skin="cockpit"] .zen .cue{ text-transform:uppercase; letter-spacing:.06em }
:root[data-skin="cockpit"] .zen .leave{ background:none; border:1px solid var(--phos); color:var(--phos); border-radius:2px }

/* ---- port additions (PR 1): the foot carries the connect / sign-out affordance; no new controls in the chrome ---- */
.foot a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
.sheet .cals label{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); margin:6px 0 }
.sheet .cals input{ width:auto }
.sheet .detail .zone{ font-variant-numeric:tabular-nums }
/* port rule 5 (PR 0b): the header crop toggle in the Scene lab. "band" (default) shows a 74 px slice anchored on the horizon; "tall" shows the whole scene on every day, the empty-day height. Decided on the preview (spec §12 Q16). */
:root[data-crop="tall"] .day .scene{ height:132px }
:root[data-crop="tall"][data-skin="plate"] .scene canvas{ height:150px }

/* ═══ Owner feedback, 2026-09-16 ═════════════════════════════════════════════
   Seven things from a session on the preview. Appended rather than edited in
   place so each fix is legible next to the reason for it.                     */

/* 1 · A rule colour. Framing lines were all --paper-2, which is a SURFACE: on
   Plate, paper-2 differs from paper by three hex points, so the week's column
   borders and hour lines were invisible and the grid had no structure. A rule
   is ink at low alpha, and every skin sets its own. */
:root{ --rule:rgba(27,31,34,.14) }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --rule:rgba(220,235,224,.16) } }
:root[data-theme="dark"]{ --rule:rgba(220,235,224,.16) }
:root[data-skin="plate"]{ --rule:rgba(42,38,34,.34) }
:root[data-skin="cockpit"]{ --rule:rgba(140,240,168,.20) }

.col{ border-left:1px solid var(--rule) }
.heads .colhead{ border-left:1px solid var(--rule) }
.grid{ background:repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 48px) }
.wkhead{ border-bottom:1px solid var(--rule) }
.gutter{ border-right:1px solid var(--rule) }
/* Plate is an engraving: it wants line, not tint. */
:root[data-skin="plate"] .wkhead{ border-bottom-width:1px; border-bottom-color:var(--ink) }
:root[data-skin="plate"] .heads .colhead{ border-left-color:var(--rule) }
:root[data-skin="plate"] .blk{ background:var(--paper); border:1px solid var(--ink); border-left-width:3px; border-radius:0 }
:root[data-skin="plate"] .blk small{ color:var(--ink-2) }
:root[data-skin="plate"] .heads .hd b{ font-variant:small-caps; letter-spacing:.03em }

/* 2 · The week had no scenes at all — renderWeek never made a canvas, so there
   was nothing to animate. Each column head now carries the same seeded scene
   the agenda's day header does, as a band above the date. */
.wkscene{ position:relative; height:38px; overflow:hidden; background:var(--paper-2); border-bottom:1px solid var(--rule) }
.wkscene canvas{ display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; image-rendering:crisp-edges; filter:brightness(var(--breath)) }
.wktally{ position:absolute; right:4px; bottom:3px; min-width:15px; text-align:center; font:600 10px/15px var(--font-sans); color:#ECEDE8;
          background:rgba(0,0,0,.42); border-radius:999px; padding:0 4px }
:root[data-skin="plate"] .wkscene{ height:44px; border-bottom:1px solid var(--ink) }
:root[data-skin="plate"] .wkscene canvas{ image-rendering:auto }
:root[data-skin="plate"] .wktally{ color:var(--paper); background:var(--ink); border-radius:0 }
:root[data-skin="cockpit"] .wktally{ color:#0B0E10; background:var(--phos,#8CF0A8); border-radius:2px }
.col.today .grid, .heads .colhead.today{ background:color-mix(in srgb, var(--seal) 5%, transparent) }

/* 3 · Day cells did not look tappable. They had no border and no background,
   only a :hover, which does nothing on a phone — so a month of dates read as
   text. Now every cell is visibly a control, today is outlined, and a day with
   something on it says so. */
.strip .cell{ background:var(--paper-2); border:1px solid transparent; transition:border-color .12s, background-color .12s }
.strip .cell:hover{ background:var(--paper); border-color:var(--rule) }
.strip .cell:active{ transform:translateY(1px) }
.strip .cell.today{ border-color:var(--seal) }
.strip .cell.busy{ background:color-mix(in srgb, var(--ink) 8%, var(--paper-2)) }
.strip .cell.other{ background:transparent; opacity:.55 }
:root[data-skin="plate"] .strip .cell{ border-color:var(--rule) }

/* 4 · The month picker existed all along: tapping the month name expands the
   strip to a full month. It was styled as plain text, so nobody found it. */
.strip .head button.month{ display:inline-flex; align-items:center; gap:5px; background:var(--paper-2); border:1px solid var(--rule); border-radius:999px; padding:4px 12px }
.strip .head button.month:hover{ background:var(--paper); border-color:var(--ink-3) }
.strip .head button.month i{ font-style:normal; font-size:11px; color:var(--ink-2); line-height:1 }
.strip .head button.month[aria-expanded="true"]{ background:var(--ink); color:var(--paper) }
.strip .head button.month[aria-expanded="true"] i{ color:var(--paper) }
:root[data-skin="plate"] .strip .head button.month{ border-radius:0 }
:root[data-skin="cockpit"] .strip .head button.month{ border-radius:2px }

/* 5 · The tiles had room going spare, so each one says what the day holds. */
.scene .tally{ position:absolute; right:14px; top:8px; z-index:1; font:11px/1 var(--font-sans); letter-spacing:.02em;
               color:var(--scene-text); background:rgba(0,0,0,.30); padding:4px 8px; border-radius:999px; backdrop-filter:blur(2px) }
:root[data-skin="plate"] .scene .tally{ position:static; display:block; color:var(--ink); background:none; padding:4px 8px 0; font-style:italic; backdrop-filter:none }
:root[data-skin="cockpit"] .scene .tally{ color:var(--phos,#8CF0A8); background:rgba(11,14,16,.66); border-radius:2px; text-transform:uppercase }

/* 6 · The detail sheet carries what an invite carries. */
.detail .join{ display:inline-block; margin:2px 0 8px; padding:8px 14px; border-radius:999px; background:var(--ink); color:var(--paper);
               font:500 13px var(--font-sans); text-decoration:none }
.detail .join:hover{ opacity:.9 }
.detail .desc{ margin:2px 0 10px; font-size:14px; line-height:1.5; color:var(--ink-2); white-space:pre-wrap }
.detail .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px }
.detail ul.guests, .detail ul.files{ list-style:none; margin:0; padding:0 }
.detail ul.guests li, .detail ul.files li{ padding:1px 0 }
.detail ul.files a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
:root[data-skin="plate"] .detail .join{ border-radius:0; border:1px solid var(--ink); background:none; color:var(--ink) }
:root[data-skin="cockpit"] .detail .join{ border-radius:2px; background:var(--phos,#8CF0A8); color:#0B0E10 }

/* 7 · Zen can change its own scene now, behind one button so the picture stays
   the point. Same state the agenda's Scene lab writes. */
.zen .zlab{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:82px; border:0; background:rgba(255,255,255,.12); color:#DCEBE0;
            padding:9px 13px; border-radius:999px; font:500 13px var(--font-sans); cursor:pointer }
.zen .zlab:hover{ background:rgba(255,255,255,.2) }
.zen .zlabpanel{ position:absolute; top:calc(58px + env(safe-area-inset-top)); right:14px; z-index:2; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
                 max-width:calc(100vw - 28px); background:rgba(14,33,30,.92); border:1px solid rgba(220,235,224,.18); border-radius:12px; padding:10px 12px;
                 font:13px var(--font-sans); color:#DCEBE0; backdrop-filter:blur(6px) }
.zen .zlabpanel select{ background:rgba(255,255,255,.1); color:#DCEBE0; border:1px solid rgba(220,235,224,.22); border-radius:8px; padding:6px 8px; font:13px var(--font-sans) }
.zen .zlabpanel button{ border:0; background:#DCEBE0; color:#0E211E; border-radius:8px; padding:7px 12px; font:500 13px var(--font-sans); cursor:pointer }
.zen .zlabpanel label{ display:inline-flex; align-items:center; gap:5px }

/* An empty today offers something to do with the minute, rather than a blank. Quiet on purpose: no header control, no
   badge, and only on today. The Distract tab in the roadmap is the real answer; this is the interim (spec §12, Q18). */
.note a.idle{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px }
.note a.idle:hover{ color:var(--ink) }