/* Navaříme — the app's own rules on top of the kit (theme.css). The shell,
   the recipe and shopping rules (direction A) and the cooking mode
   (direction B) come from the mock-ups picked on 22. 10. 2026
   (docs/mockups/), so the next rounds build on the same CSS. */

/* brand: the pot mark follows the text colour (no inversion in light mode) */
.brand-icon { height: 26px; width: 26px; display: block; flex: none; }
.brand-name { font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.app-nav .navbar-brand { gap: 0.5rem; }
.app-footer .brand-icon { display: inline-block; height: 1.125rem; width: 1.125rem; opacity: 0.75; vertical-align: -0.25em; }
.login-icon { width: 56px; height: 56px; }

/* the language menu: three forms, each one menu item */
.lang-switch form { display: contents; }

/* bottom tab bar (phone); hidden from lg where the drawer links sit inline */
.app-tabs { position: fixed; inset-inline: 0; bottom: 0; z-index: 1020; display: flex; background: var(--bs-bg-1); border-top: 1px solid var(--bs-border-color); padding-bottom: env(safe-area-inset-bottom); }
.app-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 0.25rem 0.45rem; min-height: 56px; color: var(--bs-fg-2); text-decoration: none; font-size: 0.72rem; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.app-tab i { font-size: 1.15rem; }
.app-tab.active { color: var(--bs-primary-fg); }
.has-tabs main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.has-tabs .app-footer { margin-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (width >= 1024px) { .app-tabs { display: none; } .has-tabs main { padding-bottom: 2rem; } .has-tabs .app-footer { margin-bottom: 0; } }

/* empty states */
.empty-icon { font-size: 2.5rem; color: var(--bs-fg-3, var(--bs-fg-2)); }

/* the household */
.member-row { display: flex; align-items: center; gap: 0.75rem; }
.member-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.member-name { font-weight: 600; }
.member-meta { color: var(--bs-fg-2); font-size: var(--bs-font-size-xs); overflow-wrap: anywhere; }
.avatar-xs { --bs-avatar-size: 2rem; font-size: 0.85rem; font-weight: 700; }
.invite-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.18em; user-select: all; margin: 0 0 1rem; }

/* the recipe photo: a neutral placeholder when there is no image */
.photo { background: linear-gradient(135deg, #6e2a1c 0%, #b94e2b 55%, #e2a04e 100%); border-radius: var(--bs-radius-5); aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 68% 58%, rgba(255, 255, 255, 0.22), transparent 48%); }

/* a duration inside the step text = a tappable timer chip */
.dur { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.6rem; height: 1.7rem; border-radius: var(--bs-radius-pill); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-fg); font-weight: 600; white-space: nowrap; text-decoration: none; vertical-align: -0.35rem; border: 0; font: inherit; }
.dur i { font-size: 0.8em; }
.dur:hover { background: var(--bs-primary-bg-muted, var(--bs-bg-3)); color: var(--bs-primary-fg); }

/* timers */
.t-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.t-bar { display: block; height: 4px; border-radius: 2px; background: var(--bs-bg-3); overflow: hidden; }
.t-fill { display: block; height: 100%; background: var(--bs-primary-bg); }

/* the recipe (direction A): actions row, the ingredients list, numbered steps */
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ing-group { font-size: var(--bs-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-fg-2); background: var(--bs-bg-2); padding-block: 0.4rem; }
.ing-row { display: flex; align-items: center; gap: 0.75rem; }
.ing-row label { flex: 1; margin: 0; cursor: pointer; }
.ing-row .qty { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); white-space: nowrap; }
.qty.tabular { font-variant-numeric: tabular-nums; }
.recipe .card-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-weight: 600; }
.porce { pointer-events: none; white-space: nowrap; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { display: flex; gap: 0.875rem; padding: 0.75rem 0; border-top: 1px solid var(--bs-border-color); align-items: flex-start; }
.steps > li:first-child { border-top: 0; padding-top: 0; }
.steps p { margin: 0; line-height: 1.6; }
.num { flex: 0 0 1.85rem; width: 1.85rem; height: 1.85rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bs-bg-3); font-weight: 700; font-size: var(--bs-font-size-sm); }
.note-card { margin-top: 1.5rem; }
.note-card p { font-style: italic; }

/* the shopping list (direction A): one list, section headers, checked rows sink under „V košíku" */
.shop-section { font-size: var(--bs-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-fg-2); background: var(--bs-bg-2); padding-block: 0.4rem; display: flex; justify-content: space-between; }
.shop-section.cart { margin-top: 0.75rem; border-top: 2px solid var(--bs-border-color); }
.shop-row { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.65rem; }
.shop-row label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin: 0; cursor: pointer; }
.shop-row .name { font-weight: 500; }
.shop-row .origin { color: var(--bs-fg-2); font-size: var(--bs-font-size-xs); }
.shop-row .origin i { font-size: 0.8em; margin-right: 0.15rem; }
.shop-row .qty { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); white-space: nowrap; }
.shop-row.done .name { text-decoration: line-through; color: var(--bs-fg-2); font-weight: 400; }
.shop-row.done .qty, .shop-row.done .origin { opacity: 0.6; }

/* the cooking mode (direction B): the whole viewport is one step */
.cook-body main { display: flex; flex-direction: column; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.cook-screen { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.progress-row { display: flex; flex-direction: column; gap: 0.4rem; }
.seg { display: flex; gap: 3px; }
.seg > span { flex: 1; height: 5px; border-radius: 3px; background: var(--bs-bg-3); }
.seg > span.on { background: var(--bs-primary-bg); }
.seg > span.cur { background: var(--bs-primary-bg); opacity: 0.55; }
.ing-strip { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--bs-gutter-x, 1rem) / 2); padding-inline: calc(var(--bs-gutter-x, 1rem) / 2); }
.ing-strip .chip { flex: 0 0 auto; height: 2rem; }
.step-focus { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; }
.big-num { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--bs-primary-fg); }
.big-text { font-size: 1.55rem; line-height: 1.4; margin: 0; }
.big-text .dur { height: 2.1rem; font-size: 1.1rem; padding-inline: 0.75rem; vertical-align: -0.45rem; }
.t-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.t-tile { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.8rem 0.9rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-5); background: var(--bs-bg-1); }
.t-tile .t-time { font-size: 2rem; line-height: 1.1; }
.t-tile .t-label { font-size: var(--bs-font-size-sm); }
.zones { display: flex; gap: 0.5rem; margin: 0.25rem 0 0; }
.zone { flex: 1 1 0; min-height: 4.25rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-5); background: var(--bs-bg-1); color: var(--bs-fg-body); font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; }
.zone.next { background: var(--bs-primary-bg); border-color: var(--bs-primary-bg); color: var(--bs-primary-contrast); }

/* the library (direction A): search + sort row, tag chips, a row per recipe */
.lib-tools { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.lib-tools .input-group { flex: 1 1 auto; }
.lib-sort { flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-count { opacity: 0.7; font-size: 0.85em; }
.lib-row { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.6rem; }
.lib-thumb { width: 64px; height: 64px; flex: none; border-radius: var(--bs-radius-5); object-fit: cover; background: var(--bs-bg-2); }
.lib-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--bs-fg-2); }
.lib-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.lib-title { font-weight: 600; overflow-wrap: anywhere; }
.lib-meta { color: var(--bs-fg-2); font-size: var(--bs-font-size-sm); }
.lib-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.lib-chev { color: var(--bs-fg-3, var(--bs-fg-2)); flex: none; }

/* the recipe page: the real photo, the tag links, the rating radios */
.photo-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-radius-5); display: block; }
.recipe-tags .badge { text-decoration: none; }
.rating { display: flex; gap: 0.5rem; }
.rating-star { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; cursor: pointer; }

/* the editor: the line textareas keep their lines, the current photo */
.editor-lines { font-family: inherit; line-height: 1.5; white-space: pre-wrap; }
.editor-photo { display: flex; align-items: center; gap: 0.75rem; }
.editor-photo img { border-radius: var(--bs-radius-5); object-fit: cover; }