/* Work Calendar, v26. One accent, one hairline, one type scale.
   The month is the product: every other surface steps back so the dates and the names read first.
   Glass is a highlight and a lift on a solid surface. It never fades the fill.
   Screen rules come first. The print block at the end is carried over unchanged from v25. */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: local('Inter'), local('Inter Variable');
}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #05060a;
  --surface: #0e1014;
  --surface-2: #15171c;
  --surface-3: #1d2027;
  --canvas-ground: #080b11;
  --border: #23262d;
  --border-hi: #353943;
  --grid-line: #2a2e36;
  --edge: #f0f0f0;
  --text: #f0f0f0;
  --text-2: #a8a8b2;
  --text-3: #8b8b95;
  --accent: #14b8a6;
  --accent-ink: #04120f;
  --danger: #ff6961;
  --warn: #ff9f0a;
  --radius: 14px;
  --radius-sm: 10px;
  --si-t: env(safe-area-inset-top, 0px);
  --si-b: env(safe-area-inset-bottom, 0px);
  --si-l: env(safe-area-inset-left, 0px);
  --si-r: env(safe-area-inset-right, 0px);
  --pad: 12px;
  --glass: 1;
  --lg-x: 0.5;
  --lg-y: -0.14;
  --lg-tint: rgba(255, 255, 255, .9);
  --lg-intensity: .42;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 110ms;
  --dur-med: 230ms;
  --dur-slow: 360ms;
  --dur-exit: 220ms;
  --font: -apple-system, BlinkMacSystemFont, 'Inter Variable', system-ui, 'Segoe UI', Roboto, sans-serif;
  --tap: 44px;
  --head: 56px;
  --paper-w: 8.5in;
  --paper-h: 11in;
  --paper-inner-w: 7.6in;
  --paper-inner-h: 10.1in;
  --paper-margin: .45in;
}
html.light {
  color-scheme: light;
  --bg: #eef0f4;
  --surface: #fff;
  --surface-2: #f5f6f8;
  --surface-3: #e9ebf0;
  --canvas-ground: #eef0f4;
  --border: #e1e4ea;
  --border-hi: #c9ced7;
  --grid-line: #dadee5;
  --edge: #0f1419;
  --text: #0f1419;
  --text-2: #565b64;
  --text-3: #686d76;
  --accent-ink: #fff;
  --danger: #c81e1e;
  --warn: #b45309;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, [role="button"] { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; }
button:disabled { cursor: default; opacity: .38; }
input, select, textarea { font: inherit; color: inherit; }
html, body {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sr-only, #status-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Ground and weather ─────────────────────────────────────────────── */
.ground, .ground-scrim { position: fixed; inset: 0; z-index: -3; pointer-events: none; }
@supports (height: 100lvh) { .ground, .ground-scrim { height: 100lvh; } }
.ground {
  background:
    radial-gradient(46% 34% at 12% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    var(--canvas-ground);
}
html.light .ground {
  background:
    radial-gradient(46% 34% at 12% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    var(--canvas-ground);
}
.ground-scrim { z-index: -2; background: radial-gradient(120% 90% at 50% 0%, transparent 0%, rgba(0, 0, 0, .28) 100%); }
html.light .ground-scrim { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .2) 0%, rgba(238, 240, 244, .72) 100%); }
html.wx-on .ground-scrim { opacity: .35; }
#weather-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
#weather-glass { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }

/* ── Header ─────────────────────────────────────────────────────────── */
.top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: calc(var(--head) + var(--si-t));
  padding: var(--si-t) calc(var(--pad) - 4px + var(--si-r)) 0 calc(var(--pad) + 4px + var(--si-l));
  position: relative;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  line-height: 1.2;
}
.eyebrow:hover { color: var(--accent); }
.word { font-size: 17px; font-weight: 720; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 0; flex: none; }
.icon-btn, .text-btn {
  min-width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--text-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.icon-btn svg { width: 20px; height: 20px; display: block; }
.icon-btn:active, .text-btn:active { transform: scale(.96); }
#btn-print {
  display: inline-flex;
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  align-items: center;
  gap: 6px;
  height: 34px;
  margin: 5px 2px 5px 0;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#btn-print::after { content: ''; position: absolute; inset: -4px 0; }
#btn-print svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
#btn-print:active { transform: scale(.96); }
#btn-settings { display: none; }
/* Header buttons, glyphs and morphs are Text Share's (share/index.html .wx-btn, .theme-btn,
   .nav-toggle, .icon-dot), unchanged except for a 44px hit area around the 34px circle. */
.top-actions { gap: 7px; }
.hdr-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1.5px solid var(--border-hi);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  touch-action: manipulation;
  transition: border-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.hdr-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 999px; }
.hdr-btn:active { transform: scale(.88); }
.wx-btn[aria-expanded="true"] { color: var(--text); }
html.wx-on .wx-btn { color: var(--accent); border-color: var(--accent); }
/* Both glyphs are always in the DOM and cross-fade past each other on an arc, so the switch
   reads as one object turning rather than two icons swapping. */
.theme-btn { overflow: hidden; }
.theme-btn svg { position: absolute; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring); }
.theme-btn .ic-sun { opacity: 0; transform: rotate(-70deg) scale(.5); }
.theme-btn .ic-moon { opacity: 1; transform: rotate(0) scale(1); }
html.light .theme-btn .ic-sun { opacity: 1; transform: rotate(0) scale(1); }
html.light .theme-btn .ic-moon { opacity: 0; transform: rotate(70deg) scale(.5); }
/* A hamburger that becomes an X on the same three elements. */
.nav-toggle { color: var(--text); z-index: 52; will-change: transform; }
.nav-toggle[aria-expanded="true"] { color: var(--text-2); }
.icon-dot {
  position: absolute;
  width: 15px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) var(--ease-out), width var(--dur-med) var(--ease-spring);
  will-change: transform, width;
}
.dot-1 { transform: translateY(-5px); }
.dot-2 { transform: translateY(0); }
.dot-3 { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] .icon-dot { width: 15px; }
.nav-toggle[aria-expanded="true"] .dot-1 { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .dot-2 { transform: scaleX(0); opacity: 0; }
.nav-toggle[aria-expanded="true"] .dot-3 { transform: translateY(0) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .icon-dot { transition: opacity var(--dur-fast) linear; } }

/* ── Menus: Text Share's nav menu and weather dropdown ─────────────── */
.month-pop {
  background-color: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
}
html.light .month-pop { box-shadow: 0 14px 44px rgba(16, 20, 30, .2), 0 3px 10px rgba(16, 20, 30, .1); }
.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: calc(var(--pad) - 4px + var(--si-r));
  width: 236px;
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  max-height: calc(100dvh - var(--si-t) - var(--si-b) - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
}
html.light .nav-menu { background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 32px rgba(16, 20, 30, .16), 0 2px 8px rgba(16, 20, 30, .08); }
.nav-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s; }
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: default;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-item:last-child { border-bottom: none; }
/* One uniform reveal delay, never a per-row stagger. */
.nav-menu.open .nav-item { opacity: 1; transform: translateX(0); transition-delay: 40ms; }
.nav-item.clickable, a.nav-item { cursor: pointer; }
.nav-item:active { background: var(--surface-3); }
.nav-item-label { flex: 1; }
.nav-item-ic { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.nav-item-ic svg { width: 18px; height: 18px; display: block; }
.nav-sep-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 11px 16px;
  border: none;
  border-top: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-3);
  text-align: left;
  cursor: pointer;
}
.nav-sep-btn .nav-item-label { flex: 1; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nav-sep-chev { font-size: 15px; line-height: 1; transition: transform var(--dur-fast) var(--ease-out); }
.nav-sep-btn[aria-expanded="true"] .nav-sep-chev { transform: rotate(90deg); }
#nav-tools { display: flex; flex-direction: column; }
#nav-tools .nav-item .nav-item-label { font-weight: 500; color: var(--text-2); }
#nav-tools .nav-item.current .nav-item-label { color: var(--text); }
.nav-home { border-top: 1px solid var(--border); }
.nav-home .nav-item-label { font-weight: 600; letter-spacing: .02em; }
.nav-badge { font-size: 10px; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.badge-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.badge-soon { background: rgba(255, 255, 255, .06); color: var(--text-3); }
html.light .badge-soon { background: rgba(0, 0, 0, .06); }
.nav-item.soon { cursor: not-allowed; }
.nav-item.soon .nav-item-label { color: var(--text-3) !important; }
.nav-item.soon.denied { animation: nav-deny 400ms var(--ease-out); }
.nav-item.soon.denied .nav-badge { background: rgba(255, 69, 58, .18); color: var(--danger); }
@keyframes nav-deny {
  0%, 100% { transform: translateX(0); }
  14% { transform: translateX(-6px); }
  28% { transform: translateX(5px); }
  42% { transform: translateX(-4px); }
  56% { transform: translateX(3px); }
  70% { transform: translateX(-2px); }
  85% { transform: translateX(1px); }
}
.wx-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: calc(var(--pad) + 78px + var(--si-r));
  z-index: 50;
  width: 220px;
  max-height: calc(100dvh - var(--si-t) - var(--si-b) - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-2);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
html.light .wx-menu { background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 32px rgba(16, 20, 30, .16), 0 2px 8px rgba(16, 20, 30, .08); }
.wx-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s; }
.wx-menu-title { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px 4px; }
.wx-menu-sep { height: 1px; background: var(--border); margin: 6px 2px; }
.wx-tod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 2px 2px 4px; }
.wx-qseg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 2px 2px 4px; }
.wx-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.wx-opt:active { background: var(--surface-3); }
.wx-opt-g { font-size: 16px; width: 20px; text-align: center; flex: 0 0 auto; }
.wx-opt[aria-checked="true"] { color: var(--accent); }
.wx-opt[aria-checked="true"]::after { content: '\2713'; margin-left: auto; font-size: 13px; color: var(--accent); }
.chip-btn {
  height: 36px;
  min-width: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.chip-btn:active { transform: scale(.93); }
.chip-btn[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.nav-menu :focus-visible, .wx-menu :focus-visible, .month-pop :focus-visible, .overlay-card :focus-visible { outline-offset: -2px; }
.chip {
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
/* The weather list copied into Settings. visibility inherits, never visible, so it
   disappears with its closed sheet. */
.weather-preferences { position: static; visibility: inherit; opacity: 1; width: 100%; padding: 12px 0 0; background: none; border: 0; box-shadow: none; transform: none; pointer-events: auto; max-height: none; overflow: visible; }
.weather-preferences .wx-menu-title { padding: 8px 0 4px; }

/* LIQUID GLASS (family material, ported from mortgage/share v45). What reads as glass is the
   hairline ring that pools a specular highlight toward the light, never a glow that follows
   the pointer. --lg-x/--lg-y place the highlight, --lg-tint colours it, --lg-intensity sets
   how hot it burns; with no weather or sky they rest at a neutral overhead sheen. The band is
   the padding + mask-exclude ring, so nothing paints over the content. */
.month-pop::after, .overlay-card::after, .grid-scroll::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background:
    radial-gradient(150% 130% at calc(var(--lg-x) * 100%) calc(var(--lg-y) * 100%), var(--lg-tint) 0%, transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 32%);
  opacity: calc(.5 + .5 * var(--lg-intensity));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity var(--dur-med) var(--ease-out);
}
html.light .month-pop::after, html.light .overlay-card::after, html.light .grid-scroll::after {
  background:
    radial-gradient(150% 130% at calc(var(--lg-x) * 100%) calc(var(--lg-y) * 100%), var(--lg-tint) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 24%),
    linear-gradient(0deg, rgba(16, 20, 30, .12), rgba(16, 20, 30, .12));
  opacity: calc(.42 + .42 * var(--lg-intensity));
}
/* The refract half: the sheet and popover edges borrow the displacement filter through
   backdrop-filter, so the background bends as it passes the rim. The centre is untouched. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .overlay-card::before, html:not(.no-motion) .month-pop::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 5px;
    opacity: var(--glass);
    -webkit-backdrop-filter: blur(.5px) url(#lg-refract);
            backdrop-filter: blur(.5px) url(#lg-refract);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
}
.month-pop > *, .overlay-card > * { position: relative; z-index: 1; }

/* ── Workspace ──────────────────────────────────────────────────────── */
.content-area {
  flex: 1;
  min-height: 0;
  overflow: visible;
  contain: layout style;
  display: flex;
  flex-direction: column;
  padding: 0 calc(var(--pad) + var(--si-r)) 0 calc(var(--pad) + var(--si-l));
}
.workspace-bar, .roster-head, #roster-search, #roster-no-match { display: none; }

/* Month bar: the month names itself at the left; Today and the arrows sit together at the right. */
.month-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  position: relative;
}
#month-label {
  order: 0;
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: -6px;
  padding: 0 8px 0 6px;
  border-radius: 10px;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.03em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#month-label::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid var(--text-3);
  border-bottom: 1.6px solid var(--text-3);
  transform: translateY(-2px) rotate(45deg);
}
#btn-today {
  order: 1;
  flex: none;
  height: 34px;
  margin: 6px 4px 6px auto;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background-color: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  position: relative;
}
#btn-today::after { content: ''; position: absolute; inset: -5px 0; }
#btn-today:active { transform: scale(.96); }
#btn-prev { order: 2; margin-left: auto; }
#btn-today:not([hidden]) ~ #btn-prev { margin-left: 0; }
#btn-next { order: 3; margin-right: -8px; }
.month-bar .icon-btn { color: var(--text); }
.month-pop {
  position: absolute;
  top: calc(100% - 2px);
  left: -4px;
  width: min(288px, calc(100vw - 24px));
  padding: 8px;
  z-index: 30;
  overflow: hidden;
}
.month-pop:not(.open) { display: none; }
.year-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#month-pop-year { font-weight: 720; font-variant-numeric: tabular-nums; }
#month-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

.empty-cue {
  flex: none;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-2);
}
.empty-cue strong { color: var(--text); font-weight: 680; }

.board {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
}

/* ── The month ──────────────────────────────────────────────────────── */
.grid-scroll {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--grid-line);
}
.weekdays, .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.weekdays {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--grid-line);
}
.weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 0 7px;
}
.grid {
  flex: 1;
  min-height: 0;
  grid-auto-rows: minmax(0, 1fr);
  background: var(--grid-line);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.day {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 3px 3px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
}
html.is-assigning .day { cursor: copy; }
.day-top { display: flex; align-items: center; gap: 3px; min-width: 0; }
.day .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
}
.day .mon {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 2px;
}
.day.is-lead, .day.is-buffer { background: var(--surface-2); color: var(--text-2); }
.day.is-lead .num, .day.is-buffer .num { color: var(--text-3); font-weight: 560; }
.day.is-lead .mon + .num, .day.is-buffer .mon + .num { padding-left: 2px; }
/* A 320px phone gives each day about 41px: shrink the month tag so "SEP 27" never clips. */
@media (max-width: 359px) {
  .day .mon { font-size: 8px; letter-spacing: 0; margin-left: 1px; }
  .day.is-lead .mon + .num, .day.is-buffer .mon + .num { min-width: 0; padding: 0 1px; }
  .day-top { gap: 2px; }
}

/* Month edges: a 3px bar on the boundary itself, drawn outside the first and last day so it
   never covers a name inside them. It sits over the grid line and the edge of the
   neighbouring other-month day. */
.day.is-month-start { box-shadow: -3px 0 0 var(--edge); z-index: 1; }
.day.is-month-end { box-shadow: 3px 0 0 var(--edge); z-index: 1; }
.day.is-month-start.is-month-end { box-shadow: -3px 0 0 var(--edge), 3px 0 0 var(--edge); }

/* A day with one person wears that person's ink; two or more get stacked labels. */
.day.is-ink, .day.is-lead.is-ink, .day.is-buffer.is-ink { background: var(--ink); color: var(--ink-fg, var(--text)); }
.day.is-lead.is-ink, .day.is-buffer.is-ink { background: color-mix(in srgb, var(--ink) 62%, var(--surface)); }
.day.is-ink .num, .day.is-ink .mon, .day.is-lead.is-ink .num, .day.is-buffer.is-ink .num,
.day.is-lead.is-ink .mon, .day.is-buffer.is-ink .mon { color: inherit; }

.day.is-today .num,
.day.is-today.is-ink .num,
.day.is-today.is-lead.is-ink .num,
.day.is-today.is-buffer.is-ink .num { background: var(--accent); color: var(--accent-ink); }
.day.is-ink.is-today .num { box-shadow: 0 0 0 2px var(--surface); }

/* Selection: a 3px accent frame on every selected day. Empty days also take an accent wash;
   assigned days keep their ink so you can still see who is on them. */
.day.is-selected { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 1; }
.day.is-selected:not(.is-ink) { color: var(--text); background-color: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.day.is-selected.is-ink { box-shadow: inset 0 0 0 5px var(--surface); }
.day.is-selected.is-ink.is-month-start { box-shadow: -3px 0 0 var(--edge), inset 0 0 0 5px var(--surface); }
.day.is-selected.is-ink.is-month-end { box-shadow: 3px 0 0 var(--edge), inset 0 0 0 5px var(--surface); }
.day.is-selected .num { background: var(--accent); color: var(--accent-ink); border-radius: 6px; }
.day:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; z-index: 1; }
.day.is-selected:focus-visible { outline-width: 3px; }

.who {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin-top: 1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.who-row {
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 1px 3px;
  border-radius: 5px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
}
.day.is-ink .who-row { background: transparent; color: inherit; padding: 0 2px; font-size: 14px; }
/* Calendar labels shrink to their available width instead of splitting names. */
.who-row .sn { display: block; overflow: hidden; white-space: nowrap; overflow-wrap: normal; }
.who-more { font-size: 11px; font-weight: 700; color: var(--text-2); text-align: center; }
.day.is-ink .who-more { color: inherit; opacity: .8; }
.dot {
  position: absolute;
  right: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.day.is-flash { animation: none; }
.day:active:not(.is-selected):not(.is-ink) { background: color-mix(in srgb, var(--text) 7%, var(--surface)); }
.day.is-lead:active:not(.is-selected):not(.is-ink), .day.is-buffer:active:not(.is-selected):not(.is-ink) { background: color-mix(in srgb, var(--text) 7%, var(--surface-2)); }
.day.is-ink:active:not(.is-selected) { filter: brightness(.94); }
@media (hover: hover) and (pointer: fine) {
  .hdr-btn:hover { color: var(--text); border-color: var(--border-hi); background: transparent; }
  .day:hover:not(.is-selected):not(.is-ink) { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
  .day.is-lead:hover:not(.is-selected):not(.is-ink), .day.is-buffer:hover:not(.is-selected):not(.is-ink) { background: color-mix(in srgb, var(--text) 4%, var(--surface-2)); }
  .day.is-ink:hover:not(.is-selected) { filter: brightness(1.06); }
  html.is-assigning .day:hover:not(.is-selected) { outline: 2px dashed var(--accent); outline-offset: -3px; }
  .icon-btn:hover, .text-btn:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
  #btn-print:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
  a.nav-item:hover, .nav-item.clickable:hover, .wx-opt:hover { background: var(--surface-3); }
  a.nav-item:hover .nav-item-ic, .nav-item.clickable:hover .nav-item-ic { color: var(--text-2); }
  #nav-tools a.nav-item:hover .nav-item-label { color: var(--text); }
  .nav-sep-btn:hover { color: var(--text-2); }
  .chip-btn:not([aria-checked="true"]):hover { border-color: var(--accent); color: var(--accent); }
  .chip:not([aria-checked="true"]):hover { color: var(--text); background: var(--surface-3); }
  .ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .primary:hover:not(:disabled) { filter: brightness(1.06); }
  #month-label:hover, #btn-today:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
}

.note-pop { position: absolute; z-index: 5; display: flex; }
.note-pop input {
  width: 100%;
  min-height: 36px;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  color: var(--text);
}
.type-pop {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  pointer-events: none;
}
#type-query { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
#type-match { font-size: 14px; font-weight: 700; }


/* ── Mode line: says what the next tap does, then messages, then the save state ── */
.mode-line {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
  padding: 0 2px;
  font-size: 12.5px;
  font-weight: 560;
  line-height: 18px;
  color: var(--text-2);
}
#mode-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#mode-text.is-message { color: var(--text); font-weight: 650; }
.mode-line.is-armed #mode-text { color: var(--text); }
/* Armed: the chip carries the state (ring and check); the line only says what to do. */
#save-status { flex: none; color: var(--text-3); font-weight: 560; }
#save-status.is-private { color: var(--text-2); }
#save-status.is-dirty { color: var(--warn); font-weight: 650; }
#save-status.save-error { color: var(--danger); font-weight: 650; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) {
  #save-status:not(.save-error):not(.is-private) { display: none; }
  #save-status.is-private:not(.is-dirty) { display: none; }
}

/* ── Person rail ────────────────────────────────────────────────────── */
.rail {
  position: relative;
  flex: none;
  display: flex;
  gap: 6px;
  align-items: stretch;
  height: var(--tap);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  touch-action: pan-x;
}
.rail::-webkit-scrollbar { display: none; }
#rail-list { display: flex; flex-direction: row; gap: 6px; min-width: 0; flex: none; }
.person {
  flex: none;
  min-width: 0;
  max-width: 180px;
  height: var(--tap);
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  scroll-snap-align: start;
  touch-action: manipulation;
  transition: box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.person .sn { font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .ct { margin-left: auto; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; color: inherit; opacity: .75; }
.person:active { filter: brightness(.92); }
/* Armed: an inset ring in the pill's own text colour and a check, so the ready person is unmistakable. */
.person.is-armed { outline: 2px solid currentColor; outline-offset: -5px; }
.person.is-armed::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Action bar ─────────────────────────────────────────────────────── */
.status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: calc(56px + var(--si-b));
  padding: 6px calc(var(--pad) + var(--si-r)) calc(6px + var(--si-b)) calc(var(--pad) + var(--si-l));
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.status > button {
  flex: 1 1 0;
  min-width: 0;
  height: var(--tap);
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid var(--border-hi);
  background-color: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.15;
}
@media (min-width: 375px) {
  .status > button { flex: 1 1 auto; padding: 0 6px; white-space: nowrap; }
}
.status > button.icon-only { flex: 0 0 var(--tap); padding: 0; color: var(--text); }
.status > button.icon-only svg { width: 19px; height: 19px; }
#btn-clear-month:active { color: var(--danger); }
html.is-empty #btn-add { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
#btn-add:active, #btn-clear-month:active { filter: brightness(.94); }

/* ── Sheets ─────────────────────────────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 7, 13, .52);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
          backdrop-filter: blur(18px) saturate(1.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.scrim.open { visibility: visible; opacity: 1; transition: opacity var(--dur-med) var(--ease-out), visibility 0s; }
/* Sheets move with element.animate() (app.js enterSheet/exitSheet and the drag controller).
   CSS only says when a sheet exists: open, or still finishing its exit. */
.overlay {
  position: fixed;
  z-index: 70;
  left: 0; right: 0; bottom: 0;
  visibility: hidden;
}
.overlay.open, .overlay.is-closing { visibility: visible; }
.overlay:not(.open) { pointer-events: none; }
.overlay:not(.open):not(.is-closing) { visibility: hidden; }
/* Typing: the card keeps its own height and rides on top of the keyboard. It shrinks only
   when it would not fit above it (max-height set from the visual viewport in app.js). */
.overlay.is-pinned .sheet-body { flex: 1 1 auto; min-height: 0; }
.overlay-card {
  position: relative;
  min-height: 0;
  max-height: min(86dvh, 760px);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--si-b);
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, .5);
  isolation: isolate;
}
html.light .overlay-card { box-shadow: 0 -10px 40px rgba(16, 20, 30, .18); }
.grab {
  width: 36px; height: 4px; border-radius: 4px;
  background: var(--border-hi);
  margin: 8px auto 2px;
  flex: none;
  position: relative;
  touch-action: none;
}
.grab::before { content: ''; position: absolute; left: -48px; right: -48px; top: -14px; bottom: -10px; }
/* Every sheet header is the same three columns: the way out, the title, the commitment. */
.overlay-h {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(0, auto) minmax(72px, 1fr);
  align-items: center;
  gap: 6px;
  padding: 2px 10px 8px;
  flex: none;
  touch-action: none;
  border-bottom: 1px solid transparent;
}
.overlay-h h2 {
  grid-column: 2;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.overlay-h > :first-child { grid-column: 1; justify-self: start; }
.overlay-h > .overlay-end, .overlay-h > :last-child:not(h2) { grid-column: 3; justify-self: end; }
.overlay-start, .overlay-end { display: flex; align-items: center; gap: 6px; }
.overlay-h .ghost { border-color: transparent; color: var(--accent); font-weight: 600; padding: 0 10px; }
html.light .overlay-h .ghost { color: var(--accent); }
.overlay-h .primary { min-height: 36px; padding: 0 16px; border-radius: 999px; position: relative; }
.overlay-h .primary::after { content: ''; position: absolute; inset: -4px 0; }
#set-back[hidden] { display: inline-flex !important; visibility: hidden; }
#set-commit { min-height: 36px; padding: 0 16px; }
.sheet-body {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px 16px 22px;
  min-height: 0;
}
#settings-sheet .sheet-body { min-height: 0; flex: 1 1 auto; touch-action: pan-y; }
html:not(.no-motion) .set-view.is-enter { animation: setIn var(--dur-fast) var(--ease-out); }
@keyframes setIn { from { transform: translateX(10px); } to { transform: none; } }
#set-index { display: none; }
#set-appearance, #set-calendar, #set-print, #set-data, .roster-data {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#set-data { border-bottom: 0; }
.set-view h3, .roster-data h3, .sheet-h {
  margin: 4px 0 10px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.owner-panel h3 { margin-top: 0; }
.sheet-h { margin-top: 14px; }
.sheet-h:first-of-type { margin-top: 2px; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field > span, .row-label { font-size: 13px; font-weight: 620; color: var(--text-2); }
.field input, .field select, .field textarea, #people-search, #day-search, .bulk-entry textarea {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-hi);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus, #people-search:focus, #day-search:focus, .bulk-entry textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}
.field input::placeholder, #people-search::placeholder, #day-search::placeholder, textarea::placeholder { color: var(--text-3); }
#people-search, #day-search { margin-bottom: 8px; }
.help { font-size: 13px; line-height: 1.45; color: var(--text-2); margin-bottom: 8px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-end { justify-content: flex-end; }
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
}
#set-motion, #set-haptics, #set-sub, #set-phones { min-width: 64px; }
.slider { width: 100%; accent-color: var(--accent); height: 44px; }
.slider-ends { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-3); margin-top: -6px; }

/* Buttons */
.primary {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.primary:active { filter: brightness(.92); }
.ghost {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-hi);
  font-weight: 620;
}
.ghost:active { background: color-mix(in srgb, var(--text) 10%, transparent); }
.danger { color: var(--danger); }
.primary.danger { background: var(--danger); color: #fff; }
html:not(.light) .primary.danger { color: #1a0605; }

/* Person form */
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.swatch {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  font-size: 12px;
  font-weight: 650;
}
.swatch[aria-checked="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.swatch.is-used::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}
@media (min-width: 640px) { .swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ink-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-top: 4px; }
#ink-name { font-size: 14px; font-weight: 680; }
.ink-custom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 620; color: var(--text-2); min-height: 44px; }
#f-ink-color { width: 44px; height: 32px; padding: 0; border: none; background: transparent; border-radius: 8px; }
.ink-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
.ink-previews > div { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.ink-previews > div > span:last-child { display: block; padding: 11px 8px; min-height: 44px; overflow-wrap: anywhere; text-align: center; font-size: 15px; font-weight: 700; border-radius: 10px; }
#ink-preview-print { color: #111; }
#f-hotkey-msg, #f-msg { color: var(--warn); min-height: 0; }
#f-msg.is-ok, #people-note.is-ok { color: var(--accent); font-weight: 600; }
.pending { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.pending span { font-weight: 650; min-width: 0; }
.pending .ghost { min-height: 36px; padding: 0 10px; }
#leave-ask, .ask {
  margin: 4px 0 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
}
#leave-ask .help, .ask .help { color: var(--text); font-weight: 600; }
#person-actions { margin-top: 4px; }

/* Roster list */
#people-add { width: 100%; margin: 2px 0 12px; }
.person-edit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 6px;
  text-align: left;
  border-radius: 10px;
  border-bottom: 1px solid var(--border);
}
.person-edit:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ink-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
.person-edit-name { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.person-edit-nick { color: var(--text-3); font-size: 13px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .person-edit:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } }
.bulk-entry { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--border); }
.bulk-entry summary { min-height: 44px; padding-block: 12px; cursor: pointer; font-weight: 620; }
.bulk-entry textarea { min-height: 120px; }
.owner-panel { margin-bottom: 8px; }
#set-print .toggle-row + .help { margin-top: 10px; }
#owner-controls { display: flex; flex-direction: column; gap: 8px; }
#owner-lock-confirm { display: flex; flex-direction: column; gap: 8px; }

/* Settings sections that fold: Appearance is the long one, so it stays one row until opened. */
.set-fold { border-bottom: 0; }
.set-fold > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold-t { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.set-fold-s { margin-left: auto; font-size: 13px; font-weight: 560; color: var(--text-2); }
.set-fold-chev { width: 8px; height: 8px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-med) var(--ease-out); }
.set-fold[open] .set-fold-chev { transform: rotate(225deg) translate(-2px, -2px); }
.set-fold[open] .set-fold-s { opacity: 0; }
.set-fold-body { padding-top: 4px; }
#set-appearance { padding-bottom: 4px; }

/* Grouped actions: each one owns a row, its words beside its button, rules between rows. */
.action-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
  margin: 4px 0 12px;
}
.action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  min-height: 64px;
}
.action-row + .action-row { border-top: 1px solid var(--border); }
.action-text { flex: 1; min-width: 0; }
.action-text strong { display: block; font-size: 14.5px; font-weight: 650; color: var(--text); }
.action-text p { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.action-row > button { flex: none; min-width: 84px; }
.primary.wide, .ghost.wide { width: 100%; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-stack { display: flex; flex-direction: column; gap: 8px; }
.confirm-stack > button { width: 100%; }

/* Login / team calendar */
.owner-panel .lead { font-size: 15px; line-height: 1.5; color: var(--text); margin: 2px 0 14px; }
.owner-panel form { display: flex; flex-direction: column; gap: 4px; }
#owner-save { margin-bottom: 12px; }
/* Nothing to save: a quiet surface, not a faded accent. */
#owner-save:disabled { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); opacity: 1; }
.action-row[hidden] { display: none; }
.owner-message { margin-top: 10px; min-height: 1.4em; }
.owner-message:empty { display: none; }
#owner-controls .help { margin-bottom: 12px; }

/* Add To Home Screen */
.install-lead { font-size: 15px; line-height: 1.5; color: var(--text); margin: 2px 0 6px; }
.install-steps { margin: 14px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.install-steps li { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.install-steps strong { color: var(--text); font-weight: 650; }
.install-share { width: 15px; height: 15px; vertical-align: -3px; color: var(--accent); display: inline-block; }
#btn-install-go { margin-top: 12px; }

/* Edit Day */
.day-names { display: flex; flex-direction: column; margin-bottom: 4px; }
.day-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.day-name-label { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.day-name .ghost { min-height: 36px; padding: 0 12px; color: var(--danger); border-color: transparent; position: relative; }
.day-name .ghost::after { content: ''; position: absolute; inset: -4px 0; }
.day-empty { padding: 6px 0 4px; }
.day-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.day-add-btn { display: inline-flex; align-items: center; gap: 8px; }

/* Clear Month. The destructive button sits on the left, away from where the footer's Clear Month
   was just tapped, so a double tap lands on No, Go Back. */
.clear-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.clear-actions .danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.clear-warning { font-size: 15px; line-height: 1.5; color: var(--text); margin: 4px 0 18px; }

/* Print preview */
#preview-sheet .overlay-card { background: var(--surface-2); height: min(92dvh, 900px); max-height: min(92dvh, 900px); }
.preview-flag { margin: 0 16px 6px; font-size: 13px; color: var(--warn); font-weight: 600; }
.preview-frame {
  overflow: hidden;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px 16px;
}
#print-scale { box-shadow: 0 6px 24px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06); border-radius: 2px; flex: none; }

/* ── Wide screens ───────────────────────────────────────────────────── */
@media (min-width: 900px) {
  :root { --pad: 20px; }
  .board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 8px;
    padding-bottom: 12px;
  }
  html.is-empty .board { grid-template-columns: minmax(0, 1fr); }
  .grid-scroll { grid-column: 1; grid-row: 1; }
  .mode-line { grid-column: 1; grid-row: 2; }
  .rail {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: auto;
    max-height: none;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    padding: 0 2px 0 0;
  }
  #rail-list { flex-direction: column; width: 100%; }
  .person { width: 100%; max-width: none; flex: none; }
  .day { padding: 6px 6px 5px; }
  .day .num { font-size: 15px; }
  .who-row { font-size: 13px; }
  .day.is-ink .who-row { font-size: 16px; }
  .word { font-size: 18px; }
  #month-label { font-size: 24px; }
  .status { justify-content: flex-start; }
  .status > button { flex: 0 0 auto; min-width: 116px; padding: 0 16px; }
  .status > button.icon-only { min-width: 0; }
  #btn-undo { margin-left: auto; }
  .overlay {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    background: transparent;
    pointer-events: none;
  }
  .overlay.open { pointer-events: none; }
  .overlay-card {
    width: min(520px, calc(100vw - 48px));
    border-radius: 18px;
    max-height: min(80dvh, 720px);
    pointer-events: auto;
  }
  .overlay:not(.open) .overlay-card { pointer-events: none; }
  .overlay-h { padding-top: 12px; }
  #preview-sheet .overlay-card { width: min(760px, calc(100vw - 48px)); }
  .grab { display: none; }
}
@media (min-width: 1100px) {
  .content-area { width: min(1120px, 100%); margin-inline: auto; }
  .status { padding-inline: max(calc(var(--pad) + var(--si-r)), calc((100vw - 1120px) / 2 + var(--pad))); }
  .top { padding-inline: max(calc(var(--pad) + var(--si-l)), calc((100vw - 1120px) / 2 + var(--pad))) max(calc(var(--pad) - 8px + var(--si-r)), calc((100vw - 1120px) / 2 + var(--pad) - 8px)); }
  .nav-menu { right: max(calc(var(--pad) - 8px + var(--si-r)), calc((100vw - 1120px) / 2 + var(--pad) - 8px)); }
  .wx-menu { right: max(calc(var(--pad) + 74px + var(--si-r)), calc((100vw - 1120px) / 2 + var(--pad) + 74px)); }
}

/* ── Narrow phones ──────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .word { font-size: 16px; }
  #month-label { font-size: 19px; }
}
@media (max-width: 389px) {
  :root { --pad: 10px; }
  .word { font-size: 15px; }
  .eyebrow { letter-spacing: .12em; }
  .top { gap: 4px; }
  #btn-print { padding: 0 10px; margin-right: 2px; }
  #btn-print span { display: none; }
  .top-actions { gap: 5px; }
  #month-label { font-size: 18px; }
  .weekdays span { font-size: 10px; letter-spacing: .04em; padding: 6px 0; }
  .day .num { font-size: 13px; min-width: 20px; height: 20px; }
  .day.is-ink .who-row { font-size: 13px; }
  .empty-cue { font-size: 13px; }
  .status { gap: 5px; }
  .status > button { font-size: 12.5px; padding: 0 5px; }
  .mode-line { font-size: 12px; }
}

/* ── Short landscape phones ─────────────────────────────────────────── */
@media screen and (max-height: 500px) {
  :root { --head: 44px; }
  .eyebrow { display: none; }
  .month-bar { min-height: 40px; height: 40px; }
  #btn-today { margin-block: 6px; height: 28px; }
  /* Rows are too short to stack a name under the date, so the name sits beside it. */
  .day { flex-direction: row; align-items: flex-start; gap: 3px; padding: 3px 3px 2px; }
  .day-top { flex: none; }
  .who { align-self: stretch; margin-top: 0; }
  .day .num { font-size: 12px; height: 18px; }
  .who-row, .day.is-ink .who-row { font-size: 11px; }
  .weekdays span { padding: 3px 0; }
  .board { gap: 4px; padding-bottom: 4px; }
  .mode-line { min-height: 14px; line-height: 14px; font-size: 11px; }
  .status { min-height: calc(52px + var(--si-b)); padding-block: 4px calc(4px + var(--si-b)); }
}

/* ── Motion ─────────────────────────────────────────────────────────── */
html.no-motion *, html.no-motion *::before, html.no-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Print. The preview scales a wrapper. The printed tree is a table, never a grid.
   @page owns the var(--paper-margin) margin. The sheet padding is screen-only so it is not applied twice. */
#print-root {
  position: relative;
  width: var(--paper-w);
  visibility: hidden;
  pointer-events: none;
}
#print-root.previewing { visibility: visible; }
.sheet {
  width: var(--paper-w);
  min-height: var(--paper-h);
  padding: var(--paper-margin);
  box-sizing: border-box;
  background: #fff;
  color: #000;
  position: relative;
}
.sheet-next { break-before: page; page-break-before: always; }
.p-body { width: var(--paper-inner-w); }
.boundary {
  position: absolute;
  left: var(--paper-margin);
  right: var(--paper-margin);
  top: calc(var(--paper-margin) + var(--paper-inner-h));
  border-top: 1px solid #111;
  height: 0;
}
.p-title {
  font-size: 22pt;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #111;
  margin: 0 0 1pt;
  white-space: nowrap;
  overflow: hidden;
}
.p-sub {
  text-align: center;
  font-size: 13pt;
  font-weight: 750;
  margin: 0 0 6pt;
  color: #111;
  letter-spacing: -0.01em;
}
.p-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 2px solid #111;
}
.p-table th {
  font-size: 11pt;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4pt 0 5pt;
  border-right: 2px solid #111;
  border-bottom: 3px solid #111;
  color: #111;
  background: #fff;
}
.p-table td {
  height: 0.58in;
  vertical-align: top;
  border-right: 2px solid #111;
  border-bottom: 2px solid #111;
  padding: 2pt 3pt 2pt;
  overflow: hidden;
  color: #111;
  position: relative;
  background: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-table th:last-child,
.p-table td:last-child { border-right: none; }
.p-table tr:last-child td { border-bottom: none; }
.p-top { display: flex; justify-content: space-between; align-items: baseline; gap: 3pt; position: relative; z-index: 1; }
.p-num { font-size: 14pt; font-weight: 800; color: #111; line-height: 1; letter-spacing: -0.02em; }
.p-mon { font-size: 9pt; font-weight: 800; letter-spacing: .04em; color: #111; text-transform: uppercase; }
.p-cell.is-edge { background: #eceff3; }
.p-cell.is-edge .p-num { font-size: 11pt; font-weight: 750; color: #3f3f46; }
.p-cell.is-edge .p-mon { color: #111; }
.p-cell.is-month-start { box-shadow: inset 3px 0 0 #111; }
.p-cell.is-month-end { box-shadow: inset -3px 0 0 #111; }
.p-cell.is-month-start .p-top { padding-left: 5px; }
.p-cell.is-month-end .p-num { margin-right: 5px; }
.p-who {
  position: absolute;
  left: 2pt;
  right: 2pt;
  top: 18pt;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.p-who.is-split {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1px;
}
.p-name {
  flex: none;
  width: 100%;
  max-width: 100%;
  font-size: var(--name, 20px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-align: center;
  color: #111;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 1px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-who.is-split .p-name {
  border-radius: 2px;
  padding: 1px 2px;
}
.p-more {
  font-size: 8pt;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #111;
}
.p-note {
  position: absolute;
  left: 2pt;
  right: 2pt;
  bottom: 1pt;
  font-size: 8pt;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: #111;
  z-index: 1;
}
.p-dot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2pt;
  width: 5pt;
  height: 5pt;
  border-radius: 50%;
  background: #111;
  margin: 0 auto;
  z-index: 1;
}
.p-legend { margin-top: 8pt; }
.p-leg-h { font-size: 8pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 3pt; color: #111; }
.p-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 3pt 14pt;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-leg-row {
  flex: 1 1 calc((100% - (var(--cols, 1) - 1) * 14pt) / var(--cols, 1));
  max-width: calc((100% - (var(--cols, 1) - 1) * 14pt) / var(--cols, 1));
  min-width: 0;
  min-height: 16pt;
  display: flex;
  align-items: center;
  gap: 6pt;
  padding: 2pt 0;
  background: transparent;
  color: #111;
  overflow: visible;
}
.p-leg-chip {
  width: 9pt;
  height: 9pt;
  border-radius: 2pt;
  flex: none;
  border: 0.75pt solid #111;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-leg-name {
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  font-weight: 750;
  font-size: 10pt;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  min-width: 0;
  color: #111;
}
.p-legend.is-dense .p-leg { gap: 1pt 12pt; }
.p-legend.is-dense .p-leg-row { min-height: 14pt; padding: 1pt 0; }
.p-legend.is-dense .p-leg-name {
  overflow-wrap: anywhere; font-size: 9pt; }
.p-leg-row.is-off .p-leg-name {
  overflow-wrap: anywhere; color: #444; }
.p-leg-phone {
  flex: none;
  font-size: 9.5pt;
  font-weight: 650;
  color: #111;
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.p-legend.is-dense .p-leg-phone { font-size: 9pt; }
.p-foot-wrap.cols-2 { display: flex; align-items: flex-start; gap: 12pt; }
.p-foot-wrap.cols-2 > .p-foot { flex: 1 1 0; min-width: 0; }
.p-foot { margin: 4pt 0 0; padding: 0; list-style: none; }
.p-foot-li { font-size: 8pt; line-height: 1.3; }
.p-foot-date { font-weight: 800; }

@page { size: letter; margin: .45in; }

/* #print-slot is a body child. Screen keeps it offstage. Print shows only that slot,
   at var(--paper-inner-w), with the @page margin supplying the var(--paper-margin). Never width:auto.
   Never break-inside:avoid on a cell. Never display:block on a hidden sheet. */
#print-slot {
  position: absolute;
  left: -10000px;
  top: 0;
  width: var(--paper-inner-w);
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Paper is always white and always printed in the day palette. A dark theme sets
   color-scheme: dark on the root, which paints the page canvas (the margins) black. */
@media print {
  :root, html, html.light { color-scheme: light !important; background: #fff !important; }
  html, body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body > *:not(#print-slot) { display: none !important; }
  #print-slot {
    display: block !important;
    position: static !important;
    left: auto !important;
    width: var(--paper-inner-w) !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  #print-root {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    width: var(--paper-inner-w) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  .sheet {
    width: var(--paper-inner-w) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .sheet[hidden] { display: none !important; }
  .p-body { width: var(--paper-inner-w) !important; }
  .boundary { display: none !important; }
  .p-table, .p-table tr, .p-table td, .p-table th {
    break-inside: auto;
    page-break-inside: auto;
  }
  .sheet-next:not([hidden]) { break-before: page; page-break-before: always; }
}

html.is-printing { color-scheme: light !important; }
/* Centre the sheet in whatever printable width the dialog gives (iOS keeps its own margins
   and Scaling below 100% leaves spare width): the spare space splits evenly instead of all
   landing on the right. */
@media print {
  #print-slot { margin-left: auto !important; margin-right: auto !important; }
  #print-root, .sheet { margin-left: auto !important; margin-right: auto !important; }
}
html.is-printing #print-slot, html.is-printing #print-root, html.is-printing .sheet { margin-left: auto !important; margin-right: auto !important; }
/* The dialog's orientation disagrees with the chosen layout: shrink to fit one page. */
@media print and (orientation: landscape) { html:not(.print-landscape) #print-slot { zoom: var(--flip-zoom, .75); } }
@media print and (orientation: portrait) { html.print-landscape #print-slot { zoom: var(--flip-zoom, .75); } }
html.is-printing, html.is-printing body {
  height: auto !important;
  overflow: visible !important;
  background: #fff !important;
}
html.is-printing body > *:not(#print-slot) { display: none !important; }
html.is-printing #print-slot {
  display: block !important;
  position: static !important;
  left: auto !important;
  width: var(--paper-inner-w) !important;
  height: auto !important;
  overflow: visible !important;
  background: #fff !important;
}
html.is-printing #print-root {
  visibility: visible !important;
  transform: none !important;
  width: var(--paper-inner-w) !important;
  position: static !important;
}
html.is-printing .sheet {
  width: var(--paper-inner-w) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
html.is-printing .sheet[hidden] { display: none !important; }
html.is-printing .p-body { width: var(--paper-inner-w) !important; }
html.is-printing .boundary { display: none !important; }




:root {--paper-w:8.5in;--paper-h:11in;--paper-inner-w:7.6in;--paper-inner-h:10.1in;--paper-margin:.45in}
/* Keep a full name and its phone together in a colored print card. */
.p-leg {gap:4pt}
.p-leg-row {flex:0 0 calc((100% - (var(--cols,4) - 1)*4pt)/var(--cols,4));max-width:calc((100% - (var(--cols,4) - 1)*4pt)/var(--cols,4));flex-direction:column;justify-content:center;gap:2pt;padding:4pt;min-height:24pt;border-radius:3pt;print-color-adjust:exact;-webkit-print-color-adjust:exact;color:#111}
.p-leg-name {flex:none;max-width:100%;width:100%;text-align:center;white-space:normal;overflow-wrap:anywhere;font-size:10pt;font-weight:700;line-height:1.2}
.p-leg-phone {margin:0;max-width:100%;font-size:9pt;font-weight:400}
.p-legend.is-dense .p-leg {gap:3pt}
.p-legend.is-dense .p-leg-row {flex-basis:calc((100% - (var(--cols,4) - 1)*3pt)/var(--cols,4));max-width:calc((100% - (var(--cols,4) - 1)*3pt)/var(--cols,4));min-height:20pt;padding:3pt;gap:1pt}


.p-name {display:block;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}
@media print {
  .sheet {height:calc(var(--paper-inner-h) - 24px)!important;max-height:calc(var(--paper-inner-h) - 24px)!important;overflow:hidden!important}
  .p-body {width:var(--print-body-w,var(--paper-inner-w))!important}
}
html.is-printing .sheet {height:calc(var(--paper-inner-h) - 24px)!important;overflow:hidden!important}
html.is-printing .p-body {width:var(--print-body-w,var(--paper-inner-w))!important}
.person {touch-action:manipulation}

/* v29: a username field for password managers only. Out of sight and out of the tab order,
   but not display:none, which some managers skip. */
.pm-user { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
#owner-out { position: relative; }
#owner-leave-row { margin-top: 18px; }
/* The colour under a tray that is shrinking (app.js morphTray). Same surface, no rim. */
.tray-skirt { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; background: var(--surface); transform-origin: bottom; pointer-events: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }

.owner-warning { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--danger); font-weight: 600; }
.owner-warning[hidden] { display: none; }
.ink-previews > div[hidden], .ink-previews span[hidden] { display: none; }
.ink-previews:has(> div[hidden]) { grid-template-columns: 1fr; }

/* Weather paints behind free-standing text (month title, first-run line, hint line). A soft
   halo in the ground colour keeps it readable over bright cloud and rain in both themes, and
   secondary greys go to full strength while weather is on. Cards and sheets already sit on glass. */
html.wx-on .month-bar, html.wx-on .empty-cue, html.wx-on .mode-line {
  text-shadow: 0 0 1px var(--canvas-ground), 0 0 6px var(--canvas-ground), 0 0 14px var(--canvas-ground), 0 0 24px var(--canvas-ground);
}
html.wx-on .empty-cue, html.wx-on .mode-line, html.wx-on #save-status { color: var(--text); }
.person .ct[hidden] { display: none; }
.css-label::before { content: attr(data-label); }
html.wx-on .month-bar svg { filter: drop-shadow(0 0 3px var(--canvas-ground)) drop-shadow(0 0 9px var(--canvas-ground)); }