/* Phase 1/2: shared usability and the community homepage. */
:root { --muted:#96969b; --muted2:#7d7d83; --surface:#141416; --surface2:#1c1c20; --border:#29292e; --border2:#36363d; }
body { background:#0c0c0e; }
.skip-link { position:fixed; left:1rem; top:-100px; z-index:600; padding:.8rem 1rem; background:var(--accent); color:#111; border-radius:8px; }
.skip-link:focus { top:.5rem; }
:is(button,a,input,select,summary,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.beta-banner { display:flex; align-items:center; justify-content:center; gap:1.5rem; padding:.4rem .75rem; flex-shrink:0; background:#241d30; color:#c6b8de; border-bottom:1px solid #413348; font-size:.72rem; }
.beta-banner strong { color:#eadbff; }
.beta-banner a { color:#eadbff; white-space:nowrap; }
#app { scrollbar-gutter:stable; padding:1.5rem 2rem 2.5rem; }
.btn { min-height:36px; justify-content:center; }
.tab-pill, .local-tab-btn { min-height:36px; }
.modal-close { width:44px; height:44px; border-radius:8px; background:var(--surface2); top:.7rem; right:.7rem; color:var(--text); }
dialog.modal { margin:0; color:var(--text); max-height:85dvh; padding-top:3.2rem; }
#viewer-modal::backdrop, .preview-notice::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }
.preview-notice { margin:auto; background:var(--surface); color:var(--text); border:1px solid var(--border2); padding:1.5rem; border-radius:16px; max-width:min(480px,92vw); }
.preview-notice p { margin:.75rem 0 1.25rem; color:var(--muted); line-height:1.6; }
.preview-notice > div { display:flex; flex-wrap:wrap; gap:.75rem; }
.teams-hero-bar { grid-template-columns:repeat(4,minmax(0,1fr)); }
.teams-hero-stat { min-width:0; }
.teams-hero-num { max-width:100%; overflow-wrap:anywhere; white-space:normal; overflow:visible; text-overflow:clip; font-size:clamp(1.1rem,2.4vw,1.45rem); }
.teams-hero-lbl { font-size:.72rem; line-height:1.4; }
#viewer-table.period-daily .col-today-secondary { display:none; }
.recent-race-cards { display:none; }
.home-masthead { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:1.25rem; margin:0 0 1rem; }
#page-home .home-title-block { text-align:center; padding:.5rem 0; margin:0; min-width:0; }
#page-home .home-join-card { max-width:300px; padding:.8rem 1rem; border-radius:10px; min-width:0; }
.home-join-card h2 { font-size:1.05rem; margin:.35rem 0; }
.home-join-card .card-desc { font-size:.74rem; line-height:1.45; margin-bottom:.65rem; }
.home-join-card .auth-buttons { gap:.4rem; }
.home-join-card .btn { padding:.4rem .65rem; font-size:.72rem; }
#page-home .home-present { font-size:.68rem; letter-spacing:.2em; color:var(--muted); margin-bottom:.5rem; }
#page-home .home-main-title { font-size:clamp(2rem,3.7vw,3.4rem); line-height:1.08; letter-spacing:-.04em; margin:0; }
.home-intro { font-size:.85rem; color:#a8a8ae; margin-top:.5rem; }
.home-masthead-actions { display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.home-season { font-size:.73rem; color:#b3b3ba; text-align:right; max-width:280px; }
.home-guide-link { color:var(--muted); font-size:.75rem; }
#page-home .home-title-block::after { display:none; }
#page-home .hw-title-decor { opacity:.35; }
#page-home .home-event-banner { max-width:none; margin:0 0 1rem; padding:.65rem 1rem; border-radius:10px; gap:.75rem; font-size:.8rem; line-height:1.45; }
#page-home .home-event-emoji { font-size:1.25rem; }
#page-home .home-event-banner .btn { min-height:34px; flex-shrink:0; }
#page-home .home-stat-strip { background:none; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0; padding:.65rem 0; margin:0 0 1rem; }
#page-home .hero-stats, #page-home .hero-stats.hero-stats--8 { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0; }
#page-home .hero-stat { background:none; border:0; padding:.1rem .65rem; border-left:1px solid var(--border); border-radius:0; align-items:flex-start; text-align:left; gap:.2rem; min-width:0; }
#page-home .hero-stat:first-child { border:0; padding-left:0; }
#page-home .hero-stat::before { display:none; }
#page-home .hero-num { color:var(--text); font-size:clamp(1rem,1.55vw,1.4rem); font-variant-numeric:tabular-nums; line-height:1.2; letter-spacing:-.03em; }
#page-home .hero-label { color:var(--muted); font-size:.69rem; letter-spacing:.04em; text-transform:none; }
.home-section-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.home-section-heading h2 { font-size:1.35rem; letter-spacing:-.025em; font-weight:750; margin-top:.25rem; }
.home-eyebrow { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.home-text-link { color:var(--muted); font-size:.76rem; white-space:nowrap; padding:.4rem 0; }
.home-text-link:hover { color:var(--accent); }
.home-count-badge { font-size:.75rem; color:#86d8ad; background:#16271f; border:1px solid #294936; padding:.35rem .6rem; border-radius:6px; white-space:nowrap; }
.live-dot { display:inline-block; width:6px; height:6px; background:#63d89b; border-radius:50%; flex-shrink:0; box-shadow:0 0 9px #63d89b40; }
.home-live-hub { padding:.75rem; background:linear-gradient(125deg,#151719,#131316); border:1px solid #2c3334; border-radius:12px; margin-bottom:1rem; }
.home-live-hub .home-section-heading { margin-bottom:.55rem; }
.home-live-heading { display:flex; align-items:center; gap:.75rem; }
.home-live-hub .home-section-heading h2 { display:flex; align-items:center; gap:.55rem; font-size:1rem; margin:0; }
.home-live-body { display:grid; grid-template-columns:minmax(0,1fr); gap:.85rem; }
.home-live-directory { min-width:0; }
#page-home .home-live-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.2rem .6rem; max-height:220px; overflow:auto; align-content:start; }
#page-home .home-live-chip { display:flex; align-items:center; gap:0; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:0; background:none; min-width:0; margin:0; }
.home-live-person { display:flex; flex-direction:row; align-items:center; gap:.5rem; min-width:0; flex:1; background:none; color:var(--text); border:0; padding:.3rem .15rem; text-align:left; font:inherit; cursor:pointer; min-height:44px; }
.home-live-name { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.79rem; font-weight:650; }
.home-live-uptime { display:block; font-size:.62rem; font-weight:400; color:var(--muted); margin-top:.1rem; }
.home-live-watch { display:flex; align-items:center; justify-content:center; width:36px; min-height:44px; flex-shrink:0; color:#b5a1df; font-size:1.1rem; }
.home-live-more { display:none; margin-top:.65rem; background:none; color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:.65rem .75rem; width:100%; cursor:pointer; font:inherit; font-size:.78rem; }
.home-featured { display:none; min-width:402px; }
.home-featured-head { display:none; justify-content:space-between; gap:1rem; margin:0; font-size:.68rem; color:var(--muted); }
.home-featured-head a { color:#c8b7ef; }
.home-featured-player { width:100%; height:302px; background:#09090b; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.home-featured-player iframe { border:0; width:100%; height:100%; display:block; }
.home-competition, .home-standings { min-width:0; }
.home-results { margin-bottom:1rem; }
.home-contests-and-teams { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; margin-bottom:1.25rem; }
.home-contests-and-teams .home-section-heading { margin-bottom:.6rem; }
.home-contests-and-teams h2 { font-size:1.05rem; margin:0; }
.home-spotlight-grid { display:grid; grid-template-columns:1fr; gap:.5rem; }
.home-spotlight { display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem; border:1px solid #4d3b21; border-radius:10px; background:linear-gradient(110deg,#242014,#171619); transition:border-color .15s,transform .15s; }
.home-spotlight-content { flex:1; min-width:0; }
.home-spotlight-arrow { color:var(--muted); }
.home-competition-data { font-size:.74rem; color:#c5c5cb; line-height:1.5; overflow-wrap:anywhere; }
.home-spotlight:hover { border-color:#aa7934; transform:translateY(-2px); }
.home-spotlight--raid { border-color:#3d3151; background:linear-gradient(110deg,#211b2e,#171619); }
.home-spotlight--raid:hover { border-color:#775499; }
.home-spotlight--raid .home-eyebrow { color:#bd9be7; }
.home-spotlight-icon { display:grid; place-items:center; font-size:1.8rem; width:40px; height:40px; flex-shrink:0; color:var(--accent); border:1px solid #534023; border-radius:8px; background:#33261570; }
.home-spotlight--raid .home-spotlight-icon { color:#bd9be7; border-color:#534067; background:#3e285270; }
.home-spotlight h3 { font-size:.98rem; margin:.25rem 0; letter-spacing:-.025em; overflow-wrap:anywhere; }
.home-spotlight p { color:var(--muted); font-size:.7rem; line-height:1.5; margin:.3rem 0 0; }
#page-home .home-top-teams-grid { display:grid; grid-template-columns:1fr; gap:.5rem; }
#page-home .home-team-card { position:relative; display:grid; grid-template-columns:18px 28px minmax(0,1fr) auto; align-items:center; gap:.65rem; text-align:left; color:var(--text); font:inherit; padding:.6rem .75rem; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; background:var(--surface); min-width:0; cursor:pointer; transition:background .15s; }
#page-home .home-team-card:hover { background:#1b1b20; }
#page-home .home-team-card--first { background:linear-gradient(140deg,#292314,#171719); border-color:#584629; }
#page-home .home-team-rank { position:static; color:var(--muted); font-size:.8rem; }
#page-home .home-team-card--first .home-team-rank { color:var(--accent); }
.home-team-logo { display:grid; place-items:center; }
#page-home .home-team-info { display:block; padding:0; margin:0; min-width:0; width:100%; }
#page-home .home-team-tag { font-size:.6rem; display:inline; margin:0; letter-spacing:.03em; }
#page-home .home-team-name { display:inline; font-size:.85rem; font-weight:750; white-space:normal; overflow-wrap:anywhere; }
.home-team-detail { display:block; font-size:.63rem; color:var(--muted); margin-top:.2rem; line-height:1.45; }
#page-home .home-team-score { display:flex; flex-direction:column; align-items:flex-end; font-size:1.05rem; font-weight:750; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; margin:0; }
.home-team-score small { font-size:.6rem; font-weight:500; color:var(--muted); letter-spacing:0; }
#page-home .home-grid-top, #page-home .home-grid-top.home-grid-top--tilt { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:2rem; }
.home-board { min-width:0; padding:1rem 1.2rem; }
.home-board-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem; }
.home-board-heading h2 { font-size:1rem; letter-spacing:-.015em; }
#page-home .mini-table th { font-size:.62rem; color:var(--muted); font-weight:550; }
#page-home .mini-table td { padding:.65rem .4rem; font-size:.8rem; }
#page-home .mini-table td:nth-child(2) { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-home .mini-table tr.rank-row-1 td, #page-home .mini-table tr.rank-row-2 td, #page-home .mini-table tr.rank-row-3 td { background:none; }
#page-home .activity-feed { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
#page-home .activity-feed li { border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:.8rem 1rem; min-width:0; }
#page-home .ev-line1 { gap:.55rem; }
#page-home .ev-line2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); margin-top:.3rem; }
#page-home .card--auth { background:linear-gradient(130deg,#272116,#141416); border-color:#544226; }
.site-footer { padding:.6rem .75rem; font-size:.68rem; color:var(--muted); }
@media (min-width:1100px) {
  .home-live-hub .home-section-heading { display:grid; grid-template-columns:minmax(0,1fr) 402px; gap:.85rem; }
  .home-featured-head { display:flex; }
  .home-live-body { grid-template-columns:minmax(0,1fr) 402px; }
  #page-home .home-live-list { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:320px; }
  .home-featured { display:block; }
}
@media (max-width:900px) {
  .topnav { max-height:calc(100dvh - 54px); overflow-y:auto; overscroll-behavior:contain; }
  .nav-dropdown-menu { position:static; box-shadow:none; border:0; padding:0 0 0 1rem; background:var(--surface); }
  .nav-dropdown-toggle { width:100%; text-align:left; }
  .teams-hero-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-home .home-grid-top, #page-home .home-grid-top.home-grid-top--tilt { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #home-tilt-card { grid-column:1 / -1; }
}
@media (max-width:1099px) {
  #page-home .hero-stats, #page-home .hero-stats.hero-stats--8 { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:.65rem; }
  #page-home .hero-stat:nth-child(4n+1) { border-left:0; padding-left:0; }
}
@media (max-width:720px) {
  #app { padding:1rem .85rem 2rem; scrollbar-gutter:auto; }
  .beta-banner { justify-content:space-between; gap:.5rem; font-size:.63rem; padding:.4rem .75rem; }
  .beta-banner span { max-width:80%; }
  .btn, .tab-pill, .local-tab-btn, .docs-nav button, .cap-tab-bar button, .inbox-icon-btn { min-height:44px; }
  .nav-hamburger { width:44px; height:44px; flex-shrink:0; }
  .auth-widget .btn { padding:.45rem .8rem; }
  .search-input, select.search-input { min-height:44px; font-size:16px; }
  .home-masthead { grid-template-columns:1fr; margin:0 0 .8rem; gap:.65rem; }
  #page-home .home-title-block { grid-row:1; padding:.25rem 0 .5rem; }
  #page-home .home-main-title { font-size:2.1rem; max-width:none; }
  #page-home .home-join-card { max-width:none; padding:.65rem .75rem; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:.65rem; }
  .home-join-card > .home-eyebrow { grid-column:1 / -1; }
  .home-join-card h2 { grid-column:1; }
  .home-join-card .card-desc { grid-column:1; margin:0; font-size:.68rem; }
  .home-join-card .auth-buttons { grid-column:2; grid-row:2 / 4; flex-direction:column; justify-content:center; }
  #page-home .home-present { font-size:.57rem; letter-spacing:.14em; }
  .home-intro { font-size:.78rem; line-height:1.5; }
  .home-masthead-actions { display:none; }
  #page-home .home-event-banner { padding:.65rem .75rem; font-size:.72rem; gap:.5rem; }
  #page-home .home-event-banner .btn { min-height:36px; font-size:.7rem; }
  #page-home .home-event-banner strong { display:block; }
  #page-home .home-stat-strip { padding:.6rem 0; margin-bottom:.8rem; }
  #page-home .hero-stats, #page-home .hero-stats.hero-stats--8 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem .6rem; }
  #page-home .hero-stat { padding:.05rem 0; border:0; }
  #page-home .hero-num { font-size:clamp(.9rem,4vw,1rem); letter-spacing:-.04em; }
  #page-home .hero-label { font-size:.62rem; }
  .home-section-heading { gap:.5rem; margin-bottom:.8rem; }
  .home-section-heading h2 { font-size:1.15rem; }
  .home-eyebrow { font-size:.58rem; letter-spacing:.09em; }
  .home-text-link { font-size:.7rem; }
  .home-live-hub { padding:.65rem; margin-bottom:1rem; }
  .home-live-heading { width:100%; justify-content:space-between; }
  #page-home .home-live-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem .45rem; max-height:none; overflow:visible; }
  #page-home .home-live-list:not(.is-expanded) .live-extra { display:none; }
  .home-live-person { padding:.25rem .1rem; gap:.35rem; min-height:44px; }
  .home-live-name { font-size:.71rem; }
  .home-live-uptime { font-size:.6rem; }
  .home-live-watch { width:44px; min-height:44px; font-size:1rem; }
  .home-live-more:not([hidden]) { display:block; min-height:44px; }
  .home-contests-and-teams { grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
  .home-spotlight { padding:.65rem .75rem; gap:.6rem; }
  .home-spotlight-icon { width:32px; height:32px; font-size:1.4rem; }
  .home-spotlight h3 { font-size:.9rem; }
  .home-competition-data { font-size:.7rem; }
  #page-home .home-team-card { padding:.65rem; gap:.4rem; grid-template-columns:14px 24px minmax(0,1fr) auto; }
  .home-team-logo svg { width:24px; height:24px; }
  #page-home .home-team-name { font-size:.8rem; }
  #page-home .home-team-score { font-size:.95rem; }
  #page-home .home-grid-top, #page-home .home-grid-top.home-grid-top--tilt { grid-template-columns:1fr; gap:.75rem; margin-bottom:1.5rem; }
  #home-tilt-card { grid-column:auto; }
  #page-home .activity-feed { grid-template-columns:1fr; }
  #page-races .table-wrap { display:none; }
  .recent-race-cards { display:grid; gap:.65rem; }
  .recent-race-card { border:1px solid var(--border); border-radius:12px; padding:.9rem; background:var(--surface); min-width:0; }
  .recent-race-meta { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--muted); margin-bottom:.55rem; }
  .recent-race-result { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
  .recent-race-title { background:none; border:0; color:var(--text); text-align:left; font:inherit; font-weight:750; min-height:44px; padding:0; min-width:0; cursor:pointer; overflow-wrap:anywhere; }
  .recent-race-points { flex-shrink:0; font-size:.86rem; color:var(--accent); font-weight:700; }
  .recent-race-map { color:var(--muted); font-size:.76rem; line-height:1.5; margin:.3rem 0 .6rem; overflow-wrap:anywhere; }
  .recent-race-foot { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.72rem; color:var(--muted); }
  .recent-race-foot button { padding:.35rem 0; background:none; border:0; color:var(--blue); font:inherit; cursor:pointer; min-height:44px; }
  #viewer-table th, #viewer-table td { padding:.55rem .4rem; font-size:.75rem; }
  #viewer-table .col-name { max-width:110px; }
  #viewer-table td.col-rank, #viewer-table th.col-rank { min-width:32px; width:32px; }
  #viewer-table td.col-name, #viewer-table th.col-name { left:32px; }
  .teams-hero-stat { padding:.85rem .65rem; }
  .teams-hero-num { font-size:1.1rem; line-height:1.3; }
}
@media (max-width:360px) {
  .logo { font-size:.88rem; }
  .topbar { gap:.3rem; }
  #page-home .home-main-title { font-size:1.85rem; }
  .home-live-person { gap:.3rem; padding:.25rem .1rem; }
  .home-live-person > .live-dot { display:none; }
  .home-team-score { font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* Guide tables wrap within the page at desktop and phone widths. */
#page-docs .docs-table { table-layout:fixed; }
#page-docs .docs-table th, #page-docs .docs-table td { white-space:normal; overflow-wrap:anywhere; min-width:0; }
#page-docs .docs-table th:first-child { width:35%; }