/* shared parts: every page builds from these (docs/UI_PLAN.md 3) */

/* panels */
.panel { background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: var(--edge-light); padding: var(--panel-pad); display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; min-height: 0; overflow: clip; }
.panel-head { flex: none; height: 24px; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.panel-head h3 { margin: 0; flex: none; font-size: 12px; letter-spacing: var(--tracking-title); color: var(--text-2); white-space: nowrap; }
.panel-legend { min-width: 0; font: 500 11px/1 var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-status { flex: none; font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.panel-head .spacer { flex: 1; }
.panel-note { flex: none; font: 500 12px/1.3 var(--font-ui); color: var(--text-3); }
.panel-note.failed { color: var(--neg); }
.panel.collecting { gap: 0; }
.sublabel { font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.few { font: 500 11px/1.2 var(--font-ui); color: var(--text-3); white-space: nowrap; }

/* stats: a value over a label; main, normal and minor sizes */
.stat-row { display: flex; align-items: center; gap: 22px; padding-left: 18px; border-left: 1px solid var(--line-slot); }
.stat { display: flex; flex-direction: column; gap: var(--space-3); cursor: default; }
.stat-value { display: flex; align-items: baseline; gap: var(--space-3); font: 600 18px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
.stat.main .stat-value { font-size: 24px; }
.stat.minor .stat-value { font-size: 14px; color: var(--text-2); }
.stat-gain { font: 600 12px/1 var(--font-mono); }

/* one number format: pick share, then win rate (or its gap) */
.num { font: 500 12px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.num b { margin-right: 7px; font-size: 13px; font-weight: 600; color: var(--text-1); }

/* a section without enough games: one line, as a block or in a panel head */
.progress { align-self: center; width: min(320px, 100%); display: flex; flex-direction: column; gap: var(--space-3); margin: auto 0; }
.progress-text { font: 500 13px/1.3 var(--font-ui); color: var(--text-2); text-align: center; }
.progress.inline { flex-direction: row; align-items: center; gap: var(--space-5); width: auto; margin: 0; }
.progress.inline .progress-text { font-size: 12px; white-space: nowrap; }

/* waiting for data: outlines with a light sweep, in the lock-in's direction */
.skel { border-radius: var(--radius-md); background: linear-gradient(100deg, var(--bg-raised) 40%, var(--bg-raised-2) 50%, var(--bg-raised) 60%) 0 0 / 300% 100%; animation: cp-shimmer 1.2s linear infinite; }
.skel.line { flex: none; height: 14px; width: 30%; }
.skel.block { flex: 1; min-height: 40px; }
@keyframes cp-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* champion cell: icon, name, role; tables set --cell-icon by row height */
.champ-cell { --cell-icon: 28px; display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.champ-cell .cell-icon { flex: none; width: var(--cell-icon); height: var(--cell-icon); border-radius: var(--radius-md); border: 1px solid var(--line-slot); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast); }
.champ-cell .cell-icon .initials { font-size: 10px; }
.champ-cell.low .cell-icon { border-style: dashed; border-color: var(--line-3); }
.cell-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell-name { font: 600 14px/1 var(--font-ui); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champ-cell.low .cell-name { color: var(--text-2); }
.cell-role { display: flex; align-items: center; gap: var(--space-1); font: 500 11px/1 var(--font-ui); color: var(--text-3); white-space: nowrap; }
.cell-role .role-svg { width: 11px; height: 11px; }
.champ-cell:hover .cell-icon, .lifts:hover .cell-icon { transform: translateY(-1px); border-color: var(--line-3); }

/* tier badge: the letter carries the tier, color only backs it up */
.tier { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--bg-chip); font: 700 14px/1 var(--font-display); color: var(--text-2); }
/* one colour per tier, the same one the tier list rows and the spotlight use */
.tier-splus { --tier: var(--tier-splus); }
.tier-s { --tier: var(--tier-s); }
.tier-a { --tier: var(--tier-a); }
.tier-b { --tier: var(--tier-b); }
.tier-c { --tier: var(--tier-c); }
.tier-d { --tier: var(--tier-d); }
.tier[class*="tier-"] { background: color-mix(in oklch, var(--tier) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tier) 38%, transparent); color: var(--tier); }
.tier.tier-splus { background: var(--tier); color: var(--on-amber); box-shadow: 0 0 12px color-mix(in oklch, var(--tier) 45%, transparent); }
.tier.none { background: transparent; border: 1px dashed var(--line-2); color: var(--text-4); }

/* delta: better / worse than a comparison; inside the noise floor it stays grey */
.delta { font: 600 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.up { color: var(--pos); }
.delta.down { color: var(--neg); }
.delta.zero, .delta.quiet { color: var(--text-3); }

/* data table: 40 px rows (28 dense), sticky header, numbers right aligned in mono; scrolls inside its panel */
.table-scroll { flex: 1; min-height: 0; }
.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 32px;
  padding: 0 var(--space-6);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line-slot);
  font: 600 11px/1 var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--text-3);
  white-space: nowrap;
}
.data-table th.right, .data-table td.right { text-align: right; }
.data-table .sort { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.data-table th.sorted, .data-table .sort:hover { color: var(--text-1); }
.data-table .sort:hover { background: var(--bg-raised-2); }
.sort-idle { display: flex; color: var(--text-4); transition: color var(--dur-fast); }
.sort-idle .ui-svg { width: 12px; height: 12px; }
.data-table .sort:hover .sort-idle { color: var(--text-2); }
.sort-arrow { font-size: 10px; color: var(--amber); }
.data-table td { --cell-icon: 28px; height: 40px; padding: 0 var(--space-6); border-bottom: 1px solid var(--line); font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-table .champ-cell { --cell-icon: inherit; }
.data-table.dense td { --cell-icon: 20px; height: 28px; font-size: 12px; }
.data-table.dense .cell-role { display: none; }
.data-table tbody tr { transition: background var(--dur-fast); }
.data-table tbody tr:hover { background: var(--bg-raised); }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:focus-visible { outline-offset: -2px; }
.data-table tr.selected { background: var(--bg-raised-2); box-shadow: inset 2px 0 0 var(--amber); }
.tier-table.busy .data-table tbody { opacity: .55; transition: opacity var(--dur-base); }
.data-table tr.rise { animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i) * 15ms); }
.data-table .loading-row .skel.line { display: inline-block; width: 70%; height: 12px; vertical-align: middle; }
.data-table .empty-row td { height: 96px; text-align: center; font: 500 14px/1.4 var(--font-ui); color: var(--text-2); white-space: normal; }
.data-table tbody tr:last-child td { border-bottom: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* search field: icon, text, a clear button once there is text */
.field { position: relative; display: flex; align-items: center; height: 30px; min-width: 0; padding: 0 var(--space-1) 0 var(--space-5); border: 1px solid var(--line-slot); border-radius: var(--radius-md); background: var(--bg-app); transition: border-color var(--dur-fast); }
.field:focus-within { border-color: var(--line-3); }
.field > .ui-svg { flex: none; width: 14px; height: 14px; color: var(--text-3); }
.field-input { flex: 1; min-width: 0; height: 100%; padding: 0 var(--space-4); border: 0; outline: none; background: transparent; color: var(--text-1); font: 500 13px/1 var(--font-ui); }
.field-input::-webkit-search-cancel-button { display: none; }
.field-input:focus-visible { outline: none; }
.field-clear { flex: none; display: none; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-3); cursor: pointer; }
.field-clear .ui-svg { width: 12px; height: 12px; }
.field-clear:hover { color: var(--text-1); background: var(--bg-raised-2); }
.field.filled .field-clear { display: grid; }

/* search results: a list under a search field; the active one follows the arrow keys */
.results { position: absolute; z-index: 85; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: var(--space-2); list-style: none; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--bg-raised-2); box-shadow: var(--shadow-pop); }
.result { display: flex; align-items: center; gap: var(--space-5); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-md); cursor: pointer; }
.result[data-index]:hover { background: var(--bg-raised); }
.result.active, .result.active:hover { background: var(--bg-chip); }
.result.note { height: auto; padding: var(--space-4); font: 500 13px/1.4 var(--font-ui); color: var(--text-2); cursor: default; }
.result .champ-cell { flex: 1; }
.result-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--bg-raised); color: var(--text-3); }
.result-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1 var(--font-ui); color: var(--text-1); }
.result-tag { font-weight: 500; color: var(--text-3); }
.result-region, .result-hint { flex: none; font: 600 11px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.result.active .result-hint { color: var(--text-2); }


/* filter bar: in a panel head, on the right of the title */

/* choices: a row of options with one current (role, patch, rank); each option looks and reacts like a button.
   current is outlined in amber; "mine" rows (your own role) fill it, since that choice is yours */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.choice {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 34px;
  padding: 0 var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text-2);
  font: 600 13px/1 var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.choice .role-svg { flex: none; width: 18px; height: 18px; }
.choice:hover { border-color: var(--text-3); background: var(--bg-raised-2); color: var(--text-1); }
.choice.current { border-color: var(--amber); background: color-mix(in oklch, var(--amber) 14%, var(--bg-raised)); color: var(--text-1); }
.choice.current .role-svg { color: var(--amber); }
.choices.mine .choice.current { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }
.choices.mine .choice.current .role-svg { color: var(--on-amber); }
.choice:disabled { border-color: var(--line-slot); background: transparent; color: var(--text-4); cursor: default; }
.choices.locked .choice { cursor: default; }
.choices.locked .choice:not(.current) { border-color: var(--line-slot); background: transparent; color: var(--text-4); }

/* filter bar: a toolbar row over a list, choices on the left and the search on the right */
.filter-bar { flex: none; display: flex; align-items: center; gap: var(--space-7); min-width: 0; }
.filter-groups { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7); min-width: 0; }
.filter-bar .field { width: 220px; height: 34px; margin-left: auto; }
.filter-groups .choices.wide { flex-basis: 100%; }
.filter-bar:has(.choices.wide) { align-items: flex-start; }

/* the components page (#/components) */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: start; gap: var(--space-6); }
.gallery-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-7) var(--space-8); }
.gallery-sample { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.gallery-lines { display: flex; flex-direction: column; gap: var(--space-4); }
.gallery-line { display: grid; grid-template-columns: 24px minmax(0, 1fr) 120px 56px; align-items: center; gap: var(--space-6); }
.gallery-line .delta { text-align: right; }
.gallery-table { height: 420px; display: flex; flex-direction: column; min-height: 0; }
.gallery-table.short { height: 220px; }

/* rank crest: the frame shows the crest at --emblem tall; Riot's image is a 1280x720 canvas with it in the middle */
.emblem { --emblem: 28px; position: relative; flex: none; display: inline-block; width: calc(var(--emblem) * 1.12); height: var(--emblem); overflow: hidden; }
.emblem img { position: absolute; left: 50%; top: 50%; height: calc(var(--emblem) * 2.88); width: auto; transform: translate(-50%, -50%); }
.few-mark, .adjusted-mark { flex: none; display: inline-flex; cursor: default; }
.few-mark .ui-svg { width: 12px; height: 12px; color: var(--text-3); }
.adjusted-mark .ui-svg { width: 15px; height: 15px; color: var(--amber); }
.choice .emblem { --emblem: 30px; }
.choice-plus { margin-left: -2px; font-size: 14px; }

/* select: the browser's own list in the app's frame, as tall as the choices beside it; amber while its value is on */
.select { height: 34px; padding: 0 var(--space-8) 0 var(--space-5); border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378808f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px; appearance: none; color: var(--text-2); font: 600 13px/1 var(--font-display); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; }
.select:hover, .select:focus-visible { border-color: var(--text-3); color: var(--text-1); outline: none; }
.select.current { border-color: var(--amber); color: var(--text-1); background-color: color-mix(in oklch, var(--amber) 14%, var(--bg-raised)); }
.select option { background: var(--bg-raised-2); color: var(--text-1); text-transform: none; }

/* a stat named by its icon, sized to the text around it */
.stat-icon { display: inline-flex; align-items: center; flex: none; color: var(--text-3); cursor: default; }
.stat-icon .gm-icon, .stat-icon .ui-svg { width: 14px; height: 14px; }

/* page header: the same title block at the top of every page (docs/redesign/PLAN.md 3.6) */
.page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-6) var(--space-9); }
.page-head-text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.page-eyebrow { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.page-title { margin: 0; font: 700 var(--fs-2xl)/1.05 var(--font-display); letter-spacing: .01em; color: var(--text-1); }
.page-context { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font: 500 var(--fs-md)/1.4 var(--font-ui); color: var(--text-2); }
.page-context .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); }
.page-context b { font-weight: 600; color: var(--text-1); }
.page-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.page-stack { display: flex; flex-direction: column; gap: var(--section-gap); }
.page-stack > .page-head + * { margin-top: calc(var(--space-7) - var(--section-gap)); }

/* buttons: one primary (amber) per view, a quiet secondary, both 40px; .bar-button stays the small 30px kind */
.button { display: inline-flex; align-items: center; gap: var(--space-4); height: 40px; padding: 0 var(--space-8); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--surface-2) 80%, transparent); color: var(--text-1); font: 600 var(--fs-md)/1 var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.button:hover { background: var(--surface-3); border-color: var(--line-3); }
.button .ui-svg { width: 16px; height: 16px; }
.button.primary { border-color: transparent; background: var(--amber); color: var(--on-amber); box-shadow: 0 6px 20px -8px color-mix(in oklch, var(--amber) 70%, transparent); }
.button.primary:hover { background: color-mix(in oklch, var(--amber) 88%, white); }