/* Hawaiʻi Dashboard - Change Summary Page Styles (all 7 year-span views) */
body { background: var(--bg); font-family: var(--font); color: var(--text); }

/* Header */
.fyc-header { padding: 2rem 1.5rem 0; text-align: center; max-width: 740px; margin: 0 auto; }
.fyc-header h1 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.fyc-deck { font-size: var(--text-base); color: var(--text-muted); line-height: 1.55; margin-bottom: 0.5rem; }

/* Span toggle (dropdown inside H1: "5 years" / "10 years") */
.fyc-span-toggle { position: relative; display: inline-block; }
.fyc-span-trigger { font: inherit; color: var(--hawaii-blue); background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.3rem; border-bottom: 2px dashed currentColor; line-height: inherit; }
.fyc-span-trigger:hover { opacity: 0.8; }
.fyc-span-trigger:focus-visible { outline: 2px solid var(--hawaii-blue); outline-offset: 3px; border-radius: 2px; }
.fyc-span-caret { transition: transform 0.15s; flex-shrink: 0; align-self: center; }
.fyc-span-trigger[aria-expanded="true"] .fyc-span-caret { transform: rotate(180deg); }
.fyc-span-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); margin: 0; padding: 0.3rem 0; list-style: none; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); min-width: 130px; z-index: 200; text-align: left; }
.fyc-span-option { display: block; padding: 0.5rem 1.1rem; font-size: var(--text-base); font-weight: 500; font-family: var(--font); color: var(--text); text-decoration: none; white-space: nowrap; }
.fyc-span-option:hover { background: var(--hawaii-blue-light); color: var(--hawaii-blue); }
.fyc-span-option.active { font-weight: 700; background: var(--bg); }
.fyc-span-option.active::before { content: "\2713  "; color: var(--hawaii-blue); }

/* Container */
.fyc-container { max-width: 860px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }

/* Spotlight: gains / declines / off-track */
.fyc-spotlight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 2.5rem; }
.fyc-spot-col { display: flex; flex-direction: column; gap: 0.4rem; }
.fyc-spot-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.1rem; }
.fyc-spot-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding-left: 0.1rem; }
.fyc-spot-gains   .fyc-spot-label { color: var(--positive); }
.fyc-spot-declines .fyc-spot-label { color: var(--negative); }
.fyc-spot-offtrack .fyc-spot-label { color: var(--negative); }
.fyc-spot-item { display: flex; flex-direction: column; gap: 0.1rem; text-decoration: none; padding: 0.35rem 0; border-bottom: 1px solid var(--surface-subtle); }
.fyc-spot-item:last-child { border-bottom: none; }
.fyc-spot-item:hover .fyc-spot-metric { text-decoration: underline; }
.fyc-spot-metric { font-size: var(--text-sm); font-weight: 700; color: var(--hawaii-blue); line-height: 1.3; }
.fyc-spot-detail { font-size: var(--text-2xs); color: var(--text-muted); }
.fyc-spot-detail .fyc-spot-abs { color: var(--text-muted); font-weight: 400; }
/* Rank transition is colored per direction (fyc-val-pos/neg); abs-change is
 * muted secondary context to avoid double-encoding. See review notes. */
.fyc-spot-empty { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }
@media (max-width: 600px) {
    .fyc-spotlight { grid-template-columns: 1fr; }
}

/* Shared uppercase label for page sections (Policy Area Overview, National Ranking) */
.fyc-section-label { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.4rem; margin-top: 2rem; }
.fyc-section-label:first-child { margin-top: 0; }

/* Print button */
.fyc-print-btn { position: fixed; top: 3.25rem; right: 1rem; font-size: var(--text-sm); padding: 0.35rem 0.75rem; min-height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); cursor: pointer; z-index: 100; line-height: 1.6; }
.fyc-print-btn:hover { background: var(--border); }

/* Area scorecard */
.fyc-scorecard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); margin-bottom: 2.5rem; overflow: hidden; }
/* shared grid template: area | standing text | trend */
.fyc-scorecard-header,
.fyc-scorecard-row { display: grid; grid-template-columns: 1fr 180px 180px; gap: 1rem; align-items: center; }
.fyc-scorecard-header { padding: 0.28rem 1rem 0.28rem 1.75rem; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.fyc-scorecard-hdr { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.fyc-scorecard-hdr-trend { text-align: right; }
.fyc-scorecard-row { padding: 0.5rem 1rem 0.5rem 0.75rem; border-bottom: 1px solid var(--surface-subtle); border-left: 5px solid transparent; text-decoration: none; color: inherit; transition: background 0.12s; }
.fyc-scorecard-row:last-child { border-bottom: none; }
.fyc-scorecard-row:hover { background: var(--surface-subtle); }
.fyc-scorecard-row.sc-strong { border-left-color: var(--positive); }
.fyc-scorecard-row.sc-weak   { border-left-color: var(--negative); }
.fyc-scorecard-row.sc-mixed  { border-left-color: var(--neutral); }
.fyc-scorecard-area { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.fyc-scorecard-standing-text { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.fyc-scorecard-row.sc-strong .fyc-scorecard-standing-text { color: var(--positive); }
.fyc-scorecard-row.sc-weak   .fyc-scorecard-standing-text { color: var(--negative); }
.fyc-scorecard-row.sc-mixed  .fyc-scorecard-standing-text { color: var(--neutral); }
.fyc-scorecard-trend { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
@media (max-width: 600px) {
    .fyc-scorecard-header { display: none; }
    .fyc-scorecard-row { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.6rem 1rem 0.6rem 0.75rem; }
    .fyc-scorecard-trend { justify-content: flex-start; }
}
.sc-trend-up   { font-size: var(--text-xs); font-weight: 700; color: var(--positive); }
.sc-trend-down { font-size: var(--text-xs); font-weight: 700; color: var(--negative); }
.sc-trend-flat { font-size: var(--text-xs); color: var(--neutral); }

/* Area sections */
.fyc-area { margin-top: 2rem; }
.fyc-area-head { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding-bottom: 0.4rem; border-bottom: 2px solid var(--border); margin-bottom: 0.15rem; }
.fyc-area-takeaway { font-size: var(--text-md); color: var(--text-muted); margin-bottom: 0.5rem; padding: 0.5rem 0; line-height: 1.6; }
.fyc-area-rows { display: none; }
.fyc-area-rows.expanded { display: block; }
.fyc-area-toggle { background: none; border: none; cursor: pointer; font-size: var(--text-xs); color: var(--hawaii-blue); padding: 0.3rem 0 0.6rem; font-family: var(--font); }
.fyc-area-toggle:hover { text-decoration: underline; }

/* Metric rows */
.fyc-row { display: block; text-decoration: none; color: inherit; padding: 1.25rem 0.5rem; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s; }
.fyc-row:hover { background: var(--hawaii-blue-light); }
.fyc-row:last-child { border-bottom: none; }

.fyc-line1 { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.fyc-metric-name { font-weight: 600; font-size: var(--text-md); color: var(--text); }
.fyc-status { font-size: var(--text-2xs); font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.fyc-status.improving { color: var(--positive); background: var(--positive-bg); }
.fyc-status.worsening { color: var(--negative); background: var(--negative-bg); }
.fyc-status.little-change { color: var(--neutral); background: var(--neutral-bg); }

.fyc-line2 { font-size: var(--text-md); color: var(--text-muted); margin-top: 0.3rem; }
/* Abs-change value is secondary context (muted); rank + status carry direction. */
.fyc-line2 .fyc-abs-change { font-weight: 500; }
/* Applied dynamically in fyc.js via `fyc-val-${rankDir}` template literal;
 * the dash-variable form is invisible to a naive grep for the literal class. */
.fyc-val-pos { color: var(--positive); font-weight: 600; }
.fyc-val-neg { color: var(--negative); font-weight: 600; }
.fyc-line3 { font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.15rem; }
/* 1-year view only: cadence note on rows where latest - prior != 1 year. */
.fyc-stale-note { font-size: var(--text-2xs); font-weight: 500; color: var(--text-muted); background: var(--neutral-bg); padding: 0.08rem 0.4rem; border-radius: 3px; margin-left: 0.25rem; white-space: nowrap; }
/* Position signal in the "Most off-track" spotlight: rank is always bad-tier
 * because the column filters to endRank ≥ 45. Mirrors rank-bad in the ranking table. */
.fyc-spot-rank-bad { color: var(--negative); font-weight: 600; }

/* Method note */
.fyc-method { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); line-height: 1.5; }

/* National standing table */
.fyc-rank-breakdown { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); margin-bottom: 1.5rem; overflow: hidden; }
.fyc-rank-header { display: flex; align-items: center; gap: 0.65rem; padding: 0.28rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
/* Rank-table column header cells. Shared typography here, per-column
   sizing and alignment below. */
.fyc-rank-hdr-rank,
.fyc-rank-hdr-name,
.fyc-rank-hdr-cat,
.fyc-rank-hdr-move,
.fyc-rank-hdr-val { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.fyc-rank-hdr-rank { width: 100px; flex-shrink: 0; text-align: left; }
.fyc-rank-hdr-name { flex: 1; min-width: 0; text-align: left; }
.fyc-rank-hdr-cat  { width: 170px; flex-shrink: 0; }
.fyc-rank-hdr-move { width: 95px; text-align: left; flex-shrink: 0; }
.fyc-rank-hdr-val  { width: 190px; text-align: right; flex-shrink: 0; }
.fyc-rank-hdr-sortable { cursor: pointer; white-space: nowrap; color: var(--text-muted); border-radius: 3px; transition: background 0.1s, color 0.1s; }
.fyc-rank-hdr-sortable:hover { color: var(--text); background: rgba(0,0,0,0.05); }
.fyc-rank-hdr-sortable.active { color: var(--text); }
.fyc-rank-sort-ind { font-size: var(--text-2xs); margin-left: 2px; color: #999; }
.fyc-rank-hdr-sortable.active .fyc-rank-sort-ind { color: var(--text); }
.fyc-rank-list { padding: 0.15rem 0; }
.fyc-rank-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.32rem 1rem; text-decoration: none; border-bottom: 1px solid var(--surface-subtle); transition: background 0.12s; }
.fyc-rank-item:last-child { border-bottom: none; }
.fyc-rank-item:hover { background: var(--surface-subtle); }
.fyc-rank-num { font-size: var(--text-xs); font-weight: 700; width: 100px; flex-shrink: 0; text-align: left; }
.fyc-rank-year { font-weight: 400; font-size: var(--text-2xs); color: var(--text-muted); }
.fyc-rank-name { font-size: var(--text-sm); color: var(--hawaii-blue); flex: 1; min-width: 0; text-align: left; }
.fyc-rank-item:hover .fyc-rank-name { text-decoration: underline; }
.fyc-rank-cat { font-size: var(--text-2xs); color: var(--text-muted); width: 170px; flex-shrink: 0; }
/* 3-tier rank colors: green / grey / red */
.fyc-rank-item.rank-good   .fyc-rank-num { color: var(--positive); }
.fyc-rank-item.rank-mid    .fyc-rank-num { color: var(--neutral); }
.fyc-rank-item.rank-bad    .fyc-rank-num { color: var(--negative); }
/* Rank change column */
.fyc-rank-move { font-size: var(--text-2xs); font-weight: 700; width: 95px; text-align: left; flex-shrink: 0; }
.fyc-rank-move.move-up     { color: var(--positive); }
.fyc-rank-move.move-down   { color: var(--negative); }
.fyc-rank-move.move-stable { color: var(--neutral); font-weight: 400; }
/* Rank table value column: current level is primary (default weight), delta is
 * secondary (muted parenthetical) so the row is self-contained: reader sees
 * both where Hawaiʻi is now and how it moved. Rank move (prev column) carries
 * the direction signal; this column deliberately has no color coding. */
.fyc-rank-val { font-size: var(--text-2xs); width: 190px; text-align: right; flex-shrink: 0; color: var(--text); }
.fyc-rank-val-level { font-weight: 600; }
.fyc-rank-delta { color: var(--text-muted); font-weight: 400; margin-left: 0.15rem; }

/* Print */
@media print {
    .top-nav, .fyc-print-btn { display: none !important; }
    .fyc-header { padding-top: 0.5rem; }
    body { font-size: 10.5pt; }
    a { color: inherit !important; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.6rem;
        color: var(--text-muted);
        word-break: break-all;
    }
    .fyc-row:hover, .fyc-rank-item:hover, .fyc-scorecard-row:hover { background: none !important; }
    .fyc-area { break-inside: avoid; }
    .fyc-row { break-inside: avoid; }
}

/* Mobile */
@media (max-width: 700px) {
    /* Policy area overview: stack Area + National rank + Trend vertically */
    .fyc-scorecard { overflow-x: visible; }
    .fyc-scorecard-header { display: none; }
    .fyc-scorecard-row { min-width: 0; grid-template-columns: 1fr; gap: 0.2rem; }
    .fyc-scorecard-trend { justify-content: flex-start; }
    .fyc-header { padding: 1.5rem 1rem 0; }
    .fyc-header h1 { font-size: 1.25rem; }
    .fyc-container { padding: 1.25rem 1rem 2rem; }
    .fyc-metric-name { font-size: var(--text-sm); }
    .fyc-line2 { font-size: var(--text-sm); }
    .fyc-line3 { font-size: var(--text-xs); }
    /* Ranking table: hide category + value columns on narrow screens */
    .fyc-rank-header, .fyc-rank-item { gap: 0.4rem; }
    .fyc-rank-num { font-size: var(--text-2xs); width: 86px; }
    .fyc-rank-hdr-cat, .fyc-rank-cat,
    .fyc-rank-hdr-val, .fyc-rank-val { display: none; }
    .fyc-rank-name { font-size: 0.73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fyc-rank-move { font-size: var(--text-2xs); width: 52px; min-width: 52px; text-align: left; }
    .fyc-print-btn { top: auto; bottom: 1rem; right: 1rem; }
}