/* 市場准入流程學習頁 (learning page). Uses only the :root tokens in style.css
   and refresh.css: neutral surfaces, hairline borders, Takeda red as accent only. */

/* .main-content is 100vh with overflow hidden, so every view scrolls itself. */
#accessPathwayView.app-view-active {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Filters for diseases, products and case types do not apply to a learning
   page, so it gets the full width the way the private workspace does. */
body[data-active-view="learn"] .sidebar,
body[data-active-view="learn"] #sidebarToggle { display: none; }
body[data-active-view="learn"] .main-content { margin-left: 0; }

.access-pathway {
    /* One quiet colour per actor, used only as a small dot or a thin edge. */
    --ap-tfda: #2F8F83;
    --ap-company: #C08A2E;
    --ap-cde: #7A68B8;
    --ap-nhia: #5B6B82;
    --ap-hover: #F1EFEC;
    padding: var(--panel-padding);
    max-width: 68rem;
    margin: 0 auto;
    font-family: var(--font-ui);
    color: var(--text-1);
}

.ap-intro { margin-bottom: 1.25rem; }
.ap-intro h2 { margin: 0 0 0.4rem; font-size: 1.5rem; font-weight: 600; font-family: var(--font-display); }
.ap-intro p { margin: 0 0 0.25rem; color: var(--text-2); line-height: 1.65; font-size: var(--fs-md); }
.ap-intro .ap-intro-note { font-size: var(--fs-xs); color: var(--text-3); }

/* ── Stepper: six steps across, one shown at a time ───────────── */
.ap-stepper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.25rem;
}

.ap-steps {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}
.ap-step { position: relative; display: flex; }
/* The line that joins one step to the next. */
.ap-step + .ap-step::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    right: calc(50% + 1.1rem);
    left: calc(-50% + 1.1rem);
    height: 1px;
    background: var(--border-strong);
}
.ap-step.is-done + .ap-step::before { background: var(--text-3); }
.ap-step button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0 0.15rem 0.35rem;
    font: inherit;
    color: var(--text-3);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.ap-step button:hover { color: var(--text-1); }
.ap-step button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ap-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ap-step-label { font-size: var(--fs-sm); line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.ap-step.is-done .ap-step-no { border-color: var(--text-3); color: var(--text-2); }
.ap-step.is-current button { color: var(--text-1); }
.ap-step.is-current .ap-step-no { border-color: var(--accent); background: var(--accent); color: #fff; }
.ap-step.is-current .ap-step-label { font-weight: 600; }

.ap-step-panel { scroll-margin-top: 0.75rem; }
.ap-step-count { margin: 0; font-size: var(--fs-xs); color: var(--text-3); }
.ap-step-headline {
    margin: 0.3rem 0 0.6rem;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 600;
    font-family: var(--font-display);
}
.ap-step-time {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    margin: 0 0 0.9rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-2);
}
.ap-step-time-label {
    flex: none;
    font-size: var(--fs-min);
    font-weight: 600;
    color: var(--text-1);
}
.ap-step-sub {
    margin: 1rem 0 0.45rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-3);
}

.ap-actor-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.6rem;
}
.ap-actor-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.ap-actor-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; }
.ap-actor-card header strong { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); }
.ap-actor-card header strong::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ap-lane, var(--border-strong));
}
.ap-actor-card header span { font-size: var(--fs-min); color: var(--text-3); }
.ap-actor-card p { flex: 1; margin: 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-1); }
.ap-actor-card.is-idle p { color: var(--text-3); }
.ap-more {
    align-self: flex-start;
    padding: 0.15rem 0;
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--text-2);
    background: none;
    border: 0;
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
    cursor: pointer;
}
.ap-more:hover { color: var(--text-1); text-decoration-color: currentColor; }
.ap-more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ap-step-nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.1rem; }
.ap-step-move {
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.ap-step-move:hover { background: var(--ap-hover); }
.ap-step-move:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ap-step-move.is-next { border-color: var(--text-1); font-weight: 600; }

/* Glossary words: a dotted underline, the meaning on hover, a link to the list. */
.ap-gloss {
    color: inherit;
    text-decoration: underline dotted var(--text-3);
    text-underline-offset: 4px;
    cursor: help;
}
.ap-gloss:hover, .ap-gloss:focus-visible { text-decoration-color: var(--accent); }

.ap-glossary {
    margin-top: 1rem;
    padding: 0.9rem 1.25rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ap-glossary h3 { margin: 0 0 0.6rem; font-size: var(--fs-md); font-weight: 600; }
.ap-gloss-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
}
.ap-gloss-item { padding: 0.25rem 0.35rem; border-radius: var(--radius-sm); scroll-margin-top: 0.75rem; }
.ap-gloss-item.is-flash { background: var(--ap-hover); }
.ap-gloss-item dt { font-weight: 600; font-size: var(--fs-sm); }
.ap-gloss-item dd { margin: 0.1rem 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

/* Sources live in a quiet footnote that opens on request. */
.ap-footnote { margin-top: 0.9rem; font-size: var(--fs-xs); color: var(--text-3); }
.ap-footnote summary { cursor: pointer; width: fit-content; }
.ap-footnote summary:hover { color: var(--text-1); }
.ap-footnote .ap-sources { margin-top: 0.4rem; }

/* ── 看全部: the full stage × actor table ───────────────────────── */
.ap-all { margin-top: 1rem; }
.ap-all-toggle {
    padding: 0.5rem 0.9rem;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.ap-all-toggle:hover { background: var(--ap-hover); }
.ap-all-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ap-all-toggle[aria-expanded="true"] { border-color: var(--text-1); }

.ap-about {
    margin-top: 1.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    color: var(--text-3);
}
.ap-about h3 { margin: 0 0 0.35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ap-about p { margin: 0 0 0.4rem; font-size: var(--fs-xs); line-height: 1.7; }
.ap-about .ap-disclaimer { color: var(--text-3); }

/* ── Grid: stages across, actors down ──────────────────────────
   The markup is stage-major (one group per stage) so a phone can stack the
   stages; on wider screens the groups dissolve into one 7-column grid. */
.ap-grid {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.9fr) repeat(6, minmax(0, 1fr));
    grid-template-rows: auto repeat(4, minmax(3.5rem, auto));
    grid-auto-flow: column;
    gap: 0.4rem;
    margin: 1rem 0;
}
.ap-col { display: contents; }

.ap-corner {
    font-size: var(--fs-min);
    color: var(--text-3);
    align-self: end;
    line-height: 1.4;
}

.ap-actor-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    border-left: 3px solid var(--ap-lane, var(--border));
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.ap-actor-label span { font-size: var(--fs-min); color: var(--text-3); line-height: 1.35; }
.ap-actor-label.is-current { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }

.ap-stage-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.ap-stage-head.is-current { border-color: var(--text-2); background: var(--surface); }
.ap-stage-no {
    font-size: var(--fs-min);
    font-weight: 600;
    color: var(--text-3);
    letter-spacing: var(--tracking-caps);
}
.ap-stage-q { font-size: var(--fs-min); color: var(--text-3); line-height: 1.35; }

.ap-lane-tfda { --ap-lane: var(--ap-tfda); }
.ap-lane-company { --ap-lane: var(--ap-company); }
.ap-lane-cde { --ap-lane: var(--ap-cde); }
.ap-lane-nhia { --ap-lane: var(--ap-nhia); }

.ap-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    min-height: 3.5rem;
    padding: 0.45rem 0.55rem;
    text-align: left;
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--ap-lane, var(--border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition);
}
.ap-cell:hover { background: var(--ap-hover); }
.ap-cell:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ap-cell.is-selected { box-shadow: 0 0 0 1px var(--text-1); background: var(--surface); font-weight: 600; }
.ap-cell.is-idle { background: var(--surface-2); color: var(--text-3); border-left-style: dashed; }
.ap-cell-actor { display: none; font-size: var(--fs-min); color: var(--text-3); font-weight: 400; }

/* ── Detail panel ───────────────────────────────────────────── */
.ap-detail {
    grid-column: 1 / -1;
    grid-row: 6;
    margin-top: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    padding: 1rem 1.1rem 1.2rem;
    scroll-margin-top: 0.5rem;
}
.ap-detail h3 { margin: 0.1rem 0 0; font-size: 1rem; }
.ap-detail-head { border-left: 3px solid var(--ap-lane, var(--border)); padding-left: 0.6rem; margin-bottom: 0.4rem; }
.ap-detail-where { font-size: var(--fs-xs); color: var(--text-3); }
.ap-detail-empty h3 { margin-bottom: 0.4rem; }
.ap-detail-empty ol { margin: 0; padding-left: 1.2rem; line-height: 1.7; color: var(--text-2); }

.ap-section { margin-top: 0.9rem; }
.ap-section h4 {
    margin: 0 0 0.35rem;
    font-size: var(--fs-xs);
    color: var(--text-3);
    letter-spacing: var(--tracking-caps);
}
.ap-list { margin: 0; padding-left: 1.1rem; line-height: 1.7; font-size: var(--fs-md); }
.ap-list li + li { margin-top: 0.2rem; }

.ap-cite {
    margin-left: 0.15rem;
    font-size: var(--fs-min);
    color: var(--text-3);
    text-decoration: none;
    vertical-align: super;
    line-height: 0;
}
.ap-cite:hover, .ap-cite:focus-visible { text-decoration: underline; }

/* A sentence that rests on this site's own summary of a document, not yet
   checked against the original. Same amber as the site's other data warnings. */
.ap-unchecked {
    display: inline-block;
    margin-left: 0.15rem;
    padding: 0 0.35rem;
    font-size: var(--fs-min);
    line-height: 1.5;
    color: #b45309;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid #fcd34d;
    border-radius: 999px;
    white-space: nowrap;
    cursor: help;
}
.ap-unchecked-note {
    margin: 0.6rem 0 0;
    padding: 0.45rem 0.65rem;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: #92400e;
    background: rgba(245, 158, 11, 0.10);
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
}
.ap-about .ap-unchecked-note { color: #92400e; }
.ap-intro-sources { margin: 0.35rem 0 0; }

.ap-mixup {
    margin-top: 0.9rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.ap-mixup p { margin: 0.2rem 0 0; }

.ap-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.ap-chips li {
    padding: 0.15rem 0.55rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-xs);
}

.ap-terms { margin: 0; display: grid; gap: 0.4rem; }
.ap-term dt { font-weight: 600; font-size: var(--fs-sm); }
.ap-term dd { margin: 0.1rem 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

.ap-examples { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.ap-example {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.ap-example-head { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.ap-example-head span { font-size: var(--fs-xs); color: var(--text-3); }
.ap-example p { margin: 0.25rem 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.ap-example-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ap-link-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
}
.ap-link-btn:hover { background: var(--ap-hover); }
.ap-link-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.ap-neighbours { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }

.ap-sources { margin: 0; padding-left: 0; list-style: none; font-size: var(--fs-min); line-height: 1.6; color: var(--text-3); }
.ap-sources li { padding: 0.1rem 0.25rem; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.ap-sources li.is-flash { background: var(--ap-hover); }
.ap-src-n { color: var(--text-3); }
.ap-src-where { display: block; color: var(--text-3); }
.ap-sources a { color: var(--text-2); }

.ap-error { color: var(--text-2); padding: 1rem 0; }

/* ── Narrow screens: stages stack, each cell names its actor ── */
@media (max-width: 900px) {
    .ap-stepper, .ap-glossary { padding-left: 0.9rem; padding-right: 0.9rem; }
    .ap-grid { display: flex; flex-direction: column; gap: 0.75rem; }
    .ap-detail { margin-top: 0; }
    .ap-actor-col { display: none; }
    .ap-stage-col {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }
    .ap-stage-head { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
    .ap-cell-actor { display: block; }
}

@media (max-width: 560px) {
    .ap-step-label { font-size: var(--fs-min); }
    .ap-step-no { width: 1.6rem; height: 1.6rem; font-size: var(--fs-xs); }
    .ap-step + .ap-step::before { top: 0.8rem; right: calc(50% + 0.95rem); left: calc(-50% + 0.95rem); }
    .ap-step-headline { font-size: var(--fs-lg); }
    .ap-step-nav { flex-direction: column-reverse; }
    .ap-step-move { width: 100%; text-align: center; }
}

@media (max-width: 420px) {
    .access-pathway { padding: 1rem; }
    .ap-cell { min-height: 0; padding: 0.4rem 0.45rem; }
}

@media (max-width: 330px) {
    .ap-stage-col { grid-template-columns: minmax(0, 1fr); }
}