/* levelup.css (B4b1): the level-up walkthrough (public/js/views/levelup.js,
 * .lu-*), a dialog over the sheet that becomes a bottom sheet under 560 px.
 * It sits in the top layer, outside the sheet, so every control is a 44 px
 * target at every width. Kit's Clean tokens only; every transition and
 * animation names a --duration and an --ease token. */

.lu-dialog {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.lu-dialog::backdrop { background: var(--scrim); }
.lu-form { display: flex; flex-direction: column; gap: 10px; max-height: calc(100dvh - 34px); padding: 16px; box-sizing: border-box; }
.lu-head { display: flex; align-items: center; gap: 8px; }
.lu-title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-lg); font-weight: 600; overflow-wrap: anywhere; }

/* ---- the steps ---- */
.lu-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.lu-step {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.lu-step[aria-current="step"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600; }
.lu-step:disabled { cursor: default; opacity: 0.5; }
.lu-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--surface-alt); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.lu-step.is-done .lu-step-n { background: var(--success-soft); color: var(--success-soft-text); }

/* ---- the body ---- */
.lu-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; gap: 10px; align-content: start; }
.lu-lead { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.lu-note { margin: 0; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.lu-card { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lu-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.lu-count { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lu-chip {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-soft-text);
  font-size: var(--text-xs); font-weight: 600;
}
.lu-meta { font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }

/* ---- the classes ---- */
.lu-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.lu-class {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 56px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.lu-class.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); }
.lu-class:disabled { cursor: default; background: var(--surface-alt); color: var(--text-muted); }
.lu-class-name { font-weight: 600; overflow-wrap: anywhere; }
.lu-class-line { font-size: var(--text-xs); overflow-wrap: anywhere; }
.lu-class-line.is-unmet { color: var(--danger-soft-text); }
.lu-dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--text-sm); }
.lu-dl dt { font-weight: 600; }
.lu-dl dd { margin: 0; overflow-wrap: anywhere; }
.lu-dl-row { display: contents; }

/* ---- segments, buttons ---- */
.lu-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.lu-seg-btn, .lu-btn, .lu-opt, .lu-ab {
  min-height: 44px; min-width: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.lu-seg-btn[aria-pressed="true"], .lu-opt[aria-pressed="true"], .lu-ab[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600;
}
.lu-btn.is-primary { border-color: transparent; background: var(--accent); color: var(--accent-text); }
.lu-seg-btn:disabled, .lu-btn:disabled, .lu-opt:disabled, .lu-ab:disabled { cursor: default; opacity: 0.5; }
@media (hover: hover) {
  .lu-step:not(:disabled):not([aria-current]):hover, .lu-class:not(:disabled):not(.is-on):hover,
  .lu-seg-btn:not(:disabled):hover, .lu-btn:not(:disabled):not(.is-primary):hover, .lu-opt:not(:disabled):hover, .lu-ab:not(:disabled):hover { background: var(--surface-alt); }
}
.lu-step:focus-visible, .lu-class:focus-visible, .lu-seg-btn:focus-visible, .lu-btn:focus-visible, .lu-opt:focus-visible,
.lu-ab:focus-visible, .lu-input:focus-visible, .lu-summary:focus-visible { outline: none; box-shadow: var(--ring); }
.lu-browse { justify-self: start; margin-top: 8px; }

/* ---- choices ---- */
.lu-input {
  width: 100%; min-height: 44px; padding: 6px 10px; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit;
}
.lu-filter { margin-bottom: 8px; }
.lu-texts { display: grid; gap: 6px; }
.lu-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; max-height: 40dvh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.lu-opt-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lu-opt-row[hidden] { display: none; }
.lu-opt { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; overflow-wrap: anywhere; }
.lu-opt[aria-pressed="true"] .lu-meta { color: inherit; }
.lu-opt-name { font-weight: 600; }
.lu-opt-row.is-held .lu-opt-name { font-weight: 400; }
.lu-choice, .lu-pick, .lu-profs, .lu-feature { display: grid; gap: 0; }
.lu-held { font-size: var(--text-xs); color: var(--text-muted); }
.lu-abilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 6px; margin-top: 8px; }
.lu-ab { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.lu-ab-name { font-weight: 600; }
.lu-asi .lu-note { margin-top: 8px; }

/* ---- features ---- */
/* A flex summary loses the disclosure triangle (FB-A, items 1 and 4), so
 * each draws its own chevron: pointing right while closed, down while
 * open, turned on the --duration-fast token (kit/motion.css stills it
 * under reduced motion). The builder's cards use the same summary. */
.lu-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; }
.lu-summary::-webkit-details-marker, .ss-feat-name::-webkit-details-marker { display: none; }
.lu-summary::before, .ss-feat-name::before {
  content: ""; flex: none; box-sizing: border-box; width: 0.6em; height: 0.6em; margin: 0 0.2em 0 0.1em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--text-muted);
  transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-standard);
}
details[open] > .lu-summary::before, details[open] > .ss-feat-name::before { transform: rotate(45deg); }
.lu-feature-name { font-weight: 600; overflow-wrap: anywhere; }
.lu-text { font-size: var(--text-sm); overflow-wrap: anywhere; }
.lu-text .sc-table { max-width: 100%; }

/* ---- hit points ---- */
.lu-roll { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lu-die {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 6px;
  border: 2px solid var(--accent); border-radius: var(--radius); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums;
}
.lu-die.is-rolling { animation: lu-roll var(--duration-slow) var(--ease-out); }
@keyframes lu-roll {
  from { transform: rotate(-200deg) scale(0.6); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
.lu-rolls { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); color: var(--text-muted); }
.lu-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lu-table th { padding: 4px 8px 4px 0; text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.lu-table td { padding: 4px 6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lu-table tr + tr { border-top: 1px solid var(--border); }
.lu-arrow { color: var(--text-muted); }

/* ---- replacements (F-B4v): out, in, then the new one's own choices ---- */
.lu-replace { display: grid; gap: 8px; }
.lu-replace .lu-h { margin-bottom: 0; }
.lu-replace-side { display: grid; gap: 4px; min-width: 0; }
.lu-sub { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.lu-replace .lu-choice { border-style: dashed; }
.lu-mi .lu-mi-part { display: grid; gap: 4px; min-width: 0; margin-top: 8px; } /* F-BRa: Magic Initiate's card, one part per pick */
.lu-body:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- spells, review ---- */
.lu-slots { font-variant-numeric: tabular-nums; }
.lu-spells, .lu-review { display: grid; gap: 10px; min-width: 0; }

/* ---- the foot ---- */
.lu-missing { margin: 0; min-height: 1.2em; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.lu-foot { display: flex; align-items: center; gap: 8px; }
.lu-spacer { flex: 1; }

/* ---- a bottom sheet on a phone ---- */
@media (max-width: 559px) {
  /* One height on every step, so the step bar and the title stay put (R-B4-16). */
  .lu-dialog {
    width: 100vw; max-width: 100vw; margin: auto 0 0; height: 92dvh; max-height: 92dvh;
    border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .lu-form { height: 100%; max-height: 92dvh; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .lu-step { padding: 4px 8px; }
  .lu-dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---- a short viewport: a phone held sideways (F-R2c, R-F2-8) ----
 * At 844 x 390 the desktop dialog left the step 135 px between its title,
 * step bar, missing line and foot. Here it takes the whole height, the
 * title shares a row with the step bar and the missing line with the foot,
 * and the step body is the one scroller (no nested option list), so the
 * step's first option is in view. */
@media (max-height: 500px) {
  .lu-dialog {
    width: min(960px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto;
    border-width: 0 1px; border-radius: 0;
  }
  .lu-form {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head steps" "body body" "missing foot";
    align-items: center; gap: 6px 12px; height: 100%; max-height: 100dvh;
    padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .lu-head { grid-area: head; min-width: 0; }
  .lu-title { font-size: var(--text-base); }
  .lu-steps { grid-area: steps; flex-wrap: nowrap; justify-content: flex-end; max-width: 60vw; overflow-x: auto; }
  .lu-step { flex: none; padding: 4px 8px; }
  .lu-body { grid-area: body; align-self: stretch; }
  .lu-missing { grid-area: missing; }
  .lu-foot { grid-area: foot; }
  .lu-opts { max-height: none; overflow-y: visible; }
}

/* ---- the detail sheet (public/js/detail-sheet.js, .ss-*) ----
 * The ⓘ beside a class or a subclass option, and the sheet it opens: the
 * picker's dialog shell (.pk-*), a bottom sheet under 560 px like the
 * walkthrough. */
.lu-opt-row.has-info, .lu-class-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: stretch; gap: 6px; min-width: 0; }
.lu-info {
  min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted); font: inherit; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) { .lu-info:hover { background: var(--surface-alt); color: var(--text); } }
.lu-info:focus-visible { outline: none; box-shadow: var(--ring); }
.ss-dialog { width: min(640px, calc(100vw - 32px)); }
.ss-form { height: min(720px, calc(100dvh - 34px)); }
.ss-head { align-items: flex-start; }
.ss-titles { flex: 1; min-width: 0; }
.ss-titles .pk-title { overflow-wrap: anywhere; }
.ss-tabs .lu-seg-btn { flex: 1; }
.ss-body { flex: 1; min-height: 0; overflow-y: auto; font-size: var(--text-sm); overflow-wrap: break-word; }
.ss-body:focus { outline: none; }
.ss-text p { margin: 0 0 8px; }
.ss-none { margin: 0; color: var(--text-muted); }
.ss-sub { margin: 12px 0 4px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ss-glance { margin: 0; padding-left: 1.2em; }
.ss-glance li { margin: 2px 0; }
.ss-glance-lv { font-weight: 600; }
.ss-dl { margin-bottom: 4px; }
.ss-subs { margin: 0; }
.ss-extras { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.ss-timeline { margin: 0; padding: 0; list-style: none; }
.ss-step { position: relative; padding: 0 0 10px 38px; }
.ss-step::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--border); }
.ss-step:last-child::before { display: none; }
.ss-lv {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border);
  border-radius: 50%; background: var(--surface-alt); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ss-step.is-now .ss-lv { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.ss-feats { display: grid; gap: 4px; min-width: 0; }
.ss-feat { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.ss-feat-name { display: flex; align-items: center; gap: 6px; min-height: 44px; list-style: none; padding: 4px 10px; font-weight: 600; cursor: pointer; }
.ss-feat-name:focus-visible { outline: none; box-shadow: var(--ring); }
.ss-feat .ss-text { padding: 0 10px 4px; }
@media (max-width: 559px) {
  .ss-dialog {
    width: 100vw; max-width: 100vw; margin: auto 0 0; height: 92dvh; max-height: 92dvh;
    border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .ss-form { height: 100%; max-height: 92dvh; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}