/* Loaded after Botanical Linen; all choices flow through these shared tokens. */
:root{--size-body:16px;--size-h1:38px;--size-h2:28px;--size-h3:22px;--size-nav:12px;--size-small:14px;--size-h1-mobile:30px;--font-nav:var(--font-heading);--on-crimson:#fff;--on-forest:#fff;--bg:var(--linen);--panel:var(--porcelain);--ink:var(--charcoal);--muted:var(--secondary);--line:var(--rule);--border:var(--rule);--accent:var(--crimson);--accent2:var(--forest)}
html body{font-size:var(--size-body)}
html body :is(p,td,label,input,select,textarea,li,dd,dt,.description,.note-text){font-size:var(--size-body)!important}
html body :is(small,.hint,.mini,.small,.meta){font-size:var(--size-small)!important}
html body h1{font-size:var(--size-h1)!important}
html body h2{font-size:var(--size-h2)!important}
html body h3{font-size:var(--size-h3)!important}
html body .tabs .tab{font-family:var(--font-nav)!important;font-size:var(--size-nav)!important}
html body :is(.section-nav button,button,.button){font-size:var(--size-body)}
html body :is(.primary,button.primary,.button.primary,.sg-primary){color:var(--on-crimson)!important}
html body :is(.primary,button.primary,.button.primary,.sg-primary):hover{background:color-mix(in srgb,var(--crimson),var(--on-crimson) 12%)!important}
html body :is(.fg-finish,.fg-recipe-start,.fg-cta,.sg-finish,.sg-recipe-start,.getting-started,button.good){color:var(--on-forest)!important;background:var(--forest)}
html body :is(.fg-finish,.fg-recipe-start,.fg-cta,.sg-finish,.sg-recipe-start,.getting-started) :is(h1,h2,h3,p,small,strong,span){color:var(--on-forest)!important}
html body :is(.fg-finish,.fg-recipe-start) button{color:var(--on-crimson)!important}
html body #guide-home{--sage:var(--design-sage,#E0E8D7);--red:var(--crimson);--green:var(--forest)}
html body .brand-caption{display:block;margin-top:10px;font-size:var(--size-small);line-height:1.5;color:var(--muted);text-align:center}
html body .menu-panel .design-admin-link{display:block;padding:12px;color:var(--ink);text-decoration:none;font-size:var(--size-body)}
html body .menu-panel .design-admin-link[hidden]{display:none}
[data-site-copy]{white-space:pre-line;overflow-wrap:anywhere}
.design-preview :is(h1,h2,h3,p)[data-site-copy]:hover,.design-preview.design-pick-text [data-site-copy]:hover{outline:2px dashed var(--forest);outline-offset:3px;cursor:text}
.design-preview .design-admin-link{display:none!important}
@media(max-width:650px){html body h1{font-size:var(--size-h1-mobile)!important}html body .app-header>.brand{flex-basis:130px;width:130px}html body .tabs .tab{white-space:normal;overflow-wrap:anywhere}html body .tabs{min-width:0}}
@media print{html body h1{font-size:22pt!important}html body :is(p,td,label){font-size:12pt!important}}

/* Ingredient categories keep their meaningful colours independently of the site palette. */
html body :is(.ib-tile,.ib-categories button,.ib-directory button){background:var(--category-tint,var(--panel));border-color:var(--line);border-left-color:var(--category-color,var(--line));color:var(--ink)}
html body :is(.ingredient-category-heading,.recipe-category-heading){background:var(--category-tint);border-left:5px solid var(--category-color);padding:10px}
html body .ingredient-section{background:var(--tint);border-color:var(--type)}
html body .ingredient-category-heading h3{color:#293129}
html body .recipe-workspace .quick-slider{accent-color:var(--category-color,var(--forest))}
html body .spice-cap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:4px 0 8px}
html body .spice-cap small{font-size:var(--size-small)!important;color:var(--muted)}
html body .spice-cap label{font-size:var(--size-small)!important;display:flex;align-items:center;gap:6px;min-height:36px;line-height:1.4}
html body .spice-cap input{width:16px;height:16px;min-height:0}
html body .split-guide{font-size:var(--size-small);min-height:44px;margin:8px 0 12px;padding:7px 12px}
@media(max-width:600px){
  html body .ib-picker .ib-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr));grid-auto-rows:auto;gap:6px;align-items:stretch}
  html body .ib-picker .ib-tile{height:auto;min-height:72px;padding:6px;gap:4px}
  html body .ib-picker .ib-name{padding:0;min-height:44px}
  html body .ib-picker .ib-name strong,html body .ib-picker .ib-choice strong{font-size:var(--size-ingredient,16px)!important;line-height:1.35}
  html body .ib-picker .ib-tile:not(.ib-added) small{display:none}
  html body .ib-picker .ib-star{padding:4px;min-width:36px;min-height:44px;flex:none}
  html body .ib-picker .ib-directory{grid-template-columns:repeat(auto-fit,minmax(min(100%,122px),1fr));gap:6px}
  html body .ib-picker .ib-directory button{padding:10px 8px}
  html body .ib-picker .ib-directory strong{font-size:14px;line-height:1.4}
  html body .ib-picker .ib-directory small{font-size:12px!important}
  html body .spice-cap label{min-height:44px}
}
/* Titles and tile names share the editor's type controls at every screen size. */
html body .stencil-choice strong,html body .stencil-choice strong *{font-family:var(--font-heading)!important;font-size:var(--size-h3)!important;line-height:1.25}
html body :is(.ib-name,.ib-choice) strong{font-family:var(--font-body)!important;font-size:var(--size-ingredient,16px)!important;line-height:1.35}
html body .ib-grid{grid-auto-rows:auto}
html body .ib-tile{height:auto;min-height:88px}

/* Touch/programmatic focus is quiet; Tab navigation and actual selections remain clear. */
html body.pointer-input :is(button,a,summary,[tabindex="-1"]):focus-visible{outline:none!important;outline-offset:0!important}
html body :is(h1,h2,h3)[tabindex="-1"]:focus{outline:none!important}
html body.pointer-input .ib-categories button[aria-pressed=true]{outline:2px solid var(--ink)!important;outline-offset:-2px!important}

/* Emphasis must reach nested editable spans inside style-choice buttons. */
html body [data-site-copy] strong,html body .stencil-choice>strong,html body .stencil-choice>strong *{font-weight:700!important}