/* Run AN: the app UI standard (docs/design/APP_UI_STANDARD.md). One set of page components built only from the tokens
   in DESIGN.md (styles.css :root). Every page added or changed from Run AN on is built from these classes; the server
   helpers that write the markup are in src/ui/standard.js. Loaded after styles.css and tenant-ui-v2.css.
   Spacing uses the one scale (4, 8, 12, 16, 24, 32, 48, 64). UK English, no hyphens, no em dashes. */

/* ------------------------------------------------ page header: crumbs, title, description, primary action */
.ui-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); row-gap: var(--space-2); align-items: end; margin: 0 0 var(--space-5); }
.ui-head__crumbs { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ui-head__crumbs a { color: var(--ink-soft); text-decoration: none; }
.ui-head__crumbs a:hover { color: var(--accent-readable); }
.ui-head__crumbs span[aria-hidden] { margin: 0 var(--space-2); }
.ui-head .ui-head__title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); }
.ui-head__desc { margin: var(--space-2) 0 0; max-width: 64ch; color: var(--muted); font-size: var(--text-base); line-height: 1.55; }
.ui-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; align-items: center; }
.ui-head__actions .btn { margin: 0; }

/* ------------------------------------------------ area tabs: the sibling pages of one area (Strategy) */
.ui-tabs { display: flex; gap: var(--space-1); margin: 0 0 var(--space-5); padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; list-style: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-decoration: none; }
.ui-tabs a:hover { color: var(--ink); }
.ui-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.ui-tabs__n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }

/* ------------------------------------------------ section: the unit of a page. Inside it, groups sit on hairlines. */
.ui-section { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); margin: 0 0 var(--space-4); }
.ui-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-4); }
.ui-section__head > div { min-width: 0; }
.ui-section .ui-section__title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; }
.ui-section__desc { margin: var(--space-1) 0 0; max-width: 70ch; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.ui-section__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; flex: none; }
.ui-section__actions .btn, .ui-section__actions form { margin: 0; }
.ui-section--flush { padding: 0; overflow: hidden; }
.ui-section--flush > .ui-section__head { padding: var(--space-5) var(--space-5) 0; }
.ui-section--flush > .ui-section__foot { padding: var(--space-3) var(--space-5) var(--space-4); }
.ui-section__foot { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-sm); }
.ui-group + .ui-group { border-top: 1px solid var(--line); margin-top: var(--space-4); padding-top: var(--space-4); }
.ui-group .ui-group__title, .ui-section .ui-group__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; }
.ui-sub { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------ data table */
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ui-table caption { text-align: left; }
.ui-table th { text-align: left; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; background: transparent; }
.ui-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); line-height: 1.45; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table th:first-child, .ui-table td:first-child { padding-left: 0; }
.ui-table th:last-child, .ui-table td:last-child { padding-right: 0; }
.ui-section--flush .ui-table th:first-child, .ui-section--flush .ui-table td:first-child { padding-left: var(--space-5); }
.ui-section--flush .ui-table th:last-child, .ui-section--flush .ui-table td:last-child { padding-right: var(--space-5); }
.ui-table [data-num] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-table tbody tr:hover { background: var(--accent-softer); }
.ui-table tr[data-own] td { background: var(--accent-softer); }
.ui-table tr[data-own] td:first-child { font-weight: 600; }
.ui-table__sub { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-xs); font-weight: 400; line-height: 1.4; }
.ui-table__na { color: var(--muted); }
.ui-table td .btn { margin: 0; }
.ui-gap { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; }
.ui-gap strong { color: var(--ink); }

/* ------------------------------------------------ key and value list */
.ui-kv { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); margin: 0; }
.ui-kv dt, .ui-kv dd { margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.45; }
.ui-kv dt { color: var(--muted); padding-right: var(--space-4); }
.ui-kv dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ui-kv > dt:first-of-type, .ui-kv > dt:first-of-type + dd { border-top: 0; }

/* ------------------------------------------------ form rows: labels in one left column, controls in the next */
.ui-form { margin: 0; }
.ui-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--line); align-items: start; }
.ui-row:first-child { border-top: 0; padding-top: 0; }
.ui-row__label { padding-top: 11px; font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.3; }
.ui-row__label small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); }
.ui-row__control { min-width: 0; }
.ui-row__control .input, .ui-row__control .textarea, .ui-row__control select { width: 100%; margin: 0; }
.ui-row__control--narrow { max-width: 240px; }
.ui-row__hint { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.ui-row__check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--text-sm); }
.ui-form__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; padding: var(--space-4) 0 0 calc(200px + var(--space-5)); border-top: 1px solid var(--line); margin-top: var(--space-1); }
.ui-form__actions .btn { margin: 0; }
.ui-form__actions--start { padding-left: 0; }
.ui-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ui-fieldset + .ui-fieldset { border-top: 1px solid var(--line); margin-top: var(--space-4); padding-top: var(--space-4); }
.ui-fieldset > legend { padding: 0; margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 700; color: var(--ink); }

/* ------------------------------------------------ filter bar: segments on the left, search and count on the right */
.ui-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); }
.ui-seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 3px; }
.ui-seg a, .ui-seg button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ui-seg a[aria-current="true"], .ui-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }
.ui-seg__n { font-variant-numeric: tabular-nums; color: var(--muted); }
.ui-filters__search { flex: 1 1 220px; max-width: 360px; margin: 0; }
.ui-filters__count { margin-left: auto; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ stats: one strip on hairlines, never a row of hero cards */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.ui-stat { margin: 0; padding: 0 var(--space-4); border-left: 1px solid var(--line); min-width: 0; }
.ui-stat:first-child { border-left: 0; padding-left: 0; }
.ui-stat__label { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ui-stat__value { margin: var(--space-1) 0 0; font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -0.01em; }
.ui-stat__sub { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--muted); line-height: 1.4; }

/* ------------------------------------------------ status chip: a dot and a word, on a hairline */
.ui-status { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.ui-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.ui-status--ok::before { background: var(--ok); }
.ui-status--warn::before { background: var(--warn); }
.ui-status--danger::before { background: var(--danger); }
.ui-status--info::before { background: var(--accent); }
.ui-status--plain::before { display: none; }

/* ------------------------------------------------ empty state */
.ui-empty { text-align: center; padding: var(--space-7) var(--space-5); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.ui-empty__title { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.ui-empty__body { margin: var(--space-2) auto 0; max-width: 52ch; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.ui-empty .btn { margin: var(--space-4) 0 0; }
.ui-empty--inline { text-align: left; padding: var(--space-4); border-radius: var(--radius-sm); }
.ui-empty--inline .ui-empty__body { margin-left: 0; }
.ui-section .ui-empty { border-color: var(--line); background: var(--surface-2); }

/* ------------------------------------------------ skeleton */
.ui-skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-soft) 0%, var(--surface-2) 50%, var(--bg-soft) 100%); background-size: 200% 100%; animation: ui-skel 1.4s ease-in-out infinite; }
.ui-skel + .ui-skel { margin-top: var(--space-2); }
.ui-skel--title { height: 20px; width: 40%; }
.ui-skel--short { width: 60%; }
@keyframes ui-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-skel { animation: none; } }

/* ------------------------------------------------ list rows: name and meta left, actions right, on hairlines */
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-list__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.ui-list__item:first-child { border-top: 0; padding-top: 0; }
.ui-list__item:last-child { padding-bottom: 0; }
.ui-list__name { margin: 0; font-weight: 600; font-size: var(--text-base); color: var(--ink); overflow-wrap: anywhere; }
.ui-list__meta { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.ui-list__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.ui-list__actions .btn, .ui-list__actions form { margin: 0; }

/* ------------------------------------------------ side panel layout: the work on the left, context on the right */
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.ui-split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ui-split__aside { position: sticky; top: 88px; }
.ui-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.ui-panel + .ui-panel { margin-top: var(--space-4); }
.ui-panel .ui-panel__title { margin: 0 0 var(--space-3); font-family: var(--font); line-height: 1.2; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------ dialog */
.ui-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.ui-dialog::backdrop { background: rgba(20, 21, 26, 0.32); }
.ui-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.ui-dialog .ui-dialog__title { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.ui-dialog__body { padding: var(--space-4) var(--space-5); overflow-y: auto; }
.ui-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.ui-dialog__foot .btn { margin: 0; }

/* ------------------------------------------------ inline notice: one line on paper, a status dot, never a tinted slab */
.ui-note { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); line-height: 1.5; color: var(--ink); }
.ui-note::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.ui-note--ok::before { background: var(--ok); }
.ui-note--warn::before { background: var(--warn); }
.ui-note--danger::before { background: var(--danger); }
.ui-note p { margin: 0; }
.ui-note .btn { margin: 0; }

/* ------------------------------------------------ progress meter for goals: a bar with its figure beside it */
.ui-meter { max-width: 360px; display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: var(--space-2); align-items: center; }
.ui-meter__bar { height: 6px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.ui-meter__bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.ui-meter__v { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ at phone width: designed, not merely stacked */
@media (max-width: 640px) {
  .ui-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-4); }
  .ui-head .ui-head__title { font-size: var(--text-xl); }
  .ui-head__desc { font-size: var(--text-sm); }
  .ui-head__actions { justify-content: flex-start; }
  .ui-tabs { margin-left: -16px; margin-right: -16px; padding: 0 12px; margin-bottom: var(--space-4); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .ui-section { padding: var(--space-4); border-radius: var(--radius-sm); }
  .ui-section--flush { padding: 0; }
  .ui-section--flush > .ui-section__head { padding: var(--space-4) var(--space-4) 0; }
  .ui-section--flush > .ui-section__foot { padding: var(--space-3) var(--space-4) var(--space-4); }
  .ui-section__head { flex-direction: column; gap: var(--space-3); }
  .ui-section__actions { justify-content: flex-start; }
  .ui-section .ui-section__title { font-size: var(--text-lg); }
  /* A table at phone width becomes one block per row: the first cell is the row's name, the rest are labelled. */
  .ui-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ui-table--stack, .ui-table--stack tbody, .ui-table--stack tr, .ui-table--stack td { display: block; width: 100%; }
  .ui-table--stack tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .ui-table--stack tr:last-child { border-bottom: 0; }
  .ui-section--flush .ui-table--stack tr { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ui-table--stack td { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: var(--space-3); padding: 2px 0 !important; border: 0; text-align: left !important; white-space: normal; }
  .ui-table--stack td::before { content: attr(data-label); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
  .ui-table--stack td:first-child { display: block; padding-bottom: var(--space-1) !important; font-weight: 700; font-size: var(--text-base); }
  .ui-table--stack td:first-child::before { display: none; }
  .ui-table--stack tr:hover { background: transparent; }
  .ui-kv { grid-template-columns: minmax(0, 1fr); }
  .ui-kv dt { padding-bottom: 0; }
  .ui-kv dd { border-top: 0; padding-top: 2px; }
  .ui-row { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) 0; }
  .ui-row__label { padding-top: 0; }
  .ui-row__control--narrow { max-width: none; }
  .ui-form__actions { padding-left: 0; }
  .ui-form__actions .btn { flex: 1 1 auto; }
  .ui-filters__search { max-width: none; }
  .ui-filters__count { margin-left: 0; }
  .ui-seg { width: 100%; }
  .ui-seg a, .ui-seg button { flex: 1 1 auto; justify-content: center; }
  .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
  .ui-stat { padding: 0 var(--space-3); }
  .ui-stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .ui-stat__value { font-size: var(--text-xl); }
  .ui-list__item { grid-template-columns: minmax(0, 1fr); }
  .ui-list__actions { justify-content: flex-start; }
  .ui-split, .ui-split--wide { grid-template-columns: minmax(0, 1fr); }
  .ui-split__aside { position: static; }
  .ui-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ui-dialog__foot .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------ text for screen readers only */
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------ upload drop: one bordered row, the words left aligned, the input hidden */
.ui-drop { position: relative; display: block; margin: 0 0 var(--space-3); padding: var(--space-4); border: 1px dashed var(--accent-line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.ui-drop:hover, .ui-drop.is-over { background: var(--accent-softer); border-color: var(--accent); }
.ui-drop__t { display: block; font-weight: 600; color: var(--ink); font-size: var(--text-base); }
.ui-drop__link { color: var(--accent-readable); text-decoration: underline; text-underline-offset: 2px; }
.ui-drop__hint { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.45; max-width: 80ch; }
[data-bdocs-input]:focus-visible + * , .ui-drop:focus-within { outline: 2px solid var(--accent-readable); outline-offset: 2px; }

/* ------------------------------------------------ show more: the rest of a long list behind one button */
.ui-more { margin: 0; }
.ui-more > summary { list-style: none; margin: var(--space-3) var(--space-5) var(--space-4); display: inline-flex; }
.ui-more > summary::-webkit-details-marker { display: none; }
.ui-more[open] > summary { display: none; }
@media (max-width: 640px) { .ui-more > summary { margin: var(--space-3) var(--space-4) var(--space-4); } }

/* ------------------------------------------------ add one more: a new group behind one button */
.ui-add { border-top: 1px solid var(--line); margin-top: var(--space-4); padding-top: var(--space-4); }
.ui-add > summary { list-style: none; display: inline-flex; }
.ui-add > summary::-webkit-details-marker { display: none; }
.ui-add[open] > summary { display: none; }
.ui-fieldset__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2); }
.ui-fieldset__head .ui-group__title { margin: 0; }
.ui-fieldset__head .ui-row__check { min-height: 36px; color: var(--ink-soft); }

/* ------------------------------------------------ a stacked form inside a side panel, and blocks inside a table cell */
.ui-form--stacked .field { margin: 0 0 var(--space-3); }
.ui-form--stacked .field label { display: block; margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.ui-form--stacked .ui-fieldset { margin: 0 0 var(--space-3); }
.ui-cell + .ui-cell { border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-2); }
.ui-cell form { margin-top: var(--space-2); }
.m-0 { margin: 0; }
.ui-panel .ui-kv { grid-template-columns: 96px minmax(0, 1fr); }
.ui-panel .ui-kv dt { padding-right: var(--space-3); }
.row-actions > form { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }

/* ------------------------------------------------ the leader's own space (/v/me), one column, phone first */
.vp { max-width: 720px; padding-top: var(--space-5); padding-bottom: var(--space-7); }
.vp__brand { margin: 0 0 var(--space-5); }
.vp__h { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-xl); }
.vp__files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.vp__files .ui-drop { margin: 0; }
.vp__text { min-height: 180px; }
.vp__media { display: block; max-width: 100%; border-radius: var(--radius-sm); margin: 0 0 var(--space-3); }
.vp__body { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.55; margin: var(--space-3) 0; }
@media (max-width: 640px) { .vp { padding-top: var(--space-4); } .vp__files { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------ From Canva post screen (Run AN): the split carries the two columns */
.cpost { display: block; }
.cpost__left { position: sticky; top: 88px; display: block; }
.cpost__media .cpost__img, .cpost__media video { display: block; width: 100%; }
.cpost__when { max-width: 280px; }
@media (max-width: 640px) { .cpost__left { position: static; } .cpost__when { max-width: none; } }

/* ------------------------------------------------ the Canva picker (Run AN): tiles, and the picked design in a dialog */
.canva-door__lead { margin: 0 0 var(--space-3); }
.canva-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.canva-tile { padding: var(--space-2); gap: var(--space-1); border-radius: var(--radius-sm); }
.canva-tile img, .canva-tile__blank { aspect-ratio: 4 / 5; object-fit: contain; border-radius: 6px; background: var(--surface-2); }
.canva-tile__title { font-size: var(--text-sm); }
.canva-tile__meta { font-size: var(--text-xs); }
.canva-dialog { width: min(720px, calc(100vw - 32px)); }
.canva-dialog__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.canva-dialog .canva-sheet__thumb { width: 100%; max-width: 220px; max-height: 300px; margin: 0; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.canva-choices { display: grid; gap: var(--space-2); }
.canva-choice { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); }
.canva-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-softer); }
.canva-choice__main { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.canva-choice__main input { margin-top: 3px; }
.canva-choice__t { display: block; font-weight: 600; font-size: var(--text-base); }
.canva-choice__s { display: block; color: var(--muted); font-size: var(--text-sm); }
.canva-choice__x { display: block; margin: var(--space-2) 0 0 calc(13px + var(--space-3)); }
.canva-choice__x select { max-width: 320px; }
.canva-choice .canva-pages { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; }
.canva-choice .canva-page { display: grid; gap: var(--space-1); font-size: var(--text-xs); width: 88px; }
.canva-choice .canva-page img { width: 88px; height: 110px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.canva-dialog__status { margin: 0 auto 0 0; align-self: center; }
@media (max-width: 640px) {
  .canva-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canva-dialog__body { grid-template-columns: minmax(0, 1fr); }
  .canva-dialog .canva-sheet__thumb { max-width: 160px; }
  .canva-dialog__status { flex-basis: 100%; }
}

/* ------------------------------------------------ the Design in Canva copy panel (Run AN) */
.cidea { background: rgba(20, 21, 26, 0.32); padding: var(--space-6) var(--space-4); }
.cidea__box.ui-dialog { width: min(640px, 100%); max-height: none; background: var(--surface); }
.cidea__rows { gap: 0; margin: var(--space-3) 0 0; }
.cidea__row { grid-template-columns: 140px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.cidea__label { grid-column: auto; padding-top: 2px; font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--muted); }
.cidea__text { font-size: var(--text-sm); line-height: 1.5; }
.cidea__status { margin: 0 auto 0 0; align-self: center; }
@media (max-width: 640px) {
  .cidea { padding: var(--space-4) 0 0; align-items: flex-end; }
  .cidea__box.ui-dialog { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .cidea__row { grid-template-columns: minmax(0, 1fr) auto; }
  .cidea__label { grid-column: 1 / -1; }
  .cidea__status { flex-basis: 100%; }
}
.ui-section > .ui-section__title { margin-bottom: var(--space-4); }
.ui-td { display: block; min-width: 0; }
td[data-num] > .ui-td { display: inline; }

/* ------------------------------------------------ the monthly report page (Run AN) */
.mr-notes, .mr-list { margin: var(--space-4) 0 0; padding-left: var(--space-5); }
.mr-notes li, .mr-list li { margin: 0 0 var(--space-2); line-height: 1.55; max-width: 80ch; }
.mr-times .ui-table-wrap { min-width: 0; }

/* ------------------------------------------------ Run AQ: words read aloud, and an audio preview inside a list row */
.ui-readout { margin: var(--space-3) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: 12px; background: var(--paper, #fff); font-size: var(--text-lg); line-height: 1.5; color: var(--ink); }
.ui-list__item audio { display: block; width: 100%; max-width: 320px; height: 36px; margin-top: var(--space-2); }

/* ------------------------------------------------ Run AS: a gallery to choose one artefact from (a live preview each) */
.ui-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; }
.ui-gallery__item { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.ui-gallery__item:hover { border-color: var(--muted); }
/* Run BA (BA10): the style AbbaAI recommends from the words typed. */
.ui-gallery__item.is-recommended { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ui-gallery__item[hidden] { display: none; }
.ui-gallery__item:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-gallery__item:has(.ui-gallery__radio:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ui-gallery__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-gallery__stage { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.ui-gallery__stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-gallery__still { object-fit: cover; }
.ui-gallery__name { margin: var(--space-1) 0 0; font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.ui-gallery__meta { margin: 0; font-size: var(--text-xs); line-height: 1.4; color: var(--muted); }
.ui-gallery__stage--choose { display: flex; align-items: center; justify-content: center; padding: var(--space-4); text-align: center; color: var(--ink-soft); font-size: var(--text-sm); }
.ui-gallery__stage--choose > * { position: static; width: auto; height: auto; }
@media (max-width: 640px) { .ui-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }

/* ------------------------------------------------ Run AS: numbered steps inside a section, and a More options disclosure */
.ui-step__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: var(--space-2); border-radius: 999px; background: var(--ink); color: var(--surface); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 2px; }
.ui-step__hint { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); line-height: 1.45; max-width: 70ch; }
.ui-step--waiting .ui-step__n { background: var(--line); color: var(--ink-soft); }
.ui-options { margin: 0 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ui-options > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; font-weight: 700; }
.ui-options > summary::-webkit-details-marker { display: none; }
.ui-options > summary::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 700; }
.ui-options[open] > summary::after { content: '\2212'; }
.ui-options__now { font-weight: 400; color: var(--muted); font-size: var(--text-sm); }
.ui-options__body { padding: 0 var(--space-4) var(--space-3); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .ui-options > summary { padding: var(--space-3); } .ui-options__body { padding: 0 var(--space-3) var(--space-3); } }

/* ------------------------------------------------ Run AS: the scene editor (a strip of pictures, the preview stage) */
.me-scene__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); }
.me-scene__head .ui-group__title { margin: 0; }
.me-scene--removed { opacity: 0.45; }
.me-strip { display: flex; gap: var(--space-2); overflow-x: auto; padding: 0 0 var(--space-1); }
.me-strip__pic { position: relative; flex: 0 0 auto; width: 72px; height: 72px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--surface-2); }
.me-strip__pic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.me-strip__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-strip__pic:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.me-strip__pic:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.me-strip__none { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--text-xs); color: var(--muted); }
.me-stage { position: relative; width: 100%; max-height: 70vh; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); margin: 0 0 var(--space-2); }
.me-stage video, .me-stage .me-player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Form rows inside a side panel stack their label over the control (the panel is 320 px wide). */
.ui-panel .ui-row { display: block; }
.ui-panel .ui-row__label { display: block; margin: 0 0 var(--space-1); }
.ui-panel .ui-row__control { width: 100%; }
.ui-panel .ui-row__control .input, .ui-panel .ui-row__control .textarea { width: 100%; }
/* Run AS (AS8): a voice picker with its Play button on one row. */
.ui-voice-pick { display: flex; gap: var(--space-2); align-items: center; }
.ui-voice-pick .input { flex: 1 1 auto; min-width: 0; }
.ui-voice-pick .btn { flex: 0 0 auto; margin: 0; }
/* Run AT (AT1): the plain words plan's instant preview and delivery sample. */
.video-nl__preview { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.video-nl__preview audio { width: 100%; max-width: 420px; }
.video-nl__stage { position: relative; width: 100%; max-width: 560px; max-height: 60vh; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.video-nl__stage .me-player { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Run AT (AT2): the media drawer. A wide dialog on desktop, a bottom sheet at phone width (the dialog rule below). */
.ui-drawer { width: min(960px, calc(100vw - 32px)); }
.ui-drawer .ui-row { display: block; }
.ui-drawer .ui-row__label { display: block; margin: 0 0 var(--space-1); }
.ui-drawer__tabs { padding: var(--space-3) var(--space-5) 0; }
.ui-drawer__body { min-height: 320px; }
.ui-drawer__cat { width: auto; min-width: 160px; margin: 0; }
.ui-drawer__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.ui-drawer__pick { position: relative; display: block; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; }
.ui-drawer__pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-drawer__pick[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ui-drawer__pick:focus-visible { outline: 2px solid var(--accent-readable); outline-offset: 2px; }
.ui-drawer__credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px var(--space-1); background: rgba(20, 21, 26, 0.62); color: #ffffff; font-size: var(--text-xs); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ui-drawer__camera { position: relative; overflow: hidden; }
.ui-drawer__camera input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ui-drawer__adjust { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-4); align-items: start; }
.ui-drawer__frame { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); touch-action: none; user-select: none; }
.ui-drawer__frame img { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: contain; pointer-events: none; }
.ui-drawer__focus { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(20, 21, 26, 0.55); pointer-events: none; }
.ui-drawer__crop { position: absolute; border: 2px solid #ffffff; box-shadow: 0 0 0 9999px rgba(20, 21, 26, 0.45); pointer-events: none; }
.me-photos { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.me-photo { display: flex; flex-direction: column; gap: var(--space-1); width: 120px; }
.me-photo__img { width: 120px; height: 120px; border: 1px solid var(--line); border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.me-photo__acts { display: flex; gap: var(--space-1); }
.me-photo__acts .btn { flex: 1 1 auto; padding: 0 var(--space-2); }
.me-add { display: flex; justify-content: flex-start; margin: 0 0 var(--space-4); }
@media (max-width: 640px) {
  .ui-drawer { width: 100vw; max-width: 100vw; }
  .ui-drawer__tabs { padding: var(--space-3) var(--space-4) 0; }
  .ui-drawer__tabs .ui-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-drawer__adjust { grid-template-columns: minmax(0, 1fr); }
  .ui-drawer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .me-photo, .me-photo__img { width: 96px; }
  .me-photo__img { height: 96px; }
}
/* Run AT (AT3): the music picker: the chosen track in a form row, and the dialog's rows (play, name and meta, waveform, actions). */
.ui-music { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-music__now { flex: 1 1 160px; min-width: 0; color: var(--ink); font-size: var(--text-sm); }
.ui-music__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ui-music__row { display: grid; grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.ui-music__row[aria-current="true"] .ui-music__name { color: var(--accent-readable); }
.ui-music__play { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.ui-music__play[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.ui-music__meta { display: flex; flex-direction: column; min-width: 0; }
.ui-music__name { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-music__sub { color: var(--muted); font-size: var(--text-xs); }
.ui-music__wave { position: relative; height: 40px; border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; cursor: pointer; }
.ui-music__wave img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0.55; }
.ui-music__played { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); background: var(--accent-soft); pointer-events: none; }
.ui-music__played::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--accent); }
.ui-music__acts { display: flex; gap: var(--space-2); }
.ui-music__upload { margin: var(--space-4) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--line); }
.ui-music__upload > summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.ui-music__upload-body { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.me-levels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.me-levels input[type="range"] { width: 100%; }
@media (max-width: 640px) {
  .ui-music__row { grid-template-columns: 44px minmax(0, 1fr); }
  .ui-music__wave, .ui-music__acts { grid-column: 1 / -1; }
  .ui-music__acts .btn { flex: 1 1 auto; }
}
.mo-ideas { margin-top: var(--space-3); }
/* Run AT (AT4.2): the stages of a motion video being made, on its card in Approvals. */
.post-media__stages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); }
.post-media__stages li { padding: 2px var(--space-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); }
.post-media__stages li[data-state="now"] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.post-media__stages li[data-state="done"] { color: var(--ink-soft); background: var(--accent-softer); }
/* Run AT (AT5): the brand characters on the Freeform tab. */
.ff-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.ff-char { margin: 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ff-char img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-sm); }
.ff-char figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); font-size: var(--text-sm); }

/* Run BC (BC0, BC2): a post's state on its card (status chip, its detail, a link per platform, the platforms that refused it) and the
   approve row's reason and hold lines. */
.post-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.post-state__links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.post-state__fails { flex-basis: 100%; margin: 0; padding-left: var(--space-4); }
.approve-actions__held { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }

/* Run BC (BC6): the clip card's More choices: each choice a label with its hint on the line under it. */
.footage-choices form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.footage-choices__pick { display: flex; align-items: flex-start; gap: var(--space-2); }
.footage-choices__hint { display: block; margin-top: var(--space-1); font-size: 0.85rem; color: var(--muted); }

/* Run BF: choice chips (several can be on), the report dialog and its ways in. Phones first: the chips wrap, the dialog is the
   standard bottom sheet, every control is at least 36 px high. */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ui-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.ui-chip[aria-pressed="true"], .ui-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ui-chip input { margin: 0; }
.rep .ui-dialog__body { display: flex; flex-direction: column; gap: var(--space-3); }
.rep__about { margin: 0; font-size: var(--text-sm); }
.rep__reasons { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rep__label { display: block; margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.rep textarea { width: 100%; min-height: 88px; font: inherit; }
.rep__hint { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.rep__hint .btn { margin-left: var(--space-2); }
.rep__thumb { display: block; width: 100%; max-height: 220px; object-fit: contain; object-position: left top; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.rep__shot { display: flex; flex-direction: column; gap: var(--space-2); }
.rep__sends { font-size: var(--text-sm); color: var(--muted); }
.rep__sends summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); min-height: 36px; display: flex; align-items: center; }
.rep__sends ul { margin: 0; padding-left: var(--space-5); }
.rep-tell { display: inline-flex; align-items: center; min-height: 36px; margin: var(--space-1) 0 0 var(--space-2); padding: 0 var(--space-2); border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rep-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.rep-under { margin: var(--space-3) 0 0; }
.rep-shot { display: block; max-width: 100%; max-height: 420px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rep-new__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
@media (max-width: 640px) {
  .rep-tell { margin-left: 0; }
}

/* Run TV1: Learn. A list row with a 16:9 poster before its words, the player, the placeholder poster for a video not
   recorded yet, and the Watch how link under a page's description. Tokens only. */
.ui-list__item--media { grid-template-columns: 160px minmax(0, 1fr) auto; align-items: start; }
.ui-list__media { width: 160px; }
.ui-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.ui-player__video { display: block; width: 100%; height: 100%; background: var(--ink); }
.ui-player__wait { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.learn-media { display: block; text-decoration: none; }
.learn-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.learn-ph { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1); width: 100%; aspect-ratio: 16 / 9; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); }
.learn-ph__n { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--accent-readable); font-variant-numeric: tabular-nums; }
.learn-ph__t { font-size: var(--text-xs); font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.learn-ph--stage { display: block; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border: 0; border-radius: 0; }
.learn-ph--stage .learn-ph { height: 100%; aspect-ratio: auto; padding: var(--space-5); border: 0; border-radius: 0; }
.learn-ph--stage .learn-ph__n { font-size: var(--text-2xl); }
.learn-ph--stage .learn-ph__t { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.learn-wait { display: block; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--surface); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); }
.learn-sum, .learn-words, .learn-ask { margin: var(--space-1) 0 0; max-width: 64ch; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-soft); }
.learn-at { display: inline-block; min-width: var(--space-7); color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
[data-learn-chapter][aria-current="true"] .ui-list__name { color: var(--accent-readable); }
[data-learn-chapter][aria-current="true"] { background: var(--accent-softer); }
.learn-watch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.learn-watch a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-6); font-weight: 700; color: var(--accent-readable); text-decoration: none; }
.learn-watch a:hover { text-decoration: underline; }
.learn-watch__meta { color: var(--muted); }
@media (max-width: 640px) {
  .ui-list__item--media { grid-template-columns: 112px minmax(0, 1fr); }
  .ui-list__media { width: 112px; }
  .ui-list__item--media .ui-list__actions { grid-column: 1 / -1; }
  .learn-ph { padding: var(--space-2); }
  .learn-ph__t { display: none; }
  .learn-ph--stage .learn-ph__t { display: block; }
}

/* Run BH: the photo uploader (every photograph its own row with a bar, Retry on a failure) and the photo grid (an intentional grid of
   pictures, the artefacts themselves, with choose mode and a bar of actions for many at once). Phones first. */
.ui-upload { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-upload [hidden], .ui-photos__bulk[hidden], .ui-photos__bulk [hidden] { display: none !important; }
.ui-upload__drop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; }
.ui-upload__drop.is-over { border-color: var(--accent); background: var(--accent-softer); }
.ui-upload__drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ui-upload__title { font-weight: 700; color: var(--ink); }
.ui-upload__hint { font-size: var(--text-sm); color: var(--muted); max-width: 64ch; }
.ui-upload__button { pointer-events: none; }
.ui-upload__summary { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.ui-upload__list:empty { display: none; }
.ui-upload__item .ui-list__name { overflow-wrap: anywhere; }
.ui-upload__bar { display: block; max-width: 360px; margin-top: var(--space-1); }
.ui-upload__item[data-pu-state="failed"] .ui-upload__state { color: var(--warn); font-weight: 600; }
.ui-upload__item[data-pu-state="ready"] .ui-upload__state { color: var(--ok); font-weight: 600; }
.ui-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-3); }
.ui-photos__item { position: relative; margin: 0; }
.ui-photos__item img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-soft); }
.ui-photos__empty { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: var(--bg-soft); }
/* Run BH3B: the photo grid of the Photo library, dense like a phone's gallery: squares 4 px apart, no words under them (the description
   is the tile's name), a check that shows on hover and while selecting, a selected photo drawn smaller inside an accent ring. */
.ui-photos--dense { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-1); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ui-photos--dense .ui-photos__item { content-visibility: auto; contain-intrinsic-size: 112px 112px; }
.ui-photos__tile { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: var(--bg-soft); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; transition: transform 0.12s ease; }
.ui-photos__tile img { border-radius: 0; pointer-events: none; }
.ui-photos__tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ui-photos__check { position: absolute; top: var(--space-1); left: var(--space-1); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); background: color-mix(in srgb, var(--ink) 30%, transparent); color: transparent; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity 0.12s ease; cursor: pointer; }
.ui-photos__item:hover .ui-photos__check, .ui-photos.is-selecting .ui-photos__check { opacity: 1; }
.ui-photos__item.is-selected .ui-photos__check { opacity: 1; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ui-photos__item.is-selected .ui-photos__tile { transform: scale(0.88); outline: 3px solid var(--accent); outline-offset: 0; }
.ui-photos.is-selecting .ui-photos__tile { cursor: default; }
.ui-photos__area { position: relative; min-height: 120px; }
.ui-photos__more { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--muted); }
.ui-photos__more[hidden] { display: none; }
.ui-photos__more .ui-skeleton__line { width: 120px; margin: 0; }
.ui-photos__box { position: absolute; z-index: 30; border: 1px solid var(--accent); background: var(--accent-softer); pointer-events: none; }
body.pl-boxing { user-select: none; -webkit-user-select: none; }
.ui-photos__dragchip { position: fixed; top: -100px; left: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--text-sm); }
.ui-photos__event { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.ui-photos__event .input { width: auto; min-width: 200px; margin: 0; }
/* Run BH3B: the selection bar, one row while selecting: Cancel, the count, Select all, then the actions. On a computer it takes the place
   of the app's top bar (fixed, so the grid never moves under a box being dragged); on a phone it sits at the bottom in place of the tab bar. */
.ui-selbar { position: fixed; top: 0; left: 0; right: 0; z-index: 400; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-5); min-height: 58px; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.ui-selbar[hidden] { display: none; }
.ui-selbar .btn { margin: 0; }
.ui-selbar__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-selbar__gap { flex: 1 1 auto; }
body.pl-busy .ui-selbar, body.pl-busy [data-album-nav] { opacity: 0.7; pointer-events: none; }
/* Run BH3B: the albums beside the grid (a strip above it on a phone): a cover, the name and the count, the open one marked. */
.ui-albums { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); max-height: calc(100vh - 104px); overflow-y: auto; }
.ui-albums__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); }
.ui-albums__head .ui-panel__title { margin: 0; font-family: var(--font); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ui-albums__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ui-albums__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; min-height: 44px; }
.ui-albums__row:hover { background: var(--accent-softer); text-decoration: none; }
.ui-albums__row[aria-current="page"] { background: var(--surface-2); font-weight: 700; }
.ui-albums__row.is-over { background: var(--accent-softer); outline: 2px solid var(--accent); }
.ui-albums__row img, .ui-albums__blank { display: block; width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-soft); }
.ui-albums__blank--all { background: var(--surface-2); border: 1px solid var(--line); }
.ui-albums__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.ui-albums__n { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-albums__label { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ui-albums__hint { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--muted); }
/* Run BH3B: the short searchable list of albums (Add to album, Merge into): New album first, then each album as a row. */
.ui-pick { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-height: 320px; overflow-y: auto; border-top: 1px solid var(--line); }
.ui-pick__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--line); cursor: pointer; min-height: 44px; }
.ui-pick__item[aria-selected="true"], .ui-pick__item:hover { background: var(--accent-softer); }
.ui-pick__item--new .ui-pick__name { font-weight: 700; color: var(--accent-readable); }
.ui-pick__name { overflow-wrap: anywhere; }
.ui-pick__meta, .ui-pick__hint { font-size: var(--text-xs); color: var(--muted); }
.ui-pick__hint { margin: var(--space-2) 0 0; }
.ui-viewer__img { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-sm); background: var(--bg-soft); }
.ui-viewer__label { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }
.ui-suggest__covers { display: flex; gap: 2px; }
.ui-suggest__covers img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.ui-list__item--media .ui-list__media .ui-suggest__covers { width: auto; }
/* Run BH3B: the line after an action, with Undo, at the bottom of the window. */
.ui-toast { position: fixed; left: 50%; bottom: var(--space-5); z-index: 80; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-3); max-width: min(560px, calc(100vw - 32px)); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
.ui-toast[hidden] { display: none; }
.ui-toast .btn { margin: 0; color: var(--accent); border-color: transparent; background: transparent; }
.ui-upload--page { margin: 0 0 var(--space-4); }
.ui-upload--page .ui-upload__summary[hidden] + .ui-upload__list:empty { display: none; }
[data-photo-library].is-over { outline: 3px dashed var(--accent); outline-offset: -6px; }
@media (max-width: 640px) {
  .ui-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .ui-photos--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .ui-photos--dense .ui-photos__item { contain-intrinsic-size: 88px 88px; }
  .ui-photos__check { width: 20px; height: 20px; }
  [data-photo-library] .ui-split__aside { order: -1; }
  .ui-albums { max-height: none; overflow: visible; }
  [data-suggestions] .ui-list__item--media { grid-template-columns: minmax(0, 1fr); }
  [data-suggestions] > li:nth-child(n+2) { display: none; }
  .ui-suggest__covers img { width: 40px; height: 40px; }
  .ui-albums { padding: var(--space-3) 0 var(--space-3) var(--space-3); border-radius: var(--radius); }
  .ui-albums__list { flex-direction: row; overflow-x: auto; gap: var(--space-2); padding-right: var(--space-3); scrollbar-width: none; }
  .ui-albums__list + .ui-albums__label { margin-top: var(--space-3); }
  .ui-albums__list > li { flex: 0 0 auto; }
  .ui-albums__name { overflow: visible; }
  .ui-albums__row { grid-template-columns: 28px auto auto; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: nowrap; min-height: 40px; }
  .ui-albums__row img, .ui-albums__blank { width: 28px; height: 28px; }
  .ui-albums__hint { display: none; }
  .ui-selbar { top: auto; bottom: 0; min-height: 0; border-bottom: 0; border-top: 1px solid var(--line); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .ui-selbar__gap { flex-basis: 100%; height: 0; }
  .ui-selbar [data-pl-add] { flex: 1 1 auto; }
  body.pl-selecting .tabbar, body.pl-selecting .fab { display: none; }
  body.pl-selecting .ui-toast { bottom: 120px; }
  .ui-toast { bottom: 88px; left: var(--space-4); right: var(--space-4); max-width: none; transform: none; justify-content: space-between; }
  .ui-photos__event { flex-wrap: wrap; }
  .ui-photos__event .input { width: 100%; }
}

/* Run BH (BH2): the error page, inside the app's frame or under the AbbaAI header: the explanation, the reference, then the actions
   on one row (full width on a phone). */
.ui-errorpage { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-errorpage__body { margin: 0; font-size: var(--text-base); color: var(--ink); max-width: 64ch; }
.ui-errorpage__detail { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.ui-errorpage__ref { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.ui-errorpage__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 560px) { .ui-errorpage__actions .btn { flex: 1 1 100%; } }
/* Run BH: a section reached by its address (#your-photos) lands below the sticky top bar, not under it. */
.ui-section[id] { scroll-margin-top: 96px; }