/* Salary guide page. Loaded after cv-builder.css; keep the order in
   includes/inline_styles.php unless deliberately changing the cascade.

   The page borrows the dashboard chart primitives (.dash-tile, .dash-bars),
   which are already loaded site-wide, so this file only lays them out and
   styles the parts that are specific to the guide. */

.salary-intro { max-width: 760px; }
/* theme-violet.css forces a very large h1 and loads after this file, so only
   specificity can win — the guide leads with data, not a billboard headline. */
.salary-page .salary-intro h1 {
    margin: 6px 0 0; font-size: clamp(30px, 3.4vw, 44px) !important;
    line-height: 1.14; font-weight: 950; letter-spacing: -.025em;
}
.salary-intro .lead { margin-top: 16px; color: #475569; font-size: 17px; line-height: 1.7; }

.salary-tiles {
    margin-top: 30px; display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.salary-range-note { margin-top: 12px; }

.salary-block {
    margin-top: 34px; padding: 24px; border: 1px solid #e2e8f0;
    border-radius: 16px; background: #fff;
}
.salary-block h3 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.salary-block h3 + .tiny { margin-top: 6px; }
.salary-block .dash-bars { margin-top: 18px; }

.salary-group-grid {
    margin-top: 18px; display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.salary-group-card { padding: 16px 18px; border: 1px solid #e8eef7; border-radius: 13px; background: #f8fafc; }
.salary-group-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.salary-group-head strong { font-size: 15.5px; font-weight: 900; color: #0f172a; }
/* The sample size is never decoration: it is how a reader judges the figure
   above it, so it sits with the label rather than in a footnote. */
.salary-sample { font-size: 12px; font-weight: 700; color: #64748b; white-space: nowrap; }
.salary-median { margin: 10px 0 6px; font-size: 17px; font-weight: 900; color: #2c4699; }
.salary-withheld { margin-top: 14px; font-style: italic; }

/* Admin preview banner. Deliberately loud: an admin reading suppressed figures
   must never mistake them for what the public sees. */
.salary-admin-note {
    margin-top: 24px; padding: 16px 18px; border: 1px dashed #6d28d9;
    border-radius: 13px; background: #f5f3ff;
}
.salary-admin-note strong { display: block; font-size: 14.5px; font-weight: 900; color: #5b21b6; }
.salary-admin-note p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: #4c1d95; }
.salary-admin-note code { padding: 1px 5px; border-radius: 4px; background: #ede9fe; font-size: 12.5px; }

.salary-thin-notice {
    margin-top: 30px; padding: 28px; border: 1px solid #fde68a;
    border-radius: 16px; background: #fffbeb;
}
.salary-thin-notice h2 { margin: 0 0 12px; font-size: 21px; font-weight: 900; }
.salary-thin-notice p { margin: 0 0 12px; color: #4b5563; line-height: 1.7; max-width: 640px; }
.salary-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }

.salary-method { margin-top: 34px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
.salary-method h3 { margin: 0 0 14px; font-size: 18px; font-weight: 900; }
.salary-method ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.salary-method li { color: #475569; font-size: 14.5px; line-height: 1.65; }
.salary-method strong { color: #0f172a; }

/* ── Admin panel tab ──────────────────────────────────────── */
/* The dashboard's own tile row class does not exist, so the salary tab brings
   its own grid rather than borrowing a class that would silently do nothing. */
.salary-admin-tab .dash-tiles-row {
    display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.salary-admin-status {
    margin-top: 14px; display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.salary-admin-status > div {
    border: 1px solid #d5e3f7; border-radius: 14px; background: #f2f7fd; padding: 12px 14px;
}
.salary-admin-status strong { display: block; color: #0d1330; font-size: 20px; line-height: 1.15; }
.salary-admin-status span { display: block; margin-top: 4px; color: #64748b; font-size: 11.5px; font-weight: 800; }

body.theme-dark .salary-admin-status > div { border-color: #2a3a70; background: #0d1330; }
body.theme-dark .salary-admin-status strong { color: #e5e7eb; }
body.theme-dark .salary-admin-status span { color: #94a3b8; }

/* The job-card comparison line. Muted on purpose — it is context for the salary
   already shown, not a second headline competing with it. */
.salary-compare {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
    font-size: 12.5px; font-weight: 700; color: #475569;
}
.salary-compare-dot { width: 7px; height: 7px; border-radius: 999px; background: #94a3b8; flex: none; }
.salary-compare-above .salary-compare-dot { background: #22c55e; }
.salary-compare-below .salary-compare-dot { background: #f59e0b; }
.salary-compare-sample { color: #94a3b8; font-weight: 600; }

body.theme-dark .salary-intro .lead { color: #cbd5e1; }
body.theme-dark .salary-block,
body.theme-dark .salary-method { border-color: #2a3a70; background: #101a3d; }
body.theme-dark .salary-group-card { border-color: #1e2a55; background: #0d1330; }
body.theme-dark .salary-group-head strong { color: #e5e7eb; }
body.theme-dark .salary-median { color: #bcd2f2; }
body.theme-dark .salary-method li { color: #cbd5e1; }
body.theme-dark .salary-method strong { color: #e5e7eb; }
body.theme-dark .salary-admin-note { border-color: #7c3aed; background: #1a1140; }
body.theme-dark .salary-admin-note strong { color: #ddd6fe; }
body.theme-dark .salary-admin-note p { color: #c4b5fd; }
body.theme-dark .salary-admin-note code { background: #2e1f66; color: #e9e4ff; }
body.theme-dark .salary-thin-notice { border-color: #4d3d12; background: #1c1708; }
body.theme-dark .salary-thin-notice p { color: #cbd5e1; }
body.theme-dark .salary-compare { color: #cbd5e1; }

@media (max-width: 720px) {
    .salary-block, .salary-method, .salary-thin-notice { padding: 18px; }
    .salary-group-head { flex-direction: column; gap: 2px; }
}