/* Pacific Command - Mission Builder
   Fluent 2 web aesthetic.
   Tokens follow Fluent's alias-token model: semantic names, never raw hex in components.
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* -- Surfaces */
  --bg:                       #faf9f8;
  --neutral-bg-1:             #ffffff;
  --neutral-bg-2:             #fafafa;
  --neutral-bg-3:             #f5f5f5;
  --neutral-bg-4:             #ebebeb;
  --neutral-bg-1-hover:       #f5f5f5;
  --neutral-bg-1-pressed:     #e0e0e0;
  --neutral-bg-1-selected:    #ebebeb;

  /* -- Text */
  --neutral-fg-1:             #242424;
  --neutral-fg-2:             #424242;
  --neutral-fg-3:             #616161;
  --neutral-fg-4:             #757575;
  --neutral-fg-disabled:      #bdbdbd;
  --neutral-fg-on-brand:      #ffffff;

  /* -- Strokes */
  --neutral-stroke-1:         #d1d1d1;
  --neutral-stroke-2:         #e0e0e0;
  --neutral-stroke-3:         #f0f0f0;
  --neutral-stroke-accessible:#616161;
  --neutral-stroke-divider:   #ebebeb;

  /* -- Brand (Pacific Command navy) */
  --brand-bg:                 #114e7a;
  --brand-bg-hover:           #0e4267;
  --brand-bg-pressed:         #0a3553;
  --brand-bg-selected:        #0e4267;
  --brand-bg-2:               #eef4fa;
  --brand-bg-2-hover:         #dfeaf4;
  --brand-bg-2-pressed:       #cfddec;
  --brand-fg-1:               #114e7a;
  --brand-fg-link:            #0f4671;
  --brand-stroke-1:           #114e7a;

  /* -- Status */
  --status-danger-fg:         #b10e1c;
  --status-danger-bg:         #fdf3f4;
  --status-warning-fg:        #8a5300;
  --status-warning-bg:        #fff4ce;
  --status-success-fg:        #0e700e;
  --status-success-bg:        #e6f4e6;

  /* -- Corner radius */
  --r-2: 2px; --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-12: 12px;
  --r-pill: 999px;

  /* -- Spacing scale (Fluent sizes 20–560) */
  --size-20:  2px;  --size-40:  4px;  --size-60:  6px;  --size-80:  8px;
  --size-100: 10px; --size-120: 12px; --size-160: 16px; --size-200: 20px;
  --size-240: 24px; --size-280: 28px; --size-320: 32px; --size-360: 36px;
  --size-400: 40px; --size-480: 48px; --size-560: 56px;

  /* -- Elevation (key + ambient) */
  --shadow-2:
    0 0 2px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.14);
  --shadow-4:
    0 0 2px rgba(0,0,0,0.12),
    0 2px 4px rgba(0,0,0,0.14);
  --shadow-8:
    0 0 2px rgba(0,0,0,0.12),
    0 4px 8px rgba(0,0,0,0.14);
  --shadow-16:
    0 0 2px rgba(0,0,0,0.12),
    0 8px 16px rgba(0,0,0,0.14);
  --shadow-28:
    0 0 8px rgba(0,0,0,0.12),
    0 14px 28px rgba(0,0,0,0.20);
  --shadow-brand-8:
    0 0 2px rgba(17, 78, 122, 0.24),
    0 4px 8px rgba(17, 78, 122, 0.18);

  /* -- Motion */
  --d-50:  50ms;
  --d-100: 100ms;
  --d-150: 150ms;
  --d-200: 200ms;
  --ease-out:  cubic-bezier(0.10, 0.90, 0.20, 1.00);
  --ease-in:   cubic-bezier(0.70, 0.00, 1.00, 0.50);
  --ease-both: cubic-bezier(0.33, 0.00, 0.67, 1.00);
  --ease-max:  cubic-bezier(0.80, 0.00, 0.20, 1.00);
}

html, body {
  background: var(--bg);
  color: var(--neutral-fg-1);
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system,
               BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* --- Buttons ------------------------------------------- */

.btn {
  appearance: none;
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-1);
  border: 1px solid var(--neutral-stroke-1);
  border-radius: var(--r-4);
  padding: 5px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-60);
  min-height: 32px;
  transform: scale(1);
  transition:
    background-color var(--d-100) var(--ease-both),
    border-color var(--d-100) var(--ease-both),
    color var(--d-100) var(--ease-both),
    box-shadow var(--d-100) var(--ease-both),
    transform 60ms cubic-bezier(0.4, 0, 0.6, 1);
  user-select: none;
  position: relative;
}
.btn:hover  { background: var(--neutral-bg-1-hover); }
.btn:active {
  background: var(--neutral-bg-1-pressed);
  border-color: var(--neutral-stroke-1);
  transform: scale(0.96);
}
.btn:focus-visible {
  outline: none;
  border-color: var(--neutral-stroke-accessible);
  box-shadow: 0 0 0 2px var(--neutral-bg-1), 0 0 0 3px var(--neutral-stroke-accessible);
}
.btn:disabled {
  color: var(--neutral-fg-disabled);
  cursor: not-allowed;
  background: var(--neutral-bg-2);
}

.btn-primary {
  background: var(--brand-bg);
  color: var(--neutral-fg-on-brand);
  border-color: var(--brand-bg);
  box-shadow: var(--shadow-brand-8);
}
.btn-primary:hover  {
  background: var(--brand-bg-hover);
  border-color: var(--brand-bg-hover);
  box-shadow: var(--shadow-brand-8), 0 2px 8px rgba(17, 78, 122, 0.25);
}
.btn-primary:active {
  background: var(--brand-bg-pressed);
  border-color: var(--brand-bg-pressed);
  box-shadow: none;
  transform: scale(0.96);
}
.btn-primary:focus-visible {
  box-shadow:
    0 0 0 1px var(--neutral-fg-on-brand) inset,
    0 0 0 3px var(--brand-bg);
}

.btn-subtle {
  background: transparent;
  border-color: transparent;
}
.btn-subtle:hover  { background: var(--neutral-bg-1-hover); }
.btn-subtle:active { background: var(--neutral-bg-1-pressed); }

.btn-danger {
  color: var(--status-danger-fg);
  background: transparent;
  border-color: transparent;
}
.btn-danger:hover  { background: var(--status-danger-bg); }

.btn-icon {
  width: 32px; height: 32px;
  padding: 0;
}

.btn .ico {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn-primary .ico { color: currentColor; }

/* --- Inputs -------------------------------------------- */

.input {
  appearance: none;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-1);
  border-bottom-color: var(--neutral-stroke-accessible);
  border-radius: var(--r-4);
  padding: 5px 10px;
  min-height: 32px;
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-fg-1);
  width: 100%;
  transition: border-color var(--d-100) var(--ease-both);
}
.input::placeholder { color: var(--neutral-fg-3); }
.input:hover { border-color: var(--neutral-stroke-accessible); }
.input:focus {
  outline: none;
  border-color: var(--neutral-stroke-1);
  border-bottom: 2px solid var(--brand-bg);
  padding-bottom: 4px;
}

.input.bare {
  border-color: transparent;
  background: transparent;
}
.input.bare:hover {
  background: var(--neutral-bg-1-hover);
}
.input.bare:focus {
  background: var(--neutral-bg-1);
  border-color: var(--neutral-stroke-1);
  border-bottom: 2px solid var(--brand-bg);
  padding-bottom: 4px;
}

/* --- Command bar --------------------------------------- */

.cmdbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--size-160);
  height: 48px;
  padding: 0 var(--size-200);
  background: var(--neutral-bg-1);
  border-bottom: 1px solid var(--neutral-stroke-2);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-2);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--size-100);
  justify-self: start;
  min-width: 0;
}
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand-bg);
  color: var(--neutral-fg-on-brand);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 12px;
}
.brand-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--neutral-fg-1);
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: var(--size-80);
}
.brand-name .lite {
  color: var(--neutral-fg-3);
  font-weight: 400;
}
.spacer { flex: 1; }
.actions {
  display: flex; align-items: center; gap: var(--size-40);
}
.cmdbar-actions {
  display: flex;
  align-items: center;
  gap: var(--size-80);
  justify-self: end;
  min-width: 0;
}

/* Upper-left mode toggle cluster (Sci-fi / Preview / Literal / Historical) */
.cmdbar-left {
  display: flex;
  align-items: center;
  gap: var(--size-160);
  justify-self: start;
  min-width: 0;
}
.mode-toggles {
  display: flex;
  align-items: center;
  gap: var(--size-40);
  flex-wrap: nowrap;
}
.toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 99px;
  border: 1.5px solid var(--neutral-stroke-1);
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.toggle-btn:hover {
  border-color: var(--brand-stroke-1);
  color: var(--brand-fg-1);
  background: var(--brand-bg-2);
}
.toggle-btn:active { transform: scale(0.95); }
.toggle-btn.active {
  background: var(--brand-bg);
  border-color: var(--brand-bg);
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 78, 122, 0.30);
}
.toggle-btn.active:hover { background: var(--brand-bg-hover); color: #fff; }
.toggle-btn .tb-ico { display: inline-flex; }
.toggle-btn .tb-ico svg { width: 14px; height: 14px; }

/* --- Page ---------------------------------------------- */

.page {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--size-480) var(--size-320) var(--size-560);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--size-240);
  margin-bottom: var(--size-280);
  padding-bottom: var(--size-200);
  border-bottom: 1px solid var(--neutral-stroke-divider);
}
.page-head .titleblock { flex: 1; min-width: 0; }
.page-head h1 {
  font-family: 'Jost', 'Segoe UI Variable', sans-serif;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.page-head h1 input {
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  padding: 0 var(--size-40);
  margin-left: calc(var(--size-40) * -1);
  border-radius: var(--r-4);
  width: 100%;
  transition: background var(--d-100) var(--ease-both),
              border-color var(--d-100) var(--ease-both);
}
.page-head h1 input { cursor: text; }
.page-head h1 input:hover  {
  background: var(--neutral-bg-1-hover);
  border-color: var(--neutral-stroke-accessible);
}
.page-head h1 input:focus  {
  outline: none;
  background: var(--neutral-bg-1);
  border-color: var(--neutral-stroke-1);
}
.page-head .sub {
  color: var(--neutral-fg-3);
  font-size: 14px;
  line-height: 20px;
  margin-top: var(--size-60);
  display: flex;
  align-items: center;
  gap: var(--size-160);
  flex-wrap: wrap;
}
.page-head .sub .item { display: inline-flex; align-items: baseline; gap: var(--size-40); }
.page-head .sub strong { color: var(--neutral-fg-1); font-weight: 600; }
.page-head .summary { text-align: right; }
.page-head .summary .pts {
  font-family: 'IBM Plex Mono', 'Segoe UI Variable', monospace;
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  color: var(--neutral-fg-1);
  font-variant-numeric: tabular-nums;
}
.page-head .summary .pts-lbl {
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-fg-3);
  font-weight: 400;
}

/* --- Tooltip (data-tip) -------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after,
[data-tip]::before {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 200;
  left: 50%;
}
[data-tip]::after {
  content: attr(data-tip);
  top: calc(100% + 10px);
  transform: translate(-50%, 4px);
  transition: opacity 80ms linear 200ms, transform 80ms linear 200ms;
  background: #1f1f1f;
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--r-4);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  white-space: pre-wrap;
  width: max-content;
  max-width: 280px;
  text-align: left;
  box-shadow: var(--shadow-16);
}
[data-tip]::before {
  content: "";
  top: calc(100% + 4px);
  transform: translate(-50%, 4px);
  transition: opacity 80ms linear 200ms, transform 80ms linear 200ms;
  border: 6px solid transparent;
  border-bottom-color: #1f1f1f;
  width: 0; height: 0;
}
[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}
[data-tip].tip-above::after { top: auto; bottom: calc(100% + 10px); transform: translate(-50%, -4px); border-bottom-color: transparent; }
[data-tip].tip-above::before { top: auto; bottom: calc(100% + 4px); transform: translate(-50%, -4px); border-bottom-color: transparent; border-top-color: #1f1f1f; }
[data-tip].tip-above:hover::after, [data-tip].tip-above:hover::before { transform: translate(-50%, 0); }

/* --- Task force card ----------------------------------- */

.tf {
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  margin-bottom: var(--size-240);
  overflow: visible;
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--d-150) var(--ease-both);
}
.tf:focus-within { box-shadow: var(--shadow-4); }

.tf-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--size-160);
  padding: var(--size-200) var(--size-240) var(--size-160);
}
/* --- Fleet sidebar (floating left, fixed) ----------- */
.fleet-sidebar {
  position: fixed;
  left: var(--size-200);
  top: 64px;
  width: 320px;
  max-height: calc(100vh - 84px);
  overflow: visible;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  padding: var(--size-160);
  box-shadow: var(--shadow-4);
  display: none;
  z-index: 5;
}
@media (min-width: 1240px) {
  .fleet-sidebar { display: block; }
  .page { margin-left: max(0px, calc((100% - 1280px) / 2 + 356px)); margin-right: auto; }
}
.app.preview-mode .fleet-sidebar { display: none; }

.sb-section {
  padding-bottom: var(--size-120);
  margin-bottom: var(--size-120);
  border-bottom: 1px solid var(--neutral-stroke-divider);
}
.sb-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sb-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-fg-3);
  margin-bottom: var(--size-40);
}
.sb-fleet-name {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--neutral-fg-1);
  letter-spacing: -0.005em;
}
.sb-budget .sb-row {
  display: flex;
  align-items: baseline;
  gap: var(--size-40);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--neutral-fg-1);
  margin-bottom: var(--size-80);
}
.sb-cost-now { color: var(--neutral-fg-1); }
.sb-cost-sep { color: var(--neutral-fg-3); }
.sb-budget-input {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--neutral-stroke-1);
  border-radius: var(--r-4);
  width: 64px;
  padding: 2px 6px;
  font: inherit;
  color: var(--neutral-fg-2);
  text-align: right;
}
.sb-budget-input:hover { background: var(--neutral-bg-1-hover); border-style: solid; }
.sb-budget-input:focus { outline: none; background: var(--neutral-bg-1); border-color: var(--brand-bg); border-style: solid; }
.sb-budget-input::-webkit-outer-spin-button,
.sb-budget-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-cost-unit {
  font-family: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--neutral-fg-3);
}
.sb-bar {
  height: 6px;
  background: var(--neutral-bg-4);
  border-radius: 999px;
  overflow: hidden;
}
.sb-bar i {
  display: block;
  height: 100%;
  background: var(--brand-bg);
  transition: width var(--d-200) var(--ease-both);
}
.sb-bar.over i { background: var(--status-danger-fg); }
.sb-bar-meta {
  display: flex; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--neutral-fg-3);
  margin-top: var(--size-40);
}

.sb-tf-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--size-60);
  align-items: baseline;
  padding: 3px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--neutral-fg-2);
}
.sb-tf-row .sb-tf-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--neutral-fg-3);
}
.sb-tf-row .sb-tf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tf-row .sb-tf-cost {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--neutral-fg-1);
}
.sb-tf-row.sb-tf-total {
  border-top: 1px solid var(--neutral-stroke-divider);
  margin-top: 4px;
  padding-top: 6px;
  font-weight: 600;
}
.sb-tf-row.sb-tf-total .sb-tf-name { color: var(--neutral-fg-1); }
.sb-empty { font-size: 12px; color: var(--neutral-fg-3); font-style: italic; }
.sb-hulls {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: var(--neutral-fg-1);
}

/* --- Fleet mods section (top of main content) ------- */
.fleet-mods {
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  padding: var(--size-160) var(--size-240);
  margin-bottom: var(--size-240);
  box-shadow: var(--shadow-2);
}
.fleet-mods-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--size-120);
}
.fleet-mods-head h2 {
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.fleet-mods-row {
  display: flex; align-items: center;
  gap: var(--size-80);
  flex-wrap: wrap;
}
.fleet-mods .doctrine-presets { margin-top: var(--size-160); }

/* roundel mini for page-head sub */
.page-head .sub img { vertical-align: middle; margin-right: 4px; }
.roundel-btn {
  background: transparent;
  border: 2px solid var(--neutral-stroke-2);
  width: 36px; height: 36px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--d-100), box-shadow var(--d-100), transform var(--d-100);
}
.roundel-btn img { width: 26px; height: 26px; display: block; }
.roundel-btn:hover { border-color: var(--neutral-stroke-1); }
.roundel-btn.active { border-color: var(--brand-bg); box-shadow: 0 0 0 2px var(--brand-bg-2); }
.tf-head {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: var(--size-120);
  padding: var(--size-160) var(--size-240) var(--size-120);
}
.tf-roundel-slot {
  width: 36px; height: 36px;
  display: grid; place-items: center;
}
.tf-roundel-slot img { width: 36px; height: 36px; display: block; }

/* Faction toggle row */
.tf-faction-row {
  display: flex; align-items: center;
  gap: var(--size-120);
  padding: 0 var(--size-240) var(--size-160);
  border-bottom: 1px solid var(--neutral-stroke-divider);
}
.tf-faction-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--neutral-fg-3);
}
.tf-faction-current {
  font-size: 13px;
  color: var(--neutral-fg-2);
  font-weight: 500;
  margin-left: auto;
}
.faction-toggle {
  display: inline-flex;
  gap: var(--size-60);
  align-items: center;
}
.faction-toggle .roundel-btn {
  position: relative;
  background: white;
}
.faction-toggle .roundel-btn .era-tag {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--neutral-fg-1);
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
}
.faction-toggle .roundel-btn.active .era-tag,
.faction-toggle .roundel-btn:not(.late) .era-tag { background: var(--neutral-fg-1); }
.faction-toggle .roundel-btn.late .era-tag { background: var(--status-warning-fg); }
.tf-head .tf-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tf-head .tf-id .callsign {
  font-family: 'Jost', 'Segoe UI Variable', sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--r-4);
  background: transparent;
  padding: 2px 6px;
  margin-left: -6px;
  width: 100%;
  max-width: 340px;
  min-width: 200px;
}
.tf-head .tf-id .callsign::placeholder { color: var(--neutral-fg-3); font-weight: 500; }
.tf-head .tf-id .callsign:hover { background: var(--neutral-bg-1-hover); }
.tf-head .tf-id .callsign:focus {
  outline: none;
  background: var(--neutral-bg-1);
  border-color: var(--neutral-stroke-1);
  box-shadow: inset 0 -2px 0 0 var(--brand-bg);
}
.tf-head .tf-id .commander {
  font-family: 'PT Serif', 'Segoe UI Variable', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 20px;
  color: var(--neutral-fg-3);
  border: 1px solid transparent;
  border-radius: var(--r-4);
  background: transparent;
  padding: 2px 6px;
  margin-left: -6px;
  width: 100%;
  max-width: 360px;
  min-width: 200px;
}
.tf-head .tf-id .commander::placeholder { color: var(--neutral-fg-disabled); }
.tf-head .tf-id .commander:hover { background: var(--neutral-bg-1-hover); }
.tf-head .tf-id .commander:focus {
  outline: none;
  background: var(--neutral-bg-1);
  border-color: var(--neutral-stroke-1);
  box-shadow: inset 0 -2px 0 0 var(--brand-bg);
}
.tf-head .title .commander {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--neutral-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-head .title .placeholder { color: var(--neutral-fg-3); font-weight: 400; }
.tf-head .pts {
  font-family: 'IBM Plex Mono', 'Segoe UI Variable', monospace;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tf-head .pts .lbl {
  color: var(--neutral-fg-3);
  font-weight: 400;
  font-size: 14px;
  margin-left: var(--size-40);
}

/* roundel + name row hides the old form */
.tf-meta, .tf-naming { display: none; }

/* sparkle suggestion button on pennant inputs */
.suggest-btn {
  position: absolute;
  right: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-4);
  color: var(--brand-fg-1);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--d-100), background var(--d-100);
}
.cls-cell:hover .suggest-btn,
.suggest-btn:focus-visible { opacity: 1; }
.suggest-btn:hover { background: var(--brand-bg-2); }
.suggest-btn svg { width: 14px; height: 14px; }
.field { display: flex; flex-direction: column; gap: var(--size-40); }
.field-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--neutral-fg-2);
}

/* --- Doctrine / Modifications section ------------------ */

.tf-doctrine {
  padding: var(--size-160) var(--size-240) var(--size-160);
  border-top: 1px solid var(--neutral-stroke-divider);
  border-bottom: 1px solid var(--neutral-stroke-divider);
}
.tf-doctrine-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--size-100);
}
.tf-doctrine-head h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--neutral-fg-1);
}
.doctrine-row {
  display: flex; align-items: center; gap: var(--size-100);
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--size-40);
  background: var(--neutral-bg-3);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-pill);
  padding: 3px 8px 3px 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--neutral-fg-1);
  transition: background var(--d-100) var(--ease-both);
}
.chip:hover { background: var(--neutral-bg-4); }
.chip.warning {
  background: var(--status-warning-bg);
  border-color: rgba(138, 83, 0, 0.32);
  color: var(--status-warning-fg);
}
.chip.warning:hover { background: rgba(255, 230, 153, 0.7); }
.chip-remove {
  background: transparent;
  border: none;
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  color: currentColor;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--d-100), background var(--d-100);
}
.chip-remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.chip-add {
  display: inline-flex;
  align-items: center;
  gap: var(--size-40);
  background: transparent;
  border: 1px dashed var(--neutral-stroke-1);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--brand-fg-1);
  cursor: pointer;
  transition: background var(--d-100), border-color var(--d-100);
}
.chip-add:hover {
  background: var(--brand-bg-2);
  border-color: var(--brand-bg);
}
.chip-add .ico { width: 12px; height: 12px; }

.doctrine-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-80);
  margin-top: var(--size-120);
}
.preset-card {
  flex: 1 1 220px;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-6);
  padding: var(--size-100) var(--size-120);
  text-align: left;
  cursor: pointer;
  transition: all var(--d-100) var(--ease-both);
  box-shadow: var(--shadow-2);
}
.preset-card:hover {
  border-color: var(--brand-stroke-1);
  box-shadow: var(--shadow-4);
  transform: translateY(-1px);
}
.preset-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-2);
}
.preset-card.active {
  border-color: var(--brand-bg);
  background: var(--brand-bg-2);
  box-shadow: var(--shadow-brand-8);
}
.preset-card.match { border-color: var(--neutral-stroke-accessible); }
.preset-era .match-tag {
  font-weight: 400;
  color: var(--neutral-fg-3);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.preset-era {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--brand-fg-1);
  letter-spacing: 0.02em;
}
.preset-name {
  font-family: 'Jost', 'Segoe UI Variable', sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--neutral-fg-1);
  margin-top: 2px;
  display: flex; align-items: center; gap: var(--size-60);
}
.preset-name .roundel { width: 18px; height: 18px; }
.preset-card.active .preset-name { color: var(--brand-fg-1); }
.preset-mod-list {
  margin-top: var(--size-60);
  display: flex; flex-direction: column; gap: 2px;
}
.preset-mod-list li {
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-fg-2);
  list-style: none;
  padding-left: 12px;
  position: relative;
}
.preset-mod-list li::before {
  content: "\2022";
  position: absolute;
  left: 2px;
  color: var(--neutral-fg-3);
}
.preset-mod-list li.disadv { color: var(--status-warning-fg); }

.flyout {
  position: absolute;
  bottom: calc(100% + 4px);
  top: auto;
  left: 0;
  overflow: visible;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-28);
  z-index: 50;
  padding: var(--size-80);
  min-width: 320px;
  max-width: 480px;
  animation: flyout-in var(--d-150) var(--ease-out);
}
@keyframes flyout-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.flyout-group { margin-bottom: var(--size-60); }
.flyout-group:last-child { margin-bottom: 0; }
.flyout-group-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--neutral-fg-3);
  padding: var(--size-80) var(--size-100) var(--size-40);
}
.flyout-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--size-100);
  align-items: start;
  padding: var(--size-80) var(--size-100);
  border-radius: var(--r-4);
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  width: 100%;
  transition: background var(--d-100) var(--ease-both);
}
.flyout-item:hover { background: var(--neutral-bg-3); }
.flyout-item:focus-visible {
  outline: none;
  background: var(--neutral-bg-3);
  border-color: var(--neutral-stroke-accessible);
}
.flyout-item .nm {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-fg-1);
  display: flex; align-items: baseline; gap: var(--size-80);
}
.flyout-item .nm .badge-warn {
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  color: var(--status-warning-fg);
  background: var(--status-warning-bg);
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
.flyout-item .desc {
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-fg-3);
  margin-top: 2px;
}
.flyout-item .right {
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-fg-3);
  white-space: nowrap;
  font-weight: 600;
}

/* --- Units --------------------------------------------- */

.tf-units-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--size-160) var(--size-240) var(--size-80);
}
.tf-units-head h3 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}
.tf-units-head .count {
  color: var(--neutral-fg-3);
  font-weight: 400;
  margin-left: var(--size-80);
  font-size: 14px;
}

.warn-banner {
  margin: 0 var(--size-240) var(--size-120);
  padding: var(--size-80) var(--size-120);
  background: var(--status-warning-bg);
  border: 1px solid rgba(138, 83, 0, 0.32);
  border-radius: var(--r-4);
  color: var(--status-warning-fg);
  font-size: 12px;
  line-height: 18px;
  display: flex;
  align-items: flex-start;
  gap: var(--size-80);
}
.warn-banner .ico { flex-shrink: 0; margin-top: 1px; }
.warn-banner strong { font-weight: 600; }

.units-table { width: 100%; border-collapse: collapse; }
.units-table thead th {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--neutral-fg-3);
  text-align: left;
  padding: var(--size-80) var(--size-120);
  border-bottom: 1px solid var(--neutral-stroke-divider);
  white-space: nowrap;
}
.units-table thead th:first-child { padding-left: var(--size-240); }
.units-table thead th:last-child  { padding-right: var(--size-240); text-align: right; width: 32px; }
.units-table td {
  padding: var(--size-120);
  vertical-align: middle;
  border-bottom: 1px solid var(--neutral-stroke-divider);
  font-size: 14px;
  line-height: 20px;
  transition: background var(--d-100) var(--ease-both);
}
.units-table td:first-child { padding-left: var(--size-240); }
.units-table td:last-child  { padding-right: var(--size-240); text-align: right; }
.units-table tr:last-child td { border-bottom: none; }
.units-table tbody tr { transition: background-color var(--d-100); }
.units-table tbody tr:hover    td { background: var(--neutral-bg-3); }
.units-table tbody tr:hover .row-delete { opacity: 1; }

.col-qty   { width: 96px; }
.col-class { width: 36%; }
.col-role  { width: 28%; }
.col-cost  { width: 96px; text-align: right; }

/* qty stepper */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--neutral-stroke-1);
  border-radius: var(--r-4);
  background: var(--neutral-bg-1);
  height: 28px;
  overflow: hidden;
  transition: border-color var(--d-100);
}
.qty-stepper:hover { border-color: var(--neutral-stroke-accessible); }
.qty-stepper:focus-within { border-color: var(--brand-bg); }
.qty-stepper button {
  background: transparent;
  border: none;
  width: 26px; height: 100%;
  cursor: pointer;
  color: var(--neutral-fg-2);
  display: grid; place-items: center;
  transition: background var(--d-100);
}
.qty-stepper button:hover  { background: var(--neutral-bg-1-hover); color: var(--neutral-fg-1); }
.qty-stepper button:active { background: var(--neutral-bg-1-pressed); }
.qty-stepper button:disabled { color: var(--neutral-fg-disabled); cursor: not-allowed; background: transparent; }
.qty-stepper .val {
  min-width: 28px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}

/* class cell */
.cls-cell { display: flex; flex-direction: column; gap: var(--size-20); min-width: 0; }
.cls-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  display: flex; align-items: center; gap: var(--size-80);
}
.cls-tag {
  display: inline-block;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  color: var(--neutral-fg-3);
  background: var(--neutral-bg-3);
  border-radius: var(--r-2);
  padding: 2px 6px;
  min-width: 32px;
  text-align: center;
}
.nm-input {
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-fg-3);
  padding: 2px 6px;
  margin-left: calc(var(--size-60) * -1);
  border-radius: var(--r-4);
  width: 100%;
  min-width: 0;
  transition: background var(--d-100), border-color var(--d-100), color var(--d-100);
}
.nm-input::placeholder { color: var(--neutral-fg-disabled); }
.nm-input:hover { background: var(--neutral-bg-1-hover); color: var(--neutral-fg-2); }
.nm-input:focus {
  outline: none;
  background: var(--neutral-bg-1);
  border-color: var(--neutral-stroke-1);
  border-bottom: 2px solid var(--brand-bg);
  padding-bottom: 1px;
  color: var(--neutral-fg-1);
}

.role-cell { font-size: 14px; line-height: 20px; color: var(--neutral-fg-2); }
.role-cell .special {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-fg-3);
  margin-top: 2px;
}

.cost-cell {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  display: inline-flex; align-items: baseline; gap: var(--size-60);
}
.cost-cell .each {
  font-weight: 400;
  color: var(--neutral-fg-3);
  font-size: 12px;
  line-height: 16px;
}

.row-delete { opacity: 0; transition: opacity var(--d-100); }
.unit-row.over-capacity td { background: rgba(255, 230, 153, 0.18); }

/* add unit */
.add-unit { padding: var(--size-120) var(--size-240); }
.add-unit-btn {
  display: flex;
  width: 100%;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: var(--size-80);
  color: var(--brand-fg-1);
  background: var(--brand-bg-2);
  border: 1.5px solid var(--brand-stroke-1);
  border-radius: 0;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  transition: background var(--d-100), transform var(--d-100);
}
/* double-rule inner frame — Art Deco */
.add-unit-btn::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--brand-stroke-1);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--d-100);
}
.add-unit-btn .aub-label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding-left: 0.2em; /* optical balance against tracking */
}
.add-unit-btn svg { width: 18px; height: 18px; }
.add-unit-btn:hover  {
  background: var(--brand-bg-2-hover);
}
.add-unit-btn:hover::before { opacity: 0.7; }
.add-unit-btn:active {
  background: var(--brand-bg-2-pressed);
  transform: scale(0.99);
}

/* totals strip - stat icons + value */
.tf-totals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--neutral-stroke-divider);
  background: var(--neutral-bg-2);
  border-bottom-left-radius: var(--r-8);
  border-bottom-right-radius: var(--r-8);
}
.tf-totals .t {
  padding: var(--size-120) var(--size-160);
  border-right: 1px solid var(--neutral-stroke-divider);
  display: flex; flex-direction: column; gap: var(--size-40);
}
.tf-totals .t:last-child { border-right: none; }
.tf-totals .t.accent { background: var(--brand-bg-2); }
.tf-totals .lbl {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--neutral-fg-3);
  display: flex; align-items: center; gap: var(--size-60);
}
.tf-totals .t.accent .lbl { color: var(--brand-fg-1); }
.tf-totals .lbl .ico {
  width: 22px; height: 22px;
  display: inline-flex;
  color: var(--neutral-fg-4);
}
.tf-totals .lbl .ico svg { width: 22px; height: 22px; }
.tf-totals .t.accent .lbl .ico { color: var(--brand-fg-1); }
.tf-totals .v {
  font-family: 'IBM Plex Mono', 'Segoe UI Variable', monospace;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.tf-totals .t.accent .v { color: var(--brand-fg-1); }
.tf-totals .v .mod-delta {
  font-size: 12px;
  line-height: 16px;
  color: var(--brand-fg-1);
  font-weight: 600;
  margin-left: var(--size-40);
}
.tf-totals .v .mod-delta.warn { color: var(--status-warning-fg); }

/* add task force */
.add-tf {
  display: flex; justify-content: center;
  padding: var(--size-160) 0 var(--size-480);
}

.print-area { display: none; }
.app.preview-mode .page { display: none; }
.app.preview-mode .print-area.preview { display: block; }

/* Preview as a realistic Letter sheet (8.5in @ 96dpi) so line
   lengths and breaks match what actually prints */
.app.preview-mode {
  background: var(--neutral-bg-3);
}
.print-area.preview {
  width: 816px;
  max-width: 100%;
  margin: 24px auto;
  padding: 45px 48px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  box-sizing: border-box;
}
@media (max-width: 860px) {
  .print-area.preview { padding: 24px; margin: 12px auto; }
}

/* --- PRINT --------------------------------------------- */

/* --- Per-TF mini progress bars in sidebar ----------- */
.sb-tf-mini-bar {
  height: 3px;
  background: var(--neutral-bg-4);
  border-radius: 999px;
  overflow: hidden;
  margin: 2px 0 6px 24px;
}
.sb-tf-mini-bar i {
  display: block;
  height: 100%;
  background: var(--brand-bg);
  transition: width var(--d-200) var(--ease-both);
  border-radius: 999px;
}

/* --- FleetMods inside sidebar ------------------------- */
.fleet-sidebar .fleet-mods {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.fleet-sidebar .fleet-mods-head {
  margin-bottom: var(--size-60);
  align-items: center;
}
.fleet-sidebar .fleet-mods-head h2 {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--neutral-fg-3);
  line-height: 16px;
}
.fleet-sidebar .fleet-mods-row {
  gap: var(--size-60);
}
.fleet-sidebar .doctrine-presets {
  flex-direction: column;
  gap: var(--size-80);
}
.fleet-sidebar .preset-card {
  min-width: 0;
  width: 100%;
  padding: var(--size-80) var(--size-100);
}
.fleet-sidebar .preset-mod-list {
  font-size: 11px;
}
.sb-mods-section { padding-bottom: var(--size-160); }

/* --- Sci-fi mode: swap to Readex Pro throughout ------ */



/* ═══ Class type badge colors ═══════════════════════════
   Fluent named palette tints: never base surfaces, fine for small badges */
.cls-tag[data-sprite="CV"]  { background: #dce1fb; color: #2a3fa6; }
.cls-tag[data-sprite="CVL"] { background: #dce1fb; color: #2a3fa6; }
.cls-tag[data-sprite="AV"]  { background: #d6ebec; color: #016e73; }
.cls-tag[data-sprite="BB"]  { background: #c9dde3; color: #004556; }
.cls-tag[data-sprite="CA"]  { background: #c7e9ea; color: #016e73; }
.cls-tag[data-sprite="CL"]  { background: #d5eeef; color: #027a7f; }
.cls-tag[data-sprite="DD"]  { background: #e8effe; color: #3a52c4; }
.cls-tag[data-sprite="SS"]  { background: #ecdcf8; color: #6b0fa8; }
.cls-tag[data-sprite="AUX"] { background: var(--neutral-bg-4); color: var(--neutral-fg-3); }
.cls-tag[data-sprite="F"]   { background: #fef4d5; color: #8a6000; }
.cls-tag[data-sprite="B"]   { background: #fce8cf; color: #a03600; }

/* ═══ Stat footer: colored accents per stat type ════════ */
.tf-totals .t[data-stat="aircraft"] { background: #eef1fd; }
.tf-totals .t[data-stat="aircraft"] .lbl { color: #2a3fa6; }
.tf-totals .t[data-stat="aircraft"] .lbl .ico { color: #4f6bed; }
.tf-totals .t[data-stat="aircraft"] .v { color: #2a3fa6; }

.tf-totals .t[data-stat="guns"] { background: #fef8e6; }
.tf-totals .t[data-stat="guns"] .lbl { color: #7a5200; }
.tf-totals .t[data-stat="guns"] .lbl .ico { color: #c19c00; }
.tf-totals .t[data-stat="guns"] .v { color: #7a5200; }

.tf-totals .t[data-stat="strike"] { background: #fdf3f4; }
.tf-totals .t[data-stat="strike"] .lbl { color: #8b1422; }
.tf-totals .t[data-stat="strike"] .lbl .ico { color: #c50f1f; }
.tf-totals .t[data-stat="strike"] .v { color: #8b1422; }

.tf-totals .t[data-stat="aa"] { background: #d6ebec; }
.tf-totals .t[data-stat="aa"] .lbl { color: #016e73; }
.tf-totals .t[data-stat="aa"] .lbl .ico { color: #038387; }
.tf-totals .t[data-stat="aa"] .v { color: #016e73; }

.tf-totals .t[data-stat="cap"] { background: #e6f8f0; }
.tf-totals .t[data-stat="cap"] .lbl { color: #0a5c32; }
.tf-totals .t[data-stat="cap"] .lbl .ico { color: #00cc6a; }
.tf-totals .t[data-stat="cap"] .v { color: #0a5c32; }

/* ═══ Button press satisfaction ════════════════════════ */
.btn {
  transform: scale(1);
  transition:
    background-color var(--d-100) var(--ease-both),
    border-color var(--d-100) var(--ease-both),
    color var(--d-100) var(--ease-both),
    box-shadow var(--d-100) var(--ease-both),
    transform 60ms cubic-bezier(0.4, 0, 0.6, 1);
}
.btn:active {
  transform: scale(0.96);
}
.btn-primary:active {
  transform: scale(0.96);
  box-shadow: none;
}
.btn-primary:hover {
  box-shadow: var(--shadow-brand-8), 0 2px 8px rgba(17, 78, 122, 0.25);
}

/* ═══ Flyout: open upward, always visible ═══════════════ */
.add-unit { position: relative; }
.flyout {
  bottom: calc(100% + 4px);
  top: auto;
  left: 0;
}

/* ═══ Random TF panel ═══════════════════════════════════ */
.random-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-16);
  z-index: 100;
  min-width: 240px;
  animation: flyout-in var(--d-150) var(--ease-out);
}
.random-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-fg-2);
  border-bottom: 1px solid var(--neutral-stroke-divider);
}
.random-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-fg-3);
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: var(--r-4);
}
.random-panel-close:hover { background: var(--neutral-bg-3); color: var(--neutral-fg-1); }
.random-panel-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.random-presets {
  display: flex;
  gap: 6px;
}
.random-preset {
  flex: 1;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  background: var(--neutral-bg-3);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-4);
  cursor: pointer;
  color: var(--neutral-fg-2);
  transition: background var(--d-100), border-color var(--d-100), transform 60ms;
}
.random-preset:hover { background: var(--neutral-bg-4); border-color: var(--neutral-stroke-1); }
.random-preset:active { transform: scale(0.95); }
.random-preset.active {
  background: var(--brand-bg-2);
  border-color: var(--brand-stroke-1);
  color: var(--brand-fg-1);
}
.random-custom {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.random-custom-input {
  width: 80px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--neutral-stroke-1);
  border-radius: var(--r-4);
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  appearance: none;
}
.random-custom-input::-webkit-outer-spin-button,
.random-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.random-custom-input:focus { outline: none; border-color: var(--brand-bg); background: var(--neutral-bg-1); }
.random-custom-label { font-size: 12px; color: var(--neutral-fg-3); }
.random-go { width: 100%; justify-content: center; }



.fleet-sidebar .flyout {
  left: 0;
  right: 0;
  min-width: 0;
  max-width: 100%;
  bottom: calc(100% + 4px);
  top: auto;
}

/* ═══ Scale section ══════════════════════════════════ */
.sb-scale-section { padding-bottom: var(--size-160); }
.sb-scale-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--size-60);
}
.sb-scale-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--neutral-fg-3);
}
.sb-scale-stepper {
  display: flex;
  align-items: center;
  gap: var(--size-60);
}
.sb-scale-stepper button {
  width: 24px;
  height: 24px;
  border-radius: var(--r-4);
  border: 1px solid var(--neutral-stroke-2);
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-2);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background var(--d-100), transform 60ms;
}
.sb-scale-stepper button:hover { background: var(--neutral-bg-3); }
.sb-scale-stepper button:active { transform: scale(0.92); }
.sb-scale-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.sb-scale-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-fg-1);
  min-width: 48px;
  text-align: center;
  letter-spacing: -0.01em;
}
.sb-s {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-fg-3);
  letter-spacing: 0;
  margin-right: 1px;
}
.sb-scale-meta {
  display: flex;
  gap: var(--size-120);
  font-size: 12px;
  color: var(--neutral-fg-3);
  margin-bottom: var(--size-80);
}
.sb-scale-pts {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--brand-fg-1);
}
.sb-scale-chips {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}
.sb-freeplay {
  display: flex;
  align-items: center;
  gap: var(--size-80);
  margin-top: var(--size-60);
}
.sb-freeplay-label {
  display: flex;
  align-items: center;
  gap: var(--size-60);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-fg-2);
  cursor: pointer;
  user-select: none;
}
.sb-freeplay-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand-bg);
}
.sb-freeplay-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--status-success-fg);
  background: var(--status-success-bg);
  border-radius: var(--r-pill);
  padding: 1px 8px;
}

/* ═══ Budget: fixed display (not editable) ══════════ */
.sb-budget-fixed {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-fg-3);
}
.sb-cost-now.over { color: var(--status-danger-fg); }

/* ═══ TF count label limit ══════════════════════════ */
.sb-label-limit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--neutral-fg-4);
  margin-left: var(--size-60);
}

/* ═══ High value ship tracker ═══════════════════════ */
.sb-hv-section { padding-bottom: var(--size-120); }
.sb-hv-grid {
  display: flex;
  gap: var(--size-80);
  margin-top: var(--size-60);
  flex-wrap: wrap;
}
.sb-hv-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--neutral-bg-3);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-4);
  padding: 3px 8px;
  font-size: 12px;
}
.sb-hv-item.over {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-fg);
}
.sb-hv-sprite {
  font-size: 10px;
  font-weight: 700;
  color: var(--neutral-fg-3);
  letter-spacing: 0.04em;
}
.sb-hv-item.over .sb-hv-sprite { color: var(--status-danger-fg); }
.sb-hv-count {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--neutral-fg-1);
}
.sb-hv-item.over .sb-hv-count { color: var(--status-danger-fg); }
.sb-hv-limit {
  font-weight: 400;
  color: var(--neutral-fg-3);
  font-size: 11px;
}
.sb-sub-warn {
  margin-top: var(--size-80);
  font-size: 11px;
  font-weight: 600;
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border-radius: var(--r-4);
  padding: 4px 8px;
}

/* ═══ Error banner variant ════════════════════════════ */
.warn-banner.warn-error {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-fg);
  color: var(--status-danger-fg);
}
.warn-banner.warn-error strong { color: var(--status-danger-fg); }
.warn-banner.warn-error .ico { color: var(--status-danger-fg); }


/* ═══ Scale control in cmdbar ════════════════════════ */
.scale-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-bg);
  border-radius: var(--r-8);
  padding: 4px 8px;
  box-shadow: var(--shadow-brand-8);
  cursor: default;
  justify-self: center;
}
.scale-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-4);
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--d-100), transform 60ms;
  font-weight: 500;
}
.scale-btn:hover:not(:disabled) { background: rgba(255,255,255,0.25); }
.scale-btn:active:not(:disabled) { transform: scale(0.92); }
.scale-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.scale-display {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 52px;
  justify-content: center;
}
.scale-s {
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  line-height: 1;
}
.scale-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ═══ Sidebar: scale summary inline with fleet name ══ */
.sb-scale-summary {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  color: var(--neutral-fg-3);
  margin-top: 4px;
  margin-bottom: 6px;
}
.sb-scale-pts {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--brand-fg-1);
}
.sb-scale-chips { font-family: 'IBM Plex Mono', monospace; }
.sb-scale-sep { color: var(--neutral-stroke-1); }

/* ═══ Callsign row with random button ════════════════ */
.callsign-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.callsign-random {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--neutral-fg-4);
  border-radius: var(--r-4);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--d-100), color var(--d-100), transform 60ms;
}
.callsign-random:hover { background: var(--neutral-bg-3); color: var(--neutral-fg-1); }
.callsign-random:active { transform: scale(0.88) rotate(90deg); }


/* ═══ Sci-fi FAB (fixed bottom right) ═══════════════ */
.scifi-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-1);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-8);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-fg-2);
  cursor: pointer;
  transition: background var(--d-100), box-shadow var(--d-100), transform 60ms;
}
.scifi-fab:hover { background: var(--neutral-bg-1-hover); box-shadow: var(--shadow-16); }
.scifi-fab:active { transform: scale(0.96); }
.scifi-fab.active {
  background: var(--brand-bg);
  border-color: var(--brand-bg);
  color: #fff;
  box-shadow: var(--shadow-brand-8);
}
.scifi-fab .ico { display: flex; align-items: center; }

/* ═══ Sci-fi dark mode - full token override ════════ */
/* Scifi mode: title font only */
.scifi-mode .cmdbar {
  background: #111;
  border-bottom-color: #2a2100;
  box-shadow: 0 1px 0 #2a2100, 0 2px 12px rgba(0,0,0,0.6);
}
.scifi-mode .brand-name {
  color: #C9A227;
  letter-spacing: 0.03em;
}
.scifi-mode .brand-icon svg {
  color: #C9A227;
}
.scifi-mode .scale-ctrl {
  background: #C9A227;
  box-shadow: 0 0 12px rgba(201,162,39,0.4);
}
.scifi-mode .scale-ctrl .scale-display,
.scifi-mode .scale-ctrl .scale-s,
.scifi-mode .scale-ctrl .scale-n {
  color: #111;
}
.scifi-mode .scale-btn {
  background: rgba(0,0,0,0.15);
  color: #111;
}
.scifi-mode .scale-btn:hover:not(:disabled) {
  background: rgba(0,0,0,0.25);
}
.scifi-mode .cmdbar-actions .btn {
  color: #C9A227;
}
.scifi-mode .cmdbar-actions .btn:hover {
  background: rgba(201,162,39,0.1);
}
.scifi-mode .toggle-btn {
  background: rgba(201,162,39,0.06);
  border-color: rgba(201,162,39,0.4);
  color: #C9A227;
}
.scifi-mode .toggle-btn:hover {
  background: rgba(201,162,39,0.16);
  border-color: rgba(201,162,39,0.7);
  color: #E3BE3A;
}
.scifi-mode .toggle-btn.active {
  background: #C9A227;
  border-color: #C9A227;
  color: #111;
  box-shadow: 0 2px 10px rgba(201,162,39,0.4);
}
.scifi-mode .toggle-btn.active:hover { background: #E3BE3A; color: #111; }

/* ═══ Print area redesign ══════════════════════════ */
.p-tf { margin-bottom: 24px; page-break-inside: avoid; break-inside: avoid; border: 1px solid #ccc; padding: 12px; }
.p-tf-head { margin-bottom: 10px; border-bottom: 2px solid #222; padding-bottom: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.p-tf-title { display: flex; align-items: baseline; gap: 10px; }
.p-tf-num { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #000; }
.p-tf-callsign { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; color: #000; }
.p-tf-head-right { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.p-tf-cmdr { font-size: 10px; color: #000; }
.p-tf-cost { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 9px; font-weight: 600; color: #999; }

/* Stat boxes: value LEFT, label RIGHT, gray numbers */
.p-tf-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.p-stats-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  width: 88px;
}
.p-stat-box {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 6px;
  border: 1.5px solid #bbb;
  border-radius: 3px;
  padding: 4px 7px;
  background: #fff;
}
.p-stat-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.p-stat-ico { display: flex; color: #000; }
.p-stat-ico svg { width: 18px; height: 18px; display: block; }
.p-stat-val {
  font-family: 'IBM Plex Mono', Consolas, monospace;
  font-size: 18px;
  font-weight: 700;
  color: #bbb;
  line-height: 1;
  text-align: right;
  min-width: 22px;
}
.p-stat-unit { font-size: 11px; font-weight: 400; margin-left: 1px; }
.p-stat-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  line-height: 1.1;
  text-align: left;
}

/* Roster table */
.p-roster-table {
  flex: 1;
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 0;
}
.p-roster-table th {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid #999;
  padding: 3px 6px;
  text-align: left;
}
.p-roster-table td {
  padding: 2.5px 6px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  white-space: normal;
}
.p-r-name { font-weight: 500; font-size: 10.5px; color: #000; white-space: normal; }
.p-r-sprite {
  display: inline-block;
  width: 24px;
  box-sizing: border-box;
  text-align: center;
  font-size: 6.8px;
  font-weight: 600;
  background: #f1f1f1;
  border-radius: 3px;
  padding: 1px 2px;
  margin-right: 7px;
  color: #aaa;
}
.p-r-pennant { font-weight: 400; font-style: italic; color: #000; }
.p-r-role { color: #000; font-size: 9.5px; }
.p-r-special { color: #000; font-size: 9.5px; }
.p-r-cost {
  font-family: 'IBM Plex Mono', Consolas, monospace;
  font-size: 9.5px;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: #888;
}
.p-r-cost-h { text-align: right; width: 1%; white-space: nowrap; }
.p-r-qty-h { text-align: center; width: 1%; white-space: nowrap; }
.p-r-qtycol {
  font-family: 'IBM Plex Mono', Consolas, monospace;
  text-align: center;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.p-r-lost-h { text-align: center; width: 1%; white-space: nowrap; padding-left: 14px; }
.p-r-lost { text-align: center; padding-left: 14px; }
.p-lost-box {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.2px solid #b0b0b0;
  border-radius: 2px;
  vertical-align: middle;
}

/* Special rules block */
.p-rules {
  border-top: 1px solid #ccc;
  padding-top: 6px;
  margin-top: 4px;
}
.p-rules-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 5px;
}
.p-rule-entry {
  font-size: 10px;
  line-height: 1.45;
  margin-bottom: 4px;
  color: #1a1a1a;
}
.p-rule-entry strong { color: #000; }
.p-fleet-mod-rules {
  border: 1.5px solid #999;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 14px;
  background: #fff;
}

/* Fleet header */
.p-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; border-bottom: 2px solid #111; padding-bottom: 8px; }
.p-head-text { flex: 1; }
.p-fleet-name { font-size: 24px; font-weight: 800; color: #111; }
.p-fleet-meta { font-size: 11px; color: #000; margin-top: 2px; }
.p-fleet-mods { font-size: 11px; color: #444; margin-bottom: 10px; }

/* ═══ Hist preset portal ══════════════════════════════ */
.hist-panel-portal {
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-28);
  padding: var(--size-160);
  width: 580px;
  animation: flyout-in var(--d-150) var(--ease-out);
}
.hist-panel-portal .doctrine-presets {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--size-120);
}
.hist-panel-portal .preset-card {
  width: 260px;
  flex-shrink: 0;
}
/* Sidebar internal doctrine-presets: hidden (uses portal now) */
.fleet-sidebar .doctrine-presets {
  display: none;
}


/* ═══ Portal container: flyout positions statically ═══ */
.portal-container .flyout {
  position: static;
  bottom: auto;
  top: auto;
  left: auto;
  animation: flyout-in var(--d-150) var(--ease-out);
}


/* ═══ Sci-fi mode transition animation ══════════════ */
.app, .fleet-sidebar, .cmdbar, .tf-card, .sb-section,
.btn, .chip, .flyout, .portal-container {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.25s ease,
    box-shadow 0.35s ease;
}

/* Full-screen sweep overlay */
.scifi-sweep {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.scifi-sweep.sweep-on  { background: rgba(13,17,23,0); animation: sweep-on  0.7s ease forwards; }
.scifi-sweep.sweep-off { background: rgba(255,255,255,0); animation: sweep-off 0.7s ease forwards; }

/* Horizontal scanline that travels down the screen */
.scifi-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #58a6ff 20%, #58a6ff 80%, transparent);
  box-shadow: 0 0 12px 4px rgba(88,166,255,0.6);
  animation: scanline-travel 0.45s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes sweep-on {
  0%   { background: rgba(13,17,23,0); }
  30%  { background: rgba(13,17,23,0.9); }
  70%  { background: rgba(13,17,23,0.9); }
  100% { background: rgba(13,17,23,0); }
}
@keyframes sweep-off {
  0%   { background: rgba(255,255,255,0); }
  30%  { background: rgba(255,255,255,0.85); }
  70%  { background: rgba(255,255,255,0.85); }
  100% { background: rgba(255,255,255,0); }
}
@keyframes scanline-travel {
  0%   { top: -4px; opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

/* Ⓢ only: handled via .scale-s and .sb-s font-family targeting */

/* ═══ Historical modifications button with roundels ═══ */
.hist-btn-outer {
  position: relative;
  display: inline-flex;
}
.hist-btn-outer .btn {
  padding-left: 36px;
  padding-right: 36px;
  position: relative;
}
.hist-btn-outer::before,
.hist-btn-outer::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
  transition: opacity var(--d-100);
}
/* hover handled above */
.hist-btn-outer::before {
  left: 7px;
  background-image: url('../assets/roundel-ijn.svg');
}
.hist-btn-outer::after {
  right: 7px;
  background-image: url('../assets/roundel-usn.svg');
}


/* Stat footer icon sizing */
.tf-totals .t .ico { display: flex; align-items: center; }


/* ═══ Hist button: roundels hidden until hover ═══════ */
.hist-btn-outer::before,
.hist-btn-outer::after {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.hist-btn-outer:hover::before,
.hist-btn-outer:hover::after { opacity: 0.45; }

/* chip remove: handled by ModPicker applied-pill */

/* ═══ Cost column: right-align all numbers ══════════
   Numbers use IBM Plex Mono — already set, but need right-align */
.cost-cell {
  text-align: right;
}
.cost-cell .cost-main {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
}
.cost-cell .cost-each {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--neutral-fg-3);
  margin-left: 4px;
}


/* ═══ Cost cell: stacked for number alignment ═══════ */
.cost-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.cost-num {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--neutral-fg-1);
}
.cost-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 400;
  color: var(--neutral-fg-3);
  line-height: 1;
}

/* ═══ ModPicker applied/add pills ════════════════════ */
.applied-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--brand-bg-2);
  color: var(--brand-fg-1);
  letter-spacing: 0.03em;
  transition: background var(--d-100), color var(--d-100);
}
.flyout-item:hover .applied-pill {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
}
.flyout-item:hover .applied-pill::after {
  content: ' — Remove';
}
.add-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-bg-3);
  color: var(--neutral-fg-3);
}
.flyout-item:hover .add-pill {
  background: var(--brand-bg-2);
  color: var(--brand-fg-1);
}


/* ═══ Fleet Modifications — main content horizontal bar ═ */
.fleet-mods {
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-2);
  margin-bottom: var(--size-240);
}
.fleet-mods-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--size-80);
  padding: var(--size-120) var(--size-160);
  position: relative;
}
.fm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-fg-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-right: var(--size-60);
  padding-right: var(--size-100);
  border-right: 1px solid var(--neutral-stroke-2);
}

/* hist-panel-inline: replaced by unified-mod-panel */
.hist-panel-inline {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 620px;
  max-width: calc(100vw - 360px);
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-28);
  padding: var(--size-160);
  z-index: 80;
  animation: flyout-in var(--d-150) var(--ease-out);
}
.hist-panel-inline .doctrine-presets {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--size-120);
}
.hist-panel-inline .preset-card {
  width: 270px;
  flex-shrink: 0;
}

/* ModPicker flyout — opens downward from Add button */
.mod-add-wrap { position: relative; }
.mod-add-wrap .flyout {
  position: absolute;
  top: calc(100% + 4px);
  bottom: auto;
  right: 0;
  left: auto;
  min-width: 420px;
  max-width: 520px;
  z-index: 80;
}

/* Old sidebar overrides no longer needed */
.fleet-sidebar .fleet-mods { display: none; }
.fleet-sidebar .doctrine-presets { display: none; }

.callsign-meaning {
  font-size: 11px;
  color: var(--neutral-fg-3);
  font-style: italic;
  margin-bottom: 2px;
}


/* ═══ Unified Modification Panel ════════════════════ */
.unified-mod-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 520px;
  max-width: calc(100vw - 380px);
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-1);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-28);
  z-index: 90;
  overflow: hidden;
  animation: flyout-in var(--d-150) var(--ease-out);
}
.ump-close-row {
  display: flex;
  align-items: center;
  padding: var(--size-120) var(--size-160);
  border-bottom: 1px solid var(--neutral-stroke-3);
  background: var(--neutral-bg-2);
}
.ump-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-fg-3);
  padding: 2px;
  display: flex;
  align-items: center;
}
.ump-close:hover { color: var(--neutral-fg-1); }
.ump-presets {
  display: flex;
  gap: var(--size-80);
  padding: var(--size-120) var(--size-160);
  border-bottom: 1px solid var(--neutral-stroke-3);
  flex-wrap: wrap;
}
.ump-preset {
  flex: 1;
  min-width: 100px;
  text-align: left;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  padding: var(--size-80) var(--size-120);
  cursor: pointer;
  transition: border-color var(--d-100), background var(--d-100);
}
.ump-preset:hover {
  border-color: var(--brand-stroke-1);
  background: var(--brand-bg-2);
}
.ump-preset.active {
  border-color: var(--brand-stroke-1);
  background: var(--brand-bg-2);
}
.ump-preset-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-fg-1);
}
.ump-preset-meta {
  font-size: 11px;
  color: var(--neutral-fg-3);
  margin-top: 2px;
}
.ump-section-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-fg-3);
  padding: var(--size-120) var(--size-160) var(--size-80);
  border-top: 1px solid var(--neutral-stroke-3);
  display: block;
}
.ump-list {
  max-height: 420px;
  overflow-y: auto;
}
.ump-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-120);
  padding: 7px var(--size-160);
  background: none;
  border: none;
  border-top: 1px solid var(--neutral-stroke-3);
  cursor: pointer;
  text-align: left;
  transition: background var(--d-100);
}
.ump-item:hover { background: var(--neutral-bg-2); }
.ump-item.active { background: var(--brand-bg-2); }
.ump-item:hover .applied-pill {
  background: var(--status-danger-bg, #fde7e9);
  border-color: var(--status-danger-fg, #c50f1f);
  color: var(--status-danger-fg, #c50f1f);
}
.ump-item:hover .applied-pill::after { content: ' — Remove'; }
.ump-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-fg-1);
  flex: 1;
}
.ump-item.disadv .ump-item-name { color: var(--status-danger-fg, #c50f1f); }
.ump-item.active .ump-item-name { color: var(--brand-fg-1); }


/* ═══ Fleet Modifications — Inline Grid Panel ════════ */
.mod-grid-panel {
  border-top: 1px solid var(--neutral-stroke-2);
  padding: var(--size-160);
  background: var(--neutral-bg-2);
}

/* Historical presets strip */
.mgp-presets {
  display: flex;
  align-items: center;
  gap: var(--size-80);
  padding-bottom: var(--size-160);
  margin-bottom: var(--size-160);
  border-bottom: 1px solid var(--neutral-stroke-2);
  flex-wrap: wrap;
}
.mgp-preset-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-fg-3);
  letter-spacing: .03em;
  margin-right: var(--size-60);
}
.mgp-preset-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--r-pill, 99px);
  border: 1px solid var(--neutral-stroke-1);
  background: var(--neutral-bg-1);
  color: var(--neutral-fg-2);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--d-100), background var(--d-100);
}
.mgp-preset-btn:hover { border-color: var(--brand-stroke-1); color: var(--brand-fg-1); }
.mgp-preset-btn.active { background: var(--brand-bg-2); border-color: var(--brand-stroke-1); color: var(--brand-fg-1); }

/* Section headers */
.mgp-section { margin-bottom: var(--size-200); }
.mgp-section:last-child { margin-bottom: 0; }
.mgp-section-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-fg-1);
  margin-bottom: var(--size-120);
}
.mgp-disadv-head { color: var(--status-danger-fg, #c50f1f); }

/* Card grid */
.mgp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--size-120);
}

/* Individual mod card */
.mod-card-g {
  text-align: left;
  background: var(--neutral-bg-1);
  border: 1px solid var(--neutral-stroke-2);
  border-radius: var(--r-8);
  padding: var(--size-120);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--d-100), background var(--d-100), box-shadow var(--d-100);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--size-80);
}
.mod-card-g:hover {
  border-color: var(--brand-stroke-1);
  box-shadow: 0 0 0 1px var(--brand-bg-2);
}
.mod-card-g.active {
  background: var(--brand-bg-2);
  border-color: var(--brand-stroke-1);
  box-shadow: 0 0 0 1px var(--brand-stroke-1);
}
.mod-card-g.disadv {
  border-color: var(--neutral-stroke-2);
}
.mod-card-g.disadv:hover {
  border-color: var(--status-danger-fg, #c50f1f);
  box-shadow: 0 0 0 1px var(--status-danger-bg, #fde7e9);
}
.mod-card-g.disadv.active {
  background: var(--status-danger-bg, #fde7e9);
  border-color: var(--status-danger-fg, #c50f1f);
  box-shadow: 0 0 0 1px var(--status-danger-fg, #c50f1f);
}

/* Card header: checkbox + name */
.mcg-header {
  display: flex;
  align-items: center;
  gap: var(--size-80);
}
.mcg-check {
  width: 16px;
  height: 16px;
  border-radius: var(--r-4);
  border: 1.5px solid var(--neutral-stroke-1);
  background: var(--neutral-bg-1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-fg-1);
  transition: border-color var(--d-100), background var(--d-100);
}
.mcg-check.on {
  background: var(--brand-bg);
  border-color: var(--brand-stroke-1);
  color: #fff;
}
.mod-card-g.disadv .mcg-check.on {
  background: var(--status-danger-fg, #c50f1f);
  border-color: var(--status-danger-fg, #c50f1f);
}
.mcg-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-fg-1);
  line-height: 1.3;
}
.mod-card-g.active .mcg-name { color: var(--brand-fg-1); }
.mod-card-g.disadv.active .mcg-name { color: var(--status-danger-fg, #c50f1f); }

/* Rule text */
.mcg-text {
  font-size: 12px;
  color: var(--neutral-fg-3);
  line-height: 1.55;
}
.mod-card-g.active .mcg-text { color: var(--brand-fg-1); opacity: .8; }
.mod-card-g.disadv.active .mcg-text { color: var(--status-danger-fg, #c50f1f); opacity: .75; }

@media print { .scifi-sweep { display: none; } }

@media print { .scifi-fab { display: none; } }

@page {
  margin: 12mm;
}
@media print {
  body { background: #fff; }
  .cmdbar, .add-tf, .add-unit, .row-delete, .qty-stepper button, .flyout,
  .tf-doctrine-head .chip-add, .doctrine-presets,
  .game-info-footer, .scifi-fab { display: none !important; }
  .page { display: none; }
  .print-area { display: block; }
  .p-tf { page-break-inside: avoid; break-inside: avoid; }
  .p-fleet-mod-rules { page-break-inside: avoid; break-inside: avoid; }
  .p-roster-table tr { page-break-inside: avoid; break-inside: avoid; }
}

/* ─── Game info footer ─────────────────────────────────── */
.game-info-footer {
  border-top: 1px solid var(--neutral-stroke-2);
  background: var(--neutral-bg-2);
  padding: 10px var(--size-200);
  font-size: 12px;
  color: var(--neutral-fg-3);
}
.gif-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 1200px;
  margin: 0 auto;
}
.gif-title {
  font-weight: 600;
  color: var(--neutral-fg-2);
}
.gif-sep {
  color: var(--neutral-fg-disabled);
}
.game-info-footer a {
  color: var(--brand-fg-1);
  text-decoration: none;
}
.game-info-footer a:hover {
  text-decoration: underline;
}
.gif-builder {
  margin-left: auto;
}
.gif-builder a {
  font-family: 'Terminal Grotesque Open', 'Terminal Grotesque', monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .gif-builder { margin-left: 0; }
}

/* ─── WarLore badge ────────────────────────────────────── */
.warlore-badge {
  font-family: 'VCR OSD Mono', 'IBM Plex Mono', monospace;
  color: #FFE033;
  background: #111;
  padding: 1px 5px 2px;
  border-radius: 2px;
  letter-spacing: 0.03em;
  font-size: 0.9em;
}

/* ─── Faction pills ────────────────────────────────────── */
.faction-toggle {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.faction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  min-height: 36px;
  border-radius: 99px;
  border: 1.5px solid var(--neutral-stroke-1);
  background: var(--neutral-bg-1);
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-fg-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.faction-pill:hover {
  border-color: var(--brand-stroke-1);
  color: var(--brand-fg-1);
  background: var(--brand-bg-2);
  transform: translateY(-1px);
}
.faction-pill:active {
  transform: scale(0.94) translateY(0);
  animation: pill-pop 0.2s ease;
}
.faction-pill.active {
  background: var(--brand-bg);
  border-color: var(--brand-bg);
  color: #fff;
  box-shadow: 0 2px 10px rgba(17, 78, 122, 0.35);
}
.faction-pill.active img {
  filter: brightness(0) invert(1);
}
.faction-pill.active:hover {
  background: var(--brand-bg-hover);
  transform: translateY(-1px);
}

/* Faction marks: webp/svg logos + initials-badge fallback (e.g. Bioficer) */
.faction-roundel-img { object-fit: contain; border-radius: 4px; flex: none; }
.faction-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--neutral-bg-3, #e6e6e6);
  border: 1px solid var(--neutral-stroke-1);
  color: var(--neutral-fg-2);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  flex: none;
}
.faction-pill.active .faction-badge {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

/* ─── Reroll button ────────────────────────────────────── */
.reroll-btn {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-4);
  color: var(--neutral-fg-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.1s ease;
  padding: 0;
}
.nm-input-wrap:hover .reroll-btn,
.reroll-btn:focus-visible {
  opacity: 1;
}
.reroll-btn:hover {
  background: var(--brand-bg-2);
  color: var(--brand-fg-1);
  border-color: var(--brand-stroke-1);
}
.reroll-btn:active {
  transform: rotate(180deg) scale(0.9);
}
.nm-input {
  padding-right: 32px;
}

/* ─── Animations / oomph ───────────────────────────────── */
@keyframes pill-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.91); }
  75%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes btn-tap {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.btn:active {
  animation: btn-tap 0.18s ease;
}
.mod-grid-panel {
  animation: panel-in 0.18s ease;
}
.add-unit-btn:active {
  animation: btn-tap 0.18s ease;
}
.flyout {
  animation: panel-in 0.15s ease;
}
.random-panel {
  animation: panel-in 0.15s ease;
}

/* ─── Touch targets ────────────────────────────────────── */
.btn {
  min-height: 36px;
  padding: 0 14px;
}
.btn-icon {
  min-height: 32px;
  width: 32px;
  padding: 0;
}
.scale-btn {
  width: 34px;
  height: 34px;
}
.add-unit-btn {
  min-height: 36px;
  padding: 0 14px;
}
.mgp-preset-btn {
  min-height: 32px;
  padding: 5px 14px;
}
.chip-add, .chip {
  min-height: 28px;
}

/* ─── Configure/Close button — stable width ───────────── */
.chip-add {
  min-width: 108px;
  justify-content: center;
}
.chip-add-ico {
  display: inline-flex;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
}
.chip-add-lbl {
  width: 68px;
  text-align: left;
}

/* ─── Faction pill active — keep roundels readable ──────── */
.faction-pill.active img {
  filter: none;
  opacity: 0.9;
}

/* ─── chip-remove: size up for the new icon ─────────────── */
.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
}
.chip-remove svg {
  width: 18px;
  height: 18px;
}

/* ─── Configure button ───────────────────────────────────── */
.configure-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  min-height: 34px;
  border-radius: var(--r-pill, 99px);
  border: 1.5px solid var(--brand-stroke-1);
  background: var(--brand-bg-2);
  color: var(--brand-fg-1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.configure-btn:hover {
  background: var(--brand-bg-2-hover);
  box-shadow: 0 2px 8px rgba(17, 78, 122, 0.15);
  transform: translateY(-1px);
}
.configure-btn:active {
  transform: scale(0.95);
  background: var(--brand-bg-2-pressed);
}
.configure-btn.open {
  background: var(--brand-bg);
  border-color: var(--brand-bg);
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 78, 122, 0.25);
}
.configure-btn.open:hover {
  background: var(--brand-bg-hover);
}
.configure-btn-ico {
  display: inline-flex;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   MOBILE — max-width: 700px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── Cmdbar: wrap to two rows ─────────────────────────── */
  .cmdbar {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    min-height: 48px;
    padding: 6px var(--size-160);
    gap: 6px;
    row-gap: 6px;
  }
  .brand { justify-self: auto; }
  .cmdbar-actions { justify-self: auto; }
  .cmdbar-left {
    order: 1;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    justify-self: auto;
  }
  .brand { flex: 0 0 auto; }
  .mode-toggles { flex-wrap: wrap; gap: 5px; }
  .toggle-btn { height: 32px; }
  .scale-ctrl {
    position: static;
    transform: none;
    order: 2;
  }
  .cmdbar-actions {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 4px;
    padding-bottom: 4px;
    border-top: 1px solid var(--neutral-stroke-2);
    padding-top: 6px;
  }
  /* Hide button labels in cmdbar, keep icons */
  .cmdbar-actions .btn > *:not(.ico) {
    display: none;
  }
  .cmdbar-actions .btn {
    min-width: 40px;
    min-height: 36px;
    padding: 0 10px;
    justify-content: center;
  }
  .cmdbar-actions .btn .ico {
    margin: 0;
  }

  /* ── Page padding ─────────────────────────────────────── */
  .page {
    padding: var(--size-240) var(--size-160) var(--size-400);
  }

  /* ── TF head: tighten ─────────────────────────────────── */
  .tf-head {
    grid-template-columns: 28px 1fr auto auto;
    gap: var(--size-80);
    padding: var(--size-120) var(--size-160) var(--size-80);
  }
  .tf-roundel-slot {
    width: 28px; height: 28px;
  }
  .tf-roundel-slot img { width: 28px; height: 28px; }
  .tf-head .tf-id .callsign {
    font-size: 20px;
    line-height: 24px;
  }

  /* ── Units table: hide role column, allow scroll ─────── */
  .col-role { display: none; }
  .units-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .units-table thead,
  .units-table tbody,
  .units-table tr { display: table-row-group; }
  .units-table { display: table; }

  /* ── tf-totals: 3 columns ─────────────────────────────── */
  .tf-totals {
    grid-template-columns: repeat(3, 1fr);
  }
  .tf-totals .t:nth-child(3) { border-right: none; }
  .tf-totals .t:nth-child(4) { border-top: 1px solid var(--neutral-stroke-divider); }
  .tf-totals .t:nth-child(6) { border-right: none; }

  /* ── Fleet mods row: stack ────────────────────────────── */
  .fleet-mods-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .configure-btn {
    margin-left: 0 !important;
  }

  /* ── Faction pills: wrap ──────────────────────────────── */
  .faction-toggle {
    flex-wrap: wrap;
  }
  .faction-pill {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* ── Random panel: full width ─────────────────────────── */
  .random-panel {
    width: calc(100vw - 32px);
    left: auto;
    right: 0;
  }

  /* ── Flyout: full width ───────────────────────────────── */
  .flyout {
    min-width: unset !important;
    max-width: unset !important;
    width: calc(100vw - 32px);
    left: 0;
    right: 0;
  }

  /* ── Mod cards: single column ─────────────────────────── */
  .mgp-grid {
    grid-template-columns: 1fr;
  }

  /* ── Add TF button: full width ────────────────────────── */
  .add-tf {
    text-align: center;
  }
  .add-tf .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Print area: handled by print.css, hide on mobile ──── */

  /* ── game info footer: stack ──────────────────────────── */
  .gif-inner {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .gif-sep { display: none; }
  .gif-builder { margin-left: 0; }
}

/* ── Very small screens ──────────────────────────────── */
@media (max-width: 400px) {
  .brand-name { font-size: 13px; }
  .tf-head .tf-id .callsign { font-size: 18px; }
  .faction-pill span { display: none; }  /* icon only on tiny screens */
  .faction-pill { padding: 4px 8px; min-height: 32px; }
}

/* ─── Kalium Kabal faction badge ─────────────────────── */
.faction-pill[data-faction="KK"] img {
  border-radius: 2px;
}

/* KK faction pill active state */
.faction-pill[data-faction="KK"].active {
  background: #0d0d0d;
  border-color: #0D9488;
  color: #B87333;
  box-shadow: 0 2px 10px rgba(13,148,136,0.35);
}
.faction-pill[data-faction="KK"]:hover {
  border-color: #0D9488;
  color: #B87333;
  background: rgba(13,148,136,0.08);
}

/* ─── Postman Republic faction badge ─────────────────── */
.faction-badge-pr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F0EAD6;
  color: #7A4F1E;
  border: 2px solid #A0752A;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  line-height: 1;
}

.faction-pill[data-faction="PR"].active {
  background: #F0EAD6;
  border-color: #A0752A;
  color: #7A4F1E;
  box-shadow: 0 2px 10px rgba(160,117,42,0.3);
}
.faction-pill[data-faction="PR"]:hover {
  border-color: #A0752A;
  color: #7A4F1E;
  background: rgba(160,117,42,0.08);
}

/* ─── Flyout: viewport-clamped, scrollable ───────────── */
.flyout {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Suppress tooltips on touch devices ────────────── */
@media (hover: none) {
  [data-tip]::after,
  [data-tip]::before {
    display: none !important;
  }
}

/* ─── Flyout as bottom sheet on mobile ─────────────────── */
@media (max-width: 700px) {
  .add-unit { position: static; }
  .flyout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 75vh;
    border-radius: var(--r-16) var(--r-16) 0 0;
    border-bottom: none;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
    z-index: 200;
    padding: var(--size-120) var(--size-120) calc(var(--size-200) + env(safe-area-inset-bottom, 0px));
    animation: sheet-up var(--d-200) var(--ease-out);
  }
  /* grab handle */
  .flyout::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: var(--neutral-stroke-1);
    margin: 2px auto 10px;
    position: sticky;
    top: 0;
  }
  @keyframes sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ─── Add Unit button (matches Configure, full width) ──── */
.add-unit-cfg {
  width: 100%;
  justify-content: center;
}

/* ─── Improved Armour: class picker modal ──────────────── */
.armour-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
  animation: panel-in 0.12s ease;
}
.armour-modal {
  background: var(--neutral-bg-1);
  border-radius: var(--r-12, 12px);
  box-shadow: var(--shadow-28);
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.armour-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--neutral-stroke-2);
  font-weight: 600;
  font-size: 14px;
}
.armour-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--neutral-fg-3);
  display: flex;
  padding: 4px;
  border-radius: var(--r-4);
}
.armour-modal-close:hover { background: var(--neutral-bg-3); }
.armour-modal-body {
  overflow-y: auto;
  padding: 8px;
}
.armour-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.armour-opt:hover { background: var(--brand-bg-2); }
.armour-opt.active {
  background: var(--brand-bg-2);
  border-color: var(--brand-stroke-1);
}
.armour-opt-name { font-weight: 600; font-size: 13px; flex: 1; }
.armour-opt-cur { font-size: 11px; color: var(--neutral-fg-3); }
.chip-edit {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  opacity: 0.7;
}
.chip-edit:hover { opacity: 1; }
.chip-edit svg { width: 13px; height: 13px; }

/* Circle-S in cmdbar buttons matches the scale control's serif glyph */
.cmd-s {
  font-family: inherit;
  font-weight: 400;
}

/* Circled S — plain glyph in the inherited UI font */
.circ-s {
  font-family: inherit;
}

.random-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-fg-3);
  margin-bottom: 6px;
}

/* ─── Scale control caption ──────────────────────────── */
.scale-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-right: 4px;
  align-self: center;
}

/* ─── Print running footer (repeats on every page) ───── */
.p-running-foot { display: none; }
@media print {
  .p-running-foot {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 12mm;
    font-size: 9px;
    color: #000;
    border-top: 1px solid #999;
  }
  .p-rf-name { font-weight: 700; }
  .p-rf-mid  { font-family: 'IBM Plex Mono', monospace; }
  .p-rf-date { color: #555; }
}

/* ─── Glossary modal ─────────────────────────────────── */
.glossary-modal { max-width: 560px; }
.gloss-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-fg-1);
  margin: 14px 4px 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--neutral-stroke-2);
}
.gloss-section-title:first-child { margin-top: 0; }
.gloss-entry { padding: 7px 4px; }
.gloss-term { font-weight: 600; font-size: 13px; }
.gloss-def { font-size: 12.5px; color: var(--neutral-fg-2); line-height: 1.45; margin-top: 1px; }

/* ─── Cmdbar: collapse action labels to icons at mid widths ─── */
@media (max-width: 1024px) and (min-width: 701px) {
  .cmdbar { gap: var(--size-100); }
  .cmdbar-actions { gap: var(--size-40); }
  .cmdbar-actions .btn > *:not(.ico) { display: none; }
  .cmdbar-actions .btn {
    min-width: 38px;
    padding: 0 10px;
    justify-content: center;
  }
  .cmdbar-actions .btn .ico { margin: 0; }
}

/* ─── Campaign companion modal ───────────────────────── */
.camp-note { font-size: 12.5px; line-height: 1.5; color: var(--neutral-fg-2); margin: 4px 4px 6px; }
.camp-note-sm { font-size: 11.5px; margin-top: 8px; }
.camp-tool { padding: 4px; margin-bottom: 4px; }
.camp-tool-row { display: flex; gap: 8px; align-items: center; }
.camp-result { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.camp-scale-big {
  font-size: 26px; font-weight: 800; color: var(--brand-fg-1);
  display: inline-flex; align-items: baseline; gap: 2px;
}
.camp-scale-cap { font-size: 13px; color: var(--neutral-fg-2); }
.camp-draws { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.camp-draw {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border: 1px solid var(--neutral-stroke-2); border-radius: var(--r-8);
  background: var(--neutral-bg-2);
}
.camp-draw-card {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700;
  color: var(--neutral-fg-3); white-space: nowrap; min-width: 72px; padding-top: 1px;
}
.camp-draw-name { font-weight: 600; font-size: 13px; }
.camp-draw-name em { font-weight: 400; font-style: italic; color: var(--status-danger-fg); }
.camp-draw-text { font-size: 12px; color: var(--neutral-fg-2); line-height: 1.4; margin-top: 2px; }
.camp-check {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; cursor: pointer;
}
.camp-check-num { justify-content: flex-start; }
.camp-cp { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--neutral-fg-3); }
.camp-num { width: 56px; margin-left: auto; padding: 4px 8px; border: 1px solid var(--neutral-stroke-1); border-radius: var(--r-4); font-size: 14px; }
.camp-game-total {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--neutral-stroke-2); font-size: 14px;
}
.camp-game-total strong { font-size: 16px; }
.camp-add { margin-left: auto; }
.camp-running {
  display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px;
}
.camp-running strong { font-size: 18px; color: var(--brand-fg-1); }
.camp-running .btn { margin-left: auto; }

.camp-target { width: 56px; margin: 0 2px; }
.camp-target-label { font-size: 12px; color: var(--neutral-fg-3); }
.camp-reached {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--status-success-fg, #0a7); background: var(--status-success-bg, #e7f7ef);
  padding: 2px 8px; border-radius: 99px;
}
.camp-running { flex-wrap: wrap; }

.export-btn {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.8;
}
.export-btn:hover {
  opacity: 1;
}