/* Pantry W01 / C01: shared grocery composition and Noms materials. */
.pantry-cookable { margin-top: 28px; padding: 24px; border-radius: 24px; min-width: 0; }
.pantry-cookable h2 { margin: 0 0 10px; font-size: 25px; font-weight: 500; }
.pantry-cookable-intro { margin-bottom: 8px; line-height: 1.6; }
.pantry-cookable-hint { font-size: 12px; margin-bottom: 20px; line-height: 1.6; }
.pantry-cookable-empty { padding: 18px 0; line-height: 1.6; color: var(--text-secondary); }
.pantry-cookable-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.pantry-cookable-match { min-width: 0; }
.pantry-cookable-match__status { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--text-primary); }
.pantry-cookable-match__status--optional { color: var(--text-secondary); }
.pantry-cookable-pages { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media(max-width:1100px) { .pantry-cookable-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .pantry-cookable { padding: 18px; } .pantry-cookable-grid { grid-template-columns: minmax(0,1fr); } }
.kitchen-header {
    max-width:1480px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    margin-bottom:28px;
}
.kitchen-title {
    margin:0;
    font-family:var(--font-display);
    font-size:32px;
    line-height:1.2;
    color:var(--text-primary);
}
.kitchen-description {
    max-width:85ch;
    margin:0;
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.65;
    overflow-wrap:anywhere;
}
.kitchen-views {
    display:flex;
    gap:6px;
    padding:5px;
    border-radius:18px;
    background:var(--neumo-surface);
    box-shadow:var(--elevation-inset-compact);
}
.kitchen-view {
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 22px;
    border-radius:13px;
    font-size:14px;
    font-weight:800;
    color:var(--text-secondary);
    text-decoration:none!important;
}
.kitchen-view:hover { color:var(--text-primary); }
.kitchen-view[aria-current=page] {
    color:var(--accent-ink);
    background:var(--surface);
    box-shadow:var(--elevation-raised-compact);
}
.kitchen-view:focus-visible {
    outline:3px solid var(--accent-ink);
    outline-offset:3px;
}
.kitchen-workspace .grocery-page { max-width:1480px; }
@media (max-width:760px) {
    .kitchen-header {
        padding-inline:18px;
        align-items:stretch;
        margin-bottom:24px;
    }
    .kitchen-title { font-size:28px; }
    .kitchen-view { flex:1; padding-inline:12px; }
}
.pantry-page {
    max-width:1480px;
}
.pantry-detail-layout.has-inspector {
    grid-template-columns:minmax(0,1fr) 270px;
}



.pantry-row {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:78px;
    padding:12px 0;
    border-bottom:1px solid var(--border-color);
}
.pantry-row-name {
    flex:1;
    min-width:0;
}
.pantry-row-name strong {
    display:block;
    font-size:14px;
    overflow-wrap:anywhere;
}
.pantry-row-name small {
    display:block;
    font-size:11px;
    color:var(--text-secondary);
    margin-top:3px;
}
.pantry-row-out .pantry-row-name strong {
    color:var(--text-secondary);
    text-decoration:line-through;
}
.pantry-stock-toggle {
    width:44px;
    min-width:44px;
    min-height:44px;
    border:1px solid var(--border-color);
    border-radius:12px;
    color:var(--success-ink);
    background:color-mix(in srgb,var(--surface) 65%,#9ca98c 35%);
    display:grid;
    place-items:center;
}
.pantry-stock-toggle[aria-pressed=false] {
    background:var(--neumo-surface);
    color:var(--text-secondary);
    box-shadow:var(--elevation-inset-compact);
}
.pantry-stock-toggle:disabled {
    opacity:.5;
    cursor:wait;
}
.pantry-edit-trigger {
    padding:8px;
    min-width:44px;
    min-height:44px;
}
.pantry-editor-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.pantry-editor-form,.pantry-profile-form {
    display:grid;
    gap:12px;
    margin-top:24px;
}
.pantry-editor-form input,.pantry-profile-form input {
    width:100%;
    min-width:0;
    min-height:44px;
}
.pantry-editor-form label,.pantry-profile-form label {
    font-size:12px;
    font-weight:800;
}
.pantry-amount-fields {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
    margin:8px 0;
}
.pantry-amount-fields .grocery-muted {
    display:block;
    font-size:10px;
    font-weight:400;
}
.pantry-remove {
    margin-top:15px;
    color:var(--error-ink);
    font-size:12px;
}

.pantry-empty {
    padding:25px 0;
}
.pantry-page .grocery-tools {
    flex-wrap:wrap;
}
.pantry-page .grocery-tools input {
    flex:1;
    width:auto;
    min-width:110px;
}
.pantry-page .grocery-tools select {
    max-width:180px;
}
.pantry-create-page {
    max-width:850px;
}
.pantry-create-card {
    max-width:660px;
    margin:24px auto 0;
    padding:28px;
    border-radius:25px;
    border:1px solid var(--border-color);
}
.pantry-create-intro {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:26px;
}
.pantry-create-intro h2 {
    font-size:25px;
    font-weight:500;
}
.pantry-create-intro>.grocery-icon {
    width:52px;
    height:60px;
    color:var(--success-ink);
}
.pantry-create-card>label {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:800;
    margin:19px 0 8px;
}
.pantry-create-card>input {
    width:100%;
    min-height:46px;
}
.pantry-create-card>label .grocery-muted {
    font-weight:400;
    font-size:11px;
}
.pantry-initial-section {
    margin:25px 0;
}
.pantry-initial-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:15px;
}
.pantry-initial-heading h3 {
    font-size:20px;
    font-weight:500;
}





.pantry-draft-row {
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 0;
    border-bottom:1px solid var(--border-color);
    font-size:13px;
}
.pantry-draft-row>strong {
    flex:1;
    min-width:0;
    overflow-wrap:anywhere;
}
.pantry-draft-row>span {
    font-size:12px;
    max-width:100px;
    color:var(--text-secondary);
    overflow-wrap:anywhere;
}
.pantry-draft-row button {
    padding:8px;
    min-width:44px;
    min-height:44px;
}
.pantry-draft-rows {
    padding:10px 0;
}
.pantry-create-card .grocery-add-row {
    grid-template-columns:minmax(0,1fr) 80px 80px auto;
}

.pantry-create-card .grocery-create-actions {
    margin-top:24px;
}
.pantry-editor .grocery-error {
    font-size:12px;
}
.pantry-page button:focus-visible,.pantry-page a:focus-visible,.pantry-create-page button:focus-visible {
    outline:3px solid var(--focus-ring);
    outline-offset:3px;
}
@media(max-width:1100px) {
    .pantry-detail-layout.has-inspector {
        grid-template-columns:1fr;
    }
    .pantry-editor {
        position:static;
        max-height:none;
    }
    .pantry-page .grocery-workspace {
        grid-template-columns:190px minmax(0,1fr);
    }
}
@media(max-width:760px) {
    .pantry-page .grocery-workspace {
        grid-template-columns:1fr;
    }
    .pantry-page .grocery-rail {
        position:static;
        top:auto;
    }
    .pantry-page .grocery-list-links {
        display:flex;
        overflow-x:auto;
        max-height:none;
        gap:8px;
        margin:10px 0;
    }
    .pantry-page .pantry-profile-link {
        min-width:165px;
        flex:none;
        margin:0;
    }
    .pantry-page .grocery-rail .grocery-new-link {
        margin-top:12px;
    }
    .pantry-page .grocery-list-heading {
        flex-wrap:wrap;
    }
    .pantry-page .grocery-heading-actions {
        width:100%;
        flex-wrap:wrap;
    }
    .pantry-page .grocery-heading-actions button {
        flex:1;
        font-size:12px;
        min-height:44px;
    }
    .pantry-row {
        gap:8px;
    }
    .pantry-row .grocery-amount {
        font-size:12px;
        max-width:75px;
        overflow-wrap:anywhere;
        white-space:normal;
    }
    .pantry-row-name strong {
        font-size:14px;
    }
    .pantry-row-name small {
        font-size:10px;
    }
    .pantry-editor {
        margin-top:0;
    }
    .pantry-create-card {
        padding:20px;
        border-radius:21px;
    }
    .pantry-create-intro h2 {
        font-size:23px;
    }
    .pantry-create-card .grocery-add-row,.pantry-add {
        grid-template-columns:minmax(0,1fr) 56px 56px auto;
    }

    .pantry-create-card .grocery-add-row>.grocery-add-name,.pantry-add>.grocery-add-name {
        grid-column:auto;
    }
    .pantry-draft-row {
        gap:6px;
    }
    .pantry-draft-row>span {
        max-width:80px;
        font-size:11px;
    }
    .pantry-create-intro>.grocery-icon {
        width:40px;
        height:48px;
    }
    .pantry-initial-heading h3 {
        font-size:19px;
    }
    .pantry-create-card .grocery-add-row .btn,.pantry-add .btn {
        min-width:44px;
        padding:8px;
    }
    .pantry-page .grocery-tools select {
        max-width:100%;
        flex:1;
    }
    .pantry-page .grocery-shopping {
        padding:18px;
    }
    .pantry-page .grocery-list-links {
        padding-bottom:10px;
    }
}
@media(max-width:350px) {
    .pantry-page .grocery-shopping {
        padding:14px;
    }
    .pantry-row {
        gap:5px;
    }
    .pantry-row-name strong {
        font-size:12px;
    }
    .pantry-row .grocery-amount {
        max-width:55px;
        font-size:11px;
    }
    .pantry-create-card {
        padding:16px;
    }
    .pantry-create-card .grocery-add-row,.pantry-add {
        grid-template-columns:minmax(0,1fr) 50px 50px 44px;
        gap:5px;
    }

}
.pantry-modal {
    max-width:560px;
    width:min(560px,calc(100vw - 32px));
}
.pantry-modal .grocery-error {
    margin:0;
}
.pantry-modal h2 {
    font-size:25px;
}
.pantry-editor:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:4px;
}
.pantry-page .grocery-list-heading {
    flex-wrap:wrap;
}
.pantry-page .grocery-list-heading>div:first-child {
    flex:1;
    min-width:220px;
}
.pantry-page .grocery-heading-actions {
    flex-wrap:wrap;
}