/* GOT IT? MAKE IT! — MASTER PRESENTATION OVERRIDE, v3.1 MASTER STYLE — promoted from v3.0.2 Style Review 5
   BASE: v3.0.2 Android assets uploaded 17 Oct 2026.
   STATUS: SOURCE-AUDITED / LOCK CANDIDATE. DEVICE QA AND APPROVAL PENDING.
   This file must be the LAST stylesheet in <head>, after legacy inline styles.
   Preserve sizing/placement, artwork, custom display writing and responsive
   cooking flow. Change only type and documented design tokens here.
*/
:root {
  /* Brand colours: informational aliases only; DO NOT override existing --brand. */
  --gimi-purple: #5b1665;
  --gimi-green: #617c66;
  --gimi-strong-green: #476b35;
  --gimi-cream: #fffaf4;
  --gimi-paper: #f7faf7;
  --gimi-pale-green: #e8f1e5;
  --gimi-pale-purple: #f4eaf6;
  --gimi-yellow: #f2d43f;
  --gimi-ink: #26312d;
  --gimi-line: #dce6e2;
  --gimi-card-radius: 22px;
  --gimi-shadow: 0 12px 34px rgba(66,91,80,.12);
  --gimi-space-1: 4px;
  --gimi-space-2: 8px;
  --gimi-space-3: 12px;
  --gimi-space-4: 16px;
  --gimi-space-5: 20px;
  --gimi-space-6: 24px;
  --gimi-font-body: "Atkinson Hyperlegible Next", Arial, Helvetica, sans-serif;
  --gimi-font-display: "Kalam", "Segoe Print", cursive;
  --gimi-weight-normal: 400;
  --gimi-weight-emphasis: 600;
  --gimi-weight-display: 700;
  --gimi-small-section-size: 13px; /* one standard heading size */
  --gimi-small-section-tracking: .08em;
  /* Existing legacy classes consume these variables. */
  --body-readable: var(--gimi-font-body);
  --heading-hand: var(--gimi-font-display);
}

/* A. Readable UI/body type: screen-independent font and 400/600 hierarchy. */
html { font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body,button,input,select,textarea {
  font-family:var(--gimi-font-body)!important;
}
body {font-weight:400;}
.app :is(.meta,.count,.about-copy,.checkrow,.shopping-item,.cooking-ingredient,
  .gimi-settings-note,.dairy-swap-note,.recipe-scaler,.scaler-choice,
  .have-selected-list,.have-selected-empty,.gimi-main-chip,.have-quick-chip) {
  font-family:var(--gimi-font-body)!important;
}
/* Weight 600 for normal emphasis, not 800/850/900. Deliberate numerical badges,
   scores and illustration lettering are not changed. */
.app :is(.primary,.secondary,.search-button,.chip,.tag,.nav button,.nav-label,
  .scaler-choice,.scaler-reset,.have-quick-chip,.gimi-main-chip) {
  font-weight:var(--gimi-weight-emphasis)!important;
}

/* B. One compact section-heading component across Home / GIMI / Browse /
   Shopping / Kitchen know-how. Colours are not forced on purple context labels.
   This selector set is pinned by an executable computed-CSS regression check. */
.app .eyebrow {
  font-family:var(--gimi-font-body)!important;
  font-weight:var(--gimi-weight-emphasis)!important;
}
#home .gimi-heading-copy>.eyebrow,
#home .gimi-main-heading,
#home .gimi-main-heading>strong,
#home .gimi-sweet-picks-v221>p>strong,
#home .gimi-secondary-picks>p>strong,
#home .home-shortcuts-heading .eyebrow,
#home .have-panel .ideas-panel-heading .eyebrow,
#home .home-section-heading .eyebrow,
#home .home-section-kicker,
#home #clearHaveIngredients,
#browse .browse-eyebrow-label,
#shopping .shopping-category-chooser-head .eyebrow,
#shopping .shopping-list-green-heading,
#methods>.panel>.eyebrow,
.app .tip-of-day-kicker,
.app .tip-of-the-day-kicker {
  font-family:var(--gimi-font-body)!important;
  font-size:var(--gimi-small-section-size)!important;
  font-weight:var(--gimi-weight-emphasis)!important;
  line-height:1.25!important;
  letter-spacing:var(--gimi-small-section-tracking)!important;
  text-transform:uppercase!important;
}
#home .gimi-heading-copy>.eyebrow,
#home .gimi-main-heading,
#home .gimi-main-heading>strong,
#home .gimi-sweet-picks-v221>p>strong,
#home .gimi-secondary-picks>p>strong,
#home .home-shortcuts-heading .eyebrow,
#home .have-panel .ideas-panel-heading .eyebrow,
#home .home-section-heading .eyebrow,
#home .home-section-kicker,
#home #clearHaveIngredients,
#shopping .shopping-category-chooser-head .eyebrow,
#shopping .shopping-list-green-heading,
#methods>.panel>.eyebrow,
.app .tip-of-day-kicker,
.app .tip-of-the-day-kicker {
  color:var(--gimi-green)!important;
  opacity:1!important;
}
/* Existing context labels may be purple, white or muted: do NOT globally tint them. */
/* Protect compact phone banner labels: these are a different component from GIMI. */
@media(max-width:700px) {
  .app .mobile-compact-kicker,
  .app .mobile-compact-kicker span {font-size:inherit;}
}


/* C. GIMI: remove explicitly forced Inter in older v1.24.xx rules.
   Do not modify the layout, title wrapping or image positions. */
#home #whatHavePanel .have-desktop-help,
#home #whatHavePanel .gimi-secondary-picks small,
#home #whatHavePanel .have-mobile-more,
#home #whatHavePanel .have-selected-list,
#home #whatHavePanel .have-selected-empty,
#home #whatHavePanel #haveResults,
#home #whatHavePanel .search-row input,
#home #whatHavePanel .search-row button,
#home #whatHavePanel .gimi-main-chip,
#home #whatHavePanel .have-quick-chip,
#home #whatHavePanel .have-selected-heading {
  font-family:var(--gimi-font-body)!important;
}
#home #whatHavePanel :is(.gimi-main-chip,.have-quick-chip) {
  font-weight:var(--gimi-weight-emphasis)!important;
}

/* D. Kalam remains the distinct friendly display type; preserve exact banner,
   feature and recipe title sizing set by existing device-specific rules. */
/* Display typography is opt-in, not a blanket h1/h2/h3 reset: some h3s are
   compact green labels. Existing feature headings remain Kalam via legacy CSS. */
.app :is(.recipe-title,.recipe-card-title,.handwritten,.kalam,
  .methods-subheading,.step-popup-card h3,
  .home-section-heading h2,.ideas-panel-heading h2,
  .cooking-mode-header h2,.cooking-step-card h3,.cooking-complete h2) {
  font-family:var(--gimi-font-display)!important;
}
#recipeGrid .card h3,
#home .quick-recipe-grid .card h3,
.app .recipe-title,
.app .recipe-card-title {
  font-family:var(--gimi-font-display)!important;
  font-weight:400!important; /* approved friendly, lighter card-title feel */
}
/* Desktop text was specifically requested to stay smaller than the old max. */
@media(min-width:900px){
  #browse #recipeGrid .card h3,
  #recipeGrid .card h3 {font-size:clamp(18px,1.55vw,22px)!important;}
}

/* E. Guided Cooking / Save Time: prominent but not extra-black instructions. */
.app .cooking-instruction,
.app .speedy-method-instruction-v236 .cooking-instruction,
.app .cooking-prep-item>span,
.app .speedy-p1-check>span,
.app .speedy-p1-task-check strong {
  font-family:var(--gimi-font-body)!important;
  font-weight:600!important;
}
/* Preserve the existing larger instruction font sizes, timers, heat-art layout. */

/* F. Navigation labels use precisely the same family and weight in all five tabs. */
.bottom .nav button .nav-label,
.bottom .nav button[data-screen="home"] .nav-label,
.bottom .nav button {
  font-family:var(--gimi-font-body)!important;
  font-weight:600!important;
}

/* No global box, image, modal, button colour or responsive geometry changes.
   To revise approved visual treatment, change the master specification + QA. */


/* GIMI MASTER STYLESHEET v3.0.2 AUDIT r5 – ADDITIONAL VERIFIED COMPONENTS
   This is the final styling layer. Do not append new one-off typography patches
   to the legacy CSS; update this file and audit test together instead. */

/* Green headings have a shared font, even when the markup uses H3 or STRONG. */
#home .have-panel h3,
#home .have-panel .ideas-panel-heading .eyebrow,
#home #whatHavePanel .gimi-heading-copy .eyebrow,
#home .gimi-main-picks > p.gimi-main-heading,
#home .gimi-main-picks > p.gimi-main-heading > strong,
#home .gimi-secondary-picks > p > strong,
#home .gimi-sweet-picks-v221 > p > strong,
#home .home-section-heading > .eyebrow,
#browse .browse-eyebrow-label,
#shopping .shopping-list-green-heading,
#shopping .shopping-category-chooser-head .eyebrow,
#methods > .panel > .eyebrow,
.app .tip-of-day-kicker,
.app .tip-of-the-day-kicker {
  font-family:var(--gimi-font-body)!important;
  font-weight:600!important;
  font-size:var(--gimi-small-section-size)!important;
  line-height:1.25!important;
  letter-spacing:var(--gimi-small-section-tracking)!important;
  text-transform:uppercase!important;
}
/* Keep current approved title hues; these are specifically green label elements. */
#home .gimi-heading-copy > .eyebrow,
#home .gimi-main-picks > p.gimi-main-heading,
#home .gimi-main-picks > p.gimi-main-heading > strong,
#home .gimi-secondary-picks > p > strong,
#home .gimi-sweet-picks-v221 > p > strong,
#home .home-shortcuts-heading .eyebrow,
#home .home-section-heading > .eyebrow,
#browse .browse-eyebrow-label,
#shopping .shopping-list-green-heading,
#shopping .shopping-category-chooser-head .eyebrow {
  color:var(--gimi-green)!important;
}

/* Small utility labels share the same body font/600 but retain their deliberately
   compact local font-size: scaler/timers/planner do not suddenly become 13px. */
.app :is(.cooking-kicker,.scaler-kicker-v241,.week-planner-kicker,
  .timer-alarm-kicker,.plant-points-badge,.guide-category-title,
  .washing-filter-button,.browse-eyebrow-label,.nav-label) {
  font-family:var(--gimi-font-body)!important;
  font-weight:600!important;
}
/* Deliberately purple 'Other ingredients' is not forced green and is no longer 800. */
#home #whatHavePanel .have-selected-heading,
#home #whatHavePanel .have-selected-heading > strong {
  font-family:var(--gimi-font-body)!important;
  font-weight:600!important;
}

/* Forms, chips, supporting copy and list labels: keep the consistent legible
   sans family. No artificial bold on descriptions or equipment captions. */
.app :is(.photo-filter strong,.method-card strong,.method-card small,
  .cut-guide-card span,.shopping-item,.shopping-list-item,
  .filter-chip,.choice-chip,.cooking-nav button,.speedy-side-card,
  .week-planner-summary,.step-timer-button,.guide-category-title) {
  font-family:var(--gimi-font-body)!important;
}
.app :is(.photo-filter strong,.method-card strong,.filter-chip,.choice-chip,
  .cooking-nav button,.step-timer-button,.guide-category-title) {
  font-weight:600!important;
}
/* Responsive text sizes for labels, without changing the actual layout. */
@media(max-width:700px){
  #browse .browse-eyebrow-label {
    font-size:var(--gimi-small-section-size)!important;
  }
}
/* Protected hand-written branding: intentionally excluded from uniform UI text.
   .stable-banner-text and .mobile-compact-kicker keep their approved treatments. */

/* Audited legacy specificity exceptions: older rules use an ID + multiple
   classes + !important; generic :is(...) declarations cannot defeat them. */
#home #whatHavePanel .gimi-sweet-note,
#home #whatHavePanel .gimi-secondary-picks > p,
#home #whatHavePanel .gimi-secondary-picks > p > small,
#home #whatHavePanel .gimi-sweet-picks-v221 > p,
#home #whatHavePanel .gimi-sweet-picks-v221 > p > small {
  font-family:var(--gimi-font-body)!important;
  font-weight:400!important;
}
#browse .guide-panel .browse-eyebrow-label,
#browse .ideas-panel-heading .browse-eyebrow-label,
#browse .quick-recipe-heading .browse-eyebrow-label {
  font-family:var(--gimi-font-body)!important;
  font-size:var(--gimi-small-section-size)!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:var(--gimi-small-section-tracking)!important;
  text-transform:uppercase!important;
  color:var(--gimi-green)!important;
}
#browse #washingFilters > .washing-filter-button,
#browse #washingFilters > .washing-filter-button > span,
#browse .washing-filter-button[data-washing="Few"],
#browse .washing-filter-button[data-washing="Some"],
#browse .washing-filter-button[data-washing="Lots"] {
  font-family:var(--gimi-font-body)!important;
  font-weight:600!important;
}
#shopping .shopping-planner-link,
#shopping .shopping-planner-link > span,
#about .about-week-planner .week-planner-kicker {
  font-family:var(--gimi-font-body)!important;
  font-weight:600!important;
}
#browse .guide-panel .ideas-panel-heading .browse-eyebrow-label {
  font-family:var(--gimi-font-body)!important;
  font-size:var(--gimi-small-section-size)!important;
  font-weight:600!important;
  line-height:1.25!important;
  letter-spacing:var(--gimi-small-section-tracking)!important;
  text-transform:uppercase!important;
  color:var(--gimi-green)!important;
}