/* QED — /fleet and /surveyor/:id. Extends qed.css's survey-plate vocabulary;
   load this stylesheet after it. */

/* ── shared ──────────────────────────────────────────────────────────────── */

.notice {
  margin: 24px 4px 0;
  padding: 16px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.panel-empty {
  margin: 0;
  padding: 14px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}

/* ── /fleet wall of plates ───────────────────────────────────────────────────
   Twelve real plates at tile scale. Everything below the grid is the qed.css
   plate vocabulary re-tuned to fit: the markup, the typesetting and the
   creature are the same code the big plate on / runs, so the only thing that
   changes here is size. */

.wall-panel { margin: 18px 4px 0; }

.wall-panel > h2 .dim {
  margin-left: 10px;
  text-transform: none;
  letter-spacing: 0.02em;
}

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: 1px;
  background: var(--rule);
}

.wall-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ground);
}

.wall-tile-head,
.wall-tile-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  min-width: 0;
}

.wall-tile-head { border-bottom: 1px solid var(--rule); }
.wall-tile-foot { border-top: 1px solid var(--rule); }

.wall-tile-host {
  color: var(--mint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-tile-open {
  margin-left: auto;
  flex: none;
  color: var(--sulphur);
  text-decoration: none;
}
.wall-tile-open:hover { text-decoration: underline; }

.wall-tile-who {
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wall-tile-who:hover { text-decoration: underline; }

.wall-tile-count { margin-left: auto; flex: none; }

.wall-tile-frame {
  position: relative;
  height: 236px;
  overflow: hidden;
}

.wall-tile-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* The plate, shrunk. One column rather than two — at 256px a column rule would
   leave about twenty characters a line, which is a texture and not a page. */
.wall-tile-frame .plate-sheet { padding: 11px 13px 13px; }

.wall-tile-frame .plate-head {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  padding-bottom: 5px;
  margin-bottom: 8px;
}

.wall-tile-frame .plate-title {
  font-size: 12.5px;
  margin: 0 0 8px;
  max-width: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.wall-tile-frame .plate-body {
  columns: 1;
  column-rule: none;
  max-height: 162px;
  font-size: 9px;
  line-height: 1.58;
}

.wall-tile-frame .plate-body > * { margin: 0 0 6px; }
.wall-tile-frame .plate-h1,
.wall-tile-frame .plate-h2,
.wall-tile-frame .plate-h3 { font-size: 9px; letter-spacing: 0.04em; }
.wall-tile-frame .plate-li { padding-left: 10px; }
.wall-tile-frame .plate-li::before { top: 7px; width: 4px; }
.wall-tile-frame .plate-pre { font-size: 8.5px; padding-left: 7px; }

.wall-tile-frame .plate-foot {
  left: 13px;
  right: 13px;
  bottom: 9px;
  gap: 7px;
  font-size: 8px;
  padding-top: 6px;
}
.wall-tile-frame .plate-stamp { font-size: 11px; }

@media (max-width: 640px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
}

/* ── /fleet roster ───────────────────────────────────────────────────────── */

.roster-panel {
  margin: 18px 4px 0;
}

.roster { display: flex; flex-direction: column; min-width: 0; }

.roster-head,
.roster-row {
  display: grid;
  grid-template-columns: 56px 52px 118px 72px 150px 64px 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
}

.roster-head {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--rule);
}

.roster-body { display: flex; flex-direction: column; }

.roster-row {
  position: relative;
  border-bottom: 1px solid rgba(232, 238, 242, 0.05);
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(220, 230, 236, 0.85);
}
.roster-row:hover { background: rgba(232, 238, 242, 0.035); }

.roster-row-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.roster-row > *:not(.roster-row-link) { position: relative; z-index: 2; }

.roster-portrait { display: block; width: 48px; height: 36px; pointer-events: none; }

.roster-id { color: var(--sulphur); }
.roster-seed { color: var(--ink); }
.roster-kind { color: var(--dim); text-transform: lowercase; }
.roster-owner a { color: var(--mint); text-decoration: none; }
.roster-owner a:hover { text-decoration: underline; }
.roster-pages, .roster-tokens { text-align: right; color: var(--ink); }
.roster-reading {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dim);
}
.roster-reading a { color: var(--mint); text-decoration: none; }
.roster-reading a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .roster-head, .roster-row {
    grid-template-columns: 56px 48px 100px 64px 128px minmax(0, 1fr);
  }
  .roster-head span:nth-child(6), .roster-head span:nth-child(7),
  .roster-row .roster-pages, .roster-row .roster-tokens { display: none; }
}

@media (max-width: 640px) {
  .roster-head, .roster-row {
    grid-template-columns: 48px 90px minmax(0, 1fr);
  }
  .roster-head span:nth-child(4), .roster-head span:nth-child(5),
  .roster-row .roster-kind, .roster-row .roster-owner { display: none; }
}

/* ── /surveyor/:id ───────────────────────────────────────────────────────── */

.portrait-stage {
  position: relative;
  height: 220px;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(8, 22, 34, 0.5), transparent);
}
.portrait-stage canvas { position: absolute; inset: 0; }

.papers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  margin: 18px 4px 0;
}

.papers { margin: 0; }

.papers-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(232, 238, 242, 0.05);
  font-size: 12px;
}
.papers-row dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.papers-row dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.papers-row dd a { color: var(--mint); text-decoration: none; }
.papers-row dd a:hover { text-decoration: underline; }

.hosts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 100px;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(232, 238, 242, 0.05);
  font-family: var(--mono);
  font-size: 11px;
}
.hosts-host { color: var(--ink); }
.hosts-pages, .hosts-tokens { color: var(--dim); text-align: right; }

.marks {
  display: grid;
  gap: 1px;
  background: var(--rule);
}
.marks-row {
  background: var(--ground);
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}
.marks-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.marks-source {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--sulphur);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marks-source:hover { text-decoration: underline; }
.marks-sha {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marks-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
}

@media (max-width: 1080px) {
  .papers-grid { grid-template-columns: minmax(0, 1fr); }
  .portrait-stage { height: 180px; }
}