@import "./generated/moderation-appeals.css";
@import "./generated/staff-session.css";
@import url("./generated/commercial-theme.css");
@import url("./generated/commercial.css");
@import url("./generated/portal-base.css");

.page-header {
  margin-bottom: 28px;
}

.portal-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.portal-tab {
  border-radius: 0;
  padding: 12px 4px 10px;
  margin-right: 24px;
  background: transparent;
  color: var(--muted);
  border-bottom: 3px solid transparent;
}

.portal-tab[aria-pressed="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Keep the existing outer focus outline visible during keyboard scrolling. */
#firebase-auth-form :is(input, button),
#creator-application-form :is(input, select, textarea, button, a) {
  scroll-margin-block: .5rem;
}

h2 {
  margin-bottom: 6px;
}

.lede,
.section-heading p,
.status-label,
.boundary-note,
.field-help,
.result {
  color: var(--muted);
}

.status-grid,
.layout,
.field-grid,
.creator-layout {
  display: grid;
  gap: 16px;
}

.status-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.auth-panel {
  margin-bottom: 16px;
}

.status-grid article,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.status-grid article {
  padding: 18px;
}

.status-label {
  display: block;
  margin-bottom: 6px;
}

.layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: start;
}

.creator-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: start;
}

.form-stack {
  display: grid;
  gap: 16px;
}

.panel {
  padding: clamp(18px, 3vw, 28px);
}

label {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

textarea {
  resize: vertical;
}

.field-help {
  margin: 8px 0 0;
}

.field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.boundary-note {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--line);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.plan-card {
  display: grid;
  gap: 12px;
  min-height: 340px;
  border-radius: 8px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.check-row {
  grid-template-columns: 22px 1fr;
  align-items: start;
  font-weight: 600;
}

.check-row input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}

.creator-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  margin: 18px 0;
  padding: 1px;
  background: var(--line);
}

.creator-metrics div {
  padding: 16px;
  background: var(--panel-strong);
}

.creator-metrics dt {
  color: var(--muted);
  font-size: 0.9rem;
}

.creator-metrics dd {
  margin: 5px 0 0;
  font-size: 1.2rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
}

.copy-row :is(input, textarea) {
  flex: 1 1 16rem;
  min-width: 0;
}

.copy-row button {
  flex: 1 0 auto;
}

.creator-policy {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Keep complete review messages inside the account card, including long URLs. */
#creator-status {
  overflow-wrap: anywhere;
}

.creator-policy strong {
  color: var(--warm);
}

.creator-policy p {
  margin: 8px 0 0;
  color: var(--muted);
}

.result {
  margin-top: 16px;
  min-height: 24px;
  font-weight: 800;
}

.legal-page {
  width: min(820px, calc(100% - 32px));
}

.legal-page .panel + .panel {
  margin-top: 16px;
}

.legal-copy h2:not(:first-child) {
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 13px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 900;
  text-decoration: none;
}

.referral-landing {
  width: min(620px, calc(100% - 32px));
  margin: 0 auto;
  padding: max(64px, 12vh) 0 48px;
}

.referral-landing h1 {
  max-width: 10ch;
}

.referral-code-block {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.referral-code-block span,
.referral-note {
  color: var(--muted);
}

.referral-code-block strong {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
}

@media (max-width: 800px) {
  .layout,
  .creator-layout,
  .status-grid,
  .field-grid,
  .auth-form {
    grid-template-columns: 1fr;
  }

  .portal-tabs {
    overflow-x: auto;
  }

}

#partner-team label { display: grid; gap: .5rem; margin-bottom: 1rem; }
#partner-team textarea { width: 100%; box-sizing: border-box; }
#partner-team ul { list-style: none; padding: 0; }
#partner-team li { padding: 1rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#partner-team form { margin-top: 1.5rem; }
#partner-team form button { margin: .5rem .5rem 0 0; }
#partner-team .agreement-acknowledgement { display: flex; }
/* The selected address is plain text; Apple's attribution stays visible. */
.venue-results { list-style: none; padding: 0; margin: .5rem 0; }
.venue-results button { width: 100%; text-align: start; margin-block: .25rem; white-space: normal; overflow-wrap: anywhere; }
.venue-map-canvas { width: 100%; height: 220px; border-radius: .75rem; overflow: hidden; }

.manual-footer { max-width: 1280px; margin: 2rem auto; padding: 1rem; }
.user-manual-link { display: inline-block; padding: .75rem 0; color: var(--primary, #ff40ab); }
.user-manual-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* Free venue QR management uses the shared semantic palette and native controls. */
#venue-pages input[type=checkbox]{width:auto;margin-inline-end:.6rem}
#venue-pages input:not([type=checkbox]){width:100%;box-sizing:border-box}
.venue-qr-card{padding-block:1rem;border-block-end:1px solid currentColor;overflow-wrap:anywhere}
.venue-qr-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
#venue-pages form{display:grid;gap:1rem;margin-block-start:1rem}
#venue-pages [data-venue-map]{min-height:12rem}
#venue-pages [data-venue-results]{list-style:none;padding:0}

#venue-public{min-width:0;overflow-wrap:anywhere}
#venue-public h1,#venue-public h2{max-width:100%}

#venue-pages .venue-public-consent{display:flex;align-items:flex-start;gap:.6rem}
#venue-pages .venue-public-consent input{flex:none;margin:.25rem 0 0}