/* Shared building blocks for all apps: section heads, rows, buttons, segmented choice,
   on/off switch, slider, counter. */

/* "// SECTION" heading */
.sec-head {
  margin: 0 0 4px; padding-bottom: 4px;
  font: inherit; font-size: 18px; font-weight: normal; text-transform: uppercase;
  color: var(--text-dim); border-bottom: 1px dashed var(--line-dim);
}
.sec-head::before { content: '// '; }
.sec-head.sub { margin-top: 26px; }

/* heading with something on the right (note, edit button) */
.sec-split { display: flex; align-items: baseline; gap: 12px; }
.sec-split > :last-child { margin-left: auto; }
.sec-split .lock { font-size: 15px; color: var(--text-faint); }
.sec-split .chip { min-height: 30px; font-size: 16px; }

/* label left, value or controls right */
.row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px;
  min-height: 60px; padding: 8px 10px;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(var(--edge-rgb), .08);
}
.row.is-active { border-left-color: var(--text); background: rgba(var(--hi-rgb), .06); }
.row-label { font-size: 22px; text-transform: uppercase; }
.row-sub   { display: block; font-size: 17px; color: var(--text-dim); }
.row-value { font-size: 22px; min-width: 3ch; text-align: right; }
.row-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-left: auto; }
.row-empty { padding: 12px 10px; color: var(--text-faint); font-size: 20px; }
.entry-list, .fx-list { list-style: none; margin: 0; padding: 0; }

/* tab bar: one panel visible at a time */
.tabs { display: flex; margin-bottom: 14px; border: 1px solid var(--line); }
.tabs button {
  flex: 1; min-height: 48px; padding: 4px 8px;
  font: inherit; font-size: 19px; line-height: 1.05; letter-spacing: inherit; text-shadow: inherit; text-transform: uppercase;
  color: var(--text-dim); background: rgba(var(--panel-rgb), .6);
  border: 0; border-left: 1px solid var(--line-dim);
  cursor: pointer; touch-action: manipulation;
}
.tabs button:first-child { border-left: 0; }
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--text); text-shadow: none; }
.tabs button:focus { outline: none; }
.tabs button:focus-visible { outline: 1.5px dashed var(--text); outline-offset: -4px; }
.tab-panel[hidden] { display: none; }
@media (max-width: 420px) { .tabs button { padding: 4px; font-size: 17px; letter-spacing: 0; } }

/* list of options to choose from, e.g. in a dialog */
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.pick {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 10px;
  font: inherit; font-size: 20px; letter-spacing: inherit; text-shadow: inherit; text-align: left;
  color: var(--text); background: rgba(var(--panel-rgb), .6);
  border: 1px solid var(--line-dim); cursor: pointer; touch-action: manipulation;
}
.pick small { margin-left: 6px; font-size: 16px; color: var(--text-dim); }
@media (hover: hover) { .pick:not(:disabled):hover { border-color: var(--line); } }
.pick[aria-checked="true"] { border-color: var(--text); background: rgba(var(--hi-rgb), .16); box-shadow: inset 0 0 0 1px var(--text); }
.pick:disabled { opacity: .35; cursor: default; }
.pick:focus { outline: none; }
.pick:focus-visible { outline: 1.5px dashed var(--text); outline-offset: 2px; }

/* health tiers: set --zc (zone colour) for everything inside */
.tier-ok   { --zc: var(--ok); }
.tier-warn { --zc: var(--warn); }
.tier-crit { --zc: var(--crit); }
.tier-dead { --zc: var(--line-dim); }

/* ---------- list + detail (Journal, Vox-Network) ---------- */
/* side by side; on phones either the list or the detail (toggle .show-detail) */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.6fr); }
}
@media (max-width: 899px) {
  .split.show-detail .split-list { display: none; }
  .split:not(.show-detail) .split-detail { display: none; }
}

.list-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.list-tools .text-input { flex: 1; min-width: 0; }
.item-list { list-style: none; margin: 0; padding: 0; }
.list-group {
  padding: 14px 12px 4px; font-size: 16px; color: var(--text-dim); text-transform: uppercase;
  border-bottom: 1px dashed var(--line-dim);
}
.item {
  display: block; width: 100%; padding: 10px 12px;
  font: inherit; letter-spacing: inherit; text-shadow: inherit; text-align: left;
  color: var(--text); background: none;
  border: 0; border-left: 2px solid transparent; border-bottom: 1px solid rgba(var(--edge-rgb), .08);
  cursor: pointer; touch-action: manipulation;
}
.item b { display: block; font-size: 22px; font-weight: normal; text-transform: uppercase; }
.item span { font-size: 16px; color: var(--text-dim); }
.item p { margin: 4px 0 0; font-size: 18px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .item:hover { background: rgba(var(--hi-rgb), .04); } }
.item:focus { outline: none; }
.item:focus-visible { outline: 1.5px dashed var(--text); outline-offset: -2px; }
.item.is-selected { border-left-color: var(--text); background: rgba(var(--hi-rgb), .08); }
.item.is-muted b, .item.is-muted p { color: var(--text-faint); }

.detail-title { margin: 12px 0 2px; font-size: 32px; line-height: 1.05; text-transform: uppercase; }
.detail-meta  { font-size: 17px; color: var(--text-dim); }
.detail-text  { margin: 14px 0 18px; font-size: 21px; line-height: 1.2; white-space: pre-wrap; }
.detail-text.is-empty { color: var(--text-faint); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.back-btn { display: none; margin-bottom: 10px; }
@media (max-width: 899px) { .back-btn { display: inline-block; } }

/* inverted NEW marker */
.tag-new { margin-left: 8px; padding: 0 5px; font-size: 15px; background: var(--text); color: var(--ink) !important; text-shadow: none; }

/* notice strip, e.g. downtime state or a lock */
.banner { margin: 0 0 10px; padding: 8px 12px; font-size: 18px; text-transform: uppercase; border: 1px solid var(--line); }
.banner.is-off { color: var(--text-dim); border-style: dashed; border-color: var(--line-dim); }

/* ---------- portrait + name (Dossier, contacts) ---------- */
.id-card { display: flex; align-items: center; gap: 16px; margin: 12px 0 8px; }
.portrait {
  position: relative; flex: none; width: 96px; aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  color: var(--line-dim); background: rgba(var(--panel-rgb), .6); border: 1px solid var(--line-dim);
}
.portrait svg { width: 64%; fill: none; stroke: currentColor; stroke-width: 2; }
.portrait span { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--text-faint); }
/* uploaded portrait (creator): tinted to the screen colour */
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.4) hue-rotate(60deg) saturate(1.6) brightness(.95); }
.portrait:has(img) { overflow: hidden; }
.id-name { font-size: 34px; line-height: 1; text-transform: uppercase; }
.id-sub  { margin-top: 4px; font-size: 20px; color: var(--text-dim); }

/* level boxes, e.g. Influence */
.lvl { display: inline-flex; gap: 3px; margin-right: 10px; vertical-align: middle; }
.lvl i { width: 10px; height: 14px; border: 1px solid var(--line-dim); }
.lvl i.on { background: var(--line); border-color: var(--line); }

/* stacked fields in a dialog (add mutation, add contact …) */
.entry-form { display: flex; flex-direction: column; gap: 10px; }

/* − value + */
.counter { display: inline-flex; align-items: center; gap: 8px; }
.counter-val { min-width: 3ch; text-align: center; font-size: 26px; }
.btn-sq { min-width: 48px; padding: 0; font-size: 24px; }

.btn {
  min-height: 44px; padding: 0 14px;
  font: inherit; font-size: 20px; letter-spacing: inherit; text-shadow: inherit; text-transform: uppercase;
  color: var(--text); background: rgba(var(--panel-rgb), .6);
  border: 1px solid var(--line); cursor: pointer; touch-action: manipulation;
}
.btn-warn { border-style: dashed; }
.btn-warn::before { content: '! '; }
@media (hover: hover) { .btn:not(:disabled):hover { background: rgba(var(--hi-rgb), .14); } }
.btn:not(:disabled):active { background: var(--text); color: var(--ink); text-shadow: none; }
.btn:disabled { opacity: .35; cursor: default; }

/* small dashed "+ add" button */
.chip {
  min-height: 40px; padding: 0 10px;
  font: inherit; font-size: 18px; letter-spacing: inherit; text-shadow: inherit; text-transform: uppercase;
  color: var(--text-dim); background: none;
  border: 1px dashed var(--line-dim); cursor: pointer; touch-action: manipulation;
}
@media (hover: hover) { .chip:hover { color: var(--text); border-color: var(--line); } }
.chip:active { background: var(--text); color: var(--ink); text-shadow: none; }

/* small bordered label, e.g. PERMANENT */
.tag { font-size: 16px; padding: 0 6px; color: var(--text-dim); border: 1px solid var(--line-dim); white-space: nowrap; }
/* contraband (RULES.contraband): illegal = confiscated, heretical = burned */
.tag.is-illegal   { color: var(--warn); border-color: var(--warn); }
.tag.is-heretical { color: var(--crit); border-color: var(--crit); text-shadow: 0 0 4px rgba(255, 90, 74, .6); }

.text-input {
  width: 100%; min-height: 48px; padding: 6px 10px;
  font: inherit; font-size: 22px; letter-spacing: 1px; text-shadow: inherit;
  color: var(--text); caret-color: var(--text);
  background: rgba(var(--panel-rgb), .6); border: 1px solid var(--line); border-radius: 0; outline: none;
}
.text-input:focus { box-shadow: 0 0 12px rgba(var(--hi-rgb), .3); }
textarea.text-input { min-height: 160px; resize: vertical; line-height: 1.15; }

/* dropdown: <select class="text-input select"> */
.select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; text-transform: uppercase;
  background:
    linear-gradient(45deg, transparent 50%, var(--text) 50%) right 20px center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--text) 50%) right 13px center / 7px 7px no-repeat,
    rgba(var(--panel-rgb), .6);
}
.select option { color: var(--text); background: var(--dialog-bg); }
.text-input::placeholder { color: var(--text-faint); }

.btn:focus, .chip:focus, .seg button:focus, .toggle:focus, .range:focus { outline: none; }
.btn:focus-visible, .chip:focus-visible, .seg button:focus-visible, .toggle:focus-visible, .range:focus-visible {
  outline: 1.5px dashed var(--text); outline-offset: 2px;
}

/* segmented choice: one button pressed */
.seg { display: inline-flex; border: 1px solid var(--line); background: rgba(var(--panel-rgb), .6); }
.seg button {
  min-width: 44px; min-height: 42px; padding: 0 10px;
  font: inherit; font-size: 20px; letter-spacing: inherit; text-shadow: inherit; text-transform: uppercase;
  color: var(--text-dim); background: none;
  border: 0; border-left: 1px solid var(--line-dim);
  cursor: pointer; touch-action: manipulation;
}
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--ink); text-shadow: none; }

/* on/off switch */
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0;
  font: inherit; font-size: 20px; letter-spacing: inherit; text-shadow: inherit;
  color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation;
}
.toggle-track {
  position: relative; width: 56px; height: 26px;
  border: 1px solid var(--line); background: rgba(var(--panel-rgb), .6);
}
.toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 18px;
  background: var(--line-dim);
  transition: transform .12s steps(3), background .12s;
}
.toggle[aria-checked="true"] .toggle-track::after {
  transform: translateX(26px); background: var(--text); box-shadow: 0 0 8px var(--glow);
}
.toggle-state { min-width: 3ch; text-align: left; }
.toggle[aria-checked="false"] .toggle-state { color: var(--text-faint); }

/* slider; --fill is set from JS to the current value in % */
.range {
  -webkit-appearance: none; appearance: none;
  width: min(220px, 48vw); height: 44px; margin: 0;
  background: transparent; cursor: pointer; touch-action: none;
}
.range::-webkit-slider-runnable-track {
  height: 10px; border: 1px solid var(--line);
  background:
    linear-gradient(var(--line) 0 0) left / var(--fill, 50%) 100% no-repeat,
    repeating-linear-gradient(to right, transparent 0 9px, var(--line-dim) 9px 10px);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 26px; margin-top: -9px;
  background: var(--text); border: 0; box-shadow: 0 0 8px var(--glow);
}
.range::-moz-range-track {
  height: 8px; border: 1px solid var(--line);
  background: repeating-linear-gradient(to right, transparent 0 9px, var(--line-dim) 9px 10px);
}
.range::-moz-range-progress { height: 8px; background: var(--line); }
.range::-moz-range-thumb { width: 14px; height: 26px; border: 0; border-radius: 0; background: var(--text); box-shadow: 0 0 8px var(--glow); }
.range:disabled { opacity: .4; cursor: default; }

@media (prefers-reduced-motion: reduce) { .toggle-track::after { transition: none; } }

/* ---------- filter column + list (Commercium, Librarium) ----------
   <div class="browse"> <aside class="browse-filter"> search, .browse-cats > .browse-cat </aside> <div class="browse-results"> */
.browse { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.browse-filter { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.browse-search { min-height: 42px; font-size: 20px; }
.browse-cats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.browse-cat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%;
  min-height: 40px; padding: 4px 10px;
  font: inherit; font-size: 19px; letter-spacing: inherit; text-shadow: inherit; text-transform: uppercase; text-align: left;
  color: var(--text-dim); background: rgba(var(--panel-rgb), .6);
  border: 1px solid var(--line-dim); border-left: 3px solid transparent;
  cursor: pointer; touch-action: manipulation;
}
.browse-cat small { font-size: 16px; color: var(--text-faint); }
@media (hover: hover) { .browse-cat:hover { color: var(--text); border-color: var(--line); } }
.browse-cat[aria-pressed="true"] { color: var(--ink); background: var(--text); border-color: var(--text); text-shadow: none; }
.browse-cat[aria-pressed="true"] small { color: var(--ink); }
.browse-cat:focus { outline: none; }
.browse-cat:focus-visible { outline: 1.5px dashed var(--text); outline-offset: 2px; }
.browse-results { min-width: 0; }

/* phones / narrow: filter above the list, categories as a scrolling chip row */
@media (max-width: 760px) {
  .browse { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .browse-filter { position: static; }
  .browse-cats { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .browse-cat { width: auto; flex: none; white-space: nowrap; border-left-width: 1px; }
}