/* Class names mirror PHP functions: ui_button() -> .ui-button, layout_page() -> .layout-*
   Color/type/spacing tokens ported from ~/Develop/Python ui/1_theme.py (Material You, seed #63A002)
   — keep both in sync if the seed or scale changes there.

   M3 window size classes (breakpoints) — no differing content yet, all sizes render the same;
   this is the single source of truth to use once a screen actually needs to differ:
     compact      < 600px   — phone portrait
     medium     600–839px   — tablet/foldable portrait
     expanded   840–1199px  — phone/tablet/foldable landscape
     large     1200–1599px  — desktop
     extra-large 1600px+    — desktop, ultra-wide
   CSS custom properties can't be used inside @media conditions, so these thresholds are documented
   here and must be hardcoded again in any @media (min-width: ...) rule that uses them. */

:root {
    /* Material You color roles — light scheme (default) */
    --md-primary: #4C662B;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #CDEDA3;
    --md-on-primary-container: #354E16;
    --md-secondary: #586249;
    --md-on-secondary: #FFFFFF;
    --md-secondary-container: #DCE7C8;
    --md-on-secondary-container: #404A33;
    --md-tertiary: #386663;
    --md-on-tertiary: #FFFFFF;
    --md-tertiary-container: #BCECE7;
    --md-on-tertiary-container: #1F4E4B;
    --md-error: #BA1A1A;
    --md-on-error: #FFFFFF;
    --md-error-container: #FFDAD6;
    --md-on-error-container: #93000A;
    --md-background: #F9FAEF;
    --md-on-background: #1A1C16;
    --md-surface: #F9FAEF;
    --md-on-surface: #1A1C16;
    --md-surface-variant: #E1E4D5;
    --md-on-surface-variant: #44483D;
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #F3F4E9;
    --md-surface-container: #EEEFE3;
    --md-surface-container-high: #E8E9DE;
    --md-surface-container-highest: #E2E3D8;
    --md-outline: #75796C;
    --md-outline-variant: #C5C8BA;
    --md-inverse-surface: #2F312A;
    --md-inverse-on-surface: #F1F2E6;
    --md-inverse-primary: #B1D18A;

    /* M3 typescale */
    --md-display-large-size: 57px;   --md-display-large-weight: 400;
    --md-display-medium-size: 45px;  --md-display-medium-weight: 400;
    --md-display-small-size: 36px;   --md-display-small-weight: 400;
    --md-headline-large-size: 32px;  --md-headline-large-weight: 400;
    --md-headline-medium-size: 28px; --md-headline-medium-weight: 400;
    --md-headline-small-size: 24px;  --md-headline-small-weight: 400;
    --md-title-large-size: 22px;     --md-title-large-weight: 400;
    --md-title-medium-size: 16px;    --md-title-medium-weight: 500;
    --md-title-small-size: 14px;     --md-title-small-weight: 500;
    --md-body-large-size: 16px;      --md-body-large-weight: 400;
    --md-body-medium-size: 14px;     --md-body-medium-weight: 400;
    --md-body-small-size: 12px;      --md-body-small-weight: 400;
    --md-label-large-size: 14px;     --md-label-large-weight: 500;
    --md-label-medium-size: 12px;    --md-label-medium-weight: 500;
    --md-label-small-size: 11px;     --md-label-small-weight: 500;

    /* Spacing scale */
    --spacing-xxxsmall: 2px;
    --spacing-xxsmall: 4px;
    --spacing-xsmall: 8px;
    --spacing-small: 12px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --spacing-xlarge: 32px;
    --spacing-xxlarge: 40px;
    --spacing-xxxlarge: 48px;

    --radius: 6px;
    --font: system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --md-primary: #B1D18A;
        --md-on-primary: #1F3701;
        --md-primary-container: #354E16;
        --md-on-primary-container: #CDEDA3;
        --md-secondary: #BFCBAD;
        --md-on-secondary: #2A331E;
        --md-secondary-container: #404A33;
        --md-on-secondary-container: #DCE7C8;
        --md-tertiary: #A0D0CB;
        --md-on-tertiary: #003735;
        --md-tertiary-container: #1F4E4B;
        --md-on-tertiary-container: #BCECE7;
        --md-error: #FFB4AB;
        --md-on-error: #690005;
        --md-error-container: #93000A;
        --md-on-error-container: #FFDAD6;
        --md-background: #12140E;
        --md-on-background: #E2E3D8;
        --md-surface: #12140E;
        --md-on-surface: #E2E3D8;
        --md-surface-variant: #44483D;
        --md-on-surface-variant: #C5C8BA;
        --md-surface-container-lowest: #0C0F09;
        --md-surface-container-low: #1A1C16;
        --md-surface-container: #1E201A;
        --md-surface-container-high: #282B24;
        --md-surface-container-highest: #33362E;
        --md-outline: #8F9285;
        --md-outline-variant: #44483D;
        --md-inverse-surface: #E2E3D8;
        --md-inverse-on-surface: #2F312A;
        --md-inverse-primary: #4C662B;
    }
}

* { box-sizing: border-box; }

/* Mobile-native feel: no iOS auto-zoom on inputs, no rubber-band past page edges, no gray tap flash / 300ms tap delay */
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--md-on-background);
    background: var(--md-background);
}
a, button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Native-app screen transitions between pages (cross-document view transitions — Safari 18.2+, Chrome 126+;
   no-op elsewhere, an ordinary instant navigation). public/_assets/app.js gives the root element a
   direction-specific view-transition-name (app-forward/app-back), inferred by comparing the outgoing/incoming
   URLs' own ?step= values (works for our Back/Next links AND the browser's real back/forward buttons, since
   both are read the same way). Renaming is the confirmed-working mechanism — conditionally gating the shared
   "root" name behind a custom ancestor class does not work, the view-transition pseudo-element tree doesn't
   match against it. No direction detected -> name stays the UA default "root" -> plain cross-fade below. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root), ::view-transition-old(app-forward), ::view-transition-old(app-back),
::view-transition-new(root), ::view-transition-new(app-forward), ::view-transition-new(app-back) {
    animation-duration: 2s; /* temporarily long, for timing measurement — revert once the forward/back speed mismatch is understood */
    animation-timing-function: ease-out;
}
::view-transition-old(app-forward) { animation-name: app-slide-out-left; }
::view-transition-new(app-forward) { animation-name: app-slide-in-right; }
::view-transition-old(app-back) { animation-name: app-slide-out-right; }
::view-transition-new(app-back) { animation-name: app-slide-in-left; }
@keyframes app-slide-out-left { to { transform: translateX(-100%); } }
@keyframes app-slide-in-right { from { transform: translateX(100%); } }
@keyframes app-slide-out-right { to { transform: translateX(100%); } }
@keyframes app-slide-in-left { from { transform: translateX(-100%); } }

/* layout_app_bar() — M3 Small Top App Bar, ported from ~/Develop/Python ui/1_app_bar.py; menu icon is decorative for now (no drawer wired up), title always centered.
   Fixed at the top (like a native nav bar) — surface-container elevation tint distinguishes it from the content below.
   Left/right padding add safe-area-inset so the icon/title never sit under a landscape notch or rounded corner. */
.app-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(64px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 env(safe-area-inset-left);
    display: flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    background: var(--md-surface-container);
    z-index: 10;
}
.app-bar__icon-btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--md-on-surface-variant);
    z-index: 1;
}
/* 56px inset ported as-is from the source's title_left constant — an 8px gap after the 48px icon, same in Python; extended by the safe-area on each side. */
.app-bar__title {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 calc(56px + env(safe-area-inset-right)) 0 calc(56px + env(safe-area-inset-left));
    text-align: center;
    font-size: var(--md-title-large-size);
    font-weight: var(--md-title-large-weight);
    color: var(--md-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* layout_page() — scrollable content region below the fixed app bar; this is what actually scrolls, not body. */
.layout-scroll {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--md-surface);
    padding-bottom: env(safe-area-inset-bottom);
}
/* No app bar on this page (layout_page() called without one) — scroll region then starts below the notch itself instead. */
.layout-scroll--no-app-bar { top: env(safe-area-inset-top); }

.layout-main {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
    /* Never less than the 16px baseline; grows only if a landscape notch/rounded corner actually needs more. */
    padding-left: max(var(--spacing-medium), env(safe-area-inset-left));
    padding-right: max(var(--spacing-medium), env(safe-area-inset-right));
}
.layout-main h1 {
    font-size: var(--md-headline-medium-size);
    font-weight: var(--md-headline-medium-weight);
    margin: 0 0 var(--spacing-large);
    color: var(--md-on-background);
}

/* Self-hosted (Apache 2.0 licensed, see google/material-design-icons) — avoids a third-party request to Google's CDN. */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('/_assets/material-symbols-rounded.woff2') format('woff2');
}

/* ui_icon() — Material Symbols Rounded, rendered via ligature text; icon inherits color from its parent */
.ui-icon {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.ui-icon--medium { font-size: calc(20px * 6 / 5); }
.ui-icon--small { font-size: calc(16px * 6 / 5); }

/* ui_button() — M3 pill buttons, ported from ~/Develop/Python ui/1_button.py (filled/outlined/tonal/text, medium/small) */
.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xsmall);
    box-sizing: border-box;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font);
    font-size: var(--md-label-large-size);
    font-weight: var(--md-label-large-weight);
    cursor: pointer;
}
.ui-button--medium { height: 56px; padding: 0 24px; border-radius: 28px; }
.ui-button--small { height: 40px; padding: 0 16px; border-radius: 20px; }

.ui-button--filled { background: var(--md-primary); color: var(--md-on-primary); }
.ui-button--filled:hover { background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary)); }

.ui-button--outlined { background: transparent; color: var(--md-on-surface-variant); border: 1px solid var(--md-outline-variant); }
.ui-button--outlined:hover { background: color-mix(in srgb, var(--md-on-surface-variant) 8%, transparent); }

.ui-button--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.ui-button--tonal:hover { background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); }

.ui-button--text { background: transparent; color: var(--md-primary); }
.ui-button--text:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }

/* ui_card() */
.ui-card {
    display: block;
    padding: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius);
    background: var(--md-surface-container);
    color: inherit;
    text-decoration: none;
}
.ui-card:hover { border-color: var(--md-primary); }
.ui-card__title {
    margin: 0 0 4px;
    font-size: var(--md-title-medium-size);
    font-weight: var(--md-title-medium-weight);
    color: var(--md-on-surface);
}
.ui-card__text {
    margin: 0;
    font-size: var(--md-body-medium-size);
    color: var(--md-on-surface-variant);
}