:root {
  color-scheme: light;
  --paper: #f7f5ef;
  --panel: #fffefa;
  --ink: #223930;
  --muted: #586961;
  --line: #dadfd6;
  --soft-line: #e9ebe3;
  --accent: #165b4a;
  --accent-hover: #0e493b;
  --accent-soft: #e2f0e7;
  --yes: #bce3cb;
  --yes-ink: #174f39;
  --no: #f2dcd1;
  --no-ink: #8c4835;
  --tentative: #f3dfa1;
  --tentative-ink: #68470d;
  --unknown: #eef0e9;
  --unknown-ink: #646e62;
  --focus: #177765;
  --radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}

[data-room-theme="standard"] {
  --room-theme-background: #f7f5ef;
  --room-list-text: #165b4a;
}

[data-room-theme="blue"] {
  --room-theme-background: #eaf2fa;
  --room-list-text: #184b79;
}

[data-room-theme="rose"] {
  --room-theme-background: #faedf1;
  --room-list-text: #873454;
}

[data-room-theme="green"] {
  --room-theme-background: #e8f3e5;
  --room-list-text: #326236;
}

[data-room-theme="yellow"] {
  --room-theme-background: #fcf3d7;
  --room-list-text: #725508;
}

[data-room-theme="purple"] {
  --room-theme-background: #f0eafb;
  --room-list-text: #64428b;
}

:root[data-room-theme] {
  --paper: var(--room-theme-background);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 300px;
  font-size: 14px;
  line-height: 1.6;
}

button, select, input { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:disabled { cursor: default; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
svg { vertical-align: middle; flex: none; }

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

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.topbar-inner, .shell {
  width: min(calc(100% - 72px), 1200px);
  margin-inline: auto;
}

.topbar-inner {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-name {
  margin-inline-end: auto;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .04em;
}

.login-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.avatar {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  background: color-mix(in srgb, var(--avatar-color, var(--accent)) 16%, white);
  color: var(--avatar-color, var(--accent));
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.shell { padding-block: 16px 24px; }

.trial-notice {
  padding: 8px 12px;
  border: 1px solid #b8cec0;
  border-radius: 8px;
  background: #edf5ef;
  font-size: 12px;
}

.trial-notice p { display: inline; margin-inline-start: 6px; }

.view-controls:has(> .trial-notice) {
  display: grid;
  gap: 11px 28px;
  margin-bottom: 19px;
}

.view-controls:has(> .trial-notice) > :is(.toolbar, .filter-row) { margin-bottom: 0; }

@media (min-width: 880px) {
  .view-controls:has(> .trial-notice) { grid-template-columns: max-content minmax(0, 1fr); }
  .view-controls > .trial-notice {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: center;
  }
}

.trial-embed-root { overflow: hidden; }
.trial-embed { min-width: 0; }
.trial-embed :is(.topbar-inner, .shell) { width: calc(100% - 24px); }
.trial-embed .trial-notice strong { display: none; }
.trial-embed .trial-notice p { margin-inline-start: 0; }

.trial-embed #help-dialog {
  inset-block: var(--trial-help-top, 12px) auto;
  max-height: var(--trial-help-height, calc(100% - 24px));
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
}

.eyebrow::before {
  width: 16px;
  height: 1px;
  background: currentColor;
  content: "";
}

.schedule-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
}

.schedule-topbar .topbar-inner { gap: 0; }

.schedule-brand,
.schedule-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-brand { min-width: 0; }
.schedule-brand .brand-name {
  display: flex;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.schedule-title-suffix { flex: none; }

.schedule-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-header-actions {
  flex: none;
  margin-inline-start: auto;
  padding-inline-start: 16px;
}

.tabs {
  display: flex;
  flex: none;
  align-self: flex-end;
  gap: 6px;
  margin-block-end: -1px;
  margin-inline-start: 24px;
}

.tab {
  --tab-color: var(--room-list-text, var(--accent));
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.tab svg { width: 18px; height: 18px; }
.tab:hover { color: var(--tab-color); }
.tab[aria-selected="true"] {
  border-color: var(--tab-color);
  background: var(--tab-color);
  color: #fff;
}
.tab:focus-visible { outline-offset: -4px; }
.tab[aria-selected="true"]:focus-visible { outline-color: currentColor; }

.trial-embed .schedule-topbar .topbar-inner {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-block: clamp(16px, 3vw, 26px);
}

.trial-example { display: none; }

.trial-embed .schedule-brand {
  position: relative;
  flex-direction: column;
  justify-content: center;
  max-inline-size: 100%;
  gap: 9px;
}

.trial-embed .trial-example {
  position: relative;
  display: block;
  padding: 5px 14px;
  border: 1px solid #b8cec0;
  border-radius: 14px;
  background: #edf5ef;
  color: var(--accent);
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 750;
  white-space: nowrap;
}

.trial-embed .trial-example::after {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-start: calc(50% - 4px);
  inline-size: 7px;
  block-size: 7px;
  border: solid #b8cec0;
  border-width: 0 1px 1px 0;
  background: inherit;
  content: "";
  transform: rotate(45deg);
}

@media (min-width: 720px) {
  .trial-embed .trial-example {
    position: absolute;
    inset-inline-end: calc(100% + 15px);
  }

  .trial-embed .trial-example::after {
    inset-block: calc(50% - 4px) auto;
    inset-inline: auto -4px;
    border-width: 1px 1px 0 0;
  }
}

.trial-embed .schedule-brand .brand-name { font-size: clamp(22px, 4.4vw, 34px); }
.trial-embed .schedule-header-actions { display: none; }

.trial-embed .schedule-topbar .tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 520px);
  gap: clamp(8px, 1.6vw, 14px);
  margin: 0;
}

.trial-embed .tab {
  min-height: clamp(52px, 7vw, 62px);
  padding: 8px clamp(5px, 1.4vw, 16px);
  border-radius: 10px;
  font-size: clamp(14px, 2.5vw, 18px);
}

@media (max-width: 400px) {
  .trial-embed .tab svg { display: none; }
}

@media (max-width: 345px) {
  .trial-embed .tab { padding-inline: 5px; font-size: 13px; }
}

@media (forced-colors: active) {
  .tab[aria-selected="true"] {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

.editor-permission, .editor-save-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e4b5ba;
  border-radius: 8px;
  background: #fff2f2;
  color: #9f2336;
  font-size: 13px;
  font-weight: 700;
}

.editor-save-error { margin-inline: 12px; }

#editor.is-read-only > :not(.editor-permission) { filter: grayscale(1); }
#editor.is-read-only :is(.time-cell, .mobile-time-cell):disabled { opacity: .85; }

.toolbar, .filter-row, .date-nav, .chips, .summary-settings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.toolbar {
  gap: 8px 10px;
  margin-bottom: 11px;
}

.toolbar > .toolbar-label { white-space: nowrap; }

.toolbar-label, .filter-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.date-nav {
  gap: 8px;
  flex: none;
  flex-wrap: nowrap;
}

.date-range {
  display: inline-grid;
  grid-template-columns: 5ch 2.2ch 5ch;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 750;
  white-space: nowrap;
}

.range-date { text-align: left; }
.range-date:first-child { text-align: right; }
.range-separator {
  color: var(--muted);
  font-size: .8em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.icon-button, .quiet-button, .chip, .action, .member-chip, .help-button, .help-close, .settings-button {
  border: 1px solid var(--line);
  background: var(--panel);
  font-weight: 650;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}

.icon-button:hover:not(:disabled), .quiet-button:hover, .chip:hover, .action:hover, .member-chip:hover,
.help-button:hover, .help-close:hover, .settings-button:hover {
  border-color: #a4b8aa;
  background: #e9efe6;
}

.icon-button {
  display: inline-grid;
  width: 33px;
  height: 33px;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
}

.help-button, .help-close, .settings-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}

.help-close {
  border-radius: 8px;
  font-size: 19px;
}

.settings-button svg { width: 18px; height: 18px; }

.room-schedule .schedule-header-actions { position: relative; }

.room-link-bubble {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  inline-size: min(22rem, calc(100vw - 26px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 3px 12px #183b2619;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

#room-link-feedback:empty {
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

#room-link-fallback {
  display: grid;
  gap: 8px;
}

#room-link-url { min-inline-size: 0; inline-size: 100%; }
#room-link-close { justify-self: end; }

.quiet-button {
  min-height: 33px;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
}

.quiet-button[aria-pressed="true"] {
  border-color: #83ae98;
  background: var(--accent-soft);
  color: var(--accent);
}

.filter-row {
  gap: 10px 14px;
  margin-bottom: 19px;
}

.chips { gap: 6px; }

.chip {
  min-width: 36px;
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.period-options {
  flex: none;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #eeefe7;
}

.period-chip {
  min-width: 54px;
  min-height: 27px;
  padding: 3px 7px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
}

:root[data-room-theme] .room-schedule {
  --filter-accent: var(--room-list-text);
  --filter-tint: var(--room-theme-background);
  --filter-line: color-mix(in srgb, var(--filter-accent) 23%, var(--filter-tint));
}

.room-schedule .period-options {
  border-color: var(--filter-line, var(--line));
  background: var(--filter-tint, #eeefe7);
}

.room-schedule :is(.period-chip, [data-weekday], .member-group-option)[aria-pressed="false"],
.room-schedule :is(.date-nav .icon-button, .today-button) {
  color: var(--filter-accent, var(--muted));
}

.room-schedule :is([data-weekday], .member-group-option)[aria-pressed="false"],
.room-schedule :is(.date-nav .icon-button, .today-button) {
  border-color: var(--filter-line, var(--line));
  background: color-mix(in srgb, var(--filter-tint, var(--panel)) 60%, var(--panel));
}

.room-schedule :is(.period-chip, [data-weekday], .member-group-option)[aria-pressed="false"]:hover,
.room-schedule :is(.date-nav .icon-button, .today-button):hover:not(:disabled) {
  border-color: var(--filter-line, #a4b8aa);
  background: color-mix(in srgb, var(--filter-accent, var(--accent)) 12%, var(--filter-tint, var(--panel)));
}

.room-schedule :is(.period-chip, [data-weekday], .member-group-option)[aria-pressed="true"],
.member-groups-dialog .settings-primary {
  border-color: var(--filter-accent, var(--accent));
  background: var(--filter-accent, var(--accent));
}

.member-groups-dialog .settings-primary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--filter-accent, var(--accent)) 87%, black);
  background: color-mix(in srgb, var(--filter-accent, var(--accent)) 87%, black);
}

.room-schedule :is(.period-chip, [data-weekday], .date-nav .icon-button, .today-button, .member-group-option, .member-groups-dialog .settings-primary):focus-visible {
  outline-color: var(--filter-accent, var(--focus));
}

@media (forced-colors: active) {
  .room-schedule :is(.period-chip, [data-weekday], .member-group-option)[aria-pressed="true"],
  .member-groups-dialog .settings-primary {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

.today-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.today-button svg { width: 14px; height: 14px; }
body:not(.room-schedule) .today-button:disabled:hover { border-color: var(--line); background: var(--panel); }

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 2px 5px #233f3210;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 15px 18px;
}

.panel-head h2 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.025em;
}

.panel-head p {
  color: var(--muted);
  font-size: 12px;
}

.date-list {
  display: grid;
  gap: 9px;
  padding: 0 12px 12px;
}

.date-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: #fafbf5;
}

.date-card:has(.date-select[aria-expanded="true"]) {
  border-color: #a5bdaf;
  background: #fffefa;
}

.date-card-head {
  display: flex;
  min-width: 0;
  min-height: 53px;
  align-items: center;
}

.date-select {
  display: flex;
  min-width: 0;
  min-height: 52px;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  text-align: left;
}

.date-select:hover { background: #e9eee5; }
.date-select:focus-visible { outline-offset: -3px; }

.day-date {
  inline-size: 5ch;
  flex: none;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.day-week, .date-status {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.day-week {
  padding: 0 5px;
  border-radius: 4px;
  background: #e9eee4;
  font-weight: 700;
}

.day-week.is-saturday,
.day-date:has(+ .day-week.is-saturday),
.heat-weekday.is-saturday,
.heat-day-number:has(+ .heat-weekday.is-saturday) { color: #1e4d86; }

.day-week.is-red-day,
.day-date:has(+ .day-week.is-red-day),
.heat-weekday.is-red-day,
.heat-day-number:has(+ .heat-weekday.is-red-day) { color: #942732; }

.day-week.is-saturday { background: #e2edf7; }
.day-week.is-red-day { background: #f7e5e4; }

.date-status { margin-left: 3px; }

.chevron {
  flex: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}

.day-preview {
  display: grid;
  width: min(35%, 210px);
  min-width: 0;
  flex: 0 1 auto;
  grid-template-columns: repeat(var(--slot-count, 30), minmax(1px, 1fr));
  gap: 1px;
  margin-left: auto;
}

.preview-slot { height: 9px; border-radius: 1px; }
.preview-slot.state-y { background: #68ae89; }
.preview-slot.state-n { background: #d39d85; }
.preview-slot.state-t { background: #c69b2e; }
.preview-slot.state-unknown { background: #e4e8de; }

.day-body {
  min-width: 0;
  padding: 12px;
  border-top: 1px solid var(--soft-line);
  background: #fffefa;
}

.day-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 11px;
}

.all-day-actions, .brush-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.brush-actions {
  justify-content: flex-end;
  margin-inline-start: auto;
}

.brush-actions .toolbar-label { margin-right: 2px; }

.action {
  min-height: 34px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 12px;
  white-space: nowrap;
}

.action-yes { border-color: #a8d2b8; background: var(--yes); color: var(--yes-ink); }
.action-no { border-color: #dfb8a9; background: var(--no); color: var(--no-ink); }
.action-yes:hover { border-color: #74ab88; background: #a8dabe; }
.action-no:hover { border-color: #ca9e88; background: #eecbbb; }
.action[data-brush][aria-pressed="true"] { border-color: #86988c; background: var(--unknown); color: var(--unknown-ink); }
.action[data-brush="y"][aria-pressed="true"] { border-color: #74ab88; background: var(--yes); color: var(--yes-ink); }
.action[data-brush="n"][aria-pressed="true"] { border-color: #ca9e88; background: var(--no); color: var(--no-ink); }
.action[data-brush="t"][aria-pressed="true"] { border-color: #b59443; background: var(--tentative); color: var(--tentative-ink); }

.time-scroll, .heat-scroll { overflow-x: auto; }

.timeline { min-width: calc(var(--slot-count, 30) * 17px); }

.hour-ticks, .time-grid {
  display: grid;
  grid-template-columns: repeat(var(--slot-count, 30), minmax(0, 1fr));
}

.hour-ticks {
  position: relative;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.hour-ticks > * { grid-column: span 2; white-space: nowrap; }

.time-grid {
  overflow: hidden;
  border: 1px solid #d8ded3;
  border-radius: 7px;
  user-select: none;
}

.time-cell {
  display: grid;
  min-width: 0;
  min-height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--unknown-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.time-cell + .time-cell { border-inline-start: 1px solid #334b3f26; }
.time-cell:nth-child(odd):not(:first-child) { border-inline-start-color: #334b3f50; }
.time-cell.state-unknown { background: #f9faf4; }
.time-cell.state-y { background: var(--yes); color: var(--yes-ink); }
.time-cell.state-n { background: var(--no); color: var(--no-ink); }
.time-cell.state-t { background: var(--tentative); color: var(--tentative-ink); }
.time-cell:hover { box-shadow: inset 0 0 0 1px var(--focus); }
.time-cell:focus-visible { outline-offset: -2px; }

.mobile-timeline { display: none; }

.mobile-instruction {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.mobile-time-scroll {
  max-height: 340px;
  max-height: clamp(176px, 47dvh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.mobile-time-grid {
  display: grid;
  grid-auto-rows: 44px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-time-cell {
  display: grid;
  width: 100%;
  height: 44px;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: #f9faf4;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: left;
}

.mobile-time-cell + .mobile-time-cell { border-block-start: 1px solid #334b3f25; }
.mobile-time-cell:nth-child(odd):not(:first-child) { border-block-start-color: #334b3f4d; }
.mobile-time-cell:focus-visible { outline-offset: -2px; }
.mobile-time-cell.state-y { background: var(--yes); color: var(--yes-ink); }
.mobile-time-cell.state-n { background: var(--no); color: var(--no-ink); }
.mobile-time-cell.state-t { background: var(--tentative); color: var(--tentative-ink); }
.mobile-time-cell.state-unknown .mobile-time-state { color: var(--unknown-ink); }

.mobile-time-label { grid-column: 1; grid-row: 1; }
.mobile-time-state { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: 750; }

.mobile-time-cell.mobile-preview { background: var(--accent); color: white; }
.mobile-time-cell.mobile-preview + .mobile-time-cell.mobile-preview { border-block-start-color: #fff3; }
.mobile-time-cell.mobile-preview .mobile-time-state { visibility: hidden; }
.mobile-time-cell.mobile-preview::after {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 750;
  content: attr(data-mobile-preview);
}

.mobile-drag-feedback {
  min-height: 1.6em;
  margin-top: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.help-dialog, .settings-dialog {
  width: min(420px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  padding: 19px 21px 21px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 16px 60px #233f3233;
}

.help-dialog::backdrop, .settings-dialog::backdrop { background: #1d362b66; }

.help-dialog-head, .settings-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.help-dialog-head h2, .settings-dialog-head h2 { font-size: 18px; }

.settings-dialog { width: min(485px, calc(100% - 28px)); }
.settings-confirm-dialog { width: min(395px, calc(100% - 28px)); }
.settings-confirm-dialog .settings-description { overflow-wrap: anywhere; }

.settings-form {
  display: grid;
  gap: 10px;
}

.settings-field {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.settings-field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}

.settings-field input:disabled { background: #eef1e8; color: var(--muted); }

.settings-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.settings-primary {
  min-height: 40px;
  padding-inline: 15px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.settings-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

.settings-confirm-actions { justify-content: flex-end; margin-top: 14px; }
.settings-confirm-actions > button { min-height: 44px; }

.settings-danger {
  padding-inline: 15px;
  border-color: #942732;
  background: #942732;
  color: #fff;
}

.settings-danger:hover { border-color: #77222b; background: #77222b; }

.settings-description, .settings-feedback {
  color: var(--muted);
  font-size: 12px;
}

.settings-description { margin: 8px 0 12px; }
.settings-feedback { margin-top: 8px; color: var(--accent); }
.settings-feedback:empty { margin-top: 0; }
.settings-feedback[data-tone="error"] { color: #942732; }

.settings-roster {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--soft-line);
}

.settings-section-title {
  margin-bottom: 7px;
  font-size: 14px;
}

.settings-list-heading { margin-top: 17px; }

.settings-account-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-account-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background: #f6f8f1;
}

.settings-account-details {
  display: grid;
  min-width: 0;
  gap: 1px;
  overflow-wrap: anywhere;
}

.settings-account-email, .settings-account-role { color: var(--muted); font-size: 11px; }

.settings-account-role {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--soft-line);
  border-radius: 5px;
  background: var(--panel);
  font-weight: 650;
}

.settings-account-list .settings-remove {
  flex: none;
  border-color: #e2c5c4;
  color: #942732;
}

.settings-remove:hover {
  border-color: #cfa4a3;
  background: #f7e5e4;
}

.guide-steps {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
}

.guide-steps li + li { margin-top: 6px; }
.guide-steps li::marker { color: var(--accent); font-weight: 750; }

.legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  color: var(--muted);
  font-size: 11px;
}

.help-dialog .legend {
  padding-top: 12px;
  border-top: 1px solid var(--soft-line);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.swatch {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--unknown);
  color: var(--unknown-ink);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.swatch.state-y, .swatch.yes { background: var(--yes); color: var(--yes-ink); }
.swatch.state-n, .swatch.no { background: var(--no); color: var(--no-ink); }
.swatch.state-t { background: var(--tentative); color: var(--tentative-ink); }
.swatch.level-2 { background: #c4e0ce; }
.swatch.is-all { border-color: var(--accent); background: var(--accent); }
.swatch.has-unknown {
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, #36584822 3px 4px, transparent 4px 7px);
}

.editor-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

#editor-identity {
  min-width: 0;
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.editor-identity-label {
  display: flex;
  min-width: 0;
  align-items: baseline;
  white-space: nowrap;
}

.editor-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
}

.is-development-editor .editor-tools {
  justify-content: flex-end;
  margin-inline-start: auto;
}

.is-development-editor .editor-tools .brush-actions {
  margin-inline-start: 0;
}

.is-development-editor .editor-date-scroll {
  max-height: min(64vh, 640px);
  max-height: clamp(184px, 64dvh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  grid-auto-rows: max-content;
}

.is-development-editor .date-card-head > .all-day-actions {
  flex: none;
  flex-wrap: nowrap;
  margin-inline-end: 10px;
}

.is-development-editor .date-card-head .date-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.save-state, .panel-head .save-state {
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
}

.member-panel, .summary-panel { margin-bottom: 15px; }
.member-panel { padding-bottom: 15px; }

.member-panel-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.member-group-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 4px 8px;
}

.member-group-control:has(> button[hidden]) { display: none; }

.member-groups-dialog { width: min(540px, calc(100% - 28px)); }

.member-group-total {
  color: var(--filter-accent, var(--accent));
  font-weight: 650;
  white-space: nowrap;
}

.member-group-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(6px, 2vw, 12px);
  block-size: clamp(64px, min(43dvh, calc(100dvh - 176px)), 300px);
}

.member-group-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border: 1px solid var(--filter-line, var(--line));
  border-radius: 8px;
}

.member-group-panel-head {
  display: flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: clamp(5px, 1.6vw, 10px);
  border-bottom: 1px solid var(--filter-line, var(--line));
  background: var(--filter-tint, var(--paper));
  border-radius: 7px 7px 0 0;
  font-size: 12px;
}

.member-group-scroll {
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 6px;
}

.member-group-scroll:focus-visible { outline-offset: -2px; }
.member-group-scroll .settings-description { margin: 2px; }

.member-group-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.member-group-option {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  text-align: start;
}

.member-group-option small {
  flex: none;
  font-size: .85em;
  white-space: nowrap;
}

.member-groups-applied, .member-group-preview {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  min-width: 0;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-groups-applied li, .member-group-preview li {
  min-inline-size: 0;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--filter-line, var(--line));
  border-radius: 6px;
  background: var(--filter-tint, var(--paper));
  color: var(--filter-accent, var(--accent));
  font-size: 11px;
  font-weight: 650;
}

.member-picker, .summary-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.member-picker, .summary-settings, .member-picker-search-field, .member-picker-empty {
  padding-inline: 18px;
}

.member-picker-search-field { margin-block-end: 4px; }

.member-picker-search-field input {
  inline-size: min(100%, 16rem);
  min-block-size: 38px;
  padding: 4px 10px;
  border: 1px solid var(--filter-line, var(--line));
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 16px;
}

.member-picker-search-field input::placeholder { color: var(--muted); }
.member-picker-empty { color: var(--muted); font-size: 13px; }

.member-picker {
  --member-row-height: 38px;
  --member-row-gap: 7px;
  --member-picker-padding: 5px;
  margin-bottom: 12px;
  align-content: flex-start;
  row-gap: var(--member-row-gap);
  /* Show three rows, the gaps between them, and half of the fourth row. */
  max-block-size: calc(var(--member-picker-padding) + 3.5 * var(--member-row-height) + 3 * var(--member-row-gap));
  padding-block: var(--member-picker-padding);
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-padding-block: var(--member-picker-padding);
}

.member-picker:focus-visible { outline-offset: -2px; }

.member-chip {
  display: inline-flex;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-height: var(--member-row-height, 38px);
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: start;
  overflow-wrap: anywhere;
}

.trial-schedule .member-chip {
  justify-content: center;
  padding-inline: 7px;
  text-align: center;
}

.member-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-chip[aria-pressed="true"] {
  border-color: #83ae98;
  background: var(--accent-soft);
  color: var(--yes-ink);
}

.member-chip[aria-pressed="true"]:hover { background: #d3eadd; }
.member-chip[aria-pressed="false"] .avatar { filter: saturate(.45); }

:root[data-room-theme] .room-schedule .member-chip {
  padding-inline: 10px;
  border-color: var(--filter-line);
  color: var(--filter-accent);
}

:root[data-room-theme] .room-schedule .member-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--filter-accent) 55%, var(--panel));
  background: color-mix(in srgb, var(--filter-accent) 15%, var(--panel));
}

:root[data-room-theme] .room-schedule .member-chip:hover {
  background: color-mix(in srgb, var(--filter-accent) 8%, var(--panel));
}

:root[data-room-theme] .room-schedule .member-chip[aria-pressed="true"]:hover {
  background: color-mix(in srgb, var(--filter-accent) 22%, var(--panel));
}

:root[data-room-theme] .room-schedule .member-chip:focus-visible {
  outline-color: var(--filter-accent);
}

@media (forced-colors: active) {
  :root[data-room-theme] .room-schedule .member-chip[aria-pressed="true"] {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

.summary-settings {
  gap: 8px 16px;
  color: var(--muted);
  font-size: 12px;
}

.panel-head .summary-settings { padding-inline: 0; }

.summary-panel > .panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 8px;
}

#heatmap-hours {
  display: inline-block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.heat-day-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.heat-day-hint {
  margin-inline-end: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.heat-day-actions .quiet-button { white-space: nowrap; }
.summary-panel { padding-bottom: 8px; }
.summary-panel .heat-legend { grid-column: 1 / -1; }

.heat-frame {
  --guide-bottom-space: 30px;
  position: relative;
  isolation: isolate;
}

.heat-frame:has(.heatmap) { padding-block-end: var(--guide-bottom-space); }

.heat-scroll {
  max-height: min(64vh, 640px);
  max-height: clamp(184px, 64dvh, 640px);
  overflow: auto;
  margin-inline: 12px;
}

.heat-scroll:has(.is-virtual) { overflow-anchor: none; }

.trial-embed .heat-scroll,
.trial-embed .is-development-editor .editor-date-scroll { max-height: 560px; }
.trial-embed .is-development-editor .mobile-time-scroll { max-height: 320px; }

.heat-guide {
  position: absolute;
  z-index: 4;
  inset-block: 0 var(--guide-bottom-space);
  left: var(--guide-x);
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to right, var(--ink) 50%, #fffefa 50%);
  pointer-events: none;
}

.heat-guide-time {
  position: absolute;
  top: calc(var(--guide-y) + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.heatmap {
  --heat-date-width: 86px;
  --heat-row-gap: 1px;
  --heat-person-row-height: 26px;
  --heat-group-border: #b6c1b4;
  --heat-group-divider: #d1d9ce;
  width: 100%;
  min-width: calc(var(--heat-date-width) + 4px + var(--slot-count, 30) * 16px);
  table-layout: fixed;
  border-spacing: 0 var(--heat-row-gap);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.heatmap th { font-weight: 650; }
.heatmap :is(thead, tfoot) th {
  position: sticky;
  z-index: 2;
  height: 25px;
  background: var(--panel);
  white-space: nowrap;
}

.heatmap thead th { top: 0; }
.heatmap tfoot th { bottom: 0; }

.heatmap :is(thead, tfoot) .heat-hour {
  padding-inline: 4px 1px;
  border-block: 1px solid var(--heat-group-border);
  border-inline-start: 1px solid var(--heat-group-border);
  background: #f3f6ef;
  text-align: left;
}

.heatmap :is(thead, tfoot) .heat-hour:last-child {
  border-inline-end: 1px solid var(--heat-group-border);
  border-radius: 0 6px 6px 0;
}

.heatmap tfoot .heat-hour:nth-child(2) { border-radius: 6px 0 0 6px; }
.heatmap th:first-child, .heat-date { width: var(--heat-date-width); }

.heatmap tbody + tbody::before {
  display: table-row;
  height: 3px;
  content: "";
}

.heat-date {
  position: sticky;
  z-index: 1;
  left: 0;
  padding: 0 6px;
  border-inline-end: 7px solid var(--panel);
  border-radius: 4px;
  background: #f0e5d1;
  color: #543b24;
  white-space: nowrap;
}

.heatmap :is(thead, tfoot) .heat-date {
  z-index: 3;
  border: 1px solid var(--heat-group-border);
  border-inline-end: 0;
  border-radius: 0;
}

.heatmap thead .heat-date {
  background: #f0e5d1;
  border-radius: 6px 0 0 6px;
}

.heatmap tfoot .heat-date { border: 0; }

.heatmap tbody .heat-date {
  padding-inline: 5px;
  border: 1px solid var(--heat-group-border);
  border-radius: 0;
}

.heatmap tbody tr:not(:last-child, :has(+ .heat-person-spacer[hidden]:last-child)) .heat-date { border-block-end: 0; }
.heatmap tbody tr:first-child .heat-date { border-radius: 6px 0 0 0; }
.heatmap tbody tr:is(:last-child, :has(+ .heat-person-spacer[hidden]:last-child)) .heat-date { border-radius: 0 0 0 6px; }
.heatmap tbody tr:only-child .heat-date { border-radius: 6px 0 0 6px; }
.heat-date:has(.heat-day-toggle[aria-expanded="true"]) { background: #e7d2ae; }

.heat-day-row { cursor: pointer; }

.heat-day-toggle {
  display: inline-flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 750;
  white-space: nowrap;
}

.heat-day-row:hover .heat-day-toggle { background: #ebdbbf; }
.heat-day-row:hover .heat-day-toggle[aria-expanded="true"] { background: #dfc499; }
.heat-day-toggle:focus-visible { outline-offset: -2px; }

.heat-day-label {
  display: inline-grid;
  grid-template-columns: 5ch auto;
  align-items: baseline;
  text-align: left;
}

.heatmap tbody .heat-person-name {
  border-block-start: 0;
  background: #f2f5ef;
  color: #38544b;
  text-align: left;
}

.heat-person-name::before {
  position: absolute;
  inset-block-start: calc(-1 * var(--heat-row-gap));
  inset-inline: -1px;
  block-size: var(--heat-row-gap);
  border-inline: 1px solid var(--heat-group-border);
  border-block-end: 1px solid var(--heat-group-divider);
  background: inherit;
  content: "";
}

.heat-person-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heat-slot {
  position: relative;
  height: 34px;
  padding: 0;
  border: 0;
  background: var(--unknown);
  color: var(--muted);
  font-weight: 700;
  line-height: 1;
}

.heat-slot + .heat-slot { border-inline-start: 1px solid var(--slot-rule, #334b3f26); }
.heat-slot:nth-of-type(odd):not(:first-of-type) { border-inline-start-color: var(--hour-rule, #334b3f50); }
.heat-slot:last-of-type { border-radius: 0 5px 5px 0; }

.heat-slot button {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.heat-slot button:hover { box-shadow: inset 0 0 0 1px currentColor; }
.heat-slot.level-0 { background: #eef0e9; }
.heat-slot.level-1 { background: #deede0; color: #2d5b47; }
.heat-slot.level-2 { background: #c4e0ce; color: #224c38; }
.heat-slot.level-3 { background: #a7d2b8; color: #173e2d; }
.heat-slot.level-4 { background: #89c6a6; color: #153c2d; }
.heat-slot.is-all {
  --slot-rule: #fff2;
  --hour-rule: #fff4;
  background: var(--accent);
  color: white;
}

.heat-slot.has-unknown {
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, #36584822 3px 4px, transparent 4px 7px);
}

.heat-person-slot { height: var(--heat-person-row-height); }
.heat-person-spacer td {
  height: calc(var(--heat-spacer-rows) * (var(--heat-person-row-height) + var(--heat-row-gap)) - var(--heat-row-gap));
  padding: 0;
  border: 0;
}
.heat-person-slot.state-y { background: #9dcfaf; color: var(--yes-ink); }
.heat-person-slot.state-n { background: #e9c4b4; color: #813e2d; }
.heat-person-slot.state-t { background: #e8c87e; color: var(--tentative-ink); }
.heat-person-slot.state-unknown { background: #f5f6ef; color: var(--unknown-ink); }

.empty {
  padding: 15px;
  border-radius: 8px;
  background: #f3f4ed;
  color: var(--muted);
  font-size: 12px;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding-top: 18px;
  color: var(--muted);
  font-size: 11px;
}

.footer span + span::before { margin-right: 10px; content: "·"; }

@media (max-width: 920px) {
  .topbar-inner, .shell { width: calc(100% - 40px); }
}

@media (max-width: 700px) {
  .schedule-topbar .topbar-inner {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block-start: 8px;
  }
  .schedule-brand { flex: 1 1 0; }
  .schedule-header-actions { gap: 6px; padding-inline-start: 8px; }
  .schedule-topbar.has-two-sign-ins .schedule-header-actions { flex: 1 0 100%; justify-content: flex-end; }
  .schedule-topbar .tabs {
    order: 1;
    flex-basis: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 600px), (pointer: coarse) {
  .topbar-inner, .shell { width: calc(100% - 26px); }
  .topbar-inner { min-height: 58px; gap: 7px; }
  .help-button, .help-close, .settings-button { width: 38px; height: 38px; }
  .settings-dialog { padding-inline: 14px; }
  .settings-dialog .quiet-button, .settings-primary { min-height: 44px; }
  .brand-name { font-size: 14px; letter-spacing: 0; }
  .shell { padding-top: 12px; }
  .tab { gap: 5px; padding-inline: 8px; font-size: 13px; }
  .toolbar { gap: 6px; }
  .date-nav { gap: 5px; }
  .date-range { font-size: 13px; }
  .icon-button, .quiet-button, .chip { min-height: 38px; }
  .filter-row { gap: 5px 8px; }
  .chips { gap: 4px; }
  .chip { min-width: 31px; padding-inline: 6px; }
  .period-chip { min-width: 50px; min-height: 32px; }
  .panel-head { padding: 12px; }
  .date-list { padding-inline: 8px; }
  .heat-scroll { margin-inline: 8px; }
  .heat-scroll { max-height: min(57vh, 550px); max-height: clamp(176px, 57dvh, 550px); }
  .trial-embed .heat-scroll { max-height: 420px; }
  .trial-embed .is-development-editor .editor-date-scroll { max-height: 460px; }
  .date-select { padding-inline: 8px; }
  .day-date { font-size: 15px; }
  .date-status { overflow: hidden; text-overflow: ellipsis; }
  .day-body { padding: 8px; }
  .day-preview {
    width: min(22%, 90px);
    grid-template-columns: repeat(var(--slot-count, 30), minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: 3px;
  }
  .preview-slot { border-radius: 0; }
  .day-actions { display: grid; gap: 9px; }
  .all-day-actions, .brush-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-inline-start: 0;
  }
  .brush-actions .toolbar-label { grid-column: 1 / -1; margin: 0; }
  .day-actions .action { min-height: 44px; padding-inline: 5px; }
  .day-body > .time-scroll { display: none; }
  .mobile-timeline { display: block; }
  .is-development-editor .date-panel > .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
  }
  .is-development-editor .editor-tools { display: contents; }
  .is-development-editor .editor-tools .save-state { grid-area: 1 / 2; justify-self: end; }
  .is-development-editor .editor-tools .brush-actions {
    grid-area: 2 / 1 / auto / -1;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }
  .is-development-editor .editor-tools .brush-actions .toolbar-label { grid-column: auto; white-space: nowrap; }
  .is-development-editor .editor-date-scroll {
    max-height: min(66vh, 560px);
    max-height: clamp(260px, 66dvh, 560px);
  }
  .is-development-editor .date-card-head { flex-wrap: wrap; }
  .is-development-editor .date-card-head > .date-select { flex: 2 1 190px; }
  .is-development-editor .date-card-head > .all-day-actions {
    flex: 1 1 185px;
    margin-inline-end: 0;
    padding: 4px 7px;
  }
  .is-development-editor .editor-tools .action,
  .is-development-editor .date-card-head .action { min-height: 44px; padding-inline: 4px; }
  .is-development-editor .mobile-time-scroll {
    max-height: min(40vh, 320px);
    max-height: clamp(144px, 40dvh, 320px);
  }
  .heatmap { min-width: calc(var(--heat-date-width) + 4px + var(--slot-count, 30) * 22px); }
  .member-picker, .summary-settings, .member-picker-search-field, .member-picker-empty { padding-inline: 12px; }
  .member-picker-search-field input { min-block-size: 44px; }
}

@media (max-width: 340px) {
  .is-development-editor .editor-tools .brush-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .is-development-editor .editor-tools .brush-actions .toolbar-label { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .summary-panel > .panel-head { grid-template-columns: minmax(0, 1fr); }
  .heat-day-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}

.room-schedule #room-schedule-notice { margin-bottom: 12px; }
.room-schedule #room-schedule-recovery { margin-inline-start: 0.5em; }
.room-schedule #room-schedule-settings { text-decoration: none; }
.room-schedule #room-switcher { flex: none; }
.room-schedule .editor-time-note { display: none; }

.room-schedule .editor-date-scroll { scrollbar-gutter: stable; }

.room-all-day-actions {
  --all-day-button-size: 32px;
  display: inline-grid;
  grid-template-columns: 34px repeat(3, var(--all-day-button-size));
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.room-all-day-label {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.room-all-day-actions > .action {
  display: grid;
  min-height: var(--all-day-button-size);
  place-items: center;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--line);
  border-radius: 0;
  font-size: 15px;
  line-height: 1;
}

.room-all-day-actions > .action:last-child { border-radius: 0 7px 7px 0; }
.room-all-day-actions > .action:focus-visible { outline-offset: -3px; }
.room-all-day-actions svg { width: 15px; height: 15px; }

@media (max-width: 600px), (pointer: coarse) {
  .room-schedule .date-card-head > .date-select { flex: 1 1 140px; }
  .room-schedule .date-card-head > .room-all-day-actions {
    --all-day-button-size: 44px;
    flex: none;
    margin: 4px 7px 4px auto;
    padding: 0;
  }
  .room-schedule .date-card-head .room-all-day-actions > .action { padding: 0; }
}

.room-schedule .date-list {
  --inline-slot-min: 22px;
  /* Date and actions columns, two gaps, card padding, and card and time-grid borders. */
  --inline-row-overhead: 272px;
}

.date-list.is-inline-hours .date-card-head {
  --inline-ticks-height: 16px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 132px;
  gap: 12px;
  padding: 6px 12px;
}

.date-list.is-inline-hours .date-select {
  min-height: 0;
  margin-block-start: var(--inline-ticks-height);
  padding: 0;
  background: transparent;
}

.date-list.is-inline-hours .date-card-head > .all-day-actions {
  justify-content: flex-end;
  margin: var(--inline-ticks-height) 0 0;
  padding: 0;
}

.inline-day-timeline.timeline { min-width: 0; }

.inline-day-timeline .hour-ticks {
  min-block-size: var(--inline-ticks-height);
  margin: 0 1px;
}

.inline-day-timeline .inline-partial-hour { font-size: 9px; }
.inline-day-timeline .time-cell { min-height: 32px; }

.room-menu-icon {
  width: 15px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 -5px, 0 5px;
}

@media (max-width: 600px), (pointer: coarse) {
  .room-schedule #room-switcher { width: 44px; height: 44px; }
}
.room-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.room-list-row {
  --room-row-color: var(--room-list-text, var(--accent));
  --room-row-background: var(--room-theme-background, var(--paper));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--room-row-background);
  background: color-mix(in srgb, var(--room-row-background) 76%, var(--panel));
  color: var(--room-row-color);
  font-weight: 650;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.room-list-row:hover {
  background: var(--room-row-background);
  background: color-mix(in srgb, var(--room-row-background) 88%, var(--room-row-color) 12%);
}

.room-list-row[aria-current="page"] {
  border-color: var(--room-row-color);
}

.room-create-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
}

.room-create-link:hover { color: var(--accent-hover); }
.room-create-link > span { font-size: 18px; line-height: 1; }

@media (forced-colors: active) {
  .room-list-row[aria-current="page"] { border-color: Highlight; }
}

.room-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px, 90vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) 20px 20px;
  border: 0;
  border-inline-end: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}
.room-drawer[open] { animation: room-slide-in 200ms ease-out; }
.room-drawer::backdrop { background: #1d362b66; }
.room-drawer .room-create-link { margin-block-start: 8px; }
#room-switch-signout { margin-block-start: 12px; }
#room-switch-status:empty { display: none; }
@keyframes room-slide-in { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .room-drawer[open] { animation: none; } }

.room-settings-popup[open] {
  display: flex;
  flex-direction: column;
  width: min(650px, calc(100% - 28px));
  height: min(680px, calc(100dvh - 28px));
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}
.room-settings-popup > .settings-dialog-head {
  flex: none;
  margin: 0;
  padding: 12px clamp(12px, 4vw, 21px);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
#room-settings-frame { flex: 1; width: 100%; min-height: 0; border: 0; }
.room-invite-controls {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.room-invite-controls:disabled { opacity: .58; }
.room-invite-actions button { min-height: 44px; }
.room-invite-controls:disabled button { opacity: 1; }
.room-invite-actions [data-invite-copy] { display: inline-grid; place-items: center; }
[data-invite-copy] > span { grid-area: 1 / 1; white-space: nowrap; }
.room-invite-copy-measure { visibility: hidden; }
.room-invite-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.room-invite-heading h2 { flex: none; }
.room-invite-heading .room-invite-feedback { text-align: end; }
.room-invite-meta, .room-invite-rejoin, .room-invite-preview, .room-invite-feedback-slot { flex-basis: 100%; }
.room-invite-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#room-invite .room-invite-meta { min-block-size: 44px; }
.room-invite-expiry, .room-invite-rejoin { color: var(--muted); font-size: 13px; }
.room-invite-issue { flex: none; min-inline-size: 5em; }
.room-invite-preview, .room-invite-fallback {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.room-invite-preview { font-size: 16px; overflow-wrap: anywhere; }
.room-invite-feedback-slot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  font-size: 12px;
  line-height: 1.4;
}
.room-invite-feedback-slot:not(:has(> [data-invite-fallback]:not([hidden]), > [data-invite-status]:not(:empty))) {
  display: none;
}
.room-invite-fallback { flex: none; padding: 0 5px; }
.room-invite-feedback { margin: 0; overflow-wrap: anywhere; }