/* The sample screens' layout; colours, type and the kit parts' look come from theme/theme.css, ui/ui.css and, for the
   shell, ui/gestures.css and ui/shell/shell.css. */
.status-line { margin: 0 var(--pad) var(--gap); }
.ui-screen > :not(.ui-large-title) { max-width: 40rem; margin-inline: auto; padding-inline: var(--pad); }
input, textarea, select { padding: .5rem; }
#add input { flex: 1; min-width: 10rem; }
.ui-list { padding: 0; margin: 0; }

/* a task: the tick, then its text with the due day under it */
.task-row { list-style: none; display: flex; align-items: center; gap: .5rem; }
.task-check { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; }
.task-main { flex: 1; display: block; justify-content: flex-start; text-align: left; background: none; border: 0; padding: .5rem 0; font: inherit; color: inherit; min-width: 0; }
.task-sub { display: block; font-size: .8rem; color: var(--muted); }
.task-sub.overdue { color: var(--danger); }
.task-row.done .task-main { text-decoration: line-through; }
/* a task changed (here or on another device) since the tabs last showed */
.task-row.changed { border-inline-start: 3px solid var(--accent); }
.big .task-main { padding: 1rem 0; font-size: 1.15rem; }
.task-group-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin: var(--gap) 0 .25rem; color: var(--muted); }

/* the list picker under each title: chips in a row that scrolls sideways on a phone */
.list-picker { display: flex; gap: .4rem; overflow-x: auto; padding-block: .25rem var(--gap); }
.list-chip { flex: none; border-radius: var(--pill-r, 1em); }
.list-chip[aria-pressed="true"] { background: var(--accent); color: var(--bg); }

.task-when { display: flex; gap: var(--gap); }
.task-when > label { flex: 1; }
.list-manage-row input { flex: 1; min-width: 0; }
.done-tools { margin: 0 0 var(--gap); }

/* toasts sit above the tab bar on a phone (the page's own room under its last row is the kit's: .ui-screen::after) */
body { margin: 0; }
.toasts { bottom: calc(var(--tap) + var(--pad) * 2 + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 600px) { .toasts { bottom: var(--pad); } }


/* the app's icon beside its name in the side bar, and large on the signed-out screen */
.ui-sidebar-name { display: flex; align-items: center; gap: .5rem; }
.app-mark { flex: none; border-radius: 22%; }
.app-mark-big { display: block; margin: var(--pad) 0 var(--gap); }