/* ==== app tokens v1 (Phase 05 UI-SPEC). Do not redefine in later phases; add new tokens below. ==== */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }

:root {
  /* Ground and ink */
  --color-bg: #F7F3FA;            /* lilac-white page (dominant) */
  --color-surface: #FFFFFF;       /* working surfaces: top bar, tab bar, sidebar, team header, panels, dialogs */
  --color-surface-2: #EFE8F4;     /* quiet panel, hover, current sidebar item */
  --color-text: #2B1436;          /* aubergine ink */
  --color-text-muted: #5E4B6B;    /* secondary text */
  --color-border: #8A7896;        /* control outlines */
  --color-rule: #D9CFE0;          /* dividers only, never the only edge of a control */

  /* Tape. Marigold is the brand and the primary action. Text on it is always ink. */
  --color-primary: #FFC531;
  --color-primary-hover: #F2B400;
  --color-primary-soft: #FFF1C2;  /* "Just added" row, warning tint */
  --color-on-primary: #2B1436;
  --color-pink: #C2185B;          /* links; "needs you" (Phase 6+); team slot d */
  --color-pink-soft: #FBE3EC;
  --color-teal: #0B7A6B;          /* team slot b; free */
  --color-teal-soft: #D9F2EC;
  --color-blue: #2B59C3;          /* team slot c; focus ring */
  --color-blue-soft: #E1E9FA;
  --color-amber-text: #8A5A00;    /* warning edge and text */

  /* Availability states (pattern + word rules in the component contract) */
  --color-free: #0B7A6B;
  --color-free-soft: #D9F2EC;
  --color-busy: #4A3558;
  --color-tentative: #8A5A00;
  --color-unknown: #6F6578;
  --color-success: #0B7A6B;
  --color-warning: #8A5A00;
  --color-warning-soft: #FFF1C2;
  --color-danger: #B3261E;
  --color-danger-soft: #FBE4E2;
  --color-focus: #2B59C3;

  /* Type */
  --font-display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-sans: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --display-stretch: 82%;
  --text-xs: 0.875rem;    /* 14px floor. Nothing smaller anywhere. */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px body */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 2.75rem;    /* 44px. Reserved; not used in Phase 5 */
  --leading-body: 1.5;
  --leading-display: 1.05;
  --measure: 62ch;

  /* Space (multiples of 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shape and depth */
  --radius-sm: 3px;       /* tape, tags, calendar blocks, chips */
  --radius-md: 10px;      /* buttons, fields, panels */
  --radius-lg: 22px;      /* sheets and dialogs */
  --radius-full: 9999px;  /* avatars only */
  --border-w: 2px;
  --shadow-lg: 0 18px 40px rgba(43, 20, 54, 0.28);  /* floating layers only: dialog, sheet, undo bar */

  /* Interaction */
  --tap: 44px;            /* minimum target */
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;

  /* Frame (new in Phase 5) */
  --topbar-h: 60px;       /* minimum height; the bar grows if the wordmark wraps */
  --sidebar-w: 15rem;
  --tabbar-h: 76px;       /* fallback; a 6-line script sets the measured height on <html> */
  --content-max: 72rem;
  --gutter: var(--space-4);          /* page side padding on phone */
  --gutter-wide: var(--space-8);     /* page side padding at >= 48em */

  /* Layers (new in Phase 5). These are the only z-index values in the app.
     Stacking inside one component (a pinned table column, for example) uses 1 to 9. */
  --z-sidebar: 10;        /* sticky left sidebar (computer) */
  --z-banner: 20;         /* content of the frame's banner-slot (Phase 7) */
  --z-tabbar: 30;         /* fixed bottom tab bar (phone) */
  --z-toast: 40;          /* toast (Phase 8) */
  --z-undo: 50;           /* undo bar; above a toast because it holds a timed action */
  --z-dialog: 60;         /* ceiling. A <dialog> opened with showModal() is in the browser's top layer and needs no z-index */
}
/* Breakpoints (CSS variables cannot be used in media queries; use these literal values):
   phone    : below 48em  (768px at default text size)  bottom tab bar, one column, dialogs as bottom sheets
   computer : 48em and up                                left sidebar, centred dialogs
   wide     : 64em and up (1024px)                       two-column My availability, roster as a table
   Breakpoints are in em so a person with large default text gets the phone layout sooner. */
```

/* Same two families again for Latin Extended, so names with accented letters use the same faces. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/AtkinsonHyperlegibleNext-Variable-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-Variable-ext.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==== Base ==== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: calc(var(--tabbar-h) + var(--space-4)); }
body { margin: 0; min-height: 100dvh; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body);
  color: var(--color-text); background: var(--color-bg); font-variant-numeric: tabular-nums; }
h1, h2, h3, .display { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800;
  line-height: var(--leading-display); letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); line-height: 1.15; }
p { margin: 0; max-width: var(--measure); overflow-wrap: anywhere; }
ul, ol { margin: 0; }
b, strong { font-weight: 700; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
a { color: var(--color-pink); text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
h1:focus, h2:focus, main:focus, [data-page-focus]:focus { outline: none; }
h1:focus-visible, h2:focus-visible, main:focus-visible, [data-page-focus]:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg.i { width: 1.25rem; height: 1.25rem; min-width: 20px; min-height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.notice > svg.i, .banner .msg > svg.i, .a-nav .key svg.i { width: 1.5rem; height: 1.5rem; }

.skip-link { position: absolute; left: var(--space-2); top: var(--space-2); padding: 10px 16px; min-height: var(--tap);
  display: inline-flex; align-items: center; background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-text); border-radius: var(--radius-md); font-weight: 700; transform: translateY(-300%); }
.skip-link:focus { transform: none; }

/* ==== Buttons ==== */
.btn { min-height: var(--tap); min-width: var(--tap); padding: 10px 18px; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--space-2); border: var(--border-w) solid var(--color-text); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, transform .12s ease; }
.btn:hover { background: var(--color-surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger); }
.btn-quiet { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--color-surface-2); color: var(--color-text-muted);
  border-style: dashed; border-color: var(--color-border); cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--color-text); color: var(--color-surface); }
.btn[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; }
.btn-row, .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.form-actions { margin-top: 20px; }
.rowlink { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* ==== Fields ==== */
.field { display: grid; gap: 6px; }
.field > label, .field > .label { font-weight: 700; }
.field input, .field select, .field textarea { min-height: var(--tap); padding: 10px 12px; width: 100%;
  background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-text); }
.field { min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; }
/* iOS Safari: native date/time appearance carries an intrinsic min width that ignores min-width:0 */
.field input[type="date"], .field input[type="time"] { -webkit-appearance: none; appearance: none; }
/* WebKit-only pseudo-element; keep in its own rule because other engines drop a whole rule on unknown pseudos */
.field input::-webkit-date-and-time-value { text-align: start; margin: 0; min-height: 1lh; }
.field .hint { color: var(--color-text-muted); font-size: var(--text-sm); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-danger); border-width: 3px; }
.field .error { display: none; color: var(--color-danger); font-weight: 700; }
.field.has-error .error { display: flex; gap: 6px; align-items: flex-start; }
.field .error::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--color-danger); color: #fff; display: grid; place-items: center; font-size: var(--text-xs); }
.field.narrow input { width: 6rem; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); width: fit-content; max-width: 100%;
  padding-right: var(--space-2); font-weight: 700; cursor: pointer; }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--color-text); cursor: pointer; }
.check input[aria-disabled="true"] { cursor: not-allowed; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 2px; font-weight: 700; }
.choices { display: grid; gap: 2px; }
.days { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.inl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ==== Notices and status ==== */
.notice { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-left: 8px solid var(--color-text);
  background: var(--color-surface); }
.notice-warn { border-left-color: var(--color-amber-text); background: var(--color-warning-soft); }
.notice-bad { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.notice .nbody { min-width: 0; display: grid; gap: var(--space-2); }
.notice .nbody > * { overflow-wrap: anywhere; }
.status { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 700; }
.privacy { display: flex; gap: 10px; align-items: flex-start; color: var(--color-text-muted); font-size: var(--text-sm); }
.privacy p { max-width: none; }
.privacy > svg.i { margin-top: calc((1lh - 1.25rem) / 2); }
.appname { font-weight: 700; }
.plainlist { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); }

/* ==== Tape and team identity ==== */
.tape { display: inline-block; max-width: 100%; padding: 4px 12px; background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; overflow-wrap: anywhere;
  clip-path: polygon(0 6%, 2% 0, 98% 3%, 100% 0, 99% 94%, 100% 100%, 3% 97%, 0 100%); }
.tape-lg { font-size: var(--text-lg); padding-top: 6px; padding-bottom: 6px; }
.tape-xl { font-size: clamp(1.25rem, 9cqi, 2rem); padding-top: var(--space-2); padding-bottom: var(--space-2); line-height: 1.15; }
.team-a { background-color: var(--color-primary); color: var(--color-on-primary); }
.team-b { background-color: var(--color-teal); color: #fff; padding-left: 26px;
  background-image: radial-gradient(#fff 2px, transparent 2.5px); background-size: 9px 9px; background-repeat: repeat-y; background-position: 5px 0; }
.team-c { background-color: var(--color-blue); color: #fff; padding-left: 26px;
  background-image: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 6px); background-size: 14px 100%; background-repeat: no-repeat; background-position: 4px 0; }
.team-d { background-color: var(--color-pink); color: #fff; padding-left: 26px;
  background-image: repeating-linear-gradient(0deg, #fff 0 2px, transparent 2px 6px); background-size: 14px 100%; background-repeat: no-repeat; background-position: 4px 0; }
.tape.team-a, a.brand { box-shadow: inset 0 0 0 2px var(--color-text); }
/* Swatch: the team's colour and pattern beside its name, never under it. */
.sw { flex: none; display: inline-block; box-sizing: content-box; width: 22px; height: 18px; padding: 0;
  border: 2px solid var(--color-text); border-radius: var(--radius-sm); }
.sw.team-a, .sw.team-b, .sw.team-c, .sw.team-d { padding-left: 0; }

/* ==== Availability chips and bare fills (shipped now, first rendered in Phase 6) ==== */
.av { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: var(--text-sm); border: 2px solid transparent; }
.av::before { font-weight: 800; }
.av-free { background: var(--color-free-soft); color: var(--color-text); border-color: var(--color-free); }
.av-free::before { content: "\2713"; color: var(--color-text); }
.av-busy { background: var(--color-busy); color: #fff; border-color: var(--color-busy); }
.av-busy::before { content: "\25A0"; }
.av-tentative, .av-unknown, .av-stale { background: var(--color-surface); color: var(--color-text); }
.av-tentative { border: 2px solid var(--color-busy); }
.av-unknown, .av-stale { border: 2px dashed var(--color-unknown); }
.av-tentative::before, .av-unknown::before, .av-stale::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 2px; background-color: var(--color-surface); }
.av-tentative::before { border: 2px solid var(--color-busy); background-image: radial-gradient(var(--color-busy) 1.5px, transparent 2px); background-size: 6px 6px; }
.av-unknown::before { border: 2px solid var(--color-unknown); background-image: repeating-linear-gradient(45deg, var(--color-unknown) 0 2px, transparent 2px 6px); }
.av-stale::before { border: 2px solid var(--color-unknown);
  background-image: repeating-linear-gradient(45deg, var(--color-unknown) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, var(--color-unknown) 0 2px, transparent 2px 6px); }
.plate { background: var(--color-surface); color: var(--color-text); padding: 1px 6px; border-radius: 2px; font-weight: 700; }
.fill-free { background: var(--color-free-soft); outline: 2px solid var(--color-free); outline-offset: -2px; }
.fill-busy { background: var(--color-busy); }
.fill-unknown { background-color: var(--color-surface); outline: 2px dashed var(--color-unknown); outline-offset: -2px;
  background-image: repeating-linear-gradient(45deg, var(--color-unknown) 0 2px, transparent 2px 8px); }
.fill-stale { background-color: var(--color-surface); outline: 2px dashed var(--color-unknown); outline-offset: -2px;
  background-image: repeating-linear-gradient(45deg, var(--color-unknown) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, var(--color-unknown) 0 2px, transparent 2px 8px); }
.fill-tentative { background-color: var(--color-surface); outline: 2px solid var(--color-busy); outline-offset: -2px;
  background-image: radial-gradient(var(--color-busy) 1.2px, transparent 1.6px); background-size: 6px 6px; }

/* Avatar: one initial beside a full name, never alone (shipped now, first used in Phase 7). */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--color-surface-2);
  color: var(--color-text); border: 2px solid var(--color-text); font-weight: 800; font-size: var(--text-sm); flex: none; }

/* ==== Frame: signed-in and signed-out pages ==== */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  min-height: var(--topbar-h); background: var(--color-surface); border-bottom: var(--border-w) solid var(--color-text); }
a.brand { margin-left: calc(-1 * var(--space-4)); padding: 8px 18px 8px 20px; min-height: var(--tap); max-width: calc(100% + var(--space-4));
  display: inline-flex; align-items: center; background: var(--color-primary); color: var(--color-on-primary);
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--text-lg);
  line-height: 1.15; text-decoration: none; overflow-wrap: normal;
  clip-path: polygon(0 0, 100% 4%, 98.5% 50%, 100% 96%, 0 100%); }
a.brand:hover { background: var(--color-primary-hover); }
a.brand:focus-visible { clip-path: none; }
.banner-slot:empty { display: none; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: var(--space-2) var(--space-4);
  background: var(--color-warning-soft); color: var(--color-text); border-bottom: var(--border-w) solid var(--color-text); font-weight: 700; }
.banner .msg { display: flex; gap: var(--space-2); align-items: center; flex: 1 1 12rem; }

/* Main menu: bottom tab bar on phone */
.a-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); background: var(--color-surface);
  border-top: var(--border-w) solid var(--color-text); padding-bottom: env(safe-area-inset-bottom); }
.a-nav ul { list-style: none; margin: 0; padding: 0 var(--space-1); display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }
.a-nav li { flex: 1 1 auto; display: flex; }
.a-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: var(--tap); min-height: 60px; padding: 4px 4px 8px; border-top: 5px solid transparent;
  color: var(--color-text-muted); text-decoration: none; font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 800; font-size: var(--text-sm); line-height: 1.2; }
.a-nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
.a-nav a[aria-current="page"] { color: var(--color-text); border-top-color: var(--color-text); }
.a-nav a.key { margin: -18px 0 6px; padding: var(--space-2) var(--space-3); min-height: 72px; background: var(--color-primary);
  color: var(--color-on-primary); border: 2px solid var(--color-text); border-radius: var(--radius-md); font-size: var(--text-base); }
.a-nav a.key:hover { background: var(--color-primary-hover); }
.a-nav a.key[aria-current="page"] { border-width: 4px; text-decoration: underline; text-underline-offset: 3px; }
.a-nav .tz { display: none; }

main { display: block; width: 100%; max-width: var(--content-max); padding: var(--space-6) var(--gutter) var(--space-12); }
body.has-nav main { padding-bottom: calc(var(--tabbar-h) + var(--space-6)); }
main > * + * { margin-top: var(--space-4); }
main > h1 + *, main > .pagehead + * { margin-top: var(--space-3); }

/* ==== Layout helpers and screen layouts used by the Phase 5 pages ==== */
.stack { display: grid; gap: var(--space-4); }
.stack > * { margin-top: 0; }
.landing { max-width: 34rem; padding-top: var(--space-6); container-type: inline-size; }
.landing > * + * { margin-top: var(--space-4); }
.landing h1 .tape { display: block; width: fit-content; margin-top: 10px; }
.col-form { max-width: 30rem; }
.col-list { max-width: 40rem; }
.home-grid { display: grid; gap: var(--space-8); align-items: start; }
.avail-layout { display: grid; gap: var(--space-8); align-items: start; }
.panel { background: var(--color-surface); border: var(--border-w) solid var(--color-text); border-radius: var(--radius-md); padding: var(--space-4); }
.panel > h2 { margin-bottom: var(--space-4); }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--space-3); align-items: start; }
.hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); max-width: 30rem; }
.linkbox { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-surface); border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md); font-weight: 700; overflow-wrap: anywhere; max-width: none; width: 100%; }

/* Call-sheet list */
.sheetlist { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-top: 2px solid var(--color-text); container-type: inline-size; }
.sheetlist > .row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 6px var(--space-3); padding: 14px 0; border-bottom: 1px solid var(--color-rule); }
.sheetlist > .row.plain { grid-template-columns: minmax(0, 1fr); }
.row .when { display: flex; flex-direction: column; gap: 2px; }
.row .day { font-weight: 700; font-size: var(--text-xs); }
.row .time { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--text-xl); line-height: 1.05; }
.row .what { min-width: 0; }
.row .what > * + * { margin-top: var(--space-1); }
.sheetlist .row h3, .sheetlist .row h2 { font-family: var(--font-sans); font-stretch: normal; font-weight: 700; font-size: var(--text-base); line-height: 1.3; letter-spacing: 0; }
.sheetlist .row h2.nm { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--text-lg); line-height: 1.15; }
.sheetlist .row h3:has(> .tape) { line-height: 1.15; }
.row .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.row .teamlinks { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: none; }
.row .hid { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-text-muted); }
.empty { margin-top: var(--space-3); padding: 14px 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-rule); }

/* Busy list (My availability) */
.group h3 { margin-top: var(--space-6); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-text); }
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
ul.rows > .row.is-new { background: var(--color-primary-soft); margin: 0 -8px; padding: var(--space-3) var(--space-2); }
ul.rows .when { flex: 0 0 5rem; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--text-xl); line-height: 1.05; }
ul.rows .when small { display: block; font-family: var(--font-sans); font-stretch: normal; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); line-height: 1.4; }
ul.rows .what { flex: 1 1 7rem; min-width: 0; }
.t1 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800; font-size: var(--text-lg); line-height: 1.15; overflow-wrap: anywhere; }
.t2 { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; }
.row.is-new .t2 { color: var(--color-text-muted); }
ul.rows .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }

/* Add-busy-time form */
.rep { border-top: 1px solid var(--color-rule); padding-top: var(--space-2); }
.rep-body { display: none; gap: var(--space-4); margin-top: var(--space-2); padding-left: 14px; border-left: 2px solid var(--color-text); }
.rep-summary { padding: 10px 14px; border-left: 8px solid var(--color-text); background: var(--color-surface-2); font-weight: 700; overflow-wrap: anywhere; }
.rep-summary:empty { display: none; }
.add-form:has(:is(.f-repeat, [aria-controls="rep-body"]):checked) .rep-body { display: grid; }
.add-form:has(.f-allday:checked) .time-row { display: none; }
.rep-body:has(input[name="freq"]:not([value="days"]):checked) .rep-days,
.rep-body:has(input[name="freq"]:not([value="weekly"]):checked) .rep-weekly,
.rep-body:has(input[name="freq"]:not([value="monthly"]):checked) .rep-monthly,
.rep-body:has(input[name="ends"]:not([value="until"]):checked) .rep-until,
.rep-body:has(input[name="ends"]:not([value="count"]):checked) .rep-count { display: none; }

/* Undo bar */
#undo-bar { position: fixed; left: var(--space-3); right: var(--space-3); bottom: calc(var(--tabbar-h) + var(--space-3)); z-index: var(--z-undo);
  margin: 0 auto; max-width: 32rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--color-surface); color: var(--color-text); border: var(--border-w) solid var(--color-text);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-weight: 700; line-height: 1.4; }
#undo-bar .undo-msg { flex: 1 1 12rem; }
#undo-bar [data-undo] { background: var(--color-primary); color: var(--color-on-primary); }

/* Team page: header band, page tabs, roster */
.pagehead { margin: calc(-1 * var(--space-6)) calc(-1 * var(--gutter)) var(--space-6); padding: var(--space-4) var(--gutter) 0;
  background: var(--color-surface); border-bottom: var(--border-w) solid var(--color-text); container-type: inline-size; }
.pagehead > * { margin-top: 0; }
.pagehead > * + * { margin-top: var(--space-3); }
.teamnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); max-width: none; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
a.tab { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 14px; border-bottom: 5px solid transparent;
  color: var(--color-text-muted); font-weight: 700; text-decoration: none; }
a.tab:hover { color: var(--color-text); background: var(--color-surface-2); }
a.tab[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-text); }

.person .nm, .accbtn .nm, .btable th[scope="row"] { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 800;
  font-size: var(--text-lg); line-height: 1.15; letter-spacing: 0; }
.nm, .em { overflow-wrap: anywhere; }
.role { font-weight: 400; }
.role.org { font-weight: 700; }
.em { color: var(--color-text-muted); font-size: var(--text-sm); }
.you { font-family: var(--font-sans); font-stretch: normal; font-weight: 400; font-size: var(--text-base); }
.accbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; width: 100%; min-height: var(--tap);
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.accbtn > span:not(.more) { grid-column: 1; }
.accbtn .more { grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap);
  padding: 0 var(--space-3); border: var(--border-w) solid var(--color-text); border-radius: var(--radius-md); font-weight: 700; background: var(--color-surface); }
.accbtn .more svg { transition: transform .12s ease; }
.accbtn[aria-expanded="true"] .more svg { transform: rotate(180deg); }
@container (max-width: 18rem) {
  .accbtn { grid-template-columns: minmax(0, 1fr); }
  .accbtn .more { grid-column: 1; grid-row: auto; justify-self: start; }
}
.roster-wide { display: none; }
.btable { width: 100%; border-collapse: collapse; margin-top: var(--space-3); border-top: 2px solid var(--color-text); }
.btable th, .btable td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
.btable thead th { font-size: var(--text-sm); font-weight: 700; }
.btable .em, .btable .nm { overflow-wrap: anywhere; }

/* ==== Dialog: bottom sheet on phone, centred from 48em ==== */
dialog#dlg { margin: auto 0 0; width: 100%; max-width: none; max-height: 88vh; overflow-y: auto; padding: var(--space-6) var(--space-4) var(--space-4);
  background: var(--color-surface); color: var(--color-text); border: var(--border-w) solid var(--color-text); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg);
  transition: transform .2s ease, opacity .2s ease; }
dialog#dlg::backdrop { background: rgba(43, 20, 54, .6); }
@starting-style { dialog#dlg[open] { transform: translateY(100%); opacity: 0; } }

.dlg-body { display: grid; gap: var(--space-4); }
.dlg-body > * { margin-top: 0; }
.dlg-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.choice { display: block; padding: var(--space-3) var(--space-4); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.choice[aria-current="true"] { border: 4px solid var(--color-text); }

/* ==== Forced colours ==== */
@media (forced-colors: active) {
  .btn, .tape, a.brand, .av, [class*="fill-"], .team-a, .team-b, .team-c, .team-d { border: 2px solid CanvasText; forced-color-adjust: auto; }
  .sw { forced-color-adjust: none; }
}

/* ==== Computer: 48em and up ==== */
@media (min-width: 48em) {
  html { scroll-padding-bottom: var(--space-4); }
  main { padding: var(--space-6) var(--gutter-wide) var(--space-12); }
  body.has-nav main { padding-bottom: var(--space-12); }
  body.has-nav { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "top top" "banner banner" "nav main"; }
  body.has-nav > .topbar { grid-area: top; }
  body.has-nav > .banner-slot { grid-area: banner; }
  body.has-nav > main { grid-area: main; }
  .a-nav { grid-area: nav; position: static; z-index: auto; display: flex; flex-direction: column; border-top: 0;
    border-right: var(--border-w) solid var(--color-text); padding: var(--space-4) 0 0; }
  .a-nav ul { position: sticky; top: 0; z-index: var(--z-sidebar); flex-direction: column; flex-wrap: nowrap; gap: var(--space-1); padding: 0; }
  .a-nav li { display: block; }
  .a-nav a { flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4);
    border-top: 0; border-left: 6px solid transparent; font-size: var(--text-lg); }
  .a-nav a[aria-current="page"] { border-left-color: var(--color-text); background: var(--color-surface-2); }
  .a-nav a.key { margin: var(--space-2) var(--space-4); min-height: 52px; }
  .a-nav a.key[aria-current="page"] { border-left-width: 4px; }
  .a-nav .tz { display: block; position: sticky; bottom: 0; margin-top: auto; padding: var(--space-4); background: var(--color-surface);
    font-size: var(--text-xs); color: var(--color-text-muted); }
  .a-nav a.key svg.i { width: 1.25rem; height: 1.25rem; }
  .pagehead { margin: calc(-1 * var(--space-6)) calc(-1 * var(--gutter-wide)) var(--space-6); padding: var(--space-4) var(--gutter-wide) 0; }
  .sheetlist > .row { grid-template-columns: 12rem minmax(0, 1fr); }
  .sheetlist > .row.plain { grid-template-columns: minmax(0, 1fr); }
  #undo-bar { bottom: var(--space-6); }
  dialog#dlg { margin: auto; width: min(30rem, 90vw); border-bottom: var(--border-w) solid var(--color-text); border-radius: var(--radius-lg); }
  @starting-style { dialog#dlg[open] { transform: translateY(12px); opacity: 0; } }
  .dlg-actions { flex-direction: row-reverse; justify-content: flex-start; }
}
/* The sheet rule above for 18rem containers must still win at 48em: stack when the list itself is narrow. */
@container (max-width: 18rem) {
  .sheetlist > .row, .sheetlist > .row.plain { grid-template-columns: minmax(0, 1fr); }
}

/* ==== Wide: 64em and up ==== */
@media (min-width: 64em) {
  .home-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .avail-layout { grid-template-columns: 26rem minmax(0, 1fr); gap: var(--space-12); }
  .roster-narrow { display: none; }
  .roster-wide { display: block; }
}

/* ==== Motion: only answers to an action; none at all when the person asks for less ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}