/* Rec Planner — layout on top of the Modernist token sheet (ds.css).
   Zero radius everywhere; 2px rules carry the structure, not shadows. */

/* Child colours. Modernist is a single-hue system — red-orange plus warm
   neutrals — so it cannot tell two children apart on its own. The design gave
   Child 2 var(--color-text), which is the same ink as the body copy and the
   2px rules (ΔE 0), making its swatch and its 4px bars invisible as a colour.
   Children 1 and 3 stay on the accent ramp; 2 and 4 take a complementary teal
   and plum. Every one clears 3:1 against the panel, and white reads on all of
   them. Retune here — logic.js only refers to the tokens. */
:root {
  --aside-w: 336px;                        /* the filter column, referenced by the backdrop */
  --color-kid-1: var(--color-accent);      /* #ec3013 */
  --color-kid-2: #0e7c86;                  /* teal — the planner's own earlier primary */
  --color-kid-3: var(--color-accent-800);  /* #7c1405 */
  --color-kid-4: #6b2f5e;                  /* plum */
}

body { margin: 0; background: var(--color-bg); }
* { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
input[type=range] { accent-color: var(--color-accent); }
button { font: inherit; border-radius: 0; }

#root {
  height: 100vh; display: grid; grid-template-columns: var(--aside-w) 1fr;
  font-family: var(--font-body); font-size: 13px; color: var(--color-text);
  background: var(--color-bg); overflow: hidden;
}

/* Tabs. Hidden on the desktop layout, where both panes are side by side. */
#tabs { display: none; grid-column: 1 / -1; border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface); }
#tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
  background: none; color: var(--color-neutral-700); cursor: pointer;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; }
#tabs button[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
.tab-count { font-family: var(--font-body); font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--color-accent-700); }

.lbl { font-family: var(--font-heading); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700); }
.lbl-xs { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-600); }
.hint-xs { font-size: 10px; color: var(--color-neutral-600); }
.count { font-size: 10px; color: var(--color-neutral-600); }
.linkish { border: 0; background: none; padding: 0 0 0 4px; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-700); cursor: pointer; }
.dot { width: 8px; height: 8px; display: block; flex: 0 0 auto; }
.dot-sm { width: 7px; height: 7px; }
/* A row covering more than one child carries one swatch per child. */
.dots { display: flex; gap: 2px; flex: 0 0 auto; margin-top: 4px; }

/* ---------- left column ---------- */
aside { border-right: 1px solid var(--color-divider); display: flex; flex-direction: column;
  min-height: 0; background: var(--color-surface); }
.pane { padding: 10px 14px; border-bottom: 1px solid var(--color-divider); }
.pane-head { display: flex; align-items: center; gap: 8px; }
.app-head { padding: 10px 14px; border-bottom: 1px solid var(--color-divider);
  display: flex; align-items: baseline; gap: 10px; }
.app-head h1 { margin: 0; font-family: var(--font-heading); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
#statline { font-size: 11px; color: var(--color-neutral-600); margin-left: auto; }
#kidnote { font-size: 10px; color: var(--color-accent-700); }

.icon-btn { margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--color-divider); background: var(--color-surface);
  color: var(--color-text); font-size: 14px; line-height: 1; cursor: pointer; }

/* A row per child rather than chips wrapping two-up: the name claims the slack
   and the controls line up down the right, so four children read as a list of
   four rather than a paragraph of boxes. */
#kids { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
/* The whole chip is the child: the name selects them, the − and + beside their
   age change it in place, and the × takes them off the list. No cog, no panel
   underneath, nothing that has to be opened before it can be used. */
.kid { display: flex; align-items: stretch; border: 1px solid; }
.kid-body { flex: 1; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 0;
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600; }
.kid-step { display: flex; align-items: center; border-left: 1px solid; }
.kid-pm { width: 22px; align-self: stretch; border: 0; background: none; cursor: pointer;
  font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1; padding: 0; }
.kid-pm:hover { background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.kid-age { font-weight: 500; opacity: .85; font-size: 12px; min-width: 34px; text-align: center;
  font-variant-numeric: tabular-nums; }
.kid-x { width: 22px; align-self: stretch; border: 0; border-left: 1px solid; background: none;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0; opacity: .7; }
.kid-x:hover { opacity: 1; background: color-mix(in srgb, var(--color-text) 12%, transparent); }

#kmlabel { margin-left: auto; font-family: var(--font-heading); font-size: 12px; font-weight: 600; }
#km { width: 100%; margin: 8px 0 0; display: block; }

.disclosure { border-bottom: 1px solid var(--color-divider); }
#moretoggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 0; background: none; cursor: pointer; font-family: var(--font-heading); font-size: 10px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700); }
#morecount { font-family: var(--font-body); font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--color-accent-700); }
#morecaret { margin-left: auto; color: var(--color-text); }
#more { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.seg-row { display: flex; gap: 6px; }
.seg-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.seg { flex: 1; padding: 6px 9px; border: 1px solid; cursor: pointer;
  font-family: var(--font-heading); font-size: 12px; font-weight: 600; text-align: left; }
.seg-sm { flex: 0 0 auto; padding: 5px 8px; font-size: 11px; }
.search-row { display: flex; align-items: center; gap: 10px; }
.search-row .input { flex: 1; padding: 6px 8px; font-size: 12px; }

#allbox { display: flex; align-items: center; gap: 7px; border: 0; background: none;
  padding: 0; cursor: pointer; color: var(--color-text); }
.cat-tools { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
#cats { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.box { width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid; display: grid;
  place-items: center; font-size: 10px; line-height: 1; }
.box-sm { width: 11px; height: 11px; font-size: 9px; }
.cat-row, .act-row { display: flex; align-items: stretch; border: 1px solid; }
.act-row { margin: 3px 0 0 14px; }
.cat-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  padding: 4px 7px; border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 11.5px; text-align: left; }
.act-row .cat-main { padding: 3px 7px; font-size: 11px; }
.cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.only { border: 0; border-left: 1px solid; background: none; padding: 0 6px;
  color: var(--color-accent-700); cursor: pointer; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; }
.caret { border: 0; border-left: 1px solid; background: none; width: 22px;
  color: inherit; cursor: pointer; font-size: 12px; line-height: 1; }

.events-head { padding: 6px 14px; border-bottom: 1px solid var(--color-divider);
  display: flex; align-items: baseline; gap: 8px; background: var(--color-neutral-100); }
.events-head .lbl { color: var(--color-text); }
#resultline { margin-left: auto; font-size: 11px; color: var(--color-neutral-700); }
.focustag { display: flex; align-items: center; gap: 5px; padding: 2px 6px; border: 0;
  background: var(--color-accent); color: #fff; cursor: pointer; font-family: var(--font-heading);
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.focustag .x { font-size: 12px; line-height: 1; }

#list { flex: 1; overflow-y: auto; min-height: 0; }
.venue-head { padding: 5px 14px; border-bottom: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-100); display: flex; align-items: baseline; gap: 8px;
  position: sticky; top: 0; z-index: 2; }
.venue-name { font-family: var(--font-heading); font-size: 12px; font-weight: 700; }
.venue-km { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--color-accent-700); }
.slot { border-bottom: 1px solid var(--color-neutral-200); }
.slot-frame { padding-left: 5px; }
.slot-head { display: flex; align-items: center; gap: 8px; padding: 3px 8px;
  background: var(--color-neutral-100); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-neutral-700); }
.slot-head-on { cursor: pointer; }
.slot-head-on:hover { background: var(--color-neutral-200); }
.slot-act { margin-left: auto; color: var(--color-accent-700); }
.leg { padding: 6px 10px; border-left: 4px solid; display: flex; align-items: flex-start;
  gap: 8px; cursor: pointer; }
.leg:hover { background: var(--color-neutral-100) !important; }
.leg-main { min-width: 0; flex: 1; }
.leg-act { font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.leg-meta { font-size: 11px; color: var(--color-neutral-700); margin-top: 2px; }
.leg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.leg-who { font-size: 10px; font-weight: 600; white-space: nowrap; }
/* ---------- who is going ----------
   A class whose age range covers two children is two enrolments, not one, so
   the row's child label is a toggle apiece rather than a statement: the row
   itself opens the detail, and these are what put a child on the week. Filled
   in the child's colour means that child is on it, as in the sidebar. */
.leg-kids, .dt-kids-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.kidpick { display: flex; align-items: center; gap: 4px; padding: 2px 5px; border: 1px solid;
  cursor: pointer; font-family: var(--font-heading); font-size: 10px; font-weight: 600;
  line-height: 1.2; white-space: nowrap; }
.kidpick:hover { border-color: var(--color-text); }
.kidpick .dot { margin-top: 0; }
.kidpick-age { font-weight: 500; opacity: .8; }
.tag { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 5px; white-space: nowrap; }
.empty { padding: 28px 14px; }
.empty-h { font-family: var(--font-heading); font-size: 14px; font-weight: 700; }
.empty p { font-size: 12px; color: var(--color-neutral-700); text-wrap: pretty; }
.moreline { padding: 10px 14px; font-size: 11px; color: var(--color-neutral-700); }

/* ---------- right column ---------- */
main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.week-bar { padding: 8px 16px; border-bottom: 1px solid var(--color-divider);
  display: flex; align-items: center; gap: 14px; background: var(--color-surface); }
#legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; }
.leg-item { display: flex; align-items: center; gap: 5px; }
.leg-item .dot { width: 9px; height: 9px; }
#pickline { margin-left: auto; font-size: 11px; color: var(--color-neutral-700); }
#warn { padding: 6px 16px; border-bottom: 1px solid var(--color-divider);
  background: var(--color-accent-200); color: var(--color-accent-900); font-size: 11.5px; }

.scroll { flex: 1; overflow: auto; min-height: 0; padding: 0 16px 20px; }
#cal { display: grid; grid-template-columns: 44px repeat(7, minmax(80px, 1fr)); min-width: 700px; }
.cal-corner, .cal-head { position: sticky; top: 0; z-index: 4; background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider); height: 26px; }
.cal-head { border-top: 0; border-left: 0; border-right: 0; display: flex; align-items: center;
  padding: 0 5px; cursor: pointer; font-family: var(--font-heading); font-size: 11px;
  font-weight: 600; color: var(--color-text); }
.cal-head span { padding: 1px 5px; }
.cal-gutter { position: relative; padding-top: 8px; }
.hour { position: absolute; right: 6px; font-size: 9.5px; color: var(--color-neutral-600); white-space: nowrap; }
.cal-col { position: relative; padding-top: 8px; border-left: 1px solid var(--color-neutral-300); cursor: crosshair; }
.cal-lines { position: absolute; inset: 8px 0 0;
  background: repeating-linear-gradient(to bottom, var(--color-neutral-300) 0 1px, transparent 1px 54px); }
/* Registration state in the detail panel. A class whose intake has not opened
   yet is the common case right now, so the date gets its own line. */
.dt-opens { margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--color-accent-800);
  background: var(--color-accent-200); padding: 2px 6px; display: inline-block; }
/* A one-off. Dashed, like the ghost outline its block wears on the grid. */
.dt-once { margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--color-neutral-800);
  border: 1px dashed var(--color-neutral-400); padding: 2px 6px; display: inline-block; }
.dt-link-go { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
/* A class with nothing left. Ink rather than accent: it is a fact about the
   class, not a warning about your week. */
.dt-full { margin-top: 4px; font-size: 11px; font-weight: 600; padding: 2px 6px;
  display: inline-block; background: var(--color-text); color: var(--color-surface); }

/* A block is a bar and a wash: a rail down the left in the child's colour, and
   a pale fill of the same to sit the name on. No box, no frame — the only other
   line is between two that abut, same column, one starting exactly where the
   other ends, since two consecutive classes for one child would otherwise read
   as a single tall rectangle. */
.blk { position: absolute; overflow: hidden; line-height: 1.15; cursor: pointer; z-index: 2;
  outline-offset: -1px; }
.blk-abuts { border-top: 1px solid var(--color-neutral-400); }
.blk-act { font-family: var(--font-heading); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.blk-sub { color: var(--color-neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#weekwrap { margin-top: 14px; border-top: 1px solid var(--color-divider); }
.week-head { padding: 7px 0 6px; display: flex; align-items: baseline; gap: 10px; }
#weekcount { font-size: 11px; color: var(--color-neutral-700); }
#export { margin-left: auto; padding: 4px 9px; border: 1px solid var(--color-divider);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600; }
.wk { display: flex; align-items: center; gap: 12px; padding: 6px 8px;
  border-top: 1px solid var(--color-neutral-200); border-left: 4px solid; }
.wk-when { font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; min-width: 150px; }
.wk-act { font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.wk-loc { font-size: 11.5px; color: var(--color-neutral-700); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-km { font-size: 11px; color: var(--color-neutral-700); width: 60px; }
/* The course number, in both places you would reach for it: on the week list
   when the intake opens, and on the panel beside the button that takes you
   there. Tabular figures so a column of them lines up. */
.wk-code { font-size: 11px; font-weight: 600; width: 66px; font-variant-numeric: tabular-nums;
  color: var(--color-neutral-800); }
.wk-who { font-size: 11.5px; font-weight: 600; width: 110px;
  display: flex; align-items: center; gap: 6px; }
.wk-who .dots { margin-top: 0; }
.wk-kind { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  width: 62px; color: var(--color-neutral-700); }
.wk-x { border: 0; background: none; padding: 0 4px; font-size: 14px; line-height: 1;
  color: var(--color-accent-700); cursor: pointer; }
#calempty { padding: 18px 4px; font-size: 12px; color: var(--color-neutral-700);
  max-width: 380px; text-wrap: pretty; }
[hidden] { display: none !important; }

/* ---------- detail panel ----------
   Clicking a block asks what it is; removing is an explicit button. Structure
   follows design/Detail.dc.html — name, meta, what it sits next to, actions —
   in the Modernist language: square corners, a 2px rule, no shadow. */
.reset-row { display: flex; justify-content: flex-end; }
/* The backdrop stops at the filter column. Covering it too would mean every
   click in the list was spent closing the panel instead of picking the next
   class — and the panel is anchored clear of the column precisely so the list
   stays workable while it is open. */
#detailbg { position: fixed; inset: 0 0 0 var(--aside-w); z-index: 60; background: transparent; }
#detail { position: fixed; z-index: 61; width: 320px; max-width: calc(100vw - 16px);
  max-height: 80vh; overflow-y: auto; background: var(--color-surface);
  border: 1px solid var(--color-text); font-size: 13px; }
.dt-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 11px;
  background: var(--color-neutral-100); border-bottom: 1px solid var(--color-divider); }
.dt-head b { font-family: var(--font-heading); font-size: 13.5px; font-weight: 700; flex: 1; }
.dt-x { border: 0; background: none; padding: 0 2px; font-size: 18px; line-height: 1;
  color: var(--color-neutral-700); cursor: pointer; }
.dt-x:hover { color: var(--color-text); }
.dt-meta { padding: 10px 11px; border-bottom: 1px solid var(--color-neutral-300);
  display: flex; flex-direction: column; gap: 3px; }
.dt-line { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.dt-km { margin-left: auto; color: var(--color-accent-700); font-weight: 600; }
.dt-sub { font-size: 11px; color: var(--color-neutral-700); }
.dt-who { margin-top: 5px; }
.dt-who .dots { margin-top: 0; }
/* One venue line, a summary of what is on there, then a section per class --
   every one of them the same, with the same controls. Marking the one you
   tapped made it the subject and the rest its footnotes, which is not what the
   panel is: it is the venue, and everything you have there at that hour. */
.dt-venue { padding: 8px 11px; display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--color-neutral-300); font-size: 11.5px;
  color: var(--color-neutral-700); }
.dt-venue .dt-km { margin-left: auto; font-weight: 600; color: var(--color-accent-800); }
.dt-summary { padding: 6px 11px; background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-300); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-700); }
.dt-class { padding: 9px 11px 4px; border-bottom: 1px solid var(--color-neutral-300); }
.dt-class-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.dt-class-top .dots { margin-top: 0; }
.dt-class-who { font-size: 11px; font-weight: 600; color: var(--color-neutral-800); }
.dt-class-act { font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  color: var(--color-text); margin-bottom: 2px; }
.dt-foot { padding: 8px 11px; font-size: 11px; color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-neutral-300); }
.dt-rel { padding: 9px 11px; border-bottom: 1px solid var(--color-neutral-300); }
.dt-pair { background: var(--color-neutral-100); }
.dt-clash { background: var(--color-accent-200); color: var(--color-accent-900); }
.dt-rel-h { font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-neutral-700); }
.dt-clash .dt-rel-h { color: var(--color-accent-800); }
.dt-rel-row { display: flex; align-items: center; gap: 7px; margin-top: 5px;
  cursor: pointer; padding: 2px 4px; margin-left: -4px; margin-right: -4px; }
.dt-rel-row:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.dt-rel-row .dots { margin-top: 0; }
.dt-rel-act { font-family: var(--font-heading); font-size: 12.5px; font-weight: 600;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-rel-when { font-size: 11px; color: var(--color-neutral-700); }
.dt-clash .dt-rel-when { color: var(--color-accent-800); }
/* Per-row actions, pushed to the right of the row. Register is the quiet form
   until its intake is actually open; the × is a plain icon target. */
.dt-rel-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.dt-rel-go { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-neutral-700); text-decoration: none; white-space: nowrap;
  padding: 2px 5px; border: 1px solid var(--color-neutral-300); }
.dt-rel-go:hover { color: var(--color-accent); border-color: var(--color-accent); }
.dt-rel-go-on { color: var(--color-accent-800); background: var(--color-accent-200);
  border-color: var(--color-accent-200); }
.dt-rel-x { border: 1px solid var(--color-neutral-300); background: transparent; cursor: pointer;
  width: 20px; height: 20px; line-height: 1; font-size: 13px; color: var(--color-neutral-700);
  display: flex; align-items: center; justify-content: center; padding: 0; }
.dt-rel-x:hover { color: var(--color-accent); border-color: var(--color-accent);
  background: var(--color-accent-200); }
.dt-rel-note { margin-top: 6px; padding-top: 6px; font-size: 11px;
  border-top: 1px solid var(--color-neutral-300); color: var(--color-neutral-700); }
.dt-clash .dt-rel-note { border-top-color: var(--color-accent-300); color: var(--color-accent-900); }
.dt-code { margin-top: 5px; display: inline-block; padding: 2px 6px; font-size: 11px;
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100); }
.dt-kids-row { justify-content: flex-start; }
.dt-actions .kidpick { padding: 4px 7px; font-size: 11px; }
.dt-kids-note { padding: 0 11px 8px; font-size: 11px; color: var(--color-neutral-700); }
.dt-actions { padding: 8px 11px 10px; display: flex; align-items: center; gap: 8px; }
.dt-remove { padding: 6px 10px; border: 1px solid var(--color-divider);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
  font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; }
.dt-remove:hover { background: var(--color-accent-200); border-color: var(--color-accent); }
.dt-add { border-color: var(--color-accent); color: var(--color-accent-800); }
.dt-link { margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--color-accent-700); text-decoration: none; }
.dt-link:hover { color: var(--color-accent); }
.wk { cursor: pointer; }

/* ---------- narrow viewports ----------
   The design is a 336px column beside a calendar that wants 700px, so under
   ~1040px they stop fitting together. Below the breakpoint the two become
   tabs, one pane at a time, and the week grid is squeezed to the viewport
   rather than scrolled sideways — blocks already fall back to the short course
   name once their share of a column drops under 56px. */
@media (max-width: 900px) {
  #root { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  #tabs { display: flex; }
  #root[data-tab="events"] main { display: none; }
  #root[data-tab="week"] aside { display: none; }
  aside { border-right: 0; }

  #cal { min-width: 0; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); }
  .scroll { padding: 0 8px 20px; }
  .hour { right: 4px; font-size: 9px; }
  .cal-head { padding: 0 2px; font-size: 10px; }
  .cal-head span { padding: 1px 3px; }

  /* Touch targets, per the mobile artboard's 32px floor. */
  .seg, .seg-sm, .kid-body, .kid-pm, .kid-x, .only, .caret, #moretoggle { min-height: 32px; }
  .kid-pm, .kid-x { width: 32px; }
  .leg { padding: 9px 10px; }
  .cat-main { padding: 7px 7px; }
  .act-row .cat-main { padding: 6px 7px; }

  /* The week list drops its seven columns for two lines. */
  .wk { flex-wrap: wrap; gap: 3px 10px; padding: 8px; }
  .wk-act { flex: 1 0 100%; order: -1; }
  .wk-when { min-width: 0; }
  .wk-loc, .wk-km, .wk-who, .wk-kind { flex: 0 1 auto; width: auto; }
  .wk-x { margin-left: auto; }

  .week-bar { flex-wrap: wrap; gap: 8px 12px; }

  /* The detail becomes a bottom sheet, and the backdrop dims. */
  /* One pane at a time down here, so the sheet dims the whole viewport. */
  #detailbg { inset: 0; background: color-mix(in srgb, #201e1d 45%, transparent); }
  #detail { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
    max-height: 78vh; border-width: 2px 0 0; }
  .dt-actions { padding: 12px 11px 16px; }
  .dt-remove, .dt-link { min-height: 36px; display: flex; align-items: center; }
  /* Touch targets on the per-row actions, same 32px floor as the rest. */
  .dt-rel-go { min-height: 32px; display: flex; align-items: center; }
  .kidpick { min-height: 32px; padding: 4px 8px; }
  .dt-rel-x { width: 32px; height: 32px; font-size: 16px; }
  .app-head, .pane { padding-left: 12px; padding-right: 12px; }
  .events-head, .venue-head { padding-left: 12px; padding-right: 12px; }
}