/* ==========================================================================
   Bionary Iraq, portal stylesheet (portal/index.html). Owned by the portal
   builder. Loads after ../assets/css/tokens.css, which carries every token
   (colours, type, spacing, shape, motion) and the base resets; this file adds
   only the portal's own base rules and components.
   ========================================================================== */

/* ---------- base (additions to the resets in tokens.css) ---------- */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
a{color:var(--text-link);border-bottom:1px solid var(--border-quiet)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--border-strong)}
button{font:var(--type-ui);font-family:var(--font-text)}
input,select,textarea{font-family:var(--font-text)}
[hidden]{display:none !important}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
.measure{max-width:var(--measure)}

.skip{position:absolute;inset-inline-start:16px;top:-64px;z-index:200;height:44px;display:inline-flex;align-items:center;padding:0 20px;background:var(--paper);color:var(--ink-000);border:1px solid var(--ink-000);border-radius:var(--radius-1);font:500 12px/1 var(--font-text);letter-spacing:0.08em}
.skip:focus{top:14px}

.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad)}
@media (max-width:719px){.wrap{padding-inline:16px}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--ink-000);color:var(--paper);border-bottom:1px solid var(--border-inverse)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.hdr-logo{display:block;border:0;flex:0 0 auto}
.hdr-logo img{width:148px;height:auto}
.hdr-nav{display:flex;align-items:center;gap:24px;min-width:0}
.hdr-link{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;cursor:pointer;font:500 11px/1 var(--font-text);letter-spacing:0.08em;color:var(--ink-500);border-bottom:1px solid transparent;transition:var(--transition-control)}
.hdr-link:hover,.hdr-link[aria-current="page"]{color:var(--paper);border-bottom-color:var(--paper)}
.hdr-user{font:var(--type-caption);color:var(--ink-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.hdr-user .num{color:var(--ink-500)}
@media (max-width:719px){.hdr-nav{gap:16px}.hdr-user{display:none}}

/* ---------- views ---------- */
.view{padding-block:var(--section-y);opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-entrance),transform var(--dur-base) var(--ease-entrance)}
.view.in{opacity:1;transform:none}
@media (max-width:719px){.view{padding-block:var(--space-8)}}
.boot{padding-block:var(--space-9);text-align:center;font:var(--type-body-s);color:var(--text-muted)}

.stack{display:grid;gap:var(--space-8)}
.stack-s{display:grid;gap:var(--space-5)}
@media (max-width:719px){.stack{gap:var(--space-7)}}

.split{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:48px 80px;align-items:start}
.rail{display:grid;gap:14px;align-content:start}
.rail p{font:var(--type-body-s);color:var(--text-secondary);max-width:var(--measure-narrow)}
@media (max-width:959px){.split{grid-template-columns:minmax(0,1fr);gap:32px}}

.eyebrow{display:grid;gap:10px;justify-items:start;font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted)}
.eyebrow--rule::before{content:"";display:block;width:32px;height:2px;background:var(--ink-000)}
.eyebrow--origin::before{background:var(--swiss-red)}
.on-ink .eyebrow{color:var(--paper)}
.on-ink .eyebrow--rule::before{background:var(--paper)}
.on-ink .eyebrow--origin::before{background:var(--swiss-red)}
.eyebrow-mono{font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--text-muted)}

.h-display{font:var(--type-display-s);letter-spacing:0;text-wrap:balance}
.h-display--m{font:var(--type-display-m)}
.h-title{font:var(--type-title-s)}
.lede{font:var(--type-body);color:var(--text-secondary);max-width:var(--measure)}
.section-head{display:grid;gap:12px}
.section-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- buttons (Button.jsx) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--control-h);padding:0 var(--control-pad-x);font:500 12px/1 var(--font-text);letter-spacing:0.08em;border-radius:var(--radius-1);cursor:pointer;transition:var(--transition-control);text-decoration:none;white-space:nowrap;border:1px solid transparent;-webkit-appearance:none;appearance:none;min-width:44px}
.btn--solid{background:var(--control-solid-bg);color:var(--control-solid-fg);border-color:var(--control-solid-bg)}
.btn--solid:hover{background:var(--control-solid-bg-hover);border-color:var(--control-solid-bg-hover)}
.btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--ink-000);color:var(--paper)}
.btn--quiet{background:transparent;color:var(--text-primary);border-color:transparent}
.btn--quiet:hover{background:var(--control-quiet-bg-hover)}
.btn--inverse{background:var(--paper);color:var(--ink-000);border-color:var(--paper)}
.btn--inverse:hover{background:var(--ink-050);border-color:var(--ink-050)}
.btn--outline-inverse{background:transparent;color:var(--text-inverse);border-color:var(--border-inverse-strong)}
.btn--outline-inverse:hover{background:rgba(255,255,255,.1);border-color:var(--paper)}
.btn:active{opacity:.88}
.btn--lg{height:var(--control-h-l);padding:0 28px}
.btn--full{width:100%}
.btn[disabled],.btn[aria-busy="true"]{background:var(--control-disabled-bg);color:var(--control-disabled-fg);border-color:transparent;cursor:not-allowed}
.on-ink .btn[disabled],.on-ink .btn[aria-busy="true"]{background:rgba(255,255,255,.12);color:var(--ink-500)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-row--end{justify-content:flex-end}

/* ---------- forms (Field, Input, Select, Checkbox, Switch) ---------- */
.form{display:grid;gap:20px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:1/-1}
@media (max-width:719px){.form-grid,.form-grid--3{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:8px;align-content:start}
.field-label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-primary)}
.field-label .req{color:var(--swiss-red)}
.field-hint{font:var(--type-caption);color:var(--text-muted)}
.field-error{font:var(--type-caption);color:var(--state-critical)}
.form-error{font:var(--type-body-s);color:var(--state-critical)}
.input{width:100%;height:var(--control-h);padding:0 14px;font:var(--type-body-s);font-family:var(--font-text);color:var(--text-primary);background:var(--paper);border:1px solid var(--border-quiet);border-radius:var(--radius-1);outline:none;transition:var(--transition-control);-webkit-appearance:none;appearance:none;margin:0}
.input:focus{border-color:var(--border-strong)}
.input:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.input::placeholder{color:var(--ink-500)}
.input--mono{font-family:var(--font-mono)}
.input[aria-invalid="true"]{border-color:var(--state-critical)}
.input[disabled]{background:var(--control-disabled-bg);color:var(--control-disabled-fg)}
textarea.input{height:auto;min-height:88px;padding:12px 14px;resize:vertical;line-height:1.55}
.select{position:relative}
.select select{width:100%;height:var(--control-h);padding-block:0;padding-inline:14px 38px;font:var(--type-body-s);font-family:var(--font-text);color:var(--text-primary);background:var(--paper);border:1px solid var(--border-quiet);border-radius:var(--radius-1);outline:none;transition:var(--transition-control);-webkit-appearance:none;appearance:none;margin:0}
.select select:focus{border-color:var(--border-strong)}
.select select:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.select select[aria-invalid="true"]{border-color:var(--state-critical)}
.select select[disabled]{background:var(--control-disabled-bg);color:var(--control-disabled-fg)}
.select::after{content:"";position:absolute;inset-inline-end:14px;top:50%;width:8px;height:8px;border-right:1px solid var(--text-primary);border-bottom:1px solid var(--text-primary);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.check{position:relative;display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer;min-height:44px;padding-block:10px;font:var(--type-body-s);color:var(--text-primary)}
.check input{position:absolute;opacity:0;width:0;height:0;margin:0}
.check-box{width:18px;height:18px;flex:0 0 auto;margin-block-start:2px;border-radius:var(--radius-1);border:1px solid var(--border-quiet);background:var(--paper);display:grid;place-items:center;transition:var(--transition-control)}
.check-box::after{content:"";width:9px;height:5px;border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:translateY(-1px) rotate(-45deg);opacity:0}
.check input:checked + .check-box{background:var(--ink-000);border-color:var(--ink-000)}
.check input:checked + .check-box::after{opacity:1}
.check input:focus-visible + .check-box{outline:1px solid var(--focus-ring);outline-offset:2px}
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;min-height:44px;font:var(--type-body-s);color:var(--text-primary)}
.switch input{position:absolute;opacity:0;width:0;height:0;margin:0}
.switch-track{width:40px;height:22px;flex:0 0 auto;border-radius:var(--radius-pill);background:var(--ink-300);padding:2px;display:flex;justify-content:flex-start;transition:background-color var(--dur-fast) var(--ease-standard)}
.switch-knob{width:18px;height:18px;border-radius:var(--radius-pill);background:var(--paper);transition:transform var(--dur-fast) var(--ease-standard)}
.switch input:checked + .switch-track{background:var(--ink-000)}
.switch input:checked + .switch-track .switch-knob{transform:translateX(-18px)}
.switch input:focus-visible + .switch-track{outline:1px solid var(--focus-ring);outline-offset:2px}
.switch input[disabled] + .switch-track{opacity:.5}

/* ---------- tabs (Tabs.jsx: hairline underline, 220ms) ---------- */
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--border-hairline);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:flex-end;min-height:44px;background:none;border:0;padding:0 0 14px;margin:0 0 -1px;cursor:pointer;font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted);border-bottom:2px solid transparent;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);white-space:nowrap}
.tab:hover{color:var(--text-primary)}
.tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:var(--text-primary)}
.panel{padding-block-start:32px;display:grid;gap:32px}
@media (max-width:719px){.tabs{gap:24px}}

/* ---------- cards (Card.jsx) ---------- */
.card{padding:var(--card-pad);border-radius:var(--radius-0);background:var(--surface-card);border:1px solid var(--border-hairline);color:var(--text-primary)}
.card--lg{padding:var(--card-pad-lg)}
.card--sunken{background:var(--surface-sunken);border-color:transparent}
.card--inverse{background:var(--surface-card-inverse);border-color:var(--border-inverse);color:var(--text-inverse)}
.card--inverse .muted{color:var(--text-inverse-muted)}
@media (max-width:719px){.card--lg{padding:var(--card-pad)}}

/* ---------- badge, tag (Badge.jsx, Tag.jsx) ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--radius-pill);border:1px solid var(--border-quiet);color:var(--text-secondary);font:var(--type-label);letter-spacing:var(--tracking-label);white-space:nowrap;vertical-align:middle}
.badge--clear{color:var(--state-clear);border-color:var(--state-clear)}
.badge--caution{color:var(--state-caution);border-color:var(--state-caution)}
.badge--critical{color:var(--state-critical);border-color:var(--state-critical)}
.badge--inverse{color:var(--text-inverse);border-color:var(--border-inverse-strong)}
.badge-dot{width:5px;height:5px;border-radius:var(--radius-pill);background:currentColor}
.badges{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:var(--radius-1);border:1px solid var(--border-hairline);background:var(--surface-sunken);color:var(--text-secondary);font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label)}

/* ---------- stat (Stat.jsx), spec (SpecTable.jsx) ---------- */
.stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stat{display:grid;gap:10px}
.stat-value{font:400 34px/1.05 var(--font-mono);letter-spacing:0;color:var(--text-primary)}
.stat-label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted)}
.card--inverse .stat-value{color:var(--text-inverse)}
.card--inverse .stat-label{color:var(--text-inverse-muted)}
@media (max-width:719px){.stats-row{grid-template-columns:minmax(0,1fr);gap:16px}.stat{grid-template-columns:auto 1fr;align-items:baseline;gap:16px}}
.spec{border-top:1px solid var(--border-hairline)}
.spec-row{display:grid;grid-template-columns:minmax(110px,.75fr) minmax(0,1.25fr);gap:24px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border-hairline)}
.spec dt{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted)}
.spec dd{font:var(--type-body-s);color:var(--text-primary);overflow-wrap:anywhere}

/* ---------- tables, stacked cards under 720px ---------- */
.tbl-wrap{width:100%}
.tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--border-hairline);font:var(--type-body-s)}
.tbl th{text-align:start;font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted);padding-block:12px;padding-inline:0 12px;border-bottom:1px solid var(--border-hairline);white-space:nowrap;font-weight:500}
.tbl td{padding-block:14px;padding-inline:0 12px;border-bottom:1px solid var(--border-hairline);vertical-align:middle;overflow-wrap:anywhere}
.tbl th:last-child,.tbl td:last-child{padding-inline-end:0}
.tbl .cell-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.tbl tr.is-open > td{border-bottom-color:transparent}
.tbl tr.detail > td{padding:0 0 24px}
.tbl .cell-nowrap{white-space:nowrap}
.empty{font:var(--type-body-s);color:var(--text-muted);padding:24px 0;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.loading{font:var(--type-body-s);color:var(--text-muted);padding:24px 0}
.toolbar{display:flex;gap:16px;align-items:end;justify-content:space-between;flex-wrap:wrap}
.toolbar .field{min-width:200px}
.toolbar-note{font:var(--type-caption);color:var(--text-muted)}
@media (max-width:719px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl{border-top:0}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--border-hairline);padding:16px;margin-block-end:12px}
  .tbl td{border:0;padding:6px 0;display:grid;grid-template-columns:minmax(88px,.55fr) minmax(0,1.45fr);gap:12px;align-items:baseline}
  .tbl td::before{content:attr(data-label);font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted)}
  .tbl td.cell-actions{display:flex;justify-content:flex-start;padding-top:12px}
  .tbl td.cell-actions::before{content:none}
  .tbl tr.detail{border:0;padding:0;margin-block-start:-12px}
  .tbl tr.detail > td{display:block;padding:0 0 16px}
  .tbl tr.detail > td::before{content:none}
}

/* ---------- login ---------- */
.login-card{max-width:480px;margin-inline:auto}

/* ---------- influencer ---------- */
.code-block{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px 48px;align-items:end}
.code-main{display:grid;gap:20px;justify-items:start}
.code-display{font:400 64px/1 var(--font-mono);letter-spacing:.02em;overflow-wrap:anywhere;color:var(--text-inverse)}
@media (max-width:959px){.code-block{grid-template-columns:minmax(0,1fr)}}
@media (max-width:719px){.code-display{font-size:40px}}
.share{display:grid;gap:16px;justify-items:start}
.share-text{font:var(--type-body);color:var(--text-primary);max-width:var(--measure)}

/* ---------- clinic ---------- */
.clinic-form{display:grid;gap:20px}

/* ---------- admin ---------- */
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.detail{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;padding:24px;background:var(--surface-sunken)}
.detail-col{display:grid;gap:16px;align-content:start}
.receipt{display:grid;gap:12px;align-content:start}
.receipt img{width:100%;max-height:420px;object-fit:contain;background:var(--paper);border:1px solid var(--border-hairline)}
.detail-actions{grid-column:1/-1;display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:24px;border-top:1px solid var(--border-hairline)}
.detail-action{display:grid;gap:12px;align-content:start}
@media (max-width:719px){.detail{grid-template-columns:minmax(0,1fr);padding:16px}.detail-actions{grid-template-columns:minmax(0,1fr)}}

.tiers{display:grid;gap:12px}
.tier-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 96px auto;gap:12px;align-items:end}
.tiers-foot{display:flex;gap:12px;align-items:center}
@media (max-width:719px){.tier-row{grid-template-columns:minmax(0,1fr) 96px}.tier-row .field:nth-child(2){grid-column:1/-1}.tier-row .btn{grid-column:1/-1;justify-self:start}}

.draws{display:grid;gap:16px}
.draw{display:grid;gap:20px}
.draw-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.draw-title{display:grid;gap:8px}
.draw-meta{display:flex;gap:24px;flex-wrap:wrap;font:var(--type-body-s);color:var(--text-secondary)}
.draw-meta > span{display:inline-flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.draw-actions{display:flex;gap:8px;flex-wrap:wrap}
.tier-list{display:grid;gap:0;border-top:1px solid var(--border-hairline)}
.tier-list li{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr) auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-hairline);font:var(--type-body-s)}
.tier-list{list-style:none;margin:0;padding:0}
@media (max-width:719px){.tier-list li{grid-template-columns:minmax(0,1fr) auto}.tier-list li span:nth-child(2){grid-column:1/-1;color:var(--text-secondary)}}

.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:719px){.settings-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- toast (Toast.jsx, bottom-start, 420ms) ---------- */
.toasts{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:120;display:grid;gap:10px;max-width:calc(100vw - 48px);pointer-events:none}
.toast{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:12px 18px;background:var(--ink-000);color:var(--text-inverse);border:1px solid var(--ink-000);border-radius:var(--radius-1);box-shadow:var(--shadow-lift);font:var(--type-body-s);opacity:0;transform:translateY(8px);transition:opacity var(--dur-slow) var(--ease-entrance),transform var(--dur-slow) var(--ease-entrance);pointer-events:auto}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateY(8px);transition-timing-function:var(--ease-exit)}
@media (max-width:719px){.toasts{inset-inline-start:16px;inset-block-end:16px;max-width:calc(100vw - 32px)}}

/* ---------- dialog (Dialog.jsx, 420ms) ---------- */
.dialog-root{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:var(--surface-scrim);-webkit-backdrop-filter:blur(var(--blur-veil));backdrop-filter:blur(var(--blur-veil));opacity:0;transition:opacity var(--dur-slow) var(--ease-entrance)}
.dialog-root.in{opacity:1}
.dialog{width:100%;max-width:520px;max-height:calc(100vh - 48px);overflow:auto;background:var(--surface-card);border:1px solid var(--border-hairline);box-shadow:var(--shadow-modal);border-radius:var(--radius-0);transform:translateY(8px);transition:transform var(--dur-slow) var(--ease-entrance)}
.dialog-root.in .dialog{transform:none}
.dialog-head{display:grid;gap:10px;padding:32px 32px 16px}
.dialog-title{font:var(--type-display-s);letter-spacing:0}
.dialog-body{padding:0 32px;font:var(--type-body-s);color:var(--text-secondary);display:grid;gap:20px}
.dialog-body p{max-width:var(--measure)}
.dialog-foot{display:flex;justify-content:flex-end;gap:12px;padding:24px 32px 32px;flex-wrap:wrap}
@media (max-width:719px){.dialog-root{padding:16px}.dialog-head{padding:24px 20px 12px}.dialog-body{padding:0 20px}.dialog-foot{padding:20px}}

/* ---------- footer ---------- */
.ftr{background:var(--ink-000);color:var(--paper);border-top:1px solid var(--border-inverse)}
.ftr-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;padding-block:32px}
.ftr-legal{font:var(--type-label-mono);letter-spacing:var(--tracking-mono-label);color:var(--ink-500);line-height:1.6}

/* ---------- round two: pair rows (social links, product stats), uploads, products, testimonials ---------- */
.pair-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) auto;gap:12px;align-items:end}
@media (max-width:719px){.pair-row{grid-template-columns:minmax(0,1fr)}.pair-row .btn{justify-self:start}}
textarea.input--tall{min-height:240px}
.upload{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:20px;align-items:start}
.upload-preview{aspect-ratio:4/5;background:var(--paper);border:1px solid var(--border-hairline);overflow:hidden}
.upload-preview img{display:block;width:100%;height:100%;object-fit:cover}
.upload-ctl{display:grid;gap:10px;justify-items:start}
.upload-preview[hidden] + .upload-ctl{grid-column:1/-1}
@media (max-width:719px){.upload{grid-template-columns:minmax(0,1fr)}.upload-preview{max-width:160px}}
.thumb{display:block;width:48px;height:60px;object-fit:cover;background:var(--paper);border:1px solid var(--border-hairline)}
.link-out{display:inline-block;min-width:0;max-width:100%;overflow-wrap:anywhere}
.link-out .num{display:inline;white-space:normal;overflow-wrap:anywhere}
.draw-meta > span{min-width:0;max-width:100%}
.tbl td.cell-quote{max-width:36ch;color:var(--text-secondary)}
@media (max-width:719px){.tbl td.cell-quote{max-width:none}}

/* ---------- motion safety ---------- */
body.paused *{animation-play-state:paused !important;transition:none !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .view,.toast,.dialog-root,.dialog{opacity:1;transform:none}
  .toast.out{opacity:0}
}