/* console.css: the merchant hub and the bank console, in the customer app's own design.
 *
 * The colours, the type and the tile vocabulary are the phone's, loaded before this file
 * (`user/src/shell/phone-shell.css`, `user/src/ui/kit.css`). This file adds what a wide screen needs:
 * the rail, the header, a twelve-column Bento grid, the panel that slides in from the side, and the
 * pieces only a console draws (a ranked list, a funnel, a table, a form).
 *
 * THE RULES ARE THE PHONE'S.
 *   - A tile is read at a glance: one picture or one colour, one big number, a few words.
 *   - A colour means one thing everywhere. Mint: money that is measured. Amber: a clock running.
 *     Blue: a plan or a forecast. Coral: a risk, or something that needs fixing. Lavender: Ana
 *     suggesting. Inverse (black on light, white on dark): the one thing that needs you now.
 *   - Size says rank. One hero number a screen (84 px), a tile's number (40 px), a row's (17 px).
 *     A label is 13 px, a caption 12 px, and nothing is smaller.
 *   - Ink says weight. `--ink` is a fact, `--muted` is its caption, a tone's own ink sits on its tone.
 *   - Logical properties only, so both consoles mirror under `dir="rtl"`.
 */

:root {
  --cs-rail: 92px;
  --cs-gap: 16px;
  --cs-pad: 32px;
  --cs-max: 1480px;
  --cs-row: 148px;
  --chart-surface: var(--surface);
}

html, body { block-size: auto; min-block-size: 100%; }
/* The phone's stylesheet centres a device mock on a wide screen; a console is the screen. */
body { display: block; place-items: normal; padding: 0; background: var(--bg); min-block-size: 100dvh; overflow-x: clip; }

/* ---------------------------------------------------------------- the frame */

.cs { min-block-size: 100dvh; }
.cs-rail { position: fixed; inset-block: 16px; inset-inline-start: 16px; inline-size: var(--cs-rail); border-radius: 40px; background: var(--nav); color: var(--nav-ink); display: flex; flex-direction: column; align-items: center; padding: 12px 6px; gap: 6px; z-index: 30; }
.cs-brand { inline-size: 56px; block-size: 56px; border-radius: 22px; display: grid; place-items: center; font: 700 19px var(--display); letter-spacing: -0.04em; color: var(--nav-on); flex: none; margin-block-end: 4px; }
.cs-brand i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--mint); display: inline-block; margin-inline-start: 2px; }
.cs-nav { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-block-size: 0; overflow-y: auto; scrollbar-width: none; align-items: center; }
.cs-nav::-webkit-scrollbar { display: none; }
.cs-nav a { inline-size: 80px; min-block-size: 64px; border-radius: 26px; display: grid; justify-items: center; align-content: center; gap: 4px; font: 600 12px/1.15 var(--text); color: var(--nav-ink); position: relative; text-align: center; padding: 8px 4px; transition: background 0.16s, color 0.16s; }
.cs-nav a .ico { inline-size: 24px; block-size: 24px; }
.cs-nav a:hover { color: var(--nav-on); }
.cs-nav a[aria-current="page"] { background: var(--nav-on); color: var(--nav-on-ink); }
.cs-nav a em { position: absolute; inset-block-start: 6px; inset-inline-end: 12px; min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: 10px; background: var(--coral); color: var(--coral-ink); font: 700 12px/20px var(--text); font-style: normal; }
.cs-orb { inline-size: 60px; block-size: 60px; border-radius: 50%; background: var(--lav); color: var(--lav-ink); display: grid; place-items: center; flex: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--lav) 22%, transparent); transition: transform 0.16s; }
.cs-orb:hover { transform: scale(1.06); }
.cs-orb .ico { inline-size: 26px; block-size: 26px; }
.cs-orb[aria-current="page"] { background: var(--nav-on); color: var(--nav-on-ink); box-shadow: none; }

.cs-main { margin-inline-start: calc(var(--cs-rail) + 16px); padding: 18px var(--cs-pad) 72px; }
.cs-main > .cs-fit { max-inline-size: var(--cs-max); margin-inline: auto; }
.cs-head { display: flex; align-items: center; gap: 16px; min-block-size: 76px; margin-block-end: 18px; }
.cs-where { min-inline-size: 0; }
.cs-where small { display: flex; align-items: center; gap: 8px; font: 600 13px var(--text); color: var(--muted); min-block-size: 20px; }
.cs-where small a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.cs-where small a:hover { color: var(--ink); }
.cs-where small .ico { inline-size: 14px; block-size: 14px; }
.cs-where h1 { margin: 0; font: 700 34px/1.1 var(--display); letter-spacing: -0.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[lang="ar"] .cs-where h1 { line-height: 1.35; }
.cs-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.cs-me { block-size: 52px; padding-inline: 6px 16px; border-radius: 26px; background: var(--surface); display: inline-flex; align-items: center; gap: 10px; text-align: start; max-inline-size: 260px; }
.cs-me .avatar { inline-size: 40px; block-size: 40px; border-radius: 50%; font-size: 14px; }
.cs-me span { min-inline-size: 0; line-height: 1.2; }
.cs-me b { display: block; font: 600 14px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-me small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-content:focus, .cs-content:focus-visible { outline: none; }

.cs-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.cs-layer > * { pointer-events: auto; }
.cs-layer .toast { position: fixed; inset-block-end: 28px; }
.cs-layer .sheet-wrap { position: fixed !important; }
.cs-layer .sheet:focus, .cs-layer .sheet:focus-visible { outline: none; }

/* A detail slides in from the end edge: the screen behind it stays where it was. */
@media (min-width: 900px) {
  .cs-layer .sheet { inset-inline: auto 0; inset-block: 0; inline-size: min(560px, 94vw); max-block-size: none; block-size: auto; border-radius: 0; border-start-start-radius: 40px; border-end-start-radius: 40px; transform: translateX(104%); box-shadow: -24px 0 70px rgba(0, 0, 0, 0.22); padding-block-end: 0; }
  .cs-layer .sheet.tall { block-size: auto; }
  .cs-layer .sheet.wide { inline-size: min(920px, 96vw); }
  [dir="rtl"] .cs-layer .sheet { transform: translateX(-104%); }
  [dir] .cs-layer .sheet-open .sheet { transform: none; }
  .cs-layer .sheet-grab { display: none; }
  .cs-layer .sheet-head { padding: 24px 16px 8px 28px; min-block-size: 72px; }
  [dir="rtl"] .cs-layer .sheet-head { padding: 24px 28px 8px 16px; }
  .cs-layer .sheet-head h2 { font-size: 26px; letter-spacing: -0.03em; }
  .cs-layer .sheet-body { padding: 8px 28px 28px; gap: 16px; }
  .cs-layer .sheet-foot { padding: 14px 28px 24px; }
}

/* ---------------------------------------------------------------- the grid */

.zone { margin: 28px 4px 12px; font-size: 13px; }
.cs-content > .zone:first-child, .cs-page > .zone:first-child { margin-block-start: 0; }
.cgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cs-gap); grid-auto-flow: row dense; }
.cgrid > * { min-inline-size: 0; }
.cgrid > .t { min-block-size: var(--cs-row); }
.s12 { grid-column: span 12; }
.s10 { grid-column: span 10; }
.s9 { grid-column: span 9; }
.s8 { grid-column: span 8; }
.s7 { grid-column: span 7; }
.s5 { grid-column: span 5; }
.cgrid > .s6 { grid-column: span 6; }
.cgrid > .s4 { grid-column: span 4; }
.cgrid > .s3 { grid-column: span 3; }
.cgrid > .s2 { grid-column: span 2; }
.r2 { grid-row: span 2; }
.r3 { grid-row: span 3; }
.r4 { grid-row: span 4; }
.cgrid > .r2 { min-block-size: calc(var(--cs-row) * 2 + var(--cs-gap)); }
.cgrid > .r3 { min-block-size: calc(var(--cs-row) * 3 + var(--cs-gap) * 2); }
.cgrid > .r4 { min-block-size: calc(var(--cs-row) * 4 + var(--cs-gap) * 3); }
.cgrid > .state, .cgrid > .skel { grid-column: 1 / -1; }
.cgrid > .state.s3, .cgrid > .skel.s3 { grid-column: span 3; }
.cgrid > .state.s4, .cgrid > .skel.s4 { grid-column: span 4; }
.cgrid > .state.s6, .cgrid > .skel.s6 { grid-column: span 6; }
.cgrid > .state.s8, .cgrid > .skel.s8 { grid-column: span 8; }
.t { border-radius: 32px; }
a.t, button.t { transition: transform 0.16s, box-shadow 0.16s; }
a.t:hover, button.t:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

/* ---------------------------------------------------------------- console tiles */

/* The hero: the one number this screen is about. */
.t-hero { padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 6px; }
.t-hero.split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; }
.t-hero .lbl { font-size: 14px; grid-column: 1; }
.t-hero .lbl .ico { inline-size: 18px; block-size: 18px; }
.t-hero .fig { grid-column: 1; align-self: end; min-inline-size: 0; }
.t-hero .big { font-size: clamp(54px, 6.2vw, 88px); letter-spacing: -0.05em; }
.t-hero .big .cur { font-size: 0.26em; vertical-align: 0.9em; margin-inline-end: 0.4em; }
[dir="rtl"] .t-hero .big .cur { margin-inline: 0.4em 0; }
.t-hero .un { font-size: 15px; margin-block-start: 10px; font-weight: 500; line-height: 1.4; }
.t-hero .foot { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-start: 14px; }
.t-hero .side { grid-column: 2; grid-row: 1 / -1; min-inline-size: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.t-hero .pic { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 46%; object-fit: cover; block-size: 100%; mask-image: linear-gradient(to left, #000 55%, transparent); }
[dir="rtl"] .t-hero .pic { mask-image: linear-gradient(to right, #000 55%, transparent); }
.t-hero > :not(.pic) { position: relative; z-index: 1; }

/* A number with a label: the tile most of a console is made of. */
.t-kpi { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.t-kpi .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.t-kpi .big { font-size: 40px; margin-block-start: auto; padding-block-start: 12px; overflow: hidden; text-overflow: ellipsis; }
.t-kpi.r2 .big { font-size: 56px; }
.t-kpi .un { font-size: 13px; font-weight: 500; line-height: 1.35; margin-block-start: 6px; }
.t-kpi.surf .un { color: var(--muted); }
.t-kpi .sparkline { margin-block-start: 10px; }
.t-kpi .chev { inline-size: 18px; block-size: 18px; opacity: 0.5; flex: none; }
.t-kpi .obj { position: absolute; inset-inline-end: -6px; inset-block-end: -8px; block-size: 96px; inline-size: auto; object-fit: contain; pointer-events: none; }
.t-kpi > :not(.obj) { position: relative; z-index: 1; }

/* A door: a picture or a colour that opens a place. */
.t-door { padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.t-door .ico.lead { inline-size: 28px; block-size: 28px; margin-block-end: auto; }
.t-door b { font: 600 20px/1.15 var(--display); letter-spacing: -0.02em; }
.t-door small { font-size: 13px; font-weight: 500; opacity: 0.8; }
.t-door .count { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; min-inline-size: 32px; block-size: 32px; padding-inline: 10px; border-radius: 16px; background: color-mix(in srgb, currentColor 14%, transparent); font: 700 15px/32px var(--display); text-align: center; }
.t-door .go { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; inline-size: 20px; block-size: 20px; opacity: 0.6; }
.t-photo .big { font-size: 30px; letter-spacing: -0.03em; white-space: normal; line-height: 1.05; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cgrid > .t-photo { block-size: auto; }
.t-photo .tx { inset-inline: 18px 16px; inset-block-end: 16px; }
.t-photo .tag, .t-photo .at { inset-block-start: 14px; inset-inline-start: 14px; }
.t-photo .who { font-size: 13.5px; }

.t-card { padding: 22px; display: flex; flex-direction: column; }
.t-card > h3 { font: 600 15px var(--text); flex: none; }
.t-card > h3 + * { margin-block-start: 14px; }
.t-card > .grow { flex: 1 1 auto; min-block-size: 0; }
.t-card > .fill { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-block-size: 0; }
.t-list { padding: 8px 22px 10px; }
.t-list > h3 { padding-block: 14px 6px; font: 600 15px var(--text); }
.t-heads { border-radius: 28px; min-block-size: 76px; padding-inline: 14px 12px; gap: 14px; }
.cgrid > .t-heads { min-block-size: 76px; }
.t-heads .chipi { inline-size: 48px; block-size: 48px; border-radius: 18px; }
.t-heads .main b { font-size: 16px; }
.t-heads .main small { font-size: 13px; }
.t-heads .amt { font: 700 26px var(--display); letter-spacing: -0.03em; }

/* ---------------------------------------------------------------- atoms */

.delta { display: inline-flex; align-items: center; gap: 3px; block-size: 26px; padding-inline: 8px 10px; border-radius: 13px; font: 700 12.5px var(--text); white-space: nowrap; background: color-mix(in srgb, currentColor 12%, transparent); flex: none; }
.delta .ico { inline-size: 14px; block-size: 14px; stroke-width: 2.4; }
.delta.up { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.delta.down { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.delta .ico.fall { transform: rotate(90deg); }
[class*="tone-"] .delta { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }

.pill { display: inline-flex; align-items: center; gap: 6px; block-size: 26px; padding-inline: 10px; border-radius: 13px; font: 700 12px var(--text); white-space: nowrap; background: var(--surface2); color: var(--ink); flex: none; }
.pill::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; opacity: 0.75; }
.pill.plain::before { display: none; }
.pill.mint { background: var(--mint); color: var(--mint-ink); }
.pill.amber { background: var(--amber); color: var(--amber-ink); }
.pill.blue { background: var(--blue); color: var(--blue-ink); }
.pill.coral { background: var(--coral); color: var(--coral-ink); }
.pill.lav { background: var(--lav); color: var(--lav-ink); }
.pill.inv { background: var(--inv); color: var(--inv-ink); }
.pill.soft { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.pill .ico { inline-size: 14px; block-size: 14px; }

.held { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 600 13px var(--text); letter-spacing: 0; white-space: normal; line-height: 1.35; }
.held .ico { inline-size: 16px; block-size: 16px; flex: none; }
[class*="tone-"] .held { color: inherit; opacity: 0.8; }
.big .held { font-size: 15px; font-weight: 600; max-inline-size: 26ch; }
.t-hero .big .held { font-size: 17px; max-inline-size: 34ch; }

.avatar.round { border-radius: 50%; }
.avatar.tone-lav { background: var(--lav); color: var(--lav-ink); }
.avatar.tone-mint { background: var(--mint); color: var(--mint-ink); }
.avatar.tone-amber { background: var(--amber); color: var(--amber-ink); }
.avatar.tone-sky { background: var(--sky); color: var(--sky-ink); }
.avatar.tone-sand { background: var(--sand); color: var(--amber-ink); }
.avatar.tone-coral { background: var(--coral); color: var(--coral-ink); }

/* ---------------------------------------------------------------- ranked lists, funnels, tables */

/* A ranked list: each row is a picture, a name, a bar that says how much, and the figure. */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rank li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-block-size: 52px; padding-block: 6px; }
.rank li > a, .rank li > button { display: contents; }
.rank img, .rank .glyph { inline-size: 40px; block-size: 40px; border-radius: 14px; object-fit: cover; grid-row: span 2; }
.rank .glyph .ico { inline-size: 18px; block-size: 18px; }
.rank .pos { inline-size: 28px; font: 700 15px var(--display); color: var(--muted); text-align: center; grid-row: span 2; }
.rank b { font: 600 14.5px var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .val { font: 600 15px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.rank .bar { grid-column: 2 / -1; block-size: 6px; }
.rank small { font-size: 12px; color: var(--muted); }

/* Stages that narrow: each is a bar as wide as its share of the first. */
.funnel { display: grid; gap: 10px; }
.funnel .stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.funnel .stage b { font: 600 13px var(--text); }
.funnel .stage .val { font: 700 20px var(--display); letter-spacing: -0.02em; }
.funnel .stage .barw { grid-column: 1 / -1; block-size: 14px; border-radius: 7px; background: color-mix(in srgb, currentColor 10%, transparent); overflow: hidden; }
.funnel .stage .barw i { display: block; block-size: 100%; border-radius: 7px; background: currentColor; inline-size: calc(var(--p, 0) * 1%); min-inline-size: 6px; }
.funnel .stage small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

.donut { position: relative; display: grid; place-items: center; }
.donut svg { inline-size: 100%; block-size: auto; transform: rotate(-90deg); }
.donut .mid { position: absolute; text-align: center; line-height: 1.1; }
.donut .mid b { display: block; font: 700 30px var(--display); letter-spacing: -0.03em; }
.donut .mid small { font-size: 12px; color: var(--muted); font-weight: 600; }

.dist { display: grid; gap: 8px; }
.dist .rowd { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.dist .rowd b { font-weight: 600; white-space: nowrap; }
.dist .rowd .val { font: 600 13.5px var(--display); font-variant-numeric: tabular-nums; }
.dist .bar { block-size: 10px; border-radius: 5px; }
.dist .bar > i { border-radius: 5px; }

/* A table is the last resort, for rows a person compares by column. It is quiet: no rules but one. */
.tbl { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: start; font: 600 12px var(--text); color: var(--muted); padding: 8px 10px; white-space: nowrap; }
.tbl td { padding: 12px 10px; border-block-start: 1px solid var(--line); vertical-align: middle; }
.tbl td.n, .tbl th.n { text-align: end; font-variant-numeric: tabular-nums; }
.tbl td.n { font-family: var(--display); font-weight: 600; }
.tbl td b { font-weight: 600; }
.tbl td small { display: block; font-size: 12px; color: var(--muted); }
.tbl tr.act { cursor: pointer; }
.tbl tr.act:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tbl .cellp { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.tbl .cellp img, .tbl .cellp .glyph { inline-size: 36px; block-size: 36px; border-radius: 12px; object-fit: cover; flex: none; }
.tblwrap { overflow-x: auto; margin-inline: -10px; }

/* The life of a thing, as steps on a line. */
.life { list-style: none; margin: 0; padding: 0; display: grid; }
.life li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 12px; padding-block-end: 18px; position: relative; }
.life li::before { content: ""; position: absolute; inset-inline-start: 13px; inset-block: 26px 0; inline-size: 2px; background: var(--line); }
.life li:last-child { padding-block-end: 0; }
.life li:last-child::before { display: none; }
.life .mark { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--muted); }
.life .mark .ico { inline-size: 15px; block-size: 15px; stroke-width: 2.4; }
.life li.done .mark { background: var(--mint); color: var(--mint-ink); }
.life li.now .mark { background: var(--amber); color: var(--amber-ink); }
.life li.bad .mark { background: var(--coral); color: var(--coral-ink); }
.life b { font: 600 14.5px var(--text); display: block; }
.life small { font-size: 13px; color: var(--muted); display: block; line-height: 1.4; }
.life time { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.meter { display: grid; gap: 8px; }
.meter .track { position: relative; block-size: 12px; border-radius: 6px; background: linear-gradient(to right, var(--coral), var(--amber), var(--mint)); }
[dir="rtl"] .meter .track { background: linear-gradient(to left, var(--coral), var(--amber), var(--mint)); }
.meter .track i { position: absolute; inset-block: -5px; inset-inline-start: calc(var(--p, 0) * 1%); inline-size: 6px; margin-inline-start: -3px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 3px var(--surface); }
.meter .ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- forms */

.form { display: grid; gap: 14px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 6px; }
.fld > span { font: 600 13px var(--text); }
.fld > small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.fld > small.err { color: var(--bad); }
.inp { min-block-size: 50px; padding-inline: 16px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 0; font: inherit; inline-size: 100%; outline: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.sheet .inp, .t-card .inp { background: var(--surface2); box-shadow: none; }
.inp:focus-visible { box-shadow: inset 0 0 0 2px var(--violet); }
textarea.inp { padding-block: 14px; min-block-size: 110px; resize: vertical; line-height: 1.5; }
select.inp { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 40px; }
[dir="rtl"] select.inp { background-position: 16px 22px, 22px 22px; }
.field.search { min-block-size: 52px; border-radius: 26px; inline-size: min(360px, 34vw); }
.codebox { font: 600 30px var(--display); letter-spacing: 0.3em; text-align: center; }

/* ---------------------------------------------------------------- the conversation with Ana */

.ask { display: grid; gap: 16px; max-inline-size: 860px; margin-inline: auto; }
.ask .bubble { padding: 16px 20px; border-radius: 26px; font-size: 15.5px; line-height: 1.55; max-inline-size: 78%; }
.ask .bubble.me { justify-self: end; background: var(--inv); color: var(--inv-ink); border-end-end-radius: 8px; }
.ask .bubble.ana { justify-self: start; background: var(--lav); color: var(--lav-ink); border-end-start-radius: 8px; }
.ask .bubble.ana.refused { background: var(--surface); color: var(--ink); }
.ask .composer { position: sticky; inset-block-end: 20px; display: flex; gap: 8px; padding: 8px; border-radius: 34px; background: var(--surface); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14); }
.ask .composer input { flex: 1; min-inline-size: 0; block-size: 52px; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; padding-inline: 18px; outline: none; }
.ask .composer .btn { min-block-size: 52px; }

/* ---------------------------------------------------------------- the demo's controls */

.rig-list { display: grid; gap: 8px; }
.rig-item { display: flex; align-items: center; gap: 12px; min-block-size: 64px; padding: 8px 14px 8px 8px; border-radius: 22px; background: var(--surface); inline-size: 100%; text-align: start; }
.rig-item[aria-pressed="true"] { background: var(--inv); color: var(--inv-ink); }
.rig-item[aria-pressed="true"] small { color: inherit; opacity: 0.75; }
.rig-item .avatar, .rig-item img { inline-size: 48px; block-size: 48px; border-radius: 16px; object-fit: cover; flex: none; }
.rig-item b { display: block; font: 600 15px var(--text); }
.rig-item small { display: block; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 1180px) {
  :root { --cs-pad: 20px; }
  .cgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cgrid > .s12, .cgrid > .s10, .cgrid > .s9, .cgrid > .s8, .cgrid > .s7, .cgrid > .s6, .cgrid > .s5 { grid-column: span 6; }
  .cgrid > .s4, .cgrid > .s3 { grid-column: span 3; }
  .cgrid > .s2 { grid-column: span 2; }
  .t-hero.split { grid-template-columns: minmax(0, 1fr); }
  .t-hero.split .side { grid-column: 1; grid-row: auto; margin-block-start: 18px; }
}

@media (max-width: 899px) {
  .cs-rail { inset-block: auto 12px; inset-inline: 12px; inline-size: auto; block-size: 72px; flex-direction: row; padding: 6px 10px; border-radius: 36px; }
  .cs-brand { display: none; }
  .cs-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .cs-nav a { inline-size: 72px; min-block-size: 58px; }
  .cs-orb { inline-size: 54px; block-size: 54px; }
  .cs-main { margin-inline-start: 0; padding: 12px 16px 110px; }
  .cs-where h1 { font-size: 26px; }
  .cs-me > span:not(.avatar) { display: none; }
  .cs-me { padding-inline: 6px; }
  .cs-layer .toast { inset-block-end: 100px; }
}

@media (max-width: 640px) {
  .cgrid > .s4, .cgrid > .s2 { grid-column: span 6; }
  .cs-head { flex-wrap: wrap; row-gap: 10px; }
  .cs-tools { margin-inline-start: 0; inline-size: 100%; flex-wrap: wrap; }
  .cs-tools .seg { flex: 1 1 100%; order: 2; }
  .cs-tools .cs-me { margin-inline-start: auto; }
  /* Six places and the orb do not fit a phone with their names: the place you are in keeps its name. */
  .cs-nav { flex: 1 1 auto; justify-content: space-between; }
  .cs-nav { gap: 0; }
  .cs-nav a { inline-size: auto; flex: 1 1 0; min-inline-size: 36px; padding-inline: 4px; }
  .cs-nav a:not([aria-current="page"]) span { display: none; }
  .cs-nav a[aria-current="page"] { flex: 0 0 auto; padding-inline: 10px; }
  .cs-nav a em { inset-inline-end: 0; }
  .t-heads .main b { white-space: normal; }
  .form .two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  a.t, button.t, .cs-orb { transition: none; }
}