/* 46-editor-connections.css — v42.47
   The editor and connections boards from the canvas, in CSS.

   MEASURED FIRST: the NPC form ran 49px inputs, an 18px grid gap and 81px per
   field in ONE column — 1,772px of scrolling on a 915px screen. Short fields
   now pair two across (the `span-2` class already marks the wide ones), the
   control is 44px and the gap 10px, which puts the same 21 fields in seven
   rows instead of thirteen. */

/* ---------- editors ---------- */
#modal.codex-editor .modal-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
/* The codex editor pins itself to one column below 700px, at a specificity
   that beats the rule above, so the pairing has to be stated at the same
   weight. Short fields pair from 361px up; the span-2 class still carries the
   wide ones full width. */
#modal.codex-editor .modal-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#modal.codex-editor .modal-form-grid > .editor-section-title { margin-top: 4px; }
#modal.codex-editor .modal-form-grid > .span-2,
#modal.codex-editor .modal-form-grid > .check-row,
#modal.codex-editor .modal-form-grid > .row-sub,
#modal.codex-editor .modal-form-grid > .field-error,
#modal.codex-editor .modal-form-grid > .editor-section-head { grid-column: 1 / -1; }
#modal.codex-editor .form-grid > div,
#modal.codex-editor .modal-form-grid > div { gap: 4px; }
#modal.codex-editor .modal-form-grid label,
#modal.codex-editor .modal-form-grid > div > span:first-child { font-size: var(--t0); color: #5a4728; }
#modal.codex-editor .modal-form-grid input:not([type="checkbox"]):not([type="file"]),
#modal.codex-editor .modal-form-grid select,
#modal.codex-editor .form-grid input:not([type="checkbox"]):not([type="file"]),
#modal.codex-editor .form-grid select {
  min-height: 44px;
  border-radius: 11px;
}
#modal.codex-editor .modal-form-grid textarea { min-height: 72px; border-radius: 11px; }

/* A heading per group of fields, so a 21-field form reads as sections rather
   than a wall of controls. Added by 84-editor-rules.js. */
.editor-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: var(--t0); font-weight: var(--fw-head); color: #5a4728;
}
.editor-section-head::after {
  content: ""; flex: 1 1 auto; height: 1px; background: rgba(120, 92, 43, .22);
}
/* Switches live together under Visibility, never loose between text fields. */
#modal.codex-editor .check-row {
  min-height: 44px; border-radius: 11px;
  border: 1px solid rgba(120, 92, 43, .26);
  background: rgba(255, 252, 240, .5);
  padding: 0 12px; display: flex; align-items: center; gap: 10px;
}

/* ---------- connections, inline and in the explorer ---------- */
/* Tools stay put while the list scrolls: at 23 links you narrow from wherever
   you have got to, not by scrolling back to the top. */
.codex-connection-explorer-tools {
  position: sticky; top: 0; z-index: 2;
  background: var(--parchment, #f4ecd8);
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(120, 92, 43, .2);
}
.codex-connection-filters .fchip { font-variant-numeric: tabular-nums; }
.cxn-count { font-variant-numeric: tabular-nums; opacity: .62; margin-left: 5px; }

/* Long bands show five and offer the rest, rather than dumping everything. */
.cxn-row-hidden { display: none !important; }
.cxn-show-more {
  width: 100%; min-height: 40px; margin-top: 6px;
  border-radius: 10px; border: 1px solid rgba(120, 92, 43, .34);
  background: transparent; color: #3f3018;
  font: inherit; font-size: var(--t0); font-weight: var(--fw-emph); cursor: pointer;
}
.cxn-show-more:hover { background: rgba(120, 92, 43, .1); }

/* The wireframes paired fields at 390px wide and they read well, so the
   single-column fallback only applies to genuinely small phones. At 420px this
   rule was cancelling the pairing on the exact devices it was drawn for. */
@media (max-width: 360px) {
  #modal.codex-editor .modal-form-grid { grid-template-columns: minmax(0, 1fr); }
  #modal.codex-editor .modal-form-grid > * { grid-column: 1 / -1 !important; }
}

/* v42.51 — connection rows.
   The type was printed twice: a text tag beside the name and a status chip
   repeating it, so a row read "Port Peril · Place · Place · Settlement". The
   icon says it instead; the tag stays in the markup for screen readers. */
.codex-connection-item .cxn-type-tag {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cxn-row-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 6px;
  color: #6b5631;
  vertical-align: -3px;
}
.codex-connection-item .codex-connection-copy em {
  display: block;
  font-style: normal;
  font-size: var(--t0);
  color: var(--muted);
}
.codex-connection-item .cxn-chip-hidden { display: none; }

/* ---------- v42.59: the Connections explorer (Connections-sheet.html) ---------- */
.cx-explorer { display: flex; flex-direction: column; gap: 12px; }
/* Search and the type rail stay put while a long list scrolls, as before. */
.cx-tools { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; z-index: 2;
  margin: 0 -2px; padding: 4px 2px 8px; background: var(--chart); }
.cx-tools .search-line input { min-height: 44px; border-radius: 12px; font-size: 16px; }
.cx-type-rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cx-type-rail::-webkit-scrollbar { display: none; }
.cx-chip {
  flex: 0 0 auto; min-height: 36px; padding: 0 13px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font: inherit;
  border: 1px solid rgba(120, 92, 43, .38); background: #ece0bd; color: var(--ink);
}
.cx-chip-count { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.cx-chip.active { background: var(--brass); border-color: transparent; color: #1b1105; font-weight: var(--fw-emph); }
.cx-chip.active .cx-chip-count { color: #1b1105; }
.cx-chip:focus-visible { outline: 2px solid var(--lagoon-deep); outline-offset: 2px; }
.cx-aliases { margin: 0; font-size: var(--t0); color: var(--ink-soft); }
.cx-aliases > span:first-child { font-weight: var(--fw-emph); margin-right: 4px; }
.cx-sections { display: flex; flex-direction: column; gap: 10px; }
.cx-section {
  border: 1px solid rgba(120, 92, 43, .28); border-radius: 12px; background: rgba(255, 252, 240, .45);
  padding: 0 12px;
}
.cx-section > summary { list-style: none; }
.cx-section > summary::-webkit-details-marker { display: none; }
.cx-section-head {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
}
.cx-section-title { flex: 1 1 auto; font-size: var(--t0); font-weight: var(--fw-head); color: #5a4728; }
.cx-section-count { font-size: var(--t0); font-weight: var(--fw-body); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.cx-caret { width: 8px; height: 8px; margin: 0 3px 3px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-45deg); }
.cx-section[open] .cx-caret { transform: rotate(45deg); }
.cx-section-note { margin: 0 0 6px; font-size: var(--t0); color: var(--ink-soft); }
.cx-rows { display: flex; flex-direction: column; border-top: 1px solid rgba(120, 92, 43, .16); }
.cx-row + .cx-row { border-top: 1px solid rgba(120, 92, 43, .16); }
.cx-row .codex-connection-item {
  width: 100%; min-height: 56px; margin: 0; padding: 8px 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; display: flex; align-items: center; gap: 10px; text-align: left;
}
.cx-row .codex-connection-copy { flex: 1 1 auto; min-width: 0; }
.cx-row .codex-connection-copy small { display: block; font-size: var(--t0); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-badge {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: var(--fw-emph);
  background: #efe3bf; color: #6b5223; white-space: nowrap;
}
.cx-badge-notes { background: #ece3f3; color: #5b3f78; }
.cx-badge-suggest { background: #eee8db; color: #5f5440; }
.cx-badge-past { background: #e7e1d6; color: #4e463a; }
.cx-more {
  display: block; width: 100%; min-height: 44px; margin: 4px 0 12px; border-radius: 12px;
  border: 1px solid rgba(120, 92, 43, .38); background: transparent; color: var(--ink); font: inherit; font-weight: var(--fw-emph); cursor: pointer;
}
.cx-more[hidden] { display: none; }
.cx-section:not([open]) { padding-bottom: 0; }
.cx-section[open] > .cx-rows { padding-bottom: 4px; }

/* 41-codex-refinement forces font-size: inherit !important on everything inside
   a record reader; only an earlier layer's !important can size these. */
@layer editor-pilot {
  #modal.cx-modal .modal-head h2 { font-size: var(--t1) !important; }
  #modal.cx-modal .cx-badge { font-size: .72rem !important; }
  #modal.cx-modal .cx-chip, #modal.cx-modal .cx-section-title, #modal.cx-modal .cx-section-count,
  #modal.cx-modal .cx-section-note, #modal.cx-modal .codex-connection-copy small, #modal.cx-modal .cx-aliases { font-size: var(--t0) !important; }
  #modal.cx-modal .codex-connection-copy b { font-size: var(--t1) !important; }
  #modal.cx-modal .codex-connection-copy small { font-weight: var(--fw-body) !important; color: var(--ink-soft) !important; }
}
#modal.cx-modal .cx-row .codex-connection-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal.cx-modal .cx-row .cxn-item-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
#modal.cx-modal .cx-row .cxn-type-tag { display: none; }   /* the rail and the glyph say the type */