/* Connection-Centric, in shadcn/ui's Mira style (tokens in theme.css).
 *
 * Mira is compact and made for dense interfaces; its recipes are kept here
 * — ring-1 cards, input/20 fields, muted tab rails, popover sheets, pill
 * badges, press-down buttons — while the metrics are sized for a thumb on a
 * site: 14px body where Mira has 12px, 40px controls where it has 28px, and
 * 44px tap targets on a touch screen. Every colour is a token; nothing here
 * changes between light and dark. Gujarati and Hindi are never tracked. */

:root {
  --text-xs: 0.75rem;     /* labels, badges  (Mira: 0.625–0.75rem) */
  --text-sm: 0.8125rem;   /* secondary       (Mira: 0.75rem) */
  --text-base: 0.875rem;  /* body            (Mira: 0.75rem) */
  --text-md: 1rem;        /* titles          (Mira: 0.875rem) */
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --leading: 1.625;       /* Mira's "relaxed" */
  --control-h: 2.5rem;    /* Mira h-7 = 1.75rem */
  --control-sm: 2.25rem;
  --card-spacing: 1rem;   /* Mira's --card-spacing */
  --gutter: 0.75rem;
  --bar-h: 3.5rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-bar: 4; --z-nav: 4; --z-fab: 3; --z-toast: 6;
  /* the native select's chevron, in muted-foreground for each mode */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23706f5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root.dark { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-size: var(--text-base); line-height: var(--leading); min-height: 100dvh; overflow-x: hidden; }
:lang(gu), :lang(hi), :lang(gu) *, :lang(hi) * { letter-spacing: 0 !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1 { font-size: var(--text-xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.sm { font-size: var(--text-sm); color: var(--muted-foreground); }
.hint { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
.lede { font-size: var(--text-md); line-height: 1.5; text-wrap: pretty; }
.sec { font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); padding: 0.5rem 0.25rem 0; }
.ic { width: 1.125rem; height: 1.125rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; pointer-events: none; }

/* ---- app bar: background with a hairline, as a shadcn header -------------- */
.bar { position: sticky; top: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: 0.25rem; min-height: var(--bar-h); padding: 0.375rem 0.5rem; padding-top: max(0.375rem, env(safe-area-inset-top)); background: var(--background-95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
#bar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.25rem; }
.bar .g { flex: 1; min-width: 0; padding: 0 0.5rem; }
.bar .t { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .s { font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang { height: var(--control-sm); padding: 0 1.75rem 0 0.625rem; max-width: 7rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--input-20); color: inherit; font-size: var(--text-sm); font-weight: 500; appearance: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.75rem; }
.lang:hover { background-color: var(--input-50); }
.lang option { color: CanvasText; background: Canvas; }
body.busy .bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); animation: sweep 1s linear infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* icon buttons: Mira's ghost icon button */
.ib { width: var(--control-h); height: var(--control-h); display: grid; place-items: center; border-radius: var(--radius-md); color: inherit; flex-shrink: 0; transition: background-color 120ms var(--ease), transform 90ms var(--ease); }
.ib:hover { background: var(--muted); }
.ib:active { transform: translateY(1px); }
.ib.br { background: var(--primary); color: var(--primary-foreground); }
.ib.br:hover { background: var(--primary-80); }

/* ---- page ------------------------------------------------------------------ */
main { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 40rem; margin: 0 auto; padding: var(--gutter) var(--gutter) 6.25rem; }
main.plain { padding-bottom: 2rem; }
.row { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.row > * { flex: 1; }
.links { display: flex; gap: 0.5rem; }
.links .b { flex: 1; }
#net { display: none; }
body.offline #net { display: block; }
#net, .offline, .outbox { border-radius: var(--radius-lg); background: var(--warning-10); color: var(--warning); font-size: var(--text-sm); font-weight: 500; padding: 0.5rem 0.75rem; text-align: center; }
.offline, .outbox { margin: 0.5rem var(--gutter) 0; }

/* ---- cards: Mira's ring-1 card, no border ---------------------------------- */
.card { display: flex; gap: 0.75rem; align-items: flex-start; padding: var(--card-spacing); border-radius: var(--radius-lg); background: var(--card); color: var(--card-foreground); box-shadow: 0 0 0 1px var(--foreground-10); animation: rise 240ms var(--ease) backwards; }
.card .c { flex: 1; min-width: 0; }
.card .h { display: block; font-size: var(--text-md); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card .meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; flex-wrap: wrap; }
.card.col { flex-direction: column; gap: 0.75rem; align-items: stretch; }
.card.hot { box-shadow: 0 0 0 2px var(--warning); }
a.card, button.card { min-height: 3.5rem; transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease), transform 90ms var(--ease); }
a.card:hover { background: var(--muted); }
a.card:active { transform: translateY(1px); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.card:nth-child(2) { animation-delay: 30ms; } .card:nth-child(3) { animation-delay: 60ms; } .card:nth-child(4) { animation-delay: 90ms; } .card:nth-child(n+5) { animation-delay: 120ms; }

/* ---- badges: Mira's pill, 20px tall, with the shape cue kept (WCAG 1.4.1) -- */
.tag { display: inline-flex; align-items: center; gap: 0.3rem; height: 1.25rem; padding: 0 0.5rem; border-radius: 9999px; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.tag::before { content: ""; flex-shrink: 0; display: block; }
.tag.w::before { width: 0.5rem; height: 0.5rem; border: 1.5px solid currentColor; border-radius: 50%; }
.tag.o::before { width: 0.5rem; height: 0.5rem; background: currentColor; transform: rotate(45deg) scale(0.86); }
.tag.d::before { width: 0.3rem; height: 0.5rem; border: 1.6px solid currentColor; border-top: 0; border-left: 0; transform: rotate(42deg) translateY(-1px); }
.tag.w { background: var(--warning-10); color: var(--warning); }
.tag.o { background: var(--destructive-10); color: var(--destructive); }
.tag.d { background: var(--primary-10); color: var(--primary-text); }
.x { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.5rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--input-20); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }

/* avatar: Mira's, a hairline ring on a muted disc */
.av { width: 2rem; height: 2rem; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; flex-shrink: 0; }

/* ---- buttons: Mira's, pressed down a pixel ---------------------------------- */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: var(--control-h); padding: 0 0.875rem; border-radius: var(--radius-md); border: 1px solid transparent; background-clip: padding-box; font-size: var(--text-base); font-weight: 500; white-space: nowrap; width: 100%; user-select: none; transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease), transform 90ms var(--ease); }
.b:active { transform: translateY(1px); }
.b:disabled { opacity: 0.5; pointer-events: none; }
.b:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring-30); }
.b.br, .b.go, .b.warn { background: var(--primary); color: var(--primary-foreground); }
.b.br:hover, .b.go:hover, .b.warn:hover { background: var(--primary-80); }
.b.no { border-color: var(--border); background: transparent; color: var(--foreground); }
:root.dark .b.no { background: var(--input-30); }
.b.no:hover { background: var(--input-50); }
.b .ic { width: 1rem; height: 1rem; }
.lnk { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; padding: 0 0.25rem; color: var(--primary-text); font-weight: 500; font-size: var(--text-sm); text-underline-offset: 4px; overflow-wrap: anywhere; text-align: left; }
.lnk:hover { text-decoration: underline; }
.fab { position: fixed; right: 1rem; bottom: 5.25rem; z-index: var(--z-fab); width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; box-shadow: var(--shadow-md); transition: background-color 120ms var(--ease), transform 90ms var(--ease); }
.fab:hover { background: var(--primary-80); }
.fab:active { transform: translateY(1px); }
.fab .ic { width: 1.375rem; height: 1.375rem; stroke-width: 2.25; }

/* ---- forms: Mira's input/20 field with a ring on focus ---------------------- */
form { display: flex; flex-direction: column; gap: 0.75rem; }
label { display: block; font-size: var(--text-xs); font-weight: 500; line-height: 1.4; }
:is(main, dialog) :is(input:not([type=checkbox]):not([type=file]), select, textarea) { display: block; width: 100%; height: var(--control-h); margin-top: 0.375rem; padding: 0 0.625rem; border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--input-20); color: var(--foreground); font-size: 1rem; transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease), background-color 120ms var(--ease); }
:root.dark :is(main, dialog) :is(input:not([type=checkbox]):not([type=file]), select, textarea) { background: var(--input-30); }
:is(main, dialog) :is(input, select, textarea)::placeholder { color: var(--muted-foreground); }
:is(main, dialog) :is(input, select, textarea):focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring-30); }
:is(main, dialog) select { appearance: none; padding-right: 2rem; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 0.875rem; }
:is(main, dialog) textarea { height: auto; min-height: 5rem; padding: 0.5rem 0.625rem; resize: vertical; }
input[type=tel], input[inputmode=numeric] { font-variant-numeric: tabular-nums; }
input[autocomplete=one-time-code] { font-size: 1.5rem; text-align: center; letter-spacing: 0.25em; }
/* checkbox: Mira's, 16px, primary when checked */
input[type=checkbox] { appearance: none; position: relative; width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; border: 1px solid var(--input); border-radius: 4px; background: var(--input-20); transition: background-color 120ms var(--ease), border-color 120ms var(--ease); }
:root.dark input[type=checkbox] { background: var(--input-30); }
input[type=checkbox]:checked { background: var(--primary); border-color: var(--primary); }
input[type=checkbox]:checked::after { content: ""; position: absolute; left: 0.28rem; top: 0.08rem; width: 0.28rem; height: 0.5rem; border: 2px solid var(--primary-foreground); border-top: 0; border-left: 0; transform: rotate(45deg); }
input[type=checkbox]:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring-30); }
/* a labelled checkbox row: Mira's field label, tinted once checked */
.sw { display: flex; align-items: center; gap: 0.75rem; min-height: var(--control-h); padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 400; cursor: pointer; transition: background-color 120ms var(--ease); }
.sw:hover { background: var(--input-50); }
.sw:has(:checked) { background: var(--primary-5); }
.sw.card { box-shadow: none; }

/* ---- tabs and segmented controls: Mira's muted rail with a raised trigger -- */
.tabs, .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--radius-lg); background: var(--muted); }
.tabs a, .seg a, .seg button { display: grid; place-items: center; min-height: 2.125rem; padding: 0 0.5rem; border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--text-sm); font-weight: 500; color: var(--muted-foreground); white-space: nowrap; transition: color 120ms var(--ease), background-color 120ms var(--ease); }
.tabs a:hover, .seg a:hover, .seg button:hover { color: var(--foreground); }
.tabs a[aria-current], .seg a[aria-current], .seg button[aria-pressed=true] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
:root.dark .tabs a[aria-current], :root.dark .seg a[aria-current], :root.dark .seg button[aria-pressed=true] { background: var(--input-30); border-color: var(--input); box-shadow: none; }
.filters { display: flex; gap: 0.5rem; align-items: center; }
.filters > * { flex: 1; }
.filters select { margin: 0; height: 2.5rem; }

/* ---- bottom navigation: the sidebar tokens, laid flat ---------------------- */
.nav { position: fixed; inset: auto 0 0 0; z-index: var(--z-nav); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0.375rem 0.25rem calc(0.5rem + env(safe-area-inset-bottom)); background: var(--background-95); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-height: 3rem; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); transition: color 120ms var(--ease); }
.nav .pill { display: grid; place-items: center; width: 2.5rem; height: 1.625rem; border-radius: 9999px; transition: background-color 160ms var(--ease); }
.nav a.on { color: var(--primary-text); }
.nav a.on .pill { background: var(--primary-10); }
.nav a:active .pill { background: var(--muted); }

/* ---- channel ----------------------------------------------------------------- */
main.chat { padding: 0; max-width: none; gap: 0; min-height: calc(100dvh - var(--bar-h)); }
.msgs { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem var(--gutter) 0.5rem; max-width: 40rem; width: 100%; margin: 0 auto; }
.msg { align-self: flex-start; min-width: 60%; max-width: 92%; padding: 0.5rem 0.75rem 0.625rem; border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 0 0 1px var(--foreground-10); animation: rise 200ms var(--ease) backwards; }
.msg.mine { align-self: flex-end; background: var(--primary-10); box-shadow: none; }
.msg .who { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); flex-wrap: wrap; }
.msg .who b { font-weight: 600; color: var(--primary-text); }
.msg .ts { margin-left: auto; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.msg .who .ib { width: 2rem; height: 2rem; margin: -0.25rem -0.5rem -0.25rem 0; }
.msg .body { margin-top: 0.125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .ph { width: 100%; min-height: 3rem; max-height: 20rem; margin-top: 0.375rem; border-radius: var(--radius-md); object-fit: cover; background: var(--muted); }
.compose { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: 0.125rem; padding: 0.5rem var(--gutter); padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); background: var(--background-95); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.compose input { flex: 1; min-width: 0; margin: 0; }
.compose .ib { cursor: pointer; }

/* ---- sheet: Mira's popover sheet from the bottom ---------------------------- */
dialog { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 40rem; margin: 0 auto; padding: 0; border: 0; border-top: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg); max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(2.5rem); transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, overlay 200ms allow-discrete, display 200ms allow-discrete; }
dialog[open] { opacity: 1; transform: translateY(0); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(2.5rem); } }
dialog::backdrop { background: var(--overlay); transition: opacity 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
.sh { padding: 0.5rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
.viewer { display: block; width: 100%; height: 70dvh; margin: 0.25rem 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.grab { width: 2rem; height: 0.25rem; margin: 0 auto 1rem; border-radius: 2px; background: var(--border); }
.st { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.sub { margin: 0.25rem 0 1rem; font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
/* rows in a sheet: Mira's item */
.prow { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.25rem; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); text-align: left; color: inherit; transition: background-color 100ms var(--ease); }
button.prow:hover { background: var(--muted); }
button.prow:active { background: var(--accent); }
.prow:disabled { opacity: 0.5; cursor: default; }
.prow > span:not(.av):not(.x) { flex: 1; min-width: 0; }
.prow .n { font-size: var(--text-base); font-weight: 500; }
.prow .des { font-size: var(--text-sm); color: var(--muted-foreground); }
.prow .x { margin-left: auto; }
.reason { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 3rem; margin-bottom: 0.375rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--input-20); font-size: var(--text-base); font-weight: 500; text-align: left; color: inherit; transition: background-color 100ms var(--ease), transform 90ms var(--ease); }
:root.dark .reason { background: var(--input-30); }
.reason:hover { background: var(--input-50); }
.reason:active { transform: translateY(1px); }
.reason.danger { color: var(--destructive); border-color: transparent; background: var(--destructive-10); }
.reason.danger:hover { background: var(--destructive-20); }
.reason + .hint { margin: -0.125rem 0.25rem 0.75rem; }

/* alerts: Mira's, a bordered card with the tone in the text */
.banner { display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.banner .bh { font-size: var(--text-base); font-weight: 500; color: var(--destructive); }
.banner .bp { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; }
.banner .row { margin-top: 0.5rem; }
.banner .b { height: var(--control-sm); font-size: var(--text-sm); }
.warn { padding: 0.625rem 0.75rem; border-radius: var(--radius-lg); background: var(--warning-10); color: var(--warning); font-weight: 500; font-size: var(--text-sm); line-height: 1.5; }
.warn.hot { background: var(--destructive-10); color: var(--destructive); }

/* empty state: Mira's Empty, dashed */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 2rem 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius-xl); text-align: center; text-wrap: balance; color: var(--muted-foreground); font-size: var(--text-sm); }
.empty .ei { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 0.5rem; border-radius: var(--radius-md); background: var(--muted); color: var(--foreground); }
.empty .et { font-size: var(--text-base); font-weight: 500; letter-spacing: -0.01em; color: var(--foreground); }

/* ---- the single ask ---------------------------------------------------------- */
.askview { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0.25rem; min-height: 60dvh; }
.from { display: flex; align-items: center; gap: 0.75rem; animation: rise 240ms var(--ease) backwards; }
.from .n { font-size: var(--text-sm); font-weight: 600; }
.from .when { font-size: var(--text-xs); color: var(--muted-foreground); }
.big { font-size: var(--text-xl); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; text-wrap: balance; animation: rise 240ms var(--ease) 40ms backwards; }
.ctx { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--muted-foreground); animation: rise 240ms var(--ease) 80ms backwards; }
.acts { margin-top: auto; display: flex; gap: 0.75rem; animation: rise 240ms var(--ease) 120ms backwards; }
.acts .b { height: 3rem; }

/* ---- install walkthrough (#26) ---------------------------------------------- */
.steps { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 0 0 1px var(--foreground-10); font-size: var(--text-md); line-height: 1.4; counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: var(--text-xs); font-weight: 600; flex-shrink: 0; }
.steps svg { width: 3.5rem; height: 3.5rem; flex-shrink: 0; stroke: var(--muted-foreground); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.steps svg .hi { stroke: var(--primary-text); fill: var(--primary-10); }
.steps svg .hf { fill: var(--primary-text); stroke: none; }

/* ---- toast: sonner's card ----------------------------------------------------- */
#toast { position: fixed; left: 1rem; right: 1rem; bottom: 6rem; z-index: var(--z-toast); max-width: 24rem; margin: 0 auto; padding: 0.75rem 1rem; border-radius: var(--radius-lg); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-lg), 0 0 0 1px var(--foreground-10); font-size: var(--text-sm); font-weight: 500; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; }
#toast.show { opacity: 1; transform: none; }

/* ---- touch, contrast, motion ------------------------------------------------- */
@media (pointer: coarse) { .b, .prow, .reason, .tabs a, .seg a, .seg button, .ib, .sw, .nav a { min-height: 2.75rem; } }
@media (prefers-contrast: more) { :root { --border: color-mix(in oklab, var(--foreground) 40%, transparent); --foreground-10: color-mix(in oklab, var(--foreground) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }