/* Shared interior theme, aligned with the public homepage. Load after page styles. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  color-scheme: dark;
  --bg: #10191b;
  --panel: #182325;
  --panel-raised: #1d2c2b;
  --inset: #111c1e;
  --text: #eeeae0;
  --muted: #a3afa7;
  --gold: #d9b675;
  --line: #ffffff12;
  --border: #3c4d47;
  --night: var(--bg);
  --navy: var(--panel);
  --blue: var(--panel-raised);
  --paper: var(--panel);
  --ink: var(--text);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: Manrope, Arial, sans-serif;
}
@media screen {
body { background: var(--bg); color: var(--text); font-family: var(--sans); }
h1, h2, .tools-page h1, .osiris h1, .report-header h1, .group-panel h2, .squads h2 {
  font-family: var(--serif); font-weight: 500; color: var(--text); text-shadow: none;
}
h1 { line-height: 1.08; }
h2 { letter-spacing: -.5px; }
.tools-page h1, .calc-heading h1 { font-size: clamp(36px, 4vw, 54px); }
:is(.tools-intro, .calc-heading, .osiris-heading, .application-heading) { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
:is(.tools-intro, .osiris-heading) p { color: var(--muted); }
.eyebrow, .eyebrow.light, .tools-page .eyebrow, .osiris .eyebrow, .login-eyebrow { color: var(--gold); font-size: 11px; letter-spacing: 2px; }
body :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #f2d598; outline-offset: 4px; }
body :is(input, select, textarea) { accent-color: var(--gold); }

/* A quiet header with the same crest, typography and gold detail as Home. */
.site-header { min-height: 94px; border-top: 0; border-bottom: 1px solid var(--line); background: #10191bf5; box-shadow: none; font-family: var(--sans); backdrop-filter: blur(16px); }
.site-header::before { display: none; }
.site-header .brand { gap: 12px; color: var(--text); }
.site-header .crest, footer .crest { width: 44px; height: 48px; border: 1px solid #d9b67566; border-radius: 3px 3px 16px 16px; clip-path: none; background: transparent; color: var(--gold); font: 500 28px var(--serif); text-shadow: none; }
.site-header .crest::before, .site-header .crest::after { display: none; }
.site-header .brand-name { gap: 6px; font: 500 15px var(--sans); letter-spacing: 1px; }
.site-header .brand-name b { font: 700 17px var(--sans); letter-spacing: 1px; color: var(--gold); text-shadow: none; }
.site-header .brand small { color: #95a09b; font-size: 8px; letter-spacing: 2.1px; margin-top: 6px; }
.site-header nav { font-size: 12px; color: #b4b9b2; font-weight: 500; }
.site-header nav a:hover, .site-header nav a.active { color: var(--gold); }
.site-header nav a::after { background: var(--gold); }
.site-header .languages { background: transparent; border-color: var(--border); }
.site-header .languages button { color: var(--muted); }
.site-header .languages button[aria-pressed=true] { color: var(--gold); background: #d9b67512; box-shadow: inset 0 -2px var(--gold); }
.site-header .header-actions>.button { min-height: 42px; border-radius: 4px; padding: 11px 16px; font-size: 12px; letter-spacing: 0; box-shadow: none; }
.site-header .header-actions>.button, .gold, .osiris .gold-action, .login-card button,
.application-heading button, .application-card button, #application-editor button, .portal-code-dialog button,
dialog .gold { background: linear-gradient(120deg,#e1c795,#bd995b); color: #222a25; border-color: #ead0a0; box-shadow: none; }
.site-header .header-actions>.button:hover, .gold:hover, .osiris .gold-action:hover { background: linear-gradient(120deg,#ecd4a8,#caaa70); }
.outline, .tool-actions .outline, .calc-page .outline { background: transparent; color: var(--gold); border-color: #d9b67566; }
.portal-access-bar { color: var(--muted); font-size: 12px; }
.portal-access-bar a { color: inherit; }
.portal-access-bar button { margin-top: 0; box-shadow: none; background: transparent; border-color: var(--border); color: var(--muted); font-size: 12px; }

/* Panels keep their page-specific layout and all game rarity / team colors. */
.war-summary, .parchment, .tool-panel, .march-card, .commander-card, .combat-card,
.application-card, .map-panel, .group-panel, .squad-card, .plan-library, .login-card,
.stat, .topgrid>div, .norm, .player {
  background: var(--panel); color: var(--text); border-color: var(--border); border-radius: 8px; box-shadow: none;
}
.war-summary, .parchment, .tool-panel, .commander-card, .application-card, .map-panel, .group-panel, .plan-library { border-color: #ffffff16; }
.mge-panel { background: linear-gradient(140deg,#263b32,#1a2927); border-color: #8cb28b33; border-radius: 8px; }
.hero { background: var(--panel); border-color: #d9b67533; }
.hero-shade { background: linear-gradient(90deg,#10191bf5,#10191bae 42%,#10191b10 85%),linear-gradient(0deg,#10191b99,transparent 70%); }
.hero-seal { background: #18232599; box-shadow: none; }
.hero p, .mge-panel p { color: #b4bbb3; }
.hero h1, .mge-panel h2, .on-blue h2 { color: var(--text); }
.section-nav { border-color: var(--line); }
.section-nav a, .section-nav button { color: #b4b9b2; }
.section-nav a:hover, .section-nav button:hover { color: var(--gold); background: #d9b67508; }
.commander-card:hover, .combat-card:hover { background: var(--panel-raised); border-color: #d9b67566; }
.tool-panel h2, .result-heading h2, .group-panel h2 { color: var(--text); }
.tool-panel h2 { font: 500 28px/1.2 var(--serif); }

/* Secondary copy stays legible on the dark surfaces. */
.summary-number>span, .summary-bottom div>span, .source-caption, .pairing-foot span,
.pairing-foot a, .board-head span, .board-footer, .share-labels, .war-stats small,
.requirements-intro p, .formula span, .target-calculator label, .power-input>span,
.target-output>span, .target-output small, .norm-item>span, .roster-toolbar p,
.search-box>span, .roster-bottom>span, footer p, .brand small,
.tool-label, .tool-help, .result-heading span, .person small, .march-top, .exclude-pair,
.result-summary p, .empty-result, .owned-top span, .skills-row>span, .tools-source,
.tier-toolbar label, .tier-label h2, .commander-card p, .mode-options legend,
.source-date, .field, .metric span, .result-panel h3,
.combat-muted, .combat-summary, .combat-card-bottom, .combat-source, .combat-empty,
.combat-facts dt, .combat-march-heading>span, .combat-march-flags, .combat-source-records,
.combat-section-count, .combat-march-flags dt,
.application-card header p, .application-card dt, .application-card small,
.osiris-heading p, .osiris-status, .map-help, .group-panel label, .muted,
.squads-heading span, .squad-card p, .plan-library label, .group-panel details,
.form-grid label, .full-label, .login-card p, .login-help { color: var(--muted); }
.summary-number, .leader-row>b, .big-percent, .target-output>b, .norm-item b,
.nav-symbol, .commander span, .pair-arrow, .total-marches, .result-summary b,
.metric strong, .resource-grid .metric strong, .group-panel h3 { color: var(--gold); }
.pill, .blue-pill { color: #b8c5b7; border-color: var(--border); background: #ffffff04; }
.pair-description, .form-notice, #application-result { background: var(--panel-raised); color: #b4bbb3; border-color: var(--gold); }
.troop-tabs button { color: var(--muted); }
.troop-tabs button.selected { color: var(--gold); border-bottom-color: var(--gold); }
.norm-item { border-color: var(--border); }
.norm-item.selected { border-color: var(--gold); }
.share-track div:last-child { background: #3c5449; }
.march-bottom, .leader-row, .board-head, .summary-bottom, .formula, .target-calculator,
.roster-toolbar, .troop-tabs, .war-stats, .application-card dl { border-color: var(--line); }

/* Inputs and modal forms use the same inset surface everywhere. */
body input:not([type=checkbox]):not([type=radio]):not([type=color]), body select, body textarea,
body .tool-panel select, body .tier-toolbar select, body .calc-page select,
body .combat-filters select, body .plan-library select, body dialog select, body dialog textarea,
#application-editor input, #application-editor select, #application-editor textarea {
  background: var(--inset); color: var(--text); border: 1px solid var(--border); border-radius: 5px; box-shadow: none; color-scheme: dark; font-family: var(--sans);
}
body input::placeholder, body textarea::placeholder { color: #95a09b; opacity: 1; }
body input:focus, body select:focus, body textarea:focus { border-color: var(--gold); }
body dialog, #application-editor { --paper: var(--panel); --ink: var(--text); background: var(--panel); color: var(--text); border: 1px solid #60705d; border-radius: 8px; box-shadow: 0 25px 100px #0006; font-family: var(--sans); }
body dialog h2, #application-editor h2 { color: var(--text); font-family: var(--serif); }
body dialog .eyebrow { color: var(--gold); }
body dialog::backdrop { background: #07110ed1; backdrop-filter: blur(5px); }
body dialog .close-button { color: var(--muted); border: 1px solid var(--border); background: transparent; box-shadow: none; padding: 0; margin: 0; width: 36px; height: 36px; min-height: 36px; flex-shrink: 0; }
.combat-dialog .dialog-top, .combat-save-bar { background: var(--panel); }
.combat-actions button, .combat-dialog button:not(.close-button), .combat-dialog .button,
.counter button, .season-tabs button, .owned-filters button, .calc-tabs button, .calc-tabs a,
.mode-tabs button, .osiris button:not(.building):not(.gold-action) {
  background: var(--panel-raised); color: var(--text); border-color: var(--border); box-shadow: none;
}
.season-tabs button[aria-pressed=true], .owned-filters button[aria-pressed=true],
.calc-tabs button[aria-pressed=true], .mode-tabs button[aria-pressed=true],
.commander-card button[aria-pressed=true] { background: var(--gold); color: #222a25; border-color: var(--gold); }
.owned-item, .mode-option, .combat-profile-section, .combat-source-records { background: var(--inset); border-color: var(--border); }
.owned-item:has(input:checked), .mode-option:has(input:checked) { background: #d9b67512; border-color: var(--gold); }
.combat-facts div, .combat-profile-section .combat-facts>div, .combat-marches-section .combat-march { background: var(--panel-raised); border-color: var(--border); }
.combat-tags span, .combat-commanders>span, .combat-profile-section .combat-commanders>span,
.combat-marches-section .combat-march-heading, .combat-marches-section .combat-march-flags { background: #15221f; border-color: var(--border); }
.combat-march, .combat-role-fields, .combat-march-editor, .combat-profile-summary,
.combat-dialog .combat-profile-section>h3, .combat-march-flags>div+div,
.combat-source-records p, .saved-player-roster { border-color: var(--border); }
.combat-march-flags dd { color: var(--text); }
.combat-march-flags dd[data-state=yes] { color: #a7e1cd; }
.combat-march-flags dd[data-state=no] { color: #f2c4a7; }
.osiris #group-tabs button { border-left-color: var(--group-color); }
.osiris #group-tabs button[aria-pressed=true] { background: #2a3b33; border-color: var(--group-color); }
.squad-card { border-top-color: var(--group-color); }

.language-switch button { background: var(--panel); color: var(--muted); border-color: var(--border); box-shadow: none; }
.language-switch button[aria-pressed="true"] { background: var(--gold); color: #222a25; border-color: var(--gold); }

/* Roster tables and the standalone KvK report. */
th { background: #20312c; color: #c7bd9f; }
td { color: var(--text); border-bottom-color: var(--line); }
td small, td:last-child { color: var(--muted); }
td:nth-child(3) { color: var(--gold); }
tbody tr:hover { background: #ffffff04; }
.report-header { border-bottom-color: var(--line); }
.report-header h1 { color: var(--text); text-shadow: none; }
.report-header::before { color: var(--gold); text-shadow: none; filter: none; }
.report-header::after { color: var(--muted); }
.stat { border-top: 1px solid #d9b67555; }
.stat b { font-family: var(--sans); font-weight: 500; color: var(--text); text-shadow: none; }
.stat span, .topgrid>div>small, .norm small, .norm .eyebrow, .norm h3 span,
.player>small, .controls label, #count { color: var(--muted); }
.stat:nth-child(2), .norm:first-child { background: linear-gradient(140deg,#29372c,#1c2b26); border: 1px solid #d9b67555; }
.stat:nth-child(2) b, .norm:first-child h3, .norm h3, .value, .leader .value { color: var(--gold); }
.topgrid h2 { background: transparent; color: var(--text); font: 500 28px var(--serif); border-top: 0; }
.topgrid>div>small { background: transparent; border-bottom: 1px solid var(--line); }
.leader { color: var(--text); border-bottom-color: var(--line); }
.leader .rank { color: var(--muted); }
.leader:nth-of-type(1) { --podium-bg: #d9b67514; --podium-line: #d9b67544; }
.leader:nth-of-type(2) { --podium-bg: #c1ccc20c; --podium-line: #b3c2b32e; }
.leader:nth-of-type(3) { --podium-bg: #b57e5112; --podium-line: #b57e5133; }
.leader:nth-of-type(-n+3) b { color: var(--text); }
.leader:nth-of-type(-n+3) .value { color: var(--gold); }
body:has(.report-header) .formula { background: #22312a; border-color: #d9b67544; color: var(--gold); border-radius: 8px; box-shadow: none; }
.norm:first-child::after { background: var(--gold); color: #222a25; border-color: var(--gold); }
#players { border-color: var(--line); }
.player h4 { color: var(--text); }
.player .metrics>div { background: var(--inset); border-color: var(--border); border-radius: 5px; box-shadow: none; }
.player .metrics>div:first-child { background: #d9b67510; border-color: #d9b67544; }
.player .metrics span { color: var(--muted); }
.player .metrics b { color: var(--text); }
.player .metrics>div:first-child b, .player .status b { color: var(--gold); }
.player .status { background: #15221f; color: var(--muted); border-color: var(--border); border-left-color: var(--gold); }
body:has(.report-header) #more { background: linear-gradient(120deg,#e1c795,#bd995b); color: #222a25; border-color: #ead0a0; box-shadow: none; }
footer { border-color: var(--line); color: var(--muted); }

/* The login screen is part of the same kingdom. */
body:has(.login-shell) { background: radial-gradient(ellipse at 50% 0,#263b32,transparent 65%),var(--bg); }
.login-shell { padding-top: 64px; }
.login-brand { color: var(--text); font-family: var(--sans); font-size: 16px; }
.login-brand b { color: var(--gold); font-size: 22px; }
.login-card { border-top: 1px solid #d9b67566; }
.login-card h1 { font: 500 42px/1.1 var(--serif); }
.login-card button { border: 1px solid #ead0a0; }

@media(max-width:760px) {
  .site-header { min-height: 78px; }
  .site-header .crest { width: 34px; height: 39px; font-size: 25px; }
  .site-header .brand-name { font-size: 12px; }
  .site-header .brand-name b { font-size: 15px; }
  .site-header .brand small { font-size: 7px; letter-spacing: 1.7px; }
  .site-header nav { font-size: 12px; }
  .tools-page h1, .calc-heading h1 { font-size: 38px; }
  .tools-intro, .calc-heading, .osiris-heading { padding-bottom: 20px; }
  .login-shell { padding-top: 32px; }
  .login-card h1 { font-size: 36px; }
}
}