/* ---------- base layout ---------- */
* {
    font-family: 'Arial';
    color: #e8eefc;
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #0b0f17;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #141c2b;
}

#leftheader {
    display: flex;
    align-items: center;
    gap: 20px;
}

#basediet {
    font-size: 40px;
}

.container {
    width: 60%;
    max-width: 700px;
    margin: 20px auto;
    padding: 16px;
    background-color: #141c2b;
    border-radius: 14px;
}


/* ---------- buttons ---------- */
.actionbtn {
    background-color: #24324d;
    color: #e8eefc;
    font-size: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #3a4d75;
    cursor: pointer;
}
.actionbtn:hover {
    background-color: #33496d;
}
/* e.g. Apply before there's anything to apply, or Save Recipe before you've
   added an ingredient. Plain greyed-out - deliberately NOT `not-allowed`, which
   puts a red no-entry cursor on something that's simply waiting on you. */
.actionbtn:disabled {
    opacity: 0.4;
}
.actionbtn:disabled:hover { background-color: #24324d; }

/* ...and once its condition is met it goes green and pulses, the same cue the
   guided-flow steps use */
.actionbtn.ready {
    border-color: #7fd0a0;
    color: #7fd0a0;
    animation: flow-pulse 1.4s ease-in-out infinite;
}

.linkbtn {
    font-size: 18px;
    cursor: pointer;
    border: none;
    background: none;
    color: #e8eefc;
    text-decoration: underline;
}

.entry {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}
/* primary flow row: Preferences -> Calculate -> + Add Food (a little wizard) */
.flow {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;                    /* connectors sit flush against the buttons */
    border: 1px solid rgba(232, 238, 252, 0.18);
    border-radius: 14px;
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.02);
}
/* a thin line at mid-height joining one step to the next (direction is obvious) */
.flow-connector {
    flex: 0 0 34px;
    height: 2px;
    background-color: rgba(232, 238, 252, 0.35);
    transition: background-color 0.2s ease;
}
.flow .actionbtn {
    flex: 1;                /* stretch to fill the row */
    min-width: 0;           /* ...and let it shrink below its text, so all three
                               stay equal on a narrow screen instead of each
                               sizing to its label (which left Recipes smallest) */
    padding: 12px 8px;      /* a touch taller, still narrow font */
    font-size: 15px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* the current step in the flow: enlarged + a pulsing green "do this next" glow */
.flow-current {
    transform: scale(1.06);
    animation: flow-pulse 1.4s ease-in-out infinite;
}
@keyframes flow-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #7fd0a0, 0 0 8px rgba(127, 208, 160, 0.4); }
    50%      { box-shadow: 0 0 0 2px #7fd0a0, 0 0 18px rgba(127, 208, 160, 0.8); }
}
/* the connector INTO the current step does ONE pulse, then the button lights */
.flow-connector-active {
    background-color: #7fd0a0;
    animation: connector-pulse 0.7s ease-in-out;   /* a single pulse (not infinite) */
}
@keyframes connector-pulse {
    0%, 100% { box-shadow: 0 0 2px rgba(127, 208, 160, 0.4); opacity: 0.7; }
    50%      { box-shadow: 0 0 9px rgba(127, 208, 160, 0.95); opacity: 1; }
}
/* secondary tools: smaller and quieter so the flow stands out */
.entry-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;   /* fill left-to-right like the flow row */
    gap: 8px;
}
.entry-secondary .actionbtn {
    flex: 1;                 /* stretch to fill the row equally */
    font-size: 14px;
    padding: 7px 12px;
    background-color: #171f2e;
    border-color: #2b3a58;
}
.entry-secondary .actionbtn:hover { background-color: #24324d; }


/* icons that fly out of the Calculate button to their day slots on Calculate */
.fly-icon {
    position: fixed;
    z-index: 50;
    font-size: 16px;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.5, 0.05, 0.3, 1);
}
#day-bar.animating .db-badges { visibility: hidden; }

/* ---------- guided tour popover ---------- */
/* One small speech bubble anchored under whichever step is current, walking you
   left -> middle -> right along the top row and then down to the categories.
   z-index sits BELOW .modal-overlay (10) so an open pop-up always covers it. */
#coach {
    position: absolute;
    z-index: 5;
    display: none;
    /* A fixed width keeps the measurement deterministic - shrink-to-fit would
       change with wherever the box currently sits, throwing the arrow off.
       border-box so this is the real outer width the positioning maths uses.
       (Deliberately no vw units here: narrow enough for any phone, and the JS
       clamp handles the edges when the window width is actually readable.) */
    width: 250px;
    box-sizing: border-box;
    padding: 10px 28px 11px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: #e8eefc;
    background-color: #24324d;
    border: 1px solid #7fd0a0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    /* never swallow a click meant for the thing it's pointing at - notably the
       category underneath it on the last step */
    pointer-events: none;
}
#coach.coach-on { display: block; }

/* the little pointer, moved horizontally in JS to sit under its anchor */
#coach-arrow {
    position: absolute;
    top: -6px;
    width: 10px;
    height: 10px;
    background-color: #24324d;
    border-left: 1px solid #7fd0a0;
    border-top: 1px solid #7fd0a0;
    transform: rotate(45deg);
}

#coach-step {
    display: block;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7fd0a0;
    margin-bottom: 3px;
}

#coach-skip {
    position: absolute;
    top: 5px;
    right: 7px;
    background: none;
    border: none;
    color: #e8eefc;
    font-size: 15px;
    line-height: 1;
    opacity: 0.45;
    cursor: pointer;
    pointer-events: auto;     /* the one part of the bubble you CAN click */
}
#coach-skip:hover { opacity: 1; }

/* ---------- Categories header bar: title + filter + clear, all one line ------- */
#cat-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* a hairline separating the bar from the category list it heads - kept
       lighter than .group-head so it doesn't compete with the group titles */
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(232, 238, 252, 0.15);
    margin-bottom: 14px;
}
/* a plain heading now - editing moved to the note button beside it */
#cat-bar-title {
    font-size: 22px;               /* same as .group-head */
    font-weight: bold;
    padding: 6px 4px;
}
/* the heading, then its edit button */
#cat-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* icon-only, so give the glyph a bit more room */
#cat-edit { font-size: 15px; padding: 4px 10px; }
#cat-bar-actions { display: flex; gap: 8px; }

/* compact buttons that sit on the categories bar */
.barbtn {
    background-color: #171f2e;
    color: #e8eefc;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #2b3a58;
    cursor: pointer;
}
.barbtn:hover { background-color: #24324d; }
/* its label changes as you cycle ("All" -> "Incomplete"), so hold a width and
   stop the Clear button shuffling sideways every press */
#cat-filter { min-width: 108px; }
/* When filtering, the button wears the same fill as the rows it's showing, so
   the colour itself tells you which set you're looking at. These two background
   values are exactly .cat-head.active and .cat-head.done below - keep them in
   step if those ever change. */
.barbtn.filter-incomplete {
    color: #e8d9a0;
    border-color: #8a7327;
    background-color: #4d3f14;   /* == .cat-head.active (yellow) */
}
.barbtn.filter-incomplete:hover { background-color: #63511a; }

.barbtn.filter-complete {
    color: #a9e0bd;
    border-color: #2f7d4f;
    background-color: #14532d;   /* == .cat-head.done (green) */
}
.barbtn.filter-complete:hover { background-color: #1a6b3a; }

/* ---------- toast: brief confirmation, bottom center ---------- */
#toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 12px);
    z-index: 100;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    color: #e8eefc;
    background-color: #24324d;
    border: 1px solid #3a4d75;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;            /* never blocks a click underneath */
    transition: opacity 0.18s ease, transform 0.18s ease;
}
#toast.toast-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Add Food: "showing <category> only" notice ---------- */
#addfood-filter {
    margin: 0 0 10px;
    font-size: 14px;
    opacity: 0.85;
}
#addfood-filter .linkbtn { font-size: 14px; margin-left: 6px; }

/* ---------- day selector bar (always visible, above the food groups) ---------- */
#day-bar { display: flex; gap: 6px; margin-bottom: 28px; }
.day-btn {
    flex: 1;
    min-width: 0;
    padding: 8px 2px;
    border-radius: 10px;
    background-color: #1b2536;
    border: 1px solid #24324d;
    color: #e8eefc;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.day-btn:hover { background-color: #24324d; }
.day-btn.selected { border-color: #6f8ec9; background-color: #24324d; }
.day-btn.today .db-num { color: #7fd0a0; }
.db-name { font-size: 12px; opacity: 0.7; }
.db-num { font-size: 18px; font-weight: bold; }
.db-badges { font-size: 13px; line-height: 1.2; min-height: 15px; }
.db-badge { cursor: grab; white-space: nowrap; margin: 0 1px; }
.db-badge:active { cursor: grabbing; }
.badge-x { font-size: 9px; vertical-align: super; opacity: 0.75; }
/* the single-item icon shown as the drag image while moving one off a stack */
.drag-ghost { position: fixed; top: -100px; left: -100px; font-size: 20px; }


/* ---------- groups (visual containers, no goal of their own) ---------- */
/* each food group is a box holding its heading and its categories. Lighter than
   the .category-box border inside it, so the nesting reads outside-in. */
.group {
    margin-bottom: 22px;
    border: 1px solid rgba(232, 238, 252, 0.25);
    border-radius: 14px;
    padding: 8px 12px 4px;
}
.group-head {
    display: flex;
    align-items: center;
    gap: 8px;                 /* arrow then name, like the category rows below */
    font-size: 22px;
    font-weight: bold;
    padding: 6px 4px;
    margin-bottom: 8px;
    border-bottom: 2px solid rgba(232, 238, 252, 0.3);
}

/* the only thing that collapses a group - the name itself is no longer a target */
.group-toggle {
    background: none;
    border: none;
    color: inherit;
    font-size: 15px;
    opacity: 0.7;
    cursor: pointer;
}

/* The two collapse controls - one on a group row, one on a category row - share
   a single hit-area size here so they can never drift apart. Their glyphs keep
   their own font sizes and just centre inside it. */
.group-toggle,
.arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 23px;
    padding: 0;
    line-height: 1;
    border-radius: 4px;
}
.group-toggle:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.12); }

/* small emoji icon next to a subcategory name */
.cat-icon {
    font-size: 16px;
    margin-right: 2px;
}

/* ---------- category boxes (subcategories) ---------- */
.category-box {
    margin-bottom: 10px;
    border: 1px solid rgba(232, 238, 252, 0.5);
    border-radius: 14px;
    overflow: hidden;
}

/* the clickable header row: [ arrow  Name ] ........ [ value  X ] */
/* The extra 9px on the LEFT is the nesting indent - applied here rather than to
   the box, so the category's border (and this row's background) still runs the
   full width, flush with the right edge. */
.cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px 12px 21px;
    font-size: 18px;
    cursor: pointer;              /* click to add food to this category */
    background-color: #1b2536;
}
/* it's clickable, so say so on hover */
.cat-head:hover { background-color: #22304a; }
.cat-head.done:hover   { background-color: #1a6b3a; }
.cat-head.active:hover { background-color: #63511a; }

.cat-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cat-name { font-weight: bold; }
.example { font-size: 13px; font-weight: normal; font-style: italic; opacity: 0.6; }
/* The category's expand/collapse arrow. Its hit area is defined by the shared
   rule below, so it matches the group's toggle exactly. */
.arrow {
    font-size: 14px;
    opacity: 0.8;
}
.arrow:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.12); }

.cat-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cat-value { font-weight: bold; }

/* completion colors (toggled from Settings) */
.cat-head.done   { background-color: #14532d; }   /* green  */
.cat-head.active { background-color: #4d3f14; }   /* yellow */

/* the little list of foods added under a category */
.food-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px 4px 53px;   /* 44 + the 9px nesting indent above */
    font-size: 14px;
    opacity: 0.85;
}
.food-entry input {
    width: 60px;
    padding: 4px;
    font-size: 14px;
    text-align: right;
}
.removebtn {
    background: none;
    border: none;
    color: #ff7b7b;
    cursor: pointer;
    font-size: 16px;
}


/* ---------- pop-up / modal ---------- */
.modal-overlay {
    display: none;                 /* hidden by default */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 40px 10px;
    z-index: 10;
}
.modal-overlay.open { display: flex; }   /* shown when .open is added */

.modal {
    background-color: #141c2b;
    border: 1px solid #3a4d75;
    border-radius: 14px;
    padding: 20px;
    width: 500px;
    max-width: 100%;
}

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

.closebtn {
    background: none;
    border: none;
    color: #e8eefc;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

/* footer with the modal's primary action, aligned bottom-right */
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(232, 238, 252, 0.12);
}

/* protein-shortfall notice under the Calculate summary */
.calc-warn {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #e8d9a0;
    background-color: rgba(180, 140, 40, 0.12);
    border: 1px solid #8a7327;
}
/* Shared "destructive action" look for the two buttons that throw work away:
   Reset Preferences and the Categories bar's Clear. */
#reset-prefs, #cat-clear, #reset-cats, #clear-recipes, #revert-plan {
    background-color: transparent;
    border-color: #6b3a3a;
    color: #ff8a8a;
}
#reset-prefs:hover, #cat-clear:hover, #reset-cats:hover, #clear-recipes:hover, #revert-plan:hover {
    background-color: #3a1f1f;
}
#reset-cats, #clear-recipes, #revert-plan { font-size: 14px; padding: 7px 12px; }

/* a footer button pinned to the LEFT edge, with Done staying on the right:
   Reset Preferences, Reset Categories */
.foot-left { margin-right: auto; }

/* A section heading with its action button on the right of the same line,
   e.g. "Create a recipe" + Save Recipe. */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
/* the heading's own margins would be centred along with its box, dropping the
   text below the button - hoist them onto the row instead */
.section-head { margin: 18px 0 10px; }
.section-head h3 { margin: 0; }
/* a section heading with more than one button, e.g. Discard changes + Save */
.section-actions { display: flex; align-items: center; gap: 8px; }
/* discarding throws work away, so it reads like the other destructive buttons */
#discard-recipe {
    background-color: transparent;
    border-color: #6b3a3a;
    color: #ff8a8a;
    font-size: 14px;
    padding: 7px 12px;
}
#discard-recipe:hover { background-color: #3a1f1f; }

#reset-prefs {
    font-size: 14px;
    padding: 7px 12px;
}


/* ---------- forms ---------- */
input, select {
    background-color: #e8eefc;
    color: #1a1a1a;
    font-size: 16px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #3a4d75;
}
/* range sliders should not get the text-box styling above */
input[type="range"] {
    background: none;
    border: none;
    padding: 0;
    vertical-align: middle;
    width: 140px;             /* fixed so the thumb track can't resize */
}
/* the live value readout - fixed width so the slider never shifts as it changes */
#set-protein-value {
    display: inline-block;
    width: 2.4em;
    text-align: right;
}
/* the dropdown items - force dark text so they're readable on the light list
   (otherwise the global light text color makes them invisible on hover) */
option {
    color: #1a1a1a;
    background-color: #e8eefc;
}
.small-num { width: 60px; }

#food-search { width: 100%; margin-bottom: 10px; }

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}
.form-row label { color: #e8eefc; }

/* the Daily:/Weekly: breakdown lines in the plan summary — wrapped lines hang
   indented so they align under the list rather than back at the margin */
.calc-plan-line {
    opacity: .75;
    padding-left: 1.3em;
    text-indent: -1.3em;
}
.calc-plan-line:first-of-type { margin-top: 0.9em; }
/* blank line between the Daily: and Weekly: breakdown blocks */
.calc-plan-line + .calc-plan-line { margin-top: 0.9em; }

/* the three macro figures as a bullet list under the calorie header */
.calc-macros {
    list-style: disc;
    margin: 6px 0 4px;
    padding-left: 1.4em;
}
.calc-macros li { margin: 2px 0; }

/* the protein slider row needs extra breathing room above and below - the
   thumb sits proud of the row and it's the one interactive control here */
.protein-goal-row { margin: 22px 0; }

/* subtle rule separating the protein slider from the Your Plan section */
.calc-divider {
    border: none;
    border-top: 1px solid rgba(232, 238, 252, 0.15);
    margin: 18px 0;
}

/* protein slider: let it fill the row so it's nice and long, and pin the
   readout to a fixed width (tabular figures) so the thumb never jumps as the
   number's width changes while dragging */
.slider-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    margin-left: 18px;
}
.slider-cell input[type="range"] {
    flex: 1;
    min-width: 0;
}
#calc-protein-value {
    flex: 0 0 auto;
    width: 3.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #e8eefc;
}

.checkrow {
    display: block;
    margin: 12px 0;
    cursor: pointer;
}
.checkrow input { width: auto; margin-right: 8px; }

/* collapsible sections (e.g. Supplements) */
details { margin: 12px 0; }
/* extra separation between the lactose line and the Supplements section below it */
.checkrow + details { margin-top: 26px; }
summary {
    cursor: pointer;
    font-weight: bold;
    font-size: 17px;
    padding: 4px 0;
}

/* search + selected lists inside Add Food */
#search-results, #selected-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
}

/* your matching recipes, above the food results - JS shows these only when
   there's something to put in them */
#recipe-matches-wrap, #foods-heading { display: none; }
#recipe-matches {
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.result-row, .selected-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(232, 238, 252, 0.15);
    font-size: 14px;
}
.result-row { cursor: pointer; }
.result-row:hover { background-color: #24324d; }
.selected-row input { width: 60px; text-align: right; }

/* long food names truncate with "..." instead of shoving the oz box + red x
   off the row (which made the x wrap onto the next line) */
.result-row > span:first-child,
.selected-row > span:first-child,
.food-entry > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}
.result-row > span:last-child,
.selected-row > span:last-child,
.food-entry > span:last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

.bucket-tag {
    font-size: 11px;
    background: #24324d;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
}

#about-text h3 { margin-bottom: 4px; }
#about-text p, #about-text li { line-height: 1.5; opacity: 0.9; }

/* ---------- week view ---------- */
.muted { opacity: 0.55; font-weight: normal; }
.hint { font-size: 13px; opacity: 0.7; margin: 0 0 8px; }

/* the tray of draggable animal-protein chips */
.dist-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dist-chip {
    padding: 6px 10px;
    border-radius: 999px;
    background-color: #24324d;
    border: 1px solid #3a4d75;
    cursor: grab;
    font-size: 14px;
    user-select: none;
}
.dist-chip:active { cursor: grabbing; }

/* the row of seven day tabs */
.day-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.day-tab {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 6px 2px;
    border-radius: 8px;
    background-color: #1b2536;
    border: 1px solid transparent;
    cursor: pointer;
}
.day-tab:hover { background-color: #24324d; }
.day-tab.selected { border-color: #6f8ec9; background-color: #24324d; }
.day-tab.today .dt-num { color: #7fd0a0; }
.dt-name { font-size: 12px; opacity: 0.7; }
.dt-num { font-size: 17px; font-weight: bold; }
.dt-badges { font-size: 12px; min-height: 16px; line-height: 1.2; word-break: break-all; }

/* the selected-day panel */
.day-panel h3 { margin-bottom: 6px; }
.day-plan { margin-bottom: 8px; }
.assigned-badge {
    display: inline-block;
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 999px;
    background-color: #24324d;
    font-size: 13px;
    cursor: pointer;
}
.assigned-badge:hover { background-color: #4d2020; }
.day-panel ul { margin: 0; padding-left: 18px; }
.day-panel li { line-height: 1.5; font-size: 14px; }

/* ---------- recipes ---------- */
/* Fixed so the pop-up never changes size as you save or delete - 5 rows at the
   57px each one takes, then it scrolls. */
#recipe-list {
    height: 285px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.recipe-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid rgba(232, 238, 252, 0.15);
}

/* name on top, item count under it. min-width:0 is what actually lets the name
   truncate - without it the flex item refuses to shrink below its text and
   pushes the buttons (the red x especially) out of the row. */
.recipe-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.recipe-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recipe-info .muted { font-size: 13px; }

/* the buttons hold their size and stay on one line, always */
.recipe-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.recipe-row.editing { background-color: #24324d; border-radius: 8px; }
/* ---------- Categories screen: one editable row per category ---------- */
.catman-note { font-size: 13px; opacity: 0.6; margin: 0 0 10px; }
/* tall enough for ~5 category rows (43px each), then scroll */
#catman-list { max-height: 215px; overflow-y: auto; margin-bottom: 18px; }
.catman-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.catman-row input[type="text"] {
    flex: 2;
    min-width: 0;          /* let it shrink instead of overflowing the row */
}
.catman-row select {
    flex: 1.4;
    min-width: 0;
}
.catman-row .removebtn { flex-shrink: 0; }

.actionbtn.small { font-size: 13px; padding: 5px 9px; }
#recipe-name, #recipe-search { width: 100%; margin-bottom: 8px; }
#recipe-search-results { max-height: 160px; overflow-y: auto; margin-bottom: 8px; }
#recipe-items { margin-bottom: 10px; }


@media (max-width: 700px) {
    .container { width: 100%; }
}

/* Narrow phones: three equal flow buttons + two connectors won't fit the full
   labels at the desktop sizes, so shrink the type, padding and connectors enough
   that the longest label ("Preferences") fits without clipping - keeping the
   buttons equal rather than each sizing to its own text. */
@media (max-width: 480px) {
    .flow-connector { flex-basis: 8px; }
    .flow .actionbtn { font-size: 12px; padding: 11px 3px; }
}

/* ---------- footer: privacy note + site stamp ---------- */
#site-footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(232, 238, 252, 0.12);
    text-align: center;
}
#site-footer p {
    margin: 0;
    font-size: 14px;
    opacity: 0.7;
}
/* the coleballen.com stamp, matching the .small mark on the other site pages */
#site-footer .footer-stamp {
    margin-top: 12px;
    font-size: 0.85rem;
    opacity: 0.5;
}