/* eat: the app's own layer on household.css (loaded first, byte-identical
   across the household apps). Tokens here are eat-only. The old amber accent
   is the signed-in person's pair colour now. */

:root {
    --accent: var(--me);
    --accent-dim: var(--me-dim);
    --shadow: none;
}
html, body { overflow-x: clip; }
.page-title { text-transform: lowercase; }
.pantry-footnote { color: var(--fg-faint); font-size: 12px; margin-top: 16px; }
.log-hint { color: var(--fg-dim); font-size: 13px; margin: 8px 0 16px; }
code {
    background: var(--bg-elev-2);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
}

.app-env { color: var(--fg-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }

/* Smoothie card */
.smoothie-card {
    background: var(--bg-elev);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    margin-bottom: 14px;
}
.sc-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 6px;
}
.sc-label--done { color: var(--ok); }
.sc-name {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: lowercase;
}
.sc-profile { color: var(--fg-dim); font-size: 13px; margin-bottom: 12px; }
.sc-ingredients {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.sc-ingredients li {
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.sc-ingredients li:last-child { border-bottom: none; }
.sc-why {
    background: var(--bg-elev-2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--fg-dim);
    margin: 12px 0;
}
.sc-why-label {
    color: var(--accent);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 6px;
}
.sc-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.sc-actions form { flex: 1 1 auto; }
.sc-actions .btn { width: 100%; }
.sc-actions form:first-child { flex: 2 1 auto; }
.sc-spinner {
    margin-top: 10px;
    font-size: 13px;
    color: var(--fg-faint);
    font-style: italic;
}
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: block; }
.htmx-request.htmx-indicator { display: block; }
.sc-muted { color: var(--fg-dim); font-size: 14px; margin: 8px 0 0; }

/* Today slots */
.today-slot {
    background: var(--bg-elev);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.slot-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-faint);
    font-weight: 700;
    margin-bottom: 4px;
}
.slot-status { font-size: 16px; font-weight: 600; }
.slot-status--done { color: var(--ok); }
.slot-hint { color: var(--fg-dim); font-size: 13px; margin: 6px 0 0; }
.slot-hint a { color: var(--accent); }

/* Pantry */
.pantry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pantry-item {
    background: var(--bg-elev);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.pantry-main { display: flex; flex-direction: column; gap: 2px; }
.pantry-name { font-weight: 600; }
.pantry-qty { color: var(--fg-dim); font-size: 13px; }
.pantry-meta { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.confidence { font-size: 12px; font-weight: 600; }
.confidence--high { color: var(--ok); }
.confidence--med { color: var(--warn); }
.confidence--low { color: var(--bad); }
.pantry-source { font-size: 11px; color: var(--fg-faint); }

/* Receipt uploader */
.receipt-uploader {
    background: var(--bg-elev);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 18px;
    border: 1px dashed var(--border);
}
.ru-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 6px;
}
.ru-hint { color: var(--fg-dim); font-size: 13px; margin: 0 0 12px; }
.ru-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ru-file {
    flex: 1 1 200px;
    background: var(--bg-elev-2);
    color: var(--fg-dim);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
}
.ru-file::file-selector-button {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    margin-right: 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.ru-spinner {
    margin-top: 10px;
    font-size: 13px;
    color: var(--fg-faint);
    font-style: italic;
}
.receipt-result {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-elev-2);
}
.receipt-result.is-ok { border-left: 3px solid var(--ok); }
.receipt-result.is-err { border-left: 3px solid var(--bad); }
.rr-ok { font-size: 14px; color: var(--ok); }
.rr-bad { font-size: 14px; color: var(--bad); }
.rr-detail { display: block; color: var(--fg-faint); font-size: 12px; margin-top: 4px; }
.rr-meta { color: var(--fg-dim); font-size: 12px; margin-top: 4px; }
.rr-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.rr-items li { font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.rr-qty { color: var(--accent); font-weight: 600; min-width: 60px; }
.rr-name { flex: 1 1 auto; }
.rr-cat { color: var(--fg-faint); font-size: 11px; }
.rr-more { color: var(--fg-faint); font-style: italic; }
.rr-link { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 13px; }

.stepper-btn:focus-visible, .btn-remove:focus-visible { outline: var(--stroke) solid var(--me-dim); outline-offset: 2px; }
.log-confirm {
    background: rgba(107, 191, 89, 0.12);
    border: 1px solid rgba(107, 191, 89, 0.3);
    color: var(--ok);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}
.log-confirm-link { color: var(--accent); margin-left: 8px; }

.conn-status { font-size: 12px; font-weight: 600; }
.conn-status--off { color: var(--fg-faint); }

.history-item { background: var(--bg-elev); border-radius: 10px; padding: 12px 14px; }
.history-main { display: flex; align-items: baseline; gap: 8px; }
.history-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    background: var(--bg-elev-2);
    color: var(--fg-dim);
}
.history-type--smoothie { color: var(--accent); }
.history-type--lunch, .history-type--dinner { color: var(--ok); }
.history-name { font-weight: 600; }
.history-ingredients { color: var(--fg-dim); font-size: 13px; margin-top: 4px; }
.history-when { color: var(--fg-faint); font-size: 11px; margin-top: 4px; }

/* Recipe list */
.recipes-search { margin: 0 0 14px; }
.search-input {
    width: 100%;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--fg);
    font: inherit;
    font-size: 15px;
    padding: 11px 14px;
    -webkit-appearance: none;
    appearance: none;
}
.search-input:focus { outline: none; border-color: var(--accent-dim); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Alphabet bar — fixed right edge, vertical column */
.alphabet-bar {
    position: fixed;
    right: 4px;
    top: 72px;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: rgba(22, 22, 22, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 8px 4px;
    width: 22px;
}
.alpha-letter {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    width: 18px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
}
.alpha-letter.is-disabled { color: var(--fg-faint); opacity: 0.4; pointer-events: none; }
.alpha-letter.is-active:active { background: var(--accent); color: var(--bg); }

/* Letter section headings */
.letter-section { margin-top: 14px; scroll-margin-top: 70px; }
.letter-section:first-child { margin-top: 0; }
.letter-heading {
    font-size: 18px;
    color: var(--accent);
    margin: 0 0 6px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.recipe-list { list-style: none; margin: 0 28px 0 0; padding: 0; display: grid; gap: 10px; }
.recipe-card {
    background: var(--bg-elev);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform 0.08s ease, background 0.15s ease;
    border-left: 3px solid transparent;
}
.recipe-card:active { transform: scale(0.98); background: var(--bg-elev-2); }
.recipe-link {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 12px 14px;
    align-items: start;
}
.recipe-emoji {
    font-size: 30px;
    line-height: 1;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-2);
    border-radius: 10px;
    flex-shrink: 0;
}
.recipe-body { min-width: 0; }
.recipe-name { font-weight: 600; font-size: 15px; margin-bottom: 5px; line-height: 1.3; }
.recipe-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.recipe-tag {
    background: var(--bg-elev-2);
    color: var(--fg-dim);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 100px;
    font-weight: 500;
}
.recipe-meta { color: var(--fg-faint); font-size: 11px; }

/* Tint variants — colored left border + subtle emoji tile bg shift */
.recipe-card--tint-amber  { border-left-color: #d4a141; }
.recipe-card--tint-amber  .recipe-emoji { background: rgba(212, 161, 65, 0.15); }
.recipe-card--tint-red    { border-left-color: #c95a4a; }
.recipe-card--tint-red    .recipe-emoji { background: rgba(201, 90, 74, 0.15); }
.recipe-card--tint-pink   { border-left-color: #d97aa0; }
.recipe-card--tint-pink   .recipe-emoji { background: rgba(217, 122, 160, 0.15); }
.recipe-card--tint-green  { border-left-color: #6bbf59; }
.recipe-card--tint-green  .recipe-emoji { background: rgba(107, 191, 89, 0.15); }
.recipe-card--tint-blue   { border-left-color: #5a9cc9; }
.recipe-card--tint-blue   .recipe-emoji { background: rgba(90, 156, 201, 0.15); }
.recipe-card--tint-tan    { border-left-color: #a88b6f; }
.recipe-card--tint-tan    .recipe-emoji { background: rgba(168, 139, 111, 0.15); }
.recipe-card--tint-neutral{ border-left-color: var(--border); }

/* Recipe detail */
.recipe-detail-name { font-size: 26px; line-height: 1.2; margin: 8px 0 12px; font-weight: 700; }
.ingredients h2, .instructions h2 {
    font-size: 13px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 28px 0 12px;
}
.ingredient-list { list-style: none; margin: 0; padding: 0; }
.ingredient-section {
    margin-top: 14px;
    color: var(--fg-dim);
    font-size: 13px;
    font-weight: 600;
}
.ingredient-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.ingredient-item:last-child { border-bottom: none; }
.qty { font-weight: 600; color: var(--accent); min-width: 32px; }
.unit { color: var(--fg-dim); font-size: 14px; min-width: 36px; }
.ing-name { flex: 1 1 auto; }
.ing-notes { flex: 1 1 100%; color: var(--fg-faint); font-size: 13px; font-style: italic; }
.instructions-body {
    background: var(--bg-elev);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.6;
}

/* Staples / reorder + shared suggestion styles */
.page-sub {
    color: var(--fg-dim);
    font-size: 13px;
    margin: -4px 0 18px;
}
.section-label {
    color: var(--fg-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 18px 0 8px;
}
.order-section:first-of-type > .section-label:first-child { margin-top: 4px; }
.section-label--overdue { color: var(--warn); }

.staple-section { margin-bottom: 8px; }
.staple-list, .suggestion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.staple-item, .suggestion-item {
    background: var(--bg-elev);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-left: 3px solid transparent;
}
.staple-item--overdue { border-left-color: var(--warn); }
.staple-item--due_soon { border-left-color: var(--accent-dim); }
.staple-main, .suggestion-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.staple-name, .suggestion-name {
    font-weight: 600; overflow: hidden; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.staple-cadence, .suggestion-conf {
    color: var(--fg-faint);
    font-size: 12px;
}
.staple-added {
    color: var(--ok);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.btn-add-suggestion {
    background: var(--bg-elev-2);
    color: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-add-suggestion:active { background: var(--bg); }
.staple-add-form, .suggestion-add-form { margin: 0; flex-shrink: 0; }
.pickup-suggestions { margin-top: 20px; }

/* Order screen (v2 reorder home) */
.order-section { margin-bottom: 8px; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.order-list > li, .staple-list > li, .suggestion-list > li { min-width: 0; }
.order-item {
    background: var(--bg-elev);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.order-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-name {
    font-weight: 600; overflow: hidden; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.order-reason { font-size: 11px; color: var(--fg-faint); text-transform: lowercase; }
.order-reason--not_bought_recently { color: var(--accent-dim); }
.order-reason--smoothie { color: var(--ok); }
.order-reason--recipe { color: var(--accent-dim); }
.order-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.stepper {
    display: inline-flex; align-items: center;
    background: var(--bg-elev-2); border-radius: 999px; padding: 2px;
}
.stepper-btn {
    width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent;
    color: var(--fg-dim); font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.stepper-btn:active { background: var(--bg); color: var(--fg); }
.stepper-btn:disabled { color: var(--fg-faint); opacity: 0.5; }
.stepper-n { min-width: 22px; text-align: center; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.stepper form { margin: 0; display: contents; }
.btn-remove {
    background: none; border: none; color: var(--fg-faint);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
    width: 40px; height: 40px; margin-right: -8px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.btn-remove:active { color: var(--bad); }
.order-add-section { margin: 14px 0 4px; }
.order-add-form { display: flex; gap: 8px; align-items: center; }
.order-add-input {
    flex: 1; background: var(--bg-elev); color: var(--fg);
    border: 1px solid var(--bg-elev-2); border-radius: 10px;
    padding: 11px 14px; font-size: 16px; /* 16px: below that iOS zooms the page on focus and never zooms back */
}
.order-add-input::placeholder { color: var(--fg-faint); }

/* Order tools: compose, search, send (Phase 2/3) */
.order-tools { margin: 16px 0; display: grid; gap: 10px; }
.order-search-form { margin: 4px 0 4px; }
#order-search-results:not(:empty) { margin: 8px 0 4px; }
.order-due { margin-top: 14px; }
.order-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 4px 0; font-size: 14px; color: var(--fg-dim); }
.order-summary b { color: var(--fg); font-weight: 600; }
.order-send-row { margin-top: 10px; }
.order-search-form { display: flex; gap: 8px; align-items: center; }
.btn-compose { width: 100%; }
.order-send-row { margin-top: 14px; display: grid; gap: 6px; }
.btn-send { width: 100%; text-align: center; text-decoration: none; }
.send-hint { color: var(--fg-faint); font-size: 12px; margin: 0; text-align: center; }
.search-results { margin-top: 4px; }
.search-error { color: var(--fg-dim); font-size: 13px; margin: 8px 0 0; }
/* Searching: a spinner in the button, one line saying what is happening, and
   whatever was on screen before fades instead of vanishing. The spinner keeps
   its space when idle (visibility, not display) so the field never jumps. */
.btn-search { display: inline-flex; align-items: center; gap: 7px; }
.btn-search .search-spin { visibility: hidden; font-size: 14px; }
.order-search-form.htmx-request .search-spin { visibility: visible; }
.btn-add-suggestion:disabled { opacity: 0.6; cursor: default; }
.search-busy { display: none; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 13px; color: var(--fg-dim); }
.search-busy::before { content: ""; width: 13px; height: 13px; border: 2px solid var(--bg-elev-2); border-top-color: var(--me); border-radius: 50%; animation: spin 0.7s linear infinite; }
.order-search-form.htmx-request ~ .search-busy { display: flex; }
.order-search-form.htmx-request ~ #order-search-results { opacity: 0.35; pointer-events: none; }
#order-search-results { transition: opacity 0.12s ease; }

.push-who {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.push-who-opt {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--fg-dim);
    cursor: pointer;
}
.push-who-opt:has(input:checked) {
    border-color: var(--accent-dim);
    color: var(--fg);
}
.push-who-opt input { accent-color: var(--accent); margin: 0; }

/* ----- 2026-09-21: sign-in, settings rows, disclosures, install banner ----- */

.row-list { list-style: none; margin: 0 0 6px; padding: 0; background: var(--bg-elev); border-radius: var(--radius); }
.row-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; min-height: 48px; }
.row-list > li + li { border-top: 1px solid var(--border); }
.row-k { color: var(--fg); font-size: 15px; }
.row-v { color: var(--fg-dim); font-size: 14px; text-align: right; min-width: 0; }
.row-v.is-ok { color: var(--ok); font-weight: 600; }
.row-v.is-mono { font-size: 12px; overflow-wrap: anywhere; }
.row-v.is-dim { color: var(--fg-faint); font-size: 12px; }
.row-list a.row-k { font-weight: 600; }

.push-card { margin: 0; padding: 0; background: transparent; border: none; }
#push-enable.is-on { color: var(--ok); }
.push-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-elev); border-radius: var(--radius); padding: 10px 14px; min-height: 48px; }
.push-row .row-k { font-size: 15px; }
.push-row .btn-small { flex-shrink: 0; }
.push-caption { margin: 6px 2px 0; font-size: 12px; color: var(--fg-faint); }
.disclosure--tight { margin-top: 10px; }
.disclosure--tight > summary { font-size: 14px; padding: 10px 14px; }
.road--done { margin-top: 8px; }

.disclosure-body { background: var(--bg-elev); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); padding: 4px 14px 14px; }
.disclosure-body .settings-form { margin: 0; }
.disclosure-body .row-list { background: var(--bg-elev-2); margin-top: 8px; }
.disclosure-body .row-list > li + li { border-top-color: var(--bg-elev); }
.disclosure-body .field-input { background: var(--bg-elev-2); }

/* ----- product images + detail row (Kroger serves images by UPC, no auth) ----- */
.order-item { padding: 10px 14px 10px 10px; }
.order-thumb {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px;
    background: #fff; padding: 3px; object-fit: contain; display: block;
}
.order-thumb[hidden] { display: none !important; }
.order-hit { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.order-item.is-open { display: block; }
.order-item.is-open .order-hit { align-items: flex-start; }
.order-item.is-open .order-thumb { width: 96px; height: 96px; border-radius: 10px; padding: 6px; }
.order-item.is-open .order-name { -webkit-line-clamp: unset; display: block; }
.order-detail { margin-top: 10px; display: grid; gap: 6px; font-size: 13px; color: var(--fg-dim); }
.order-detail b { color: var(--fg); font-weight: 600; }
.order-detail-row { display: flex; justify-content: space-between; gap: 12px; }
.order-detail-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.staple-item { padding: 10px 14px 10px 10px; }
.staple-hit { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.search-item { display: flex; align-items: center; gap: 10px; }
.search-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; background: #fff; padding: 3px; object-fit: contain; }

/* ----- dev tab: feedback + roadmap ----- */
.fb-form { display: grid; gap: 8px; }
.fb-form .field-input { resize: vertical; min-height: 72px; }
.fb-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fb-pick { display: inline-flex; align-items: center; cursor: pointer; }
.fb-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fb-item { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-elev); border-radius: var(--radius); padding: 10px 12px; }
.fb-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--bg-elev-2); display: block; flex-shrink: 0; }
.fb-main { min-width: 0; }
.fb-text { font-size: 14px; overflow-wrap: anywhere; }
.fb-meta { font-size: 11px; color: var(--fg-faint); margin-top: 2px; }
.road { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.road-item { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.4; padding: 8px 12px; background: var(--bg-elev); border-radius: var(--radius); }
.road-tag { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: var(--bg-elev-2); color: var(--fg-faint); min-width: 44px; text-align: center; }
.road-tag--next { color: var(--accent); }
.road-tag--soon { color: var(--fg-dim); }
.road--done .road-item { background: transparent; padding: 4px 0; color: var(--fg-dim); }
.road-check { color: var(--ok); font-weight: 700; flex-shrink: 0; }