/* pka-mealboard pantry page + item sheet, phone first (Brendan 2026-10-18:
   "fully flushed out and ACTUALLY usable"). Rules from the guided-flow spec
   mobile section: 390px, no horizontal scroll, tap targets >= 48px, body text
   16px (secondary 14px minimum), one primary button per screen (54px). Warm-
   paper tokens from app.css :root only; no new colors. Everything is scoped to
   #screen-pantry or #itemModal so no other screen is touched. */

/* ---------- action row: Add item + Take photos (both outline; the page's one
   primary is the flow footer, Back to this week) ---------- */
#screen-pantry .screen-title{ margin-bottom:12px; }
.pn-actions{ display:flex; gap:12px; margin-bottom:12px; }
.pn-action{
  flex:1 1 0; min-width:0; min-height:48px; padding:10px 12px; background:var(--cream-card); color:var(--charcoal);
  border:1.5px solid var(--charcoal); border-radius:var(--radius-md); font:700 16px var(--font-body); cursor:pointer;
}
.pn-action:disabled{ opacity:.55; cursor:default; }
/* Add item is the page's main action (filled); Take photos stays outline-light. */
.pn-action:not(.pn-action-quiet){ background:var(--charcoal); color:#FBF6EE; }
/* Take photos is the lighter of the two: Add item is the main way to change the pantry from a phone. */
.pn-action.pn-action-quiet{ border:1px solid #cfc3ad; color:var(--terracotta-dark); font-weight:600; }
#screen-pantry .manual-edit-hint{ font-size:14px; color:var(--charcoal-soft); margin:0 0 14px; }

/* While the Add item form or the photo panel is open, that task owns the
   screen: the flow's footer (Back to this week) steps aside so there is one
   obvious action. It returns the moment the task closes. */
#flowPage:has(#screen-pantry:not([hidden]) .pn-add-card) .fl-cta,
#flowPage:has(#screen-pantry:not([hidden]) .photo-flow) .fl-cta{ display:none; }
#screen-pantry:has(.pn-add-card) .manual-edit-hint, #screen-pantry:has(.photo-flow) .manual-edit-hint{ display:none; }

/* ---------- search and filter ---------- */
.pn-find{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.pn-find select{ min-height:48px; font-size:16px; padding:10px 12px; border:1px solid #cfc3ad; border-radius:10px; background:#fff; color:var(--charcoal); }
/* The search field's clear control, in the app's own colors instead of the system blue. */
#pantrySearch::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; width:40px; height:40px; margin:0 -8px 0 0; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%235B5349' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}
#pantryResultCount{ font-size:14px; color:var(--charcoal-soft); }

/* ---------- Add item ---------- */
.pn-add-card{
  background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px; margin-bottom:14px;
}
.pn-add-card h3{ font-size:20px; margin:0 0 4px; }
.pn-add-card label, .pn-add-card .pn-label{ display:block; font-size:14px; font-weight:700; color:var(--charcoal-soft); margin:14px 0 6px; }
.pn-add-card input{ width:100%; min-height:48px; font:inherit; font-size:16px; padding:12px; border:1px solid #cfc3ad; border-radius:10px; background:#fff; color:var(--charcoal); }
.pn-add-cancel{
  display:block; width:100%; min-height:48px; margin-top:8px; background:none; border:0;
  color:var(--terracotta-dark); font:600 16px var(--font-body); cursor:pointer;
}
.pn-error{ font-size:14px; color:var(--rust-tint-text); font-weight:700; margin-top:10px; }

/* ---------- segmented choices (location, availability, etc.) ---------- */
.pn-seg, #itemModal .segmented{ display:flex; flex-wrap:wrap; gap:8px; }
.pn-seg-btn, #itemModal .seg-btn{
  min-height:48px; padding:10px 16px; font:700 16px var(--font-body); border-radius:999px;
  border:1px solid #cfc3ad; background:var(--cream-card); color:var(--charcoal-soft); cursor:pointer;
}
.pn-seg-btn{ flex:1 1 0; }
.pn-seg-btn[aria-pressed="true"], #itemModal .seg-btn[aria-pressed="true"]{ background:var(--charcoal); color:#FBF6EE; border-color:var(--charcoal); }
#itemModal .seg-btn.chip-toggle[aria-pressed="true"]{ background:var(--sage); border-color:var(--sage); }
#itemModal .segmented.pn-loc .seg-btn{ flex:1 1 0; }

/* ---------- primary and secondary buttons (54px / 48px) ---------- */
.pn-primary, #itemModal .save-btn{
  display:block; width:100%; min-height:54px; padding:14px; margin-top:12px;
  background:var(--charcoal); color:#FBF6EE; border:0; border-radius:14px;
  font:700 17px var(--font-body); cursor:pointer;
}
.pn-primary:disabled, #itemModal .save-btn:disabled{ opacity:.5; cursor:not-allowed; }
#itemModal .save-btn.save-outline{
  min-height:48px; background:transparent; color:var(--charcoal); border:1.5px solid #bdb19b;
  font-size:16px; font-weight:600;
}
#screen-pantry .pf-primary-btn{ min-height:54px; font-size:17px; }
#screen-pantry .pf-secondary-btn{ min-height:48px; font-size:16px; }

/* ---------- groups (collapsed by default), one white card per group ---------- */
#screen-pantry details.pn-group{ margin-bottom:10px; background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
#screen-pantry summary.group-title{
  min-height:56px; padding:10px 16px; margin:0; font-size:16px; text-transform:none; letter-spacing:0;
  color:var(--charcoal); align-items:center; flex-wrap:nowrap; cursor:pointer; list-style:none;
}
#screen-pantry summary.group-title::-webkit-details-marker{ display:none; }
#screen-pantry summary.group-title::after{ content:"+"; font-size:24px; line-height:1; color:var(--charcoal-soft); font-weight:400; }
#screen-pantry details[open] > summary.group-title::after{ content:"\2212"; }
#screen-pantry .pn-group-name{ font-family:var(--font-head); font-size:19px; }
#screen-pantry .pn-group-count{ font-size:14px; font-weight:600; color:var(--charcoal-soft); margin-left:auto; margin-right:12px; }
#screen-pantry .pn-rows{ display:block; }

/* ---------- item rows: hairline-separated, no nested cards ---------- */
#screen-pantry .trow{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; width:100%;
  min-height:72px; padding:14px 16px; border:0; border-top:1px solid var(--line); border-radius:0;
  background:transparent; text-align:left; white-space:normal; overflow-wrap:anywhere;
}
@media (hover:hover){ #screen-pantry .trow:hover{ background:#F5EFE1; } }
#screen-pantry .tr-main{ min-width:0; width:100%; }
#screen-pantry .tr-name{ font-size:16px; line-height:1.3; flex-wrap:wrap; gap:4px 0; }
#screen-pantry .tr-desc{
  font-size:14px; line-height:1.4; margin-top:3px; white-space:normal;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#screen-pantry .status-item{ font-size:14px; white-space:normal; }
#screen-pantry .tag-gf{ font-size:14px; padding:1px 8px; margin-left:8px; }
#screen-pantry .pn-view{ font-size:14px; font-weight:600; color:var(--terracotta-dark); }
#screen-pantry .empty-state{ font-size:16px; }

/* ---------- photo flow ---------- */
#screen-pantry .photo-flow{ margin-bottom:14px; }
#screen-pantry .pf-panel-head h3{ font-size:16px; }
#screen-pantry .pf-cancel{ min-height:48px; min-width:48px; padding:10px 18px; font-size:16px; }
#screen-pantry .pf-step-label, #screen-pantry .pf-step-dot{ font-size:14px; }
#screen-pantry .pf-thumb-label{ font-size:14px; }
#screen-pantry .pf-processing-title{ font-size:16px; }
#screen-pantry .pf-processing-sub, #screen-pantry .pf-leave-note{ font-size:14px; }
#screen-pantry .pf-help{ font-size:14px; color:var(--charcoal-soft); margin:0 0 8px; }
#screen-pantry .pf-section-select{ width:100%; margin-bottom:14px; min-height:48px; font-size:16px; padding:10px 12px; border:1px solid #cfc3ad; border-radius:10px; background:#fff; color:var(--charcoal); }
/* Choose Files control, styled to match the app. */
#screen-pantry .pf-file-input{
  width:100%; min-height:48px; margin-bottom:12px; font-size:14px; color:var(--charcoal-soft);
  background:#fff; border:1px solid #cfc3ad; border-radius:10px; padding:0;
}
#screen-pantry .pf-file-input::file-selector-button{
  min-height:48px; margin:0 12px 0 0; padding:0 18px; border:0; border-right:1px solid #cfc3ad;
  background:var(--cream-card); color:var(--charcoal); font:700 16px var(--font-body); cursor:pointer;
  border-radius:10px 0 0 10px;
}

/* ---------- item sheet ---------- */
.item-modal{ --pn-pad:18px; padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px)); }
@media (min-width:900px){ .item-modal{ --pn-pad:26px; } }
#itemModal .detail-item-name{ font-size:20px; overflow-wrap:anywhere; }
#itemModal .status-item{ font-size:14px; white-space:normal; }
#itemModal .modal-close{ width:48px; height:48px; font-size:18px; }
#itemModal .field-label{ font-size:14px; }
#itemModal .pn-field{ width:100%; min-height:48px; font:inherit; font-size:16px; padding:12px; border:1px solid #cfc3ad; border-radius:10px; background:#fff; color:var(--charcoal); }
#itemModal textarea.pn-field{ min-height:96px; resize:none; line-height:1.4; overflow:hidden; }
#itemModal .save-hint, #itemModal .field-error{ font-size:14px; }
#itemModal .save-hint{ color:var(--charcoal-soft); text-align:left; margin:4px 0 0; }
/* The save actions stay in view at the bottom of the sheet while the fields
   scroll, and clear the iPhone home indicator. */
#itemModal .pn-sheet-bar{
  position:sticky; bottom:0; z-index:2; background:var(--cream); border-top:1px solid var(--line);
  margin:12px calc(-1 * var(--pn-pad)) 0; padding:6px var(--pn-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 10px 0 var(--cream);
}
#itemModal .pn-sheet-bar .save-btn:first-child{ margin-top:6px; }
#itemModal .history-entry{ font-size:14px; overflow-wrap:anywhere; }
#itemModal h3.group-title{ font-size:16px; text-transform:none; letter-spacing:0; color:var(--charcoal-soft); }
#itemModal .tech-details summary{ min-height:48px; display:flex; align-items:center; font-size:16px; }

/* ---------- toast: a readable rounded card above the footer, never a blob ---------- */
body:has(#sideRoot:not([hidden])) #toast{
  font-size:15px; line-height:1.35; border-radius:14px; padding:12px 18px; max-width:min(88vw, 420px);
  bottom:calc(var(--fl-cta-h, 0px) + 16px + env(safe-area-inset-bottom, 0px));
}

/* On the pantry page only, Add item is the one filled primary: the flow's
   "Back to this week" footer button becomes an outline button here. Other
   flow screens keep their own filled footer primary. */
#flowPage:has(#screen-pantry:not([hidden])) #flowCta .fl-btn[data-action="close-side"]{
  background:transparent; color:var(--charcoal); border:1.5px solid #bdb19b; font-weight:600;
}

/* Updated-at line, quiet; error state with retry. */
.pn-meta{ font-size:14px; color:var(--charcoal-soft); }
.pn-retry{ width:100%; margin-top:10px; flex:none; }
/* One label case and one heading face across the add form and the item sheet; row status in regular weight. */
#itemModal .field-label{ text-transform:none; letter-spacing:0; }
#itemModal .detail-item-name, .pn-add-card h3{ font-family:var(--font-head); }
#screen-pantry .trow .status-item{ font-weight:400; }
body:has(#sideRoot:not([hidden])) #toast{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Rows of a collapsed group take no space and have no tap area at all. */
#screen-pantry details.pn-group:not([open]) > .pn-rows{ display:none; }

/* ---------- this save changed this week's grocery list ---------- */
.pn-list-note{ background:var(--amber-tint); color:var(--amber-tint-text); border-radius:14px; padding:14px; margin-bottom:12px; }
.pn-list-note p{ margin:0 0 12px; font-size:16px; }
.pn-list-note .pn-action{ width:100%; min-height:48px; }