/* ═══ Kitchen switcher — Little Rasas / Rasa Paws bars ═══
   Founder-picked 2026-10-17 from three rendered, blind-reviewed directions
   (research: 03-Notes/kitchen-switcher-research-2026-10-17/): the three
   kitchens side by side where the name was. Each says who it is for; the one
   you are in is lit from within in its own colour; one click to the others.
   Markup: scripts/area-kitchens.template.html, stamped into every kitchen page
   by `npm run sync:footer` (never edit it in a page). js/kitchen-switcher.js
   names the back pill and fills the menu-button panel. Colours read the nav's
   sub-brand tokens (--color-science-rgb) plus each kitchen's hue (--ks-rgb,
   the same triplets the footer's three doors use). */

/* The left zone: the brand (phones) or the three kitchens (wider). On desktop
   it is a size container, so the switcher steps down when the column is
   narrow (the Rasa Paws bar has six section links). */
.ks-left {
    grid-column: 1;
    justify-self: stretch;
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ── The switcher ───────────────────────────────────────────────────────────
   No icons: in the blind review rasa's three lines read as a menu button and
   the child figure as an account. Quiet kitchens sit in solid tones (never
   see-through — alpha goes murky on dark) and warm to their own colour under
   the pointer. */
.ks-fam { display: none; }
.ks-fam__item {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
/* The light. A child of the kitchen you are in, so it needs no script to
   find its place and exists at first paint — which lets the page transition
   slide it from Little Rasas to Rasa Paws (view-transition-name below). */
.ks-fam__lit {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 10px;
    background: radial-gradient(120% 140% at 50% 0%, rgba(var(--ks-rgb), 0.22) 0%, rgba(var(--ks-rgb), 0.07) 72%);
    box-shadow: inset 0 0 0 1px rgba(var(--ks-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: none;
    view-transition-name: ks-lit;
}
.ks-fam__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.04rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: #C9BFB4;
    transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
/* rasa is its two-tone lowercase wordmark here too (cream body, saffron "a"). */
.ks-fam__item--wordmark .ks-fam__name { letter-spacing: 0.12em; }
.ks-fam__name .ac { color: var(--saffron, #F5A623); }
.ks-fam__for {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #8C8780;
    transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.ks-fam__item.is-here .ks-fam__name { color: rgb(var(--ks-rgb)); }
.ks-fam__item--wordmark.is-here .ks-fam__name { color: var(--color-blush, #F3E6D8); }
.ks-fam__item.is-here .ks-fam__for { color: rgb(var(--ks-rgb)); }
.ks-fam__item:focus { outline: none; }
.ks-fam__item:focus-visible { box-shadow: 0 0 0 2px rgba(var(--ks-rgb), 0.6); }
@media (hover: hover) and (pointer: fine) {
    .ks-fam__item:not(.is-here):hover { background-color: rgba(var(--ks-rgb), 0.07); }
    .ks-fam__item:not(.is-here):hover .ks-fam__name { color: rgb(var(--ks-rgb)); }
    .ks-fam__item--wordmark:not(.is-here):hover .ks-fam__name { color: var(--color-blush, #F3E6D8); }
    .ks-fam__item:not(.is-here):hover .ks-fam__for { color: #C9C4BD; }
}

/* Where rasa is already a door in the bar, no second "‹ rasa" pill: the pill
   appears only when it can name where you came from ("‹ Planner"). */
.ks-back--unnamed { display: none !important; }

@media (min-width: 769px) {
    .ks-left { container: ks-left / inline-size; }
    .ks-left > .ks-brand { display: none; }
    .ks-fam {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 4px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.025);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    }
}
/* Step down as the column narrows: first the "for" lines go, then the names
   tighten. The names never leave. */
@container ks-left (max-width: 379px) {
    .ks-fam__for { display: none; }
}
@container ks-left (max-width: 299px) {
    .ks-fam__item { padding: 0 10px; }
    .ks-fam__name { font-size: 0.92rem; }
}
@container ks-left (max-width: 249px) {
    .ks-fam__item { padding: 0 8px; }
    .ks-fam__name { font-size: 0.85rem; }
    .ks-fam__item--wordmark .ks-fam__name { letter-spacing: 0.08em; }
}

/* Little Rasas ⇄ Rasa Paws: the light glides to the kitchen you chose while
   the bar holds still (css/page-transition.css names the bars). Leaving for or
   arriving from the main site there is no light on the other side: it simply
   goes or appears with its bar, never a ghost fading over the next page. */
::view-transition-group(ks-lit) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
::view-transition-old(ks-lit),
::view-transition-new(ks-lit) { mix-blend-mode: normal; }
::view-transition-old(ks-lit):only-child { animation: none; opacity: 0; }
::view-transition-new(ks-lit):only-child { animation: none; }

/* The section links' mono caps painted 1.75px above the bar's centre line
   (ink 26.5–33 against LOG IN's and the trial pill's 31.5, measured
   2026-10-17 on both bars) — one straight line again. Desktop only: below
   1101px the links live in the menu panel. */
@media (min-width: 1101px) {
    .rasas-nav__link,
    .paws-nav__link { top: 1.75px; }
}

/* ── Menu-button panel rows (phones and tablets) ─────────────────────────── */
.ks-eyebrow {
    display: block;
    padding: 6px 12px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.ks-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72);
    transition: background 0.25s ease, color 0.25s ease;
}
.ks-row:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.ks-row:focus { outline: none; }
.ks-row:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(var(--color-science-rgb), 0.5);
}
.ks-row__icon { width: 18px; height: 18px; flex-shrink: 0; }
/* The recipe pages repaint every saffron stroke in their own kitchen's colour
   (css/area-recipe.css §2) — which turned rasa's own icon green here (sampled
   119,165,80 on kids-recipe-detail, 2026-10-17). A kitchen's icon is that
   kitchen's colour on every page. */
body[data-area] .ks-row__icon [stroke*="245,166,35"] { stroke: rgba(245, 166, 35, 0.85); }
body[data-area] .ks-row__icon [fill*="245,166,35"] { fill: rgba(245, 166, 35, 0.08); }
.ks-kitchen__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.ks-kitchen__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.15;
    color: rgb(var(--ks-rgb));
}
/* The rasa row carries the two-tone wordmark: cream body, saffron "a", tracked
   like the footer door (never one flat amber word — verify-desktop gates it). */
.ks-kitchen--wordmark .ks-kitchen__name {
    color: var(--color-blush, #F3E6D8);
    letter-spacing: 0.12em;
}
.ks-kitchen__name .ac { color: var(--saffron, #F5A623); }
.ks-kitchen__for {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.ks-kitchen.is-here { background: rgba(var(--ks-rgb), 0.09); }
.ks-kitchen.is-here .ks-kitchen__for { color: rgba(var(--ks-rgb), 0.9); }
.ks-tick {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgb(var(--ks-rgb));
}
/* Utility rows: sentence case (never uppercase — "rasa" stays lowercase). */
.ks-util {
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}
/* Back pill once it names a page ("‹ Planner"): the Paws pill's wide
   tracking was set for the 4-letter wordmark and spaces a word out. */
.ks-back-label { letter-spacing: 0.02em !important; }

/* The panel group shows wherever the bar's switcher is out of sight: phones
   and tablets (the bars move to the menu button at 1100px, like the main
   rasa bar). */
.ks-drawer { display: none; }
/* The drawer's last rows must clear the phone tab bar (64px) — measured
   2026-10-17: "Rasa Paws · You are here" sat 16px under it at full scroll. */
@media (max-width: 1100px) {
  body.has-tabbar .rasas-nav__links,
  body.has-tabbar .paws-nav__links { padding-bottom: calc(64px + 32px + env(safe-area-inset-bottom, 0px)) !important; }
}
.ks-util--trial { color: #f5a623; }
.ks-util--trial:hover { color: #ffd27a; }
@media (max-width: 1100px) {
    .ks-drawer {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        max-width: 420px;
        margin-top: 2.2rem;
    }
    .ks-drawer .ks-eyebrow { padding-left: 0; }
    .ks-drawer .ks-row { padding-left: 4px; }
}

/* Small phones. The bar holds the name, the trial pill and the menu button,
   and at 360px the trial pill ran into the brand (live 2026-10-16: pill from
   x=126 against a name ending at 126). Make room: the pill drops its icon and
   some padding, the right cluster closes up (the 44px menu box still carries
   11px of air either side of its bars). */
@media (max-width: 400px) {
    .rasas-nav .rasas-nav__right,
    .paws-nav .paws-nav__right { gap: 4px; }
    .rasas-nav__right .nav__login-pill--trial svg,
    .paws-nav__right .nav__login-pill--trial svg { display: none; }
    .rasas-nav .rasas-nav__right .nav__login-pill--trial,
    .paws-nav .paws-nav__right .nav__login-pill--trial {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-fam__item,
    .ks-fam__name,
    .ks-fam__for { transition: none; }
    ::view-transition-group(ks-lit) { animation: none; }
}