/*
 * The two AI dialogs -- the AI designer (session-designer.js) and AI edit (session-ai-edit.js) --
 * on the 2026 kit. Page CSS only: every control is a kit component (components.css, .tt-*); this
 * sheet lays the dialog out and draws the few pieces the kit has no class for (the drop zone, the
 * file rows, the edit-in-place values of the designer's review, the diff grammar of AI edit's
 * review). Source: design/pages/ai/parts/css.mjs, renamed so nothing collides with instructor.css:
 *   .ai-*  shared by both dialogs      .sd-*  the designer's review      .ae-*  AI edit
 * Token-only: no colour, size or type literal that is not a theme.css custom property. The phone
 * is `[data-layout='mobile']` (device-boot.js), where each dialog is a bottom sheet with 44px
 * targets and its footer stacked, the primary on top (the DOM keeps the desktop order).
 */

/* ===== the overlay and the dialog ===== */
.ai-overlay { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; align-items: flex-start; padding: 72px 24px 48px; background: var(--color-scrim); overflow: hidden; }
.ai-overlay--second { z-index: 160; align-items: center; padding: 24px; }
.ai-dialog { width: 860px; max-width: 100%; max-height: min(880px, 100%); flex: none; }
.ai-dialog--edit { width: 780px; }
.ai-overlay--second .tt-dialog { width: 440px; max-width: 100%; }
.ai-dialog .tt-dialog__head { align-items: flex-start; padding: 22px 20px 0 32px; }
.ai-dialog .tt-dialog__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 32px 28px; gap: 0; color: var(--color-ink); }
.ai-dialog .tt-dialog__body--working { display: flex; flex-direction: column; }
.ai-dialog .tt-dialog__foot { padding: 16px 32px 20px; border-top: var(--rule-hair); }
.ai-headings { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-head-tools { display: flex; align-items: center; gap: 12px; flex: none; }
.ai-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ai-sub { font: var(--text-body); color: var(--color-ink-2); padding-bottom: 22px; }
.ai-sub--tight { padding-bottom: 16px; }
.ai-form { display: flex; flex-direction: column; gap: 22px; }
.ai-divider { height: 1px; background: var(--color-rule); }
.ai-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.ai-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px 24px; }
.ai-field-head { display: flex; flex-direction: column; gap: 2px; }
.ai-field-head .tt-field__hint { color: var(--color-ink-2); }
.ai-banner { margin-bottom: 22px; }
.ai-banner .tt-banner__text { color: var(--color-ink); }
.ai-dialog .tt-textarea { resize: none; }
.ai-dialog .tt-textarea--2 { min-height: 56px; }
.ai-dialog .tt-textarea--3 { min-height: 76px; }
.ai-dialog .tt-textarea--4 { min-height: 96px; }
.ai-dialog .tt-textarea::placeholder, .ai-dialog .sd-edit::placeholder { color: var(--color-ink-3); }
.ai-dialog .tt-field__counter { padding-top: 0; }
/* a link drawn by a button (Keep all, Start a new brief, the fold): the kit's link look with no button chrome */
.ai-linkbtn { border: 0; padding: 0; background: transparent; font: var(--text-button-sm); }
/* the real control behind a kit check, radio or switch: present for the keyboard and the screen reader, drawn by the kit's box */
.ai-dialog .tt-check, .ai-dialog .tt-radio, .ai-dialog .tt-switch { position: relative; }
.ai-hidden { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.ai-dialog .tt-check:has(> .ai-hidden:focus-visible) .tt-check__box,
.ai-dialog .tt-radio:has(> .ai-hidden:focus-visible) .tt-radio__dot { box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
/* the native select inside the kit's select frame: the frame draws the edge and the caret, the control draws its text */
.ai-select { position: relative; }
.ai-select__native { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); appearance: none; -webkit-appearance: none; border: 0; border-radius: inherit; background: transparent none; color: inherit; font: inherit; padding: 0 44px 0 12px; cursor: pointer; outline: none; box-shadow: none; }
.ai-select .tt-select__caret { margin-left: auto; pointer-events: none; }
.ai-select:focus-within { border-color: var(--color-edge-strong); box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
/* a busy button keeps focus: the kit dims label and icon and shows the spinner; aria-disabled carries the state */
.ai-dialog .tt-btn[aria-disabled='true'] { pointer-events: none; }
.ai-dialog .tt-btn--secondary[aria-disabled='true'] { color: var(--color-ink-3); border-color: var(--color-rule); background: var(--color-hover); }
.ai-dialog .tt-btn.is-busy[aria-disabled='true'] { color: var(--color-primary-label); border-color: var(--color-primary); background: var(--color-primary); }

/* ===== the lead: material beside the first question ===== */
.ai-lead { display: grid; grid-template-columns: 372px 1fr; gap: 0 28px; align-items: start; }
.ai-lead__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ai-lead .tt-field__optional { font: var(--text-micro); color: var(--color-ink-3); }
.ai-drop { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px; border: 1px dashed var(--color-edge); border-radius: var(--radius-control); background: var(--color-input); color: var(--color-ink); font: var(--text-ui); cursor: pointer; text-align: left; width: 100%; }
.ai-drop--tall { min-height: 112px; }
.ai-drop--compact { min-height: 48px; padding: 8px 14px; }
.ai-drop:hover, .ai-drop.is-over { border-color: var(--color-edge-strong); background: var(--color-hover); }
.ai-drop__icon { color: var(--color-ink-2); flex: none; }
.ai-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-drop__hint { font: var(--text-body-sm); color: var(--color-ink-2); }
.ai-files { display: flex; flex-direction: column; }
.ai-files:empty { display: none; }
.ai-file { display: grid; grid-template-columns: 16px 1fr auto 32px; gap: 10px; align-items: center; min-height: 40px; padding: 2px 0; border-bottom: var(--rule-hair); }
.ai-file--busy .ai-file__name { color: var(--color-ink-2); }
.ai-file--failed { grid-template-columns: 16px 1fr 32px; align-items: start; padding: 8px 0; }
.ai-file--failed .ai-file__icon { color: var(--color-danger); margin-top: 3px; }
.ai-file__stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-file__reason { font: var(--text-body-sm); color: var(--color-danger); }
.ai-file__icon { color: var(--color-ink-2); }
.ai-file__name { font: var(--text-body); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-file__size { font: var(--text-body-sm); color: var(--color-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-file .tt-icon-btn { color: var(--color-ink-2); }
.ai-foot-note { font: var(--text-body-sm); color: var(--color-ink-2); margin-right: auto; max-width: 520px; }
.ai-foot-note--end { margin: 0 0 0 auto; text-align: right; max-width: 560px; }
.ai-foot-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ai-foot-right .ai-foot-note { margin: 0 8px 0 0; max-width: 360px; }
/* the formats: a two-column radio list */
.ai-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 6px; }
.ai-formats .tt-radio { min-height: 48px; padding: 7px 0; border-top: var(--rule-hair); }
.ai-formats .tt-radio:nth-child(-n+2) { border-top: 0; }
.ai-formats .tt-check__text { font: var(--text-ui); }

/* ===== Working: the orb, the stage line, the sweep ===== */
.ai-wk-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 40px 32px 56px; }
.ai-wk-orb { margin-bottom: 10px; color: var(--color-ink); }
.ai-wk-title { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); color: var(--color-ink); }
.ai-wk-stage { font: var(--text-body); color: var(--color-ink-2); transition: opacity 220ms ease; }
.ai-wk-stage[data-fading='true'] { opacity: 0; }
.ai-wk-hint { font: var(--text-body-sm); color: var(--color-ink-3); max-width: 440px; }
.ai-wk-sweep { position: relative; width: 320px; max-width: 100%; height: 4px; background: var(--color-meter-track); overflow: hidden; margin-top: 14px; }
.ai-wk-sweep__seg { width: 96px; height: 4px; background: var(--color-ink); transform: translateX(112px); }
@media (prefers-reduced-motion: no-preference) {
  .ai-wk-sweep__seg { animation: ai-sweep 1.8s ease-in-out infinite alternate; }
  @keyframes ai-sweep { from { transform: translateX(0); } to { transform: translateX(224px); } }
}

/* ===== the designer's Review: the draft read back as a document; every value wears the read-only field edge at rest ===== */
.sd-doc { display: flex; flex-direction: column; }
.sd-grow { display: grid; position: relative; width: 100%; }
.sd-grow::after { content: attr(data-value) ' '; white-space: pre-wrap; overflow-wrap: anywhere; visibility: hidden; }
.sd-grow::after, .sd-edit { grid-area: 1 / 1; min-height: 0; width: 100%; box-sizing: border-box; font: var(--text-body); letter-spacing: var(--tracking-body); padding: 6px 8px; border: 1px solid transparent; }
.sd-edit { display: block; resize: none; overflow: hidden; margin: 0; background: var(--color-input); color: var(--color-ink); border-color: var(--color-rule); border-radius: var(--radius-control); outline: none; }
.sd-edit:hover { border-color: var(--color-edge); }
.sd-edit:focus-visible { border-color: var(--color-edge-strong); box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
.sd-title, .sd-desc { margin-left: -9px; width: calc(100% + 18px); }
.sd-title::after, .sd-title .sd-edit { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); padding: 5px 8px; }
.sd-desc { margin-top: 6px; }
.sd-v--title::after, .sd-v--title .sd-edit { font: var(--text-button); letter-spacing: var(--tracking-button); }
/* the cap of a focused value ("88 of 2,000"): drawn over the row gap beneath it, so showing and hiding it never moves the rows (a click on the control below would otherwise land on a layout that shifted under the pointer) */
.sd-counter { display: none; position: absolute; right: 0; top: 100%; margin-top: 1px; font: var(--text-micro); color: var(--color-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.sd-cell { position: relative; }
.sd-cell:focus-within > .sd-counter, .sd-grow:focus-within + .sd-counter { display: block; }
.sd-doc__field { position: relative; display: flex; flex-direction: column; }
.sd-title + .sd-counter, .sd-desc + .sd-counter { right: -9px; }
.sd-notes { margin-top: 22px; }
.sd-notes .tt-banner__text { color: var(--color-ink); }
.sd-bullets { display: flex; flex-direction: column; margin-top: 4px; }
.sd-bullet { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; align-items: start; min-height: 24px; padding: 3px 0; font: var(--text-body-sm); color: var(--color-ink); }
.sd-bullet__dash { color: var(--color-ink-3); }
.sd-block { display: flex; flex-direction: column; margin-top: 26px; }
.sd-block > .tt-kicker { margin-bottom: 4px; }
.sd-rows { display: flex; flex-direction: column; }
.sd-row { display: grid; grid-template-columns: 150px 1fr; column-gap: 16px; padding: 7px 0; border-top: var(--rule-hair); align-items: start; }
.sd-row:first-child { border-top: 0; }
.sd-k { font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-2); padding-top: 10px; }
.sd-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sd-cell--stretch { align-items: stretch; }
.sd-cell .tt-switch { min-height: 32px; padding: 4px 0; }
.sd-cell .tt-check { padding: 4px 0; }
.sd-hint { font: var(--text-body-sm); color: var(--color-ink-2); }
.sd-list { display: flex; flex-direction: column; align-self: stretch; gap: 4px; }
.sd-item { display: grid; grid-template-columns: 14px 1fr 32px; column-gap: 6px; align-items: start; }
.sd-item__dash { font: var(--text-body); color: var(--color-ink-3); padding-top: 6px; }
.sd-item .tt-icon-btn { color: var(--color-ink-3); }
.sd-item:hover .tt-icon-btn, .sd-item:focus-within .tt-icon-btn { color: var(--color-ink); }
.sd-add { margin-top: 4px; }
.sd-topics { display: flex; flex-direction: column; border-top: var(--rule-hair); margin-top: 8px; }
.sd-topic { display: grid; grid-template-columns: 24px 1fr auto; column-gap: 12px; padding: 10px 0 12px; border-bottom: var(--rule-hair); align-items: start; }
.sd-topic__n { font: var(--text-kicker); color: var(--color-ink-3); font-variant-numeric: tabular-nums; padding-top: 7px; }
.sd-topic__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sd-topic__tools { display: flex; align-items: center; gap: 6px; padding-top: 1px; }
.sd-topic__tools .tt-icon-btn { color: var(--color-ink-3); }
.sd-topic:hover .sd-topic__tools .tt-icon-btn, .sd-topic:focus-within .sd-topic__tools .tt-icon-btn { color: var(--color-ink); }
.sd-add--topic { margin: 10px 0 0 36px; align-self: flex-start; }
.sd-sentence { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 10px; font: var(--text-body); color: var(--color-ink); min-height: 36px; }
.sd-sentence .tt-stepper__value { min-width: 56px; padding: 0; }
.sd-stepper__input { width: 56px; height: 100%; border: 0; background: transparent; text-align: center; font: var(--text-body); font-variant-numeric: tabular-nums; color: var(--color-ink); outline: none; -moz-appearance: textfield; appearance: textfield; }
.sd-stepper__input::-webkit-outer-spin-button, .sd-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sd-range { font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); }
.sd-files { display: flex; flex-direction: column; margin-bottom: 6px; }
.sd-files .ai-file { grid-template-columns: 16px 1fr auto; }
.sd-selects { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; align-self: stretch; }
.sd-selects--2 { grid-template-columns: 1fr 1fr; }

/* ===== AI edit · Ask ===== */
.ae-ideas { display: flex; flex-direction: column; gap: 12px; }
.ae-ideas__group { display: flex; flex-direction: column; gap: 8px; }
.ae-ideas__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ae-ideas__how { font: var(--text-body-sm); color: var(--color-ink-2); }
.ae-idea { cursor: pointer; color: var(--color-ink); text-align: left; }
.ae-idea .tt-chip__icon { color: var(--color-ink-2); }
.ae-idea:hover { border-color: var(--color-edge-strong); background: var(--color-hover); }
.ae-areas { display: flex; flex-direction: column; gap: 8px; }
.ae-areas__note { font: var(--text-body-sm); color: var(--color-ink-2); }
.ae-areas__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 24px; margin-top: 4px; }
.ae-areas__grid .tt-check { min-height: 48px; padding: 6px 0; }
.ae-areas__sum { font: var(--text-body-sm); color: var(--color-ink); }
.ae-cannot { font: var(--text-body-sm); color: var(--color-ink-2); max-width: 716px; padding-top: 2px; }
.ae-cannot--list { display: flex; flex-direction: column; gap: 2px; }
.ae-cannot--list .sd-bullets { margin-top: 2px; }
.ae-cannot--list .sd-bullet { min-height: 22px; color: var(--color-ink-2); }
.ae-kbd { display: flex; align-items: center; gap: 6px; font: var(--text-body-sm); color: var(--color-ink-3); margin-right: auto; }

/* ===== AI edit · Review: the thread as transcript turns, the changes as kept cards ===== */
.ae-th { display: flex; flex-direction: column; border-top: var(--rule-strong); border-bottom: var(--rule-hair); }
.ae-th-fold { display: flex; align-items: center; min-height: 36px; padding: 0 0 0 128px; border-bottom: var(--rule-hair); }
.ae-th-turn { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; padding: 12px 0 13px; border-top: var(--rule-hair); align-items: baseline; outline: none; }
.ae-th-turn:first-child, .ae-th-fold + .ae-th-turn { border-top: 0; }
.ae-th-turn__speaker { display: flex; align-items: center; gap: 6px; font: var(--text-kicker); color: var(--color-ink); white-space: nowrap; }
.ae-th-turn__speaker--you { color: var(--color-ink-2); }
.ae-th-turn__line { font: var(--text-reading); letter-spacing: var(--tracking-reading); color: var(--color-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ae-th-turn--asked .ae-th-turn__line { color: var(--color-ink-2); }
.ae-th-wait { display: flex; align-items: center; gap: 12px; padding: 12px 0 12px 128px; border-top: var(--rule-hair); font: var(--text-body); color: var(--color-ink-2); }
.ae-ch-head { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.ae-ch-head > .tt-kicker { flex: 1; outline: none; }
.ae-ch-key { display: flex; align-items: center; gap: 14px; margin-top: 8px; font: var(--text-note); letter-spacing: var(--tracking-note); color: var(--color-ink-3); flex-wrap: wrap; }
.ae-ch-key__ins { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--color-success); color: var(--color-ink-2); }
.ae-ch-key__del { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--color-danger); color: var(--color-ink-3); }
.ae-ch-list { display: flex; flex-direction: column; margin-top: 6px; border-bottom: var(--rule-hair); }
.ae-ch-list.is-inert { opacity: 0.55; }
.ae-ch { display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; padding: 12px 0 16px; border-top: var(--rule-hair); }
.ae-ch__keep { width: 32px; min-height: 32px; padding: 4px 0 4px 7px; gap: 0; align-self: start; }
.ae-ch__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ae-ch__title { display: flex; align-items: center; gap: 8px; min-height: 24px; font: var(--text-button); letter-spacing: var(--tracking-button); color: var(--color-ink); flex-wrap: wrap; }
.ae-ch__sep { color: var(--color-ink-3); font-weight: 400; }
.ae-ch__badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--color-edge); border-radius: var(--radius-control); font: var(--text-micro); color: var(--color-ink-2); }
.ae-ch__reason { font: var(--text-body-sm); color: var(--color-ink-2); }
.ae-ch__trim { font: var(--text-body-sm); color: var(--color-ink-2); }
.ae-ch__trim b { color: var(--color-warning); }
.ae-ch__diff { margin-top: 2px; padding: 8px 12px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); font: var(--text-body); color: var(--color-ink); }
.ae-ch__diff > * + * { margin-top: 6px; }
.ae-ch__was { font: var(--text-body-sm); color: var(--color-ink-3); }
.ae-ch__arrow { display: flex; align-items: center; gap: 10px; font: var(--text-body); color: var(--color-ink); }
.ae-ch__arrow .ae-ch__sep { color: var(--color-ink-2); }
.ae-ch__li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 3px 0; }
.ae-ch__li + .ae-ch__li { margin-top: 0; }
.ae-ch__tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--color-edge-strong); border-radius: var(--radius-control); font: var(--text-micro); color: var(--color-ink); white-space: nowrap; }
.ae-ch__tag--dim { border-color: var(--color-edge); color: var(--color-ink-2); }
.ae-ch__li-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ae-ch__li-title { font: var(--text-button); letter-spacing: var(--tracking-button); }
.ae-ch__li-title span { font-weight: 400; color: var(--color-ink-2); }
.ae-ch__li-note { font: var(--text-body-sm); color: var(--color-ink-2); padding: 4px 0 0; }
.ae-ch.is-dropped .ae-ch__title, .ae-ch.is-dropped .ae-ch__diff, .ae-ch.is-dropped .ae-ch__li-title { color: var(--color-ink-3); }
.ae-ch.is-dropped .ae-diff-ins { text-decoration-color: var(--color-ink-3); }
.ae-diff-text { white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.ae-diff-ins { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--color-success); }
.ae-diff-del { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--color-danger); color: var(--color-ink-3); }
.ae-diff-fold-row { display: flex; margin: -4px 0 2px; }
.ae-diff-fold { color: var(--color-ink-2); text-decoration-color: var(--color-ink-2); white-space: normal; }
.ae-left { margin-top: 22px; }
.ae-left .tt-banner__text { color: var(--color-ink); }
.ae-fu { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.ae-fu > .tt-kicker { margin-bottom: 2px; }
.ae-fu__row { display: flex; align-items: flex-end; gap: 8px; }
.ae-fu__row .tt-textarea { flex: 1; min-height: 56px; }

/* ===== the phone: a bottom sheet with 44px targets and stacked buttons ===== */
[data-layout='mobile'] .ai-overlay { align-items: flex-end; padding: 16px 0 0; }
[data-layout='mobile'] .ai-dialog { width: 100%; max-height: 92dvh; border-radius: var(--radius-overlay) var(--radius-overlay) 0 0; border-bottom: 0; }
[data-layout='mobile'] .ai-dialog .tt-dialog__steps { display: block; margin-bottom: 2px; }
[data-layout='mobile'] .ai-dialog .tt-dialog__head { padding: 18px 12px 0 16px; }
[data-layout='mobile'] .ai-dialog .tt-dialog__body { padding: 10px 16px 20px; }
[data-layout='mobile'] .ai-dialog .tt-dialog__foot { padding: 14px 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
[data-layout='mobile'] .ai-dialog .tt-dialog__foot > *, [data-layout='mobile'] .ai-dialog .tt-dialog__foot .ai-foot-right > * { grid-column: 1 / -1; }
[data-layout='mobile'] .ai-dialog .tt-dialog__foot .ai-foot-right { display: contents; }
[data-layout='mobile'] .ai-dialog .tt-dialog__foot .tt-btn--primary { grid-row: 1; }
[data-layout='mobile'] .ai-dialog .tt-dialog__foot .ai-foot-note, [data-layout='mobile'] .ai-dialog .tt-dialog__foot .ae-kbd { margin: 0; max-width: none; text-align: left; order: 9; grid-row: auto; }
[data-layout='mobile'] .ai-dialog .tt-dialog__foot .ai-foot-note--end { grid-row: 2; }
/* AI edit's Review footer: Back and Cancel share the row under the primary */
[data-layout='mobile'] .ai-dialog .ae-foot--review > .tt-btn--secondary { grid-column: 1; grid-row: 2; }
[data-layout='mobile'] .ai-dialog .ae-foot--review .ai-foot-right > .tt-btn--secondary { grid-column: 2; grid-row: 2; }
/* the confirmation is a sheet too */
[data-layout='mobile'] .ai-overlay--second { align-items: flex-end; padding: 16px 0 0; }
[data-layout='mobile'] .ai-overlay--second .tt-dialog { width: 100%; border-radius: var(--radius-overlay) var(--radius-overlay) 0 0; border-bottom: 0; }
[data-layout='mobile'] .ai-overlay--second .tt-dialog__foot { padding-bottom: 20px; }
[data-layout='mobile'] .ai-overlay--second .tt-btn { height: var(--size-control-phone); padding: 0 18px; font: var(--text-button-lg); }
/* the kit's .tt-phone helpers, keyed on the layout device-boot.js decided (as landing.css does) */
[data-layout='mobile'] .ai-dialog .tt-btn { height: var(--size-control-phone); padding: 0 18px; font: var(--text-button-lg); }
[data-layout='mobile'] .ai-dialog .tt-icon-btn { width: var(--size-control-phone); height: var(--size-control-phone); }
[data-layout='mobile'] .ai-dialog .tt-input, [data-layout='mobile'] .ai-dialog .tt-select { height: var(--size-control-phone); font: var(--text-body-lg); }
[data-layout='mobile'] .ai-dialog .tt-textarea, [data-layout='mobile'] .sd-edit, [data-layout='mobile'] .sd-grow::after { font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); }
[data-layout='mobile'] .ai-dialog .tt-seg { height: calc(var(--size-control-phone) + 2px); }
[data-layout='mobile'] .ai-dialog .tt-check, [data-layout='mobile'] .ai-dialog .tt-radio, [data-layout='mobile'] .ai-dialog .tt-switch { min-height: var(--size-control-phone); }
[data-layout='mobile'] .ai-dialog .tt-chip { white-space: normal; height: auto; min-height: var(--size-control-phone); padding: 8px 10px; line-height: 18px; }
[data-layout='mobile'] .ai-dialog .tt-link--action { min-height: var(--size-control-phone); }
[data-layout='mobile'] .ai-dialog .tt-stepper { height: calc(var(--size-control-phone) + 2px); }
[data-layout='mobile'] .ai-dialog .tt-stepper__btn { width: var(--size-control-phone); }
/* every target 44 on a phone: the edit-in-place values, the title and the keep boxes */
[data-layout='mobile'] .sd-grow::after, [data-layout='mobile'] .sd-edit { min-height: 44px; padding: 12px 10px; }
[data-layout='mobile'] .sd-title::after, [data-layout='mobile'] .sd-title .sd-edit { font: var(--text-title-md); letter-spacing: var(--tracking-title-md); padding: 9px 10px; }
[data-layout='mobile'] .sd-v--title::after, [data-layout='mobile'] .sd-v--title .sd-edit { font: var(--text-body-lg-strong); letter-spacing: var(--tracking-body-lg); }
[data-layout='mobile'] .ae-ch { grid-template-columns: 44px 1fr; column-gap: 4px; }
[data-layout='mobile'] .ae-ch__keep { width: 44px; min-height: 44px; padding: 13px 0 13px 13px; }
[data-layout='mobile'] .ai-form { gap: 18px; }
[data-layout='mobile'] .ai-lead { grid-template-columns: 1fr; row-gap: 20px; }
[data-layout='mobile'] .ai-lead .tt-field__label { flex-wrap: wrap; }
[data-layout='mobile'] .ai-lead .tt-field__optional { flex-basis: 100%; margin-top: 2px; }
[data-layout='mobile'] .ai-grid2, [data-layout='mobile'] .ai-grid3, [data-layout='mobile'] .ai-formats, [data-layout='mobile'] .sd-selects, [data-layout='mobile'] .ae-areas__grid { grid-template-columns: 1fr; }
[data-layout='mobile'] .ai-formats .tt-radio:nth-child(2) { border-top: var(--rule-hair); }
[data-layout='mobile'] .ai-drop { min-height: 44px; }
[data-layout='mobile'] .sd-row { grid-template-columns: 1fr; row-gap: 4px; }
[data-layout='mobile'] .sd-k { padding-top: 0; }
[data-layout='mobile'] .sd-sentence { grid-template-columns: 1fr; row-gap: 6px; }
[data-layout='mobile'] .sd-topic { grid-template-columns: 24px 1fr; row-gap: 8px; }
[data-layout='mobile'] .sd-topic__tools { grid-column: 2; padding-top: 0; }
[data-layout='mobile'] .ai-dialog .tt-kicker { flex-wrap: wrap; }
[data-layout='mobile'] .ai-dialog .tt-kicker__meta { flex-basis: 100%; white-space: normal; margin-top: 4px; }
[data-layout='mobile'] .ae-ideas__head { flex-direction: column; align-items: flex-start; gap: 2px; }
[data-layout='mobile'] .ae-th-fold { padding-left: 0; }
[data-layout='mobile'] .ae-th-turn { grid-template-columns: 1fr; row-gap: 4px; }
[data-layout='mobile'] .ae-th-wait { padding-left: 0; }
[data-layout='mobile'] .ae-ch-head { flex-wrap: wrap; }
[data-layout='mobile'] .ae-ch-key { gap: 6px 14px; }
[data-layout='mobile'] .ae-fu__row { flex-direction: column; align-items: stretch; }

/* ===== AI credits (js/ai-credits.js): what a run costs, and the packs when there is nothing left ===== */
/* The chip beside a run button: a hairline pill, unfilled, quieter than the buttons it sits by */
.ai-credit-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: var(--rule-hair); border-radius: 999px; font: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }
.ai-credit-chip.is-empty { color: var(--color-warning); border-color: currentColor; }
.ae-fu .ai-credit-chip { margin-top: 8px; width: max-content; max-width: 100%; }
/* The refusal: the kit's warning banner, with the packs as a row of buttons */
.ai-credits-out { margin-bottom: 16px; }
.ai-credits-out__packs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-credits-out__who { margin: 8px 0 0; font: var(--text-body-sm); color: var(--color-ink); }
.ai-credits-out__note { margin: 10px 0 0; font: var(--text-body-sm); color: var(--color-ink-2); }
.ai-credits-out__status:empty { display: none; }
.ai-credits-out__status { margin: 8px 0 0; font: var(--text-body-sm); color: var(--color-ink); }
[data-layout='mobile'] .ai-dialog .tt-dialog__foot .ai-credit-chip { justify-self: start; order: 8; grid-row: auto; }
[data-layout='mobile'] .ai-credits-out__packs { flex-direction: column; }
[data-layout='mobile'] .ai-credits-out__packs .tt-btn { width: 100%; }