/* chaos n calm — calendar view. Every value here already exists in
/* ---------- the palette ----------
   Every color the app paints comes from here. Light is the warm paper world;
   dark is that same world after sunset — umber paper, lit ink, borders that
   flip light while the hard shadows stay near-black. The rainbow never
   changes, and the ink on an amber chip never changes either. */
:root{
  --ground:#F1ECE0; --wrap-shadow:0 1px 2px rgba(20,20,20,.05),0 10px 34px rgba(20,20,20,.07);
  --paper:#FAF7F0; --paper-92:rgba(250,247,240,.92); --paper-94:rgba(250,247,240,.94);
  --sheet:#FAF7F0; --card:#FFFDF8; --plate:#FFFDF8; --on-plate:#141414;
  --raise:#F2EDE1; --sink:#F6F3EA; --sink-2:#EFEADB; --well:#F0EBDD;
  --ink:#141414; --ink-dim:#5F5B50; --muted:#6E6A5F; --faint:#C9C3B4; --ghost:#DEDED6;
  --line:#D8D3C4; --line-soft:#E8E2D4; --line-hair:#F0EBDD; --track:#E8E2D4;
  --slab:#141414; --on-slab:#FAF7F0;
  --on-slab-dim:rgba(250,247,240,.55); --on-slab-track:rgba(250,247,240,.16);
  --on-slab-line:rgba(250,247,240,.35);
  --accent:#732982; --accent-line:#C9A0DC; --accent-wash:#F7F2FA;
  --accent-soft:#EDE6F2; --accent-tint:#F1EAF4; --accent-edge:#D9C2E0;
  --danger:#C4020A; --ok:#1D6B34; --ok-line:#B2D8BE; --ok-wash:#E7F2E9;
  --amber:#E8A33D; --on-amber:#141414; --rust:#B35600; --gold:#8A6A00; --gold-wash:#F3E8B8;
  --wash:rgba(250,247,240,.55);
  --scrim:rgba(20,20,20,.45); --scrim-soft:rgba(20,20,20,.25); --scrim-hard:rgba(20,20,20,.82);
  --tint:rgba(20,20,20,.06); --tint-soft:rgba(20,20,20,.05);
  --shadow:#141414; --shadow-soft:rgba(20,20,20,.3); --shadow-bar:rgba(20,20,20,.08);
  --land:#EFEBDD; --land-line:#DBD5C2; --dither:rgba(250,247,240,.25);
  --map-filter:sepia(.3) saturate(.65) contrast(1.03) brightness(1.04);
  --head-outline:none;
  color-scheme:light;
}
/* the OS is the default answer; an explicit choice overrides it in either
   direction, which is why the media query has to step aside for it */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B0A08; --wrap-shadow:0 1px 2px rgba(0,0,0,.55),0 10px 34px rgba(0,0,0,.5);
    --paper:#141210; --paper-92:rgba(20,18,16,.92); --paper-94:rgba(20,18,16,.94);
    --sheet:#1E1A15; --card:#1B1712; --plate:#EDE7DA; --on-plate:#141210;
    --raise:#221E18; --sink:#0C0B09; --sink-2:#171410; --well:#1F1B15;
    --ink:#EDE7DA; --ink-dim:#C6BEAB; --muted:#A39C8B; --faint:#6B6453; --ghost:#4A4536;
    --line:#39332A; --line-soft:#2B2620; --line-hair:#241F1B; --track:#2E2921;
    --slab:#0A0908; --on-slab:#EDE7DA;
    --on-slab-dim:rgba(237,231,218,.66); --on-slab-track:rgba(237,231,218,.18);
    --on-slab-line:rgba(237,231,218,.35);
    --accent:#C77BD6; --accent-line:#7E4E8D; --accent-wash:#211826;
    --accent-soft:#291E2E; --accent-tint:#241A29; --accent-edge:#5E3C6A;
    --danger:#F2665E; --ok:#6FCB88; --ok-line:#33734A; --ok-wash:#132217;
    --amber:#E8A33D; --on-amber:#141414; --rust:#F0904A; --gold:#D9AE3A; --gold-wash:#2B220C;
    --wash:rgba(20,18,16,.55);
    --scrim:rgba(0,0,0,.72); --scrim-soft:rgba(0,0,0,.55); --scrim-hard:rgba(0,0,0,.9);
    --tint:rgba(237,231,218,.07); --tint-soft:rgba(237,231,218,.05);
    --shadow:#050403; --shadow-soft:rgba(0,0,0,.6); --shadow-bar:rgba(0,0,0,.55);
    --land:#1E1A15; --land-line:#39332A; --dither:rgba(20,18,16,.3);
    --map-filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.82) contrast(1.06);
    /* the cast keep their #141414 outlines — on dark ground they get a crisp
       1px paper-colored second outline so heads don't fuse into the night */
    --head-outline:drop-shadow(1px 0 0 #EDE7DA) drop-shadow(-1px 0 0 #EDE7DA) drop-shadow(0 1px 0 #EDE7DA) drop-shadow(0 -1px 0 #EDE7DA);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --ground:#0B0A08; --wrap-shadow:0 1px 2px rgba(0,0,0,.55),0 10px 34px rgba(0,0,0,.5);
    --paper:#141210; --paper-92:rgba(20,18,16,.92); --paper-94:rgba(20,18,16,.94);
    --sheet:#1E1A15; --card:#1B1712; --plate:#EDE7DA; --on-plate:#141210;
    --raise:#221E18; --sink:#0C0B09; --sink-2:#171410; --well:#1F1B15;
    --ink:#EDE7DA; --ink-dim:#C6BEAB; --muted:#A39C8B; --faint:#6B6453; --ghost:#4A4536;
    --line:#39332A; --line-soft:#2B2620; --line-hair:#241F1B; --track:#2E2921;
    --slab:#0A0908; --on-slab:#EDE7DA;
    --on-slab-dim:rgba(237,231,218,.66); --on-slab-track:rgba(237,231,218,.18);
    --on-slab-line:rgba(237,231,218,.35);
    --accent:#C77BD6; --accent-line:#7E4E8D; --accent-wash:#211826;
    --accent-soft:#291E2E; --accent-tint:#241A29; --accent-edge:#5E3C6A;
    --danger:#F2665E; --ok:#6FCB88; --ok-line:#33734A; --ok-wash:#132217;
    --amber:#E8A33D; --on-amber:#141414; --rust:#F0904A; --gold:#D9AE3A; --gold-wash:#2B220C;
    --wash:rgba(20,18,16,.55);
    --scrim:rgba(0,0,0,.72); --scrim-soft:rgba(0,0,0,.55); --scrim-hard:rgba(0,0,0,.9);
    --tint:rgba(237,231,218,.07); --tint-soft:rgba(237,231,218,.05);
    --shadow:#050403; --shadow-soft:rgba(0,0,0,.6); --shadow-bar:rgba(0,0,0,.55);
    --land:#1E1A15; --land-line:#39332A; --dither:rgba(20,18,16,.3);
    --map-filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.82) contrast(1.06);
    /* the cast keep their #141414 outlines — on dark ground they get a crisp
       1px paper-colored second outline so heads don't fuse into the night */
    --head-outline:drop-shadow(1px 0 0 #EDE7DA) drop-shadow(-1px 0 0 #EDE7DA) drop-shadow(0 1px 0 #EDE7DA) drop-shadow(0 -1px 0 #EDE7DA);
    color-scheme:dark;
}
/* pixel heads that sit on page ground (never on a light plate — the chat FAB
   keeps its lit square, so Judy there needs nothing) */
.who-head,.p-head,.px-head,.st-crew img,#cnc-hist .h-head,#cnc-chat .hd .t img.jd,
#cnc-chat .m.think .jw span,.hd-us{filter:var(--head-outline)}
#cnc-toast img.px-head,#cnc-chat-fab img{filter:none}
   index.html / tracker.css; nothing new is introduced. Computed geometry
   (bar left/width/top, cell heights) is set inline by calendar.js. */

/* ---------- header tabs ---------- */
.tabs { display: flex; gap: 8px; align-items: baseline; }
.tabs button {
  background: var(--paper); border: 2px solid var(--ink); padding: 7px 10px; cursor: pointer;
  font: 700 10px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .12em; color: var(--ink); border-radius: 0;
  box-shadow: 2px 2px 0 var(--shadow-soft);
  -webkit-tap-highlight-color: transparent;
}
.tabs button[data-on="1"] { background: var(--ink); color: var(--paper); }

/* ---------- view chips ---------- */
.cal-chips {
  position: sticky; top: 0; z-index: 6;
  display: flex; gap: 6px; overflow-x: auto;
  padding: 12px 2px 10px;
  background: var(--paper-94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-soft);
}
.cal-chips .sp { flex: 1 }
.chip {
  font: 600 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em;
  padding: 9px 13px; border-radius: 0; cursor: pointer; white-space: nowrap;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--line);
  -webkit-tap-highlight-color: transparent;
}
.chip[data-on="1"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }

/* ---------- period bar ---------- */
.cal-period {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 2px 12px;
}
.cal-period .lbl { font-size: 13px; font-weight: 700; letter-spacing: .18em }
.cal-period .nav { display: flex; gap: 4px; align-items: center }
.cal-period .today {
  font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
  color: var(--muted); background: none; border: none; padding: 0 10px 0 0; cursor: pointer;
}
.cal-period .today:hover { color: var(--accent) }
.cal-period .step {
  width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font: 14px/1 ui-monospace, Menlo, monospace; cursor: pointer;
}
.cal-period .step:hover { background: var(--raise) }
.cal-period .step:disabled { opacity: .35; cursor: default }
.cal-period .step:disabled:hover { background: transparent }

/* ---------- month ---------- */
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 2px solid var(--ink) }
.cal-dow div {
  font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em;
  color: var(--muted); padding: 8px 0 8px 5px;
}
.cal-week { position: relative; border-top: 1px solid var(--line-soft) }
.cal-week .cells { display: grid; grid-template-columns: repeat(7, 1fr) }
.cal-cell {
  border-left: 1px solid var(--well); padding: 5px 4px 6px 5px; box-sizing: border-box;
}
.cal-cell:hover { background: var(--raise) }
.cal-cell[data-today="1"] { background: var(--accent-tint) }
.cal-cell[data-today="1"]:hover { background: var(--accent-soft) }
.cal-num { font: 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .02em; color: var(--ink) }
.cal-cell[data-out="1"] .cal-num { color: var(--faint) }
.cal-cell[data-today="1"] .cal-num { color: var(--accent); font-weight: 700 }
.cal-end { border-top: 1px solid var(--line-soft) }
.cal-empty {
  padding: 16px 2px; font: 10px/1.6 ui-monospace, Menlo, monospace;
  letter-spacing: .1em; color: var(--muted);
}

/* trip bars — span columns, so they sit over the grid rather than in a cell */
.cal-bar {
  position: absolute; box-sizing: border-box; height: 16px;
  display: flex; align-items: center; overflow: hidden;
  font: 600 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em;
  padding: 0 5px;
}
.cal-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cal-bar .rb {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #E40303 0 17%, #FF8C00 17% 33%, #FFED00 33% 50%,
              #008026 50% 67%, #24408E 67% 83%, #732982 83% 100%);
}
/* every non-rainbow bar carries its event color the same way */
.cal-bar .cs { position: absolute; left: 0; right: 0; bottom: 0; height: 2px }

/* ---------- year ---------- */
.yr {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 22px 18px; border-top: 2px solid var(--ink); padding-top: 18px;
}
.yr button {
  background: none; border: none; padding: 0 0 8px; cursor: pointer;
  font: 700 10px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: var(--muted);
}
.yr button[data-on="1"] { color: var(--ink) }
.yr .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px }
.yr .h { font: 8px/1 ui-monospace, Menlo, monospace; color: var(--faint); text-align: center; padding-bottom: 3px }
.yr .c {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font: 9px/1 ui-monospace, Menlo, monospace; border-radius: 0; color: var(--ink-dim);
}
.yr .c[data-out="1"] { color: var(--ghost) }

/* ---------- agenda ---------- */
.ag { border-top: 2px solid var(--ink) }
.ag-g { margin-top: 26px }
.ag-hd {
  display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 8px;
}
.ag-hd .l { font: 700 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .16em }
.ag-hd .n { font: 10px/1 ui-monospace, Menlo, monospace; color: var(--muted); letter-spacing: .12em }
.ag-r {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 2px;
  border-top: 1px solid var(--line-soft); color: var(--ink);
}
.ag-r:hover { background: var(--raise) }
.ag-r .date { flex: none; width: 58px; font: 11px/1.6 ui-monospace, Menlo, monospace; color: var(--muted) }
.ag-r .body { flex: 1; min-width: 0 }
.ag-r .ttl { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35 }
.ag-r .sub {
  display: block; font: 10.5px/1.6 ui-monospace, Menlo, monospace;
  color: var(--muted); letter-spacing: .06em; margin-top: 3px;
}
.ag-r .rb {
  display: block; margin-top: 9px; height: 2px;
  background: linear-gradient(90deg, #E40303 0 17%, #FF8C00 17% 33%, #FFED00 33% 50%,
              #008026 50% 67%, #24408E 67% 83%, #732982 83% 100%);
}
.ag-r[data-past="1"] .date { color: var(--faint) }
.ag-r[data-past="1"] .ttl { color: var(--muted) }
.pill {
  flex: none; font: 600 8.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em;
  border-radius: 0; padding: 3px 6px; margin-top: 2px; border: 1px solid var(--line); color: var(--muted);
}

/* ---------- legend ---------- */
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.cal-legend span.i {
  display: flex; gap: 6px; align-items: center;
  font: 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: var(--muted);
}
.cal-legend .sw { width: 9px; height: 9px; border-radius: 0 }

/* agenda art — the trip's card chip (or legacy SVG) at the row end, earned
   color once the trip is past, greyed while it's still ahead */
.ag-tr { flex: none; width: 28px; height: 28px; margin-left: 10px; align-self: center }
.ag-tr:has(img) { width: 45px }
.ag-tr.wait { filter: grayscale(1) opacity(.35) }
.ag-tr svg, .ag-tr img { width: 100%; height: 100%; display: block }
.ag-tr img { border-radius: 0; border: 2px solid var(--ink); box-sizing: border-box; image-rendering: pixelated; object-fit: cover }

/* keyboard focus is visible; motion is optional */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}