@layer components.app{[data-app-root=true]{gap:var(--space-6);max-inline-size:initial;grid-template-columns:minmax(20rem,25rem) minmax(0,1fr) minmax(20rem,25rem);margin-inline:auto;display:grid;&>[data-component=header]{grid-column:1/-1}&>[data-component=app-shell]{gap:var(--space-5);flex-direction:column;grid-column:2;align-self:start;min-block-size:0;min-inline-size:0;display:flex}&>[data-slot=controls]{flex-flow:column;grid-area:2/1;display:flex}&>[data-slot=debug-sidebar]{min-block-size:0;max-block-size:var(--app-main-block-size,none);flex-direction:column;grid-area:2/3;align-self:start;display:flex;overflow:hidden}&>:where([data-slot=controls],[data-slot=debug-sidebar]){gap:var(--space-5);min-block-size:0;min-inline-size:0}}@media (width<=1180px){[data-app-root=true]{grid-template-columns:1fr;&>[data-component=app-shell],&>[data-slot=controls],&>[data-slot=debug-sidebar]{grid-column:1}&>[data-slot=controls]{grid-row:auto}&>[data-slot=debug-sidebar]{max-block-size:var(--app-main-block-size,none);order:3;grid-row:auto}}}}@layer components.bulk-actions{[data-component=bulk-actions]{--panel-marker-color:var(--color-accent)}[data-component=bulk-actions] [data-slot=actions-grid]{gap:var(--space-3);flex-direction:column;display:flex;&>li{min-block-size:var(--bulk-action-min-block-size);min-inline-size:0;display:flex}& button{block-size:100%;inline-size:100%;padding-block:var(--space-4);text-align:center;white-space:nowrap;flex:auto}}}@layer components.category-modal{[data-component=category-modal]{padding:var(--space-7);-webkit-backdrop-filter:blur(1rem);z-index:40;background:0 0;border:0;place-items:center;max-block-size:none;inline-size:100%;max-inline-size:none;margin:0;display:grid;position:fixed;inset:0;&::backdrop{background:color-mix(in srgb, var(--color-backdrop) 88%, black 12%)}& [data-slot=surface]{inline-size:auto;min-inline-size:min(100%,22rem);max-inline-size:min(100%, var(--modal-max-inline-size));padding:var(--space-6);gap:var(--space-5);background:color-mix(in srgb, var(--color-surface-raised) 84%, transparent 16%);border-color:var(--color-border-strong);box-shadow:var(--shadow-strong);-webkit-backdrop-filter:blur(1.25rem);flex-direction:column;display:flex}& [data-slot=copy]{gap:var(--space-2);flex-direction:column;display:flex;& h2{font-size:var(--font-size-2xl);margin:0}}& [data-slot=form]{gap:var(--space-4);flex-direction:column;display:flex}& [data-slot=feedback]{min-block-size:1.3rem;color:var(--color-muted);font-size:var(--font-size-xs);margin:0;&[data-state=error]{color:var(--color-danger)}}& [data-slot=actions]{margin-block-start:var(--space-1)}}}@layer components.debug-panel{[data-component=debug-panel]{--panel-marker-color:var(--color-muted-strong);flex-direction:column;min-block-size:0;max-block-size:100%;display:flex;& [data-slot=header]{justify-content:flex-start;align-items:flex-start;gap:var(--space-3);flex-flow:column;display:flex}& [data-density=compact]{flex:0 0 var(--debug-toggle-inline-size);inline-size:var(--debug-toggle-inline-size)}& [data-slot=entries]{gap:var(--space-3);flex-direction:column;flex:auto;min-block-size:0;max-block-size:none;display:flex;overflow:auto}}@media (width<=780px){[data-component=debug-panel]{& [data-slot=header]{flex-direction:column;align-items:stretch}& [data-density=compact]{inline-size:100%}}}}@layer components.debug-log-entry{[data-component=debug-log-entry]{gap:var(--space-3);padding:var(--space-4);border:var(--border-width-1) solid var(--color-border);border-radius:calc(var(--radius-card) - var(--space-2));background:var(--color-surface-raised);box-shadow:var(--shadow-soft);flex-direction:column;display:flex;& [data-slot=entry-header]{justify-content:space-between;align-items:baseline;gap:var(--space-3);display:flex}& :where(strong,time){font-size:var(--font-size-s)}& :where(time,pre){color:var(--color-muted)}& pre{white-space:pre-wrap;word-break:break-word;font-size:var(--font-size-s);line-height:var(--line-height-base);margin:0}}}@layer components.filters{[data-component=filters]{--panel-marker-color:var(--color-warning);& [data-slot=form]{gap:var(--space-4);flex-direction:column;display:flex}}}@layer components.header{[data-component=header]{place-content:space-between;align-items:start;gap:var(--space-6);padding:var(--space-6);display:flex;& h1{font-size:var(--font-size-display);margin:0}& [data-slot=copy]{gap:var(--space-3);flex-direction:column;min-block-size:0;display:flex}& [data-slot=toolbar]{gap:var(--space-4);flex-direction:column;min-block-size:0;display:flex}& [data-slot=actions]{gap:var(--space-3);flex-wrap:nowrap;justify-content:flex-end;display:flex;&>li{display:contents}& button{inline-size:auto;min-inline-size:initial;white-space:nowrap;flex:0}}& [data-slot=preferences]{gap:var(--space-3);grid-template-columns:repeat(3, minmax(var(--preferences-control-min-inline-size), 1fr));display:grid;&>label{min-inline-size:0}}}@media (width<=1180px){[data-component=header]{grid-template-columns:1fr;& [data-slot=actions]{justify-content:flex-start}& [data-slot=preferences]{grid-template-columns:repeat(2,minmax(0,1fr))}}}@media (width<=920px){[data-component=header]{& [data-slot=actions]{flex-wrap:wrap}}}@media (width<=780px){[data-component=header]{& [data-slot=copy]{min-block-size:auto}& [data-slot=actions]{flex-direction:column;align-items:stretch}& [data-slot=actions] button{inline-size:100%;min-inline-size:initial;flex:0}& [data-slot=preferences]{grid-template-columns:1fr}}}}@layer components.stats-row{[data-component=stats-row]{& [data-slot=items]{gap:var(--space-4);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}}[data-component=stat-card]{justify-content:space-between;align-items:center;gap:var(--space-3);min-block-size:0;padding:var(--space-5);border-color:var(--color-accent);background:var(--color-accent-surface);color:var(--color-text);vertical-align:middle;flex-flow:row;display:inline-flex;& strong{line-height:1;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);flex:none}& span{text-align:end;white-space:nowrap;color:currentColor;opacity:.78;font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;flex:none;margin-inline-start:auto}}@media (width<=1180px){[data-component=stats-row]{& [data-slot=items]{grid-template-columns:repeat(2,minmax(0,1fr))}}}@media (width<=560px){[data-component=stats-row]{& [data-slot=items]{grid-template-columns:1fr}& [data-component=stat-card]{inline-size:100%}}}}@layer components.todo-list{[data-component=todo-list]{--panel-marker-color:var(--color-accent-strong);gap:var(--space-5);flex-direction:column;min-inline-size:0;display:flex;& [data-slot=header]{justify-content:space-between;align-items:stretch;gap:var(--space-4);padding-inline:var(--space-1);margin-block-end:var(--space-4);display:flex;&>h2{align-items:center;display:flex}}& [data-slot=summary]{min-block-size:0;inline-size:auto;padding:var(--space-2) var(--space-3);border:var(--border-width-1) solid var(--color-accent);border-radius:var(--radius-pill);background:var(--color-accent-surface);color:var(--color-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-align:center;white-space:nowrap;text-overflow:ellipsis;justify-content:center;align-items:center;margin:0;display:inline-flex;overflow:hidden}& [data-slot=items]{gap:var(--space-4);flex-direction:column;display:flex}}@media (width<=780px){[data-component=todo-list]{& [data-slot=header]{flex-direction:column;align-items:stretch}& [data-slot=summary]{flex-basis:auto;inline-size:100%}}}}@layer components.todo-item{[data-component=todo-entry]{list-style:none}[data-component=todo-item]{gap:var(--space-4);padding:var(--space-5);border-radius:calc(var(--radius-card) - var(--border-width-strong));border:var(--border-width-1) solid var(--color-border);border-inline-start-width:var(--border-width-accent);border-inline-start-color:var(--color-accent-strong);background:var(--color-surface-raised);box-shadow:var(--shadow-soft);flex-direction:column;display:flex;& [data-slot=header]{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}& [data-slot=selection-toggle],& [data-slot=completion-toggle]{flex:0 0 var(--todo-toggle-inline-size);inline-size:var(--todo-toggle-inline-size)}& [data-slot=title]{min-inline-size:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);flex:16rem}& [data-slot=meta]{gap:var(--space-3);flex-wrap:wrap;display:flex;&>label{flex:12rem;min-inline-size:0}}& [data-slot=notes] textarea{min-block-size:7rem}& [data-slot=footer]{justify-content:space-between;align-items:center;gap:var(--space-3);border-block-start:var(--border-width-1) solid var(--color-border);padding-block-start:var(--space-3);display:flex}&[data-state=done]{border-color:var(--color-todo-done);border-inline-start-color:var(--color-todo-done);background:var(--color-todo-done-surface);box-shadow:var(--shadow-medium);& [data-slot=footer]{border-block-start-color:var(--color-todo-done)}& :where([data-slot=meta] [data-field]>span,[data-slot=notes]>span){color:var(--color-todo-done-text)}& :where([data-slot=title],[data-slot=notes] textarea){color:var(--color-todo-done-text-strong)}& :is([readonly],:disabled){border-color:var(--color-todo-done);background:var(--color-todo-done-field);box-shadow:none;caret-color:#0000;cursor:not-allowed;color:var(--color-todo-done-text-strong);opacity:.7}& [data-component=priority-chip]{border-color:var(--color-todo-done);background:var(--color-todo-done-field);color:var(--color-todo-done-text-strong)}}}[data-component=priority-chip]{justify-content:center;align-items:center;gap:var(--space-2);inline-size:7rem;min-inline-size:7rem;padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);border:var(--border-width-1) solid var(--color-border);background:var(--color-surface-muted);color:var(--color-text);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;display:inline-flex;&:before{content:"";border-radius:var(--radius-pill);background:currentColor;block-size:.45rem;inline-size:.45rem}&[data-priority=low]{background:var(--color-priority-low-surface);border-color:var(--color-success)}&[data-priority=medium]{background:var(--color-priority-medium-surface);border-color:var(--color-warning)}&[data-priority=high]{background:var(--color-priority-high-surface);border-color:var(--color-danger)}}@media (width<=780px){[data-component=todo-item]{& [data-slot=header],& [data-slot=meta]{flex-direction:column;align-items:stretch}& [data-slot=title],& [data-slot=meta]>label{flex:none}& [data-slot=footer]{flex-direction:column;align-items:stretch}& [data-slot=selection-toggle],& [data-slot=completion-toggle]{flex:none;inline-size:100%}}}[data-component=todo-item] [data-slot=footer] button{inline-size:var(--todo-footer-action-inline-size);min-inline-size:var(--todo-footer-action-inline-size)}}@layer components.todo-modal{[data-component=todo-modal]{padding:var(--space-7);-webkit-backdrop-filter:blur(1rem);z-index:40;background:0 0;border:0;place-items:center;max-block-size:none;inline-size:100%;max-inline-size:none;margin:0;display:grid;position:fixed;inset:0;&::backdrop{background:color-mix(in srgb, var(--color-backdrop) 88%, black 12%)}& [data-slot=surface]{inline-size:auto;min-inline-size:min(100%,30rem);max-inline-size:min(100%, var(--modal-wide-max-inline-size));padding:var(--space-6);gap:var(--space-5);background:color-mix(in srgb, var(--color-surface-raised) 84%, transparent 16%);border-color:var(--color-border-strong);box-shadow:var(--shadow-strong);-webkit-backdrop-filter:blur(1.25rem);flex-direction:column}& [data-slot=header]{justify-content:flex-start;align-items:flex-start;gap:var(--space-3);flex-flow:column;flex:none;display:flex}& [data-slot=copy]{gap:var(--space-3);flex-direction:column;min-block-size:0;display:flex;& h2{font-size:var(--font-size-2xl);margin:0}}& [data-slot=form]{gap:var(--space-4);flex-direction:column;display:flex}& [data-slot=feedback]{min-block-size:1.3rem;color:var(--color-muted);font-size:var(--font-size-xs);margin:0;&[data-state=error]{color:var(--color-danger)}}& [data-slot=actions]{margin-block-start:var(--space-1)}}@media (width<=780px){[data-component=todo-modal]{padding:var(--space-4)}}}