/* Admin list and tool pages. Formerly separate sheets, concatenated in
   the order those pages used to load them: users, statistics, stories,
   journeys, invitations, profiles, image-debug. */

/* ── users.css ── */

/* Shared table / form styles for the admin-list pages (admin.html,
   journeys.html, stories.html, statistics.html and the profiles.html child
   modals). Loaded after index.css so these page-level rules keep overriding
   the global defaults, exactly as when they were inline. Page-specific and
   divergent rules (tabs, .badge-prereg margin) stay inline in each page. */

.users-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.users-hero { margin-bottom: 2rem; 
}

.users-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.25rem;
}

.users-hero p {
  color: var(--ink-muted);
  font-size: 1rem;
  margin: 0;
}

.page-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1rem;
}

.story-modal-card h2,
.journey-modal-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.25rem;
  padding-right: 2.5rem;
}

/* Scrollable frame around a users-table: the nowrap headers would otherwise
   push the whole page sideways on mobile. */
.users-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong);
  box-shadow: var(--shadow-stamp-sm);
  background: var(--card);
}

/* Reloading keeps the old rows in place instead of collapsing the card. */
.users-table-wrap.is-busy {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

table.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-label);
}

.users-table thead { background: var(--paper-deep); 
}

.users-table th {
  padding: 0.6rem 1rem;
  text-align: left;
  font-weight: 800;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-caption);
  white-space: nowrap;
}

/* Clickable column. aria-sort (set by bindSortableHeaders) flips the arrow. */
.users-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.users-table th.sortable:hover,
.users-table th.sortable[aria-sort="ascending"],
.users-table th.sortable[aria-sort="descending"] { color: var(--ink); }
.users-table th.sortable:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.users-table th.sortable::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.4rem;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-muted);
  opacity: 0.45;
}
.users-table th.sortable[aria-sort="ascending"]::after {
  border-top: 0;
  border-bottom: 5px solid var(--ink);
  opacity: 1;
}
.users-table th.sortable[aria-sort="descending"]::after {
  border-top-color: var(--ink);
  opacity: 1;
}

.users-table td {
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}

.users-table tbody tr:hover { background: var(--card-soft); 
}

/* .field-label / .field-input (+ focus) base are in components.css. */

/* Two-column editor form used by the journeys / stories create-edit panels. */
.form-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

.form-grid .span-2 { grid-column: 1 / -1; 
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; 
}
  .form-grid .span-2 { grid-column: auto; 
}
}

/* .filters-actions: the button row above a list; .form-actions: the one
   closing the editor panel. */
.filters-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

/* Compact per-row button cluster in the last table column. */
.row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; 
}
.row-actions .btn-stamp {
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-label);
}

.tag-chip {
  margin: 0.1rem 0.2rem 0.1rem 0;
  background: var(--paper-deep);
  color: var(--ink-soft);
}

.btn-archive {
  padding: 0.3rem 0.65rem;
  border: 1.5px solid var(--coral);
  border-radius: var(--r-sm);
  background: rgba(232, 81, 77, 0.08);
  color: var(--coral-deep);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-archive:hover { background: rgba(232, 81, 77, 0.16); 
}
.btn-archive:disabled { opacity: 0.5; cursor: not-allowed; 
}

/* .users-error, .users-toast*, .spinner (+ keyframes), .muted, .is-hidden are in
   components.css. Empty states use the shared .empty-state--muted modifier
   in components.css. */

/* ── statistics.css ── */

/* ─── statistics.html — Statisztikák ─────────────────────────────────────── */

/* ── page layout ─────────────────────────────────────────────
   Shell, hero and activity table are the shared users rules above. */
.stats-hero {
  margin-bottom: 2.5rem;
}

/* ── section headings ────────────────────────────────────────── */
.stats-section {
  margin-bottom: 3rem;
}

.stats-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--line-strong);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ── chart grid ──────────────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.chart-card h3 {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 1rem;
}

.chart-card.wide {
  grid-column: 1 / -1;
}

.chart-wrap {
  position: relative;
  height: 240px;
}

.chart-wrap.tall {
  height: 200px;
}

/* ── stat counters ───────────────────────────────────────────── */
.stat-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.stat-badge {
  flex: 1 1 140px;
}

.stat-badge .badge-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.stat-badge .badge-label {
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink-muted);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-badge.complete  { background: var(--badge-success-bg); color: var(--badge-success-fg); 
}
.event-badge.restart   { background: var(--badge-warning-bg); color: var(--badge-warning-fg); 
}
.event-badge.skip      { background: var(--badge-warning-bg); color: var(--badge-warning-fg); 
}
.event-badge.menu_exit { background: var(--badge-danger-bg); color: var(--badge-danger-fg); 
}
.event-badge.other     { background: var(--paper-deep); color: var(--ink-muted); 
}

/* ── divider ─────────────────────────────────────────────────── */
.section-divider {
  border: none;
  border-top: 2px dashed var(--line-strong);
  margin: 2.5rem 0;
}

/* ── stories.css ── */

/* ─── stories.html — Történetek layout ───────────────────────────────────── */

:root { --story-grip-w: 10px; 
}

.stories-layout {
  display: grid;
  gap: 1.5rem;
}

/* Grid items default to min-width:auto, so the nowrap table headers would
   stretch the card — and with it the whole page — past the viewport.
   Zeroing it lets the table scroll inside its own wrapper instead. */
.stories-layout > * { min-width: 0; 
}

.filters-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 1rem;
}

/* .filters-actions / .form-actions base is above; the story panel
   sits tighter. */
.stories-layout .filters-actions,
.stories-layout .form-actions { margin-top: 0.5rem; 
}

.field-textarea-story {
  min-height: 14rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  resize: vertical;
}

.stories-count {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: var(--fs-label);
}

.stories-layout .users-table td { vertical-align: top; 
}
.story-title-cell { font-weight: 700; color: var(--ink); 
}
.story-meta { color: var(--ink-muted); font-size: var(--fs-label); 
}
.story-modal-card {
  position: relative;
  display: flex;
  width: min(94vw, 720px);
  max-height: 90vh;
  /* The card frame never scrolls: the inner wrapper does, so the
     scrollbar stays clipped inside the rounded ink border. */
  overflow: hidden;
  /* Side gutter for the resize grips; without it the right grip would
     sit on top of the scrollbar and swallow its drags. */
  padding: 0 var(--story-grip-w);
}

.story-modal-scroll {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Horizontal padding minus the card's gutter: the text keeps its place. */
  padding: 1.75rem 1.15rem 1.5rem;
}

/* Drag either edge to widen the dialog; it grows from the centre, so the
   grabbed edge stays under the pointer. Double click resets the width. */
.story-modal-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--story-grip-w);
  z-index: 3;
  cursor: col-resize;
  touch-action: none;
}

.story-modal-grip--left { left: 0; 
}
.story-modal-grip--right { right: 0; 
}

.story-modal-grip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-full);
  background: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.story-modal-grip:hover::after,
.story-modal-card.is-resizing .story-modal-grip::after { opacity: 0.55; 
}

/* Keep the pointer's cursor and stop text selecting mid-drag. */
body.is-resizing-modal { user-select: none; cursor: col-resize; 
}

/* The page-wide paper groove would read as a foreign strip against the
   card; let the thumb float straight on the card instead. */
.story-modal-scroll::-webkit-scrollbar-track { background: transparent; 
}
.story-modal-scroll::-webkit-scrollbar-thumb { border-color: var(--card); 
}

.story-modal-card .login-close { z-index: 2; 
}

.story-modal-card--viewer {
  width: min(94vw, 860px);
}

.story-viewer-meta {
  color: var(--ink-muted);
  font-size: var(--fs-body);
  margin: -0.5rem 0 1.25rem;
  line-height: 1.45;
}

.story-viewer-content {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--ink);
  text-align: justify;
  word-break: break-word;
}

.story-viewer-content p {
  margin: 0 0 1em;
}

.story-viewer-content p:last-child {
  margin-bottom: 0;
}

.users-table tbody tr.story-row {
  cursor: pointer;
}

.users-table tbody tr.story-row:hover {
  background: var(--paper-deep);
}

/* The row's story is being fetched: show it, don't leave a dead click. */
.users-table tbody tr.story-row.is-loading {
  opacity: 0.55;
  cursor: progress;
}

@media (max-width: 640px) {
  .story-modal-card { padding: 0; 
}
  .story-modal-scroll { padding: 1.25rem 1.1rem; 
}
  .story-modal-grip { display: none; 
}
}

/* ── journeys.css ── */

/* ─── journeys.html — Fejlődési utak layout ──────────────────────────────── */

.journeys-layout {
  display: grid;
  gap: 1.5rem;
}

.journey-title-cell { font-weight: 700; color: var(--ink); 
}
.journey-meta { color: var(--ink-muted); font-size: var(--fs-label); 
}
.journey-editor-id { margin: -0.5rem 0 1rem; 
}
.default-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.1rem 0 0.1rem 0.4rem;
  background: var(--mint-muted);
  border: 1px solid var(--mint-deep);
  color: var(--mint-deep);
  vertical-align: middle;
}

.default-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md, 12px);
  background: var(--mint-muted);
  border: 1px solid var(--mint-deep);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--mint-deep);
}

.journey-modal-card {
  position: relative;
  width: min(94vw, 720px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem 1.75rem 1.5rem;
}

.users-table tbody tr.journey-row {
  cursor: pointer;
}

.users-table tbody tr.journey-row:hover {
  background: var(--paper-deep);
}

.journey-tasks-section {
  margin-top: 1.5rem;
  padding: 1.1rem 1.1rem 1rem;
  background: var(--paper-deep);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
}

.journey-tasks-section h3 {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.journey-task-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md, 12px);
  background: var(--paper);
  margin-bottom: 0.5rem;
}

.journey-task-position {
  font-weight: 700;
  color: var(--ink-muted);
  min-width: 1.5rem;
}

.journey-task-info { flex: 1; min-width: 0; 
}
.journey-task-title { font-weight: 700; color: var(--ink); 
}
.journey-task-move { display: flex; gap: 0.3rem; 
}
.journey-task-move button {
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1;
}

.journey-add-task {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.journey-add-task-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.journey-add-task-row select { flex: 1; min-width: 220px; 
}
.journey-add-task-row input[type="search"] { flex: 1; min-width: 180px; 
}

.journey-task-picker-hint {
  font-size: var(--fs-label);
  color: var(--ink-muted);
}

/* ── Toolbar: view tabs left, the one global action right ─────────── */
.journeys-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.journeys-toolbar .tab-bar { margin-bottom: 0; 
}

/* ── Ladder: the order players climb, editable by drag ─────────────── */
.ladder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.ladder-head h2 { margin-bottom: 0.35rem; 
}
.ladder-lead {
  margin: 0 0 1rem;
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.ladder-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-full);
  background: var(--mint-muted);
  font-size: var(--fs-label);
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.ladder-mode[data-mode="manual"] { background: var(--sun-pale); 
}
.ladder-mode[data-dirty="true"] { border-style: dashed; 
}

.ladder-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

/* Group captions: the picker's open / sealed / later shelves. */
.ladder-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ladder-divider::after {
  content: '';
  flex: 1;
  border-top: 1.5px dashed var(--line-strong);
}
.ladder-divider--open { color: var(--mint-deep); 
}
.ladder-divider--sealed { color: var(--sky-deep); 
}

.ladder-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.45rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md, 12px);
  background: var(--paper);
  cursor: grab;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ladder-row:hover { border-color: var(--ink); box-shadow: var(--shadow-stamp-sm); 
}
.ladder-row.is-dragging { opacity: 0.45; cursor: grabbing; 
}
/* Moved since the last save: the sun tint says "not yet what the kids get". */
.ladder-row.is-moved { border-color: var(--sun-deep); background: var(--sun-light); 
}
.ladder-row[data-visible="false"] { background: var(--paper-deep); 
}

.ladder-grip { display: inline-flex; color: var(--ink-muted); 
}
.ladder-rank {
  min-width: 2.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.ladder-rank--hidden { color: var(--ink-muted); 
}
.ladder-main { min-width: 0; 
}
.ladder-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
}
.ladder-title-btn {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.ladder-title-btn:hover { text-decoration: underline; 
}
.ladder-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: var(--fs-label);
}
.ladder-meta .tag-chip { margin: 0; 
}
.ladder-meta .status-badge[data-status] { padding: 0.1rem 0.5rem; font-size: var(--fs-caption); 
}
.ladder-flag {
  padding: 0.08rem 0.45rem;
  border: 1px solid var(--coral);
  border-radius: var(--r-full);
  color: var(--coral-deep);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.ladder-flag--muted { border-color: var(--line-strong); color: var(--ink-muted); 
}
.ladder-auto { font-style: italic; 
}
.ladder-empty { margin-top: 1rem; 
}

@media (max-width: 640px) {
  .journey-modal-card { padding: 1.25rem 1.1rem; 
}
  .ladder-row { grid-template-columns: auto auto minmax(0, 1fr); 
}
  .ladder-row .journey-task-move { grid-column: 1 / -1; justify-content: flex-end; 
}
}

/* ── invitations.css ── */

/* ─── invitations.html — Meghívó küldés ──────────────────────────────────── */

.invite-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.invite-card {
  margin-bottom: 1.5rem;
}

.invite-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  margin: 0 0 1rem;
  color: var(--ink);
}

.invite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 800px) {
  .invite-grid { grid-template-columns: 1fr; 
}
}

.drop-zone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--ink-muted);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.drop-zone:hover,
.drop-zone.is-dragover {
  border-color: var(--mint-deep);
  background: color-mix(in srgb, var(--mint) 18%, var(--paper));
  color: var(--ink);
}

.drop-zone.has-file {
  border-style: solid;
  border-color: var(--mint-deep);
  color: var(--ink);
}

.drop-zone strong { color: var(--ink); 
}

.preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1.25rem;
}

.preview-frame {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.preview-frame label {
  font-size: var(--fs-label);
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.preview-frame iframe {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--shadow-stamp-sm);
  display: block;
}

.preview-frame--phone iframe {
  width: 390px;
  height: 640px;
  max-width: 100%;
}

.preview-frame--desktop iframe {
  width: 720px;
  height: 480px;
  max-width: 100%;
}

.campaign-row {
  cursor: pointer;
}

.campaign-row:hover td {
  background: color-mix(in srgb, var(--mint) 12%, transparent);
}

.campaign-row.is-active td {
  background: color-mix(in srgb, var(--mint) 22%, transparent);
}

.bool-yes { color: var(--mint-deep); font-weight: 800; 
}
.bool-no { color: var(--ink-muted); 
}

.status-pill {
  border: 1px solid var(--line-strong);
}

.status-pill--sent { background: color-mix(in srgb, var(--mint) 35%, white); 
}
.status-pill--failed { background: color-mix(in srgb, var(--coral) 35%, white); 
}
.status-pill--pending { background: var(--paper); 
}

.summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.summary-chips span {
  font-size: var(--fs-label);
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
}

.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  align-items: center;
}

#sendError { margin-top: 0.75rem; 
}

/* ── profiles.css ── */

/* ─── profiles.html — Ki játszik? ────────────────────────────────────────── */

.profiles-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.2rem 4rem;
  text-align: center;
}

.profiles-shell h1 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.profiles-shell .profiles-lead {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0 0 2.2rem;
}

.profiles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 2rem;
}

/* Grown-ups sit in their own band below the children's, with a rule and a
   caption between them, so the shared device always offers the kids first. */
.profiles-section + .profiles-section { margin-top: 2.4rem; 
}

.profiles-section-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.2rem;
  color: var(--ink-muted);
  font-weight: 800;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profiles-section-head::before,
.profiles-section-head::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--line-strong);
  opacity: 0.35;
  border-radius: 1px;
}

/* The tile is a button, so the pencil cannot nest inside it. */
.profile-slot { position: relative; width: 148px; 
}

.profile-tile {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 148px;
  font-family: var(--font-body);
}

.profile-avatar {
  width: 132px;
  height: 132px;
  margin: 0 auto 0.7rem;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow-stamp-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; 
}

.profile-avatar.placeholder {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--ink);
}

.profile-tile:hover .profile-avatar,
.profile-tile:focus-visible .profile-avatar {
  transform: translate(-2px, -2px) scale(1.03);
  box-shadow: 6px 6px 0 rgba(27, 58, 91, 0.92);
}

.profile-name {
  display: block;
  font-weight: 800;
  font-size: var(--fs-body-lg);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.profile-sub {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

.profile-tile.is-pending { cursor: default; opacity: 0.55; 
}
.profile-tile.is-pending .profile-avatar { border-style: dashed; box-shadow: none; 
}
.profile-tile.is-pending:hover .profile-avatar { transform: none; 
}
.profile-tile:disabled { cursor: wait; 
}

/* Pencil overlay: sits on the avatar's edge, never covers the face. */
.profile-edit {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-stamp-sm);
  cursor: pointer;
  transition: transform 0.14s ease;
}

.profile-edit:hover { transform: translate(-1px, -1px); 
}

/* "Add a child" reads as an empty slot waiting to be filled. */
.profile-add .profile-avatar {
  border-style: dashed;
  box-shadow: none;
  color: var(--ink-muted);
}

.profile-add:hover .profile-avatar { color: var(--ink); 
}

/* The other parent of the household: shown, never played as. A plain
   element, so it stays in the reading order and out of the tab order. */
.profile-tile.is-static { cursor: default; }
.profile-tile.is-static:hover .profile-avatar,
.profile-tile.is-static:focus-visible .profile-avatar {
  transform: none;
  box-shadow: var(--shadow-stamp-sm);
}

/* A partner invite waiting for the viewer's answer: a stamped "Felkérés"
   badge on an otherwise dashed slot, clickable to open the consent modal. */
.profile-tile.is-request .profile-avatar {
  border-style: dashed;
  background: var(--mint-surface);
  color: var(--mint-deep);
}
.profile-request-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  padding: 0.15rem 0.55rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-full);
  background: var(--mint);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 800;
  box-shadow: var(--shadow-stamp-sm);
  pointer-events: none;
}

.profiles-foot {
  margin-top: 2.6rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.profiles-state {
  color: var(--ink-muted);
  font-weight: 700;
  margin: 1rem 0 2rem;
}

/* ─── Child add / edit modals ─────────────────────────────────────────── */

/* Wider and taller than the login card: these carry a full form. */
.profile-modal-card {
  width: min(94vw, 460px);
  max-height: 92vh;
  overflow-y: auto;
  text-align: left;
  transform: none;
}

.profile-modal-card h2 { text-align: center; 
}
.profile-modal-card p { text-align: left; 
}
.profile-modal-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.2rem;
}

/* A login card's own button row (the partner-invite consent) sits under
   centred copy, so it centres too. The profile form nests the same row
   inside the form and stays left-aligned; the welcome letter sets its own
   gap. .login-card p already leaves 1.2rem under the text. */
.login-card > .profile-modal-actions {
  justify-content: center;
  margin-top: 0;
}

/* Destructive / secondary row, split off from the primary action. */
.profile-modal-danger {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1.5px solid var(--line);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.profile-modal-danger [data-remove] { --btn-bg: var(--error-muted); --btn-fg: var(--coral-deep); 
}

/* ─── Tester welcome ─────────────────────────────────────────────────── */

.welcome-card { width: min(92vw, 420px); 
}
.welcome-card:focus { outline: none; 
}   /* the card takes initial focus (tabindex=-1), as the audio check does */
.welcome-card h2 { margin-bottom: 0.9rem; text-wrap: balance; 
}   /* no lone word on the last line when it breaks to three */

/* Five paragraphs of running text, not the login card's one-liner: a
   fixed left edge gives the eye a steady return point, where a centred
   rag on 5–6 lines a paragraph reads like verse. The heading stays on the
   medallion's axis. Tighter paragraph gaps than the login card's, so the
   whole letter fits a phone screen. */
.welcome-card p { text-align: left; line-height: 1.5; margin-bottom: 0.8rem; 
}
.welcome-card a { color: var(--coral-deep); font-weight: 700; white-space: nowrap; 
}
.welcome-card .profile-modal-actions { justify-content: center; margin-top: 0.5rem; 
}

/* On small phones the card is taller than the viewport: #profileModal
   scrolls (components.css, with #tourOverlay) and the card's auto margins
   centre it while it fits and collapse to zero when it does not, so the
   top stays reachable. The other dialogs are small enough not to notice. */
.welcome-card { margin: auto 0; 
}

/* Bigger medallion than the 70px login one, filled with a close crop of
   the waving Platy (platy-welcome.png = data/reference_images/platy-wave.png,
   dark backdrop baked in; the bucket's platy-wave.png is the arms-crossed
   landing pose): head and raised hand, the way platy-hi fills the audio
   check's medallion. The ring and the crop are .login-mascot--ink /
   --wave in components.css, shared with the children's tour. */
.welcome-mascot {
  width: 120px;
  height: 120px;
  margin-top: -4.6rem;
}

/* ── image-debug.css ── */

/* ─── image_debug.html — Képgenerálás debug console ──────────────────────── */

.debug-shell {
  max-width: 1800px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.load-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-stamp-sm);
  position: sticky;
  top: 0.5rem;
  z-index: 10;
}

.load-bar .field-group { flex: 1 1 280px; 
}

.load-status {
  width: 100%;
  font-size: var(--fs-label);
  color: var(--ink-muted);
  margin-top: 0.25rem;
}

.debug-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
}

@media (max-width: 992px) {
  .debug-grid { grid-template-columns: 1fr; 
}
}

.debug-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.debug-panel h2 {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  margin: 0;
  color: var(--ink);
}

/* The panels' flex gap spaces the fields here, and the textareas hold
   prompts and JSON. */
:where(.debug-shell) .field-input,
:where(.debug-shell) .field-select,
:where(.debug-shell) .field-textarea {
  margin-bottom: 0;
}

:where(.debug-shell) .field-textarea {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-label);
}

.field-textarea.tall { min-height: 10rem; 
}

.field-textarea.xl { min-height: 12rem; 
}

details.collapsible {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.5rem 0.65rem;
  background: var(--paper);
}

details.collapsible summary {
  cursor: pointer;
  font-size: var(--fs-label);
  font-weight: 800;
  color: var(--ink-muted);
  user-select: none;
}

details.collapsible .collapsible-body {
  margin-top: 0.5rem;
}

details.collapsible--json .field-textarea,
details.collapsible--json #systemPromptEditor {
  min-height: 14rem;
  max-height: 28rem;
}

#systemPromptEditor {
  min-height: 10rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  font-family: ui-monospace, monospace;
  font-size: var(--fs-label);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

#systemPromptEditor:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink-focus);
}

.prompt-token {
  display: inline;
  background: rgba(126, 206, 196, 0.28);
  border: 1px solid var(--mint);
  border-radius: var(--r-xs);
  padding: 0.05rem 0.25rem;
  margin: 0 1px;
  color: var(--ink);
  cursor: not-allowed;
  user-select: none;
}

.preview-img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-deep);
  padding: 0.5rem;
}

.preview-img-wrap img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.meta-line {
  font-size: var(--fs-label);
  color: var(--ink-muted);
  word-break: break-word;
}

.candidate-history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.candidate-thumb {
  padding: 0;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  cursor: pointer;
  width: 56px;
  height: 56px;
  overflow: hidden;
}

.candidate-thumb.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(27, 58, 91, 0.15);
}

.candidate-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

/* What the picture on show was made from, spread over the panels in the
   order it was made: the story and its place (1), the design and the prompt
   (2), the picture (3). */
.debug-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.debug-stack:empty { display: none; }

.picture-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.picture-switch .chip.is-active {
  background: var(--sun);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink-shadow);
}

.src-context,
.prov-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
}

.fact-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 0.8rem;
  margin: 0;
  font-size: var(--fs-label);
}

.fact-list dt {
  font-weight: 800;
  color: var(--ink-muted);
}

.fact-list dd {
  margin: 0;
  color: var(--ink);
  word-break: break-word;
}

.src-quote {
  margin: 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--sun-deep);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

.src-story {
  position: relative;         /* the marked excerpt is scrolled to from here */
  max-height: 22rem;
  overflow-y: auto;
  white-space: pre-wrap;
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}

.src-story mark {
  background: var(--sun-glow);
  color: inherit;
  box-shadow: 0 0 0 2px var(--sun-glow);
  border-bottom: 2px solid var(--sun-deep);
}

.prov-source {
  margin: 0;
  font-size: var(--fs-label);
  color: var(--ink-soft);
}

.prov-figures {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
  font-size: var(--fs-label);
  display: grid;
  gap: 0.25rem;
}

.prov-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.prov-input {
  margin: 0;
  width: 180px;
  font-size: var(--fs-label);
  color: var(--ink-muted);
}

.prov-input img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--paper-deep);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 0.25rem;
}

.prov-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fs-label);
  color: var(--ink);
}

/* Pipeline trace: system/user/image prompts and raw or parsed output. */
.code-block {
  margin: 0;
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-label);
  line-height: 1.45;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-deep);
  color: var(--ink);
}

.prov-tries {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-label);
}

.gen-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--mint);
  background: rgba(126, 206, 196, 0.2);
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 800;
}

/* Smaller inline spinner variant; the spin keyframe is in components.css. */
.gen-banner-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* .users-error, .users-toast*, .is-hidden, .muted are in components.css. */