@import url("./tokens-3EA67B0B.css");
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    14px / 1.55 system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  /* After the shorthand: `font` resets font-variant, so setting this first
     silently did nothing. Figures that get compared line up. */
  font-variant-numeric: tabular-nums;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
[hidden] {
  /* biome-ignore lint/complexity/noImportantStyles: The hidden attribute must override component display rules. */
  display: none !important;
}
.sidebar {
  width: 248px;
  position: fixed;
  inset: 0 auto 0 0;
  background: #111528;
  border-right: 1px solid var(--border);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 3px;
}
.brand-icon {
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  width: 38px;
  height: 43px;
  font-size: 28px;
  transform: skew(-8deg);
  font-weight: 400;
}
td small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--muted);
  margin-top: -3px;
}
.sidebar-label {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted);
  margin: 44px 12px 10px;
}
nav {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
nav a {
  border-radius: var(--control-radius);
  padding: 11px 12px;
  color: var(--muted);
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 13px;
}
nav a span {
  font-size: 19px;
  width: 20px;
}
nav a.active {
  background: #162f35;
  color: var(--accent);
}
nav a:hover {
  background: #1b2832;
  color: var(--text);
}
nav b {
  font-size: 10px;
  background: #243c3a;
  border-radius: var(--control-radius);
  padding: 0 5px;
  margin-left: auto;
}
.local-card {
  margin-top: auto;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px;
  font-size: 12px;
}
.quiet {
  background: transparent;
  border: 0;
  color: var(--accent);
  padding: 3px;
  font-size: 11px;
}
.local-card .quiet {
  display: block;
  font-size: 12px;
  padding: 4px 0;
}
.sidebar-bottom {
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: 1px;
  color: #7f8c9e;
  margin: 22px 0 0 5px;
}
main {
  margin-left: 248px;
}
.topbar {
  height: 73px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 38px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}
.slash {
  margin: 0 14px;
  color: #566574;
}
#breadcrumb {
  color: #cfdae5;
}
#save-status {
  letter-spacing: 0;
  font-size: 11px;
}
.workspace {
  padding: 24px 38px 0;
  max-width: 1580px;
  margin: auto;
}
.tag {
  display: inline-block;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 1px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 3px 7px;
  color: var(--muted);
}
.page-heading {
  margin: 34px 0 28px;
}
/* Sentence case, no tracking, no colour. A caption is not a banner. */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
h1 {
  font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 550;
  letter-spacing: -1.1px;
  margin: 8px 0;
}
p {
  margin: 8px 0;
}
.page-heading p {
  color: var(--muted);
  font-size: 13px;
}
h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.helper {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.panel-heading .helper {
  margin: 5px 0 0;
  font-size: 11px;
}
.checker-grid {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 22px;
}
.fit-panel {
  align-self: start;
}
label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #b7c3d1;
  margin: 18px 0 8px;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #35424f;
  border-radius: var(--control-radius);
  background: #111528;
  color: var(--text);
  padding: 10px 12px;
  font-size: 12px;
}
select {
  padding-right: 24px;
}
input::placeholder,
textarea::placeholder {
  color: #7a899b;
}
textarea {
  resize: vertical;
}
input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  margin: 0;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 22px 0 10px;
}
.divider {
  border-top: 1px solid var(--border);
  margin: 22px 0;
}
.primary,
.secondary {
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  padding: 9px 13px;
  font-size: 11px;
  font-weight: 600;
}
.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.primary:hover {
  background: var(--accent-hover);
}
.secondary {
  background: #1b2730;
  color: var(--text);
  border-color: var(--border-strong);
}
.secondary:hover {
  background: #263b43;
}
.danger {
  color: var(--danger);
}
.fit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.hull-card {
  margin: 22px 0 12px;
  padding: 18px;
  background: linear-gradient(135deg, #203b40, #18232d);
  border: 1px solid #30474d;
  border-radius: var(--control-radius);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hull-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid #548275;
  transform: rotate(45deg);
}
.hull-symbol span {
  transform: rotate(-45deg);
  font-size: 23px;
}
.hull-card strong {
  font-size: 18px;
  font-weight: 500;
}
.hull-card small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.requirement-group {
  padding: 11px 0;
  border-bottom: 1px solid #26313d;
}
.requirement-group:last-child {
  border: 0;
}
.group-label {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: var(--muted);
  margin-bottom: 8px;
}
.requirement {
  display: flex;
  gap: 7px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  margin: 7px 0;
}
.requirement span {
  max-width: 210px;
}
.requirement b {
  font-size: 10px;
  font-weight: 400;
  color: #a3b5c6;
  white-space: nowrap;
}
.alt-indicator {
  font-style: normal;
  color: var(--accent);
  margin-left: 4px;
}
.results {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.metric:nth-child(1) .metric-number {
  color: var(--accent);
}
.metric:nth-child(2) .metric-number {
  color: #bdb0ff;
}
.metric:nth-child(3) .metric-number {
  color: #9acaf9;
}
.readiness {
  display: block;
  background: var(--panel);
  border-color: var(--border-strong);
}
.readiness .eyebrow {
  font-size: 9px;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th {
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  font-weight: 500;
  padding: 0 9px 12px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 12px 9px;
  border-bottom: 1px solid #27333f;
}
th:first-child,
td:first-child {
  padding-left: 0;
}
th:last-child,
td:last-child {
  padding-right: 0;
}
tbody tr:last-child td {
  border: 0;
}
.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.missing {
  color: #f3c17b;
  font-weight: 600;
}
.covered {
  color: var(--accent);
}
.ship-row {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.ship-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.ship-row:last-child {
  padding-bottom: 0;
}
.ship-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.ship-name {
  font-size: 12px;
}
.ship-name small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.badge {
  font-size: 10px;
  padding: 4px 8px;
  white-space: nowrap;
  border-radius: var(--control-radius);
  background: #29343f;
  color: #a4b0c0;
}
.badge.exact {
  background: #1c3932;
  color: var(--accent);
}
.badge.variant {
  background: #302a44;
  color: #c8baff;
}
.two-column {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 25px;
  align-items: start;
}
.two-column form .primary {
  margin-top: 12px;
}
.rule-card {
  margin-bottom: 14px;
}
.rule-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.rule-heading strong {
  font-size: 14px;
}
.rule-card .check {
  margin: 0;
  font-size: 10px;
}
.rule-alternatives {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.rule-alternatives span {
  padding: 5px 9px;
  border: 1px solid #385047;
  border-radius: var(--control-radius);
  color: var(--accent);
  font-size: 11px;
}
.rule-direction {
  color: var(--muted);
  font-size: 10px;
  margin: 12px 0 0;
}
.rule-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stock-form {
  display: grid;
  grid-template-columns: 2fr 2fr 95px auto;
  gap: 15px;
  align-items: end;
  margin-bottom: 22px;
}
dialog label {
  margin-top: 0;
}
.stock-form label {
  margin-top: 0;
}
.stock-form button {
  height: 40px;
}
.inventory-ships {
  margin-top: 22px;
}
summary {
  cursor: pointer;
}
details ul {
  padding-left: 18px;
  font-size: 11px;
  color: var(--muted);
  columns: 2;
}
.stock-qty {
  width: 95px;
  text-align: right;
  padding: 6px 8px;
}
.empty {
  color: var(--muted);
  padding: 20px 0;
  font-size: 12px;
}
.warning {
  font-size: 11px;
  color: #f3c17b;
  border-left: 2px solid #987647;
  padding-left: 10px;
  margin-top: 15px;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px;
  color: #8997a9;
  padding: 30px 0;
}
dialog {
  width: min(630px, calc(100vw - 32px));
  border: 1px solid #415364;
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
  padding: 26px;
  max-height: 90vh;
}
dialog::backdrop {
  background: #030910bb;
  backdrop-filter: blur(5px);
}
dialog textarea {
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 22px;
  background: #254139;
  border: 1px solid #689b8a;
  color: #e3fff2;
  border-radius: var(--control-radius);
  max-width: 90vw;
  z-index: 10;
  box-shadow: 0 8px 35px #0007;
}
#toast.error {
  background: #492b2b;
  border-color: #a65d5d;
  color: #ffe1e1;
}
@media (min-width: 1500px) {
  .checker-grid {
    grid-template-columns: 320px minmax(0, 1fr);
  }
  .requirement span {
    max-width: 240px;
  }
  .panel {
    padding: 25px;
  }
  .workspace {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media (max-width: 1150px) {
  .sidebar {
    width: 205px;
    padding: 27px 14px;
  }
  main {
    margin-left: 205px;
  }
  .workspace {
    padding: 20px 22px 0;
  }
  .topbar {
    padding: 0 22px;
  }
  .checker-grid {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 15px;
  }
  .panel {
    padding: 17px;
  }
  .metric {
    padding: 13px 12px;
  }
  .metric small {
    font-size: 9px;
  }
  .metric-number {
    font-size: 34px;
  }
  .two-column {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .stock-form {
    grid-template-columns: 1fr 1fr;
  }
  .panel-heading {
    flex-wrap: wrap;
  }
}
@media (max-width: 900px) {
  .sidebar {
    width: 180px;
  }
  .brand {
    font-size: 19px;
    gap: 9px;
  }
  .brand small {
    font-size: 8px;
  }
  .brand-icon {
    width: 30px;
    height: 35px;
  }
  main {
    margin-left: 180px;
  }
  nav a {
    padding: 10px 7px;
    gap: 7px;
    font-size: 11px;
  }
  .checker-grid {
    grid-template-columns: 1fr;
  }
  .fit-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .fit-panel .panel-heading,
  .fit-panel #fit-summary,
  .fit-panel .fit-actions,
  .fit-panel .divider,
  .fit-panel #fit-warnings {
    grid-column: 1 / -1;
  }
  .fit-panel #fit-summary {
    display: none;
  }
  .fit-panel .check,
  .fit-panel .helper {
    grid-column: 1 / -1;
  }
  .fit-panel label[for="location"] {
    grid-column: 1;
  }
  .fit-panel .divider {
    margin: 15px 0;
  }
  .two-column {
    grid-template-columns: 1fr;
  }
  .demo-banner .tag {
    display: none;
  }
  .topbar {
    font-size: 9px;
  }
  .topbar > span:first-child {
    font-size: 0;
  }
  .topbar #breadcrumb {
    font-size: 11px;
  }
  .topbar .slash {
    display: none;
  }
}
@media (max-width: 620px) {
  .sidebar {
    position: static;
    width: 100%;
    padding: 17px 18px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .brand {
    font-size: 20px;
  }
  .brand small {
    display: none;
  }
  .brand-icon {
    height: 30px;
  }
  .sidebar-label,
  .sidebar-bottom {
    display: none;
  }
  nav {
    flex-direction: row;
    margin-top: 18px;
    gap: 3px;
  }
  nav a {
    flex: 1;
    justify-content: center;
    font-size: 10px;
    padding: 8px 4px;
    gap: 5px;
  }
  footer span {
    display: block;
    margin-top: 5px;
  }
  nav a span {
    font-size: 16px;
    width: auto;
  }
  nav b {
    display: none;
  }
  .local-card {
    border: 0;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
  }
  .local-card strong,
  .local-card p,
  .local-card .status-dot {
    display: none;
  }
  .local-card .quiet {
    font-size: 10px;
  }
  .local-card::before {
    content: "BACKUPS";
    color: var(--muted);
    font-size: 9px;
    margin-right: auto;
  }
  main {
    margin: 0;
  }
  .topbar {
    height: 44px;
    padding: 0 18px;
  }
  .workspace {
    padding: 16px 16px 0;
  }
  .page-heading {
    margin: 25px 0 22px;
  }
  h1 {
    font-size: 27px;
  }
  .metrics {
    gap: 7px;
  }
  .metric {
    padding: 12px 9px;
  }
  .metric .metric-title {
    font-size: 10px;
  }
  .metric small {
    display: block;
    font-size: 9px;
    line-height: 1.4;
  }
  .metric-number {
    font-size: 32px;
  }
  .readiness {
    gap: 12px;
  }
  #readiness-title {
    font-size: 19px;
  }
  .readiness .eyebrow {
    font-size: 8px;
  }
  .target-control {
    width: 90px;
  }
  .panel-heading .helper {
    font-size: 10px;
  }
  .stock-form {
    grid-template-columns: 1fr 100px;
  }
  .stock-form > div:first-child,
  .stock-form > div:nth-child(2) {
    grid-column: 1 / -1;
  }
  footer {
    display: block;
    font-size: 9px;
  }
  .ship-top {
    align-items: start;
  }
  details ul {
    columns: 1;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.request-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 22px;
}
.request-form label {
  margin-top: 0;
}
.request-form button {
  height: 40px;
}
.request-summary {
  font-size: 13px;
  color: var(--accent);
  margin-top: 18px;
}
.request-panel .helper {
  font-size: 11px;
}
.assigned-ships {
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
}
.assigned-ships ul {
  columns: 1;
}
.multibuy-details {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 15px;
  font-size: 11px;
  color: var(--muted);
}
#multibuy-preview {
  font-family: ui-monospace, monospace;
  white-space: pre;
  tab-size: 4;
}
.local-card > strong {
  display: block;
  margin-bottom: 10px;
}
footer > span:last-child {
  white-space: nowrap;
}
@media (max-width: 620px) {
  .request-form {
    grid-template-columns: minmax(0, 1fr) 105px;
  }
  .request-form > div:first-child {
    grid-column: 1 / -1;
  }
  .request-form button {
    padding: 8px;
    font-size: 10px;
  }
  .local-card > strong {
    display: none;
  }
  .request-panel th,
  .request-panel td {
    padding-left: 5px;
    padding-right: 5px;
  }
  .request-panel .stock-qty {
    width: 70px;
  }
  .request-summary {
    font-size: 11px;
  }
  .results > .eyebrow {
    font-size: 8px;
  }
}

#characters-panel .stack-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

#characters-panel details {
  margin-top: 0.75rem;
}

#characters-panel summary {
  cursor: pointer;
  color: var(--muted);
}

#characters-panel code {
  font-size: 0.85em;
  word-break: break-all;
}

.spread {
  display: block;
  margin-top: 0.35rem;
  font-weight: 400;
  color: var(--muted);
}

.origins {
  display: block;
  color: var(--muted);
}

.sync-button .spinner {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.45em;
  vertical-align: -0.08em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* A moving spinner is decoration; the button text and #save-status carry the
   actual state, so reduced-motion users lose nothing by stopping it. */
@media (prefers-reduced-motion: reduce) {
  .sync-button .spinner {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.5;
  }
}

.why {
  margin: 0.5rem 0 0.25rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 4px 4px 0;
}

.why p {
  margin: 0 0 0.5rem;
}

.why-group + .why-group {
  margin-top: 0.5rem;
}

.why ul {
  margin: 0.2rem 0 0;
}

.ship-items .mark,
.why-group .mark {
  display: inline-block;
  width: 1.1em;
  font-weight: 700;
}

.ship-items li.fits {
  color: var(--accent);
}

.ship-items li.spare {
  color: #f2c94c;
}

.why-group li.absent {
  color: #f2c94c;
  opacity: 0.9;
}

.spare-note {
  opacity: 0.8;
}

.ship-quality {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A progress element rather than a styled span: the content security policy
   forbids inline styles, and this is what the element is for. */
.quality-bar {
  appearance: none;
  width: 46px;
  height: 4px;
  border: 0;
  border-radius: var(--control-radius);
  overflow: hidden;
  background: #29343f;
  color: var(--accent);
}

.quality-bar::-webkit-progress-bar {
  background: #29343f;
}

.quality-bar::-webkit-progress-value {
  background: var(--accent);
}

.quality-bar::-moz-progress-bar {
  background: var(--accent);
}

.quality-count {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Same shape as every other badge; only the tint differs. */
.badge.supply {
  background: #3a3320;
  color: #f2c94c;
}

.supply-note {
  color: #f2c94c;
}

/* ----------------------------------------------------------------- HUD pass
   Everything below is a deliberate later layer over the original sheet, so
   Biome's noDescendingSpecificity fires on every rule here by construction.
   That rule is disabled in biome.json for this reason, not because the
   warnings were inconvenient.
   ----------------------------------------------------------------- HUD pass
   Structure is square and framed, the way EVE frames a target. The corner
   tick marks a locked selection; it is drawn, not decorative, so it appears
   only on the thing currently selected. */
.locked {
  position: relative;
  border-color: var(--border-strong);
}
.locked::before,
.locked::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--lock);
  pointer-events: none;
}
.locked::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}
.locked::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

/* The readiness readout: the one loud thing on the page.
   Discrete cells rather than a proportional bar, because the counts are whole
   ships and because a capacitor is what an EVE pilot already reads at a
   glance. Cells also need no inline width, which the policy forbids. */
.readout-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.readout-where {
  color: var(--muted);
  font-size: 12px;
}
.readout-bar {
  display: flex;
  gap: 3px;
  margin: 16px 0 14px;
  max-width: 460px;
}
.cell {
  flex: 1 1 0;
  height: 18px;
  min-width: 4px;
  max-width: 34px;
  background: #1b262f;
  border-top: 2px solid #2a3945;
}
.cell.exact {
  background: #1d3b36;
  border-top-color: var(--lock);
}
.cell.variant {
  background: #1d3b36;
  border-top-color: #2f8f7c;
}
.cell.spare {
  background: #23313a;
  border-top-color: #4a6b7d;
}
.cell.move {
  background: #162f35;
  border-top-color: var(--accent);
}
.readout-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.readout-legend .metric {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.readout-legend .metric-number {
  font-size: 15px;
  font-weight: 600;
}
.readout-legend .metric-title {
  font-size: 12px;
  color: var(--muted);
}
.readout-legend .metric small {
  display: none;
}
.readout-legend .exact .metric-number {
  color: var(--lock);
}
.readout-legend .variant .metric-number {
  color: #6fc9b4;
}
.readout-legend .spare .metric-number {
  color: #9fb6c4;
}
.readout-legend .move .metric-number {
  color: var(--accent);
}
.readout-legend .short .metric-number {
  color: var(--caution);
}
#readiness-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
#readiness-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Long lists start closed so the page opens on its summary, not its data.
   The count stays visible in the heading, so collapsing hides the rows and
   never the signal. */
.collapse > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
  list-style: none;
}
.collapse > summary::-webkit-details-marker {
  display: none;
}
.collapse > summary::before {
  content: "+";
  display: inline-block;
  width: 1.1em;
  color: var(--accent);
  font-weight: 600;
}
.collapse[open] > summary::before {
  content: "\2212";
}
.collapse > summary:hover {
  color: var(--text);
}
.collapse > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.collapse[open] > summary {
  margin-bottom: 10px;
}

/* Meta lines read as separate facts, divided by a rule rather than a
   punctuation mark borrowed from a byline. */
/* inline-flex, not flex: inside a <summary> a block-level child pushes the
   disclosure marker onto its own line above the name. */
.meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 10px;
  vertical-align: baseline;
}
.meta > span + span {
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

/* Slot group as a column rather than a clause: it is the same fact on every
   line, so it belongs in the same place on every line. */
.ship-items li,
.why-group li,
.ship-row ul li,
.assigned-ships li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.line-name {
  flex: 1 1 auto;
  min-width: 0;
}
.line-slot {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

/* Location is the scope for every count on the page, so it sits with the
   readout rather than inside one panel's settings. */
.readout-where {
  display: flex;
  align-items: center;
  gap: 8px;
}
.readout-where label {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.readout-where select {
  margin: 0;
  width: auto;
  min-width: 190px;
}

/* Ships parked at another station are not missing, they are just not here.
   Naming them turns a bare zero into somewhere to go. */
.readout-elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.readout-elsewhere:empty {
  display: none;
}
.elsewhere-label {
  color: var(--muted);
  font-size: 12px;
}
button.elsewhere {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 9px;
  font-size: 12px;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  cursor: pointer;
}
button.elsewhere span {
  color: var(--accent);
  font-weight: 600;
}
button.elsewhere:hover {
  border-color: var(--accent);
}

/* The trademark notice has to be present, but it does not have to occupy the
   sidebar. It reveals on hover and on keyboard focus, so it is reachable
   without a pointer. */
.legal {
  position: relative;
  display: inline-block;
}
.legal-trigger {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.legal-notice {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 250px;
  padding: 10px 12px;
  background: var(--panel, #151e28);
  border: 1px solid var(--border, #2a3542);
  box-shadow: 0 6px 20px rgb(0 0 0 / 45%);
  z-index: 20;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}
.legal:hover .legal-notice,
.legal:focus-within .legal-notice {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .legal-notice {
    transition: none;
  }
}

.haul {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.haul-title {
  margin: 0 0 10px;
  color: #f2c94c;
  font-size: 12px;
}
.haul td button.elsewhere {
  margin: 2px 4px 2px 0;
}
.paste-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
#paste-text {
  width: 100%;
  font-family: inherit;
  resize: vertical;
}

/* One disclosure treatment for every expandable row.
   A <summary> keeps its native marker on its own line as soon as a child is
   block level, and .ship-top is a flex row by necessity. So the native marker
   is replaced with a drawn one and the summary becomes the flex container
   itself, which also matches the collapsible sections above. */
.ship-row > summary,
.assigned-ships > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.ship-row > summary::-webkit-details-marker,
.assigned-ships > summary::-webkit-details-marker {
  display: none;
}
.ship-row > summary::before,
.assigned-ships > summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 1.1em;
  color: var(--accent);
  font-weight: 600;
}
.ship-row[open] > summary::before,
.assigned-ships[open] > summary::before {
  content: "\2212";
}
.ship-row > summary:focus-visible,
.assigned-ships > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The flex row inside now shares the summary's line rather than owning it. */
.ship-row > summary > .ship-top {
  flex: 1 1 auto;
  min-width: 0;
}

/* A shortfall covered by moving is not a shortfall to buy, but it is still a
   shortfall here. Its own column keeps the row honest. */
td.movable {
  color: #f2c94c;
}

.stock-filter {
  width: 100%;
  margin: 0 0 12px;
}