/* Shipwreck wiki. Loaded after style.css, which supplies the palette, the
   masthead, the card and the page nav. Same chartplotter rules apply: white
   for values, grey for labels, blue only for selection, flat and square. */

.crumb {
  margin: 0 0 .7rem;
  font-size: .82rem;
}
.crumb a { color: var(--ink-dim); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

/* ---------- the index ---------- */

.wreck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
}

.wreck-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem .8rem .75rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  text-decoration: none;
}
.wreck-card:hover { border-color: var(--accent); }

.wc-name {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
}
.wc-type {
  color: var(--ink-dim);
  font-size: .8rem;
}
.wc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .7rem;
  margin-top: .25rem;
  color: var(--ink-2);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.wc-nopos {
  margin-top: .3rem;
  color: var(--warn);
  font-size: .74rem;
}

/* ---------- the record ---------- */

.specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.spec {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .5rem .7rem .55rem;
  background: var(--panel);
}
.specs dt {
  color: var(--ink-dim);
  font-size: .74rem;
}
.specs dd {
  margin: 0;
  color: var(--ink);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}

.position {
  margin: .9rem 0 0;
  color: var(--ink);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.pos-src { color: var(--ink-dim); font-size: .8rem; }

/* A wreck we will not put on the chart says so plainly, in the caution
   colour, because the absence is the point. */
.position.nopos {
  color: var(--warn);
  border: 1px solid var(--warn);
  border-left-width: 3px;
  padding: .55rem .75rem;
  font-size: .84rem;
}

.chart-link {
  color: var(--accent);
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
}
.chart-link:hover { text-decoration: underline; }

.prose {
  margin: 0 0 .7rem;
  color: var(--ink-2);
  font-size: .93rem;
  line-height: 1.62;
  max-width: 70ch;
}
.prose:last-child { margin-bottom: 0; }

/* ---------- embeds ---------- */

.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: #000;
  margin-bottom: .6rem;
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- sources ----------
   Every claim on the page has to be checkable, so this list is not decoration
   and does not get tucked away. */

.sourcelist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sourcelist li {
  padding: .32rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  word-break: break-word;
}
.sourcelist li:last-child { border-bottom: 0; }
.sourcelist a { color: var(--accent); text-decoration: none; }
.sourcelist a:hover { text-decoration: underline; }
.src-for {
  display: block;
  color: var(--ink-dim);
  font-size: .76rem;
}

@media (max-width: 520px) {
  .specs { grid-template-columns: 1fr 1fr; }
  .wreck-grid { grid-template-columns: 1fr; }
}

/* Whether a wreck has a researched history or only the RSC record. Shown on
   the card so the list does not imply more than it holds. */
.wc-researched,
.wc-thin {
  margin-top: .3rem;
  font-size: .72rem;
}
.wc-researched { color: var(--accent-2); }
.wc-thin { color: var(--ink-dim); }