/* Homepage composition. Shared controls/panels live in design-system.css;
   the current MVP composition is documented in docs/design-system/home.md. */
.home-page.page-width { position:relative; padding-bottom:0; }
body[data-page="home"] .site-footer { margin-top:var(--section-gap); }
.home-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--layout-gap); align-items:center; padding-block:72px var(--space-60); }
.home-intro h1 { margin:0 0 var(--space-24); font-size:var(--text-display); font-weight:var(--font-weight-medium); line-height:var(--line-display); letter-spacing:normal; }
.home-intro h1 > span { color:var(--color-accent-text); }
.home-description { color:var(--color-muted); font-size:var(--text-body); line-height:var(--line-body); }
.home-description strong { color:var(--color-text); font-weight:var(--font-weight-semibold); font-variant-numeric:tabular-nums; white-space:nowrap; }
.home-description [data-home-count] { display:inline-block; vertical-align:baseline; }
.home-description [data-home-count-pending] { min-inline-size:3.4ch; }
.home-description [data-home-count="servers"][data-home-count-pending] { min-inline-size:5.2ch; }
.home-index-copy [data-home-index-online] { display:inline-block; }
.home-index-copy [data-home-index-online][aria-busy="true"] { min-inline-size:5.5ch; }
.home-skeleton { display:inline-block; inline-size:100%; block-size:.75em; vertical-align:baseline; border-radius:var(--radius-small); background:linear-gradient(105deg,var(--color-skeleton),var(--color-skeleton-shine),var(--color-skeleton)); animation:home-skeleton-breathe 1.8s ease-in-out infinite alternate; }
.home-skeleton-rank { inline-size:1ch; block-size:.75em; }
.home-skeleton-avatar { inline-size:var(--avatar-size); block-size:var(--avatar-size); border-radius:var(--radius-pill); }
.home-skeleton-name { inline-size:78%; max-inline-size:14ch; block-size:.75em; }
.home-skeleton-value { inline-size:5ch; block-size:.75em; }
.home-skeleton-trend { inline-size:100%; block-size:var(--space-16); margin-top:var(--space-4); opacity:.5; }
[data-home-loading="true"] .home-index-copy .status-dot { visibility:hidden; }
.home-data-notice, .home-noscript { font-size:var(--text-control); line-height:var(--line-body); margin-top:var(--space-16); }
@keyframes home-skeleton-breathe { from { opacity:.45; } to { opacity:.9; } }

.home-search { position:relative; max-width:520px; margin-top:var(--space-32); scroll-margin-top:calc(var(--header-height) + var(--space-24)); z-index:1; }
.home-search-field.search { width:100%; }
.home-search-results { position:absolute; left:0; right:0; top:calc(100% + var(--space-8)); overflow:auto; max-height:min(460px,55dvh); padding:var(--space-8); box-shadow:var(--shadow-popover); z-index:var(--z-select); }
.home-search-status { color:var(--color-muted); padding:var(--space-12) var(--space-16); font-size:var(--text-small); }
.home-search-match { display:grid; grid-template-columns:var(--avatar-size) minmax(0,1fr) auto; align-items:center; gap:var(--space-12); padding:var(--space-12); border-radius:var(--radius-control); }
.home-search-match:hover, .home-search-match[aria-selected="true"] { background:var(--color-selected); }
.home-search-match > span:nth-child(2) { min-width:0; }
.home-search-match strong, .home-search-match small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-search-match strong { font-size:var(--text-table); font-weight:var(--font-weight-medium); }
.home-search-match small { font-size:var(--text-small); color:var(--color-muted); }
.home-search-match > span:last-child { font-size:var(--text-body); font-variant-numeric:tabular-nums; color:var(--color-text); }
.home-section-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-12); margin-bottom:var(--space-24); }
.home-section-heading h2 { font-size:var(--text-heading); font-weight:var(--font-weight-medium); line-height:var(--line-heading); letter-spacing:var(--tracking-heading); }
.home-index-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-16); }
/* Owner-selected beta tile geometry; keep the surrounding MVP hero layout. */
.home-index-tile { --home-index-radius:32px; --home-index-title-size:1.0625rem; position:relative; display:flex; align-items:center; min-width:0; gap:var(--space-16); min-height:114px; padding:var(--space-32); border-radius:var(--home-index-radius); overflow:hidden; isolation:isolate; }
.home-index-tile::before { content:""; position:absolute; inset:-3%; z-index:0; pointer-events:none; background-image:var(--index-tile-image,url("images/home-index-city.43aa8ac56ee3.webp")); background-position:var(--index-tile-position,center 55%); background-size:cover; background-repeat:no-repeat; scale:1; transition:scale .65s var(--motion-ease); animation:home-index-drift var(--index-tile-duration,34s) ease-in-out var(--index-tile-delay,0s) infinite alternate; }
.home-index-tile::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(105deg,color-mix(in srgb,var(--color-bg) 72%,transparent),color-mix(in srgb,var(--color-bg) 48%,transparent)); }
.home-index-tile:is([data-index-slug="gta-5"],[data-index-slug="gta5"]) { --index-tile-image:url("images/indices/gta-5-v1.384c4edd5631.webp"); --index-tile-position:center 58%; --index-tile-duration:34s; }
.home-index-tile:is([data-index-slug="samp-mobile"],[data-index-slug="gta-mobile"]) { --index-tile-image:url("images/indices/gta-mobile-v1.c898b5cedb44.webp"); --index-tile-position:center 58%; --index-tile-duration:38s; --index-tile-delay:-12s; }
.home-index-tile:is([data-index-slug="samp-pc"],[data-index-slug="samp"],[data-index-slug="sa-mp"]) { --index-tile-image:url("images/indices/samp-v1.f7bae1e6bf7b.webp"); --index-tile-position:center 64%; --index-tile-duration:36s; --index-tile-delay:-8s; }
.home-index-tile[data-index-slug="crmp"] { --index-tile-image:url("images/indices/crmp-v1.5f9af0c3a9ee.webp"); --index-tile-position:center 58%; --index-tile-duration:40s; --index-tile-delay:-18s; }
.home-index-tile[data-index-slug="fivem"] { --index-tile-image:url("images/indices/fivem-v1.45193f1fe5b9.webp"); --index-tile-position:center 68%; --index-tile-duration:32s; --index-tile-delay:-6s; }
.home-index-tile[data-index-slug="mta"] { --index-tile-image:url("images/indices/mta-v1.80796f8f095d.webp"); --index-tile-position:center 58%; --index-tile-duration:42s; --index-tile-delay:-16s; }
@keyframes home-index-drift { from { transform:translate3d(-1%,.5%,0); } to { transform:translate3d(1%,-.5%,0); } }
.home-index-tile > .home-index-mark, .home-index-tile > .home-index-copy { position:relative; z-index:2; }
.home-index-mark { display:grid; place-items:center; flex:0 0 var(--space-40); width:var(--space-40); color:var(--color-text); font-weight:var(--font-weight-semibold); font-size:var(--text-value); }
.home-index-mark .index-logo { width:var(--space-40); height:var(--space-40); }
.home-index-copy { display:grid; gap:var(--space-8); min-width:0; }
.home-index-copy > strong { color:var(--color-text); font-size:var(--home-index-title-size); font-weight:var(--font-weight-medium); line-height:var(--line-table); overflow-wrap:anywhere; }
.home-index-copy > span { display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--space-6); font-size:var(--text-small); color:var(--color-text); font-variant-numeric:tabular-nums; }
.home-index-copy .status-dot { width:var(--space-6); height:var(--space-6); }
.home-tile-arrow { position:absolute; z-index:2; right:var(--space-12); top:var(--space-12); color:var(--color-text); opacity:0; transform:translate(-3px,3px); transition:opacity var(--motion-standard),transform var(--motion-standard); }
.home-tile-arrow .icon { width:var(--space-16); height:var(--space-16); transform:rotate(-45deg); }

.home-rankings { position:relative; padding-bottom:var(--section-gap); }
.home-top-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto 1fr; gap:var(--space-40); }
.home-top-group { display:grid; grid-template-rows:subgrid; grid-row:span 2; gap:var(--space-24); min-width:0; }
.home-top-card { overflow:hidden; display:flex; flex-direction:column; min-width:0; flex:1; padding:var(--space-12); }
.home-top-header { display:flex; align-items:center; gap:var(--space-12); }
.home-top-header h2 { min-width:0; font-size:var(--text-heading); line-height:var(--line-heading); font-weight:var(--font-weight-medium); margin:0; letter-spacing:var(--tracking-heading); }
.home-top-symbol { width:var(--space-20); height:var(--space-20); flex:none; display:grid; place-items:center; color:var(--color-accent); }
.home-top-symbol .icon { width:var(--space-20); height:var(--space-20); }
.home-top-labels { display:flex; justify-content:space-between; padding:var(--space-12) var(--space-12) var(--space-20); color:var(--color-muted); font-size:var(--text-small); border-bottom:var(--border-width) solid var(--color-border); }
.home-top-list { list-style:none; padding:0; margin:0; flex:1; }
.home-top-list > li + li { border-top:var(--border-width) solid var(--color-border); }
.home-top-link { display:grid; grid-template-columns:var(--space-16) 28px minmax(0,1fr) 74px; gap:var(--space-8); align-items:center; min-height:56px; padding:var(--space-6) var(--space-8); border-radius:var(--radius-control); transition:background var(--motion-standard); }
.home-top-rank { color:var(--color-muted); font-size:var(--text-small); font-variant-numeric:tabular-nums; }
.home-top-list > li:first-child .home-top-rank { color:var(--color-accent-text); }
.home-top-link .entity-avatar { width:28px; height:28px; font-size:var(--text-body); }
.home-top-name { min-width:0; font-size:var(--text-table); line-height:var(--line-table); font-weight:var(--font-weight-medium); }
.home-top-name .entity-name { max-width:100%; }
.home-top-name .entity-name-desktop, .home-top-name .entity-name-mobile { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-bonuses { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-4); }
.home-bonuses:empty { display:none; }
.home-top-value { display:grid; gap:var(--space-4); justify-items:end; font-variant-numeric:tabular-nums; }
.home-top-value strong { font-size:var(--text-body); line-height:var(--line-body); font-weight:var(--font-weight-medium); white-space:nowrap; }
.home-top-sparkline { display:block; width:100%; height:var(--space-24); color:var(--color-muted); }
.home-top-sparkline svg { display:block; width:100%; height:100%; }
.home-top-sparkline.spark-up { color:var(--color-success); }
.home-top-sparkline.spark-down { color:var(--color-danger); }
.home-top-more.ui-button { width:100%; margin-top:var(--space-10); }
.home-empty { margin:0; }
.home-partnership { display:flex; align-items:center; justify-content:space-between; gap:var(--space-40); padding:var(--panel-padding); }
.home-partnership-copy { max-width:720px; }
.home-partnership-copy h2 { margin:0 0 var(--space-16); font-size:var(--text-title); line-height:var(--line-title); }
.home-partnership-copy h2 > span { color:var(--color-accent-text); }
.home-partnership-copy > p { font-size:var(--text-body); color:var(--color-muted); line-height:var(--line-body); }
.home-partnership > .home-primary-button { flex:none; }

/* Form layout only: shared ui-dialog, ui-field, ui-button and ui-state. */
.partnership-dialog h2 { margin:0 var(--space-40) var(--space-16) 0; }
.partnership-intro { color:var(--color-muted); font-size:var(--text-body); line-height:var(--line-body); margin-bottom:var(--space-24); }

.partnership-dialog form { display:grid; gap:var(--space-20); }
.partnership-form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); }
.partnership-honey { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); pointer-events:none; }
.partnership-error { margin:0; }
.partnership-note { color:var(--color-muted); font-size:var(--text-small); text-align:center; }
.partnership-success { text-align:center; padding-block:var(--space-24) var(--space-10); }
.partnership-success h2 { margin-inline:0; }
.partnership-success p { color:var(--color-muted); margin:var(--space-16) 0 var(--space-24); font-size:var(--text-body); }
.partnership-check { display:grid; place-items:center; margin:0 auto var(--space-24); width:var(--field-height); height:var(--field-height); border-radius:var(--radius-pill); color:var(--color-success); background:var(--color-success-soft); font-size:var(--text-heading); }
@media (hover:hover) {
  .home-index-tile:hover { border-color:var(--color-border-hover); }
  .home-index-tile:hover::before { scale:1.08; }
  .home-index-tile:hover .home-tile-arrow { opacity:1; transform:translate(0,0); }
  .home-top-link:hover { background:var(--color-hover); }
}
@media (max-width:1100px) {
  .home-hero { gap:var(--space-32); padding-block:var(--space-60); }
  .home-index-tile { padding:var(--panel-padding); }
  .home-top-grid { gap:var(--space-24); }
  .home-top-link { grid-template-columns:var(--space-16) var(--space-32) minmax(0,1fr) 76px; gap:var(--space-8); padding-inline:var(--space-8); }
  .home-top-link .entity-avatar { width:28px; height:28px; }
}
@media (max-width:800px) {
  .home-hero { grid-template-columns:1fr; gap:var(--space-32); padding-block:var(--space-32); }
  .home-desktop-break { display:none; }
  .home-search { margin-top:var(--space-24); max-width:none; }
  .home-search-results { max-height:45dvh; }
  .home-index-grid { gap:var(--space-12); }
  .home-index-tile { --home-index-radius:var(--radius-mobile-panel); --home-index-title-size:var(--text-body); min-height:96px; padding:var(--panel-padding); gap:var(--space-12); }
  .home-index-mark, .home-index-mark .index-logo { width:var(--space-32); height:var(--space-32); flex-basis:var(--space-32); }
  .home-section-heading { margin-bottom:var(--space-16); }
  .home-top-grid { grid-template-columns:1fr; gap:var(--space-32); }
  .home-top-group { gap:var(--space-16); }
  .home-top-symbol, .home-top-symbol .icon { width:var(--space-20); height:var(--space-20); }
  .home-top-link { min-height:56px; }
  .home-partnership { flex-direction:column; align-items:start; gap:var(--space-24); }
  .home-partnership > .home-primary-button { width:100%; }
  .partnership-form-row { grid-template-columns:1fr; }
}
@media (max-width:359px) {
  .home-index-tile { gap:var(--space-8); padding-inline:var(--panel-padding-compact); }
  .home-index-mark, .home-index-mark .index-logo { width:var(--space-24); height:var(--space-24); flex-basis:var(--space-24); }
}
@media (prefers-reduced-motion:reduce) {
  .home-skeleton { animation:none; }
  .home-index-tile::before { transition:none; animation:none; scale:1; transform:none; }
}