/* oisin.eu: what this site adds to the investor deck's styles (deck.css): the top bar without tabs, the field switch
   above the demo, the closing slide, and the two dialogs with their forms. */

#svhProbe { position: fixed; left: 0; top: 0; width: 0; height: 100svh; visibility: hidden; pointer-events: none; }
.defs { position: absolute; }
.nowrap { white-space: nowrap; }

/* ---------- Top bar: the mark, the theme button and one button that appears once the opening has scrolled away ---------- */
.topbar .top-cta { position: absolute; right: calc(max(12px, env(safe-area-inset-right, 0px)) + 90px); font-size: 14px; padding: .55em 1.1em; transition: opacity .25s, transform .25s; }
.topbar .lang { top: auto; }
html[data-home] .topbar .top-cta { opacity: 0; pointer-events: none; transform: translateY(-4px); }
@media (max-width: 560px) {
  :root { --tb: calc(56px + env(safe-area-inset-top, 0px)); }
  .topbar { align-items: center; padding-bottom: 0; }
  .mark { top: auto; left: max(12px, env(safe-area-inset-left, 0px)); }
  .theme { display: grid; }
  .topbar .top-cta { font-size: 13px; padding: .5em .9em; right: calc(max(12px, env(safe-area-inset-right, 0px)) + 86px); }
  .topbar .lang { right: calc(max(12px, env(safe-area-inset-right, 0px)) + 42px); }
}
/* the gold button of the investor site (its rule sat in the investment tab's styles) */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font: 700 1em var(--font); color: var(--on-seal); background: var(--seal); border: 1px solid var(--seal); border-radius: 999px; padding: .7em 1.4em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .25s, border-color .25s; }
.cta:hover { box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--seal) 80%, #000); }
.cta:active { transform: scale(.97); }
.cta.ghost:hover { box-shadow: none; }
.cta:focus-visible, .textlink:focus-visible, .uc-tab:focus-visible { outline: 3px solid var(--seal); outline-offset: 3px; }
.textlink { display: inline; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--vault-line); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1.5px; cursor: pointer; border-radius: 4px; }
.textlink:hover { color: var(--ink); }

/* the three parties round the vault: when each one lunges (--d) and how far (--dx, --dy) */
.threats > g:nth-child(1) { --d: .3s; --dx: 22px; --dy: 0px; }
.threats > g:nth-child(2) { --d: 1.5s; --dx: -22px; --dy: 0px; }
.threats > g:nth-child(3) { --d: 2.7s; --dx: 0px; --dy: -14px; }

/* the drawing layer lies over the demo's controls on very large screens; only the closing slide's buttons take clicks */
#viz { pointer-events: none; }
#viz .today { pointer-events: auto; }

/* ---------- The field switch above the demo. It is part of the demo block and scales with it. ---------- */
.uc { display: flex; justify-content: center; margin: 0 0 16px; pointer-events: auto; }
.uc-list { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); max-width: 100%; }
.uc-tabs { display: inline-flex; gap: 4px; }
/* the action at the end of the switch: the reader's own field, which opens the form */
.uc-tab.uc-add { color: var(--seal-ink); background: color-mix(in srgb, var(--seal) 16%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--seal) 55%, transparent); margin-left: 6px; padding: 7px 16px; }
.uc-tab.uc-add:hover { color: var(--ink); background: color-mix(in srgb, var(--seal) 30%, var(--card)); border-color: var(--seal); }
.uc-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 14.5px var(--font); white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.uc-tab svg { width: 17px; height: 17px; flex: none; }
.uc-tab:hover { color: var(--ink); }
.uc-tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(23,38,58,.15); }
.uc-bar { display: none; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--vault-line) 25%, transparent); overflow: hidden; opacity: 0; transition: opacity .3s; }
.uc-tab[aria-selected="true"] .uc-bar { opacity: 1; }
.uc-bar i { display: block; height: 100%; width: 100%; background: var(--vault-line); transform: scaleX(0); transform-origin: 0 50%; }
.stacked .uc { margin-bottom: 12px; }
.stacked .uc-list { display: flex; flex-wrap: wrap; width: 100%; border-radius: 22px; }
.stacked .uc-tabs { display: flex; flex: 1 1 100%; }
.stacked .uc-tab { flex: 1 1 0; justify-content: center; min-width: 0; padding: 8px 6px; font-size: 13.5px; }
.stacked .uc-tab svg { display: none; }
.stacked .uc-tab.uc-add { flex: 1 1 100%; margin: 0; padding: 6px 10px; min-height: 38px; }
.stacked .uc-bar { left: 10px; right: 10px; }
:root[lang="de"] .stacked .uc-tab { font-size: 12px; padding-inline: 2px; letter-spacing: -0.01em; } /* "Buchhaltung" fits the 360 px row */
.paused .uc-bar i { animation: none; }
/* the chat follows its newest message; the attachment chip in the approval card */
.approval .chip.file { margin-top: 9px; font-weight: 600; color: var(--ink); background: var(--card); }
.approval .chip.file svg { width: 16px; height: 16px; }

/* the proof panel: a small Planned pill at the right of its title */
.cpanel h3 .pr-tag { margin-left: auto; font-size: 12.5px; padding: 3px 10px; letter-spacing: .01em; }
.cpanel.compact h3 .pr-tag { font-size: 11.5px; padding: 2px 8px; }
.cpanel.proof.compact .chead { max-width: none; }

/* the proof panel's three properties: equal rows in the deck's tile pattern (icon in a small square, the lines to its
   right), nothing numbered or ordered */
.cpanel.proof li { opacity: 1; }
.pr-props { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-props li { display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: center; padding: 5px 0; font-size: 16.5px; line-height: 1.25; font-weight: 600; }
.pr-sq { width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--seal) 16%, transparent); display: grid; place-items: center; }
.pr-sq .pr-ic { width: 22px; height: 22px; color: var(--seal-ink); display: block; }
.pr-props li em { display: block; font-style: normal; font-weight: 400; font-size: 13.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.cpanel.proof.compact .pr-props { gap: 2px; }
.cpanel.proof.compact .pr-props li { grid-template-columns: 30px 1fr; gap: 10px; padding: 3px 0; font-size: 14.5px; }
.cpanel.proof.compact .pr-sq { width: 30px; height: 30px; border-radius: 8px; } .cpanel.proof.compact .pr-sq .pr-ic { width: 17px; height: 17px; }
.cpanel.proof.compact .pr-props li em { display: none; }
/* the proof search: a faint tree, lit as the search walks it; the proof's nodes turn gold and a green tick lands on them */
.pt-edge { stroke: var(--vault-line); stroke-opacity: .2; stroke-width: 1; }
.pt-lit { stroke: var(--vault-line); stroke-width: 1.8; stroke-linecap: round; opacity: 0; transition: stroke .5s; }
/* the notation: texture at low contrast, the constellation's own labels brighten with it. The embedded sans has no
   mathematical symbols, so those fall back to the system's serif and symbol fonts. */
.pt-lab { font-family: "Schibsted Grotesk", "Cambria Math", Cambria, "STIX Two Math", "Apple Symbols", "Segoe UI Symbol", "Times New Roman", serif; fill: var(--ink); opacity: .38; transition: opacity .5s, fill .5s; pointer-events: none; }
.pr-tree.found .pt-lab.proof { fill: var(--seal-ink); opacity: 1; }
.pt-lab { text-anchor: middle; dominant-baseline: central; }
.pr-tree.found .pt-lit.proof { stroke: var(--seal); }
.pt-node { fill: var(--vault-line); stroke: var(--card); stroke-width: 1.2; opacity: .35; transform-box: fill-box; transform-origin: center; transition: fill .4s; }
.pr-tree.found .pt-node.proof { fill: var(--seal); }
.pt-halo { fill: none; stroke: var(--seal); stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pr-stamp { opacity: 0; } .pr-stamp > g { transform-box: fill-box; transform-origin: center; }
.pr-stamp-disc { fill: var(--ok); stroke: var(--card); stroke-width: 3; }
.pr-stamp-ring { fill: none; stroke: var(--ok); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pr-stamp-tick { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Closing slide: four facts, the two buttons, quiet links. Laid out in canvas units inside #viz. ---------- */
.today { position: absolute; opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 26px; will-change: transform, opacity; }
.td-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.today.stack .td-grid { grid-template-columns: 1fr; gap: 10px; }
.td { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px -18px rgba(23,38,58,.45); opacity: 0; }
.today.stack .td { padding: 12px 14px; grid-template-columns: 34px 1fr; gap: 11px; }
.td-ic { width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--vault-line) 12%, transparent); display: grid; place-items: center; }
.td-ic svg { width: 22px; height: 22px; }
.today.stack .td-ic { width: 34px; height: 34px; border-radius: 9px; } .today.stack .td-ic svg { width: 19px; height: 19px; }
.td > div > b { display: block; font-size: 16.5px; line-height: 1.25; }
.td > div > span { display: block; font-size: 14px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
.today.stack .td > div > b { font-size: 15px; } .today.stack .td > div > span { font-size: 13.5px; }
.td-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px 16px; opacity: 0; }
.td-actions .cta { font-size: 16px; }
.td-second { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.td-second em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.td-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14px; opacity: 0; }
.td-links a { color: var(--ink); font-weight: 600; text-decoration: none; padding: 6px 0; }
.td-links a:hover { color: var(--vault-line); }
.td-links a.quiet { color: var(--muted); font-weight: 500; }
.td-links .textlink { padding: 6px 0; }
.today.stack .td-actions { gap: 10px 12px; } .today.stack .td-links { font-size: 13.5px; gap: 4px 16px; }

/* ---------- Dialogs and forms ---------- */
dialog { border: 0; padding: 0; margin: auto; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); background: var(--card); color: var(--ink); border-radius: 20px; box-shadow: 0 30px 80px -30px rgba(10,20,35,.6); font-size: 16px; line-height: 1.5; }
dialog::backdrop { background: rgba(10, 20, 35, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog[open] { animation: dlg-in .25s ease; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dlg { padding: 28px clamp(20px, 4vw, 32px) 24px; }
.dlg-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.dlg-head > div { flex: 1; min-width: 0; } /* the text takes the width, so the close X keeps its corner whatever the text */
.dlg-head h2 { font-size: 22px; flex: 1; margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
.dlg-head p { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.dlg-close { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.dlg-close:hover { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink); }
.dlg-close svg { width: 16px; height: 16px; }
.form { display: grid; gap: 16px; } .form[hidden] { display: none; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .form .row { grid-template-columns: 1fr; } }
.f { display: grid; gap: 6px; }
.f[hidden] { display: none; }
.f label { font-size: 14.5px; font-weight: 600; }
.f label small { font-weight: 400; color: var(--muted); }
.f input, .f select, .f textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink); font: 400 16px var(--font); line-height: 1.4; box-sizing: border-box; }
.f textarea { min-height: 104px; resize: vertical; }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 3px solid var(--seal); outline-offset: 1px; border-color: var(--seal); }
.f .err { display: none; font-size: 13px; color: var(--warn); }
.f.invalid .err { display: block; } .f.invalid input, .f.invalid textarea, .f.invalid select { border-color: var(--warn); }
.form-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.form-foot .cta { min-width: 144px; }
.form-foot .fine { font-size: 13px; color: var(--muted); flex: 1 1 190px; }
/* the privacy note: a small box that opens from the link beside the submit button */
.info { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 600 13px var(--font); color: var(--vault-line); cursor: pointer; border-radius: 6px; }
.info:hover, .info[aria-expanded="true"] { color: var(--ink); }
.info svg { width: 15px; height: 15px; flex: none; }
/* the note spans the button row's width, so it stays inside the dialog at every width; the arrow is set under the link by script (--ax) */
.note { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 2; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 16px 36px -18px rgba(10,20,35,.45); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.note::after { content: ""; position: absolute; left: clamp(14px, var(--ax, 50%), calc(100% - 24px)); bottom: -6px; width: 10px; height: 10px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.note[hidden] { display: none; }
/* the status box of a form (scoped to the form: the home demo's user bubble carries a "sent" class of its own) */
.form .sent { display: none; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); font-size: 15px; line-height: 1.45; }
.form .sent.show { display: block; }
.form .sent b { display: block; color: var(--ink); margin-bottom: 3px; }
.form .sent.ok { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.form .sent.pending { border-color: color-mix(in srgb, var(--seal) 60%, var(--line)); }
.form .sent p { color: var(--muted); margin: 0; }
/* the confirmation after a send lives in the dialog's header: the tick inline before the heading, the sentence and
   Close aligned with the heading's text; the close X keeps its place and the dialog shrinks to the header */
.dlg-head.is-done { margin-bottom: 0; }
.dlg-head > div.done { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center; }
.dlg-head > div.done h2 { grid-column: 2; }
.dlg-head > div.done p { grid-column: 2; }
.dlg-head > div.done .cta { grid-column: 2; justify-self: start; margin-top: 18px; min-width: 144px; }
.done-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; }
.done-ic svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  dialog[open] { animation: none; }
  .topbar .top-cta, .uc-tab, .uc-bar { transition: none; }
}

/* ---------- Agents slide: a window with the user's agents as contacts on the left and the chosen one's conversation on the right.
   Laid out in canvas units inside #viz, like the other scenes. The avatars are the deck's sealed cell, each in its own tone. ---------- */
.ag { position: absolute; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; opacity: 0; font-size: 16px; line-height: 1.45;
  box-shadow: 0 1px 0 rgba(23,38,58,.04), 0 18px 40px -18px rgba(23,38,58,.35); will-change: transform, opacity; pointer-events: auto; }
.ag .bar .name { display: flex; align-items: center; gap: 8px; }
.ag-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.ag-list { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-right: 1px solid var(--line); overflow: hidden; }
.ag-c { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 11px; align-items: center; padding: 8px 10px; border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background .25s; }
.ag-c { position: relative; }
.ag-c:hover { background: color-mix(in srgb, var(--vault-line) 8%, var(--card)); }
.ag-c:focus-visible { outline: 3px solid var(--seal); outline-offset: -2px; }
.ag-c.on { background: var(--soft); }
/* each row ends in a chevron, which turns solid on the chosen one */
.ag-c::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: translateY(-50%) rotate(-45deg); transition: border-color .25s; }
.ag-c:hover::after, .ag-c.on::after { border-color: var(--vault-line); }
/* the hint over the list, and the cue on the first avatar until the visitor's first click */
.ag-hint { padding: 6px 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ag-hint svg { width: 14px; height: 14px; flex: none; }
/* the cue on the first avatar is an outline that breathes outwards: an outline takes no room in the layout */
.ag-av { border-radius: 11px; }
.ag-cue .ag-av.target { outline: 2px solid transparent; outline-offset: 3px; animation: ag-cue 2.2s ease-out infinite; }
@keyframes ag-cue { 0% { outline-color: var(--vault-line); outline-offset: 2px; } 70%, 100% { outline-color: transparent; outline-offset: 9px; } }
@media (prefers-reduced-motion: reduce) { .ag-cue .ag-av.target { animation: none; outline-color: color-mix(in srgb, var(--vault-line) 60%, transparent); outline-offset: 5px; } }
.ag-av { display: block; width: 40px; height: 45px; grid-row: 1 / span 2; }
.ag-av svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ag-av.target { opacity: 0; } /* the demo's robot lands here; the engine fades the avatar in as it arrives */
.ag [data-tone="green"] { --bot: var(--ok); --vault-line: var(--ok); }
.ag [data-tone="gold"] { --bot: var(--seal-ink); --vault-line: var(--seal-ink); }
.ag [data-tone="plum"] { --bot: #6A5A95; --vault-line: #6A5A95; }
.ag [data-tone="rust"] { --bot: var(--warn); --vault-line: var(--warn); }
:root[data-theme="dark"] .ag [data-tone="plum"] { --bot: #A294CF; --vault-line: #A294CF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ag [data-tone="plum"] { --bot: #A294CF; --vault-line: #A294CF; } }
.ag-txt { min-width: 0; }
.ag-txt b { display: block; font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-txt em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-st { grid-column: 2; display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ag-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.ag-st.busy::before { box-sizing: content-box; width: 10px; height: 10px; aspect-ratio: 1; background: none; border: 2px solid var(--line); border-top-color: var(--vault-line); animation: ag-spin .9s linear infinite; }
@keyframes ag-spin { to { transform: rotate(360deg); } }
.ag-st.wait { color: var(--seal-ink); } .ag-st.wait::before { background: var(--seal); }
.ag-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ag-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.ag-head .ag-av { width: 30px; height: 34px; grid-row: auto; }
.ag-head b { display: block; font-size: 15px; line-height: 1.25; }
.ag-head span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.ag-msgs { flex: 1; min-height: 0; padding: 14px 16px 12px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; overflow: hidden auto; scrollbar-width: none; }
.ag-msgs::-webkit-scrollbar { display: none; }
.ag-msgs .msg { max-width: 94%; font-size: 14px; }
.ag-msgs .agent-text { padding-top: 3px; }
.ag-msgs .approval h4 { font-size: 14.5px; } .ag-msgs .approval p { font-size: 13px; }
.ag-msgs .actions { margin-top: 9px; }
.ag-msgs .log { margin-top: 9px; } .ag-msgs .log li { font-size: 13px; }
.ag.tall .ag-msgs .log { display: none; } /* on phones the report and the approval are what fits */
.ag-msgs .ag-when { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ag-msgs .ag-when::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--seal); }
/* tall: the contacts are a strip of avatars above the conversation; the status goes to the conversation's head */
.ag.tall .ag-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.ag.tall .ag-list { flex-direction: row; justify-content: space-between; gap: 0; padding: 8px 8px 6px; border-right: 0; border-bottom: 1px solid var(--line); }
.ag.tall .ag-c { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 5px; padding: 6px 4px; flex: 1 1 0; min-width: 0; }
.ag.tall .ag-c::after { display: none; }
.ag.tall .ag-hint { width: 100%; justify-content: center; padding: 0 8px 2px; font-size: 11.5px; }
.ag.tall .ag-list { flex-wrap: wrap; }
.ag.tall .ag-av { grid-row: auto; width: 34px; height: 38px; }
.ag.tall .ag-txt b { font-size: 11px; text-align: center; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; hyphens: manual; } /* the German names carry soft hyphens at their joints */
.ag.tall .ag-txt em, .ag.tall .ag-c .ag-st { display: none; }
.ag.tall .ag-head { padding: 8px 12px; flex-wrap: wrap; }
.ag.tall .ag-head .ag-st { grid-column: auto; margin: 0 0 0 auto; }
.ag.tall .ag-msgs { padding: 8px 12px 8px; gap: 8px; }
.ag.tall .ag-msgs .msg { max-width: 100%; font-size: 13.5px; }
.ag-head .ag-st { display: flex; margin-left: auto; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ag-st.busy::before { animation: none; } .ag-c { transition: none; } }