/* 治療藥品地圖 (drug landscape). Uses only the :root tokens in style.css.
   Timeline marks are one colour: the lane says what a mark is, and the shape
   repeats the tier lanes (circle FDA, square TFDA, diamond 健保). Filled =
   sourced, hollow = to confirm / estimated, grey = a related molecule.
   Small grey text uses --text-4 (5.49:1 on #fff, 5.25:1 on --surface-2):
   --text-3 is 4.30:1 / 4.11:1, below AA for text this size. */

#drugLandscapeView.app-view-active {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Same topbar layout every other explore view gets: the sub-toggle takes its
   own full-width row. Without it a short status chip stays on the first row
   and squeezes the strip (measured 10px wide at 1280px). */
body[data-active-view="drug-landscape"] .topbar { flex-wrap: wrap; }
body[data-active-view="drug-landscape"] .topbar-main { flex-basis: 100%; }

.drug-landscape {
    --dl-context: #868d94; /* 3.36:1 on #fff: a hollow grey ring must clear 3:1 */
    --dl-grid: #e3e5e1;
    padding: var(--panel-padding);
    max-width: var(--layout-content-max);
    font-family: var(--font-ui);
    color: var(--text-1);
}

.dl-intro h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.dl-intro p { margin: 0 0 0.35rem; color: var(--text-2); line-height: 1.6; font-size: var(--fs-md); }
.dl-intro .dl-scope { font-size: var(--fs-xs); color: var(--text-4); }

.dl-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.6rem 0; font-size: var(--fs-xs); color: var(--text-2); }
.dl-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ── marks: shape carries the tier, colour repeats it ───────── */
.dl-mark, .dl-point {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    background: var(--dl-mark-color, var(--text-2));
    box-shadow: 0 0 0 2px var(--surface);
    border: 2px solid var(--dl-mark-color, var(--text-2));
    box-sizing: border-box;
}
.dl-mark.is-static { position: relative; top: auto; transform: none; display: inline-block; }
.dl-mark-circle { border-radius: 50%; }
.dl-mark-square { border-radius: 2px; }
.dl-mark-diamond { transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px; }
.dl-mark-diamond.is-static { transform: rotate(45deg); }
.dl-mark.is-hollow, .dl-point.is-hollow { background: var(--surface); }
.dl-mark.is-static { --dl-mark-color: var(--accent); }
.dl-mark.is-static.is-context { --dl-mark-color: var(--dl-context); }

/* ── table ───────────────────────────────────────────────────── */
.dl-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dl-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 680px; }
.dl-table caption { caption-side: top; text-align: left; padding: 0.55rem 0.75rem; font-size: var(--fs-xs); color: var(--text-4); line-height: 1.6; }
.dl-table th, .dl-table td { padding: 0.5rem 0.6rem; border-top: 1px solid var(--dl-grid); vertical-align: top; text-align: left; }
.dl-table thead th { font-size: var(--fs-xs); color: var(--text-4); font-weight: 600; background: var(--surface-2); }
.dl-th-scope { display: block; font-weight: 400; }
.dl-table tbody th { font-weight: 600; min-width: 11rem; }
/* The name column stays put when a phone scrolls the table sideways, so a
   date can always be matched to its product. */
.dl-table tbody th, .dl-table thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--dl-grid);
}
.dl-table thead th:first-child { background: var(--surface-2); }
.dl-molecule-row.is-selected, .dl-molecule-row.is-selected th { background: var(--surface-2); }
.dl-product-row, .dl-product-row th { background: var(--surface-2); }
.dl-product-row th { font-weight: 400; padding-left: 1.8rem; }
.dl-molecule-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--text-1); cursor: pointer;
    min-height: 24px;
}
.dl-molecule-btn:hover { color: var(--accent-strong); }
.dl-molecule-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dl-caret { color: var(--text-4); width: 0.9rem; }
.dl-sections, .dl-detail, .dl-zh { display: block; font-size: var(--fs-min); color: var(--text-4); font-weight: 400; }
.dl-zh { display: inline; }
.dl-cell { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.35rem; }
.dl-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-detail { flex-basis: 100%; }
.dl-chip {
    font-size: var(--fs-min); padding: 0 0.4rem; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap;
}
.dl-chip-to_confirm { border-color: var(--orange); }
.dl-role {
    display: inline-block; margin-left: 0.35rem; font-size: var(--fs-min); font-weight: 400;
    padding: 0 0.4rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2);
}
.dl-cite { position: relative; margin-left: 0.1rem; font-size: var(--fs-min); color: var(--accent-strong); text-decoration: none; }
/* A 24px hit area centred on the link, whatever its line box height; same look. */
.dl-cite::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: 24px; transform: translate(-50%, -50%); }
.dl-cite:hover { text-decoration: underline; }
/* Two citations side by side (TFDA: the licence, then its first-issue date) would share tap area. */
.dl-cite + .dl-cite { margin-left: 0.65rem; }
.dl-gaps { display: block; font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── detail panels ───────────────────────────────────────────── */
.dl-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.dl-relations, .dl-products, .dl-timeline, .dl-sources {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem;
}
.dl-relations h3, .dl-products h3, .dl-timeline h3, .dl-sources h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.dl-rel-group + .dl-rel-group { margin-top: 0.7rem; }
.dl-rel-group h4, .dl-products h4 { margin: 0 0 0.3rem; font-size: var(--fs-xs); color: var(--text-4); letter-spacing: var(--tracking-caps); }
.dl-rel-group > ul, .dl-rel-us > ul { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); line-height: max(1.6em, 24px); }
.dl-rel-type { margin-left: 0.4rem; color: var(--text-2); font-size: var(--fs-xs); }
/* One line per stating document: its own caveat, words, place and citation. */
.dl-evidence { margin: 0.1rem 0 0.35rem; padding-left: 0.9rem; list-style: '– '; font-size: var(--fs-xs); color: var(--text-2); line-height: max(1.6em, 24px); }
.dl-rel-note {
    display: inline-block; margin-right: 0.35rem; padding: 0 0.35rem; border-radius: 4px;
    background: var(--surface-2); border: 1px solid var(--orange); color: var(--text-1);
}
.dl-rel-date, .dl-rel-where { margin-right: 0.35rem; color: var(--text-4); }
.dl-evidence q, .dl-rel-record { color: var(--text-2); margin-right: 0.35rem; }
.dl-rel-candidate li { color: var(--text-2); }
.dl-rel-us { margin-top: 0.4rem; font-size: var(--fs-xs); color: var(--text-2); }
.dl-rel-us summary { cursor: pointer; min-height: 24px; }
.dl-rel-us > ul { margin-top: 0.3rem; }
.dl-clauses { margin: 0.7rem 0 0; }
.dl-clauses ul { margin: 0; padding-left: 1.1rem; font-size: var(--fs-xs); color: var(--text-2); line-height: max(1.6em, 24px); }

.dl-product + .dl-product { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--dl-grid); }
.dl-products .dl-product-head { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); letter-spacing: normal; }
.dl-products h5 { margin: 0.35rem 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-4); }
.dl-sublist { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: var(--fs-xs); color: var(--text-2); line-height: max(1.6em, 24px); }
.dl-sublist .dl-date { color: var(--text-1); margin-right: 0.35rem; }
.dl-area-flag {
    display: inline-block; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 4px;
    border: 1px solid var(--text-4); color: var(--text-1); font-size: var(--fs-min);
}

.dl-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.dl-toggle { font-size: var(--fs-xs); color: var(--text-2); display: inline-flex; gap: 0.3rem; align-items: center; min-height: 24px; }
.dl-link { font-size: var(--fs-xs); color: var(--accent-strong); display: inline-flex; align-items: center; min-height: 24px; }
.dl-list summary { cursor: pointer; min-height: 24px; }
.dl-note { font-size: var(--fs-xs); color: var(--text-4); margin: 0.3rem 0; }
.dl-chart { margin-top: 0.4rem; padding-left: 7.5rem; position: relative; }
.dl-axis { position: relative; height: 1.1rem; margin: 0.3rem 0 0.2rem; }
.dl-tick {
    position: absolute; top: 0; transform: translateX(-50%);
    font-size: var(--fs-min); color: var(--text-4); font-weight: 400; font-variant-numeric: tabular-nums;
}
.dl-lane { position: relative; display: flex; align-items: center; min-height: 28px; border-top: 1px solid var(--dl-grid); }
/* Wraps instead of cutting: '推算' is the word that says a lane is estimated. */
.dl-lane-label {
    position: absolute; left: -7.5rem; width: 7rem; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.2;
}
.dl-lane-track { position: relative; flex: 1; height: 28px; }
.dl-point { --dl-mark-color: var(--accent); padding: 0; cursor: default; }
.dl-point.is-context { --dl-mark-color: var(--dl-context); width: 8px; height: 8px; }
button.dl-point { cursor: pointer; }
/* 24px hit area centred on the mark. An inset on ::after would be measured from
   the padding box, which the 2px border shrinks to 6px (22px hit area). */
.dl-point::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.dl-point:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.dl-point:hover { filter: brightness(1.1); }
/* Several items on one date: an outer ring in the mark's own colour. It adds
   under 2px around the mark, so it cannot cover a neighbouring mark the way a
   number beside it did. */
.dl-point.is-multi, .dl-mark.is-multi { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--dl-mark-color, var(--text-2)); }
.dl-list { margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--text-2); }
/* 24px lines, so the source links on neighbouring lines do not share a tap area. */
.dl-list ol { margin: 0.3rem 0 0; padding-left: 1.2rem; line-height: max(1.7em, 24px); }
.dl-list-date { font-variant-numeric: tabular-nums; margin-right: 0.4rem; color: var(--text-4); }
/* The full-size equivalent of a timeline case mark, which can sit closer than 24px to its neighbours. */
.dl-list-case {
    margin-left: 0.4rem; min-height: 24px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface); color: var(--accent-strong); font: inherit; cursor: pointer;
}
.dl-list-case:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dl-list-history { margin-left: 0.5rem; }

.dl-sources { margin-top: 1rem; }
.dl-sources ol { margin: 0; padding-left: 1.2rem; font-size: var(--fs-xs); line-height: 1.7; color: var(--text-2); }
.dl-sources li:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dl-sources li span { display: block; color: var(--text-4); }
.dl-sources a { color: var(--accent-strong); }
.dl-hint, .dl-empty, .dl-error { color: var(--text-2); font-size: var(--fs-sm); margin: 0.8rem 0; }

@media (max-width: 600px) {
    .drug-landscape { padding: 0.75rem; }
    .dl-chart { padding-left: 4.6rem; }
    .dl-lane-label { left: -4.6rem; width: 4.3rem; font-size: var(--fs-min); }
    /* A fixed name column: at 320px an automatic one took 58-67% of the table
       and no data cell could be read whole beside it. Narrower padding keeps
       the longest molecule names (risankizumab, ustekinumab) on one line. */
    .dl-table tbody th, .dl-table thead th:first-child {
        width: 7.5rem; min-width: 7.5rem; max-width: 7.5rem; padding-left: 0.35rem; padding-right: 0.35rem; overflow-wrap: break-word;
    }
    .dl-molecule-btn { white-space: nowrap; gap: 0.15rem; }
    .dl-table .dl-product-row th { padding-left: 0.8rem; }
}
/* At phone width the year labels would run together: keep every other one. */
@media (max-width: 420px) {
    .dl-chart .dl-tick:nth-child(even) { display: none; }
}

/* ── 治療地圖: treatment pathway + how it changed (treatment_map.mjs) ───────── */
.tm-intro h2 { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 600; }
.tm-intro .dl-scope { margin: 0 0 1rem; color: var(--text-2); font-size: 0.875rem; }

.tm-pathway,
.tm-evolution {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.tm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.tm-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.tm-sub { margin: 0.2rem 0 0; color: var(--text-3); font-size: 0.8125rem; max-width: 62rem; }
.tm-toggles { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tm-seg-group { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.tm-seg { border: 0; background: transparent; padding: 0.3rem 0.8rem; border-radius: 6px; font: inherit; font-size: 0.8125rem; color: var(--text-2); cursor: pointer; }
.tm-seg.is-active { background: var(--text-1); color: #fff; font-weight: 600; }

/* Area picker: one button per area the index lists; the current one reads like the active toggle. */
.dl-areas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
.dl-area { display: inline-flex; align-items: baseline; gap: 0.4rem; border: 1px solid var(--border); background: var(--surface-2); padding: 0.3rem 0.8rem; border-radius: 999px; font: inherit; font-size: 0.8125rem; color: var(--text-2); cursor: pointer; }
.dl-area.is-active { background: var(--text-1); border-color: var(--text-1); color: #fff; font-weight: 600; }
.dl-area-group { font-size: 0.6875rem; opacity: 0.75; }
.dl-area:focus-visible, .tm-rule-link:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
/* A 給付規定 section number links to that section on the 給付規定 page. */
.tm-rule-link { color: var(--accent-strong); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.tm-rule-link:hover { text-decoration-style: solid; }

/* Steps read left to right with an arrow between them. */
.tm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2rem; }
.tm-step { position: relative; min-width: 0; padding: 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.tm-step + .tm-step::before {
    content: "";
    position: absolute; left: -1.55rem; top: 1.35rem;
    width: 1.1rem; height: 2px; background: var(--border-strong);
}
.tm-step + .tm-step::after {
    content: "";
    position: absolute; left: -0.6rem; top: calc(1.35rem - 4px);
    border: 5px solid transparent; border-left-color: var(--border-strong); border-right: 0;
}
.tm-step-conventional { background: var(--surface); }
.tm-step-head { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.6rem; }
.tm-step-no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--text-1); color: #fff; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.tm-step-head h4 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.tm-step-cond { margin: 0.15rem 0 0; color: var(--text-2); font-size: 0.8125rem; line-height: 1.5; }
.tm-step-empty { margin: 0; color: var(--text-3); font-size: 0.8125rem; }

.tm-moa { margin-top: 0.6rem; }
.tm-moa-label { font-size: 0.75rem; color: var(--text-3); margin-bottom: 0.3rem; }
.tm-drugs { display: flex; flex-direction: column; gap: 0.35rem; }
.tm-drug {
    display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; row-gap: 0.1rem; align-items: baseline;
    width: 100%; text-align: left; padding: 0.45rem 0.6rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    font: inherit; color: var(--text-1); cursor: pointer;
}
.tm-drug:hover { border-color: var(--border-strong); }
.tm-drug-brand { font-weight: 600; font-size: 0.875rem; }
.tm-drug-ing { color: var(--text-3); font-size: 0.75rem; }
.tm-drug-meta { grid-column: 1 / -1; color: var(--text-2); font-size: 0.75rem; }
.tm-drug-note { grid-column: 1 / -1; color: #8A5A0B; font-size: 0.75rem; }
.tm-drug.is-tracked { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

.tm-quote { margin-top: 0.6rem; font-size: 0.8125rem; }
.tm-quote summary { cursor: pointer; color: var(--text-2); }
.tm-quote blockquote { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; border-left: 2px solid var(--border-strong); color: var(--text-2); line-height: 1.6; }
.tm-rules { margin-top: 0.9rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--surface-2); font-size: 0.8125rem; color: var(--text-2); }
.tm-rules strong { display: block; color: var(--text-1); font-weight: 600; margin-bottom: 0.2rem; }
.tm-rules p { margin: 0.15rem 0; }
.tm-footnote { margin: 0.75rem 0 0; color: var(--text-3); font-size: 0.75rem; }

/* How it changed: one row per ingredient on a shared year axis. */
.tm-ev-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.6rem; font-size: 0.75rem; color: var(--text-2); }
.tm-ev-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.tm-ev-legend .tm-ev-mark.tm-ev-mark { position: relative; top: auto; transform: none; }
.tm-ev-legend .tm-ev-mark.tm-ev-mark.is-nhia { transform: rotate(45deg); }
.tm-ev-legend .tm-ev-rev { position: static; display: inline-block; width: 2px; height: 12px; }
.tm-ev-chart { position: relative; }
.tm-ev-axis, .tm-ev-row, .tm-ev-revs { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; }
.tm-ev-track { position: relative; height: 28px; }
.tm-ev-ticks { height: 20px; border-bottom: 1px solid var(--border); }
.tm-ev-ticks span { position: absolute; transform: translateX(-50%); font-size: 0.75rem; color: var(--text-3); }
.tm-ev-body { position: relative; }
.tm-ev-revs { position: absolute; inset: 0; pointer-events: none; }
.tm-ev-revs .tm-ev-track { height: 100%; }
.tm-ev-rev { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(28, 31, 35, 0.12); }
.tm-ev-group { margin: 0.6rem 0 0.1rem; font-size: 0.75rem; color: var(--text-3); }
.tm-ev-row { border-bottom: 1px solid rgba(28, 31, 35, 0.05); }
.tm-ev-name { display: flex; flex-direction: column; align-items: flex-start; border: 0; background: transparent; padding: 0.2rem 0; text-align: left; font: inherit; cursor: pointer; color: var(--text-1); }
.tm-ev-name b { font-size: 0.8125rem; font-weight: 600; }
.tm-ev-name span { font-size: 0.75rem; color: var(--text-3); }
.tm-ev-name:hover b { text-decoration: underline; }
.tm-ev-span { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); background: var(--border-strong); }
.tm-ev-mark { position: absolute; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); display: inline-block; box-sizing: border-box; }
.tm-ev-mark.is-fda { border-radius: 50%; border: 2px solid #5F6670; background: var(--surface); }
.tm-ev-mark.is-tfda { border: 2px solid #5F6670; background: var(--surface); }
.tm-ev-mark.is-nhia { background: var(--accent); transform: translate(-50%, -50%) rotate(45deg); }
.tm-ev-mark.is-hta { width: 6px; height: 6px; border-radius: 50%; background: #2E6DB4; top: 22%; }
.tm-ev-mark.is-follower { width: 7px; height: 7px; border-radius: 50%; background: #0F766E; top: 78%; }
.tm-ev-name-pad { display: block; }
.tm-ev-mark.is-multi { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; color: #0F766E; }
.tm-ev-mark.is-hta.is-multi { color: #2E6DB4; }

.tm-detail { margin: 0 0 1rem; padding: 0.75rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tm-detail > summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; }

@media (max-width: 1100px) {
    .tm-steps { grid-auto-flow: row; gap: 1.6rem; }
    .tm-step + .tm-step::before { left: 1.35rem; top: -1.25rem; width: 2px; height: 0.9rem; }
    .tm-step + .tm-step::after { left: calc(1.35rem - 4px); top: -0.45rem; border: 5px solid transparent; border-top-color: var(--border-strong); border-bottom: 0; }
}
@media (max-width: 640px) {
    .tm-ev-axis, .tm-ev-row, .tm-ev-revs { grid-template-columns: 6.5rem minmax(0, 1fr); }
}