/* Category link pages — loaded after public.css and reuses its tokens, header, sections and FAQ list. */

/* Hero */
.link-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: 26px; padding: 22px 36px 24px; border-radius: 22px; background: var(--guide-bg, var(--hero)); }
.link-hero::before { content: ''; position: absolute; z-index: -1; right: -40px; bottom: -110px; width: 220px; height: 220px; border: 1px solid var(--guide-ink, var(--accent)); border-radius: 50%; opacity: .14; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #6c6377; font-size: calc(10px + var(--font-size-step)); }
.breadcrumb a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.link-label { display: block; margin-top: 14px; color: #6b6276; font-size: calc(8px + var(--font-size-step)); font-weight: 600; letter-spacing: 1.6px; }
.link-hero h1 { margin: 6px 0 0; max-width: 75%; font-size: calc(24px + var(--font-size-step)); letter-spacing: var(--heading-tracking); line-height: 1.3; font-weight: var(--heading-weight); overflow-wrap: anywhere; }
.link-description { max-width: 640px; margin-top: 6px; color: var(--muted); font-size: calc(11px + var(--font-size-step)); line-height: 1.7; word-break: keep-all; }
.link-hero-icon { position: absolute; right: 40px; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin-top: -36px; border-radius: 22px; background: #ffffffa6; color: var(--guide-ink, var(--accent)); transform: rotate(10deg); box-shadow: 0 6px 0 #ffffff3b; }
.link-hero-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Spreadsheet-style site table */
.sheet-section { --section-space: 32px; }
.sheet-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sheet-heading h2 { font-size: calc(22px + var(--font-size-step)); }
.sheet-heading p { color: var(--muted); font-size: calc(11px + var(--font-size-step)); font-variant-numeric: tabular-nums; }
.sheet-wrap { overflow-x: auto; border: 1px solid #d6cde2; border-radius: 14px; background: var(--surface); box-shadow: 0 1px 0 #ece6f3; }
.sheet { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(12px + var(--font-size-step)); }
/* Column widths live on the header cells (no <colgroup>) so a column can be hidden on phones without misaligning the fixed layout. */
.sheet .w-no { width: 64px; }
.sheet .w-name { width: 24%; }
.sheet .w-status { width: 15%; }
.sheet .w-link { width: 22%; }
.sheet th, .sheet td { padding: 14px 18px; border-right: 1px solid #e8e2ef; border-bottom: 1px solid #e8e2ef; text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.sheet tr > :last-child { border-right: 0; }
.sheet tbody tr:last-child > * { border-bottom: 0; }
.sheet thead th { padding-block: 12px; background: #f3eff9; color: #5f5674; font-size: calc(10px + var(--font-size-step)); font-weight: 700; letter-spacing: .02em; border-bottom-color: #d6cde2; }
.sheet .cell-no, .sheet thead th:first-child { padding-inline: 8px; text-align: center; background: #f8f6fb; color: #696277; font-variant-numeric: tabular-nums; font-weight: 600; }
.sheet thead th:first-child { background: #ece7f4; }
.sheet tbody tr:hover > * { background: #faf7ff; }
.sheet tbody tr:hover > .cell-no { background: #f1ecf9; color: var(--accent-dark); }
.cell-name { font-weight: 650; }
.sheet-host { display: none; margin-top: 3px; color: #6b6379; font-size: calc(9px + var(--font-size-step)); font-weight: 500; }
.cell-desc { color: #5f5a6c; line-height: 1.65; word-break: keep-all; }
.cell-empty { color: #b2a9bd; }
.cell-link a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--accent-dark); font-weight: 600; text-decoration: underline; text-decoration-color: #c9b9e6; text-underline-offset: 4px; }
.cell-link a:hover { text-decoration-color: currentColor; }
.link-host { min-width: 0; overflow-wrap: anywhere; }
.link-text { display: none; }
/* Link-check result per site: label with a colored dot plus the check date. */
.cell-status { white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px + var(--font-size-step)); font-weight: 650; }
.status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-ok { color: #2e7a4f; }
.status-warn { color: #a3561e; }
.status-muted { color: #6f6880; }
.cell-status small { display: block; margin-top: 3px; color: #6b6379; font-size: calc(9px + var(--font-size-step)); font-weight: 500; }
.sheet-empty { padding: 34px 18px !important; color: var(--muted); text-align: center !important; }
.sheet-note { margin-top: 12px; color: #6b6379; font-size: calc(10px + var(--font-size-step)); }

/* Guide below the table */
.guide-section .section-heading h2 { font-size: calc(28px + var(--font-size-step)); }
.guide-intro { max-width: 820px; margin-bottom: 30px; }
.guide-intro p { color: #4f4a5e; font-size: calc(13px + var(--font-size-step)); line-height: 1.9; word-break: keep-all; }
.guide-intro p + p { margin-top: 12px; }
.guide-section .course>p { min-height: 0; }
.guide-bottom { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; margin-top: 36px; align-items: start; }
.guide-bottom h3 { font-size: calc(17px + var(--font-size-step)); letter-spacing: -.025em; margin-bottom: 16px; }
.guide-checks { padding: 26px 28px; border-radius: 18px; background: #f6f3fa; border: 1px solid #ebe5f3; }
.guide-checks ul { list-style: none; margin: 0; padding: 0; }
.guide-checks li { position: relative; padding: 0 0 0 30px; color: #4f4a5e; font-size: calc(12px + var(--font-size-step)); line-height: 1.75; word-break: keep-all; }
.guide-checks li + li { margin-top: 14px; }
.guide-checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: white; color: var(--accent); font-size: 12px; font-weight: 700; }

/* Other collections */
.other-section .section-heading h2 { font-size: calc(28px + var(--font-size-step)); }
.other-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.other-link { display: flex; align-items: center; gap: 15px; min-width: 0; padding: 18px 20px; border-radius: 18px; background: var(--guide-bg); }
.other-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #ffffffb3; color: var(--guide-ink); }
.other-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.other-copy { display: grid; min-width: 0; }
.other-copy strong { font-size: calc(14px + var(--font-size-step)); overflow-wrap: anywhere; }
.other-copy small { color: var(--muted); font-size: calc(10px + var(--font-size-step)); }
.other-arrow { margin-left: auto; color: var(--guide-ink); font-size: 20px; transition: transform .2s; }
.other-link:hover .other-arrow { transform: translateX(4px); }

@media (max-width:1000px) {
  .link-hero-icon { right: 28px; }
  .other-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width:700px) {
  .link-hero { margin-top: 16px; padding: 16px 18px 18px; border-radius: 18px; }
  .link-hero::before { width: 160px; height: 160px; right: -60px; bottom: -80px; }
  .link-label { margin-top: 10px; }
  .link-hero h1 { max-width: none; padding-right: 52px; font-size: calc(20px + var(--font-size-step)); }
  .link-hero-icon { top: 46px; right: 16px; margin-top: 0; width: 44px; height: 44px; border-radius: 14px; }
  .link-hero-icon svg { width: 24px; height: 24px; }
  .sheet-section { --section-space: 24px; }
  .sheet { font-size: calc(11px + var(--font-size-step)); }
  .sheet .w-no { width: 40px; }
  .sheet .w-name { width: 30%; }
  .sheet .w-link { width: 96px; }
  .cell-status { display: none; }
  .sheet th, .sheet td { padding: 12px 10px; }
  .sheet .cell-no, .sheet thead th:first-child { padding-inline: 4px; }
  .sheet-host { display: block; }
  .cell-link a { gap: 4px; white-space: nowrap; }
  .link-host { display: none; }
  .link-text { display: inline; }
  .guide-bottom { grid-template-columns: 1fr; gap: 30px; }
  .guide-checks { padding: 22px; }
  .guide-section .section-heading h2, .other-section .section-heading h2 { font-size: calc(24px + var(--font-size-step)); }
  .other-links { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width:380px) {
  .sheet { font-size: calc(10px + var(--font-size-step)); }
  .sheet .w-no { width: 32px; }
  .sheet .w-link { width: 80px; }
  .sheet th, .sheet td { padding: 11px 7px; }
  .cell-link a { gap: 2px; }
}

/* Shown instead of an empty table (a colspan row is not a caption for screen readers). */
.sheet-empty-note { padding: 34px 20px; border: 1px dashed #d8cfe6; border-radius: 14px; background: #ffffffb3; color: var(--muted); text-align: center; word-break: keep-all; }