/* From design/prototype-macos.html (the approved design). Layout: a macOS desktop. Glass menu bar, glass windows on a live three.js wallpaper (Victorian coast at dusk), Dock at the bottom. Calendar mirrors Calendar.app month view with stays as spanning bars. */
:root{
  --text:#1d1d1f; --text2:#5b5b63; --hair:rgba(0,0,0,.10); --hair2:rgba(0,0,0,.06);
  --glass:rgba(248,248,250,.74); --glass-strong:rgba(252,252,253,.9); --chrome:rgba(236,236,240,.6);
  --hover:rgba(0,122,255,.10); --weekend:rgba(0,0,0,.025);
  --green:#28a745; --orange:#e08600; --red:#e5372b; --blue:#0a7aff; --grey:#8e8e93; --purple:#8e44c9; --btn:#1a7f37;
  --green-s:rgba(52,199,89,.20); --orange-s:rgba(255,159,10,.22); --red-s:rgba(255,69,58,.16); --blue-s:rgba(10,132,255,.16); --grey-s:rgba(142,142,147,.18); --purple-s:rgba(175,82,222,.18);
  --wp1:#f7c6a3; --wp2:#e5826f; --wp3:#1f4b74; --wp4:#ffd36b;
  --globe:#173a63; --land:#d9c89e; --skyline:#1a2b45; --window:#ffd36b; --window-a:.55; --shadow:0 22px 60px rgba(20,24,40,.28), 0 0 0 .5px rgba(0,0,0,.12);
  --ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Dock icon art reads on both themes */
  --ic-cal:#ffffff; --ic-calred:#ff3b30; --ic-globe1:#5ac8fa; --ic-globe2:#0a4fa8; --ic-bed1:#bf5af2; --ic-bed2:#5e2ca5; --ic-note1:#ffe27a; --ic-note2:#f7c948; --ic-ink:#1d1d1f;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --text:#f5f5f7; --text2:#a1a1aa; --hair:rgba(255,255,255,.12); --hair2:rgba(255,255,255,.06);
  --glass:rgba(32,32,36,.66); --glass-strong:rgba(40,40,44,.9); --chrome:rgba(48,48,54,.55);
  --hover:rgba(10,132,255,.22); --weekend:rgba(255,255,255,.03);
  --green:#30d158; --orange:#ff9f0a; --red:#ff6b61; --blue:#4aa3ff; --grey:#98989d; --purple:#bf5af2; --btn:#238636;
  --green-s:rgba(48,209,88,.24); --orange-s:rgba(255,159,10,.24); --red-s:rgba(255,69,58,.24); --blue-s:rgba(10,132,255,.26); --grey-s:rgba(152,152,157,.22); --purple-s:rgba(191,90,242,.26);
  --wp1:#232a52; --wp2:#6b3f72; --wp3:#07131f; --wp4:#f0a35c;
  --globe:#1a4a7e; --land:#6f7d63; --skyline:#02060c; --window:#ffcf70; --window-a:.85; --shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.14); color-scheme:dark}}
:root[data-theme="dark"]{
  --text:#f5f5f7; --text2:#a1a1aa; --hair:rgba(255,255,255,.12); --hair2:rgba(255,255,255,.06);
  --glass:rgba(32,32,36,.66); --glass-strong:rgba(40,40,44,.9); --chrome:rgba(48,48,54,.55);
  --hover:rgba(10,132,255,.22); --weekend:rgba(255,255,255,.03);
  --green:#30d158; --orange:#ff9f0a; --red:#ff6b61; --blue:#4aa3ff; --grey:#98989d; --purple:#bf5af2; --btn:#238636;
  --green-s:rgba(48,209,88,.24); --orange-s:rgba(255,159,10,.24); --red-s:rgba(255,69,58,.24); --blue-s:rgba(10,132,255,.26); --grey-s:rgba(152,152,157,.22); --purple-s:rgba(191,90,242,.26);
  --wp1:#232a52; --wp2:#6b3f72; --wp3:#07131f; --wp4:#f0a35c;
  --globe:#1a4a7e; --land:#6f7d63; --skyline:#02060c; --window:#ffcf70; --window-a:.85; --shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.14); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;color:var(--text);font-family:var(--ui);font-size:14px;line-height:1.45;
  background-color:var(--wp3);background-image:linear-gradient(180deg,var(--wp1),var(--wp2) 45%,var(--wp3));background-attachment:fixed;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:0 120px;min-height:100vh}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--glass-strong)}
#wall{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}
.num{font-variant-numeric:tabular-nums}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}

/* Menu bar */
.menubar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;height:28px;display:flex;align-items:center;gap:2px;font-size:13px;
  margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding:0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));border-bottom:.5px solid var(--hair)}
.menubar a{color:var(--text);text-decoration:none;padding:3px 9px;border-radius:5px;display:flex;align-items:center;gap:6px}
.menubar a:hover,.menubar a:focus-visible{background:var(--hover);outline:none}
.menubar .app{font-weight:700}
.menubar .sp{flex:1}
.menubar .clk{padding:3px 8px;white-space:nowrap;color:var(--text)}
@media (max-width:600px){.menubar .opt{display:none}}

.desk{max-width:1000px;margin:34px auto 0;display:grid;gap:24px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.span{grid-column:1/-1}
@media (max-width:780px){.desk{grid-template-columns:minmax(0,1fr)}}

/* Windows */
.win{border-radius:12px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column;overflow:hidden;scroll-margin-top:48px;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.win:nth-child(2){animation-delay:.06s}.win:nth-child(3){animation-delay:.12s}.win:nth-child(4){animation-delay:.18s}.win:nth-child(5){animation-delay:.24s}
@keyframes rise{from{transform:translateY(14px) scale(.985)}to{transform:none}}
.tbar{height:38px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:.5px solid var(--hair);background:var(--chrome)}
.lights{display:flex;gap:8px;flex:none}
.lights i,.lights button{all:unset;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);display:block}
.lights .r{background:#ff5f57}.lights .y{background:#febc2e;cursor:pointer;position:relative}.lights .g{background:#28c840}
.lights .y::after{content:"";position:absolute;left:3px;right:3px;top:5.5px;height:1px;background:rgba(80,50,0,.7);opacity:0}
.lights:hover .y::after{opacity:1}
.lights .y:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tbar h2{margin:0;flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:52px}
.tbar .extra{font-size:12px;color:var(--text2);white-space:nowrap}
.wbody{padding:18px 20px;display:grid;gap:16px;min-width:0}
.win.min .wbody,.win.min .foot{display:none}
.foot{border-top:.5px solid var(--hair);padding:7px 14px;font-size:12px;color:var(--text2);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--chrome)}

h1{font-family:var(--display);font-size:clamp(28px,5vw,40px);line-height:1.05;letter-spacing:-.025em;font-weight:700;margin:0;text-wrap:balance}
.lede{margin:0;color:var(--text2);font-size:15px;max-width:54ch}
.facts{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;padding:4px 10px;border-radius:999px;background:var(--hair2);border:.5px solid var(--hair);white-space:nowrap}
.chip b{font-weight:600}
.draft{font-size:12.5px;padding:8px 12px;border-radius:9px;background:var(--orange-s);display:flex;gap:8px;align-items:center}
.draft::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}

/* Steps + progress */
.steps{list-style:none;margin:0;padding:0;display:grid;border:.5px solid var(--hair);border-radius:10px;overflow:hidden;background:var(--hair2)}
.steps li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 12px;border-top:.5px solid var(--hair)}
.steps li:first-child{border-top:0}
.steps .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--hair);color:var(--text2)}
.steps li.now .n{background:var(--blue);color:#fff}
.steps .t{font-weight:600}
.steps .s{font-size:12.5px;color:var(--text2);text-align:right}
.steps li.now .s{color:var(--blue);font-weight:500}
.prog{display:grid;gap:8px}
.progline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.progline strong{font-family:var(--display);font-size:32px;letter-spacing:-.02em;line-height:1}
.progline .d{font-size:12.5px;color:var(--text2)}
.bar{position:relative;height:10px;border-radius:999px;background:var(--hair);display:flex;margin-top:20px}
.bar .seg{height:100%;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar .seg:first-child{border-radius:999px 0 0 999px}
.bar .a{background:var(--green)} .bar .b{background:var(--orange);opacity:.85}
.bar .tick{position:absolute;top:-5px;bottom:-5px;width:2px;border-radius:2px;background:var(--text)}
.bar .tick span{position:absolute;bottom:calc(100% + 4px);left:0;transform:translateX(-50%);font-size:11.5px;font-weight:600;white-space:nowrap}

/* Globe */
.globe{position:relative;width:100%;aspect-ratio:1/1;max-width:100%;max-height:380px;margin-inline:auto}
.globe canvas{width:100%!important;height:100%!important;display:block}
.globe .fb{position:absolute;inset:0;display:grid;place-items:center;color:var(--text2)}
.route{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.route .city{display:grid}
.route .city b{font-size:17px;font-family:var(--display);letter-spacing:-.01em}
.route .city span{font-size:12px;color:var(--text2)}
.route .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--orange),transparent);position:relative}
.route .city:last-child{text-align:right}
.route + .route{margin-top:10px;padding-top:10px;border-top:1px solid var(--sep, rgba(127,127,127,.18))}
.route:has(.dir){flex-wrap:wrap;row-gap:2px}
.route .dir{flex-basis:100%;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.route.b1 .line{background:linear-gradient(90deg,transparent,#4aa3ff,transparent)}
.route.b2 .line{background:linear-gradient(90deg,transparent,#ff5fa2,transparent)}

/* Legend */
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--text2)}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.c-confirmed{--c:var(--green);--cs:var(--green-s)} .c-asked{--c:var(--orange);--cs:var(--orange-s)}
.c-ask{--c:var(--red);--cs:var(--red-s)} .c-self{--c:var(--blue);--cs:var(--blue-s)} .c-fly{--c:var(--grey);--cs:var(--grey-s)} .c-admin{--c:var(--purple);--cs:var(--purple-s)}
.dot{background:var(--c)}

/* Calendar month view */
.calhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.calhead h3{margin:0;font-family:var(--display);font-size:24px;letter-spacing:-.02em}
.calhead h3 span{font-weight:400;color:var(--text2)}
.cal{border:.5px solid var(--hair);border-radius:10px;overflow:hidden}
.dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:.5px solid var(--hair)}
.dow div{font-size:11.5px;color:var(--text2);text-align:right;padding:6px 8px;font-weight:500}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:28px 24px 20px minmax(14px,1fr);min-height:104px;border-top:.5px solid var(--hair);position:relative}
.week:first-child{border-top:0}
.cell{all:unset;box-sizing:border-box;grid-row:1/-1;border-left:.5px solid var(--hair);cursor:pointer;display:flex;justify-content:flex-end;align-items:flex-start;padding:5px 7px;min-width:0;transition:background .15s}
.cell:first-child{border-left:0}
.cell.we{background:var(--weekend)}
.cell:hover,.cell.on{background:var(--hover)}
.cell:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cell.out{cursor:default;color:var(--text2);opacity:.6}
.cell.out:hover{background:transparent}
.cell .n{font-size:13px;font-weight:500;min-width:22px;height:22px;display:grid;place-items:center;border-radius:11px;padding:0 5px}
.cell .n.mon{font-weight:700}
.cell.today .n{background:var(--red);color:#fff}
.evt{grid-row:2;z-index:1;pointer-events:none;margin:0 3px;border-radius:5px;background:var(--cs);color:var(--text);font-size:12px;font-weight:500;
  display:flex;align-items:center;gap:6px;padding:0 7px;overflow:hidden;white-space:nowrap;min-width:0}
.evt .dot{width:7px;height:7px}
.evt span{overflow:hidden;text-overflow:ellipsis}
.evt.cl{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.evt.cr{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.go{grid-row:3;z-index:1;pointer-events:none;font-size:11px;color:var(--text2);padding:2px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.go::before{content:"↗ ";color:var(--blue)}
@media (max-width:640px){
  .week{grid-template-rows:24px 18px 0 minmax(8px,1fr);min-height:66px}
  .cell{padding:3px}
  .cell .n{font-size:11.5px;min-width:19px;height:19px}
  .evt{font-size:9.5px;padding:0 4px;gap:3px;margin:0 1px}
  .evt .dot{display:none}
  .go{display:none}
  .dow div{padding:5px 4px;font-size:10.5px}
}

/* Popover */
.pop{position:fixed;z-index:20;width:min(300px,calc(100vw - 32px));border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;display:grid;gap:10px;pointer-events:none;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  opacity:1;transform:none;transition:opacity .12s, transform .12s}
.pop.pinned{pointer-events:auto}
.pop::before{content:"";position:absolute;left:var(--tx,40px);width:14px;height:14px;background:inherit;transform:translateX(-50%) rotate(45deg);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.pop.below::before{top:-6px;box-shadow:-.5px -.5px 0 var(--hair)}
.pop.above::before{bottom:-6px;box-shadow:.5px .5px 0 var(--hair)}
.pop h3{margin:0;font-family:var(--display);font-size:17px;letter-spacing:-.01em;display:flex;gap:8px;align-items:center}
.pop .k{font-size:11.5px;color:var(--text2);font-weight:500}
.pop .row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;font-size:13px}
.pop .row .k{padding-top:1px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--cs);color:var(--text);white-space:nowrap}

/* Stays table */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-size:11.5px;font-weight:600;color:var(--text2);text-align:left;padding:6px 10px;border-bottom:.5px solid var(--hair)}
td{padding:9px 10px;vertical-align:middle}
tbody tr:nth-child(even) td{background:var(--hair2)}
td .who{display:block;font-size:12px;color:var(--text2)}
td:first-child,th:first-child{padding-left:6px}

.notes{font-size:15px;max-width:62ch;display:grid;gap:10px}
.notes p{margin:0}

/* Dock */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:8;display:flex;gap:10px;align-items:flex-end;padding:8px 10px;border-radius:22px;
  box-shadow:var(--shadow);border:.5px solid var(--hair)}
.dock a{display:block;width:52px;height:52px;border-radius:12px;transition:transform .18s cubic-bezier(.2,.8,.2,1);position:relative;text-decoration:none}
.dock a:hover,.dock a:focus-visible{transform:translateY(-8px) scale(1.18);outline:none}
.dock a .tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);font-size:12px;padding:3px 9px;border-radius:6px;background:var(--glass-strong);color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:var(--shadow)}
.dock a:hover .tip,.dock a:focus-visible .tip{opacity:1}
.dock svg{width:100%;height:100%;display:block;border-radius:12px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
@media (max-width:420px){.dock a{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.win{animation:none}.bar .seg{transition:none}.dock a{transition:none}}

/* ── Additions for the live site (not in the prototype) ── */
[hidden]{display:none!important}
a{color:var(--blue)}
.line{margin:0;font-size:14.5px;max-width:62ch}
.muted{color:var(--text2)}
.nowrap{white-space:nowrap}
.bad{color:var(--red);font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wbody.tight{padding-top:8px}
.route .city.mid{text-align:center}
.go.plan{color:var(--text)}
.go.plan::before{content:"• ";color:var(--text2)}
.legs{font-size:12.5px}
.legs td{padding:4px 6px}

/* Admin days: purple marker (spec §3) */
.cell.admin{box-shadow:inset 0 -3px 0 var(--purple)}
.adm{grid-row:4;z-index:1;pointer-events:none;align-self:start;margin:2px 3px 0;font-size:11px;font-weight:600;color:var(--purple);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:640px){.adm{display:none}}

/* Personal page */
.personal{gap:12px}
.ask{display:grid;gap:8px;padding:12px 14px;border-radius:10px;background:var(--hair2);border:.5px solid var(--hair)}
.ask .q,.q{margin:0;font-size:17px;line-height:1.35;font-family:var(--display);letter-spacing:-.01em}
.k{font-size:12px;color:var(--text2);font-weight:600;margin-right:4px}
.btn{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:9px;border:.5px solid var(--hair);background:var(--glass-strong);color:var(--text);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.2}
.btn:hover{background:var(--hover)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn.small{font-size:12px;padding:4px 9px;border-radius:7px}
.btn.wa{color:var(--text)}

/* /us */
.warnings{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px}
td.link code{font-size:12px;word-break:break-all}
td.link .btn{margin:2px 4px 2px 0}
.foot form{margin:0}

@media (max-width:780px){
  .desk{margin-top:16px;gap:16px}
  #flight{order:10} /* globe below the fold on phones (spec §3) */
  .wbody{padding:14px 14px}
}

/* Melbourne skyline (src/views/skyline.ts) in front of the dusk wallpaper, behind everything else */
.skyline{position:fixed;left:0;right:0;bottom:0;width:100%;height:min(34vh,320px);z-index:-1;pointer-events:none;display:block}
.skyline .city{fill:var(--skyline)}
.skyline .line{fill:none;stroke:var(--skyline)}
.skyline .gold{fill:var(--wp4);opacity:.85}
.skyline .lit{fill:var(--window);opacity:var(--window-a)}
.skyline .water-top{stop-color:var(--skyline);stop-opacity:.92}
.skyline .water-bottom{stop-color:var(--wp3);stop-opacity:1}
.skyline .ripples{stroke:var(--wp4);stroke-opacity:.35;stroke-width:1.5;fill:none}
@media (max-width:780px){.skyline{height:min(24vh,200px)}}