/* Shared components: buttons, chips, confidence, toast, dialog. */

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-2);border:1px solid var(--input-border);background:var(--surface);color:var(--body-text);font-family:inherit;font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:box-shadow var(--motion-medium),transform var(--motion-fast)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.btn-sm{padding:0 var(--space-3);height:30px;display:inline-flex;align-items:center;gap:var(--space-1h)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--meta-text)}
.btn-ghost:hover,.btn-ghost[aria-expanded="true"]{background:var(--gray-100);color:var(--primary-text);transform:none;box-shadow:none}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--text-on-accent)}
.btn.danger-outline{border-color:var(--deny-border);color:var(--danger)}
.btn.danger-outline:hover{background:var(--deny-bg)}
.btn:hover{transform:translateY(var(--lift));box-shadow:var(--shadow-hover)}
.btn:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--space-hair)}
.deny-btn{background:var(--deny-bg);border-color:var(--deny-border);color:var(--deny-text)}

/* ==========================================================================
   CHIPS — short status pills
   ========================================================================== */
.chip{display:inline-flex;align-items:center;gap:var(--space-1h);height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);font-weight:var(--fw-medium);font-size:var(--fs-sm);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:var(--radius-circle);background:currentColor;opacity:.8}
.chip.pending{background:var(--chip-pending-bg);color:var(--chip-pending-text)}
.chip.approved{background:var(--chip-approved-bg);color:var(--chip-approved-text)}
.chip.denied{background:var(--chip-denied-bg);color:var(--chip-denied-text)}

/* ==========================================================================
   TABS — underline tabs (queue filters, review Changes | Explainer)
   ========================================================================== */
.tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--row-divider)}
.tab{position:relative;display:flex;align-items:center;gap:var(--space-2);height:36px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--meta-text);cursor:pointer;transition:color var(--motion-fast)}
.tab:hover{color:var(--primary-text)}
.tab.active{color:var(--primary-text)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:1px;background:var(--primary-text)}
.tab .count{min-width:20px;padding:0 6px;border-radius:var(--radius-full);background:var(--gray-100);color:var(--meta-text);font-size:var(--fs-xs);line-height:18px;text-align:center;font-variant-numeric:tabular-nums;transition:background var(--motion-fast),color var(--motion-fast)}
.tab.active .count{background:var(--gray-900);color:var(--surface)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-1)}

/* ==========================================================================
   SEGMENTED CONTROL — small exclusive choice (release switcher, split/unified)
   ========================================================================== */
.segmented{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-3);background:var(--gray-100);max-width:100%;overflow-x:auto;scrollbar-width:none}
.segmented-item{display:inline-flex;align-items:center;gap:var(--space-1h);height:28px;padding:0 var(--space-3);border:0;border-radius:var(--radius-2);background:transparent;font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--meta-text);white-space:nowrap;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.segmented-item:hover{color:var(--primary-text)}
.segmented.sm .segmented-item{height:22px;padding:0 var(--space-2);font-size:var(--fs-sm)}
.segmented-item.active{background:var(--surface);color:var(--primary-text);box-shadow:0 0 0 1px var(--shell-border),var(--shadow-xs)}
.segmented-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.segmented-count{min-width:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--gray-200);font-size:var(--fs-xs);line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.segmented-item.active .segmented-count{background:var(--gray-900);color:var(--surface)}

/* ==========================================================================
   AVATAR — initials in a circle
   ========================================================================== */
.avatar{flex:0 0 auto;width:20px;height:20px;border-radius:var(--radius-circle);display:inline-grid;place-items:center;background:var(--avatar-bg);color:var(--category-text);font-size:9px;font-weight:var(--fw-semibold);letter-spacing:.02em}
.avatar-md{width:28px;height:28px;font-size:var(--fs-xs)}
.avatar-lg{width:36px;height:36px;font-size:var(--fs-md)}

/* ==========================================================================
   MENU — dropdown anchored to a trigger (see js/ui/menu.js)
   ========================================================================== */
.menu-anchor{position:relative;display:inline-flex}
.menu-anchor > .menu{right:0;top:calc(100% + var(--space-1));min-width:220px}
.menu{position:absolute;z-index:120;padding:var(--space-1);background:var(--surface);border:1px solid var(--shell-border);border-radius:var(--radius-3);box-shadow:var(--shadow-2);transform-origin:top right;animation:menu-in var(--motion-fast) var(--ease-out)}
.menu-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-3)}
.menu-name{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--primary-text)}
.menu-meta{margin-top:2px;font-size:var(--fs-sm);color:var(--meta-text)}
.menu-sep{height:1px;margin:0 calc(var(--space-1) * -1) var(--space-1);background:var(--shell-border)}
.menu-item{display:flex;align-items:center;gap:var(--space-2);width:100%;height:32px;padding:0 var(--space-2);border:0;background:none;font:inherit;text-align:left;border-radius:var(--radius-2);font-size:var(--fs-md);color:var(--body-text);text-decoration:none;cursor:pointer;transition:background var(--motion-fast)}
.menu-item span{display:flex;color:var(--meta-text)}
.menu-item:hover,.menu-item:focus-visible{background:var(--gray-100);outline:none}
/* Popover — a menu-style panel holding content instead of items */
.popover{padding:var(--space-4);width:320px}
.popover-title{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--primary-text)}
.popover-text{margin:var(--space-1) 0 0;font-size:var(--fs-md);line-height:1.5;color:var(--body-text)}
.popover-list{list-style:none;margin:var(--space-3) 0 0;padding:0;border-top:1px solid var(--shell-border)}
.popover-list li{padding:var(--space-2) 0;border-bottom:1px solid var(--shell-border)}
.popover-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--primary-text)}
.popover-sub{margin-top:2px;font-size:var(--fs-sm);color:var(--meta-text)}
.popover-foot{margin:var(--space-3) 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--meta-text)}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@media (prefers-reduced-motion: reduce){ .menu{animation:none} }

/* ==========================================================================
   CONFIDENCE — dot + number
   ========================================================================== */
.conf{display:inline-flex;align-items:center;gap:var(--space-2);font-variant-numeric:tabular-nums;color:var(--body-text)}
.conf-dot{width:var(--conf-dot-size);height:var(--conf-dot-size);border-radius:var(--radius-circle);flex:0 0 var(--conf-dot-size)}
.conf.high .conf-dot{background:var(--conf-high-fill)}
.conf.mid .conf-dot{background:var(--conf-mid-fill)}
.conf.low .conf-dot{background:var(--conf-low-fill)}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{position:absolute;right:var(--space-6);bottom:var(--space-6);z-index:60}
.toast .toast-item{display:flex;align-items:center;gap:var(--space-3);min-width:280px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--gray-900);color:var(--surface);border-radius:var(--radius-3);box-shadow:var(--shadow-2);font-size:var(--fs-md);font-weight:var(--fw-medium);animation:toast-in .25s var(--ease-out)}
.toast .toast-item > div{flex:1}
.toast .toast-icon{display:flex;color:#4ADE80}
.toast .toast-item .btn{height:28px;padding:0 var(--space-3);background:transparent;border-color:rgba(255,255,255,.2);color:var(--surface)}
.toast .toast-item .btn:hover{background:rgba(255,255,255,.08);transform:none;box-shadow:none}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}

/* ==========================================================================
   DIALOG  (in-app replacement for confirm()/prompt() — see js/ui/dialog.js)
   ========================================================================== */
.dialog{border:0;padding:0;background:transparent;width:min(var(--dialog-width), calc(100vw - var(--space-7)));max-width:none;overflow:visible}
.dialog::backdrop{background:var(--scrim);animation:scrim-in var(--motion-dialog) ease-out}
.dialog.closing::backdrop{animation:scrim-out var(--motion-dialog) ease-in forwards}

.dialog-panel{position:relative;background:var(--surface);border:1px solid var(--shell-border);border-radius:var(--radius-4);box-shadow:var(--shadow-dialog);padding:var(--space-6);animation:dialog-in var(--motion-dialog) var(--ease-out)}
.dialog.closing .dialog-panel{animation:dialog-out calc(var(--motion-dialog) * .75) ease-in forwards}

.dialog-title{margin:0;padding-right:var(--space-7);font-size:var(--fs-2xl);font-weight:700;color:var(--primary-text)}
.dialog-message{margin:var(--space-2) 0 0;color:var(--meta-text);font-size:var(--fs-base);line-height:1.5}
.dialog-close{position:absolute;top:var(--space-4);right:var(--space-4);display:flex;padding:var(--space-1);border:0;border-radius:var(--radius-1);background:transparent;color:var(--faint-text);cursor:pointer;transition:background var(--motion-medium),color var(--motion-medium)}
.dialog-close:hover{background:var(--table-header-bg);color:var(--body-text)}

.dialog-field{display:block;margin-top:var(--space-5)}
.dialog-label{display:block;margin-bottom:var(--space-2);font-size:var(--fs-md);font-weight:600;color:var(--body-text)}
.dialog-textarea{display:block;width:100%;resize:vertical;min-height:96px;padding:var(--space-2) var(--space-3);border:1px solid var(--input-border);border-radius:var(--radius-2);font:inherit;font-size:var(--fs-base);line-height:1.5;color:var(--body-text);transition:border-color var(--motion-medium),box-shadow var(--motion-medium)}
.dialog-textarea::placeholder{color:var(--faint-text)}
.dialog-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}

.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-6)}
.dialog-footnote{display:flex;align-items:center;gap:var(--space-1h);margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--meta-text)}
.dialog-choices{margin:var(--space-5) 0 0;padding:0;border:0}
.choice-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.choice-chip{height:32px;padding:0 var(--space-3);border:1px solid var(--input-border);border-radius:var(--radius-full);background:var(--surface);font:inherit;font-size:var(--fs-md);color:var(--body-text);cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.choice-chip:hover{border-color:var(--gray-400);background:var(--gray-50)}
.choice-chip[aria-checked="true"]{border-color:var(--gray-900);background:var(--gray-900);color:var(--surface)}
.choice-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes dialog-out{to{opacity:0;transform:translateY(4px) scale(.98)}}
@keyframes scrim-in{from{opacity:0}}
@keyframes scrim-out{to{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .dialog::backdrop,.dialog-panel,.dialog.closing::backdrop,.dialog.closing .dialog-panel{animation:none}
}

/* ==========================================================================
   SHEET — a wide modal centered in the app frame (js/ui/sheet.js)
   ========================================================================== */
.sheet{width:min(880px, calc(100vw - 32px));max-width:none;height:fit-content;max-height:min(680px, calc(100vh - 48px));margin:auto;padding:0;border:0;border-radius:var(--radius-4);background:transparent;overflow:visible}
.sheet::backdrop{background:var(--scrim);animation:scrim-in .25s ease-out}
.sheet.closing::backdrop{animation:scrim-out .2s ease-in forwards}
.sheet-panel{display:flex;flex-direction:column;max-height:min(680px, calc(100vh - 48px));background:var(--surface);border:1px solid var(--shell-border);border-radius:var(--radius-4);box-shadow:var(--shadow-dialog);overflow:hidden;animation:sheet-in .26s var(--ease-out)}
.sheet.closing .sheet-panel{animation:sheet-out .18s ease-in forwards}
.sheet-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6) var(--space-4);border-bottom:1px solid var(--shell-border)}
.sheet-title{margin:0;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:-.02em;color:var(--primary-text)}
.sheet-subtitle{margin-top:2px;font-size:var(--fs-md);color:var(--meta-text)}
.sheet-close{position:static}
.sheet-body{flex:1;min-height:0;overflow:auto;padding:var(--space-5) var(--space-6);scrollbar-width:none}
.sheet-foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-top:1px solid var(--shell-border)}
@keyframes sheet-in{from{transform:translateY(8px) scale(.98);opacity:0}}
@keyframes sheet-out{to{transform:translateY(8px) scale(.98);opacity:0}}
@media (prefers-reduced-motion: reduce){ .sheet::backdrop,.sheet-panel,.sheet.closing::backdrop,.sheet.closing .sheet-panel{animation:none} }

/* compose layout: recipients + subject on the left, the message on the right */
.compose{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-6);overflow:visible}
.compose-col .sheet-field + .sheet-field{margin-top:var(--space-5)}
.compose-col .email-body{min-height:300px}
.attachment{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border:1px solid var(--shell-border);border-radius:var(--radius-2);background:var(--gray-50)}
.attachment-icon{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius-2);background:var(--surface);box-shadow:0 0 0 1px var(--shell-border)}
.attachment[data-format="docx"] .attachment-icon{color:#2B579A}
.attachment[data-format="pdf"] .attachment-icon{color:#C4321E}
.attachment-text{flex:1;min-width:0}
.attachment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--primary-text)}
.attachment-meta{font-size:var(--fs-sm);color:var(--meta-text)}
.attachment .segmented{flex:0 0 auto;background:var(--gray-200)}
.sent-attachment{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-md);color:var(--body-text)}
.sent-attachment svg{color:var(--meta-text)}

.sheet-field + .sheet-field{margin-top:var(--space-6)}
.sheet-field-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}
.sheet-label{margin:0;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--primary-text)}
.sheet-textarea{min-height:0;font-size:var(--fs-md)}
.field-hint{margin:var(--space-1h) 0 0;font-size:var(--fs-sm);color:var(--meta-text)}
.ai-tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:0 var(--space-2);height:20px;border-radius:var(--radius-full);background:var(--ai-soft);color:var(--ai);font-size:var(--fs-xs);font-weight:var(--fw-medium)}

/* Approve sheet: recipient search (To), subject, AI-drafted message */
.sheet-input{display:block;width:100%;height:36px;padding:0 var(--space-3);border:1px solid var(--input-border);border-radius:var(--radius-2);font:inherit;font-size:var(--fs-md);color:var(--primary-text);background:var(--surface)}
.sheet-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}
.email-body{line-height:1.55}
.recipient-box{position:relative}
.recipient-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1h);min-height:36px;padding:var(--space-1) var(--space-1h);border:1px solid var(--input-border);border-radius:var(--radius-2);background:var(--surface);cursor:text}
.recipient-chips:focus-within{border-color:var(--accent);box-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring-color)}
.recipient-input{flex:1;min-width:140px;height:26px;padding:0 var(--space-1h);border:0;outline:none;background:transparent;font:inherit;font-size:var(--fs-md);color:var(--primary-text)}
.recipient-input::placeholder{color:var(--faint-text)}
.recipient-chip{display:inline-flex;align-items:center;gap:var(--space-1h);height:26px;padding:0 2px 0 3px;border-radius:var(--radius-full);background:var(--gray-100);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--primary-text);animation:chip-in var(--motion-fast) var(--ease-out)}
.recipient-chip .avatar{width:20px;height:20px;font-size:9px}
.recipient-chip-email{font-weight:var(--fw-regular);color:var(--meta-text)}
.recipient-chip-remove{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:var(--radius-circle);background:transparent;color:var(--meta-text);cursor:pointer}
.recipient-chip-remove:hover{background:var(--gray-200);color:var(--primary-text)}
@keyframes chip-in{from{opacity:0;transform:scale(.92)}}
.recipient-results{position:absolute;z-index:5;left:0;right:0;top:calc(100% + var(--space-1));margin:0;padding:var(--space-1);list-style:none;background:var(--surface);border:1px solid var(--shell-border);border-radius:var(--radius-3);box-shadow:var(--shadow-2)}
.recipient-option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-2);cursor:pointer}
.recipient-option.active{background:var(--gray-100)}
.recipient-option-text{display:flex;flex-direction:column;min-width:0}
.recipient-option-name{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--primary-text)}
.recipient-option-meta{font-size:var(--fs-sm);color:var(--meta-text)}
.recipient-none{padding:var(--space-2);font-size:var(--fs-md);color:var(--meta-text)}

/* Approve sheet: sent confirmation */
.sent{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.sent-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-circle);background:var(--chip-approved-bg);color:var(--chip-approved-text);animation:sent-pop .35s var(--ease-out)}
@keyframes sent-pop{from{opacity:0;transform:scale(.6)}}
.sent-lead{margin:0;font-size:var(--fs-base);line-height:1.5;color:var(--body-text)}
.sent-list{list-style:none;margin:0;padding:0;width:100%;border:1px solid var(--shell-border);border-radius:var(--radius-2)}
.sent-item{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--fs-md)}
.sent-item + .sent-item{border-top:1px solid var(--shell-border)}
.sent-name{font-weight:var(--fw-medium);color:var(--primary-text)}
.sent-email{color:var(--meta-text)}
@media (prefers-reduced-motion: reduce){ .sent-icon,.recipient-chip{animation:none} }

/* ==========================================================================
   PROCEDURE LINK — ID → source document in the procedure library (new tab)
   ========================================================================== */
.proc-link{display:inline-flex;align-items:center;gap:3px;width:fit-content;color:var(--accent);text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.35);text-underline-offset:3px;font-variant-numeric:tabular-nums;border-radius:var(--radius-xs);transition:color var(--motion-fast)}
.proc-link svg{flex:0 0 auto;opacity:.85;transition:opacity var(--motion-fast)}
.proc-link:hover{text-decoration-color:currentColor}
.proc-link:hover svg{opacity:1}
.proc-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Welcome note (js/ui/welcome.js): a dialog on first visit that "minimizes"
   into a tab docked to the bottom right edge; the tab reopens it. */
.welcome{--dialog-width:552px}
.welcome .dialog-panel{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6)}
.welcome .dialog-panel:focus{outline:none}
.welcome-close{top:var(--space-3);right:var(--space-3);width:28px;height:28px;padding:0;justify-content:center;align-items:center;border-radius:var(--radius-2)}
.welcome-header{display:flex;align-items:center;gap:var(--space-2h, 10px);padding-right:var(--space-6)}   /* clear of the close button */
.welcome-mark{flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius-2)}   /* = the title's line height */
.welcome-title{margin:0;font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:-.01em;color:var(--primary-text)}
.welcome-notes{display:flex;flex-direction:column;gap:var(--space-2)}
.welcome-intro{margin:0 0 var(--space-1);font-size:var(--fs-base);line-height:1.5;color:var(--body-text)}
.welcome-note strong{font-weight:var(--fw-semibold);color:var(--primary-text)}
.welcome-note{display:flex;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--shell-border);border-radius:var(--radius-3);background:var(--gray-50)}
.welcome-note p{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--body-text)}
.welcome-note-icon{display:flex;flex:0 0 auto;margin-top:1px;color:var(--accent)}
.welcome-footer{display:flex;justify-content:flex-end}
/* closing uses the standard dialog fade/scale-out; then the tab slides up */

.welcome-tab{position:absolute;right:var(--space-6);bottom:0;z-index:50;display:flex;align-items:center;gap:var(--space-1h);height:36px;padding:0 var(--space-2) 0 var(--space-3);border:1px solid var(--shell-border);border-bottom:0;border-radius:var(--radius-3) var(--radius-3) 0 0;background:var(--surface);box-shadow:var(--shadow-2);font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--body-text);cursor:pointer;animation:welcome-tab-in .2s var(--ease-out);transition:background var(--motion-fast),color var(--motion-fast),height var(--motion-fast)}
.welcome-tab[hidden]{display:none}
.welcome-tab > svg{color:var(--accent)}
.welcome-tab-chevron{display:flex;color:var(--meta-text)}
.welcome-tab:hover{height:40px;background:var(--gray-50);color:var(--primary-text)}
.welcome-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes welcome-tab-in{from{transform:translateY(100%)}}
/* keep toasts clear of the tab */
.has-welcome-tab .toast{bottom:calc(36px + var(--space-4))}
.has-welcome-tab .app-main{padding-bottom:calc(36px + var(--space-6))}   /* last row scrolls clear of the tab */
@media (prefers-reduced-motion:reduce){ .welcome-tab{animation:none} }