/* Player hub. Tokens, controls and the header live in theme.css. */
main {
  display: block; max-width: 78rem; margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) 4rem;
}

/* Navigation */
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.nav-button {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.5rem; padding: .5rem .75rem; border: 0; border-radius: var(--radius-control);
  background: none; color: var(--slate); font-weight: 600; font-size: .9375rem;
  cursor: pointer; white-space: nowrap;
}
.nav-button:hover { color: var(--ink); background: var(--sunk); }
.nav-button.selected { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.count:not(:empty) {
  min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--hearth); color: #22303a; font-size: .75rem; line-height: 1.35rem; text-align: center;
}

.page-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-heading p { margin-top: .4rem; }
.environment { background: var(--hearth-wash); border-left-color: var(--hearth); }

/* Sign in */
.login-panel {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 25rem);
  gap: clamp(2rem, 7vw, 6rem); align-items: center;
  padding-block: clamp(1rem, 7vh, 5rem) clamp(2rem, 6vh, 4rem);
}
.login-mark { width: 3.5rem; height: 3.5rem; color: var(--ink); margin-bottom: 1.25rem; }
.login-copy h1 { font-size: clamp(3.25rem, 9vw, 5.75rem); line-height: .95; letter-spacing: -.015em; }
.lede { font-size: clamp(1.25rem, 2.2vw, 1.5625rem); line-height: 1.3; margin-top: 1rem; max-width: 22ch; }
.login-points { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 34rem; }
.login-points li { display: grid; grid-template-columns: .9rem 1fr; gap: .85rem; color: var(--slate); }
.login-points li::before {
  content: ''; width: .55rem; height: .72rem; margin-top: .35rem;
  border-radius: .3rem .3rem 0 0; background: var(--hearth);
}
.login-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.login-form h2 { font-size: 1.95rem; }
.form-intro { margin: .5rem 0 1.25rem; }
.oauth-button { width: 100%; min-height: 2.9rem; }
#oauth-note { margin-top: .6rem; }
.token-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 0; color: var(--slate); font-size: .8125rem; }
.token-divider::before, .token-divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
#discord-signin[hidden] ~ .token-divider { display: none; }
.token-submit { width: 100%; margin-top: 1rem; }
#discord-signin:not([hidden]) ~ .token-submit { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }

/* Filters */
.label-filter-panel { margin-bottom: 1.5rem; }
#label-filter-form { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.label-filter-field { flex: 1 1 18rem; }
.label-filter-field label { margin-top: 0; font-size: .875rem; }
#label-filter-hint { margin-top: .45rem; }
#label-filter-active:not(:empty) { margin-top: .6rem; }
#label-filter-status { margin-top: .35rem; }
.server-labels { display: flex; flex-wrap: wrap; gap: .35rem; }
.server-label {
  display: inline-flex; align-items: baseline; gap: .3rem;
  min-height: 1.75rem; padding: .2rem .6rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--slate); font-size: .8125rem; cursor: pointer;
}
.server-label strong { color: var(--ink); }
.server-label:hover { border-color: var(--ink); }
.filter-chip { color: var(--ink); background: var(--paper); }

/* Servers: a grid, or list and detail side by side once a server is open. */
.servers-layout { display: grid; gap: 1.25rem; align-items: start; }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
@media (min-width: 66rem) {
  .servers-layout:has(#server-detail:not([hidden])) { grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); }
  .servers-layout:has(#server-detail:not([hidden])) .server-grid { grid-template-columns: 1fr; }
}

.server-card {
  display: flex; flex-direction: column; gap: .8rem; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: 1.1rem;
}
.server-card.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.card-game { font-size: .8125rem; font-weight: 600; color: var(--slate); }
.server-card h2 { font-size: 1.5625rem; line-height: 1.15; overflow-wrap: anywhere; }
.card-meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; color: var(--slate); font-size: .875rem; }
.presence { font-size: .875rem; font-weight: 600; }
.presence.unknown { color: var(--slate); font-weight: 400; }
.card-note { font-size: .875rem; color: var(--hearth-ink); }
.card-note.attention { color: var(--rust); }
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: auto; }
.card-actions .details { margin-left: auto; }

/* The address plate: forged iron, lit at the doorway edge while running. */
.plate {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15rem .75rem;
  background: var(--plate); color: var(--plate-ink);
  border-radius: var(--radius-control); box-shadow: inset 0 0 0 1px var(--plate-edge);
  padding: .65rem .65rem .65rem 1.1rem; overflow: hidden;
}
.plate::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--plate-dim); opacity: .35; }
.plate.lit::before { background: var(--hearth); opacity: 1; }
.plate-text { display: contents; }
.plate-label { grid-column: 1; font-size: .75rem; color: var(--plate-dim); }
.plate code { grid-column: 1 / -1; font-size: 1.0625rem; letter-spacing: .005em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plate > button { grid-column: 2; grid-row: 1; min-height: 2rem; padding: .3rem .7rem; font-size: .875rem; }
.plate.cold code, .join .plate.cold code { color: var(--plate-dim); font-weight: 500; font-size: .9375rem; }
.plate .secondary, .plate .quiet {
  background: transparent; color: var(--plate-ink);
  border-color: color-mix(in srgb, var(--plate-ink) 35%, transparent);
}
.plate .secondary:hover:not(:disabled) { border-color: var(--plate-ink); }
.plate :focus-visible { outline-color: var(--hearth); }

/* Server detail */
.server-detail-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel);
  container-type: inline-size; min-width: 0;
}
.detail-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem;
  padding: 1.25rem 1.5rem 1.1rem;
}
.detail-kicker { display: flex; align-items: center; gap: .9rem; font-size: .8125rem; font-weight: 600; color: var(--slate); }
.detail-head h2 { font-size: clamp(1.75rem, 3vw, 2.4375rem); line-height: 1.08; margin: .35rem 0 .45rem; overflow-wrap: anywhere; }
.join {
  margin: 0 1.5rem; padding: 1.1rem 0 1.4rem; border-top: 1px solid var(--line);
  display: grid; gap: .85rem;
}
.join h3 { font-size: .875rem; color: var(--slate); }
.join .plate { padding-block: .9rem; }
.join .plate code { font-size: clamp(1.125rem, 2.4vw, 1.4375rem); }
.join-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.password-value { font-variant-numeric: tabular-nums; }
.join p { max-width: var(--measure); }
.detail-section {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem 1.5rem;
  margin: 0 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--line);
}
.detail-section > h3 { padding-top: .1rem; }
.section-body { min-width: 0; display: grid; gap: .5rem; }
.section-body > p { max-width: var(--measure); }
.section-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
@container (min-width: 46rem) {
  .detail-section { grid-template-columns: 9.5rem minmax(0, 1fr) auto; }
  .section-actions { flex-direction: column; align-items: stretch; }
}
.section-body .muted { font-size: .9375rem; }
.hint .quiet { min-height: 0; padding: 0; margin-left: .25rem; font: inherit; font-weight: 600; vertical-align: baseline; }
.detail-section:last-child { padding-bottom: 1.4rem; }

.item-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem;
  padding: .75rem 0; border-top: 1px solid var(--line);
}
.item-row:first-child { border-top: 0; }
.item-row p { color: var(--slate); font-size: .875rem; }
.item-row strong { display: block; }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.item-list { margin-top: .25rem; }

/* Activity */
#operation-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel); }
#operation-list:has(> .empty) { background: none; border: 0; }
.operation-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: start;
  padding: .95rem 1.25rem; border-top: 1px solid var(--line);
}
.operation-row:first-child { border-top: 0; }
.operation-row p { color: var(--slate); font-size: .875rem; }
.operation-row .attention { color: var(--rust); }
.operation-id { font-size: .8125rem; }

/* Account, team and billing */
.detail-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: 1.25rem 1.5rem; margin-bottom: 1rem; max-width: 52rem;
}
.detail-panel h2 { margin-bottom: .5rem; }
.detail-panel > p + p { margin-top: .5rem; }
.detail-panel .item-row { border-top: 1px solid var(--line); }
.detail-panel h2 + .item-row { border-top: 0; }
.member-controls { display: flex; gap: .5rem; align-items: center; }
.member-controls select { width: auto; }
#invite-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
#invite-form .primary { margin-top: 1rem; }
.plan { color: var(--slate); font-size: .875rem; margin-top: .4rem; }

/* Allowance: a quiet line and slim meter under the page title and in Billing. */
.allowance { display: grid; gap: .45rem; max-width: 30rem; margin-top: .6rem; }
.page-heading .allowance p { margin-top: 0; }
.allowance-meter { display: grid; gap: .4rem; width: 20rem; max-width: 100%; }
.allowance-meter progress { width: 100%; }
.allowance-line { color: var(--slate); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.billing-summary .allowance-meter, .billing-summary > .allowance-line { margin: .2rem 0 .9rem; }
.billing-actions { margin-top: 1rem; }
.billing-summary > .hint { margin-top: .75rem; }

/* Plans line up row by row so they compare at a glance. */
.plans { max-width: 52rem; margin-top: 2rem; }
.plans > h2 { margin-bottom: .85rem; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-bottom: .9rem; }
.plan-card { display: flex; flex-direction: column; gap: .9rem; margin: 0; max-width: none; padding: 1.15rem 1.25rem 1.25rem; }
.plan-card h3 { font: 400 1.5625rem/1.2 var(--display); overflow-wrap: anywhere; }
.plan-price { font: 400 1.95rem/1.1 var(--display); }
.plan-price span { font: 400 .9375rem/1 var(--text); color: var(--slate); }
.plan-facts { margin: 0; }
.plan-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.plan-facts div:last-child { border-bottom: 1px solid var(--line); }
.plan-facts dt { color: var(--slate); font-size: .875rem; }
.plan-facts dd { margin: 0; font-size: .9375rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.plan-card > button, .plan-card > .badge { margin-top: auto; }
.plan-card > .badge { min-height: 2.5rem; }
.plan-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.billing-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 1.5rem; }


.empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: .6rem; justify-items: start;
  grid-column: 1 / -1;
}
.empty p { color: var(--slate); max-width: 52ch; }
.empty .primary { margin-top: .5rem; }

/* Dialogs */
dialog form { padding: 1.4rem 1.5rem 1.5rem; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.dialog-heading .close { margin: -.35rem -.5rem 0 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }
dialog h3 { margin-bottom: .25rem; }
.restore-note { background: var(--hearth-wash); border-radius: var(--radius-control); padding: .75rem 1rem; margin-top: 1rem; font-size: .9375rem; }
.restore-note.danger { background: var(--rust-wash); }
.primary.danger { background: var(--rust); color: #fff; }
.primary.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--rust) 85%, black); }
.field-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.input-with-action { display: flex; gap: .5rem; }
.input-with-action input { flex: 1; }
.label-editor-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; }
.label-editor-row label { margin-top: .75rem; font-size: .875rem; }
.labels-editor-tools { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
#plugins-options .check { margin-top: .75rem; }

/* Footer */
.site-footer {
  max-width: 78rem; margin: 0 auto; padding: 1.25rem var(--gutter) 2.5rem;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 2rem;
  background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  color: var(--slate); font-size: .875rem;
}
.site-footer > span { font-family: var(--display); color: var(--ink); }
.site-footer details { margin-right: auto; }
.site-footer summary { cursor: pointer; }
#setup-status { display: grid; gap: .2rem; margin-top: .5rem; }

@media (max-width: 52rem) {
  .login-panel { grid-template-columns: 1fr; min-height: 0; gap: 2rem; }
  .login-points { margin-top: 1.5rem; }
}
@media (max-width: 40rem) {
  .site-header-inner { gap: .35rem 1rem; padding-block: .55rem .4rem; }
  .tabs { order: 3; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .2rem; }
  .header-end #account { display: none; }
  .page-heading > .primary, .page-heading > .secondary { width: 100%; }
  .detail-head, .join, .detail-section { padding-inline: 0; }
  .detail-head { padding: 1.1rem 1.1rem .9rem; }
  .join, .detail-section { margin-inline: 1.1rem; }
  .card-actions .details { margin-left: 0; }
  .label-editor-row { grid-template-columns: 1fr; }
  .dialog-actions > * { flex: 1; }
}