/* A consistent reading scale for the working screens: names, quantities, then detail. */
:root {
  --text: #e3ddd4;
  --muted: #b8ada1;
  --gold-muted: #bc9f6b;
  --read-small: 12px;
  --read-body: 14px;
  --read-label: 13px;
}
body { font-size: var(--read-body); line-height: 1.6; }
.site-shell { width: min(1280px, calc(100% - 64px)); }
.eyebrow, .step-label { font-size: 11px; line-height: 1.5; letter-spacing: .11em; }
.button, .text-button { font-size: 13px; line-height: 1.4; }
.help-copy, .help-copy.small, .status-line, .dialog-description,
.profile-help, .formation-help, .xp-help, .xp-prediction-note,
.captain-collection-heading p, .captain-completion-note,
small.captain-completion-note, .collection-note, .collection-status {
  font-size: 12px; line-height: 1.65; color: #baac97;
}
.info-panel > p, .info-table, .merc-table { font-size: 14px; line-height: 1.65; }
.merc-card-copy > p:not(.eyebrow), .merc-count, .merc-card > button,
.source-details, .source-details > summary, .dialog-footer p,
.result-note, .section-note { font-size: 12px; line-height: 1.6; }
.merc-card .eyebrow, .dialog-heading .eyebrow { font-size: 11px; }
.merc-card h2 { font-size: 20px; line-height: 1.35; }
.info-panel h2, .advanced-panel h2, .collection-section-heading h2,
.captain-collection-heading h2, .dialog-heading h2 { font-size: 24px; line-height: 1.35; }
.field-pair label, .xp-field, .collection-field,
#profile-form .identity-fields label, .formation-name-field,
.dialog-body > label { font-size: 13px; }
.field-pair input, .xp-field input, .xp-field select,
#profile-form .identity-fields input, .collection-field input,
.collection-badge-search input { font-size: 14px; min-height: 42px; }
.player-autocomplete > button { min-height: 48px; padding: 9px 12px; }
.player-autocomplete > button strong { font-size: 14px; }
.player-autocomplete > button small, .player-autocomplete-empty { font-size: 12px; }

/* The account strip stays compact while its controls remain easy to read. */
.site-shell > .profile-panel { grid-template-columns: minmax(170px, 235px) 40px minmax(230px, 1fr) auto auto; gap: 11px 12px; padding: 13px 0; }
.site-shell > .profile-panel .profile-picker,
.profile-quick-formation > label,
.site-shell > .profile-panel > .language-control { font-size: 11px; color: #c7b596; }
.site-shell > .profile-panel #profile-select,
.profile-panel #language-select, .quick-formation-controls > select { height: 40px; min-height: 40px; font-size: 13px; }
.profile-panel .icon-button, .profile-quick-formation .icon-button { width: 40px; height: 40px; }
.site-shell > .profile-panel .profile-management > summary { min-height: 40px; font-size: 12px; }
.profile-identity-summary .profile-identity-facts dt { font-size: 11px; }
.profile-identity-summary .profile-identity-facts dd { font-size: 13px; }
.profile-identity-summary .profile-completion-heading { font-size: 11px; }
.profile-data-mode, .profile-data-time { font-size: 10px; line-height: 1.5; }
.profile-data-time time, .profile-data-time > span:last-child { font-size: 11px; }
.site-header { min-height: 68px; }
.site-header .brand-name { font-size: 25px; }
.site-header .brand-subtitle { font-size: 9px; letter-spacing: .11em; }
.site-header .section-navigation > a,
.site-header .section-navigation > a[data-page="advanced"] { padding: 12px 11px 10px; font-size: 13px; }
.tier-card-title { font-size: 17px; }
.tier-card-subtitle { font-size: 12px; line-height: 1.5; }

/* A clear, calm capacity panel. Its existing sticky positioning is retained. */
.capacity-panel { padding: 21px; border-radius: 6px; }
.capacity-panel .panel-heading h2 { margin-bottom: 6px; font-size: 22px; line-height: 1.3; }
.capacity-panel .panel-heading p, .capacity-panel #formation-summary,
.capacity-panel #formation-unsaved, .capacity-panel #formation-roster-warning,
.capacity-panel .status-line { font-size: 12px; line-height: 1.6; }
.capacity-panel .budget-field { margin-bottom: 16px; }
.capacity-panel .budget-field > label { margin-bottom: 7px; font-size: 14px; }
.capacity-panel .field-hint { font-size: 12px; }
.capacity-panel .budget-field > input { height: 50px; font-size: 24px; font-weight: 550; letter-spacing: -.025em; }
.capacity-panel .budget-field .resource-icon { width: 25px; height: 27px; object-fit: contain; }
.capacity-panel .checkbox-label { font-size: 13px; }
.capacity-panel #run-button { min-height: 48px; font-size: 14px; }
.results-heading { margin-bottom: 14px; }
.results-heading h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.02em; }
.results-actions .button, .results-actions .checkbox-label { font-size: 12px; }
.march-guide { margin-bottom: 16px; }
.march-guide p, .march-guide .text-button { font-size: 12px; line-height: 1.65; }
.result-group { border-radius: 5px; }
.result-group-heading { gap: 12px; padding: 18px; }
.result-group-heading h2 { font-size: 23px; line-height: 1.3; letter-spacing: .01em; }
.result-group-heading .eyebrow { font-size: 11px; }
.result-group-heading .group-total { font: 550 21px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.result-group-heading .group-resource-icon { width: 36px; height: 36px; object-fit: contain; }
.march-column-labels { padding: 9px 0; font-size: 12px; line-height: 1.4; }
.march-column-labels span { padding: 0 16px; }
.march-unit { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; min-height: 128px; padding: 16px; }
.unit-portrait { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 3px; }
.unit-portrait img { object-position: center; image-rendering: auto; }
.unit-portrait.portrait-native { filter: drop-shadow(0 3px 4px #0005); }
.march-unit-heading { min-height: 25px; margin-bottom: 7px; gap: 5px 7px; }
.march-unit .unit-name { font-size: 14px; line-height: 1.35; font-weight: 550; }
.march-unit .tier-badge { padding: 2px 5px; font-size: 11px; line-height: 1.3; }
.stack-amount { min-height: 43px; padding: 6px 10px; font-size: 25px; line-height: 1.15; font-weight: 650; letter-spacing: -.025em; }
.stack-amount svg { width: 14px; height: 14px; }
.order-actions button { min-width: 34px; min-height: 30px; }
.unit-portrait:focus-visible { transform: scale(1.28); }
.damage-note, .capacity-label, .capacity-values, .warnings { font-size: 12px; line-height: 1.6; }
.damage-note { gap: 8px 20px; padding: 15px 0; }
.site-footer p, .site-footer .footer-note { font-size: 12px; line-height: 1.5; }

/* Row tracking is secondary to the troops, but still readable. */
.march-marker-group { gap: 5px 10px; padding: 9px 12px; }
.march-marker-heading { gap: 8px; font-size: 12px; min-height: 28px; }
.march-marker-heading > strong { max-width: 140px; }
.march-marker-label { font-size: 11px; }
.march-marker-location { max-width: 170px; min-height: 27px; }
.march-marker-help { flex-basis: 19px; width: 19px; height: 19px; font-size: 12px; }
.march-marker-steps > button { font-size: 14px; }
.march-marker-actions > button { min-width: 32px; min-height: 32px; }
.march-marker-actions > .march-marker-reset,
.march-marker-actions > [data-march-marker-action="reset"] { max-width: 120px; font-size: 11px; }
.march-marker-names { min-height: 18px; font-size: 11px; line-height: 18px; }
.result-group[data-march-category] .march-row { scroll-margin-top: 174px; }
.result-group[data-march-category] .march-row.is-march-past::after { top: 5px; left: 5px; font-size: 12px; }

/* The fill-up choice belongs beside its own troop group, not in another setup panel. */
.fill-up-control { display: grid; grid-template-columns: minmax(110px, auto) minmax(180px, 1fr); align-items: center; gap: 7px 16px; padding: 15px 18px; border-top: 1px solid #84643966; border-bottom: 1px solid #84643966; background: #261f18; }
.fill-up-control > label, .fill-up-control > span { min-width: 0; color: #e0c89d; font-size: 13px; font-weight: 550; }
.fill-up-select { width: 100%; max-width: 100%; min-width: 0; min-height: 42px; padding: 8px 30px 8px 11px; border: 1px solid #8b6b41; border-radius: 4px; background: #171519; color: #edddbe; font: 500 14px/1.4 var(--sans); }
.fill-up-select:focus-visible { outline: 2px solid #e2bd77; outline-offset: 2px; }
.fill-up-note { grid-column: 1 / -1; margin: 0; color: #bdad94; font-size: 12px; line-height: 1.55; }
.fill-up-badge { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 6px; border: 1px solid #bda06d88; border-radius: 3px; color: #f0cf8d; background: #a8803626; font: 550 10px/1.35 var(--sans); white-space: nowrap; }
.march-unit.is-fill-up { box-shadow: inset 0 0 0 1px #c4a36355; }
.result-group[data-march-category] .is-march-current .fill-up-badge { color: #4c3615; border-color: #9c783f; background: #f2d99d; }

/* Roster cards keep direct editing, with readable names and useful target sizes. */
.captain-collection-heading { margin: 25px 0 19px; }
.captain-completion-panel { padding: 16px 18px; }
.captain-completion-heading h3 { font-size: 14px; }
.captain-mode-tabs > button, .captain-faction-filters > button { font-size: 13px; }
.captain-faction-filters small, .captain-faction-heading > span { font-size: 12px; }
.captain-faction-heading h3 { font-size: 18px; }
#captain-roster-page .captain-owned-grid { gap: 12px; }
#captain-roster-page .captain-card-edit { padding: 10px 7px 4px; }
#captain-roster-page .captain-card-art { width: 100px; height: 100px; margin-bottom: 6px; }
#captain-roster-page .captain-card-name { min-height: 32px; font-size: 13px; line-height: 1.35; font-weight: 550; }
#captain-roster-page .captain-inline-level { top: 8px; right: 6px; }
#captain-roster-page .captain-inline-level input { width: 52px; height: 31px; font-size: 14px; }
#captain-roster-page .captain-inline-stars { gap: 2px; margin: 0 7px 5px; }
#captain-roster-page .captain-inline-stars button { height: 31px; font-size: 18px; }
#captain-roster-page .captain-inline-stars button:first-child { font-size: 12px; }
#captain-roster-page .captain-card-completion { margin-bottom: 5px; font-size: 10px; line-height: 1.4; }
#captain-roster-page .captain-card-footer { min-height: 38px; padding: 3px 6px; }
#captain-roster-page .captain-card-footer .captain-card-owned { min-height: 30px; flex-basis: 20px; width: 20px; }
#captain-roster-page .captain-card-footer .captain-owned-checkbox { width: 18px; height: 18px; }
#captain-roster-page .captain-card-footer .captain-not-owned { min-height: 30px; font-size: 10px; }
#captain-roster-page .captain-inline-undo { width: 28px; min-height: 30px; }
#captain-roster-page .captain-card-footer .captain-info { width: 28px; height: 30px; min-height: 30px; font-size: 15px; }
#captain-roster-page .hero-vip-pill { font-size: 11px; }
.captain-info-content > p, .captain-bonuses > li, .hero-bonus-description { font-size: 14px; line-height: 1.7; }
.captain-info-content > h3, .captain-info-dialog a, .hero-bonus-conditions,
.captain-resource-details .xp-field-grid label, .captain-xp-details > summary,
.captain-undo-help, .captain-editor-rank { font-size: 12px; line-height: 1.6; }
.collection-section-heading p, .collection-field, .collection-hall-bonuses > summary,
.collection-badge-search, .collection-source, .collection-active-badge small,
.collection-badge-choice > label, .collection-effects li p { font-size: 12px; }
.collection-active-badge strong { font-size: 13px; }

@media (hover: hover) and (pointer: fine) {
  .unit-portrait:hover { transform: scale(1.28); box-shadow: 0 6px 18px #0008; }
}
@media (max-width: 1100px) {
  .site-shell { width: calc(100% - 40px); }
  .site-shell > .profile-panel { grid-template-columns: minmax(0, 1fr) 40px minmax(220px, 1.3fr) auto; grid-template-areas: "account edit setup language" "identity identity identity manage" "refresh refresh refresh refresh"; }
  .march-unit { grid-template-columns: 86px minmax(0, 1fr); gap: 12px; padding: 14px 12px; }
  .unit-portrait { width: 86px; height: 86px; }
  .stack-amount { font-size: 24px; }
}
@media (max-width: 900px) {
  .site-header .section-navigation > a, .site-header .section-navigation > a[data-page="advanced"] { font-size: 12px; }
  .march-unit { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .unit-portrait { width: 96px; height: 96px; }
}
@media (max-width: 680px) {
  .site-shell { width: calc(100% - 28px); }
  .site-shell > .profile-panel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "language manage" "account edit" "setup setup" "identity identity" "refresh refresh"; gap: 9px 10px; }
  .site-header .brand-name { font-size: 23px; }
  .site-header .brand-subtitle { font-size: 8px; }
  .site-header .section-navigation > a, .site-header .section-navigation > a[data-page="advanced"] { font-size: 11px; line-height: 1.4; padding: 10px 5px; }
  .tier-card { padding: 11px 9px; }
  .tier-card-title { font-size: 14px; }
  .tier-card-subtitle { font-size: 11px; }
  .result-group-heading { padding: 15px 13px; }
  .result-group-heading h2 { font-size: 21px; }
  .result-group-heading .group-total { font-size: 18px; }
  .march-unit { grid-template-columns: 70px minmax(0, 1fr); gap: 9px; min-height: 108px; padding: 13px 10px; }
  .unit-portrait { width: 70px; height: 70px; }
  .march-unit .unit-name { font-size: 13px; }
  .march-unit .tier-badge { font-size: 10px; }
  .stack-amount { min-height: 39px; padding: 6px 7px; font-size: 22px; }
  .march-column-labels { font-size: 11px; }
  .march-column-labels span { padding: 0 10px; }
  .fill-up-control { grid-template-columns: 1fr; gap: 6px; padding: 13px; }
  .fill-up-select { font-size: 13px; }
  .fill-up-note { font-size: 11px; }
  #captain-roster-page .captain-owned-grid { gap: 10px; }
  #captain-roster-page .captain-card-art { width: 96px; height: 96px; }
  #captain-roster-page .captain-inline-stars { gap: 1px; margin-left: 5px; margin-right: 5px; }
  #captain-roster-page .captain-inline-stars button { font-size: 16px; }
  .collection-active-badge strong { font-size: 12px; }
}
@media (max-width: 480px) {
  .site-shell { width: calc(100% - 24px); }
  .site-header { align-items: flex-start; gap: 9px; }
  .site-header > .section-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; gap: 3px 8px; width: 100%; margin-top: 4px; }
  .site-header .section-navigation > a,
  .site-header .section-navigation > a[data-page="advanced"] { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 6px; font-size: 12px; line-height: 1.4; text-align: center; overflow-wrap: normal; word-break: normal; }
  .march-marker-group { grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }
  .march-marker-heading { gap: 5px; font-size: 11px; }
  .march-marker-location { font-size: 11px; max-width: 130px; }
  .march-marker-actions > .march-marker-reset,
  .march-marker-actions > [data-march-marker-action="reset"] { max-width: 82px; font-size: 10px; }
  .march-marker-actions > button { min-width: 27px; min-height: 30px; padding: 3px 5px; }
  .march-marker-names { font-size: 11px; }
  .march-marker-steps { gap: 4px; }
  .march-marker-steps > button { flex-basis: 34px; min-width: 34px; width: 34px; height: 34px; min-height: 34px; font-size: 13px; }
  .march-unit { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; min-height: 103px; padding: 12px 8px; }
  .unit-portrait { width: 56px; height: 56px; }
  .march-unit .unit-name { font-size: 12px; line-height: 1.35; }
  .march-unit-heading { gap: 3px 5px; min-height: 26px; margin-bottom: 5px; }
  .march-unit .tier-badge { font-size: 10px; padding: 1px 4px; }
  .stack-amount { min-height: 36px; padding: 5px 5px; font-size: 18px; letter-spacing: -.035em; }
  .stack-amount svg { display: none; }
  .result-group-heading .group-resource-icon { width: 30px; height: 30px; }
  .result-group-heading h2 { font-size: 19px; }
  .result-group-heading .group-total { font-size: 17px; }
  .march-column-labels { font-size: 10px; }
  .fill-up-badge { font-size: 9px; white-space: normal; }
  #captain-roster-page .captain-card-footer .captain-not-owned { font-size: 9px; padding: 2px; }
  #captain-roster-page .captain-card-name { font-size: 12px; }
  #captain-roster-page .captain-inline-stars button { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .unit-portrait { transition: none; }
}