/* ===========================================================================
   Country Hills Board — wall tablet, 1280 × 800 landscape.

   One committed visual world (a warm sage-paper regional map), with a day
   palette and a night palette rather than light/dark themes: the board is a
   fixed object in a room, not a document in someone's browser. Every colour
   is painted explicitly from a token so the page holds on any host ground.

   Palette   paper #E9ECE1 · pine ink #212C26 · sage land #DCE2CF
             slate water #A5BDC8 · madder (Zeynep) · peacock (Matt) · ochre (Alp)
   Type      Bricolage Grotesque display · Karla body · IBM Plex Mono cartographic
   =========================================================================== */

:root {
  --paper:    #E9ECE1;
  --paper-2:  #DFE3D6;
  --card:     #FAFBF5;
  --card-2:   #F1F4EA;
  --ink:      #212C26;
  --ink-2:    #4C584F;
  --ink-3:    #5A655C;
  --rule:     #D2D8C6;
  --rule-2:   #E2E7D9;

  --land:     #DCE2CF;

  --acc-zeynep: #AE3E58;
  --acc-matt:   #1D6E77;
  --acc-alp:    #8F5E0C;
  --acc-shared: #5C6E4F;

  --now:      #57635A;
  --shadow:   0 1px 0 rgba(33,44,38,.05), 0 8px 24px -14px rgba(33,44,38,.32);

  /* time-of-day tints, multiplied over the terrain and scenery only; day is
     no tint at all. Warm light is peach and amber, the evening goes violet. */
  --tint-dawn:   #F2C2A2;
  --tint-golden: #EDAA52;
  --tint-dusk:   #8573BA;
  /* window light, for dusk and night */
  --lamp:        #F0BC62;

  /* wood and parchment: the chrome, framed like the signboards on the map.
     Parchment runs light to dark; wood runs highlight, body, shade, outline. */
  --parch-hi:   #FBF5E0;
  --parch:      #F3E9CC;
  --parch-2:    #E8DBB7;
  --parch-3:    #D6C79B;
  --card-warm:  #F8F2DD;
  --wood-hi:    #C79E68;
  --wood:       #94704A;
  --wood-lo:    #5F4229;
  --wood-ink:   #3B2A1B;
  --alarm:      #A63A33;      /* kill-switch bar: a brick red with a hue, never pure */
  --alarm-ink:  #FCF1E6;
  --warn:       #E0AE4A;      /* lease notice */
  --warn-ink:   #3B2A1B;
  --note:       #E8DBB7;      /* stale/demo data chip */
  --note-ink:   #3B2A1B;
  --tab-on:     #5F4229;      /* a pressed tab */
  --tab-on-ink: #F8EFD9;
  --ink-3-chrome: #56625A;    /* small print on parchment, darker than --ink-3 */

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* the map's own lettering: signboards, plates, town names. Pixel-drawn so
     the type sits on the same grid as the art it labels. */
  --pixel:   "Pixelify Sans", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* night: the same world after dark, not an inverted document */
:root[data-mode="night"] {
  --paper:    #121814;
  --paper-2:  #0D120F;
  --card:     #1B221D;
  --card-2:   #161D19;
  --ink:      #D9E0D4;
  --ink-2:    #98A69B;
  --ink-3:    #8C988F;
  --rule:     #2A332C;
  --rule-2:   #222A24;

  --land:     #1E2620;

  --acc-zeynep: #D8697F;
  --acc-matt:   #4BA7AF;
  --acc-alp:    #D6A03F;
  --acc-shared: #8AA07A;

  --now:      #9AA79D;
  --shadow:   0 1px 0 rgba(0,0,0,.2), 0 10px 26px -16px #000;

  --parch-hi:   #2A271E;
  --parch:      #24211A;
  --parch-2:    #1E1C16;
  --parch-3:    #3A3629;
  --card-warm:  #1F2019;
  --wood-hi:    #86663F;
  --wood:       #624A2F;
  --wood-lo:    #42301F;
  --wood-ink:   #1C130C;
  --alarm:      #8E3732;
  --alarm-ink:  #F6E6DA;
  --warn:       #B38630;
  --warn-ink:   #1C130C;
  --note:       #BDAA78;
  --note-ink:   #1C130C;
  --tab-on:     #6A4E31;
  --tab-on-ink: #F0E7CF;
  --ink-3-chrome: #929E94;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper-2);
}

#frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 800px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  transform-origin: center center;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(20,30,24,.55);
}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.top {
  flex: none;
  position: relative;
  height: 92px;
  padding: 0 26px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* a parchment banner on a wooden rail: the rail is four stepped bands of
     inset shadow (outline, body, highlight, outline), so it costs no layout */
  background: linear-gradient(var(--parch-hi), var(--parch));
  --ink-3: var(--ink-3-chrome);
  box-shadow:
    inset 0 -3px 0 0 var(--wood-ink),
    inset 0 -9px 0 0 var(--wood),
    inset 0 -11px 0 0 var(--wood-hi),
    inset 0 -12px 0 0 var(--wood-ink),
    0 3px 0 0 var(--wood-ink);
}
/* nail heads at the top corners of the banner */
.top::before {
  content: "";
  position: absolute; left: 8px; top: 8px; width: 4px; height: 4px;
  background: var(--wood-lo);
  box-shadow: 1260px 0 0 var(--wood-lo);
}

.brand { display: flex; align-items: center; gap: 18px; }

.clock {
  font-family: var(--display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.clock .ampm {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 5px;
  letter-spacing: 0;
}

.datestack { border-left: 2px solid var(--parch-3); padding-left: 18px; width: 252px; box-sizing: border-box; }
.dateline {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.place {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

/* tonight's dinner: a small parchment plaque between the date and the tabs,
   one line, truncating rather than wrapping. Text only - nothing to tap. */
.tonight {
  flex: 1 1 0; min-width: 0;
  margin: 0 30px 0 28px;
  height: 44px;
  padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
  white-space: nowrap; overflow: hidden;
  background: linear-gradient(var(--parch-hi), var(--parch-2));
  border: 1px solid var(--wood-ink);
  box-shadow:
    inset 0 0 0 2px var(--parch-3),
    0 -2px 0 0 var(--wood-ink), 0 2px 0 0 var(--wood-ink),
    -2px 0 0 0 var(--wood-ink), 2px 0 0 0 var(--wood-ink),
    0 4px 0 0 var(--wood-lo);
  user-select: none;
}
.tn-lab {
  flex: none;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.tn-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.15; }
.tn-meal {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.tn-cook {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--body); font-size: 13px; font-weight: 700;
}
.tn-cook.is-none { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.tonight { margin-right: 14px; }

.tabs { display: flex; gap: 16px; }
/* Tabs are little wooden signs. Raised and parchment when idle; the selected
   one is pressed in - it drops 3px, loses its lip and turns dark wood with
   light type. The outline is four 3px shadows with no corners, which is what
   gives the stepped, pixel corner. */
.tab {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  background: var(--parch-2);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 11px 26px;
  cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--wood-ink), 0 3px 0 0 var(--wood-ink),
    -3px 0 0 0 var(--wood-ink), 3px 0 0 0 var(--wood-ink),
    inset 0 2px 0 0 var(--parch-hi), inset 0 -3px 0 0 var(--parch-3),
    0 6px 0 0 var(--wood-lo);
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.tab:hover { background: var(--parch-hi); }
.tab.is-on {
  background: var(--tab-on);
  color: var(--tab-on-ink);
  transform: translateY(3px);
  box-shadow:
    0 -3px 0 0 var(--wood-ink), 0 3px 0 0 var(--wood-ink),
    -3px 0 0 0 var(--wood-ink), 3px 0 0 0 var(--wood-ink),
    inset 0 4px 0 0 rgba(20, 12, 6, .45), inset 0 -2px 0 0 var(--wood);
}
:where(button):focus-visible {
  outline: 2px solid var(--acc-matt);
  outline-offset: 2px;
}

/* ── panels ──────────────────────────────────────────────────────────────── */
#main { flex: 1; min-height: 0; position: relative; }
.panel {
  position: absolute;
  inset: 0;
  padding: 18px 22px 22px;
  display: none;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.panel.is-on { display: flex; }

/* ── map ─────────────────────────────────────────────────────────────────── */
/* map sits beside the who's-where rail, so it gets the full frame height */
#panel-map { flex-direction: row; }

.mapwrap {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--wood-ink);
  border-radius: 0;
  overflow: hidden;
  background: var(--land);
  /* the map is framed like the signboards: a wooden ring with an outline */
  box-shadow: 0 0 0 4px var(--wood), 0 0 0 5px var(--wood-lo), 0 0 0 7px var(--wood-ink),
              0 7px 0 3px var(--wood-ink);
}
#map { display: block; width: 100%; height: 100%; }
#terrain { image-rendering: pixelated; image-rendering: crisp-edges; }

/* The terrain is a fixed raster, so it cannot follow the palette tokens the
   way the old vector landscape did. At night the landscape and its props are
   dimmed and cooled while the buildings and people keep their own colour -
   which reads as a dark countryside with the lights still on. */
:root[data-mode="night"] #terrain,
:root[data-mode="night"] #layer-scenery {
  filter: brightness(.42) saturate(.7) hue-rotate(-12deg);
}
:root[data-mode="night"] #layer-places .landmark { filter: brightness(.86); }

/* Time-of-day tint: ONE static rect above the terrain and scenery and below
   the towns, places and people, so labels, signboards and tokens are never
   tinted. Multiply keeps it a colour wash rather than a veil; day is clear.
   It is a plain fill - nothing here animates, and night keeps its filter. */
#tint { fill: transparent; opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
:root[data-part="dawn"]   #tint { fill: var(--tint-dawn);   opacity: .6; }
:root[data-part="golden"] #tint { fill: var(--tint-golden); opacity: .5; }
:root[data-part="dusk"]   #tint { fill: var(--tint-dusk);   opacity: .78; }

/* Window light: decoration keyed to the clock alone, so it can never say who
   is where. Shown at dusk and night, hidden otherwise. */
#layer-lights { display: none; pointer-events: none; }
:root[data-part="dusk"]  #layer-lights { display: inline; opacity: .8; }
:root[data-part="night"] #layer-lights { display: inline; }
.lt-pane { fill: var(--lamp); }
.lt-pool { mix-blend-mode: screen; }

/* town names sit on busy terrain, so they carry a halo of the paper colour;
   mitred, so the halo is blocky rather than a smooth rounded glow */
.town-dot  { fill: var(--ink); }
.town-core { fill: var(--paper); }
.town text {
  font-family: var(--pixel); font-size: 17px; font-weight: 600;
  letter-spacing: .04em; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 6px;
  stroke-linejoin: miter;
}

/* landmark signboards */
.sign-post    { fill: #6a4a31; }
.sign-shadow  { fill: var(--ink); opacity: .22; }
.sign-outline { fill: #3c2a1c; }
.sign-board   { fill: #8a6440; }
.sign-grain   { fill: #a37b50; }
.sign-text {
  font-family: var(--pixel); font-size: 19px; font-weight: 600;
  letter-spacing: .04em; fill: #f4ead6;
}
.sign-tag     { fill: #6a4a31; }
.sign-chain   { fill: #3c2a1c; }
.sign-tag-text {
  font-family: var(--pixel); font-size: 12px; font-weight: 500;
  letter-spacing: .02em; fill: #e6d4b4;
}

/* characters */
.ch { transition: transform .9s cubic-bezier(.34,.8,.3,1); cursor: default; }
.ch-name {
  font-family: var(--pixel); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; text-anchor: middle; fill: var(--ink);
}
.ch-plate-edge { fill: var(--wood-ink); }
.ch-plate { fill: var(--card); }
/* the bob is one grid step up and down, not a glide */
.ch-bob { animation: bob 2.3s steps(1, end) infinite; }
@keyframes bob { 0%, 50% { transform: translateY(0); } 50.01%, 100% { transform: translateY(-2.5px); } }

/* who's where */
.strip {
  flex: none;
  width: 272px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.strip .pcard { flex: 1; min-height: 0; }
.pcard {
  background: linear-gradient(var(--parch-hi), var(--parch));
  --ink-3: var(--ink-3-chrome);
  border: 1px solid var(--wood-ink);
  border-radius: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
  /* stepped wooden frame: highlight lip, wood ring, shade line inside; the
     outline outside has no corner pixels, so the corners read as steps */
  box-shadow:
    inset 0 2px 0 0 var(--wood-hi),
    inset 0 0 0 4px var(--wood),
    inset 0 0 0 5px var(--wood-lo),
    0 -2px 0 0 var(--wood-ink), 0 2px 0 0 var(--wood-ink),
    -2px 0 0 0 var(--wood-ink), 2px 0 0 0 var(--wood-ink),
    var(--shadow);
}
.pcard::before {
  content: "";
  position: absolute; left: 5px; top: 5px; bottom: 5px; width: 5px;
  background: var(--acc);
}
.pcard-top { display: flex; align-items: center; gap: 9px; }
.pcard-name {
  font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.pcard-link { color: inherit; text-decoration: none; border-bottom: 2px solid var(--acc); }
.pcard-link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
/* keyboard-only: jumps past the header to the panel */
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--card); padding: 8px 12px; font-weight: 700; }
.skip:focus { top: 8px; }
.pcard-place {
  font-family: var(--display); font-size: 25px; font-weight: 600;
  letter-spacing: -.02em; margin-top: 4px;
  color: color-mix(in srgb, var(--acc) 80%, var(--ink));
  text-wrap: balance; line-height: 1.1;
}
/* place on the left, portrait slot on the right */
.pcard-mid { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-height: 0; margin: 4px 0 6px; }
.pcard-mid .pcard-place { flex: 1; min-width: 0; margin-top: 0; overflow-wrap: anywhere; }
/* an inventory slot: a dark-wood tray, a lit lip along the top and left,
   a stepped corner, and the sprite standing on a parchment floor */
.pslot {
  flex: none; margin-left: auto; align-self: center;
  padding: 7px 8px 6px;
  background: linear-gradient(var(--parch-2), var(--parch-3));
  border: 1px solid var(--wood-ink);
  box-shadow:
    inset 3px 3px 0 0 var(--wood-lo), inset -2px -2px 0 0 var(--parch-hi),
    0 -2px 0 0 var(--wood-ink), 0 2px 0 0 var(--wood-ink),
    -2px 0 0 0 var(--wood-ink), 2px 0 0 0 var(--wood-ink);
}
.portrait-sprite { display: block; image-rendering: pixelated; }
.pcard-meta {
  margin-top: auto; min-width: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
  flex-wrap: wrap; row-gap: 3px;
  white-space: nowrap; letter-spacing: -.02em;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.srctag {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 2px 6px; color: var(--ink-3);
}
.srctag[data-src="manual"] { border-color: var(--ink-2); color: var(--ink-2); }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--acc); flex: none;
}

/* ── filters row (week + meals) ──────────────────────────────────────────── */
.filters {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px;
}
.chips { display: flex; gap: 8px; }
.chip {
  font-family: var(--body); font-size: 15px; font-weight: 500;
  border: 1px solid var(--wood-lo); background: var(--parch-hi);
  color: var(--ink-2);
  border-radius: 4px; padding: 8px 17px; min-height: 44px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.chip:hover { border-color: var(--wood-ink); }
.chip.is-on { background: var(--tab-on); border-color: var(--wood-ink); color: var(--tab-on-ink); }
.chip.is-on .dot { box-shadow: 0 0 0 2px var(--tab-on-ink); }
.chip[data-off="1"] { opacity: .62; border-style: dashed; }

.weeknav { display: flex; gap: 6px; margin-left: auto; }
.weeknav .chip { justify-content: center; min-width: 44px; }
#wk-label { min-width: 150px; font-variant-numeric: tabular-nums; }
#wk-label[disabled] { cursor: default; }

/* ── week grid ───────────────────────────────────────────────────────────── */
.week {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: 42px auto 1fr;
  /* parchment like the rest of the chrome; today's column is one step deeper */
  background: var(--card-warm);
  --card-2: var(--parch);
  border: 1px solid var(--wood-ink);
  border-radius: 0;
  overflow: hidden;
  /* the same wooden ring as the map, lighter: it sits outside the grid */
  box-shadow: 0 0 0 3px var(--wood), 0 0 0 4px var(--wood-ink);
}
.wk-head { display: grid; grid-template-columns: repeat(7, 1fr); }
.wk-dh {
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.wk-dh-name {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.wk-dh-num {
  font-size: 17px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wk-allday-gutter {
  font-family: var(--mono); font-size: 12px; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 5px 0 2px; text-align: right;
}
.wk-allday {
  display: grid; grid-template-columns: repeat(7, 1fr);
  min-height: 34px;
  padding: 5px 0;
}
.wk-ad-cell {
  padding: 0 4px; display: flex; flex-direction: column; gap: 3px; justify-content: center;
}
.adband {
  font-size: 12.5px;
  color: var(--card); background: var(--ink-2); padding: 3px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-gutter { position: relative; }
.hourlab {
  position: absolute; right: 7px; transform: translateY(-50%);
}
.hourlab.is-first { transform: translateY(1px); }
.hourlab.is-last  { transform: translateY(-100%); }
.hourlab {
  font-family: var(--mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.wk-body { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); min-height: 0; }
.daycol {
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule-2) 0 1px,
    transparent 1px calc(100% / 14)
  );
}
.daycol.is-today { background-color: var(--card-2); }
.daycol.is-weekend { background-color: color-mix(in srgb, var(--card-2) 55%, transparent); }

.evt {
  position: absolute; z-index: 1;
  padding: 3px 6px 2px 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--acc) 16%, var(--card));
  color: var(--ink);
  min-height: 18px;
}
.evt-t {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--acc); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.evt-s {
  font-size: 12.5px;
  line-height: 1.18; overflow: hidden; text-overflow: ellipsis;
}
.evt-l {
  font-family: var(--body); font-size: 12px; color: var(--ink-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.evt.is-short { display: flex; align-items: baseline; gap: 6px; padding-top: 1px; padding-bottom: 0; }
.evt.is-short .evt-t, .evt.is-short .evt-s { line-height: 13px; }
.evt.is-short .evt-t { flex: none; }
.evt.is-short .evt-s { font-size: 12.5px; white-space: nowrap; min-width: 0; }
.evt-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a label is whole or absent: compact drops the time row, bare drops the text */
.evt.is-compact { padding-top: 1px; padding-bottom: 0; }
.evt.is-compact .evt-t, .evt.is-compact .evt-l { display: none; }
.evt.is-compact .evt-s { white-space: nowrap; font-size: 12px; line-height: 13px; }
.evt.is-bare .evt-s, .evt.is-bare .evt-t, .evt.is-bare .evt-l { display: none; }
.evt.is-bare { padding: 0; }
.evt.is-bare::after {
  content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px;
  margin-top: -2px; background: var(--acc, var(--ink-3));
}
/* someone is busy: neutral hatching, no person's colour, not an event */
.evt.is-busy {
  --acc: var(--ink-3);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ink-3) 16%, var(--card)) 0 5px,
    color-mix(in srgb, var(--ink-3) 7%, var(--card)) 5px 10px);
}
.evt.is-busy .evt-s { color: var(--ink-3); }
.adband.is-busy {
  --acc: var(--ink-3);
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ink-3) 24%, var(--card)) 0 5px,
    color-mix(in srgb, var(--ink-3) 12%, var(--card)) 5px 10px);
  color: var(--ink-2);
}
/* night: person-coloured all-day bars sit back instead of glowing */
:root[data-mode="night"] .adband:not(.is-busy) {
  background: color-mix(in srgb, var(--acc) 38%, var(--card));
  color: var(--ink);
}
.free-eve.is-part { background: color-mix(in srgb, var(--ink-3) 8%, transparent); border-top-style: dotted; border-bottom-style: dotted; border-color: var(--ink-3); }
.evt-both {
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--card); background: var(--acc-shared); padding: 1px 4px; margin-left: 5px;
}

.nowline { position: absolute; left: 0; right: 0; height: 0; z-index: 4; pointer-events: none; }
.nowline::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px;
}
.nowline::after {
  content: ""; position: absolute; left: -4px; top: -4px;
  width: 8px; height: 8px;
}

.chip[disabled] { opacity: .5; cursor: default; }
.wk-note {
  flex: none; font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-note[hidden] { display: none; }
/* the note belongs to the filter row above it; the grid's 4px wooden ring sits
   outside its box, so it takes that much margin to keep the gaps even */
#panel-week .wk-note { margin-top: -6px; padding-left: 2px; }
#panel-week .week { margin: 4px 4px 0; }
.free-eve {
  position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--acc-shared, var(--ink-3)) 14%, transparent);
}
.lane-empty {
  position: absolute; top: 16%; left: 20%; right: 20%; z-index: 3;
  padding: 14px 12px;
  text-align: center;
}
.lane-empty h4 {
  margin: 0 0 6px; font-size: 15px; font-weight: 600;
}
.lane-empty p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }

/* ── week: the same carpentry as the tabs and signs ──────────────────────────
   Stepped (not rounded) corners, wood-ink outlines, display type for titles,
   square markers. Everything here is paint only; layout is above. */
.week {
  --notch: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px,
    100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
}
.wk-head, .wk-corner, .wk-allday, .wk-allday-gutter { background: var(--parch-2); }
.wk-head, .wk-corner { border-bottom: 2px solid var(--wood-ink); }
.wk-allday, .wk-allday-gutter { border-bottom: 2px solid var(--wood-lo); }
.wk-corner, .wk-allday-gutter, .wk-gutter { border-right: 2px solid var(--wood-lo); }
.wk-dh { border-left: 1px solid var(--wood-lo); }
.wk-dh:first-child { border-left: none; }
.wk-dh-name { color: var(--wood-lo); }
.wk-dh-num { font-family: var(--display); }
.wk-dh.is-today { background: var(--parch-hi); }
.wk-dh.is-today .wk-dh-name { color: var(--ink); }
.wk-dh.is-today .wk-dh-num {
  background: var(--tab-on); color: var(--tab-on-ink);
  border-radius: 0; padding: 1px 8px; clip-path: var(--notch);
}
.wk-ad-cell { border-left: 1px solid var(--wood-lo); }
.wk-ad-cell:first-child { border-left: none; }
.daycol { border-left: 1px solid var(--wood-lo); }
.daycol:first-child { border-left: none; }
.hourlab { color: var(--wood-lo); }

.evt, .adband {
  border-radius: 0; clip-path: var(--notch);
  border: 1px solid var(--wood-lo); border-left: 4px solid var(--acc);
}
.adband { border-color: var(--wood-ink); border-left: 4px solid var(--acc); }
.adband.is-mid, .adband.is-start, .adband.is-end, .adband.is-start.is-end { border-radius: 0; }
.evt-s, .adband { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
.evt.is-busy, .adband.is-busy { border-color: var(--wood-lo); border-left: 4px solid var(--ink-3); }
.evt.is-busy .evt-s { font-family: var(--body); font-weight: 600; }
.evt-both { border-radius: 0; font-family: var(--mono); }

.nowline::before { height: 2px; background: var(--alarm); opacity: 1; }
.nowline::after { border-radius: 0; background: var(--alarm); border: 1px solid var(--wood-ink); }
.free-eve { border-top: 2px dashed var(--acc-shared); border-bottom: 2px dashed var(--acc-shared); }

.lane-empty {
  border: 2px dashed var(--wood-lo); border-radius: 0; background: var(--parch-hi);
}
.lane-empty h4 { font-family: var(--display); }

/* ── reminder alarm ──────────────────────────────────────────────────────────
   Display only, and deliberately static. It sits above the header and takes
   its height out of #main, so no panel has to know it exists. */
#alarm {
  /* a one-line chip in the header's date stack, in the place line's slot
     (same box), so it covers nothing and nothing moves */
  height: 16px; margin-top: 3px; padding: 0 7px; max-width: 230px;
  display: flex; align-items: center;
  background: var(--alarm); color: var(--alarm-ink);
  border: 1px solid var(--wood-ink);
  white-space: nowrap; position: relative;
}
#alarm:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.alarm-tip {
  display: none; position: absolute; left: 0; top: 20px; z-index: 60;
  width: 270px; white-space: normal; padding: 8px 10px;
  font-size: 13px; font-weight: 500; line-height: 1.35;
  background: var(--parch-hi); color: var(--ink);
  border: 1px solid var(--wood-ink); box-shadow: 0 2px 0 0 var(--wood-ink);
}
#alarm:hover .alarm-tip, #alarm:focus .alarm-tip { display: block; }
#alarm[hidden] { display: none; }
#alarm:not([hidden]) + .place { display: none; }
#alarm.is-lease { background: var(--warn); color: var(--warn-ink); }
/* demo or stale data is a note, not an alarm: its own pair, >= 4.5:1 both modes */
#alarm.is-data { background: var(--note); color: var(--note-ink); }
.alarm-head {
  font-size: 12px; font-weight: 700;
  line-height: 15px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis;
}

/* ── meals ───────────────────────────────────────────────────────────────── */
.mealsrow { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
.mealdays {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); min-width: 0;
}
/* day cards and the ideas backlog share a lighter cut of the .pcard frame:
   wood ring, shade line, and an outline with no corner pixels */
.mcard, .backlog {
  background: var(--card-warm);
  border: 1px solid var(--wood-ink);
  border-radius: 0;
  box-shadow:
    inset 0 2px 0 0 var(--wood-hi),
    inset 0 0 0 3px var(--wood),
    inset 0 0 0 4px var(--wood-lo),
    0 -2px 0 0 var(--wood-ink), 0 2px 0 0 var(--wood-ink),
    -2px 0 0 0 var(--wood-ink), 2px 0 0 0 var(--wood-ink),
    var(--shadow);
}
.mcard {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}
/* today: the dark-wood header strip runs edge to edge inside the ring */
.mcard.is-today .mcard-day {
  margin: -12px -11px 0; padding: 9px 11px;
  background: var(--tab-on); border-bottom: 2px solid var(--wood-ink);
}
.mcard.is-today .mcard-dow { color: var(--tab-on-ink); font-size: 12px; }
.mcard.is-today .mcard-num { color: var(--tab-on-ink); font-size: 18px; }
.mcard.is-today { background: var(--parch-hi); }
.mcard.is-empty { background: color-mix(in srgb, var(--card-warm) 55%, transparent); }
.mcard.is-today.is-empty { background: var(--parch-hi); }
.mcard-day {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule-2);
}
.mcard-dow {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.mcard-num {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.mcard-meal {
  font-family: var(--display); font-weight: 600; letter-spacing: -.015em; text-wrap: balance;
  overflow-wrap: break-word;
}
.cook {
  display: flex; align-items: center; gap: 8px;
  min-height: 30px;                 /* holds its line even with no cook, so
                                       every meal name starts at the same y */
}
.cook-blank { min-height: 30px; }
.av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--acc); color: var(--card);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 13px; font-weight: 700;
}
.cook-name {
  font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--acc);
}
.cook-lab {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.recipe {
  margin-top: auto;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  border-top: 1px dashed var(--rule); padding-top: 7px;
}

.backlog {
  flex: none;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
}
.backlog h3 {
  margin: 0; font-family: var(--display); font-size: 17px; font-weight: 600;
  display: flex; align-items: baseline; gap: 7px;
}
.backlog h3 span {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3);
}
#backloglist { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.bitem {
  padding: 9px 10px; display: flex; flex-direction: column;
}
.bitem-name {
  font-family: var(--display); font-weight: 600; line-height: 1.22;
}

/* ── prototype controls (outside the board) ──────────────────────────────── */
#protobtn[hidden] { display: none; }
#protobtn {
  /* a small tab on the very top edge, above every control on the board */
  position: fixed; right: 16px; top: 0; z-index: 50;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--card);
  border: none; border-radius: 0 0 8px 8px; padding: 3px 10px; cursor: pointer; opacity: .85;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.6);
}
#proto {
  position: fixed; right: 16px; top: 26px; z-index: 50;
  width: 306px; max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 14px 15px 16px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 12px;
}
#proto[hidden] { display: none; }
.proto-head { display: flex; align-items: center; justify-content: space-between; }
.proto-head strong { font-family: var(--display); font-size: 15px; }
#protoclose {
  background: transparent; border: none; color: var(--ink-3);
  font-size: 14px; cursor: pointer; padding: 2px 4px;
}
.proto-note { margin: -6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.proto-row { display: flex; flex-direction: column; gap: 6px; }
.proto-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.proto-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.proto-btns button, .proto-move button {
  font-family: var(--body); font-size: 12px; font-weight: 500;
  background: var(--card-2); color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 7px;
  padding: 6px 10px; cursor: pointer;
}
.proto-btns button.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--card);
}
.proto-move { display: flex; flex-direction: column; gap: 9px; }
.pmrow { display: flex; flex-direction: column; gap: 5px; }
.pmrow .proto-label { color: var(--acc); }
.pmrow .btns { display: flex; flex-wrap: wrap; gap: 5px; }
.pmrow button.is-on { border-color: var(--acc); color: var(--acc); background: var(--card); }

/* ── map scenery ─────────────────────────────────────────────────────────── */
.pixart rect, .landmark rect { shape-rendering: crispEdges; }

/* turbine rotor: four pre-drawn frames, shown one at a time */
.sc-rotor-f { opacity: 0; animation: rotframe 2.4s steps(1, end) infinite; }
@keyframes rotframe { 0% { opacity: 1; } 25% { opacity: 0; } }

/* keyframes are generated in scenery.js from the rail itself */
.sc-train   { animation: sc-train-x 96s linear infinite; }
.sc-train-y { animation: sc-train-y 96s steps(1, end) infinite; }
.sc-train-shadow { fill: var(--ink); opacity: .22; }

/* ── ambient motion ──────────────────────────────────────────────────────
   None of this carries information. It exists so a board that is always on
   never looks like a screenshot. All of it stops for reduced motion. */

.sc-wave {
  fill: #a6cdda;
  opacity: 0;
  /* drift in whole-pixel steps; fade in and out on its own stepped beat */
  animation-name: wavedrift, wavefade;
  animation-timing-function: steps(9, end), steps(1, end);
  animation-iteration-count: infinite;
}
@keyframes wavedrift {
  from { transform: translateX(-7.5px); }
  to   { transform: translateX(15px); }
}
@keyframes wavefade {
  0%  { opacity: 0; }
  20% { opacity: .85; }
  80% { opacity: 0; }
}

.sc-surf {
  fill: #d2e7ec;
  animation: surf 3.6s steps(1, end) infinite;
}
@keyframes surf { 0%, 55% { opacity: .85; } 55.01%, 100% { opacity: .2; } }

.sc-ferry {
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: sail 170s linear infinite;
}
@keyframes sail { to { offset-distance: 100%; } }
.sc-ferry-bob { animation: ferrybob 4.5s steps(1, end) infinite; }
@keyframes ferrybob { 0%, 50% { transform: translateY(0); } 50.01%, 100% { transform: translateY(-2.5px); } }

.sc-fall {
  fill: #cfe7ee;
  animation: fallwater 1.3s steps(6, end) infinite;
}
@keyframes fallwater {
  0%   { transform: translateY(0);    opacity: .9; }
  100% { transform: translateY(15px); opacity: 0; }
}

.sc-birds {
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: fly 84s linear infinite;
}
@keyframes fly { to { offset-distance: 100%; } }
/* two wing frames, swapped like a sprite sheet */
.sc-bird { opacity: .6; }
.sc-bird-up   { animation: flapup   .9s steps(1, end) infinite; }
.sc-bird-down { animation: flapdown .9s steps(1, end) infinite; }
@keyframes flapup   { 0%, 50% { opacity: .6; } 50.01%, 100% { opacity: 0; } }
@keyframes flapdown { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: .6; } }

.smoke-puff {
  fill: #cdcfc0;
  opacity: 0;
  animation: puff 5.6s steps(5, end) infinite;
}
@keyframes puff {
  0%   { transform: translate(0, 0);          opacity: 0; }
  18%  { opacity: .7; }
  100% { transform: translate(-12.5px, -50px); opacity: 0; }
}

/* ── sprites ─────────────────────────────────────────────────────────────── */
.sprite-shadow { fill: var(--ink); opacity: .17; }
.sprite-shadow rect { shape-rendering: crispEdges; }
.sprite rect { shape-rendering: crispEdges; }

/* ── dragging meals ──────────────────────────────────────────────────────── */
.draggable { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
body.is-dragging { cursor: grabbing; }
body.is-dragging .draggable { cursor: grabbing; }
.is-lifted { opacity: .35; }

.drag-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform-origin: center center;
  translate: -50% -50%;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: 9px;
  padding: 9px 10px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  font-family: var(--display); font-size: 14px; font-weight: 600;
  line-height: 1.22; color: var(--ink);
}

.mcard[data-drop].is-drop {
  border-color: var(--acc-shared);
  border-style: solid;
  box-shadow: 0 0 0 2px var(--acc-shared);
  background: color-mix(in srgb, var(--acc-shared) 10%, var(--card));
}
#backloglist.is-drop {
  outline: 2px dashed var(--acc-shared);
  outline-offset: 4px;
  border-radius: 8px;
}

/* a day that has already happened */
.mcard.is-past .cook-name { color: var(--ink-2); }
.mcard.is-past .av { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
  .ch-bob, .sc-rotor-f, .sc-train, .sc-train-y,
  .sc-wave, .sc-surf, .sc-ferry, .sc-ferry-bob,
  .sc-fall, .sc-birds, .sc-bird, .smoke-puff { animation: none; }
  .sc-rotor-f:first-child { opacity: 1; }          /* one still frame of the rotor */
  .sc-bird-down { opacity: 0; }
  .sc-wave, .smoke-puff, .sc-surf { opacity: .5; }
  .sc-birds { display: none; }
  .ch, .tab, .chip { transition: none; }
}

/* quick-assign cook picker */
button.cook { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.cook.is-tappable { cursor: pointer; }
.cook.is-call {
  min-height: 44px; padding: 0 10px; width: 100%;
  background: var(--ink); border: 2px solid var(--ink);
}
.cook.is-call .cook-lab { font-size: 12px; font-weight: 700; color: var(--card); letter-spacing: .1em; }
.cook-wrap { display: flex; flex-direction: column; gap: 2px; }
.cook-status { font-family: var(--mono); font-weight: 600; color: var(--ink-2); }
.cook-status.is-error { color: #a4301f; }
.cook-pick { display: flex; flex-direction: column; gap: 4px; }
.cook-opt {
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  border: 2px solid var(--rule); background: var(--card); cursor: pointer;
  font: inherit; color: var(--ink); text-align: left;
}
.cook-opt:disabled { cursor: default; background: var(--card-2); border-style: dashed; }
.cook-opt:disabled .cook-opt-name { color: var(--ink-2); }
.cook-opt.is-on { border-color: var(--acc); }
.cook-opt-lab { display: flex; flex-direction: column; font-weight: 700; line-height: 1.15; }
.cook-opt-why { font-family: var(--mono); font-weight: 500; color: var(--ink-2); }
.cook-opt-none, .cook-opt-cancel { border-style: dashed; }

/* drag affordance and Ideas list: only the handle captures touch */
.bitem .draggable { touch-action: none; }
.mcard-meal.draggable { border-bottom: 2px dotted var(--rule); }
#backloglist { touch-action: pan-y; -webkit-overflow-scrolling: touch; }

/* compact past days */
.recipe-link { min-height: 24px; }

/* toast with undo */
.mealmain { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.mealmain .mealdays { min-height: 0; }
.meal-toasts { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.meal-toasts:empty { display: none; }
.meal-toast {
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--card); padding: 4px 4px 4px 16px;
  font-size: 13px; font-weight: 600; max-width: 100%;
}
.mt-undo {
  min-height: 44px; padding: 0 16px; font: inherit; font-weight: 700;
  background: var(--card); color: var(--ink); border: 0; cursor: pointer;
}

/* freshness mark under the place line: fixed height, never shifts the header */
.fresh {
  height: 16px; margin-top: 1px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .02em; color: var(--ink-3); white-space: nowrap;
}
.fresh.is-stale { opacity: 1; color: var(--ink); font-weight: 600; }

/* manual presence nobody has touched for half a day: visibly not current */
.pcard.is-stale .pslot { opacity: .5; }          /* the picture fades; words keep full contrast */
.pcard.is-stale .pcard-place, .pcard.is-stale .pcard-meta > span:first-child { font-style: italic; }
.ch.is-unsure .ch-name { font-style: italic; }
/* no good board for a while: names stay, but muted and not stated as fact */
[data-old] .ch-name, [data-old] .pcard-place { opacity: .6; font-style: italic; }
.pcard-meta > span:first-child { white-space: normal; min-width: 0; flex: 1 1 auto; }

/* signed-in marker (only rendered when /api/session reports a user): a small
   square sign closing the tab row, cut from the same wood as the tabs, with a
   parchment note that drops below it */
.whoami { position: relative; flex: none; margin-left: 16px; }
.whoami-btn {
  width: 47px; height: 47px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pixel); font-size: 20px; font-weight: 600; line-height: 1;
  color: var(--tab-on-ink);
  background: var(--acc, var(--acc-shared));
  border: 0; border-radius: 0; cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--wood-ink), 0 3px 0 0 var(--wood-ink),
    -3px 0 0 0 var(--wood-ink), 3px 0 0 0 var(--wood-ink),
    inset 0 2px 0 0 rgba(255, 244, 220, .28), inset 0 -3px 0 0 rgba(20, 12, 6, .3),
    0 6px 0 0 var(--wood-lo);
  transition: transform .12s ease;
}
.whoami-btn.is-on {
  transform: translateY(3px);
  box-shadow:
    0 -3px 0 0 var(--wood-ink), 0 3px 0 0 var(--wood-ink),
    -3px 0 0 0 var(--wood-ink), 3px 0 0 0 var(--wood-ink),
    inset 0 4px 0 0 rgba(20, 12, 6, .45);
}
.whoami-pop {
  position: absolute; right: -3px; top: calc(100% + 16px); z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 14px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2);
  background: var(--parch-hi);
  border: 3px solid var(--wood-ink);
  box-shadow: 0 4px 0 0 var(--wood-lo);
}
.whoami-pop[hidden] { display: none; }
.whoami-out {
  font: 600 13px/1 var(--body); color: var(--tab-on-ink); background: var(--tab-on);
  border: 1px solid var(--wood-ink); border-radius: 0; padding: 0 12px; min-height: 32px; cursor: pointer;
}
.whoami-out:focus-visible, .whoami-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ── phone view (< 700px) ────────────────────────────────────────────────────
   phone.js fills #phone. The 1280x800 board is not scaled at all here (fit()
   is skipped), it is simply not shown. Read-only, single column, 14px+ text.
   Colours are the same day/night tokens, so data-mode applies as usual. */
#phone { display: none; }
html.is-phone, html.is-phone body { background: var(--paper); }
html.is-phone #stage, html.is-phone #protobtn, html.is-phone #proto { display: none; }
html.is-phone #phone {
  display: block; min-height: 100dvh; padding: 16px 16px 28px;
  background: var(--paper); color: var(--ink);
  font-family: var(--body); max-width: 560px; margin: 0 auto;
}
#phone[hidden] { display: none !important; }
.ph-head { padding: 4px 0 16px; }
.ph-clock { font-family: var(--display); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ph-ampm { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
.ph-date { font-family: var(--display); font-size: 22px; font-weight: 600; margin-top: 6px; }
.ph-fresh { font-family: var(--mono); font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.ph-fresh.is-stale { color: var(--ink); font-weight: 600; }
.ph-alarm {
  margin-top: 8px; padding: 6px 10px; font-size: 15px; font-weight: 700;
  background: var(--warn); color: var(--warn-ink); border: 1px solid var(--wood-ink);
}
.ph-alarm.is-tripped { background: var(--alarm); color: var(--alarm-ink); }
.ph-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.ph-h {
  margin: 0 0 10px; font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.ph-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ph-person { border-left: 6px solid var(--acc); padding: 2px 0 2px 12px; }
.ph-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.ph-place { font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 1.15; margin-top: 2px; }
.ph-place.is-unknown { color: var(--ink-2); }
.ph-sub { font-size: 16px; color: var(--ink-2); margin-top: 2px; }
.ph-person.is-stale .ph-place { font-style: italic; color: var(--ink-2); }
.ph-person.is-stale .ph-sub { color: var(--ink); font-weight: 600; }
.ph-meal { font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.2; }
.ph-cook { font-weight: 700; color: var(--ink); }
.ph-foot { font-size: 14px; color: var(--ink-2); text-align: center; margin: 18px 0 0; }

/* meals round 2: floating pickers, earlier-this-week strip, hero today */
.pop-anchor { position: relative; }
.pop-anchor > .pop {
  position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 20;
  min-width: 170px; width: max-content; max-width: 220px;
  padding: 6px; background: var(--card); border: 2px solid var(--ink);
  box-shadow: var(--shadow);
}
.mcard.has-pop { overflow: visible; position: relative; z-index: 10; }
.bitem:has(.pop) { position: relative; z-index: 10; }
#backloglist:has(.pop) { overflow: visible; }
.cook-opt { min-height: 48px; }
.cook-opt-lab { font-size: 15px; }
.cook-opt-why { font-size: 12px; }
.cook-status { font-size: 12px; }

/* week: air under the last hour so its label and the closing rule are not on the frame edge */
.wk-gutter, .wk-body { margin-bottom: 8px; }
#main:focus { outline: none; }

.cook-opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.ph-group { font-family: var(--mono); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 14px 0 8px; }
.ph-group:first-of-type { margin-top: 4px; }
.ph-asof { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 12px; padding: 8px 12px; border-left: 6px solid var(--ink-2); }
#phone.is-muted .ph-place, #phone.is-muted .ph-name, #phone.is-muted .ph-meal, #phone.is-muted .ph-cook { color: var(--ink-2); font-weight: 500; }
#phone.is-muted .ph-person { opacity: .8; }
.ph-wk { padding: 8px 0; border-top: 1px solid var(--line, rgba(128,128,128,.3)); }
.ph-wk:first-of-type { border-top: 0; }
.ph-wk-day { font-size: 16px; font-weight: 700; }
.ph-wk-line { font-size: 16px; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }

/* Work: a slot like every other - same card, outline, time row and title -
   in its owner's colour, set apart only by light hatching (it is free/busy,
   so the title is always just "Work"). Anything else untitled is a flat "Busy". */
.evt.is-busy:not(.is-work) {
  background: color-mix(in srgb, var(--ink-3) 12%, var(--card));
}
.evt.is-work {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--acc) 15%, var(--card)) 0 4px,
    color-mix(in srgb, var(--acc) 7%, var(--card)) 4px 8px);
  border-left-color: var(--acc);
}
.evt.is-work .evt-s { font-family: var(--display); font-weight: 600; color: var(--ink-2); }

/* meals: one card shape for the whole week - day, cook, dish, footer - so every
   row lines up across the seven columns and the Ideas rail uses the same rows */
.mealdays { gap: 10px; align-items: stretch; }
.mcard { padding: 12px 11px 10px; gap: 8px; }
.mcard.is-today { border-width: 1px; }
.mcard.is-today .mcard-meal { font-size: 18px; }
.mcard-meal { flex: 1; font-size: 16px; line-height: 1.22; min-height: 0; border: 0; padding: 0; }
.mcard-meal.draggable { border: 0; padding: 0; }
.mcard-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.recipe-link { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mcard.is-past { opacity: .55; }
.mcard.is-past .mcard-meal { font-size: 14px; font-weight: 500; }
.backlog { width: 200px; }
.bitem { border-radius: 0; border: 1px solid var(--wood-lo); background: var(--parch-hi); gap: 8px; }
.bitem-name { font-size: 15px; }
.bitem .move-btn { align-self: flex-start; }

.recipe-link { text-decoration: none; border-bottom: 1px solid currentColor; }

/* meals: shorter day cards, a pixel pantry shelf under them */
.mealmain .mealdays { flex: 0 0 auto; height: 232px; grid-template-rows: minmax(0, 1fr); }
.mcard-foot { min-height: 28px; }
.mcard[data-drop], .bitem { cursor: grab; touch-action: none; }
.bitem .cook, .mcard .cook { cursor: pointer; }
.pantry { flex: 1 1 0; min-height: 0; display: flex; align-items: flex-end; }
.pantry svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
:root[data-mode="night"] .pantry { filter: brightness(.86); }