/* 48-codex-rows.css — v42.52
   The list rows and the sticky header, from the canvas boards. */

/* ---------- the pin ---------- */
/* Was a blue disc with an emoji: the only blue in the app, and louder than the
   name it sat beside. Now brass, flat on the row, filled only when pinned. */
/* Their own pin styling (including the blue disc on `.on` and `.shared`) wins
   on specificity, so these are stated at the same weight or higher. */
.lrow .codex-row-pin.row-pin-brass,
.lrow .codex-row-pin.row-pin-brass.on,
.lrow .codex-row-pin.row-pin-brass.shared {
  width: 36px; height: 36px; min-width: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px;
  background: transparent;
  color: rgba(120, 92, 43, .55);
  cursor: pointer;
}
.codex-row-pin.row-pin-brass svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.codex-row-pin.row-pin-brass:hover { background: rgba(120, 92, 43, .12); color: #6b5631; }
.lrow .codex-row-pin.row-pin-brass.on,
.lrow .codex-row-pin.row-pin-brass.on.shared {
  color: #845c0f;
  background: rgba(193, 138, 42, .18);
  border: 0;                 /* their pinned state drew a blue border */
  box-shadow: none;
}
.codex-row-pin.row-pin-brass.on svg { fill: currentColor; stroke: currentColor; }
.codex-row-pin.row-pin-brass:focus-visible { outline: 2px solid var(--brass, #c18a2a); outline-offset: 2px; }
/* A pinned row no longer gets a halo of its own; the filled pin says it. */
.lrow.codex-entry-row:has(.codex-row-pin.on) { box-shadow: none; }

/* ---------- the tag, under the name ---------- */
.lrow .lrow-sub .row-tag-inline::before {
  content: "·";
  margin-right: 7px;
  color: var(--muted);
  font-weight: var(--fw-body);
}
.lrow .lrow-sub .row-tag-inline {
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--t0);
  font-weight: var(--fw-emph);
  vertical-align: 1px;
}
/* The name now has the row to itself, so it can run to the chevron. */
.lrow .lrow-text { min-width: 0; }
.lrow .lrow-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .lrow-sub { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.lrow .lrow-sub .lrow-sub-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lrow .lrow-sub .row-tag-inline { flex: 0 0 auto; }

/* ---------- the sticky header ---------- */
/* Search and the type rail stay put, so you can switch type from anywhere in a
   long list instead of scrolling back to the top. */
#screen-codex .codex-global-search {
  position: sticky; top: 0; z-index: 4;
  background: var(--deck, #2b2118);
  padding-top: 6px; padding-bottom: 6px;
}
#screen-codex #codexCategoryRail {
  position: sticky; top: 58px; z-index: 3;
  background: var(--deck, #2b2118);
  padding-bottom: 2px;
}
@media (min-width: 720px) {
  /* Room for both on one line, so the rail sits beside the field. */
  #screen-codex #codexCategoryRail { top: 54px; }
}

/* v42.54: list thumbnails crop from the top too — the same beheading problem
   as the sheets, four rows at a time. */
.lrow img, .lrow-media img, .codex-entry-row img { object-position: top center; }
/* The row thumbnail is an <img> inside .avatar, whose own rule centres it and
   wins on specificity — which is why heads were still being cut in the lists
   after v42.54 fixed the sheets. */
.lrow .avatar img,
.codex-entry-row .avatar img,
.lrow-main .avatar img { object-position: top center; }

/* v42.56 — the tag in its own column, so tags line up down the list instead of
   starting wherever the role happens to end. */
/* v42.58: the tag column sizes this cluster now. The 40-45% cap from
   43-codex-rows.css predates it: a tag wider than the column's minimum
   ("Indifferent", 84px on a phone) plus the chevron overflowed the cap and
   pushed that one tag 5px right of the others. */
.lrow .lrow-end { display: flex; align-items: center; gap: 8px; max-width: none; }
.lrow .lrow-end .row-tag-column {
  flex: 0 0 auto;
  /* v42.59: the column is as wide as the widest standard tag ("Suspicious",
     95px here, 89px on a phone), so every attitude and status shares both
     edges; a longer custom status may still grow rather than clip. The pill
     is a flex box, so text-align alone didn't centre it ("Enemy" sat 8px
     left of centre) — justify-content does. */
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  height: 26px; white-space: nowrap; line-height: 1;
  /* v42.66: as wide as its own text. The fixed 96px column gave a bare "6"
     the width of "Suspicious" and cost every name 30–60px. Tags still end
     on one right edge (they sit against the chevron), just not one left. */
  min-width: 0;
  text-align: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--t0);
  font-weight: var(--fw-emph);
}
@media (max-width: 420px) {
  /* Narrower column on a phone, but still a column: shrinking it to content
     put every tag at a different left edge, which is the thing being fixed. */
  .lrow .lrow-end .row-tag-column { min-width: 0; font-size: .72rem; padding: 2px 8px; }
}

/* Pinned for everyone and pinned for yourself are different things and now
   look it: brass is the shared pin the table sees, teal is your own. */
.lrow .codex-row-pin.row-pin-brass.on.shared {
  color: #845c0f; background: rgba(193, 138, 42, .18);
}
.lrow .codex-row-pin.row-pin-brass.on:not(.shared) {
  color: #14564c; background: rgba(31, 109, 95, .16);
}
.lrow .codex-row-pin.row-pin-brass.on:not(.shared) svg { fill: currentColor; }

/* Dense rows: for a list you scan rather than read. */
.lrow-list.is-dense .lrow { padding: 6px 9px; }
.lrow-list.is-dense .lrow .avatar { width: 34px; height: 34px; }
/* v44.5: Codex portraits at 56px, dense lists too — at 44×34 a face was hard
   to make out. The 72px row already has the height for it. */
.codex-entry-row .avatar, .lrow-list.is-dense .codex-entry-row .avatar,
.codex-entry-row .codex-row-portrait { width: 56px; height: 56px; flex: 0 0 56px; min-width: 56px; }
.lrow-list.is-dense .lrow .lrow-title { font-size: var(--t1); }
.lrow-list.is-dense .lrow .codex-row-pin.row-pin-brass { width: 32px; height: 32px; }

/* ---------- v42.61: place counts as number + icon ---------- */
/* "13 [person] · 4 [star]" instead of "13 NPCs · 4 quests": the same glyphs
   as the Codex tabs, so the count fits the tag column with room to spare. */
.lrow .chip.place-counts { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.lrow .chip.place-counts .place-count { display: inline-flex; align-items: center; gap: 3px; }
.lrow .chip.place-counts svg { flex: 0 0 auto; display: block; }

/* ---------- v42.61: Who holds what keeps whole names ---------- */
/* The name cell is a flex box, so its text could not ellipsis: at 390px a
   103px column cut "Nimbus Tidebreaker" to "Nimbus Tideb". Tier columns now
   stop at 30px (two digits, or "VR") and the name takes the rest (153px at
   390); a name that still does not fit wraps at its space, never mid-word. */
.pitem-matrix .pm-row { grid-template-columns: minmax(0, 1fr) repeat(6, minmax(26px, 30px)); }
.pitem-matrix .pm-name {
  white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
  line-height: 1.2; text-align: left; min-height: 44px;
}

/* ---------- v42.65: the All page and story threads (All.html, Thread.html) ---------- */
.codex-story-list { display: grid; gap: 8px; }
@media (min-width: 900px) { .codex-story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.codex-thread-card {
  display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--chart); color: var(--ink);
  box-shadow: var(--e1); text-align: left; font: inherit; cursor: pointer;
}
.codex-thread-card:focus-visible { outline: 2px solid var(--lagoon-deep); outline-offset: 2px; }
.ctc-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ctc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ctc-counts { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctc-count { display: inline-flex; align-items: center; gap: 3px; }
.ctc-count svg { display: block; }
.ctc-quests { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--ink); }
.ctc-quest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctc-status, .ctc-more { color: var(--ink-soft); }
.ctc-faces { display: flex; align-items: center; padding-left: 8px; }
.ctc-face {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; margin-left: -8px; border-radius: 999px; overflow: hidden;
  border: 2px solid var(--chart); background: var(--chart-2); color: var(--ink-soft); font-weight: 700;
}
.ctc-face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ctc-face-more { background: var(--ink-soft); color: var(--chart); }
.codex-health-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px;
  margin: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--chart-2); color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.codex-health-row { margin-top: 8px; font-weight: 400; }
.codex-jump-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.codex-jump-strip::-webkit-scrollbar { display: none; }
.codex-jump-chip {
  display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto; min-height: 44px; max-width: 70vw;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--chart); color: var(--ink);
  font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; align-items: center;
}
.codex-jump-kind { color: var(--ink-soft); }

/* The thread page */
.codex-thread-page { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; }
.ctp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 54px; }
.ctp-head::after { content: ''; width: 70px; }
.ctp-head h2 { margin: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctp-back {
  min-height: 44px; min-width: 70px; padding: 0 8px; border: 0; background: none; color: var(--brass, #c18a2a);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.ctp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ctp-chips .chip { display: inline-flex; align-items: center; gap: 8px; }
.ctp-lead { background: var(--brass); color: #1b1105; border-color: var(--brass); }
.ctp-section { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ctp-label { margin: 0; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #c3b189); }
.ctp-pile {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px 6px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--chart); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.ctp-pile .ctc-faces { flex: 0 0 auto; }
.ctp-pile-names { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.ctp-ships { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--muted, #c3b189); }
.ctp-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 16px; }
.ctp-actions .button { min-height: 48px; margin: 0; }
.ctp-actions .button:only-child { grid-column: 1 / -1; }
/* The thread page sits on the screen's dark ground: headings take the
   section-title gold, labels the hint colour, and the second action is an
   outline, as on the board. */
.ctp-head h2 { color: rgb(232, 192, 105); font-size: 20px; }
.ctp-label { color: rgb(185, 167, 132); font-size: 13px; }
.ctp-ships { color: rgb(185, 167, 132); }
.ctp-actions .button.secondary { background: transparent; border: 1px solid rgba(232, 192, 105, .55); color: rgb(241, 228, 196); box-shadow: none; text-shadow: none; }

/* v42.66: a thread is one compact row (faces · place · counts · chevron). */
.codex-thread-card.is-compact { flex-direction: row; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 14px; }
.codex-thread-card.is-compact .ctc-faces { flex: 0 0 auto; padding-left: 8px; }
.codex-thread-card.is-compact .ctc-face { width: 32px; height: 32px; }
.codex-thread-card.is-compact .ctc-face-place { color: var(--ink-soft); }
.codex-thread-card.is-compact .ctc-name { flex: 1 1 auto; }

/* v44.24: a place's people and quests, opened from its "NPCs here" / "Quests here". */
.rs-fact .fact-link { border: 0; background: none; padding: 6px 0 6px 12px; margin: -6px 0; min-height: 44px; font: inherit; font-weight: 700; color: var(--teal, #1a6a66); cursor: pointer; }
#modal .place-list { display: flex; flex-direction: column; gap: 8px; }
.place-list-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px; text-align: left;
  border: 1px solid #ddd0ab; border-radius: 14px; background: #efe4c3; color: #231a10; font: inherit; cursor: pointer;
}
.place-list-face {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 999px;
  background: #d6c7a1; color: #3f3018; font-weight: 700; font-size: 17px; box-shadow: 0 0 0 2px #fff4dc, 0 0 0 3px rgba(193,138,42,.55);
}
.place-list-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.place-list-face.is-dead img { filter: grayscale(1); opacity: .75; }
.place-list-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.place-list-name { font-weight: 700; overflow-wrap: anywhere; }
.place-list-sub { font-size: 13px; color: #5c4a30; }
.place-list-tag { flex: 0 0 auto; white-space: nowrap; }
.place-list-secret { font-size: 11px; vertical-align: 1px; }
.place-list-chev { color: #5c4a30; font-size: 20px; }

/* v44.28: a place's charts as icon tiles, two to a row. */
.loc-chart-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.loc-chart-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 10px 12px; text-align: left;
  border: 1px solid #ddd0ab; border-radius: 14px; background: #efe4c3; color: #231a10; font: inherit; cursor: pointer;
}
.loc-chart-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(193,138,42,.18); color: #845c0f; }
.loc-chart-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.loc-chart-name { font-weight: 700; }
.loc-chart-sub { font-size: 13px; color: #5c4a30; overflow-wrap: anywhere; }
/* v44.29: labels only; centred; one tile spans the row, icon beside its label. */
.loc-chart-tile { align-items: center; text-align: center; }
.loc-chart-tiles.is-one { grid-template-columns: minmax(0, 1fr); }
.loc-chart-tiles.is-one .loc-chart-tile { flex-direction: row; justify-content: center; gap: 10px; padding: 8px 14px; }