/*
  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, .tool-next 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, .tool-next 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); }
.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-next { margin-top: 1rem; color: var(--ui-muted); font-size: .9375rem; }
.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: category first, then the options that category rolls by */
.roller { display: grid; gap: 2rem; }
.roller__controls { display: grid; gap: 1.5rem; align-content: start; }
.roller__results { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.roller__title { font: 700 1.375rem/1.2 var(--ui-font-display); }
.roller__title .tool-num { color: var(--ui-muted); font-size: 1rem; font-weight: 600; }
.roller legend .tool-optional { margin-left: .375rem; font-weight: 400; }
.roller__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.roller__bar > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.roller-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.roller-option { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .125rem .5rem; align-items: center; min-height: 2.75rem; padding: .375rem .75rem; border: 1px solid var(--tool-card-line); border-radius: 2px; background: var(--ui-card); color: var(--ui-text); font-size: .9375rem; font-weight: 560; line-height: 1.25; text-align: left; cursor: pointer; }
.roller-option:hover { border-color: var(--tool-line-strong); }
.roller-option::before { content: ""; grid-area: 1 / 1; width: 1rem; height: 1rem; border: 1px solid var(--tool-line-strong); border-radius: 2px; }
.roller-option span { grid-area: 1 / 2; }
.roller-option small { grid-area: 2 / 2; color: var(--ui-muted); font-size: .75rem; font-weight: 400; }
.roller-option[aria-pressed="true"] { border-color: var(--ui-action); background: var(--ui-action); color: var(--ui-on-action); }
.roller-option[aria-pressed="true"] small { color: inherit; opacity: .8; }
/* The check mark makes the selected state visible without relying on colour. */
.roller-option[aria-pressed="true"]::before { border-color: currentColor; }
.roller-option[aria-pressed="true"]::after { content: ""; grid-area: 1 / 1; justify-self: center; width: .55rem; height: .3rem; margin-top: -.15rem; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.roller-summary { padding: .75rem 1rem; border-left: 3px solid var(--ui-accent); background: var(--ui-inset); font-size: .9375rem; }
.roller-summary:empty { display: none; }
.roller-rules { padding-top: 1rem; border-top: 3px double var(--tool-rule); font-size: .9375rem; }
.roller-rules h2 { margin-bottom: .625rem; font: 700 1.125rem/1.2 var(--ui-font-display); }
.roller-rules dl { display: grid; gap: .5rem; }
.roller-rules dt { font-weight: 650; }
.roller-rules dd { color: var(--ui-muted); }
.roller-item { border: 1px solid var(--tool-card-line); border-radius: 3px; background: var(--ui-card); box-shadow: var(--tool-shadow); overflow-wrap: anywhere; }
.roller-item[data-pinned="true"] { border-color: var(--ui-accent); border-left-width: 3px; }
.roller-item__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .375rem .5rem .375rem 1.25rem; border-bottom: 1px solid var(--ui-line); background: var(--ui-inset); color: var(--ui-muted); font-size: .8125rem; font-weight: 600; }
.roller-item__bar > div { display: flex; gap: .25rem; margin-left: auto; }
.roller-item__body { display: grid; gap: .75rem; padding: 1.25rem; }
.roller-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .75rem; border-bottom: 3px double var(--tool-rule); }
.roller-item__name { font: 700 1.375rem/1.2 var(--ui-font-display); text-wrap: balance; }
.roller-item__tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.roller-item .artifact-lines > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
.roller-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--ui-muted); cursor: pointer; }
.roller-icon:hover { color: var(--ui-text); background: var(--ui-card); }
.roller-icon:disabled { opacity: .4; cursor: not-allowed; }
.roller-icon[title="Unpin item"] { color: var(--ui-accent); }
.roller-icon--danger:hover { color: var(--ui-danger); }
.roller-icon svg { width: 1.125rem; height: 1.125rem; }
.roller-item__bar form { display: contents; }
.roller-keep { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.roller-keep__done { color: var(--ui-success); font-size: .9375rem; font-weight: 600; }
.roller-exports { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--ui-line); }
.roller-exports .field { width: auto; min-height: 2.25rem; padding-block: .25rem; }
.roller-exports [role="status"] { flex: 1 1 10rem; color: var(--ui-success); font-size: .8125rem; font-weight: 600; }
@media (min-width: 60rem) {
  .roller { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.5rem 3rem; align-items: start; }
  .roller__controls, .roller-rules { grid-column: 1; }
  .roller__results { grid-area: 1 / 2 / span 2; }
}

/* 8. Motion */
@media (prefers-reduced-motion: no-preference) {
  .tool-chip span, .tool-seg__item span, a.tool-seg__item, .tool-recent a, .roller-option, .roller-icon { transition: background-color .12s, border-color .12s, color .12s; }
  .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-bob { 50% { transform: translateY(-.375rem); } }
@keyframes tool-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }