/* ==========================================================================
   Domolytics — shared layout (Layout 6: dark icon rail · Slate & Amber).
   Framework-free CSS. Logical properties (inline-start/end, margin-inline …)
   make the whole layout mirror automatically for RTL — no [dir=rtl] overrides.
   Fonts are self-hosted (see fonts.css).
   ========================================================================== */

:root {
    /* Slate & Amber palette (see specs/1-general/03-ui.md → Visual design) */
    --color-bg:              #f6f7f9;
    --color-surface:         #ffffff;
    --color-surface-2:       #eef1f4;
    --color-text:            #1c2430;
    --color-muted:           #5f6772;
    --color-border:          #e2e5ea;
    /* Amber darkened to meet WCAG AA (4.5:1) as text and for white-on-amber
       buttons/skip-link; used for interactive elements + links (task 0026). */
    --color-primary:         #a8530a;
    --color-primary-hover:   #8a4708;
    --color-primary-contrast:#ffffff;
    --color-accent:          #fdefda;
    /* Danger/error red — form errors, destructive buttons, required-field mark (task 0100). */
    --color-danger:          #c0392b;

    /* Dark rail */
    --rail-bg:          #1f2733;
    --rail-text:        #9aa6b4;
    --rail-active-bg:   #2b3644;
    --rail-active-text: #f6b256;
    --rail-brand:       #ffffff;

    --radius:      12px;
    --radius-sm:   8px;
    --space:       16px;
    --header-h:    60px;
    --rail-w:      232px;
    --max-w:       1120px;

    --shadow:     0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-pop: 0 8px 24px rgba(16, 24, 40, .14);

    --font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", "Arial Hebrew", sans-serif;
    --font-display: "Manrope", var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, .brand, .secondary-menu__title, .page-title {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}

a { color: inherit; text-decoration: none; }

/* Full-width content column (change request 01): no wide unused side margins. */
.container { width: 100%; margin-inline: auto; padding-inline: var(--space); }
/* Opt-in centered, comfortable-width column (e.g. the career dashboard). */
.centered { max-width: var(--max-w); margin-inline: auto; }
.spacer { flex: 1; }

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

/* Accessibility (task 0024): skip link + visible focus (IS 5568 / WCAG 2.1 AA) */
.skip-link {
    position: absolute; inset-inline-start: 8px; top: -48px; z-index: 200;
    padding: 10px 16px; border-radius: var(--radius-sm);
    background: var(--color-primary); color: var(--color-primary-contrast);
    font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
#main-content:focus { outline: none; }

.prose { max-width: 720px; margin-inline: auto; padding-block: 24px; }
.prose h1 { margin: 0 0 12px; }
.prose h2 { margin: 24px 0 6px; font-size: 1.15rem; }
.prose p { margin: 8px 0; line-height: 1.6; }
.prose a { color: var(--color-primary); font-weight: 600; }

/* --- App shell: dark rail + content column ----------------------------- */
.layout { flex: 1; display: flex; align-items: stretch; min-height: 100vh; }

.sidebar {
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    background: var(--rail-bg);
    color: var(--rail-text);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.sidebar .brand { color: var(--rail-brand); padding-inline: 8px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__link {
    display: flex; align-items: center; gap: .7em;
    padding: 10px 12px; border-radius: var(--radius-sm);
    color: var(--rail-text); font-weight: 500;
}
.sidebar__link:hover { background: var(--rail-active-bg); color: #fff; }
.sidebar__link.is-active { background: var(--rail-active-bg); color: var(--rail-active-text); }
.sidebar__icon { font-size: 1.15em; inline-size: 1.4em; text-align: center; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar-overlay { display: none; }

/* --- Header (top bar of the content column) ---------------------------- */
.site-header {
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    position: sticky; inset-block-start: 0; z-index: 50;
}
.site-header__inner { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); padding-inline: var(--space); }

.brand { font-weight: 800; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.brand__mark { color: var(--color-primary); }

.sidebar-toggle {
    display: none; align-items: center; justify-content: center;
    font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
    padding: 6px 10px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
}

.header-tools { display: flex; align-items: center; gap: 8px; }

/* Dropdowns (language / user) */
.dropdown-wrap { position: relative; }
.btn-tool {
    font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .4em;
    padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text);
}
.btn-tool:hover { background: var(--color-surface-2); }
.dropdown {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px);
    min-width: 160px; margin: 0; padding: 6px; list-style: none;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-pop); display: none; z-index: 80;
}
.dropdown.open { display: block; }
.dropdown a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); }
.dropdown a:hover { background: var(--color-surface-2); }
.dropdown a[aria-current="true"] { color: var(--color-primary); font-weight: 600; }

/* --- Secondary (in-section) sub-navigation ----------------------------- */
.secondary-menu { background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
.secondary-menu__inner { display: flex; align-items: center; gap: var(--space); min-height: 52px; padding-inline: var(--space); }
.secondary-menu__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.secondary-menu__toggle { display: none; }
.secondary-nav { display: flex; gap: 4px; margin-inline-start: auto; }
.secondary-nav a { padding: 6px 12px; border-radius: 999px; color: var(--color-muted); font-weight: 500; }
.secondary-nav a:hover { background: var(--color-surface-2); color: var(--color-text); }
.secondary-nav a.is-active { background: var(--color-accent); color: var(--color-primary); }
.secondary-menu__title a { color: inherit; text-decoration: none; }
.secondary-menu__title a:hover { color: var(--color-primary); }

/* --- Content / footer -------------------------------------------------- */
.content { flex: 1; padding-block: 24px; }
.site-footer { color: var(--color-muted); border-block-start: 1px solid var(--color-border); padding-block: 16px; font-size: .9rem; }
.site-footer__sep { margin-inline: 6px; }

/* --- Generic components ------------------------------------------------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }

.page-head { margin-block-end: 20px; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
.page-head__sub { margin: 4px 0 0; color: var(--color-muted); }

/* Home landing (task-0009) */
.home-hero { padding: 56px 0 32px; text-align: center; }
.home-hero__brand { margin: 0 0 12px; font-weight: 700; color: var(--color-muted); }
.home-hero__title { margin: 0 auto 12px; font-size: 2.25rem; line-height: 1.15; max-width: 16ch; }
.home-hero__lead { margin: 0 auto; max-width: 52ch; color: var(--color-muted); font-size: 1.05rem; }
.home-hero__cta { margin-block-start: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.home-features { padding: 24px 0 56px; }
.home-features__title { margin: 0 0 20px; text-align: center; font-size: 1.25rem; }

/* Shared card grid for home features + dashboard section tiles */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.feature-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.feature-card__icon { font-size: 1.75rem; }
.feature-card__name { margin: 10px 0 6px; font-size: 1.05rem; }
.feature-card__desc { margin: 0; color: var(--color-muted); font-size: .95rem; }
.feature-card--link { display: block; color: inherit; transition: border-color .15s, transform .15s; }
.feature-card--link:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.feature-card__open { display: inline-block; margin-block-start: 10px; color: var(--color-primary); font-weight: 600; }
@media (max-width: 720px) {
    .home-hero { padding-block-start: 36px; }
    .home-hero__title { font-size: 1.8rem; }
}

/* ---- Shopping section (tasks 0012 / 0013) ---- */
.btn--sm { padding: 5px 10px; font-size: .85rem; }
.btn--xs { padding: 3px 8px; font-size: .78rem; }
.btn--danger { background: #c0392b; color: #fff; border-color: transparent; }
.btn--danger:hover { background: #a5321f; }

.page-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.back-link { display: inline-block; margin-block-end: 6px; color: var(--color-muted); font-size: .9rem; }
.back-link:hover { color: var(--color-primary); }

/* Lists collection */
.list-collection { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.list-item__name { font-weight: 600; font-size: 1.05rem; color: var(--color-text); }
.list-item__name:hover { color: var(--color-primary); }
.list-item__date { margin-inline-start: auto; color: var(--color-muted); font-size: .85rem; }
.list-item__actions { display: flex; gap: 6px; }

/* Items table */
.items-table td { vertical-align: top; }
.items-table__actions-col { width: 1%; white-space: nowrap; }
.item-cell { display: flex; align-items: flex-start; gap: 10px; }
.item-name { font-weight: 600; }
.item-notes { color: var(--color-muted); font-size: .85rem; margin-block-start: 2px; }
.item-qty { white-space: nowrap; }
.item-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.item-status-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-block-start: 5px; background: var(--color-border); }

/* Status-distinct rows */
.item-row--new .item-status-dot { background: var(--color-primary); }
.item-row--taken { background: #f3f8f4; }
.item-row--taken .item-status-dot { background: #3a9d5d; }
.item-row--taken .item-name { text-decoration: line-through; color: var(--color-muted); }
.item-row--not-found { background: #fdf3f2; }
.item-row--not-found .item-status-dot { background: #c0392b; }
.item-row--not-found .item-name { color: #b23327; }

.items-empty { margin-block-start: 12px; color: var(--color-muted); }

/* Modals / popups */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15, 20, 25, .45); }
.modal__dialog {
    position: relative; width: 100%; max-width: 440px;
    max-height: calc(100vh - 48px); overflow-y: auto;
    background: var(--color-surface); border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25); padding: 22px;
}
.modal__title { margin: 0 0 16px; font-size: 1.2rem; }
.modal__message { margin: 0 0 18px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 8px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
textarea.input { resize: vertical; font: inherit; }
.form-error { margin: 0 0 10px; color: var(--color-danger); font-size: .9rem; }
/* Required-field asterisk (task 0100 / UI amendments v1 §1). */
.req { color: var(--color-danger); margin-inline-start: 2px; font-weight: 700; }

/* ---- Career section (tasks 0016+) ---- */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.list-item__meta { color: var(--color-muted); font-size: .9rem; }
.list-item .inline { display: inline; margin: 0; }
.subhead { margin: 28px 0 12px; font-size: 1.05rem; }

.stars { letter-spacing: 1px; white-space: nowrap; }
.stars .star { color: var(--color-border); }
/* Rating stars kept a brighter gold; they are supplementary to the text label,
   so 3:1 (UI) applies — #d97706 on white = 3.19:1 (task 0026). */
.stars .star--on { color: #d97706; }

.notice {
    margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-sm);
    background: var(--color-surface-2); color: var(--color-muted);
    border: 1px solid var(--color-border);
}

.detail-card { max-width: 640px; }
.detail-list { margin: 0; display: grid; gap: 2px; }
.detail-row {
    display: grid; grid-template-columns: 180px 1fr; gap: 12px;
    padding: 12px 0; border-block-end: 1px solid var(--color-border);
}
.detail-row:last-child { border-block-end: 0; }
.detail-row dt { margin: 0; color: var(--color-muted); }
.detail-row dd { margin: 0; }
.detail-notes { white-space: pre-line; }

.form-card { max-width: 560px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 8px; }
@media (max-width: 560px) {
    .detail-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Contacts (task 0017) */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px; font-size: .85rem;
    background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border);
}
.badge--self { background: #d1f5ea; color: #0f766e; border-color: #a7e8d6; }
.list-item__spacer { flex: 1; }
.hint { margin: 0 0 14px; color: var(--color-muted); font-size: .85rem; }
.readonly-value { padding: 6px 0; }

/* Listings & interactions (task 0018) */
.muted { color: var(--color-muted); }
.small { font-size: .82rem; }
.head-sub { margin-block-start: 8px; }

.status-badge {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px; font-size: .82rem;
    background: var(--badge); color: #fff;
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 18px; }
.chip {
    display: inline-flex; gap: 4px; padding: 5px 12px; border-radius: 999px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    color: var(--color-text); font-size: .85rem;
}
.chip:hover { border-color: var(--color-primary); }
.chip--on { background: var(--color-accent); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

.career-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .career-cols { grid-template-columns: 1fr; } }
.interaction-form { margin-block-end: 16px; padding-block-end: 16px; border-block-end: 1px solid var(--color-border); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-block-end: 1px solid var(--color-border); }
.timeline__item:last-child { border-block-end: 0; }
.timeline__icon { flex: 0 0 auto; font-size: 1.1rem; }
.timeline__body { flex: 1; min-width: 0; }
.timeline__head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.timeline__desc { margin-block-start: 2px; word-break: break-word; }

/* Career dashboard (task 0019) */
.funnel { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-block-end: 24px; }
.funnel__stage {
    display: flex; flex-direction: column; gap: 4px; padding: 12px;
    border-radius: var(--radius-sm); background: var(--color-surface);
    border: 1px solid var(--color-border); border-top: 3px solid var(--badge); color: var(--color-text);
}
.funnel__stage:hover { border-color: var(--color-primary); }
.funnel__count { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.funnel__label { font-size: .8rem; color: var(--color-muted); }
.action-group { margin: 14px 0 6px; font-size: .9rem; color: var(--color-muted); }
.action-group--overdue { color: #c0392b; }
.action-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-block-end: 1px solid var(--color-border); }
.action-item:last-child { border-block-end: 0; }
.action-item__date { color: var(--color-muted); font-size: .85rem; white-space: nowrap; }
.action-item__date.overdue { color: #c0392b; font-weight: 600; }

.subhead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.subhead-row .subhead { margin: 0; }

.profile-card { max-width: 560px; }
.profile-list { margin: 0; display: grid; gap: 2px; }
.profile-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-block-end: 1px solid var(--color-border);
}
.profile-row:last-child { border-block-end: 0; }
.profile-row dt { margin: 0; color: var(--color-muted); }
.profile-row dd { margin: 0; font-weight: 600; word-break: break-word; }
@media (max-width: 560px) {
    .profile-row { grid-template-columns: 1fr; gap: 2px; }
}

.btn {
    font: inherit; font-weight: 600; cursor: pointer; padding: 9px 16px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: var(--color-primary); color: var(--color-primary-contrast);
}
.btn:hover { background: var(--color-primary-hover); }
.btn--ghost { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn--block { width: 100%; }

.input {
    font: inherit; padding: 9px 12px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
}
.input:focus { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-primary); }

.toolbar { display: flex; gap: 8px; margin-block-end: 16px; }
.toolbar .input { flex: 1; }

.table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 12px 14px; text-align: start; border-block-end: 1px solid var(--color-border); }
.table th { background: var(--color-surface-2); color: var(--color-muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.table tr:last-child td { border-block-end: none; }

/* --- Auth / error pages ------------------------------------------------ */
.auth-wrap { display: grid; place-items: center; padding: 24px; min-height: calc(100vh - var(--header-h) - 60px); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card--center { text-align: center; }
.auth-card h1 { margin: 0 0 4px; font-size: 1.5rem; }
.auth-card .sub { margin: 0 0 20px; color: var(--color-muted); }
.auth-error {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #8a1c13;
    font-size: .9rem;
}
.error-code { font-size: 3rem; line-height: 1; }

.field { display: grid; gap: 6px; margin-block-end: 14px; }
.field label { font-size: .9rem; color: var(--color-muted); }
.field .input { width: 100%; }
/* Truncate a long selected value with an ellipsis, keeping the box width fixed
   (origin-country dropdown matches the base-currency width, request 0111). */
.input--truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.auth-alt { margin-block-start: 16px; text-align: center; font-size: .9rem; }
.auth-alt a { color: var(--color-primary); font-weight: 600; }

/* --- Mobile: rail collapses to an off-canvas drawer -------------------- */
@media (max-width: 768px) {
    .sidebar-toggle { display: inline-flex; }
    .btn-tool__label { display: none; }

    .sidebar {
        position: fixed;
        inset-block: 0 0;
        inset-inline-start: calc(-1 * var(--rail-w));
        z-index: 70;
        overflow-y: auto;
        transition: inset-inline-start .2s ease;
    }
    body.sidebar-open .sidebar { inset-inline-start: 0; }

    .sidebar-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(16, 24, 40, .5);
        opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 65;
    }
    body.sidebar-open .sidebar-overlay { opacity: 1; visibility: visible; }

    .secondary-menu__inner { position: relative; }
    .secondary-menu__toggle {
        display: inline-flex; align-items: center; margin-inline-start: auto;
        font: inherit; font-size: 1.1rem; cursor: pointer;
        padding: 6px 12px; border: 1px solid var(--color-border);
        border-radius: var(--radius-sm); background: var(--color-surface);
    }
    .secondary-nav {
        display: none; position: absolute; inset-inline: 0; inset-block-start: 100%;
        flex-direction: column; gap: 2px; margin: 0; padding: 8px;
        background: var(--color-surface); border-block-end: 1px solid var(--color-border);
        box-shadow: var(--shadow-pop); z-index: 40;
    }
    .secondary-nav.open { display: flex; }
}

/* Travel — onboarding & misc fixes (bug 0002 / task 0037) */
.no-spin { appearance: textfield; -moz-appearance: textfield; }
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.feature-grid--center { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); }

/* Travel section (task 0028) */
.badge--on { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.trip-switch { display: inline-flex; align-items: center; gap: 8px; }
.feature-card--soon { opacity: .65; }
.feature-card--soon .feature-card__name { color: var(--color-muted); }

/* Travel — flights (task 0030) */
.modal__dialog--wide { max-width: 640px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row .input { flex: 1; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.check-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
/* Scrollable country checkbox grid on the trip form (bug 0004 #3). */
.country-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px; margin-block-start: 6px; }
/* Trip country picker: keep the popup height constant no matter how many
   countries are selected (label) or visible after filtering (list) — reserve a
   fixed height for each and scroll internally (request 0107). */
[data-country-picker] .country-check-list { height: 146px; }        /* ~5 rows (request 0109) */
[data-country-picker] [data-country-selected] { display: block; height: 70px; line-height: 1.4; overflow-y: auto; padding: 5px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }  /* ~3 lines (request 0109) */
/* Faint placeholder shown while no country is selected (request 0108). */
[data-country-picker] [data-country-selected]:empty::before { content: attr(data-placeholder); font-style: italic; }
.check { display: inline-flex; align-items: center; gap: 6px; }
/* .check sets display, which would override the [hidden] attribute; make hidden
   win so the country filter can hide options (bug 0016). */
.check[hidden] { display: none; }
.hint--warn { color: #92400e; }
.badge--warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.list-item--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.flight-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flight-row__num { font-weight: 700; }
.flight-row__route { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Travel — hotels (task 0031) */
.hotel-card { margin-block-end: 16px; }
.hotel-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.hotel-card__name { margin: 0 0 4px; font-size: 1.1rem; }
/* Rooms block sits in a shaded panel to set it apart from the hotel details (bug 0003 §3). */
.hotel-card__rooms { margin-block-start: 14px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; }
.hotel-card__rooms-head { display: flex; justify-content: space-between; align-items: center; }
.room-list__item { padding: 6px 8px; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); }
.subhead--sm { font-size: .95rem; margin: 0; }
.room-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.room-list__item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Transparent on desktop; a compact inline action group on mobile (bug 0010 §2). */
.room-list__actions { display: contents; }

/* Travel — rental cars (spec rental_cars.md): key/value detail grid + add-line form. */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 20px; margin-top: 8px; }
.kv { display: flex; flex-direction: column; gap: 2px; }
.kv__k { font-size: .78rem; color: var(--color-muted); }
.kv__v { font-size: .95rem; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.inline-form .input { width: auto; flex: 1 1 160px; }
/* Required field in an inline-form: keep the asterisk tight to the input (task 0100). */
.inline-form .req-field { display: flex; align-items: center; gap: 2px; flex: 1 1 160px; }
.inline-form .req-field .input { flex: 1 1 auto; width: auto; }

/* Travel — expenses (task 0032) */
.exp-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-end: 12px; padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.exp-summary .sep { color: var(--color-muted); }
/* Transparent on desktop (identical layout); becomes a row on mobile (bug 0010 §1). */
.exp-summary__item { display: contents; }
.exp-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 16px; }
.exp-filters .input { width: auto; }
.table-wrap { overflow-x: auto; margin-block-end: 16px; }
.exp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.exp-table th, .exp-table td { padding: 5px 8px; text-align: start; border: 1px solid rgba(0,0,0,.08); }
/* Slimmer category header + compact, inline row actions (bug 0003 §6). */
.exp-cat-head th { color: #10233b; font-size: .9rem; padding: 4px 8px; }
/* Keep the actions cell a real table cell (colspan works); right-align via an
   inner flex wrapper (bug 0007 §4b, bug 0008 §1a). */
.exp-cat-head__actions { text-align: end; white-space: nowrap; }
.exp-cat-head__actions-inner { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.exp-cat-head__actions-inner .inline { display: inline-flex; margin: 0; }
.exp-cat-head__actions .btn { padding: 2px 8px; font-size: .78rem; }
.exp-table .inline { display: inline; margin: 0; }
.exp-table .linklike { padding: 0 3px; font-size: .82rem; }
.exp-table__cols th { background: var(--color-surface-2); font-weight: 600; }
.exp-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-table td, .exp-cat-head th, .exp-subtotal td { color: #10233b; } /* readable on pastel category colors */
.exp-subtotal td { font-weight: 700; }
.exp-grand { font-size: 1.05rem; margin: 4px 0 12px; }
.pay-cell { white-space: nowrap; }
.pay-status { font-weight: 700; }
.pay-badge { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; padding: 2px 6px; border-radius: 3px; margin-inline-start: 4px; }
.exp-rates-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rate-chip { padding: 1px 6px; border: 1px solid var(--color-border); border-radius: 999px; }
.input--color { width: 48px; height: 34px; padding: 2px; }
.input--mini { padding: 2px 4px; font-size: .8rem; width: auto; }
.exp-planned td { opacity: .72; font-style: italic; }
.linklike { background: none; border: 0; color: var(--color-primary); cursor: pointer; font: inherit; padding: 0 4px; text-decoration: underline; }
/* ----- Public share pages + owner share box (request 0006) ----- */
.share-page { max-width: 900px; margin: 0 auto; padding: 16px; min-height: 100vh; display: flex; flex-direction: column; }
.share-page__bar { display: flex; justify-content: flex-end; padding-block: 8px; }
.share-lang { display: flex; gap: 4px; }
.share-lang__link { padding: 4px 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-muted); font-size: .9rem; }
.share-lang__link.is-active { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }
.share-page__content { flex: 1; }
.share-title { font-size: 1.5rem; margin-block: 12px 18px; }
.share-page__footer { margin-block-start: 24px; padding-block: 16px; border-block-start: 1px solid var(--color-border); text-align: center; color: var(--color-muted); font-size: .85rem; }
.share-box { margin-block: 20px 8px; }
.share-box__summary { cursor: pointer; font-weight: 600; }
.share-box__body { margin-block-start: 10px; }
.share-box__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 8px; }
.share-box__link .input { flex: 1; min-width: 200px; font-family: monospace; font-size: .85rem; }
.share-box__link .inline { display: inline-flex; margin: 0; }
/* Plan action icons on one line (bug 0007 §2) */
.plan-actions { white-space: nowrap; }
.plan-actions .inline { display: inline-flex; margin: 0; }
/* ----- All-trips cards with inline management (bug 0008 §3) ----- */
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-block: 12px; }
.trip-card { display: flex; flex-direction: column; gap: 6px; }
.trip-card__name { font-size: 1.15rem; font-weight: 700; text-decoration: none; color: var(--color-text); }
.trip-card__name:hover { color: var(--color-primary); }
.trip-card__meta { margin: 0; }
.trip-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: auto; padding-block-start: 6px; }
.trip-card__actions .inline { display: inline-flex; margin: 0; }
/* ----- Trip dashboard redesign (bug 0005 #4) ----- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-block: 16px; }
.dash-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.dash-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.dash-card__count { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--color-primary); }
.dash-card__count--view { color: var(--color-muted); }
.dash-card__label { font-size: .9rem; color: var(--color-text); text-transform: capitalize; }
.dash-expenses { margin-block: 16px; }
.dash-expenses__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.dash-totals { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-block-end: 8px; }
.dash-total { display: flex; align-items: center; gap: 6px; }
.dash-total__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dash-total__label { color: var(--color-muted); }
.dash-total__val { font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-total--grand { margin-inline-start: auto; font-size: 1.05rem; }
.dash-total--grand .dash-total__val { color: var(--color-primary); }
.dash-cats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-cat { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: 10px; }
.dash-cat__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-cat__bar { background: var(--color-surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.dash-cat__fill { display: block; height: 100%; border-radius: 999px; }
.dash-cat__val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-meta { margin-block-start: 12px; }
/* Icon action buttons in tables (bug 0005 #2/#3) */
.icon-btn { background: none; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 4px; border-radius: var(--radius-sm); }
.icon-btn:hover { background: rgba(0,0,0,.08); }
.exp-actions { white-space: nowrap; text-align: center; }
.exp-note { margin-block-start: 2px; }

/* Travel — plan (task 0033) */
.plan-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.plan-table th, .plan-table td { padding: 7px 9px; border: 1px solid var(--color-border); text-align: start; vertical-align: top; }
.plan-table thead th { background: var(--color-surface-2); font-weight: 600; }
.plan-day { color: #10233b; font-weight: 600; white-space: nowrap; }
.plan-day__n { display: block; }
.plan-day__dow { display: block; font-size: .8rem; opacity: .8; }
.plan-day__date { display: block; font-size: .8rem; opacity: .8; font-variant-numeric: tabular-nums; }
/* Small "add item on this day" icon under the date. */
.plan-day__add { display: inline-flex; align-items: center; justify-content: center; margin-block-start: 4px; width: 22px; height: 22px; padding: 0; font-size: .95rem; line-height: 1; cursor: pointer; color: var(--color-primary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 50%; }
.plan-day__add:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.plan-row.is-dragging { opacity: .5; }
.plan-actions { white-space: nowrap; }
.drag-handle { cursor: grab; color: var(--color-muted); margin-inline-end: 4px; }
/* "open map" link under the plan location text (request 0088). */
.plan-map-link { display: block; margin-block-start: 2px; font-size: .8rem; color: var(--color-primary); }
/* Preserve line breaks entered in the plan item's info/drive textarea (request 0082). */
.plan-info { white-space: pre-line; }
/* "Sleep in …" divider row between plan days (bug 0004 #4). */
.plan-sleep td { background: var(--color-surface-2); font-style: italic; color: var(--color-text); padding: 4px 10px; }

/* Travel — map (task 0034) */
#travel-map { height: 62vh; min-height: 360px; border-radius: var(--radius); border: 1px solid var(--color-border); }
.map-pin__dot { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
/* Map day-filter buttons (bug 0004 #2) */
.map-days { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-block-end: 10px; }
.map-day-btn.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Travel — itinerary (task 0035) */
.itin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.itin-table th, .itin-table td { padding: 8px 10px; border: 1px solid rgba(0,0,0,.12); text-align: start; vertical-align: top; color: #10233b; }
.itin-table thead th { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }
.itin-icon { text-align: center; font-size: 1.2rem; }
.itin-row--flight-0 td { background: #F0EFFE; }
.itin-row--flight-1 td { background: #E4E0FC; }
.itin-row--hotel-0 td { background: #FEF4EA; }
.itin-row--hotel-1 td { background: #FAE8D4; }

/* Travel — settings (task 0036) */
.settings-form { margin-block-end: 16px; }
.notice { padding: 10px 14px; border-radius: var(--radius-sm); margin-block-end: 14px; }
.notice--ok { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.icon-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.icon-choice { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; background: #fff; }
.icon-choice input { position: absolute; opacity: 0; }
.icon-choice:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.upload-label { display: block; margin-block-start: 8px; font-size: .85rem; color: var(--color-muted); }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Shared-plan view toggle: hidden on desktop; the mobile override below (inside
   the phone media query, which comes later in source order) reveals it. */
.plan-view-toggle { display: none; align-items: center; gap: 6px; margin-block-end: 10px; }

/* ============================================================================
   Bug 0010 — mobile-only responsive views (phones). Desktop is untouched.
   ========================================================================== */
@media (max-width: 640px) {
    /* §1 Expenses: stacked totals, one payment type per row */
    .exp-summary { flex-direction: column; align-items: stretch; }
    .exp-summary .sep { display: none; }
    .exp-summary__item { display: flex; align-items: center; gap: 6px; }

    /* §1 Expenses: the WHOLE table becomes block so the header, the row cards and
       the footer all span the same width (no table-layout sizing at all). */
    .exp-table, .exp-table thead, .exp-table tbody, .exp-table tfoot, .exp-table tr { display: block; width: auto; }
    /* Higher specificity than `.exp-table tr` above so the column header stays hidden. */
    .exp-table tr.exp-table__cols { display: none; }
    /* Category header stacks: title on its own row, actions on the next row */
    .exp-cat-head th { display: block; width: auto; }
    .exp-cat-head__actions { text-align: start; }
    .exp-cat-head__actions-inner { justify-content: flex-start; flex-wrap: wrap; }
    /* Data rows become cards; each cell is label: value */
    .exp-table tbody tr { border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius-sm); margin-block-end: 10px; }
    .exp-table tbody td { display: flex; justify-content: space-between; gap: 12px; border: 0; border-block-end: 1px solid rgba(0,0,0,.06); padding: 6px 10px; text-align: end; white-space: normal; }
    .exp-table tbody td:last-child { border-block-end: 0; }
    .exp-table tbody td::before { content: attr(data-label); font-weight: 600; color: #10233b; text-align: start; margin-inline-end: 8px; }
    .exp-table tbody td:empty { display: none; }
    .exp-table .exp-actions { justify-content: flex-end; }
    /* Subtotal row: label and amount on one line, full width */
    .exp-table tr.exp-subtotal { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 10px; }
    .exp-subtotal td { border: 0; padding: 0; }
    .exp-subtotal td:empty { display: none; }

    /* §2 Hotels: smaller room Edit/Delete buttons kept on one line */
    .room-list__actions { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; }
    .room-list__actions .inline { display: inline-flex; margin: 0; }
    .room-list__actions .btn { padding: 3px 8px; font-size: .72rem; }

    /* §3 Travel plan: day as a header row, then each event's details vertically.
       Gated behind .plan--stacked so the shared plan can toggle it (bug 0011 §2);
       the user's own plan table always has the class. */
    .plan-table.plan--stacked thead { display: none; }
    .plan-table.plan--stacked, .plan--stacked tbody, .plan--stacked tr, .plan--stacked td { display: block; width: auto; }
    .plan--stacked tr.plan-row { border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius-sm); margin-block-end: 8px; overflow: hidden; }
    .plan--stacked td.plan-day { padding: 6px 10px; }
    .plan--stacked .plan-day__n { font-weight: 700; }
    .plan--stacked .plan-day__n, .plan--stacked .plan-day__dow, .plan--stacked .plan-day__date { display: inline; margin-inline-end: 8px; }
    .plan--stacked .plan-row td[data-label] { display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; text-align: end; white-space: normal; }
    .plan--stacked .plan-row td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--color-muted); text-align: start; }
    .plan--stacked .plan-row td:empty { display: none; }
    .plan--stacked .plan-actions { padding: 6px 10px; text-align: end; }
    .plan--stacked .plan-actions .drag-handle { display: none; }
    .plan--stacked .plan-actions .inline { display: inline-flex; margin: 0; }
    .plan--stacked .plan-sleep td { padding: 6px 10px; }

    /* Shared-plan view toggle: only visible on mobile (bug 0011 §2) */
    .plan-view-toggle { display: inline-flex; }
}

/* ----- Flight bookings editor + list (request 0113) ----- */
.fbk-row { display: grid; grid-template-columns: 1.6fr 1.1fr 0.9fr 0.8fr auto; gap: 8px; align-items: center; margin-block-end: 8px; }
.fbk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 6px; }
.fbk-seg { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px; margin-block-end: 10px; background: var(--color-surface-2); }
.fbk-seg__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.fbk-svc { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px; }
.fbk-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; padding: 5px 6px 5px 10px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-border); }
.fbk-chip__x { border: none; background: transparent; color: var(--color-muted); cursor: pointer; font-size: .85rem; line-height: 1; padding: 0 2px; }
.fbk-chip__x:hover { color: var(--color-danger); }
.fbk-list { display: grid; gap: 14px; }
.fbk-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fbk-card__title { font-size: 1.05rem; margin: 0; }
.fbk-segs { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-block-start: 1px solid var(--color-border); display: grid; gap: 8px; }
.fbk-segs li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.fbk-segs__route { font-weight: 600; }
.fbk-card__svc { margin-block-start: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
#service-modal { z-index: 60; }
@media (max-width: 640px) {
    .fbk-row { grid-template-columns: 1fr 1fr; }
}