/* ===========================================================================
   SESQUA CSS WORKBENCH — SAFE STARTING POINT

   COLOR LAB           Edit css/sesqua-palette.css; defaults remain below.
   FOUNDATION          Search: FOUNDATION / APP SHELL / SHARED CONTROLS.
   SHARED LAYOUT LAB   Search: SHARED LAYOUT LAB (split panes + double grids).
   SHARED LISTS        Search: CURRENT SHARED LISTS AND WORKSPACES.
   PAGE FAMILIES       Search the alphabetical page index in CSS-WORKBENCH.md.
   RESPONSIVE          Search the size map below and each component's media rule.
   PRINT               Search: @media print.
   DIAGNOSTICS         Search: SESQUA CSS X-RAY — DEBUG ONLY.

   Cascade warning: dated sections are historical override layers. Keep their
   order until the affected screens have been visually checked. New palette and
   shared-layout experiments belong in the named labs, not scattered overrides.
   ========================================================================== */

:root {
    /* TYPOGRAPHY — shared reading roles; rem respects browser text scaling.
       Container width controls wrapping/layout, not the reading size. */
    --font-family-ui: Inter, "Segoe UI", Arial, sans-serif;
    --font-size-body: 1rem;
    --font-size-support: .875rem;
    --font-size-control: .875rem;
    --font-size-panel-title: 1rem;
    --font-size-page-title: 1.4rem;
    --font-size-icon: 1.2rem;
    --line-height-body: 1.45;
    --line-height-support: 1.5;

    /* BASELINE FALLBACKS — experiment in sesqua-palette.css, loaded afterward. */
    --paint-canvas: #f4f7f8;
    --paint-surface: #ffffff;
    --paint-surface-soft: #eef3f4;
    --paint-text: #152027;
    --paint-text-muted: #61717a;
    --paint-line: #d8e1e5;
    --paint-accent: #1c6b5a;
    --paint-accent-dark: #155346;
    --paint-accent-soft: #e3f2ed;
    --paint-brand-deep: #134e42;
    --paint-brand-soft: #e9f4f0;
    --paint-on-accent: #ffffff;
    --paint-positive: #2f8a55;
    --paint-caution: #c38a1b;
    --paint-danger: #b44747;

    /* Stable semantic names used throughout the historical stylesheet. */
    --bg: var(--paint-canvas);
    --surface: var(--paint-surface);
    --surface-2: var(--paint-surface-soft);
    --text: var(--paint-text);
    --muted: var(--paint-text-muted);
    --line: var(--paint-line);
    --accent: var(--paint-accent);
    --accent-dark: var(--paint-accent-dark);
    --accent-soft: var(--paint-accent-soft);
    --good: var(--paint-positive);
    --warn: var(--paint-caution);
    --bad: var(--paint-danger);
    --shadow: 0 10px 30px rgba(28, 48, 58, .08);
    --radius: 16px;
    --max: 1500px;
    font-family: var(--font-family-ui);
    color: var(--text);
    background: var(--bg);
}

/* ===========================================================================
   RESPONSIVE SIZE MAP — START HERE

   1. WIDE DESKTOP       over 1200px  Full navigation and side-by-side panels.
   2. COMPACT DESKTOP    981–1200px   Hide optional columns; keep split panels.
   3. STACKED / TABLET   701–980px    Stack workspaces; remove split handles.
   4. PHONE              700px/below  Touch layout and full-width controls.

   Extra-tight phones use 480px/below only when a component needs one final
   adjustment. Older component sections may say 760px; treat those as the
   tablet-to-phone transition until that section is consolidated.
   ========================================================================== */

/* Final pre-form QA prototypes: popup Help and Recipe Library storage details. */
.context-help-trigger { display:inline-grid;place-items:center;width:27px;height:27px;margin-left:5px;border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--accent-dark);font:inherit;font-size:.82rem;font-weight:900;vertical-align:middle;cursor:pointer }
.context-help-layer { position:fixed;inset:0;z-index:2300;pointer-events:none }
.context-help-popup { position:absolute;top:84px;right:22px;width:min(390px,calc(100vw - 24px));max-height:calc(100vh - 108px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #a9c4bb;border-radius:15px;background:#fff;box-shadow:var(--shadow);pointer-events:auto }
.context-help-popup > header { display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:#f2f8f5 }
.context-help-popup > header span { display:flex;align-items:center;gap:9px }
.context-help-popup > header img { width:34px;height:34px;object-fit:contain }
.context-help-body { min-height:0;overflow:auto;padding:14px;line-height:1.45 }
.context-help-body p { margin-top:0 }
.context-help-body ul { margin:0 0 14px;padding-left:20px }
.context-help-body li + li { margin-top:6px }
.stored-locally-button { margin-left:auto;border:0;background:transparent;color:var(--accent-dark);font:inherit;font-size:.78rem;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer }
.storage-details-backdrop { z-index:2250 }
.storage-details-popup { width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 32px);display:flex;flex-direction:column;padding:0;overflow:hidden }
.storage-details-popup > header,.storage-details-popup > footer { display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:var(--surface-2) }
.storage-details-popup > header { border-bottom:1px solid var(--line) }
.storage-details-popup > header h2 { margin:2px 0 0 }
.storage-details-popup > footer { border-top:1px solid var(--line) }
.storage-details-body { min-height:0;overflow:auto;padding:15px }
.storage-details-body dl { display:grid;gap:9px;margin:0 }
.storage-details-body dl > div { display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line) }
.storage-details-body dt { color:var(--muted);font-size:.76rem;font-weight:800 }
.storage-details-body dd { margin:0;min-width:0 }
.storage-details-body code { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.storage-details-body dd .mini-btn { margin-top:7px }
.storage-recipe-list { margin-top:14px }
.storage-recipe-list ul { max-height:160px;overflow:auto;margin:7px 0 0;padding-left:20px }
@media(max-width:700px) { .context-help-popup { inset:8px;width:auto;max-height:none } .storage-details-body dl > div { grid-template-columns:1fr;gap:3px } }

/* FOUNDATION =============================================================== */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
}

body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

button, input, select, textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

/* APP SHELL ================================================================ */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px clamp(18px,3vw,44px);
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    color: var(--text);
}

    .brand:hover {
        text-decoration: none;
    }

    .brand > span:last-child {
        display: flex;
        flex-direction: column;
        line-height: 1.05;
    }

    .brand strong {
        font-size: 1.15rem;
        letter-spacing: -.02em;
    }

    .brand small {
        margin-top: 4px;
        color: var(--muted);
        font-size: .72rem;
    }

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: white;
    font-weight: 800;
    letter-spacing: -.04em;
}

    .brand-mark.large {
        width: 68px;
        height: 68px;
        font-size: 1.35rem;
        margin-bottom: 16px;
    }

.main-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .main-nav a {
        padding: 9px 11px;
        border-radius: 10px;
        color: #34454d;
        font-weight: 650;
        font-size: .92rem;
    }

        .main-nav a:hover, .main-nav a.active {
            background: var(--accent-soft);
            color: var(--accent-dark);
            text-decoration: none;
        }

.nav-toggle {
    display: none;
    margin-left: auto;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 10px;
    padding: 8px 11px;
}

.page-wrap {
    width: min(var(--max), calc(100% - 36px));
    margin: 0 auto;
    flex: 1;
    padding: 34px 0 54px;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px clamp(18px,3vw,44px);
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: .84rem;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(270px,.7fr);
    gap: 30px;
    align-items: stretch;
    padding: clamp(28px,5vw,72px) 0 38px;
}

    .hero h1, .page-heading h1, .onboarding-brand h1 {
        font-size: clamp(2.25rem,5vw,4.8rem);
        line-height: .98;
        letter-spacing: -.055em;
        margin: 8px 0 18px;
        max-width: 850px;
    }

    .hero p {
        max-width: 760px;
        color: var(--muted);
        font-size: 1.12rem;
    }

.hero-card {
    border-radius: 24px;
    padding: 28px;
    color: white;
    background: linear-gradient(145deg,var(--accent-dark),#27856e);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-card-label, .eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
    font-size: .74rem;
}

.hero-card strong {
    font-size: 1.7rem;
    margin: 8px 0;
}

.hero-card p {
    color: rgba(255,255,255,.82);
    font-size: .95rem;
}

.hero-card a {
    color: white;
    font-weight: 700;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

.feature-card, .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 3px 14px rgba(34,57,68,.035);
}

.feature-card {
    color: var(--text);
    padding: 24px;
    display: block;
    min-height: 180px;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .feature-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        text-decoration: none;
    }

    .feature-card strong {
        display: block;
        font-size: 1.15rem;
        margin: 14px 0 8px;
    }

    .feature-card p {
        color: var(--muted);
        margin: 0;
    }

.feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 900;
    font-size: 1.35rem;
}

.trust-strip {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
}

    .trust-strip div {
        background: var(--surface);
        padding: 18px 22px;
        display: flex;
        flex-direction: column;
    }

    .trust-strip span {
        color: var(--muted);
        font-size: .88rem;
        margin-top: 4px;
    }

.card {
    padding: clamp(18px,2.4vw,30px);
}

    .card h2 {
        margin-top: 0;
        letter-spacing: -.025em;
    }

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 24px;
}

    .page-heading h1 {
        font-size: clamp(2.1rem,4vw,3.8rem);
        margin-bottom: 9px;
    }

    .page-heading p {
        margin: 0;
        color: var(--muted);
        max-width: 760px;
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 11px;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--surface);
    font-weight: 700;
    text-decoration: none;
}

    .btn:hover {
        text-decoration: none;
        border-color: #b8c8cf;
        background: #f9fbfc;
    }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

    .btn-primary:hover {
        background: var(--accent-dark);
        border-color: var(--accent-dark);
        color: white;
    }

.btn-large {
    min-height: 50px;
    padding: 12px 20px;
}

.btn-small {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .84rem;
}

.btn-danger {
    color: var(--bad);
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.button-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.text-input, .select-input, .text-area {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd7dc;
    border-radius: 10px;
    background: white;
    color: var(--text);
    outline: none;
}

    .text-input:focus, .select-input:focus, .text-area:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(28,107,90,.12);
    }

.text-area {
    min-height: 92px;
    resize: vertical;
}

    .text-area.tall {
        min-height: 180px;
    }

.field-label, .filter-grid label, .compare-controls label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 700;
    font-size: .88rem;
    margin: 12px 0;
}

    .field-label input, .field-label textarea, .field-label select {
        font-weight: 400;
    }

.search-line {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
}

.search-input {
    min-height: 48px;
    font-size: 1.03rem;
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}

.inline-message {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 10px;
    color: #42545d;
}

.split-view {
    display: grid;
    grid-template-columns: minmax(310px,.72fr) minmax(0,1.6fr);
    gap: 16px;
    align-items: start;
}

.results-pane {
    padding: 0;
    overflow: hidden;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 115px);
}

.section-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

    .section-title span {
        color: var(--muted);
        font-size: .85rem;
    }

.result-list {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

.result-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #edf1f3;
    background: white;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    text-align: left;
    color: var(--text);
}

    .result-row:hover, .result-row.selected {
        background: var(--accent-soft);
    }

    .result-row span {
        min-width: 0;
    }

    .result-row strong, .result-row small {
        display: block;
    }

    .result-row strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .result-row small {
        color: var(--muted);
        margin-top: 3px;
    }

.result-meta {
    text-align: right;
    max-width: 130px;
}

.detail-pane {
    min-width: 0;
}

.food-detail-grid:not(.sesqua-split-pane) {
    display: grid;
    grid-template-columns: minmax(250px,340px) minmax(0,1fr);
    gap: 28px;
    align-items: start;
}

.nutrition-label {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    border: 2px solid #000;
    padding: 6px 7px 8px;
    background: #fff;
    width: min(100%, 380px);
    box-sizing: border-box;
}

.nf-title {
    font-size: 2.35rem;
    line-height: .9;
    font-weight: 900;
    letter-spacing: -.06em;
}

.nf-servings {
    padding-top: 5px;
    font-size: .82rem;
}

.nf-serving {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    padding: 3px 0 5px;
    font-weight: 700;
    border-bottom: 1px solid #000;
}

.nf-rule-thick {
    height: 9px;
    background: #111;
    margin: 3px 0;
}

.nf-rule-medium {
    height: 5px;
    background: #111;
    margin: 3px 0 0;
}

.nf-small {
    font-size: .72rem;
    font-weight: 700;
    padding-top: 3px;
}

.nf-calories {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 1px 0 2px;
}

    .nf-calories span {
        font-size: 1.55rem;
        font-weight: 900;
    }

    .nf-calories strong {
        font-size: 2.35rem;
        line-height: 1;
    }

.nf-dv-heading {
    padding: 3px 0 2px;
    border-bottom: 1px solid #000;
    text-align: right;
    font-size: .7rem;
    font-weight: 800;
}

.nf-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #111;
    padding: 2px 0 2px 7px;
    font-size: .82rem;
    line-height: 1.15;
}

.nf-row > span { min-width: 0; overflow-wrap: anywhere; }
.nf-row > strong { min-width: 38px; text-align: right; }
.nf-row > span > span { font-weight: 400; }

.nf-bold span:first-child {
    font-weight: 800;
}

.nf-indent span:first-child {
    padding-left: 12px;
}

.nf-double-indent span:first-child { padding-left: 24px; }
.nf-micronutrient { padding-left: 0; }
.nf-rule-thin { height: 1px; background: #000; margin-top: 4px; }

.nf-footnote {
    font-size: .68rem;
    line-height: 1.25;
    padding: 5px 2px 0 11px;
    text-indent: -9px;
}

.analysis-panel h2 {
    font-size: clamp(1.55rem,2.2vw,2.4rem);
    line-height: 1.05;
    margin: 5px 0 4px;
    letter-spacing: -.035em;
}

.muted {
    color: var(--muted);
}

.block {
    display: block;
}

.goal-callout {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    background: var(--surface-2);
    padding: 12px 15px;
    border-radius: 11px;
    margin: 18px 0;
}

    .goal-callout span {
        color: var(--muted);
    }

.fit-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

    .fit-grid.compact {
        margin-top: 16px;
    }

.fit-badge {
    border: 1px solid var(--line);
    background: white;
    border-radius: 12px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    color: var(--text);
}

    .fit-badge:hover {
        background: #f9fbfb;
    }

    .fit-badge > span:last-child {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .fit-badge small {
        color: var(--muted);
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.signal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #9ba8ae;
}

    .fit-green .signal-dot, .signal-dot.green {
        background: var(--good);
        box-shadow: 0 0 0 4px rgba(47,138,85,.12);
    }

.fit-yellow .signal-dot {
    background: var(--warn);
    box-shadow: 0 0 0 4px rgba(195,138,27,.12);
}

.fit-red .signal-dot {
    background: var(--bad);
    box-shadow: 0 0 0 4px rgba(180,71,71,.12);
}

.signal-dot.gray {
    background: #9ba8ae;
}

.explain-box {
    margin-top: 12px;
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 13px 15px;
}

    .explain-box p {
        margin-bottom: 0;
    }

.explain-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.15rem;
    padding: 3px 6px;
}

    .icon-btn.danger {
        color: var(--bad);
    }

.source-details {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

    .source-details summary {
        font-weight: 800;
        cursor: pointer;
    }

.raw-json {
    max-height: 420px;
    overflow: auto;
    background: #121b20;
    color: #dce9e5;
    padding: 14px;
    border-radius: 10px;
    font-size: .77rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.table-wrap {
    overflow: auto;
    margin-top: 14px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

    .data-table th, .data-table td {
        padding: 10px 11px;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
    }

    .data-table th {
        position: sticky;
        top: 0;
        background: #f3f7f8;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

.actions-cell {
    text-align: right !important;
}

.empty-state, .loading-block {
    text-align: center;
    color: var(--muted);
    padding: 40px 24px;
}

    .empty-state strong {
        display: block;
        color: var(--text);
        font-size: 1.1rem;
    }

.two-column, .settings-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

.timeline {
    display: flex;
    flex-direction: column;
}

.timeline-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

    .timeline-row > div:first-child {
        min-width: 75px;
    }

    .timeline-row small {
        display: block;
        color: var(--muted);
    }

.grow {
    flex: 1;
}

.inline-fields {
    display: flex;
    align-items: end;
    gap: 10px;
}

    .inline-fields .field-label {
        margin: 0;
    }

.small-field {
    max-width: 115px;
}

.ingredient-list {
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

    .ingredient-list > div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--line);
    }

        .ingredient-list > div:last-child {
            border-bottom: 0;
        }

    .ingredient-list small {
        display: block;
        color: var(--muted);
    }

.recipe-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(330px,.75fr);
    gap: 16px;
    margin-bottom: 16px;
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

    .metric-row div {
        background: var(--surface-2);
        padding: 13px;
        border-radius: 10px;
    }

    .metric-row span, .metric-row strong {
        display: block;
    }

    .metric-row span {
        color: var(--muted);
        font-size: .78rem;
    }

    .metric-row strong {
        font-size: 1.25rem;
        margin-top: 2px;
    }

.recipe-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

    .recipe-cards > div {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
    }

    .recipe-cards strong, .recipe-cards span {
        display: block;
    }

    .recipe-cards span {
        color: var(--muted);
        font-size: .85rem;
    }

.compare-controls {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.compare-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-left: 30%;
    margin-bottom: 12px;
}

    .compare-head span, .compare-head strong {
        display: block;
    }

    .compare-head span {
        color: var(--muted);
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

.compare-row {
    display: grid;
    grid-template-columns: 30% 35% 35%;
    border-top: 1px solid var(--line);
}

    .compare-row > * {
        padding: 11px 10px;
    }

    .compare-row .winner {
        background: #e6f6ed;
        color: #185d38;
        font-weight: 800;
    }

.rank-list > div {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.rank-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border-radius: 8px;
    font-weight: 800;
}

.fine-print {
    color: var(--muted);
    font-size: .82rem;
}

.learn-grid, .privacy-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}

    .learn-grid .card {
        min-height: 230px;
    }

.learn-tag {
    display: inline-block;
    color: var(--accent-dark);
    background: var(--accent-soft);
    padding: 5px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.text-link {
    font-weight: 800;
}

.evidence-note {
    margin-top: 16px;
}

.goal-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.goal-option {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: white;
    padding: 12px;
    text-align: left;
    color: var(--text);
}

    .goal-option strong, .goal-option span {
        display: block;
    }

    .goal-option span {
        color: var(--muted);
        font-size: .82rem;
        margin-top: 3px;
    }

    .goal-option.selected {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(28,107,90,.12);
        background: var(--accent-soft);
    }

.switch-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

    .switch-row input {
        margin-top: 4px;
    }

    .switch-row span {
        display: flex;
        flex-direction: column;
    }

    .switch-row small {
        color: var(--muted);
        margin-top: 4px;
    }

.path-code {
    display: block;
    overflow: auto;
    background: #eef2f3;
    padding: 10px;
    border-radius: 8px;
}

.save-bar {
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(244,247,248,.95);
    padding: 12px 0;
}

.privacy-grid .principle strong {
    font-size: 1.08rem;
}

.network-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-top: 1px solid var(--line);
    padding: 14px 0;
}

    .network-row p {
        margin: 3px 0 0;
        color: var(--muted);
    }

.brand-demo {
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    margin: 20px 0;
}

    .brand-demo strong, .brand-demo span {
        display: block;
    }

    .brand-demo strong {
        font-size: 1.8rem;
    }

    .brand-demo span {
        color: var(--muted);
    }

.onboarding-shell {
    max-width: 1000px;
    margin: 0 auto;
}

.onboarding-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 30px;
}

    .onboarding-brand h1 {
        font-size: clamp(2.4rem,5vw,4.5rem);
    }

    .onboarding-brand p {
        color: var(--muted);
        max-width: 700px;
    }

.step-card {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
}

.step-number {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: white;
    font-weight: 900;
}

.status-pill {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .84rem;
}

    .status-pill.good {
        background: #e6f6ed;
        color: #185d38;
    }

    .status-pill.bad {
        background: #fbeaea;
        color: #8b2f2f;
    }

    .status-pill.neutral {
        background: var(--surface-2);
    }

.onboarding-actions {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-top: 18px;
}

.privacy-note {
    max-width: 620px;
    color: var(--muted);
}

@media (max-width: 1050px) {
    .main-nav {
        position: absolute;
        left: 18px;
        right: 18px;
        top: 68px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: white;
        box-shadow: var(--shadow);
    }

        .main-nav.open {
            display: flex;
        }

    .nav-toggle {
        display: block;
    }

    .dashboard-grid, .learn-grid, .privacy-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .split-view {
        grid-template-columns: 1fr;
    }

    .results-pane {
        position: static;
        max-height: 430px;
    }

    .result-list {
        max-height: 360px;
    }

    .recipe-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 15px;
    }

    .page-wrap {
        width: min(100% - 22px,var(--max));
        padding-top: 20px;
    }

    .topbar {
        padding: 10px 12px;
    }

    .brand small {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 26px;
    }

        .hero h1 {
            font-size: clamp(2.6rem,13vw,4.1rem);
        }

    .dashboard-grid, .trust-strip, .two-column, .settings-grid, .learn-grid, .privacy-grid, .compare-controls {
        grid-template-columns: 1fr;
    }

    .trust-strip {
        gap: 1px;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-line {
        grid-template-columns: 1fr;
    }

    .filter-grid {
        grid-template-columns: 1fr;
    }

    .food-detail-grid:not(.sesqua-split-pane) {
        grid-template-columns: 1fr;
    }

    .nutrition-label {
        max-width: 390px;
        width: 100%;
        margin: 0 auto;
    }

    .fit-grid {
        grid-template-columns: 1fr;
    }

    .result-row {
        grid-template-columns: 1fr;
    }

    .result-meta {
        text-align: left;
        max-width: none;
        display: flex;
        gap: 10px;
    }

    .metric-row, .recipe-cards {
        grid-template-columns: 1fr;
    }

    .compare-head {
        margin-left: 0;
    }

    .compare-row {
        grid-template-columns: 34% 33% 33%;
        font-size: .88rem;
    }

    .goal-grid {
        grid-template-columns: 1fr;
    }

    .inline-fields {
        align-items: stretch;
        flex-direction: column;
    }

    .small-field {
        max-width: none;
    }

    .onboarding-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .footer {
        flex-direction: column;
    }
}


/* FoodLens v0.3 shared branding + responsive product controls.
   Private-label builds should override these variables first rather than fork components. */
:root {
    --brand-name: "FoodLens";
    --brand-primary: var(--paint-accent);
    --brand-primary-dark: var(--paint-brand-deep);
    --brand-soft: var(--paint-brand-soft);
    --brand-radius: 12px;
    --brand-font: Inter,Segoe UI,Arial,sans-serif;
}

.foodlens-mascot {
    width: 42px;
    height: 42px;
    display: inline-block;
    position: relative;
    border: 4px solid var(--accent);
    border-radius: 50%;
    background: white;
    box-sizing: border-box;
    flex: 0 0 auto
}

    .foodlens-mascot:after {
        content: "";
        position: absolute;
        width: 17px;
        height: 5px;
        background: var(--accent);
        right: -14px;
        bottom: -6px;
        transform: rotate(45deg);
        border-radius: 4px
    }

.raisin-eye {
    position: absolute;
    width: 16px;
    height: 20px;
    left: 9px;
    top: 7px;
    border-radius: 48% 52% 45% 55%;
    background: #3d243f;
    box-shadow: inset 3px 2px 0 rgba(255,255,255,.2)
}

.foodlens-mascot.large {
    width: 74px;
    height: 74px;
    border-width: 6px;
    flex: 0 0 74px
}

    .foodlens-mascot.large .raisin-eye {
        width: 29px;
        height: 36px;
        left: 16px;
        top: 12px
    }

    .foodlens-mascot.large:after {
        width: 28px;
        height: 8px;
        right: -22px;
        bottom: -10px
    }

.search-line {
    grid-template-columns: minmax(240px,1fr) auto auto
}

.grid-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
    font-size: .82rem;
    color: var(--muted)
}

.nutrient-sort {
    width: auto;
    min-width: 145px;
    padding: 6px 30px 6px 9px
}

.nutrient-result {
    font-weight: 800;
    color: var(--text) !important;
    white-space: nowrap
}

.mini-btn {
    border: 1px solid var(--line);
    background: white;
    border-radius: 8px;
    padding: 6px 9px;
    cursor: pointer;
    color: var(--text)
}

.result-grid-head, .result-grid-row {
    display: grid;
    grid-template-columns: minmax(220px,2fr) minmax(150px,1fr) minmax(100px,.7fr) minmax(90px,.6fr);
    gap: 10px;
    align-items: center
}

.result-grid-head {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted)
}

    .result-grid-head button {
        border: 0;
        background: transparent;
        text-align: left;
        font: inherit;
        color: inherit;
        cursor: pointer
    }

.result-grid-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: white;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    color: var(--text)
}

    .result-grid-row:hover, .result-grid-row.selected {
        background: var(--accent-soft)
    }

    .result-grid-row span, .result-grid-row small {
        color: var(--muted)
    }

.builder-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 14px
}

    .builder-tabs button {
        border: 1px solid var(--line);
        background: white;
        border-radius: 999px;
        padding: 9px 16px;
        font-weight: 800;
        cursor: pointer
    }

        .builder-tabs button.active {
            background: var(--accent);
            border-color: var(--accent);
            color: white
        }

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
    gap: 16px;
    margin-bottom: 16px
}

.builder-summary {
    position: sticky;
    top: 88px;
    align-self: start
}

.builder-head {
    display: flex;
    gap: 12px
}

.category-field {
    min-width: 180px
}

.ingredient-picker {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    max-height: 300px;
    overflow: auto
}

.menu-choice {
    border: 1px solid var(--line);
    background: white;
    border-radius: 10px;
    padding: 10px;
    text-align: left;
    cursor: pointer
}

    .menu-choice strong, .menu-choice small {
        display: block
    }

    .menu-choice small {
        color: var(--muted);
        margin-top: 3px
    }

    .menu-choice.selected {
        background: var(--accent-soft);
        border-color: var(--accent)
    }

.builder-add {
    display: flex;
    align-items: end;
    gap: 10px;
    margin-top: 12px
}

.order-ticket {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 16px 0;
    overflow: hidden
}

    .order-ticket h3 {
        margin: 0;
        padding: 10px 12px;
        background: var(--surface-2)
    }

    .order-ticket > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 12px;
        border-top: 1px solid var(--line)
    }

    .order-ticket small {
        display: block;
        color: var(--muted)
    }

.diary-add-grid {
    display: grid;
    grid-template-columns: 150px 120px 140px minmax(220px,1fr) 100px auto;
    gap: 10px;
    align-items: end
}

.diary-date-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px
}

.diary-table tfoot {
    background: var(--accent-soft)
}

    .diary-table tfoot th {
        font-size: .9rem;
        text-transform: none;
        letter-spacing: 0;
        position: static;
        background: var(--accent-soft)
    }

.origin-story {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 18px 0
}

    .origin-story p {
        margin: 6px 0 0;
        max-width: 900px
    }

.platform-strip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--brand-radius);
    overflow: hidden;
    margin: 18px 0
}

    .platform-strip > div {
        background: white;
        padding: 16px
    }

    .platform-strip strong, .platform-strip span {
        display: block
    }

    .platform-strip span {
        color: var(--muted);
        font-size: .84rem;
        margin-top: 3px
    }

@media(max-width:1050px) {
    .builder-layout {
        grid-template-columns: 1fr
    }

    .builder-summary {
        position: static
    }

    .diary-add-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .result-grid-head, .result-grid-row {
        grid-template-columns: minmax(200px,2fr) minmax(130px,1fr) minmax(90px,.7fr) minmax(80px,.6fr)
    }
}

@media(max-width:760px) {
    .search-line {
        grid-template-columns: 1fr
    }

    .builder-head, .builder-add {
        flex-direction: column;
        align-items: stretch
    }

    .category-field {
        min-width: 0
    }

    .ingredient-picker {
        grid-template-columns: 1fr
    }

    .diary-add-grid {
        grid-template-columns: 1fr
    }

    .platform-strip {
        grid-template-columns: 1fr
    }

    .origin-story {
        align-items: flex-start
    }

    .result-grid-head {
        display: none
    }

    .result-grid-row {
        grid-template-columns: 1fr
    }

        .result-grid-row small {
            display: inline
        }

    .foodlens-mascot {
        transform: scale(.9)
    }
}

/* v0.3 Menu naming hierarchy */
.menu-heading-actions {
    margin-top: 0
}

.menu-library-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 16px
}

.menu-library-section {
    padding: 0;
    overflow: hidden
}

.menu-library-list {
    display: flex;
    flex-direction: column
}

.menu-library-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-top: 1px solid var(--line)
}

    .menu-library-row:first-child {
        border-top: 0
    }

    .menu-library-row > div {
        min-width: 0
    }

    .menu-library-row strong, .menu-library-row small {
        display: block
    }

    .menu-library-row small {
        color: var(--muted);
        margin-top: 3px
    }

    .menu-library-row .learn-tag {
        display: inline-block;
        margin-bottom: 5px
    }

.empty-state.compact {
    padding: 20px
}

.naming-key {
    margin-top: 16px
}

.naming-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line)
}

    .naming-grid > div {
        background: white;
        padding: 15px
    }

    .naming-grid strong, .naming-grid span {
        display: block
    }

    .naming-grid span {
        color: var(--muted);
        font-size: .88rem;
        margin-top: 4px
    }

@media(max-width:1050px) {
    .naming-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:760px) {
    .menu-library-grid, .naming-grid {
        grid-template-columns: 1fr
    }

    .menu-library-row {
        align-items: flex-start
    }

    .menu-heading-actions {
        align-items: stretch
    }
}

/* v0.3 restaurant-style daily Diary */
.diary-page-heading {
    align-items: end
}

.diary-context-card {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 22px;
    margin-bottom: 16px
}

.diary-context-copy {
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .diary-context-copy > strong {
        font-size: 1.35rem
    }

.diary-context-controls {
    display: flex;
    align-items: end;
    gap: 9px;
    flex-wrap: wrap
}

    .diary-context-controls .field-label {
        margin: 0
    }

.diary-date-field {
    min-width: 180px
}

.diary-meal-field {
    min-width: 150px
}

.diary-order-layout {
    display: grid;
    grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr);
    gap: 16px;
    align-items: start
}

.diary-menu-panel, .diary-ticket-panel {
    padding: 0;
    overflow: hidden
}

.diary-menu-panel {
    position: sticky;
    top: 84px
}

.diary-menu-scroll {
    max-height: 50vh;
    overflow: auto
}

.diary-menu-group {
    border-top: 1px solid var(--line)
}

    .diary-menu-group:first-child {
        border-top: 0
    }

    .diary-menu-group h3 {
        margin: 0;
        padding: 11px 14px 7px;
        font-size: .82rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted)
    }

.diary-menu-choice {
    width: 100%;
    border: 0;
    border-top: 1px solid #edf1f3;
    background: white;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    color: var(--text);
    cursor: pointer
}

    .diary-menu-choice:hover, .diary-menu-choice.selected {
        background: var(--accent-soft)
    }

    .diary-menu-choice strong, .diary-menu-choice small {
        display: block
    }

    .diary-menu-choice small {
        color: var(--muted);
        margin-top: 3px
    }

.diary-add-bar {
    display: grid;
    grid-template-columns: 90px 120px minmax(150px,1fr);
    gap: 10px;
    align-items: end;
    padding: 14px;
    border-top: 1px solid var(--line);
    background: var(--surface-2)
}

    .diary-add-bar .field-label {
        margin: 0
    }

.order-ticket-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 18px;
    border-bottom: 1px solid var(--line)
}

    .order-ticket-heading h2 {
        margin: 2px 0 0;
        font-size: 1.35rem
    }

.diary-meal-section {
    border-bottom: 1px solid var(--line);
    border-left: 4px solid transparent
}

    .diary-meal-section.active-destination {
        border-left-color: var(--accent)
    }

.diary-meal-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface-2)
}

    .diary-meal-heading span {
        font-size: .82rem;
        color: var(--muted)
    }

.diary-empty-meal {
    width: 100%;
    border: 0;
    background: white;
    padding: 15px;
    text-align: left;
    color: var(--muted);
    cursor: pointer
}

    .diary-empty-meal:hover {
        background: var(--accent-soft);
        color: var(--accent-dark)
    }

.diary-order-line {
    padding: 13px 14px;
    border-top: 1px solid #edf1f3
}

.diary-order-main {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.diary-order-qty {
    font-weight: 900;
    min-width: 34px
}

.diary-entry-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.diary-components {
    display: flex;
    flex-direction: column;
    margin: 5px 0;
    color: var(--muted);
    font-size: .86rem
}

.diary-line-nutrition {
    text-align: right;
    display: flex;
    flex-direction: column;
    white-space: nowrap
}

    .diary-line-nutrition span {
        font-size: .8rem;
        color: var(--muted);
        margin-top: 2px
    }

.diary-line-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 9px
}

.diary-edit-grid {
    display: grid;
    grid-template-columns: minmax(180px,1fr) 130px 120px 100px;
    gap: 9px;
    align-items: end
}

    .diary-edit-grid .field-label {
        margin: 0
    }

.diary-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px
}

.diary-day-total {
    background: #fbfcfc
}

.nutrition-total-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

    .nutrition-total-grid > div {
        background: white;
        padding: 12px 14px
    }

    .nutrition-total-grid span, .nutrition-total-grid strong {
        display: block
    }

    .nutrition-total-grid span {
        font-size: .78rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .04em
    }

    .nutrition-total-grid strong {
        font-size: 1.15rem;
        margin-top: 2px
    }

.diary-day-total .fine-print {
    padding: 0 16px 14px;
    margin-bottom: 0
}

@media(max-width:1050px) {
    .diary-order-layout {
        grid-template-columns: 1fr
    }

    .diary-menu-panel {
        position: static
    }

    .diary-menu-scroll {
        max-height: 400px
    }

    .diary-context-card {
        align-items: flex-start;
        flex-direction: column
    }

    .diary-edit-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:760px) {
    .diary-context-controls {
        width: 100%
    }

    .diary-date-field, .diary-meal-field {
        min-width: 0;
        flex: 1
    }

    .diary-add-bar {
        grid-template-columns: 1fr 1fr
    }

        .diary-add-bar .btn {
            grid-column: 1/-1
        }

    .nutrition-total-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .diary-order-main {
        flex-wrap: wrap
    }

    .diary-line-nutrition {
        width: 100%;
        text-align: left;
        margin-left: 44px
    }

    .diary-edit-grid {
        grid-template-columns: 1fr
    }

    .diary-context-controls .mini-btn {
        align-self: end
    }

    .diary-ticket-panel {
        overflow: visible
    }
}

/* Wide-display scaling: remains window-friendly while using extra room on large TVs/monitors. */
@media(min-width:1800px) {
    :root {
        --max: 1760px
    }

    body {
        font-size: 17px
    }

    .main-nav a {
        font-size: .96rem
    }

    .page-wrap {
        width: min(var(--max),calc(100% - 64px))
    }
}

/* v0.3 cleanup build: unified Menu Builder + cohesive Diary */
.menu-builder-heading {
    align-items: end
}

.menu-builder-layout {
    display: grid;
    grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
    gap: 16px;
    align-items: start;
    margin-bottom: 16px
}

.menu-builder-source, .menu-builder-work {
    padding: 0;
    overflow: hidden
}

.menu-builder-source {
    position: sticky;
    top: 84px
}

.menu-builder-food-list {
    max-height: 68vh;
    overflow: auto
}

.menu-builder-work {
    padding: 18px
}

.builder-work-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px
}

    .builder-work-header h2 {
        margin: 2px 0 0
    }

.compact-tabs {
    margin: 0;
    justify-content: flex-end
}

    .compact-tabs button {
        padding: 7px 13px
    }

.builder-empty {
    margin-top: 14px
}

.builder-ticket {
    margin-bottom: 16px
}

.recipe-yield-grid, .cooking-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.cooking-details {
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfcfc
}

    .cooking-details summary {
        cursor: pointer;
        font-weight: 800;
        padding: 12px 14px
    }

    .cooking-details[open] summary {
        border-bottom: 1px solid var(--line)
    }

    .cooking-details .cooking-grid {
        padding: 14px 14px 0
    }

    .cooking-details .fine-print {
        padding: 0 14px 12px
    }

.builder-summary-inline {
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden
}

.builder-save-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px
}

    .builder-save-status strong,
    .builder-save-status span {
        display: block
    }

    .builder-save-status a {
        font-weight: 800
    }

    .builder-summary-inline .metric-row {
        margin: 0
    }

.menu-library-unified {
    padding: 0;
    overflow: hidden
}

.menu-flow-guide {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1.3fr) auto minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px
}
    .menu-flow-guide a {
        color: inherit;
        text-decoration: none
    }

        .menu-flow-guide a:hover,
        .menu-flow-guide a:focus-visible {
            color: var(--accent-dark);
            text-decoration: underline
        }
    .menu-flow-guide > div {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        align-items: center;
        column-gap: 8px
    }

    .menu-flow-guide > div > span {
        grid-row: 1 / span 2;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--accent);
        color: white;
        font-weight: 900
    }

    .menu-flow-guide small {
        color: var(--muted);
        line-height: 1.25
    }

    .menu-flow-guide > b {
        color: var(--accent-dark);
        font-size: 1.2rem
    }
.menu-library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-2)
}

.compact-library {
    margin: 0;
    gap: 1px;
    background: var(--line);
    grid-template-columns: repeat(3,minmax(0,1fr))
}

    .compact-library .menu-library-section {
        background: white;
        border-radius: 0
    }

.naming-key-compact {
    margin-top: 16px
}

.diary-unified-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg,var(--surface),var(--accent-soft))
}

.diary-title-line {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0
}

    .diary-title-line h1 {
        margin: 1px 0 0;
        font-size: 1.7rem
    }

.diary-date-display {
    border: 1px solid var(--line);
    background: white;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 850;
    color: var(--text);
    white-space: nowrap
}

    .diary-date-display:hover, .diary-date-display:focus-visible {
        background: var(--accent-soft);
        border-color: var(--accent)
    }

.diary-header-actions {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap
}

.date-nav-buttons {
    display: flex;
    gap: 6px
}

.diary-inline-date {
    min-width: 175px;
    margin: 0
}

.diary-clean-layout {
    margin-top: 0
}

.diary-menu-title {
    align-items: center
}

    .diary-menu-title > div strong, .diary-menu-title > div span {
        display: block
    }

.compact-select-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--muted);
    font-weight: 700
}

.compact-select {
    padding: 6px 28px 6px 8px;
    min-width: 92px
}

.diary-add-bar-clean {
    grid-template-columns: 130px 120px minmax(190px,1fr)
}

.field-hint {
    display: block;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 500;
    margin-top: 3px
}

.diary-day-heading h2 {
    font-size: 1rem;
    margin: 2px 0 0;
    font-weight: 750;
    color: var(--muted)
}

.diary-order-qty {
    min-width: 70px;
    font-size: .88rem
}

.diary-day-total .section-title {
    background: var(--surface-2)
}

@media(max-width:1050px) {
    .menu-flow-guide {
        grid-template-columns: 1fr;
        justify-items: stretch
    }

    .menu-flow-guide > b {
        justify-self: center;
        transform: rotate(90deg)
    }

    .menu-builder-layout {
        grid-template-columns: 1fr
    }

    .menu-builder-source {
        position: static
    }

    .menu-builder-food-list {
        max-height: 360px
    }

    .diary-unified-header {
        align-items: flex-start;
        flex-direction: column
    }

    .diary-header-actions {
        width: 100%;
        justify-content: flex-start
    }

    .compact-library {
        grid-template-columns: 1fr
    }
}

@media(max-width:760px) {
    .builder-work-header {
        flex-direction: column
    }

    .compact-tabs {
        justify-content: flex-start
    }

    .recipe-yield-grid, .cooking-grid {
        grid-template-columns: 1fr
    }

    .diary-title-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px
    }

    .diary-date-display {
        white-space: normal;
        text-align: left
    }

    .diary-header-actions {
        align-items: stretch
    }

    .date-nav-buttons {
        width: 100%
    }

        .date-nav-buttons .mini-btn {
            flex: 1
        }

    .diary-inline-date, .diary-meal-field {
        width: 100%
    }

    .diary-add-bar-clean {
        grid-template-columns: 1fr
    }

        .diary-add-bar-clean .btn {
            grid-column: auto
        }

    .menu-library-toolbar {
        align-items: flex-start;
        flex-direction: column
    }

    .diary-menu-title {
        align-items: flex-start;
        gap: 10px
    }

    .compact-select-label {
        width: 100%;
        justify-content: flex-end
    }
}


/* 2026-08-14 UI test build: centered desktop layout, persistent app menu, drag/drop enhancement */
:root {
    --max: 1440px
}

.page-wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    flex: 1;
    padding: 34px clamp(18px,3vw,44px) 54px;
    min-width: 0
}

.topbar {
    padding: 12px clamp(14px,2.3vw,32px);
    gap: 12px
}

.app-menu-wrap {
    position: relative;
    flex: 0 0 auto
}

.app-menu-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer
}

.app-menu-wrap.open .app-menu-button {
    position: relative;
    z-index: 61
}

.app-menu-dismiss {
    position: fixed;
    z-index: 59;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: default
}

    .app-menu-button:hover, .app-menu-button:focus-visible {
        background: var(--accent-soft);
        border-color: var(--accent);
        outline: none
    }

.app-menu {
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 60;
    width: 230px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column
}

    .app-menu a {
        padding: 10px 11px;
        border-radius: 9px;
        color: var(--text);
        font-weight: 700
    }

        .app-menu a:hover, .app-menu a.active {
            background: var(--accent-soft);
            color: var(--accent-dark);
            text-decoration: none
        }

.app-menu-divider {
    height: 1px;
    background: var(--line);
    margin: 6px 3px
}

.primary-nav {
    margin-left: auto
}

.diary-menu-choice[draggable="true"] {
    cursor: grab;
    transition: opacity .12s ease,transform .12s ease,background .12s ease
}

    .diary-menu-choice[draggable="true"]:active {
        cursor: grabbing
    }

.diary-menu-choice.dragging {
    opacity: .52;
    transform: scale(.985)
}

.diary-meal-section {
    transition: background .14s ease,border-color .14s ease,box-shadow .14s ease
}

    .diary-meal-section.drag-over {
        background: var(--accent-soft);
        border-left-color: var(--accent);
        box-shadow: inset 0 0 0 2px rgba(28,107,90,.24)
    }

        .diary-meal-section.drag-over .diary-meal-heading {
            background: #d9eee7
        }

@media(min-width:1800px) {
    :root {
        --max: 1560px
    }

    .page-wrap {
        width: 100%;
        max-width: var(--max);
        padding-left: 44px;
        padding-right: 44px
    }
}

@media(max-width:1050px) {
    .primary-nav {
        gap: 2px
    }

        .primary-nav a {
            padding: 8px 9px
        }

    .page-wrap {
        padding-left: 22px;
        padding-right: 22px
    }
}

@media(max-width:760px) {
    .primary-nav {
        display: none
    }

    .brand small {
        display: none
    }

    .topbar {
        gap: 9px
    }

    .page-wrap {
        width: 100%;
        padding: 20px 12px 42px
    }

    .app-menu {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 64px;
        width: auto;
        max-height: calc(100vh - 78px);
        overflow: auto
    }
}

/* 2026-08-14 structure-preview build: public tools, recipe editor, library, share */
.compact-heading h1 {
    font-size: clamp(2rem,3.5vw,3.25rem)
}

.tool-preview-card {
    position: relative;
    overflow: hidden
}

.tool-preview-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em
}

.quick-lookup-shell {
    max-width: 900px;
    margin: 22px auto 8px
}

.quick-example-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px
}

    .quick-example-row span {
        padding: 6px 9px;
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--muted);
        font-size: .82rem;
        font-weight: 700
    }

.editor-structure-grid {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(300px,.75fr);
    gap: 16px;
    align-items: start
}

.editor-main-card, .editor-panel {
    padding: 0;
    overflow: hidden
}

.editor-body {
    padding: 16px 18px
}

.editor-two-col {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.editor-side-stack {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px
}

    .preview-metrics div {
        background: white;
        padding: 11px
    }

    .preview-metrics span, .preview-metrics strong {
        display: block
    }

    .preview-metrics span {
        font-size: .72rem;
        color: var(--muted);
        text-transform: uppercase
    }

    .preview-metrics strong {
        font-size: 1.25rem
    }

.editor-publish-strip {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

    .editor-publish-strip > div:first-child {
        display: flex;
        flex-direction: column
    }

    .editor-publish-strip span {
        color: var(--muted);
        font-size: .86rem
    }

.no-margin {
    margin: 0
}

.muted {
    color: var(--muted)
}

.library-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 16px
}

.stat-card {
    padding: 18px
}

    .stat-card span, .stat-card strong, .stat-card small {
        display: block
    }

    .stat-card span {
        color: var(--muted);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .05em
    }

    .stat-card strong {
        font-size: 2rem;
        line-height: 1.05;
        margin: 5px 0
    }

    .stat-card small {
        color: var(--muted)
    }

.library-preview {
    padding: 0;
    overflow: hidden
}

.library-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,430px),1fr));
    gap: 14px;
    padding: 16px;
    background: color-mix(in srgb,var(--surface-2) 58%,transparent)
}

.library-row {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 15px;
    align-items: stretch;
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--accent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 7px 18px rgba(31,74,63,.06)
}

    .library-row:first-child {
        border-top: 1px solid var(--line)
    }

.library-row-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px
}

.library-recipe-title {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap
}

    .library-recipe-title > strong {
        font-size: 1.05rem
    }

    .library-row small {
        width: 100%;
        color: var(--muted);
        padding-left: 0
    }

.library-row-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    padding-top: 13px;
    border-top: 1px solid var(--line)
}

.library-recipe-metrics {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px
}

    .library-recipe-metrics span {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 2px;
        padding: 8px;
        border-radius: 9px;
        background: var(--surface-2)
    }

    .library-recipe-metrics small {
        width: auto;
        font-size: .67rem
    }

    .library-recipe-metrics strong {
        color: #315c50;
        font-size: .82rem
    }

.library-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap
}

.library-new-recipe-card {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 22px;
    border: 1px dashed var(--accent);
    border-radius: 16px;
    background: color-mix(in srgb,var(--surface) 80%,transparent);
    color: var(--accent-dark);
    text-align: center;
    text-decoration: none
}

    .library-new-recipe-card > span {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        border-radius: 50%;
        background: var(--accent);
        color: white;
        font-size: 1.65rem;
        line-height: 1
    }

    .library-new-recipe-card strong {
        font-size: 1rem
    }

    .library-new-recipe-card small {
        max-width: 280px;
        color: var(--muted)
    }

    .library-new-recipe-card:hover,
    .library-new-recipe-card:focus-visible {
        border-style: solid;
        background: var(--surface)
    }

.print-only { display: none }

.status-pill {
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .74rem;
    font-weight: 800;
    color: var(--muted)
}

.share-preview-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.share-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 245px
}

    .share-card strong {
        font-size: 1.2rem;
        margin: 14px 0 6px
    }

    .share-card p {
        color: var(--muted);
        flex: 1
    }

.share-flow {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px
}

    .share-flow span {
        color: var(--muted)
    }

@media(max-width:980px) {
    .editor-structure-grid {
        grid-template-columns: 1fr
    }

    .library-stats, .share-preview-grid {
        grid-template-columns: 1fr 1fr
    }

    .editor-publish-strip {
        align-items: flex-start;
        flex-direction: column
    }
}

@media(max-width:650px) {
    .editor-two-col, .library-stats, .share-preview-grid {
        grid-template-columns: 1fr
    }

    .preview-metrics {
        grid-template-columns: 1fr
    }

    .library-row {
        align-items: flex-start;
        grid-template-columns: 1fr
    }

    .library-row-summary {
        width: 100%;
        padding: 12px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0
    }

    .library-row-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .builder-save-status {
        align-items: flex-start;
        flex-direction: column
    }

    .share-flow {
        flex-direction: column
    }
}

/* 2026-08-15 testing-productivity build: pinned Diary controls/totals, quick add, completed DnD feedback, label modal */
.diary-workbench-layout {
    grid-template-columns: minmax(390px,.9fr) minmax(520px,1.1fr);
    align-items: stretch
}

.diary-workbench-panel {
    height: min(72vh,760px);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.diary-fixed-head {
    flex: 0 0 auto;
    background: var(--surface);
    z-index: 2
}

.diary-add-bar-top {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(120px,1fr) 92px 118px minmax(132px,auto);
    gap: 9px;
    align-items: end;
    padding: 11px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2)
}

    .diary-add-bar-top .field-label {
        margin: 0
    }

    .diary-add-bar-top .btn {
        white-space: nowrap
    }

.diary-selected-summary {
    min-width: 0;
    align-self: center
}

    .diary-selected-summary span, .diary-selected-summary strong {
        display: block
    }

    .diary-selected-summary span {
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
        font-weight: 800
    }

    .diary-selected-summary strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .9rem;
        margin-top: 2px
    }

.diary-workbench-scroll {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
}

.diary-menu-scroll.diary-workbench-scroll {
    max-height: none;
    flex: 1 1 auto
}

.diary-ticket-scroll.diary-workbench-scroll {
    flex: 1 1 auto
}

.diary-menu-choice-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
    border-top: 1px solid #edf1f3;
    background: white;
    transition: opacity .12s ease,transform .12s ease,background .12s ease
}

    .diary-menu-choice-row:hover, .diary-menu-choice-row.selected {
        background: var(--accent-soft)
    }

    .diary-menu-choice-row[draggable="true"] {
        cursor: grab
    }

    .diary-menu-choice-row.dragging {
        opacity: .5;
        transform: scale(.988)
    }

.diary-menu-choice-main {
    border: 0;
    background: transparent;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    min-width: 0
}

    .diary-menu-choice-main > span:first-child {
        min-width: 0
    }

    .diary-menu-choice-main strong, .diary-menu-choice-main small {
        display: block
    }

    .diary-menu-choice-main strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .diary-menu-choice-main small {
        color: var(--muted);
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.diary-quick-add {
    margin: 7px 8px 7px 0;
    align-self: center;
    white-space: nowrap;
    background: white
}

.diary-day-total-top {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--line);
    background: white;
    z-index: 2
}

.nutrition-total-grid-compact {
    grid-template-columns: repeat(6,minmax(76px,1fr));
    border-top: 0;
    border-bottom: 0
}

    .nutrition-total-grid-compact > div {
        padding: 9px 10px
    }

    .nutrition-total-grid-compact span {
        font-size: .67rem
    }

    .nutrition-total-grid-compact strong {
        font-size: 1rem
    }

.meal-destination-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit
}

    .meal-destination-button:hover {
        color: var(--accent-dark)
    }

.diary-order-main-unified {
    display: block
}

.diary-entry-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

    .diary-entry-primary > strong {
        font-size: .96rem
    }

.diary-entry-meta {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 5px
}

    .diary-entry-meta span {
        font-size: .78rem;
        color: var(--muted);
        padding-right: 7px;
        border-right: 1px solid var(--line)
    }

        .diary-entry-meta span:last-child {
            border-right: 0;
            padding-right: 0
        }

.diary-components-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    margin: 7px 0 0
}

    .diary-components-inline span {
        background: var(--surface-2);
        padding: 3px 6px;
        border-radius: 999px;
        font-size: .74rem
    }

.diary-order-line.just-added {
    animation: diaryLand .65s ease both
}

@keyframes diaryLand {
    0% {
        background: #d9eee7;
        transform: translateY(-5px);
        box-shadow: inset 4px 0 0 var(--accent)
    }

    55% {
        background: var(--accent-soft)
    }

    100% {
        background: white;
        transform: none;
        box-shadow: none
    }
}

.diary-toast {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1400;
    background: #123f36;
    color: white;
    border-radius: 999px;
    padding: 9px 15px;
    font-weight: 800;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    animation: toastIn .18s ease-out
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translate(-50%,-8px)
    }

    to {
        opacity: 1;
        transform: translate(-50%,0)
    }
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(16,28,26,.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    backdrop-filter: blur(2px)
}

.nutrition-modal {
    width: min(520px,96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.28)
}

.nutrition-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2)
}

    .nutrition-modal-head > div span, .nutrition-modal-head > div strong {
        display: block
    }

    .nutrition-modal-head > div strong {
        font-size: 1rem;
        margin-top: 2px
    }

.modal-close {
    font-size: 1.55rem;
    line-height: 1
}

.nutrition-modal-body {
    overflow: auto;
    padding: 16px;
    background: #eef4f1
}

    .nutrition-modal-body .diary-label {
        max-width: 370px;
        margin: auto
    }

.nf-item-name {
    font-family: var(--font,system-ui);
    font-size: 1rem;
    font-weight: 900;
    padding-bottom: 5px;
    border-bottom: 1px solid #111;
    margin-bottom: 4px;
    overflow-wrap: anywhere
}

.nutrition-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: white
}

@media(max-width:1150px) {
    .diary-workbench-layout {
        grid-template-columns: 1fr
    }

    .diary-workbench-panel {
        height: 620px;
        min-height: 520px
    }

    .nutrition-total-grid-compact {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:760px) {
    .diary-workbench-panel {
        height: auto;
        min-height: 0
    }

    .diary-workbench-scroll {
        max-height: 430px
    }

    .diary-add-bar-top {
        grid-template-columns: 1fr 1fr
    }

    .diary-selected-summary {
        grid-column: 1/-1
    }

    .diary-add-bar-top .btn {
        grid-column: 1/-1
    }

    .nutrition-total-grid-compact {
        grid-template-columns: repeat(2,1fr)
    }

    .diary-menu-choice-row {
        grid-template-columns: minmax(0,1fr)
    }

    .diary-quick-add {
        margin: 0 10px 9px;
        justify-self: start
    }

    .diary-toast {
        top: 70px;
        max-width: 90vw;
        text-align: center
    }

    .modal-backdrop {
        padding: 10px
    }
}

/* 2026-08-15 Diary compact-workflow cleanup */
.diary-compact-header {
    padding: 10px 14px;
    margin-bottom: 12px;
    min-height: 58px
}

.diary-title-line-compact {
    gap: 10px
}

    .diary-title-line-compact h1 {
        font-size: 1.35rem;
        margin: 0;
        line-height: 1.1
    }

.diary-compact-header .diary-date-display {
    padding: 7px 10px;
    border-radius: 9px;
    font-size: .86rem
}

.diary-header-actions-compact {
    gap: 7px
}

    .diary-header-actions-compact .field-label {
        font-size: .72rem
    }

    .diary-header-actions-compact .select-input, .diary-header-actions-compact .text-input {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: .86rem
    }

.icon-only {
    min-width: 32px;
    padding-left: 7px;
    padding-right: 7px
}

.diary-list-head {
    min-height: 55px;
    padding: 10px 13px;
    box-sizing: border-box
}

    .diary-list-head > div strong, .diary-list-head > div span {
        display: block
    }

    .diary-list-head > div strong {
        font-size: .94rem
    }

    .diary-list-head > div span {
        font-size: .74rem;
        color: var(--muted);
        margin-top: 2px
    }

.diary-day-heading h2 {
    margin: 0
}

.active-drop-pill {
    background: var(--accent-soft);
    color: var(--accent-dark);
    border: 1px solid rgba(28,107,90,.18)
}

.diary-workbench-layout {
    gap: 12px
}

.diary-workbench-panel {
    font-size: .92rem
}

.diary-add-bar-top {
    grid-template-columns: minmax(110px,1fr) 78px 105px minmax(118px,auto);
    padding: 8px 11px;
    gap: 7px
}

    .diary-add-bar-top .text-input, .diary-add-bar-top .select-input {
        padding: 7px 8px
    }

    .diary-add-bar-top .btn {
        padding: 8px 10px;
        font-size: .82rem
    }

.diary-selected-summary strong {
    font-size: .84rem
}

.diary-menu-choice-main {
    padding: 8px 10px
}

    .diary-menu-choice-main strong {
        font-size: .88rem
    }

    .diary-menu-choice-main small {
        font-size: .73rem
    }

.diary-menu-group h3 {
    padding: 8px 11px 5px;
    font-size: .72rem
}

.icon-action {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    font-weight: 900
}

.diary-quick-add {
    margin: 5px 7px 5px 0;
    align-self: center
}

.diary-entry-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px
}

    .diary-entry-row .diary-order-main {
        min-width: 0;
        flex: 1
    }

.diary-entry-name {
    border: 0;
    background: transparent;
    color: var(--accent-dark);
    padding: 0;
    font: inherit;
    font-size: .89rem;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
    text-decoration: none
}

    .diary-entry-name:hover, .diary-entry-name:focus-visible {
        text-decoration: underline
    }

.diary-line-actions-inline {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
    flex: 0 0 auto
}

    .diary-line-actions-inline .mini-btn {
        margin: 0
    }

.diary-order-line {
    padding: 9px 11px
}

.diary-entry-primary {
    gap: 6px
}

    .diary-entry-primary .learn-tag {
        font-size: .65rem;
        padding: 3px 6px
    }

.diary-entry-meta {
    margin-top: 3px;
    gap: 5px
}

    .diary-entry-meta span {
        font-size: .72rem;
        padding-right: 5px
    }

.diary-components-inline {
    margin-top: 5px
}

    .diary-components-inline span {
        font-size: .69rem;
        padding: 2px 5px
    }

.diary-meal-section.active-destination {
    border-left-width: 5px;
    box-shadow: inset 3px 0 0 rgba(28,107,90,.08)
}

    .diary-meal-section.active-destination .diary-meal-heading {
        background: #e4f3ee
    }

    .diary-meal-section.active-destination .meal-destination-button:after {
        content: "  • drop here";
        font-size: .68rem;
        color: var(--accent-dark);
        font-weight: 750
    }

.diary-meal-heading {
    padding: 8px 11px
}

    .diary-meal-heading span {
        font-size: .74rem
    }

.diary-empty-meal {
    padding: 11px;
    font-size: .78rem
}

.nutrition-total-grid-compact > div {
    padding: 7px 8px
}

.nutrition-total-grid-compact span {
    font-size: .61rem
}

.nutrition-total-grid-compact strong {
    font-size: .9rem
}

@media(max-width:760px) {
    .diary-add-bar-top {
        grid-template-columns: 1fr 1fr
    }

    .diary-list-head {
        min-height: auto
    }

    .diary-entry-row {
        align-items: flex-start
    }

    .diary-line-actions-inline {
        padding-top: 1px
    }

    .diary-title-line-compact {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap
    }
}


/* 2026-08-15 Diary alignment/full-screen refinement */
.diary-single-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 13px;
    min-height: 50px
}

    .diary-single-header .diary-title-line {
        flex: 0 0 auto
    }

    .diary-single-header .diary-header-tools {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px
    }

.diary-date-nav-combined {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px
}

    .diary-date-nav-combined .mini-btn {
        margin: 0;
        border-color: transparent;
        background: white
    }

    .diary-date-nav-combined .today-btn {
        min-width: 58px
    }

.diary-date-input {
    width: 142px;
    min-width: 142px;
    margin: 0;
    padding: 6px 8px;
    font-size: .82rem;
    border: 0;
    background: white
}

/* Keep the list columns visually synchronized: title row, control/totals row, then scrolling content. */
.diary-workbench-panel {
    height: calc(100dvh - 198px);
    min-height: 610px;
    max-height: none
}

.diary-list-head {
    height: 52px;
    min-height: 52px;
    padding: 8px 11px
}

.diary-add-bar-top, .diary-day-total-top {
    height: 74px;
    min-height: 74px;
    box-sizing: border-box
}

.diary-add-bar-top {
    grid-template-columns: minmax(118px,1.15fr) 92px 76px 102px 58px;
    gap: 6px;
    padding: 7px 10px;
    align-items: end
}

    .diary-add-bar-top .field-label {
        min-width: 0;
        white-space: nowrap;
        font-size: .68rem
    }

    .diary-add-bar-top .text-input, .diary-add-bar-top .select-input {
        width: 100%;
        min-width: 0;
        padding: 6px 7px;
        font-size: .8rem
    }

    .diary-add-bar-top .diary-main-add {
        min-width: 52px;
        padding: 7px 9px
    }

.diary-selected-summary strong {
    font-size: .8rem
}

.diary-day-total-top {
    display: flex;
    align-items: stretch;
    padding: 0
}

    .diary-day-total-top .nutrition-total-grid {
        width: 100%;
        height: 100%
    }

.nutrition-total-grid-compact > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 7px
}

.diary-menu-scroll.diary-workbench-scroll, .diary-ticket-scroll.diary-workbench-scroll {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto !important;
    overflow-x: hidden
}

/* Active destination is unmistakable without animation/blinking. */
.diary-meal-section {
    transition: border-color .14s ease,background .14s ease,box-shadow .14s ease
}

    .diary-meal-section.active-destination {
        border-left: 6px solid var(--accent);
        background: #eef8f4;
        box-shadow: inset 0 0 0 1px rgba(28,107,90,.13),inset 5px 0 18px rgba(28,107,90,.07)
    }

        .diary-meal-section.active-destination .diary-meal-heading {
            background: #d5eee5;
            color: #123f36
        }

        .diary-meal-section.active-destination .meal-destination-button:after {
            content: "  • DROP HERE";
            font-size: .68rem;
            color: #12624f;
            font-weight: 900;
            letter-spacing: .025em
        }

    .diary-meal-section.drag-over {
        border-left-color: #0b7b61;
        background: #dff3eb;
        box-shadow: inset 0 0 0 2px rgba(11,123,97,.3),0 0 0 2px rgba(11,123,97,.12)
    }

        .diary-meal-section.drag-over .diary-meal-heading {
            background: #bfe5d7
        }

@media(max-width:1150px) {
    .diary-workbench-panel {
        height: 650px;
        min-height: 540px
    }

    .diary-add-bar-top {
        grid-template-columns: minmax(130px,1fr) 92px 78px 108px 58px
    }
}

@media(max-width:760px) {
    .diary-single-header {
        align-items: flex-start;
        flex-direction: column
    }

        .diary-single-header .diary-header-tools {
            margin-left: 0;
            width: 100%
        }

    .diary-date-nav-combined {
        width: 100%;
        justify-content: space-between
    }

    .diary-date-input {
        flex: 1 1 auto;
        width: auto;
        min-width: 120px
    }

    .diary-workbench-panel {
        height: auto;
        min-height: 0
    }

    .diary-add-bar-top {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr 1fr 1fr
    }

    .diary-selected-summary {
        grid-column: 1/-1
    }

    .diary-add-meal-field {
        grid-column: 1/2
    }

    .diary-main-add {
        grid-column: auto !important
    }

    .diary-menu-scroll.diary-workbench-scroll, .diary-ticket-scroll.diary-workbench-scroll {
        max-height: 470px
    }
}

/* 2026-08-15 Diary full-screen scroll fix.
   The earlier minimum height could make the workbench taller than the usable
   viewport in a maximized window. Keep both desktop panes bounded so their
   inner lists own the scrolling; release that constraint for compact/mobile. */
@media (min-width:761px) and (min-height:700px) {
    .diary-workbench-layout {
        height: clamp(390px,52dvh,650px);
        min-height: 0;
        align-items: stretch;
    }

    .diary-workbench-panel {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .diary-menu-scroll.diary-workbench-scroll,
    .diary-ticket-scroll.diary-workbench-scroll {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable;
    }
}

@media (max-width:760px),(max-height:699px) {
    .diary-workbench-layout {
        height: auto;
        min-height: 0
    }

    .diary-workbench-panel {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible
    }

    .diary-menu-scroll.diary-workbench-scroll,
    .diary-ticket-scroll.diary-workbench-scroll {
        height: auto;
        max-height: none;
        overflow: visible !important;
    }
}

/* 2026-08-16 coherence/polish build: shared card language, compact search, About/Setup, Diary panels */

/* Home tool cards borrow Browse's friendly tile language without losing descriptions. */
.dashboard-grid {
    gap: 14px
}

.feature-card {
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 22px 24px;
    min-height: 176px;
    box-shadow: 0 3px 12px rgba(34,57,68,.025);
    transition: transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease;
}

    .feature-card:hover, .feature-card:focus-visible {
        background: var(--accent-soft);
        border-color: var(--accent);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(34,57,68,.08);
        text-decoration: none;
    }

.feature-icon {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
    font-size: 2rem;
    line-height: 1;
}

.feature-card strong {
    font-size: 1.18rem;
    margin: 16px 0 8px
}

.feature-card p {
    line-height: 1.5
}

/* About is intentionally content-rich; working pages no longer carry these blocks. */
.about-origin-story {
    margin-top: 0
}

.about-trust-strip, .about-platform-strip {
    margin-top: 16px
}

/* Setup terminology remains easy to find but out of the everyday workflow. */
.setup-terminology {
    margin-top: 18px;
    margin-bottom: 16px;
    overflow: hidden
}

/* Diary is the visual template for future two-pane workbenches such as Menu Builder. */
.diary-workbench-panel {
    border: 1.5px solid #c8d6da;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(34,57,68,.045);
    background: white;
}

.diary-list-head {
    background: #fbfcfc;
    border-bottom: 1px solid #cfdcdf;
}

.diary-add-bar-top, .diary-day-total-top {
    border-bottom: 1px solid #cfdcdf
}

.diary-workbench-scroll {
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(34,57,68,.025);
}

.diary-menu-group, .diary-meal-section {
    border-color: #dbe4e7
}

.diary-menu-choice-row, .diary-order-line {
    border-color: #e1e8ea
}

.diary-workbench-panel:focus-within {
    border-color: #a9c8be
}

@media(max-width:760px) {
    .feature-card {
        min-height: 0;
        padding: 18px
    }

    .feature-icon {
        font-size: 1.7rem
    }
}

/* 2026-08-16 Sesqua identity + cross-page workbench coherence */
.sesqua-brand {
    gap: 10px
}

.sesqua-brand-icon {
    width: 58px;
    height: 58px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 50%;
    border: 2px solid #d6e2dc;
    background: #fff;
    box-shadow: 0 2px 8px rgba(24,65,52,.12)
}

.sesqua-brand > span strong {
    font-size: 1.28rem
}

.sesqua-brand > span small {
    max-width: 320px
}

.sesqua-home-hero {
    grid-template-columns: minmax(0,1.1fr) minmax(280px,.65fr);
    align-items: center;
    overflow: hidden
}

.sesqua-home-mascot-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 350px;
    overflow: hidden
}

    .sesqua-home-mascot-wrap img {
        width: min(100%,430px);
        max-height: 350px;
        object-fit: cover;
        object-position: 50% 15%;
        border-radius: 20px
    }

.home-compact-note {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-top: 14px
}

    .home-compact-note .feature-icon {
        font-size: 1.6rem
    }

    .home-compact-note > div {
        flex: 1
    }

    .home-compact-note p {
        margin: 3px 0 0;
        color: var(--muted)
    }

.sesqua-about-origin {
    display: grid;
    grid-template-columns: 160px minmax(0,1fr);
    align-items: center
}

.about-sesqua-mascot {
    width: 142px;
    height: 142px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
    border: 3px solid #d9e6e0
}

.about-tools-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin: 16px 0
}

    .about-tools-grid .feature-card {
        min-height: 145px
    }

.about-terms {
    padding: 0;
    overflow: hidden
}

.about-term-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr))
}

    .about-term-grid > div {
        padding: 18px;
        border-right: 1px solid var(--line);
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: center
    }

        .about-term-grid > div:last-child {
            border-right: 0
        }

        .about-term-grid > div > span:last-child {
            grid-column: 2;
            color: var(--muted);
            font-size: .86rem;
            margin-top: 3px
        }

.term-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.45rem;
    grid-row: 1/3
}

    .term-icon.food {
        background: #fff0e8
    }

    .term-icon.item {
        background: #eaf4ff
    }

    .term-icon.meal {
        background: #eef7e7
    }

    .term-icon.recipe {
        background: #f4ecff
    }

.guide-hero {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(220px,.7fr);
    gap: 24px;
    align-items: center
}

.guide-kicker {
    font-weight: 900;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem
}

.guide-hero h2 {
    font-size: 2rem;
    margin: 7px 0 10px
}

.guide-links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px
}

.guide-art {
    display: grid;
    grid-template-columns: repeat(2,90px);
    justify-content: center;
    gap: 10px
}

    .guide-art span, .guide-icon {
        display: grid;
        place-items: center;
        background: var(--accent-soft);
        border: 1px solid #c7ded6;
        border-radius: 18px
    }

    .guide-art span {
        width: 90px;
        height: 90px;
        font-size: 2.6rem
    }

.guide-topic-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin: 16px 0
}

    .guide-topic-grid article {
        padding: 18px
    }

.guide-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    margin-bottom: 10px
}

.guide-topic-grid h3 {
    margin: 0 0 8px
}

.guide-search-terms {
    padding: 0;
    overflow: hidden
}

.keyword-cloud {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px
}

    .keyword-cloud span {
        padding: 6px 10px;
        border-radius: 999px;
        background: #eef4f2;
        border: 1px solid #d8e4e0;
        font-size: .82rem
    }

/* Diary should read as two distinct list boxes, not one split page. */
.diary-order-layout {
    gap: 18px
}

.diary-workbench-panel {
    border: 2px solid #bdcfd0;
    box-shadow: 0 7px 24px rgba(32,57,62,.065)
}

.diary-menu-panel {
    background: #fbfdfc
}

.diary-ticket-panel {
    background: #f9fcfb
}

.diary-list-head {
    background: #f2f7f5
}

.diary-menu-scroll, .diary-ticket-scroll {
    background: #fff
}

.diary-ticket-panel .diary-day-total-top {
    background: #fcfefd
}

.meal-symbol {
    display: inline-block;
    width: 1.7em;
    text-align: center;
    margin-right: 4px
}

.diary-meal-section.active-destination {
    outline: 2px solid rgba(28,107,90,.18);
    outline-offset: -2px
}

.diary-empty-meal {
    font-weight: 700
}

/* Menu Builder now borrows the Diary workbench language. */
.menu-workbench-layout {
    grid-template-columns: minmax(360px,.86fr) minmax(540px,1.14fr);
    gap: 18px;
    align-items: stretch
}

.menu-workbench-panel {
    height: min(75vh,790px);
    min-height: 600px;
    border: 2px solid #bdcfd0;
    border-radius: 14px;
    box-shadow: 0 7px 24px rgba(32,57,62,.065)
}

.menu-builder-source {
    position: static;
    display: flex;
    flex-direction: column
}

    .menu-builder-source > .diary-list-head {
        flex: 0 0 auto
    }

.menu-builder-food-list {
    max-height: none;
    min-height: 0;
    flex: 1 1 auto
}

.menu-builder-work {
    padding: 0;
    overflow: auto
}

    .menu-builder-work > .builder-work-header {
        padding: 14px 16px;
        margin: 0
    }

    .menu-builder-work > .builder-head, .menu-builder-work > .empty-state, .menu-builder-work > .order-ticket, .menu-builder-work > .recipe-yield-grid, .menu-builder-work > p, .menu-builder-work > details, .menu-builder-work > label, .menu-builder-work > .builder-summary-inline, .menu-builder-work > button {
        margin-left: 16px;
        margin-right: 16px
    }

.add-item-modal {
    width: min(440px,94vw);
    overflow: hidden
}

.add-item-modal-body {
    padding: 18px
}

.menu-builder-source .diary-menu-choice-row {
    grid-template-columns: minmax(0,1fr) auto
}

.menu-builder-source .icon-action {
    margin-right: 9px;
    align-self: center
}

@media(max-width:1100px) {
    .about-tools-grid, .guide-topic-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .about-term-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

        .about-term-grid > div:nth-child(2) {
            border-right: 0
        }

        .about-term-grid > div {
            border-bottom: 1px solid var(--line)
        }

    .menu-workbench-layout {
        grid-template-columns: 1fr
    }

    .menu-workbench-panel {
        height: 650px;
        min-height: 520px
    }

    .sesqua-home-hero {
        grid-template-columns: 1fr
    }

    .sesqua-home-mascot-wrap {
        display: none
    }
}

@media(max-width:700px) {
    .sesqua-brand > span small {
        display: none
    }

    .sesqua-brand-icon {
        width: 48px;
        height: 48px
    }

    .sesqua-about-origin {
        grid-template-columns: 1fr
    }

    .about-sesqua-mascot {
        width: 100px;
        height: 100px
    }

    .about-tools-grid, .guide-topic-grid, .about-term-grid, .guide-hero {
        grid-template-columns: 1fr
    }

        .about-term-grid > div {
            border-right: 0
        }

    .guide-art {
        display: none
    }

    .home-compact-note {
        align-items: flex-start
    }

    .menu-workbench-panel {
        height: auto;
        min-height: 0
    }

    .menu-builder-food-list {
        max-height: 430px
    }

    .menu-builder-work {
        overflow: visible;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px))
    }
}

.field-invalid {
    border-color: #b33a32 !important;
    box-shadow: 0 0 0 2px rgba(179,58,50,.12)
}

.field-error {
    display: block;
    margin-top: 4px;
    color: #963028;
    font-size: .78rem;
    font-weight: 700
}

.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important
}


/* 2026-08-17 polish/testing build */
/* Home: fit a normal maximized desktop without turning the typography tiny. */
.sesqua-home-hero {
    padding: clamp(18px,3.2vw,42px) 0 24px;
    gap: 24px;
    min-height: 0
}

    .sesqua-home-hero h1 {
        font-size: clamp(2.7rem,4.6vw,4.45rem);
        margin-bottom: 14px
    }

    .sesqua-home-hero p {
        font-size: 1.03rem;
        line-height: 1.48;
        margin-bottom: 0
    }

.sesqua-home-mascot-wrap {
    max-height: 320px
}

    .sesqua-home-mascot-wrap img {
        max-height: 320px;
        object-fit: contain;
        object-position: center
    }

.about-current-lens {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 14px 0
}

    .about-current-lens > div {
        flex: 1
    }

    .about-current-lens p {
        margin: 3px 0 0;
        color: var(--muted)
    }

/* Desktop WebView runs inside Windows DPI scaling. Keep the same composition as Web. */
.desktop-host .page-wrap {
    padding-top: 24px;
    padding-bottom: 34px
}

.desktop-host .sesqua-home-hero {
    padding-top: 14px;
    padding-bottom: 18px
}

    .desktop-host .sesqua-home-hero h1 {
        font-size: clamp(2.5rem,4.2vw,4.15rem)
    }

.desktop-host .sesqua-home-mascot-wrap, .desktop-host .sesqua-home-mascot-wrap img {
    max-height: 300px
}

/* Diary: two unmistakable list/work boxes with independent visual identity. */
.diary-order-layout {
    gap: 24px;
    align-items: stretch
}

.diary-workbench-panel {
    border: 2px solid #b8c9cd !important;
    border-radius: 16px !important;
    box-shadow: 0 9px 26px rgba(31,55,62,.09) !important;
    background: #fff !important
}

.diary-menu-panel {
    outline: 1px solid rgba(28,107,90,.04)
}

.diary-ticket-panel {
    outline: 1px solid rgba(28,107,90,.04)
}

.diary-list-head {
    background: #f5f9f7 !important;
    border-bottom: 2px solid #cfdbde !important
}

.diary-workbench-scroll {
    background: #fff !important
}

.diary-menu-scroll {
    border-top: 1px solid #e2e9eb
}

.diary-ticket-scroll {
    border-top: 1px solid #e2e9eb
}

.diary-menu-choice-row:hover {
    background: #f5faf8
}

.diary-meal-heading {
    border-bottom: 1px solid #dce5e7
}

/* Meal icons supplement the words; the words stay because icon-only meal navigation is too ambiguous. */
.meal-symbol {
    font-size: 1.05rem;
    vertical-align: -.05em
}

/* Menu Builder uses the same work-panel vocabulary and reserves a place for verified dietary tags. */
.menu-source-head {
    align-items: center
}

    .menu-source-head > div {
        display: flex;
        flex-direction: column
    }

    .menu-source-head .compact-select-label {
        margin: 0;
        min-width: 190px
    }

    .menu-source-head select:disabled {
        opacity: .72;
        cursor: not-allowed
    }

@media(max-height:820px) and (min-width:1101px) {
    .sesqua-home-hero {
        padding-top: 10px;
        padding-bottom: 14px
    }

        .sesqua-home-hero h1 {
            font-size: clamp(2.45rem,4vw,3.9rem)
        }

    .sesqua-home-mascot-wrap, .sesqua-home-mascot-wrap img {
        max-height: 270px
    }
}

@media(max-width:760px) {
    .about-current-lens {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .menu-source-head {
        align-items: flex-start
    }

        .menu-source-head .compact-select-label {
            width: 100%;
            min-width: 0
        }
}

/* 2026-08-17 tools + interface coherence build */
/* Browse: rebalance the two work panels and put provenance below both. */
.split-view {
    grid-template-columns: minmax(420px,.95fr) minmax(0,1.35fr);
    gap: 22px;
    align-items: stretch
}

.results-pane, .detail-pane {
    border: 2px solid #b8c9cd;
    border-radius: 16px;
    box-shadow: 0 9px 26px rgba(31,55,62,.09);
    background: #fff
}

.results-pane {
    position: sticky;
    top: 84px
}

.detail-pane {
    padding: 20px
}

.result-grid-head, .result-grid-row {
    grid-template-columns: minmax(0,1.6fr) minmax(130px,.9fr) repeat(3,minmax(72px,auto))
}

.detail-pane .food-detail-grid:not(.sesqua-split-pane) {
    grid-template-columns: minmax(270px,360px) minmax(0,1fr);
    gap: 24px
}

.analysis-panel .table-wrap {
    width: 100%;
    max-width: none
}

.analysis-panel .data-table {
    width: 100%;
    min-width: 620px
}

    .analysis-panel .data-table th:first-child, .analysis-panel .data-table td:first-child {
        width: 58%
    }

.browse-source-footer {
    margin-top: 18px;
    padding: 0;
    overflow: hidden;
    border: 2px solid #c7d6d8;
    box-shadow: 0 6px 20px rgba(31,55,62,.055)
}

    .browse-source-footer details {
        padding: 0
    }

    .browse-source-footer summary {
        padding: 14px 18px;
        cursor: pointer;
        font-weight: 850;
        background: #f5f9f7;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        align-items: center
    }

        .browse-source-footer summary span {
            font-weight: 500;
            color: var(--muted);
            font-size: .86rem
        }

.browse-source-footer-body {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px 18px;
    align-items: start
}

    .browse-source-footer-body p {
        margin: 0
    }

        .browse-source-footer-body p:nth-child(2) {
            grid-column: 1
        }

    .browse-source-footer-body .mini-btn {
        grid-column: 2;
        grid-row: 1/3
    }

/* Diary: the footer is outside two complete work boxes; both boxes own their scroll area. */
.diary-workbench-layout {
    align-items: stretch;
    margin-bottom: 18px
}

.diary-workbench-panel {
    overflow: hidden;
    min-height: 0
}

.diary-workbench-scroll {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    min-height: 0
}

.diary-ticket-scroll {
    flex: 1 1 auto
}

.diary-ticket-panel, .diary-menu-panel {
    display: flex;
    flex-direction: column
}

    .diary-ticket-panel .diary-day-total-top, .diary-menu-panel .diary-add-bar-top {
        flex: 0 0 auto
    }

.sesqua-hidden-action {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important
}

/* Persistent tool shells: instant open, X hides, state stays in scoped service. */
.sesqua-tool-layer {
    position: fixed;
    inset: 0;
    z-index: 1800;
    pointer-events: none;
    background: rgba(18,30,28,.08)
}

.sesqua-tool-window {
    pointer-events: auto;
    position: absolute;
    right: 28px;
    top: 96px;
    width: min(560px,calc(100vw - 40px));
    max-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #aec6c0;
    border-radius: 18px;
    box-shadow: 0 20px 55px rgba(18,45,38,.24);
    overflow: hidden
}

.sesqua-tool-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #f2f8f5;
    border-bottom: 1px solid var(--line);
    cursor: grab;
    touch-action: none;
    user-select: none
}

.sesqua-tool-window.is-moving .sesqua-tool-titlebar {
    cursor: grabbing
}

.sesqua-tool-titlebar > div {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0
}

    .sesqua-tool-titlebar > div > span:last-child {
        min-width: 0
    }

.sesqua-tool-titlebar > .icon-btn {
    flex: 0 0 auto;
    cursor: pointer;
    touch-action: manipulation
}

.sesqua-tool-titlebar strong, .sesqua-tool-titlebar small {
    display: block
}

.sesqua-tool-titlebar small {
    color: var(--muted);
    font-size: .78rem;
    margin-top: 2px;
    white-space: normal;
    overflow-wrap: anywhere
}

.sesqua-tool-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--accent-soft);
    font-size: 1.25rem
}

.sesqua-tool-window.is-moving {
    box-shadow: 0 24px 68px rgba(18,45,38,.32)
}

.sesqua-tool-dragging, .sesqua-tool-dragging * {
    cursor: grabbing !important;
    user-select: none !important
}

.sesqua-tool-context {
    padding: 8px 16px;
    background: #fbfcfc;
    color: var(--muted);
    font-size: .76rem;
    border-bottom: 1px solid var(--line)
}

.sesqua-tool-body {
    padding: 18px;
    overflow: auto;
    min-height: 250px
}

.sesqua-tool-actions {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: #fafcfc
}

    .sesqua-tool-actions.simple-actions {
        grid-template-columns: auto 1fr auto
    }

.tool-shell-grid {
    display: grid;
    gap: 14px
}

    .tool-shell-grid.two {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .tool-shell-grid label {
        display: grid;
        gap: 6px;
        font-weight: 750
    }

.tool-placeholder {
    border: 1px dashed #b9cdca;
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    background: #f8fbfa;
    color: var(--muted)
}

    .tool-placeholder.large {
        min-height: 150px;
        display: grid;
        place-items: center
    }

.tool-tab-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

    .tool-tab-row .active {
        background: var(--accent-soft);
        border-color: #a8c8bd
    }

.tool-textarea {
    min-height: 150px;
    resize: vertical
}

.tool-choice-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin-bottom: 14px
}

    .tool-choice-grid button {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        font-weight: 800
    }

.asset-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-top: 14px
}

    .asset-placeholder-grid > div {
        aspect-ratio: 1;
        border: 1px dashed #bed0cc;
        border-radius: 12px;
        background: #f7faf9;
        display: grid;
        place-items: center;
        color: var(--muted)
    }

.sesqua-dev-launcher {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1700
}

.sesqua-dev-tools-button {
    border: 1px solid #aac4bc;
    border-radius: 999px;
    background: #fff;
    padding: 9px 13px;
    font-weight: 850;
    box-shadow: 0 8px 22px rgba(24,54,47,.15);
    cursor: pointer
}

.sesqua-dev-palette {
    position: absolute;
    left: 0;
    bottom: 48px;
    width: 280px;
    padding: 8px;
    box-shadow: 0 16px 38px rgba(22,45,40,.2)
}

    .sesqua-dev-palette .section-title {
        padding: 8px 10px
    }

    .sesqua-dev-palette > button {
        width: 100%;
        border: 0;
        background: #fff;
        padding: 9px 10px;
        border-radius: 9px;
        text-align: left;
        display: flex;
        gap: 9px;
        cursor: pointer
    }

        .sesqua-dev-palette > button:hover {
            background: var(--accent-soft)
        }

    .sesqua-dev-palette > a {
        display: block;
        padding: 9px 10px;
        margin-top: 4px;
        border-top: 1px solid var(--line)
    }

.sesqua-tool-rail {
    position: fixed;
    z-index: 1750;
    right: 0;
    bottom: 18px;
    width: 52px;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: rgba(255,255,255,.98);
    border: 1px solid #b8cbc5;
    border-right: 0;
    border-radius: 18px 0 0 18px;
    box-shadow: 0 8px 24px rgba(18,45,38,.18);
    backdrop-filter: blur(8px);
    transition: width .18s ease
}

    .sesqua-tool-rail.expanded {
        right: 14px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: 260px;
        height: min(760px,calc(100vh - 120px));
        max-height: calc(100vh - 120px);
        padding: 9px;
        border: 1px solid #b8cbc5;
        border-radius: 20px
    }

.sesqua-tool-rail-toggle, .sesqua-tool-rail-item {
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer
}

.sesqua-tool-rail-toggle {
    flex: 0 0 auto;
    width: 100%;
    min-height: 52px;
    display: grid;
    place-items: center;
    padding: 4px;
    border-radius: 18px 0 0 18px;
    color: var(--accent-dark);
    touch-action: manipulation
}

    .sesqua-tool-rail-toggle:hover, .sesqua-tool-rail-toggle:focus-visible {
        background: #edf7f3;
        outline: 2px solid rgba(28,107,90,.22);
        outline-offset: -3px
    }

    .sesqua-tool-rail-toggle .rail-chevron {
        pointer-events: none;
        font-size: 1.45rem;
        font-weight: 800;
        line-height: 1;
        transform: translateX(-1px)
    }

.sesqua-tool-rail.expanded .sesqua-tool-rail-toggle {
    min-height: 42px;
    display: flex;
    justify-content: flex-start;
    gap: 9px;
    padding: 4px 7px;
    border-bottom: 1px solid var(--line);
    border-radius: 10px
}

.sesqua-tool-rail.expanded .rail-chevron {
    font-size: 1.15rem;
    transform: none
}

.sesqua-tool-rail-toggle strong {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em
}

.sesqua-tool-rail-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 4px 0 7px;
    scrollbar-gutter: stable
}

.sesqua-tool-rail-section {
    padding: 4px 0
}

    .sesqua-tool-rail-section + .sesqua-tool-rail-section {
        margin-top: 3px;
        padding-top: 8px;
        border-top: 1px solid #e3ebe8
    }

    .sesqua-tool-rail-section > small:first-child {
        display: block;
        padding: 2px 8px 4px;
        color: #71837e;
        font-size: .58rem;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase
    }

.sesqua-tool-rail-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 7px;
    border-radius: 13px;
    text-align: left;
    text-decoration: none
}

    .sesqua-tool-rail-item:hover, .sesqua-tool-rail-item:focus-visible {
        background: #f0f7f4
    }

    .sesqua-tool-rail-item:disabled {
        opacity: .58;
        cursor: not-allowed
    }

    .sesqua-tool-rail-item.active {
        background: #dcefe7;
        color: var(--accent-dark)
    }

.sesqua-tool-rail-icon {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef5f2;
    font-size: 1.05rem;
    font-weight: 850;
    box-shadow: inset 0 0 0 1px rgba(17,62,52,.05)
}

    .sesqua-tool-rail-icon img {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        object-fit: cover
    }

.tool-nutrition .sesqua-tool-rail-icon {
    color: #116b57;
    background: #dff4ea
}

.tool-quick .sesqua-tool-rail-icon {
    color: #bd5917;
    background: #fff1cf
}

.tool-assets .sesqua-tool-rail-icon {
    background: #efe8ff
}

.tool-ask .sesqua-tool-rail-icon {
    background: #e6f4ff
}

.tool-feedback .sesqua-tool-rail-icon {
    background: #fff0cf
}

.tool-conversion .sesqua-tool-rail-icon {
    color: #25649b;
    background: #e4f1ff
}

.tool-terms .sesqua-tool-rail-icon {
    color: #7a5015;
    background: #fff2d8
}

.tool-menu .sesqua-tool-rail-icon {
    color: #7a3f18;
    background: #ffeadf
}

.tool-recipe .sesqua-tool-rail-icon {
    color: #825c14;
    background: #fff0c7
}

.tool-share .sesqua-tool-rail-icon {
    color: #5d4598;
    background: #eee7ff
}

.tool-important .sesqua-tool-rail-icon {
    color: #a44141;
    background: #ffe7e7
}

.tool-storage .sesqua-tool-rail-icon {
    color: #49646d;
    background: #e8f0f2
}

.sesqua-tool-rail-item.active .sesqua-tool-rail-icon {
    box-shadow: 0 0 0 2px #fff,0 0 0 4px rgba(28,107,90,.18)
}

.sesqua-tool-rail-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
    font-weight: 780
}

.sesqua-tool-window {
    right: 82px
}

@media(max-width:760px) {
    .sesqua-tool-rail {
        bottom: 10px
    }

        .sesqua-tool-rail:not(.expanded) {
            width: 48px
        }

        .sesqua-tool-rail.expanded {
            top: auto;
            right: 10px;
            bottom: 10px;
            transform: none;
            width: min(260px,calc(100vw - 20px));
            max-height: min(62vh,480px)
        }

    .sesqua-tool-window {
        right: 10px;
        top: 78px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 98px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .sesqua-tool-rail {
        transition: none
    }
}

.tool-playground-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.tool-playground-card {
    border: 1px solid var(--line);
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    align-items: center
}

    .tool-playground-card > span {
        font-size: 1.7rem;
        grid-row: 1/3
    }

    .tool-playground-card small {
        color: var(--muted)
    }

@media(max-width:1050px) {
    .split-view {
        grid-template-columns: 1fr
    }

    .results-pane {
        position: static;
        max-height: 500px
    }

    .tool-playground-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:700px) {
    .browse-source-footer summary {
        align-items: flex-start;
        flex-direction: column
    }

    .browse-source-footer-body {
        grid-template-columns: 1fr
    }

        .browse-source-footer-body .mini-btn {
            grid-column: 1;
            grid-row: auto
        }

    .sesqua-tool-window {
        top: auto;
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto;
        max-height: 82vh
    }

    .tool-shell-grid.two, .tool-choice-grid {
        grid-template-columns: 1fr
    }

    .asset-placeholder-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .tool-playground-grid {
        grid-template-columns: 1fr
    }

    .sesqua-dev-launcher {
        left: 10px;
        bottom: 10px
    }
}

/* 2026-08-17 Nutrition package build: Home/Browse shared tile language. */
.home-launch-section {
    margin-top: 18px
}

.home-launch-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px
}

    .home-launch-heading h2 {
        margin: 2px 0 0;
        font-size: clamp(1.45rem,2.2vw,2rem)
    }

    .home-launch-heading > span {
        max-width: 460px;
        color: var(--muted);
        font-size: .88rem;
        text-align: right
    }

.home-launch-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.home-launch-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 19px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 3px 12px rgba(34,57,68,.025);
    transition: transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease;
    text-decoration: none
}

    .home-launch-card:hover, .home-launch-card:focus-visible {
        background: var(--accent-soft);
        border-color: var(--accent);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(34,57,68,.08);
        text-decoration: none
    }

.home-launch-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.85rem;
    line-height: 1;
    background: #f5f8f7;
    border: 1px solid #e2eae7
}

.home-launch-card.browse .home-launch-icon {
    background: #eef7f3
}

.home-launch-card.build .home-launch-icon {
    background: #fff4e8
}

.home-launch-card.diary .home-launch-icon {
    background: #eef3fb
}

.home-launch-card.quick .home-launch-icon {
    background: #fff8df
}

.home-launch-copy {
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .home-launch-copy strong {
        font-size: 1.08rem
    }

    .home-launch-copy small {
        font-size: .86rem;
        line-height: 1.4;
        color: var(--muted)
    }

.home-launch-arrow {
    font-size: 1.35rem;
    color: var(--muted);
    transition: transform .14s ease,color .14s ease
}

.home-launch-card:hover .home-launch-arrow, .home-launch-card:focus-visible .home-launch-arrow {
    color: var(--accent-dark);
    transform: translateX(2px)
}

@media(max-width:760px) {
    .home-launch-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

        .home-launch-heading > span {
            text-align: left
        }

    .home-launch-grid {
        grid-template-columns: 1fr
    }

    .home-launch-card {
        padding: 15px
    }

    .home-launch-icon {
        width: 46px;
        height: 46px;
        font-size: 1.65rem
    }
}

/* 2026-08-18 Home identity + privacy promise + responsive "reflow, don't crush" pass. */
.sesqua-home-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.72fr);
    gap: 20px 34px;
    align-items: center;
    overflow: hidden;
    margin: -10px 0 0;
    padding: clamp(24px,3.6vw,48px) clamp(26px,4vw,58px) 24px;
    border: 1px solid #d9e2df;
    border-radius: 24px;
    background: linear-gradient(90deg,rgba(255,255,255,.89) 0%,rgba(255,255,255,.64) 38%,rgba(255,255,255,.18) 70%,rgba(255,255,255,.05) 100%), url('../images/sesqua-forest-mist.svg') center/cover no-repeat;
    box-shadow: 0 12px 34px rgba(34,57,68,.065);
}

    .sesqua-home-stage::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 72px;
        background: linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.48));
        pointer-events: none
    }

.sesqua-home-copy, .sesqua-home-brand-art, .home-launch-block {
    position: relative;
    z-index: 1
}

.sesqua-home-copy {
    align-self: start;
    padding-top: 6px
}

    .sesqua-home-copy h1 {
        font-size: clamp(2.55rem,4.15vw,4.25rem);
        line-height: .96;
        letter-spacing: -.055em;
        margin: 6px 0 14px;
        max-width: 820px
    }

    .sesqua-home-copy p {
        max-width: 780px;
        margin: 0;
        color: #52656d;
        font-size: clamp(.98rem,1.2vw,1.12rem);
        line-height: 1.5
    }

.sesqua-home-brand-art {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0
}

    .sesqua-home-brand-art img {
        width: min(100%,330px);
        max-height: 270px;
        object-fit: contain;
        filter: drop-shadow(0 8px 18px rgba(55,45,32,.10))
    }

.home-launch-block {
    grid-column: 1/-1;
    margin-top: 2px
}

.home-launch-heading {
    align-items: end;
    margin-bottom: 10px
}

    .home-launch-heading .eyebrow {
        color: #164f42
    }

.home-launch-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

.home-launch-card {
    min-height: 118px;
    align-items: start;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-rows: auto 1fr auto;
    padding: 15px 16px 13px;
    background: rgba(255,255,255,.91);
    backdrop-filter: blur(1.5px);
    box-shadow: 0 5px 16px rgba(34,57,68,.065)
}

.home-launch-icon {
    grid-row: 1/3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.6rem
}

.home-launch-copy {
    padding-top: 1px
}

    .home-launch-copy strong {
        font-size: 1.04rem;
        color: #0f5f49
    }

    .home-launch-copy small {
        font-size: .81rem;
        line-height: 1.38;
        color: #40545d
    }

.home-launch-arrow {
    grid-column: 1/-1;
    justify-self: start;
    align-self: end;
    font-size: 1.35rem;
    color: #0f684e;
    margin-top: 0
}

.sesqua-promise-strip {
    display: grid;
    grid-template-columns: 1.35fr .88fr .95fr;
    gap: 1px;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 17px;
    overflow: hidden;
    background: var(--line);
    box-shadow: 0 5px 18px rgba(34,57,68,.04)
}

.sesqua-promise-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: start;
    padding: 17px 20px;
    background: #fff;
    min-width: 0
}

    .sesqua-promise-item > div {
        display: flex;
        flex-direction: column;
        min-width: 0
    }

    .sesqua-promise-item strong {
        font-size: .98rem;
        color: #113d35
    }

    .sesqua-promise-item span:not(.sesqua-promise-icon) {
        margin-top: 2px;
        font-size: .82rem;
        color: #40545d
    }

    .sesqua-promise-item small {
        margin-top: 3px;
        color: var(--muted);
        font-size: .76rem;
        line-height: 1.4
    }

.sesqua-promise-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #edf6f1;
    font-size: 1.32rem
}

    .sesqua-promise-icon.shield {
        background: #e6f3ed;
        border: 2px solid #2d795e;
        color: #246249;
        font-weight: 950
    }

    .sesqua-promise-icon.usda {
        width: 48px;
        border-radius: 8px;
        background: #f1f5f3;
        color: #17634d;
        font-size: .68rem;
        font-weight: 950;
        letter-spacing: .02em
    }

.asset-storage-card {
    grid-column: 1/-1
}

.asset-storage-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid var(--line)
}

    .asset-storage-status:first-of-type {
        margin-top: 12px
    }

    .asset-storage-status > span:first-child {
        display: flex;
        flex-direction: column
    }

    .asset-storage-status small {
        color: var(--muted);
        margin-top: 2px
    }

/* Preserve a deliberate desktop composition, then reflow instead of squeezing it to death. */
@media(min-width:1500px) {
    .page-wrap {
        max-width: 1500px
    }

    .sesqua-home-stage {
        min-height: 0
    }
}

@media(max-width:1180px) {
    .sesqua-home-stage {
        grid-template-columns: minmax(0,1fr) 290px;
        padding-left: 30px;
        padding-right: 30px
    }

    .sesqua-home-brand-art img {
        max-height: 250px
    }

    .home-launch-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .home-launch-card {
        min-height: 112px
    }

    .sesqua-promise-strip {
        grid-template-columns: 1fr 1fr
    }

    .usda-promise {
        grid-column: 1/-1
    }
}

@media(max-width:840px) {
    .sesqua-home-stage {
        grid-template-columns: 1fr;
        padding: 28px 22px 24px;
        background-position: 62% center
    }

    .sesqua-home-copy {
        padding-right: 0
    }

        .sesqua-home-copy h1 {
            font-size: clamp(2.65rem,10vw,4.5rem)
        }

    .sesqua-home-brand-art {
        display: none
    }

    .home-launch-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px
    }

        .home-launch-heading > span {
            text-align: left
        }

    .sesqua-promise-strip {
        grid-template-columns: 1fr
    }

    .usda-promise {
        grid-column: auto
    }
}

@media(max-width:620px) {
    .page-wrap {
        width: min(100% - 16px,var(--max));
        padding-top: 14px
    }

    .sesqua-home-stage {
        border-radius: 18px;
        padding: 24px 16px 18px
    }

    .home-launch-grid {
        grid-template-columns: 1fr
    }

    .home-launch-card {
        min-height: 0;
        grid-template-columns: auto minmax(0,1fr) auto;
        grid-template-rows: auto;
        align-items: center;
        padding: 15px
    }

    .home-launch-icon {
        grid-row: auto;
        width: 46px;
        height: 46px
    }

    .home-launch-arrow {
        grid-column: auto;
        margin: 0;
        align-self: center
    }

    .home-launch-copy {
        padding: 0
    }

    .sesqua-promise-item {
        padding: 15px
    }

    .asset-storage-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px
    }
}

@media(max-width:430px) {
    /* At phone width, allow the page to grow vertically rather than crush controls. */
    .topbar {
        gap: 10px
    }

    .sesqua-brand-icon {
        width: 48px;
        height: 48px
    }

    .sesqua-brand > span strong {
        font-size: 1.1rem
    }

    .home-launch-copy small {
        font-size: .8rem
    }
}

/* 2026-08-18 Home target pass: transparent mark, compact launch cards, tips, local promise. */
.sesqua-home-stage {
    grid-template-columns: minmax(0,1.04fr) minmax(280px,.66fr);
    gap: 12px 28px;
    padding: 30px 38px 18px;
    background: linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.48) 40%,rgba(255,255,255,.10) 72%,rgba(255,255,255,.02) 100%), url('../images/sesqua-forest-mist.svg') center 52%/cover no-repeat;
}

    .sesqua-home-stage::after {
        height: 44px;
        background: linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.32))
    }

.sesqua-home-copy {
    padding-top: 0
}

    .sesqua-home-copy h1 {
        font-size: clamp(2.4rem,3.65vw,3.75rem);
        line-height: .98;
        margin: 4px 0 12px;
        max-width: 760px
    }

    .sesqua-home-copy p {
        font-size: clamp(.95rem,1.05vw,1.04rem);
        line-height: 1.43;
        max-width: 690px
    }

    .sesqua-home-copy .home-obvious {
        margin-top: 5px;
        color: #1b2e35
    }

.sesqua-home-brand-art img {
    width: min(100%,310px);
    max-height: 245px;
    filter: drop-shadow(0 9px 18px rgba(55,45,32,.16))
}

.home-launch-block {
    margin-top: -2px
}

.home-launch-heading {
    margin-bottom: 8px
}

    .home-launch-heading h2 {
        font-size: clamp(1.45rem,1.9vw,1.85rem)
    }

    .home-launch-heading > span {
        font-size: .79rem;
        max-width: 430px
    }

.home-launch-with-tips {
    display: grid;
    grid-template-columns: minmax(0,1fr) 220px;
    gap: 10px;
    align-items: stretch
}

.home-launch-grid {
    gap: 9px
}

.home-launch-card {
    position: relative;
    min-height: 0;
    height: 148px;
    padding: 13px 14px 11px;
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-rows: auto 1fr auto;
    background: rgba(255,255,255,.93);
    border-radius: 13px
}

.home-launch-icon {
    grid-row: 1/3;
    width: 44px;
    height: 44px;
    font-size: 1.47rem
}

.home-launch-copy strong {
    font-size: .97rem
}

.home-launch-copy small {
    font-size: .73rem;
    line-height: 1.34
}

.home-launch-arrow {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    font-size: 1.2rem
}

.home-card-foot {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    min-height: 27px;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 800;
    color: #17634d;
    background: #edf7ef;
    border: 1px solid rgba(23,99,77,.08)
}

.home-launch-card.build .home-card-foot {
    color: #6334a0;
    background: #f3edff
}

.home-launch-card.diary .home-card-foot {
    color: #2458a7;
    background: #eaf3ff
}

.home-launch-card.quick .home-card-foot {
    color: #c45d13;
    background: #fff2df
}

.home-tips {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 16px rgba(34,57,68,.055)
}

    .home-tips h3 {
        margin: 0;
        padding: 11px 12px;
        border-bottom: 1px solid var(--line);
        font-size: .88rem;
        color: #183b35
    }

    .home-tips a {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 9px 11px;
        border-bottom: 1px solid #edf1f0;
        color: var(--text);
        text-decoration: none
    }

        .home-tips a:hover {
            background: var(--accent-soft)
        }

    .home-tips strong {
        font-size: .75rem
    }

    .home-tips small {
        font-size: .65rem;
        line-height: 1.25;
        color: var(--muted)
    }

    .home-tips .home-tips-more {
        margin-top: auto;
        display: block;
        text-align: center;
        border-bottom: 0;
        color: #0f684e;
        font-weight: 850;
        font-size: .72rem
    }

.sesqua-promise-strip {
    grid-template-columns: 1.05fr 1fr 1fr 1.08fr;
    margin-top: 10px
}

.sesqua-promise-item {
    padding: 12px 14px;
    gap: 10px;
    align-items: center
}

    .sesqua-promise-item strong {
        font-size: .84rem
    }

    .sesqua-promise-item span:not(.sesqua-promise-icon) {
        font-size: .72rem
    }

    .sesqua-promise-item small {
        font-size: .67rem
    }

    .sesqua-promise-item a {
        margin-top: 3px;
        font-size: .66rem;
        font-weight: 800;
        color: #0f684e
    }

.sesqua-promise-icon {
    width: 38px;
    height: 38px;
    font-size: 1.15rem
}

    .sesqua-promise-icon.usda {
        width: 44px
    }

    .sesqua-promise-icon.local {
        background: #e8f7fb;
        color: #16708e;
        font-weight: 900
    }

.primary-nav .nav-secondary {
    font-size: .88rem;
    color: #41545c
}

@media(max-width:1320px) {
    .home-launch-with-tips {
        grid-template-columns: 1fr
    }

    .home-tips {
        display: grid;
        grid-template-columns: repeat(4,1fr)
    }

        .home-tips h3 {
            grid-column: 1/-1
        }

        .home-tips a {
            border-bottom: 0;
            border-right: 1px solid #edf1f0
        }

        .home-tips .home-tips-more {
            display: flex;
            align-items: center;
            justify-content: center
        }

    .sesqua-promise-strip {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:1180px) {
    .home-launch-card {
        height: auto;
        min-height: 112px
    }

    .primary-nav .nav-secondary {
        display: none
    }
}

@media(max-width:840px) {
    .home-tips {
        grid-template-columns: 1fr 1fr
    }

        .home-tips h3 {
            grid-column: 1/-1
        }

    .sesqua-promise-strip {
        grid-template-columns: 1fr
    }
}

@media(max-width:620px) {
    .home-launch-card {
        height: auto
    }

    .home-card-foot {
        display: none
    }

    .home-tips {
        grid-template-columns: 1fr
    }

        .home-tips h3 {
            grid-column: auto
        }
}

/* Data foundation QA controls — 2026-08-18 */
.data-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0
}

    .data-counts span {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        padding: 6px 9px;
        border-radius: 999px;
        background: var(--accent-soft);
        color: #244a40;
        font-size: .76rem
    }

    .data-counts strong {
        font-size: .9rem
    }

.compact-actions {
    gap: 5px
}


/* 2026-08-19 QA Sesqua Woods pass — intentionally temporary artwork/treatment. */
.app-shell.sesqua-woods {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: #e9efea url('../images/sesqua-forest-mist.svg') center top/cover fixed no-repeat;
}

    .app-shell.sesqua-woods::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(180deg,rgba(244,248,245,.35),rgba(244,248,245,.16) 45%,rgba(235,242,237,.34));
    }

    .app-shell.sesqua-woods .topbar {
        background: rgba(255,255,255,.91);
        backdrop-filter: blur(8px)
    }

    .app-shell.sesqua-woods .page-wrap {
        padding: 22px 22px 28px;
        margin-top: 18px;
        margin-bottom: 18px;
        border: 1px solid rgba(210,222,214,.86);
        border-radius: 22px;
        background: rgba(249,251,249,.84);
        backdrop-filter: blur(5px);
        box-shadow: 0 12px 34px rgba(34,57,68,.08)
    }

    .app-shell.sesqua-woods .footer {
        background: rgba(255,255,255,.88);
        backdrop-filter: blur(6px)
    }
    /* Home already owns its stronger hero composition; avoid double-paneling it visually. */
    .app-shell.sesqua-woods .page-wrap:has(.sesqua-home-stage) {
        background: rgba(249,251,249,.58)
    }
    /* QA comparison atmosphere: readable chart-like bars behind the real workspace. */
    .app-shell.sesqua-woods .page-wrap:has(.compare-controls) {
        position: relative;
        overflow: hidden
    }

        .app-shell.sesqua-woods .page-wrap:has(.compare-controls)::after {
            content: "";
            position: absolute;
            right: 28px;
            top: 94px;
            width: 310px;
            height: 125px;
            opacity: .075;
            pointer-events: none;
            background: linear-gradient(90deg,#1c7259 0 22%,transparent 22% 27%,#1c7259 27% 58%,transparent 58% 63%,#1c7259 63% 82%,transparent 82% 87%,#1c7259 87% 100%);
            clip-path: polygon(0 68%,22% 68%,22% 36%,49% 36%,49% 10%,75% 10%,75% 48%,100% 48%,100% 100%,0 100%)
        }

@media(max-width:840px) {
    .app-shell.sesqua-woods {
        background-attachment: scroll
    }

        .app-shell.sesqua-woods .page-wrap {
            width: calc(100% - 16px);
            padding: 16px 12px;
            border-radius: 17px
        }

            .app-shell.sesqua-woods .page-wrap:has(.compare-controls)::after {
                display: none
            }
}


/* 2026-08-19 Home bounds + greener QA woods correction. */
/* Home owns its own scene. Do not wrap it in the generic frosted page panel. */
.app-shell.sesqua-woods .page-wrap:has(.sesqua-home-stage) {
    width: min(calc(100% - 28px),1500px);
    padding: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.sesqua-home-stage {
    margin: 0;
    padding: 22px 30px 14px;
    gap: 8px 24px;
    min-height: 0;
    background: linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.43) 38%,rgba(255,255,255,.08) 72%,rgba(255,255,255,0) 100%), url('../images/sesqua-forest-mist.svg') center 47%/cover no-repeat;
}

.sesqua-home-copy h1 {
    font-size: clamp(2.25rem,3.35vw,3.45rem);
    margin: 3px 0 9px
}

.sesqua-home-copy p {
    line-height: 1.36
}

.sesqua-home-brand-art img {
    width: min(100%,285px);
    max-height: 220px
}

.home-launch-block {
    margin-top: -6px
}

.home-launch-heading {
    margin-bottom: 6px
}

.home-launch-card {
    height: 132px;
    padding: 11px 13px 9px
}

.home-launch-icon {
    width: 42px;
    height: 42px;
    font-size: 1.4rem
}

.home-card-foot {
    min-height: 24px;
    margin-top: 5px;
    padding: 4px 8px
}

.home-tips h3 {
    padding: 9px 11px
}

.home-tips a {
    padding: 7px 10px
}

@media(max-width:1320px) {
    .app-shell.sesqua-woods .page-wrap:has(.sesqua-home-stage) {
        width: min(calc(100% - 20px),1500px)
    }

    .sesqua-home-stage {
        padding: 20px 24px 14px
    }
}

@media(max-width:1180px) {
    .home-launch-card {
        height: auto;
        min-height: 104px
    }
}

@media(max-width:840px) {
    .app-shell.sesqua-woods .page-wrap:has(.sesqua-home-stage) {
        width: calc(100% - 12px)
    }

    .sesqua-home-stage {
        padding: 20px 16px 16px
    }
}

/* 2026-08-19 QA Woods v2: route-specific real scenes, intentionally obvious for QA. */
.app-shell.sesqua-woods.scene-home,
.app-shell.sesqua-woods.scene-lake {
    background-image: linear-gradient(180deg,rgba(243,248,245,.18),rgba(236,244,239,.24)),url('../images/woods/sesqua-woods-lake-qa.jpg');
    background-position: center top;
}

.app-shell.sesqua-woods.scene-trail {
    background-image: linear-gradient(180deg,rgba(241,246,242,.16),rgba(230,239,233,.26)),url('../images/woods/sesqua-woods-trail-qa.jpg');
    background-position: center 42%;
}

.app-shell.sesqua-woods.scene-creek {
    background-image: linear-gradient(180deg,rgba(242,247,244,.17),rgba(231,239,234,.27)),url('../images/woods/sesqua-woods-creek-qa.jpg');
    background-position: center 48%;
}

.app-shell.sesqua-woods.scene-home::before {
    background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(244,249,245,.08) 52%,rgba(235,242,237,.18))
}

.app-shell.sesqua-woods:not(.scene-home) .page-wrap {
    background: rgba(249,251,249,.74);
    backdrop-filter: blur(3px)
}

.app-shell.sesqua-woods:not(.scene-home) .card {
    background: rgba(255,255,255,.91)
}

.app-shell.sesqua-woods.scene-home .page-wrap:has(.sesqua-home-stage) {
    background: transparent
}

.app-shell.sesqua-woods.scene-home .sesqua-home-stage {
    background: linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.52) 36%,rgba(255,255,255,.09) 70%,rgba(255,255,255,.01) 100%), url('../images/woods/sesqua-woods-lake-qa.jpg') center 46%/cover no-repeat;
}

.app-shell.sesqua-woods.scene-compare .page-wrap {
    background: rgba(249,251,249,.70)
}

/* 2026-08-20 consolidation: shared glass system + canonical Nutrition Viewer. */
.app-shell.sesqua-woods:not(.scene-home) .page-wrap {
    background: rgba(248,251,249,.56);
    backdrop-filter: blur(2.2px);
    border-color: rgba(217,228,220,.72);
}

.app-shell.sesqua-woods:not(.scene-home) .card,
.app-shell.sesqua-woods:not(.scene-home) .feature-card {
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(2px);
    box-shadow: 0 6px 20px rgba(29,54,47,.06);
}

.app-shell.sesqua-woods .text-input,
.app-shell.sesqua-woods .select-input,
.app-shell.sesqua-woods .text-area,
.app-shell.sesqua-woods .result-grid-row,
.app-shell.sesqua-woods .data-table th,
.app-shell.sesqua-woods .fit-badge {
    background: rgba(255,255,255,.96);
}

    .app-shell.sesqua-woods .result-grid-row:hover,
    .app-shell.sesqua-woods .result-grid-row.selected {
        background: rgba(224,243,235,.96)
    }

#sesqua-home-title {
    outline: none !important;
    box-shadow: none !important
}

.sesqua-home-brand-art {
    flex-direction: column;
    gap: 4px
}

.home-try-label {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(35,91,72,.25);
    border-radius: 10px;
    background: rgba(255,255,255,.82);
    padding: 5px 9px;
    color: #164f42;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(29,54,47,.08)
}

    .home-try-label:hover {
        background: #fff;
        border-color: #2d795e
    }

    .home-try-label b {
        font-size: .67rem;
        letter-spacing: .08em
    }

.home-try-nf {
    width: 42px;
    height: 30px;
    border: 2px solid #111;
    background: #fff;
    color: #000;
    padding: 2px 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left
}

    .home-try-nf strong {
        font: 900 7px/1 Arial
    }

    .home-try-nf i {
        display: block;
        height: 2px;
        background: #111
    }

.nutrition-viewer {
    min-width: 0
}

.nutrition-viewer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line)
}

.nutrition-viewer-title {
    min-width: 0
}

    .nutrition-viewer-title h2 {
        margin: 2px 0 4px;
        font-size: clamp(1.25rem,2vw,1.9rem);
        line-height: 1.04;
        letter-spacing: -.03em
    }

.nutrition-viewer-identity {
    width: min(100%, 380px);
    box-sizing: border-box;
    margin: 0 0 8px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--line);
}

    .nutrition-viewer-identity h2 {
        overflow-wrap: anywhere;
        margin: 0 0 4px;
        color: var(--text);
        font-size: clamp(1.15rem, 2vw, 1.55rem);
        line-height: 1.08;
        letter-spacing: -.025em;
    }

    .nutrition-viewer-identity .nutrition-viewer-description {
        margin: 0 0 5px;
    }

.nutrition-viewer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    color: var(--muted);
    font-size: .72rem
}

    .nutrition-viewer-meta span + span::before {
        content: "•";
        margin-right: 10px;
        color: #9bacb2
    }

.nutrition-viewer-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.nutrition-viewer-search {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    margin-bottom: 8px
}

.nutrition-viewer-results {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    margin: 8px 0 12px;
    max-height: 170px;
    overflow: auto
}

    .nutrition-viewer-results button {
        border: 1px solid var(--line);
        border-radius: 9px;
        background: rgba(255,255,255,.96);
        padding: 8px 9px;
        text-align: left;
        color: var(--text)
    }

        .nutrition-viewer-results button:hover {
            background: var(--accent-soft)
        }

    .nutrition-viewer-results strong, .nutrition-viewer-results small {
        display: block
    }

    .nutrition-viewer-results strong {
        font-size: .77rem
    }

    .nutrition-viewer-results small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .65rem
    }

.compact-message {
    padding: 7px 9px;
    margin: 5px 0 10px;
    font-size: .72rem
}

.nutrition-viewer-empty {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px dashed #b8cbc4;
    border-radius: 12px;
    background: rgba(249,252,250,.82)
}

    .nutrition-viewer-empty p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: .82rem
    }

.mini-nutrition-label {
    width: 92px;
    height: 112px;
    border: 3px solid #111;
    background: #fff;
    color: #000;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .mini-nutrition-label strong {
        font: 900 15px/1 Arial
    }

    .mini-nutrition-label span {
        height: 4px;
        background: #111
    }

        .mini-nutrition-label span:nth-child(3), .mini-nutrition-label span:nth-child(5) {
            height: 1px
        }

.nutrition-viewer-proof {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(238,247,242,.88);
    color: #38554d;
    font-size: .68rem
}

.nutrition-viewer-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(249,252,250,.9)
}

    .nutrition-viewer-help span,
    .nutrition-viewer-help strong,
    .nutrition-viewer-help small {
        display: block
    }

    .nutrition-viewer-help small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .72rem
    }

.proof-light {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9ba8ae
}

    .proof-light.good {
        background: var(--good);
        box-shadow: 0 0 0 3px rgba(47,138,85,.12)
    }

.proof-sep {
    color: #9aa9a4
}

.nutrition-viewer.compact .food-detail-grid:not(.sesqua-split-pane) {
    grid-template-columns: minmax(245px,340px) minmax(280px,1fr);
    gap: 18px
}

.nutrition-viewer.compact .nutrition-viewer-identity {
    width: min(100%, 340px);
}

.nutrition-viewer.compact .nutrition-viewer-title h2 {
    font-size: 1.15rem
}

.nutrition-viewer.compact .analysis-panel h2 {
    font-size: 1.25rem
}

.sesqua-tool-window:has(.nutrition-viewer) {
    width: min(1080px,calc(100vw - 36px));
    max-height: 88vh
}

    .sesqua-tool-window:has(.nutrition-viewer) .sesqua-tool-body {
        padding: 14px
    }

    .sesqua-tool-window:has(.nutrition-viewer) .nutrition-label {
        max-width: 340px
    }

.storage-path-list {
    display: grid;
    gap: 7px;
    margin: 10px 0
}

.storage-backup-tool {
    display: grid;
    gap: 12px
}

.storage-local-first,
.storage-tool-section {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(249,252,250,.92)
}

    .storage-local-first p,
    .storage-tool-section p {
        margin: 4px 0 8px;
        color: var(--muted);
        font-size: .8rem;
        line-height: 1.4
    }

    .storage-tool-section .path-code {
        display: block;
        margin: 7px 0 10px;
        overflow-wrap: anywhere
    }

    .storage-tool-section .data-counts {
        margin: 10px 0 0
    }

    .storage-tool-section.restore-status {
        background: rgba(252,249,241,.92)
    }

    .storage-path-list label {
        display: grid;
        grid-template-columns: 70px minmax(0,1fr);
        align-items: center;
        gap: 8px;
        color: var(--muted);
        font-size: .75rem
    }

    .storage-path-list .path-code {
        margin: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis
    }

.diagnostic-preview {
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 9px
}

    .diagnostic-preview summary {
        cursor: pointer;
        font-weight: 800;
        color: #254c41
    }

    .diagnostic-preview pre {
        max-height: 320px;
        overflow: auto;
        padding: 9px;
        border-radius: 8px;
        background: #14201c;
        color: #dcebe5;
        font-size: .67rem;
        white-space: pre-wrap
    }

    .diagnostic-preview small {
        color: var(--muted);
        word-break: break-all
    }

@media(max-width:840px) {
    .nutrition-viewer-head {
        flex-direction: column
    }

    .nutrition-viewer-identity,
    .nutrition-label {
        width: min(100%, 380px);
    }

    .nutrition-viewer-actions {
        justify-content: flex-start
    }

    .nutrition-viewer-results {
        grid-template-columns: 1fr
    }

    .nutrition-viewer.compact .food-detail-grid:not(.sesqua-split-pane) {
        grid-template-columns: 1fr
    }

    .nutrition-viewer-search {
        grid-template-columns: 1fr
    }

    .nutrition-viewer-help {
        align-items: flex-start;
        flex-direction: column
    }

    .storage-path-list label {
        grid-template-columns: 1fr
    }
}

/* 2026-08-20 Home graduation candidate: canonical no-squeeze responsive pass.
   Keep this block last so older QA/home experiments cannot override phone reflow. */
.sesqua-home-brand-art {
    display: grid;
    grid-template-columns: auto minmax(180px,285px);
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .sesqua-home-brand-art .home-try-label {
        grid-column: 1;
        grid-row: 1;
        justify-self: end
    }

    .sesqua-home-brand-art img {
        grid-column: 2;
        grid-row: 1;
        width: min(100%,285px);
        max-height: 220px
    }

.sesqua-promise-strip {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

/* 4 -> 2 -> 1. Reflow before anything gets squeezed. */
@media(max-width:1180px) {
    .sesqua-home-stage {
        grid-template-columns: 1fr;
        padding: 20px 24px 16px;
        background-position: 58% center
    }

    .sesqua-home-copy {
        width: 100%;
        max-width: none
    }

        .sesqua-home-copy h1 {
            max-width: 760px
        }

    .sesqua-home-brand-art {
        grid-template-columns: auto minmax(180px,270px);
        justify-content: start
    }

        .sesqua-home-brand-art img {
            max-height: 205px
        }

    .home-launch-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .sesqua-promise-strip {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:840px) {
    .app-shell.sesqua-woods .page-wrap:has(.sesqua-home-stage) {
        width: calc(100% - 12px)
    }

    .sesqua-home-stage {
        grid-template-columns: 1fr;
        padding: 20px 16px 16px;
        background-position: 58% center
    }

    .sesqua-home-copy {
        width: 100%;
        max-width: none;
        padding: 0
    }

        .sesqua-home-copy h1 {
            width: 100%;
            max-width: 680px;
            font-size: clamp(2.35rem,8vw,3.35rem);
            line-height: 1.01;
            overflow-wrap: normal;
            word-break: normal;
        }

        .sesqua-home-copy p {
            max-width: 680px;
            font-size: 1rem;
            line-height: 1.45
        }

    .sesqua-home-brand-art {
        display: grid;
        grid-template-columns: auto minmax(150px,235px);
        justify-content: start;
        gap: 9px;
        margin-top: 4px
    }

        .sesqua-home-brand-art img {
            display: block;
            max-height: 180px
        }

    .home-launch-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px
    }

        .home-launch-heading > span {
            text-align: left
        }

    .home-tips {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:620px) {
    .app-shell.sesqua-woods .page-wrap:has(.sesqua-home-stage) {
        width: calc(100% - 8px)
    }

    .sesqua-home-stage {
        padding: 18px 14px 16px;
        border-radius: 17px
    }

    .sesqua-home-copy h1 {
        font-size: clamp(2.2rem,11vw,3rem);
        line-height: 1.02;
        letter-spacing: -.045em
    }

    .sesqua-home-copy p {
        font-size: .98rem
    }

    .sesqua-home-brand-art {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 7px
    }

        .sesqua-home-brand-art .home-try-label {
            grid-column: 1;
            grid-row: 1;
            justify-self: start
        }

        .sesqua-home-brand-art img {
            grid-column: 1;
            grid-row: 2;
            width: min(72vw,230px);
            max-height: 170px
        }

    .home-launch-grid {
        grid-template-columns: 1fr
    }

    .sesqua-promise-strip {
        grid-template-columns: 1fr
    }

    .home-tips {
        grid-template-columns: 1fr
    }

        .home-tips h3 {
            grid-column: auto
        }

    .home-launch-card {
        height: auto;
        min-height: 0
    }
}

@media(max-width:430px) {
    .sesqua-home-stage {
        padding: 16px 12px 14px
    }

    .sesqua-home-copy h1 {
        font-size: clamp(2.05rem,10.8vw,2.65rem)
    }

    .sesqua-home-brand-art img {
        width: min(78vw,215px)
    }

    .home-try-label {
        min-height: 44px;
        padding: 6px 10px
    }

    .home-launch-card {
        padding: 14px 12px
    }

    .sesqua-promise-item {
        padding: 14px 12px
    }
}

/* Shared recent-search history (Browse/Search + Nutrition Viewer) */
.search-history-wrap {
    position: relative;
    min-width: 0
}

    .search-history-wrap > .text-input {
        width: 100%
    }

.search-history-menu {
    position: absolute;
    z-index: 80;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.99);
    box-shadow: 0 12px 28px rgba(32,45,37,.18);
    text-align: left
}

.search-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem
}

    .search-history-head button {
        border: 0;
        background: transparent;
        color: var(--accent);
        cursor: pointer;
        font: inherit;
        font-weight: 700;
        padding: 2px 4px
    }

.search-history-item {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.055);
    background: transparent;
    padding: 8px 10px;
    color: var(--text);
    text-align: left;
    cursor: pointer
}

    .search-history-item:last-child {
        border-bottom: 0
    }

    .search-history-item:hover {
        background: var(--accent-soft)
    }

    .search-history-item span:first-child {
        color: var(--muted);
        font-size: .8rem
    }

    .search-history-item span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

/* Shared USDA search entry: Browse, Quick Lookup and lightweight tools. */
.usda-search-box.prominent {
    padding: 10px;
    border: 2px solid rgba(28,107,90,.24);
    border-radius: 15px;
    background: rgba(244,251,248,.94);
    box-shadow: 0 7px 20px rgba(26,82,66,.08)
}

    .usda-search-box.prominent .search-input {
        min-height: 54px;
        border-color: #abc8be;
        font-size: 1.08rem
    }

.quick-heading {
    margin-bottom: 14px
}

    .quick-heading h1 {
        margin-top: 5px;
        margin-bottom: 6px
    }

.quick-lookup-card {
    padding: 18px
}

.quick-results {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin-top: 12px
}

    .quick-results button {
        min-width: 0;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: rgba(255,255,255,.96);
        color: var(--text);
        text-align: left
    }

        .quick-results button:hover, .quick-results button.selected {
            background: var(--accent-soft);
            border-color: #a9cfc2
        }

    .quick-results strong, .quick-results small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .quick-results strong {
        font-size: .82rem
    }

    .quick-results small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .69rem
    }

.quick-viewer-card {
    margin-top: 16px
}

.quick-privacy-note {
    margin: 12px 4px;
    color: var(--muted);
    font-size: .78rem
}

    .quick-privacy-note strong {
        color: var(--accent-dark)
    }

@media(max-width:760px) {
    .usda-search-box.prominent {
        padding: 8px
    }

    .quick-results {
        grid-template-columns: 1fr
    }

    .quick-lookup-card {
        padding: 12px
    }

    .quick-heading {
        margin-bottom: 10px
    }
}

/* 2026-08-21 Page 2 navigation completion QA */
.app-menu {
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable
}

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin-top: 12px
}

    .shortcut-grid .mini-btn {
        text-align: left;
        justify-content: flex-start;
        min-height: 42px
    }

@media(max-width:1280px) {
    .primary-nav a {
        padding-left: 8px;
        padding-right: 8px
    }
}

@media(max-width:520px) {
    .shortcut-grid {
        grid-template-columns: 1fr
    }
}

/* 2026-08-22 Today's Meals popup: daily meal workspace. */
.sesqua-tool-window:has(.today-meals-tool) {
    width: min(760px,calc(100vw - 40px));
    max-height: calc(100vh - 112px)
}

    .sesqua-tool-window:has(.today-meals-tool) .sesqua-tool-body {
        padding: 14px;
        min-height: 420px
    }

.today-meals-tool {
    position: relative;
    min-height: 420px;
    color: var(--text)
}

.today-tool-tabs {
    position: sticky;
    top: -14px;
    z-index: 8;
    margin: -14px -14px 12px;
    padding: 12px 14px 8px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid var(--line)
}

    .today-tool-tabs .mini-btn {
        min-height: 36px;
        padding: 7px 13px
    }

.today-tool-datebar {
    display: grid;
    grid-template-columns: auto minmax(190px,1fr) auto auto;
    align-items: end;
    gap: 8px;
    padding: 10px;
    border: 1px solid #cbdcd7;
    border-radius: 14px;
    background: linear-gradient(135deg,#f3faf7,#edf6f2)
}

.today-tool-date {
    display: grid;
    gap: 3px
}

    .today-tool-date > span {
        font-size: .74rem;
        font-weight: 850;
        color: var(--accent-dark)
    }

    .today-tool-date .text-input {
        min-height: 38px;
        padding: 7px 10px;
        font-weight: 780
    }

.today-tool-datebar > .mini-btn {
    min-height: 38px
}

.today-tool-today {
    min-width: 62px
}

.today-tool-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 2px;
    color: var(--muted);
    font-size: .75rem
}

    .today-tool-summary span {
        display: inline-flex;
        gap: 3px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #eef5f2
    }

    .today-tool-summary strong {
        color: var(--text)
    }

    .today-tool-summary a {
        margin-left: auto;
        color: var(--accent-dark);
        font-weight: 800;
        text-decoration: none
    }

        .today-tool-summary a:hover {
            text-decoration: underline
        }

.today-tool-status {
    margin: 0 0 8px;
    padding: 7px 10px;
    border-radius: 9px;
    background: #e5f5e9;
    color: #1e6840;
    font-size: .76rem;
    font-weight: 800
}

.today-tool-meals {
    display: grid;
    gap: 9px;
    padding-bottom: 4px
}

.today-tool-meal {
    overflow: hidden;
    border: 1px solid #cad9d6;
    border-radius: 13px;
    background: #fff;
    transition: border-color .14s ease,box-shadow .14s ease
}

    .today-tool-meal.adding {
        border-color: #77ad9b;
        box-shadow: 0 0 0 3px rgba(28,107,90,.10)
    }

    .today-tool-meal > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        background: #f5f9f7;
        border-bottom: 1px solid #e0e9e6
    }

        .today-tool-meal > header > div {
            display: flex;
            align-items: center;
            gap: 9px;
            min-width: 0
        }

        .today-tool-meal > header strong, .today-tool-meal > header small {
            display: block
        }

        .today-tool-meal > header strong {
            font-size: .9rem
        }

        .today-tool-meal > header small {
            margin-top: 2px;
            color: var(--muted);
            font-size: .68rem
        }

.today-tool-meal-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dbe6e2;
    font-size: 1.05rem
}

.today-tool-meal-add {
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 1.05rem
}

.today-tool-empty {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 11px 12px;
    text-align: left;
    color: var(--muted);
    font-size: .76rem;
    cursor: pointer
}

    .today-tool-empty:hover {
        background: var(--accent-soft);
        color: var(--accent-dark)
    }

.today-tool-entry-list {
    display: grid
}

.today-tool-entry {
    padding: 9px 10px;
    border-top: 1px solid #edf1f0
}

    .today-tool-entry:first-child {
        border-top: 0
    }

.today-tool-entry-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

    .today-tool-entry-main > span {
        min-width: 0
    }

    .today-tool-entry-main strong, .today-tool-entry-main small {
        display: block
    }

    .today-tool-entry-main strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .8rem
    }

    .today-tool-entry-main small {
        margin-top: 3px;
        color: var(--muted);
        font-size: .67rem
    }

.today-tool-entry-actions {
    display: flex;
    gap: 5px;
    flex: 0 0 auto
}

.today-tool-edit-grid {
    display: grid;
    grid-template-columns: minmax(120px,1fr) 120px 100px;
    gap: 7px
}

    .today-tool-edit-grid label, .today-tool-add-grid label {
        display: grid;
        gap: 4px;
        color: #3c5750;
        font-size: .68rem;
        font-weight: 800
    }

    .today-tool-edit-grid .text-input, .today-tool-edit-grid .select-input, .today-tool-add-grid .text-input, .today-tool-add-grid .select-input {
        min-height: 36px;
        padding: 6px 8px;
        font-size: .75rem
    }

.today-tool-edit-actions, .today-tool-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 7px
}

.today-tool-delete-confirm {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 7px;
    padding: 6px 7px;
    border-radius: 8px;
    background: #fff3f1;
    color: #7c3027;
    font-size: .7rem
}

    .today-tool-delete-confirm span {
        margin-right: auto;
        font-weight: 750
    }

.today-tool-fab {
    position: sticky;
    z-index: 7;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 4px 2px auto;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    padding: 9px 14px;
    font-weight: 850;
    box-shadow: 0 8px 22px rgba(18,73,59,.25);
    cursor: pointer
}

    .today-tool-fab:hover {
        background: var(--accent-dark);
        transform: translateY(-1px)
    }

    .today-tool-fab span {
        font-size: 1.2rem;
        line-height: 1
    }

.today-tool-add-panel {
    position: sticky;
    z-index: 9;
    bottom: 0;
    margin-top: 10px;
    padding: 11px;
    border: 2px solid #8db8aa;
    border-radius: 14px;
    background: rgba(249,253,251,.99);
    box-shadow: 0 -6px 24px rgba(23,73,60,.14)
}

    .today-tool-add-panel > header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 9px
    }

        .today-tool-add-panel > header strong, .today-tool-add-panel > header span {
            display: block
        }

    .today-tool-add-panel .empty-state.compact {
        padding: 12px;
        min-height: 0
    }

        .today-tool-add-panel .empty-state.compact p {
            margin: 4px 0 9px
        }

.today-tool-add-grid {
    display: grid;
    grid-template-columns: minmax(200px,1.8fr) minmax(110px,1fr) 90px 105px;
    gap: 7px
}

.today-tool-choice {
    min-width: 0
}

.today-tool-library-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    margin-bottom: 9px
}

.today-tool-library {
    display: grid;
    gap: 6px
}

    .today-tool-library .empty-state.compact {
        padding: 28px 15px;
        min-height: 0
    }

.today-tool-library-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    text-align: left;
    cursor: pointer
}

    .today-tool-library-row:hover {
        background: var(--accent-soft);
        border-color: #a8c8bd
    }

    .today-tool-library-row strong, .today-tool-library-row small {
        display: block
    }

    .today-tool-library-row strong {
        font-size: .8rem
    }

    .today-tool-library-row small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .67rem
    }

    .today-tool-library-row > span:last-child {
        flex: 0 0 auto;
        color: var(--accent-dark);
        font-size: .7rem;
        font-weight: 850
    }

@media(max-width:700px) {
    .sesqua-tool-window:has(.today-meals-tool) {
        width: auto;
        max-height: 84vh
    }

    .today-tool-datebar {
        grid-template-columns: auto minmax(0,1fr) auto
    }

    .today-tool-today {
        grid-column: 1/-1
    }

    .today-tool-edit-grid {
        grid-template-columns: 1fr 1fr
    }

        .today-tool-edit-grid label:last-child {
            grid-column: 1/-1
        }

    .today-tool-add-grid {
        grid-template-columns: 1fr 1fr
    }

    .today-tool-choice {
        grid-column: 1/-1
    }

    .today-tool-library-head {
        grid-template-columns: 1fr
    }

    .today-tool-summary a {
        width: 100%;
        margin-left: 0
    }
}

/* 2026-08-22 Desktop-copyable popup tool launchers. */
.sesqua-tool-rail-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 34px;
    align-items: center;
    gap: 3px
}

.sesqua-tool-rail-shortcut {
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--accent-dark);
    font-size: 1.1rem;
    font-weight: 850;
    cursor: pointer
}

    .sesqua-tool-rail-shortcut:hover, .sesqua-tool-rail-shortcut:focus-visible {
        background: #e3f2ec;
        outline: 2px solid rgba(28,107,90,.2)
    }

    .sesqua-tool-rail-shortcut:disabled {
        opacity: .55;
        cursor: not-allowed
    }

.sesqua-tool-rail-status {
    display: block;
    padding: 7px;
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.3;
    overflow-wrap: anywhere
}

.shortcut-tool-details {
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 10px
}

    .shortcut-tool-details summary {
        cursor: pointer;
        font-weight: 800;
        color: var(--accent-dark)
    }

.button-mac-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    object-fit: cover;
    margin-right: 7px;
    vertical-align: middle
}

.sesqua-tool-icon img, .sesqua-tool-choice-icon img, .shortcut-choice-icon img, .tool-playground-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.sesqua-tool-icon {
    overflow: hidden
}

    .sesqua-tool-icon img {
        width: 34px;
        height: 34px
    }

.sesqua-tool-choice-icon, .shortcut-choice-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #eef5f2;
    overflow: hidden
}

    .sesqua-tool-choice-icon img, .shortcut-choice-icon img {
        width: 27px;
        height: 27px
    }

.tool-playground-card > .tool-playground-icon {
    display: grid;
    place-items: center;
    grid-row: 1/3;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #eef5f2;
    overflow: hidden
}

    .tool-playground-card > .tool-playground-icon img {
        width: 50px;
        height: 50px
    }

.sesqua-tool-rail-icon img {
    object-fit: contain
}

.sesqua-tool-rail-icon {
    cursor: context-menu
}

.sesqua-icon-picker-backdrop {
    position: fixed;
    z-index: 1950;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(12,30,26,.38);
    backdrop-filter: blur(3px)
}

.sesqua-icon-picker {
    display: flex;
    flex-direction: column;
    width: min(900px,calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: hidden;
    border: 1px solid #aec7bf;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(8,30,24,.3)
}

    .sesqua-icon-picker > header {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        gap: 14px;
        padding: 13px 15px;
        border-bottom: 1px solid var(--line);
        background: #f2f8f5
    }

        .sesqua-icon-picker > header strong, .sesqua-icon-picker > header small {
            display: block
        }

        .sesqua-icon-picker > header small {
            margin-top: 2px;
            color: var(--muted);
            font-size: .72rem
        }

.sesqua-icon-picker-current {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #d9e5e1,0 4px 14px rgba(22,65,54,.08)
}

    .sesqua-icon-picker-current img {
        width: 88px;
        height: 88px;
        object-fit: contain
    }

.sesqua-icon-picker-selected-name {
    display: block;
    margin-top: 9px;
    color: var(--accent-dark);
    font-size: .76rem;
    font-style: normal;
    font-weight: 850
}

.sesqua-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(94px,1fr));
    gap: 9px;
    min-height: 220px;
    padding: 13px;
    overflow-y: auto;
    background: #f8fbfa
}

.sesqua-icon-choice {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid #d5e1dd;
    border-radius: 14px;
    background: #fff;
    cursor: pointer
}

    .sesqua-icon-choice:hover, .sesqua-icon-choice:focus-visible {
        border-color: #6fa28f;
        background: #edf7f3;
        outline: 2px solid rgba(28,107,90,.16)
    }

    .sesqua-icon-choice.selected {
        border-color: var(--accent);
        background: #e4f3ed;
        box-shadow: 0 0 0 2px rgba(28,107,90,.18)
    }

    .sesqua-icon-choice img {
        width: 94%;
        height: 94%;
        object-fit: contain
    }

    .sesqua-icon-choice.selected img {
        width: 100%;
        height: 100%
    }

.sesqua-icon-picker-status {
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid #d8e7e1;
    background: #eef8f3;
    color: #315d50;
    font-size: .72rem;
    font-weight: 750
}

.sesqua-icon-picker > footer {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 11px 13px;
    border-top: 1px solid var(--line)
}

.sesqua-icon-sync-confirm {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-top: 1px solid #e6c993;
    background: #fff8e8
}

    .sesqua-icon-sync-confirm strong, .sesqua-icon-sync-confirm small {
        display: block
    }

    .sesqua-icon-sync-confirm small {
        margin-top: 3px;
        color: #6f5c39;
        font-size: .68rem
    }

    .sesqua-icon-sync-confirm code {
        font-size: .66rem
    }

@media(max-width:520px) {
    .sesqua-icon-picker-backdrop {
        padding: 8px
    }

    .sesqua-icon-picker {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 15px
    }

    .sesqua-icon-picker-current {
        width: 68px;
        height: 68px
    }

        .sesqua-icon-picker-current img {
            width: 64px;
            height: 64px
        }

    .sesqua-icon-picker-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
        padding: 8px
    }

    .sesqua-icon-picker > footer {
        grid-template-columns: 1fr 1fr
    }

        .sesqua-icon-picker > footer > span {
            display: none
        }

    .sesqua-icon-sync-confirm {
        grid-template-columns: 1fr 1fr
    }

        .sesqua-icon-sync-confirm > span {
            grid-column: 1/-1
        }
}

.standalone-tool-shell {
    min-height: 100vh;
    overflow: hidden
}

    .standalone-tool-shell > .topbar, .standalone-tool-shell > .page-wrap, .standalone-tool-shell > .footer {
        display: none
    }

    .standalone-tool-shell .sesqua-tool-layer {
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 72px 18px 18px;
        background: linear-gradient(145deg,rgba(232,244,239,.9),rgba(216,232,227,.72))
    }

    .standalone-tool-shell .sesqua-tool-window {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        margin: 0;
        width: min(680px,100%);
        max-height: calc(100vh - 36px)
    }

        .standalone-tool-shell .sesqua-tool-window:has(.nutrition-viewer) {
            width: min(980px,100%)
        }

    .standalone-tool-shell .sesqua-tool-context {
        white-space: normal;
        overflow-wrap: anywhere
    }

    .standalone-tool-shell .sesqua-tool-rail {
        z-index: 1810
    }

@media(max-width:760px) {
    .standalone-tool-shell .sesqua-tool-window, .standalone-tool-shell .sesqua-tool-window:has(.nutrition-viewer) {
        width: 100%;
        max-height: calc(100vh - 20px)
    }

    .standalone-tool-shell .sesqua-tool-layer {
        padding: 10px 62px 10px 10px
    }
}

@media(max-width:430px) {
    .today-tool-tabs {
        flex-wrap: nowrap;
        overflow-x: auto
    }

        .today-tool-tabs .mini-btn {
            flex: 0 0 auto
        }

    .today-tool-entry-main {
        align-items: flex-start
    }

    .today-tool-edit-grid, .today-tool-add-grid {
        grid-template-columns: 1fr
    }

        .today-tool-edit-grid label:last-child, .today-tool-choice {
            grid-column: auto
        }

    .today-tool-delete-confirm {
        flex-wrap: wrap
    }

        .today-tool-delete-confirm span {
            width: 100%
        }
}

/* 2026-08-22 Complete Sesqua + personal Asset Library. */
.sesqua-tool-window:has(.asset-library-tool) {
    width: min(1120px,calc(100vw - 40px));
    max-height: calc(100vh - 96px)
}

    .sesqua-tool-window:has(.asset-library-tool) .sesqua-tool-body {
        min-height: 520px;
        padding: 0;
        overflow: hidden
    }

.asset-library-tool {
    display: flex;
    flex-direction: column;
    height: min(680px,calc(100vh - 245px));
    min-height: 520px;
    background: #f8fbfa;
    color: var(--text)
}

.asset-library-toolbar {
    flex: 0 0 auto;
    padding: 13px 15px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.98)
}

.asset-library-tabs {
    margin-bottom: 10px
}

    .asset-library-tabs .mini-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 36px
    }

        .asset-library-tabs .mini-btn span, .asset-category-chip span {
            display: inline-grid;
            place-items: center;
            min-width: 21px;
            height: 21px;
            padding: 0 5px;
            border-radius: 999px;
            background: rgba(41,75,67,.09);
            font-size: .65rem
        }

        .asset-library-tabs .mini-btn.active span, .asset-category-chip.active span {
            background: #fff
        }

.asset-library-search-row {
    display: grid;
    grid-template-columns: minmax(250px,1fr) auto auto;
    gap: 8px;
    align-items: center
}

.asset-library-search {
    position: relative;
    display: block;
    min-width: 0
}

    .asset-library-search > span {
        position: absolute;
        z-index: 1;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted);
        font-size: 1.15rem;
        pointer-events: none
    }

    .asset-library-search .text-input {
        width: 100%;
        min-height: 40px;
        padding-left: 36px
    }

.asset-import-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap
}

    .asset-import-label input {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important
    }

.asset-category-row {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 1px
}

.asset-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    border: 1px solid #cfddda;
    border-radius: 999px;
    background: #fff;
    color: #3f5952;
    padding: 6px 10px;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer
}

    .asset-category-chip:hover, .asset-category-chip.active {
        border-color: #78aa9a;
        background: #e6f3ed;
        color: var(--accent-dark)
    }

.asset-library-status {
    flex: 0 0 auto;
    padding: 7px 15px;
    border-bottom: 1px solid #cfe5d8;
    background: #e9f7ee;
    color: #246643;
    font-size: .72rem;
    font-weight: 780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.asset-library-content {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    flex: 1 1 auto;
    min-height: 0
}

    .asset-library-content.has-selection {
        grid-template-columns: minmax(0,1fr) 310px
    }

.asset-library-results {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #f8fbfa
}

.asset-library-results-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 9px 14px;
    border-bottom: 1px solid #e1eae7;
    color: #526a64;
    font-size: .72rem
}

    .asset-library-results-head small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--muted)
    }

.asset-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(128px,1fr));
    gap: 9px;
    align-content: start;
    min-height: 0;
    padding: 12px 13px 18px;
    overflow-y: auto;
    scrollbar-gutter: stable
}

.asset-card {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(40px,auto);
    gap: 6px;
    min-width: 0;
    padding: 7px;
    border: 1px solid #d4e0dd;
    border-radius: 13px;
    background: #fff;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(24,57,49,.035);
    transition: transform .12s ease,border-color .12s ease,box-shadow .12s ease
}

    .asset-card:hover, .asset-card:focus-visible {
        transform: translateY(-1px);
        border-color: #7ba999;
        box-shadow: 0 7px 18px rgba(24,57,49,.1);
        outline: 0
    }

    .asset-card.selected {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(28,107,90,.15)
    }

.asset-card-preview {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 9px;
    background-color: #eef4f2;
    background-image: linear-gradient(45deg,rgba(255,255,255,.78) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.78) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.78) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.78) 75%);
    background-size: 18px 18px;
    background-position: 0 0,0 9px,9px -9px,-9px 0
}

    .asset-card-preview img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.asset-card-copy {
    display: block;
    min-width: 0;
    padding: 0 2px
}

    .asset-card-copy strong, .asset-card-copy small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .asset-card-copy strong {
        font-size: .72rem
    }

    .asset-card-copy small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .6rem
    }

.asset-card-format {
    position: absolute;
    top: 11px;
    right: 11px;
    padding: 3px 5px;
    border-radius: 6px;
    background: rgba(255,255,255,.88);
    color: #456159;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 1px 5px rgba(0,0,0,.08)
}

.asset-library-empty {
    margin: auto;
    max-width: 430px;
    min-height: 0;
    text-align: center
}

    .asset-library-empty .asset-import-label {
        margin-top: 5px
    }

.asset-library-inspector {
    min-width: 0;
    overflow-y: auto;
    border-left: 1px solid var(--line);
    background: #fff
}

    .asset-library-inspector > header {
        position: sticky;
        z-index: 2;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 13px;
        border-bottom: 1px solid var(--line);
        background: rgba(248,251,250,.98);
        font-size: .78rem
    }

.asset-inspector-preview {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin: 13px;
    border: 1px solid #d7e2df;
    border-radius: 15px;
    overflow: hidden;
    background-color: #edf3f1;
    background-image: linear-gradient(45deg,rgba(255,255,255,.75) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.75) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.75) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.75) 75%);
    background-size: 20px 20px;
    background-position: 0 0,0 10px,10px -10px,-10px 0
}

    .asset-inspector-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.asset-inspector-copy {
    padding: 0 14px 10px
}

    .asset-inspector-copy h3 {
        margin: 3px 0 5px;
        font-size: 1.05rem
    }

    .asset-inspector-copy p {
        margin: 0;
        color: var(--muted);
        font-size: .68rem;
        overflow-wrap: anywhere
    }

.asset-inspector-meta {
    display: grid;
    margin: 0;
    padding: 0 14px
}

    .asset-inspector-meta > div {
        display: grid;
        grid-template-columns: 72px minmax(0,1fr);
        gap: 8px;
        padding: 7px 0;
        border-top: 1px solid #edf1f0;
        font-size: .68rem
    }

    .asset-inspector-meta dt {
        color: var(--muted)
    }

    .asset-inspector-meta dd {
        margin: 0;
        font-weight: 750
    }

.asset-inspector-actions {
    display: grid;
    gap: 7px;
    padding: 13px 14px 16px
}

    .asset-inspector-actions .mini-btn, .asset-inspector-actions .btn {
        width: 100%;
        justify-content: center
    }

.standalone-tool-shell .sesqua-tool-window:has(.asset-library-tool) {
    width: min(1120px,100%)
}

@media(max-width:800px) {
    .sesqua-tool-window:has(.asset-library-tool) .sesqua-tool-body {
        min-height: 440px
    }

    .asset-library-tool {
        height: min(660px,calc(100vh - 220px));
        min-height: 440px
    }

    .asset-library-content.has-selection {
        grid-template-columns: minmax(0,1fr) 265px
    }

    .asset-library-grid {
        grid-template-columns: repeat(auto-fill,minmax(112px,1fr))
    }

    .asset-library-search-row {
        grid-template-columns: minmax(0,1fr) auto
    }

        .asset-library-search-row > .mini-btn:last-child {
            grid-column: 2
        }

        .asset-library-search-row > .mini-btn:nth-last-child(2) {
            grid-column: 2
        }

    .asset-library-search {
        grid-row: 1/3
    }

    .asset-library-inspector {
        font-size: .94em
    }
}

@media(max-width:620px) {
    .sesqua-tool-window:has(.asset-library-tool) {
        width: auto
    }

        .sesqua-tool-window:has(.asset-library-tool) .sesqua-tool-body {
            min-height: 380px
        }

    .asset-library-tool {
        height: min(650px,calc(100vh - 190px));
        min-height: 380px
    }

    .asset-library-tabs {
        flex-wrap: nowrap;
        overflow-x: auto
    }

        .asset-library-tabs .mini-btn {
            flex: 0 0 auto
        }

    .asset-library-search-row {
        grid-template-columns: 1fr 1fr
    }

    .asset-library-search {
        grid-column: 1/-1;
        grid-row: auto
    }

    .asset-library-search-row > .mini-btn:last-child, .asset-library-search-row > .mini-btn:nth-last-child(2) {
        grid-column: auto
    }

    .asset-library-content.has-selection {
        grid-template-columns: 1fr
    }

        .asset-library-content.has-selection .asset-library-results {
            display: none
        }

    .asset-library-inspector {
        border-left: 0
    }

    .asset-inspector-preview {
        max-width: 260px;
        width: calc(100% - 26px);
        margin-left: auto;
        margin-right: auto
    }

    .asset-library-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 7px;
        padding: 9px
    }

    .asset-card {
        padding: 5px
    }

    .asset-card-format {
        display: none
    }

    .asset-card-copy strong {
        font-size: .65rem
    }
}

@media(max-width:400px) {
    .asset-library-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .asset-library-search-row {
        grid-template-columns: 1fr
    }

        .asset-library-search-row > .mini-btn:last-child, .asset-library-search-row > .mini-btn:nth-last-child(2) {
            grid-column: 1
        }

    .asset-category-row {
        margin-left: -4px;
        margin-right: -4px
    }
}

/* 2026-08-22 Home finish: simple mark, Buddy Try Me, and a clean tips strip. */
.sesqua-home-brand-art {
    display: grid;
    grid-template-columns: 112px minmax(180px,220px);
    align-items: center;
    justify-content: center;
    gap: 18px
}

.home-try-buddy {
    position: relative;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    box-shadow: 0 7px 18px rgba(29,54,47,.12);
    cursor: pointer;
    transition: transform .14s ease,box-shadow .14s ease
}

    .home-try-buddy:hover, .home-try-buddy:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(29,54,47,.18);
        outline: 3px solid rgba(23,99,77,.22)
    }

.sesqua-home-brand-art .home-try-buddy img {
    display: block;
    grid-column: auto;
    grid-row: auto;
    width: 96px;
    height: 96px;
    max-height: none;
    object-fit: contain
}

.home-try-buddy > span {
    position: absolute;
    right: -12px;
    top: -9px;
    padding: 6px 9px;
    border: 2px solid #185c49;
    border-radius: 14px;
    background: #fff;
    color: #164f42;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(29,54,47,.10)
}

    .home-try-buddy > span::after {
        content: "";
        position: absolute;
        left: 12px;
        bottom: -7px;
        width: 11px;
        height: 11px;
        border-right: 2px solid #185c49;
        border-bottom: 2px solid #185c49;
        background: #fff;
        transform: rotate(45deg)
    }

.sesqua-home-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0
}

.sesqua-home-lockup-mark {
    display: grid;
    place-items: center;
    width: 142px;
    height: 142px;
    padding: 5px;
    border: 3px solid #3b2114;
    border-radius: 50%;
    background: #f7f1df;
    box-shadow: 0 0 0 5px rgba(255,255,255,.78),0 8px 20px rgba(44,31,20,.14);
    overflow: hidden
}

.sesqua-home-brand-art .sesqua-home-lockup-mark img {
    display: block;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain
}

.sesqua-home-lockup > strong {
    margin-top: 10px;
    color: #28170e;
    font-size: 2.35rem;
    line-height: .9;
    letter-spacing: .055em;
    text-shadow: 0 1px 0 rgba(255,255,255,.75)
}

.home-launch-with-tips {
    grid-template-columns: minmax(0,1fr);
    gap: 12px
}

.home-tips {
    display: block;
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 16px rgba(34,57,68,.055)
}

.home-tips-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 42px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--line);
    background: rgba(249,252,250,.84)
}

.home-tips .home-tips-head h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: .88rem;
    color: #183b35
}

.home-tips-head > .home-tips-more {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 7px;
    border: 0;
    color: #0f684e;
    font-size: .72rem;
    font-weight: 850;
    text-align: right
}

.home-tips-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.home-tips .home-tips-grid > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 57px;
    padding: 8px 13px;
    border: 0;
    border-right: 1px solid #edf1f0;
    color: var(--text);
    text-decoration: none
}

    .home-tips .home-tips-grid > a:last-child {
        border-right: 0
    }

    .home-tips .home-tips-grid > a:hover {
        background: var(--accent-soft)
    }

.home-tips-grid strong {
    font-size: .75rem
}

.home-tips-grid small {
    font-size: .65rem;
    line-height: 1.28;
    color: var(--muted)
}

@media(max-width:840px) {
    .sesqua-home-brand-art {
        grid-template-columns: 100px minmax(155px,190px);
        justify-content: start;
        gap: 14px
    }

    .home-try-buddy {
        width: 96px;
        height: 96px
    }

    .sesqua-home-brand-art .home-try-buddy img {
        width: 86px;
        height: 86px
    }

    .sesqua-home-lockup-mark {
        width: 118px;
        height: 118px
    }

    .sesqua-home-lockup > strong {
        font-size: 2rem
    }

    .home-tips-grid {
        grid-template-columns: 1fr 1fr
    }

    .home-tips .home-tips-grid > a:nth-child(2) {
        border-right: 0
    }

    .home-tips .home-tips-grid > a:last-child {
        grid-column: 1/-1;
        border-top: 1px solid #edf1f0
    }
}

@media(max-width:520px) {
    .sesqua-home-brand-art {
        grid-template-columns: 88px minmax(135px,165px);
        gap: 12px
    }

    .home-try-buddy {
        width: 84px;
        height: 84px
    }

    .sesqua-home-brand-art .home-try-buddy img {
        width: 76px;
        height: 76px
    }

    .home-try-buddy > span {
        right: -13px;
        top: -13px;
        font-size: .68rem
    }

    .sesqua-home-lockup-mark {
        width: 102px;
        height: 102px
    }

    .sesqua-home-lockup > strong {
        margin-top: 8px;
        font-size: 1.7rem
    }

    .home-tips-head {
        align-items: flex-start
    }

    .home-tips-grid {
        grid-template-columns: 1fr
    }

    .home-tips .home-tips-grid > a, .home-tips .home-tips-grid > a:nth-child(2) {
        min-height: 54px;
        border-right: 0;
        border-top: 1px solid #edf1f0
    }

        .home-tips .home-tips-grid > a:first-child {
            border-top: 0
        }
}

/* Canonical simplified Home — 2026-08-22. New class scope retires the older Home experiments above. */
.app-shell.sesqua-woods .page-wrap:has(.home-redesign) {
    width: min(calc(100% - 28px),1500px);
    padding: 0;
    margin-top: 18px;
    margin-bottom: 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none
}

.home-redesign {
    display: grid;
    gap: 22px
}

.home-redesign-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.6fr) minmax(260px,.4fr);
    gap: 28px;
    align-items: center;
    min-height: 430px;
    padding: clamp(28px,4vw,58px);
    overflow: hidden;
    border: 1px solid rgba(217,226,223,.88);
    border-radius: 25px;
    background: linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 47%,rgba(255,255,255,.18) 76%,rgba(255,255,255,.04)),url('../images/woods/sesqua-woods-lake-qa.jpg') center 46%/cover no-repeat;
    box-shadow: 0 14px 38px rgba(30,58,50,.09)
}

.home-redesign-intro {
    position: relative;
    z-index: 2;
    max-width: 1040px
}

    .home-redesign-intro h1 {
        max-width: 1040px;
        margin: 8px 0 13px;
        font-size: clamp(3rem,4.2vw,4.35rem);
        line-height: .94;
        letter-spacing: -.06em;
        text-wrap: balance
    }

    .home-redesign-intro > p {
        max-width: 710px;
        margin: 0;
        color: #52656d;
        font-size: clamp(1rem,1.35vw,1.18rem);
        line-height: 1.48
    }

@media(min-width:1450px) {
    .home-redesign-intro h1 {
        white-space: nowrap
    }
}

.home-redesign-search {
    max-width: 760px;
    margin-top: 27px;
    padding: 17px 18px 13px;
    border: 1px solid rgba(174,201,191,.9);
    border-radius: 17px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 9px 26px rgba(25,69,57,.11);
    backdrop-filter: blur(5px)
}

    .home-redesign-search > label {
        display: block;
        margin-bottom: 7px;
        color: #153e35;
        font-size: .84rem;
        font-weight: 900
    }

    .home-redesign-search .search-line {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 9px
    }

    .home-redesign-search .text-input {
        min-height: 54px;
        border-color: #a9c6bc;
        font-size: 1.04rem
    }

    .home-redesign-search .btn {
        min-width: 104px
    }

    .home-redesign-search footer {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 8px;
        color: var(--muted);
        font-size: .69rem
    }

        .home-redesign-search footer a {
            font-weight: 800
        }

.browse-discovery-search .usda-search-attribution {
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: .72rem
}

    .browse-discovery-search .usda-search-attribution a {
        font-weight: 800
    }
.home-redesign-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    padding-left: 3px;
    color: #536861;
    font-size: .73rem
}

.home-redesign-examples button {
        border: 1px solid rgba(178,203,194,.8);
        border-radius: 999px;
        background: rgba(255,255,255,.8);
        appearance: none;
        padding: 5px 9px;
        color: #1c6753;
        font: inherit;
        font-weight: 800;
        cursor: pointer
    }

        .home-redesign-examples button:hover {
            background: #e6f3ed
        }

.home-redesign-scene {
    position: relative;
    align-self: stretch;
    min-height: 300px
}

.desktop-back-button {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: -4px;
    border: 1px solid rgba(165,190,182,.8);
    border-radius: 10px;
    background: rgba(255,255,255,.62);
    color: #45635b;
    font-size: 1rem;
    cursor: pointer
}

    .desktop-back-button:hover:not(:disabled),
    .desktop-back-button:focus-visible {
        border-color: #79a798;
        background: #fff;
        color: var(--accent-dark)
    }

    .desktop-back-button:disabled {
        opacity: .38;
        cursor: default
    }

.panel-header-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(190,209,203,.9);
    border-radius: 9px;
    background: #fff;
    object-fit: contain
}

.diary-menu-title {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 10px
}

.shared-panel-header {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px
}

    .shared-panel-header > span:last-child {
        justify-self: end
    }

.desktop-only-tool-hit {
    display: block;
    width: 100%;
    cursor: help
}

    .desktop-only-tool-hit > .sesqua-tool-rail-item {
        width: 100%
    }

.today-tool-meal.adding {
    max-height: min(70vh,720px);
    overflow: visible
}

    .today-tool-meal.adding > .today-tool-add-panel {
        position: static;
        margin: 8px;
        box-shadow: 0 5px 18px rgba(23,73,60,.12)
    }

    .today-tool-meal.adding .today-tool-entry-list {
        max-height: none;
        overflow: visible
    }

@media(max-width:700px) {
    .diary-menu-title,
    .shared-panel-header {
        grid-template-columns: auto minmax(0,1fr)
    }

    .diary-menu-title > .compact-select-label,
    .shared-panel-header > span:last-child {
        grid-column: 1 / -1;
        justify-self: stretch
    }
}

.home-redesign-moe {
    position: absolute;
    right: -18px;
    bottom: -72px;
    width: min(31vw,390px);
    max-height: 390px;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(29,44,34,.22))
}

.home-redesign-buddy {
    position: absolute;
    left: 0;
    bottom: 24px;
    display: grid;
    place-items: center;
    width: 98px;
    height: 98px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 22px rgba(30,62,53,.17);
    cursor: pointer
}

    .home-redesign-buddy img {
        width: 88px;
        height: 88px;
        object-fit: contain
    }

    .home-redesign-buddy span {
        position: absolute;
        left: -14px;
        top: -16px;
        padding: 5px 8px;
        border: 2px solid #1b6552;
        border-radius: 12px;
        background: #fff;
        color: #175744;
        font-size: .72rem;
        font-weight: 900
    }

    .home-redesign-buddy:hover, .home-redesign-buddy:focus-visible {
        transform: translateY(-2px);
        outline: 3px solid rgba(28,107,90,.2)
    }

.home-redesign-paths {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px
}

.home-redesign-library-link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: -3px;
    color: var(--muted);
    font-size: .82rem
}

.how-sesqua-works {
    scroll-margin-top: 86px
}

    .how-sesqua-works > header h2 {
        margin: 3px 0 7px
    }

    .how-sesqua-works > header p {
        max-width: 900px;
        margin: 0;
        color: var(--muted)
    }

.how-sesqua-steps,
.how-sesqua-platforms {
    display: grid;
    gap: 11px;
    margin-top: 16px
}

.how-sesqua-steps {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

    .how-sesqua-steps article {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        gap: 9px;
        scroll-margin-top: 86px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fbfdfc
    }

        .how-sesqua-steps article > span {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            font-weight: 900
        }

    .how-sesqua-steps p,
    .how-sesqua-platforms p {
        margin: 4px 0 7px;
        color: var(--muted);
        font-size: .78rem;
        line-height: 1.4
    }

    .how-sesqua-steps a {
        color: var(--accent-dark);
        font-size: .74rem;
        font-weight: 800;
        text-decoration: none
    }

.how-sesqua-platforms {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

    .how-sesqua-platforms article {
        padding: 12px;
        border-radius: 12px;
        background: var(--surface-2)
    }

.how-sesqua-sync-note {
    margin: 10px 0 0;
    color: #516a63;
    font-size: .76rem;
    font-weight: 750
}

@media(max-width:900px) {
    .how-sesqua-steps {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:650px) {
    .how-sesqua-steps,
    .how-sesqua-platforms {
        grid-template-columns: 1fr
    }
}

    .home-redesign-library-link a {
        color: #176a54;
        font-weight: 800;
        text-decoration: none
    }

        .home-redesign-library-link a:hover {
            text-decoration: underline
        }

    .home-redesign-paths > a {
        display: grid;
        grid-template-columns: auto minmax(0,1fr) auto;
        align-items: center;
        gap: 13px;
        padding: 18px;
        border: 1px solid rgba(209,222,218,.9);
        border-radius: 16px;
        background: rgba(255,255,255,.84);
        color: var(--text);
        box-shadow: 0 5px 18px rgba(30,58,50,.055);
        text-decoration: none;
        backdrop-filter: blur(4px)
    }

        .home-redesign-paths > a:hover {
            border-color: #8db8aa;
            background: rgba(244,251,247,.94);
            transform: translateY(-1px)
        }

    .home-redesign-paths strong, .home-redesign-paths small {
        display: block
    }

    .home-redesign-paths strong {
        font-size: 1rem;
        color: #155b48
    }

    .home-redesign-paths small {
        margin-top: 3px;
        color: var(--muted);
        font-size: .78rem
    }

    .home-redesign-paths b {
        color: #176a54;
        font-size: 1.25rem
    }

.home-path-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    font-size: 1.4rem
}

    .home-path-icon.build {
        background: #fff0e0
    }

    .home-path-icon.track {
        background: #e9f1ff
    }

    .home-path-icon.browse {
        background: #e5f4ed
    }

.home-redesign-tip {
    border: 1px solid rgba(205,220,215,.86);
    border-radius: 14px;
    background: rgba(255,255,255,.76);
    backdrop-filter: blur(4px)
}

    .home-redesign-tip summary {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        padding: 11px 15px;
        cursor: pointer;
        color: #294d44;
        font-size: .78rem
    }

        .home-redesign-tip summary b {
            color: #17634d
        }

    .home-redesign-tip p {
        margin: 0;
        padding: 0 15px 13px;
        color: var(--muted);
        font-size: .76rem
    }

.home-redesign-trust {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 3px 5px 8px;
    color: #3d5b53;
    font-size: .75rem
}

    .home-redesign-trust i {
        padding: 0 5px;
        color: #89a39b;
        font-style: normal
    }

    .home-redesign-trust a {
        font-weight: 800;
        white-space: nowrap
    }

@media(max-width:1000px) {
    .home-redesign-hero {
        grid-template-columns: minmax(0,1fr) 230px;
        min-height: 400px;
        padding: 34px
    }

    .home-redesign-moe {
        right: -55px;
        width: 330px
    }

    .home-redesign-buddy {
        left: -5px;
        width: 84px;
        height: 84px
    }

        .home-redesign-buddy img {
            width: 75px;
            height: 75px
        }
}

@media(max-width:760px) {
    .app-shell.sesqua-woods .page-wrap:has(.home-redesign) {
        width: calc(100% - 14px);
        margin-top: 8px
    }

    .home-redesign {
        gap: 14px
    }

    .home-redesign-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 27px 20px;
        background-position: 62% center
    }

    .home-redesign-intro h1 {
        font-size: clamp(2.7rem,11vw,4rem)
    }

    .home-redesign-scene {
        display: none
    }

    .home-redesign-paths {
        grid-template-columns: 1fr
    }

    .home-redesign-library-link {
        justify-content: flex-start;
        flex-wrap: wrap
    }

    .home-redesign-search {
        margin-top: 20px
    }

    .home-redesign-trust {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }
}

/* Coordinated QA cleanup: one stable Woods layer plus two independent popup slots. */
.app-shell.sesqua-woods.scene-home.home-bg-lake {
    background-image: linear-gradient(180deg,rgba(243,248,245,.18),rgba(236,244,239,.24)),url('../images/woods/sesqua-woods-lake-qa.jpg')
}

.app-shell.sesqua-woods.scene-home.home-bg-trail {
    background-image: linear-gradient(180deg,rgba(241,246,242,.16),rgba(230,239,233,.26)),url('../images/woods/sesqua-woods-trail-qa.jpg');
    background-position: center 42%
}

.app-shell.sesqua-woods.scene-home.home-bg-creek {
    background-image: linear-gradient(180deg,rgba(242,247,244,.17),rgba(231,239,234,.27)),url('../images/woods/sesqua-woods-creek-qa.jpg');
    background-position: center 48%
}

.home-redesign-hero {
    background: linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.82) 52%,rgba(255,255,255,.32)) !important
}

.home-redesign-moe {
    right: -8px !important;
    bottom: -28px !important;
    width: min(26vw,330px) !important;
    max-width: 100%;
    max-height: 370px !important
}

.sesqua-tool-layer.workspace-1 {
    z-index: 1701
}

.sesqua-tool-layer.workspace-2 {
    z-index: 1702
}

.sesqua-tool-layer.active {
    z-index: 1800
}

.sesqua-tool-window.workspace-1 {
    right: 92px
}

.sesqua-tool-window.workspace-2 {
    right: 132px;
    top: 126px
}

/* Aug 29 shared popup shell: one stable chrome with one scroll owner. */
.sesqua-tool-window {
    width: min(680px,calc(100vw - 32px));
    height: min(760px,calc(100vh - 48px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px)
}

.sesqua-tool-titlebar, .sesqua-tool-context, .sesqua-tool-actions {
    flex: 0 0 auto
}

.sesqua-tool-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain
}

.sesqua-tool-body .my-menu-popup-list {
    max-height: none;
    overflow: visible
}

.topbar:has(.app-menu-wrap.open), .topbar:has(.sesqua-pantry-footprint[aria-expanded*="true"]) {
    z-index: 2100
}

@media(max-width:700px) {
    .sesqua-tool-window,
    .sesqua-tool-window.workspace-1,
    .sesqua-tool-window.workspace-2 {
        inset: 6px !important;
        width: auto !important;
        height: auto !important;
        max-width: none;
        max-height: none;
        resize: none;
        border-radius: 14px
    }

    .sesqua-tool-titlebar { padding: 10px 12px }
    .sesqua-tool-context { padding: 6px 12px }
    .sesqua-tool-body { padding: 12px }
    .sesqua-tool-actions { padding: 9px 12px }
}

.popup-launch-message {
    position: fixed;
    z-index: 1900;
    left: 50%;
    top: 76px;
    transform: translateX(-50%);
    max-width: min(620px,calc(100vw - 30px));
    padding: 11px 15px;
    border: 1px solid #b67c28;
    border-radius: 11px;
    background: #fff6df;
    color: #684512;
    box-shadow: var(--shadow);
    font-weight: 750
}

.my-menu-tool {
    display: grid;
    gap: 10px
}

.tool-purpose-note {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2)
}

    .tool-purpose-note strong {
        color: var(--accent-dark)
    }

    .tool-purpose-note span {
        color: var(--muted);
        font-size: .78rem;
        line-height: 1.35
    }

.my-menu-popup-list {
    max-height: 52vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 11px
}

.my-menu-popup-row {
    display: flex;
    width: 100%;
    text-align: left;
    color: inherit;
    background: #fff;
    font: inherit;
    cursor: pointer;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line)
}

    .my-menu-popup-row:hover, .my-menu-popup-row:focus-visible {
        background: var(--surface-2)
    }

    .my-menu-popup-row:last-child {
        border-bottom: 0
    }

    .my-menu-popup-row span > * {
        display: block
    }

    .my-menu-popup-row small {
        color: var(--accent-dark);
        font-weight: 800
    }

    .my-menu-popup-row em {
        color: var(--muted);
        font-size: .78rem;
        font-style: normal
    }

    .my-menu-popup-row b {
        align-self: center;
        padding: 3px 6px;
        border-radius: 7px;
        background: var(--surface-2);
        font-size: .67rem
    }

.sesqua-tool-window:has(.my-menu-tool) {
    width: min(620px,calc(100vw - 40px))
}

@media(max-width:700px) {
    .sesqua-tool-layer.workspace-1:has(~ .sesqua-tool-layer.workspace-2:not([hidden])) {
        display: none
    }

    .sesqua-tool-window.workspace-2 {
        inset: auto 8px 8px 8px
    }

    .popup-launch-message {
        top: 68px
    }
}

@media(max-width:480px) {
    .home-redesign-hero {
        padding: 23px 14px;
        border-radius: 19px
    }

    .home-redesign-intro h1 {
        font-size: clamp(2.45rem,12vw,3.3rem)
    }

    .home-redesign-search {
        padding: 13px
    }

        .home-redesign-search .search-line {
            grid-template-columns: 1fr
        }

        .home-redesign-search .btn {
            width: 100%
        }

        .home-redesign-search footer {
            align-items: flex-start;
            flex-direction: column;
            gap: 3px
        }

    .home-redesign-paths > a {
        padding: 15px
    }

    .home-redesign-trust span {
        line-height: 1.7
    }

    .home-redesign-trust i {
        padding: 0 2px
    }
}

/* Browse/Search discovery + workspace */
.browse-page {
    min-width: 0
}

    .browse-page .search-line {
        margin: 0
    }

    .browse-page .search-history-menu {
        z-index: 12
    }

.browse-discovery {
    position: relative;
    min-height: 390px;
    padding: clamp(28px,5vw,72px);
    overflow: visible;
    background: linear-gradient(100deg,rgba(255,255,255,.97),rgba(255,255,255,.9) 58%,rgba(238,248,244,.78));
    border-color: rgba(169,194,185,.82);
    box-shadow: 0 18px 50px rgba(22,53,43,.14)
}

.browse-discovery-copy {
    max-width: 820px
}

    .browse-discovery-copy h1 {
        margin: 8px 0;
        font-size: clamp(2.35rem,5vw,4.7rem);
        line-height: .98
    }

    .browse-discovery-copy p {
        margin: 0;
        color: var(--muted);
        font-size: clamp(1rem,1.5vw,1.25rem)
    }

.browse-about-link {
    position: absolute;
    right: clamp(24px,4vw,58px);
    top: clamp(28px,4vw,54px);
    color: var(--accent-dark);
    font-weight: 800;
    text-decoration: none
}

.browse-discovery-search {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    align-items: start;
    margin-top: clamp(28px,4vw,52px);
    max-width: 1180px
}

    .browse-discovery-search .search-line {
        grid-template-columns: minmax(0,1fr) auto
    }

    .browse-discovery-search .text-input {
        min-height: 56px;
        font-size: 1.06rem
    }

.browse-common-foods {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(169,194,185,.65)
}

    .browse-common-foods > strong {
        display: block;
        margin-bottom: 10px
    }

.browse-food-chips {
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

.browse-food-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #c8d8d3;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    padding: 9px 13px;
    color: var(--text);
    font-weight: 750;
    cursor: pointer
}

    .browse-food-chip:hover, .browse-food-chip:focus-visible {
        border-color: var(--accent);
        background: var(--accent-soft)
    }

.browse-workspace-toolbar {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(255,255,255,.97)
}

.browse-workspace-search {
    display: block
}

    .browse-workspace-search .search-line {
        grid-template-columns: minmax(220px,1fr) auto auto
    }

.browse-filter-button {
    display: flex;
    align-items: center;
    gap: 7px
}

    .browse-filter-button.active {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--accent-dark)
    }

.filter-count {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: .75rem
}

.browse-workspace-status {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 9px;
    color: var(--muted);
    font-size: .86rem
}

    .browse-workspace-status a {
        color: var(--accent-dark);
        font-weight: 750
    }

.active-filter-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 9px
}

    .active-filter-chips button {
        border: 1px solid #a8c9bd;
        border-radius: 999px;
        background: var(--accent-soft);
        padding: 6px 10px;
        color: var(--accent-dark);
        font-weight: 750;
        cursor: pointer
    }

.browse-filter-panel {
    display: grid;
    grid-template-columns: minmax(180px,1fr) minmax(180px,1.4fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 0;
    padding: 12px;
    border: 1px solid #b9cdc7;
    border-radius: 12px;
    background: var(--surface-2)
}

    .browse-filter-panel label > span {
        display: block;
        margin-bottom: 5px;
        color: var(--muted);
        font-size: .78rem;
        font-weight: 800
    }

    .browse-filter-panel .select-input {
        width: 100%
    }

.browse-message {
    margin-top: 10px
}

/* SIZE 1 — WIDE DESKTOP: default side-by-side Results and Viewer layout. */
.browse-workspace-main {
    align-items: start
}

html.sesqua-split-dragging {
    cursor: col-resize;
    user-select: none
}

/* Shared SesquaListPanel geometry now lives beside the component. */

.browse-results-pane, .browse-detail-pane {
    min-width: 0;
    border: 2px solid #b8c9cd;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 9px 26px rgba(31,55,62,.09)
}

.browse-results-pane {
    padding: 0;
    overflow: hidden
}

.browse-detail-pane {
    padding: 18px
}

.browse-results-head {
    padding: 12px 14px 0
}

.browse-results-pane .sesqua-list-panel-toolbar {
    min-height: 73px;
    padding-top: 9px;
    padding-bottom: 12px
}

.browse-results-pane .sesqua-list-panel-status {
    padding-bottom: 9px
}

.browse-results-body {
    border-top: 1px solid var(--line)
}

.browse-sort-tools {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: .8rem
}

    .browse-sort-tools label {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--muted)
    }

.browse-result-list {
    max-height: calc(100vh - 285px);
    min-height: 340px;
    overflow-y: auto;
    scrollbar-gutter: stable
}

.browse-result-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
    padding: 11px 12px;
    text-align: left;
    color: var(--text);
    cursor: pointer
}

    .browse-result-row:hover {
        background: #f4faf7
    }

    .browse-result-row.selected {
        background: #def2e9;
        box-shadow: inset 5px 0 0 var(--accent)
    }

.browse-result-selection {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 1px solid #c4d4cf;
    border-radius: 50%;
    color: white;
    font-size: .76rem
}

.browse-result-row.selected .browse-result-selection {
    background: var(--accent);
    border-color: var(--accent)
}

.browse-result-main {
    min-width: 0;
    flex: 1
}

    .browse-result-main strong, .browse-result-main small {
        display: block
    }

    .browse-result-main strong {
        line-height: 1.25
    }

    .browse-result-main small {
        margin-top: 4px;
        color: var(--muted);
        font-size: .72rem
    }

.browse-result-value {
    flex: 0 1 100px;
    text-align: right
}

    .browse-result-value small, .browse-result-value strong {
        display: block
    }

    .browse-result-value small {
        color: var(--muted);
        font-size: .68rem;
        text-transform: uppercase
    }

    .browse-result-value strong {
        font-size: .8rem;
        line-height: 1.2
    }

.browse-detail-empty {
    display: grid;
    place-items: center;
    min-height: 360px;
    color: var(--muted);
    text-align: center
}

.browse-source-details {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2)
}

    .browse-source-details summary {
        padding: 11px 13px;
        cursor: pointer;
        font-weight: 800;
        color: #34564b
    }

    .browse-source-details > div {
        padding: 0 13px 12px;
        color: var(--muted);
        font-size: .84rem
    }

    .browse-source-details p {
        margin: 7px 0
    }

@media(min-width:1500px) {
    .page-wrap:has(.browse-page.workspace-mode) {
        width: min(calc(100% - 28px),1900px)
    }
}

/* SIZE 2 — COMPACT DESKTOP: optional Results columns yield first. */
@media(max-width:1200px) {
    .browse-result-value.optional {
        display: none
    }
}

/* SIZE 3 — STACKED / TABLET: Results and Viewer become a vertical flow. */
@media(max-width:980px) {
    .browse-result-list {
        max-height: 500px;
        min-height: 280px
    }

    .browse-detail-empty {
        min-height: 180px
    }
}

/* SIZE 4 — PHONE: full-width controls and touch-friendly stacking. */
@media(max-width:700px) {
    .browse-discovery {
        min-height: 0;
        padding: 24px 16px
    }

    .browse-about-link {
        position: static;
        display: inline-block;
        margin-top: 12px
    }

    .browse-discovery-search, .browse-workspace-search {
        grid-template-columns: 1fr
    }

        .browse-discovery-search .search-line, .browse-workspace-search .search-line {
            grid-template-columns: 1fr
        }

        .browse-discovery-search .btn, .browse-workspace-search .btn {
            width: 100%
        }

    .browse-workspace-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

    .browse-filter-panel {
        grid-template-columns: 1fr
    }

    .browse-sort-tools > span {
        width: 100%
    }

    .browse-result-list {
        max-height: none
    }

    .browse-result-row {
        align-items: flex-start
    }

    .browse-result-value {
        flex-basis: 76px
    }

        .browse-result-value.optional {
            display: none
        }

    .browse-detail-pane {
        padding: 12px
    }
}

/* Diary responsive contract — viewport-width driven, intentionally last. */
.app-shell.sesqua-woods .page-wrap:has(.diary-single-header) {
    width: min(calc(100% - 32px),2400px);
    max-width: none;
}

.diary-order-layout.diary-workbench-layout {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px;
    align-items: stretch;
}

.diary-order-layout .diary-workbench-panel {
    height: clamp(560px,calc(100dvh - 198px),780px);
    min-height: 560px;
    min-width: 0;
}

.diary-order-layout .diary-workbench-scroll {
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

@media(max-width:1080px) {
    .app-shell.sesqua-woods .page-wrap:has(.diary-single-header) {
        width: calc(100% - 20px)
    }

    .diary-order-layout.diary-workbench-layout {
        grid-template-columns: minmax(0,1fr)
    }

    .diary-order-layout .diary-workbench-panel {
        height: 560px;
        min-height: 520px
    }

    .diary-order-layout .diary-menu-panel {
        position: static
    }
}

@media(max-width:640px) {
    .app-shell.sesqua-woods .page-wrap:has(.diary-single-header) {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 8px
    }

    .diary-unified-header {
        padding: 13px
    }

    .diary-order-layout.diary-workbench-layout {
        gap: 14px
    }

    .diary-order-layout .diary-workbench-panel {
        height: auto;
        min-height: 0;
        width: 100%;
        max-width: 100%
    }

    .diary-order-layout .diary-workbench-scroll {
        max-height: 430px
    }

    .diary-header-actions, .diary-context-controls {
        min-width: 0;
        max-width: 100%
    }

    .diary-add-bar, .diary-add-bar-top, .diary-add-bar-clean {
        grid-template-columns: minmax(0,1fr) !important
    }

        .diary-add-bar .btn, .diary-add-bar-top .btn {
            grid-column: auto !important;
            width: 100%
        }

    .diary-menu-choice, .diary-entry-row {
        min-width: 0
    }
}

/* QA checkpoint: restrained header tool pantry, canonical meals, and content-first pages. */
.home-redesign-intro h1 {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: none
}

.sesqua-tool-pantry-control {
    position: relative;
    z-index: 61;
    flex: 0 0 auto;
    margin-left: auto
}

.sesqua-pantry-footprint {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
    padding: 5px 9px;
    border: 1px solid #76aa98;
    border-radius: 11px;
    background: #edf7f3;
    color: #155b48;
    cursor: pointer
}

    .sesqua-pantry-footprint > span {
        display: block;
        font-size: 1.08rem;
        line-height: 1;
        transform: rotate(-35deg)
    }

    .sesqua-pantry-footprint.open > span {
        transform: rotate(145deg)
    }

    .sesqua-pantry-footprint small {
        font-size: .68rem;
        font-weight: 850
    }

    .sesqua-pantry-footprint:hover, .sesqua-pantry-footprint:focus-visible {
        background: #dff0e9;
        outline: 2px solid rgba(28,107,90,.16)
    }

.sesqua-tool-pantry-control > .sesqua-tool-rail {
    position: fixed;
    z-index: 1750;
    right: 14px;
    top: 74px;
    bottom: auto;
    transform: none;
    width: 62px;
    height: min(760px,calc(100vh - 92px));
    max-height: calc(100vh - 92px);
    padding: 7px;
    border: 1px solid #b8cbc5;
    border-radius: 18px;
    overflow: hidden;
    transition: width .18s ease, box-shadow .18s ease
}

    .sesqua-tool-pantry-control > .sesqua-tool-rail:hover,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:focus-within {
        width: 260px;
        box-shadow: 0 12px 34px rgba(18,45,38,.24)
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-list {
        padding: 0;
        scrollbar-gutter: auto
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-section {
        padding: 3px 0
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-section + .sesqua-tool-rail-section {
        margin-top: 2px;
        padding-top: 5px
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-section > small:first-child,
    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-label,
    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-shortcut,
    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-status {
        display: none
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail:hover .sesqua-tool-rail-section > small:first-child,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:focus-within .sesqua-tool-rail-section > small:first-child,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:hover .sesqua-tool-rail-label,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:focus-within .sesqua-tool-rail-label,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:hover .sesqua-tool-rail-shortcut,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:focus-within .sesqua-tool-rail-shortcut,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:hover .sesqua-tool-rail-status,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:focus-within .sesqua-tool-rail-status {
        display: block
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-row {
        display: flex;
        min-width: 0
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail .sesqua-tool-rail-item {
        flex: 1 1 auto;
        min-width: 0;
        padding: 5px
    }

    .sesqua-tool-pantry-control > .sesqua-tool-rail:hover .sesqua-tool-rail-item,
    .sesqua-tool-pantry-control > .sesqua-tool-rail:focus-within .sesqua-tool-rail-item {
        padding: 5px 7px
    }

.diary-ticket-legacy {
    display: none !important
}

.diary-canonical-today {
    padding: 0 !important
}

    .diary-canonical-today > .today-meals-tool {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0
    }

.today-tool-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
    background: #f2f7f5
}

    .today-tool-identity img {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        object-fit: contain;
        background: #fff
    }

    .today-tool-identity strong, .today-tool-identity small {
        display: block
    }

    .today-tool-identity strong {
        font-size: 1rem
    }

    .today-tool-identity small {
        margin-top: 2px;
        color: var(--muted);
        font-size: .72rem
    }

.today-meals-tool.embedded .today-tool-summary {
    display: none
}

.today-meals-tool.embedded .today-tool-meals {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px
}

.today-tool-daily-totals {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: #f5f9f7
}

    .today-tool-daily-totals > strong {
        display: block;
        margin-bottom: 7px;
        color: #224b40;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .05em
    }

    .today-tool-daily-totals > div {
        display: grid;
        grid-template-columns: repeat(6,minmax(0,1fr));
        gap: 6px
    }

    .today-tool-daily-totals span {
        display: flex;
        flex-direction: column;
        padding: 6px 7px;
        border-radius: 8px;
        background: #fff;
        color: var(--muted);
        font-size: .66rem
    }

    .today-tool-daily-totals b {
        margin-top: 2px;
        color: var(--text);
        font-size: .78rem
    }

.diary-add-bar-top {
    grid-template-columns: minmax(125px,1.4fr) minmax(92px,.75fr) minmax(86px,.65fr) minmax(105px,.72fr) auto !important
}

.diary-main-add {
    min-width: 150px;
    align-self: end
}

/* Half-screen and compact Diary: the late desktop grid above intentionally
   wins on wide layouts, so its compact replacement must live beside it. */
@media(max-width:760px) {
    .diary-menu-title.diary-list-head {
        height: auto;
        min-height: 0
    }

    .diary-add-bar-top {
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
        align-items: end
    }

    .diary-add-bar-top .diary-selected-summary {
        grid-column: 1 / -1
    }

    .diary-add-bar-top .diary-main-add {
        grid-column: auto !important;
        width: 100%;
        min-width: 0
    }
}

@media(max-width:460px) {
    .diary-add-bar-top {
        grid-template-columns: minmax(0,1fr) !important
    }
}

.diary-purpose {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .74rem
}

.diary-plan-note {
    margin: -2px 12px 9px;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35
}

.today-tool-entry-name {
    max-width: 100%;
    overflow: hidden;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer
}

    .today-tool-entry-name:hover,
    .today-tool-entry-name:focus-visible {
        color: var(--accent-dark);
        text-decoration: underline
    }

.library-compact-summary {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 12px 15px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--muted);
    font-size: .78rem
}

    .library-compact-summary strong {
        color: #34564b
    }

.builder-work-header {
    min-height: 62px;
    align-items: center;
    margin: -4px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line)
}

    .builder-work-header .eyebrow {
        font-size: .66rem
    }

    .builder-work-header h2 {
        font-size: 1.2rem
    }

.compact-tabs {
    flex-wrap: nowrap
}
/* General desktop two-window placement; restored/manual positions still take over after dragging. */
@media(min-width:1100px) {
    .app-shell:has(.sesqua-tool-layer.workspace-1:not([hidden])):has(.sesqua-tool-layer.workspace-2:not([hidden])) .sesqua-tool-window {
        top: 96px;
        bottom: auto;
        width: min(680px,calc(50vw - 42px));
        max-height: calc(100vh - 122px)
    }

        .app-shell:has(.sesqua-tool-layer.workspace-1:not([hidden])):has(.sesqua-tool-layer.workspace-2:not([hidden])) .sesqua-tool-window.workspace-1 {
            left: auto;
            right: calc(50% + 10px)
        }

        .app-shell:has(.sesqua-tool-layer.workspace-1:not([hidden])):has(.sesqua-tool-layer.workspace-2:not([hidden])) .sesqua-tool-window.workspace-2 {
            left: calc(50% + 10px);
            right: auto
        }
}

@media(max-width:760px) {
    .sesqua-pantry-footprint small {
        display: none
    }

    .sesqua-tool-pantry-control {
        margin-left: auto
    }

        .sesqua-tool-pantry-control > .sesqua-tool-rail {
            top: 66px;
            right: 8px;
            width: 58px;
            height: min(70vh,540px)
        }

        .sesqua-tool-pantry-control > .sesqua-tool-rail:hover,
        .sesqua-tool-pantry-control > .sesqua-tool-rail:focus-within {
            width: min(260px,calc(100vw - 16px))
        }

    .today-tool-daily-totals > div {
        grid-template-columns: repeat(3,1fr)
    }
}

/* Focused Nutrition/feedback QA cleanup. */
.discovery-food-toggle {
    display: none !important
}

.browse-food-chip:disabled {
    opacity: .62;
    cursor: wait
}

.sesqua-loading {
    position: relative;
    display: grid;
    gap: 5px;
    margin: 8px 0;
    color: #315c50;
    font-size: .76rem;
    font-weight: 750;
    opacity: 0;
    animation: sesqua-loading-reveal .01s linear .3s forwards
}

    .sesqua-loading.compact {
        margin: 5px 0
    }

.sesqua-loading-track {
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: #dce9e4
}

    .sesqua-loading-track i {
        display: block;
        width: 38%;
        height: 100%;
        border-radius: inherit;
        background: var(--accent);
        animation: sesqua-loading-slide 1.05s ease-in-out infinite
    }

@keyframes sesqua-loading-reveal {
    to {
        opacity: 1
    }
}

@keyframes sesqua-loading-slide {
    0% {
        transform: translateX(-110%)
    }

    100% {
        transform: translateX(365%)
    }
}

.browse-workspace-main, .browse-results-pane, .browse-detail-pane, .nutrition-viewer, .food-detail-grid, .analysis-panel {
    min-width: 0
}

    .browse-detail-pane .food-detail-grid:not(.sesqua-split-pane) {
        width: 100%;
        grid-template-columns: minmax(270px,340px) minmax(300px,1fr)
    }

    .analysis-panel .table-wrap, .analysis-panel .raw-json {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box
    }

    .analysis-panel .table-wrap {
        overflow-x: auto
    }

    .analysis-panel .raw-json {
        overflow: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere
    }

.nutrition-viewer-description {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: .76rem
}

.nutrition-viewer-attribution {
    color: #55776d;
    text-decoration: none
}

    .nutrition-viewer-attribution:hover {
        text-decoration: underline
    }

.sesqua-tool-window {
    resize: both;
    min-width: 360px;
    min-height: 340px
}

    .sesqua-tool-window:has(.nutrition-viewer) {
        width: min(1040px,calc(100vw - 64px));
        height: min(780px,calc(100vh - 112px));
        max-height: calc(100vh - 96px)
    }

        .sesqua-tool-window:has(.nutrition-viewer) .sesqua-tool-titlebar {
            padding: 9px 12px
        }

            .sesqua-tool-window:has(.nutrition-viewer) .sesqua-tool-titlebar small {
                display: none
            }

        .sesqua-tool-window:has(.nutrition-viewer) .sesqua-tool-body {
            padding: 10px 12px
        }

        .sesqua-tool-window:has(.nutrition-viewer) .nutrition-viewer-head {
            padding-bottom: 7px;
            margin-bottom: 7px
        }

        .sesqua-tool-window:has(.nutrition-viewer) .nutrition-viewer-search .text-input {
            min-height: 36px;
            padding: 7px 9px
        }

        .sesqua-tool-window:has(.nutrition-viewer) .nutrition-label {
            width: 290px;
            max-width: 290px;
            font-size: .9em
        }

        .sesqua-tool-window:has(.nutrition-viewer) .sesqua-tool-actions {
            padding: 8px 12px
        }

.meet-crew-tool header p {
    margin: 3px 0 12px;
    color: var(--muted)
}

.crew-list {
    display: grid;
    gap: 8px
}

    .crew-list article {
        display: grid;
        grid-template-columns: 58px minmax(0,1fr);
        align-items: center;
        gap: 11px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fbfdfc
    }

    .crew-list img {
        width: 58px;
        height: 58px;
        border-radius: 11px;
        object-fit: contain;
        background: #eef5f2
    }

    .crew-list p {
        margin: 3px 0 6px;
        color: var(--muted);
        font-size: .78rem;
        line-height: 1.35
    }

    .crew-list .mini-btn {
        display: inline-block;
        font-size: .72rem
    }
.sesqua-pantry-footprint.discovering::before {
    content: "👣   👣   👣";
    position: fixed;
    z-index: 1800;
    right: 70px;
    top: 24px;
    white-space: nowrap;
    pointer-events: none;
    color: var(--accent);
    animation: sesqua-footsteps 1.35s ease-out both
}

@keyframes sesqua-footsteps {
    from {
        opacity: 0;
        transform: translateX(-180px) rotate(-18deg)
    }

    30% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateX(0) rotate(6deg)
    }
}

.library-preview > .section-title::before,
.diary-menu-title::before { display: none }

.today-tool-identity::before {
    content: "";
    display: none
}

.builder-work-header::before {
    content: "🍽️";
    font-size: 1.15rem
}

.editor-main-card > .section-title::before {
    content: "📝";
    font-size: 1.1rem
}

.recipe-attribution {
    color: #496b61 !important
}

    .recipe-attribution a {
        font-weight: 900
    }

@media(max-width:840px) {
    .browse-detail-pane .food-detail-grid:not(.sesqua-split-pane) {
        grid-template-columns: 1fr
    }

    .sesqua-tool-window:has(.nutrition-viewer) .nutrition-label {
        width: min(290px,100%)
    }
}

@media(max-width:700px) {
    .sesqua-tool-window {
        resize: none;
        min-width: 0
    }

        .sesqua-tool-window:has(.nutrition-viewer) {
            width: auto;
            height: auto;
            max-height: 82vh
        }

            .sesqua-tool-window:has(.nutrition-viewer) .nutrition-label {
                width: 100%;
                max-width: 320px
            }
}

@media(prefers-reduced-motion:reduce) {
    .sesqua-loading, .sesqua-loading-track i, .sesqua-pantry-footprint.discovering::before {
        animation: none !important
    }

    .sesqua-loading {
        opacity: 1
    }

    .sesqua-pantry-footprint.discovering::before {
        display: none
    }
}
@media print {
    @page { margin: .55in }

    body.sesqua-printing {
        background: #fff !important
    }

    body.sesqua-printing * {
        visibility: hidden !important
    }

    body.sesqua-printing .sesqua-print-target,
    body.sesqua-printing .sesqua-print-target * {
        visibility: visible !important
    }

    body.sesqua-printing .sesqua-print-target {
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #111 !important
    }

    body.sesqua-printing .print-hide,
    body.sesqua-printing .nutrition-viewer-actions,
    body.sesqua-printing .nutrition-viewer-search,
    body.sesqua-printing .nutrition-viewer-results,
    body.sesqua-printing .nutrition-viewer-help {
        display: none !important
    }

    body.sesqua-printing .print-only {
        display: block !important
    }

    body.sesqua-printing .recipe-print-heading {
        margin-bottom: 8px;
        color: #315c50 !important;
        font-size: .8rem;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase
    }

    body.sesqua-printing .library-row {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) 230px !important;
        gap: 24px !important
    }

    body.sesqua-printing .library-row-summary {
        padding-left: 18px !important;
        border-top: 0 !important;
        border-left: 1px solid #bbb !important
    }

    body.sesqua-printing .library-recipe-title > strong {
        font-size: 1.65rem !important
    }

    body.sesqua-printing .recipe-print-ingredients {
        width: 100%;
        margin-top: 20px
    }

    body.sesqua-printing .recipe-print-ingredients h2 {
        margin: 0 0 8px;
        font-size: 1rem
    }

    body.sesqua-printing .recipe-print-ingredients ul {
        margin: 0;
        padding: 0;
        list-style: none
    }

    body.sesqua-printing .recipe-print-ingredients li {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 6px 0;
        border-bottom: 1px solid #ddd
    }

    body.sesqua-printing .recipe-print-notes {
        margin-top: 18px
    }

    body.sesqua-printing .nutrition-viewer {
        font-size: 10.5pt
    }

    body.sesqua-printing .nutrition-viewer-head {
        padding-bottom: 8px;
        border-bottom: 1px solid #bbb
    }

    body.sesqua-printing .nutrition-viewer-proof {
        break-inside: avoid
    }
}

/* Shared temporary side drawer; navigation is its first consumer. */
body.sesqua-drawer-open { overflow:hidden }
.navigation-drawer-content { display:grid;gap:20px }
.navigation-drawer-search { display:grid;gap:6px }
.navigation-drawer-search > span { color:#36584f;font-size:.76rem;font-weight:850 }
.navigation-drawer-search > div { position:relative }
.navigation-drawer-search > div > span { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.1rem;pointer-events:none }
.navigation-drawer-search .text-input { width:100%;padding-left:38px }
.navigation-drawer-group { display:grid;gap:7px }
.navigation-drawer-group h2 { margin:0;padding:0 5px;color:#60766f;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase }
.navigation-drawer-group nav { display:grid;gap:5px }
.navigation-drawer-group a { display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;min-height:58px;padding:8px 10px;border:1px solid transparent;border-radius:12px;color:var(--text);text-decoration:none }
.navigation-drawer-group a:hover,.navigation-drawer-group a:focus-visible { border-color:#bad0c8;background:#f3f8f6;outline:none }
.navigation-drawer-group a.active { border-color:#98c1b4;background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent) }
.navigation-drawer-icon { display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#eef5f2;font-size:1.18rem }
.navigation-drawer-group a > span:last-child { display:grid;gap:1px;min-width:0 }
.navigation-drawer-group a strong { font-size:.92rem }
.navigation-drawer-group a small { color:var(--muted);font-size:.72rem;line-height:1.3 }
.navigation-drawer-empty { display:grid;gap:3px;padding:18px;border:1px dashed #b8c9c3;border-radius:12px;background:var(--surface-2);text-align:center }
.navigation-drawer-empty span { color:var(--muted);font-size:.78rem }
@media(max-width:560px){.navigation-drawer-group a{min-height:55px}}

/* Keep final sizing/print overrides after the historical QA layers above. */
.sesqua-tool-window:has(.today-meals-tool) .sesqua-tool-body,
.sesqua-tool-window:has(.today-meals-tool) .today-meals-tool { min-height:0 }
.sesqua-tool-window:has(.today-meals-tool) .today-tool-identity { min-height:0;padding:7px 12px }

/* Final cleanup: popup ergonomics, visible add feedback, and overflow containment. */
.sesqua-tool-window { resize:both;overflow:hidden }
.sesqua-tool-window,.sesqua-tool-body,.today-meals-tool,.today-tool-meals,.today-tool-meal,.today-tool-add-panel { min-width:0;max-width:100% }
.sesqua-tool-window:has(.today-meals-tool) { height:min(820px,calc(100vh - 24px));max-height:calc(100vh - 16px) }
.sesqua-tool-window:has(.today-meals-tool) .sesqua-tool-body { overflow-x:hidden;padding:10px 12px }
.today-tool-add-panel { scroll-margin:18px;outline:none;box-shadow:0 0 0 3px rgba(35,125,99,.16) }
.today-tool-add-panel:focus { box-shadow:0 0 0 4px rgba(35,125,99,.28) }
.today-tool-add-grid { grid-template-columns:minmax(0,2fr) minmax(100px,1fr) minmax(78px,.65fr) minmax(100px,.8fr) }
.today-tool-add-grid label,.today-tool-add-grid input,.today-tool-add-grid select { min-width:0;max-width:100% }
.today-tool-add-actions { position:sticky;bottom:-10px;z-index:2;margin:8px -12px -10px;padding:9px 12px;background:var(--surface);border-top:1px solid var(--line) }
.diary-selected-summary { transition:box-shadow .18s,background .18s;outline:none }
.diary-selected-summary:focus { background:#e9f6f0;box-shadow:0 0 0 4px rgba(35,125,99,.24) }
.home-redesign-examples { display:grid;grid-template-columns:auto repeat(2,minmax(74px,110px));justify-content:start;align-items:center }
.home-redesign-examples > span { grid-row:1 / span 2 }
.diary-menu-choice-main { position:relative }
.diary-choice-check { display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:2px solid #9cb7ae;border-radius:6px;background:var(--surface);color:transparent;font-size:.78rem;font-weight:950 }
.diary-menu-choice-row.selected .diary-choice-check { border-color:var(--accent);background:var(--accent);color:var(--paint-on-accent) }
.diary-menu-choice-row.selected { box-shadow:inset 4px 0 0 var(--accent) }
.today-tool-selected-choice { display:block;margin-top:4px;color:var(--accent-dark);font-size:.72rem }
.today-tool-meal.active-destination { border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent),0 0 0 2px rgba(35,125,99,.1) }
.today-tool-meal.active-destination > header::after { content:"Selected meal";margin-left:auto;color:var(--accent-dark);font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em }
.sesqua-tool-titlebar > .icon-btn { border:1px solid #789b90;background:var(--surface);color:#173f35;font-size:1.15rem;font-weight:950 }
.home-redesign-paths b { min-width:58px;padding:6px 9px;border:1px solid #9fc4b8;border-radius:999px;background:#f2faf7;color:var(--accent-dark);font-size:.72rem;text-align:center }
@media(max-width:700px){.sesqua-tool-window{resize:none}.today-tool-add-grid{grid-template-columns:1fr 1fr}.today-tool-choice{grid-column:1/-1}.home-redesign-examples{grid-template-columns:auto repeat(2,minmax(0,1fr))}}

@media print {
 body.sesqua-printing .today-tool-datebar button,
 body.sesqua-printing .today-tool-add-panel,
 body.sesqua-printing .today-tool-fab,
 body.sesqua-printing .today-tool-meal-add,
 body.sesqua-printing .today-tool-empty,
 body.sesqua-printing .today-tool-summary { display:none !important }
 body.sesqua-printing .today-meals-tool { min-height:0 !important;font-size:9pt }
 body.sesqua-printing .today-tool-identity { padding:4px 0 !important }
 body.sesqua-printing .today-tool-datebar { padding:4px 0 !important }
 body.sesqua-printing .today-tool-meals { display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible !important }
 body.sesqua-printing .today-tool-meal { margin:0;padding:7px;break-inside:avoid }
 body.sesqua-printing .today-tool-daily-totals { margin-top:8px;padding:7px;break-inside:avoid }
 body.sesqua-printing .nutrition-viewer { width:100% !important;font-size:9.5pt }
 body.sesqua-printing .nutrition-viewer-head { display:none !important }
 body.sesqua-printing .nutrition-print-report-head { margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid #777 }
 body.sesqua-printing .nutrition-print-report-head span { color:#315c50 !important;font-size:8.5pt;font-weight:900;letter-spacing:.1em;text-transform:uppercase }
 body.sesqua-printing .nutrition-print-report-head h1 { margin:3px 0;font-size:18pt;line-height:1.1 }
 body.sesqua-printing .nutrition-print-report-head p { margin:0;font-size:8.5pt }
 body.sesqua-printing .nutrition-viewer-identity { margin-bottom:8px;padding:8px 0 }
 body.sesqua-printing .nutrition-viewer-identity h2 { display:none }
 body.sesqua-printing .food-detail-grid { grid-template-columns:300px minmax(0,1fr) !important;gap:18px !important;align-items:start }
 body.sesqua-printing .nutrition-label { width:300px !important;max-width:300px !important }
 body.sesqua-printing .analysis-panel .button-row,
 body.sesqua-printing .analysis-panel .sesqua-loading,
 body.sesqua-printing .analysis-panel .explain-box .icon-btn,
 body.sesqua-printing .nutrition-source-details .nutrition-raw-details { display:none !important }
 body.sesqua-printing .analysis-panel { break-inside:avoid }
 body.sesqua-printing .nutrition-source-details { margin-top:10px;break-inside:avoid }
 body.sesqua-printing .nutrition-source-details .nutrition-source-summary { display:block !important }
}

/* Interface catch-up: reusable drawer and query/list layouts. */
.meal-plan-panel { padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);min-width:0 }
.meal-plan-panel header { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px }
.meal-plan-panel header > div,.meal-plan-row > span { display:grid;gap:3px;min-width:0 }
.meal-plan-panel small { color:var(--muted);white-space:normal;overflow-wrap:anywhere }
.meal-plan-row { display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line) }
.meal-plan-row > span { flex:1;overflow-wrap:anywhere }
.meal-plan-row > button { flex:0 0 auto }
.plan-confirmation { margin-top:10px;padding:12px;border:1px solid var(--accent);border-radius:10px;background:var(--surface);display:grid;gap:8px }
.plan-exception-fields { display:flex;flex-wrap:wrap;gap:8px }
.plan-exception-fields label { flex:1 1 110px;min-width:0 }
.plan-exception-fields input,.plan-exception-fields select { width:100%;min-width:0 }
.diary-choice-selection { color:var(--muted) }
.diary-menu-choice-row.selected .diary-choice-selection { color:var(--accent) }
.navigation-drawer-content,.navigation-drawer-group { min-width:0 }
.navigation-drawer-group a strong,.navigation-drawer-group a small,.navigation-tool-row strong,.navigation-tool-row small { white-space:normal;overflow-wrap:anywhere;max-width:100% }
.navigation-drawer-group a small,.navigation-tool-row small { font-size:.82rem;line-height:1.4 }
.navigation-drawer-tools { display:none }
.navigation-tool-row { display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:11px;padding:8px 10px;border:1px solid transparent;border-radius:12px;background:transparent;text-align:left;color:var(--text);cursor:pointer }
.navigation-tool-row:hover,.navigation-tool-row:focus-visible { background:var(--accent-soft);border-color:var(--accent) }
.navigation-tool-row > span:last-child { display:grid;gap:3px;min-width:0 }
.navigation-drawer-icon img { width:36px;height:36px;object-fit:contain }
.query-bar,.query-bar-input,.query-bar-line,.query-bar-footer { min-width:0;max-width:100% }
.query-bar-label { display:block;font-weight:800;margin-bottom:6px }
.query-bar-line { display:flex;align-items:stretch;gap:8px }
.query-bar-input { flex:1 1 0 }
.query-bar-actions { display:flex;flex:0 0 auto;align-items:stretch;gap:6px }
.query-bar-actions[hidden] { display:none }
.query-bar-input input { width:100%;min-width:0;box-sizing:border-box }
.query-bar .usda-search-surface { display:flex;width:100%;min-width:0;box-sizing:border-box }
.query-bar .search-history-wrap { flex:1 1 0;min-width:0 }
.query-bar .usda-search-submit,.query-bar .usda-search-reset { width:auto;min-width:0;flex:0 0 auto;margin:0;padding:9px 14px }
.query-submit-icon { display:none }
.query-bar-suggestions { margin-top:10px }
.query-bar .usda-search-attribution { display:flex;flex-wrap:wrap;gap:6px 14px }
.home-redesign-intro,.home-redesign-search,.browse-discovery-search,.sesqua-list-panel-toolbar { min-width:0;max-width:100%;box-sizing:border-box }
.sesqua-list-panel-toolbar > .usda-search-control { width:100%;margin-bottom:10px }
.diary-menu-choice-row,.browse-result-row,.order-ticket > div { min-width:0;gap:8px }
.diary-menu-choice-main,.browse-result-main,.order-ticket > div > span { flex:1 1 0;min-width:0;overflow-wrap:anywhere;white-space:normal }
.diary-menu-choice-main > span:not(.learn-tag):not(.status-pill):not(.diary-choice-check) { min-width:0;white-space:normal;overflow-wrap:anywhere }
.diary-menu-choice-main strong,.diary-menu-choice-main small,.browse-result-main strong { white-space:normal;overflow-wrap:anywhere }
.diary-menu-choice-row > .icon-action,.order-ticket > div > button { flex:0 0 auto;width:auto }
.builder-save-actions { position:sticky;bottom:0;z-index:3;padding:10px;background:var(--surface,#fff);border-top:1px solid var(--line);display:flex;justify-content:flex-end }
.builder-save-actions .btn { width:auto;max-width:100% }

/* Thursday QA: shared container geometry; no new workspace persistence. */
.sesqua-tool-window { resize:none }
.sesqua-tool-window[data-tool="storage"],.sesqua-tool-window[data-tool="crew"] { width:min(680px,calc(100vw - 32px));height:min(680px,calc(100dvh - 112px)) }
.sesqua-tool-window .sesqua-tool-actions { display:flex;align-items:center;gap:8px;flex:0 0 auto;position:relative;margin-top:auto;flex-wrap:wrap }
.sesqua-tool-actions > span { flex:1 }
.sesqua-tool-resize { position:absolute;z-index:10;touch-action:none }
.sesqua-tool-resize.resize-n,.sesqua-tool-resize.resize-s { left:12px;right:12px;height:8px;cursor:ns-resize }
.sesqua-tool-resize.resize-n { top:0 }.sesqua-tool-resize.resize-s { bottom:0 }
.sesqua-tool-resize.resize-e,.sesqua-tool-resize.resize-w { top:12px;bottom:12px;width:8px;cursor:ew-resize }
.sesqua-tool-resize.resize-e { right:0 }.sesqua-tool-resize.resize-w { left:0 }
.sesqua-tool-resize.resize-ne,.sesqua-tool-resize.resize-nw,.sesqua-tool-resize.resize-se,.sesqua-tool-resize.resize-sw { width:14px;height:14px }
.sesqua-tool-resize.resize-ne { top:0;right:0;cursor:nesw-resize }.sesqua-tool-resize.resize-sw { bottom:0;left:0;cursor:nesw-resize }
.sesqua-tool-resize.resize-nw { top:0;left:0;cursor:nwse-resize }.sesqua-tool-resize.resize-se { bottom:0;right:0;cursor:nwse-resize }
.standalone-tool-shell .sesqua-tool-resize { display:none }
@media(max-width:700px) { .sesqua-tool-resize { display:none } }

/* Page-specific split-pane content rules; shared geometry lives with SesquaSplitPane. */
.nutrition-facts-split > .sesqua-split-pane-primary,.nutrition-facts-split > .sesqua-split-pane-secondary { display:flex;min-width:0 }
.nutrition-facts-split .analysis-panel { width:100%;overflow-wrap:anywhere }
.nutrition-facts-split .fit-grid { grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));min-width:0 }
.nutrition-facts-split .fit-badge,.nutrition-facts-split .fit-badge > span { min-width:0;max-width:100% }
.nutrition-viewer .nutrition-facts-split .nutrition-label { width:100%;max-width:none;min-width:0;box-sizing:border-box;font-size:1rem;align-self:stretch }
.nutrition-facts-split .nf-footnote { margin-top:auto }
.browse-results-pane { container-type:inline-size }
.browse-result-row { flex-wrap:wrap;align-items:start }
.browse-result-main { flex:1 1 220px }
.browse-result-value { min-width:0;overflow-wrap:anywhere;white-space:normal }
.browse-sort-tools,.browse-workspace-status { flex-wrap:wrap;min-width:0 }
.browse-sort-tools .select-input,.browse-filter-panel .select-input { min-width:0;max-width:100% }
@container(max-width:480px) {
 .browse-results-pane .usda-search-control .search-line { flex-wrap:wrap }
 .browse-results-pane .usda-search-control .usda-search-surface { flex-basis:100%;max-width:100% }
 .browse-result-row .browse-result-main { flex-basis:100% }
 .browse-result-value { flex:1 1 90px;text-align:left }
 .browse-sort-tools .nutrient-sort { flex:1 1 150px }
 .browse-filter-panel { grid-template-columns:minmax(0,1fr) }
}
.today-tool-datebar { display:flex;align-items:center;flex-wrap:wrap;gap:6px }
.today-tool-datebar .today-tool-date { flex:0 1 160px;min-width:0 }
.today-tool-datebar .text-input,.diary-date-nav-combined .text-input { min-height:36px;padding:5px 8px }
.today-tool-datebar .mini-btn,.diary-date-nav-combined .mini-btn { min-height:36px;padding:5px 10px }
.diary-date-nav-combined { gap:6px }
.builder-flow-help { padding:10px 14px }
.builder-flow-help > summary { cursor:pointer;font-weight:700;color:var(--muted) }
.builder-flow-help .menu-flow-guide { margin:10px 0 0;padding:8px;box-shadow:none }
.menu-builder-work .builder-work-header { position:static;flex-wrap:wrap;gap:8px }
.menu-builder-work .builder-head,.menu-builder-work .recipe-yield-grid { min-width:0;gap:10px }
.menu-builder-work input,.menu-builder-work select,.menu-builder-work textarea { min-width:0;max-width:100% }
.sesqua-list-panel > .sesqua-loading { margin:8px 12px }
@media print {
 .nutrition-facts-split > .sesqua-split-divider,.sesqua-tool-resize { display:none !important }
 .nutrition-facts-split > .sesqua-split-pane-primary { grid-column:1 }
 .nutrition-facts-split > .sesqua-split-pane-secondary { grid-column:2 }
}
.recipe-yield-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.recipe-yield-grid input { min-width:0;width:100% }
/* Standalone tool views keep the same Home/hamburger escape, not page-specific Back buttons. */
.standalone-tool-shell > .topbar { display:flex;z-index:1900 }
.standalone-tool-shell .sesqua-tool-layer { top:84px;padding:10px }
@media(max-width:760px) {
 .sesqua-tool-pantry-control { display:none }
 .navigation-drawer-tools { display:grid }
 .home-redesign-hero { min-width:0;grid-template-columns:minmax(0,1fr) }
 .home-redesign-search { padding:14px }
 .diary-menu-choice-row,.browse-result-row,.order-ticket > div { padding:8px;gap:6px }
 .diary-menu-choice-main { gap:6px;flex-wrap:wrap;padding:4px;min-width:0 }
 .standalone-tool-shell .sesqua-tool-layer { top:68px }
}
@media(max-width:560px) {
 .query-submit-text { display:none }
 .query-submit-icon { display:inline;font-size:1.35rem }
 .query-bar .usda-search-submit,.query-bar .usda-search-reset { padding:8px 10px }
 .query-bar-line { gap:5px }
 .query-bar .search-input { padding-inline:8px }
 .query-bar .usda-search-symbol { display:none }
}
@media(min-width:761px) and (max-width:1100px) {
 .how-sesqua-steps { grid-template-columns:repeat(4,minmax(0,1fr)) }
 .how-sesqua-steps article { padding:12px;gap:8px }
}

/* Pending QA cleanup: compact navigation/search and maximize popup working space. */
.topbar { gap:clamp(7px,1vw,12px);padding-inline:clamp(10px,1.8vw,24px) }
.primary-nav { gap:clamp(0px,.35vw,5px) }
.primary-nav a { padding-inline:clamp(6px,.65vw,10px);white-space:nowrap }
.primary-nav .nav-secondary { display:block }
.sesqua-brand { min-width:0 }
.sesqua-brand > span { min-width:0 }
.sesqua-brand small { white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
@media(max-width:900px) { .sesqua-brand small { display:none } }
@media(min-width:761px) {
 .main-nav.primary-nav { position:static;left:auto;right:auto;top:auto;display:flex;flex-direction:row;align-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none }
}
@media(max-width:760px) { .primary-nav { display:none } }

.home-redesign { gap:14px }
.home-redesign-hero { min-height:390px;padding-block:clamp(22px,3vw,42px) }
.home-redesign-search { margin-top:18px }
.query-bar-footer .usda-search-attribution { flex-wrap:nowrap;white-space:nowrap }
.home-redesign-examples { display:flex;flex-wrap:nowrap;gap:7px;align-items:center;margin-top:9px }
.home-redesign-examples > span { grid-row:auto;flex:0 0 auto }
.home-redesign-examples button { min-width:82px;border-color:transparent }
.home-redesign-examples button:nth-of-type(1) { background:#e2f2ee;color:#145848 }
.home-redesign-examples button:nth-of-type(2) { background:#fff0d8;color:#78500d }
.home-redesign-examples button:nth-of-type(3) { background:#e8edff;color:#344d91 }
.home-redesign-examples button:nth-of-type(4) { background:#f5e7f6;color:#704276 }
@media(max-width:620px) {
 .home-redesign-examples { display:grid;grid-template-columns:auto repeat(2,minmax(0,1fr));white-space:normal }
 .home-redesign-examples > span { grid-row:1 / span 2 }
 .query-bar-footer .usda-search-attribution { flex-wrap:wrap;white-space:normal }
}

.sesqua-tool-titlebar { padding:9px 12px }
.sesqua-tool-titlebar small { line-height:1.2 }
.sesqua-tool-body { padding:10px 12px;overflow-x:hidden }
.sesqua-tool-actions { min-height:0;padding:7px 12px }
.sesqua-tool-window[data-tool="menu"] .sesqua-tool-titlebar small,
.sesqua-tool-window[data-tool="today"] .sesqua-tool-titlebar small { display:none }
.my-menu-tool { gap:7px }
.my-menu-popup-row { align-items:center;padding:0;overflow:hidden }
.my-menu-popup-main { display:flex;flex:1 1 auto;min-width:0;justify-content:space-between;gap:8px;padding:9px 11px;border:0;background:transparent;color:inherit;text-align:left }
.my-menu-popup-main > span { min-width:0;overflow-wrap:anywhere }
.my-menu-add { flex:0 0 auto;margin-right:9px }
.popup-shared-list { min-height:0;padding:0;overflow:visible }
.popup-shared-list .sesqua-list-panel-toolbar { display:grid;gap:7px;padding:8px }
.popup-shared-list-body { min-height:0 }
.popup-shared-list .my-menu-popup-list { margin:0;border-width:1px 0 0;border-radius:0;max-height:48vh }
.my-menu-popup-row.selected { background:var(--surface-2);box-shadow:inset 4px 0 0 var(--accent) }
.my-menu-popup-row:focus-within { outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px }

@media print {
 body.sesqua-printing .sesqua-tool-layer:has(.sesqua-print-target),
 body.sesqua-printing .sesqua-tool-window:has(.sesqua-print-target),
 body.sesqua-printing .sesqua-tool-body:has(.sesqua-print-target) {
  position:static !important;inset:auto !important;width:100% !important;height:auto !important;
  max-width:none !important;max-height:none !important;overflow:visible !important;
  margin:0 !important;padding:0 !important;border:0 !important;box-shadow:none !important
 }
 body.sesqua-printing .sesqua-print-target { position:static !important }
 body.sesqua-printing .today-tool-entry-list { overflow:visible !important;max-height:none !important }
}

/* Shared opt-in list actions: compact primary action plus contextual commands. */
.sesqua-list-item-actions { position:relative;display:flex;align-items:center;gap:4px;flex:0 0 auto }
.sesqua-list-primary-action { color:var(--accent);font-size:1.05rem;font-weight:900 }
.sesqua-list-more { position:relative }
.sesqua-list-more > summary { display:grid;place-items:center;list-style:none;cursor:pointer }
.sesqua-list-more > summary::-webkit-details-marker { display:none }
.sesqua-list-action-menu { position:absolute;right:0;top:calc(100% + 5px);z-index:12;min-width:170px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 8px 22px #173e3024 }
.sesqua-list-action-menu button { width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:var(--text);text-align:left;font:inherit;font-weight:750;cursor:pointer }
.sesqua-list-action-menu button:hover { background:#eef8f3 }
.browse-result-select { display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer }
.browse-result-select:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px }

@media print {
 body.sesqua-printing .search-results-print-scope .sesqua-list-panel-toolbar,
 body.sesqua-printing .search-results-print-scope .sesqua-list-panel-status,
 body.sesqua-printing .search-results-print-scope .sesqua-list-panel-actions,
 body.sesqua-printing .search-results-print-scope .sesqua-list-item-actions { display:none !important }
 body.sesqua-printing .search-results-print-scope .browse-result-list { max-height:none !important;min-height:0 !important;overflow:visible !important }
 body.sesqua-printing .search-results-print-scope .browse-result-row { break-inside:avoid;padding:7px 5px;background:var(--paint-on-accent) !important;box-shadow:none !important }
}


/*Rich Edits ignore to next comment

    Blue = div boxes — Moe's sandbox should jump right out.
    Purple = structural areas.
    Green = inputs.
    Pink = buttons/links.
    Cyan = images/SVG.
    Yellow dashed = lists.
    Faint red = everything else.

*/

/* SESQUA CSS X-RAY — DEBUG ONLY

* {
    outline: 1px solid rgba(255, 0, 0, .25) !important;
}

Major structural containers
div {
    outline-color: rgba(0, 120, 255, .65) !important;
}

Sections / main layout
main,
section,
article,
aside,
header,
footer,
nav {
    outline: 2px solid rgba(160, 0, 255, .70) !important;
}

Forms
form,
fieldset {
    outline: 2px solid rgba(255, 140, 0, .80) !important;
}

Inputs
input,
select,
textarea {
    outline: 2px solid rgba(0, 180, 80, .80) !important;
}

Buttons / clickable controls
button,
a,
[role="button"] {
    outline: 2px solid rgba(255, 0, 150, .80) !important;
}

Images
img,
svg {
    outline: 2px solid rgba(0, 200, 220, .85) !important;
}

Lists
ul,
ol,
li {
    outline: 1px dashed rgba(220, 180, 0, .80) !important;
}

Rich Edits ignore top comment*/

/* ===========================================================================
   CURRENT SHARED LISTS AND WORKSPACES
   Search Results, Pantry, Saved Creations, destination controls and headers.
   Keep additions for shared list behavior together in this section.
   ========================================================================== */

/* Search Results QA: destination controls and a single top-layer action menu. */
.search-destination-toolbar { display:flex;align-items:end;gap:6px;margin-bottom:8px;min-width:0 }
.search-destination-toolbar label { display:grid;gap:3px;flex:1 1 190px;min-width:0 }
.search-destination-toolbar label > span { color:var(--muted);font-size:.72rem;font-weight:800 }
.search-destination-toolbar .select-input { width:100%;max-width:100%;min-width:0 }
.search-destination-toolbar .mini-btn { flex:0 0 auto;white-space:nowrap }
.search-destination-toolbar .workspace-collapse { margin-left:auto }
@media(max-width:620px){.search-destination-toolbar{align-items:stretch;flex-wrap:wrap}.search-destination-toolbar label{flex-basis:100%}.search-destination-toolbar .workspace-collapse{margin-left:auto}}

/* Final Home cleanup: compact philosophy copy, stable Mac sandbox, natural page ending. */
.home-philosophy { max-width:760px;margin:14px 0 0;padding-left:13px;border-left:3px solid rgba(35,125,99,.42);color:#415c54;font-size:clamp(.79rem,.82vw,.9rem);line-height:1.4 }
.home-philosophy p { margin:0 0 6px }
.home-philosophy .home-philosophy-lead { color:#174f40;font-size:1.02em }
.home-philosophy .home-philosophy-choice { color:#274f44 }
.home-philosophy .home-philosophy-aside { margin-bottom:0;color:#667870;font-size:.92em }
.home-redesign-hero { align-items:stretch;min-height:0 }
.home-redesign-intro { align-self:center }
.home-redesign-search { margin-top:16px }
.home-redesign-scene { min-width:0;min-height:440px;overflow:visible }
.home-redesign-moe { right:clamp(-20px,-1vw,-8px) !important;bottom:0 !important;width:min(27vw,350px) !important;max-height:min(420px,100%) !important }
.app-shell.sesqua-woods .page-wrap:has(.home-redesign) { margin-bottom:8px }
.home-redesign-trust { padding-bottom:0 }
@media(max-width:1000px) and (min-width:761px) {
 .home-redesign-hero { grid-template-columns:minmax(0,1fr) minmax(190px,230px);gap:18px;padding:28px }
 .home-redesign-scene { min-height:390px }
 .home-redesign-moe { right:-36px !important;width:min(32vw,300px) !important }
}
@media(max-width:760px) {
 .home-philosophy { margin-top:12px;padding-left:11px;font-size:.82rem;line-height:1.38 }
 .home-redesign-search { margin-top:15px }
 .app-shell.sesqua-woods .page-wrap:has(.home-redesign) { margin-bottom:4px }
}
.search-off-page { display:none !important }
.search-action-popover { position:fixed;inset:auto;margin:0;overflow:visible;padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--text);box-shadow:0 8px 22px #173e3024;max-width:calc(100vw - 16px) }
.search-action-popover button { white-space:nowrap }
.search-action-popover.points-left::before { content:"";position:absolute;left:-6px;top:12px;width:10px;height:10px;background:inherit;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg) }
@media print {
 .search-off-page { display:flex !important }
 .search-destination-toolbar,.search-action-popover,#search-pantry-print .sesqua-list-panel-actions { display:none !important }
}

/* Search list-header QA: one row, scroll overflow, independent progress row. */
.sesqua-header-qa > .sesqua-list-panel-header,
.search-destination-toolbar.sesqua-header-qa { flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; min-width:0 }
.sesqua-header-qa .sesqua-list-panel-title,
.sesqua-header-qa .sesqua-list-panel-identity,
.sesqua-header-qa .sesqua-list-panel-actions { flex-wrap:nowrap; flex-shrink:0; white-space:nowrap }
.sesqua-header-qa .icon-action { flex:0 0 28px; width:28px; min-width:28px; padding:3px }
.sesqua-list-progress { width:100%; box-sizing:border-box; padding:8px 12px }
.sesqua-list-progress[hidden] { display:none }
.sesqua-list-progress .sesqua-loading { margin:0; width:100%; box-sizing:border-box }
.search-results-floating { position:fixed; inset:12vh 12vw; z-index:1000; background:white; overflow:auto; resize:both; min-width:280px; box-shadow:0 16px 60px #0005 }
@media print { .sesqua-list-progress { display:none!important } }

/* SesquaHeaderActions owns its popover chrome; page-specific fitting remains below. */

/* Reserve More before fitting optional actions to each pane. */
.sesqua-header-qa > .sesqua-list-panel-header { overflow:visible; gap:6px }
.sesqua-header-qa .sesqua-list-panel-title { flex:0 1 auto; overflow:hidden }
.sesqua-header-qa .sesqua-list-panel-identity { min-width:0 }
.sesqua-header-qa .sesqua-list-panel-identity strong { overflow:hidden; text-overflow:ellipsis }
.sesqua-header-qa .sesqua-list-panel-actions { flex:1 1 0; min-width:0; gap:4px }
.sesqua-responsive-actions { display:flex; flex:1 1 0; min-width:28px; gap:4px; align-items:center; justify-content:flex-end }
.sesqua-responsive-actions [hidden] { display:none!important }
.search-destination-toolbar.sesqua-header-qa { overflow:visible; gap:4px }
.search-destination-toolbar.sesqua-header-qa > label { flex:1 1 45%; min-width:0 }
.search-destination-toolbar.sesqua-header-qa select { width:100%; min-width:0 }

.pantry-meal-menu { border:1px solid var(--line); border-radius:10px; padding:8px; box-shadow:0 8px 30px #0003 }
.pantry-meal-menu:popover-open { display:grid; gap:4px }
.pantry-meal-menu button { text-align:left; padding:8px 12px; background:white; border:0; cursor:pointer }
.pantry-meal-menu button:hover { background:#e6f2ee }

.pantry-meal-menu { margin:0; inset:auto; top:anchor(bottom); right:anchor(right); position-try-fallbacks:flip-block,flip-inline; max-width:calc(100vw - 16px) }

/* Diary header controls are layout previews only; keep each column's real controls intact. */
.diary-menu-title.diary-list-head:has(.diary-header-preview) { height:auto; min-height:0 }
.diary-menu-title > .diary-header-preview { grid-column:1 / -1 }
.today-tool-identity:has(.diary-header-preview) { flex-wrap:wrap }
.today-tool-identity > .diary-header-preview { flex:1 0 100% }
.diary-header-preview { display:flex; min-width:0; width:100% }
.diary-header-preview .sesqua-responsive-actions { justify-content:flex-start }
.diary-header-preview .icon-action { flex:0 0 28px; width:28px; min-width:28px; padding:3px }
.diary-header-preview .icon-action:disabled { opacity:.55; cursor:not-allowed }

/* Recipe surfaces use the same disabled vocabulary for header-fit QA. */
.list-header-layout-preview { display:flex; min-width:0; width:100% }
.list-header-layout-preview .sesqua-responsive-actions { justify-content:flex-start }
.list-header-layout-preview .icon-action { flex:0 0 28px; width:28px; min-width:28px; padding:3px }
.list-header-layout-preview .icon-action:disabled { opacity:.55; cursor:not-allowed }
.list-header-layout-preview:empty,.diary-header-preview:empty { display:none }
.library-list-preview-head > .list-header-layout-preview { grid-column:1 / -1 }
.menu-source-head:has(.list-header-layout-preview) { display:flex; flex-wrap:wrap }
.menu-source-head > .list-header-layout-preview { flex:1 0 100% }
.builder-work-header:has(.list-header-layout-preview) { flex-wrap:wrap }
.builder-work-header > .list-header-layout-preview { flex:1 0 100% }
.quick-results-preview-head,
.compare-list-preview-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); background:var(--surface-2) }
.quick-results-preview-head > span,
.compare-list-preview-head > span { display:grid; gap:2px; min-width:0 }
.quick-results-preview-head small,
.compare-list-preview-head small { color:var(--muted); font-size:.72rem }
.quick-results-preview-head > .list-header-layout-preview,
.compare-list-preview-head > .list-header-layout-preview { flex:1 0 100% }
.popup-list-preview-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px 8px; border-bottom:1px solid var(--line); background:var(--surface-2) }
.popup-list-preview-head > span { display:grid; gap:1px; min-width:0 }
.popup-list-preview-head small { color:var(--muted); font-size:.7rem }
.popup-list-preview-head > .list-header-layout-preview { flex:1 0 100% }
.asset-library-results-head:has(.list-header-layout-preview) { flex-wrap:wrap }
.asset-library-results-head > .list-header-layout-preview { flex:1 0 100% }
.nutrition-search-results-head { grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:6px 8px; border-bottom:1px solid var(--line); background:var(--surface-2) }
.nutrition-search-results-head > span { display:grid; gap:1px; min-width:0 }
.nutrition-search-results-head small { color:var(--muted); font-size:.68rem }
.nutrition-search-results-head > .list-header-layout-preview { flex:1 0 100% }

.pantry-details-workspace { min-width:0; overflow-x:hidden }
.pantry-saved-details { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:0 0 12px; margin-bottom:12px; border-bottom:1px solid var(--line) }
.pantry-saved-details > div { display:grid; gap:2px; min-width:0; flex:1 1 180px }
.pantry-saved-details span,.pantry-saved-details p,.pantry-details-editor p { color:var(--muted); font-size:.82rem; margin:0; overflow-wrap:anywhere }
.pantry-saved-details p { flex:1 0 100% }
.pantry-details-editor { display:grid; gap:10px; padding:12px; margin-bottom:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); min-width:0 }
.pantry-details-editor h3 { margin:0; font-size:1rem; overflow-wrap:anywhere }
.pantry-details-editor .text-area { width:100%; min-width:0; box-sizing:border-box }
.pantry-details-editor .button-row { flex-wrap:wrap }

.takeout-plan-editor { display:grid;gap:10px;min-width:0;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface) }
.takeout-plan-editor p { margin:0;color:var(--muted);font-size:.83rem }
.takeout-plan-item { display:grid;grid-template-columns:minmax(140px,2fr) minmax(75px,.6fr) minmax(85px,.8fr) minmax(140px,2fr) auto;align-items:end;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:9px }
.takeout-estimate-fields { display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:8px;min-width:0 }
.takeout-plan-editor .text-input,.takeout-plan-editor .text-area { width:100%;min-width:0;box-sizing:border-box }
@media (max-width:900px) { .takeout-plan-item { grid-template-columns:repeat(2,minmax(0,1fr)) } .takeout-plan-item > :first-child,.takeout-plan-item > :nth-child(4) { grid-column:1 / -1 } .takeout-estimate-fields { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:500px) { .takeout-plan-item,.takeout-estimate-fields { grid-template-columns:minmax(0,1fr) } .takeout-plan-item > :first-child,.takeout-plan-item > :nth-child(4) { grid-column:auto } }

.usda-key-notice { display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;margin:0 0 14px;border:2px solid #bb8243;border-radius:12px;background:#fff5e9;color:#4b351f }
.usda-key-notice > span:first-child { font-size:1.35rem;line-height:1 }
.usda-key-notice > span:nth-child(2) { display:grid;gap:2px;flex:1 1 230px;min-width:0 }
.usda-key-notice small { color:#594a39;font-size:.84rem }
.usda-key-notice .btn { flex:0 0 auto }
@media(max-width:500px) { .usda-key-notice .btn { width:100%;text-align:center } }
@media(max-width:760px) {
 .phone-nutrition-drawer .side-drawer-panel,.phone-choice-drawer .side-drawer-panel { width:100vw;max-width:none;border-right:0 }
 .phone-nutrition-drawer .side-drawer-body { padding:8px 8px 24px;overflow-x:hidden }
 .browse-page.phone-nutrition-list-mode .browse-workspace-main > .sesqua-split-pane-secondary { display:none }
 .quick-viewer-card.phone-overlay-source { display:none }
}

/* Hidden workspaces retain their editors without participating in layout. */
.sesqua-tool-layer[hidden] { display: none !important; }

/* September 17 agreed batch: panel consistency and phone shells. Append only. */
.sesqua-panel-header { display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line);background:var(--surface-2); }
.sesqua-panel-header strong { flex:1; }
.sesqua-panel-footer { padding:10px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem; }
.sesqua-panel-pin[aria-pressed="true"] { background:var(--accent-soft);border-color:var(--accent); }
.sesqua-tool-rail.pantry-rail { width:min(410px,calc(100vw - 24px));background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column; }
.sesqua-tool-rail .sesqua-tool-rail-list { min-height:0;overflow:auto;padding:12px; }
.sesqua-tool-rail .sesqua-tool-rail-section { border-color:var(--line); }
.sesqua-tool-rail .sesqua-tool-rail-item,.navigation-drawer-group a { min-height:48px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text);font-size:.92rem; }
.sesqua-tool-rail .sesqua-tool-rail-item:hover,.navigation-drawer-group a:hover { background:var(--surface-2);border-color:var(--line); }
.sesqua-tool-rail .sesqua-tool-rail-item.active,.navigation-drawer-group a.active { background:var(--accent-soft);border-color:var(--accent); }
.sesqua-tool-rail .sesqua-tool-rail-icon,.navigation-drawer-icon { width:36px;height:36px;border-radius:8px;background:var(--surface-2); }
.asset-phone-control,.asset-phone-more { display:none; }
@media screen and (max-width:700px) {
 .sesqua-tool-layer .sesqua-tool-window { position:fixed!important;inset:0!important;transform:none!important;width:100%!important;min-width:0!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0;display:flex;flex-direction:column; }
 .sesqua-tool-window .sesqua-tool-titlebar { flex:0 0 auto;min-height:52px;padding:6px 12px;cursor:default; }
 .sesqua-tool-window .sesqua-tool-titlebar small,.sesqua-tool-window .sesqua-tool-context { display:none; }
 .sesqua-tool-window .sesqua-tool-body { flex:1 1 auto;min-height:0;overflow:auto;padding:10px; }
 .sesqua-tool-window .sesqua-tool-actions { flex:0 0 auto;padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
 .asset-library-tool .asset-library-toolbar { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;flex:0 0 auto; }
 .asset-library-tool .asset-library-tabs,.asset-library-tool .asset-category-row,.asset-library-tool .asset-desktop-action { display:none; }
 .asset-phone-control { display:grid;gap:3px;min-width:0;font-size:.75rem; }
 .asset-phone-control select { width:100%;min-width:0; }
 .asset-phone-more { display:block;position:relative;align-self:end; }
 .asset-phone-more summary { cursor:pointer;list-style:none;min-width:42px;min-height:42px;display:grid;place-items:center; }
 .sesqua-more-actions { position:absolute;right:0;top:100%;z-index:20;display:grid;gap:6px;min-width:160px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #0002; }
 .asset-library-tool .asset-library-search-row,.asset-phone-category { grid-column:1 / -1; }
 .asset-library-tool .asset-library-search-row { display:flex;flex-wrap:wrap;gap:6px; }
 .asset-library-search-row .local-search-bar { flex:1 1 180px;min-width:0; }
 .asset-library-tool .asset-library-content { grid-template-columns:minmax(0,1fr); }
 .asset-library-tool .asset-library-inspector { max-width:100%; }
 .sesqua-tool-rail.pantry-rail { max-height:calc(100dvh - 90px); }
}

/* Keep labels visible in an explicitly opened tool panel, including without hover. */
.sesqua-tool-pantry-control > .sesqua-tool-rail.pantry-rail,
.sesqua-tool-pantry-control > .sesqua-tool-rail.pantry-rail:hover,
.sesqua-tool-pantry-control > .sesqua-tool-rail.pantry-rail:focus-within { width:min(410px,calc(100vw - 24px)); }
.sesqua-tool-pantry-control > .sesqua-tool-rail.pantry-rail .sesqua-tool-rail-label,
.sesqua-tool-pantry-control > .sesqua-tool-rail.pantry-rail .sesqua-tool-rail-section > small:first-child,
.sesqua-tool-pantry-control > .sesqua-tool-rail.pantry-rail .sesqua-tool-rail-status { display:block; }
.diary-single-header { flex-wrap:wrap;gap:10px; }
.diary-single-header .diary-title-line { flex:1 1 360px;min-width:0; }
@media screen and (max-width:700px) {
 .sesqua-tool-layer .sesqua-tool-window .sesqua-tool-body { min-height:0!important; }
 .sesqua-tool-layer .sesqua-tool-window { min-height:0!important; }
 .sesqua-tool-window .sesqua-tool-titlebar { touch-action:auto; }
}

/* Keep expanded list panes relative to the viewport, not the frosted page. */
.app-shell.sesqua-woods > .page-wrap:has(.workspace-popped-out) { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* Recipe drawers must use the viewport rather than the frosted page as their containing block. */
.app-shell.sesqua-woods > .page-wrap:has(.phone-recipe-drawer) { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }

/* Print in normal document flow: hidden siblings must not reserve blank pages. */
@media print {
 body.sesqua-printing .sesqua-print-ancestor > :not(.sesqua-print-ancestor):not(.sesqua-print-target) { display:none !important }
 body.sesqua-printing .sesqua-print-ancestor { display:block !important;position:static !important;inset:auto !important;transform:none !important;width:auto !important;height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;margin:0 !important;padding:0 !important;border:0 !important;box-shadow:none !important }
 body.sesqua-printing .sesqua-print-target { position:static !important;min-height:0 !important;max-height:none !important;break-inside:auto !important }
 .topbar,.footer,.workspace-steps,.workspace-date-controls,.workspace-list-header,.workspace-pager,.sesqua-split-divider,.workspace-row-menu,.workspace-list-body > label,.workspace-list-body > .usda-search-box { display:none !important }
 .page-wrap,.workspace-page,.list-workspace,.sesqua-split-pane-primary,.sesqua-split-pane-secondary,.workspace-list-pane,.workspace-list-body,.nutrition-viewer,.menu-builder-work,.builder-ticket { position:static !important;display:block !important;width:auto !important;height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;break-inside:auto !important;box-shadow:none !important }
 .workspace-list-body .mini-btn,.workspace-list-body .btn,.workspace-list-body .icon-action { display:none !important }
 .workspace-food-row,.meal-plan-row { break-inside:avoid }
 .workspace-food-select { color:#111 !important;background:white !important }
 [hidden] { display:none !important }
}

.workspace-print-extra { display:none }
@media print {
 .workspace-print-extra { display:flex !important }
 .app-shell,.page-wrap { min-height:0 !important;height:auto !important;overflow:visible !important;background:white !important }
 .workspace-list-pane { margin:0 0 12pt !important;padding:0 !important;border:0 !important }
 .workspace-preview-note,.workspace-list-body .fine-print,.workspace-list-body .empty-state { display:none !important }
}
@media print {
 .nutrition-facts-split { display:block !important;grid-template-columns:none !important }
 .nutrition-facts-split > .sesqua-split-pane-primary,.nutrition-facts-split > .sesqua-split-pane-secondary { display:block !important;width:100% !important;grid-column:auto !important }
 .nutrition-label { width:300px !important;max-width:100% !important;margin:0 0 12pt !important;break-inside:avoid !important }
 .analysis-panel { width:100% !important;min-width:0 !important;break-inside:auto !important }
 .nutrition-viewer .fit-grid { display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6pt !important }
 .nutrition-viewer .fit-badge { break-inside:avoid }
 .nutrition-viewer-actions,.nutrition-viewer-help,.nutrition-viewer-search,.nutrition-viewer-results,.usda-search-control { display:none !important }
 .workspace-food-row { padding:4pt 0 !important;min-height:0 !important }
 .workspace-food-select { padding:0 !important;min-height:0 !important }
}

/* 2026-10-02 conservative global top spacing: retain all content/control geometry.
   Screen-only so the verified print layout keeps its existing spacing. */
@media screen {
    .app-shell.sesqua-woods > .topbar {
        padding-block: 6px;
    }
    .app-shell.sesqua-woods > .page-wrap {
        margin-top: 8px;
        padding-top: 14px;
    }
    @media (max-width:840px) {
        .app-shell.sesqua-woods > .page-wrap {
            padding-top: 10px;
        }
    }
}
/* Tools now shares the navigation drawer shell and never resizes on hover. */
.sesqua-tool-rail.stable-tool-list{position:static;inset:auto;width:100%;height:auto;max-height:none;transform:none;transition:none;border:0;border-radius:0;box-shadow:none;padding:0;background:transparent;display:block;overflow:visible}
.sesqua-tool-rail.stable-tool-list .sesqua-tool-rail-list{padding:0;overflow:visible}
.sesqua-tool-rail.stable-tool-list .sesqua-tool-rail-label,.sesqua-tool-rail.stable-tool-list .sesqua-tool-rail-shortcut,.sesqua-tool-rail.stable-tool-list .sesqua-tool-rail-status,.sesqua-tool-rail.stable-tool-list .sesqua-tool-rail-section>small:first-child{display:block}
.account-menu { position: relative; }
.account-menu nav { position: absolute; right: 0; top: 100%; z-index: 100; display: grid; gap: .5rem; padding: 1rem; width: min(22rem, 85vw); background: var(--surface, #fff); color: var(--text, #17251b); border: 1px solid #7c8c80; border-radius: .5rem; box-shadow: 0 6px 20px #0003; }
.account-menu nav p { margin: 0; font-size: .875rem; }
.sesqua-tool-rail.stable-tool-list,.sesqua-tool-rail.stable-tool-list:hover{position:static;inset:auto;width:100%;max-width:100%;height:auto;transform:none;transition:none;animation:none;overflow:visible}.stable-tool-list .sesqua-tool-rail-item:hover,.stable-tool-list .sesqua-tool-rail-row:hover{transform:none}.stable-tool-list .sesqua-tool-rail-section{margin-top:0}.account-menu:not([open]) nav{display:none}