/* house-style: token bridge */
/* ===========================================================================
   Yumee hub — the site chrome, and the one token bridge.

   The house style lives in ../design/ (a copy of Yumee/lib/design/, never
   edited here). This file maps the site's own names onto the --yu-* tokens
   once; after this block no stylesheet the site owns states a colour, a font
   or a radius. Light only: the family has no dark theme.

   Composition follows docs/brand/references/yumee.png: a purple handwritten
   wordmark with a curl, uppercase nav, one ink pill; paper everywhere; drawn
   1.5px outlines; an ink tab bar on a phone once somebody is signed in.
   =========================================================================== */

/* The house style (../design/yumee.tokens.css, yumee.base.css and
   yumee.components.css) is linked by inc/layout.php just before this file, in
   that order, rather than @imported here: an import chain held the first
   paint for three round trips. The cascade is the same. */

:root {
    /* ---------------------------------------------------------- surfaces -- */
    --bg:             var(--yu-bg);
    --card:           var(--yu-surface-card);
    --mist:           var(--yu-surface);
    --tint:           var(--yu-surface-tint);
    --contrast:       var(--yu-contrast);
    --on-contrast:    var(--yu-contrast-ink);
    --contrast-muted: var(--yu-rail-muted);

    /* --------------------------------------------------------------- ink -- */
    --ink:       var(--yu-ink);
    --ink-soft:  var(--yu-ink-soft);
    --ink-faint: var(--yu-ink-faint);

    /* ------------------------------------------------------------ purple -- */
    --purple:      var(--yu-purple);
    --purple-deep: var(--yu-lav-600);
    --purple-ink:  var(--yu-primary-ink);   /* inline links: AA on paper */
    --lav:         var(--yu-lavender);
    --lav-50:      var(--yu-lav-50);
    --lav-300:     var(--yu-lav-300);

    /* ----------------------------------------------------------- accents -- */
    --pink:      var(--yu-pink);
    --pink-soft: var(--yu-pink-soft);
    --pink-ink:  var(--yu-pink-ink);
    --mint:      var(--yu-mint);
    --mint-soft: var(--yu-mint-soft);
    --mint-ink:  var(--yu-mint-ink);

    /* ------------------------------------------------------------- state -- */
    --ok:          var(--yu-ok);
    --ok-soft:     var(--yu-ok-soft);
    --warn:        var(--yu-warn);
    --warn-soft:   var(--yu-warn-soft);
    --danger:      var(--yu-danger);
    --danger-soft: var(--yu-danger-soft);

    /* -------------------------------------------------------------- line -- */
    --line:         var(--yu-line);
    --line-strong:  var(--yu-line-strong);
    --outline:      var(--yu-outline);
    --outline-soft: var(--yu-outline-soft);
    --hairline:     var(--yu-hairline);

    /* -------------------------------- Google's sign-in button (040) -- */
    /* Google's branding rules, not the house style, for "Continue with
       Google" and nothing else (inc/signin.php, auth.css): white, a grey
       hairline, near-black text, Google's own sans where the system has
       it. Stated here because they are Google's colours, not ours. */
    --google-bg:    #FFFFFF;
    --google-hover: #F8F9FA;
    --google-line:  #747775;
    --google-ink:   #1F1F1F;
    --google-font:  "Google Sans", Roboto, Arial, sans-serif;

    /* ---------------------------------- the home page's lines (2026-09-28) -- */
    /* The thread art on the home page (home-lines.js reads these): the house
       lavenders and purple, plus a saturated violet, a rose and an orchid so
       the bundles have the warm pink-purple mix of the owner's references. */
    --art-lav:    var(--yu-lavender);
    --art-lilac:  var(--yu-lav-300);
    --art-orchid: #C69AE8;
    --art-purple: var(--yu-purple);
    --art-violet: #6C52D4;
    --art-deep:   var(--yu-lav-600);
    --art-pink:   var(--yu-pink);
    --art-rose:   #E48DC4;
    /* One colour per app on the home page (in catalogue order): the apps'
       work comes in tangled, each in its own colour, and leaves sorted. */
    --art-app-1:  #6C52D4;   /* violet */
    --art-app-2:  #5C86EE;   /* periwinkle */
    --art-app-3:  #B05FD6;   /* orchid */
    --art-app-4:  #E46FA8;   /* rose */
    --art-app-5:  #3E3597;   /* indigo */
    --art-app-6:  #F0936F;   /* peach */
    /* The dark stage the apps stand on (inc/home/show.php, the owner's
       mockup of 2026-10-04): a night violet, the window's lit edge and its
       glow, the pale glass of the pieces in front, and the words on it. */
    --show-night:      #100C22;
    --show-night-hi:   #2A1F5E;
    --show-edge:       #9A82FF;
    --show-accent:     #7C5CF5;
    --show-glow:       rgba(124, 92, 255, .55);
    --show-glow-soft:  rgba(124, 92, 255, .20);
    --show-glass:      rgba(234, 228, 252, .92);
    --show-glass-line: rgba(255, 255, 255, .60);
    --show-thread:     rgba(168, 148, 255, .42);
    --show-tab:        rgba(255, 255, 255, .07);
    --show-tab-hover:  rgba(255, 255, 255, .14);
    --show-tab-line:   rgba(255, 255, 255, .18);
    --show-text:       #FFFFFF;
    --show-text-soft:  rgba(255, 255, 255, .84);
    --show-kicker:     rgba(214, 204, 255, .92);
    --show-shadow:     0 40px 80px -40px rgba(30, 20, 80, .55);

    /* ------------------------------------------------------------- shape -- */
    --r-xs:   var(--yu-r-xs);
    --r-sm:   var(--yu-r-sm);
    --r-md:   var(--yu-r-md);
    --r-lg:   var(--yu-r-lg);
    --r-xl:   var(--yu-r-xl);
    --r-pill: var(--yu-r-pill);
    --r-round: 50%;

    --shadow-lift: var(--yu-shadow-lift);

    /* ------------------------------------------ lines, shadows (house) -- */
    --shadow-card:  var(--yu-shadow-card);
    --shadow-hover: var(--yu-shadow-hover);
    --shadow-float: var(--yu-shadow-float);
    --shadow-purple: var(--yu-shadow-purple);
    --line-card:    var(--yu-line-card);

    /* The heads: paper where the words are, lavender and a touch of pink
       blooming on the art side, fading back to paper at the foot. */
    --grad-hero:
        radial-gradient(60% 80% at 78% 38%, color-mix(in srgb, var(--yu-lavender) 85%, transparent) 0%, transparent 70%),
        radial-gradient(38% 50% at 96% 8%, color-mix(in srgb, var(--yu-pink-soft) 90%, transparent) 0%, transparent 70%),
        radial-gradient(40% 60% at 4% 100%, color-mix(in srgb, var(--yu-lavender) 45%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, var(--yu-lav-50) 0%, var(--yu-mist) 100%);
    --grad-band:
        radial-gradient(50% 120% at 88% 10%, color-mix(in srgb, var(--yu-lavender) 70%, transparent) 0%, transparent 70%),
        radial-gradient(30% 90% at 100% 0%, color-mix(in srgb, var(--yu-pink-soft) 75%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, var(--yu-lav-50) 0%, var(--yu-mist) 100%);

    /* -------------------------------------------------------------- type -- */
    /* Headings are print (the house style since 2026-09-23). Mali survives
       on the site alone, as the scribble: margin notes, speech, a remark. */
    --scribble:   var(--yu-font-scribble);
    --font:       var(--yu-font);
    --hand:       var(--yu-font);
    --mono:       var(--yu-font-mono);
    --track:      var(--yu-track-label);
    --track-caps: var(--yu-track-caps);
    --w-head:     var(--yu-w-head);
    --w-hero:     var(--yu-w-hero);

    /* ------------------------------------------------------------ motion -- */
    --ease: var(--yu-ease);
    --fast: var(--yu-fast);
    --slow: var(--yu-slow);

    /* ------------------------------------------------------------ layout -- */
    --gutter:  var(--yu-gutter);
    --measure: var(--yu-measure);
    --header-h: 68px;
    --header-gap: 14px;
    --header-total: calc(var(--header-h) + 2 * var(--header-gap));
}

/* ---------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-total) + 12px);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body { margin: 0; min-height: 100vh; }

/* Blocks shown and hidden with the `hidden` attribute are often display:grid
   or flex; a class would otherwise beat the user-agent's [hidden] rule. */
[hidden] { display: none !important; }

img { max-width: 100%; height: auto; }

a { color: var(--purple-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 { margin: 0; }

/* A card's small uppercase name is sometimes a real heading (a plan, a pack,
   an app on /costs, "What it costs"), so the page outline and a crawler read
   it as one. It must look exactly like the paragraph it replaced: the design
   base gives `.yu h2, .yu h3` the headline face, weight and tracking (0,1,1),
   so hand the label's own back (0,2,1). */
.yu h2.yu-label,
.yu h3.yu-label {
    font-family: var(--yu-font);
    font-weight: var(--yu-w-ui);
    letter-spacing: var(--yu-track-label);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--contrast);
    color: var(--on-contrast);
    padding: 12px 18px;
    border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; color: var(--on-contrast); }

/* -------------------------------------------------------------- header ---- */
/* A floating paper bar: rounded, a soft cast shadow, never glass. It floats
   over the gradient heads (`.home-hero`, `.page-band` pull themselves under
   it) and over plain paper everywhere else. The outer element is a clear,
   click-through frame so only the bar itself catches the pointer. */

.site-header {
    position: sticky;
    top: var(--header-gap);
    z-index: 40;
    margin-top: var(--header-gap);
    pointer-events: none;
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--header-h);
    padding-inline: clamp(16px, 2vw, 24px) 12px;
    background: var(--card);
    border: 1px solid var(--line-card);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-float);
    pointer-events: auto;
    transition: box-shadow var(--slow) var(--ease);
}
.site-header[data-scrolled='true'] .site-header__inner { box-shadow: var(--shadow-hover); }

/* The name in purple, and nothing beside it. */
.site-brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    padding-block: 6px;
}
.site-brand yumee-logo { --yu-logo-size: 1.95rem; }
/* The Yumee mark before the wordmark: about the height of the letters with
   their ascenders, so the pair reads as one logo. */
.site-brand { gap: .45em; }
.site-brand__mark { display: block; width: auto; height: 2.15rem; flex: none; }
/* "yumee" has no ascenders, so its letters sit in the lower part of their own
   box and the pair looked lopsided: the mark on the centre line, the word
   below it. Lifting the word puts the middle of its letters on the same line
   as the middle of the mark and of the header. A percentage, so every size of
   the logo (header, phone, sign-in pages) moves by the same share. */
.site-brand yumee-logo { transform: translateY(-9%); }

.site-nav { margin-left: auto; }

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.4vw, 18px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: var(--r-sm);
}
.site-nav__link svg { width: 18px; height: 18px; flex: none; color: var(--ink-faint); }
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover svg { color: var(--purple); }
.site-nav__link[aria-current='page'] { color: var(--purple-ink); }
.site-nav__link[aria-current='page'] svg { color: var(--purple); }
.site-nav__link[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -12px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--purple);
}

.site-nav__cta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: clamp(0px, 1.2vw, 14px);
}
.site-nav__cta .yu-btn { text-transform: none; letter-spacing: 0; font-size: .875rem; }

/* The balance, one glance from anywhere: an outlined lavender pill. */
.site-credits {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line-card);
    border-radius: var(--r-pill);
    background: var(--lav-50);
    color: var(--purple-ink);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.site-credits svg { width: 16px; height: 16px; color: var(--purple); }
.site-credits:hover { border-color: var(--lav-300); color: var(--ink); }

.site-menu { display: none; }
.site-menu svg { width: 24px; height: 24px; }

@media (max-width: 1020px) {
    .site-nav__link svg { display: none; }
}

@media (max-width: 860px) {
    :root { --header-h: 60px; --header-gap: 10px; }

    .site-brand yumee-logo { --yu-logo-size: 1.7rem; }
    .site-brand__mark { height: 1.9rem; }

    .site-menu { display: inline-flex; margin-left: auto; }

    .site-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        margin: 0;
        padding: 6px 16px 16px;
        max-height: calc(100dvh - var(--header-total) - 110px);
        overflow-y: auto;
        background: var(--card);
        border: 1px solid var(--line-card);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-hover);
        display: none;
    }
    .site-nav[data-open='true'] { display: block; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav__link {
        display: flex;
        padding: 15px 4px;
        font-size: .9375rem;
        border-radius: 0;
        border-bottom: var(--outline-soft);
    }
    .site-nav__link svg { display: block; }
    .site-nav__link[aria-current='page']::after { display: none; }
    .site-nav__cta { flex-direction: column; align-items: stretch; margin: 14px 0 0; }
    .site-nav__cta .yu-btn, .site-credits { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------- footer ---- */

.site-footer {
    color: var(--ink-faint);
    font-size: .8125rem;
    border-top: var(--outline-soft);
}
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 28px;
    padding-block: 24px 32px;
}
.site-footer__made { margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer__links a {
    color: var(--ink-soft);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: var(--track);
    text-transform: uppercase;
    text-decoration: none;
    padding-block: 8px;
}
.site-footer__links a:hover { color: var(--purple-ink); }
.site-footer__social { display: flex; gap: 6px; }
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-round);
    border: 1px solid var(--line-card);
    background: var(--card);
    color: var(--ink-soft);
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.site-footer__social a:hover { color: var(--purple-ink); border-color: var(--lav); }
.site-footer__social a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.site-footer__social svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------- tab bar ---- */
/* Only once somebody is signed in, only on a phone: an ink pill with the
   current section in a lavender circle. */

.site-tabbar { display: none; }
.site-tabbar .yu-tabbar__item { text-decoration: none; }

@media (max-width: 860px) {
    body.has-tabbar { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

    body.has-tabbar .site-tabbar {
        display: block;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 45;
    }
}

/* ---------------------------------------------------------- page frame ---- */
/* The signed-in and long-form pages share one head: an uppercase label, a
   bold title with a sparkle, one lead line. On the hub it sits in a
   `.page-band` (skin.css): the gradient behind the floating header. */

.page { padding-block: clamp(24px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.page-band + .page,
.page-band + .shop-page { padding-top: clamp(8px, 2vw, 20px); }

.page-head { margin-bottom: clamp(24px, 4vw, 40px); }
.page-head > .yu-label { margin-bottom: 12px; }
.page-title { margin: 0; }
.page-head .yu-lead { margin: 16px 0 0; }

/* A row of pills that wraps rather than pushing the card wider. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------ offer banner (041) ---- */
/* One line above the floating header (inc/layout.php): the offer that applies
   to this visitor, or the note that offer e-mails are off. It sits in the
   flow, so the header and the gradient heads below it keep their own maths.
   It wraps instead of widening the page on a phone. */
.site-offer {
    position: relative;
    z-index: 41;
    background: var(--lav-50);
    border-bottom: 1px solid var(--line-card);
    color: var(--ink);
}
.site-offer__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-block: 6px;
}
.site-offer__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}
.site-offer__left { color: var(--purple-ink); font-weight: var(--yu-w-ui); white-space: nowrap; }
.site-offer__link { font-weight: var(--yu-w-ui); white-space: nowrap; }
.site-offer__close {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.site-offer__close:hover { background: var(--lav); color: var(--ink); }
.site-offer__close:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.site-offer__close svg { width: 16px; height: 16px; transform: rotate(45deg); }
@media (max-width: 480px) {
    .site-offer__text { font-size: .8125rem; text-align: left; }
    .site-offer__left, .site-offer__link { white-space: normal; }
}