/*
 * baybay foundation
 *
 * Design tokens carried over from the previous version's stylesheet so the
 * ported screens keep the look that already worked: forest green on a warm
 * off-white, coral for feeding, mint for sleep, and JetBrains Mono throughout.
 *
 * This file holds only tokens, reset and the pieces shared by every screen.
 * Screen-specific rules live alongside their views.
 */

:root {
    /* Greens */
    --primary: #2d5a2d;
    --primary-light: #4a7c59;
    --secondary: #6b8e5a;
    --accent: #b8d8ba;
    --accent-dark: #3d503f;
    --dark: #1a3d1a;

    /* The two activities, kept visually distinct at a glance */
    --feed: #ff6b6b;
    --feed-dark: #e85555;
    --feed-tint: #fdeceb;
    --sleep: #4ecdc4;
    --sleep-dark: #38b2a9;
    --sleep-tint: #e6f7f5;

    /* Within an activity, the type carries its own colour — blue bottles,
       pink breast feeds, violet nights — so a half-asleep glance can
       confirm the right thing is picked before the big button is pressed.
       The -dark shades hold AA contrast as text on white and on the tint.

       Copied from the application's base.css rather than invented here. The
       mockups in "What it does" redraw its sheets, and a palette guessed at
       on this side is exactly how a mockup starts flattering the app it is
       supposed to be showing. */
    --bottle: #4c9bd6;
    --bottle-dark: #26689f;
    --bottle-tint: #eaf3fb;
    --breast: #ec6f9f;
    --breast-dark: #b13a6c;
    --breast-tint: #fdeff5;
    --night: #8a7fc9;
    --night-dark: #6c5fb0;
    --night-tint: #f1effa;

    /* Surfaces */
    --background: #fafcf7;
    --surface: #ffffff;
    --light: #f7faf5;
    --border: #e4ebe0;

    /* Text */
    --text: #1f2d20;
    --muted: #6f7a6d;
    --muted-light: #b4b7b3;

    --danger: #ec350c;
    --success: #52c41a;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 4px 14px rgba(31, 45, 32, 0.07);
    --shadow-lift: 0 8px 22px rgba(31, 45, 32, 0.12);

    --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    /* Respects the notch and the home indicator on a phone held one-handed. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3 {
    margin: 0 0 0.5rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 1rem; }

a {
    color: var(--secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover { color: var(--primary); }

small { font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    padding: 2rem 1.15rem 3rem;
}

.centered {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.4rem;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.brand img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-dark);
}

input[type="email"],
input[type="text"],
input[type="datetime-local"],
input[type="number"],
input[type="time"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 0.72rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    /* 16px minimum, or iOS Safari zooms the whole page on focus. */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(107, 142, 90, 0.16);
}

/* Visible focus for keyboard users, without ringing every mouse click. */
:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

.field {
    margin-bottom: 1rem;
}

.hint {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    /* 44px minimum touch target — this app is used one-handed at 3am. */
    min-height: 46px;
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-family: var(--font);
    font-size: 0.98rem;
    font-weight: 600;
    /* Several buttons are <a> elements — the export downloads, for one — and
       without this they inherit the underline from the link rule above. */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn:hover {
    background: var(--primary-light);
    color: #fff;
    box-shadow: var(--shadow-lift);
}

.btn:active { transform: translateY(1px); }

.btn--quiet {
    background: transparent;
    color: var(--secondary);
    border: 1.5px solid var(--border);
}

.btn--quiet:hover {
    background: var(--light);
    color: var(--primary);
    border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Demo picker

   The rate-limited /demo page hands back the demos this visitor already has,
   up to five of them. It renders through the minimal layout, which loads this
   file and nothing else, so the component lives here rather than in a sheet
   of its own.

   Five full-width primaries read as one green slab, which is what this was
   before. Only the newest keeps that weight — somebody who has just lost a
   tab wants the one they were in — and the rest sit quietly beneath it, so
   the block looks deliberate whether it holds one row or five.
   -------------------------------------------------------------------------- */

.demo-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.demo-list__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* 44px minimum touch target, as everywhere else. */
    min-height: 46px;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                border-color 0.12s ease, background 0.12s ease;
}

.demo-list__link:hover {
    background: var(--light);
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.demo-list__link:active { transform: translateY(1px); }

/* The newest demo carries the page's one primary action. */
.demo-list__link--newest {
    border-color: var(--primary);
    background: var(--primary);
}

.demo-list__link--newest:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-lift);
}

/* The name and its age share a column, so a long slug wraps inside the tile
   instead of shouldering the arrow off the end of it. */
.demo-list__body {
    flex: 1;
    min-width: 0;
}

.demo-list__name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--primary);
    /* Slugs are three words joined by hyphens. On a narrow phone they break
       at the hyphens first and only then mid-word. */
    overflow-wrap: anywhere;
}

.demo-list__when {
    display: block;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--muted);
}

.demo-list__link--newest .demo-list__name { color: #fff; }

.demo-list__link--newest .demo-list__when { color: rgba(255, 255, 255, 0.78); }

.demo-list__go {
    display: flex;
    flex: none;
    color: var(--muted-light);
    transition: transform 0.12s ease;
}

.demo-list__link--newest .demo-list__go { color: rgba(255, 255, 255, 0.8); }

.demo-list__link:hover .demo-list__go { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Icons

   Icon::svg() emits a bare 24×24 <svg class="ico">. Sizing it in em rather
   than rem means an icon tracks the text it sits beside without every call
   site having to say so.
   -------------------------------------------------------------------------- */

.ico {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    /* Optical centring: a cap-height glyph beside a full-height box always
       rides high otherwise. */
    vertical-align: -0.22em;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.message {
    margin-bottom: 1.15rem;
    padding: 0.8rem 0.95rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid;
    font-size: 0.9rem;
    line-height: 1.55;
}

.message--ok {
    background: #f1f8ee;
    border-color: var(--secondary);
    color: #33502f;
}

.message--error {
    background: #fdf1ee;
    border-color: var(--danger);
    color: #8d2c11;
}

/* --------------------------------------------------------------------------
   Divider with a word in it
   -------------------------------------------------------------------------- */

.or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--muted-light);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.or::before,
.or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.footnote {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}