/* Lilo — design tokens + login + app shell.                          */
/* M5: full three-column desktop layout, static placeholder content.  */
/* M10 will replace the mobile rules with a proper iOS-style stack.   */

:root {
  /* Page background — gradient stops driven by theme. Default is Mint→Sky. */
  --bg-grad-from:   #C7ECEE;
  --bg-grad-to:     #B4D3E0;
  --bg-app:         linear-gradient(135deg, var(--bg-grad-from) 0%, var(--bg-grad-to) 100%);

  /* Panels are tinted navy glass — translucent over the page gradient.
     The two-stop gradient on the panel itself adds the subtle "glass" sheen. */
  --bg-panel:       linear-gradient(135deg, rgba(27, 31, 42, 0.78), rgba(35, 39, 53, 0.72));
  --bg-panel-alt:   linear-gradient(135deg, rgba(35, 39, 53, 0.80), rgba(45, 49, 66, 0.72));

  /* Hover / selected stay near-opaque so rows still read clearly against the panel. */
  --bg-hover:       rgba(45, 49, 66, 0.85);
  --bg-selected:    rgba(53, 59, 79, 0.92);

  --accent:         #FF5A3C;
  --text-primary:   #FFFFFF;
  --text-secondary: #B4BCC9;
  --text-muted:     #7B8494;
  --border-subtle:  rgba(255, 255, 255, 0.10);
  --checkbox-ring:  #8C95A4;

  /* Glass effect — applied to panels via backdrop-filter. */
  --glass-blur:     blur(20px) saturate(140%);
  --glass-border:   1px solid rgba(255, 255, 255, 0.12);
  --glass-shadow:   0 12px 32px rgba(8, 14, 30, 0.18);

  --radius-panel: 16px;
  --radius-row:   10px;
  --gap-frame:    14px;
  --font-stack:   system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =============================================================
   Background-gradient themes. Picked from Settings → Background.
   Default is Mint → Sky Blue (no data-theme attribute).
============================================================= */

html[data-theme="mint-sky"]          { --bg-grad-from: #C7ECEE; --bg-grad-to: #B4D3E0; }
html[data-theme="lavender-pink"]     { --bg-grad-from: #E0BBE4; --bg-grad-to: #FFDFD3; }
html[data-theme="peach-yellow"]      { --bg-grad-from: #FFE5B4; --bg-grad-to: #FFF4E0; }
html[data-theme="coral-cream"]       { --bg-grad-from: #FFB7A1; --bg-grad-to: #FFE3C8; }
html[data-theme="sage-cream"]        { --bg-grad-from: #D6E8D5; --bg-grad-to: #F8F0D8; }
html[data-theme="periwinkle-lilac"]  { --bg-grad-from: #C7CEEA; --bg-grad-to: #E0BBE4; }
html[data-theme="rose-quartz"]       { --bg-grad-from: #F4C2D7; --bg-grad-to: #FCDDD9; }
html[data-theme="aqua-periwinkle"]   { --bg-grad-from: #BFE5E0; --bg-grad-to: #C5D2EB; }

/* Solid themes — same colour for both gradient stops. */
html[data-theme="cloud-white"]       { --bg-grad-from: #F4F4EC; --bg-grad-to: #F4F4EC; }
html[data-theme="soft-sage"]         { --bg-grad-from: #B4CFB0; --bg-grad-to: #B4CFB0; }
html[data-theme="dusty-coral"]       { --bg-grad-from: #E8A89C; --bg-grad-to: #E8A89C; }
html[data-theme="powder-blue"]       { --bg-grad-from: #A8BCD4; --bg-grad-to: #A8BCD4; }
html[data-theme="warm-sand"]         { --bg-grad-from: #E8D4A8; --bg-grad-to: #E8D4A8; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* Universal focus ring for keyboard users — coral 2px, matches accent.
   Components that want a tighter / inset variant override below. */
.list-item:focus-visible,
.create-new:focus-visible,
.sign-out:focus-visible,
.task-row__delete:focus-visible,
.subtask-row__delete:focus-visible,
.icon-btn:focus-visible,
.complete-btn:focus-visible,
.mobile-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Task rows have a coloured background — inset the ring so it's visible. */
.task-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-stack);
  color: var(--text-primary);
  background: var(--bg-app);
  background-attachment: fixed; /* keep gradient stable while panels scroll */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

input, button, textarea, kbd { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =============================================================
   Login page
============================================================= */

.login-shell {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-frame);
}

.login-card {
  background: var(--bg-panel);
  border: var(--glass-border);
  border-radius: var(--radius-panel);
  padding: 40px 36px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 24px 64px rgba(8, 14, 30, 0.22);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login-card .subtitle {
  margin: 0 0 28px;
  color: var(--text-secondary);
  font-size: 14px;
}

.login-card label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 16px 0 6px;
}

.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 120ms ease;
}

.login-card input:focus { border-color: var(--accent); }

.login-card button {
  margin-top: 24px;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
  transition: filter 120ms ease;
}

.login-card button:hover  { filter: brightness(1.05); }
.login-card button:active { filter: brightness(0.95); }

.login-error {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 90, 60, 0.12);
  border: 1px solid rgba(255, 90, 60, 0.30);
  font-size: 14px;
}

.login-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.login-footer {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.login-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.login-footer a:hover { text-decoration: underline; }

/* =============================================================
   App shell — three-column desktop
============================================================= */

.app-body { overflow: hidden; }

.app {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  gap: var(--gap-frame);
  /* Tighter top edge — was uniform var(--gap-frame) on all sides. */
  padding: 8px var(--gap-frame) var(--gap-frame);
  height: 100vh;
  height: 100dvh;
  /* Animate detail-column collapse alongside the panel's own slide-out.
     Keep the third track in the grid (0-wide when closed) so we transition
     within a 3-track grid instead of jumping from 3 → 2 tracks. */
  transition: grid-template-columns 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.app--no-detail {
  grid-template-columns: 260px minmax(0, 1fr) 0;
}

.detail-panel {
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}

.app--no-detail .detail-panel {
  transform: translateX(24px);
  opacity: 0;
  pointer-events: none;
}

/* =============================================================
   Modal open/close — quick scale + fade.
   Uses @starting-style + transition-behavior: allow-discrete so the same
   rule transitions both opening and closing without JS hooks. Safe-degrade:
   browsers that don't support these still get instant open/close.
============================================================= */

dialog {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    overlay  180ms allow-discrete,
    display  180ms allow-discrete;
}

dialog:not([open]) {
  opacity: 0;
  transform: scale(0.96);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.96);
  }
}

dialog::backdrop {
  opacity: 1;
  transition: opacity 180ms ease, overlay 180ms allow-discrete, display 180ms allow-discrete;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}

.panel {
  background: var(--bg-panel);
  border: var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* =============================================================
   Sidebar
============================================================= */

.sidebar { background: var(--bg-panel-alt); }

.sidebar__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 12px 12px;
}

.sidebar__heading {
  margin: 14px 6px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.list-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.list-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-row);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  text-align: left;
  transition: background-color 120ms ease;
}

.list-item:hover { background: var(--bg-hover); }

.list-item--selected {
  background: var(--bg-selected);
}

.list-item--selected::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; right: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.list-item__emoji {
  font-size: 15px;
  line-height: 1;
  width: 18px;
  text-align: center;
  flex: 0 0 auto;
}

.list-item__name { flex: 1 1 auto; }

.list-empty {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* "Dashboard" entry above the Lists heading */
.list-nav--top { margin-bottom: 4px; }

/* Per-list options trigger (⋯). Sits inside <li>, hover-revealed,
   stays visible while its dropdown is open. */
.list-nav li { position: relative; }

.list-kebab {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px 0;
  opacity: 0;
  transition: opacity 100ms ease, background-color 120ms ease, color 120ms ease;
  z-index: 1;
}

.list-nav li:hover .list-kebab,
.list-kebab:focus-visible,
.list-kebab.is-open { opacity: 1; }

.list-kebab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* Reserve space inside the list-item button so the name doesn't run under the kebab. */
.list-nav:not(.list-nav--top) .list-item { padding-right: 36px; }

/* Drag-to-reorder visuals.
   Only the regular list <li>s have draggable=true; the Dashboard entry isn't draggable. */
.list-nav li.dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.list-drop-indicator {
  height: 2px;
  background: var(--accent);
  margin: 1px 6px;
  border-radius: 1px;
  pointer-events: none;
  list-style: none;
}

/* Don't reserve right-padding on the selected coral bar's row — already small. */
.list-item--selected::after { right: 0; }

/* Dropdown menu — single shared element positioned via JS. */
.kebab-menu {
  position: fixed;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 4px;
  min-width: 180px;
  z-index: 100;
}

.kebab-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-primary);
  transition: background-color 120ms ease;
}

.kebab-menu__item:hover { background: var(--bg-hover); }
.kebab-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.kebab-menu__item--danger { color: rgba(255, 130, 110, 0.9); }
.kebab-menu__item--danger:hover { background: rgba(255, 90, 60, 0.15); }

.sidebar__heading--shared { margin-top: 14px; }

/* =============================================================
   Invite banners (pending invites this user has received)
============================================================= */

.invite-banners {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
}

.invite-banner {
  background: var(--bg-panel);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-size: 14px;
}

.invite-banner__text { flex: 1 1 auto; }
.invite-banner__text strong { color: var(--text-primary); font-weight: 600; }
.invite-banner__text .from   { color: var(--text-secondary); }

.invite-banner__actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.invite-banner__btn {
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  transition: background-color 120ms ease;
}

.invite-banner__btn:hover { background: rgba(255, 255, 255, 0.12); }

.invite-banner__btn--accept {
  background: var(--accent);
  color: #fff;
}
.invite-banner__btn--accept:hover { filter: brightness(1.05); }

/* =============================================================
   Settings modal — gradient theme picker
============================================================= */

.settings-modal {
  width: min(480px, 92vw);
  background: var(--bg-panel);
  color: var(--text-primary);
  border: var(--glass-border);
  border-radius: 16px;
  padding: 22px 22px 24px;
  font-family: var(--font-stack);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.settings-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.settings-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.settings-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.settings-section { margin-top: 6px; }

.settings-section__heading {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.settings-section__hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.theme-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.theme-card {
  position: relative;
  width: 100%;
  height: 78px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  padding: 0;
}

.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(8, 14, 30, 0.18);
}

.theme-card--selected {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(255, 90, 60, 0.35);
}

.theme-card__label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(20, 25, 40, 0.78);  /* dark text reads well on every light pastel */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.theme-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.theme-card--selected .theme-card__check { display: inline-flex; }

/* =============================================================
   Confirm dialog (generic, used for destructive actions)
============================================================= */

.confirm-modal {
  width: min(360px, 92vw);
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 22px 22px 18px;
  font-family: var(--font-stack);
}

.confirm-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.confirm-modal__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.confirm-modal__message {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-modal__btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  transition: background-color 120ms ease, filter 120ms ease;
}

.confirm-modal__btn:hover { background: rgba(255, 255, 255, 0.12); }

.confirm-modal__btn--primary {
  background: var(--accent);
  color: #fff;
}
.confirm-modal__btn--primary:hover { filter: brightness(1.05); background: var(--accent); }

.confirm-modal__btn--danger {
  background: rgba(255, 90, 60, 0.18);
  color: rgba(255, 130, 110, 1);
}
.confirm-modal__btn--danger:hover { background: rgba(255, 90, 60, 0.28); }

/* =============================================================
   History modal
============================================================= */

.history-modal {
  width: min(560px, 92vw);
  max-height: min(80vh, 720px);
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px 22px 18px;
  font-family: var(--font-stack);
}

/* Flex layout only applies when the dialog is open — otherwise we'd be
   overriding the user-agent `display: none` and the dialog would never hide. */
.history-modal[open] {
  display: flex;
  flex-direction: column;
}

.history-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.history-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex: 0 0 auto;
}

.history-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.history-row {
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.history-row:last-child { border-bottom: 0; }

.history-row__text {
  font-size: 14px;
  line-height: 1.4;
}

.history-row__actor {
  color: var(--text-primary);
  font-weight: 600;
}

.history-row__action { color: var(--text-secondary); }
.history-row__quoted { color: var(--text-primary); }

.history-row__time {
  font-size: 12px;
  color: var(--text-muted);
}

.history-empty {
  padding: 24px 4px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

/* =============================================================
   Share modal
============================================================= */

.share-modal {
  width: min(480px, 92vw);
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px 22px 24px;
  font-family: var(--font-stack);
}

.share-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.share-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.share-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.share-modal__hint {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.share-invite-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.share-invite-form input {
  flex: 1 1 auto;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font: inherit;
  outline: none;
  transition: border-color 120ms ease;
}

.share-invite-form input:focus { border-color: var(--accent); }

.share-invite-form button {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  flex: 0 0 auto;
  transition: filter 120ms ease;
}

.share-invite-form button:hover { filter: brightness(1.05); }

.share-error {
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 90, 60, 0.12);
  border: 1px solid rgba(255, 90, 60, 0.30);
  color: var(--text-primary);
  font-size: 13px;
}

.share-section {
  margin-top: 14px;
}

.share-section__heading {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 14px;
}

.share-row__email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-row__status {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.share-row__remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease;
}

.share-row__remove:hover {
  background: rgba(255, 90, 60, 0.16);
  color: var(--accent);
}

.share-list__empty {
  padding: 8px 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.list-create {
  margin-top: 2px;
}

.list-create__input {
  width: 100%;
  background: var(--bg-hover);
  border: 1px solid rgba(255, 90, 60, 0.45);
  border-radius: var(--radius-row);
  padding: 9px 10px;
  font-size: 15px;
  outline: none;
  font-family: var(--font-stack);
}

.list-create__input::placeholder { color: var(--text-muted); }

.list-create__input--error {
  border-color: rgba(255, 90, 60, 0.95);
  animation: list-create-shake 240ms ease-in-out;
}

@keyframes list-create-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

.sidebar__footer {
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.create-new {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-row);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 120ms ease;
}

.create-new:hover { background: rgba(255, 255, 255, 0.08); }

.create-new__icon {
  width: 16px;
  text-align: center;
  font-weight: 400;
  color: var(--text-secondary);
}

.create-new__label { flex: 1 1 auto; text-align: left; }

.create-new__kbd {
  font-family: var(--font-stack);
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.sidebar__settings {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-row);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}

.sidebar__settings:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.sidebar__settings-icon {
  font-size: 14px;
  line-height: 1;
  width: 16px;
  text-align: center;
}

.sign-out {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  text-align: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 120ms ease;
}

.sign-out:hover { color: var(--text-secondary); }

/* =============================================================
   Main panel — task list
============================================================= */

.main-panel__header {
  height: 0;
  flex: 0 0 auto;
  /* Empty on desktop — the mobile back button lives here on <768px (see media rule). */
}

.main-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 36px 24px;
  display: flex;
  flex-direction: column;
}

/* Empty state shown when no list is selected. */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.empty-state .main-title { margin-bottom: 12px; }
.empty-state .main-subtitle { color: var(--text-secondary); font-weight: 400; }

.empty-state__kbd {
  display: inline-block;
  font-family: var(--font-stack);
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 5px;
}

.list-view { flex: 1; }

/* =============================================================
   Dashboard view — up to 4 list columns side-by-side
============================================================= */

.dashboard-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dashboard-empty {
  color: var(--text-secondary);
  margin: 0 0 20px;
  font-size: 15px;
}

.dashboard-empty strong {
  color: var(--text-primary);
  font-weight: 700;
}

.dashboard-cols {
  margin-top: 24px;       /* breathing room below the "Dashboard" headline */
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  flex: 1;
  min-height: 0;
  overflow-x: auto;
}

.dashboard-col {
  background: linear-gradient(135deg, rgba(45, 49, 66, 0.55), rgba(53, 59, 79, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-y: auto; /* column itself is the scroll container so completed section
                       sits directly below active rows, not pushed to the bottom. */
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

/* Highlight when a task from another list is being dragged over this column. */
.dashboard-col--drop-target {
  border-color: rgba(255, 90, 60, 0.55);
  background: linear-gradient(135deg, rgba(255, 90, 60, 0.12), rgba(255, 90, 60, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 90, 60, 0.30);
}

.dashboard-col__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 10px;
  flex: 0 0 auto;
}

.dashboard-col__emoji {
  font-size: 16px;
  line-height: 1;
}

.dashboard-col__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-col__shared-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
  cursor: help;
}

.dashboard-col__tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Tighter task rows in dashboard columns. */
.dashboard-col .task-row {
  padding: 8px 10px;
  font-size: 14px;
  gap: 10px;
}

.dashboard-col .task-row__title { font-size: 14px; }

.dashboard-col .task-row .task-row__delete { display: none; } /* delete via single-list view */

/* Completed section inside a narrow dashboard column — smaller header, tight margins. */
.dashboard-col .completed-section { margin-top: 10px; }
.dashboard-col .completed-section__toggle {
  font-size: 11px;
  padding: 4px 6px;
  gap: 6px;
}
.dashboard-col .completed-section__list { margin-top: 4px; }

.main-subtitle--muted {
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

.main-title {
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.main-subtitle {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.task-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-row);
  position: relative;
  transition: background-color 120ms ease;
}

.task-row:hover { background: var(--bg-hover); }

.task-row--selected { background: var(--bg-selected); }

.task-row--selected::after {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px; right: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.task-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.task-row__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  cursor: text;
  display: block;
  outline: none;
  border-radius: 4px;
}

.task-row__title:focus-visible {
  outline: 2px solid rgba(255, 90, 60, 0.5);
  outline-offset: 2px;
}

.task-row__title--editing {
  background: var(--bg-panel-alt);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 5px 8px;
  margin: -6px -9px -6px -9px;
  font-family: var(--font-stack);
  width: calc(100% + 18px);
}

.task-row--completed .task-row__title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-row__delete {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 100ms ease, background-color 120ms ease, color 120ms ease;
  align-self: center;
}

.task-row:hover .task-row__delete,
.task-row__delete:focus-visible {
  opacity: 1;
}

.task-row__delete:hover {
  background: rgba(255, 90, 60, 0.16);
  color: var(--accent);
}

.task-list__empty {
  padding: 16px 14px;
  font-size: 14px;
  color: var(--text-muted);
}

/* =============================================================
   Completed section (single-list view only)
============================================================= */

.completed-section {
  margin-top: 28px;
}

.completed-section__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background-color 120ms ease, color 120ms ease;
}

.completed-section__toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.completed-section__caret {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transition: transform 160ms ease;
}

.completed-section__toggle[aria-expanded="false"] .completed-section__caret {
  transform: rotate(-90deg);
}

.completed-section__count {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.completed-section__list {
  margin-top: 6px;
}

/* Settle-down animation when a row goes from active → completed.
   Plays in the row's old position; renderTasks() re-runs after the timeout
   so the row reappears (no animation) inside the completed section. */
@keyframes task-settle-down {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(10px); opacity: 0.55; }
  100% { transform: translateY(14px); opacity: 0;   }
}

.task-row--moving-down {
  animation: task-settle-down 240ms ease forwards;
  pointer-events: none;
}

@keyframes task-rise-up {
  0%   { transform: translateY(0);     opacity: 0;   }
  100% { transform: translateY(-10px); opacity: 0;   }
}

.task-row--moving-up {
  animation: task-rise-up 200ms ease forwards;
  pointer-events: none;
}

.subtask-row--loading {
  padding: 8px 4px;
  font-size: 14px;
  color: var(--text-muted);
}

.task-row__counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Add-task input */

.add-task {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-row);
  border: 1px dashed var(--border-subtle);
  margin-top: 4px;
  transition: border-color 120ms ease;
}

.add-task:focus-within { border-color: rgba(255, 255, 255, 0.16); }

.add-task__plus {
  font-size: 18px;
  color: var(--text-secondary);
  width: 20px;
  text-align: center;
  line-height: 1;
}

.add-task__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 15px;
  color: var(--text-primary);
}

.add-task__input::placeholder { color: var(--text-muted); }

/* =============================================================
   Circular checkboxes
============================================================= */

.task-row__check {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-top: 1px;
}

.task-row__check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.check-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--checkbox-ring);
  background: transparent;
  transition: border-color 120ms ease, background-color 120ms ease;
  position: relative;
  flex: 0 0 auto;
}

.task-row__check:hover .check-circle { border-color: var(--text-secondary); }

.task-row__check input:checked + .check-circle {
  border-color: var(--accent);
  background: var(--accent);
}

.task-row__check input:checked + .check-circle::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.task-row__check input:focus-visible + .check-circle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.check-circle--mini {
  width: 12px;
  height: 12px;
  border-width: 1.25px;
  position: relative;
}

.check-circle--mini.check-circle--checked {
  border-color: var(--accent);
  background: var(--accent);
}

.check-circle--mini.check-circle--checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 1px;
  width: 3px; height: 5px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}

.check-circle--inline {
  width: 16px;
  height: 16px;
  margin-right: 2px;
  vertical-align: -3px;
}

.check-circle--ghost {
  border-style: dashed;
  border-color: var(--text-muted);
  opacity: 0.6;
}

/* =============================================================
   Detail panel
============================================================= */

.detail-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 6px;
  flex: 0 0 auto;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}

.complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}

.complete-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}

.detail-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px 24px;
}

.detail-title {
  margin: 12px 0 24px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: text;
  outline: none;
  border-radius: 6px;
}

.detail-title:focus-visible {
  outline: 2px solid rgba(255, 90, 60, 0.5);
  outline-offset: 4px;
}

.detail-title--editing {
  background: var(--bg-panel-alt);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 4px 10px;
  margin: 8px -11px 20px -11px;
  width: calc(100% + 22px);
  font-family: var(--font-stack);
  color: var(--text-primary);
  display: block;
}

/* Inline check-circle in the Complete button */
.check-circle--inline.check-circle--checked,
.complete-btn--done .check-circle--inline {
  border-color: var(--accent);
  background: var(--accent);
}

.check-circle--inline.check-circle--checked::after,
.complete-btn--done .check-circle--inline::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.check-circle--inline { position: relative; }

.complete-btn--done {
  background: rgba(255, 90, 60, 0.14);
  color: var(--text-primary);
}

.subtask-row--completed .subtask-row__title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.detail-section {
  margin-bottom: 28px;
}

.detail-section__heading {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Subtasks */

.subtask-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subtask-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  border-radius: 8px;
}

.subtask-row__title {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
  cursor: text;
  outline: none;
  border-radius: 4px;
  min-width: 0;
}

.subtask-row__title:focus-visible {
  outline: 2px solid rgba(255, 90, 60, 0.5);
  outline-offset: 2px;
}

.subtask-row__title--editing {
  background: var(--bg-panel-alt);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 4px 8px;
  margin: -5px -9px;
  font-family: var(--font-stack);
  color: var(--text-primary);
  display: block;
  width: calc(100% + 18px);
}

.subtask-row__delete {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 100ms ease, background-color 120ms ease, color 120ms ease;
}

.subtask-row:hover .subtask-row__delete,
.subtask-row__delete:focus-visible { opacity: 1; }

.subtask-row__delete:hover {
  background: rgba(255, 90, 60, 0.16);
  color: var(--accent);
}

.subtask-row--add {
  padding: 6px 4px;
}

.subtask-row__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 15px;
  color: var(--text-primary);
}

.subtask-row__input::placeholder { color: var(--text-muted); }

/* Notes textarea */

.notes-area {
  width: 100%;
  min-height: 96px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  transition: border-color 120ms ease;
}

.notes-area:focus { border-color: rgba(255, 255, 255, 0.16); }
.notes-area::placeholder { color: var(--text-muted); }

.detail-panel__footer {
  flex: 0 0 auto;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-muted);
}

/* =============================================================
   Tablet — collapse the detail panel (proper overlay comes in M10)
============================================================= */

@media (max-width: 1023px) {
  .app {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .detail-panel { display: none; }
  .main-panel__body { padding: 8px 24px 24px; }
}

/* =============================================================
   Mobile back button — visibility flipped by media queries
============================================================= */

.mobile-back {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px 0;
  flex: 0 0 auto;
}

.mobile-back:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-primary);
}

/* =============================================================
   Mobile (<768px) — iOS-style view stack
   Only one of sidebar / main / detail is visible at a time.
   `data-mobile-view` on <main#app> picks which one.
============================================================= */

@media (max-width: 767px) {
  .app-body { overflow: hidden; }

  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100dvh;
    padding: 0;
    gap: 0;
    /* env-safe-area for iOS notch */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .panel { border-radius: 0; }

  /* Default: hide all three; let data-mobile-view reveal one. */
  .sidebar, .main-panel, .detail-panel { display: none; }

  .app[data-mobile-view="lists"]  .sidebar      { display: flex; }
  .app[data-mobile-view="tasks"]  .main-panel   { display: flex; }
  /* !important needed to beat [hidden] { display: none !important } */
  .app[data-mobile-view="detail"] .detail-panel { display: flex !important; }

  /* Reveal mobile back chevrons; hide desktop chrome. */
  .mobile-back { display: inline-flex; }
  .window-dots { display: none; }
  .detail-panel__header .icon-btn { display: none; }

  /* Spacing tweaks — desktop panels assume more breathing room. */
  .sidebar__top      { padding: 12px 12px 0; }
  .sidebar__body     { padding: 8px 12px 12px; }
  .sidebar__footer   { padding: 12px 12px env(safe-area-inset-bottom); }

  .main-panel__header {
    height: auto;
    padding: 12px 16px 0;
    flex: 0 0 auto;
  }
  .main-panel__body { padding: 8px 16px 24px; }
  .main-title { font-size: 28px; }

  .detail-panel__header { padding: 12px 16px 4px; }
  .detail-panel__body   { padding: 8px 16px 24px; }
  .detail-panel__footer { padding: 12px 16px; }
  .detail-title { font-size: 24px; margin: 8px 0 16px; }

  /* Touch targets — hover-reveal controls are otherwise unreachable. */
  .task-row__delete,
  .subtask-row__delete,
  .list-kebab { opacity: 1; }
}