/* Theme, part 6: the install prompt, category icons, Ask on the dashboard, the spending map, Ask layout and voice. Loaded in order by index.html; later parts override earlier ones. */
/* ---- Ask terminal: app/ask/term.css (shared Ask package) ---------------------------------------------------------- */

/* ---- installable app (pwa.js, dom.js showGate) ------------------------------------------------------------------- */
/* the gate (offline, signed out, sign-in stuck) replaces every section: no figures from earlier stay on screen */
body.gated main > section:not(#gate) { display: none !important; }
body.gated .tabbar, body.gated .ask-fab { display: none !important; }
.gate { display: flex; justify-content: center; padding: 12vh 1rem 2rem; }
.gate[hidden] { display: none; }
.gate-card { max-width: 30rem; text-align: center; display: grid; justify-items: center; gap: .6rem; }
.gate-card > .icon { width: 2.2rem; height: 2.2rem; color: var(--text-accent); }
.gate-card a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2rem; border-radius: var(--radius-md); background: var(--clay-500); color: var(--text-on-accent); text-decoration: none; font-weight: 600; }
.install-sheet h2 { display: flex; align-items: center; gap: .5rem; }
.install-steps { display: grid; gap: .8rem; padding: 0; margin: .8rem 0; list-style: none; }
.install-steps li { display: flex; align-items: center; gap: .6rem; line-height: 1.4; }
.install-steps .icon { vertical-align: -0.2em; }
.install-step-n { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--surface-sunken); font-weight: 700; }
#install-body .muted.small { margin-top: .5rem; }
/* the iOS steps also show on iPad, where the app otherwise keeps sheets for phones only */
.sheet.install-sheet, .sheet-backdrop.install-backdrop { display: block; }
.sheet.install-sheet { max-width: 34rem; margin: 0 auto; }
/* an installed app has no browser chrome above it: keep the header clear of the status bar. html.standalone (app/pwa.js) also
   covers the iOS and Android apps (native/), whose web view never matches display-mode: standalone. */
@media (display-mode: standalone) and (max-width: 700px), (display-mode: standalone) and (pointer: coarse) and (max-height: 500px) {
  header { padding-top: max(2px, env(safe-area-inset-top, 0px)); } /* the phone header's own top padding is 2px */
}
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  html.standalone header { padding-top: max(2px, env(safe-area-inset-top, 0px)); }
}

/* "Continue in Terminal" under the newest answer (ask.js) */
.ask-continue { margin: .25rem 0 .5rem; }

/* ---- category icons (categories.js, iconpicker.js) ------------------------------------------------------------------ */
.cat-icon { flex: none; width: 1em; height: 1em; color: var(--text-secondary); vertical-align: -.125em; }
button.link.cat { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
button.link.cat > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the icon chooser: a panel in the top layer (or at --z-picker without the Popover API); a bottom sheet on phones */
.icon-pop { position: fixed; z-index: var(--z-picker); inset: auto; top: 0; left: 0; margin: 0; padding: 0; box-sizing: border-box;
  display: flex; flex-direction: column; width: min(22rem, calc(100vw - 16px)); max-height: 420px; overflow: hidden;
  background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); animation: ns-scale-in var(--duration-fast) var(--ease-out) backwards; transform-origin: top left; }
.icon-pop .picker-search { padding: .2rem .75rem; }
.icon-pop:focus-within .picker-search { color: var(--text-secondary); }
.icon-pop-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem .35rem; }
.icon-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .25rem; padding: .5rem; }
.icon-cell { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); box-shadow: none; }
.icon-cell .icon { width: 1.2rem; height: 1.2rem; }
.icon-cell:hover, .icon-cell:focus-visible { background: var(--surface-hover); color: var(--text-primary); }
.icon-cell.is-selected { border-color: var(--border-accent); background: var(--surface-accent-soft); color: var(--text-accent); }
.icon-cell[hidden] { display: none; }
.icon-grid-empty { padding: .25rem .9rem .9rem; margin: 0; }
.icon-pop.sheet-mode { inset: auto 0 0 0; top: auto; left: 0; width: 100%; max-height: min(80vh, 40rem); border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: var(--safe-bottom); background: var(--surface-base);
  box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; }
.icon-pop.sheet-mode .icon-grid { grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); }
/* Rules > Categories: every category with its icon (press the icon to change it) */
.cat-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.cat-chip { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: 100%; padding: .15rem .6rem .15rem .2rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-sunken); }
.cat-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-chip .cat-kind { color: var(--text-muted); font-size: .8rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: var(--radius-pill); }
.icon-btn .icon { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .icon-pop, .icon-pop.sheet-mode { animation: none; } }

/* ---- Ask on the dashboard (dashask.js): answers in a section at the top ----------------------------------------------- */
.dash-ask-open { margin-left: auto; }
.dash-ask { margin: 0 0 1rem; padding: .85rem 1rem 1rem; animation: ns-scale-in var(--duration-fast) var(--ease-out) backwards; transform-origin: top center; }
.dash-ask-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.dash-ask-head h2 { margin: 0; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .4rem; }
.dash-ask-scope:empty, .dash-ask-status:empty { display: none; }
.dash-ask-actions { display: flex; gap: .75rem; margin-left: auto; }
.dash-ask.collapsed { padding-bottom: .85rem; }
.dash-ask-chips { justify-content: flex-start; margin: .65rem 0 .25rem; }
.dash-ask .chip.instant { display: inline-flex; align-items: center; gap: .35rem; }
.dash-ask .chip.instant .icon { width: .9em; height: .9em; color: var(--text-accent); }
.dash-ask .chip[disabled] { opacity: .55; cursor: default; }
.dash-ask-feed { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; min-width: 0; }
.dash-ask-empty { margin: .35rem 0; }
.dash-ask-turn { min-width: 0; scroll-margin-top: calc(var(--header-live, 0px) + 1rem); }
.dash-ask-turn > summary { display: block; cursor: pointer; padding: .55rem 0; list-style: none; color: var(--text-secondary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-ask-turn > summary::-webkit-details-marker { display: none; }
/* an earlier turn reads as one you can open again: a chevron that turns down when it is open */
.dash-ask-turn > summary::before { content: ''; display: inline-block; width: .42rem; height: .42rem; margin: 0 .6rem .12rem .1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--duration-fast) var(--ease-out); }
details.dash-ask-turn[open] > summary { color: var(--text-primary); }
details.dash-ask-turn[open] > summary::before { transform: rotate(45deg); }
@media (pointer: coarse) { .dash-ask-turn > summary { padding: .7rem 0; } }
.dash-ask-q { margin: .25rem 0 .35rem; }
.dash-ask-turn .msg.assistant { max-width: none; margin: 0; }
.dash-ask-deeper { justify-content: flex-start; align-items: center; margin-top: .5rem; }
.dash-ask-form { display: flex; gap: .5rem; margin-top: .75rem; }
.dash-ask-form input { flex: 1 1 auto; min-width: 0; }
/* the chart menu: "See transactions" / "Ask about this" at the click; a bottom action list on phones */
.chart-menu { position: fixed; z-index: var(--z-picker); display: flex; flex-direction: column; min-width: 12rem; padding: .3rem; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: ns-scale-in var(--duration-fast) var(--ease-out) backwards; }
.chart-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: .55rem; width: 100%; padding: .45rem .7rem; border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: var(--text-primary); text-align: left; font-weight: 500; }
.chart-menu-item:hover, .chart-menu-item:focus-visible { background: var(--surface-hover); }
.chart-menu-item .icon { width: 1rem; height: 1rem; color: var(--text-secondary); }
.chart-menu.as-sheet { left: 0; right: 0; bottom: 0; top: auto; min-width: 0; padding: .5rem max(.75rem, var(--safe-left)) calc(.5rem + var(--safe-bottom)) max(.75rem, var(--safe-right)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; background: var(--surface-base); box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; }
.chart-menu.as-sheet .chart-menu-item { min-height: var(--touch-min); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .dash-ask, .chart-menu, .chart-menu.as-sheet { animation: none; } }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .dash-ask-open { flex: none; min-width: 44px; min-height: 44px; margin-left: 0; padding: 0 .7rem; border-radius: var(--radius-pill); }
  #dash-ask { order: 0; margin: 0 0 .75rem; padding: .75rem .85rem .85rem; }
  #dashboard-body { order: 1; }
  .dash-ask-actions { gap: .5rem; }
  .dash-ask-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-right: -.85rem; padding-right: .85rem; }
  .dash-ask-chips::-webkit-scrollbar { display: none; }
  .dash-ask-chips .chip { flex: none; white-space: nowrap; min-height: 40px; }
  .dash-ask-turn, #dash-ask { scroll-margin-top: calc(var(--header-live, 0px) + 4.75rem); } /* under the sticky period row */
  .dash-ask-form input { font-size: 1rem; min-height: 44px; } /* 16px: iOS does not zoom */
}

/* ---- "Where the money was spent" (localemap.js) ---------------------------------------------------------------------- */
.locale-map-box { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.locale-map { display: block; width: 100%; height: auto; max-height: 26rem; }
.map-sphere { fill: var(--surface-sunken); }
.map-land path { fill: var(--surface-hover); stroke: var(--border-subtle); stroke-width: .5; }
.map-bubble { fill: var(--clay-500); fill-opacity: .55; stroke: var(--clay-500); stroke-width: 1.2; cursor: pointer; transition: fill-opacity var(--duration-fast) var(--ease-out); }
.map-bubble.level-region, .map-bubble.level-country { fill-opacity: .3; stroke-dasharray: 3 2; } /* placed at a region or country centre: less exact */
.map-bubble:hover, .map-bubble:focus-visible { fill-opacity: .85; outline: none; stroke-width: 2.5; }
.locale-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .15rem 1.25rem; margin: 0; padding: 0 0 0 1.25rem; }
.locale-top li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.locale-top li .link { min-height: 0; padding: .1rem 0; }
.locale-top li > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale-map-note, .locale-credit { margin: 0; }
.locale-credit { font-size: .72rem; }
.map-bubble.group { stroke-width: 2; } /* several nearby places: click to pick one */
.locale-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.locale-dates { display: flex; flex-wrap: wrap; gap: .5rem; }
.locale-dates input { min-width: 0; }
.locale-presets { justify-content: flex-start; margin: 0; }
.locale-time { display: flex; align-items: center; gap: .6rem; flex: 1 1 20rem; min-width: 0; }
.locale-slider { flex: 1 1 auto; min-width: 6rem; accent-color: var(--clay-500); }
.locale-slider-label { flex: none; white-space: nowrap; }
.locale-map-wrap { position: relative; min-width: 0; border-radius: var(--radius-md); overflow: hidden; }
.locale-map { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.locale-map.panning { cursor: grabbing; }
.locale-zoom { position: absolute; right: .5rem; top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.locale-zoom .icon-btn { background: var(--surface-raised); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }
.locale-story { margin-top: .5rem; padding: .85rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-sunken); }
.locale-story-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.locale-story-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; }
.locale-story-text { margin: .5rem 0 .25rem; line-height: var(--leading-relaxed); }
.locale-story-text.muted { font-style: italic; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .locale-time { flex-basis: 100%; }
  .locale-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .locale-presets .chip { flex: none; }
  .locale-zoom .icon-btn { width: 2.5rem; height: 2.5rem; }
}

/* ---- Ask, tightened (2026-10-06; SKIMS Ask's phone notes) -------------------------------------------------------------------
   One footer row per answer; on phones a one-row sheet header with an icon-only Close, a shorter hint, and list answers as
   two-line rows: [merchant ........ amount] / [date · category · place]. Breakdowns: [name ........ amount] / [n txns · share]. */
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin-top: .4rem; }
.msg-foot .badge.via { margin: 0; }
.msg-foot .link { min-height: 36px; font-size: .875rem; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .ask-sheet-head { padding-top: .5rem; padding-bottom: .4rem; }
  .ask-sheet-title { gap: .5rem; min-width: 0; }
  .ask-sheet-title h2 { font-size: 1.125rem; }
  .ask-sheet-title .badge { font-size: .75rem; padding: .15rem .5rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ask-sheet-actions { gap: .25rem; }
  .ask-sheet-actions .link { font-size: .9375rem; min-height: 40px; }
  #ask-sheet-close { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 999px; }
  #ask-sheet-close .icon { margin: 0; }
  .ask-hint { margin: 0 0 .5rem; font-size: .875rem; }
  .ask-empty .chips .chip, #ask-app .chips .chip { min-height: 40px; padding: .35rem .8rem; font-size: .875rem; }
  .msg .takeaway { margin-top: .5rem; padding: .45rem .7rem; font-size: .875rem; }
  /* dashboard Ask: one header row (New, then icon-only Collapse and Close) */
  .dash-ask-head { flex-wrap: nowrap; gap: .5rem; }
  .dash-ask-head .dash-ask-status { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-ask-head .dash-ask-scope { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-ask-actions { margin-left: auto; flex: none; gap: .1rem; }
  :is(#dash-ask-collapse, #dash-ask-close) { min-width: 40px; min-height: 40px; justify-content: center; }
  /* list answers */
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Merchant"]) tr { column-gap: .45rem; padding: .4rem 0; }
  :is(#ask-app, #dash-ask) table.stack td:is([data-label="Date"], [data-label="Merchant"], [data-label="Amount"], [data-label="Category"], [data-label="Account"], [data-label="Locale"])::before { display: none; }
  :is(#ask-app, #dash-ask) table.stack td[data-label="Merchant"] { order: 0; flex: 1 1 0; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Merchant"]) td[data-label="Amount"] { order: 1; flex: none; font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
  :is(#ask-app, #dash-ask) table.stack td[data-label="Date"] { order: 3; flex: none; display: inline; font-size: .8125rem; font-weight: 400; color: var(--text-secondary); }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Merchant"]) td:is([data-label="Category"], [data-label="Account"], [data-label="Locale"]) { order: 3; display: inline; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; color: var(--text-secondary); }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Merchant"]) td:is([data-label="Category"], [data-label="Account"], [data-label="Locale"])::before { display: inline; content: "· "; font-size: inherit; color: var(--text-muted); }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Merchant"]) td:empty { display: none; }
  /* breakdowns: the name on one line; the count and share without their labels */
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Txns"]) tr { column-gap: .45rem; padding: .4rem 0; }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Txns"]) td:first-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Txns"]) td[data-label="Txns"]::before { display: none; }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Txns"]) td[data-label="Txns"]::after { content: " txns"; color: var(--text-muted); }
  :is(#ask-app, #dash-ask) table.stack:has(td[data-label="Txns"]) td[data-label="Share"]::before { content: "· "; font-size: inherit; color: var(--text-muted); }
}


/* ---- Ask on wider screens: a reading column that fills the window (from SKIMS Ask, skm-appcatalog 2026-10-06) ---------
   The tab is a column at most 60rem wide that ends at the window's bottom (--ask-top: where it starts, set in app/ask.js),
   so only the conversation scrolls and the composer stays put without position: fixed. No box inside a box: the page is
   the conversation. Answer cards span the column; user bubbles end at the same edge. Tables hug their columns, numbers
   right-aligned in tabular mono, a sticky header, long tables scroll inside the card. The composer is the phone's pill. */
@media (min-width: 701px) and (min-height: 501px) {
  main:has(> #ask:not([hidden])) { padding-bottom: .75rem; }
  #ask:not([hidden]) { display: flex; flex-direction: column; max-width: 60rem; margin: 0 auto; height: calc(100vh - var(--ask-top, 9rem) - .75rem); height: calc(100dvh - var(--ask-top, 9rem) - .75rem); min-height: 26rem; }
  #ask .ask-head { flex: none; flex-wrap: nowrap; gap: .75rem; min-width: 0; margin: 0 0 .5rem; }
  #ask .ask-head h2 { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #ask .ask-head > :not(h2) { flex: none; white-space: nowrap; }
  #ask #ask-app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #ask .transcript { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: .25rem .25rem 1rem; gap: 1rem; background: none; border: 0; border-radius: 0; box-shadow: none; }
  #ask-app .msg { padding: .8rem 1rem; line-height: 1.55; }
  #ask-app .msg.user { max-width: 78%; border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md); }
  #ask-app .msg.assistant { align-self: stretch; width: auto; max-width: 100%; box-shadow: var(--inset-top); }
  #ask-app .ask-form { position: relative; flex: none; flex-wrap: nowrap; align-items: flex-end; gap: .4rem; margin: .5rem 0 0; padding: 6px 6px 6px 1rem; border-radius: 26px; background: var(--surface-raised); border: 1px solid var(--border-default); box-shadow: var(--shadow-md), var(--inset-top); }
  #ask-app .ask-form:focus-within { border-color: var(--focus-border); }
  #ask-app .ask-input-wrap { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; }
  #ask-app #ask-input { flex: 1; width: 100%; height: 42px; min-height: 42px; max-height: 168px; resize: none; padding: .55rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 1.45; overflow-y: hidden; } /* a scrollbar only once it is at its tallest (app/ask.js fitInput): one line was 0.4px over 42px, which drew one where scrollbars always show */
  #ask-app #ask-input:focus-visible { box-shadow: none; outline: none; }
  #ask-app #ask-send { flex: none; width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; justify-content: center; }
  #ask-app #ask-send .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  #ask-app #ask-send .icon { width: 1.2rem; height: 1.2rem; margin: 0; }
  #ask-app #ask-status { position: absolute; left: .75rem; bottom: calc(100% + .4rem); flex: none; order: 0; min-height: 0; max-width: calc(100% - 1.5rem); padding: .2rem .7rem; font-size: .8125rem; color: var(--text-primary); background: color-mix(in srgb, var(--surface-raised) 92%, transparent); border: 1px solid var(--border-default); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  #ask-app #ask-status:empty { display: none; }
  #ask-app .palette { bottom: calc(100% + .6rem); left: -1rem; right: -3.5rem; max-height: min(45vh, 22rem); z-index: 30; border-radius: var(--radius-md); }
  #ask-app .md-table { width: fit-content; max-width: 100%; max-height: 22.5rem; overflow: auto; margin: .6rem 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
  #ask-app .md-table table { width: auto; min-width: min(100%, 26rem); border-collapse: separate; border-spacing: 0; font-size: .875rem; }
  #ask-app .md-table th { position: sticky; top: 0; z-index: 1; padding: .45rem .75rem; background: var(--surface-sunken); border-bottom: 1px solid var(--border-default); color: var(--text-muted); font: 600 .6875rem/1.3 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; text-align: left; white-space: nowrap; }
  #ask-app .md-table th.num { text-align: right; }
  #ask-app .md-table td { padding: .3rem .75rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
  #ask-app .md-table tbody tr:last-child td { border-bottom: 0; }
  #ask-app .md-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text-primary) 2.5%, transparent); }
  #ask-app .md-table tbody tr:hover td { background: var(--surface-hover); }
  #ask-app .md-table td.num { font-size: .8125rem; }
  #ask-app .ask-body .chart { margin: .5rem 0 .75rem; }
  /* the popup (other screens): the same reading column inside it, no box inside its box */
  .ask-sheet-body #ask-app { width: 100%; max-width: 60rem; margin: 0 auto; }
  .ask-sheet-body .transcript { padding: .25rem .25rem 1rem; gap: 1rem; background: none; border: 0; border-radius: 0; box-shadow: none; }
}

/* ---- Voice Ask: Talk on the Ask tab, a mic in the composer, the call bar at the top of the conversation (app/voice.js) ---- */
.ask-talk[hidden], .ask-mic[hidden] { display: none; }
#ask .ask-head .ask-talk { margin-left: auto; }
.ask-talk.on-call { color: var(--pos-text); }
#ask-app .ask-mic { flex: none; align-self: flex-end; width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; border-radius: 50%; border: 0; background: transparent; box-shadow: none; color: var(--text-secondary); }
@media (hover: hover) { #ask-app .ask-mic:hover { color: var(--text-primary); background: var(--surface-hover); } }
#ask-app .ask-mic .icon { width: 1.2rem; height: 1.2rem; margin: 0; }
#ask-app .ask-mic.on-call { color: var(--text-on-accent); background: var(--pos-text); }
#ask-app .voice-mount:empty { display: none; }
#ask-app .voice-mount { flex: none; margin: 0 0 .5rem; }
/* The call bar off the Ask screens (app/voice.js placeBar): floating, so mute and end stay in reach */
body > .voice-mount.floating { position: fixed; z-index: 74; left: 50%; transform: translateX(-50%); bottom: 1rem; width: min(28rem, calc(100vw - 2rem)); }
body > .voice-mount.floating:empty { display: none; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) { #ask-app .ask-mic { width: 44px; height: 44px; min-height: 44px; } }
/* "What Ask remembers" (app/settings.js renderMemory) */
.memory-list { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.memory-list .badge { margin-left: .4rem; }
.memory-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }