/* ================================================================
   Bullets — Shared content components
   Fields, buttons, help panels, section headings, selectable rows,
   segmented controls, legal copy and the page footer. Meant to be
   reused verbatim by every page rather than re-declared per page.
   Tokens come from index.css.
   ================================================================ */

/* ── Fields ─────────────────────────────────────────────────────── */
.bl-field { margin-bottom: 18px; }
.bl-field label,
.bl-label { display: block; font-weight: 700; font-size: 15px; color: var(--secondary); margin-bottom: 8px; }
.bl-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bl-label-row label,
.bl-label-row .bl-label { margin-bottom: 0; }
.bl-input-wrap { position: relative; }

.bl-input,
.bl-textarea,
.bl-select {
  width: 100%;
  background: var(--field-bg); color: var(--text);
  border: 1px solid var(--field-border); border-radius: 4px;
  padding: 13px 14px; font-size: 16px; font-family: inherit; outline: 0;
  transition: border-color var(--transition);
}
.bl-input:focus,
.bl-textarea:focus,
.bl-select:focus { border-color: var(--secondary); }
.bl-input::placeholder,
.bl-textarea::placeholder { color: #9a9a9a; }
.bl-input.has-password-toggle { padding-right: 44px; }
.bl-input.has-error { background: var(--error-bg); border-color: var(--error); }
.bl-input:disabled,
.bl-textarea:disabled,
.bl-select:disabled { background: var(--field-disabled); color: #999; cursor: not-allowed; }
.bl-textarea { font-size: 15px; min-height: 90px; resize: vertical; }

.bl-select-wrap { position: relative; }
.bl-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.bl-select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); font-size: 12px; }

.bl-hint { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 8px 0 0; }
.bl-hint.inline { display: inline; margin: 0; }
.bl-error-text { color: var(--error); font-size: 14px; margin: 8px 0 0; }

/* Show/hide password eye (markup: button.bl-eye-btn[data-for]) */
.bl-eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; background: transparent; border: 0; border-radius: 6px; padding: 4px; transition: background var(--transition); }
.bl-eye-btn:hover { background: var(--surface-2); }
.bl-eye-btn svg { width: 22px; height: 22px; }

/* Field with its button inline (e.g. game code + JOIN) */
.bl-inline-row { display: flex; gap: 10px; align-items: stretch; }
.bl-inline-row .bl-input { flex: 1 1 auto; min-width: 0; }
.bl-inline-row .bl-btn { width: auto; flex: none; margin-top: 0; padding-left: 28px; padding-right: 28px; }

/* ── Checkboxes (markup: label.bl-check > input[type=checkbox] + span) ── */
.bl-checks { display: flex; gap: 10px; flex-wrap: wrap; }
.bl-check { flex: 1 1 140px; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--field-border); border-radius: 4px; cursor: pointer; font-weight: 600; transition: border-color var(--transition), background var(--transition); }
.bl-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.bl-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.bl-field .bl-check { display: flex; margin: 0; color: var(--text); font-weight: 600; font-size: 16px; }
.bl-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── [?] help toggle + inline panel (markup: button[data-help-toggle]) ── */
.bl-help-btn {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--text);
  border: 1.5px solid var(--text); border-radius: 7px;
  font-size: 14px; font-weight: 700;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.bl-help-btn:hover,
.bl-help-btn.is-open { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bl-help-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease, margin .25s ease; }
.bl-help-panel.is-open { max-height: 400px; opacity: 1; margin: 0 0 10px; }
.bl-help-panel p { font-size: 14px; line-height: 1.55; }

/* ── Buttons ────────────────────────────────────────────────────────
   Pill buttons. .bl-btn-primary starts greyed and only turns accent
   once JS adds .is-enabled (i.e. the form is complete) — a disabled
   primary button is the "not ready yet" signal throughout the app.
   ------------------------------------------------------------------ */
.bl-btn {
  display: block; width: 100%;
  padding: 16px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-align: center;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bl-btn:hover { text-decoration: none; }
.bl-btn:disabled { cursor: default; }
.bl-btn-primary { background: var(--line); color: #8f8f8f; }
.bl-btn-primary.is-enabled { background: var(--accent); color: var(--on-accent); }
.bl-btn-primary.is-enabled:hover { background: var(--accent-hover); }
.bl-btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bl-btn-solid:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.bl-btn-outline { background: #fff; border-color: var(--accent); color: var(--accent); margin-top: 14px; }
.bl-btn-outline:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.bl-btn-solid:disabled,
.bl-btn-outline:disabled { opacity: .4; }
.bl-btn-sm { padding: 12px 18px; font-size: 14px; }

.bl-link-row { text-align: center; margin-top: 18px; }
.bl-link-row a { color: var(--text-soft); font-size: 15px; text-decoration: underline; }
.bl-link-row a:hover { color: var(--accent); }
.bl-link-row a.is-disabled { color: var(--text-muted); pointer-events: none; text-decoration: none; }

/* ── Section headings ───────────────────────────────────────────── */
.bl-section-title { font-size: 15px; font-weight: 800; margin: 16px 0 4px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
/* Heading + trailing action (e.g. "+") sharing one divider rule. */
.bl-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 4px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
.bl-section-header .bl-section-title { margin: 0; padding: 0; border: 0; }
.bl-section-hint { margin: 4px 0 8px; }
.bl-join-field { margin-top: 14px; }
.bl-textarea + .bl-btn { margin-top: 10px; }
.bl-lead { font-size: 16px; line-height: 1.55; margin: 0 0 16px; }
.bl-lead + .bl-btn { margin-top: 28px; }
.bl-divider { height: 1px; background: var(--line); margin: 24px 0; }

/* ── Selectable rows (Games / Characters / Tools lists) ─────────────
   Rows keep real horizontal padding so the .is-selected highlight has
   room; the list cancels it with an equal negative margin so row text
   stays flush with the section headings above.
   ------------------------------------------------------------------ */
.bl-row-list { display: flex; flex-direction: column; margin: 0 -14px; }
.bl-row { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-radius: 8px; }
.bl-row.is-selected { background: var(--surface-2); }
.bl-row-info { min-width: 0; }
.bl-row-name { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row-sub { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.bl-row-actions { display: flex; gap: 10px; flex: none; margin-left: auto; }
.bl-empty,
.bl-loading { color: var(--text-muted); font-size: 14px; padding: 12px 14px; }

/* ── Segmented control (small fixed set of mutually exclusive values) ── */
.bl-segments { display: flex; border: 1.5px solid var(--line); border-radius: 14px; padding: 6px; }
.bl-seg { flex: 1; padding: 12px 10px; background: transparent; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-muted); transition: background var(--transition), color var(--transition); }
.bl-seg:hover:not(:disabled):not(.is-active) { color: var(--text); }
.bl-seg.is-active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.bl-seg:disabled { cursor: not-allowed; }

/* ── Compact controls (character sheet, New Port) ───────────────── */
.bl-save-status { font-size: 13px; color: var(--text-muted); margin-left: auto; }
.bl-save-status.is-ok { color: var(--success); }
.bl-save-status.is-error { color: var(--error); font-weight: 700; }
.bl-sheet-meta { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.bl-sheet-label { display: block; font-weight: 700; font-size: 14px; color: var(--secondary); margin-bottom: 6px; }
.bl-input-sm,
.bl-select-sm { padding: 9px 11px; font-size: 16px; }   /* 16px stops iOS zooming on focus */
.bl-select-sm { padding-right: 30px; }
.bl-textarea-sm { min-height: 70px; padding: 9px 11px; }
/* Steppers */
.bl-stepper { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.bl-step {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--field-border); border-radius: var(--radius);
  font-size: 18px; font-weight: 700; line-height: 1;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bl-step:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bl-step:disabled { opacity: .3; cursor: default; }
.bl-step-value { min-width: 44px; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; }
/* One entry: eye = visible to the game, struck-through eye = private */
.bl-priv {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bl-priv svg { width: 17px; height: 17px; }
.bl-priv:hover { border-color: var(--secondary); color: var(--secondary); }
.bl-priv.is-private { background: var(--secondary); border-color: var(--secondary); color: var(--on-accent); }

/* What the GM sees on a private entry */
.bl-priv-marker { display: inline-flex; align-items: center; gap: 4px; color: var(--secondary); vertical-align: middle; margin-left: 6px; }
.bl-priv-marker svg { width: 16px; height: 16px; }
.bl-priv-marker.is-text { font-size: 12px; font-weight: 700; margin-left: 0; }

/* A whole section: Visible / Private / Mixed */
.bl-priv-master {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-muted);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bl-priv-master svg { width: 16px; height: 16px; }
.bl-priv-master:hover { border-color: var(--secondary); color: var(--secondary); }
.bl-priv-master.is-private { background: var(--secondary); border-color: var(--secondary); color: var(--on-accent); }
.bl-priv-master.is-mixed { border-color: var(--secondary); color: var(--secondary); border-style: dashed; }

/* Small pill toggle (Carried / Stored, 1 / 2 / 3) */
.bl-mini-seg { display: inline-flex; border: 1px solid var(--field-border); border-radius: 999px; overflow: hidden; }
.bl-mini-seg button { padding: 7px 14px; border: 0; background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 700; }
.bl-mini-seg button.is-active { background: var(--secondary); color: var(--on-accent); }

/* ── Clocks (New Port City, character and NPC pages – js/clocks.js) ── */
.bl-clocks { display: flex; flex-direction: column; gap: 10px; }
.bl-clock { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; }
.bl-clock.is-full { border-color: var(--accent); background: var(--accent-soft); }
.bl-clock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bl-clock-name { font-weight: 800; font-size: 16px; }
.bl-clock-count { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.bl-clock-on { font-size: 13px; color: var(--text-muted); margin: 2px 0 8px; }
.bl-clock-segs { display: grid; grid-template-columns: repeat(var(--segs, 4), 1fr); gap: 4px; }
.bl-clock-seg { height: 14px; border: 1.5px solid var(--text); border-radius: 3px; background: var(--surface); }
.bl-clock-seg.is-on { background: var(--text); }
.bl-clock-segs.is-full .bl-clock-seg { background: var(--accent); border-color: var(--accent); }
.bl-clock-fills { font-size: 14px; margin: 8px 0 0; }
.bl-clock-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.bl-clock-controls .bl-stepper { margin-right: auto; }
.bl-clocks-here, .bl-npc-clocks { margin: 0 0 20px; }

/* ── Code chip (invite codes) ───────────────────────────────────── */
.bl-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .06em; }

/* ── Placeholder panel — marks where a real feature will go ──────── */
.bl-placeholder { border: 1.5px dashed var(--line); border-radius: var(--radius-lg); padding: 20px; color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 18px 0; }
.bl-placeholder strong { color: var(--text); }

/* ── Legal page copy ────────────────────────────────────────────── */
.bl-legal h1 { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 18px 0 20px; }
.bl-legal h3 { font-size: 17px; font-weight: 800; margin: 22px 0 8px; }
.bl-legal p,
.bl-legal li { font-size: 15px; line-height: 1.6; }
.bl-legal p { margin: 0 0 14px; }
.bl-legal ul { margin: 0 0 14px; padding-left: 20px; }
.bl-legal li { margin-bottom: 4px; }
.bl-legal a { color: var(--text); text-decoration: underline; }

/* ── Page footer (copyright, version, legal links) ──────────────── */
.bl-footer { margin-top: 64px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.bl-footer a { color: var(--text-muted); text-decoration: underline; margin: 0 8px; }
.bl-footer a:hover { color: var(--accent); }

/* Tags, inspiration rolls and pip tracks – shared by the sheet, New Port City, NPCs and dice */
.bl-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.bl-tag.is-burned { background: var(--error-bg); color: var(--error); }
.bl-inspire { margin-left: 8px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 12px; font-weight: 800; vertical-align: middle; }
.bl-inspire:hover { border-color: var(--accent); background: var(--accent-soft); }
.bl-inspire-result { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14px; line-height: 1.45; }
.bl-inspire-note { color: var(--text-muted); font-size: 13px; }
.bl-power-pips { display: flex; gap: 3px; margin: 8px 0 2px; }
.bl-power-pip { flex: 1 1 0; height: 8px; border-radius: 2px; background: var(--line); }
.bl-power-pip.is-on { background: var(--accent); }
.bl-text-btn { margin-top: 10px; padding: 0; background: none; border: 0; color: var(--text-muted); font-size: 13px; text-decoration: underline; }
.bl-text-btn:hover { color: var(--error); }