/**
 * system.css — QuarterUp design system class recipes.
 * Transcribed from the design system's components/*.jsx specs. Load AFTER foundation.css,
 * BEFORE components.css / views. Views use ONLY these classes + tokens for visual styling.
 * One class per component; variants as modifier classes. No per-view restyling.
 */

/* ---- Button (components/core/Button.jsx) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none;font-family:var(--font-mono);font-weight:700;font-size:var(--text-body);padding:var(--space-3) var(--space-5);border:1px solid transparent;border-radius:var(--radius-md);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;flex-shrink:0;transition:all var(--dur-fast) ease;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn[hidden]{display:none;}
.btn-primary{background:var(--green);color:var(--bg-mid);}
.btn-primary:hover:not(:disabled){background:var(--green-deep);box-shadow:var(--glow-focus);}
.btn-secondary{background:var(--teal-deep);color:var(--white);}
.btn-secondary:hover:not(:disabled){background:var(--teal-deep-hover);}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border-strong);}
.btn-ghost:hover:not(:disabled){border-color:var(--border-active);color:var(--green);}
.btn-danger{background:rgb(var(--red-rgb) / .15);color:var(--red);border-color:rgb(var(--red-rgb) / .4);}
.btn-danger:hover:not(:disabled){background:rgb(var(--red-rgb) / .25);}
.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-body-sm);}
.btn-icon{padding:0;width:36px;height:36px;}
.btn-icon-sm{padding:0;width:28px;height:28px;font-size:var(--text-body-sm);}
.btn[aria-pressed="true"],.btn.is-pressed{background:var(--green-tint);border-color:var(--border-active);color:var(--green);}
.btn:focus-visible{outline:none;box-shadow:var(--glow-focus);}

/* ---- Card (components/core/Card.jsx) ---- */
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-5);}
.card-flush{padding:0;overflow:hidden;}
.card-interactive{cursor:pointer;transition:all var(--dur-med) var(--ease-out);}
.card-interactive:hover{border-color:var(--border-active);transform:var(--lift-hover);}
.card-selected{border-color:var(--border-active);}
.card-live{border-color:var(--border-active);box-shadow:var(--glow-live);}   /* ONE per view */

/* ---- Badge (status pill, arcade) + Chip (filter tag, mono) ---- */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-arcade);font-size:var(--text-label);line-height:1;padding:6px 10px;border:1px solid;border-radius:var(--radius-pill);text-transform:uppercase;white-space:nowrap;}
.badge-green{color:var(--green);background:var(--green-tint);border-color:var(--green-veil);}
.badge-gold{color:var(--gold);background:rgb(var(--gold-rgb) / .1);border-color:rgb(var(--gold-rgb) / .3);}
.badge-purple{color:var(--purple-bright);background:rgb(var(--purple-bright-rgb) / .1);border-color:rgb(var(--purple-bright-rgb) / .3);}
.badge-red{color:var(--red);background:rgb(var(--red-rgb) / .1);border-color:rgb(var(--red-rgb) / .3);}
.badge-blue{color:var(--blue);background:rgb(var(--blue-rgb) / .1);border-color:rgb(var(--blue-rgb) / .3);}
.badge-neutral{color:var(--text-secondary);background:var(--white-tint);border-color:var(--border-strong);}
.badge .live-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;animation:qu-pulse 1.5s ease-in-out infinite;}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 6px;border:1px solid;border-radius:var(--radius-sm);white-space:nowrap;}
.tag-gold{color:var(--gold);background:rgb(var(--gold-rgb) / .1);border-color:rgb(var(--gold-rgb) / .3);}
.tag-green{color:var(--green);background:var(--green-tint);border-color:var(--green-veil);}
.tag-red{color:var(--red);background:rgb(var(--red-rgb) / .1);border-color:rgb(var(--red-rgb) / .3);}
.tag-purple{color:var(--purple-bright);background:rgb(var(--purple-bright-rgb) / .1);border-color:rgb(var(--purple-bright-rgb) / .3);}
.tag-neutral{color:var(--text-secondary);background:var(--white-tint);border-color:var(--border-strong);}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 10px;font-family:var(--font-mono);font-size:var(--text-caption);font-weight:600;color:var(--text-secondary);background:var(--white-tint);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--dur-fast) ease;}
.chip:hover{border-color:var(--border-active);}
.chip.is-selected{color:var(--green);background:var(--green-tint);border-color:var(--green-veil);}
.chip-remove{background:none;border:none;padding:0;color:inherit;opacity:.7;cursor:pointer;font-size:14px;line-height:1;}

/* ---- Type helpers ---- */
.t-display{font-family:var(--font-arcade);font-size:var(--text-display);line-height:1.5;}
.t-title{font-family:var(--font-arcade);font-size:var(--text-title);line-height:1.5;color:var(--text-primary);}
.t-heading{font-family:var(--font-arcade);font-size:var(--text-heading);line-height:1.5;color:var(--text-primary);}
.t-label{font-family:var(--font-arcade);font-size:var(--text-label);line-height:1.5;}
.t-eyebrow{font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);line-height:1.5;}
.score{font-family:var(--font-arcade);color:var(--gold);line-height:1.5;font-size:var(--text-score);}
.score-lg{font-size:var(--text-score-lg);text-shadow:0 0 12px rgb(var(--gold-rgb) / .3);}
.score-sm{font-size:var(--text-score-sm);}
.score-xs{font-size:var(--text-micro);}   /* dense counts (seven+ characters) in a narrow stat tile */
@media (max-width:899px){.t-label,.badge,.nav-link{font-size:var(--text-label-touch);}}

/* ---- Forms (Input / SearchBox / Checkbox / custom Select) ---- */
.field{display:flex;flex-direction:column;gap:var(--space-2);}
.field-label{font-family:var(--font-arcade);font-size:var(--text-label);color:var(--green);letter-spacing:1px;text-transform:uppercase;line-height:1.5;}
.field-hint{font-size:var(--text-caption);color:var(--text-muted);}
.input{width:100%;padding:var(--space-3);font-family:var(--font-mono);font-size:16px;color:var(--text-primary);background:var(--white-tint);border:1px solid var(--border-strong);border-radius:var(--radius-md);outline:none;transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;}
.input::placeholder{color:var(--text-muted);}
.input:focus{border-color:var(--border-active);box-shadow:var(--glow-focus);}
.search{position:relative;display:flex;align-items:center;}
.search .input{padding-left:38px;padding-right:36px;}
.search-icon{position:absolute;left:12px;color:var(--text-muted);pointer-events:none;}
.search:focus-within .search-icon{color:var(--green);}
.search-clear{position:absolute;right:8px;width:24px;height:24px;border-radius:50%;background:var(--white-faint);border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;line-height:1;}
.check{position:relative;display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;}
.check input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer;}
.check-box{width:18px;height:18px;flex-shrink:0;margin-top:1px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--white-tint);border:1px solid var(--border-strong);transition:all var(--dur-fast) ease;}
.check-radio .check-box{border-radius:50%;}
.check:hover .check-box{border-color:var(--border-active);}
.check input:checked+.check-box{background:var(--green);border-color:var(--green);}
.check:not(.check-radio) input:checked+.check-box::after{content:'';width:5px;height:9px;margin-top:-2px;border:solid var(--bg-mid);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none;}   /* tick: a filled box alone reads as 'on' only by colour */
.check-radio input:checked+.check-box{background:transparent;}
.check-radio input:checked+.check-box::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);}
.check input:focus-visible+.check-box{box-shadow:var(--glow-focus);}
/* custom dropdown — NEVER a native <select>; <qu-select> (js/utils/dropdown.js) keeps its <option>s / <optgroup>s as a hidden model */
qu-select>option,qu-select>optgroup{display:none;}
.dd{position:relative;}
.dd-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:150px;padding:var(--space-3);font-family:var(--font-mono);font-size:var(--text-body-sm);font-weight:600;color:var(--text-secondary);background:var(--white-tint);border:1px solid var(--border-strong);border-radius:var(--radius-md);cursor:pointer;transition:all var(--dur-fast) ease;}
.dd-btn svg{color:var(--green);transition:transform var(--dur-fast) ease;}
.dd-btn:hover,.dd.open .dd-btn{border-color:var(--border-active);color:var(--text-primary);}
.dd.open .dd-btn{box-shadow:var(--glow-focus);}
.dd.open .dd-btn svg{transform:rotate(180deg);}
.dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:100%;z-index:1000;padding:var(--space-1);background:var(--surface-raised);border:1px solid var(--border-active);border-radius:var(--radius-md);box-shadow:var(--shadow-raised);}
.dd.open .dd-menu{display:flex;flex-direction:column;gap:2px;}
.dd-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--text-secondary);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;white-space:nowrap;}
.dd-item:hover{background:var(--green-tint);color:var(--text-primary);}
.dd-item.is-selected{color:var(--green);}
.dd-item.is-selected::after{content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);}
.dd-item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;}   /* list pickers (size) truncate; full text in title */
.dd-item.is-danger{color:var(--red);}
.dd-item.is-danger:hover{background:rgb(var(--red-rgb) / .1);}
.dd-divider{height:1px;background:var(--border-default);margin:4px 0;}
.dd-group{display:flex;flex-direction:column;gap:2px;}   /* <optgroup>: eyebrow header + its options */
.dd-group-label{padding:var(--space-2) var(--space-3) var(--space-1);}
.dd-menu.align-right{left:auto;right:0;}

/* ---- Tabs ---- */
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border-default);}
.tab{background:none;border:none;cursor:pointer;font-family:var(--font-arcade);font-size:var(--text-label);letter-spacing:1px;line-height:1;text-transform:uppercase;color:var(--text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) ease;}
.tab.is-active,.tab[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green);}

/* ---- Sidebar / nav ---- */
.sidebar{width:190px;flex-shrink:0;border-right:1px solid var(--border-default);background:var(--surface-page);padding:var(--space-5) var(--space-3);display:flex;flex-direction:column;gap:var(--space-8);position:sticky;top:0;height:100vh;}
.nav{display:flex;flex-direction:column;gap:var(--space-1);}
.nav-section{font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;padding:var(--space-4) var(--space-2) var(--space-1);}
.nav-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);font-family:var(--font-arcade);font-size:var(--text-label);line-height:1.5;text-transform:uppercase;color:var(--text-muted);border:1px solid transparent;text-decoration:none;cursor:pointer;transition:all var(--dur-fast) ease;}
.nav-link:hover{color:var(--text-primary);background:var(--white-tint);}
.nav-link.is-active{color:var(--green);background:var(--green-tint);border-color:var(--green-veil);}
.nav-count{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--bg-mid);background:var(--green);border-radius:var(--radius-pill);padding:1px 6px;}

/* ---- Toast (float | inline) ---- */
.toast{display:flex;align-items:flex-start;gap:var(--space-3);border:1px solid;border-left:3px solid;border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);background:var(--surface-overlay);backdrop-filter:blur(12px);box-shadow:var(--shadow-raised);max-width:380px;}
.toast-inline{background:transparent;backdrop-filter:none;box-shadow:none;max-width:none;padding:var(--space-4);}
.toast-success{color:var(--green);border-color:var(--green-veil);}       .toast-inline.toast-success{background:var(--green-ghost);}
.toast-error{color:var(--red);border-color:rgb(var(--red-rgb) / .35);}   .toast-inline.toast-error{background:rgb(var(--red-rgb) / .06);}
.toast-warning{color:var(--yellow);border-color:rgb(var(--yellow-rgb) / .35);} .toast-inline.toast-warning{background:rgb(var(--yellow-rgb) / .06);}
.toast-info{color:var(--blue);border-color:rgb(var(--blue-rgb) / .35);}  .toast-inline.toast-info{background:rgb(var(--blue-rgb) / .06);}
.toast-title{font-family:var(--font-arcade);font-size:var(--text-label);line-height:1.5;text-transform:uppercase;}
.toast-body{font-size:var(--text-body-sm);color:var(--text-secondary);margin-top:var(--space-2);}
.toast-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;line-height:1;margin-left:auto;}
.toast-action{display:block;margin-top:var(--space-2);padding:0;background:none;border:none;cursor:pointer;color:inherit;font-family:var(--font-mono);font-size:var(--text-body-sm);font-weight:700;text-decoration:underline;}
.toast-action-right{display:inline-block;margin:0 0 0 var(--space-3);align-self:center;white-space:nowrap;}

/* ---- Modal ---- */
.modal-backdrop{position:fixed;inset:0;background:rgb(var(--black-rgb) / .7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-5);}
.modal-backdrop[hidden]{display:none;}
.modal{background:var(--surface-raised);border:1px solid var(--border-active);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);width:100%;max-width:600px;max-height:85vh;overflow-y:auto;padding:var(--space-6);}
.modal-lg{max-width:960px;}
.modal-backdrop:has(>.modal-sheet){align-items:flex-end;padding:0;z-index:calc(var(--z-fab) + 1);}   /* drawer = .modal-backdrop > .modal.modal-sheet: a bottom sheet at every width, above the dock / FAB / phone status bar */
.modal-backdrop>.modal.modal-sheet{height:auto;max-width:600px;max-height:85dvh;overflow-y:auto;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-6) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom,0px));}   /* sized to content; the body scrolls inside */
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);}
.modal-title{font-family:var(--font-arcade);font-size:var(--text-heading);line-height:1.5;color:var(--green);text-transform:uppercase;}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6);}

/* ---- EmptyState / Skeleton ---- */
.empty{text-align:center;padding:var(--space-16) var(--space-5);}
.empty-title{font-family:var(--font-arcade);font-size:var(--text-heading);color:var(--green);line-height:1.5;text-transform:uppercase;margin-bottom:var(--space-3);}
.empty-body{font-size:var(--text-body-sm);color:var(--text-muted);max-width:380px;margin:0 auto;}
.empty-action{margin-top:var(--space-5);}
.empty-filtered{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-4);font-size:var(--text-body-sm);color:var(--text-muted);text-align:left;}
.skeleton{background:linear-gradient(90deg,var(--white-tint) 0%,var(--white-faint) 50%,var(--white-tint) 100%);background-size:200% 100%;animation:qu-shimmer 1.6s ease-in-out infinite;border-radius:var(--radius-sm);}
.skeleton-text{height:12px;width:70%;} .skeleton-title{height:16px;width:40%;} .skeleton-art{width:160px;aspect-ratio:4/3;border-radius:var(--radius-md);}
.skeleton-row{height:58px;width:100%;border-radius:0;border-bottom:1px solid var(--border-default);} .skeleton-tile{height:84px;width:100%;border-radius:var(--radius-lg);}

/* ---- Progress / StatusDot / Tooltip ---- */
.progress{height:6px;background:var(--white-faint);border-radius:var(--radius-pill);overflow:hidden;}
.progress-fill{height:100%;background:var(--green);border-radius:inherit;transition:width var(--dur-med) var(--ease-out);}
.progress-gold .progress-fill{background:var(--gold);} .progress-purple .progress-fill{background:var(--purple-bright);} .progress-red .progress-fill{background:var(--red);}
.status{display:inline-flex;align-items:center;gap:var(--space-3);}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--gray-muted);}
.status-online .status-dot{background:var(--green);box-shadow:0 0 6px var(--green);}
.status-online.is-pulsing .status-dot{animation:qu-pulse 1.5s ease-in-out infinite;}   /* only if no LIVE pill on screen */
.status-busy .status-dot{background:var(--yellow);box-shadow:0 0 6px var(--yellow);}
.status-offline .status-dot{background:var(--red);box-shadow:0 0 6px var(--red);}
.tooltip{position:absolute;z-index:60;max-width:240px;padding:var(--space-2) var(--space-3);font-size:var(--text-caption);color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-raised);pointer-events:none;width:max-content;}
.tooltip-trigger{display:inline-grid;flex:none;place-items:center;width:16px;height:16px;padding:0;font:700 10px/1 var(--font-mono);color:var(--text-muted);background:none;border:1px solid currentColor;border-radius:50%;cursor:help;}   /* the 16px "i" that opens a .tooltip; a <button>, or an aria-hidden <span> when its focusable parent opens the tooltip */
.tooltip-trigger:hover,.tooltip-trigger:focus-visible,:focus-visible>.tooltip-trigger{outline:none;color:var(--green);box-shadow:var(--glow-focus);}

/* ---- Table ---- */
.table{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;}
.table-head,.table-row{display:grid;gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border-default);}   /* set grid-template-columns per table via inline style or a view class — fluid tracks: 56px minmax(0,1.5fr) minmax(0,1fr) 90px 80px */
.table-head{padding:var(--space-3) var(--space-4);}
.table-head>*{font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.table-row{border-left:2px solid transparent;color:var(--text-secondary);font-size:var(--text-body-sm);transition:background var(--dur-fast) ease;text-decoration:none;}
.table-row:hover{background:var(--white-tint);}
.table-row.is-highlight{background:var(--green-ghost);border-left-color:var(--green);}
.table-expanded{padding:var(--space-4) var(--space-5);background:var(--white-tint);border-bottom:1px solid var(--border-default);}
.table-foot{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-4);font-size:var(--text-caption);color:var(--text-muted);}
.table-sort{display:inline-flex;align-items:center;gap:4px;padding:0;font-family:var(--font-mono);font-size:var(--text-eyebrow);letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);background:none;border:0;cursor:pointer;}   /* sortable header cell: a <button> in .table-head; the sorted column is .sort-asc/.sort-desc, or its columnheader carries aria-sort */
.table-sort:hover,.table-sort.sort-asc,.table-sort.sort-desc,[aria-sort="ascending"]>.table-sort,[aria-sort="descending"]>.table-sort{color:var(--green);}
.table-sort.sort-asc::after,[aria-sort="ascending"]>.table-sort::after{content:'\25B2';font-size:8px;}
.table-sort.sort-desc::after,[aria-sort="descending"]>.table-sort::after{content:'\25BC';font-size:8px;}
.cell-r{text-align:right;} .cell-truncate{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- ArtFrame (the only way art appears) ---- */
.art{position:relative;aspect-ratio:4/3;flex-shrink:0;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--border-default);background:linear-gradient(135deg,var(--bg-mid),var(--bg-light));display:flex;align-items:center;justify-content:center;transition:border-color var(--dur-fast) ease;}
.art-thumb{width:56px;border-radius:var(--radius-sm);} .art-card{width:160px;} .art-hero{width:340px;} .art-fluid{width:100%;}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.art-vertical img{object-fit:contain;}
.art.is-active{border-color:var(--border-active);}
.art img.art-coin{position:absolute;inset:auto;width:45%;height:auto;object-fit:contain;opacity:.25;}
.art-initials{position:relative;font-family:var(--font-arcade);font-size:12px;color:var(--text-muted);letter-spacing:1px;} .art-hero .art-initials{font-size:24px;} .art-thumb .art-initials{display:none;}
.art-chip{position:absolute;bottom:8px;left:8px;font-family:var(--font-arcade);font-size:8px;line-height:1.5;color:var(--gold);background:var(--black-veil);backdrop-filter:blur(8px);border-radius:var(--radius-sm);padding:4px 6px;white-space:nowrap;} .art-hero .art-chip{font-size:12px;} .art-thumb .art-chip{display:none;}

/* ---- HeroFrame / SessionDock / Fab / Avatar / LeaderboardRow / Stepper ---- */
.hero{position:relative;height:300px;overflow:hidden;background:var(--bg-mid);}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.6);transform:scale(1.1);}
.hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--surface-raised) 100%);}
.hero .art{position:absolute;left:50%;top:var(--space-6);transform:translateX(-50%);width:min(340px,80%);border-color:var(--border-strong);box-shadow:var(--shadow-raised);}
.dock{position:fixed;right:var(--overlay-edge);bottom:var(--overlay-floor);z-index:var(--z-dock);display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface-overlay);backdrop-filter:blur(12px);border:1px solid var(--border-active);border-radius:var(--radius-lg);box-shadow:var(--glow-live),var(--shadow-raised);max-width:calc(100vw - 40px);}
.dock-eyebrow{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-arcade);font-size:8px;color:var(--green);line-height:1.5;}
.dock-eyebrow .live-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;flex-shrink:0;}   /* static: the dock never pulses */
.dock-title{font-family:var(--font-arcade);font-size:var(--text-label);line-height:1.5;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.dock-meta{font-size:11px;color:var(--text-muted);}
.fab{position:fixed;right:var(--overlay-edge);bottom:var(--fab-bottom, var(--overlay-floor));z-index:var(--z-fab);width:var(--fab-size);height:var(--fab-size);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);background:var(--surface-overlay);backdrop-filter:blur(12px);border:1px solid var(--border-strong);box-shadow:var(--shadow-raised);cursor:pointer;transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;}   /* never animate bottom: the FAB jumps with the overlay stack (dock height, sticky bars) instead of sliding across them */
.fab:hover{color:var(--green);border-color:var(--border-active);box-shadow:var(--glow-focus);}
.avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-arcade);font-size:12px;line-height:1;color:var(--green);background:var(--surface-raised);border:1px solid currentColor;text-transform:uppercase;}
.avatar-sm{width:28px;height:28px;font-size:8px;} .avatar-lg{width:64px;height:64px;font-size:16px;} .avatar-gold{color:var(--gold);} .avatar-purple{color:var(--purple-bright);}
.lb-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-default);border-left:2px solid transparent;}
.lb-row.is-you{background:var(--green-ghost);border-left-color:var(--green);}
.lb-rank{font-family:var(--font-arcade);font-size:var(--text-label);width:38px;color:var(--text-muted);} .lb-row.is-top .lb-rank{color:var(--gold);}
.lb-player{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-arcade);font-size:var(--text-label);color:var(--text-primary);} .lb-row.is-you .lb-player{color:var(--green);}
.lb-meta{font-size:var(--text-caption);color:var(--text-muted);}
.steps{list-style:none;display:flex;flex-direction:column;}
.step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-4);}
.step-marker{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-arcade);font-size:8px;color:var(--text-muted);background:var(--surface-card);border:1px solid var(--text-muted);}
.step-done .step-marker{color:var(--bg-mid);background:var(--green);border-color:var(--green);} .step-active .step-marker{color:var(--gold);border-color:var(--gold);} .step-error .step-marker{color:var(--red);border-color:var(--red);}   /* error: the markup puts "!" in the marker; the message is an inline .toast-error */
.step-line{width:1px;flex:1;min-height:20px;background:var(--border-default);margin:4px auto;} .step-done .step-line{background:var(--green-veil);}
.step-title{font-family:var(--font-arcade);font-size:var(--text-label);line-height:1.5;text-transform:uppercase;color:var(--text-primary);} .step-todo .step-title{color:var(--text-muted);}
.step-body{font-size:var(--text-body-sm);color:var(--text-secondary);margin-top:4px;padding-bottom:var(--space-5);}

/* ---- Code / Kbd ---- */
.code{font-family:var(--font-mono);font-size:.9em;color:var(--green);background:var(--green-ghost);border:1px solid var(--green-faint);border-radius:var(--radius-sm);padding:1px 6px;}
.code-block{position:relative;background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:var(--space-4);padding-right:90px;}
.code-block:not(:has(.code-copy)){padding-right:var(--space-4);}   /* no copy button, no 90px reserve */
.code-block pre{margin:0;font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--green);white-space:pre-wrap;word-break:break-all;}
.code-copy{position:absolute;top:8px;right:8px;padding:6px 10px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-secondary);background:var(--white-tint);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;}
.kbd{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-secondary);background:var(--white-tint);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);padding:2px 6px;}

/* ---- Motion (the only keyframes allowed) ---- */
@keyframes qu-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes qu-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes qu-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes qu-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}   /* landing marquee strip only (density-and-motion) */
@keyframes qu-spin{to{transform:rotate(360deg)}}   /* busy indicators: refresh icons, spinners */
@keyframes qu-slide-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:none}}   /* float toast in/out: 0.3s slide from the right (density-and-motion) */
@keyframes qu-slide-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(100%)}}
.rise{animation:qu-rise .6s var(--ease-out) backwards;}
.rise-1{animation-delay:.1s;} .rise-2{animation-delay:.2s;} .rise-3{animation-delay:.3s;}