/* HomeoShip design language — see docs/DESIGN.md
   Source: HomeoShip Repertory Mobile prototype (Remedy Green) */

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

:root {
    --color-primary: #1E6B58;
    --color-primary-pressed: #154F41;
    --color-primary-tint: #E7F0EC;
    --color-accent: #1E6B58;
    --color-accent-hover: #154F41;
    --color-ink: #121413;
    --color-text: #121413;
    --color-text-secondary: #575C59;
    --color-text-light: #575C59;
    --color-label: #6B706C;
    --color-text-muted: #6B706C;
    --color-line: #E4E6E3;
    --color-border: #E4E6E3;
    --color-hairline: #EEF0ED;
    --color-border-light: #EEF0ED;
    --color-surface: #F3F4F2;
    --color-bg: #FFFFFF;
    --color-bg-light: #F3F4F2;
    --color-bg-card: #FFFFFF;
    --color-highlight: #F6FAF8;
    --color-case-bg: #F8F9F7;
    --color-white: #FFFFFF;
    --color-dark-accent: #6FC9AC;
    --color-success: #1E6B58;
    --color-error: #B42318;
    --color-warning: #B54708;
    --color-overlay: rgba(18, 20, 19, 0.36);
    --color-handle: #D3D6D2;
    --color-footer-bg: #121413;

    --font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.75rem;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-sheet: 24px;
    --radius-full: 9999px;

    --shadow-sm: none;
    --shadow-md: 0 8px 24px rgba(18, 20, 19, 0.12);
    --shadow-lg: 0 8px 24px rgba(18, 20, 19, 0.18);
    --shadow-xl: 0 12px 32px rgba(18, 20, 19, 0.18);

    --header-height: 52px;
    --mobile-tab-height: 72px;
    --search-dock-height: 62px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-ink);
    background: var(--color-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

/* ====================== */
/* HEADER */
/* ====================== */
.header {
    background: var(--color-white);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.header .container,
.header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 0 20px 0 20px;
    max-width: none;
}

.logo-link,
.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.logo,
.brand-homeoship {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0;
    line-height: 1;
}

.logo-sub,
.brand-product {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .brand-homeoship,
    .logo {
        display: none;
    }
    .logo-sub,
    .brand-product {
        font-size: 22px;
        font-weight: 600;
        color: var(--color-ink);
    }
    .header .container,
    .header-bar {
        padding: 14px 12px 10px 20px;
        gap: 8px;
    }
}

.header-spacer { flex: 1; }

.header-privacy {
    display: none;
    font-size: 13px;
    color: var(--color-label);
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

.nav {
    display: none;
    align-items: center;
    gap: 18px;
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.nav-link:hover { color: var(--color-ink); }

.book-select-wrap,
.book-chip {
    position: relative;
    margin-left: auto;
}

.book-select {
    appearance: none;
    -webkit-appearance: none;
    height: 36px;
    padding: 0 28px 0 12px;
    border: 1px solid var(--color-line);
    background: var(--color-white);
    border-radius: 18px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink);
    cursor: pointer;
    max-width: 180px;
}

.book-chip::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
    border-right: 1.5px solid var(--color-ink);
    border-bottom: 1.5px solid var(--color-ink);
}

.header-actions {
    display: none;
    align-items: center;
    gap: 8px;
}

/* ====================== */
/* BREADCRUMB (SEO, desktop) */
/* ====================== */
.breadcrumb {
    display: none;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-hairline);
    padding: 8px 0;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--color-label);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    margin-right: 8px;
    color: var(--color-label);
}

.breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: none;
}

.breadcrumb-item a:hover { text-decoration: underline; }

/* Hero is retired from the tool chrome; keep markup for SEO but hide on app. */
.hero { display: none; }

.edu-disclaimer {
    font-size: 12px;
    color: var(--color-label);
    margin: 8px 0 0;
    line-height: 1.45;
    max-width: 36rem;
}

/* ====================== */
/* STATUS BAR */
/* ====================== */
.status-bar {
    background: #FBF3E0;
    color: #7A4B2A;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
}

.status-bar .container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-bar.error { background: #FDECEC; color: #7A1F1A; }
.status-bar.loading { background: var(--color-primary-tint); color: var(--color-primary-pressed); }
.status-bar.success { background: var(--color-primary-tint); color: var(--color-primary-pressed); }

.status-retry {
    margin-left: auto;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 18px;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* ====================== */
/* APP WORKSPACE */
/* ====================== */
.main-content,
.app-workspace {
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--header-height));
    padding: 0;
    background: var(--color-white);
}

.app-workspace > .container,
.main-content > .container {
    width: 100%;
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--header-height));
    flex: 1;
}

.panel {
    display: none;
    flex-direction: column;
    min-height: 0;
    background: var(--color-white);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.panel.active-panel {
    display: flex;
    flex: 1;
    min-height: calc(100dvh - var(--header-height));
}

.find-panel .panel-header {
    display: none;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 14px 12px 10px 20px;
}

.panel.active-panel {
    padding-bottom: calc(var(--mobile-tab-height) + var(--safe-bottom));
}

#exportBtnMobile {
    margin-left: auto;
}

.panel-title {
    margin: 0;
    flex: 1;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.panel-title .count,
.case-count {
    color: var(--color-label);
    font-weight: 500;
}

.panel-icon { display: none; }

.step-index {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
}

.find-scroll,
.case-scroll,
.analysis-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.analysis-scroll {
    padding-bottom: 28px;
}

/* ====================== */
/* FIND */
/* ====================== */
.section-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-label);
}

.find-home {
    padding: 8px 20px 24px;
}

.recent-list {
    display: flex;
    flex-direction: column;
}

.recent-item,
.browse-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--color-hairline);
    background: none;
    padding: 0;
    font: inherit;
    font-size: 16px;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
}

.recent-item svg { flex: none; color: var(--color-label); }

.chapters-section { padding-top: 28px; }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-line);
    background: var(--color-white);
    border-radius: 20px;
    font: inherit;
    font-size: 14px;
    color: var(--color-ink);
    cursor: pointer;
}

.chip:hover { background: var(--color-surface); }

.ad-slot,
.hero-ad,
.ad-region {
    margin: 40px 0;
    min-height: 280px;
    padding: 24px 12px;
    width: 100%;
    overflow: visible;
}

.ad-slot,
.hero-ad,
.ad-region:has(ins) {
    border-radius: 14px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-between {
    padding: 32px 20px 16px;
}

.ad-region ins.adsbygoogle {
    display: block;
    width: 100%;
    min-height: 280px;
}

.tool-cta[hidden] {
    display: none;
}

.ad-slot-label {
    font-size: 12px;
    color: var(--color-label);
}

.browse-panel { padding: 0 20px 24px; }

.browse-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 6px;
}

.browse-header strong {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.browse-list { display: flex; flex-direction: column; }

.browse-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-hairline);
}

.browse-item {
    min-height: 52px;
    font-size: 17px;
    border-bottom: 0;
}

.browse-meta {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-label);
}

.search-results { padding: 0; }

.result-count {
    padding: 2px 20px 8px;
    font-size: 13px;
    color: var(--color-label);
}

.rubric-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--color-hairline);
    background: var(--color-white);
}

.rubric-item.in-case { background: var(--color-highlight); }

.rubric-item-body {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    padding: 10px 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.rubric-path {
    font-size: 12px;
    color: var(--color-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rubric-text {
    font-size: 17px;
    font-weight: 500;
    margin-top: 3px;
    color: var(--color-ink);
}

.rubric-text .highlight {
    background: var(--color-primary-tint);
    border-radius: 3px;
    padding: 0 2px;
}

.rubric-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-label);
    min-width: 20px;
    text-align: right;
}

.icon-btn {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1.5px solid var(--color-line);
    background: var(--color-white);
    color: var(--color-ink);
}

.icon-btn.in-case,
.icon-btn.added {
    border: 0;
    background: var(--color-primary);
    color: var(--color-white);
}

.icon-btn.ghost {
    border: 0;
    background: none;
    color: var(--color-label);
}

.search-dock {
    flex: none;
    padding: 10px 16px 0;
    border-top: 1px solid var(--color-hairline);
    background: var(--color-white);
}

.search-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 6px 0 16px;
    background: var(--color-surface);
    border-radius: 26px;
}

.search-pill svg { flex: none; color: var(--color-text-secondary); }

.search-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 17px;
    color: var(--color-ink);
    -webkit-appearance: none;
    appearance: none;
}

.search-input::placeholder { color: var(--color-label); }

.search-btn { display: none; }

.search-clear {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: none;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}

.search-clear[hidden] { display: none; }

.search-hint { display: none; }
.search-actions { display: none; }

/* ====================== */
/* CASE */
/* ====================== */
.case-rubrics {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.case-rubric-card {
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 12px 8px 12px 16px;
    background: var(--color-white);
}

.case-rubric-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.case-rubric-info { flex: 1; min-width: 0; padding-top: 2px; }

.case-rubric-info .rubric-path { white-space: nowrap; }

.case-weight-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-right: 8px;
}

.case-weight-row > span {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.seg {
    display: flex;
    gap: 4px;
    background: var(--color-surface);
    padding: 3px;
    border-radius: 12px;
}

.seg-btn {
    width: 44px;
    height: 40px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--color-text-secondary);
}

.seg-btn[aria-pressed="true"],
.seg-btn.active {
    background: var(--color-ink);
    color: var(--color-white);
}

.elim-toggle {
    margin-top: 6px;
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--color-text-secondary);
    text-align: left;
    cursor: pointer;
}

.elim-box {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1.5px solid #B8BCB8;
}

.elim-toggle[aria-pressed="true"] .elim-box,
.elim-box.on {
    background: var(--color-primary);
    border: 0;
}

.weight-select { display: none; }

.patient-card {
    border: 1px solid var(--color-line);
    border-radius: 16px;
    overflow: hidden;
    margin: 4px 16px 0;
    background: var(--color-white);
}

.patient-toggle {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: var(--color-white);
    padding: 0 16px;
    font: inherit;
    font-size: 15px;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
}

.patient-toggle .muted { color: var(--color-label); }

.patient-fields {
    display: none;
    padding: 4px 16px 16px;
    flex-direction: column;
    gap: 12px;
}

.patient-card.open .patient-fields { display: flex; }

.patient-fields label,
.field-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.field-input,
.auth-form input[type=email],
.auth-form input[type=password],
.auth-form input[type=text],
.patient-fields textarea {
    width: 100%;
    height: 44px;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    padding: 0 12px;
    font: inherit;
    font-size: 16px;
    color: var(--color-ink);
    background: var(--color-white);
}

.patient-fields textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
}

.patient-row { display: flex; gap: 8px; }
.field-age { max-width: 88px; }
.field-gender { max-width: 110px; }
.field-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-label);
    padding: 4px 20px 16px;
}

.gender-pills {
    display: flex;
    gap: 8px;
}

.gender-pills .chip[aria-pressed="true"] {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-white);
}

.case-dock {
    flex: none;
    padding: 10px 16px 0;
    border-top: 1px solid var(--color-hairline);
    background: var(--color-white);
}

.case-dock .btn-block { border-radius: 24px; }

.privacy-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 0;
    font-size: 13px;
    color: var(--color-label);
}

/* ====================== */
/* RESULTS */
/* ====================== */
.analysis-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 12px;
    gap: 12px;
}

.analysis-toolbar .muted,
.results-sub {
    font-size: 13px;
    color: var(--color-label);
}

.analysis-toolbar .seg { gap: 2px; }

.analysis-toolbar .seg-btn {
    width: auto;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
}

.remedy-result {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 20px;
    border: 0;
    border-bottom: 1px solid var(--color-hairline);
    background: var(--color-white);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.remedy-result.top { background: var(--color-highlight); }

.remedy-rank {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-label);
    width: 18px;
}

.remedy-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.remedy-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.remedy-abbr {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-ink);
}

.remedy-abbr.lead { color: var(--color-primary); }

.remedy-name {
    font-size: 13px;
    color: var(--color-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grade-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

.grade-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--color-line);
}

.grade-dot.g3 { background: var(--color-ink); }
.grade-dot.g2 { background: var(--color-primary); }
.grade-dot.g1 { background: var(--color-white); border: 1.5px solid var(--color-primary); box-sizing: border-box; }

.remedy-score-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.remedy-score {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ink);
}

.remedy-cov {
    font-size: 12px;
    color: var(--color-label);
}

.remedy-details {
    display: none;
    padding: 0 20px 14px 50px;
}

.remedy-result.open + .remedy-details,
.remedy-details.expanded { display: block; }

.rubric-contribution {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-hairline);
    font-size: 13px;
}

.contrib-grade {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    min-width: 16px;
}

.contrib-math {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.grade-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.grade-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.results-note {
    margin: 0;
    padding: 4px 20px 24px;
    font-size: 12px;
    color: var(--color-label);
    line-height: 1.5;
}

/* ====================== */
/* EMPTY STATES */
/* ====================== */
.empty-state {
    padding: 96px 36px;
    text-align: center;
    color: var(--color-text-secondary);
}

.empty-state-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-ink);
}

.empty-state-body {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin-top: 8px;
    line-height: 1.45;
}

.empty-state .btn { margin-top: 20px; }

/* ====================== */
/* BUTTONS */
/* ====================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    border: 0;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    min-height: 48px;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    line-height: 1;
    color: var(--color-ink);
    background: var(--color-ink);
}

.btn-primary {
    background: var(--color-ink);
    color: var(--color-white);
}

.btn-primary:hover:not(:disabled) { background: #0c0d0c; }
.btn-primary:disabled {
    background: var(--color-surface);
    color: var(--color-label);
    cursor: not-allowed;
}

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

.btn-accent:hover:not(:disabled) { background: var(--color-primary-pressed); }
.btn-accent:disabled {
    background: var(--color-surface);
    color: var(--color-label);
    cursor: not-allowed;
}

.btn-outline {
    background: var(--color-white);
    color: var(--color-ink);
    border: 1px solid var(--color-line);
}

.btn-outline:hover { background: var(--color-surface); }

.btn-ghost {
    background: none;
    color: var(--color-text-secondary);
    min-height: 44px;
    padding: 0 10px;
    font-weight: 400;
}

.btn-sm {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 18px;
}

.btn-block { width: 100%; }

.btn-icon {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 22px;
    background: none;
    color: var(--color-ink);
}

.remove-rubric-btn {
    width: 44px;
    height: 44px;
    margin-top: -8px;
    border: 0;
    background: none;
    color: var(--color-label);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 22px;
}

/* ====================== */
/* MOBILE TABS */
/* ====================== */
.mobile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: var(--color-white);
    padding: 6px 8px calc(22px + var(--safe-bottom));
}

.mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    background: transparent;
    border: none;
    color: var(--color-label);
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tab.active { color: var(--color-primary); }
.mobile-tab svg { width: 22px; height: 22px; }

.tab-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--color-ink);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}

.icon-wrap { position: relative; display: flex; }

/* ====================== */
/* SHEETS */
/* ====================== */
.sheet-root {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
}

.sheet-root.open { display: flex; }

.sheet-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--color-overlay);
    cursor: pointer;
}

.sheet {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding: 10px 20px 28px;
    max-height: 78%;
    display: flex;
    flex-direction: column;
}

.sheet-handle {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--color-handle);
    margin: 0 auto 14px;
}

.sheet h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.grade-chip {
    height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
}

.grade-chip.g3 { background: var(--color-ink); color: var(--color-white); }
.grade-chip.g2 { background: var(--color-primary); color: var(--color-white); font-style: italic; font-weight: 500; }
.grade-chip.g1 { background: var(--color-white); border: 1.5px solid var(--color-primary); color: var(--color-primary); font-weight: 400; }

.chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

/* ====================== */
/* TOAST */
/* ====================== */
.notification,
.toast {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-tab-height) + var(--safe-bottom) + var(--search-dock-height));
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-ink);
    color: var(--color-white);
    border-radius: 14px;
    padding: 4px 4px 4px 16px;
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    max-width: none;
    animation: toastIn 0.2s ease-out;
}

.toast-undo {
    height: 40px;
    padding: 0 14px;
    border: 0;
    background: none;
    color: #9FD8C6;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ====================== */
/* MARKETING SECTIONS */
/* ====================== */
.content-section { padding: 48px 0; }

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0 0 12px;
    line-height: 1.3;
}

.section-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.6;
}

.how-it-works,
.features-section,
.faq-section,
.seo-content {
    padding: 72px 0;
    border-top: 1px solid var(--color-hairline);
    background: var(--color-white);
}

.tool-cta {
    margin: 28px 20px 36px;
    padding: 22px 18px;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-primary-tint);
    text-align: center;
}

.tool-cta p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-ink);
}

.tool-cta .btn {
    display: inline-flex;
    min-height: 44px;
}

.tool-cta-page {
    margin: 36px 0 0;
    max-width: 640px;
}

.features-section,
.seo-content { background: var(--color-surface); }

.steps-grid,
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}

.step-card,
.feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 24px;
}

.step-number {
    width: 22px;
    height: 22px;
    background: var(--color-surface);
    color: var(--color-ink);
    border-radius: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 12px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title,
.feature-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 8px;
}

.step-text,
.feature-card p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary-tint);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: var(--color-primary);
}

.faq-list { max-width: 800px; margin: 32px auto 0; }

.faq-item {
    border: 1px solid var(--color-line);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.faq-item[open] { border-color: var(--color-primary); }

.faq-question {
    padding: 16px 18px;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.faq-question::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--color-primary);
    width: 28px;
    text-align: center;
}

.faq-item[open] .faq-question::after { content: "−"; }
.faq-question::-webkit-details-marker { display: none; }

.faq-answer { padding: 0 18px 18px; }

.faq-answer p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 8px 0 0;
}

.faq-answer a,
.seo-text a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.faq-answer a:hover,
.seo-text a:hover { text-decoration: underline; }

.seo-text {
    max-width: 800px;
    margin: 32px auto 0;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 28px;
}

.seo-text p {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 16px;
}

.seo-text p:last-child { margin-bottom: 0; }
.seo-text strong { color: var(--color-ink); font-weight: 600; }

/* ====================== */
/* FOOTER */
/* ====================== */
.footer {
    background: var(--color-footer-bg);
    color: rgba(255, 255, 255, 0.8);
    padding: 24px 0 calc(var(--mobile-tab-height) + var(--safe-bottom) + 24px);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footer-social { display: flex; gap: 24px; }
.footer-social-link { color: #fff; display: flex; }
.footer-social-link:hover { color: var(--color-dark-accent); }

.footer-copyright {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.footer-brand {
    color: var(--color-dark-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-brand:hover { opacity: 0.85; }

/* ====================== */
/* LOADING */
/* ====================== */
.loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-label);
}

.spinner {
    border: 3px solid var(--color-line);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ====================== */
/* AUTH */
/* ====================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 48px;
    background: var(--color-surface);
}

.auth-page .header {
    width: 100%;
    background: var(--color-white);
    margin-bottom: 32px;
    position: sticky;
    border-bottom: 1px solid var(--color-line);
}

.auth-page .brand-homeoship {
    display: inline;
    font-size: 19px;
    font-weight: 700;
}

.auth-page .brand-product {
    display: inline;
    font-size: 19px;
    font-weight: 500;
    color: var(--color-primary);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: 28px 22px;
}

.auth-card.auth-wide { max-width: 560px; }
.auth-card ul { margin: 8px 0 16px 18px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.65; }
.auth-card li { margin: 6px 0; }
.auth-card p { color: var(--color-text-secondary); font-size: 14px; line-height: 1.6; }
.auth-card h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.auth-card h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0 8px;
}

.auth-sub,
.auth-links {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 12px 0 0;
}

.auth-links a { color: var(--color-primary); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.auth-form .consent {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}

.auth-error {
    background: #FDECEC;
    color: #7A1F1A;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.auth-ok {
    background: var(--color-primary-tint);
    color: var(--color-primary-pressed);
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.hub-page .header { border-bottom: 1px solid var(--color-line); }

.hub {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    width: 100%;
}

.hub h1 {
    font-size: clamp(2rem, 6vw, 2.5rem);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    font-weight: 600;
}

.hub .tag {
    color: var(--color-label);
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 8px;
}

.hub .tools {
    display: grid;
    gap: 12px;
}

.hub a.tool {
    display: block;
    padding: 20px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
}

.hub a.tool strong {
    display: block;
    font-size: 1.15rem;
    margin-bottom: 4px;
    color: var(--color-primary);
    font-weight: 600;
}

.hub a.tool span {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
}

.hub a.tool-soon {
    background: var(--color-surface);
}

.hub-copy {
    margin-top: 40px;
}

.hub-copy h2 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}

.hub-copy p {
    color: var(--color-text-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.hub-copy a { color: var(--color-primary); }
.hub .learn { margin-top: 8px; font-size: 0.95rem; color: var(--color-label); }

.case-list { list-style: none; padding: 0; margin: 0; }
.case-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-hairline);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
}

/* ====================== */
/* TABLET / DESKTOP */
/* ====================== */
@media (min-width: 768px) {
    :root { --header-height: 64px; }

    .header {
        height: 64px;
        border-bottom: 1px solid var(--color-line);
    }

    .header .container,
    .header-bar {
        padding: 0 24px;
        gap: 16px;
        max-width: none;
    }

    .brand-homeoship,
    .logo { display: inline; font-size: 19px; font-weight: 700; }

    .logo-sub,
    .brand-product {
        display: inline;
        font-size: 19px;
        font-weight: 500;
        color: var(--color-primary);
    }

    .nav,
    .header-privacy,
    .header-actions { display: flex; }

    .book-select-wrap,
    .book-chip { margin-left: 0; }

    .book-select { max-width: 240px; }

    .breadcrumb { display: none; }
    .mobile-tabs { display: none; }

    .main-content,
    .app-workspace {
        min-height: calc(100vh - var(--header-height));
    }

    .app-workspace > .container,
    .main-content > .container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        height: calc(100vh - var(--header-height));
        min-height: 560px;
        overflow: hidden;
    }

    .panel {
        display: flex;
        flex: 1 1 360px;
        min-width: 0;
        height: 100%;
        border-left: 1px solid var(--color-line);
    }

    .panel.active-panel { display: flex; }

    .find-panel { border-left: 0; flex: 1 1 400px; }
    .case-panel {
        background: var(--color-case-bg);
        flex: 1 1 360px;
    }
    .analysis-panel { flex: 1.3 1 440px; }

    .find-panel .panel-header,
    .panel-head,
    .panel-header {
        display: flex;
        height: 54px;
        min-height: 54px;
        padding: 16px 20px 0;
        box-sizing: border-box;
        align-items: flex-start;
        gap: 10px;
    }

    .panel.active-panel { padding-bottom: 0; }

    #saveCaseBtnMobile,
    #exportBtnMobile { display: none; }

    .panel-title {
        font-size: 16px;
        padding-top: 2px;
    }

    .step-index { display: flex; }
    .case-panel .step-index {
        background: var(--color-white);
        border: 1px solid var(--color-line);
    }

    .find-panel .panel-header { order: 0; }
    .find-panel .search-dock { order: 1; }
    .find-panel .find-scroll { order: 2; }

    .search-dock {
        border-top: 0;
        padding: 0 20px 12px;
    }

    .search-pill { height: 48px; border-radius: 24px; }
    .search-input { font-size: 16px; }

    .find-home { padding: 4px 20px 24px; }
    .recent-item { min-height: 44px; font-size: 15px; }
    .chip { height: 36px; }
    .rubric-text { font-size: 16px; }

    .case-rubrics { padding: 4px 16px 20px; gap: 8px; }
    .case-rubric-card { border-radius: 14px; }
    .patient-card { margin: 4px 16px 20px; border-radius: 14px; }
    .case-dock {
        display: block;
        padding: 10px 16px 16px;
        border-top: 1px solid var(--color-line);
        background: var(--color-case-bg);
    }

    .empty-state { padding: 120px 40px; }
    .empty-state-title { font-size: 17px; }
    .empty-state-body { font-size: 14px; }

    .notification,
    .toast { bottom: 24px; left: auto; right: 24px; width: min(360px, calc(100vw - 48px)); }

    .how-it-works,
    .features-section,
    .faq-section,
    .seo-content { padding: 88px 0; }

    .steps-grid { grid-template-columns: repeat(3, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }

    .footer {
        padding: 32px 0;
    }

    .footer-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .features-grid { grid-template-columns: repeat(3, 1fr); }
    .how-it-works,
    .features-section,
    .faq-section,
    .seo-content { padding: 96px 0; }
    .section-title { font-size: 2rem; }
}

@media (min-width: 1280px) {
    .container { max-width: 1280px; }
}

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

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) { outline: none; }

::selection {
    background: var(--color-primary-tint);
    color: var(--color-ink);
}

@media print {
    .header, .mobile-tabs, .search-dock, .case-dock, .status-bar, .footer {
        display: none !important;
    }
    .panel { display: block !important; }
}