/* Phone layout (below 1024px, where the bottom navigation is shown): filter sheets, quick bar, quick-create,
   one full-width main column and forms in the app-wide sheet. Desktop keeps the layout from app.css.
   Also the minified dashboard view, which can be chosen on every screen size (html[data-dash="mini"]). */

/* ---------- Visibility helpers ---------- */
@media (min-width: 1024px) {
    .mobile-only { display: none !important; }
}
@media (max-width: 1023.98px) {
    .desktop-only { display: none !important; }
}

/* ---------- The main container keeps its position and full width on phones and tablets ----------
   Secondary columns (side panels, detail columns) stack below the main content instead of squeezing it;
   details open as bottom sheets. Tile grids with their own auto-fit columns (inline style) stay as they are,
   and so does the dashboard's card grid (equal cards, no side panel). */
@media (max-width: 1023.98px) {
    #main :is(.grid-2, .grid-3):not([style]):not(.dash .grid-2) { grid-template-columns: minmax(0, 1fr); }
    .task-tools:has(.task-steps):has(.task-timer-wrap) { grid-template-columns: minmax(0, 1fr); }
    .pet-page:not(.pet-kiosk) .pet-layout-grid { grid-template-columns: minmax(0, 1fr); }
    .pet-page:not(.pet-kiosk) .pet-layout-main { position: static; }
}

/* ---------- Inline sheets (filters): in place on desktop, a bottom sheet behind a button on phones ---------- */
@media (min-width: 1024px) {
    .sheet-backdrop.sheet-inline, .sheet-inline > .sheet, .sheet-inline .sheet-body { display: contents; }
    .sheet-inline .sheet-top, .sheet-inline .sheet-footer { display: none; }
}
@media (max-width: 1023.98px) {
    .sheet-backdrop.sheet-inline:not(.open) { display: none; }
    html:has(.sheet-backdrop.sheet-inline.open), html:has(.sheet-backdrop.sheet-inline.open) body { overflow: hidden; }
    .sheet-inline .filters { flex-direction: column; align-items: stretch; }
    .sheet-inline .filters .input, .sheet-inline select.input { width: 100% !important; min-height: 48px; font-size: 16px; }
    .sheet-inline .cat-filter { flex-wrap: wrap; overflow: visible; }
}

.filter-btn { position: relative; flex: none; }
.filter-btn.has-filters { --btn-bd: var(--accent); color: var(--accent-text); }
.filter-badge {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    display: grid; place-items: center; background: var(--accent); color: var(--text-on-accent);
    font-size: .68rem; font-weight: 800; box-shadow: 0 0 0 2px var(--bg);
}

/* View tabs and the filter button share one row on phones. */
.view-bar { display: contents; }
@media (max-width: 1023.98px) {
    .view-bar { display: flex; align-items: center; gap: var(--space-2); }
    .view-bar > .segmented { flex: 0 1 auto; min-width: 0; }
    .view-bar > .filter-btn { margin-left: auto; }
    .nowrap-mobile { flex-wrap: nowrap; }
    .nowrap-mobile > .segmented { flex: 0 1 auto; min-width: 0; }
}

/* ---------- Detail views and forms in the app-wide sheet ---------- */
/* Detail views on phones and tablets: the title above its tags, and the actions as a calm row of icon tiles –
   a coloured circle with a fitting icon and a small label underneath, all the same size. */
@media (max-width: 1023.98px) {
    .detail-head { display: flex; flex-direction: column; gap: 8px; }
    .detail-head h1 { order: -1; }
    .detail-head .detail-tags { margin-bottom: 0 !important; gap: 6px !important; }

    /* Actions sit on the right, "Löschen" / "Verwerfen" on the left; set off by soft hairlines. */
    .detail-actions {
        display: flex; justify-content: flex-end; align-items: flex-start; gap: var(--space-1);
        padding: var(--space-3) 0; margin: var(--space-1) 0;
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
        border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    }
    /* At the end of a section the next section's own line closes it (task details → history). */
    .detail-actions:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
    .detail-actions .btn-danger, .action-tiles .btn-danger { order: -2; margin-right: auto; }
    .action-tiles .action-discard { order: -1; margin-right: auto; }
    /* "Löschen" and "Verwerfen" stay together on the left. */
    .action-tiles:has(.action-discard) .btn-danger { margin-right: 0 !important; }

    .action-tiles { justify-content: flex-end; align-items: flex-start; flex-wrap: nowrap; gap: var(--space-1); }
    /* Icon tiles: a coloured circle with a fitting icon and a small label underneath. */
    .detail-actions .btn, .action-tiles .btn {
        --tile: var(--c-soft, var(--surface-2)); --tile-fg: var(--c-text, var(--text-2));
        flex: none; width: 64px; flex-direction: column; justify-content: flex-start; gap: 5px; min-height: 0; height: auto;
        padding: 4px 2px; border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--text-2);
        font-size: .68rem; font-weight: 650; line-height: 1.15; white-space: normal; text-align: center;
    }
    .detail-actions .btn:hover, .action-tiles .btn:hover { background: var(--surface-2); filter: none; }
    .detail-actions .btn .icon, .action-tiles .btn .icon {
        width: 42px; height: 42px; padding: 11px; border-radius: 50%; flex: none;
        background: var(--tile); color: var(--tile-fg); transition: transform 120ms var(--ease);
    }
    .detail-actions .btn:active .icon, .action-tiles .btn:active .icon { transform: scale(.92); }
    .detail-actions .btn-success, .action-tiles .btn-success { --tile: var(--success); --tile-fg: #fff; }
    .detail-actions .btn-success .icon { box-shadow: 0 3px 10px color-mix(in srgb, var(--success) 35%, transparent); }
    .detail-actions .btn-danger, .action-tiles .btn-danger { --tile: var(--danger-soft); --tile-fg: var(--danger); }
    /* Save: the prominent one – bigger, filled, the label in the accent colour. */
    .action-tiles .btn-primary { width: 72px; color: var(--accent-text); font-weight: 750; }
    .action-tiles .btn-primary .icon {
        width: 50px; height: 50px; padding: 13px; background: var(--accent); color: var(--text-on-accent);
        box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
    }
    .action-tiles .btn-primary .spinner { width: 50px; height: 50px; border-width: 4px; color: var(--accent); }
}
.sheet-page .sheet-body > .page-narrow { animation: none; }
/* Forms and details in the sheet: grouped white sections on the tinted sheet, like native settings screens. */
.sheet.sheet-page { --sheet-bg: var(--bg); background: var(--sheet-bg); }
.sheet-page .sheet-body > .page-narrow .card { border: 0; border-radius: var(--radius); box-shadow: none; background: var(--surface); padding: var(--space-3) var(--space-4); }
.sheet-page .sheet-body > .page-narrow .card .card { background: none; padding: 0; }
.sheet-page .sheet-body > .page-narrow .card ~ .card { margin-top: var(--space-3) !important; }
.sheet-page .sheet-body > .page-narrow .card h1 { font-size: 1.3rem; }
.sheet-page .sheet-body > .page-narrow .form-actions {
    justify-content: flex-end; align-items: flex-start; flex-wrap: nowrap; gap: var(--space-1);
    position: sticky; bottom: calc(-1 * (var(--space-6) + var(--safe-bottom))); z-index: 2;
    margin: var(--space-4) calc(-1 * var(--sheet-x)) calc(-1 * (var(--space-6) + var(--safe-bottom)));
    padding: var(--space-2) var(--sheet-x) calc(var(--space-2) + var(--safe-bottom));
}
/* Task details in the sheet: the icon row stays above the history, but sticks to the bottom edge while the
   details are longer than the screen. */
.sheet-page .sheet-body > .page-narrow .detail-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin-left: calc(-1 * var(--sheet-x)); margin-right: calc(-1 * var(--sheet-x));
    padding: var(--space-3) var(--sheet-x) calc(var(--space-3) + var(--safe-bottom));
    margin-bottom: calc(-1 * var(--safe-bottom));
}
/* More content after the form (e.g. a bill's attachments): the save bar must not pull it underneath. */
.sheet-page .sheet-body > .page-narrow > form:not(:last-child) .form-actions { margin-bottom: var(--space-4) !important; }
.sheet-subhead { margin-bottom: var(--space-3); }
@media (max-width: 719.98px) {
    .sheet.tall { min-height: min(72dvh, 640px); }
}
@media (min-width: 720px) {
    .sheet-page .sheet-body > .page-narrow .form-actions { bottom: calc(-1 * var(--space-6)); margin-bottom: calc(-1 * var(--space-6)); padding-bottom: var(--space-3); }
}

/* ---------- Smaller form sheets: the save bar stays pinned to the bottom edge ---------- */
@media (max-width: 1023.98px) {
    .sheet:not(.sheet-page) .action-tiles {
        position: sticky; bottom: calc(-1 * (var(--space-6) + var(--safe-bottom))); z-index: 2;
        margin: var(--space-4) calc(-1 * var(--sheet-x)) 0;
        padding: var(--space-2) var(--sheet-x) calc(var(--space-2) + var(--safe-bottom));
    }
    /* At the very end of the sheet the bar covers the sheet's bottom padding. */
    .sheet:not(.sheet-page) .sheet-body > .action-tiles:last-child,
    .sheet:not(.sheet-page) .sheet-body > :last-child .action-tiles:last-child { margin-bottom: calc(-1 * (var(--space-6) + var(--safe-bottom))); }
}
@media (min-width: 720px) and (max-width: 1023.98px) {
    .sheet:not(.sheet-page) .action-tiles { bottom: calc(-1 * var(--space-6)); padding-bottom: var(--space-2); }
    .sheet:not(.sheet-page) .sheet-body > .action-tiles:last-child,
    .sheet:not(.sheet-page) .sheet-body > :last-child .action-tiles:last-child { margin-bottom: calc(-1 * var(--space-6)); }
}

/* ---------- Quick-create picker (plus button) ---------- */
.create-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.create-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3) var(--space-1);
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
    font: inherit; font-size: .8rem; font-weight: 650; line-height: 1.2; text-align: center; cursor: pointer;
    transition: transform 120ms var(--ease), background var(--dur);
}
.create-tile:hover { background: var(--surface-2); }
.create-tile:active { transform: scale(.96); }

/* ---------- Bottom navigation settings ---------- */
.nav-pick .list-item { padding-left: 0; padding-right: 0; gap: var(--space-2); min-height: 52px; }
.nav-pick .icon-bubble { width: 32px; height: 32px; border-radius: 10px; }
.nav-pick .icon-bubble .icon { width: 17px; height: 17px; }
.nav-pick-pos { width: 18px; flex: none; text-align: center; font-weight: 800; color: var(--text-3); }
ol.nav-pick { margin-top: var(--space-3); }

/* ---------- Dashboard quick bar ---------- */
.quickbar {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) 0; padding: 0 var(--space-4) 2px;
}
.quickbar::-webkit-scrollbar { display: none; }
.quickbar-item {
    flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--text-2); text-decoration: none; scroll-snap-align: start;
}
.quickbar-icon {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
    background: var(--c-soft, var(--surface-2)); color: var(--c-text, var(--text-2)); transition: transform 120ms var(--ease);
}
.quickbar-item:active .quickbar-icon { transform: scale(.92); }
.quickbar-icon .icon { width: 18px; height: 18px; }
.quickbar-label { max-width: 100%; font-size: .64rem; font-weight: 650; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Dashboard: quick bar and view toggle ---------- */
.hero-chips { margin-top: var(--space-4); }
.dash-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.dash-bar .quickbar {
    flex: 1; min-width: 0; margin-right: 0; padding-right: 12px;
    /* Fades out towards the view toggle: there are more icons to scroll to. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* Tablet/desktop: the view toggle shares one line with the "Für mich / Familie" switch (.scope-dock, which sits
   just before the page and takes no height of its own). */
@media (min-width: 1024px) {
    .dash-bar { min-height: 48px; }
    :root[data-dash="mini"] .dash-bar { margin-bottom: var(--space-2); }
}

.dash-toggle { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface-2); }
.dash-toggle button {
    width: 36px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--text-3); cursor: pointer; transition: background var(--dur), color var(--dur);
}
.dash-toggle .icon { width: 17px; height: 17px; }
.dash-toggle .dash-active { display: none; }
:root:not([data-dash="mini"]) .dash-toggle-normal,
:root[data-dash="mini"] .dash-toggle-mini { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root:not([data-dash="mini"]) .dash-toggle-normal .dash-active,
:root[data-dash="mini"] .dash-toggle-mini .dash-active { display: inline; }

/* ---------- Dashboard halves: "Für mich" / "Familie" ----------
   Both halves are rendered; html[data-scope] (App.razor, app.js) shows one. Without a choice: "Für mich". */
:root[data-scope="family"] .dash .scope-me,
:root:not([data-scope="family"]) .dash .scope-family { display: none !important; }
.scope-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-3); }
.scope-toggle button {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3);
    border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: inherit; font-weight: 700; font-size: .92rem;
    cursor: pointer; transition: background var(--dur), color var(--dur);
}
.scope-toggle .badge { min-width: 20px; height: 20px; font-size: .7rem; }
.scope-toggle .scope-active { display: none; }
:root:not([data-scope="family"]) .scope-toggle-me,
:root[data-scope="family"] .scope-toggle-family { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
:root:not([data-scope="family"]) .scope-toggle-me .scope-active,
:root[data-scope="family"] .scope-toggle-family .scope-active { display: inline; }
@media (min-width: 1024px) {
    .scope-dock { position: relative; z-index: 2; height: 0; max-width: 1180px; margin: 0 auto; }
    .scope-dock .scope-toggle { width: 420px; max-width: calc(100% - 120px); }
    .scope-toggle { max-width: 420px; }
}
/* Phones: a floating pill above the tab bar, left of the plus button (same height line), easy to reach with the thumb. */
@media (max-width: 1023.98px) {
    .scope-dock {
        position: fixed; z-index: 30;
        right: calc(var(--space-4) + var(--safe-right) + 56px + var(--space-3));
        bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--space-4) + 3px);
    }
    body:not(:has(.fab)) .scope-dock { right: calc(var(--space-4) + var(--safe-right)); }
    /* Icons only: the labels stay for screen readers. */
    .scope-dock .scope-toggle { display: flex; }
    .scope-dock .scope-toggle button { position: relative; width: 56px; min-height: 46px; padding: 0; }
    .scope-dock .scope-icon { display: grid; place-items: center; }
    .scope-dock .scope-icon .icon { width: 26px; height: 26px; }
    .scope-dock .scope-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .scope-dock .scope-toggle .badge {
        position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .66rem;
        box-shadow: 0 0 0 2px var(--bg-elevated);
    }
    .scope-dock .scope-toggle {
        border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
        background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
        backdrop-filter: saturate(1.6) blur(18px);
        -webkit-backdrop-filter: saturate(1.6) blur(18px);
    }
    .scope-dock .scope-toggle button { border-radius: var(--radius-pill); }
    :root:not([data-scope="family"]) .scope-dock .scope-toggle-me,
    :root[data-scope="family"] .scope-dock .scope-toggle-family { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
    :root[data-theme="dark"]:not([data-scope="family"]) .scope-dock .scope-toggle-me,
    :root[data-theme="dark"][data-scope="family"] .scope-dock .scope-toggle-family { background: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--text); }
    /* Room for the pill below the last card. */
    .app-main:has(.scope-dock) { padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + var(--space-8) + 64px); }
}

/* ---------- Minified dashboard ----------
   Shows exactly the same content as the normal view – density comes only from the layout: tighter spacing,
   slightly smaller type, icons and cards. Touch targets stay at least 32–40px. */
:root[data-dash="mini"] .dash { gap: 8px; }
:root[data-dash="mini"] .dash .grid-2 { gap: 8px; }
@media (min-width: 1180px) {
    :root[data-dash="mini"] .dash .grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Greeting: one slim line (avatar · greeting · family and date · family avatars), the counters below. */
:root[data-dash="mini"] .dash .hero-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px;
    padding: 6px 10px; border-radius: var(--radius);
}
:root[data-dash="mini"] .dash .hero-top { display: contents; }
:root[data-dash="mini"] .dash .hero-id { grid-column: 1; flex-wrap: nowrap; gap: 8px; min-width: 0; }
:root[data-dash="mini"] .dash .hero-id .avatar-lg { --size: 26px; }
:root[data-dash="mini"] .dash .hero-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
:root[data-dash="mini"] .dash .hero-text h1 { order: -1; font-size: .94rem; margin: 0; }
:root[data-dash="mini"] .dash .hero-text .eyebrow { font-size: .62rem; letter-spacing: .03em; line-height: 1.3; margin: 0; }
:root[data-dash="mini"] .dash .hero-chips { grid-column: 1 / -1; grid-row: 2; margin: 0; gap: 4px; }
:root[data-dash="mini"] .dash .hero-family { grid-column: 2; grid-row: 1; }
:root[data-dash="mini"] .dash .hero-family .avatar { --size: 22px; }
:root[data-dash="mini"] .dash .hero-summary { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .74rem; line-height: 1.3; }
:root[data-dash="mini"] .dash .hero-summary + .hero-chips { grid-row: 3; }

/* "Braucht dich" and the day plan: same content, tighter. */
:root[data-dash="mini"] .dash .needs-card { border-width: 1px; }
:root[data-dash="mini"] .dash .day-plan::before { left: 46px; top: 6px; bottom: 6px; }
:root[data-dash="mini"] .dash .day-plan-item { grid-template-columns: 36px 8px minmax(0, 1fr); gap: 0 7px; padding: 2px 0; }
:root[data-dash="mini"] .dash .day-plan-when { padding-top: 4px; font-size: .66rem; }
:root[data-dash="mini"] .dash .day-plan-dot { width: 8px; height: 8px; margin-top: 7px; box-shadow: 0 0 0 2px var(--surface); }
:root[data-dash="mini"] .dash .day-plan-body { padding: 3px 8px; border-radius: 8px; gap: 0; }
:root[data-dash="mini"] .dash .day-plan-title { font-size: .82rem; gap: 4px; }
:root[data-dash="mini"] .dash .day-plan .list-meta { font-size: .68rem; }
:root[data-dash="mini"] .dash .day-plan-badge { padding: 1px 5px; font-size: .58rem; }
:root[data-dash="mini"] .dash .day-plan .avatar { --size: 16px; font-size: 9px; }
:root[data-dash="mini"] .dash .quick-entry { --qe-pad-y: 6px; --qe-pad-x: 8px; }
:root[data-dash="mini"] .dash .quick-types { margin-bottom: 5px; gap: 4px; }
:root[data-dash="mini"] .dash .quick-type { min-height: 26px; padding: 0 8px; font-size: .7rem; border-width: 1px; }
:root[data-dash="mini"] .dash .quick-type .icon { width: 13px; height: 13px; }
/* The hint repeats what the type chip says – the dense view leaves it out. */
:root[data-dash="mini"] .dash .quick-hint { display: none; }
:root[data-dash="mini"] .dash .points-total { padding: 6px 10px; margin-bottom: 6px; border-radius: 10px; }
:root[data-dash="mini"] .dash .points-total-top { gap: 8px; }
:root[data-dash="mini"] .dash .points-total-bar { height: 6px; margin: 5px 0 3px; }
:root[data-dash="mini"] .dash .points-total-meta { margin-top: 2px; font-size: .7rem; }
:root[data-dash="mini"] .dash .points-total-emoji .icon { width: 20px; height: 20px; }
:root[data-dash="mini"] .dash .points-total-emoji.medal { font-size: 1.2rem; }
:root[data-dash="mini"] .dash .points-total-num { font-size: 1.05rem; }
:root[data-dash="mini"] .dash .points-total-num span { font-size: .72rem; }
:root[data-dash="mini"] .dash .points-total-label { font-size: .6rem; }

:root[data-dash="mini"] .dash .next-event { padding: 10px 12px; gap: 4px 16px; border-radius: var(--radius); }
:root[data-dash="mini"] .dash .next-event-countdown { font-size: 1.05rem; }
:root[data-dash="mini"] .dash .next-event-main { gap: 3px; }
:root[data-dash="mini"] .dash .next-event-main h2 { font-size: .95rem; }
:root[data-dash="mini"] .dash .next-event .eyebrow { font-size: .62rem; }
:root[data-dash="mini"] .dash .next-event .muted { font-size: .75rem; }
:root[data-dash="mini"] .dash .prep-checks { gap: 4px; }
:root[data-dash="mini"] .dash .prep-check { padding: 3px 8px; gap: 8px; border-radius: 9px; font-size: .84rem; min-height: 34px; border-width: 1px; }
:root[data-dash="mini"] .dash .prep-box { width: 20px; height: 20px; border-radius: 6px; }

:root[data-dash="mini"] .dash .card { padding: 8px 10px; border-radius: 14px; }
:root[data-dash="mini"] .dash .card-header { margin-bottom: 2px; gap: var(--space-2); }
:root[data-dash="mini"] .dash .card-header h2 { font-size: .86rem; gap: 6px; }
:root[data-dash="mini"] .dash .card-header .icon-bubble { width: 22px; height: 22px; border-radius: 6px; font-size: .74rem; }
:root[data-dash="mini"] .dash .card-header .icon-bubble .icon { width: 14px; height: 14px; }
:root[data-dash="mini"] .dash .card-header .btn-sm { min-height: 32px; padding: 0 var(--space-2); font-size: .74rem; }

:root[data-dash="mini"] .dash .list-item { min-height: 36px; padding-top: 3px; padding-bottom: 3px; gap: var(--space-2); }
:root[data-dash="mini"] .dash .list-title { font-size: .84rem; }
:root[data-dash="mini"] .dash .list-meta { font-size: .7rem; gap: 0 8px; }
:root[data-dash="mini"] .dash .icon-bubble { width: 24px; height: 24px; border-radius: 7px; font-size: .8rem; }
:root[data-dash="mini"] .dash .icon-bubble .icon { width: 15px; height: 15px; }
:root[data-dash="mini"] .dash .avatar-sm { --size: 22px; }
:root[data-dash="mini"] .dash .check-wrap { width: 40px; height: 40px; margin: -8px; }
:root[data-dash="mini"] .dash .check { width: 26px; height: 26px; }
:root[data-dash="mini"] .dash .btn-sm { min-height: 32px; padding: 0 10px; font-size: .8rem; }
:root[data-dash="mini"] .dash .chip { min-height: 22px; padding: 0 8px; font-size: .7rem; }
:root[data-dash="mini"] .dash .chip .icon { width: 12px; height: 12px; }
:root[data-dash="mini"] .dash .choice-grid { gap: 6px; }
:root[data-dash="mini"] .dash .choice { min-height: 32px; font-size: .78rem; border-width: 1px; }
:root[data-dash="mini"] .dash .choice-emoji { font-size: 1rem; }
:root[data-dash="mini"] .dash .divider-label { margin: 6px 0 4px; font-size: .6rem; }
:root[data-dash="mini"] .dash .quick-add .input { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: .9rem; }
:root[data-dash="mini"] .dash .quick-add .btn-icon { width: 36px; min-height: 36px; }
:root[data-dash="mini"] .dash .stat strong { font-size: .88rem; }
:root[data-dash="mini"] .dash .stat-label { font-size: .68rem; }
:root[data-dash="mini"] .dash .chore-board { gap: 4px; }
:root[data-dash="mini"] .dash .board-row { gap: var(--space-2); }
:root[data-dash="mini"] .dash .board-rank { width: 20px; font-size: .85rem; }
:root[data-dash="mini"] .dash .board-main { gap: 2px; }
:root[data-dash="mini"] .dash .board-points { font-size: .8rem; }
:root[data-dash="mini"] .dash .bar-track { height: 6px; }
:root[data-dash="mini"] .dash .school-subjects { gap: 4px; margin-top: 3px; }
:root[data-dash="mini"] .dash .stack { gap: 8px; }
:root[data-dash="mini"] .dash .board-post { padding: 6px 10px; gap: 4px; }
:root[data-dash="mini"] .dash .board-text { font-size: .84rem; }
:root[data-dash="mini"] .dash .board-meta { font-size: .72rem; }
:root[data-dash="mini"] .dash .poll-option { min-height: 36px; padding: 5px 10px; font-size: .86rem; }
:root[data-dash="mini"] .dash .row-flex { gap: var(--space-2); }

:root[data-dash="mini"] .dash .empty { padding: var(--space-2) 0; gap: 2px; }
:root[data-dash="mini"] .dash .empty .empty-art { width: 40px; height: 40px; font-size: 1.3rem; border-radius: 12px; margin-bottom: 2px; }
:root[data-dash="mini"] .dash .empty h3 { font-size: .9rem; }
:root[data-dash="mini"] .dash .empty p { font-size: .8rem; margin-bottom: var(--space-2); }
:root[data-dash="mini"] .dash .btn { min-height: 36px; padding: 0 var(--space-3); font-size: .85rem; }
:root[data-dash="mini"] .dash .btn-icon { width: 36px; padding: 0; }
/* Approve: a compact pill; on phones just the round check (the label stays for screen readers via aria-label). */
:root[data-dash="mini"] .dash .approve-btn { min-height: 30px; padding: 0 10px; gap: 4px; font-size: .76rem; }
:root[data-dash="mini"] .dash .approve-btn .icon { width: 15px; height: 15px; }
@media (max-width: 719.98px) {
    :root[data-dash="mini"] .dash .approve-btn { width: 34px; min-height: 34px; padding: 0; border-radius: 50%; }
    :root[data-dash="mini"] .dash .approve-label { display: none; }
}

/* ---------- Sheets: glass bars and compact forms ----------
   The pinned action bars are frosted glass: what scrolls underneath stays visible. Forms use smaller
   labels and fields, and paired fields (date + time, amount + currency) sit side by side even on phones. */
/* The title row sits above the scrolling body; a hairline appears once content has scrolled under it. */
.sheet-top { background: var(--sheet-bg, var(--bg-elevated)); transition: box-shadow 160ms; }
.sheet[data-scrolled] .sheet-top { box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent); }
/* The action bars at the bottom are clearer still: the content underneath shows through. */
.sheet { --bar-glass: 22%; --bar-blur: blur(8px) saturate(1.8); }
.sheet-footer,
.sheet-page .sheet-body > .page-narrow .form-actions,
.sheet-page .sheet-body > .page-narrow .detail-actions {
    background: color-mix(in srgb, var(--sheet-bg, var(--bg-elevated)) var(--bar-glass), transparent);
    -webkit-backdrop-filter: var(--bar-blur);
    backdrop-filter: var(--bar-blur);
}
.sheet-footer, .sheet-page .sheet-body > .page-narrow .form-actions { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
@media (max-width: 1023.98px) {
    .sheet:not(.sheet-page) .action-tiles {
        background: color-mix(in srgb, var(--bg-elevated) var(--bar-glass), transparent);
        -webkit-backdrop-filter: var(--bar-blur);
        backdrop-filter: var(--bar-blur);
        border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    }
}
/* Detail actions inside a section: glass in the section's colour, flush with its rounded bottom. */
.sheet-page .sheet-body > .page-narrow .card .detail-actions {
    background: color-mix(in srgb, var(--surface) var(--bar-glass), transparent); border-bottom: 0;
    margin-bottom: calc(-1 * var(--space-3)); border-radius: 0 0 var(--radius) var(--radius);
}
/* The title row stays at the top while the sheet body scrolls underneath (see .sheet-top in app.css). */
.sheet .sheet-head { padding: 6px 0; }
.sheet .sheet-head h2 { font-size: 1.25rem; }

@media (max-width: 1023.98px) {
    .sheet { --sheet-x: var(--space-4); }
    .sheet .field { gap: 4px; margin-bottom: var(--space-3); }
    .sheet .field.mb-0 { margin-bottom: 0; }
    .sheet .field > label, .sheet .label, .sheet .form-label { font-size: .8rem; }
    .sheet .input, .sheet select.input { min-height: 44px; padding: 8px 12px; font-size: 16px; }
    .sheet select.input { padding-right: 32px; background-position: right 10px center; }
    .sheet textarea.input { min-height: 68px; }
    .sheet .hint { font-size: .78rem; line-height: 1.35; }
    /* A hint under a section heading is its own line (an inline span would take the heading's line height). */
    .sheet h2 + .hint { display: block; margin-top: 2px; }
    .sheet .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
    .sheet .form-row > .field { margin-bottom: 0; }
    .sheet .switch { min-height: 40px; padding: 2px 0; gap: var(--space-3); }
    .sheet .switch .switch-text small { font-size: .78rem; line-height: 1.3; margin-top: 1px; }
    .sheet .stack { gap: var(--space-3); }
    .sheet h2 { font-size: 1.05rem; }
    .sheet .choice-grid { gap: 6px; }
    .sheet .choice { min-height: 36px; font-size: .86rem; }
    .sheet .segmented button { min-height: 34px; font-size: .85rem; padding: 0 var(--space-3); }
    .sheet .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
    .sheet .emoji-grid button { height: 44px; font-size: 1.35rem; border-radius: 12px; }
    .sheet .title-row .icon-choice { width: 44px; height: 44px; }
    .sheet .icon-choice-emoji { font-size: 1.35rem; }
    /* Native date and time pickers: no extra width for the calendar/clock icon. */
    .sheet input[type="date"].input, .sheet input[type="time"].input { padding-right: 8px; }
}

/* Start and end: date and time side by side in one row each (calendar). */
.when-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 6.5rem); gap: var(--space-2); align-items: center; }
.when-grid.all-day { grid-template-columns: auto minmax(0, 1fr); }
.when-grid > label { font-weight: 600; font-size: .9rem; color: var(--text-2); padding-right: var(--space-1); }
.when-grid > .input { padding-left: 10px; padding-right: 6px; }