/* app shell: tabs in the top bar, the pages beside Live, toasts */
.brand { color: inherit; text-decoration: none; }
.tabs { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: var(--space-1); }
.tab {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  font: 600 14px/1 var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast);
}
.tab:hover, .tab[aria-current="page"] { color: var(--text-1); }
.tab:focus-visible { outline-offset: -6px; }
.tab-line { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--amber); pointer-events: none; }
.tab-line.placed { transition: transform var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out); }
.live-pill { margin-left: var(--space-2); text-decoration: none; }
/* phones only (mobile.css): the bottom bar's way to the tabs that don't fit */
.nav-more { display: none; }
/* phones only (mobile.css): closes the champion grid's sheet on the draft board */
.sheet-done { display: none; }
.live-pill:hover .live-word, .live-pill[aria-current="page"] .live-word { color: var(--text-1); }

body:not([data-tab="live"]) .live-view, body:not([data-tab="live"]) .live-only { display: none; }
.tab-page { display: none; height: calc(100vh - var(--top-h)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--space-9) var(--page-pad) 64px; }
/* every page sits in one centered column and is as tall as its content; the planner gets the wider app column */
.tab-page > * { max-width: var(--page-max); margin-inline: auto; }
.tab-page > .pl-page { max-width: var(--page-max-app); }
body:not([data-tab="live"]) .tab-page { display: block; }
/* Riot's legal line, required on every page (developer.riotgames.com/policies/general); CSS keeps it through page re-renders */
.tab-page::after {
  content: "Comp Forge isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.";
  display: block;
  max-width: 72ch;
  margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  font: 400 var(--fs-xs)/1.5 var(--font-ui);
  color: var(--text-3);
  text-align: center;
}

.empty-state {
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
}
.empty-text { margin: 0; font: 500 14px/1.4 var(--font-ui); color: var(--text-2); }
.empty-state .bar-button { display: inline-flex; align-items: center; text-decoration: none; }

/* a short message under the live pill, over the panel heads' empty right ends: the client moved you (with the way
   back), an undo, a confirmation */
.toast {
  position: fixed;
  z-index: 90;
  top: calc(var(--top-h) + var(--space-3));
  right: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--bg-raised-2);
  box-shadow: var(--shadow-pop);
  translate: 0 -6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.toast.shown { translate: 0 0; opacity: 1; visibility: visible; }
.toast-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-sm); background: var(--live); }
.toast-text { font: 500 13px/1 var(--font-ui); color: var(--text-1); white-space: nowrap; }
.toast-back {
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  font: 600 12px/1 var(--font-display);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
button.toast-back { background: transparent; cursor: pointer; }
.toast-back:hover { border-color: var(--amber); color: var(--amber); }

/* the top bar's search: a champion or a Riot ID, with the region a player is looked up in */
.bar-search { position: relative; flex: none; width: 300px; margin-right: var(--space-4); }
.bar-search .field { height: 32px; background: var(--bg-panel); }
.region {
  flex: none;
  height: 22px;
  padding: 0 var(--space-6) 0 var(--space-4);
  border: 0;
  border-left: 1px solid var(--line-slot);
  background: transparent 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 10px;
  appearance: none;
  outline: none;
  color: var(--text-2);
  font: 600 12px/1 var(--font-display);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
.region:hover, .region:focus-visible { color: var(--text-1); }
.region option { background: var(--bg-raised-2); color: var(--text-1); }

/* "/" focuses the search from any page; the hint leaves once the field is in use */
.bar-search kbd { flex: none; display: grid; place-items: center; min-width: 18px; height: 18px; margin-right: var(--space-3); padding: 0 var(--space-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: 600 11px/1 var(--font-mono); color: var(--text-3); }
.bar-search .field.filled kbd, .bar-search .field:focus-within kbd { display: none; }
.results .result-hint:empty { display: none; }

/* the loading screen, and what to do when the server can't be reached */
.loading-failed { display: grid; justify-items: center; gap: var(--space-6); color: var(--text-2); }
/* on Live "/" goes to the board's own search */
body[data-tab="live"] .bar-search kbd { display: none; }