/* stack.css — paragraph mode and story mode (P5): stacked blocks you arrange. Each block
   is a framed record you read (.flat), with a full-width text button to hear it and a row
   of act controls (.raised) beneath. No new colour values: reuses --panel/--ink/--sunk/
   --calm/--calm-text locked in tools/contrast-check.mjs. --danger stays unused (reserved
   for a permanent confirm, never shown to a child), so every control is black on white. */

.stack-mode {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.stack-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stack-head-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--calm-text);
}

/* ---- the stacked blocks ---- */
.stack { display: flex; flex-direction: column; gap: 12px; }

.stack-block {
  background: var(--panel);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stack-block[draggable="true"] { cursor: grab; }

.stack-text {
  min-height: var(--control-min);
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  background: var(--sunk);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius);
}
.stack-text.empty {
  color: var(--calm-text);
  font-style: italic;
}

.stack-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.stack-act {
  min-height: var(--control-min);
  padding: 0 20px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
}

/* Reorder arrows: smaller satellites beside the 64px act controls, matching line.css's
   ◀ ▶ precedent (the keyboard and reduced-motion path to the same moveSibling op). */
.stack-move {
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- add a sentence / a paragraph ---- */
.stack-add {
  align-self: flex-start;
  min-height: var(--control-min);
  padding: 0 20px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
}

/* ---- the paragraph picker (paragraph mode, when more than one paragraph) ---- */
.stack-picker { display: flex; flex-direction: column; gap: 8px; }
.stack-picker-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--calm-text);
}
.stack-picker-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-picker-item {
  width: var(--control-min);
  min-height: var(--control-min);
  padding: 0;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  font-size: 18px;
}
.stack-picker-item.pressed { background: var(--ink); color: var(--panel); }

/* ---- the calm finish (story mode): the whole story, plainly, with one hear button ---- */
.stack-finish {
  background: var(--panel);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stack-finish-hint {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--calm-text);
}
.stack-finish-para {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
}

@media (min-width: 600px) {
  .stack-text { font-size: 22px; }
  .stack-finish-para { font-size: 22px; }
}