/* DPx To Do. Sizes are in rem so the text-size control scales the whole interface. */
@font-face { font-family: "Urbanist"; src: url("/fonts/Urbanist.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --font-size: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --brand: #00BFA6;
  --bg: #e6e7e9; --pane: #f4f5f6; --card: #fff; --card-2: #eceef0;
  --ink: #171A1D; --ink-2: #353d42; --muted: #5b676b;
  --line: rgba(23, 26, 29, .09); --line-2: rgba(23, 26, 29, .18);
  --accent-ink: #00786a; --accent-soft: rgba(0, 191, 166, .14);
  --btn: #171A1D; --btn-ink: #fff;
  --shadow: 0 1px 2px rgba(20, 34, 40, .05), 0 14px 32px -22px rgba(20, 40, 50, .32);
  --shadow-lg: 0 2px 6px rgba(20, 34, 40, .08), 0 30px 60px -24px rgba(20, 40, 50, .45);
  --p-urgent: #d93a40; --p-high: #d9731a; --p-medium: #3f78d8; --p-low: #7c8a93;
  --late: #c9302c;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1012; --pane: #171A1D; --card: #22272C; --card-2: #2b3137;
  --ink: #F2F5F6; --ink-2: #d3d9dc; --muted: #A9B2B8;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .18);
  --accent-ink: #2fd9c2; --accent-soft: rgba(0, 191, 166, .18);
  --btn: #00BFA6; --btn-ink: #06211d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 32px -22px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 60px -24px rgba(0, 0, 0, .8);
  --p-urgent: #ff7a7e; --p-high: #ffa45c; --p-medium: #8ab4ff; --p-low: #a9b2b8;
  --late: #ff8a84;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 1rem/1.45 "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.grow { flex: 1; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
[hidden] { display: none !important; }

/* ---------- frame ---------- */
.frame { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: .75rem; height: 100dvh; padding: .75rem; max-width: 100rem; margin: 0 auto; }
.pane { background: var(--pane); border-radius: 1.35rem; }
.col { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .75rem; min-width: 0; }
.side { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .8rem; overflow: auto; }
.brand { display: flex; align-items: center; gap: .65rem; padding: .1rem .35rem 1rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.brand img { width: 2.2rem; height: 2.2rem; border-radius: .65rem; box-shadow: var(--shadow); }
.grp { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .9rem .6rem .35rem; }
.side nav { display: grid; gap: .2rem; }
.nav { position: relative; display: flex; align-items: center; gap: .65rem; width: 100%; padding: .55rem .7rem; border-radius: .8rem; color: var(--ink-2); font-weight: 600; text-align: left; transition: background-color .18s ease, color .18s ease, transform .16s var(--ease); }
.nav:active { transform: scale(.97); }
.nav.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.nav.on::before { content: ""; position: absolute; left: -.8rem; top: 22%; bottom: 22%; width: .28rem; border-radius: 0 .3rem .3rem 0; background: var(--brand); }
.nav b { margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 99px; background: var(--btn); color: var(--btn-ink); font-size: .72rem; line-height: 1.5rem; text-align: center; }
.promo { margin-top: auto; padding: 1rem; border-radius: 1.1rem; color: #fff; background: radial-gradient(120% 90% at 0% 100%, #5b2a8c 0%, transparent 60%), radial-gradient(110% 90% at 100% 100%, #00BFA6 0%, transparent 65%), #0c1524; }
.promo strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.promo p { margin: .35rem 0 .8rem; font-size: .78rem; color: rgba(255, 255, 255, .8); }

.top { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; }
.search { display: flex; align-items: center; gap: .5rem; flex: 0 1 22rem; padding: .5rem .8rem; border-radius: 99px; background: var(--card); color: var(--muted); box-shadow: var(--shadow); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--ink); }
.search:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
kbd { font: 600 .7rem/1 inherit; padding: .25rem .4rem; border-radius: .35rem; background: var(--card-2); color: var(--muted); }
.round { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--shadow); transition: transform .16s var(--ease); }
.round:active { transform: scale(.94); }
:root[data-theme="dark"] [data-act="theme"] .ic:first-child, :root[data-theme="light"] [data-act="theme"] .ic:nth-child(2) { display: none; }
.fontctl { display: flex; align-items: center; border-radius: 99px; background: var(--card); box-shadow: var(--shadow); }
.fontctl button { width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 700; transition: transform .16s var(--ease), background-color .18s ease; }
.fontctl button:active { transform: scale(.92); }
.fontctl output { min-width: 1.6rem; text-align: center; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fontctl sub, .fontctl sup { font-size: .7em; }

.main { padding: 1.4rem 1.4rem 2rem; overflow: auto; scrollbar-gutter: stable; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
h1 { font-size: 2.1rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.sub { color: var(--muted); margin-top: .25rem; }
.head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem 1.1rem; border-radius: 99px; font-weight: 600; white-space: nowrap; transition: transform .16s var(--ease), background-color .18s ease, box-shadow .18s ease; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--btn); color: var(--btn-ink); box-shadow: var(--shadow); }
.btn.ghost { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.light { background: rgba(255, 255, 255, .16); color: #fff; width: 100%; backdrop-filter: blur(6px); }
.btn.danger { color: var(--late); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--late) 40%, transparent); }
.btn:disabled { opacity: .7; cursor: progress; }
.btn.busy::before { content: ""; width: .9em; height: .9em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .6s linear infinite; }
.link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.iconbtn { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--muted); transition: background-color .18s ease, color .18s ease, transform .16s var(--ease); }
.iconbtn:active { transform: scale(.92); }

/* ---------- tiles, tabs, filters ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.1rem; }
.tile { display: grid; gap: .1rem; padding: .9rem 1rem; border-radius: 1.1rem; background: var(--card); box-shadow: var(--shadow); text-align: left; transition: transform .16s var(--ease), box-shadow .2s ease; }
.tile:active { transform: scale(.98); }
.tile span { font-weight: 600; }
.tile strong { font-size: 2.3rem; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile em { font-style: normal; font-size: .76rem; color: var(--muted); }
.tile.on { color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgba(0, 191, 166, .9) 0%, transparent 60%), linear-gradient(160deg, #10323a, #0c1524); }
.tile.on em { color: rgba(255, 255, 255, .78); }

.tabs { display: flex; gap: 1.3rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; overflow-x: auto; }
.tab { display: flex; align-items: center; gap: .45rem; padding: .5rem 0 .65rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .18s ease; }
.tab b { font-size: .72rem; padding: .05rem .45rem; border-radius: 99px; background: var(--card-2); color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); border-color: var(--brand); }

.filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.fsel { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; transition: background-color .18s ease, box-shadow .18s ease; }
.fsel span { color: var(--muted); font-weight: 600; }
.fsel select { appearance: none; border: 0; background: none; outline: 0; font-weight: 600; max-width: 11rem; padding-right: 1rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - .3rem) 55%, 100% 55%; background-size: .3rem .3rem; background-repeat: no-repeat; }
.fsel:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.fsel.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent); }
.fsel.on span { color: var(--accent-ink); }
.range { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; }
.range i { font-style: normal; color: var(--muted); }
.range input, .sug-row select, .sug-row input { padding: .38rem .6rem; border-radius: .7rem; border: 1px solid var(--line-2); background: var(--card); }
.switch { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; }
.switch input { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; }
.added { font-size: .76rem; color: var(--muted); }

/* ---------- list ---------- */
.quick { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; margin-bottom: .6rem; border-radius: 1rem; border: 1.5px dashed var(--line-2); color: var(--muted); transition: border-color .18s ease, background-color .18s ease; }
.quick:focus-within { border-style: solid; border-color: var(--brand); background: var(--card); color: var(--accent-ink); }
.quick input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: 1.05rem; color: var(--ink); }
.list { display: grid; gap: .5rem; }
.task { position: relative; display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 1rem .8rem .5rem; border-radius: 1rem; background: var(--card); box-shadow: var(--shadow); user-select: none; -webkit-user-select: none; --p: var(--line-2); }
.task.p-urgent { --p: var(--p-urgent); } .task.p-high { --p: var(--p-high); } .task.p-medium { --p: var(--p-medium); } .task.p-low { --p: var(--p-low); }
.grip { display: grid; place-items: center; width: 1.1rem; height: 1.7rem; color: var(--muted); opacity: 0; transition: opacity .18s ease; }
.list:not(.draggable) .grip { visibility: hidden; }
.list.draggable .task { cursor: grab; }
.check { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--p); color: transparent; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease); }
.check:active { transform: scale(.88); }
.check .ic { width: 1rem; height: 1rem; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .28s var(--ease) .04s; }
.task.is-done .check, .task.checking .check { background: var(--brand); border-color: var(--brand); color: #06211d; }
.task.is-done .check .ic, .task.checking .check .ic { stroke-dashoffset: 0; }
.task-body { flex: 1; min-width: 0; display: grid; gap: .4rem; text-align: left; cursor: inherit; border-radius: .5rem; }
.task-title { font-size: 1.12rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px; transition: background-size .32s var(--ease), color .25s ease; width: fit-content; }
.task.is-done .task-title, .task.checking .task-title { color: var(--muted); background-size: 100% 1.5px; }
.task-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .14rem .6rem; border-radius: 99px; background: var(--card-2); color: var(--ink-2); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip .ic { width: .95em; height: .95em; }
.chip.plain { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.dot { width: .55rem; height: .55rem; border-radius: 50%; }
.chip.pri-urgent { background: color-mix(in srgb, var(--p-urgent) 15%, transparent); color: color-mix(in srgb, var(--p-urgent) 78%, var(--ink)); }
.chip.pri-high { background: color-mix(in srgb, var(--p-high) 16%, transparent); color: color-mix(in srgb, var(--p-high) 70%, var(--ink)); }
.chip.pri-medium { background: color-mix(in srgb, var(--p-medium) 15%, transparent); color: color-mix(in srgb, var(--p-medium) 78%, var(--ink)); }
.chip.pri-low { background: color-mix(in srgb, var(--p-low) 16%, transparent); }
.chip.doing { background: var(--accent-soft); color: var(--accent-ink); }
.chip.due.late { background: color-mix(in srgb, var(--late) 14%, transparent); color: var(--late); }
.chip.due.now { background: var(--accent-soft); color: var(--accent-ink); }
.drag-ghost { opacity: .35; box-shadow: none; }
.drag-lift { box-shadow: var(--shadow-lg) !important; transform: rotate(-1deg) scale(1.02); cursor: grabbing !important; opacity: 1 !important; }
.empty { display: grid; gap: .3rem; justify-items: center; text-align: center; padding: 3rem 1rem; color: var(--muted); border-radius: 1rem; border: 1.5px dashed var(--line-2); }
.empty strong { color: var(--ink); font-size: 1.15rem; }
.empty.block .btn { margin-top: .8rem; }

/* entrance: only when a view opens */
.stagger > * { animation: rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes rise { from { opacity: 0; transform: translateY(.6rem); } }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- clients ---------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.card { padding: 1.1rem; border-radius: 1.1rem; background: var(--card); box-shadow: var(--shadow); }
h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.add { display: flex; gap: .5rem; margin: .8rem 0; }
.add input, .field input, .field select, .field textarea { width: 100%; padding: .62rem .8rem; border-radius: .8rem; border: 1px solid var(--line-2); background: var(--pane); transition: border-color .18s ease, background-color .18s ease; }
.add input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.rows li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.rows input { flex: 1; min-width: 0; padding: .4rem .5rem; border: 1px solid transparent; border-radius: .6rem; background: none; font-weight: 600; }
.rows input:focus { outline: 0; border-color: var(--brand); background: var(--pane); }
.rows .n { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.rows .none { color: var(--muted); padding: .8rem 0; }
.swatch { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); transition: transform .16s var(--ease); }
.swatch:active { transform: scale(.85); }

/* ---------- review ---------- */
.meeting { margin-bottom: 1.4rem; }
.meeting h2 { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.meeting h2 span { font-size: .8rem; font-weight: 500; color: var(--muted); }
.sugs { display: grid; gap: .5rem; }
.sug { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 1rem; background: var(--card); box-shadow: var(--shadow); }
.sug-title { width: 100%; border: 1px solid transparent; border-radius: .6rem; background: none; padding: .2rem .4rem; margin-left: -.4rem; font-size: 1.1rem; font-weight: 600; }
.sug-title:focus { outline: 0; border-color: var(--brand); background: var(--pane); }
.sug p { color: var(--muted); font-size: .9rem; }
.sug-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .86rem; }
.sug-row .btn { padding: .45rem .9rem; }

/* ---------- drawer and dialog ---------- */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(8, 12, 16, .45); backdrop-filter: blur(3px); opacity: 1; transition: opacity .25s ease; }
.drawer, .modal { position: fixed; z-index: 21; background: var(--pane); box-shadow: var(--shadow-lg); }
.drawer { top: .75rem; right: .75rem; bottom: .75rem; width: min(30rem, calc(100vw - 1.5rem)); border-radius: 1.35rem; transition: transform .38s var(--ease-drawer), opacity .25s ease; }
.modal { top: 50%; left: 50%; width: min(36rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); border-radius: 1.35rem; transform: translate(-50%, -50%); transition: transform .26s var(--ease), opacity .2s ease; }
@starting-style { .scrim { opacity: 0; } .drawer { transform: translateX(104%); } .modal { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
#layer.closing .scrim { opacity: 0; transition-duration: .18s; }
#layer.closing .drawer { transform: translateX(104%); transition-duration: .18s; transition-timing-function: ease-in-out; }
#layer.closing .modal { opacity: 0; transform: translate(-50%, -50%) scale(.97); transition-duration: .15s; }
.drawer form, .modal form { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.drawer header, .modal header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem .6rem; }
.fields { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-content: start; padding: .5rem 1.2rem 1.2rem; }
.drawer footer, .modal footer { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.2rem; border-top: 1px solid var(--line); }
.field { display: grid; gap: .35rem; min-width: 0; }
.field > span { font-size: .8rem; font-weight: 700; color: var(--muted); }
.field textarea { resize: vertical; min-height: 3rem; }
.field textarea[name="title"] { font-size: 1.15rem; font-weight: 600; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.seg { display: flex; padding: .2rem; border-radius: .9rem; background: var(--card-2); }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: .42rem .3rem; border-radius: .7rem; font-size: .86rem; font-weight: 600; color: var(--muted); transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); }
.seg-urgent input:checked + span { color: var(--p-urgent); } .seg-high input:checked + span { color: var(--p-high); } .seg-medium input:checked + span { color: var(--p-medium); }
.from, .hint { display: flex; gap: .4rem; font-size: .82rem; color: var(--muted); }
.drop { display: grid; justify-items: center; gap: .2rem; padding: 1.1rem; border-radius: 1rem; border: 1.5px dashed var(--line-2); text-align: center; cursor: pointer; color: var(--muted); transition: border-color .18s ease, background-color .18s ease; }
.drop b { color: var(--ink); }
.drop small { font-size: .76rem; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { border-color: var(--brand); }

/* ---------- sign-in and demo ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.login-card { display: grid; gap: .9rem; justify-items: center; width: min(22rem, 100%); padding: 2rem 1.6rem; border-radius: 1.35rem; background: var(--pane); box-shadow: var(--shadow-lg); text-align: center; animation: rise .5s var(--ease) both; }
.login-card img { border-radius: 1rem; box-shadow: var(--shadow); }
.login-card .field, .login-card .btn { width: 100%; text-align: left; }
.login-card .btn { text-align: center; }
.login-msg { min-height: 1.2em; font-size: .86rem; color: var(--late); }
.demo-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: .8rem; font-weight: 600; }

/* ---------- toasts ---------- */
#toasts { position: fixed; z-index: 30; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: grid; gap: .5rem; justify-items: center; width: max-content; max-width: calc(100vw - 2rem); }
.toast { display: flex; align-items: center; gap: .9rem; padding: .65rem 1rem; border-radius: 99px; background: #171A1D; color: #F2F5F6; box-shadow: var(--shadow-lg); font-size: .92rem; transition: transform .3s var(--ease), opacity .2s ease; }
:root[data-theme="dark"] .toast { background: #F2F5F6; color: #171A1D; }
@starting-style { .toast { opacity: 0; transform: translateY(100%); } }
.toast.out { opacity: 0; transform: translateY(40%); }
.toast button { font-weight: 700; color: #2fd9c2; }
:root[data-theme="dark"] .toast button { color: #00786a; }

/* ---------- focus view: the list and nothing else ---------- */
[data-view="focus"] body { background: var(--pane); }
.focus { min-height: 100dvh; }
.focus-bar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; background: color-mix(in srgb, var(--pane) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-100%); transition: transform .25s var(--ease), opacity .2s ease; }
.focus.bar .focus-bar, .focus-bar:focus-within { opacity: 1; transform: none; }
.focus-bar img { border-radius: .45rem; }
.focus-bar select { max-width: 9rem; padding: .35rem .5rem; border-radius: .6rem; border: 1px solid var(--line-2); background: var(--card); font-size: .85rem; font-weight: 600; }
.focus-bar .round, .focus-bar .fontctl button { width: 2rem; height: 2rem; }
.focus-main { padding: .6rem; }
.focus-main .list { gap: .35rem; }
.focus-main .task { padding: .6rem .7rem .6rem .2rem; border-radius: .8rem; gap: .45rem; box-shadow: none; }
.focus-main .task-body { gap: .25rem; }
.focus-main .chip { background: none; padding: 0; font-weight: 500; color: var(--muted); }
.focus-main .chip.due.late { color: var(--late); } .focus-main .chip.due.now, .focus-main .chip.doing { color: var(--accent-ink); }
.focus-main .task-meta { gap: .7rem; }

/* ---------- list transitions (filters, check-off, theme) ---------- */
::view-transition-group(*) { animation-duration: .3s; animation-timing-function: var(--ease); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: .22s; }

@media (hover: hover) and (pointer: fine) {
  .nav:hover { background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); }
  .task:hover .grip { opacity: .7; }
  .task:hover { box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2); }
  .check:hover { background: color-mix(in srgb, var(--p) 16%, transparent); color: var(--p); }
  .check:hover .ic { stroke-dashoffset: 0; }
  .tile:hover { box-shadow: var(--shadow-lg); }
  .tab:hover { color: var(--ink); }
  .iconbtn:hover, .fontctl button:hover { background: var(--card-2); color: var(--ink); }
  .btn.ghost:hover { background: var(--card-2); }
  .btn.light:hover { background: rgba(255, 255, 255, .26); }
}

@media (max-width: 62rem) {
  .frame { grid-template-columns: 1fr; height: auto; min-height: 100dvh; }
  .side { flex-direction: row; align-items: center; padding: .5rem .7rem; }
  .side nav { display: flex; }
  .grp, .promo, .brand span, .nav span { display: none; }
  .brand { padding: 0 .4rem 0 0; }
  .nav.on::before { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: 1fr; }
  .main { padding: 1rem; overflow: visible; }
  .search kbd, .demo-chip { display: none; }
}
@media (max-width: 30rem) { .pair { grid-template-columns: 1fr; } .head-actions .btn.ghost { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .stagger > * { animation: none; }
  .drawer, .modal, .toast, .focus-bar { transition-property: opacity; }
  @starting-style { .drawer { transform: none; opacity: 0; } }
  .task-title, .check .ic { transition: none; }
}