/*
 * Caluminate — Schedule workbench.
 *
 * The Week grid becomes the place things are placed. Three channels carry the three
 * independent facts, and no two of them use the same one:
 *
 *   left rule  = whose hand      stone Google · gold Lilly · ash yours
 *   outline    = whether it is real   solid in Google · dashed a suggestion · terracotta needs an eye
 *   depth      = how movable     raised movable · sunken + hatch band protected
 *
 * Gold does three jobs and never twice in the same shape: a 4px rule is provenance,
 * a ring is the thing in hand, a fill is the one primary action on screen.
 *
 * Geometry is the shipped week grid's: 54px gutter, 56px day head, 6px column gaps,
 * 14px column radius, 8px card radius, 4px rule. Design: docs/week-workbench/.
 */
@import url("/assets/tokens.css");

/* ── header ─────────────────────────────────────────────────── */

.schedule-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-md); padding-bottom: var(--s-sm); border-bottom: 1px solid var(--c-hairline); flex: 0 0 auto; }
.schedule-head-left { display: flex; align-items: center; gap: var(--s-sm); min-width: 0; }
.schedule-title { min-width: 0; }
.schedule-title .schedule-eyebrow { display: block; color: var(--c-primary-ink); font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.schedule-title strong { display: block; color: var(--c-ink); font: var(--t-heading-2); letter-spacing: var(--ls-heading-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-meta { display: flex; align-items: center; gap: 7px; margin-top: var(--s-xxs); color: var(--c-ink-muted); font: var(--t-caption); }
.schedule-meta i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-favourable); }
.schedule-meta.is-attention i { background: var(--c-caution); }
.schedule-meta.is-offline i { background: var(--c-ink-faint); }
.schedule-head-actions { display: flex; align-items: center; gap: var(--s-xs); flex: 0 0 auto; }

.schedule-button {
  min-height: 44px; padding: 0 var(--s-md);
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--c-action-edge); border-radius: var(--r-sm);
  background: var(--c-action); color: var(--c-on-action);
  font: var(--t-button); letter-spacing: var(--ls-button); text-transform: uppercase;
  cursor: pointer;
}
.schedule-button:hover { background: var(--c-action-hover); }
.schedule-button.quiet { border-color: var(--c-hairline-strong); background: var(--c-canvas); color: var(--c-ink); }
.schedule-button[disabled], .schedule-button[aria-disabled="true"] { border-color: var(--c-hairline); background: var(--c-sunken); color: var(--c-ink-faint); cursor: not-allowed; }
.schedule-button:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }

.schedule-notice { display: grid; gap: var(--s-xs); margin-top: var(--s-sm); padding: var(--s-sm) var(--s-md); border: 1px solid var(--c-hairline); border-left: 3px solid var(--c-caution); border-radius: var(--r-md); background: var(--c-surface-tint); }
.schedule-notice.is-calm { border-left-color: var(--c-primary); }
.schedule-notice strong { color: var(--c-ink); font: var(--t-heading-3); }
.schedule-notice p { margin: 0; max-width: 68ch; color: var(--c-ink-body); font: var(--t-reading); }
.schedule-notice-actions { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: var(--s-xxs); }
.schedule-notice-manage { justify-self: start; margin-top: var(--s-xxs); padding: 0; border: 0; background: transparent; color: var(--c-primary-ink); font: var(--t-caption); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-hairline-strong); cursor: pointer; }

/* ── availability ground ────────────────────────────────────── */
/* Bands are computed once per day and never stack; "closed" means Lilly won't suggest
   here, not that the time is forbidden. */

.schedule-band { position: absolute; left: 0; right: 0; pointer-events: none; }
.schedule-band.is-closed { background: var(--c-sunken); opacity: .5; }
.schedule-band.is-if_needed { background: var(--c-sunken); opacity: .26; border-block-start: 1px dashed rgba(184, 144, 46, .42); }
.schedule-band-label { position: absolute; inset-inline-end: 6px; color: var(--c-ink-muted); font: var(--t-caption); font-size: 10px; pointer-events: none; }

/* ── calendar objects ───────────────────────────────────────── */

.schedule-object {
  position: absolute; min-height: 34px; padding: 5px 7px;
  border: 1px solid rgba(184, 135, 47, .14); border-radius: var(--r-sm);
  background: var(--c-marketing-ground);
  box-shadow: 0 6px 14px rgba(75, 52, 18, .06);
  overflow: hidden; cursor: pointer; text-align: start;
}
.schedule-object time { display: block; color: var(--c-primary-ink); font: 600 11px/1.25 var(--font-ui); font-variant-numeric: tabular-nums; }
.schedule-object strong { display: block; color: var(--c-ink); font: 600 12px/1.3 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-object small { display: block; color: var(--c-ink-muted); font: 400 11px/1.25 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* whose hand */
.schedule-object.hand-google { border-inline-start: 4px solid var(--c-hairline-strong); }
.schedule-object.hand-lilly  { border-inline-start: 4px solid var(--c-primary); }
.schedule-object.hand-you    { border-inline-start: 4px solid var(--c-ink-faint); }

/* whether it is real */
.schedule-object.outline-suggestion { border-style: dashed; border-inline-start-style: solid; background: var(--c-surface-tint); box-shadow: none; }
.schedule-object.outline-suggestion small { color: var(--c-primary-ink); }
.schedule-object.outline-attention { border-color: var(--c-caution); }
.schedule-object.outline-attention small { color: var(--c-caution-deep); }
.schedule-object.is-stale { border-style: dotted; opacity: .62; }
.schedule-object.is-inflight small { color: var(--c-primary-ink); }

/* how movable — the hatch runs beside the rule, never behind the text */
.schedule-object.move-never, .schedule-object.move-ask {
  padding-inline-start: 16px;
  background: var(--c-sunken); box-shadow: inset 0 1px 2px rgba(42, 30, 18, .06);
}
.schedule-object.move-ask { border-style: dashed; border-inline-start-style: dashed; }
.schedule-object.move-may { background: var(--c-sunken); box-shadow: none; border-inline-start-style: dotted; }
.schedule-object.rhythm-soft { background: var(--c-surface-tint); opacity: .78; }
.schedule-object.rhythm-ask-first { border-color: var(--c-primary); }
.schedule-hatch { position: absolute; inset-block: 0; inset-inline-start: 4px; width: 8px; background-image: repeating-linear-gradient(135deg, rgba(111, 102, 80, .22) 0 1px, rgba(111, 102, 80, 0) 1px 6px); pointer-events: none; }
.schedule-object.move-ask .schedule-hatch { background-image: repeating-linear-gradient(135deg, rgba(111, 102, 80, .12) 0 1px, rgba(111, 102, 80, 0) 1px 9px); }

/* marks */
.schedule-mark { position: absolute; inset-block-start: 5px; inset-inline-end: 6px; color: var(--c-primary); line-height: 0; }
/* Sage means done here exactly as it does everywhere else in the system, and the check
   replaces the star rather than joining it: one mark, one fact. */
.schedule-mark.is-done { color: var(--c-favourable-deep); }
/* A week you chose not to do is still your week, so a skipped session stays on the grid,
   muted and dotted rather than removed. A session that went past carries the caution edge
   and asks nothing on its own — the habit speaks for it. */
.schedule-object.instance-skipped { border-style: dotted; background: var(--c-sunken); color: var(--c-ink-faint); }
.schedule-object.instance-skipped strong, .schedule-object.instance-skipped time, .schedule-object.instance-skipped small { color: var(--c-ink-faint); }
.schedule-object.instance-missed { box-shadow: inset 3px 0 0 var(--c-caution); }
.schedule-object.instance-missed small { color: var(--c-caution-deep); }
.schedule-attention-dot { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-caution); }

/* the thing in hand — a ring, never a fill */
.schedule-object.in-hand { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; z-index: 9; }
.schedule-object:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; box-shadow: 0 0 0 5px var(--c-marketing-ground), 0 0 0 6px var(--c-primary-ink); z-index: 10; }

/* content tiers */
.schedule-object.tier-title small, .schedule-object.tier-time small, .schedule-object.tier-time strong { display: none; }
.schedule-object.tier-sliver { min-height: 0; padding: 0 4px; border-radius: var(--r-xs); display: flex; align-items: center; }
.schedule-object.tier-sliver strong, .schedule-object.tier-sliver small { display: none; }
.schedule-object.tier-sliver time { font-size: 10px; }

/* a ghost candidate — decorative, hidden from assistive tech */
.schedule-ghost { position: absolute; border: 1px dashed var(--c-hairline-strong); border-radius: var(--r-sm); background: rgba(245, 239, 216, .5); pointer-events: none; }
.schedule-ghost time { display: block; padding: 4px 6px; color: var(--c-ink-muted); font: 600 11px/1.25 var(--font-ui); }

/* +N more */
.schedule-more { position: absolute; min-height: 24px; display: grid; place-items: center; padding: 2px 6px; border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: var(--c-surface-tint); color: var(--c-primary-ink); font: 600 11px/1.15 var(--font-ui); text-align: center; cursor: pointer; }
.schedule-more:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }

/* ── holding strip ──────────────────────────────────────────── */

.schedule-holding { flex: 0 0 auto; border: 1px solid var(--c-hairline-strong); border-radius: var(--r-md); background: var(--c-surface-tint); overflow: hidden; box-shadow: 0 1px 2px rgba(42, 30, 18, .04), 0 6px 18px rgba(42, 30, 18, .05); }
/* One banner, above the strip, at most one at a time — and only for the two conditions
   that have no row anywhere. Gold rather than terracotta for the auto-move: nothing went
   wrong, the promise held, and something simply happened while the reader was away. */
.schedule-banner { display: flex; align-items: center; gap: var(--s-xs); padding: var(--s-xs) var(--s-sm); border-block-end: 1px solid var(--c-hairline); background: var(--c-primary-wash); flex-wrap: wrap; }
.schedule-banner > b { color: var(--c-primary-ink); font: var(--t-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.schedule-banner > span { flex: 1 1 240px; min-width: 0; color: var(--c-ink-body); font: var(--t-reading); }
.schedule-banner.is-sync_attention { background: var(--c-surface-tint); box-shadow: inset 3px 0 0 var(--c-caution); }
.schedule-banner-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.schedule-banner-action { min-height: 34px; padding: 0 11px; border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-primary-ink); font: var(--t-caption); font-family: var(--font-ui); cursor: pointer; }
/* Dismissing never resolves: the banner goes and the row stays where it is. */
.schedule-banner-dismiss { min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--c-ink-muted); font: var(--t-caption); font-family: var(--font-ui); cursor: pointer; }
.schedule-banner-action:hover, .schedule-banner-dismiss:hover { border-color: var(--c-primary); }
.schedule-banner-action:focus-visible, .schedule-banner-dismiss:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }
.schedule-strip { display: flex; align-items: center; gap: var(--s-xs); min-height: 52px; padding: 0 var(--s-sm); flex-wrap: wrap; }
.schedule-strip > b { color: var(--c-ink); font: var(--t-heading-3); font-family: var(--font-display); margin-inline-end: 2px; }
.schedule-strip-calm { color: var(--c-ink-muted); font: var(--t-reading); font-style: italic; }
.schedule-strip .schedule-spacer { flex: 1 1 auto; }

.schedule-tab {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 var(--s-sm);
  border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm);
  background: var(--c-canvas); color: var(--c-ink-body);
  font: var(--t-body-ui); cursor: pointer;
}
.schedule-tab i { color: var(--c-primary-ink); font-style: normal; font-weight: 600; }
.schedule-tab.is-lead { border-color: var(--c-caution); background: var(--c-marketing-ground); }
.schedule-tab.is-lead i { color: var(--c-caution-deep); }
.schedule-tab[aria-expanded="true"] { border-color: var(--c-action-edge); background: var(--c-primary-wash); color: var(--c-ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--c-primary); }
.schedule-tab:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }
.schedule-seeall { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 var(--s-xs); border: 0; background: transparent; color: var(--c-primary-ink); font: var(--t-caption); font-weight: 500; cursor: pointer; }
.schedule-seeall:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }

/* ── drawer — one bucket at a time ──────────────────────────── */

.schedule-drawer { border-block-start: 1px solid var(--c-hairline); padding: 13px var(--s-sm) var(--s-sm); background: var(--c-canvas); max-height: 260px; overflow: auto; }
.schedule-drawer-head { display: flex; align-items: baseline; gap: var(--s-xs); margin-block-end: var(--s-xs); }
.schedule-drawer-head span { color: var(--c-primary-ink); font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.schedule-drawer-head em { color: var(--c-ink-muted); font: var(--t-reading); }
.schedule-drawer-list { display: grid; gap: var(--s-xs); margin: 0; padding: 0; list-style: none; }

.schedule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-md); align-items: center; padding: 11px var(--s-sm); border: 1px solid var(--c-hairline); border-radius: var(--r-sm); background: var(--c-marketing-ground); }
.schedule-row.is-suggestion { border-style: dashed; border-color: var(--c-primary-ink); }
.schedule-row.is-attention { border-color: var(--c-caution); }
.schedule-row.in-hand { border-color: var(--c-primary); border-style: solid; box-shadow: inset 0 0 0 1px var(--c-primary); }
.schedule-row-body { min-width: 0; border: 0; background: transparent; padding: 0; text-align: start; cursor: pointer; }
.schedule-row-body:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }
.schedule-row strong { display: block; color: var(--c-ink); font: 600 15px/1.35 var(--font-ui); }
.schedule-row .schedule-when { display: block; margin-block-start: 2px; color: var(--c-ink-body); font: 500 14px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
.schedule-row .schedule-note { display: block; margin-block-start: 3px; color: var(--c-ink-muted); font: var(--t-caption); }
.schedule-row .schedule-flag { display: block; margin-block-start: 3px; color: var(--c-caution-deep); font: var(--t-caption); }
.schedule-row-actions { display: flex; flex-wrap: wrap; gap: 7px; flex: 0 0 auto; }
.schedule-action { min-height: 44px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid var(--c-hairline-strong); border-radius: var(--r-sm); background: var(--c-canvas); color: var(--c-primary-ink); font: 500 13px/1 var(--font-ui); cursor: pointer; }
.schedule-action:hover { border-color: var(--c-primary); }
.schedule-action:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }
.schedule-action.is-primary { border-color: var(--c-action-edge); background: var(--c-action); color: var(--c-on-action); font-weight: 600; }
.schedule-action.is-primary:hover { background: var(--c-action-hover); }
.schedule-action[disabled] { border-color: var(--c-hairline); background: var(--c-sunken); color: var(--c-ink-faint); cursor: not-allowed; }
.schedule-empty { padding: var(--s-sm); border: 1px dashed var(--c-hairline); border-radius: var(--r-sm); color: var(--c-ink-muted); font: var(--t-reading); font-style: italic; text-align: center; }

/* ── habits ─────────────────────────────────────────────────── */
/* The Habits tab is status rather than a loose end, so it is the one tab that can read
   calm. Sage names "done" here exactly as it does everywhere else in the system; it is
   never a control, and the tab still takes the same gold expanded treatment as the rest. */
.schedule-tab.is-status { border-color: var(--c-favourable); }
.schedule-tab.is-status i { color: var(--c-favourable-deep); }

/* A habit row is wider than a single object: rule, progress and its sessions stack under
   the title, with the row's own actions beside them. */
.schedule-habit-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.schedule-habit-row .schedule-row-body { grid-column: 1; }
.schedule-habit-sessions { grid-column: 1; display: grid; gap: 3px; margin: var(--s-xs) 0 0; padding: 0; list-style: none; }
.schedule-habit-session { display: flex; align-items: center; gap: var(--s-xs); padding: 5px 7px; border-radius: var(--r-sm); background: var(--c-canvas); }
.schedule-habit-session .schedule-session { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--s-xs); border: 0; background: transparent; padding: 0; text-align: start; cursor: pointer; }
.schedule-habit-session .schedule-session:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }
.schedule-habit-session b { color: var(--c-ink); font: 500 13px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.schedule-habit-session small { color: var(--c-ink-muted); font: var(--t-caption); }
/* A week you chose not to do is still your week: skipped stays visible, muted and dotted
   rather than removed. Missed carries the caution edge and asks nothing on its own. */
.schedule-habit-session.state-skipped { border: 1px dotted var(--c-hairline-strong); background: var(--c-sunken); }
.schedule-habit-session.state-skipped b, .schedule-habit-session.state-skipped small { color: var(--c-ink-faint); }
.schedule-habit-session.state-missed { box-shadow: inset 3px 0 0 var(--c-caution); }
.schedule-habit-session.state-missed small { color: var(--c-caution-deep); }
.schedule-habit-session.state-completed small { color: var(--c-favourable-deep); }
.schedule-habit-more { padding: 5px 7px; color: var(--c-ink-muted); font: var(--t-caption); }

/* Pips, never a bar: each one is a real session with a day and a status, where a bar or a
   percentage would be a number about a number. They are decorative — the sentence beside
   them carries the same fact for anyone who cannot see them. */
.schedule-habit-progress { display: flex; align-items: center; gap: var(--s-xs); margin-block-start: 4px; color: var(--c-ink-body); font: 500 13px/1.4 var(--font-ui); }
.schedule-pips { display: inline-flex; gap: 3px; font-style: normal; }
.schedule-pip { width: 9px; height: 9px; border-radius: var(--r-pill); border: 1px solid var(--c-hairline-strong); background: transparent; }
.schedule-pip.is-completed { border-color: var(--c-favourable-deep); background: var(--c-favourable); }
.schedule-pip.is-scheduled { border-color: var(--c-action-edge); background: var(--c-primary-wash); }
.schedule-pip.is-proposed { border-style: dashed; border-color: var(--c-primary-ink); }
.schedule-pip.is-skipped { border-style: dotted; background: var(--c-sunken); }
.schedule-pip.is-missed { border-color: var(--c-caution); background: var(--c-caution); }
.schedule-habit-row.is-complete .schedule-habit-progress { color: var(--c-favourable-deep); }

/* Three times for one habit are one row. Sessions sit under the title with their own
   secondary Add; the group's primary lives with the row's actions, so the screen still
   carries exactly one filled gold button. */
.schedule-group-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.schedule-group-row .schedule-row-body { grid-column: 1; }
.schedule-group-sessions { grid-column: 1; display: grid; gap: 3px; margin: var(--s-xs) 0 0; padding: 0; list-style: none; }
.schedule-group-session { display: flex; align-items: center; gap: var(--s-xs); padding: 5px 7px; border-radius: var(--r-sm); background: var(--c-canvas); }
.schedule-group-session .schedule-session { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: var(--s-xs); border: 0; background: transparent; padding: 0; text-align: start; cursor: pointer; }
.schedule-group-session .schedule-session:focus-visible { outline: 3px solid rgba(184, 146, 67, .72); outline-offset: 2px; }
.schedule-group-session b { color: var(--c-ink); font: 500 13px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; }
.schedule-group-session small { color: var(--c-ink-muted); font: var(--t-caption); }
.schedule-group-session .schedule-action { min-height: 34px; padding: 0 10px; }
.schedule-group-session.state-written_matched b { color: var(--c-primary-ink); }
/* The one look before three events land. It replaces the row rather than covering it, so
   nothing is written by a stray tap on something the reader cannot see. */
.schedule-group-row.is-confirming { border-color: var(--c-primary); background: var(--c-surface-tint); }

/* Falling short is the habit's business, not any one session's. */
.schedule-habit-attention .schedule-when { color: var(--c-ink-body); }

@media (prefers-contrast: more) {
  /* Fill alone is not a difference. Each pip state keeps a shape a reader can name. */
  .schedule-pip { border-width: 2px; }
  .schedule-habit-session.state-skipped { border-style: dashed; }
}

.schedule-announcer { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── narrow and short ───────────────────────────────────────── */
/* Seven columns hold to 1024. Below that the week becomes a scrolling day strip under a
   sticky day control, so nobody loses their place moving sideways. */

.schedule-daystrip { display: none; }

@media (max-width: 1023px) {
  .schedule-daystrip { display: flex; align-items: center; gap: var(--s-xxs); padding: 7px var(--s-sm); border: 1px solid var(--c-hairline); border-radius: var(--r-sm); background: var(--c-surface-tint); }
  .schedule-daystrip button { flex: 1 1 0; min-width: 0; min-height: 44px; display: grid; place-items: center; align-content: center; gap: 1px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--c-ink-body); font: 500 11px/1.15 var(--font-ui); cursor: pointer; }
  .schedule-daystrip button b { color: var(--c-ink); font: 600 15px/1.05 var(--font-ui); font-variant-numeric: tabular-nums; }
  .schedule-daystrip button[aria-current="true"] { background: var(--c-primary-wash); box-shadow: inset 0 -2px 0 var(--c-primary); }
  .schedule-daystrip button i { display: block; width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--c-caution); }
  .schedule-daystrip button i.is-clear { background: transparent; }
  .schedule-strip { min-height: 48px; }
  .schedule-row { grid-template-columns: minmax(0, 1fr); }
  .schedule-row-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* 390px of height cannot spare 210 for a bottom drawer. */
@media (max-height: 500px) and (min-width: 760px) {
  .schedule-holding { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
  .schedule-drawer { border-block-start: 0; border-inline-start: 1px solid var(--c-hairline); max-height: none; }
}

@media (prefers-contrast: more) {
  .schedule-hatch { display: none; }
  .schedule-object.move-never, .schedule-object.move-ask, .schedule-object.move-may { border-inline-start-color: var(--c-ink-muted); border-inline-start-style: solid; padding-inline-start: 7px; }
  .schedule-object.move-ask { border-style: dashed; }
  .schedule-band.is-closed { opacity: .25; }
  .schedule-band.is-if_needed { opacity: .12; }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-object, .schedule-drawer, .schedule-tab, .schedule-action { transition: none !important; animation: none !important; }
}