:root {
  color-scheme: light dark;
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --text: #1c2733;
  --muted: #627080;
  --border: #cfd6de;
  --shadow: 0 12px 36px rgba(22, 34, 48, 0.12);
  --primary: #24364b;
  --primary-contrast: #ffffff;
  --accent: #2f6b8c;
  --danger: #a02d2d;
  --success: #28714c;
  --high: #9d3a3a;
  --middle: #9a6f1a;
  --blue: #3d6989;
  --normal: var(--middle);
  --low: var(--blue);
  --now: #a53c3c;
  --soon: var(--middle);
  --later: var(--blue);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
[x-cloak] { display: none !important; }
.task-dragging { user-select: none; }
.task-dragging, .task-dragging * { cursor: grabbing !important; }

.app-shell { width: min(1560px, 100%); margin: 0 auto; padding: 1.25rem clamp(.75rem, 2vw, 2rem) 2rem; }
.app-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.eyebrow { margin: 0 0 .25rem; color: var(--accent); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .15rem; font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1; }
h1 span { color: var(--accent); }
.title-line { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.title-line h1 { margin-bottom: .15rem; }
.version-badge { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .2rem .48rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; font-weight: 800; letter-spacing: .015em; white-space: nowrap; }
.subtitle { margin-bottom: 0; color: var(--muted); }
.header-status { display: flex; align-items: center; gap: .65rem; }
.connection { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .8rem; font-weight: 700; }
.connection > span:first-child { width: .55rem; height: .55rem; border-radius: 50%; background: var(--success); }
.connection.offline > span:first-child { background: var(--danger); }

.button { min-height: 2.45rem; padding: .55rem .82rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface); cursor: pointer; font-weight: 700; }
.button:hover { border-color: var(--accent); }
.button.primary { color: var(--primary-contrast); border-color: var(--primary); background: var(--primary); }
.button.secondary { background: var(--surface-2); }
.button.danger { color: #fff; border-color: var(--danger); background: var(--danger); }
.button:disabled, button:disabled { opacity: .42; cursor: not-allowed; }
.button-count { display: inline-grid; min-width: 1.4rem; height: 1.4rem; margin-left: .25rem; place-items: center; border-radius: 999px; background: var(--surface-2); font-size: .75rem; }

.dashboard-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.summary-bar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .58rem .75rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); box-shadow: 0 3px 12px rgba(20, 35, 50, .05); }
.summary-next { display: flex; align-items: center; min-width: 0; gap: .6rem; }
.summary-label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.next-task { display: flex; min-width: 0; align-items: center; gap: .45rem; border: 0; background: none; cursor: pointer; text-align: left; }
.next-task strong { flex: 0 0 auto; color: var(--accent); }
.next-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.summary-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .85rem; color: var(--muted); font-size: .85rem; }
.summary-counts strong { color: var(--text); }
.empty-message { color: var(--muted); font-style: italic; }

.toolbar { display: flex; flex-wrap: nowrap; gap: .4rem; margin: 0; }
.mobile-action-label { display: none; }
.matrix-section { overflow: hidden; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); }
.section-heading h2 { margin-bottom: .2rem; }
.section-heading p { margin-bottom: 0; color: var(--muted); font-size: .9rem; }
.legend { display: flex; gap: .8rem; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.legend b { color: var(--accent); }

.matrix-board {
  display: grid;
  grid-template-columns: 128px repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, minmax(272px, auto));
}
.matrix-board.is-loading { opacity: .55; }
.axis-corner, .column-head, .row-head { display: flex; min-height: 3.25rem; align-items: center; justify-content: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.axis-corner { grid-row: 1; grid-column: 1; flex-direction: column; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.35; }
.column-head { grid-row: 1; grid-column: var(--matrix-column); font-size: .95rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.column-head.urgency-now { color: var(--now); }
.column-head.urgency-soon { color: var(--soon); }
.column-head.urgency-later { color: var(--later); }
.row-head { grid-row: var(--matrix-row); grid-column: 1; border-top: 3px solid transparent; background: var(--surface); text-transform: uppercase; }
.row-head strong { font-size: 1rem; }
.row-head span { color: var(--muted); font-size: .72rem; }
.row-head.importance-high { border-top-color: var(--high); }
.row-head.importance-normal { border-top-color: var(--normal); }
.row-head.importance-low { border-top-color: var(--low); }
.row-head.importance-high strong { color: var(--high); }
.row-head.importance-normal strong { color: var(--normal); }
.row-head.importance-low strong { color: var(--low); }

.matrix-cell { grid-row: var(--matrix-row); grid-column: var(--matrix-column); min-width: 0; min-height: 272px; padding: .65rem; border-top: 3px solid transparent; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; background: color-mix(in srgb, var(--surface) 95%, var(--accent) 5%); transition: background-color .12s ease, box-shadow .12s ease; }
.matrix-cell.importance-high { border-top-color: var(--high); }
.matrix-cell.importance-normal { border-top-color: var(--normal); }
.matrix-cell.importance-low { border-top-color: var(--low); }
.matrix-cell.urgency-now { border-left-color: var(--now); }
.matrix-cell.urgency-soon { border-left-color: var(--soon); }
.matrix-cell.urgency-later { border-left-color: var(--later); }
.matrix-cell.is-drag-target { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); box-shadow: inset 0 0 0 3px var(--accent); }
.cell-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.cell-heading, .cell-header-actions, .queue-heading > div { display: flex; align-items: center; gap: .4rem; }
.cell-heading { min-width: 0; }
.cell-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-header-actions { flex: 0 0 auto; }
.cell-priority { display: inline-grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: .42rem; color: #fff; background: var(--primary); font-size: .8rem; font-weight: 900; }
.cell-header strong { font-size: .8rem; }
.cell-add, .queue-link { min-height: 1.9rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface); cursor: pointer; font-weight: 750; }
.cell-add { display: inline-grid; width: 1.9rem; padding: 0; place-items: center; color: var(--accent); font-size: 1.2rem; line-height: 1; }
.cell-add:hover, .cell-add:focus-visible, .queue-link:hover, .queue-link:focus-visible { border-color: var(--accent); outline: none; }
.queue-link { padding: .32rem .45rem; color: var(--muted); font-size: .72rem; }
.queue-link span { color: var(--text); }
.task-stack { display: grid; gap: .48rem; }
.task-card { position: relative; display: grid; grid-template-columns: 3.15rem minmax(0, 1fr) 4rem; min-height: 76px; align-items: start; gap: .45rem; padding: .48rem; border: 1px solid var(--border); border-radius: .58rem; background: var(--surface); box-shadow: 0 2px 8px rgba(20, 35, 50, .05); transition: opacity .12s ease, transform .12s ease, box-shadow .12s ease; }
.task-card.is-next { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent); }
.task-card.is-overdue { border-left: 4px solid var(--danger); }
.task-card.is-dragging { opacity: .3; }
.task-card.is-drop-before::before, .task-card.is-drop-after::after { position: absolute; right: .25rem; left: .25rem; height: 3px; border-radius: 999px; background: var(--accent); content: ""; }
.task-card.is-drop-before::before { top: -.31rem; }
.task-card.is-drop-after::after { bottom: -.31rem; }
.task-number { color: var(--accent); font-size: .75rem; font-weight: 900; }
.drag-handle { display: grid; grid-template-columns: 1rem 1fr; width: 100%; min-height: 2.2rem; align-items: center; gap: .1rem; padding: .2rem; border: 1px solid transparent; border-radius: .42rem; background: transparent; cursor: grab; text-align: left; touch-action: none; -webkit-user-select: none; user-select: none; }
.drag-handle:hover, .drag-handle:focus-visible { border-color: var(--border); background: var(--surface-2); outline: none; }
.drag-handle:active { cursor: grabbing; }
.grip { color: var(--muted); font-size: 1rem; letter-spacing: -.3em; }
.static-number { padding-top: .12rem; }
.task-main { min-width: 0; padding-top: .18rem; }
.task-title { display: block; max-width: 100%; padding: 0; overflow: hidden; border: 0; background: none; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.task-notes { display: -webkit-box; margin: .2rem 0 0; overflow: hidden; color: var(--muted); font-size: .76rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.due-date { display: inline-block; margin-top: .25rem; color: var(--muted); font-size: .7rem; }
.due-date.overdue { color: var(--danger); font-weight: 800; }
.task-actions { display: grid; grid-template-columns: repeat(2, 1.85rem); grid-template-rows: repeat(3, 1.85rem); gap: .18rem; }
.task-actions button, .queue-actions button, .mini-complete { min-width: 1.8rem; min-height: 1.8rem; padding: .05rem .25rem; border: 1px solid var(--border); border-radius: .34rem; background: var(--surface-2); cursor: pointer; font-weight: 850; line-height: 1; }
.task-actions .complete, .mini-complete { color: var(--success); }
.task-actions .cancel, .queue-actions .cancel, .task-actions .delete, .queue-actions .delete { color: var(--danger); }
.task-actions .delete, .queue-actions .delete { font-size: .86rem; }
.empty-slot { display: flex; min-height: 43px; align-items: center; gap: .55rem; padding: .45rem .55rem; border: 1px dashed var(--border); border-radius: .55rem; background: transparent; cursor: pointer; text-align: left; }
.empty-slot:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.empty-slot span { color: var(--muted); font-size: .75rem; font-weight: 850; }
.empty-slot em { color: var(--muted); font-size: .76rem; }

.drag-ghost { position: fixed; z-index: 60; top: 0; left: 0; width: min(260px, calc(100vw - 2rem)); padding: .65rem .75rem; overflow: hidden; border: 2px solid var(--accent); border-radius: .58rem; background: var(--surface); box-shadow: var(--shadow); pointer-events: none; text-overflow: ellipsis; white-space: nowrap; }
.drag-ghost:empty { display: none !important; }
.drag-ghost strong { display: block; overflow: hidden; text-overflow: ellipsis; }

.app-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "data version"
    "copyright copyright";
  gap: .35rem 1rem;
  width: 100%;
  padding: .85rem .2rem 0;
  color: var(--muted);
  font-size: .78rem;
}
.app-footer p { margin: 0; }
.footer-data { grid-area: data; justify-self: start; }
.footer-version { grid-area: version; justify-self: end; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; white-space: nowrap; }
.footer-copyright { grid-area: copyright; width: 100%; justify-self: stretch; text-align: center; }

.mobile-help, .mobile-matrix { display: none; }
.mobile-cell-summary { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-top: 3px solid transparent; border-left: 3px solid transparent; border-radius: .68rem; background: var(--surface); box-shadow: 0 3px 12px rgba(20, 35, 50, .06); }
.mobile-cell-summary.importance-high { border-top-color: var(--high); }
.mobile-cell-summary.importance-normal { border-top-color: var(--normal); }
.mobile-cell-summary.importance-low { border-top-color: var(--low); }
.mobile-cell-summary.urgency-now { border-left-color: var(--now); }
.mobile-cell-summary.urgency-soon { border-left-color: var(--soon); }
.mobile-cell-summary.urgency-later { border-left-color: var(--later); }
.mobile-cell-open { display: grid; width: 100%; min-height: 4.85rem; align-content: space-between; gap: .55rem; padding: .7rem .55rem .45rem; border: 0; background: transparent; cursor: pointer; text-align: left; }
.mobile-cell-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mobile-cell-name { display: grid; min-width: 0; gap: .12rem; line-height: 1.12; }
.mobile-cell-name b { color: var(--accent); font-size: 1rem; }
.mobile-cell-name span { overflow: hidden; font-size: .72rem; font-weight: 800; text-overflow: ellipsis; }
.slot-indicator { display: flex; gap: .28rem; }
.slot-indicator i { width: .56rem; height: .56rem; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-2); }
.slot-indicator i.filled { border-color: var(--accent); background: var(--accent); }
.mobile-cell-actions { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); gap: .3rem; padding: 0 .45rem .45rem; }
.mobile-cell-actions .cell-add, .mobile-cell-actions .queue-link { width: 100%; min-height: 2.15rem; }
.mobile-cell-actions .queue-link { padding-inline: .2rem; }

.mobile-cell-modal { max-height: min(92dvh, 760px); }
.focused-cell-header { align-items: center; }
.focused-cell-header .cell-heading { gap: .65rem; }
.focused-cell-header .eyebrow { margin-bottom: .12rem; }
.focused-cell-actions { display: flex; align-items: center; gap: .35rem; }
.focused-cell-actions .cell-add, .focused-cell-actions .queue-link { min-height: 2.2rem; }
.mobile-cell-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .65rem .8rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mobile-cell-switcher button { display: grid; min-width: 0; min-height: 2.75rem; align-content: center; gap: .06rem; padding: .3rem .35rem; border: 1px solid var(--border); border-radius: .45rem; background: var(--surface); cursor: pointer; text-align: left; }
.mobile-cell-switcher button strong { color: var(--accent); font-size: .78rem; }
.mobile-cell-switcher button span { overflow: hidden; font-size: .62rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.mobile-cell-switcher button.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mobile-drag-help { margin: 0; padding: .55rem .85rem; border-bottom: 1px solid var(--border); color: var(--muted); background: var(--surface); font-size: .75rem; line-height: 1.35; }
.mobile-drag-help.active { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); font-weight: 700; }

.mobile-drop-overlay { position: fixed; z-index: 80; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .6rem; padding: max(.65rem, env(safe-area-inset-top)) .65rem max(.65rem, env(safe-area-inset-bottom)); overflow: hidden; color: var(--text); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); touch-action: none; }
.mobile-drop-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); box-shadow: var(--shadow); }
.mobile-drop-header > div { min-width: 0; }
.mobile-drop-header .eyebrow { margin-bottom: .1rem; }
.mobile-drop-header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-drop-header > span { flex: 0 0 auto; color: var(--muted); font-size: .72rem; font-weight: 750; }
.mobile-drop-grid { display: grid; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .42rem; }
.mobile-drop-cell { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-top: 4px solid transparent; border-left: 4px solid transparent; border-radius: .62rem; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.mobile-drop-cell.importance-high { border-top-color: var(--high); }
.mobile-drop-cell.importance-normal { border-top-color: var(--normal); }
.mobile-drop-cell.importance-low { border-top-color: var(--low); }
.mobile-drop-cell.urgency-now { border-left-color: var(--now); }
.mobile-drop-cell.urgency-soon { border-left-color: var(--soon); }
.mobile-drop-cell.urgency-later { border-left-color: var(--later); }
.mobile-drop-cell > header { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .28rem; padding: .3rem .38rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mobile-drop-cell > header b { color: var(--accent); font-size: .82rem; }
.mobile-drop-cell > header span { overflow: hidden; font-size: .62rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.mobile-drop-slots { display: grid; min-height: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.mobile-drop-slot { display: grid; min-width: 0; min-height: 0; grid-template-columns: 1.15rem minmax(0, 1fr); align-items: center; gap: .22rem; padding: .18rem .28rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.mobile-drop-slot:last-child { border-bottom: 0; }
.mobile-drop-slot > span { display: grid; width: 1.05rem; height: 1.05rem; place-items: center; border-radius: 50%; color: var(--primary-contrast); background: var(--primary); font-size: .62rem; font-weight: 900; }
.mobile-drop-slot small { overflow: hidden; color: var(--muted); font-size: .56rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mobile-drop-slot.available small { opacity: .9; }
.mobile-drop-slot.unavailable { opacity: .34; background: var(--surface-2); }
.mobile-drop-slot.unavailable > span { color: var(--muted); background: var(--border); }
.mobile-drop-slot.selected { color: var(--primary-contrast); background: var(--primary); box-shadow: inset 0 0 0 3px var(--accent); }
.mobile-drop-slot.selected > span { color: var(--primary); background: var(--primary-contrast); }
.mobile-drop-slot.selected small { color: inherit; }
.mobile-drop-note { margin: 0; padding: .42rem .6rem; border: 1px solid var(--border); border-radius: .55rem; color: var(--muted); background: var(--surface); text-align: center; font-size: .68rem; font-weight: 750; }
.focused-cell-body { padding: .75rem .8rem 1rem; }
.focused-cell { min-height: 0; border: 1px solid var(--border); border-radius: .7rem; }
.focused-cell-summary { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; padding: .15rem .15rem 0; color: var(--muted); font-size: .75rem; font-weight: 750; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; align-items: start; justify-items: center; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); background: rgba(12, 19, 27, .64); backdrop-filter: blur(4px); }
.modal { width: min(640px, 100%); margin: auto; overflow: hidden; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface); box-shadow: 0 28px 80px rgba(0, 0, 0, .35); }
.wide-modal { width: min(940px, 100%); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin-bottom: 0; }
.icon-button { width: 2.2rem; height: 2.2rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-2); cursor: pointer; font-size: 1.35rem; }
.modal-body, .task-form { padding: 1rem 1.1rem 1.2rem; }
.task-form { display: grid; gap: .85rem; }
.task-form label, .backup-panel section { display: grid; gap: .35rem; }
.task-form label > span, .task-form .form-grid label > span { color: var(--muted); font-size: .78rem; font-weight: 750; }
input, textarea, select { width: 100%; padding: .62rem .68rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-2); color: var(--text); }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.checkbox-row { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: .55rem !important; color: var(--muted); font-size: .8rem; }
.checkbox-row input { width: auto; margin-top: .15rem; }
.placement-note, .help-text { margin: 0; padding: .65rem .75rem; border-radius: .5rem; background: var(--surface-2); color: var(--muted); font-size: .8rem; line-height: 1.4; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .2rem; }
.split-actions { align-items: center; justify-content: space-between; }
.split-actions > div { display: flex; gap: .5rem; }

.ordered-list, .queue-list, .history-list { display: grid; gap: .5rem; margin-top: .85rem; }
.ordered-item { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 8rem 8rem 2rem; align-items: center; gap: .55rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .5rem; }
.ordered-item.is-next { border-color: var(--accent); }
.ordered-item > strong { color: var(--accent); }
.ordered-item > button:not(.mini-complete) { overflow: hidden; border: 0; background: none; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.ordered-item > span { overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.ordered-item .ordered-due { min-height: 1em; }
.queue-tabs { display: grid; width: min(15rem, calc(100% - 2rem)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .34rem; margin: .7rem auto; padding: 0; }
.queue-tabs button { display: grid; min-width: 0; min-height: 3.35rem; grid-template-rows: auto auto auto; place-items: center; gap: .04rem; padding: .24rem .28rem; overflow: hidden; border: 1px solid var(--border); border-top: 3px solid transparent; border-left: 3px solid transparent; border-radius: .46rem; background: var(--surface-2); cursor: pointer; text-align: center; }
.queue-tabs button.importance-high { border-top-color: var(--high); }
.queue-tabs button.importance-normal { border-top-color: var(--normal); }
.queue-tabs button.importance-low { border-top-color: var(--low); }
.queue-tabs button.urgency-now { border-left-color: var(--now); }
.queue-tabs button.urgency-soon { border-left-color: var(--soon); }
.queue-tabs button.urgency-later { border-left-color: var(--later); }
.queue-tabs button small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: .52rem; font-weight: 800; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.queue-tabs button strong { color: var(--accent); font-size: 1rem; line-height: 1; }
.queue-tabs button span { color: var(--muted); font-size: .58rem; font-weight: 800; line-height: 1.05; }
.queue-tabs button.active { color: var(--primary-contrast); border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.queue-tabs button.active strong, .queue-tabs button.active small, .queue-tabs button.active span { color: inherit; }
.queue-heading { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.queue-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .5rem; }
.queue-main { min-width: 0; }
.queue-main button { display: block; max-width: 100%; overflow: hidden; border: 0; background: none; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.queue-main span { color: var(--muted); font-size: .73rem; }
.queue-actions { display: flex; gap: .25rem; }
.queue-actions .promote { min-width: auto; padding-inline: .55rem; color: var(--success); }
.history-item { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto auto; align-items: center; gap: .65rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .5rem; }
.history-item > div { display: grid; min-width: 0; }
.history-item > div span { color: var(--muted); font-size: .73rem; }
.history-item button { border: 0; background: none; cursor: pointer; color: var(--accent); font-weight: 750; }
.history-status { padding: .28rem .45rem; border-radius: 999px; text-align: center; font-size: .7rem; font-weight: 850; text-transform: capitalize; }
.history-status.completed { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.history-status.cancelled { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.danger-text { color: var(--danger) !important; }
.empty-panel { margin: 1rem 0 0; padding: 1rem; border: 1px dashed var(--border); border-radius: .55rem; color: var(--muted); text-align: center; }

.backup-panel { display: grid; gap: 1rem; }
.backup-panel section { padding: .9rem; border: 1px solid var(--border); border-radius: .65rem; }
.backup-panel h3 { margin-bottom: .25rem; }
.backup-panel p { margin-bottom: .6rem; color: var(--muted); font-size: .84rem; }
.file-button { display: inline-flex; width: max-content; min-height: 2.45rem; align-items: center; padding: .55rem .82rem; border-radius: .55rem; color: var(--primary-contrast); background: var(--primary); cursor: pointer; font-weight: 750; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)) !important; }



.toast { position: fixed; z-index: 70; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); max-width: min(420px, calc(100vw - 2rem)); padding: .75rem .9rem; border-radius: .6rem; color: #fff; background: var(--primary); box-shadow: var(--shadow); font-weight: 700; text-align: center; transform: translateX(-50%); }
.toast.error { background: var(--danger); }

@media (max-width: 900px) {
  /* Keep the mobile overview above the matrix intentionally compact. */
  .app-shell { padding-top: .4rem; }
  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
  }
  .app-header .eyebrow,
  .app-header .subtitle { display: none; }
  .app-header h1 { margin: 0; font-size: 1.35rem; line-height: 1.05; }
  .header-status { justify-content: flex-end; gap: .3rem; }
  .connection { padding: .24rem .45rem; font-size: .7rem; }
  .header-status .button { min-height: 1.85rem; padding: .25rem .45rem; font-size: .72rem; }
  .title-line { align-items: center; }

  .dashboard-strip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: .3rem;
    margin-bottom: .45rem;
  }
  .summary-bar {
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .35rem .5rem;
    border-radius: .5rem;
  }
  .summary-next { gap: .3rem; min-width: 0; }
  .summary-label { font-size: .62rem; }
  .next-task { gap: .25rem; min-width: 0; font-size: .75rem; }
  .summary-counts { flex: 0 0 auto; justify-content: flex-end; gap: .35rem; font-size: .68rem; }

  .toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
    margin: 0;
  }
  .desktop-action-label { display: none; }
  .mobile-action-label { display: inline; }
  .toolbar .button {
    grid-column: auto;
    min-width: 0;
    min-height: 1.85rem;
    padding: .25rem .2rem;
    overflow: hidden;
    border-radius: .4rem;
    font-size: .68rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .toolbar .button-count {
    min-width: 1.05rem;
    height: 1.05rem;
    margin-left: .1rem;
    font-size: .62rem;
  }

  .desktop-help, .desktop-matrix { display: none; }
  .mobile-help { display: none; }

  .matrix-section { overflow: hidden; }
  .section-heading { align-items: center; flex-direction: row; padding: .45rem .6rem; }
  .section-heading h2 { margin: 0; font-size: 1rem; line-height: 1.1; }
  .mobile-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .65rem; }
  .mobile-matrix.is-loading { opacity: .55; }

  .cell-add { width: 2.2rem; min-height: 2.2rem; }
  .queue-link { min-height: 2.2rem; }
  .task-card { grid-template-columns: 3.1rem minmax(0, 1fr) 4.35rem; min-height: 80px; }
  .task-actions { grid-template-columns: repeat(2, 2rem); grid-template-rows: repeat(3, 2rem); gap: .2rem; }
  .task-actions button { min-width: 2rem; min-height: 2rem; }
  .app-footer { gap: .3rem; }
  .form-grid { grid-template-columns: 1fr; }
  .ordered-item { grid-template-columns: 2.8rem minmax(0, 1fr) 2rem; }
  .ordered-item > span { display: none; }
  .queue-item { grid-template-columns: 2.7rem minmax(0, 1fr); }
  .queue-actions { grid-column: 2; flex-wrap: wrap; }
  .history-item { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .history-item > button { justify-self: start; }
}

@media (max-width: 560px) {
  .app-shell { padding-right: .6rem; padding-left: .6rem; }
  .app-header h1 { font-size: 1.22rem; }
  .header-status .button { padding-inline: .35rem; }
  .summary-bar { gap: .3rem; }
  .summary-next { align-items: center; }
  .summary-counts { gap: .22rem .42rem; font-size: .62rem; }
  .summary-counts span { white-space: nowrap; }
  .toolbar { gap: .2rem; }
  .toolbar .button { min-height: 1.72rem; padding: .22rem .12rem; font-size: .62rem; }
  .section-heading { padding: .4rem .5rem; }
  .mobile-matrix { gap: .38rem; padding: .5rem; }
  .mobile-cell-open { min-height: 4.65rem; padding: .62rem .45rem .4rem; }
  .mobile-cell-name span { font-size: .67rem; white-space: normal; }
  .mobile-cell-actions { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .24rem; padding: 0 .35rem .38rem; }
  .mobile-cell-actions .cell-add, .mobile-cell-actions .queue-link { min-height: 2.05rem; }
  .focused-cell { padding: .55rem; }
  .task-card { grid-template-columns: 2.85rem minmax(0, 1fr) 4.3rem; gap: .3rem; padding: .42rem; }
  .drag-handle { grid-template-columns: .8rem 1fr; padding: .1rem; font-size: .7rem; }
  .grip { font-size: .9rem; }
  .task-title { font-size: .9rem; }
  .task-notes { -webkit-line-clamp: 1; }

  .modal-backdrop { align-items: end; padding: 0; }
  .modal, .wide-modal { width: 100%; max-height: 100dvh; margin: 0; overflow-y: auto; border-right: 0; border-bottom: 0; border-left: 0; border-radius: .9rem .9rem 0 0; }
  .modal-header { position: sticky; z-index: 2; top: 0; padding: .8rem .9rem; background: var(--surface); }
  .modal-body, .task-form { padding: .85rem .9rem max(1rem, env(safe-area-inset-bottom)); }
  .split-actions { align-items: stretch; gap: .6rem; }
  .split-actions > div:last-child { flex: 1; justify-content: flex-end; }
  .split-actions .button { min-height: 2.7rem; }
  .focused-cell-header { position: sticky; }
  .focused-cell-actions { gap: .25rem; }
  .focused-cell-actions .queue-link { padding-inline: .4rem; }
  .mobile-cell-switcher { position: sticky; z-index: 1; top: 4.65rem; padding: .45rem .55rem; }
  .mobile-cell-switcher button { min-height: 2.5rem; padding: .25rem .3rem; }
  .mobile-cell-switcher button span { font-size: .58rem; }
  .mobile-drag-help { padding-inline: .65rem; }
  .mobile-drop-overlay { gap: .42rem; padding-right: .42rem; padding-left: .42rem; }
  .mobile-drop-header { padding: .42rem .5rem; }
  .mobile-drop-header > span { display: none; }
  .mobile-drop-grid { gap: .3rem; }
  .mobile-drop-cell { border-top-width: 3px; border-left-width: 3px; border-radius: .5rem; }
  .mobile-drop-cell > header { padding: .23rem .28rem; }
  .mobile-drop-cell > header span { font-size: .56rem; }
  .mobile-drop-slot { grid-template-columns: .95rem minmax(0, 1fr); gap: .15rem; padding: .12rem .2rem; }
  .mobile-drop-slot > span { width: .9rem; height: .9rem; font-size: .56rem; }
  .mobile-drop-slot small { font-size: .5rem; }
  .mobile-drop-note { padding: .32rem .45rem; font-size: .62rem; }
  .focused-cell-body { padding: .6rem .55rem max(.8rem, env(safe-area-inset-bottom)); }
  .queue-tabs { width: min(14rem, calc(100% - 1.4rem)); gap: .28rem; }
  .queue-tabs button { min-height: 3.15rem; padding: .2rem .24rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12181f;
    --surface: #1b242e;
    --surface-2: #222e3a;
    --text: #e9eef3;
    --muted: #a4b0bc;
    --border: #394857;
    --shadow: 0 12px 36px rgba(0, 0, 0, .3);
    --primary: #b8cee0;
    --primary-contrast: #15202a;
    --accent: #7eb0d0;
  }
  .cell-priority, .queue-tabs button.active { color: var(--primary-contrast); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Priority-mode selector */
.section-tools { display: flex; align-items: center; gap: 1rem; }
.priority-toggle { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem; border: 1px solid var(--border); border-radius: .58rem; background: var(--surface-2); white-space: nowrap; }
.priority-toggle > span { padding: 0 .35rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.priority-toggle button { min-height: 1.9rem; padding: .28rem .52rem; border: 0; border-radius: .4rem; background: transparent; color: var(--muted); cursor: pointer; font-size: .78rem; font-weight: 800; }
.priority-toggle button:hover, .priority-toggle button:focus-visible { color: var(--text); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -2px; }
.priority-toggle button.active { color: var(--primary-contrast); background: var(--primary); }

@media (max-width: 900px) {
  .section-tools { margin-left: auto; gap: .35rem; }
  .priority-toggle > span { display: none; }
  .priority-toggle button { min-height: 1.72rem; padding: .2rem .38rem; font-size: .68rem; }
}

@media (max-width: 420px) {
  .section-heading h2 { font-size: .9rem; }
  .priority-toggle button { padding-inline: .28rem; font-size: .63rem; }
}

/* v0.8.0 interface tuning */
body { min-height: 100dvh; }
.app-shell { display: flex; min-height: 100dvh; flex-direction: column; }
.app-footer { margin-top: auto; }

.matrix-label { display: inline-flex; min-width: 0; align-items: baseline; gap: .32em; }
.matrix-label.compact-label { gap: .24em; }
.matrix-label.heading-label { flex-wrap: wrap; }
.matrix-label.inline-label { margin-inline: .15em; }
.dimension-label { min-width: 0; font-weight: 850; white-space: nowrap; }
.importance-label.importance-high { color: var(--high); }
.importance-label.importance-normal { color: var(--normal); }
.importance-label.importance-low { color: var(--low); }
.urgency-label.urgency-now { color: var(--now); }
.urgency-label.urgency-soon { color: var(--soon); }
.urgency-label.urgency-later { color: var(--later); }
.cell-heading > .matrix-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-heading > .matrix-label .dimension-label { overflow: hidden; text-overflow: ellipsis; }
.mobile-cell-name > .matrix-label { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; }
.mobile-cell-name > .matrix-label .dimension-label { overflow: hidden; text-overflow: ellipsis; }
.mobile-cell-switcher .matrix-label,
.mobile-drop-cell .matrix-label { overflow: hidden; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.mobile-cell-switcher .dimension-label,
.mobile-drop-cell .dimension-label { overflow: hidden; text-overflow: ellipsis; }

.settings-panel { display: grid; gap: .7rem; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .85rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface-2); }
.setting-row h3 { margin-bottom: .18rem; }
.setting-row p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.setting-row > .button { min-width: 9.4rem; }
.text-size-control { display: grid; grid-template-columns: 2.25rem 3.25rem 2.25rem; align-items: center; gap: .25rem; }
.text-size-control button { min-height: 2.25rem; border: 1px solid var(--border); border-radius: .45rem; color: var(--accent); background: var(--surface); cursor: pointer; font-weight: 900; }
.text-size-control button:hover, .text-size-control button:focus-visible { border-color: var(--accent); outline: none; }
.text-size-control output { color: var(--text); text-align: center; font-size: .82rem; font-weight: 850; }

.preference-scope-control { min-width: 15.5rem; }
.preference-source-panel { display: grid; gap: .7rem; }
.preference-source-panel > p { margin: 0 0 .15rem; color: var(--muted); }
.pending-action-note { padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--middle) 65%, var(--border)); border-radius: .5rem; background: color-mix(in srgb, var(--middle) 10%, var(--surface)); color: var(--text); font-weight: 750; }

.share-modal { width: min(540px, 100%); }
.share-panel { display: grid; justify-items: center; gap: .75rem; text-align: center; }
.share-title { margin: 0; color: var(--text); font-size: 1.35rem; font-weight: 900; line-height: 1.15; }
.share-title span { color: var(--muted); font-size: .82em; font-weight: 750; }
.share-panel img { display: block; width: min(100%, 430px); height: auto; border: 1px solid var(--border); border-radius: .7rem; background: #fff; }
.share-panel a { color: var(--accent); font-weight: 800; text-decoration: none; }
.share-panel a:hover, .share-panel a:focus-visible { text-decoration: underline; }

.copyright-link { color: inherit; text-decoration: none; }
.copyright-link:hover, .copyright-link:focus-visible { color: var(--accent); }

.toast { color: var(--primary-contrast); background: var(--middle); }
.toast.error { color: var(--primary-contrast); background: var(--middle); box-shadow: inset 0 0 0 2px var(--danger), var(--shadow); }

.queue-tabs button.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.queue-tabs button.active strong,
.queue-tabs button.active span { color: inherit; }
.queue-tabs button.active .importance-label.importance-high { color: var(--high); }
.queue-tabs button.active .importance-label.importance-normal { color: var(--normal); }
.queue-tabs button.active .importance-label.importance-low { color: var(--low); }
.queue-tabs button.active .urgency-label.urgency-now { color: var(--now); }
.queue-tabs button.active .urgency-label.urgency-soon { color: var(--soon); }
.queue-tabs button.active .urgency-label.urgency-later { color: var(--later); }
.queue-tabs .backlog-cell-label { max-width: 100%; justify-content: center; overflow: hidden; font-size: .52rem; line-height: 1.05; }
.queue-tabs .backlog-cell-label .dimension-label { overflow: hidden; text-overflow: ellipsis; }
.queue-heading .matrix-label { margin-left: .15rem; }
.file-button { color: var(--primary-contrast) !important; }

.focused-cell .task-actions .edit { color: #d9ad22; }

@media (min-width: 901px) {
  .desktop-matrix .task-actions .edit { color: #d9ad22; }
  .desktop-matrix .task-actions .move { color: var(--accent); }
  .desktop-matrix .task-actions .complete { color: #18a957; }
  .desktop-matrix .task-actions .cancel { color: #e43d43; }
}

@media (max-width: 900px) {
  .toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-footer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "data"
      "version"
      "copyright";
    justify-items: stretch;
    text-align: center;
  }
  .footer-data, .footer-version, .footer-copyright { width: 100%; justify-self: stretch; text-align: center; }
  .setting-row { grid-template-columns: 1fr; }
  .setting-row > .button { width: 100%; min-width: 0; }
  .text-size-control { justify-content: center; }
}

@media (max-width: 560px) {
  .settings-panel { gap: .55rem; }
  .setting-row { gap: .55rem; padding: .7rem; }
  .share-panel img { width: min(100%, 360px); }
}

/* v0.8.1 grid orientation and help access */
.help-link {
  display: inline-grid;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  background: var(--surface);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}
.help-link:hover,
.help-link:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

/* Header colors follow whichever dimension occupies that axis. */
.column-head.importance-high { color: var(--high); }
.column-head.importance-normal { color: var(--normal); }
.column-head.importance-low { color: var(--low); }
.row-head.urgency-now { border-top-color: var(--now); }
.row-head.urgency-soon { border-top-color: var(--soon); }
.row-head.urgency-later { border-top-color: var(--later); }
.row-head.urgency-now strong { color: var(--now); }
.row-head.urgency-soon strong { color: var(--soon); }
.row-head.urgency-later strong { color: var(--later); }

.orientation-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  padding: .2rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: var(--surface);
}
.orientation-control button {
  min-height: 2.2rem;
  padding: .35rem .55rem;
  border: 0;
  border-radius: .4rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.orientation-control button:hover,
.orientation-control button:focus-visible {
  color: var(--text);
  outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: -2px;
}
.orientation-control button.active {
  color: var(--primary-contrast);
  background: var(--primary);
}

@media (max-width: 900px) {
  .help-link { width: 1.75rem; min-width: 1.75rem; height: 1.75rem; font-size: .85rem; }
  .orientation-control { width: 100%; }
  .orientation-control button { min-height: 2.45rem; }
  .preference-scope-control { min-width: 0; width: 100%; }
}

/* v0.9.0 account and device-pairing UI */
.device-setting-row strong { color: var(--text); }
.device-panel { display: grid; gap: 1rem; }
.device-start-panel, .device-linked-panel, .pairing-code-panel { display: grid; gap: .85rem; }
.device-start-panel > p, .device-linked-panel > p, .pairing-code-panel > p { margin: 0; }
.device-start-panel label { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; font-weight: 800; }
.device-start-panel input { width: 100%; min-height: 2.7rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: .48rem; color: var(--text); background: var(--surface-2); }
.device-start-panel input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.device-status-badge { justify-self: start; padding: .25rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.device-status-badge.linked { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.device-status-badge.pending { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pairing-code { display: grid; width: min(100%, 320px); justify-self: center; gap: .15rem; padding: 1rem; border: 2px solid var(--accent); border-radius: .75rem; color: var(--text); background: var(--surface-2); cursor: pointer; text-align: center; }
.pairing-code strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.7rem, 7vw, 2.5rem); letter-spacing: .08em; }
.pairing-code small { color: var(--muted); font-weight: 750; }
.pairing-expiry { text-align: center; }
.pairing-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.split-actions { justify-content: space-between; }
.device-error { color: var(--danger); font-weight: 750; }
@media (max-width: 600px) {
  .pairing-actions { grid-template-columns: 1fr 1fr; }
  .pairing-actions .primary { grid-column: 1 / -1; }
  .split-actions { align-items: stretch; flex-direction: column; }
}

/* v0.9.2+ single-writer handoff, snapshot status, and v0.9.3 stabilization */
.device-control-status,
.device-control-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .36rem .62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
}
button.device-control-status { cursor: pointer; }
.device-control-status.control-active,
.device-control-badge.control-active { border-color: color-mix(in srgb, var(--success) 60%, var(--border)); color: var(--success); }
.device-control-status.control-view,
.device-control-badge.control-view,
.device-control-status.control-viewer,
.device-control-badge.control-viewer { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.device-control-status.control-waiting,
.device-control-badge.control-waiting { border-color: color-mix(in srgb, var(--middle) 70%, var(--border)); color: var(--middle-text); }
.device-control-status.sync-error,
.device-control-badge.sync-error,
.device-control-status.control-revoked,
.device-control-badge.control-revoked { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); color: var(--danger); }
.device-control-heading { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.control-details { display: grid; gap: .65rem; }
.control-details > p { margin: 0; }
.control-details dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.control-details dl div { padding: .55rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-2); text-align: center; }
.control-details dt { color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.control-details dd { margin: .15rem 0 0; font-weight: 900; }
.control-actions { flex-wrap: wrap; }
.recovery-panel { display: grid; gap: .55rem; padding: .7rem; border: 1px solid color-mix(in srgb, var(--middle) 65%, var(--border)); border-radius: .55rem; background: color-mix(in srgb, var(--middle) 9%, var(--surface)); }
.recovery-panel p { margin: 0; }
.device-advanced { padding-top: .25rem; border-top: 1px solid var(--border); }
.device-advanced summary { cursor: pointer; color: var(--muted); font-size: .82rem; font-weight: 800; }
.device-advanced .button { margin-top: .65rem; }
@media (max-width: 900px) {
  .device-control-status { min-height: 1.85rem; padding: .24rem .45rem; font-size: .68rem; }
  .control-details dl { grid-template-columns: 1fr; }
  .device-control-heading { align-items: flex-start; flex-direction: column; }
}

/* v0.11.1 UAT interface refinements */
:root { --past-due: #7c3f98; }

.app-brand { display: flex; align-items: center; gap: .7rem; }
.app-brand > img { width: 58px; height: 58px; border-radius: .65rem; }
.app-brand .eyebrow { margin: .18rem 0 0; }

.device-disabled > :not(.disabled-device-screen) { display: none !important; }
.disabled-device-screen { min-height: calc(100vh - 3.25rem); min-height: calc(100dvh - 3.25rem); display: grid; align-content: center; justify-items: center; gap: 1.1rem; text-align: center; }
.disabled-device-screen h1, .disabled-device-screen p { margin: 0; }
.disabled-device-screen img { width: min(192px, 48vw); height: auto; }
.disabled-device-screen p { font-size: 1.15rem; font-weight: 800; }

.summary-bar { justify-content: flex-start; }
.summary-counts { justify-content: flex-start; }

.axis-corner { padding: .35rem; border-top: 0; border-left: 0; color: var(--muted); background: var(--surface); cursor: pointer; }
.axis-corner:hover, .axis-corner:focus-visible { background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: -2px; }
.axis-corner > span { display: flex; align-items: center; gap: .25rem; }
.axis-triangle { color: var(--muted); font-size: .72rem; }
.axis-triangle.favored { color: var(--success); }

.due-date.due-past { color: var(--past-due); font-weight: 850; }
.due-date.due-today { color: var(--now); font-weight: 850; }
.due-date.due-soon { color: var(--soon); font-weight: 850; }
.due-date.due-later { color: var(--later); font-weight: 800; }
.task-card.is-overdue { border-left-color: var(--past-due); }

.task-form select.importance-high { border-color: var(--high); color: var(--high); font-weight: 800; }
.task-form select.importance-normal { border-color: var(--normal); color: var(--normal); font-weight: 800; }
.task-form select.importance-low { border-color: var(--low); color: var(--low); font-weight: 800; }
.task-form select.urgency-now { border-color: var(--now); color: var(--now); font-weight: 800; }
.task-form select.urgency-soon { border-color: var(--soon); color: var(--soon); font-weight: 800; }
.task-form select.urgency-later { border-color: var(--later); color: var(--later); font-weight: 800; }
.task-form select option { color: var(--text); background: var(--surface); }
.task-form select option.importance-high { color: var(--high); }
.task-form select option.importance-normal { color: var(--normal); }
.task-form select option.importance-low { color: var(--low); }
.task-form select option.urgency-now { color: var(--now); }
.task-form select option.urgency-soon { color: var(--soon); }
.task-form select option.urgency-later { color: var(--later); }

.ordered-list-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; padding: .7rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface-2); }
.ordered-list-controls > label:not(.checkbox-row) { display: grid; gap: .3rem; color: var(--muted); font-size: .78rem; font-weight: 800; }
.ordered-list-controls select { min-height: 2.35rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: .45rem; color: var(--text); background: var(--surface); }

.app-footer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "version copyright"; align-items: center; }
.footer-version { grid-area: version; justify-self: start; }
.footer-copyright { grid-area: copyright; width: auto; justify-self: end; text-align: right; }

.wifi-icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.device-control-status.is-online .wifi-icon { color: var(--success); }
.device-control-status.is-offline .wifi-icon { color: var(--muted); opacity: .38; }
.device-control-status.control-disabled,
.device-control-badge.control-disabled { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); color: var(--danger); }

.device-account-section { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .85rem; border-bottom: 1px solid var(--border); }
.device-account-section h3, .device-section-heading { margin: 0; }
.device-section-heading { margin-top: -.15rem; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 900px) {
  .app-brand { gap: .42rem; }
  .app-brand > img { width: 40px; height: 40px; border-radius: .45rem; }
  .app-header .eyebrow { display: block; margin-top: .08rem; font-size: .54rem; letter-spacing: .07em; }
  .device-control-status { max-width: 10.5rem; overflow: hidden; }
  .device-control-status span { overflow: hidden; text-overflow: ellipsis; }
  .app-footer { grid-template-columns: 1fr; grid-template-areas: "version" "copyright"; justify-items: stretch; text-align: center; }
  .footer-version, .footer-copyright { width: 100%; justify-self: stretch; text-align: center; }
  .ordered-list-controls { align-items: stretch; flex-direction: column; }
  .ordered-list-controls select { width: 100%; }
  .device-account-section { align-items: stretch; flex-direction: column; }
}

/* v0.11.2 task viewing filter and tag display */
.filter-button { gap: .38rem; }
.filter-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: currentColor; }
.filter-button.filter-clear .filter-icon { color: var(--muted); opacity: .48; }
.filter-button.filter-applied .filter-icon { color: var(--danger); opacity: 1; }
.task-tags { margin: .12rem 0 0; overflow: hidden; color: var(--accent); font-size: .72rem; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.filter-empty-cell { margin: .45rem 0; padding: .55rem; border: 1px dashed var(--border); border-radius: .45rem; color: var(--muted); text-align: center; font-size: .72rem; font-weight: 750; }
.filter-panel { display: grid; gap: .85rem; }
.filter-expression-label { display: grid; gap: .35rem; color: var(--muted); font-size: .8rem; font-weight: 800; }
.filter-fields { display: grid; gap: .65rem; margin: 0; padding: .8rem; border: 1px solid var(--border); border-radius: .6rem; }
.filter-fields legend { padding: 0 .3rem; color: var(--text); font-weight: 850; }
.filter-field-actions { display: flex; gap: .4rem; }
.filter-field-actions .button { min-height: 2rem; padding: .3rem .7rem; }
.filter-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .8rem; }
.filter-field-grid label { display: flex; align-items: center; gap: .45rem; color: var(--text); font-size: .82rem; font-weight: 750; }
.filter-field-grid input { width: auto; }
.filter-error { margin: 0; padding: .65rem .75rem; border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--border)); border-radius: .5rem; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); font-size: .8rem; font-weight: 800; }
.filter-example { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.filter-example code { color: var(--text); white-space: normal; }
.device-section-title { margin: 0; }

@media (max-width: 560px) {
  .filter-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-button { gap: .18rem; }
  .filter-icon { width: .82rem; height: .82rem; }
}


/* v0.12.1 UAT corrections and pagination */
.filter-modal .modal-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.filter-modal .modal-actions > div:last-child { justify-content: flex-end; flex-wrap: nowrap; }
.pagination-controls { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-top: .85rem; flex-wrap: wrap; }
.pagination-controls span { color: var(--muted); font-size: .78rem; font-weight: 750; text-align: center; }
.pagination-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, auto)); gap: .35rem; }
.pagination-controls .button { min-height: 2rem; padding: .35rem .55rem; }

@media (max-width: 560px) {
  .toolbar .button { padding-inline: .06rem; font-size: .58rem; letter-spacing: -.01em; }
  .filter-button { gap: .08rem; }
  .filter-icon { width: .72rem; height: .72rem; }
  .filter-modal .modal-actions { gap: .35rem; }
  .filter-modal .modal-actions .button { min-height: 2.45rem; padding-inline: .55rem; font-size: .72rem; white-space: nowrap; }
  .pagination-controls { display: grid; grid-template-columns: 1fr; gap: .35rem; }
  .pagination-controls span { grid-row: 1; }
  .pagination-buttons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pagination-controls .button { min-width: 0; padding-inline: .18rem; font-size: .66rem; }
}
.mobile-grid-instruction { display: none; margin: 0; padding: 0 .65rem .65rem; color: var(--muted); text-align: center; font-size: .74rem; }
.reminder-settings-row { align-items: start; }
.reminder-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .8rem; margin-top: .65rem; }
.reminder-settings-grid label { display: grid; gap: .3rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
.inline-field { display: flex; gap: .4rem; }
.inline-field .button { flex: 0 0 auto; }
.timezone-setting input { width: 100%; }
.text-link { width: fit-content; min-height: 0; padding: 0; border: 0; color: var(--accent); background: transparent; cursor: pointer; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .18em; }
.text-link:hover, .text-link:focus-visible { color: var(--text); }
.text-link:disabled { opacity: .55; cursor: not-allowed; }
.timezone-link { justify-self: start; margin-top: .05rem; font-size: .74rem; }
.reminder-email-fields { grid-column: 1 / -1; margin: .15rem 0 0; padding: .65rem .75rem .75rem; border: 1px solid var(--border); border-radius: .55rem; }
.reminder-email-fields legend { padding: 0 .3rem; color: var(--text); font-size: .78rem; font-weight: 850; }
.reminder-email-fields p { margin: 0 0 .55rem; color: var(--muted); font-size: .74rem; font-weight: 650; }
.reminder-field-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem .8rem; }
.due-reminder-field { display: grid; align-content: start; gap: .45rem; }
.reminder-checkbox { justify-content: flex-end; margin-top: 0; }
@media (max-width: 900px) { .mobile-grid-instruction { display: block; } }
@media (max-width: 560px) { .reminder-settings-grid { grid-template-columns: 1fr; } .inline-field { align-items: stretch; flex-direction: column; } .reminder-field-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v1.1.0 consolidated account settings, per-task reminders, recurrence, and retained v1.0.1 workflow tools */
.compact-modal { width: min(520px, 100%); }
.stack-form { display: grid; gap: .8rem; }
.stack-form > label { display: grid; gap: .35rem; color: var(--muted); font-size: .8rem; font-weight: 800; }
.field-label-with-help { display: flex; align-items: center; gap: .38rem; }
.field-help-link { display: inline-grid; width: 1.28rem; height: 1.28rem; place-items: center; padding: 0; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 900; line-height: 1; }
.field-help-link:hover, .field-help-link:focus-visible { color: var(--primary-contrast); background: var(--accent); outline: none; }
.task-dates { display: flex; flex-wrap: wrap; gap: .15rem .65rem; margin-top: .22rem; }
.task-dates .start-date, .start-date { color: var(--muted); font-size: .7rem; }
.task-dates .due-date { margin-top: 0; }
.task-reminder-checkbox { align-self: end; min-height: 2.75rem; justify-content: flex-start; }

.saved-filter-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .7rem; padding: .75rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface-2); }
.saved-filter-controls > label { display: grid; gap: .35rem; color: var(--muted); font-size: .8rem; font-weight: 800; }
.saved-filter-buttons { display: flex; gap: .4rem; }

.tag-help-panel, .tag-definition-panel, .custom-priority-panel, .history-panel { display: grid; gap: .85rem; }
.tag-help-panel > p, .tag-definition-panel > p, .custom-priority-panel > p { margin: 0; color: var(--muted); line-height: 1.45; }
.tag-definition-list { display: grid; gap: .45rem; margin: 0; }
.tag-definition-list > div { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .65rem; align-items: center; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-2); }
.tag-definition-list dt { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .4rem; color: var(--primary-contrast); background: var(--primary); font-size: 1rem; font-weight: 900; }
.tag-definition-list dd { margin: 0; font-weight: 750; }
.tag-definition-editor-list { display: grid; gap: .45rem; }
.tag-definition-editor-list article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .5rem; }
.tag-definition-editor-list article > strong { font-size: 1.1rem; text-align: center; }
.tag-definition-form { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .65rem; padding: .8rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface-2); }
.tag-definition-form h3, .tag-definition-form .modal-actions { grid-column: 1 / -1; }
.tag-definition-form label { display: grid; gap: .3rem; color: var(--muted); font-size: .78rem; font-weight: 800; }

.custom-priority-grid { display: grid; grid-template-columns: 8rem repeat(3, minmax(0, 1fr)); gap: .4rem; }
.custom-priority-corner, .custom-priority-column-head, .custom-priority-row-head { display: grid; place-items: center; min-height: 2.2rem; padding: .4rem; color: var(--muted); font-size: .72rem; font-weight: 850; text-align: center; }
.custom-priority-row { display: contents; }
.custom-priority-cell { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; align-items: center; gap: .5rem; min-height: 5rem; padding: .55rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface-2); }
.custom-priority-cell > span { font-size: .75rem; font-weight: 800; line-height: 1.25; }
.custom-priority-cell select { min-width: 0; padding: .45rem; font-weight: 900; text-align: center; }
.custom-priority-cell output { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; justify-self: center; border-radius: 50%; color: var(--primary-contrast); background: var(--primary); font-weight: 900; }
.custom-priority-presets { display: flex; flex-wrap: wrap; gap: .5rem; }

.history-controls { display: grid; grid-template-columns: minmax(13rem, 2fr) repeat(4, minmax(7rem, 1fr)) auto; align-items: end; gap: .6rem; padding: .7rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface-2); }
.history-controls label { display: grid; gap: .3rem; color: var(--muted); font-size: .75rem; font-weight: 800; }
.history-controls .button { min-height: 2.55rem; }
.history-summary { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 750; }
.history-item { grid-template-columns: 6.5rem minmax(0, 1fr) auto auto; }
.history-main { gap: .15rem; }
.history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .65rem; }
.history-main .task-tags { white-space: normal; }

.ordered-item { grid-template-columns: 3.2rem minmax(0, 1fr) 8rem 8rem 8rem 2rem; }
.queue-main { display: grid; min-width: 0; gap: .12rem; }
.queue-main > .start-date, .queue-main > .due-date { margin-top: 0; }
.reminder-settings-grid label small { color: var(--muted); font-size: .7rem; font-weight: 650; line-height: 1.35; }

@media (max-width: 900px) {
  .history-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-search { grid-column: 1 / -1; }
  .history-controls .button { width: 100%; }
  .custom-priority-grid { grid-template-columns: 5rem repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .custom-priority-cell { grid-template-columns: 1fr; min-height: 5.5rem; }
  .custom-priority-cell > span { font-size: .66rem; text-align: center; }
  .ordered-item { grid-template-columns: 2.8rem minmax(0, 1fr) 2rem; }
}

@media (max-width: 560px) {
  .saved-filter-controls { grid-template-columns: 1fr; }
  .saved-filter-buttons .button { flex: 1 1 0; }
  .filter-modal .split-actions { grid-template-columns: 1fr; }
  .filter-modal .split-actions > div { justify-content: stretch; }
  .filter-modal .split-actions .button { flex: 1 1 0; }
  .tag-definition-editor-list article { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .tag-definition-editor-list article .button { width: 100%; }
  .tag-definition-form { grid-template-columns: 1fr; }
  .tag-definition-form h3, .tag-definition-form .modal-actions { grid-column: auto; }
  .custom-priority-grid { grid-template-columns: 3.4rem repeat(3, minmax(0, 1fr)); gap: .2rem; }
  .custom-priority-corner { font-size: .55rem; }
  .custom-priority-column-head, .custom-priority-row-head { padding: .2rem; font-size: .62rem; }
  .custom-priority-cell { min-height: 4.8rem; padding: .25rem; }
  .custom-priority-cell > span { display: none; }
  .custom-priority-cell select { padding: .35rem .15rem; }
  .custom-priority-cell output { width: 2.1rem; height: 2.1rem; }
  .history-controls { grid-template-columns: 1fr 1fr; }
  .history-search, .history-controls label:last-of-type, .history-controls .button { grid-column: 1 / -1; }
  .history-item { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .history-item > button { justify-self: stretch; min-height: 2.2rem; border: 1px solid var(--border); border-radius: .4rem; }
  .task-reminder-checkbox { min-height: auto; }
}
.tag-definition-list > div { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
.tag-definition-list .button { min-height: 2rem; padding: .3rem .65rem; }
@media (max-width: 560px) {
  .tag-definition-list > div { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .tag-definition-list .button { grid-column: 1 / -1; width: 100%; }
}

/* v1.1.0 consolidated Settings/account management */
.setting-row-full { min-width: 0; grid-column: 1 / -1; }
.settings-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.account-settings-content, .settings-details-body { display: grid; gap: .7rem; }
.account-login-summary { margin-top: .7rem; padding: .7rem; border: 1px dashed var(--border); border-radius: .55rem; }
.account-identity-line { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; margin-top: .7rem; padding: .65rem; border-radius: .55rem; background: var(--surface); }
.account-identity-line span { color: var(--muted); font-size: .76rem; font-weight: 750; }
.settings-details { margin-top: .65rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); overflow: clip; }
.settings-details > summary { padding: .7rem .8rem; color: var(--text); cursor: pointer; font-weight: 850; }
.settings-details[open] > summary { border-bottom: 1px solid var(--border); }
.settings-details-body { padding: .8rem; }
.settings-details-body label, .pairing-inline-panel label { display: grid; gap: .3rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.settings-details-body input, .settings-details-body select, .pairing-inline-panel input { width: 100%; min-height: 2.45rem; padding: .48rem .58rem; border: 1px solid var(--border); border-radius: .45rem; color: var(--text); background: var(--surface-2); }
.form-grid-wide { grid-column: 1 / -1; }
.pairing-inline-panel, .pairing-code-panel { display: grid; gap: .65rem; }
.pairing-code-panel .pairing-code { display: inline; width: auto; padding: .2rem .45rem; border-width: 1px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .08em; }
.device-settings-list, .snapshot-settings-list { display: grid; gap: .55rem; }
.settings-device-card, .snapshot-settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, auto); align-items: center; gap: .65rem; padding: .65rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-2); }
.settings-device-card > div:first-child, .snapshot-settings-row > div:first-child { display: grid; gap: .15rem; }
.settings-device-card small, .snapshot-settings-row small { color: var(--muted); font-size: .7rem; }
.settings-device-card.revoked { opacity: .65; }
.device-edit-controls { display: grid; grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, auto) auto; align-items: center; gap: .35rem; }
.button.small { min-height: 2.15rem; padding: .35rem .55rem; font-size: .72rem; }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.timezone-settings-row { align-items: start; }
.timezone-settings-row .timezone-setting { display: grid; max-width: 36rem; gap: .35rem; margin-top: .65rem; }
.timezone-settings-row input { min-height: 2.5rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: .45rem; color: var(--text); background: var(--surface); }

@media (max-width: 900px) {
  .settings-section-heading { flex-direction: column; }
  .settings-section-heading .inline-actions { width: 100%; }
  .settings-section-heading .button { flex: 1 1 10rem; }
  .settings-device-card, .snapshot-settings-row { grid-template-columns: 1fr; }
  .device-edit-controls { grid-template-columns: 1fr 1fr; }
  .device-edit-controls input { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .device-edit-controls { grid-template-columns: 1fr; }
  .device-edit-controls input { grid-column: auto; }
  .device-edit-controls .button, .device-edit-controls select { width: 100%; }
  .account-identity-line { align-items: flex-start; flex-direction: column; }
}

/* v1.1.1 Settings section ordering and collapsible reminder/time-zone panels */
.collapsible-setting-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
}
.settings-top-level-details {
  width: 100%;
  margin-top: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.settings-top-level-details > summary {
  padding: .85rem;
  font-size: 1rem;
}
.settings-top-level-details[open] > summary {
  border-bottom: 1px solid var(--border);
}
.settings-top-level-details > .settings-details-body {
  padding: .85rem;
}
.settings-top-level-details .settings-details-actions {
  justify-content: flex-end;
}


/* v1.1.2 account-settings layout corrections */
.registration-form-grid { align-items: start; }
.registration-form-grid > label { min-height: 4.25rem; align-self: start; align-content: start; }
.registration-form-grid input { display: block; margin: 0; transform: none; }
.registration-form-grid input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.settings-device-card { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.settings-device-summary { display: flex !important; min-width: 0; align-items: baseline; gap: .35rem !important; white-space: nowrap; }
.settings-device-summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.settings-device-summary small { flex: 0 0 auto; }
.device-edit-controls { width: 100%; }

@media (max-width: 560px) {
  .registration-form-grid > label { min-height: 4.1rem; }
  .settings-device-summary { overflow: hidden; }
}

/* v1.1.3 retained-snapshot and task-date polish */
.task-form .task-classification-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-classification-date-grid > label,
.task-classification-date-grid input,
.task-classification-date-grid select { min-width: 0; }
.snapshot-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; }
.snapshot-settings-header p { margin: 0; }
.snapshot-settings-header .button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .snapshot-settings-header { align-items: stretch; flex-direction: column; }
  .snapshot-settings-header .button { width: 100%; }
}

/* v1.2.0 enhanced schedules and reminders */
.task-actions { grid-template-rows: repeat(4, 1.85rem); }
.task-actions .skip, .mini-skip { color: #8a5b00; }
.mini-skip { min-width: 1.8rem; min-height: 1.8rem; padding: .05rem .25rem; border: 1px solid var(--border); border-radius: .34rem; background: var(--surface-2); cursor: pointer; font-weight: 850; line-height: 1; }
.task-classification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-schedule-fields, .schedule-builder-details, .schedule-preview { border: 1px solid var(--border); border-radius: .7rem; padding: .75rem; background: var(--surface-2); }
.schedule-summary-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.schedule-summary-row > div:first-child { display: grid; gap: .25rem; min-width: 0; }
.schedule-summary-row strong { overflow-wrap: anywhere; }
.schedule-summary-row small, .schedule-builder-grid small, .digest-settings > small { color: var(--muted); line-height: 1.35; }
.schedule-panel { display: grid; gap: .85rem; }
.schedule-natural-entry { display: grid; gap: .55rem; }
.schedule-entry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.schedule-entry-row input, .schedule-entry-row button { min-height: 3rem; }
.schedule-quick-buttons, .weekday-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.schedule-quick-buttons button, .weekday-picker button { min-height: 2.8rem; padding: .45rem .75rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--surface); color: var(--text); font-weight: 750; cursor: pointer; }
.weekday-picker button.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--surface)); }
.schedule-builder-details summary { cursor: pointer; font-weight: 850; }
.schedule-builder-details > div, .schedule-builder-details > fieldset, .schedule-builder-details > label { margin-top: .7rem; }
.schedule-builder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.schedule-builder-grid label, .schedule-builder-details > label { display: grid; gap: .28rem; font-weight: 750; }
.schedule-builder-grid input, .schedule-builder-grid select, .schedule-builder-details > label input { min-height: 2.8rem; }
.schedule-preview h3 { margin: 0 0 .3rem; }
.schedule-preview p { margin: 0; color: var(--muted); }
.schedule-preview ol { margin: .45rem 0 0; padding-left: 1.4rem; }
.form-error { color: var(--danger); font-weight: 800; }
.form-warning { color: #8a5b00; font-weight: 750; }
.digest-settings { grid-column: 1 / -1; }
.digest-time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .55rem 0; }
.history-status.skipped { color: #8a5b00; background: color-mix(in srgb, #b27800 14%, transparent); }
@media (max-width: 680px) {
  .task-actions { grid-template-rows: repeat(4, 2rem); }
  .schedule-summary-row { align-items: stretch; flex-direction: column; }
  .schedule-summary-row .inline-actions { justify-content: flex-start; }
  .schedule-entry-row { grid-template-columns: 1fr; }
  .schedule-builder-grid, .digest-time-grid { grid-template-columns: 1fr; }
  .schedule-quick-buttons button, .weekday-picker button { min-height: 3rem; }
}