/* it-offshore-rankings demo — brand-matched design system
 * Palette and typography match it-offshore.com:
 *   page    #f5f5ff (lavender), card #ffffff
 *   text    #222222, muted #67677a, faint #a6a6b5, border #e6e6f0
 *   accent  #26cf85 green (hover #22b574)
 *   font    "Golos Text" (Cyrillic-friendly humanist sans)
 *   radius  clamp(8px, ..., 30px)
 *   title   weight 400, clamp 40–80px
 */

@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap");

:root {
    /* Palette — direct port of it-offshore.com */
    --c-bg:           #f5f5ff;
    --c-card:         #ffffff;
    --c-text:         #222222;
    --c-text-muted:   #67677a;
    --c-text-faint:   #a6a6b5;
    --c-border:       #e6e6f0;
    --c-hover:        #f0f0fa;       /* slightly darker than bg, for table rows */

    --c-accent:       #26cf85;
    --c-accent-hover: #22b574;
    --c-accent-tint:  #e9f9f1;
    --c-accent-faint: #d1f3e1;

    /* Score pill tints — keyed off the brand-green family */
    --c-best:    #1a7a4f;  --c-best-bg:   #d1f3e1;
    --c-good:    #6b5b00;  --c-good-bg:   #fff4cc;
    --c-mid:     #8a3a1f;  --c-mid-bg:    #ffe1d4;
    --c-low:     #67677a;  --c-low-bg:    #ebebf2;

    /* Spacing — 4px rhythm */
    --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
    --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 96px;

    /* Brand block sizing — fluid clamps, mirroring it-offshore.com */
    --block-br:       clamp(0.5rem, 0.107rem + 1.96vw, 1.875rem);   /* 8–30px */
    --block-padding:  clamp(1rem, 0.214rem + 3.93vw, 3.75rem);      /* 16–60px */

    --container:      1440px;
    --gutter:         24px;

    --font-default:   "Golos Text", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, sans-serif;
    --font-mono:      ui-monospace, "SF Mono", Monaco, Menlo, Consolas, monospace;
}

@media (max-width: 1440px) {
    :root { --container: 1280px; }
}
@media (max-width: 480px) {
    :root { --gutter: 16px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale; }
body  { margin: 0;
        font-family: var(--font-default); font-size: 16px; line-height: 1.5;
        color: var(--c-text); background: var(--c-bg);
        overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease-in-out; }
a:hover { color: var(--c-accent); }

/* Typography — brand: light hero titles, larger body */
h1 { font-size: clamp(2.5rem, 1.786rem + 3.57vw, 5rem);
     font-weight: 400; line-height: 1; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: clamp(1.5rem, 1.179rem + 1.43vw, 2.5rem);
     font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }
p  { margin: 0; }
code, kbd, pre, samp { font-family: var(--font-mono); }

.eyebrow {
    display: inline-block;
    font-size: 14px; font-weight: 600;
    color: var(--c-accent);
    margin-bottom: var(--s-4);
}
.muted { color: var(--c-text-muted); }
.faint { color: var(--c-text-faint); }

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Header — two-row to mirror it-offshore.com */
.header {
    background: var(--c-bg);
    position: sticky; top: 0; z-index: 20;
}
.header-top {
    border-bottom: 1px solid var(--c-border);
}
.header-top-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px;
}
.logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--c-text);
}
.logo:hover { color: var(--c-text); }
.logo__mark {
    width: 28px; height: 28px;
    background: var(--c-accent);
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
}
.menu-top {
    display: flex; align-items: center; gap: var(--s-5);
    list-style: none; padding: 0; margin: 0;
}
.menu-top a {
    font-size: 14px; font-weight: 400;
    color: var(--c-text-muted);
}
.menu-top a:hover { color: var(--c-accent); text-decoration: underline; }
.menu-top a.active { color: var(--c-text); font-weight: 500; }
.header-cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: 13px; color: var(--c-text-muted);
}
.header-cta strong { color: var(--c-text); font-weight: 500; }

/* Language switcher */
.lang-switch {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 32px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    color: var(--c-text-muted);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}
.lang-switch:hover {
    color: #fff; background: var(--c-accent);
    border-color: var(--c-accent); text-decoration: none;
}

/* Hero */
.hero {
    padding: var(--s-8) 0 var(--s-7);
    position: relative;
}
.hero h1 { max-width: 16ch; margin-bottom: var(--s-4); }
.hero p.lead {
    font-size: 18px; color: var(--c-text-muted);
    max-width: 64ch; line-height: 1.55;
}

/* Stats row — mirrors brand block padding */
.stats {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--s-6);
    background: var(--c-card);
    border-radius: var(--block-br);
    padding: var(--s-5) var(--s-6);
    border: 1px solid var(--c-border);
}
.stats .stat .num {
    font-family: var(--font-default);
    font-size: 36px; font-weight: 400; letter-spacing: -0.02em;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stats .stat .label {
    color: var(--c-text-muted); font-size: 14px; margin-top: var(--s-1);
}

/* Sticky toolbar */
.toolbar {
    position: sticky; top: 64px; z-index: 10;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    padding: var(--s-3) 0;
}
.toolbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
}
.toolbar-group { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* Segmented control — pill, brand green */
.segmented {
    display: inline-flex;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 3px;
}
.segmented button {
    appearance: none; border: 0; background: transparent;
    padding: 8px 18px;
    font-size: 13px; font-weight: 500;
    color: var(--c-text-muted);
    cursor: pointer; border-radius: 999px;
    transition: all 0.2s ease-in-out;
}
.segmented button:hover { color: var(--c-text); }
.segmented button[aria-pressed="true"] {
    background: var(--c-accent);
    color: #fff;
}

/* Search */
input[type="search"], input[type="text"] {
    appearance: none;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    color: var(--c-text);
    min-width: 280px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="search"]::placeholder { color: var(--c-text-faint); }
input[type="search"]:focus, input[type="text"]:focus {
    outline: 0;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-tint);
}

/* Table — white card on lavender, rounded */
.table-wrap {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--block-br);
    overflow: hidden;
    margin: var(--s-5) 0;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
    text-align: left; font-weight: 500;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-text-faint);
    padding: var(--s-4);
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
    background: var(--c-card);
    user-select: none;
}
thead th button {
    appearance: none; border: 0; background: transparent;
    color: inherit; font: inherit;
    letter-spacing: inherit; text-transform: inherit;
    cursor: pointer; padding: 0;
}
thead th button:hover { color: var(--c-text-muted); }
thead th .arrow { display: inline-block; margin-left: 4px; opacity: 0; }
thead th[aria-sort="ascending"]  .arrow,
thead th[aria-sort="descending"] .arrow { opacity: 1; color: var(--c-accent); }
thead th[aria-sort="descending"] .arrow::after { content: "↓"; }
thead th[aria-sort="ascending"]  .arrow::after { content: "↑"; }
thead th.num { text-align: right; }

tbody tr {
    border-top: 1px solid var(--c-border);
    cursor: pointer;
    transition: background 0.1s ease-in-out;
}
tbody tr:hover { background: var(--c-hover); }
tbody td { padding: var(--s-3) var(--s-4); vertical-align: middle; }

.td-rank {
    font-family: var(--font-default); font-size: 14px; font-weight: 500;
    color: var(--c-text-faint);
    width: 56px; text-align: right;
    font-variant-numeric: tabular-nums;
}
.td-flag { width: 36px; padding-right: 0; }
.flag    { font-size: 20px; line-height: 1; }
.td-name { font-weight: 500; color: var(--c-text); }
.td-name .parent {
    color: var(--c-text-faint); font-size: 12px; font-weight: 400;
    margin-top: 2px;
}
.td-num {
    font-family: var(--font-default);
    font-size: 14px; text-align: right;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.td-num strong { color: var(--c-text); font-weight: 500; }

/* Score pill */
.score {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 24px;
    padding: 0 10px; border-radius: 999px;
    font-family: var(--font-default);
    font-size: 12px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.score.best { background: var(--c-best-bg);  color: var(--c-best); }
.score.good { background: var(--c-good-bg);  color: var(--c-good); }
.score.mid  { background: var(--c-mid-bg);   color: var(--c-mid); }
.score.low  { background: var(--c-low-bg);   color: var(--c-low); }

/* Detail page */
.breadcrumb { font-size: 14px; color: var(--c-text-muted); margin-bottom: var(--s-4); }
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb .sep { margin: 0 var(--s-2); color: var(--c-text-faint); }

.detail-hero { padding: var(--s-7) 0 var(--s-5); }
.detail-hero h1 {
    display: flex; align-items: center; gap: var(--s-3);
    font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.detail-hero h1 .flag { font-size: 44px; line-height: 1; }
.detail-meta {
    display: flex; flex-wrap: wrap; gap: var(--s-4);
    margin-top: var(--s-4);
    color: var(--c-text-muted); font-size: 14px;
}
.detail-meta .tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 4px 12px;
}

/* Scenario card — brand block */
.scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-6);
}
.scenario-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--block-br);
    padding: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
}
.scenario-card .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-4); }
.scenario-card .label {
    font-size: 13px; color: var(--c-text-muted); font-weight: 500;
}
.scenario-card .title { font-weight: 600; font-size: 16px; margin-top: 4px; }
.scenario-card .big-score {
    font-family: var(--font-default);
    font-size: 72px; font-weight: 400; letter-spacing: -0.04em;
    line-height: 1; color: var(--c-text);
    margin: var(--s-4) 0 var(--s-2);
}
.scenario-card .big-score .out-of {
    font-size: 22px; color: var(--c-text-faint); margin-left: 4px; font-weight: 400;
}
.scenario-card .rank-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--c-accent-tint); color: var(--c-accent);
    font-size: 13px; font-weight: 600;
}
.scenario-card .breakdown {
    margin-top: var(--s-5);
    border-top: 1px solid var(--c-border);
    padding-top: var(--s-4);
}
.scenario-card .row {
    display: flex; justify-content: space-between;
    font-size: 15px; padding: var(--s-2) 0;
}
.scenario-card .row.sub  { color: var(--c-text-muted); }
.scenario-card .row.total {
    border-top: 1px solid var(--c-border);
    margin-top: var(--s-2); padding-top: var(--s-3);
    font-weight: 600; color: var(--c-text);
}
.scenario-card .row .value {
    font-family: var(--font-default);
    font-variant-numeric: tabular-nums;
}
.scenario-card .sub-scores {
    display: grid; gap: var(--s-2);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--c-border);
}
.scenario-card .sub-scores .item {
    text-align: center;
    padding: var(--s-3);
    background: var(--c-bg);
    border-radius: 12px;
}
.scenario-card .sub-scores .num { display: block; }
.scenario-card .sub-scores .label {
    display: block; font-size: 11px; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px;
    font-weight: 500;
}

/* Section blocks */
.section { margin-top: var(--s-7); }
.section h2 { margin-bottom: var(--s-5); }
.section .card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--block-br);
    padding: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
}

dl.specs {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--s-3) var(--s-6);
    margin: 0; font-size: 15px;
}
dl.specs dt { color: var(--c-text-muted); padding: var(--s-1) 0; }
dl.specs dd {
    margin: 0; font-family: var(--font-default);
    font-variant-numeric: tabular-nums;
    color: var(--c-text); padding: var(--s-1) 0; font-weight: 500;
}

/* Notes / list — brand-arrow markers */
ul.notes { list-style: none; padding: 0; margin: 0; }
ul.notes li {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 15px; line-height: 1.6;
    color: var(--c-text);
    padding-left: var(--s-6); position: relative;
}
ul.notes li::before {
    content: ""; position: absolute;
    left: 0; top: calc(var(--s-3) + 7px);
    width: 16px; height: 2px;
    background: var(--c-accent);
}
ul.notes li:last-child { border-bottom: 0; }

ul.sources { list-style: none; padding: 0; margin: 0; font-size: 14px; }
ul.sources li { padding: var(--s-2) 0; }
ul.sources a {
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 1px;
}
ul.sources a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* Methodology page formula */
.formula {
    background: var(--c-text);
    color: #f0f0fa;
    border-radius: var(--block-br);
    padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
    font-family: var(--font-mono); font-size: 14px; line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
}
.formula .k { color: var(--c-accent); font-weight: 600; }
.formula .v { color: var(--c-text-faint); }

/* Methodology — hero lead block (multi-paragraph) */
.lead-block {
    font-size: 18px; color: var(--c-text-muted);
    max-width: 70ch; line-height: 1.55;
}
.lead-block p { margin-bottom: var(--s-3); }
.lead-block p:last-child { margin-bottom: 0; }

/* Methodology — worked example */
.we-table {
    display: flex; flex-direction: column;
    border-radius: var(--r); overflow: hidden;
}
.we-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--c-border);
    gap: var(--s-4);
}
.we-row:last-child { border-bottom: 0; }
.we-row .label { color: var(--c-text-muted); font-size: 15px; }
.we-row .value {
    font-family: var(--font-default);
    font-variant-numeric: tabular-nums;
    color: var(--c-text); font-weight: 500;
    white-space: nowrap;
}
.we-row.is-total {
    background: var(--c-accent-tint);
    margin: 0 calc(-1 * clamp(1.5rem, 0.955rem + 2.73vw, 3rem));
    padding: var(--s-3) clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
    border-bottom: 1px solid var(--c-border);
}
.we-row.is-total .label { color: var(--c-text); font-weight: 600; }
.we-row.is-total .value { font-weight: 700; color: var(--c-accent); }

/* Methodology — regime types grid */
.regime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--s-4);
}
.regime-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--block-br);
    padding: var(--s-5);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.regime-card:hover {
    border-color: var(--c-accent-faint);
}
.regime-card h3 {
    font-size: 16px; font-weight: 600;
    margin-bottom: var(--s-2);
}
.regime-examples {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: var(--s-3);
}
.chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: 12px; color: var(--c-text-muted);
    /* white-space: nowrap; */
}

/* Methodology — glossary */
dl.glossary {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--s-4) var(--s-6);
    margin: 0;
}
.glossary-row {
    display: contents;
}
dl.glossary dt {
    color: var(--c-text);
    font-weight: 600;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-border);
}
dl.glossary dd {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 15px; line-height: 1.55;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--c-border);
}

/* Methodology — baselines grid */
.baselines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-4);
}
.baseline-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--block-br);
    padding: var(--s-5);
}
.baseline-card h3 {
    color: var(--c-accent);
    font-size: 16px; font-weight: 600;
    margin-bottom: var(--s-2);
}
.baseline-card p {
    color: var(--c-text-muted);
    font-size: 14px; line-height: 1.55;
}

/* Methodology — callout (update cadence + corrections) */
.callout {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--block-br);
    padding: clamp(1.5rem, 0.955rem + 2.73vw, 3rem);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--s-5); flex-wrap: wrap;
}
.callout h3 {
    font-size: 18px; font-weight: 600;
    color: var(--c-text);
}
.callout p {
    color: var(--c-text-muted);
    font-size: 15px; line-height: 1.55;
    max-width: 60ch;
}
.callout-meta {
    display: flex; flex-direction: column; gap: 2px;
    text-align: right;
}
.callout-meta strong {
    font-size: 24px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
}
.callout-accent {
    background: var(--c-accent-tint);
    border-color: var(--c-accent-faint);
}
.btn-accent {
    display: inline-flex; align-items: center;
    background: var(--c-accent); color: #fff !important;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600; font-size: 15px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.btn-accent:hover {
    background: var(--c-accent-hover);
    text-decoration: none;
}

/* Footer */
.footer {
    margin-top: var(--s-9);
    padding: var(--s-7) 0 var(--s-5);
    border-top: 1px solid var(--c-border);
    font-size: 14px; color: var(--c-text-muted);
}
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.footer a { color: var(--c-text-muted); }
.footer a:hover { color: var(--c-accent); }

/* Loading / empty */
.state {
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-9); color: var(--c-text-faint); font-size: 14px;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .stats { grid-template-columns: repeat(3, 1fr); }
    dl.specs { grid-template-columns: 200px 1fr; }
    dl.glossary { grid-template-columns: 180px 1fr; }
}
@media (max-width: 720px) {
    .header-top-inner   { height: 56px; }
    .toolbar            { top: 56px; padding: var(--s-2) 0; }
    .toolbar-inner      { gap: var(--s-2); }
    .toolbar-group      { gap: var(--s-2); }
    .menu-top           { gap: var(--s-3); font-size: 13px; }
    .menu-top a         { font-size: 13px; }
    .header-cta         { display: none; }
    input[type="search"] { min-width: 0; flex: 1; }
    .stats              { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4); }
    .stats .stat .num   { font-size: 28px; }
    thead th, tbody td  { padding: var(--s-3) var(--s-2); }
    .td-num.hide-mobile  { display: none; }
    thead th.hide-mobile { display: none; }
    .score              { min-width: 36px; }
    .scenario-grid      { grid-template-columns: 1fr; gap: var(--s-3); }
    .scenario-card .big-score { font-size: 56px; }
    dl.specs            { grid-template-columns: 1fr; gap: var(--s-1) 0; }
    dl.specs dt         { font-size: 13px; color: var(--c-text-faint); margin-top: var(--s-2); }
    .footer-inner       { flex-direction: column; align-items: flex-start; }
    .detail-hero h1 .flag { font-size: 28px; }

    .we-row             { flex-direction: column; gap: 4px; padding: var(--s-2) 0; }
    .we-row .value      { font-size: 16px; }
    .regime-grid        { grid-template-columns: 1fr; }
    .baselines-grid     { grid-template-columns: 1fr; }
    dl.glossary         { grid-template-columns: 1fr; gap: var(--s-1) 0; }
    dl.glossary dt      { padding-top: var(--s-3); border-bottom: 0; }
    dl.glossary dd      { padding-bottom: var(--s-3); }
    .callout            { flex-direction: column; align-items: flex-start; }
    .callout-meta       { text-align: left; }
    .lead-block         { font-size: 16px; }
}