/* ── 2026-10 redesign: clean, quiet chrome ─────────────────────────────────
   Loaded after every other stylesheet. It only re-skins: tokens, the top bar,
   the sidebar and shared cards. Layout and behaviour stay in style.css.
   Takeda red is kept for the logo, the active-tab underline and alerts only. */

:root {
    --bg: #F7F7F5;
    --surface: #FFFFFF;
    --surface-2: #FAFAF9;
    --border: #E7E5E1;
    --border-strong: #D6D3CE;
    --text-1: #1C1F23;
    --text-2: #555B62;
    --text-3: #6E747A;
    --text-4: #6E747A;
    --radius: 10px;
    --radius-sm: 7px;
    --shadow-soft: 0 1px 2px rgba(28, 31, 35, 0.05);
    --shadow-card: none;
    --font-ui: "Segoe UI Variable Text", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", system-ui, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", system-ui, sans-serif;
    --tracking-caps: 0;
    --tracking-caps-strong: 0;
}

body,
.main-content {
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ── Top bar: one quiet row, underline tabs ───────────────────────────── */
.topbar {
    background: var(--surface);
    backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    padding: 0 1.25rem;
    min-height: 56px;
}

.topbar-logo,
.logo-mark {
    border-radius: 7px;
    box-shadow: none;
}

.topbar-app-name {
    font-weight: 600;
    letter-spacing: 0;
}

.view-tabs {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 0.25rem;
    align-self: stretch;
}

.view-tab {
    min-height: 56px;
    border-radius: 0;
    padding: 0 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-2);
    border-bottom: 2px solid transparent;
    background: transparent;
}

.view-tab:hover {
    color: var(--text-1);
    background: transparent;
}

.view-tab.active,
.view-tab.active:hover {
    background: transparent;
    color: var(--text-1);
    box-shadow: none;
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.explore-subtabs .explore-subtab {
    border-radius: 999px;
    font-weight: 500;
}

.explore-subtabs .explore-subtab.active {
    background: var(--text-1);
    color: #fff;
    box-shadow: none;
}

/* Client + watch-list button (was the static "Takeda Member" badge). */
.topbar-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-1);
    border-radius: 999px;
    padding: 0.3rem 0.8rem 0.3rem 0.35rem;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    box-shadow: none;
}

.topbar-watch-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.topbar-client {
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.topbar-watch-count {
    color: var(--text-2);
}

.topbar-data-chip {
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: 0.75rem;
}

/* ── Page header: smaller, calmer ─────────────────────────────────────── */
.view-context-bar {
    background: transparent;
    border-bottom: 0;
    padding-top: 1.1rem;
    padding-bottom: 0.25rem;
}

.view-breadcrumb {
    display: none;
}

.view-page-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.view-trust-note {
    font-size: 0.75rem;
    color: var(--text-3);
}

.dashboard-eyebrow {
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* ── Sidebar: a plain list of the client's drugs ──────────────────────── */
.sidebar {
    background: var(--surface);
    box-shadow: none;
    border-right: 1px solid var(--border);
}

.sidebar-header {
    display: none;
}

.sidebar .search-section {
    padding-top: 1rem;
}

.sidebar-filter-brief.sidebar-product-scope {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0.25rem 0;
}

.sidebar-product-scope .sidebar-filter-brief-head {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-1);
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-product-scope .sidebar-filter-edit {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.75rem;
    color: var(--text-1);
}

.sidebar-product-scope .sidebar-filter-edit:hover {
    border-color: var(--border-strong);
}

.sidebar-watch-hint {
    margin: 0.15rem 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-3);
}

.sidebar-product-group-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.9rem;
}

.sidebar-product-scope-grid {
    display: flex;
    flex-direction: column;
    border: 0;
    background: transparent;
    gap: 1px;
}

.sidebar-product-scope-grid-full {
    max-height: min(26rem, 46vh);
}

.sidebar-product-scope-chip {
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none;
    justify-content: flex-start;
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-1);
    flex: none;
}

.sidebar-product-scope-chip:hover,
.sidebar-product-scope-chip:focus-visible {
    background: var(--surface-2);
    border: 0;
    box-shadow: none;
}

.sidebar-product-scope-chip.is-active,
.sidebar-product-scope-chip[aria-pressed="true"] {
    background: #F1EFEC;
    color: var(--text-1);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
    border: 0;
}

.sidebar-product-scope-chip.is-competitor {
    color: var(--text-2);
}

.sidebar-advanced-link {
    margin-top: 0.75rem;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0;
}

.sidebar-advanced-link:hover {
    color: var(--text-1);
}

/* ── Shared cards: hairline, no shadow ────────────────────────────────── */
.ml-kpi,
.market-panel,
.meeting-log-portfolio,
.meeting-log-pies > *,
.analytics-board-nav {
    box-shadow: none;
    border-color: var(--border);
    border-radius: var(--radius);
}

/* ── Meeting page: "跟你追蹤的藥品有關" ───────────────────────────────── */
.meeting-log-watch {
    margin: 0 0 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.9rem 1rem 0.5rem;
}

.ml-watch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.ml-watch-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.ml-watch-count {
    display: inline-block;
    min-width: 1.5em;
    margin-left: 0.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
}

.ml-watch-actions {
    display: flex;
    gap: 0.9rem;
}

.ml-watch-link {
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
}

.ml-watch-link:hover,
.ml-watch-link[aria-pressed="true"] {
    color: var(--text-1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ml-watch-list {
    display: flex;
    flex-direction: column;
}

.ml-watch-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    padding: 0.6rem 0.25rem;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--text-1);
    cursor: pointer;
}

.ml-watch-row:hover {
    background: var(--surface-2);
}

.ml-watch-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ml-watch-why {
    font-size: 0.75rem;
    color: var(--text-3);
    white-space: nowrap;
}

.ml-watch-why.is-own {
    color: var(--accent-strong);
}

.ml-watch-decision {
    justify-self: start;
    border-radius: 6px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    background: #F1EFEC;
    color: var(--text-2);
}

.ml-watch-decision.is-agree { background: #E6F4EC; color: #1E6B43; }
.ml-watch-decision.is-partially-agree { background: #EEF4E2; color: #46631A; }
.ml-watch-decision.is-deny { background: #FBE9E9; color: #9B2226; }
.ml-watch-decision.is-defer { background: #FDF3DC; color: #8A5A0B; }

.ml-watch-empty {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-3);
}

@media (max-width: 720px) {
    .ml-watch-row {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .ml-watch-why {
        grid-column: 2;
        white-space: normal;
    }
}

/* ── 管理追蹤清單 dialog ─────────────────────────────────────────────── */
.wl-dialog {
    margin: auto;
    inset: 0;
    width: min(640px, calc(100vw - 32px));
    max-height: min(780px, calc(100vh - 48px));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0;
    background: var(--surface);
    color: var(--text-1);
    box-shadow: 0 24px 60px rgba(28, 31, 35, 0.18);
    font-family: var(--font-ui);
}

.wl-dialog[open] {
    display: flex;
    flex-direction: column;
}

.wl-dialog::backdrop {
    background: rgba(28, 31, 35, 0.35);
}

.wl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0;
}

.wl-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.wl-icon-btn {
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-2);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
}

.wl-icon-btn:hover {
    background: var(--surface-2);
}

.wl-intro {
    margin: 0.35rem 1.25rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-2);
}

.wl-search {
    margin: 0 1.25rem 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 0.875rem;
    background: var(--surface);
}

.wl-search:focus {
    outline: 2px solid var(--focus-halo);
    border-color: var(--border-strong);
}

.wl-body {
    overflow-y: auto;
    padding: 0 1.25rem;
    flex: 1 1 auto;
}

.wl-section {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
}

.wl-section:first-child {
    border-top: 0;
}

.wl-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.wl-section-head h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.wl-section-note {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-3);
}

.wl-group-actions {
    display: flex;
    gap: 0.75rem;
}

.wl-area {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.75rem;
    color: var(--text-3);
}

.wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 2px 0.75rem;
}

.wl-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 0;
}

.wl-row:hover {
    background: var(--surface-2);
}

.wl-row input {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex: none;
}

.wl-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-row-hint {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-3);
    white-space: nowrap;
}

.wl-link {
    border: 0;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wl-link:hover {
    color: var(--text-1);
}

.wl-more {
    margin-top: 0.25rem;
}

.wl-empty {
    font-size: 0.8125rem;
    color: var(--text-3);
}

.wl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
}

.wl-foot-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.wl-count {
    font-size: 0.8125rem;
    font-weight: 600;
}

.wl-primary {
    border: 0;
    border-radius: 8px;
    background: var(--text-1);
    color: #fff;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
}

.wl-primary:hover {
    background: #000;
}

/* The analytics view paints its sidebar edit button red; keep the watch-list button quiet everywhere. */
body .sidebar .sidebar-product-scope .sidebar-filter-edit {
    background: var(--surface);
    color: var(--text-1);
    border: 1px solid var(--border);
    box-shadow: none;
}

/* In-page tab rows follow the top bar: dark pill, no red glow. */
.analytics-board-tab.active,
.analytics-board-tab.active:hover {
    background: var(--text-1);
    color: #fff;
    box-shadow: none;
}

/* ── 2026-10 UX pass: navigation by kind of page ───────────────────────────
   Work tabs (各屆會議 · 全部案件 · 決策分析 · 給付規定) on the left; personal and
   reference pages (學習 · 我的收藏) as quiet icon buttons on the right, beside the
   client's watch list. 決策分析's sub-views get their own row under the bar. */

@media (min-width: 901px) {
    body .topbar,
    body[data-active-view] .topbar {
        flex-wrap: nowrap;
    }

    body[data-active-view] .topbar-main {
        flex-basis: auto;
    }
}

/* Narrow screens: brand + icons + watch list on the first row, the work tabs on a
   scrollable second row. */
@media (max-width: 900px) {
    body .topbar,
    body[data-active-view] .topbar {
        flex-wrap: wrap;
        padding: 0 0.75rem;
        row-gap: 0;
    }

    body .topbar-main,
    body[data-active-view] .topbar-main {
        display: contents;
    }

    .topbar-main > .view-tabs {
        order: 3;
        flex: 1 0 100%;
        overflow-x: auto;
    }

    .topbar-main .view-tab {
        min-height: 44px;
    }

    .topbar-actions {
        order: 2;
        margin-left: auto;
    }

    .topbar-watch-count {
        display: none;
    }

    .topbar-watch-btn {
        padding-right: 0.35rem;
    }

    .topbar .sort-controls {
        order: 4;
        flex: 1 0 100%;
        padding-bottom: 0.4rem;
    }

    .topbar-sep {
        display: none;
    }
}

.topbar-actions {
    gap: 0.25rem;
}

.topbar-utility {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-utility:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

.topbar-utility[aria-pressed="true"] {
    background: #F1EFEC;
    color: var(--text-1);
    font-weight: 600;
}

.topbar-utility-icon {
    width: 18px;
    height: 18px;
    flex: none;
}

.topbar-actions .topbar-watch-btn {
    margin-left: 0.5rem;
}

/* The status chip repeated what each page already says; keep it for screen readers. */
.topbar-data-chip {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 決策分析 sub-views: an underline row of its own, full width under the top bar. */
.main-content > .explore-subtabs {
    display: flex;
    flex: none;
    gap: 0.25rem;
    margin: 0;
    padding: 0 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    max-width: none;
    overflow-x: auto;
}

.main-content > .explore-subtabs[hidden] {
    display: none;
}

.main-content > .explore-subtabs .explore-subtab,
.main-content > .explore-subtabs .explore-subtab.active {
    min-height: 44px;
    padding: 0 0.8rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 500;
}

.main-content > .explore-subtabs .explore-subtab:hover {
    color: var(--text-1);
}

.main-content > .explore-subtabs .explore-subtab.active {
    color: var(--text-1);
    font-weight: 600;
    border-bottom-color: var(--text-1);
}

@media (max-width: 900px) {
    .topbar-utility span {
        display: none;
    }
    .topbar-utility {
        padding: 0 0.5rem;
    }
}

/* ── Bookmark icon (case cards and the case panel) ─────────────────────── */
.bm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    padding: 0;
}

.bm-btn:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

.bm-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.bm-icon {
    width: 18px;
    height: 18px;
}

.bm-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.bm-btn.is-on {
    color: var(--accent);
}

.bm-btn.is-on .bm-icon path {
    fill: currentColor;
}

.bm-btn:disabled {
    opacity: 0.6;
}

.bm-card {
    margin-left: 0.25rem;
}

.bm-panel {
    float: right;
    margin: 0 0 0.25rem 0.5rem;
    width: 34px;
    height: 34px;
}

.bm-panel .bm-icon {
    width: 20px;
    height: 20px;
}

.bm-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: var(--text-1);
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 8px 24px rgba(28, 31, 35, 0.2);
}

.bm-toast[hidden] {
    display: none;
}

.bm-toast-action {
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 0;
}

/* ── Case cards: one accent at a time ──────────────────────────────────── */
.meta-pill,
.meta-round,
.meta-section,
.badge,
.badge-new-drug,
.badge-coverage,
.badge-price,
.badge-mea,
.badge-htr,
.badge-default {
    background: #F1EFEC;
    color: var(--text-2);
    font-weight: 500;
}

.card-drug-chip {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-1);
}

/* ── Sidebar filters: no red boxes ─────────────────────────────────────── */
.sidebar .filter-group,
.sidebar .filter-group.has-active,
.sidebar .filter-group.is-active {
    border-color: var(--border);
    box-shadow: none;
}

.sidebar .filter-section-heading {
    color: var(--text-3);
}

/* 全部案件: the result count is information, not an alert. */
.search-result-status {
    border-left: 1px solid var(--border);
    background: var(--surface);
}

/* ── 2026-10 shell: full-width header, side panel below it ─────────────────
   Measured against Stripe Docs / EMA / PBS: the header spans the window with the
   logo at the far left, and the side navigation starts under it. Before this the
   300px sidebar ran the full height and the header began at x=300. */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.app-container > .topbar {
    flex: none;
    position: relative;
    z-index: 30;
    padding-left: 0.75rem;
}

.app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.app-body > .main-content {
    height: auto;
    max-height: none;
    min-height: 0;
}

.app-body > .sidebar {
    height: auto;
    border-right: 1px solid var(--border);
}

/* Side-panel toggle: a panel icon above the panel (Outlook / Teams pattern),
   not a ☰ glyph wedged between the panel and the logo. */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}

.sidebar-toggle:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

.sidebar-toggle-icon {
    width: 20px;
    height: 20px;
}

.topbar-brand {
    gap: 0.5rem;
}

.topbar-app-name {
    font-size: 1rem;
    font-weight: 600;
}

/* Phones keep the same bounded shell: the header on top, the page below it in a
   box that ends at the bottom of the screen, so each view's own scroller works.
   (Codex P1 on #1161: an auto-height shell under body{overflow:hidden} could not
   scroll at all — measured 2026-10-17, meeting page 14,953px tall, 844px shown.)
   The side panel is a fixed drawer there, so .app-body holds only <main>. */
@media (max-width: 860px) {
    .app-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }
    .app-body {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
    }
    .app-body > .main-content {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        height: auto;
    }
}

/* ── 2026-10 type: one scale (12/13/14/16/20/24), weights 400/500/600 ──────
   Reading text is 14px, card titles 16px. Snapped mechanically in every sheet;
   the rules below lift the main reading text that the snap left at 13px. */
body {
    font-size: 0.875rem;
    line-height: 1.6;
}

.ucard-v,
.ucard-k,
.ucard-summary,
.card-indication,
.reimbursement-rule-text,
.market-lift-meta,
.search-result-status p,
.cv-panel p {
    font-size: 0.875rem;
}

.card-title,
.card-title--full {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.view-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
}

#meetingLogRoundTitle {
    font-size: 1.25rem;
    font-weight: 600;
}

.dashboard-eyebrow,
.meeting-log-case-eyebrow,
.sidebar-product-group-label,
.filter-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.sidebar-product-scope-chip,
.sidebar .chip,
.view-tab,
.topbar-utility {
    font-size: 0.875rem;
}

/* Side-panel filters: neutral by default, dark when chosen (red stays for alerts). */
body .sidebar .chip,
body .sidebar .chip.chip-core {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-1);
    box-shadow: none;
}

body .sidebar .chip:hover {
    border-color: var(--border-strong);
}

body .sidebar .chip.active,
body .sidebar .chip[aria-pressed="true"] {
    border-color: var(--text-1);
    background: #F1EFEC;
    color: var(--text-1);
    font-weight: 600;
}

body .sidebar .agenda-btn.active {
    border-color: var(--text-1);
    background: var(--text-1);
    color: #fff;
}

/* ── 全部案件: the two columns end together ─────────────────────────────────
   Measured 2026-10-17: the case list was 3,427px tall and the cohort panel 2,072px,
   and the grid aligned both to the top, so the panel stopped ~1,355px early.
   The panel column now stretches to the list's height and the panel itself is
   sticky: it stays in view while the list scrolls, scrolls on its own when it is
   taller than the window, and its bottom meets the list's bottom at the end. */
@media (min-width: 1181px) {
    .search-workspace {
        align-items: stretch;
    }

    .search-workspace .search-workspace-dashboard {
        align-self: stretch;
    }

    .search-workspace .search-dashboard-shell {
        position: sticky;
        top: 0.85rem;
        max-height: calc(100vh - 57px - 1.7rem);
        overflow-y: auto;
        /* No overscroll containment: at the panel's end the wheel carries on to the
           case list (Codex P2 on #1172). */
        scrollbar-width: thin;
    }
}

/* ── Shared (i) help trigger: one look everywhere ─────────────────────────── */
.ux-help-tip.info-tip,
.ux-help-tip.dashboard-term-help,
.ux-help-tip.ux-help-inline {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-left: 0.35rem !important;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: 50%;
    vertical-align: -2px;
    cursor: help;
}
.ux-help-tip.info-tip::after,
.ux-help-tip.dashboard-term-help::after,
.ux-help-tip.ux-help-inline::after {
    content: "i";
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
}
.ux-help-tip.info-tip:hover,
.ux-help-tip.info-tip:focus-visible {
    border-color: var(--text-1);
    box-shadow: none;
}
.ux-help-tip.info-tip:hover::after,
.ux-help-tip.info-tip:focus-visible::after {
    color: var(--text-1);
}
/* The floating tooltip is the single surface; no second CSS tooltip underneath. */
.ux-help-tip.info-tip:hover::before,
.ux-help-tip.info-tip:focus::before {
    content: none;
}
.floating-help-tooltip {
    max-width: 360px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-1);
    font-size: 0.8125rem;
    line-height: 1.55;
    box-shadow: 0 10px 30px rgba(28, 31, 35, 0.14);
}

/* ── 市場訊號 overview: four tiles, two charts, three drivers ─────────────── */
.sig-board .analytics-dashboard-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}
.sig-board #analyticsSubtitle {
    margin: 0.2rem 0 0;
    color: var(--text-2);
    font-size: 0.875rem;
}
.sig-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0 1rem;
}
.sig-tile {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    min-width: 0;
}
.sig-tile-label {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--text-2);
}
.sig-tile-value {
    margin-top: 0.25rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.sig-tile-delta {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-2);
}
.sig-tile-delta.is-up { color: #1E6B43; }
.sig-tile-delta.is-down { color: #9B2226; }
.sig-tile-note {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--text-3);
}
.sig-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0.75rem;
}
.sig-panel {
    margin: 0;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
    min-width: 0;
}
.sig-panel-trend { grid-column: 1; }
.sig-panel-conditions { grid-column: 2; }
.sig-panel-drivers,
.sig-panel-cases { grid-column: 1 / -1; }
.sig-panel-head { margin-bottom: 0.6rem; }
.sig-panel-head h3 {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.sig-panel-head p {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-3);
}
/* The combo chart keeps its drawing; its old KPI strip and caption are folded away. */
.sig-panel-trend .market-trend-kpi-strip,
.sig-panel-trend .market-chart-caption,
.sig-panel-trend .market-panel-head p { display: none; }

.sig-cond-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}
.sig-cond { margin: 0; }
.sig-cond figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8125rem;
}
.sig-cond figcaption strong { font-weight: 600; }
.sig-cond figcaption span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.sig-cond svg { width: 100%; height: auto; display: block; overflow: visible; }
.sig-grid-line, .sig-grid { stroke: var(--border); stroke-width: 1; }
.sig-axis { fill: var(--text-3); font-size: 9px; }
.sig-line { fill: none; stroke: var(--text-1); stroke-width: 1.6; }
.sig-dot { fill: var(--surface); stroke: var(--text-1); stroke-width: 1.5; cursor: pointer; }
.sig-dot:hover, .sig-dot:focus-visible { fill: var(--text-1); outline: none; }
.sig-dot.is-selected { fill: var(--accent); stroke: var(--accent); }

.sig-drivers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.sig-drivers li { display: flex; align-items: center; gap: 0.4rem; }
.sig-driver {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 64px;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--text-1);
    cursor: pointer;
}
.sig-driver:hover { border-color: var(--border-strong); }
.sig-driver.is-selected { border-color: var(--text-1); background: #F1EFEC; }
.sig-driver-bar { position: relative; height: 6px; border-radius: 3px; background: #F1EFEC; overflow: hidden; }
.sig-driver-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #1E6B43; }
.sig-driver.is-down .sig-driver-bar i { background: #9B2226; }
.sig-driver-lift { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sig-driver.is-down .sig-driver-lift { color: #9B2226; }
.sig-driver.is-up .sig-driver-lift { color: #1E6B43; }
/* 2026-10-22 (study J B-3 / B-2): BIA 廠商 vs 付費方 and 核定價落點 panels. Both span
   the grid like the drivers panel; the scatter is a log-log SVG, the table under
   it keeps identity readable without colour. */
.sig-panel-bia,
.sig-panel-landing { grid-column: 1 / -1; }
.sig-stat-row { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--text-2); }
.sig-stat-row b { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.sig-scatter { width: 100%; max-width: 560px; height: auto; display: block; overflow: visible; }
.sig-diag { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.sig-axis-label { font-size: 9px; fill: var(--text-2); }
.sig-scatter-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.sig-scatter-dot.is-cde { fill: #1f6f8b; }
.sig-scatter-dot.is-nhia { fill: #d95926; }
.sig-scatter-dot:hover, .sig-scatter-dot:focus-visible { r: 6; stroke: var(--text-1); outline: none; }
.sig-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0.35rem 0 0.5rem; font-size: 0.75rem; color: var(--text-3); }
.sig-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; background: var(--accent); }
.sig-legend i.is-cde { background: #1f6f8b; }
.sig-legend i.is-nhia { background: #d95926; }
.sig-table-details { margin-top: 0.4rem; }
.sig-table-details > summary { cursor: pointer; font-size: 0.8125rem; color: var(--accent); }
.sig-table-wrap { overflow-x: auto; margin-top: 0.4rem; }
.sig-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.sig-table th, .sig-table td { padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; white-space: nowrap; }
.sig-table th { font-weight: 500; color: var(--text-3); font-size: 0.72rem; }
.sig-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.sig-table-methods td:first-child { white-space: normal; }
.sig-src { margin-left: 0.3rem; font-size: 0.68rem; color: var(--text-3); }
.sig-case-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: left; }
.sig-case-link:hover, .sig-case-link:focus-visible { text-decoration: underline; outline: none; }
/* 4d. 廠商與 CDE 的 BIA 差在哪 (bia_gap.mjs, 2026-10-24). Diverging pair validated
   with the dataviz palette check (CVD ΔE 19.9): red = 健保署較高, blue = 較低, grey = 相同. */
.sig-panel-biagap { grid-column: 1 / -1; }
.gap-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0.6rem 1.4rem; align-items: start; }
.gap-two > * { min-width: 0; }
.gap-fig { margin: 0; min-width: 0; }
.gap-fig > figcaption, .gap-subhead { font-size: 0.8125rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.3rem; }
.gap-strip, .gap-scatter { width: 100%; height: auto; display: block; }
.gap-strip { max-width: 560px; }
.gap-scatter { max-width: 420px; }
.gap-strip .sig-axis, .gap-scatter .sig-axis { font-size: 11px; }
.gap-strip .gap-row-label { font-size: 12.5px; fill: var(--text-2); }
.gap-scatter .sig-axis-label { font-size: 11.5px; fill: var(--text-2); }
.gap-dot { stroke: var(--surface); stroke-width: 1.5; cursor: pointer; }
.gap-dot.is-up { fill: #B4262C; }
.gap-dot.is-down { fill: #1F6FA8; }
.gap-dot.is-same { fill: #9AA1A8; }
.gap-dot.is-clamped { fill: var(--surface); stroke-width: 2; }
.gap-dot.is-clamped.is-up { stroke: #B4262C; }
.gap-dot.is-clamped.is-down { stroke: #1F6FA8; }
.gap-dot:hover, .gap-dot:focus-visible { r: 6; stroke: var(--text-1); outline: none; }
.gap-median { stroke: var(--text-1); stroke-width: 2; }
.gap-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.gap-key.is-up, .gap-mini .is-up { background: #B4262C; }
.gap-key.is-down, .gap-mini .is-down { background: #1F6FA8; }
.gap-key.is-same, .gap-mini .is-same { background: #9AA1A8; }
.gap-up { color: #B4262C; }
.gap-down { color: #1F6FA8; }
.gap-same { color: var(--text-3); }
.gap-bars { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; gap: 0.3rem 0.6rem; align-items: center; font-size: 0.78rem; }
.gap-bar-label { color: var(--text-2); white-space: nowrap; }
.gap-bar-value { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gap-mini { display: flex; gap: 2px; height: 9px; }
.gap-mini i { display: block; height: 100%; }
.gap-theme { display: block; height: 9px; }
.gap-theme i { display: block; height: 100%; background: var(--text-2); border-radius: 0 3px 3px 0; }
.gap-why { cursor: help; border-bottom: 1px dotted var(--text-3); }
.sig-footnote { margin: 0.9rem 0 0; font-size: 0.75rem; color: var(--text-3); }

@media (max-width: 1100px) {
    .sig-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sig-grid { grid-template-columns: 1fr; }
    .sig-panel-trend, .sig-panel-conditions { grid-column: 1; }
    .sig-driver { grid-template-columns: minmax(0, 1fr) 90px 56px; }
}
/* The strip container keeps its id for app.js; its old 3-column grid must not squeeze the tiles. */
.sig-board .market-situation-strip { display: block; margin: 0; padding: 0; background: transparent; border: 0; }
/* style.css gives #decisionTrendOverviewPanel a full-width span; here it shares row 1
   with the conditions panel. The chart's own footnote is folded into the (i). */
.sig-grid > #decisionTrendOverviewPanel.sig-panel-trend { grid-column: 1; grid-row: 1; }
.sig-grid > .sig-panel-conditions { grid-column: 2; grid-row: 1; }
.sig-panel-trend .chart-footnote { display: none; }
@media (max-width: 1100px) {
    .sig-grid > #decisionTrendOverviewPanel.sig-panel-trend { grid-column: 1; grid-row: auto; }
    .sig-grid > .sig-panel-conditions { grid-column: 1; grid-row: auto; }
}

/* ── One sidebar for every tab ───────────────────────────────────────────────
   The left panel is the same on every view: search box + 我追蹤的藥品 rail (+ the
   給付規定 chapter index on that page). The 18 detailed filters no longer sit in the
   panel on 全部案件／決策分析; they open as a drawer from the 篩選 button. */
body .sidebar .filter-section,
body.is-context-view .sidebar .filter-section {
    display: none;
}
body.context-filter-open .sidebar .filter-section,
body.is-context-view.context-filter-open .sidebar .filter-section {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 57px;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    margin: 0;
    padding: 0 1rem 1.5rem;
    overflow-y: auto;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 32px rgba(28, 31, 35, 0.12);
    z-index: 45;
}
.filter-drawer-head {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
    margin: 0 -1rem 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.9375rem;
}
body.context-filter-open .filter-drawer-head { display: flex; }
.filter-drawer-close {
    width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent;
    font-size: 1.3rem; line-height: 1; color: var(--text-2); cursor: pointer;
}
.filter-drawer-close:hover { background: var(--surface-2); color: var(--text-1); }
.filter-drawer-backdrop {
    position: fixed; inset: 57px 0 0 0; z-index: 44; background: rgba(28, 31, 35, 0.18);
}
.filter-drawer-backdrop[hidden] { display: none; }

.topbar-filter-btn {
    display: inline-flex; align-items: center; gap: 0.4rem; height: 36px; padding: 0 0.7rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: var(--text-1); font: inherit; font-size: 0.8125rem; cursor: pointer; white-space: nowrap;
}
.topbar-filter-btn:hover { border-color: var(--border-strong); }
.topbar-filter-btn[aria-expanded="true"] { background: #F1EFEC; border-color: var(--text-1); }
.topbar-filter-btn[hidden] { display: none; }
.topbar-filter-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent);
    color: #fff; font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.topbar-filter-count[hidden] { display: none; }
/* The rail's own link keeps working as a second way in; it should not look like a red toggle. */
body.is-context-view.context-filter-open .sidebar-filter-edit { background: var(--surface); border-color: var(--border); color: var(--text-1); }
/* 給付規定: chapter index above the rail, same panel otherwise. */
.sidebar-reimbursement-chapter-index { margin-bottom: 0.5rem; }
@media (max-width: 900px) {
    .topbar-filter-btn span { display: none; }
    .topbar-filter-btn { padding: 0 0.5rem; }
}


/* ── 2026-10 batch 2: 價格分析 — one timeline per product ─────────────────── */
:root {
    --pt-lane-0: #c8102e;
    --pt-lane-1: #1f5fa8;
    --pt-lane-2: #2f7f6f;
    --pt-lane-3: #b8730d;
    --pt-lane-4: #6f63b8;
    --pt-lane-5: #4d4d4d;
    --pt-lane-none: #8a8a8a;
}
#knowledgeGraphView .knowledge-graph-header h2 { font-size: 1.25rem; }
#knowledgeGraphView .da-guide-card[hidden] { display: none; }
.pf-head { align-items: baseline; margin-bottom: 0.25rem; }
.pf-title { font-size: 1.25rem; font-weight: 600; }
.pf-timeline-card {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.pf-timeline-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.pf-timeline-head .pf-sku-head { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.pf-timeline-sub { font-size: var(--fs-xs); color: var(--text-2); }
.pf-timeline-scroll { overflow-x: auto; margin-top: 0.5rem; }
.pf-timeline-svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: var(--font-ui); }
.pf-tl-grid { stroke: var(--border); stroke-width: 1; }
.pf-tl-axis { stroke: var(--text-3); stroke-width: 1; }
.pf-tl-xtick { stroke: var(--text-3); stroke-width: 1; }
.pf-tl-ytick, .pf-tl-xlabel, .pf-tl-unit { fill: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.pf-tl-marker-line { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.pf-tl-marker-label { fill: var(--text-2); font-size: 11px; font-weight: 600; }
.pf-tl-marker { cursor: pointer; }
.pf-tl-marker:hover .pf-tl-marker-line, .pf-tl-marker:focus-visible .pf-tl-marker-line { stroke: var(--accent); stroke-dasharray: none; stroke-width: 1.5; }
.pf-tl-marker:hover .pf-tl-marker-label, .pf-tl-marker:focus-visible .pf-tl-marker-label { fill: var(--accent); }
.pf-tl-marker:focus-visible, .pf-tl-point:focus-visible { outline: none; }
.pf-tl-point { cursor: pointer; }
.pf-tl-point circle { stroke: var(--surface); stroke-width: 1.5; }
.pf-tl-point:hover circle, .pf-tl-point:focus-visible circle { stroke: var(--text-1); r: 7; }
.pf-tl-value { fill: var(--text-1); font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-tl-value-pbrs { fill: var(--text-2); }
.pf-tl-kind-class2 circle { opacity: 0.85; }
.pf-tl-pbrs { stroke: var(--surface); stroke-width: 1.2; }
.pf-tl-lane-0 circle, .pf-tl-pbrs.pf-tl-lane-0, .pf-tl-lane-0 .pf-tl-swatch { fill: var(--pt-lane-0); background: var(--pt-lane-0); }
.pf-tl-lane-1 circle, .pf-tl-pbrs.pf-tl-lane-1, .pf-tl-lane-1 .pf-tl-swatch { fill: var(--pt-lane-1); background: var(--pt-lane-1); }
.pf-tl-lane-2 circle, .pf-tl-pbrs.pf-tl-lane-2, .pf-tl-lane-2 .pf-tl-swatch { fill: var(--pt-lane-2); background: var(--pt-lane-2); }
.pf-tl-lane-3 circle, .pf-tl-pbrs.pf-tl-lane-3, .pf-tl-lane-3 .pf-tl-swatch { fill: var(--pt-lane-3); background: var(--pt-lane-3); }
.pf-tl-lane-4 circle, .pf-tl-pbrs.pf-tl-lane-4, .pf-tl-lane-4 .pf-tl-swatch { fill: var(--pt-lane-4); background: var(--pt-lane-4); }
.pf-tl-lane-5 circle, .pf-tl-pbrs.pf-tl-lane-5, .pf-tl-lane-5 .pf-tl-swatch { fill: var(--pt-lane-5); background: var(--pt-lane-5); }
.pf-tl-pbrs.pf-tl-lane-none { fill: var(--pt-lane-none); }
.pf-tl-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--text-2); }
.pf-tl-legend-lane { display: inline-flex; align-items: center; gap: 0.4rem; }
.pf-tl-legend-lane b { color: var(--text-1); font-weight: 600; }
.pf-tl-legend-lane code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-min); color: var(--text-3); letter-spacing: 0; white-space: nowrap; }
.pf-tl-legend-latest { white-space: nowrap; }
.pf-tl-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pf-tl-legend-glyph { display: inline-flex; align-items: center; gap: 0.4rem; }
.pf-tl-glyph-marker { display: inline-block; width: 0; height: 12px; border-left: 1px dashed var(--text-3); }
.pf-tl-glyph-pbrs { display: inline-block; width: 8px; height: 8px; background: var(--pt-lane-none); transform: rotate(45deg); }
.pf-tl-glyph-class2 { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.pf-timeline-empty { padding: 1rem; color: var(--text-2); font-size: var(--fs-sm); }
.pf-stack-head { margin: 1.25rem 0 0.5rem; }
.pf-sku-card { box-shadow: none; }
.pf-sku-card-head { padding: 0.65rem 1rem; }
.pf-generic-card > summary { cursor: pointer; padding: 0.65rem 1rem; }
.pf-generic-card[open] > summary { border-bottom: 1px solid var(--border); }
.pf-data-quality { margin-top: 0.5rem; }

/* ── 2026-10 batch 2: 決策歷程 — meetings as main rows, one (i) per row ───── */
.dh-meta { align-items: center; margin-bottom: 1rem; }
.dh-meta .dh-tip { margin-left: 0.2rem; }
.dh-tip { vertical-align: middle; }
.dh-entry {
    display: grid;
    grid-template-columns: 6.5rem 8.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    align-items: start;
}
.dh-entry + .dh-entry { border-top: 1px solid var(--border); }
.dh-entry-head {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-2);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.dh-entry-head + .dh-entry { border-top: 0; }
.dh-kind {
    display: inline-block;
    justify-self: start;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: var(--fs-min);
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.dh-kind-meeting { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-muted); }
.dh-entry-body { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-sm); min-width: 0; }
.dh-entry-body .dh-case-link { font-size: var(--fs-md); }
.dh-doc { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: baseline; }
.dh-doc-no { font-weight: 600; font-size: var(--fs-xs); }
.dh-folded { font-size: var(--fs-xs); color: var(--text-2); }
.dh-folded summary { cursor: pointer; }
.dh-folded .dh-doc { margin-top: 0.3rem; padding-left: 0.5rem; border-left: 2px solid var(--border); }
.dh-not-shown summary { cursor: pointer; font-weight: 600; color: var(--text-1); }
.dh-not-shown ul { margin-top: 0.4rem; }
@media (max-width: 767px) {
    .dh-entry { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
    .dh-entry-head { display: none; }
}

.pf-tl-a10-tick { stroke: var(--text-2); stroke-width: 2; }
.pf-tl-a10-label { fill: var(--text-2); font-size: 10px; font-variant-numeric: tabular-nums; }
.pf-tl-cmp { fill: var(--text-1); font-size: 11px; font-weight: 600; }
.pf-tl-glyph-a10 { display: inline-block; width: 12px; height: 0; border-top: 2px solid var(--text-2); }

.pf-tl-step { fill: none; stroke-width: 2; stroke-linejoin: miter; stroke-linecap: square; opacity: 0.9; }
.pf-tl-step.pf-tl-lane-0 { stroke: var(--pt-lane-0); }
.pf-tl-step.pf-tl-lane-1 { stroke: var(--pt-lane-1); }
.pf-tl-step.pf-tl-lane-2 { stroke: var(--pt-lane-2); }
.pf-tl-step.pf-tl-lane-3 { stroke: var(--pt-lane-3); }
.pf-tl-step.pf-tl-lane-4 { stroke: var(--pt-lane-4); }
.pf-tl-step.pf-tl-lane-5 { stroke: var(--pt-lane-5); }
.pf-tl-delta { fill: var(--text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.pf-tl-delta.is-cut { fill: var(--text-2); }

/* ── 2026-10-18: 會議與公告 — newest-first spine timeline (價格分析 + drug-history route) */
.pf-history { margin-top: 0.75rem; padding: 0.9rem 1rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pf-history .pf-timeline-head { margin-bottom: 0.25rem; }
.dh-spine-head { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--text-2); margin: 0.25rem 0 0.5rem; }
.dh-spine { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
.dh-spine::before { content: ""; position: absolute; left: 0.3rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--border); }
.dh-spine-item { position: relative; }
.dh-spine-item::before { content: ""; position: absolute; left: -1.1rem; top: 1.05rem; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text-3); transform: translateX(0.3rem) translateX(-50%) translateX(1px); }
.dh-spine-meeting::before { border-color: var(--accent); background: var(--accent); }
.dh-spine .dh-entry { grid-template-columns: 6.5rem 8.5rem minmax(0, 1fr); padding: 0.6rem 0.6rem; }
.dh-spine .dh-entry + .dh-entry { border-top: 0; }
.dh-spine-item + .dh-spine-item .dh-entry { border-top: 1px solid var(--border); }
.dh-timeline { display: none; }
.pf-case-list > summary { cursor: pointer; }
.pf-case-list[open] > summary { margin-bottom: 0.5rem; }
@media (max-width: 767px) {
    .dh-spine .dh-entry { grid-template-columns: minmax(0, 1fr); }
}

/* ── 2026-10-18: 各品項現況 — one row per SKU, opens to its events ─────────── */
.pf-sku-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(7rem, 1fr) minmax(9rem, 1.3fr) minmax(6rem, 0.8fr) 5.5rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0.9rem;
    font-size: var(--fs-sm);
}
.pf-sku-row-head { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); padding: 0.35rem 0.9rem; border-bottom: 1px solid var(--border); }
.pf-sku-card { margin-top: 0; border-radius: 0; border-top: 0; }
.pf-table-stack { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.pf-table-stack .pf-sku-card:first-child { border-top: 0; }
.pf-table-stack .pf-sku-card + .pf-sku-card { border-top: 1px solid var(--border); }
.pf-sku-details > summary.pf-sku-row { list-style: none; cursor: pointer; }
.pf-sku-details > summary.pf-sku-row::-webkit-details-marker { display: none; }
.pf-sku-details[open] > summary.pf-sku-row { background: var(--surface-2); }
.pf-sku-row .pf-sku-identity { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pf-sku-row .pf-sku-spec { font-weight: 600; color: var(--text-1); }
.pf-sku-row .pf-sku-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-2); }
.pf-sku-row .pf-sku-latest, .pf-sku-row .pf-sku-a10, .pf-sku-row .pf-sku-pct { display: flex; flex-direction: column; gap: 0.1rem; font-variant-numeric: tabular-nums; }
.pf-sku-row .pf-sku-latest strong, .pf-sku-row .pf-sku-pct strong { font-size: var(--fs-md); color: var(--text-1); font-weight: 600; }
.pf-sku-row small { font-size: var(--fs-xs); color: var(--text-3); }
.pf-sku-a10 span { font-size: var(--fs-sm); color: var(--text-1); }
.pf-sku-none { color: var(--text-3); }
.pf-sku-count { display: inline-flex; align-items: center; gap: 0.35rem; justify-self: end; color: var(--text-2); font-size: var(--fs-xs); white-space: nowrap; }
.pf-sku-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform 0.15s; }
.pf-sku-details[open] .pf-sku-chevron { transform: rotate(-135deg); }
.pf-sku-details .pf-sku-table-scroll { padding: 0 0.9rem 0.75rem; }
@media (max-width: 767px) {
    .pf-sku-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pf-sku-row-head { display: none; }
    .pf-sku-row .pf-sku-a10, .pf-sku-row .pf-sku-pct { grid-column: 1 / -1; flex-direction: row; gap: 0.5rem; }
}

/* ── 2026-10-18: SKU tabs + chart hover tip ─────────────────────────────────── */
.pf-sku-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.4rem; margin-bottom: 0.4rem; scrollbar-width: thin; }
.pf-sku-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.pf-sku-tab strong { font-weight: 600; color: var(--text-1); }
.pf-sku-tab code { font-size: var(--fs-min); color: var(--text-3); }
.pf-sku-tab[aria-selected="true"] { border-color: var(--text-1); background: var(--text-1); color: var(--surface); }
.pf-sku-tab[aria-selected="true"] strong, .pf-sku-tab[aria-selected="true"] code, .pf-sku-tab[aria-selected="true"] .pf-sku-order { color: var(--surface); background: transparent; }
.pf-sku-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pf-sku-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.pf-sku-panel[hidden] { display: none; }
.pf-sku-facts { border-bottom: 1px solid var(--border); background: var(--surface-2); grid-template-columns: minmax(0, 2fr) minmax(7rem, 1fr) minmax(9rem, 1.3fr) minmax(6rem, 0.8fr) 5.5rem; }
.pf-sku-facts .pf-sku-count { flex-direction: column; align-items: flex-start; justify-self: start; }
.pf-sku-facts .pf-sku-count strong { font-size: var(--fs-md); color: var(--text-1); }
.pf-sku-panel .pf-sku-table-scroll { padding: 0 0.9rem 0.75rem; }
.pf-timeline-scroll { position: relative; }
.pf-tl-tip { position: absolute; max-width: 360px; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); background: var(--text-1); color: var(--surface); font-size: var(--fs-xs); line-height: 1.45; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 3; }
.pf-tl-tip[hidden] { display: none; }

/* ── 2026-10-18: PBRS 核定價 rows inside each item's table ─────────────────── */
.pf-event-pbrs { background: color-mix(in srgb, var(--pt-lane-none) 14%, var(--surface)); color: var(--text-1); }
.pf-pbrs-row { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.pf-row-case { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.pf-unplaced-pbrs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; margin: 0 0 0.5rem; font-size: var(--fs-xs); color: var(--text-2); }
.pf-unplaced-pbrs strong { color: var(--text-1); font-weight: 600; }
.pf-sku-count small + small { display: block; }