/* NOMS-018: the shared app shell and materials, W02 workspace + C10 form. */
.grocery-page {
    max-width:1400px;
    padding-bottom:48px;
}
.grocery-breadcrumb {
    display:flex;
    gap:10px;
    align-items:center;
    color:var(--text-secondary);
    font-size:13px;
    margin:8px 0 26px;
}
.grocery-breadcrumb a {
    color:var(--text-secondary);
}
.grocery-icon {
    width:20px;
    height:20px;
    flex-shrink:0;
    vertical-align:middle;
}
.grocery-eyebrow {
    font-size:11px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-secondary);
}
.grocery-muted {
    color:var(--text-secondary);
    font-size:13px;
    line-height:1.7;
}
.grocery-error {
    padding:14px 18px;
    border-radius:12px;
    border:1px solid var(--error-ink);
    background:var(--error-bg);
    color:var(--error-ink);
    margin:14px 0;
    overflow-wrap:anywhere;
}
.grocery-error .btn {
    margin-top:10px;
}
.grocery-workspace {
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:26px;
    align-items:start;
}
.grocery-workspace>* {
    min-width:0;
}
.grocery-rail {
    padding:22px 15px;
    border-radius:24px;
    border:1px solid var(--border-color);
    position:sticky;
    top:110px;
}
.grocery-list-links {
    margin:16px 0 20px;
    max-height:65vh;
    overflow-y:auto;
    scrollbar-width:thin;
    padding:3px;
}
.grocery-list-link {
    display:block;
    padding:15px 12px;
    margin-bottom:10px;
    border-radius:15px;
    color:var(--text-primary);
    text-decoration:none!important;
    overflow-wrap:anywhere;
}
.grocery-list-link>div {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
}
.grocery-list-link strong {
    font-weight:800;
}
.grocery-list-link small {
    display:block;
    font-size:12px;
    color:var(--text-secondary);
    margin:6px 0 0 30px;
}
.grocery-list-link:hover {
    background:var(--glass-fill);
    color:var(--text-primary);
}
.grocery-list-link.is-current {
    background:color-mix(in srgb,var(--surface) 64%,#9ca98c 36%);
    box-shadow:var(--elevation-inset-compact);
}
.grocery-new-link {
    width:100%;
    font-size:13px;
    gap:8px;
    min-height:44px;
}
.grocery-rail-note {
    font-size:12px;
    color:var(--text-secondary);
    padding:20px 10px 0;
    line-height:1.8;
}
.grocery-list-heading {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:start;
    margin-bottom:22px;
}
.grocery-list-heading h1 {
    font-size:clamp(27px,2.7vw,36px);
    font-weight:500;
    margin:6px 0;
    overflow-wrap:anywhere;
}
.grocery-list-heading p {
    color:var(--text-secondary);
    font-size:13px;
}
.grocery-heading-actions {
    display:flex;
    gap:8px;
}
.grocery-heading-actions .btn {
    font-size:12px;
    padding:8px 12px;
    white-space:nowrap;
    min-height:44px;
}
.grocery-source-banner {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 18px;
    border:1px solid var(--border-color);
    background:color-mix(in srgb,var(--surface) 78%,#9ca98c 22%);
    border-radius:16px;
    margin-bottom:20px;
    font-size:13px;
    flex-wrap:wrap;
}
.grocery-source-banner p {
    color:var(--text-secondary);
    font-size:12px;
}
.grocery-source-banner>span {
    margin-left:auto;
    color:var(--text-secondary);
    font-size:12px;
}
.grocery-detail-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    align-items:start;
}
.grocery-detail-layout.has-inspector {
    grid-template-columns:minmax(0,1fr) 260px;
}
.grocery-shopping {
    padding:24px;
    border-radius:24px;
    border:1px solid var(--border-color);
    min-width:0;
}
.grocery-section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.grocery-section-heading h2 {
    font-size:23px;
    font-weight:500;
}
.grocery-pill {
    font-size:11px;
    font-weight:800;
    padding:5px 9px;
    white-space:nowrap;
    background:color-mix(in srgb,var(--surface) 60%,#9ca98c 40%);
    border-radius:9px;
}
.grocery-progress {
    height:6px;
    background:color-mix(in srgb,var(--text-secondary) 18%,var(--surface));
    border-radius:8px;
    margin:16px 0 18px;
    overflow:hidden;
}
.grocery-progress>div {
    height:100%;
    background:#788563;
    border-radius:8px;
    transition:width .2s;
}
.grocery-tools {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}
.grocery-tools label {
    min-width:0;
    max-width:240px;
}
.grocery-tools input {
    width:100%;
}
.grocery-tools button {
    font-size:12px;
    min-height:44px;
    white-space:nowrap;
    padding-inline:10px;
}
.grocery-row {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:78px;
    padding:14px 0;
    border-bottom:1px solid var(--border-color);
}
.grocery-row input[type=checkbox] {
    appearance:none;
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:8px;
    border:1.5px solid var(--field-border);
    background:var(--surface);
    box-shadow:var(--elevation-inset-compact);
    flex-shrink:0;
    cursor:pointer;
    position:relative;
}
.grocery-row input[type=checkbox]::before {
    content:'';
    position:absolute;
    inset:-10px;
}
.grocery-row input[type=checkbox]:checked {
    background:#6d7b58;
    border-color:#6d7b58;
    box-shadow:none;
}
.grocery-row input[type=checkbox]:checked::after {
    content:'✓';
    font-size:18px;
    font-weight:900;
    color:#fff;
}
.grocery-row input[type=checkbox]:disabled {
    cursor:wait;
    opacity:.65;
}
.grocery-row>label {
    flex:1;
    min-width:0;
    cursor:pointer;
}
.grocery-row strong {
    font-size:14px;
    display:block;
    overflow-wrap:anywhere;
}
.grocery-row small {
    display:block;
    font-size:11px;
    margin-top:3px;
    color:var(--text-secondary);
}
.grocery-row.is-checked>label>strong {
    text-decoration:line-through;
    color:var(--text-secondary);
}
.grocery-row.is-checked .grocery-amount {
    color:var(--text-secondary);
}
.grocery-amount {
    font-size:13px;
    font-weight:800;
    max-width:150px;
    overflow-wrap:anywhere;
}
.grocery-row-actions {
    display:flex;
    gap:2px;
}
.grocery-icon-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:8px;
    border-radius:12px;
}
.grocery-inspector {
    padding:22px;
    border-radius:22px;
    border:1px solid var(--border-color);
    background:color-mix(in srgb,var(--surface) 65%,#9ca98c 35%);
    position:sticky;
    top:110px;
    max-height:calc(100dvh - 135px);
    overflow:auto;
    scrollbar-width:thin;
}
.grocery-inspector h2 {
    font-size:25px;
    font-weight:500;
    margin:16px 0 8px;
    overflow-wrap:anywhere;
}
.grocery-inspector h3 {
    font:800 11px var(--font-body);
    letter-spacing:.07em;
    text-transform:uppercase;
    margin:20px 0 12px;
}
.grocery-inspector-amount {
    font:500 32px var(--font-display);
    margin-top:12px;
    overflow-wrap:anywhere;
}
.grocery-contribution {
    border-radius:12px;
    padding:14px;
    background:var(--surface);
    font-size:13px;
    margin-bottom:12px;
    overflow-wrap:anywhere;
}
.grocery-contribution strong {
    display:block;
    font-size:13px;
    margin-bottom:6px;
}
.grocery-contribution .grocery-muted {
    font-size:11px;
    margin-top:6px;
}
.grocery-edited-note,.grocery-uncertainty {
    font-size:12px;
    background:var(--surface);
    padding:10px 12px;
    border-radius:10px;
    margin-top:12px;
    color:var(--text-secondary);
}
.grocery-add-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) 85px 85px auto;
    gap:8px;
    margin:24px 0 10px;
    align-items:center;
}
.grocery-add-row>* {
    min-width:0;
}
.grocery-add-name .ingredient-autocomplete__list {
    min-width:min(280px,calc(100vw - 80px));
}
.grocery-add-row input {
    width:100%;
    min-width:0;
    padding-inline:10px;
}
.grocery-add-row .btn {
    min-width:52px;
    min-height:44px;
    padding:10px;
    font-size:13px;
}
.grocery-save-status {
    color:var(--text-secondary);
    font-size:11px;
    margin-top:18px;
}
.grocery-empty {
    color:var(--text-secondary);
    padding:30px 8px;
    text-align:center;
}
.grocery-state {
    padding:48px 30px;
    text-align:center;
    border-radius:24px;
}
.grocery-state h1 {
    font-size:31px;
    font-weight:500;
    margin:18px 0;
}
.grocery-state p {
    color:var(--text-secondary);
    max-width:490px;
    margin:0 auto 24px;
}
.grocery-state .grocery-icon {
    width:50px;
    height:50px;
    color:#788563;
}
.grocery-edit-dialog {
    max-width:540px;
    width:calc(100vw - 32px);
}
.grocery-edit-dialog h2 {
    font-size:28px;
    font-weight:500;
    margin-bottom:18px;
}
.grocery-edit-dialog label {
    display:block;
    font-weight:800;
    font-size:13px;
    margin:16px 0 7px;
}
.grocery-edit-dialog input {
    width:100%;
}
.grocery-edit-amounts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.grocery-edit-amounts input {
    margin-top:7px;
}
.grocery-dialog-actions {
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:26px;
}
.grocery-remove {
    color:var(--error-ink);
    margin-top:20px;
    min-height:44px;
}
.grocery-create-page {
    max-width:700px;
    padding-bottom:48px;
}
.grocery-create-heading {
    margin-bottom:26px;
}
.grocery-create-heading h1 {
    font-size:36px;
    font-weight:500;
    margin:8px 0 10px;
}
.grocery-create-heading p {
    font-size:14px;
    color:var(--text-secondary);
}
.grocery-compact-form {
    border-radius:24px;
    border:1px solid var(--border-color);
    padding:30px;
}
.grocery-compact-form>.input {
    width:100%;
}
.grocery-field-label {
    display:block;
    font-size:13px;
    font-weight:800;
    margin-bottom:8px;
}
.grocery-start-label {
    margin-top:24px;
    margin-bottom:3px;
}
.grocery-mode-choice {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:18px 0 26px;
}
.grocery-mode {
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 16px;
    background:var(--neumo-surface);
    box-shadow:var(--elevation-raised-compact);
    border:1px solid var(--border-color);
    border-radius:16px;
    text-align:left;
    cursor:pointer;
    color:var(--text-primary);
    font-family:var(--font-body);
}
.grocery-mode.is-selected {
    background:color-mix(in srgb,var(--surface) 65%,#9ca98c 35%);
    box-shadow:var(--elevation-inset-compact);
    border-color:color-mix(in srgb,var(--text-secondary) 50%,transparent);
}
.grocery-mode strong {
    display:block;
    font-size:13px;
    font-weight:800;
}
.grocery-mode small {
    display:block;
    font-size:11px;
    color:var(--text-secondary);
    margin-top:3px;
}
.grocery-manual-editor {
    margin:24px 0;
}
.grocery-manual-editor h2,.grocery-recipe-picker h2 {
    font-size:21px;
    font-weight:500;
    margin-bottom:8px;
}
.grocery-manual-editor .grocery-add-row {
    margin-top:12px;
}
.grocery-manual-editor .grocery-muted {
    font-size:12px;
}
.grocery-draft-row {
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:center;
    border-bottom:1px solid var(--border-color);
    padding:10px 0;
    min-height:55px;
    font-size:13px;
}
.grocery-draft-row strong {
    overflow-wrap:anywhere;
}
.grocery-draft-row small {
    display:block;
    color:var(--text-secondary);
    font-size:12px;
}
.grocery-draft-row button {
    min-height:44px;
    min-width:44px;
}
.grocery-recipe-search {
    display:flex;
    gap:8px;
    margin:15px 0;
}
.grocery-recipe-search label {
    min-width:0;
    flex:1;
}
.grocery-recipe-search input {
    width:100%;
}
.grocery-recipe-search .btn {
    min-height:44px;
    font-size:12px;
    padding:10px 14px;
}
.grocery-recipe-options {
    max-height:230px;
    overflow:auto;
    scrollbar-width:thin;
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:0 12px;
}
.grocery-recipe-option {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--border-color);
}
.grocery-recipe-option:last-child {
    border-bottom:0;
}
.grocery-recipe-option>div {
    min-width:0;
    flex:1;
}
.grocery-recipe-option strong {
    font-size:13px;
    display:block;
    overflow-wrap:anywhere;
}
.grocery-recipe-option small {
    display:block;
    font-size:11px;
    color:var(--text-secondary);
}
.grocery-recipe-option .btn {
    font-size:12px;
    padding:8px 12px;
    min-height:44px;
}
.grocery-recipe-pagination {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    font-size:11px;
    margin-top:4px;
}
.grocery-recipe-pagination .btn {
    font-size:12px;
    min-height:44px;
}
.grocery-selected-recipe {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 12px;
    border:1px solid var(--border-color);
    border-radius:13px;
    background:color-mix(in srgb,var(--surface) 78%,#9ca98c 22%);
    margin:10px 0;
}
.grocery-selected-recipe>div {
    min-width:0;
    flex:1;
}
.grocery-selected-recipe strong {
    display:block;
    font-size:13px;
    overflow-wrap:anywhere;
}
.grocery-selected-recipe small {
    display:block;
    font-size:11px;
    color:var(--text-secondary);
    margin-top:4px;
}
.grocery-selected-recipe>label {
    font-size:10px;
    color:var(--text-secondary);
    text-align:center;
    width:65px;
    flex-shrink:0;
}
.grocery-selected-recipe input {
    width:65px;
    min-height:40px;
    margin-top:4px;
    padding:7px;
}
.grocery-selected-recipe .btn {
    min-height:44px;
    min-width:44px;
    padding:8px;
}
.grocery-preview {
    border-block:1px solid var(--border-color);
    padding:18px 0;
    margin-top:24px;
}
.grocery-preview summary {
    font-weight:800;
    cursor:pointer;
    min-height:44px;
    display:flex;
    align-items:center;
    color:var(--accent-ink);
    font-size:13px;
}
.grocery-preview summary::after {
    content:'⌄';
    margin-left:auto;
}
.grocery-preview .grocery-muted {
    margin-top:16px;
}
.grocery-create-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    border-top:1px solid var(--border-color);
    padding-top:22px;
    margin-top:24px;
}
.grocery-create-actions>.btn-primary {
    flex:1;
    min-height:46px;
    font-size:14px;
}
.grocery-create-footnote {
    font-size:11px;
    color:var(--text-secondary);
    margin-top:18px;
    text-align:center;
}
.grocery-retry-note {
    font-size:12px;
    color:var(--warning-ink);
    margin-top:20px;
}
.grocery-page :is(input,button,a):focus-visible,.grocery-create-page :is(input,button,a,summary):focus-visible,.grocery-edit-dialog :is(input,button):focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:3px;
}
@media(max-width:1150px) {
    .grocery-detail-layout.has-inspector {
        grid-template-columns:minmax(0,1fr);
    }
    .grocery-inspector {
        position:static;
        max-height:none;
    }
    .grocery-row-actions {
        gap:0;
    }
    .grocery-row {
        gap:10px;
    }
    .grocery-workspace {
        grid-template-columns:200px minmax(0,1fr);
        gap:20px;
    }
}
@media(max-width:760px) {
    .grocery-page,.grocery-create-page {
        padding-inline:18px;
    }
    .grocery-workspace {
        grid-template-columns:minmax(0,1fr);
        gap:24px;
    }
    .grocery-rail {
        position:static;
        padding:16px;
        border-radius:20px;
    }
    .grocery-list-links {
        display:flex;
        gap:12px;
        overflow-x:auto;
        overflow-y:hidden;
        max-height:none;
        margin:8px 0 14px;
    }
    .grocery-list-link {
        min-width:185px;
        max-width:185px;
        flex-shrink:0;
        margin:0;
        padding:12px;
    }
    .grocery-list-link>div {
        font-size:13px;
    }
    .grocery-rail-note {
        display:none;
    }
    .grocery-new-link {
        min-height:44px;
    }
    .grocery-list-heading {
        flex-wrap:wrap;
        gap:14px;
    }
    .grocery-list-heading h1 {
        font-size:29px;
    }
    .grocery-heading-actions {
        width:100%;
    }
    .grocery-source-banner {
        padding:14px;
    }
    .grocery-source-banner>span {
        margin-left:30px;
    }
    .grocery-shopping {
        padding:18px;
        border-radius:20px;
    }
    .grocery-section-heading {
        flex-wrap:wrap;
    }
    .grocery-section-heading h2 {
        font-size:22px;
    }
    .grocery-row {
        flex-wrap:wrap;
        gap:10px;
        padding:14px 0;
    }
    .grocery-row>label {
        min-width:90px;
    }
    .grocery-amount {
        max-width:100px;
        font-size:12px;
    }
    .grocery-row-actions {
        margin-left:auto;
    }
    .grocery-icon-button {
        min-width:44px;
        min-height:44px;
    }
    .grocery-add-row {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) 58px;
        gap:8px;
    }
    .grocery-add-row>label:first-child,.grocery-add-row>.grocery-add-name {
        grid-column:1/-1;
    }
    .grocery-tools {
        gap:8px;
    }
    .grocery-tools label {
        max-width:190px;
    }
    .grocery-tools .input {
        padding:10px;
    }
    .grocery-tools button {
        font-size:11px;
    }
    .grocery-inspector {
        padding:18px;
        scroll-margin-top:100px;
    }
    .grocery-inspector h2 {
        font-size:24px;
    }
    .grocery-inspector-amount {
        font-size:28px;
    }
    .grocery-compact-form {
        padding:22px;
        border-radius:20px;
    }
    .grocery-create-heading h1 {
        font-size:30px;
    }
    .grocery-mode-choice {
        gap:10px;
    }
    .grocery-mode {
        padding:13px 12px;
        gap:8px;
    }
    .grocery-mode .grocery-icon {
        width:18px;
    }
    .grocery-mode small {
        font-size:10px;
    }
    .grocery-mode strong {
        font-size:12px;
    }
    .grocery-state {
        padding:32px 20px;
    }
    .grocery-state h1 {
        font-size:28px;
    }
    .grocery-create-actions .btn {
        padding-inline:14px;
    }
    .grocery-recipe-options {
        max-height:260px;
    }
    .grocery-recipe-search .btn {
        padding-inline:10px;
    }
    .grocery-selected-recipe {
        gap:8px;
        padding:12px;
    }
    .grocery-recipe-picker>.grocery-muted {
        font-size:12px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .grocery-progress>div {
        transition:none;
    }
}

.grocery-page input.input,
.grocery-create-page input.input,
.grocery-edit-dialog input.input {
    min-height:44px;
}

/* Compact creation controls, with comfortable checkbox targets on mobile. */
.grocery-ingredient-options { display:grid; gap:8px; margin:16px 0; min-width:0; }
.grocery-option-toggle { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.grocery-option-toggle input { width:20px; height:20px; flex-shrink:0; accent-color:var(--accent); }
.grocery-ingredient-options select { width:100%; min-width:0; }
.grocery-ingredient-options p { margin:0; }
.grocery-put-away-items { max-height:40vh; overflow-y:auto; margin:16px 0; }
.grocery-put-away-items span { overflow-wrap:anywhere; }
.grocery-put-away-items .grocery-option-toggle { display:flex; align-items:center; gap:10px; font-weight:500; margin:0; }
.grocery-edit-dialog fieldset { border:0; padding:0; margin:12px 0; }
.grocery-edit-dialog fieldset .grocery-option-toggle { display:flex; align-items:center; gap:10px; margin:0; font-weight:500; }