/* /compare: ship list docked on the left (the CCU Planner's look), compare table on the right. Table style as /ships. */
.db-page .wrap { max-width: none; padding-inline: max(16px, (100vw - 1700px) / 2); }
.org-hero .kicker a { color: inherit; }
.cmp-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
#copy { margin-left: auto; }
.cmp-tools { margin-top: 0; }
.tog { font-size: .85rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.cmp-scroll { margin-top: 10px; border: 1px solid var(--hud-line); background: rgba(14,10,20,.88); }
table.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .88rem; }
table.cmp col.lab { width: 8.5rem; }
table.cmp th, table.cmp td { padding: 7px 10px; border-top: 1px solid rgba(181,124,255,.12); vertical-align: middle; }
table.cmp th[scope=row] { text-align: left; font: 500 .6rem/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: #130e1b; }
table.cmp tr.grp th { padding-top: 16px; font: 600 .62rem/1 var(--hud); letter-spacing: .2em; color: var(--cyan); background: #17111f; border-top: 1px solid var(--cyan); text-transform: uppercase; text-align: left; }
table.cmp thead td { position: sticky; top: 0; z-index: 2; background: #17111f; border-bottom: 1px solid var(--cyan); padding: 10px; vertical-align: top; }
table.cmp thead td:first-child { vertical-align: bottom; font: 500 .6rem/1.4 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sh { position: relative; }
.sh img { width: 100%; aspect-ratio: 16/8; object-fit: cover; display: block; border: 1px solid var(--hud-line); background: #0b0710; }
.sh .nm { display: block; margin-top: 8px; overflow-wrap: break-word; font: 400 clamp(.78rem, .9vw, 1rem)/1.15 var(--sc-font); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.sh .mk2 { display: block; font: 500 .58rem/1.4 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sh .x { position: absolute; top: 6px; right: 6px; width: 1.6rem; height: 1.6rem; border: 1px solid var(--hud-line); background: rgba(11,7,16,.85); color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.sh .x:hover { color: #ff7a7a; border-color: #ff7a7a; }
.empty { display: grid; place-items: center; height: 100%; min-height: 8rem; border: 1px dashed var(--hud-line); color: var(--muted); font: 600 .66rem/1.4 var(--hud); letter-spacing: .14em; text-transform: uppercase; text-align: center; cursor: pointer; }
td.v { font-variant-numeric: tabular-nums; }
td.v .bar { display: block; height: 3px; margin-top: 5px; background: rgba(181,124,255,.18); }
td.v .bar i { display: block; height: 100%; background: var(--muted); }
.yes { color: #6dffb0; } .no { color: var(--muted); }
.dim { color: var(--muted); }
.st { font: 600 .58rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; padding: 4px 6px; border: 1px solid; }
.st.fr { color: #6dffb0; } .st.cn { color: #ffb43a; }
tr.same td.v { color: var(--muted); }
@media (max-width: 760px) {
  .st { font-size: .5rem; padding: 3px 4px; }
  table.cmp tr.lbl td { display: table-cell; padding: 8px 8px 0; border-top: 1px solid rgba(181,124,255,.12); font: 500 .56rem/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: #130e1b; }
  table.cmp tr.lbl + tr td { border-top: 0; }
  table.cmp th, table.cmp td { padding: 6px 8px; font-size: .82rem; }
  .sh .nm { font-size: .78rem; overflow-wrap: anywhere; } .sh .mk2 { font-size: .5rem; }
  .sh img { aspect-ratio: 4/3; }
    .empty { min-height: 5rem; font-size: .55rem; }
}


/* Ship list docked on the left, same look as the CCU Planner's dock (ccu.css .dock/.row); stacks on top on narrow screens */
.cmp-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; }
.dock { position: sticky; top: 12px; display: grid; gap: 8px; padding: 12px; max-height: calc(100vh - 24px); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: linear-gradient(180deg, #17111f, #100c16); border-top: 1px solid var(--thruster); }
.lbl { font: 500 .66rem/1 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.dock-h { display: flex; justify-content: space-between; align-items: center; }
.all { display: flex; gap: 6px; align-items: center; font: 500 .62rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
#q { width: 100%; padding: 8px 10px; font: inherit; font-size: .85rem; color: var(--text); background: #15101d; border: 0; box-shadow: inset 0 0 0 1px rgba(181,124,255,.28); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pr { display: flex; align-items: center; gap: 3px; font: 500 .72rem/1 var(--hud); color: var(--muted); }
.pr input { width: 64px; padding: 6px; font: 500 .78rem/1 var(--hud); color: var(--text); background: #15101d; border: 0; box-shadow: inset 0 0 0 1px rgba(181,124,255,.28); }
.dash { font: 500 .62rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#sort { flex: 1 1 140px; min-width: 0; padding: 6px; font: 500 .72rem/1.2 var(--hud); color: var(--text); background: #15101d; border: 0; box-shadow: inset 0 0 0 1px rgba(181,124,255,.28); color-scheme: dark; }
.list { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; min-height: 120px; display: grid; gap: 6px; align-content: start; }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px 6px 6px; background: #1c1526; box-shadow: inset 0 0 0 1px rgba(181,124,255,.28); cursor: pointer; }
.row:hover { box-shadow: inset 0 0 0 1px var(--violet, #b57cff); }
.row.on { box-shadow: inset 0 0 0 2px var(--thruster), 0 0 14px rgba(212,168,75,.25); }
.row .thumb { width: 56px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.who { min-width: 0; display: grid; }
.who b { font: 600 .82rem/1.2 var(--sc-font); overflow-wrap: anywhere; }
.who small, .cost-col small { font: 500 .58rem/1.3 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cost-col { display: grid; justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.cost-col b { font: 600 .85rem/1.2 var(--hud); }
.row.on .add { color: var(--thruster); }
.hint { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.4; }
@media (max-width: 860px) { .cmp-layout { grid-template-columns: 1fr; } .dock { position: static; max-height: 44vh; } .dock .hint { display: none; } }

.ghostbtn { font: 600 .66rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--hud-line); padding: 9px 12px; cursor: pointer; }
.ghostbtn:hover { color: var(--text); border-color: var(--cyan); }
.empty { cursor: default; }
.cmp-scroll.over { box-shadow: 0 0 0 2px var(--thruster); }
.row.full { opacity: .5; cursor: not-allowed; }
.none { color: var(--muted); font-size: .85rem; padding: 8px 2px; list-style: none; }
.sh img.none { visibility: hidden; }
.sh a.nm { text-decoration: none; } .sh a.nm:hover { color: var(--cyan); }
.cmp-intro { padding: 28px 16px; text-align: center; color: var(--muted); }
.all[hidden] { display: none; }
.row .thumb.none { visibility: hidden; }
/* Category headers fold their rows away (state kept in localStorage) */
table.cmp tr.grp .fold { all: unset; cursor: pointer; display: flex; align-items: center; gap: .5em; width: 100%; }
table.cmp tr.grp .fold:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
table.cmp tr.grp .fold:hover { color: #fff; }
table.cmp tr.grp .chev { display: inline-block; transition: transform .15s; }
table.cmp tr.grp.shut .chev { transform: rotate(-90deg); }
table.cmp tr.grp.shut th { padding-bottom: 10px; opacity: .8; }