/* Frank's approved pencil kitchen. A final, scoped layer over the existing app.
   Authority: docs/design/FRANK-DESIGN.md and frank-plan-approved.png.
   Keep the real controls, rows and dialogs; no generated content or data here. */
:root {
  --cream: var(--white);
  --tint: var(--sage);
  --tint-line: var(--line);
  --hover: var(--sage);
  --orange: var(--ochre);
  --accent: var(--red);
  --danger: var(--red);
  --line-strong: var(--muted);
}
body { background: var(--paper); color: var(--ink); }
.skip-link:not(:focus) { clip-path: inset(50%); }
.skip-link:focus { clip-path: none; z-index: 30; border-radius: var(--button-radius); }
#app { min-width: 0; }
#app :is(h1, h2, h3), dialog :is(h1, h2, h3) { font-family: Georgia, serif; }
#app h1 { font-size: clamp(32px, 3vw, 40px); letter-spacing: -1.2px; }
#app :is(button, input, textarea, select), dialog :is(button, input, textarea, select) { border-radius: var(--button-radius); }
#app .shelf { border-radius: 0; }
#app :is(button, summary), dialog :is(button, summary) { min-height: 44px; }
#app :is(input, textarea, select), dialog :is(input, textarea, select) { border-color: var(--line); }
#app :is(input, textarea, select):focus, dialog :is(input, textarea, select):focus {
  border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 0 4px var(--sage);
}
:where(button, a, summary, [tabindex], input[type=checkbox], input[type=radio]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
/* Button shape, shared. Colour is set per role below. */
#app .primary, dialog .primary, #app .share-week, #app .account-fact-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--button-radius); min-height: 46px; padding: 12px 18px;
  font: 600 14px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-decoration: none;
}
/* Cody, 2026-11-01: "a red submit button is confusing. That should be green."
   Every .primary in the app was brick red, which made Save and continue, Finish
   setup and Put it away read as a warning to the first-time cook who met them.
   Evergreen is the go-ahead now; brick red keeps the jobs the design standard
   names for it (the Account thought, the Referrals share, the pause offer) and
   otherwise means careful, not proceed — same as .danger and .error below. */
#app .primary, dialog .primary {
  background: var(--green); border: 1px solid var(--green); color: var(--white);
}
#app .primary:hover, dialog .primary:hover {
  background: var(--green-hover); border-color: var(--green-hover);
}
#app .share-week, #app .account-fact-next {
  background: var(--red); border: 1px solid var(--red); color: var(--white);
}
#app .share-week:hover, #app .account-fact-next:hover {
  background: var(--red-hover); border-color: var(--red-hover);
}
#app .secondary, dialog .secondary { background: var(--white); color: var(--green); border-color: var(--line); }
#app .secondary:hover, dialog .secondary:hover { background: var(--sage); border-color: var(--green); }
#app .danger, dialog .danger { color: var(--red); background: var(--white); border-color: var(--red); }
#app .danger:hover, dialog .danger:hover { background: var(--paper); }
#app .text-button:hover { color: var(--red); }
#app :is(.panel, .shopping-paper, .day-detail, .table-wrap, .letter), dialog { border-radius: var(--panel-radius); box-shadow: none; }
#app .badge { background: var(--sage); color: var(--ink); border-color: var(--line); border-radius: 6px; }
#app .error, dialog .error { background: var(--white); color: var(--red); border-color: var(--red); }
#app .section-note { max-width: none; }

/* The rail is the evergreen anchor. Every destination uses the same selection. */
/* Preserve the approved rail width until enlarged text needs more room. The
   intrinsic minimum keeps the whole wordmark inside its rail without shrinking
   the type, clipping it, or changing the phone navigation. */
.notebook.app-layout { grid-template-columns: minmax(178px, min-content) minmax(0, 1fr); }
.notebook .sidebar { padding: 28px 17px 20px; gap: 18px; background: var(--green); color: var(--white); border: 0; }
.notebook .sidebar .wordmark { font-size: 54px; letter-spacing: -3px; margin-bottom: 18px; }
.notebook .sidebar .wordmark span { color: var(--ochre); }
.notebook .sidebar .notebook-caption { display: none; }
.notebook .sidebar :is(nav a, .settings-link, .settings-menu > summary, .owner-menu > summary) {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px;
  font-size: 14px; line-height: 1.35; letter-spacing: 0; color: var(--white);
  border-radius: var(--button-radius); text-decoration: none;
}
.notebook .sidebar .daily-nav { gap: 9px; }
.notebook .sidebar :is(nav a, .settings-link, .settings-menu > summary):hover { background: var(--nav-active); color: var(--white); }
.notebook .sidebar :is(nav a[aria-current], .settings-link[aria-current], .settings-menu > summary[aria-current]) {
  background: var(--nav-active); color: var(--white); font-weight: 600;
}
.notebook .sidebar :focus-visible { outline-color: var(--wheat); }
.notebook .sidebar > .settings-link, .notebook .sidebar > .settings-menu { margin-top: 0; }
.settings-menu > summary { cursor: pointer; list-style: none; }
.settings-menu > summary::-webkit-details-marker { display: none; }
.notebook .sidebar .account-nav { margin: 4px 0 0; padding-left: 5px; gap: 3px; }
.notebook .sidebar .account-nav a { padding: 10px 8px; min-height: 44px; font-size: 12px; color: var(--white); }
.notebook .sidebar .account-nav .notebook-icon { width: 18px; height: 18px; }
.notebook .sidebar-bottom { border-color: var(--nav-active); color: var(--white); font-size: 11px; }
.notebook .sidebar-bottom button { color: var(--white); border-color: var(--nav-active); }
.notebook .sidebar-bottom button:hover { background: var(--nav-active); }
.notebook .workspace { padding: 30px; width: 100%; max-width: none; }
.notebook .topbar { padding: 0 30px; min-height: 0; }
.notebook .topbar-note { display: none; }
.notebook .page-footer { padding: 18px 30px 24px; gap: 20px; }
.notebook .page-heading { margin-bottom: 28px; }
.notebook .page-heading h1 { margin: 0 0 10px; }
.notebook .page-heading .eyebrow { color: var(--muted); }
.notebook .page-heading > .eyebrow { display: none; }
.notebook .page-heading .lede { line-height: 1.55; }

/* Plan: a week of illustrated day controls, one reading surface, open notes. */
.plan-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; }
.plan-heading .page-heading { margin: 0; }
.plan-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.notebook-plan { display: block; }
.notebook-plan > .week { display: block; margin: 0; }
.plan-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 30px; align-items: start; margin-top: 28px; }
.notebook-plan .week-head { grid-column: 1/-1; margin: 0; }
.notebook-plan .day-strip { grid-column: 1/-1; gap: 10px; }
/* Enlarged Plan text needs a reading column as well as an intact wordmark.
   In this narrow desktop band, query the shell's own text scale: at normal
   type the rail stays beside Plan; when both no longer fit, the same navigation
   wraps above it. Keep the full heading size and the phone composition. */
@media (min-width: 701px) and (max-width: 877px) {
  .notebook.app-layout:has(.notebook-plan) { container: frank-plan-shell / inline-size; }
  @container frank-plan-shell (max-width: 28em) {
    .notebook > .sidebar, .notebook > .page { grid-column: 1 / -1; }
    .notebook > .sidebar {
      position: static; height: auto; overflow: visible;
    }
    .notebook > .sidebar .daily-nav { display: flex; flex-wrap: wrap; }
    .notebook > .sidebar .sidebar-bottom {
      margin-top: 0; display: flex; flex-wrap: wrap;
      align-items: center; justify-content: space-between; gap: 12px;
      padding-inline-end: 80px; /* Keep Sign out clear of floating Frank. */
    }
    .notebook > .sidebar .settings-menu .account-nav {
      max-block-size: min(65vh, calc(100dvh - 4em - 70px));
    }
  }
}
/* Plan's own width and text size decide when its columns stop fitting. Keep
   the approved wide week and phone swipe row; enlarged desktop text reflows
   instead of borrowing space from whole meal names. */
@media (min-width: 701px) {
  .notebook-plan { container: frank-plan / inline-size; }
  @container frank-plan (max-width: 48em) {
    .notebook .notebook-plan .week .day-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 10em), 1fr));
    }
    .notebook-plan .plan-body { display: block; }
    .notebook-plan .week-aside { margin-top: 28px; }
    .notebook-plan :is(.day, .meal-head) { overflow-wrap: normal; word-break: normal; }
  }
  @container frank-plan (max-width: 30em) {
    /* At larger text sizes the drawing gets its own row, leaving the complete
       reading width for the title without reducing either the type or art. */
    .notebook .notebook-plan .meal > .meal-art { float: none; margin: 0 0 16px auto; }
  }
}
.notebook .day {
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--button-radius); min-height: 208px; padding: 12px 10px;
  align-items: stretch; text-align: left; gap: 8px;
}
.notebook .day[aria-pressed=true] { color: var(--ink); background: var(--sage); border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.notebook .day:hover:not([aria-pressed=true]) { background: var(--sage); border-color: var(--muted); }
.notebook .day :is(.day-date, strong) { font: 14px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-transform: none; letter-spacing: 0; }
.notebook .day .day-name, .notebook .day small { font-size: 14px; line-height: 1.3; font-weight: 600; display: block; white-space: normal; overflow: visible; }
.notebook .day .day-minutes { margin-top: auto; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.notebook .day .day-today { color: var(--red); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.meal-art::before { display: none; }
.notebook .day .day-art { min-height: 58px; margin-top: auto; }
.notebook .day :is(.day-art > .meal-art, .meal-art.day-art) { height: 64px; margin: 6px 0 0; overflow: visible; }
.notebook .day .meal-art img { width: 58px; height: 60px; transform: rotate(-3deg); }
.notebook .day .meal-art img + img { width: 42px; height: 48px; margin-left: -6px; transform: rotate(8deg); }
.notebook-plan .day-detail { grid-row: auto; margin: 0; padding: 24px; border-color: var(--line); border-radius: var(--panel-radius); box-shadow: none; }
.notebook-plan .week-aside { grid-row: auto; }
.notebook-plan .day-detail > h3 { text-transform: none; letter-spacing: 0; font-size: 14px; margin: 0 0 10px; }
.selected-day { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.notebook-plan .meal { position: relative; display: block; min-height: 120px; padding-top: 0; }
.notebook-plan .meal > .meal-art { float: right; width: 150px; height: 116px; margin: 0 0 12px 20px; }
.notebook-plan .meal > .meal-art img { width: 100px; height: 108px; }
.notebook-plan .meal > .meal-art img + img { width: 72px; height: 80px; }
.notebook .meal-head :is(h1, h2, h3, h4) { font-size: 34px; line-height: 1.15; }
.notebook-plan .meal .meal-head { display: block; }
.notebook-plan .meal .marks { margin-top: 8px; }
.notebook-plan .meal .meal-meta { margin-top: 10px; }
.notebook-plan .meal .ingredients-label { clear: both; padding-top: 20px; margin: 20px 0 10px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
.notebook .meal .ingredients { columns: 2; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; }
.notebook-plan .meal-actions { margin-top: 22px; gap: 8px 18px; }
#app .meal-actions .cook-link { background: var(--green); border-color: var(--green); }
#app .meal-actions .cook-link:hover { background: var(--green-hover); }
.frank-note { display: block; margin: 4px 0 28px; }
.frank-note .frank-initial { display: none; }
.frank-note p { font: 23px/1.35 Georgia, serif; }
.plan-shortcuts .setting-row:first-child { border-top: 1px solid var(--line); }
.setting-row { min-height: 92px; gap: 22px; padding: 18px 0; }
.setting-row strong { font-size: 17px; text-decoration: underline; text-underline-offset: 4px; }
.setting-row small { font-size: 14px; }
.setting-row > .notebook-icon:first-child { width: 38px; height: 42px; }
.setting-row[href='#shop'] > .notebook-icon:first-child { fill: var(--ochre); }
.setting-row[href='#pantry'] > .notebook-icon:first-child { fill: var(--blue); }
.setting-row[href='#stores'] > .notebook-icon:first-child { fill: var(--ochre); }
.settings-groups .setting-row[href='#settings/household'] > .notebook-icon:first-child,
.settings-groups .setting-row[href='#settings/calendar'] > .notebook-icon:first-child,
.settings-groups .setting-row[href='#keys'] > .notebook-icon:first-child { fill: var(--blue); }
.settings-groups .setting-row[href='#settings/food'] > .notebook-icon:first-child,
.settings-groups .setting-row[href='#settings/rhythm'] > .notebook-icon:first-child { fill: var(--sage); }
.settings-groups .setting-row[href='#account'] > .notebook-icon:first-child,
.settings-groups .setting-row[href='#settings/orders'] > .notebook-icon:first-child { fill: var(--wheat); }
.settings-groups .setting-row[href='#referrals'] > .notebook-icon:first-child { color: var(--red); }
.setting-row > .notebook-icon:last-child, .cook-link > .notebook-icon { display: none; }
.notebook .plan-provenance { margin-top: 22px !important; }
.plan-options, .plan-ahead { margin-top: 24px; }
.plan-options > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.special-confirm { margin-top: 12px; padding: 12px 14px; background: var(--wheat); border: 1px solid var(--wheat-line); border-radius: var(--panel-radius); }
.special-confirm[hidden] { display: none; }
.special-confirm p { margin: 0 0 10px; }
.first-week .fw-cards { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
#app .first-week .fw-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0; }
.first-week .fw-card strong { font: 600 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.first-week .fw-card > span:last-child { grid-column: 2; }

/* Shopping and pantry remain working lists, with colour on their useful art. */
.shop-layout { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 32px; }
.shopping-paper { padding: 24px; border-radius: var(--panel-radius); }
.shopping-group h2 { font-family: inherit !important; font-weight: 600; color: var(--green); }
.shopping-item { align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.shopping-item input { min-height: 20px; }
.shop-actions .empty-art { width: 160px; margin: 0 0 18px; }
.notebook .pantry-head { align-items: center; }
.notebook .pantry-head h1 { margin: 0; }
.notebook .place-row .place-title { color: var(--ink); }
.notebook .pantry-table { gap: 30px; }
.notebook .pantry-table .place-row { border-bottom-color: var(--line); }
.notebook .pantry-table .group-row { background: transparent; }
.notebook .group-label.g-dairy { color: var(--ink); background: var(--wheat); padding: 2px 5px; border-radius: 4px; }
.notebook .add-quiet svg { color: var(--muted); }
.notebook .place-tabs [aria-selected=true] { background: var(--blue); color: var(--ink); border-color: var(--green); }
.notebook .pantry-foot { border-radius: var(--panel-radius); background: var(--paper); }
.notebook .pantry-foot :is(button, a) { min-height: 46px; }

/* Recipe artwork sits on pantry-coloured paper; reading text stays on white. */
.recipe-list.rows { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 22px; }
.recipe-list.rows .krow { border-bottom: 1px solid var(--line); }
.recipe-list.rows .meal-art { height: 160px; background: var(--sage); border-radius: var(--panel-radius); }
.recipe-list.rows .krow:nth-child(even) .meal-art { background: var(--blue); }
.recipe-list.rows .krow:nth-child(3n) .meal-art { background: var(--wheat); }
.recipe-list.rows .ktitle { min-height: 44px; display: inline-flex; align-items: center; }
.recipe-list.rows .c-actions { gap: 6px; }
.recipe-view { max-width: 850px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); }
.recipe-view .meal-head h1 { font-size: clamp(30px, 3vw, 40px); }
.recipe-view .rv-section { border-top: 1px solid var(--line); padding-top: 20px; }
.recipe-view .rv-steps li::marker { color: var(--red); font-weight: 600; }
.recipe-view { padding-right: 64px; }
.recipe-view .rv-cook-plan { display: flex; justify-content: flex-end; background: transparent; padding: 0; border: 0; border-radius: 0; }
.recipe-view .rv-cook-plan .cook-card { width: min(100%, 440px); }
.recipe-view .rv-cook-plan .cook-card:has(> .cook-ask) { width: auto; }
.cook-card:has(> .cook-ask) { display: flex; justify-content: flex-end; }
.cook-card > .cook-ask { min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--button-radius); background: color-mix(in srgb, color-mix(in srgb, var(--ochre) 65%, var(--red)) 28%, var(--paper)); color: var(--ink); font-size: 13px; text-decoration: none; }
.cook-card > .cook-ask:hover { background: color-mix(in srgb, color-mix(in srgb, var(--ochre) 65%, var(--red)) 40%, var(--paper)); }
.cook-card > .cook-ask:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Settings: open groups, practical forms. No stack of competing dashboard tiles. */
.settings-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.settings-groups h2 { margin-bottom: 8px; }
.settings-groups .setting-row { min-height: 84px; }
.notebook .form-stack { max-width: 780px; }
.notebook .form-stack.panel { padding: 26px; }
.notebook .form-actions { gap: 12px; }
.notebook .settings-save { border-radius: var(--button-radius) !important; box-shadow: none !important; }
.day-picker .check:has(input:checked) { background: var(--sage); border-color: var(--green); }
.notebook .wizard { max-width: 820px; }
.wizard .steps { gap: 10px; }
.wizard .steps li { flex: 1; min-width: 0; }
.wizard .steps li[aria-current] span { background: var(--red); border-color: var(--red); }
.wizard-intro { margin-bottom: 26px; }
.wizard-intro > img { width: 82px; height: 82px; }
.wizard .panel { border-radius: var(--panel-radius); }
.store-tile { border-radius: var(--button-radius); min-height: 70px; }
.store-tile[aria-pressed=true] { background: var(--sage); }
.store-panel { max-width: 780px; }
.store-panel .how { line-height: 1.6; }
.callback-url { background: var(--blue); }

/* Account: the bill leads, with one compact wheat note beside it. */
.account-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 32px; align-items: start; }
.account-main { min-width: 0; }
.account-main > .account-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.account-main > .account-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.account-main .section-note { max-width: none; }
.account-fact { min-width: 0; padding: 24px; background: var(--wheat); border: 1px solid var(--wheat-line); border-radius: var(--panel-radius); }
.account-fact-art { display: block; width: 92px; height: 74px; object-fit: contain; margin: 0 0 16px; }
.account-fact-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.account-fact h2 { font-size: 25px; margin: 0 0 12px; }
.account-fact p { font-size: 15px; line-height: 1.55; }
.account-fact-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.account-fact-heading h2 { margin: 0; font-size: 24px; }
.account-fact-heading .account-fact-art { flex: none; width: 76px; height: 66px; margin: 0; }
.account-fact-emphasis { color: var(--red); }
.account-fact .account-fact-joke { font: italic 18px/1.45 Georgia, serif; color: var(--ink); margin-bottom: 18px; }
.account-fact .account-thought { margin-top: 6px; }
#app .account-fact .account-fact-next { background: var(--red); border-color: var(--red); color: var(--white); }
#app .account-fact .account-fact-next:hover { background: var(--red-hover); border-color: var(--red-hover); }
.account-main .details > div { font-size: 14px; }
.account-main .billing-state { margin-bottom: 22px; }
.account-price { font: 43px/1.15 Georgia, serif; letter-spacing: -1px; margin: 0 0 20px; }
.billing-facts .account-price { font: inherit; letter-spacing: 0; margin: 0; }
.price-period { font: 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0; color: var(--muted); }
.account-plan-options { margin-top: 14px; }
.account-plan-options > summary { display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.account-history > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.account-history > summary::-webkit-details-marker { display: none; }
.account-balance { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
.account-main .plans { gap: 16px; }
.account-main .plans .panel { background: transparent; padding: 20px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.account-main .topup { margin-top: 28px; }
.account-main .topup-form { max-width: 440px; }
/* Status and its action share a table cell; in the existing record-card grid,
   give the whole action its own row so the label stays inside its target. */
.account-main .topup-history .reconcile-topup {
  grid-column: 1 / -1; justify-self: start; min-inline-size: 44px;
  max-inline-size: 100%; white-space: normal;
}
/* In Account's narrow desktop column, leave the 56px floating Frank target
   and a 16px gap beside action groups. Horizontal clearance holds at any
   scroll/viewport height, including open funds, pending requests and retry.
   Keep the bill's reading width and the normal wide/phone layouts. */
@media (min-width: 701px) and (max-width: 1100px) {
  .account-billing .billing-actions,
  .account-billing > .inline-actions,
  .account-billing .pause-offer > .inline-actions,
  .account-subscription > .plans,
  .account-billing > #account-funds,
  .account-main .account-activity > summary,
  .account-main .account-activity > .topup-history {
    max-inline-size: calc(100% - 72px);
  }
  .account-main .topup-history td:nth-child(2) { white-space: nowrap; }
  .account-main :is(.billing-actions, #account-funds, .pause-offer, .plans, .account-activity) button,
  .account-billing > .inline-actions > button {
    min-inline-size: 44px; max-inline-size: 100%; white-space: normal;
  }
}
#verification-section { background: var(--sage); }
.keys-guide{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:0 0 18px}
.keys-guide>a:not(.primary){display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--muted)}
.keys-cost{max-width:640px;line-height:1.6;margin-bottom:28px}
.api-key-setup{max-width:680px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.api-key-setup>summary{cursor:pointer;display:flex;align-items:center;list-style:none;text-decoration:underline;text-underline-offset:4px}
.api-key-setup>summary::-webkit-details-marker{display:none}
.api-key-setup>p{line-height:1.6;max-width:580px}
.api-key-setup .form-stack{padding:12px 0 20px}
.key-list{margin-top:32px}
.key-secret{max-width:680px;margin:0 0 28px;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--panel-radius)}
.key-secret h2{font-size:28px;margin:0 0 12px;color:var(--red)}
.key-secret p{max-width:560px;line-height:1.6}
.key-secret>label{display:block;font-size:14px;margin:20px 0 8px}
.key-secret-field{display:flex;align-items:center;gap:10px}
.key-secret-field input{min-width:0;width:100%;flex:1;font:14px/1.5 ui-monospace,SFMono-Regular,monospace}
.key-secret-field button{flex:none;padding:10px 4px}
.key-secret .inline-actions{margin-top:20px}
.key-secret .hint{margin-bottom:0;font-size:13px}
#key-copy-status:empty{display:none}
@media(max-width:600px){.key-secret{padding:20px}.key-secret-field{flex-wrap:wrap}.key-secret-field input{flex-basis:100%}.key-secret-field button{margin-top:-6px}}
#keys-table .table-wrap, .sessions .table-wrap { background: var(--white); }

/* The floating robot opens a bounded paper conversation, never a persistent bar. */
.frank-f { right: 24px; bottom: 24px; border: 2px solid var(--paper); box-shadow: none; }
.frank-launcher-mark { display: inline-block; color: var(--paper); font: 700 42px/1 Georgia, serif; letter-spacing: -3px; padding-right: 3px; transform: translateY(-1px); }
.frank-launcher-mark > span { color: var(--ochre); }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px; }
dialog::backdrop { background: rgb(32 62 51 / 40%); }
dialog.frank-chat { background: var(--paper); border-color: var(--line); }
.chat-head { padding: 14px 16px 18px 22px; background: var(--sage); }
.chat-head h2 { font-size: 24px; }
.chat-word { color: var(--ink); }
.chat-composer { background: var(--paper); }
.chat-composer textarea { background: var(--white); border-radius: var(--button-radius); }
.msg-user { background: var(--blue); border-radius: var(--panel-radius); }
.chat-yes { background: var(--sage); border-radius: var(--button-radius); }
.chat-row[aria-current] { background: var(--sage); }
.chat-row[aria-current]::before { display: none; }
.auth-aside { background: var(--green); color: var(--white); }
.auth-aside .eyebrow { color: var(--wheat); }
.auth-card .wordmark span { color: var(--red); }
.auth-main { background: var(--paper); }
.auth-card > .wordmark { margin-bottom: 24px; }
.auth-card .google-signin { border-radius: var(--button-radius); }

/* The signed-out kitchen uses the same pencil colors as Plan. The opening mark
   never holds up either action; a person can tap through while it settles. */
.boot-mark { min-height: 100svh; display: grid; place-items: center; background: var(--paper); }
.boot-mark-symbol { color: var(--green); font: 700 128px/1 Georgia, serif; letter-spacing: -12px; animation: frank-mark-in .65s both; }
.boot-mark-symbol span { color: var(--ochre); animation: frank-dot-in .45s .25s both; display: inline-block; }
.auth-aside { position: relative; overflow: hidden; }
.auth-aside::after { content: ''; position: absolute; top: 142px; right: 10%; width: 176px; height: 176px; border: 1px solid var(--wheat-line); border-radius: 50%; background: var(--wheat) url('/platform/art/grocery-bag.svg') center/80% no-repeat; transform: rotate(7deg); pointer-events: none; }
.auth-aside > * { position: relative; z-index: 1; }
.auth-card > h1 { color: var(--green); width: fit-content; background: linear-gradient(transparent 79%, var(--wheat) 79%); }
.auth-login-note { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--blue); }
.auth-login-note img { width: 52px; height: 52px; flex: none; }
.auth-login-note p { margin: 0; font: 17px/1.35 Georgia, serif; color: var(--ink); }
.auth-card .footnote { margin-top: 20px; }

@keyframes frank-mark-in { 0% { opacity: 0; transform: translateY(18px) rotate(-15deg) scale(.82); } 70% { opacity: 1; transform: translateY(-3px) rotate(2deg) scale(1.035); } 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes frank-dot-in { 0%,35% { opacity: 0; transform: scale(.2); } 75% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 700px) {
  .auth-layout { min-height: 100svh; }
  .auth-aside { min-height: 100px; padding: 18px 20px; }
  .auth-aside::after { top: 9px; right: 20px; width: 80px; height: 80px; background-size: 84%; }
  .auth-main { display: block; min-height: 0; padding: 26px 20px max(32px, env(safe-area-inset-bottom)); }
  .auth-card { margin: 0 auto; }
}
@media (forced-colors: active) {
  .auth-aside::after, .auth-login-note { border: 1px solid CanvasText; }
}

@media (min-width: 701px) {
  .topbar-right > .mobile-settings { display: none; }
}

@media (min-width: 1200px) {
  body.chat-docked .notebook { grid-template-columns: minmax(178px, min-content) minmax(0, 1fr); }
  body.chat-docked .account-layout { grid-template-columns: 1fr; }
  body.chat-docked .plan-body { display: block; }
  body.chat-docked .notebook .day-strip { display: flex; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
  body.chat-docked .notebook .day { flex: 0 0 142px; min-height: 180px; scroll-snap-align: start; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .notebook.app-layout { grid-template-columns: minmax(170px, min-content) minmax(0, 1fr); }
  .notebook .workspace { padding: 26px 24px; }
  .plan-body { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 24px; }
  .notebook .day-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .notebook .day { min-height: 188px; }
  .account-layout { grid-template-columns: 1fr; }
  .account-fact { max-width: 560px; }
  .settings-groups { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  .notebook-plan, .plan-body, .shop-layout { display: block; }
  .notebook-plan .week { display: block; }
  .notebook-plan .day-strip { margin: 0 0 24px; }
  .notebook-plan .week-aside { margin-top: 28px; }
  .plan-shortcuts { margin-bottom: 22px; }
  .shop-actions { margin-top: 26px; }
}
@media (max-width: 700px) {
  .notebook.app-layout { display: block; }
  .notebook .sidebar { display: contents; }
  .notebook .sidebar .daily-nav {
    background: var(--green); border-top: 0; padding: 6px 10px calc(7px + env(safe-area-inset-bottom)); gap: 5px;
  }
  /* Equal doors while the full names fit; enlarged names may take another row. */
  .notebook .sidebar .daily-nav { display: flex; flex-wrap: wrap; }
  .notebook .sidebar .daily-nav a { flex: 1 1 0; min-inline-size: max-content; color: var(--white); font-size: 11px; min-height: 55px; padding: 6px 2px; gap: 3px; }
  .notebook .sidebar .daily-nav a[aria-current] { background: var(--nav-active); color: var(--white); }
  .notebook .daily-nav a[aria-current]::after { display: none; }
  .notebook .sidebar nav a > span + span { display: inline; }
  .notebook .topbar { display: flex; padding: 12px 18px 4px; min-height: 66px; }
  .mobile-brand { color: var(--green); font-size: 38px; }
  .mobile-brand span { color: var(--red); }
  .topbar .settings-link { padding: 8px 10px; font-size: 13px; }
  .mobile-settings { position: relative; }
  .mobile-settings > summary { display: flex; gap: 8px; align-items: center; list-style: none; cursor: pointer; min-height: 44px; }
  .mobile-settings > summary::-webkit-details-marker { display: none; }
  .mobile-settings .account-nav { position: absolute; z-index: 22; top: 100%; right: 0; min-width: 220px; padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--panel-radius); }
  .mobile-settings .account-nav a { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 44px; text-decoration: none; border-radius: var(--button-radius); }
  .mobile-settings .account-nav a[aria-current] { background: var(--sage); font-weight: 600; }
  .notebook .workspace { padding: 22px 18px 30px; }
  /* Keep both Pantry actions above the fixed tab bar on the shorter native
     webview. The right gutter clears Frank's floating 52px launcher. */
  .notebook .pantry-foot { position: fixed !important; left: 18px; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 16; margin: 0; padding: 12px 64px 12px 18px; border: 1px solid var(--line); }
  .notebook .workspace:has(.pantry-foot) { padding-bottom: 110px; }
  #app .pantry-foot :is(button, a) { padding: 8px; }
  .notebook .page-heading { margin-bottom: 22px; }
  .notebook .page-heading h1 { font-size: 34px; }
  .notebook .page-footer, .notebook[data-setup=true] .page-footer { padding: 18px 18px calc(110px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .plan-heading { display: block; margin-bottom: 22px; }
  .plan-heading-actions { padding-top: 16px; gap: 12px; }
  .plan-heading-actions .primary, .plan-heading-actions .share-week { margin-left: auto; }
  .notebook .day-strip { display: flex; gap: 10px; overflow-x: auto; padding: 3px 3px 10px; scroll-snap-type: x proximity; }
  .notebook .day { flex: 0 0 142px; scroll-snap-align: start; align-items: stretch; min-height: 182px; padding: 12px; border: 1px solid var(--line); border-radius: var(--button-radius); }
  .notebook .day strong { max-width: none; font-size: 14px; }
  .notebook .day small { display: block; }
  .notebook .day .day-name { font-size: 14px; }
  .notebook .day-detail { padding: 20px 16px; }
  .notebook .meal-head :is(h1, h2, h3, h4) { font-size: 29px; }
  .notebook-plan .meal > .meal-art { width: 95px; height: 100px; margin-left: 10px; }
  .notebook-plan .meal > .meal-art img { width: 70px; height: 85px; }
  .notebook-plan .meal > .meal-art img + img { width: 48px; height: 65px; }
  .notebook .meal .ingredients { columns: 1; }
  .frank-note p { font-size: 22px; }
  .setting-row { gap: 18px; }
  .setting-row small { font-size: 13px; }
  .shop-layout .shopping-paper { padding: 16px; }
  .shopping-item { padding-right: 0; }
  .settings-groups, .account-layout { grid-template-columns: 1fr; gap: 24px; }
  .account-fact { padding: 22px; }
  .account-fact-art { width: 80px; height: 65px; }
  .account-fact p { font-size: 15px; }
  .recipe-list.rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .recipe-list.rows .meal-art { height: 125px; }
  .recipe-list.rows .ktitle { font-size: 21px; }
  .recipe-list.rows .c-actions button { min-width: 44px; }
  .recipe-view { padding: 20px 64px 20px 16px; }
  .notebook .form-stack.panel { padding: 20px 16px; }
  .notebook .form-actions { justify-content: flex-start; }
  .notebook .form-actions .primary { margin-left: 0; }
  .notebook #settings-form .settings-save { margin-right: 0; bottom: 82px; padding-right: 58px; }
  .notebook .wizard .steps { flex-wrap: wrap; row-gap: 14px; }
  .notebook .wizard .steps li { flex: 1 1 65px; font-size: 11px; }
  .wizard-intro { gap: 14px; }
  .wizard-intro > img { width: 60px; height: 66px; }
  .wizard-intro .page-heading h1 { font-size: 30px; }
  /* The phone launcher is sized in em of its own 15px text: 52px at normal type, and
     larger text grows the round button with its mark so the whole f. stays inside it.
     It sits 82px up: 14px above the 68px navigation, level with the Settings save bar. */
  .frank-f { bottom: calc(82px + env(safe-area-inset-bottom)); right: 16px; font-size: 15px; width: max(52px, calc(52em / 15)); height: max(52px, calc(52em / 15)); min-height: 52px; }
  body:has(#app .pantry-foot) .frank-f { bottom: calc(82px + env(safe-area-inset-bottom)); }
  dialog { width: calc(100% - 24px); padding: 20px; max-height: calc(100dvh - 24px); }
  dialog.frank-chat { width: 100%; max-height: 100dvh; padding: 0; border-radius: 0; }
  .chat-head { padding: 8px 10px 16px 18px; }
  .chat-head-actions { gap: 0; }
  .chat-word { padding: 0 7px; }
  .auth-main { padding: 30px 20px; }
}
/* Narrow-phone meal titles use the full reading width below the same art.
   Keep normal 29px type and the swipe row; larger type gets wider swipe cards.
   Prefer linguistic hyphens where the word-fit limit is supported; otherwise
   emergency wrapping only splits a word that cannot fit the full reading width. */
@media (max-width: 390px) {
  .notebook-plan { container: frank-phone-plan / inline-size; }
  .notebook-plan .meal > .meal-art { float: none; margin: 0 0 16px auto; }
  @container frank-phone-plan (max-width: 12em) {
    .notebook .notebook-plan .day-strip .day { flex-basis: max(190px, 9em); }
    .notebook-plan .meal-head h2:lang(en) { overflow-wrap: anywhere; word-break: normal; }
    @supports (hyphens: auto) and (hyphenate-limit-zone: calc(100% - 1px)) {
      .notebook-plan .meal-head h2:lang(en) {
        hyphens: auto; hyphenate-limit-zone: calc(100% - 1px); hyphenate-character: "‐";
      }
    }
  }
}

/* A fixed, wrapping phone nav has an intrinsic height. Share its measured border
   box (including the safe area) rather than guessing how many text rows fit.
   The fallback is the existing 68px bar; the normal phone offsets stay the same.
   Frank's own measured height (52px at normal type) is reserved the same way, so
   Pantry's action tray and the end of each page clear a launcher grown by larger text. */
@media (max-width: 700px) {
  html:has(.notebook .daily-nav) { scroll-padding-bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + var(--frank-launcher-height, 52px) + 32px); }
  body:has(#app .daily-nav) .frank-f { bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + 14px); }
  #app .notebook .workspace { padding-bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + var(--frank-launcher-height, 52px) + 70px); }
  #app .notebook[data-setup=true] .workspace { padding-bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + 28px); }
  #app .notebook .page-footer { padding-bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + 42px); }
  #app .notebook .pantry-foot { bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + var(--frank-launcher-height, 52px) + 28px); }
  #app .notebook .workspace:has(.pantry-foot) { padding-bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + var(--frank-launcher-height, 52px) + 150px); }
  #app .notebook .day { scroll-margin-bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + var(--frank-launcher-height, 52px) + 56px); }
  #app .notebook #settings-form .settings-save { bottom: calc(var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) + 14px); padding-right: calc(var(--frank-launcher-height, 52px) + 6px); }
  #app .mobile-settings .account-nav { max-height: calc(100dvh - var(--mobile-navigation-height, calc(68px + env(safe-area-inset-bottom))) - 88px); }
}

@media (prefers-reduced-motion: reduce) {
  #app *, dialog *, .frank-f { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Referrals stays on the paper. Color belongs to the action and recipe title. */
.referral-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:56px;align-items:start;max-width:1040px}
.referral-share{min-width:0;padding-top:12px}.referral-share p{line-height:1.6}
.referral-share label{display:block;margin:0 0 8px;font-size:14px}.referral-share input{width:100%;min-width:0}
.referral-invitation{display:flex;align-items:stretch;gap:10px}.referral-invitation input{flex:1}.referral-invitation button{flex:none}
.referral-share .inline-actions:has(button:not([hidden])){margin-top:14px}.referral-share [hidden]{display:none!important}
#referral-status:empty,#referral-retry:empty{display:none}#referral-status{margin:22px 0 12px}#referral-retry a{display:inline-flex;align-items:center;min-height:44px}
.family-offer-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.family-offer-heading h2{font-size:25px;margin:0;color:var(--red)}.family-offer-heading img{width:64px;height:64px;flex:none}
.family-offer p{line-height:1.6;margin:12px 0}.family-offer .hint{margin-bottom:0}
.referral-other{border-top:1px solid var(--line);margin-top:28px;padding-top:8px}.referral-other summary{list-style:none;cursor:pointer;text-decoration:underline;text-underline-offset:4px;display:flex;align-items:center}.referral-other summary::-webkit-details-marker{display:none}
@media(max-width:850px){.referral-layout{grid-template-columns:1fr;gap:28px;max-width:600px}.family-offer{order:-1}.referral-share{padding-top:0}}
@media(max-width:600px){.family-offer-heading img{width:56px;height:56px}}
@media(max-width:380px){.referral-invitation{flex-direction:column}.referral-invitation button{align-self:flex-start}}

/* Sim review: price is a primary account fact, and a saved draft is actionable. */
.membership-price {font-size:1.125rem;color:var(--ink,#243930)}
.membership-price strong {color:var(--red,#a93628);font-size:1.5rem}
.setup-pantry-note {background:var(--wheat,#f4e7bb);padding:24px;border-radius:12px;margin:20px 0}
.setup-pantry-note textarea {min-height:100px}
.household-member {display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line,#c8ccbf)}
.household-member span {overflow-wrap:anywhere}
.household-invite-form {margin-top:20px}
.household-invite-form input {max-width:100%}

.chat-head h2 {display:block;overflow:visible;-webkit-line-clamp:unset;line-clamp:unset;overflow-wrap:normal;word-break:normal}

#invite-household {margin-top:16px}

/* Navigation identities and the device-keyboard state, Vera review October 31. */
.frank-nav-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: 700 25px/1 Georgia, serif; }
@media(max-width:768px) {
 body.form-keyboard-open .notebook .sidebar .daily-nav,
 body.form-keyboard-open .frank-f,
 body.form-keyboard-open .notebook .pantry-foot { visibility: hidden; pointer-events: none; }
 body.form-keyboard-open #app textarea { min-height: 100px; max-height: max(120px,calc(var(--form-visible-height) - 120px)); }
 #app :is(input,textarea,select) { scroll-margin-block: 28px 110px; }
}

/* Meal prep rhythm (2026-10-31): two visible radio rows for how you cook, the prep-day picker under Batch,
   the prep-day tag on the week strip, and the batch line under a dish. Paused membership: the offer panel on Account. */
.choice-rows { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; max-width: 560px; }
.choice-rows legend { font-size: 13px; font-weight: 600; margin-bottom: 12px; padding: 0; }
.choice-rows label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin: 0; min-height: 48px; font-size: 14px; font-weight: 500; line-height: 1.45; cursor: pointer; background: var(--white); border: 1px solid var(--line); }
.choice-rows label:first-of-type { border-radius: var(--button-radius) var(--button-radius) 0 0; }
.choice-rows label + label { border-top: 0; }
.choice-rows label:last-of-type { border-radius: 0 0 var(--button-radius) var(--button-radius); }
.choice-rows label:has(:checked) { background: var(--sage); }
.choice-rows label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; position: relative; z-index: 1; }
#app .choice-rows input { appearance: none; -webkit-appearance: none; width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 3px 0 0; padding: 3px; border-radius: 50%; border: 1px solid var(--muted); background: var(--white); box-shadow: none; }
#app .choice-rows input:checked { background: var(--green); background-clip: content-box; border-color: var(--green); }
@media (forced-colors: active) { #app .choice-rows input { appearance: auto; } }
.choice-rows .choice-help { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.prep-day-field .day-picker { margin-bottom: 8px; }
.prep-day-picker .check input { accent-color: var(--green); }
.notebook .day .day-prep { color: var(--ink); background: var(--ochre); border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; align-self: flex-start; }
.notebook-plan .meal .batch-line { color: var(--ink); }
.pause-offer { background: var(--wheat); border: 1px solid var(--wheat-line); border-radius: var(--panel-radius); padding: 22px 24px; margin-bottom: 24px; max-width: 640px; }
.pause-offer h2 { margin-bottom: 8px; }
.pause-offer p { margin-bottom: 0; }
.pause-offer .inline-actions { margin-top: 16px; }
#app .pause-offer .primary { background: var(--red); border-color: var(--red); }
#app .pause-offer .primary:hover { background: var(--red-hover); }
.billing-paused { color: var(--ink); }

/* P099: in a short desktop window, scroll the complete sidebar rather than
   shrinking its grid children and stranding the footer outside their boxes. */
@media (min-width: 701px) {
  .notebook .sidebar > * { flex-shrink: 0; }
  /* The document scroll extent rounds up to a whole pixel. Give sticky its
     final pixel of travel so a fractional parent bottom cannot pull top below zero. */
  .notebook.app-layout .sidebar { overflow-y: auto; margin-block-end: -1px; }
  .notebook .sidebar .settings-menu .account-nav { min-width: 0; width: 100%; }
}

/* Cookbook editors own one focus mark: the search field or the yield hairline. */
#app .cookbook-search .search-field input:focus { outline:none;box-shadow:none; }
#app .recipe-view .qty-input:focus { outline:none;box-shadow:none;border-bottom-color:var(--accent); }

#app .meal-experience :is(input[type=radio],input[type=checkbox]) { accent-color:var(--green); }
#app .meal-experience textarea { resize:none;font-weight:400; }
@media(max-width:700px),(pointer:coarse) {
 #app .thumbs-note input,#app .mark-note input,#app .cook-other input,#app .meal-experience textarea { font-size:16px; }
}