/* Product flows and supporting widgets share the field's semantic skin tokens. */
@layer components {
  .product-flow-overlay {
    position: fixed; inset: 0; z-index: var(--z-flow);
    display: grid; place-items: center;
    padding: calc(var(--safe-t) + var(--lay-pad)) calc(var(--safe-r) + var(--lay-pad)) calc(var(--safe-b) + var(--lay-pad)) calc(var(--safe-l) + var(--lay-pad));
    background: var(--c-scrim); overflow: hidden;
  }
  .product-flow-panel {
    position: relative; width: min(var(--lay-flow-w), 100%); min-width: 0;
    max-height: 100%; overflow: auto; overscroll-behavior: contain;
    padding: var(--sp-6); background: var(--c-surface);
    color: var(--c-ink-1); border: var(--bw-panel) solid var(--c-line);
    border-radius: var(--radius); box-shadow: var(--shadow-panel);
    font-size: var(--fs-body); line-height: var(--lh-body);
    scrollbar-color: var(--c-ink-2) var(--c-surface);
  }
  .product-flow-panel h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); }
  .product-flow-panel h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin-block: var(--sp-2) var(--sp-4); }
  .product-flow-panel h1, .product-flow-panel h2, .product-flow-panel b, .product-flow-panel strong { overflow-wrap: anywhere; }
  .product-flow-panel p { margin-block: var(--sp-3); }
  .product-flow-panel small, .product-flow-panel code, .product-flow-panel input { font: inherit; }
  .product-flow-panel small { display: block; font-size: var(--fs-note); line-height: var(--lh-body); }
  .product-flow-kicker, .result-section-title { font-size: var(--fs-note); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--c-ink-2); }
  .product-flow-lead { font-size: var(--fs-body); color: var(--c-ink-2); }
  .product-flow-actions, .result-bank, .product-settings-list, .conduct-list, .warehouse-list { display: grid; gap: var(--sp-3); margin-block: var(--sp-4); min-width: 0; }
  .product-flow-game-menu-panel .product-flow-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-flow-panel button, .product-flow-dev-panel a {
    display: block; min-height: var(--lay-hit-min); min-width: 0;
    padding: var(--sp-3) var(--sp-4); border: var(--bw-1) solid var(--c-line);
    background: var(--c-btn-bg); color: var(--c-btn-fg); border-radius: var(--radius);
    font: inherit; line-height: var(--lh-body); text-align: left; text-decoration: none;
    overflow-wrap: anywhere;
  }
  .product-flow-panel button span { display: block; }
  .product-flow-panel button small { color: inherit; }
  .product-flow-panel button:disabled { color: var(--c-disabled-fg); cursor: default; }
  .product-flow-panel button:not(:disabled):hover, .product-flow-panel .controller-selected:not(:disabled) {
    background: var(--c-focus-bg); color: var(--c-focus-fg); border-color: var(--c-line-strong);
  }
  .product-flow-panel :is(button, a, input):focus-visible { outline: var(--bw-2) solid var(--c-line-strong); outline-offset: var(--sp-1); }
  .product-flow-panel .product-flow-back { position: sticky; bottom: 0; z-index: 1; width: 100%; margin-top: var(--sp-4); text-align: center; }
  .product-flow-panel .product-setting-row, .product-setting-range { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; }
  .product-setting-row > span, .product-setting-range > span { flex: 1; min-width: 0; }
  .product-setting-row strong { flex: none; font-family: var(--ff-num); }
  .product-setting-range { display: grid; grid-template-columns: minmax(0,1fr) minmax(var(--lay-flow-range-w),1fr) auto; border: var(--bw-1) solid var(--c-line); padding: var(--sp-3) var(--sp-4); }
  .product-setting-range input { width: 100%; min-width: 0; min-height: var(--lay-hit-min); accent-color: var(--c-ink-1); }
  .keybind-feedback, .warehouse-feedback { padding: var(--sp-3); border-block: var(--bw-1) var(--inset-style) var(--c-line); margin-block: var(--sp-3); overflow-wrap: anywhere; }
  .product-flow-seed, .product-flow-footnote { margin-block: var(--sp-3); font-size: var(--fs-note); color: var(--c-ink-2); }
  .product-flow-seed input { max-width: 100%; color: var(--c-ink-1); background: var(--c-surface); border: var(--bw-1) solid var(--c-line); }
  .dungeon-select-grid, .howto-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--lay-flow-card-w)),1fr)); gap: var(--sp-3); margin-block: var(--sp-4); }
  .dungeon-select-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: var(--sp-3); }
  .product-flow-panel .dungeon-select-card { display: grid; }
  .dungeon-select-number { display: grid; place-items: center; min-width: var(--lay-hit-min); border: var(--bw-1) solid currentColor; font-family: var(--ff-num); }
  .expedition-section-head, .result-chronicle-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); border-bottom: var(--bw-1) var(--inset-style) var(--c-line); padding-block: var(--sp-3); }
  .expedition-section-head span { font-size: var(--fs-note); }
  .variant-pack { font-size: var(--fs-note); border: var(--bw-1) solid currentColor; padding-inline: var(--sp-1); }
  .conduct-row, .howto-grid section { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: var(--bw-1) solid var(--c-line); }
  .conduct-row.done { border-inline-start-width: var(--bw-2); }
  .warehouse-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: var(--bw-1) var(--inset-style) var(--c-line); }
  .warehouse-row > span { flex: 1 1 var(--lay-warehouse-name-w); min-width: 0; }
  .warehouse-row button.selected { background: var(--c-focus-bg); color: var(--c-focus-fg); }
  .result-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sp-3); margin-block: var(--sp-4); }
  .result-grid > div { padding: var(--sp-3); border: var(--bw-1) solid var(--c-line); }
  .result-grid span { display: block; font-size: var(--fs-note); }
  .result-grid b { display: block; font-size: var(--fs-num); font-family: var(--ff-num); }
  .result-cause { border-inline-start: var(--bw-2) solid var(--c-danger); padding: var(--sp-3); margin-block: var(--sp-4); }
  .result-cause span, .result-cause b { display: block; }
  .result-chronicle, .result-build, .result-ledger { display: grid; gap: var(--sp-3); min-width: 0; }
  .result-chronicle-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-4); }
  .result-ledger-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); padding-block: var(--sp-2); border-bottom: var(--bw-1) var(--inset-style) var(--c-line); font-size: var(--fs-note); }
  .result-build-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--sp-3); font-size: var(--fs-note); }
  .result-route-trail, .result-conducts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block: var(--sp-3); }
  .result-route-chip { padding: var(--sp-1) var(--sp-2); border: var(--bw-1) solid var(--c-line); font-size: var(--fs-note); }
  .test-start-options { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .test-start-options label { display: flex; align-items: center; gap: var(--sp-2); }
  .product-flow-panel select { font: inherit; background: var(--c-surface); color: var(--c-ink-1); border: var(--bw-1) solid var(--c-line); max-width: 100%; }
  .product-flow-title-panel { width: 100%; height: 100%; max-height: none; display: grid; align-content: center; padding: var(--sp-8); }
  .title-composition { position: relative; width: min(var(--lay-title-w),100%); padding: var(--sp-6); background: var(--c-surface); border: var(--bw-1) solid var(--c-line); display: grid; gap: var(--sp-8); }
  .title-menu { display: grid; gap: var(--sp-3); width: min(var(--lay-title-menu-w),100%); }
  .title-dev { position: absolute; bottom: var(--sp-4); right: var(--sp-4); }
  .dungeon-select-list { display: grid; gap: var(--sp-3); }
  .title-composition h1 { font-size: max(var(--fs-h1),var(--fs-h2)); }

  /* Shared inspectors and developer tools use the same readable typography. */
  .inspect-block, .loot-generated, .loot-affixes, .loot-quality { display: grid; gap: var(--sp-2); padding-block: var(--sp-2); border-bottom: var(--bw-1) var(--inset-style) var(--c-line-soft); }
  .inspect-block small, .tap-inspect-head, .loot-generated, .loot-affixes, .loot-quality, .loot-compare { font-size: var(--fs-note); line-height: var(--lh-body); }
  .inspect-block b, .tap-inspect-head b { font-weight: var(--fw-bold); }
  .resistance-groups { display: grid; gap: var(--sp-2); }
  .resistance-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); border: var(--bw-1) solid var(--c-line); padding: var(--sp-2); font-size: var(--fs-note); }
  .resistance-group.weakness { border-style: dashed; }
  .resistance-group.resistant { border-inline-start-width: var(--bw-2); }
  .debug-drawer { position: fixed; z-index: var(--z-dev); inset: auto var(--sp-4) var(--sp-4); max-height: var(--lay-debug-max-h); overflow: auto; background: var(--c-surface); border: var(--bw-1) solid var(--c-line); padding: var(--sp-3); }
  .debug-grid, .bind-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(var(--lay-debug-card-w),100%),1fr)); gap: var(--sp-3); }
  .panel, .modal { padding: var(--sp-3); background: var(--c-surface); color: var(--c-ink-1); border: var(--bw-1) solid var(--c-line); font-size: var(--fs-note); }
  .panel button, .panel input, .panel select { min-height: var(--lay-hit-min); padding: var(--sp-2); color: inherit; background: var(--c-btn-bg); border: var(--bw-1) solid var(--c-line); font: inherit; }
  .log { max-height: 30dvh; overflow: auto; }
  .route-list, .campaign-gates, .settings-row, .reaction-rule, .reaction-log, .item, .build-row, .village-choice { display: grid; gap: var(--sp-2); padding-block: var(--sp-2); font-size: var(--fs-note); }
  .rarity, .route-element, .upgrade { font-size: var(--fs-note); }
}

@layer components {
  .product-flow-overlay[data-flow-mode="title"] { padding: 0; }
  @media (orientation: landscape) and (max-height: 520px) {
    .product-flow-panel { padding: var(--sp-4); }
    .product-flow-title-panel { padding: var(--sp-6); }
    .title-composition { gap: var(--sp-3); }
    .title-menu { grid-template-columns: repeat(2,minmax(0,1fr)); width: min(var(--lay-title-menu-wide-w),100%); }
  }
  @media (max-width: 600px) {
    .product-flow-game-menu-panel .product-flow-actions { grid-template-columns: minmax(0,1fr); }
    .result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .result-chronicle-columns { grid-template-columns: minmax(0,1fr); }
    .result-ledger-row { grid-template-columns: minmax(0,1fr); }
    .product-setting-row { flex-wrap: wrap; }
    .product-setting-range { grid-template-columns: minmax(0,1fr) auto; }
    .product-setting-range input { grid-column: 1/-1; }
    .dungeon-select-card { grid-template-columns: auto minmax(0,1fr); }
    .dungeon-select-card > strong { grid-column: 2; }
  }
}

@layer state {
  body.title-screen > .product-frame { visibility: hidden; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  html[data-reduced-motion="1"] *, html[data-reduced-motion="1"] *::before, html[data-reduced-motion="1"] *::after { animation: none; transition: none; scroll-behavior: auto; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none; transition: none; scroll-behavior: auto; }
  }
  html[data-high-contrast="1"] { --c-line: var(--c-ink-1); --c-line-soft: var(--c-ink-1); --c-ink-2: var(--c-ink-1); --c-ink-3: var(--c-ink-1); }
}