/* ============================================
   Design Tokens - Soap Maker
   ============================================ */

:root {
    /* WCAG AA Compliant - Olive Green Theme */
    /* Background colours - dark olive green */
    --bg-primary: #1a2420;
    --bg-secondary: #232d28;
    --bg-tertiary: #2d3832;
    --bg-card: #2a3530;
    --bg-input: #1a2420;

    /* Text colours - all meet 4.5:1 contrast */
    --text-primary: #e8e8e0;
    --text-secondary: #b0b8a8;
    --text-muted: #808880;

    /* Accent colours */
    --accent-gold: #e0b050;       /* warm gold for buttons */
    --accent-gold-20: rgba(224, 176, 80, 0.2);
    --accent-gold-10: rgba(224, 176, 80, 0.1);
    --accent-copper: #c89840;     /* darker gold for hover */
    --accent-green: #80c080;      /* soft green for links/highlights */
    --accent-green-20: rgba(128, 192, 128, 0.2);
    --accent-cream: #e8e8e0;

    /* Borders */
    --border: #3a4540;
    --border-30: rgba(58, 69, 64, 0.3);

    /* Semantic colours */
    --success: #60b890;
    --warning: #e0b050;
    --danger: #d07060;

    /* Utilities */
    --shadow-overlay: rgba(0, 0, 0, 0.6);

    /* Standardized border-radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Standardized sizes (WCAG 2.2 touch targets) */
    --size-touch-min: 24px;
    --size-btn-sm: 24px;
    --size-btn-md: 32px;
    --size-btn-lg: 40px;

    /* Focus rings for accessibility */
    --focus-ring: 0 0 0 3px rgba(128, 192, 128, 0.4);
    --focus-ring-button: 0 0 0 3px rgba(224, 176, 80, 0.4);

    /* ============================================
       Typography
       ============================================ */

    /* Font families */
    --font-display: 'Fraunces', serif;
    --font-body: 'Atkinson Hyperlegible', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Typography scale (based on actual codebase usage) */
    --text-2xs: 0.65rem;  /* 10.4px - micro badges */
    --text-xs: 0.7rem;    /* 11.2px - badges, tiny labels */
    --text-sm: 0.75rem;   /* 12px - small labels, captions */
    --text-base: 0.8rem;  /* 12.8px - helper text */
    --text-md: 0.85rem;   /* 13.6px - body text (most common) */
    --text-lg: 0.9rem;    /* 14.4px - emphasized body */
    --text-xl: 0.95rem;   /* 15.2px - large body */
    --text-2xl: 1rem;     /* 16px - standard headings */
    --text-3xl: 1.1rem;   /* 17.6px - section headings */
    --text-4xl: 1.3rem;   /* 20.8px - card titles */
    --text-5xl: 1.6rem;   /* 25.6px - panel titles */
    --text-6xl: 2rem;     /* 32px - page headings mobile */
    --text-7xl: 3rem;     /* 48px - hero headings */

    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.7;

    /* Letter spacing */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.08em;

    /* ============================================
       Spacing
       ============================================ */

    /* Spacing scale (4px base grid) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-14: 3.5rem;   /* 56px */

    /* Composite padding tokens */
    --padding-xs: var(--space-1) var(--space-2);   /* 4px 8px */
    --padding-sm: var(--space-2) var(--space-3);   /* 8px 12px */
    --padding-md: var(--space-2) var(--space-4);   /* 8px 16px */
    --padding-lg: var(--space-3) var(--space-4);   /* 12px 16px */

    /* ============================================
       Component sizing
       ============================================ */

    /* Icon button size (lock, remove) */
    --size-icon-btn: 28px;

    /* Input field width for list items (5 digits + spinner buttons) */
    --width-input-list: 5.5rem;

    /* ============================================
       Effects
       ============================================ */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 4px 20px rgba(0, 0, 0, 0.5);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all var(--transition-base);
}
/* ============================================
   Reset & Base Styles
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}
/* ============================================
   Container Layout
   ============================================ */

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
}

/* Page container - narrow width for content pages */
.page-container {
    max-width: 900px;
}

@media (max-width: 480px) {
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }
}
/* ============================================
   Header Layout
   ============================================ */

header {
    text-align: center;
    margin-bottom: var(--space-12);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
}

h1 {
    font-family: var(--font-display);
    font-size: var(--text-7xl);
    font-weight: 400;
    color: var(--accent-cream);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2);
}

header p {
    color: var(--text-secondary);
    font-size: var(--text-3xl);
}

.header-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.header-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--padding-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition-all);
    -webkit-tap-highlight-color: transparent;
}

.header-link:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.header-link:active {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: transparent;
}

.header-link[aria-current="page"] {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
}

.sub-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.sub-nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    transition: var(--transition-all);
}

.sub-nav-link:hover {
    color: var(--text-secondary);
}

.sub-nav-link[aria-current="page"] {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.kofi-button {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent-gold);
    color: var(--bg-primary);
    text-decoration: none;
    font-size: var(--text-md);
    font-weight: 600;
    padding: var(--padding-md);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
}

.kofi-button:hover {
    background: var(--accent-copper);
}

.kofi-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    max-width: 18px;
    max-height: 18px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .kofi-button {
        font-size: var(--text-sm);
        padding: var(--space-1) var(--space-3);
        top: 0.5rem;
    }

    h1 {
        font-size: var(--text-6xl);
    }

    header p {
        font-size: var(--text-xl);
    }

    header {
        margin-bottom: var(--space-8);
        padding: var(--space-5) 0;
    }
}
/* ============================================
   Main Grid Layout
   ============================================ */

.main-grid {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

.main-grid > * {
    min-width: 0;
}
/* ============================================
   Accessibility Components
   ============================================ */

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-gold);
    color: var(--bg-primary);
    padding: var(--padding-md);
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: top var(--transition-base);
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}

/* Global focus styles for keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-button);
}

.tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* WCAG 2.2 Focus Not Obscured: visual indication of inert content */
[inert] {
    pointer-events: none;
    user-select: none;
}
/* ============================================
   Button Components
   ============================================ */

.btn {
    background: var(--accent-gold);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--padding-md);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-lg);
    cursor: pointer;
    transition: background var(--transition-base), transform 0.1s, box-shadow var(--transition-base);
    min-height: var(--size-btn-md);
}

.btn:hover {
    background: var(--accent-copper);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

.btn-primary:hover {
    background: var(--accent-copper);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--danger);
    color: #1a1714;  /* dark text for 5.5:1 contrast */
    font-weight: 600;
}

.btn-small {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-md);
    min-height: var(--size-btn-sm);
}

.btn-large {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-xl);
    min-height: var(--size-btn-lg);
}

.btn-text {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-base);
    padding: var(--padding-xs);
    cursor: pointer;
}

.btn-text:hover {
    color: var(--accent-green);
}

/* Icon buttons - shared base (lock, remove) */
.icon-btn {
    background: transparent;
    width: var(--size-icon-btn);
    height: var(--size-icon-btn);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    line-height: 1;
    transition: var(--transition-all);
    flex-shrink: 0;
}

/* Lock buttons */
.lock-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.lock-btn:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.lock-btn.locked {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--bg-primary);
}

/* Remove buttons */
.remove-btn {
    justify-self: end;
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.remove-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--bg-primary);
}

/* Exclude buttons */
.exclude-btn {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

.exclude-btn:hover {
    background: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--bg-primary);
}

/* Clickable text elements */
.clickable {
    cursor: pointer;
    transition: color var(--transition-base);
}

.clickable:hover {
    color: var(--accent-green);
}

/* Link base - green underline-on-hover */
.link,
.reference-link,
.learn-more-link,
.equipment-link,
.reference-item a,
.science-citation a {
    color: var(--accent-green);
    text-decoration: none;
}

.link:hover,
.link:focus,
.reference-link:hover,
.learn-more-link:hover,
.equipment-link:hover,
.reference-item a:hover,
.science-citation a:hover {
    text-decoration: underline;
}

/* Item name buttons */
.item-name {
    font-weight: 500;
    color: var(--text-primary);
    /* Button reset for semantic button elements */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: left;
}

@media (max-width: 480px) {
    .icon-btn {
        --size-icon-btn: 24px;
        font-size: var(--text-md);
    }
}
/* ============================================
   Card Components
   ============================================ */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    overflow: hidden;
    max-width: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

/* Display titles (cards and entry pages) */
.card-title,
.entry-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    color: var(--accent-cream);
}

@media (max-width: 480px) {
    .card {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .card-title {
        font-size: var(--text-3xl);
    }
}
/* ============================================
   Empty State Components
   ============================================ */

.empty-state {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-muted);
}

.empty-state p {
    margin-bottom: var(--space-4);
}

.empty-state-small {
    padding: var(--space-3);
    text-align: center;
    color: var(--text-muted);
}

.empty-state-small p {
    margin: 0;
}

/* No results state */
.no-results {
    text-align: center;
    padding: var(--space-6);
    color: var(--text-muted);
}
/* ============================================
   Form Components
   ============================================ */

select, input, button {
    max-width: 100%;
}

.settings-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

label {
    font-size: var(--text-md);
    color: var(--text-secondary);
    font-weight: 500;
}

.field-helper {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: -0.2rem;
}

.label-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.label-row .help-tip {
    font-size: var(--text-base);
}

input, select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--padding-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    width: 100%;
    min-height: var(--size-btn-md);
}

input:focus, select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: var(--focus-ring);
}

@media (max-width: 480px) {
    .settings-row {
        grid-template-columns: 1fr;
    }

    select, input {
        font-size: var(--text-lg);
        padding: var(--space-2) var(--space-2);
    }
}
/* ============================================
   Item Row Components
   ============================================ */

.recipe-fats,
.recipe-additives {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-3);
}

/* Full-width rows in grid containers */
.recipe-fats > .header-row,
.recipe-fats > .totals-row,
.recipe-fats > .empty-state,
.recipe-additives > .header-row,
.recipe-additives > .totals-row,
.recipe-additives > .empty-state {
    grid-column: 1 / -1;
}

/* Item rows - base styles (flexbox keeps items on one line) */
.item-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

/* Name takes remaining space */
.item-row .item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-row.locked {
    border-color: var(--accent-gold);
    background: var(--accent-gold-10);
}

.item-row.header-row {
    background: transparent;
    border: none;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-md);
    color: var(--text-muted);
    font-weight: 500;
}

.item-row.header-row span {
    text-align: center;
}

.item-row.header-row span:first-child {
    text-align: left;
}

/* Weight and percentage cells with inline lock buttons */
.weight-cell,
.percentage-cell {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: var(--space-2);
    white-space: nowrap;
}

.weight-cell input,
.percentage-cell input {
    flex-shrink: 0;
}

.weight-cell .unit-label,
.percentage-cell .unit-label {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Item row inputs and percentages */
.item-row input {
    width: var(--width-input-list);
    height: var(--size-icon-btn);
    min-height: var(--size-icon-btn);
    padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
    font-size: var(--text-lg);
    text-align: right;
}

.item-row input:disabled {
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.item-percentage {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: var(--text-lg);
    text-align: right;
}

/* Totals row */
.totals-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    font-weight: 600;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
}

.totals-row span:nth-child(2),
.totals-row span:nth-child(3) {
    text-align: right;
}

/* Item row warning variants */
.item-row.warning {
    background: var(--accent-gold-10);
    border-color: var(--warning);
}

.item-row.danger {
    background: rgba(217, 123, 108, 0.1);
    border-color: var(--danger);
}

/* Warning text in totals row when percentage doesn't sum to 100% */
.percentage-warning {
    color: var(--warning);
}

/* Mobile responsive item rows */
@media (max-width: 500px) {
    .item-row,
    .totals-row {
        gap: var(--space-1);
        padding: var(--space-2);
    }

    /* Mobile: switch to grid for multiline layout */
    .item-row {
        display: grid;
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto auto;
    }

    /* Name on first row, full width, never truncated */
    .item-row .item-name {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: start;
        flex: unset;
        min-width: unset;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    /* Input cells on second row */
    .item-row .weight-cell {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .item-row .percentage-cell {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    /* Remove button on second row, right side */
    .item-row .remove-btn {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    /* cols-3: remove button in col 2 (col 1 is weight or percentage) */
    .item-row.cols-3 .remove-btn {
        grid-column: 2;
    }

    /* Exclude button placement on mobile (before remove button) */
    .item-row .exclude-btn {
        grid-row: 2;
        justify-self: end;
    }

    /* When no weight cell, shift percentage to first column */
    .item-row:not(:has(.weight-cell)) .percentage-cell {
        grid-column: 1;
    }

    /* cols-4 without weight: percentage (1), exclude (2), remove (3) */
    .item-row.cols-4:not(:has(.weight-cell)) .exclude-btn {
        grid-column: 2;
    }

    .item-row.cols-4:not(:has(.weight-cell)) .remove-btn {
        grid-column: 3;
    }

    /* cols-5: weight, percentage, exclude, remove on second row (4 items) */
    .item-row.cols-5 {
        grid-template-columns: 1fr auto auto auto;
    }

    .item-row.cols-5 .weight-cell {
        grid-column: 1;
    }

    .item-row.cols-5 .percentage-cell {
        grid-column: 2;
    }

    .item-row.cols-5 .exclude-btn {
        grid-column: 3;
    }

    .item-row.cols-5 .remove-btn {
        grid-column: 4;
    }

    .item-row input {
        width: 3.5rem;
    }
}
/* ============================================
   Panel Components
   ============================================ */

/* Info Panel (slide-in side panel) */
.info-panel {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    padding: var(--space-8);
    overflow-y: auto;
    transition: right var(--transition-slow);
    z-index: 1000;
}

.info-panel.open {
    right: 0;
}

.panel-title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    color: var(--accent-cream);
    margin-bottom: var(--space-2);
    padding-right: 3rem;
}

.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--shadow-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-slow);
    z-index: 999;
}

.panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

.close-panel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-4xl);
}

/* Panel tags for related terms */
.panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.panel-tag {
    padding: var(--space-1) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-all);
    /* WCAG 2.2 Target Size: minimum 24x24px */
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    /* Button reset for semantic button elements */
    border: none;
    font-family: inherit;
}

.panel-tag:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
}

/* Panel references */
.panel-references {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.reference-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.reference-item a {
    font-size: var(--text-lg);
}

.reference-section {
    font-size: var(--text-base);
    color: var(--text-muted);
}

/* ============================================
   Unified Panel Components
   ============================================ */

/* Panel type badge (replaces .panel-subtitle for type display) */
.panel-type {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--accent-gold);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-6);
}

/* Panel content section */
.panel-content-section {
    margin-bottom: var(--space-6);
}

.panel-section-title {
    font-size: var(--text-md);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

/* Panel description text */
.panel-description-text {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Details grid - 2-column key-value pairs */
.panel-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.panel-detail-item {
    background: var(--bg-secondary);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.panel-detail-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.panel-detail-value {
    font-family: var(--font-mono);
    color: var(--accent-cream);
    font-size: var(--text-2xl);
}

/* Property grid - compact 2-column layout */
.panel-props-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Panel list - vertical list of items */
.panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Shared panel item styles */
.panel-prop-item,
.panel-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    padding: var(--padding-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.panel-prop-label {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.panel-prop-value {
    font-size: var(--text-md);
    color: var(--accent-cream);
}

.panel-list-item--dashed {
    border: 1px dashed var(--border);
    background: transparent;
}

.panel-list-name {
    color: var(--text-primary);
}

.panel-list-name--link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
    transition: color var(--transition-base);
}

.panel-list-name--link:hover {
    color: var(--accent-green);
}

.panel-list-value {
    font-family: var(--font-mono);
    color: var(--accent-gold);
    font-size: var(--text-lg);
}

/* Extra details - colour swatch, etc. */
.panel-extra-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

.panel-extra-label {
    color: var(--text-muted);
}

.panel-colour-swatch {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* Empty state for lists */
.panel-empty-state {
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--text-lg);
}

/* Responsive: stack grids on mobile */
@media (max-width: 480px) {
    .panel-details-grid,
    .panel-props-grid {
        grid-template-columns: 1fr;
    }
}

/* Usage rate badge */
.usage-rate {
    display: inline-block;
    background: var(--accent-gold);
    color: var(--bg-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: 600;
}

/* Info button for panel links */
.info-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-md);
    margin-left: var(--space-2);
    transition: var(--transition-all);
}

/* Responsive panel sizing */
@media (max-width: 768px) {
    .info-panel {
        width: 85%;
        max-width: 360px;
        right: -100%;
        padding: var(--space-5);
    }

    .property-header {
        flex-wrap: wrap;
    }

    .property-options {
        order: 1;
        width: 100%;
    }
}
/* ============================================
   Property Display Components
   ============================================ */

/* Properties Grid */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.property-item {
    background: var(--bg-secondary);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.property-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.property-name {
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.property-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-cream);
}

.property-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.property-fill {
    height: 100%;
    background: var(--accent-gold);
    border-radius: var(--radius-sm);
    transition: width var(--transition-slow);
}

.property-fill.low {
    background: repeating-linear-gradient(
        -45deg,
        var(--danger),
        var(--danger) 3px,
        transparent 3px,
        transparent 6px
    ),
    var(--danger);
}
.property-fill.mid { background: var(--accent-gold); }
.property-fill.high { background: var(--success); }

@media (max-width: 480px) {
    .properties-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================
   Table Components
   ============================================ */

/* Analysis Subcontainers */
.analysis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.analysis-subcontainer {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border);
}

.subcontainer-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    font-weight: 400;
}

/* Analysis table */
.analysis-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-lg);
    table-layout: fixed;
}

.analysis-table th {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--border);
}

.analysis-table td {
    padding: var(--space-2) var(--space-2);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-30);
    text-align: left;
}

.analysis-table td .info-link {
    text-align: left;
    justify-content: flex-start;
}

.analysis-table tr:last-child td {
    border-bottom: none;
}

.analysis-table .range-col {
    text-align: center;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-base);
}

.analysis-table th.value-col {
    text-align: right;
}

.analysis-table .value-col {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-cream);
}

.analysis-table .value-col.in-range {
    color: var(--success);
}

.analysis-table .value-col.in-range::before {
    content: "✓ ";
    font-size: 0.75em;
}

.analysis-table .value-col.out-range {
    color: var(--warning);
}

.range-tip {
    margin-left: var(--space-1);
    color: var(--warning);
}

/* Fatty acid table */
.fa-table td:first-child {
    width: 70%;
}

.fa-table .fa-value {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--accent-cream);
}

.sat-unsat-ratio {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-lg);
}

.sat-unsat-ratio span:first-child {
    color: var(--text-secondary);
}

.sat-unsat-ratio span:last-child {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-gold);
}

@media (max-width: 768px) {
    .analysis-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .analysis-table th,
    .analysis-table td {
        padding: var(--space-1) var(--space-1);
    }
}
/* ============================================
   Tab Components
   ============================================ */

.tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.tab {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--padding-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    transition: var(--transition-all);
    min-height: var(--size-btn-md);
}

.tab:hover {
    border-color: var(--accent-gold);
    color: var(--text-primary);
}

.tab.active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--bg-primary);
}
/* ============================================
   Tag and Badge Components
   ============================================ */

/* Data links (info-link: panels, fa-link: fatty acid panels) */
.info-link,
.fa-link {
    cursor: pointer;
    transition: color var(--transition-base);
    /* WCAG 2.2 Target Size: ensure adequate touch target */
    display: inline-flex;
    align-items: center;
    min-height: var(--size-touch-min);
    /* Button reset for semantic button elements */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

.info-link:hover,
.fa-link:hover {
    color: var(--accent-green);
}

/* Property options - compact select */
.property-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.property-options select {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-md);
}

.property-options input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-gold);
    cursor: pointer;
}

.property-options label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-md);
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 375px) {
    .property-options label {
        white-space: normal;
    }
}
/* ============================================
   Toast Notification Components
   ============================================ */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 400px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--padding-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: auto;
}

.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast-hiding {
    opacity: 0;
    transform: translateX(100%);
}

.toast-icon {
    flex-shrink: 0;
    font-size: var(--text-3xl);
    line-height: 1.4;
}

.toast-message {
    flex: 1;
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--text-primary);
}

.toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-4xl);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color var(--transition-base);
}

.toast-close:hover {
    color: var(--text-primary);
}

/* Toast type variants */
.toast-info {
    border-left: 3px solid var(--accent-green);
}

.toast-success {
    border-left: 3px solid var(--success);
}

.toast-success .toast-icon {
    color: var(--success);
}

.toast-warning {
    border-left: 3px solid var(--warning);
}

.toast-error {
    border-left: 3px solid var(--danger);
}

.toast-error .toast-icon {
    color: var(--danger);
}

@media (max-width: 480px) {
    .toast-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .toast {
        transform: translateY(-100%);
    }

    .toast-visible {
        transform: translateY(0);
    }

    .toast-hiding {
        transform: translateY(-100%);
    }
}
/* ============================================
   Tooltip Components
   ============================================ */

/* Tip icons (help-tip: data tooltips, ui-tip: UI help) */
.help-tip,
.ui-tip {
    cursor: help;
    color: var(--text-muted);
    font-size: 0.85em;
    transition: color var(--transition-base);
    /* WCAG 2.2 Target Size: minimum 24x24px touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-touch-min);
    min-height: var(--size-touch-min);
}

.help-tip:hover,
.ui-tip:hover {
    color: var(--accent-green);
}

/* Glossary tooltip */
.glossary-tooltip {
    position: absolute;
    max-width: 320px;
    background: var(--bg-primary);
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    display: none;
    font-size: var(--text-lg);
}

.glossary-tooltip.visible {
    display: block;
}

.tooltip-header {
    font-weight: 600;
    color: var(--accent-green);
    margin-bottom: var(--space-2);
    font-size: var(--text-xl);
}

.tooltip-category {
    display: inline-block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bg-primary);
    background: var(--text-secondary);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    vertical-align: middle;
}

.tooltip-body {
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: var(--space-2);
}

.tooltip-details {
    margin-bottom: var(--space-2);
}

.tooltip-details summary::-webkit-details-marker,
.entry-details summary::-webkit-details-marker {
    display: none;
}

.details-toggle,
.details-hide {
    font-size: var(--text-base);
    color: var(--accent-gold);
}

.details-toggle::before,
.details-hide::before {
    content: '▶';
    display: inline-block;
    margin-right: var(--space-1);
    font-size: 0.6em;
    transition: transform var(--transition-base);
}

details[open] .details-toggle::before,
.details-hide::before {
    transform: rotate(90deg);
}

.details-toggle:hover,
.details-hide:hover {
    text-decoration: underline;
}

.details-toggle {
    display: inline;
}

.details-hide {
    display: none;
}

details[open] .details-toggle {
    display: none;
}

details[open] .details-hide {
    display: inline;
}

.tooltip-details-content {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.tooltip-details-content strong {
    color: var(--accent-cream);
}

.tooltip-related {
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    font-size: var(--text-base);
}

.tooltip-related-label {
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.related-term {
    display: inline-flex;
    align-items: center;
    color: var(--accent-cream);
    background: var(--bg-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    margin: var(--space-1) var(--space-1) var(--space-1) 0;
    cursor: pointer;
    transition: background var(--transition-base);
    border: 1px solid var(--border);
    /* WCAG 2.2 Target Size: minimum 24x24px */
    min-height: 24px;
}

.related-term:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
    border-color: var(--accent-green);
    font-weight: 500;
}

/* Help Popup (shared by glossary and tooltips) */
.help-popup {
    position: absolute;
    max-width: 280px;
    background: var(--bg-primary);
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
    font-size: var(--text-md);
}

.help-popup.visible {
    display: block;
}

.help-popup-title {
    font-weight: 600;
    color: var(--accent-green);
    margin-bottom: var(--space-1);
    font-size: var(--text-lg);
}

.help-popup-body {
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: var(--space-2);
}

.help-popup-link {
    display: none;
    font-size: var(--text-base);
    color: var(--accent-gold);
    text-decoration: none;
    cursor: pointer;
}

.help-popup-link:hover {
    text-decoration: underline;
}
/* ============================================
   Shared Entry Card Styles
   ============================================ */

/* Page container - narrow width for content pages */
.page-container {
    max-width: 900px;
}

/* Page header - centred with consistent spacing */
.page-header {
    text-align: center;
}

.page-header h1 {
    margin-bottom: var(--space-2);
}

/* Page intro text */
.page-intro {
    color: var(--text-secondary);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-6);
}

/* Page summary (counts/stats below header) */
.page-summary {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

/* Filter navigation */
.page-nav {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    justify-content: center;
}

/* Filter buttons */
.page-filter {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--padding-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    transition: var(--transition-all);
}

.page-filter:hover {
    border-color: var(--accent-gold);
    color: var(--text-primary);
}

.page-filter.active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--bg-primary);
}

/* Entry list container */
.page-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Entry card base */
.entry-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--padding-md);
    transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
}

.entry-card > *:last-child {
    margin-bottom: 0;
}

.entry-card.highlight {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px var(--accent-gold-20);
}

/* Entry header */
.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    padding: 0 0 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

/* Entry title - margin reset */
.entry-title {
    margin: 0;
}

/* Entry category badge */
.entry-category {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bg-primary);
    background: var(--text-secondary);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}

/* Entry description */
.entry-desc {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

/* Entry expandable details */
.entry-details {
    margin-bottom: var(--space-2);
}

.entry-details summary {
    cursor: pointer;
    color: var(--accent-green);
    font-size: var(--text-lg);
    font-weight: 500;
    padding: var(--space-1) 0;
    transition: color var(--transition-base);
    list-style: none;
}

.entry-details summary:hover {
    color: var(--accent-cream);
}

.entry-details-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--padding-lg);
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: 1.7;
}

.entry-details-content p {
    margin: 0 0 var(--space-3) 0;
}

.entry-details-content p:last-child {
    margin-bottom: 0;
}

.entry-details-content ul {
    margin: 0 0 var(--space-3) 0;
    padding-left: 0;
    list-style-position: inside;
}

.entry-details-content ul:last-child {
    margin-bottom: 0;
}

.entry-details-content li {
    margin-bottom: var(--space-2);
}

.entry-details-content li:last-child {
    margin-bottom: 0;
}

/* Related terms/links */
.entry-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    margin-bottom: var(--space-3);
}

.entry-related-label {
    color: var(--text-muted);
}

.entry-related-link {
    color: var(--accent-cream);
    background: var(--bg-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid var(--border);
    transition: var(--transition-all);
}

.entry-related-link:hover {
    background: var(--accent-green);
    color: var(--bg-primary);
    border-color: var(--accent-green);
}

/* Entry title as link */
a.entry-title,
.entry-title-link {
    color: var(--accent-green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

a.entry-title:hover,
.entry-title-link:hover {
    text-decoration: underline;
}

.entry-title .external-icon,
.entry-title-link .external-icon {
    font-size: var(--text-base);
}

/* Entry metadata */
.entry-meta {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.entry-meta-label {
    color: var(--text-muted);
    font-weight: 500;
}

/* Unified reference styling for all entry types */
.entry-references {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-30);
    font-size: var(--text-md);
}

.references-label {
    color: var(--text-muted);
}

/* Learn more link */
.entry-learn-more {
    margin-top: var(--space-2);
}

.learn-more-link {
    font-size: var(--text-md);
}

.no-results {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-12);
    font-style: italic;
}

/* Section navigation cards (landing pages) */
.section-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.section-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.section-card:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.section-card:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

.section-card-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.section-card-desc {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* Process page styles */
.process-description {
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

.process-description p {
    margin-bottom: var(--space-3);
}

.process-timing {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.timing-item {
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.timing-item strong {
    color: var(--text-primary);
}

.process-steps {
    list-style: none;
    padding: 0;
    counter-reset: step-counter;
}

.process-step {
    position: relative;
    padding-left: var(--space-8);
    margin-bottom: var(--space-4);
    counter-increment: step-counter;
}

.process-step::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--accent-gold);
    color: var(--bg-primary);
    border-radius: 50%;
    font-size: var(--text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.step-description {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-2);
}

.step-tips {
    list-style: disc;
    padding-left: var(--space-4);
    margin: var(--space-2) 0;
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.step-tips li {
    margin-bottom: var(--space-1);
}

.step-warnings {
    list-style: none;
    padding: var(--padding-sm);
    margin: var(--space-2) 0;
    background: rgba(208, 112, 96, 0.1);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
}

.step-warnings li {
    color: var(--danger);
    margin-bottom: var(--space-1);
}

.step-warnings li:last-child {
    margin-bottom: 0;
}

.process-equipment {
    margin-bottom: var(--space-4);
}

.equipment-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0 0;
}

.equipment-list li {
    background: var(--bg-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
}

.process-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 600px) {
    .process-pros-cons {
        grid-template-columns: 1fr;
    }
}

/* Entry bullet lists with semantic colours */
.entry-bullet-list {
    list-style: disc;
    padding-left: var(--space-4);
    margin: var(--space-2) 0;
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.entry-bullet-list li {
    margin-bottom: var(--space-1);
}

.entry-bullet-list--positive li::marker {
    color: var(--success);
}

.entry-bullet-list--negative li::marker {
    color: var(--danger);
}

.entry-bullet-list--warning {
    background: rgba(224, 176, 80, 0.1);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--warning);
}

/* Entry subheadings */
.entry-subheading {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--space-3) 0 var(--space-2) 0;
}

/* Entry list (inline items) */
.entry-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-md);
}

.entry-list-label {
    color: var(--text-muted);
}

.entry-list-items {
    color: var(--text-secondary);
}

/* Fat/ingredient specific styles */
.fat-properties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--padding-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.property-item {
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.property-item strong {
    color: var(--text-primary);
}

.fat-usage,
.additive-usage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-md);
}

.usage-label,
.timing-label {
    color: var(--text-muted);
}

.usage-range,
.timing-value {
    color: var(--accent-gold);
    font-weight: 500;
}

.usage-note {
    color: var(--text-secondary);
    font-style: italic;
}

.fatty-acid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2);
}

.fatty-acid-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) var(--space-2);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.fatty-acid-item dt {
    color: var(--text-secondary);
    font-size: var(--text-md);
}

.fatty-acid-item dd {
    color: var(--text-primary);
    font-weight: 500;
    margin: 0;
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.entry-tag {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-2);
    background: var(--accent-gold-10);
    color: var(--accent-gold);
    border-radius: var(--radius-sm);
}

/* Property page styles */
.property-details {
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

.property-details p {
    margin: 0 0 var(--space-3) 0;
}

.property-details p:last-child {
    margin-bottom: 0;
}

.property-details ul {
    margin: 0 0 var(--space-3) 0;
    padding-left: 0;
    list-style-position: inside;
}

.property-details ul:last-child {
    margin-bottom: 0;
}

.property-details li {
    margin-bottom: var(--space-2);
}

.property-details li:last-child {
    margin-bottom: 0;
}

.property-formula {
    background: var(--bg-secondary);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.formula-explanation {
    color: var(--text-secondary);
    margin: var(--space-2) 0;
}

.formula-link {
    color: var(--accent-green);
    font-size: var(--text-md);
    text-decoration: none;
}

.formula-link:hover {
    text-decoration: underline;
}

/* ============================================
   Recipe Builder Page Styles
   ============================================ */

/* Build subcontainer - main section containers */
.build-subcontainer {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.build-subcontainer .collapsible-content > :last-child {
    margin-bottom: 0;
}

.build-subcontainer .subcontainer-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.subcontainer-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    font-weight: 400;
}

.mode-subcontainer-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Collapsible sections - native <details>/<summary> */
details.build-subcontainer > summary,
details.mode-subcontainer > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    list-style: none;
}

details.build-subcontainer > summary::-webkit-details-marker,
details.mode-subcontainer > summary::-webkit-details-marker {
    display: none;
}

details.build-subcontainer > summary .subcontainer-title,
details.mode-subcontainer > summary .mode-subcontainer-title {
    flex-grow: 1;
    margin-bottom: 0;
}

details.build-subcontainer > summary .reset-btn,
details.mode-subcontainer > summary .reset-btn {
    flex-shrink: 0;
}

details.build-subcontainer > summary .collapse-icon,
details.mode-subcontainer > summary .collapse-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: transform var(--transition-base);
}

details.build-subcontainer > summary .collapse-icon::before,
details.mode-subcontainer > summary .collapse-icon::before {
    content: '▶';
    font-size: var(--text-2xs);
}

details.build-subcontainer[open] > summary .collapse-icon,
details.mode-subcontainer[open] > summary .collapse-icon {
    transform: rotate(90deg);
}

details.build-subcontainer > .collapsible-content,
details.mode-subcontainer > .collapsible-content {
    margin-top: var(--space-3);
}

/* Optional label for subcontainer titles */
.optional-label {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-weight: 400;
    font-family: var(--font-body);
}

/* Collapsible sections */
.mode-subcontainer {
    margin-bottom: var(--space-4);
}

.collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.build-mode-tabs {
    margin-bottom: var(--space-4);
    gap: var(--space-2);
}

/* Build mode & additive tabs share green active styling */
.build-mode-tab.active,
.additive-tab.active {
    background: var(--accent-green-20);
    border-color: var(--accent-green);
    color: var(--text-primary);
}

.build-mode-helper {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.build-mode-helper.hidden {
    display: none;
}

.build-mode-content {
    /* No background/border - inherits from .mode-area */
}

.build-mode-content.hidden {
    display: none;
}

.build-mode-content .empty-state {
    padding: var(--space-4);
}

.build-mode-content .empty-state p {
    margin-bottom: 0;
}

/* Additive tabs */
.additive-tabs {
    margin-bottom: var(--space-4);
    gap: var(--space-2);
}


#additivesContent .mode-area .empty-state,
#additivesContent .mode-area .empty-state-small {
    padding: var(--space-4);
}

#additivesContent .mode-area .empty-state p,
#additivesContent .mode-area .empty-state-small p {
    margin-bottom: 0;
}

/* Create Recipe Section */
.create-recipe-section {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
    text-align: center;
}

/* Recipe actions */
.recipe-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Profile Targets */
.profile-targets {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.profile-target {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.profile-target-name {
    font-size: var(--text-lg);
}

.profile-target input {
    width: 80px;
    text-align: center;
    font-size: var(--text-2xl);
}

/* Profile Results */
.profile-results {
    margin-top: var(--space-5);
}

.achieved-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.achieved-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    border-left: 3px solid var(--border);
}

.achieved-item.in-range {
    border-left-color: var(--success);
}

.achieved-item.out-range {
    border-left-color: var(--warning);
}

.achieved-name {
    color: var(--text-secondary);
}

.achieved-value {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

/* Use recipe action */
.use-recipe-action,
.generate-action {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.use-recipe-action .btn,
.generate-action .btn {
    width: 100%;
}

#generateRecipeBtn,
#yoloBtn,
#cupboardCleanerBtn {
    width: 100%;
    padding: var(--space-3);
    font-size: var(--text-2xl);
}

/* Remove top border when generate-action is first child (YOLO/Cupboard modes) */
#yoloMode > .generate-action:first-child,
#cupboardCleanerMode > .generate-action {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* Add spacing between YOLO button and recipe list */
#yoloMode > .recipe-fats {
    margin-top: var(--space-4);
}

/* Instructions list */
ol.instructions {
    color: var(--text-secondary);
    padding-left: var(--space-5);
    margin: 0 0 1rem 0;
}

ol.instructions li {
    margin-bottom: var(--space-1);
}

ol.instructions li:last-child {
    margin-bottom: 0;
}

/* Subcontainer header */
.subcontainer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

/* Analysis helper text */
.analysis-helper-text {
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

/* Selector row pattern (fat selector, additive selector) */
.fat-selector,
.additive-selector {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.fat-selector select,
.additive-selector select {
    flex: 1;
}

/* Property list and rows */
.property-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.property-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.property-row .info-link {
    font-size: var(--text-lg);
}

.property-row input {
    width: 80px;
    height: var(--size-icon-btn);
    min-height: var(--size-icon-btn);
    padding: var(--space-1) var(--space-2);
    text-align: center;
    font-size: var(--text-lg);
}

.property-row input::placeholder {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.property-row.property-action {
    justify-content: flex-end;
    margin-top: var(--space-1);
}

/* Dietary filters */
.dietary-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-4);
}

.dietary-filters .filter-label {
    font-size: var(--text-md);
    color: var(--text-muted);
}

.dietary-filter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.dietary-filter:hover {
    color: var(--text-primary);
}

.dietary-filter input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-gold);
    cursor: pointer;
}

.dietary-filter input[type="checkbox"]:checked + span {
    color: var(--text-primary);
}

.dietary-filter .help-tip {
    font-size: var(--text-base);
}

/* Fat Exclusions */
.build-exclusions {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.exclusion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.exclusion-header > label {
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.excluded-ingredients-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    min-height: 1.5rem;
}

.excluded-fat-tag {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

.excluded-fat-tag:hover {
    color: var(--text-primary);
}

.excluded-fat-tag .remove-exclusion {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: var(--text-2xl);
    line-height: 1;
    display: flex;
    align-items: center;
}

.excluded-fat-tag .remove-exclusion:hover {
    color: var(--danger);
}

/* Property comparison (Cupboard Cleaner mode) */
.property-comparison-header {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
}

.property-comparison-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-1) 0;
    font-size: var(--text-lg);
}

.prop-name {
    color: var(--text-primary);
}

.prop-current,
.prop-improved {
    font-weight: 600;
    min-width: 2rem;
    text-align: right;
}

.prop-current.in-range,
.prop-improved.in-range {
    color: var(--success);
}

.prop-current.out-range,
.prop-improved.out-range {
    color: var(--danger);
}

.prop-arrow {
    color: var(--text-muted);
    font-size: var(--text-base);
}

.prop-diff {
    font-size: var(--text-base);
    min-width: 3rem;
}

.prop-range {
    color: var(--text-muted);
    font-size: var(--text-base);
}

/* Suggested recipe (Cupboard Cleaner mode) */
.suggested-recipe {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.suggested-fat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
}

.suggested-fat-name {
    color: var(--text-primary);
}

.suggested-fat-name.clickable {
    cursor: pointer;
    transition: color var(--transition-base);
}

.suggested-fat-name.clickable:hover {
    color: var(--accent-green);
}

.suggested-fat-percent {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-gold);
}

/* Match quality bar */
.match-quality {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.match-label {
    font-size: var(--text-md);
    color: var(--text-secondary);
    white-space: nowrap;
}

.match-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.match-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--danger), var(--warning), var(--success));
    border-radius: var(--radius-sm);
    transition: width var(--transition-slow);
}

.match-percent {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--accent-cream);
    min-width: 40px;
    text-align: right;
}

/* Achieved profile (Cupboard Cleaner mode) */
.achieved-profile {
    margin-bottom: var(--space-4);
}

.achieved-profile h4 {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.achieved-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.achieved-item.good {
    border-left-color: var(--success);
}

.achieved-acid {
    color: var(--text-secondary);
}

.achieved-values {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.achieved-values .target {
    color: var(--text-muted);
}

.achieved-values .arrow {
    color: var(--text-muted);
    margin: 0 0.25rem;
}

.achieved-values .achieved {
    color: var(--accent-cream);
}

.achieved-values .diff {
    font-size: var(--text-sm);
    margin-left: var(--space-1);
}

.achieved-values .diff.positive {
    color: var(--warning);
}

.achieved-values .diff.negative {
    color: var(--success);
}

#useRecipeBtn {
    width: 100%;
}

/* Responsive adjustments for build mode */
@media (max-width: 768px) {
    .mode-area {
        padding: var(--space-3);
    }

    .build-mode-tabs,
    .additive-tabs {
        flex-wrap: wrap;
        gap: var(--space-1);
    }

    .build-mode-tab,
    .additive-tab {
        padding: var(--padding-sm);
        font-size: var(--text-md);
        flex: 1 1 45%;
    }

    .exclusion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .achieved-comparison {
        grid-template-columns: 1fr;
    }
}

/* Selector rows wrap only at very narrow widths */
@media (max-width: 400px) {
    .fat-selector,
    .additive-selector {
        flex-wrap: wrap;
    }

    .fat-selector select,
    .additive-selector select {
        width: 100%;
        flex: none;
    }
}
/* ============================================
   Final Recipe Display Styles
   ============================================ */

#finalRecipeCard {
    background: var(--bg-card);
    border: 2px solid var(--accent-gold);
}

.final-recipe-content {
    padding: var(--space-2) 0;
}

.recipe-prose {
    line-height: 1.7;
}

/* Qualitative Summary */
.qualitative-summary {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.qualitative-warnings {
    list-style: disc;
    padding-left: var(--space-5);
    margin: var(--space-3) 0 var(--space-6) 0;
}

.qualitative-warnings li {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    line-height: 1.5;
}

.qualitative-warnings li:last-child {
    margin-bottom: 0;
}

.recipe-section {
    margin-bottom: var(--space-6);
}

.recipe-section h4 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--accent-cream);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}

/* Ingredients List */
.ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredients-list li {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-30);
}

.ingredients-list li:last-child {
    border-bottom: none;
}

.ingredient-amount {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    color: var(--accent-gold);
    min-width: 80px;
}

.ingredient-name {
    color: var(--text-primary);
}

/* Procedure List */
.procedure-list {
    padding-left: var(--space-5);
    margin: 0;
}

.procedure-list li {
    margin-bottom: var(--space-4);
    padding-left: var(--space-2);
    color: var(--text-secondary);
    line-height: 1.6;
}

.procedure-list li:last-child {
    margin-bottom: 0;
}

.procedure-list li strong {
    color: var(--accent-cream);
    font-weight: 600;
}

.recipe-summary {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.recipe-summary h4 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--accent-cream);
    margin-bottom: var(--space-4);
}

.recipe-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recipe-summary li {
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-30);
    font-size: var(--text-xl);
    color: var(--text-secondary);
}

.recipe-summary li:last-child {
    border-bottom: none;
}

/* Fatty acid profile table within recipe-summary */
.fa-profile-table {
    width: 100%;
    border-collapse: collapse;
}

.fa-profile-table td {
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--border-30);
    font-size: var(--text-xl);
    color: var(--text-secondary);
}

.fa-profile-table tr:last-child td {
    border-bottom: none;
}

.fa-profile-table .fa-value {
    text-align: right;
    width: 50px;
}

.sat-unsat-summary {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-30);
    font-size: var(--text-xl);
    color: var(--text-secondary);
}

/* Side-by-side layout for recipe summary and fatty acid profile */
.recipe-details-row {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.recipe-details-row .recipe-summary {
    flex: 1;
    margin-top: 0;
}

/* Science Section (Expandable) */
.science-section {
    margin-top: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.science-section summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4) var(--space-5);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.science-section summary::-webkit-details-marker {
    display: none;
}

.science-section .details-toggle,
.science-section .details-hide {
    font-size: var(--text-2xl);
    color: var(--accent-gold);
}

.science-section .details-toggle::before {
    content: '▶';
    display: inline-block;
    margin-right: var(--space-2);
    transition: transform var(--transition-base);
    font-size: 0.6em;
}

.science-section[open] .details-toggle::before {
    transform: rotate(90deg);
}

.science-section .details-toggle:hover,
.science-section .details-hide:hover {
    text-decoration: underline;
}

.science-section .details-toggle { display: inline; }
.science-section .details-hide { display: none; }
.science-section[open] .details-toggle { display: none; }
.science-section[open] .details-hide { display: inline; }

.science-content {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}

.science-content h4 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: var(--text-3xl);
}

.science-content .recipe-details-row {
    margin-top: 0;
    margin-bottom: var(--space-6);
}

.science-explanations {
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}

.science-explanation {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-30);
}

.science-explanation:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.science-explanation h5 {
    margin: 0 0 0.5rem 0;
    color: var(--accent-gold);
    font-size: var(--text-2xl);
}

.science-explanation p {
    margin: 0 0 0.5rem 0;
    line-height: 1.6;
}

.science-explanation p:last-child {
    margin-bottom: 0;
}

.science-value-context {
    color: var(--text-secondary);
    font-size: var(--text-xl);
}

.science-citation {
    font-size: var(--text-md);
    color: var(--text-muted);
    margin-top: var(--space-3);
}

.science-learn-more {
    font-size: var(--text-md);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.science-learn-more a {
    color: var(--accent-cream);
    text-decoration: none;
}

.science-learn-more a:hover {
    text-decoration: underline;
}

/* Cupboard Cleaner Mode */
.ratio-mode-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-lg);
    cursor: pointer;
}

.ratio-mode-toggle input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.cupboard-actions {
    display: flex;
    gap: var(--space-2);
}

.cupboard-actions .btn {
    flex: 1;
}

/* Property comparison preview */
.cupboard-property-preview {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    background: var(--bg-input);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-30);
}

.property-preview-title {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin-bottom: var(--space-3);
}

.property-preview-item {
    padding: var(--space-1) 0;
    color: var(--text-muted);
    font-size: var(--text-base);
}

/* Responsive styles */
@media (max-width: 768px) {
    .recipe-details-row {
        flex-direction: column;
    }

    .recipe-section h4 {
        font-size: var(--text-2xl);
    }

    .ingredient-amount {
        min-width: 70px;
        font-size: var(--text-md);
    }

    .procedure-list li {
        font-size: var(--text-lg);
    }

    .recipe-summary {
        padding: var(--space-4);
    }

    .recipe-summary h4 {
        font-size: var(--text-2xl);
    }

    .science-section summary {
        padding: var(--padding-lg);
    }

    .science-content {
        padding: var(--padding-lg);
    }

    .science-explanation h5 {
        font-size: var(--text-xl);
    }
}
/* ============================================
   Fats Page - Entry Styles
   ============================================ */

/* Fat-specific: header override for flex-start alignment */
.fat-entry-header { align-items: flex-start; gap: var(--space-3); }

/* Fat-specific: badge container and variants */
.fat-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; flex-shrink: 0; }
.fat-category { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); }
.fat-category-plant { color: var(--bg-primary); background: var(--accent-green); }
.fat-category-animal { color: var(--bg-primary); background: var(--accent-gold); }
.fat-badge { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); }
.fat-badge-allergen { color: var(--bg-primary); background: var(--danger); }
.fat-badge-sourcing { color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border); }

/* Fat-specific: stats grid */
.fat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--space-2); padding: var(--padding-lg); background: var(--bg-secondary); border-radius: var(--radius-md); }
.fat-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fat-stat-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--space-1); }
a.fat-stat-label { text-decoration: none; border-bottom: 1px dotted var(--text-muted); transition: color var(--transition-fast), border-color var(--transition-fast); }
a.fat-stat-label:hover { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.fat-stat-value { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--text-primary); }

/* Fat-specific: fatty acid display */
.fatty-acid-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.fatty-acid-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
}

.fatty-acid-name {
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.fatty-acid-value {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    color: var(--text-primary);
    text-align: right;
}

.fatty-acid-bar {
    grid-column: 1 / -1;
    height: 4px;
    background: var(--accent-green);
    border-radius: var(--radius-sm);
    opacity: 0.6;
}

.fat-no-data {
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

/* ============================================
   Formulas Page - Entry Styles
   ============================================ */

/* Formula-specific: equation display */
.formula-equation { background: var(--bg-secondary); border-radius: var(--radius-md); padding: var(--padding-lg); margin-bottom: var(--space-3); text-align: center; }
.formula-equation code { font-family: var(--font-mono); font-size: var(--text-3xl); color: var(--accent-gold); }
.formula-user-friendly { color: var(--text-secondary); margin-bottom: var(--space-3); }

/* Formula-specific: section boxes with tab-style headings */
.formula-variables,
.formula-example { margin-bottom: var(--space-3); }
.formula-section-heading { font-size: var(--text-xs); color: var(--text-muted); margin: 0; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-secondary); display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.formula-section-box { background: var(--bg-secondary); border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); padding: var(--padding-lg); font-size: var(--text-md); color: var(--text-secondary); }
.formula-section-box:last-child { margin-bottom: 0; }
.formula-variables dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
.formula-variables dt { font-family: var(--font-mono); color: var(--accent-cream); }
.formula-variables dd { margin: 0; }
.example-scenario { font-weight: 500; color: var(--accent-cream); margin-bottom: var(--space-2); }
.example-steps { font-family: var(--font-mono); display: flex; flex-direction: column; gap: var(--space-1); }
.example-step { color: var(--text-primary); }

/* Formula-specific: range and technical */
.formula-range { display: inline-flex; gap: var(--space-2); background: var(--bg-secondary); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-md); margin-bottom: var(--space-3); }
.formula-range .range-values { font-family: var(--font-mono); color: var(--accent-green); }
.formula-technical { margin: var(--space-3) 0; }
.formula-technical-content { margin-top: var(--space-2); line-height: 1.7; }
/* ============================================
   References Page - Citation Styles
   ============================================ */

/* Citations details styling (uses .entry-details as base) */
.citations-details .entry-details-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Citation items */
.citation-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--padding-lg);
}

.citation-title {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

a.citation-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--accent-green);
    text-decoration: none;
}

a.citation-title:hover {
    text-decoration: underline;
}

a.citation-title .external-icon {
    font-size: var(--text-sm);
}

.citation-note {
    font-size: var(--text-md);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.cited-by {
    font-size: var(--text-md);
    color: var(--text-secondary);
}

.cited-by-label {
    color: var(--text-muted);
    margin-right: var(--space-1);
}

.cited-by-link {
    color: var(--accent-gold);
    text-decoration: none;
}

.cited-by-link:hover {
    text-decoration: underline;
}
/* ============================================
   Utility Classes
   ============================================ */

/* Visibility */
.hidden {
    display: none !important;
}

.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Button reset - use for semantic buttons with custom styling */
.btn-reset {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}

/* Text utilities */
.u-text-muted {
    color: var(--text-muted);
}

.u-text-mono {
    font-family: var(--font-mono);
}

.u-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* Layout utilities */
.u-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Gap utilities */
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }

/* Flex direction */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-justify-end { justify-content: flex-end; }

/* Grid */
.u-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }

/* Border */
.u-border { border: 1px solid var(--border); }

/* ============================================
   Touch Targets (WCAG 2.2)
   ============================================ */

.touch-target {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-touch-min);
}

.touch-target-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-touch-min);
    min-height: var(--size-touch-min);
}

/* ============================================
   Component Patterns
   ============================================ */

/* Container base - secondary background with border */
.container-base {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* Container card - larger radius with padding */
.container-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

/* Mode area container */
.mode-area {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.mode-area-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ============================================
   Reduced Motion
   ============================================ */

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