:root {
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #243745;
  background: #f4f9fc;
  color-scheme: light;
  --accent: #3c6580;
  --accent-strong: #2c5069;
  --accent-soft: #e4f0f7;
  --accent-tint: #d7e8f2;
  --line: #cfdee8;
  --muted: #4e6475;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 300px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.topbar {
  min-height: 66px;
  padding: 10px clamp(20px, 5vw, 72px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.wordmark { display: flex; align-items: center; gap: 11px; font-weight: 750; font-size: 20px; letter-spacing: -.045em; }
.brand-name { display: flex; align-items: center; gap: 9px; }
.brand-meta { display: flex; align-items: center; gap: 9px; border-left: 1px solid var(--line); padding-left: 11px; font-size: 12px; font-weight: 650; letter-spacing: normal; }
.brand-meta a { color: var(--accent); text-decoration: none; }
.brand-meta a:hover { text-decoration: underline; }
.version-badge { padding: 3px 6px; border-radius: 6px; color: var(--accent-strong); background: var(--accent-soft); font-size: 12px; font-weight: 650; letter-spacing: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.brand-icon { display: flex; align-items: center; gap: 3px; padding: 8px; border-radius: 10px; background: var(--accent); }
.brand-icon i { width: 4px; height: 13px; border-radius: 2px; background: #fff; }
.brand-icon i:nth-child(2) { opacity: .68; }
.brand-icon i:nth-child(3) { opacity: .42; }
.storage-label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 7px; }
.storage-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.storage-label[data-phase="synced"] i { background: #479475; }
.storage-label:is([data-phase="checking"], [data-phase="pending"], [data-phase="retry"]) i { background: #b76c30; }
.storage-label:is([data-phase="conflict"], [data-phase="reconnect"], [data-phase="accessError"], [data-phase="tooLarge"]) i { background: #982e49; }
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.web-account { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 13px; white-space: nowrap; }
.web-notice { max-width: 720px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.web-empty h2 { margin: 0; font-size: 21px; }
.web-empty p { color: var(--muted); line-height: 1.45; }
.web-welcome {
  max-width: 1030px;
  margin: clamp(30px, 9vh, 106px) auto;
  padding: clamp(24px, 6vw, 65px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 310px);
  align-items: center;
  gap: 35px;
}
.web-welcome h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.04; letter-spacing: -.045em; margin: 12px 0 18px; }
.web-welcome p { max-width: 450px; color: var(--muted); line-height: 1.55; }
.web-welcome .web-eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .18em; color: var(--accent-strong); }
.web-welcome-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding-top: 8px;
}
.web-welcome-actions .button { white-space: normal; }
.web-mode { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.web-mode::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.web-mode[data-synced="true"]::before { background: #398467; }
.web-welcome-art { display: flex; gap: 12px; align-items: start; padding: 25px 18px 55px; border-radius: 18px; background: var(--accent-tint); transform: rotate(-4deg); }
.web-welcome-art i { flex: 1; height: 65px; border-radius: 8px; background: #f9e7a7; box-shadow: 0 4px 9px #19374920; }
.web-welcome-art i:nth-child(2) { margin-top: 30px; background: #f8d5e6; }
.web-welcome-art i:nth-child(3) { margin-top: 55px; background: #d6eddb; }
@media (max-width: 650px) {
  .web-welcome { grid-template-columns: 1fr; gap: 30px; }
  .web-welcome-art { max-width: 310px; }
  .web-account { flex-basis: 100%; }
}
.settings-intro, .settings-help { color: var(--muted); font-size: 13px; }
.settings-help { margin: 0 0 15px; }
.settings-account { padding: 14px 0 4px; border-top: 1px solid var(--line); }
.settings-account h3 { margin: 0 0 5px; font-size: 15px; }
.account-status { margin: 9px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.account-status:empty { display: none; }
.cloud-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cloud-actions .danger { margin-right: 0; }
#cloud-consent-label { margin-top: 9px; }
.cloud-history { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cloud-history label, .cloud-history select { margin: 0; }
.cloud-history select { width: auto; }

main { max-width: 1600px; margin: 0 auto; padding: 20px clamp(16px, 5vw, 72px) 28px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  min-height: 40px;
}
.button.icon-control { width: 40px; padding: 0; }
.language-picker { position: relative; }
.language-picker:has(select:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.language-picker::before {
  content: "";
  width: 22px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid #0002;
  background: var(--language-flag) center / cover;
}
.language-picker select {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
html[lang="it"] .language-picker {
  --language-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23fff' d='M0 0h30v20H0z'/%3E%3Cpath fill='%23009246' d='M0 0h10v20H0z'/%3E%3Cpath fill='%23ce2b37' d='M20 0h10v20H20z'/%3E%3C/svg%3E");
}
html[lang="en"] .language-picker {
  --language-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23012169' d='M0 0h30v20H0z'/%3E%3Cpath d='M0 0l30 20m0-20L0 20' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M0 0l30 20m0-20L0 20' stroke='%23c8102e' stroke-width='1.4'/%3E%3Cpath d='M15 0v20M0 10h30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M15 0v20M0 10h30' stroke='%23c8102e' stroke-width='3.4'/%3E%3C/svg%3E");
}
html[lang="fr"] .language-picker {
  --language-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23fff' d='M0 0h30v20H0z'/%3E%3Cpath fill='%23002395' d='M0 0h10v20H0z'/%3E%3Cpath fill='%23ed2939' d='M20 0h10v20H20z'/%3E%3C/svg%3E");
}
html[lang="de"] .language-picker {
  --language-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 21'%3E%3Cpath fill='%23ffce00' d='M0 0h30v21H0z'/%3E%3Cpath fill='%23d00' d='M0 0h30v14H0z'/%3E%3Cpath d='M0 0h30v7H0z'/%3E%3C/svg%3E");
}
html[lang="es"] .language-picker {
  --language-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath fill='%23aa151b' d='M0 0h30v20H0z'/%3E%3Cpath fill='%23f1bf00' d='M0 5h30v10H0z'/%3E%3C/svg%3E");
}
.button span { font-size: 17px; line-height: 1; }
.primary { background: var(--accent); color: #fff; }
.primary:hover:not(:disabled) { background: var(--accent-strong); }
.secondary { background: #fff; color: var(--accent-strong); border-color: var(--line); }
.secondary:hover:not(:disabled) { background: var(--accent-soft); }
.danger { color: #a02c48; background: #fff2f5; margin-right: auto; }
.danger:hover { background: #ffe3eb; }


.organization-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.organization-field { flex: 0 1 265px; min-width: 0; }
.organization-field:last-child { flex-basis: 345px; }
.organization-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.organization-controls { display: flex; align-items: center; gap: 5px; }
.organization-controls select { flex: 1; min-width: 0; width: auto; margin: 0; }
.organization-controls button { min-width: 34px; padding-inline: 8px; }

.workspace-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 15px; margin-bottom: 14px; }
.workspace-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 750; }
.workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.grid-icon { font-size: 23px; color: var(--accent); line-height: 1; }
#board-summary { margin: 0; font-size: 13px; color: var(--muted); }
.board-status, .form-error { color: #94293e; font-size: 14px; }
.board-status { background: #fff1f3; border: 1px solid #f3ced8; border-radius: 10px; padding: 10px 14px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr); gap: 15px; overflow-x: auto; padding: 4px 4px 13px; margin: -4px; }
.calendar-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.calendar-navigation .icon-control { font-size: 21px; }
#calendar-range { margin-left: 4px; color: var(--muted); font-size: 13px; }
#toggle-calendar #calendar-switch-label { font: inherit; }
.board.calendar-view { grid-auto-columns: minmax(176px, 1fr); gap: 10px; }
.calendar-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 12px; }
.calendar-day-heading h2 { margin: 0; font-size: 14px; }
.calendar-day.calendar-day-today { border-color: var(--accent); }
.calendar-day-empty { margin: 10px 0; color: var(--muted); font-size: 12px; }
.calendar-day.drop-lane { outline-offset: -3px; }
.lane {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 270px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--accent-soft);
}
.lane:nth-child(3n + 2) .lane-dot { background: #b76c30; }
.lane:nth-child(3n) .lane-dot { background: #438675; }
.lane-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; margin-bottom: 12px; }
.lane-heading .column-menu { grid-row: 1; grid-column: 2; }
.lane-view-controls { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 5px; }
.lane-view-button {
  min-height: 27px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 650;
}
.lane-view-button:hover { background: var(--accent-soft); }
.lane-view-button[aria-pressed="true"] { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
@container (min-width: 425px) {
  .lane-heading { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lane-view-controls { grid-column: 2; grid-row: 1; }
  .lane-heading .column-menu { grid-column: 3; }
}
.lane-grip { display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; min-height: 32px; cursor: grab; user-select: none; }
.lane-grip:active { cursor: grabbing; }
.lane-handle { flex: 0 0 auto; color: var(--muted); font-size: 18px; line-height: 1; }
.lane.drop-column-before::before, .lane.drop-column-after::after { content: ""; position: absolute; z-index: 1; top: 7px; bottom: 7px; width: 3px; border-radius: 4px; background: var(--accent); pointer-events: none; }
.lane.drop-column-before::before { left: 2px; }
.lane.drop-column-after::after { right: 2px; }
.lane-heading h2 { font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.lane-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #6a94ae; }
.lane-count { background: var(--accent-tint); color: var(--accent-strong); padding: 2px 6px; border-radius: 20px; font-weight: 650; font-size: 11px; }
.lane-overdue { background: #ffe6ea; color: #982e49; border-radius: 20px; padding: 2px 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.icon-button {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  font-size: 21px;
  border: 0;
  border-radius: 8px;
  color: var(--accent-strong);
  background: transparent;
}
.icon-button:hover { background: var(--accent-tint); }
.column-menu { margin-left: auto; }
.lane-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  max-height: max(190px, calc(100dvh - 340px));
  overflow-y: auto;
  padding: 4px;
  margin: -4px;
  scrollbar-width: thin;
}
.empty-lane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 122px;
  flex: 1;
  border: 1px dashed #b9cedd;
  border-radius: 11px;
  font-size: 13px;
  color: var(--muted);
}
.empty-icon { font-size: 23px; color: var(--accent); }
.lane-add { margin-top: 10px; min-height: 38px; text-align: left; background: transparent; border: 0; border-radius: 8px; color: var(--accent-strong); padding: 7px 9px; font-size: 13px; font-weight: 650; }
.lane-add:hover { background: var(--accent-tint); }
.board-hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; }

.board-tools, .filters, .backup-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.board-tools { justify-content: space-between; margin-bottom: 8px; }
.filters { flex: 1; }
.board-tools .filters :is(input[type="search"], input[type="date"], select) { width: auto; max-width: 100%; height: 40px; margin: 0; font-size: 13px; }
.board-tools .filters > input { flex: 1 1 160px; min-width: 0; max-width: 270px; }
.board-tools .filters :is(#filter-project, #filter-subproject) { max-width: min(100%, 180px); }
.color-filter { position: relative; }
.color-filter summary { list-style: none; font-size: 13px; }
.color-filter summary::-webkit-details-marker { display: none; }
.color-filter summary::after { content: ""; width: 6px; height: 6px; margin: -3px 1px 0 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.color-filter-panel { position: absolute; z-index: 5; top: calc(100% + 5px); left: 0; min-width: 158px; max-height: 250px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #24374526; }
.color-filter-panel p { margin: 6px; color: var(--muted); font-size: 13px; }
.color-option { display: flex; align-items: center; gap: 7px; padding: 6px; border-radius: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.color-option:hover { background: var(--accent-soft); }
.color-option input[type="checkbox"] { width: 15px; height: 15px; min-height: 0; margin: 0; padding: 0; }
.color-option-dot { width: 13px; height: 13px; border: 1px solid #24374540; border-radius: 50%; }
.date-filter, .date-range { display: flex; align-items: center; gap: 8px; }
.date-range { flex-wrap: wrap; }
.date-filter { font-size: 13px; color: var(--muted); }
#date-filter-error { margin: -5px 0 12px; }
.quiet { border-color: transparent; background: transparent; color: var(--accent-strong); }
.quiet:hover { background: var(--accent-soft); }
.board-status.status-success { background: #eaf6ef; border-color: #cce7d5; color: #285d40; }
.lane.lane-complete .lane-dot { background: #438675; }
.lane-caption { margin: -8px 0 8px 31px; color: #35624e; font-size: 11px; font-weight: 650; }
.archive-view { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.archive-empty { margin: 12px 0; color: var(--muted); }
.archive-view .note { cursor: default; }

.note {
  position: relative;
  min-width: 0;
  flex: 0 0 auto;
  padding: 5px 9px;
  color: var(--note-ink);
  background: var(--note-color);
  border: 1px solid color-mix(in srgb, var(--note-color), var(--note-ink) 15%);
  border-radius: 10px;
  box-shadow: 0 2px 4px #24374512;
  cursor: grab;
  overflow-wrap: anywhere;
}
.note:active { cursor: grabbing; }
.note.touch-dragging { opacity: .4; }
.note.note-drag-preview {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 6px 18px #24374545;
  will-change: transform;
}
.note-drag-image {
  position: fixed;
  inset: 0 auto auto 0;
  pointer-events: none;
}
@media (pointer: coarse) {
  .note[draggable="true"] { user-select: none; -webkit-touch-callout: none; }
}
.note h3 { margin: 0; font-size: 14px; }
.note-overdue h3 { padding-right: 18px; }
.note-overdue h3::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 9px;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #c92843;
  pointer-events: none;
}
.note-title { display: block; width: 100%; border: 0; padding: 0; border-radius: 3px; background: none; color: inherit; font-weight: 750; line-height: 1.3; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-title:hover { text-decoration: underline; }
.note-link-row { display: flex; justify-content: space-between; gap: 8px; }
.note-link-row a { color: var(--accent); font-size: 12px; font-weight: 650; }
.due-date { display: block; font-size: 11px; font-weight: 650; line-height: 1.25; margin-top: 2px; }
.note-with-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
}
.note-with-progress:has(.due-date) h3 { grid-column: 1 / -1; }
.note-with-progress .due-date + .note-progress { margin-top: 2px; }
.note-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.note-progress-bar {
  width: 36px;
  height: 5px;
  appearance: none;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
}
.note-progress-bar::-webkit-progress-bar {
  background: color-mix(in srgb, var(--note-color), var(--note-ink) 23%);
}
.note-progress-bar::-webkit-progress-value { background: #4d7e9a; }
.note-progress-complete .note-progress-bar::-webkit-progress-value { background: #328157; }
.calendar-day .note-progress-bar { width: 22px; }

.drop-lane { outline: 2px dashed var(--accent); outline-offset: -3px; }
.drop-before::before, .drop-after::after { content: ""; position: absolute; height: 3px; border-radius: 4px; background: var(--accent); left: 0; right: 0; }
.drop-before::before { top: -5px; }
.drop-after::after { bottom: -5px; }

dialog { width: min(485px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 24px; border: 1px solid var(--line); border-radius: 18px; color: inherit; box-shadow: 0 24px 75px #24374542; }
dialog::backdrop { background: #243745a0; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.dialog-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
form label, legend { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.optional { font-size: 11px; color: var(--muted); font-weight: 400; }
input:not([type="color"]), select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: #fff; margin-bottom: 13px; min-height: 39px; }
textarea { resize: vertical; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.field-pair > div { min-width: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 15px; min-width: 0; }
.palette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.swatch { width: 27px; height: 27px; border-radius: 50%; border: 1px solid #24374540; background: var(--swatch); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.swatch:focus-visible { outline-offset: 5px; }
.custom-color { display: flex; align-items: center; gap: 6px; margin: 0 0 0 3px; color: var(--muted); font-size: 12px; }
input[type="color"] { width: 29px; height: 29px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
#archive-note { order: -1; }
.dialog-actions #delete-note { order: -2; }
#delete-organization { margin-inline-end: auto; }
input[type="checkbox"] { accent-color: var(--accent); }
.checkbox-label { display: flex; align-items: center; gap: 6px; }
.checkbox-label input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; }
.check-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; margin: 6px 0; }
.check-item input[type="text"] { margin: 0; }

@media (max-width: 580px) {
  .board { grid-auto-columns: minmax(240px, 78%); }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
}

.transfer-note { display: block; margin: -8px 0 10px auto; }
.global-results { display: grid; gap: 7px; margin: 4px 0 18px; }
.global-result { display: grid; gap: 4px; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.global-result span { color: var(--muted); font-size: 12px; font-weight: 500; }

.board-tools .mobile-search-toggle { display: none; }
.mobile-toolbar-button, .mobile-header-actions, #mobile-new-note:empty, .button .mobile-note-label { display: none; }
.button .desktop-note-label, .button .mobile-note-label, .button .manual-label { font: inherit; }

@media (max-width: 650px) {
  .compact-mobile .topbar { flex-wrap: nowrap; min-height: 0; gap: 8px; padding: 8px clamp(16px, 5vw, 72px); }
  .compact-mobile .topbar .wordmark { gap: 7px; }
  .compact-mobile .brand-name { display: grid; justify-items: start; gap: 2px; line-height: 1; }
  .compact-mobile .version-badge { padding: 2px 4px; font-size: 10px; }
  .compact-mobile .mobile-header-actions { display: flex; align-items: center; gap: 5px; }
  .compact-mobile .mobile-header-actions #toggle-search { display: inline-flex; }
  .compact-mobile .mobile-header-actions :is(#toggle-search, #mobile-menu-toggle) { width: 34px; justify-content: center; padding: 0; }
  .compact-mobile #mobile-manual .button { width: 34px; justify-content: center; padding: 0; }
  .compact-mobile #mobile-manual .manual-label { display: none; }
  .compact-mobile .mobile-view-switch { display: flex; gap: 10px; }
  .compact-mobile .mobile-view-switch .button { width: 34px; justify-content: center; padding: 0; }
  .compact-mobile .mobile-view-switch .button[aria-pressed="true"] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
  }
  .compact-mobile #new-note { width: 100%; white-space: nowrap; gap: 4px; padding-inline: 6px; }
  .compact-mobile #new-note .desktop-note-label { position: absolute; visibility: hidden; }
  .compact-mobile #new-note .mobile-note-label { display: inline; }
  .compact-mobile #mobile-new-note.full-note-label .desktop-note-label { position: static; visibility: visible; }
  .compact-mobile #mobile-new-note.full-note-label .mobile-note-label { display: none; }
  .compact-mobile #web-main { padding-top: 9px; }
  .compact-mobile .workspace-bar, .compact-mobile #board-hint { display: none; }
  .compact-mobile #web-main > section { --mobile-lane-width: min(240px, calc(100% - 94px)); --mobile-lane-gap: 15px; }
  .compact-mobile #web-main > section:has(.calendar-view) { --mobile-lane-width: min(176px, calc(100% - 94px)); --mobile-lane-gap: 10px; }
  .compact-mobile .board:not(.archive-view) { grid-auto-columns: var(--mobile-lane-width); gap: var(--mobile-lane-gap); }
  .compact-mobile .board-tools { display: grid; grid-template-columns: var(--mobile-lane-width) minmax(0, 1fr); gap: 7px var(--mobile-lane-gap); }
  .compact-mobile .mobile-toolbar-button { display: inline-flex; min-width: 0; }
  .compact-mobile #mobile-board-toggle { grid-area: 1 / 1; justify-content: space-between; padding-inline: 10px; }
  #mobile-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; }
  .compact-mobile #mobile-new-note { grid-area: 1 / 2; min-width: 0; }
  .compact-mobile:has(#toggle-search[aria-expanded="false"]) .board-tools .filters { display: none; }
  .compact-mobile .board-tools .filters { grid-area: 2 / 1 / 3 / -1; }
  .mobile-sheet {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 90dvh;
    margin: 0;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .mobile-sheet .dialog-heading h2 { font-size: 20px; }
  #mobile-organization-body .organization-bar { display: grid; gap: 10px; margin: 0; }
  #mobile-board-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #mobile-account-actions { display: grid; gap: 12px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
  #mobile-account-actions .topbar-actions { gap: 8px; }
  #mobile-account-actions .brand-meta { border: 0; padding: 0; }
}


@media (max-width: 650px) {
  #web-main > section { min-height: var(--mobile-workspace-min-height, auto); }
  .workspace-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title view" "summary view" "actions actions";
    gap: 4px 8px;
  }
  .workspace-title { grid-area: title; }
  #board-summary { grid-area: summary; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #toggle-calendar { grid-area: view; min-inline-size: 122px; }
  .workspace-actions { grid-area: actions; margin: 5px 0 0; }

  .board-tools .mobile-search-toggle { display: inline-flex; }
  .mobile-search-toggle[aria-expanded="true"] { background: var(--accent-soft); }
  .mobile-search-toggle[aria-expanded="false"] ~ .filters { display: none; }
  .board-tools #toggle-archive { margin-inline-start: auto; }
  .board-tools .filters { flex: 0 0 100%; min-width: 0; order: 1; }
  .board-tools .filters > #search-notes { flex-basis: 100%; max-width: none; }
}

@media (max-width: 370px) {
  .compact-mobile .topbar { gap: 6px; }
  .compact-mobile .topbar .brand-icon { display: none; }
  .compact-mobile .mobile-header-actions { gap: 5px; }
}