@font-face {
  font-family: Golos;
  src: url('/golos.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #fff;
  --surface: #f6f6f6;
  --raised: #ebebeb;
  --text: #000;
  --muted: #747474;
  --primary: #000;
  --on-primary: #fff;
  --success: #31c06a;
  --error: #fa1c2f;
  --error-text: #be1624;
  --brand-accent: #147f45;
  --safe-top: max(var(--app-safe-top, 0px), env(safe-area-inset-top, 0px));
  --safe-bottom: max(var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --safe-left: max(var(--app-safe-left, 0px), env(safe-area-inset-left, 0px));
  --safe-right: max(var(--app-safe-right, 0px), env(safe-area-inset-right, 0px));
  --tab-bar-height: 60px;
  --gutter: 20px;
  --panel-radius: 16px;
  --control-radius: 12px;
  font: 16px/1.45 Golos, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--page);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111;
  --surface: #242424;
  --raised: #373737;
  --text: #fff;
  --muted: #c5c5c5;
  --primary: #feffff;
  --on-primary: #111;
  --error-text: #ff8490;
  --brand-accent: #31c06a;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button,input,select,textarea { font: inherit; color: inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
button,select { cursor: pointer; }
button:disabled,select[aria-disabled="true"] { opacity: .52; cursor: wait; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
svg { width: 20px; height: 20px; flex: none; }
h1,h2,h3,p { margin: 0; }
h1 { font-size: clamp(28px, 5vw, 36px); line-height: 1.15; font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1000px;
  margin-inline: auto;
  padding: calc(4px + var(--safe-top)) max(var(--gutter), var(--safe-right)) 4px max(var(--gutter), var(--safe-left));
  border-bottom: 1px solid var(--raised);
}
.brand { color: inherit; display: flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; font-weight: 650; }
.brand-accent { color: var(--brand-accent); }
.header-account { display: flex; align-items: center; gap: 4px; min-width: 0; }
.header-account .icon-button { background: transparent; }
.identity { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.space-picker { position: relative; min-width: 0; max-width: 260px; margin-inline-start: auto; }
.space-picker:not([hidden]) + .header-account { flex: none; max-width: 200px; }
.space-picker-toggle,.space-picker-row,.space-picker-all {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--control-radius);
  font-size: 14px;
  text-align: start;
}
.space-picker-toggle { background: var(--surface); font-weight: 600; }
.space-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-picker-toggle svg { width: 16px; height: 16px; color: var(--muted); }
.space-picker-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.space-picker-panel {
  position: absolute;
  z-index: 12;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  width: 280px;
  padding: 4px;
  border: 1px solid var(--raised);
  border-radius: var(--panel-radius);
  background: var(--page);
  box-shadow: 0 6px 20px #0002;
}
.space-picker-list { max-height: min(44dvh, 280px); overflow-y: auto; overscroll-behavior: contain; }
.space-picker-list .notice { margin: 4px; }
.space-picker-row,.space-picker-all { background: transparent; }
.space-picker-row span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.space-picker-row:focus-visible { outline-offset: -2px; }
.space-picker-row:hover,.space-picker-row[aria-current="true"],.space-picker-all:hover { background: var(--surface); }
.space-picker-all { justify-content: space-between; margin-top: 4px; font-weight: 600; }
.preview-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 12px; padding-inline: var(--gutter); background: var(--surface); color: var(--muted); font-size: 12px; }
.preview-bar .text-button { text-decoration: underline; font-size: 12px; }
.main { max-width: 1000px; margin-inline: auto; padding: 24px max(var(--gutter), var(--safe-right)) calc(32px + var(--safe-bottom)) max(var(--gutter), var(--safe-left)); }
#app:is([data-screen="todos"], [data-screen="board"], [data-screen="rooms"], [data-screen="room"]) .main { padding-bottom: calc(24px + var(--tab-bar-height) + var(--safe-bottom)); }
#app:is([data-screen="todos"], [data-screen="rooms"]) .main { max-width: 680px; }
.tab-bar { position: fixed; z-index: 10; inset: auto 0 0; border-top: 1px solid var(--raised); background: var(--page); padding: 0 max(12px, var(--safe-right)) var(--safe-bottom) max(12px, var(--safe-left)); }
.tab-bar-inner { max-width: 400px; min-height: calc(var(--tab-bar-height) - 1px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; margin-inline: auto; padding-block: 4px; }
.app-tab { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; padding: 4px 12px; border: 0; border-radius: var(--control-radius); color: var(--muted); background: transparent; font-size: 12px; font-weight: 500; }
.app-tab[aria-current="page"] { color: var(--text); background: var(--surface); font-weight: 650; }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: var(--control-radius); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; }
.button.primary { background: var(--primary); color: var(--on-primary); }
.button.quiet { background: transparent; }
.button.danger { color: var(--error-text); background: var(--surface); }
.icon-button { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--control-radius); background: var(--surface); }
.text-button,.back-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 500; }
.back-link { color: var(--muted); }
.back-link svg,.members-link svg { width: 16px; height: 16px; }
input::placeholder { color: var(--muted); opacity: 1; }

.todos-page { display: grid; gap: 16px; }
.todos-summary { margin-top: 4px; color: var(--muted); font-size: 14px; }
.todos-summary:empty,.todo-feedback:empty,.todo-list-status:empty,.board-summary:empty,.settings-feedback:empty,.settings-permission:empty,.invite-feedback:empty { display: none; }
.todo-composer,.quick-task { min-width: 0; border-radius: var(--panel-radius); background: var(--surface); }
.todo-composer-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px 44px; gap: 4px; align-items: center; padding: 4px; }
.todo-composer input,.quick-task input,.todo-select select { width: 100%; min-width: 0; min-height: 44px; border: 0; border-radius: var(--control-radius); background: transparent; }
.todo-composer-row>input,.quick-task input { padding: 8px 12px; }
.todo-select { position: relative; min-width: 0; }
.todo-select select { display: block; padding: 4px 24px 4px 8px; appearance: none; }
.todo-select svg { position: absolute; top: 50%; right: 8px; width: 12px; height: 12px; transform: translateY(-50%); pointer-events: none; }
.todo-select .todo-date-mode { border-left: 1px solid var(--raised); border-radius: 0; }
.todo-add { width: 44px; min-width: 44px; padding: 0; }
.todo-date-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 0 12px 4px; border-top: 1px solid var(--raised); }
.todo-date-row label { color: var(--muted); font-size: 14px; }
.todo-date-row input { max-width: 220px; padding: 4px; text-align: start; }
.todo-panel { min-width: 0; border-radius: var(--panel-radius); background: var(--surface); }
.todo-panel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--raised); }
.todo-panel-heading .todo-select select { padding-left: 4px; font-size: 18px; font-weight: 600; }
.todo-count,.column-count,.room-count,.board-summary { font-variant-numeric: tabular-nums; }
.todo-count { min-width: 28px; padding: 4px 8px; border-radius: 8px; background: var(--raised); text-align: center; font-size: 13px; font-weight: 600; }
.todo-list { list-style: none; margin: 0; padding: 0 12px; }
.todo-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px; align-items: center; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--raised); }
.todo-row:last-child { border-bottom: 0; }
.todo-toggle { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--control-radius); background: transparent; }
.todo-toggle span { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--muted); border-radius: 50%; }
.todo-toggle svg { width: 16px; height: 16px; }
.todo-toggle[aria-disabled="true"] { opacity: .5; cursor: wait; }
.todo-row.is-done .todo-toggle span,.column-done .status-dot { border-color: var(--success); color: #111; background: var(--success); }
.todo-copy h3,.task-card h3 { font-size: 16px; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.todo-row.is-done h3 { color: var(--muted); text-decoration: line-through; }
.todo-title { display: block; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: start; font-weight: inherit; overflow-wrap: anywhere; }
.todo-title:hover { text-decoration: underline; }
.todo-copy:has(.todo-title) .todo-details { margin-top: 0; }
.is-done .todo-title { color: var(--muted); text-decoration: line-through; }
.subtask-section,.join-settings { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--raised); }
.subtask-list { list-style: none; margin: 0; padding: 0; }
.subtask-list:empty { display: none; }
.subtask-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 4px; }
.subtask-row + .subtask-row { border-top: 1px solid var(--raised); }
.subtask-row .todo-toggle span { width: 20px; height: 20px; }
.subtask-row.is-done .todo-toggle span { border-color: var(--success); color: #111; background: var(--success); }
.subtask-row .subtask-edit { grid-column: 2 / -1; padding-block: 4px 12px; }
.subtask-delete { padding-inline: 8px; color: var(--error-text); }
.todo-details { margin-top: 4px; color: var(--muted); font-size: 12px; }
.todo-overdue { color: var(--error-text); }
.todo-list-status:not(:empty) { padding: 12px; }
.todo-feedback .notice,.todo-list-status .notice:last-child { margin-bottom: 0; }
.todo-empty { padding: 12px 4px; color: var(--muted); font-size: 14px; }

.page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.room-list-actions,.room-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.room-list { display: grid; gap: 8px; }
.room-card { display: grid; grid-template-columns: 20px minmax(0,1fr) auto 20px; gap: 12px; align-items: center; width: 100%; min-height: 68px; padding: 12px 16px; border: 0; border-radius: var(--panel-radius); background: var(--surface); text-align: start; }
.room-copy { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.room-copy strong { font-weight: 600; }
.room-copy .muted,.room-count { font-size: 12px; }
.room-count { color: var(--muted); white-space: nowrap; }
.room-card>svg:last-child { color: var(--muted); }
.room-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.room-heading > div:first-child { min-width: 0; }
.members-link { color: var(--muted); }
.space-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 380px; margin-bottom: 18px; padding: 4px; border-radius: var(--panel-radius); background: var(--surface); }
.space-sections .button { padding-inline: 6px; }
.space-sections [aria-current="page"] { background: var(--page); }
.space-content { max-width: 680px; }
.space-page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.space-page-actions,.inline-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.calendar-page { display: grid; gap: 12px; }
.calendar-filters { display: grid; grid-template-columns: auto minmax(110px, 1fr) auto; gap: 4px; }
.calendar-filters .field { min-width: 0; padding-inline: 8px; }
.calendar-range { display: grid; align-items: center; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
.calendar-range p { text-align: center; font-size: 14px; font-weight: 600; }
.calendar-day + .calendar-day { margin-top: 16px; }
.calendar-day h3 { padding: 6px 0; color: var(--muted); font-size: 13px; }
.calendar-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: var(--control-radius); background: var(--surface); text-align: start; }
.calendar-entry + .calendar-entry { margin-top: 4px; }
.calendar-entry-title { min-width: 0; overflow-wrap: anywhere; }
.calendar-entry .muted { flex: none; max-width: 45%; text-align: end; font-size: 12px; }
.calendar-check { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.calendar-check input { width: 20px; height: 20px; accent-color: var(--primary); }
.calendar-setup { padding: 8px; font-size: 14px; }
.calendar-setup summary { cursor: pointer; }
.calendar-setup p { margin-top: 8px; }
.quick-task { display: flex; align-items: center; gap: 4px; padding: 4px; margin-bottom: 16px; }
.board-summary { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 32px); gap: 12px; min-width: 0; padding: 2px 2px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 2px; scroll-snap-type: x mandatory; }
.board:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.board.is-dragging { scroll-snap-type: none; }
.column { display: grid; align-content: start; gap: 8px; min-height: 112px; padding: 12px; border-radius: var(--panel-radius); background: var(--surface); scroll-snap-align: start; }
.column.is-drop-target { outline: 2px solid var(--text); outline-offset: -2px; background: var(--raised); }
.column-heading { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 24px; }
.column-heading h2 { font-size: 14px; font-weight: 600; }
.status-dot { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%; }
.column-inProgress .status-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.status-dot svg { width: 12px; height: 12px; }
.column-count { color: var(--muted); font-size: 13px; }
.task-card { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; align-items: start; padding: 4px; border-radius: var(--control-radius); background: var(--page); }
.task-card.is-dragging { opacity: .45; }
.board-drag-ghost { z-index: 30; outline: 1px solid var(--raised); box-shadow: 0 8px 24px #0003; }
.task-copy { min-width: 0; padding: 0 0 8px 8px; }
.task-title { display: block; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: transparent; text-align: start; font-weight: inherit; overflow-wrap: anywhere; white-space: pre-wrap; }
.task-title:hover { text-decoration: underline; }
.task-drag { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-touch-callout: none; }
.task-drag:active { cursor: grabbing; }
.task-drag[aria-disabled="true"] { opacity: .5; cursor: wait; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; color: var(--muted); font-size: 12px; }
.task-priority { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.priority-levels { display: flex; align-items: end; gap: 2px; }
.priority-levels span { width: 3px; height: 8px; border-radius: 1px; background: var(--raised); }
.priority-levels .is-filled { background: var(--muted); }
.task-assignee { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.welcome,.invite-preview,.center-state { max-width: 440px; margin-inline: auto; }
.welcome,.invite-preview { display: grid; justify-items: start; gap: 12px; padding: 16px 0; }
.invite-preview .sheet-form { width: 100%; }
.welcome-copy { color: var(--muted); }
.welcome-icon,.empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--control-radius); background: var(--surface); }
.eyebrow { color: var(--muted); font-size: 14px; }
.center-state { display: grid; justify-items: start; gap: 12px; padding-block: 24px; }
.center-state h1 { font-size: 24px; }
.spinner { width: 24px; height: 24px; border: 2px solid var(--raised); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-card { width: 100%; padding: 16px; border-radius: var(--panel-radius); background: var(--surface); }
.login-card h2 { font-size: 16px; }
.login-card p { margin: 4px 0 12px; font-size: 13px; }
.identity-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; border: 0; border-top: 1px solid var(--raised); background: transparent; text-align: start; }
.identity-choice>svg { margin-left: auto; }
.avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--raised); font-weight: 600; }
.choice-copy { display: grid; gap: 4px; }
.choice-copy .muted,.fine-print { color: var(--muted); font-size: 12px; }

.notice { margin-bottom: 12px; padding: 12px; border-radius: var(--control-radius); background: var(--surface); font-size: 14px; }
.notice.error { border-left: 2px solid var(--error); color: var(--error-text); }
.sheet { width: min(480px, calc(100% - 32px)); max-height: min(85vh, 800px); padding: 0; border: 1px solid var(--raised); border-radius: var(--panel-radius); background: var(--page); color: var(--text); }
.sheet::backdrop { background: #0007; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--raised); }
.sheet-header .icon-button { background: transparent; }
.sheet-header h2 { overflow-wrap: anywhere; }
.sheet-body { padding: 16px; }
.sheet-body>.muted { margin-bottom: 12px; font-size: 14px; }
.sheet-form,.invite-controls { display: grid; gap: 8px; }
.field-label { font-size: 14px; font-weight: 600; }
.field { width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--control-radius); background: var(--surface); }
.field-group { display: grid; gap: 4px; min-width: 0; }
textarea.field { display: block; resize: vertical; }
.credential-fields { display: grid; gap: 12px; overflow: hidden; }
.credential-fields:empty { display: none; }
.credential-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px; }
.sheet-form .notice { margin: 0; }
.priority-field { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.priority-field legend { margin-bottom: 8px; padding: 0; }
.priority-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.priority-option { cursor: pointer; }
.priority-option span { display: grid; place-items: center; min-height: 44px; border-radius: 8px; background: var(--surface); font-weight: 600; font-variant-numeric: tabular-nums; }
.priority-option input:checked+span { background: var(--primary); color: var(--on-primary); }
.priority-option input:focus-visible+span { outline: 2px solid var(--text); outline-offset: 2px; }
.priority-field:disabled,.task-details select:disabled { opacity: .55; }
.priority-selection { margin-top: 4px; color: var(--muted); font-size: 13px; }
.invite-link { font-size: 16px; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--raised); }
.member-row:last-child { border-bottom: 0; }
.member-copy { display: grid; min-width: 0; }
.member-row .role-badge { color: var(--muted); font-size: 12px; }
.member-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.member-actions .button { padding-inline: 8px; }
.member-name { font-size: 14px; overflow-wrap: anywhere; }
.invite-controls hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--raised); }
.invite-feedback { margin-top: 12px; }
.settings-section-title { margin-bottom: 4px; }
.settings-group { padding-inline: 12px; border-radius: var(--panel-radius); background: var(--surface); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-size: 14px; font-weight: 550; cursor: pointer; }
.setting-row+.setting-row { border-top: 1px solid var(--raised); }
.setting-switch { appearance: none; display: flex; align-items: center; flex: none; width: 44px; height: 28px; margin: 0; padding: 4px; border: 1px solid var(--muted); border-radius: 999px; cursor: pointer; }
.setting-switch::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); }
.setting-switch:checked { justify-content: flex-end; border-color: var(--primary); background: var(--primary); }
.setting-switch:checked::before { background: var(--on-primary); }
.setting-switch[aria-disabled="true"] { opacity: .55; cursor: wait; }
.settings-feedback,.settings-permission { margin-top: 12px; }
.settings-permission { display: grid; justify-items: start; gap: 4px; }
.settings-permission .muted { font-size: 13px; }
.toast { position: fixed; z-index: 20; inset: auto auto calc(12px + var(--safe-bottom)) 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: var(--control-radius); background: var(--primary); color: var(--on-primary); font-size: 14px; }
.tab-bar:not([hidden])+.toast { bottom: calc(12px + var(--tab-bar-height) + var(--safe-bottom)); }

@media (min-width: 700px) {
  :root { --gutter: 28px; }
  .board { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
}
@media (max-width: 600px) {
  .space-picker { position: static; }
  .space-picker:not([hidden]) + .header-account .identity { display: none; }
  .space-picker-panel {
    inset-block-start: 100%;
    inset-inline-end: max(var(--gutter), var(--safe-right));
    max-width: calc(100% - max(var(--gutter), var(--safe-right)) - max(var(--gutter), var(--safe-left)));
  }
}
@media (max-width: 440px) {
  .sheet { margin: auto 0 0; width: 100%; max-width: none; max-height: 90dvh; padding-bottom: var(--safe-bottom); border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
}
@media (max-width: 390px) {
  .app-header { gap: 8px; }
  .brand { font-size: 14px; }
  .space-picker-toggle { gap: 4px; padding-inline: 8px; font-size: 13px; }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .todo-composer-row>input { padding-inline: 8px; }
  .brand-wordmark { display: grid; gap: 0; font-size: 12px; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }