/*
  Tools: generators, Daggerheart catalogues and the equipment roller.
  Built on the shared --ui-* tokens; load once per page from the page template.

   1. Scope and tokens     5. Brief and results
   2. Form and choices     6. Catalogue
   3. Create layout        7. Equipment roller
   4. Artifact card        8. Motion
*/

/* 1. Scope and tokens: aliases fall back to a derived value so the file only needs the core --ui-* set */
.tool {
  --tool-measure: 44rem;
  --tool-card-line: var(--ui-card-line, color-mix(in srgb, var(--ui-text) 22%, var(--ui-line)));
  --tool-line-strong: var(--ui-line-strong, color-mix(in srgb, var(--ui-text) 45%, var(--ui-line)));
  --tool-rule: var(--ui-brass, var(--ui-accent));
  --tool-keyword: var(--ui-keyword, var(--ui-accent));
  --tool-shadow: var(--ui-shadow-card, none);
  padding-bottom: 3.5rem;
}
.tool-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool-num { font-variant-numeric: tabular-nums; }
.tool-meta { margin-top: .5rem; color: var(--ui-muted); font-size: .9375rem; }
.tool-meta a, .tool-hint a { color: var(--ui-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.tool-meta a:hover, .tool-hint a:hover { text-decoration-thickness: 2px; }
.tool-alert { max-width: var(--tool-measure); padding: .875rem 1rem; border: 1px solid var(--tool-card-line); border-left: 3px solid var(--ui-danger); border-radius: 3px; background: var(--ui-inset); }
.tool-alert h2 { margin-bottom: .375rem; font: 700 1.25rem/1.2 var(--ui-font-display); }
.tool-alert form { margin-top: .875rem; }
.tool > .tool-alert { margin-bottom: 1.25rem; }

/* 2. Form and choices: one readable column, description first */
.tool-form { display: grid; gap: 1.5rem; max-width: var(--tool-measure); }
.tool-form__row { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.tool-form__row > legend { margin-bottom: .5rem; padding: 0; }
.tool-form__label-row, .tool-form__hint-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tool-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.tool-form__foot { margin-top: -.75rem; }
.tool-label { font-size: .9375rem; font-weight: 650; }
.tool-optional, .tool-counter { color: var(--ui-muted); font-size: .8125rem; white-space: nowrap; }
.tool-counter[data-near-limit] { color: var(--ui-danger); font-weight: 650; }
.tool-hint { color: var(--ui-muted); font-size: .875rem; }
.tool-hint--live { min-height: 1.4em; }
.tool-generate { min-height: 3rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
.tool-generate svg { width: 1.125rem; height: 1.125rem; color: color-mix(in srgb, var(--ui-accent) 60%, var(--ui-on-action)); }

/* Segmented control and chips are radio groups: arrow keys move the choice. */
.tool-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .25rem; border: 1px solid var(--tool-card-line); border-radius: 4px; background: var(--ui-card); }
.tool-seg--links { display: inline-grid; }
.tool-seg__item, .tool-chip { position: relative; display: block; }
.tool-seg__item input, .tool-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tool-seg__item span, a.tool-seg__item { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; padding-inline: .625rem; border-radius: 2px; color: var(--ui-muted); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tool-seg__item:hover span, a.tool-seg__item:hover { color: var(--ui-text); background: var(--ui-inset); }
.tool-seg__item input:checked + span, .tool-chip input:checked + span, a.tool-seg__item[aria-current] { background: var(--ui-action); color: var(--ui-on-action); }
.tool-seg__item input:focus-visible + span, .tool-chip input:focus-visible + span { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.tool-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-chip span { display: inline-flex; align-items: center; min-height: 2.25rem; padding-inline: .875rem; border: 1px solid var(--tool-card-line); border-radius: 2px; background: var(--ui-card); font-size: .9375rem; font-weight: 560; }
.tool-chip:hover span { border-color: var(--tool-line-strong); }
.tool-chip input:checked + span { border-color: var(--ui-action); }
.tool-check { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; font-weight: 560; }
.tool-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--ui-action); }
@media (pointer: coarse) {
  .tool-chip span { min-height: 2.75rem; }
  .tool-seg__item span, a.tool-seg__item { min-height: 2.5rem; }
}

/* 3. Create layout */
.tool-create { display: grid; gap: 2.5rem; }
.tool-aside { display: grid; gap: 1.25rem; align-content: start; max-width: var(--tool-measure); font-size: .9375rem; }
.tool-aside__block { padding-top: 1rem; border-top: 3px double var(--tool-rule); }
.tool-aside__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.tool-aside__head img { width: 3.25rem; height: 3.25rem; }
.tool-aside__title { font: 700 1.125rem/1.2 var(--ui-font-display); }
.tool-aside .tool-hint { margin-block: .375rem .625rem; }
.tool-ticks { display: grid; gap: .5rem; }
.tool-ticks li { display: grid; grid-template-columns: 1.125rem 1fr; gap: .5rem; }
.tool-ticks li::before { content: ""; width: .55rem; height: .3rem; margin: .45em 0 0 .15rem; border: solid var(--ui-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.tool-recent { display: grid; gap: .5rem; }
.tool-recent a { display: grid; gap: .125rem; padding: .625rem .75rem; border: 1px solid var(--ui-line); border-radius: 2px; color: var(--ui-text); text-decoration: none; overflow-wrap: anywhere; }
.tool-recent a:hover { border-color: var(--tool-line-strong); background: var(--ui-inset); }
.tool-recent strong { font-weight: 650; }
.tool-recent small { color: var(--ui-muted); font-size: .8125rem; }
@media (min-width: 68rem) {
  .tool-create { grid-template-columns: minmax(0, var(--tool-measure)) minmax(0, 20rem); justify-content: space-between; align-items: start; gap: 4rem; }
}

/* 4. Artifact card: one partial set for SRD entries and generated results */
.artifact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1.25rem; }
.artifact-grid--results { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.artifact-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.artifact { display: flex; flex-direction: column; gap: .75em; min-width: 0; padding: 1.25rem; border: 1px solid var(--tool-card-line); border-radius: 3px; background: var(--ui-card); box-shadow: var(--tool-shadow); font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.artifact-grid--results .artifact { font-size: 1rem; }
.artifact__head { padding-bottom: .75em; border-bottom: 3px double var(--tool-rule); }
.artifact__name { font: 700 1.375em/1.2 var(--ui-font-display); text-wrap: balance; }
.artifact__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .375rem; color: var(--ui-muted); font-size: .875em; font-weight: 560; }
.artifact__flavor { font-family: var(--ui-font-display); font-size: 1.0625em; font-style: italic; line-height: 1.45; }
.artifact__motives { color: var(--ui-muted); }
.artifact__motives b, .artifact-lines b { color: var(--ui-text); font-weight: 650; }
.artifact-tag { display: inline-flex; align-items: center; padding: .1rem .4rem; border: 1px solid var(--tool-card-line); border-radius: 2px; color: var(--ui-muted); font-size: .6875rem; font-style: normal; font-weight: 650; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.artifact-tag--tier { border-color: currentColor; color: var(--ui-accent); }
.artifact-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.artifact-tags .artifact-tag { font-size: .75rem; letter-spacing: .02em; text-transform: none; white-space: normal; }

/* Labelled stats: sized by their content, so they wrap instead of overflowing on narrow cards. */
.artifact-stats { display: flex; flex-wrap: wrap; gap: 1px; overflow: hidden; border: solid var(--ui-text); border-width: 1px 0; background: var(--tool-card-line); }
.artifact-stats > div { flex: 1 1 auto; padding: .4rem .625rem .5rem; background: var(--ui-inset); }
.artifact-stats dt, .artifact-lines dt, .artifact-features__title { color: var(--ui-muted); font-size: .6875rem; font-weight: 650; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
.artifact-stats dd { font-size: 1.125rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.artifact-lines { display: grid; gap: .3rem; }
.artifact-lines > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.artifact-features__title { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
.artifact-features__title::after { content: ""; flex: 1; border-top: 1px solid var(--ui-line); }
/* An environment's suggested adversaries: a name opens its SRD card, a starred one starts a brief for it. */
.artifact-cast a { color: var(--ui-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.artifact-cast a:hover { text-decoration-thickness: 2px; }
.artifact-make::after { display: inline-block; margin-left: .25em; content: "✦" / ""; font-size: .8125em; }
.artifact-features__list { display: grid; gap: .625em; line-height: 1.5; }
/* Catalogue cards fold their features: the names stay in view, the text opens in place. */
.artifact-fold > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem .625rem; list-style: none; }
.artifact-fold > summary::-webkit-details-marker { display: none; }
.artifact-fold .artifact-features__title { margin-bottom: 0; }
.artifact-fold__toggle { color: var(--ui-accent); font-size: .8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.artifact-fold__names { grid-column: 1 / -1; color: var(--ui-muted); line-height: 1.5; }
.artifact-fold[open] .artifact-fold__names, .artifact-fold[open] .artifact-fold__closed, .artifact-fold:not([open]) .artifact-fold__open { display: none; }
.artifact-fold[open] > summary { margin-bottom: .5rem; }
.artifact-features__list ul, .artifact-features__list ol { display: grid; gap: .25em; margin: .375em 0 0 1.25em; }
.artifact-features__list ul { list-style: disc; }
.artifact-features__list ol { list-style: decimal; }
.artifact-feature__name { font-weight: 700; }
.artifact-feature__name + .artifact-tag { margin-inline: .125rem .25rem; vertical-align: .08em; }
.artifact-question { margin-top: .25em; color: var(--ui-muted); font-style: italic; }
.artifact-moves { display: grid; gap: .375em; margin-left: 1.25em; list-style: disc; }
.artifact-kw { color: var(--tool-keyword); font-weight: 700; }
.artifact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--ui-line); }
/* The copy group takes the spare width, which sets the card's own actions against the far edge. */
.artifact__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.artifact__group--copy { flex: 1 1 auto; }
.artifact__actions-label { color: var(--ui-muted); font-size: .8125rem; font-weight: 650; }
.artifact__status { color: var(--ui-success); font-size: .8125rem; font-weight: 600; }
.artifact__fallback { flex-basis: 100%; font-family: ui-monospace, monospace; font-size: .8125rem; }

/* 5. Brief and results */
.tool-brief { margin-bottom: 1.25rem; border: 1px solid var(--tool-card-line); border-radius: 3px; background: var(--ui-card); box-shadow: var(--tool-shadow); }
.tool-brief > summary { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .5rem 1rem; cursor: pointer; list-style: none; }
.tool-brief > summary::-webkit-details-marker { display: none; }
.tool-brief__label { color: var(--ui-accent); font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.tool-brief__line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-brief__toggle { color: var(--ui-muted); font-size: .8125rem; font-weight: 600; }
.tool-brief__toggle::after { content: "Show"; }
.tool-brief[open] .tool-brief__toggle::after { content: "Hide"; }
.tool-brief[open] .tool-brief__line { visibility: hidden; }
.tool-brief__body { display: grid; gap: 1rem; justify-items: start; padding: .25rem 1rem 1rem; border-top: 1px solid var(--ui-line); }
.tool-brief__list { display: grid; gap: .5rem; width: 100%; max-width: var(--tool-measure); padding-top: .75rem; }
.tool-brief__list > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; }
.tool-brief__list dt { color: var(--ui-muted); font-size: .875rem; font-weight: 600; }
.tool-brief__list dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ui-line); }
.tool-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; }
.tool-rating__label { font-weight: 600; }
.tool-rating__status { color: var(--ui-success); font-size: .875rem; font-weight: 600; }
.tool-stars { display: inline-flex; gap: .125rem; }
.tool-star { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--tool-line-strong); cursor: pointer; }
.tool-star svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
.tool-star[data-filled="true"] { color: var(--ui-accent); }
.tool-star[data-filled="true"] svg { fill: currentColor; }
.tool-star:disabled { cursor: wait; opacity: .7; }
.tool-error { color: var(--ui-danger); font-size: .875rem; }
.tool-error:empty { display: none; }
.tool-after > .tool-error { flex-basis: 100%; }
.tool-waiting { display: grid; justify-items: center; gap: .75rem; padding: clamp(2rem, 8vw, 4rem) 1.25rem; border: 1px solid var(--tool-card-line); border-radius: 3px; background: var(--ui-card); text-align: center; }
.tool-waiting img { width: 7rem; height: 7rem; }
.tool-waiting h2 { font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.625rem)/1.2 var(--ui-font-display); text-wrap: balance; }
.tool-waiting p { max-width: 30rem; color: var(--ui-muted); }
/* The rotating line keeps room for two rows on a narrow screen, so what sits below it stays put. */
@media (max-width: 34rem) { .tool-waiting__line { min-height: 3.2em; min-height: 2lh; } }
.tool-progress { width: min(16rem, 80%); height: 4px; margin-top: .5rem; overflow: hidden; border-radius: 2px; background: var(--ui-inset); }
.tool-progress::after { content: ""; display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--ui-accent); }
.tool-dialog { width: min(32rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--tool-card-line); border-radius: 3px; background: var(--ui-card); color: var(--ui-text); box-shadow: var(--ui-shadow-pop, 0 16px 40px -8px rgb(0 0 0 / .5)); }
.tool-dialog::backdrop { background: rgb(0 0 0 / .55); }
.tool-dialog__body { padding: 1.5rem; }
.tool-dialog form { display: grid; gap: 1rem; }
.tool-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tool-dialog__head h2 { font: 700 1.375rem/1.2 var(--ui-font-display); }
.tool-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.tool-dialog__success { color: var(--ui-success); font-size: .875rem; font-weight: 600; }

/* 6. Catalogue: search always visible, the other filters behind a disclosure on small screens */
.tool-browse .page-head { padding-bottom: .875rem; }
.tool-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .625rem; }
.tool-toolbar__search { position: relative; }
.tool-toolbar__search > svg { position: absolute; left: .75rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -.5625rem; color: var(--ui-muted); pointer-events: none; }
.tool-toolbar__search .field { padding-inline: 2.375rem; text-overflow: ellipsis; }
.tool-toolbar__search .field::-webkit-search-cancel-button { display: none; }
.tool-toolbar__clear { position: absolute; right: .25rem; top: 50%; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: -1rem; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--ui-muted); cursor: pointer; }
.tool-toolbar__clear:hover { color: var(--ui-text); background: var(--ui-inset); }
.tool-toolbar__clear svg { width: 1rem; height: 1rem; }
.tool-toolbar__toggle { display: none; }
.tool-toolbar__filters { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: .625rem; }
.tool-sort { display: flex; gap: .375rem; grid-column: 1 / -1; }
.tool-sort .field { flex: 1; }
.tool-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding-inline: .3rem; border-radius: 999px; background: var(--ui-action); color: var(--ui-on-action); font-size: .75rem; }
.tool-results { display: block; }
.tool-listbar { margin-block: .75rem; color: var(--ui-muted); font-size: .875rem; }
.tool-adding { margin-bottom: 1rem; }
/* Adding to an encounter comes back to the card it was added from. */
[data-catalog-card] { scroll-margin-top: 1rem; }
[data-catalog-card] .artifact__actions { column-gap: .5rem; }
.tool-empty { display: grid; justify-items: center; gap: .75rem; padding: 3rem 1rem; border: 1px dashed var(--tool-card-line); border-radius: 3px; color: var(--ui-muted); text-align: center; }
.tool-empty h2 { color: var(--ui-text); font: 700 1.25rem/1.2 var(--ui-font-display); }
.tool-empty p { max-width: 32rem; }
.tool-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; margin-top: 1.5rem; }
.tool-pager__page { min-width: 7rem; color: var(--ui-muted); font-size: .9375rem; text-align: center; font-variant-numeric: tabular-nums; }
.tool-pager .field { width: auto; }
.tool-pager [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
@media (max-width: 47.99rem) {
  .tool-browse .page-head__dek, .tool-browse .eyebrow { display: none; }
  .tool-search[data-collapsible] .tool-toolbar__toggle { display: inline-flex; }
  .tool-search[data-collapsible]:not([data-open]) .tool-toolbar__filters { display: none; }
}
@media (min-width: 48rem) {
  .tool-toolbar { display: flex; align-items: center; }
  .tool-toolbar__search { flex: 1 1 14rem; max-width: 26rem; }
  .tool-toolbar__filters { display: flex; flex: none; }
  .tool-toolbar__filters .field { width: auto; }
}

/* 7. Equipment roller: the ask, then the haul. Every button submits the ask's form, so each action carries the GM's choices. */
.roller { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.roller__title { font: 700 1.375rem/1.2 var(--ui-font-display); }
.roller__title .tool-num { margin-left: .375rem; color: var(--ui-muted); font: 600 1rem/1 var(--ui-font); }
.roller-field { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.roller-field > legend { margin-bottom: .5rem; padding: 0; }
.roller-field legend .tool-optional { margin-left: .375rem; font-weight: 400; }
/* The ask folds to one line on a phone once there is a haul; from 640px it is an open panel. */
.roller-ask { min-width: 0; border: 1px solid var(--tool-card-line); border-radius: 3px; background: var(--ui-card); box-shadow: var(--tool-shadow); }
.roller-ask__summary { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: .5rem 1rem; cursor: pointer; list-style: none; }
.roller-ask__summary::-webkit-details-marker, .roller-more > summary::-webkit-details-marker, .roller-exports > summary::-webkit-details-marker, .roller-row__summary::-webkit-details-marker { display: none; }
.roller-ask__summary::before, .roller-more > summary::before, .roller-exports > summary::before { content: ""; flex: none; width: .45rem; height: .45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
.roller-ask[open] > .roller-ask__summary::before, .roller-more[open] > summary::before, .roller-exports[open] > summary::before { transform: rotate(45deg); }
.roller-ask__title { font-weight: 650; }
.roller-ask__line { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 600; }
.roller-ask[open] .roller-ask__line, .roller-ask:not([open]) .roller-ask__title { display: none; }
.roller-ask__toggle { margin-left: auto; color: var(--ui-accent); font-size: .875rem; font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
.roller-ask__toggle::after { content: "Change"; }
.roller-ask[open] .roller-ask__toggle::after { content: "Hide"; }
.roller-ask__form { display: grid; gap: 1.25rem; padding: 1rem 1rem 1.25rem; border-top: 1px solid var(--ui-line); }
.roller-ask__pair { display: grid; gap: 1.25rem; }
.roller-ask__roll { display: none; gap: .375rem; justify-items: start; }
/* Radio groups drawn as segments; the chosen one carries a check mark as well as the colour. */
.roller-seg { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.roller-seg .tool-seg__item span { gap: .375rem; min-height: 2.75rem; padding-inline: .5rem; color: var(--ui-text); }
.roller-seg .tool-seg__item input:checked + span { color: var(--ui-on-action); }
.roller-seg .tool-seg__item input:checked + span::before { content: ""; flex: none; width: .55rem; height: .3rem; margin-top: -.2rem; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.roller-seg--rarity, .roller-seg--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roller-seg--rarity span, .roller-seg--wrap span, .roller-tier .tool-seg__item span { padding-block: .375rem; line-height: 1.25; text-align: center; white-space: normal; }
/* Tier and rarity put their levels and dice on a line of their own; a long source name wraps beside its check mark instead. */
.roller-seg--rarity span, .roller-tier .tool-seg__item span { flex-wrap: wrap; }
.roller-tier .tool-seg__item span { padding-inline: .25rem; }
.roller-tier small { white-space: nowrap; }
.roller-seg small { flex-basis: 100%; color: var(--ui-muted); font-size: .75rem; font-weight: 500; }
.roller-seg input:checked + span small { color: inherit; }
.roller-counts { display: grid; gap: .5rem 1.5rem; }
.roller-count { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.roller-count > span { font-size: .9375rem; font-weight: 560; }
.roller-more > summary, .roller-exports > summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--ui-accent); font-size: .9375rem; font-weight: 650; cursor: pointer; list-style: none; }
.roller-more > .roller-field { margin-top: .25rem; }
.roller-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.roller-preset { display: grid; align-content: center; justify-content: stretch; justify-items: start; gap: .125rem; min-height: 3.25rem; padding-block: .5rem; line-height: 1.25; text-align: left; white-space: normal; }
.roller-preset small { color: var(--ui-muted); font-size: .75rem; font-weight: 400; }
/* The haul: one list, a row per item. Each row is a fold with its actions beside it, never inside the summary. */
.roller-haul { display: grid; gap: 1rem; min-width: 0; }
.roller-haul__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 2.75rem; }
.roller-haul__send { display: none; max-width: 100%; }
.roller-send { min-width: 0; max-width: 100%; }
.roller-send span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roller-status { font-size: .9375rem; font-weight: 600; }
/* Empty, the status line leaves the grid instead of adding a gap; it stays in place for screen readers to announce. */
.roller-status:empty { position: absolute; }
.roller-status:not(:empty) { padding: .625rem .875rem; border-left: 3px solid var(--ui-success); border-radius: 2px; background: var(--ui-inset); }
.roller-haul > .tool-alert { max-width: none; }
.roller-empty { padding: 2rem 1rem; }
.roller-empty h3 { color: var(--ui-text); font: 700 1.25rem/1.2 var(--ui-font-display); }
.roller-rows { container-type: inline-size; border: 1px solid var(--tool-card-line); border-radius: 3px; background: var(--ui-card); box-shadow: var(--tool-shadow); }
.roller-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow-wrap: anywhere; }
.roller-row + .roller-row { border-top: 1px solid var(--ui-line); }
.roller-row[data-kept="true"] { box-shadow: inset 3px 0 0 var(--ui-accent); }
.roller-row__fold { grid-area: 1 / 1 / 2 / 3; min-width: 0; }
.roller-row__actions { z-index: 1; display: flex; grid-area: 1 / 2; align-self: start; width: 8.5rem; padding: .25rem .25rem 0 0; }
.roller-row__summary { display: grid; gap: .125rem; padding: .25rem 1rem .75rem; cursor: pointer; list-style: none; }
.roller-row__summary:hover .roller-row__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.roller-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-height: 2.75rem; margin-right: 8.5rem; }
.roller-row__type { color: var(--ui-accent); font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.roller-row__name { font: 700 1.1875rem/1.25 var(--ui-font-display); }
.roller-row__name::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin: 0 .125rem .25em .625rem; border: solid var(--ui-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); vertical-align: middle; }
.roller-row__fold[open] .roller-row__name::after { margin-bottom: 0; transform: rotate(-135deg); }
.roller-row__line { color: var(--ui-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.roller-row__text { grid-area: 2 / 1 / 3 / 3; margin: -.375rem 1rem .875rem; font-size: .9375rem; line-height: 1.5; }
.roller-row__fold[open] + .roller-row__text { display: none; }
/* Show descriptions: a switch whose knob moves, so its state is not only a colour. */
.roller-switch { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin-left: auto; padding: 0; border: 0; background: none; color: var(--ui-text); font-size: .875rem; font-weight: 600; cursor: pointer; }
.roller-switch::before { content: ""; flex: none; width: 2.125rem; height: 1.25rem; border: 1px solid var(--ui-line-strong); border-radius: 999px; background: radial-gradient(circle at .625rem 50%, var(--ui-muted) .375rem, transparent .4375rem) var(--ui-field); }
.roller-switch[aria-pressed="true"]::before { border-color: var(--ui-action); background: radial-gradient(circle at calc(100% - .625rem) 50%, var(--ui-on-action) .375rem, transparent .4375rem) var(--ui-action); }
@media (forced-colors: active) {
  .roller-switch::before { forced-color-adjust: none; border-color: CanvasText; background: radial-gradient(circle at .625rem 50%, CanvasText .375rem, transparent .4375rem) Canvas; }
  .roller-switch[aria-pressed="true"]::before { background: radial-gradient(circle at calc(100% - .625rem) 50%, HighlightText .375rem, transparent .4375rem) Highlight; }
}
.roller-row__body { display: grid; gap: .75rem; margin-inline: 1rem; padding-block: .75rem 1rem; border-top: 1px solid var(--ui-line); font-size: .9375rem; }
.roller-row__dice { font-weight: 600; font-variant-numeric: tabular-nums; }
.roller-row__body .artifact-lines > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
.roller-row__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Tier or rarity, one step down or up: the row is swapped for one from there. */
.roller-step { display: flex; align-items: center; margin-left: auto; border: 1px solid var(--tool-card-line); border-radius: 3px; }
.roller-step__now { min-width: 5.25rem; padding-inline: .25rem; font-size: .875rem; font-weight: 650; text-align: center; }
.roller-step .roller-icon { width: 2.25rem; height: 2.25rem; }
.roller-step .roller-icon svg { width: 1rem; height: 1rem; }
@container (min-width: 34rem) {
  .roller-row__summary { grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; min-height: 3.5rem; padding: .375rem 9.25rem .375rem 1rem; }
  .roller-row__top { flex-direction: column; align-items: flex-start; min-height: 0; margin-right: 0; }
  .roller-row__line { text-align: right; }
  .roller-row__text { margin: -.125rem 1rem .875rem 9.5rem; }
  .roller-row__actions { padding-top: .375rem; }
}
.roller-tag { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .375rem; border: 1px solid currentColor; border-radius: 2px; font-size: .6875rem; font-weight: 650; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; }
.roller-tag--kept { color: var(--ui-accent); }
.roller-tag--here { color: var(--ui-success); }
.roller-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--ui-muted); cursor: pointer; }
.roller-icon:hover { background: var(--ui-inset); color: var(--ui-text); }
.roller-icon[aria-pressed="true"] { color: var(--ui-accent); }
.roller-icon:disabled { background: none; color: var(--ui-muted); opacity: .35; cursor: not-allowed; }
.roller-icon svg { width: 1.25rem; height: 1.25rem; }
/* Remove keeps its place at the end of the strip on a kept row, which has no reroll. */
.roller-icon--remove { margin-left: auto; }
/* Tips: a short line over a control, on hover and on keyboard focus. Escape puts them away. */
.roller [data-tip] { position: relative; }
.roller [data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + .375rem); left: 50%; z-index: 6; display: none; width: max-content; max-width: 13rem; padding: .25rem .5rem; border-radius: 3px; background: var(--ui-text); color: var(--ui-page); font: 600 .8125rem/1.35 var(--ui-font); letter-spacing: 0; text-align: center; text-transform: none; white-space: normal; translate: -50% 0; pointer-events: none; }
.roller [data-tip]:focus-visible::after, .roller [data-tip]:has(:focus-visible)::after { display: block; }
@media (hover: hover) { .roller [data-tip]:hover::after { display: block; } }
/* At either edge of the haul a tip lines up with its control instead of running past the edge. */
.roller .roller-icon--remove::after, .roller-step [data-tip]:last-child::after { right: 0; left: auto; translate: none; }
.roller-add__list [data-tip]:first-child::after { left: 0; translate: none; }
.roller--no-tips [data-tip]::after { display: none !important; }
.roller-add { display: grid; gap: .5rem; }
.roller-add__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.roller-add__list .btn, .roller-clear, .roller-exports .field { min-height: 2.75rem; }
.roller-haul__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; padding-top: .5rem; border-top: 1px solid var(--ui-line); }
.roller-exports { flex: 1 1 16rem; }
.roller-exports__body { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-block: .25rem .5rem; }
.roller-exports .field { width: auto; padding-block: .25rem; }
.roller-exports__done { color: var(--ui-success); font-size: .8125rem; font-weight: 600; }
.roller-clear { margin-left: auto; }
/* A phone keeps Roll and Add haul in reach at the bottom of the screen. */
.roller-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .375rem .5rem; margin-inline: calc(-1 * var(--ui-gutter)); padding: .625rem var(--ui-gutter) calc(.625rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--tool-card-line); background: var(--ui-page); box-shadow: 0 -6px 16px -12px rgb(0 0 0 / .4); }
.roller-bar > .btn, .roller-bar > form { flex: 1 1 0; min-width: 0; }
.roller-bar > .roller-bar__roll:not(:only-child) { flex: none; padding-inline: 1.25rem; }
.roller-bar .btn { min-height: 2.75rem; }
.roller-bar form .btn { width: 100%; }
.roller-bar .tool-hint { flex-basis: 100%; font-size: .8125rem; text-align: center; }
/* A button that takes the focus back after its row changed comes into view clear of that bar. */
.roller-row .roller-icon { scroll-margin-block: 1rem 6.5rem; }
@media (pointer: coarse) {
  .roller-haul .btn--sm { min-height: 2.75rem; }
  .roller-step .roller-icon { width: 2.75rem; height: 2.75rem; }
}
@media (min-width: 40rem) {
  .roller-ask[open] > .roller-ask__summary, .roller-bar { display: none; }
  .roller-row .roller-icon { scroll-margin-bottom: 1rem; }
  .roller-ask__form { padding: 1.25rem; border-top: 0; }
  .roller-ask__roll, .roller-haul__send { display: grid; }
  .roller-tier .roller-seg { max-width: 20rem; }
  .roller-seg--rarity, .roller-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .roller-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roller-add { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .roller-add__list { display: flex; flex-wrap: wrap; }
  .roller-add .tool-hint { grid-column: 1 / -1; }
}
/* Tier and rarity sit side by side once rarity has room for four across beside the tier. */
@media (min-width: 54rem) { .roller-ask__pair { grid-template-columns: auto minmax(0, 1fr); } }
@media (min-width: 64rem) {
  .roller { grid-template-columns: 21.25rem minmax(0, 1fr); gap: 2.5rem; }
  .roller-ask__pair, .roller-counts { grid-template-columns: minmax(0, 1fr); }
  .roller-seg--rarity, .roller-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roller-ask__roll { justify-items: stretch; }
}
/* The ask stays in view beside a long haul, in windows tall enough to show all of it. */
@media (min-width: 64rem) and (min-height: 66rem) { .roller-ask { position: sticky; top: 1rem; } }

/* 8. Motion */
@media (prefers-reduced-motion: no-preference) {
  .tool-chip span, .tool-seg__item span, a.tool-seg__item, .tool-recent a, .roller-icon { transition: background-color .12s, border-color .12s, color .12s; }
  .roller [data-tip]:hover::after { animation: tool-tip .12s .35s both; }
  .tool-waiting img { animation: tool-bob 2.6s ease-in-out infinite; }
  .tool-progress::after { animation: tool-slide 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-progress::after { width: 100%; opacity: .6; }
}
@keyframes tool-tip { from { opacity: 0; } }
@keyframes tool-bob { 50% { transform: translateY(-.375rem); } }
@keyframes tool-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }