/* ============================================================================
   CalorieNetwork design system
   Base: "Fog" paper, "Basil" ink, "Spruce" primary, "Saffron" accent.
   Type: Fraunces (display numerals & headings), Manrope (interface).
   Radii encode role: cards 20px, controls 10px, pills full.
   ========================================================================== */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("fonts/fraunces.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/manrope.woff2") format("woff2");
}

:root {
    /* palette */
    --cn-fog: #F2F4F1;
    --cn-fog-deep: #E6EAE5;
    --cn-surface: #FFFFFF;
    --cn-line: #DDE3DC;
    --cn-line-strong: #C5CEC4;
    --cn-ink: #16302B;
    --cn-ink-soft: #4A5F58;
    --cn-ink-mute: #5E716A;
    --cn-spruce: #2E6B4F;
    --cn-spruce-deep: #1F5039;
    --cn-spruce-tint: #E4F0E9;
    --cn-saffron: #E8A13A;
    --cn-saffron-tint: #FBEFD9;
    --cn-danger: #B4463C;
    --cn-danger-tint: #F7E4E1;

    /* macros: functional colour, used only for protein / fat / carb */
    --cn-protein: #4062B3;
    --cn-protein-tint: #E3E9F7;
    --cn-fat: #D9A21B;
    --cn-fat-tint: #FAEFD2;
    --cn-carb: #6E9E3C;
    --cn-carb-tint: #E7F1DB;
    --cn-fibre: #8A7A5E;

    /* meal slots */
    --cn-slot-breakfast: #E8A13A;
    --cn-slot-lunch: #2E6B4F;
    --cn-slot-dinner: #3E4F9C;
    --cn-slot-snack: #8A9A93;

    /* type */
    --cn-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --cn-font-ui: "Manrope", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* shape */
    --cn-radius-card: 20px;
    --cn-radius-control: 10px;
    --cn-radius-pill: 999px;

    /* layout */
    --cn-rail-width: 216px;
    --cn-content-max: 880px;
    --cn-tabbar-height: 64px;

    /* map Bootstrap onto the system so its components stop looking like Bootstrap */
    --bs-body-bg: var(--cn-fog);
    --bs-body-color: var(--cn-ink);
    --bs-body-font-family: var(--cn-font-ui);
    --bs-body-font-size: 0.95rem;
    --bs-body-line-height: 1.5;
    --bs-border-color: var(--cn-line);
    --bs-border-radius: var(--cn-radius-control);
    --bs-border-radius-lg: var(--cn-radius-card);
    --bs-border-radius-sm: 8px;
    --bs-primary: var(--cn-spruce);
    --bs-primary-rgb: 46, 107, 79;
    --bs-link-color: var(--cn-spruce);
    --bs-link-color-rgb: 46, 107, 79;
    --bs-link-hover-color: var(--cn-spruce-deep);
    --bs-link-hover-color-rgb: 31, 80, 57;
    --bs-secondary-color: var(--cn-ink-soft);
    --bs-tertiary-color: var(--cn-ink-mute);
    --bs-heading-color: var(--cn-ink);
    --bs-success: var(--cn-spruce);
    --bs-success-rgb: 46, 107, 79;
    --bs-danger: var(--cn-danger);
    --bs-danger-rgb: 180, 70, 60;
    --bs-warning: var(--cn-saffron);
    --bs-warning-rgb: 232, 161, 58;
    --bs-focus-ring-color: rgba(46, 107, 79, 0.35);
}

html, body {
    font-family: var(--cn-font-ui);
    background: var(--cn-fog);
    color: var(--cn-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---- type scale (Elements of Typographic Style, 1.25 ratio) ---- */
h1, h2, h3, h4, .cn-display {
    font-family: var(--cn-font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--cn-ink);
}

h1, .cn-h1 { font-size: 2rem; line-height: 1.15; font-variation-settings: "opsz" 48; }
h2, .cn-h2 { font-size: 1.5rem; line-height: 1.2; font-variation-settings: "opsz" 32; }
h3, .cn-h3 { font-size: 1.2rem; line-height: 1.3; font-variation-settings: "opsz" 24; }
h4, .cn-h4 { font-size: 1.05rem; line-height: 1.35; font-family: var(--cn-font-ui); font-weight: 700; }

.cn-numeral {
    font-family: var(--cn-font-display);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 96;
}

.cn-tabular {
    font-variant-numeric: tabular-nums;
}

.cn-lede {
    font-size: 1.05rem;
    color: var(--cn-ink-soft);
    max-width: 38rem;
}

.cn-muted { color: var(--cn-ink-mute); }

/* What just happened stays on screen while the person is further down the page. */
.cn-stays-in-view {
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    background: var(--cn-surface);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cn-ink) 15%, transparent);
}
.cn-soft { color: var(--cn-ink-soft); }

h1:focus { outline: none; }

/* ---- surfaces ---- */
.cn-card {
    background: var(--cn-surface);
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius-card);
}

.cn-card-pad { padding: 1.25rem; }

.cn-inset {
    background: var(--cn-fog);
    border-radius: var(--cn-radius-control);
}

.card {
    --bs-card-border-color: var(--cn-line);
    --bs-card-border-radius: var(--cn-radius-card);
    --bs-card-inner-border-radius: calc(var(--cn-radius-card) - 1px);
    --bs-card-bg: var(--cn-surface);
    --bs-card-cap-bg: transparent;
    box-shadow: none;
}

/* ---- pills & chips ---- */
.cn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--cn-radius-pill);
    background: var(--cn-fog);
    color: var(--cn-ink-soft);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.cn-pill-protein { background: var(--cn-protein-tint); color: var(--cn-protein); }
.cn-pill-fat { background: var(--cn-fat-tint); color: #8F6A0B; }
.cn-pill-carb { background: var(--cn-carb-tint); color: #4B7326; }
.cn-pill-spruce { background: var(--cn-spruce-tint); color: var(--cn-spruce-deep); }
.cn-pill-saffron { background: var(--cn-saffron-tint); color: #8F5A0B; }
.cn-pill-danger { background: var(--cn-danger-tint); color: var(--cn-danger); }

.cn-slot-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--cn-slot-snack);
}

.cn-slot-dot.breakfast { background: var(--cn-slot-breakfast); }
.cn-slot-dot.lunch { background: var(--cn-slot-lunch); }
.cn-slot-dot.dinner { background: var(--cn-slot-dinner); }
.cn-slot-dot.snack { background: var(--cn-slot-snack); }

/* ---- buttons ---- */
.btn {
    --bs-btn-border-radius: var(--cn-radius-control);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 0.95rem;
}

.btn-primary {
    --bs-btn-bg: var(--cn-spruce);
    --bs-btn-border-color: var(--cn-spruce);
    --bs-btn-hover-bg: var(--cn-spruce-deep);
    --bs-btn-hover-border-color: var(--cn-spruce-deep);
    --bs-btn-active-bg: var(--cn-spruce-deep);
    --bs-btn-active-border-color: var(--cn-spruce-deep);
    --bs-btn-disabled-bg: var(--cn-spruce);
    --bs-btn-disabled-border-color: var(--cn-spruce);
}

.btn-outline-primary {
    --bs-btn-color: var(--cn-spruce);
    --bs-btn-border-color: var(--cn-line-strong);
    --bs-btn-hover-bg: var(--cn-spruce-tint);
    --bs-btn-hover-color: var(--cn-spruce-deep);
    --bs-btn-hover-border-color: var(--cn-spruce);
    --bs-btn-active-bg: var(--cn-spruce-tint);
    --bs-btn-active-color: var(--cn-spruce-deep);
    --bs-btn-active-border-color: var(--cn-spruce);
}

.btn-outline-secondary {
    --bs-btn-color: var(--cn-ink-soft);
    --bs-btn-border-color: var(--cn-line-strong);
    --bs-btn-hover-bg: var(--cn-fog);
    --bs-btn-hover-color: var(--cn-ink);
    --bs-btn-hover-border-color: var(--cn-line-strong);
    --bs-btn-active-bg: var(--cn-fog-deep);
    --bs-btn-active-color: var(--cn-ink);
    --bs-btn-active-border-color: var(--cn-line-strong);
}

.btn-outline-success {
    --bs-btn-color: var(--cn-spruce);
    --bs-btn-border-color: var(--cn-line-strong);
    --bs-btn-hover-bg: var(--cn-spruce-tint);
    --bs-btn-hover-color: var(--cn-spruce-deep);
    --bs-btn-hover-border-color: var(--cn-spruce);
}

.btn-success {
    --bs-btn-bg: var(--cn-spruce);
    --bs-btn-border-color: var(--cn-spruce);
    --bs-btn-hover-bg: var(--cn-spruce-deep);
    --bs-btn-hover-border-color: var(--cn-spruce-deep);
}

.btn-secondary {
    --bs-btn-bg: var(--cn-ink-soft);
    --bs-btn-border-color: var(--cn-ink-soft);
    --bs-btn-hover-bg: var(--cn-ink);
    --bs-btn-hover-border-color: var(--cn-ink);
}

.btn-link {
    --bs-btn-color: var(--cn-spruce);
    --bs-btn-hover-color: var(--cn-spruce-deep);
    text-decoration: none;
}

/* accent button: the one saffron moment, for "generate" */
.btn-accent {
    --bs-btn-color: var(--cn-ink);
    --bs-btn-bg: var(--cn-saffron);
    --bs-btn-border-color: var(--cn-saffron);
    --bs-btn-hover-color: var(--cn-ink);
    --bs-btn-hover-bg: #DD9327;
    --bs-btn-hover-border-color: #DD9327;
    --bs-btn-active-color: var(--cn-ink);
    --bs-btn-active-bg: #D08A21;
    --bs-btn-active-border-color: #D08A21;
    --bs-btn-disabled-color: var(--cn-ink);
    --bs-btn-disabled-bg: var(--cn-saffron);
    --bs-btn-disabled-border-color: var(--cn-saffron);
}

/* icon button: square, 40px minimum tap target */
.cn-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cn-radius-control);
    font-size: 1rem;
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .cn-focusable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--cn-surface), 0 0 0 4px var(--cn-spruce);
}

/* ---- forms ---- */
.form-control, .form-select {
    border-color: var(--cn-line-strong);
    border-radius: var(--cn-radius-control);
    background-color: var(--cn-surface);
    padding: 0.55rem 0.8rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cn-spruce);
}

.form-label {
    font-weight: 600;
    color: var(--cn-ink-soft);
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.form-text { color: var(--cn-ink-mute); }

.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--cn-spruce); }
.invalid { outline: none; border-color: var(--cn-danger); }
.validation-message { color: var(--cn-danger); font-size: 0.85rem; }

/* ---- alerts ---- */
.alert {
    --bs-alert-border-radius: var(--cn-radius-control);
    border-width: 1px;
}

.alert-success { --bs-alert-bg: var(--cn-spruce-tint); --bs-alert-border-color: #C7DFD0; --bs-alert-color: var(--cn-spruce-deep); }
.alert-warning { --bs-alert-bg: var(--cn-saffron-tint); --bs-alert-border-color: #F0D9A8; --bs-alert-color: #6E4508; }
.alert-danger { --bs-alert-bg: var(--cn-danger-tint); --bs-alert-border-color: #E8C4BF; --bs-alert-color: var(--cn-danger); }
.alert-info { --bs-alert-bg: var(--cn-fog); --bs-alert-border-color: var(--cn-line); --bs-alert-color: var(--cn-ink-soft); }

.badge { font-weight: 600; border-radius: var(--cn-radius-pill); }
.text-bg-success { background-color: var(--cn-spruce) !important; }

/* ---- progress ---- */
.progress {
    --bs-progress-bg: var(--cn-fog-deep);
    --bs-progress-border-radius: var(--cn-radius-pill);
    --bs-progress-bar-bg: var(--cn-spruce);
}

/* ---- tables ---- */
.table { --bs-table-border-color: var(--cn-line); }
.table > :not(caption) > * > * { padding: 0.6rem 0.75rem; }
.table-active { --bs-table-bg-state: var(--cn-spruce-tint); }

/* ---- content width ---- */
.cn-content {
    max-width: var(--cn-content-max);
}

/* ---- page shell ----
   The frame every module page shares: a title with an action group opposite it, a waiting line,
   the calm card a page shows instead of content, and the quiet link row that closes the page.
   These live here rather than in one page's scoped stylesheet so a new page inherits the shape
   instead of copying it. */
.cn-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cn-page-head h1 {
    margin: 0;
}

/* Pushed to the far edge even when the title wraps to its own line. */
.cn-page-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.cn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cn-ink-soft);
    padding: 1rem 0;
}

.cn-state-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin-bottom: 1rem;
}

.cn-state-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.cn-state-card h2 {
    margin-bottom: 0.5rem;
}

.cn-state-card p {
    color: var(--cn-ink-soft);
    max-width: 30rem;
    margin: 0 auto 1.5rem;
}

.cn-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Three quiet links, no heading: where else to go from here. */
.cn-also {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1rem 0.25rem 1.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--cn-line);
    font-size: 0.9rem;
}

.cn-also a {
    color: var(--cn-ink-soft);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cn-also a:hover {
    color: var(--cn-spruce);
}

/* ---- motion: only in answer to an action ---- */
@keyframes cn-row-changed {
    from { background-color: var(--cn-saffron-tint); }
    to { background-color: transparent; }
}

.cn-changed {
    animation: cn-row-changed 900ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .cn-changed { animation: none; }
    * { transition-duration: 0.01ms !important; }
}

/* ---- Blazor plumbing kept from the template ---- */
.blazor-error-boundary {
    background: var(--cn-danger);
    padding: 1rem 1rem 1rem 1.25rem;
    color: white;
    border-radius: var(--cn-radius-control);
}

.blazor-error-boundary::after { content: "Something went wrong on this screen."; }

#blazor-error-ui {
    color-scheme: light only;
    background: var(--cn-ink);
    color: var(--cn-fog);
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui .reload { color: var(--cn-saffron); }

/* Website analytics choice (js/analytics.js in Web.Client). Sits above the phone tab bar. */
.cn-consent {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(var(--cn-tabbar-height) + 0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 1090;
    max-width: 34rem;
    margin: 0 auto;
    padding: 1rem 1.1rem;
    background: var(--cn-surface);
    color: var(--cn-ink);
    border: 1px solid var(--cn-line-strong);
    border-radius: var(--cn-radius-card);
    box-shadow: 0 10px 30px rgb(22 48 43 / 0.18);
    font-family: var(--cn-font-ui);
    font-size: 0.95rem;
}

.cn-consent p { margin: 0 0 0.75rem; }
.cn-consent a { color: var(--cn-spruce); }
.cn-consent .cn-consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }

.cn-consent button {
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    border-radius: var(--cn-radius-pill);
    border: 1px solid var(--cn-spruce);
    background: transparent;
    color: var(--cn-spruce);
    font-weight: 600;
}

.cn-consent button.cn-consent-yes { background: var(--cn-spruce); color: #fff; }

@media (min-width: 900px) {
    .cn-consent { bottom: 1rem; }
}