/* /account: the website & software customer account. Builds on style.css
   tokens and customer-portal.css cards; only account-specific layout here. */
.account-page .portal-card h3{font-size:1.05rem;margin:4px 0 10px}
.account-form{display:grid;gap:14px;max-width:560px}.account-form h3{margin:0}
.account-page textarea{width:100%;min-width:0;border:1px solid #39435e;border-radius:8px;background:var(--bg-raised);color:var(--text);padding:10px 12px;font:inherit;resize:vertical}
.account-page textarea:focus-visible,.account-page .button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.account-page small{color:var(--muted)}
.account-google{width:100%;max-width:440px;background:#fff;color:#1f1f1f;border-color:#dadce0}.account-google:hover{background:#f8faff;color:#111}
.account-divider{display:flex;align-items:center;gap:10px;max-width:440px;margin:18px 0;color:var(--muted);font-size:.82rem}.account-divider::before,.account-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.account-register{margin:18px 0;max-width:560px}
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:18px}
.account-connection{border:1px solid #242b42;border-radius:12px;padding:18px;background:rgba(13,17,28,.7);min-width:0}
.account-code-row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;max-width:640px}.account-code-row label{flex:1 1 240px}
.account-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:18px 0}
.account-product{display:grid;gap:8px;align-content:start;border:1px solid #242b42;border-radius:12px;padding:16px;background:rgba(13,17,28,.7);min-width:0}
.account-product h3{margin:0}.account-product p{margin:0;font-size:.9rem}.account-product strong{color:var(--cyan);font-size:.9rem}
.account-product-kind{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.account-product .portal-actions{margin:6px 0 0}.account-product .button{font-size:.86rem;min-height:38px}
.account-activation{border-top:1px solid #242b42;margin-top:22px;padding-top:18px}
.account-record-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.account-record-actions .button{min-height:38px;font-size:.86rem}
.account-inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;flex:1 1 100%}.account-inline-form label{flex:1 1 220px}
#account-status:empty{display:none}#account-status:not(:empty){padding:14px 18px;border:1px solid #39435e;border-radius:10px;background:rgba(17,22,36,.9)}
@media(max-width:760px){.account-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:440px){.account-page .portal-actions .button,.account-code-row .button{width:100%}}

/* ---------------------------------------------------------------------------
   The one Infin8 Account portal (account-shell.mjs), per docs/INFIN8-DESIGN-SYSTEM.md:
   one translucent shell over the galaxy texture (s4), a stable left rail for its workspaces with
   cyan active state (s6), site tokens and radii (s3.2, s5), and three clearly separate areas:
   Programs & services, Your account, and Arcade gaming (its own profile, reached from the rail foot).
   --------------------------------------------------------------------------- */
.portal-shell { max-width: 1180px; padding-top: 34px; padding-bottom: 72px; }
.portal-shell .portal-hero { position: relative; isolation: isolate; display: grid; gap: 10px; padding: 6px 0 24px; }
.portal-shell .portal-hero .aurora-field { inset: -60% -20% auto; height: 520px; z-index: -1; opacity: .8; }
.portal-shell .portal-hero h1 { margin: 0; }
.portal-shell .portal-hero .lead { margin: 0; max-width: 62ch; }
.portal-shell .portal-hero .portal-chip, .portal-shell .portal-hero .eyebrow { justify-self: start; }

/* Shell: rail + content, one surface. */
#account-private:not([hidden]) {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 560px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: clip;
  background: linear-gradient(180deg, rgba(17, 22, 36, .84), rgba(13, 17, 28, .9));
  box-shadow: var(--shadow);
}
.portal-rail { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; border-right: 1px solid var(--border); background: rgba(9, 12, 22, .72); }
.portal-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; }
.portal-identity h2 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.portal-identity p { margin: 0; }
.portal-identity .portal-chip { grid-column: 1 / -1; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.15rem; font-weight: 850; color: var(--bg); background: linear-gradient(135deg, var(--cyan), #5f7df9); }
.portal-rail-nav { display: flex; flex-direction: column; gap: 2px; }
.portal-tab-group { margin: 14px 10px 6px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.portal-rail-nav a { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; color: var(--muted-strong); font-weight: 700; text-decoration: none; }
.portal-rail-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.portal-rail-nav a.active { color: var(--cyan); background: rgba(57, 215, 238, .1); border-color: rgba(57, 215, 238, .35); }
.portal-rail-nav a[hidden] { display: none; }
.portal-rail-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.portal-rail-arcade { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-size: .9rem; text-decoration: none; }
.portal-rail-arcade span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.portal-rail-arcade:hover { color: var(--text); background: rgba(255, 255, 255, .04); }

/* Content: the active workspace, its sections divided on the one surface (no boxed cards). */
.portal-main { min-width: 0; padding: clamp(18px, 3vw, 30px); }
.portal-main > #email-verification { margin: 0 0 22px; padding: 18px 20px; border: 1px solid rgba(57, 215, 238, .35); border-radius: 16px; background: rgba(57, 215, 238, .07); }
.portal-panel[hidden] { display: none; }
.portal-panel .portal-card { margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; }
.portal-panel > .portal-card:first-child, .portal-panel > #portal-private > .portal-card:first-child { padding-top: 0; border-top: 0; }
.portal-panel h2 { font-size: 1.25rem; }
.portal-area { margin-bottom: 26px; }
.portal-area-title { display: grid; gap: 2px; margin: 0 0 12px; font-size: 1.1rem; }
.portal-area-title span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.portal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.portal-tile { display: grid; align-content: start; gap: 4px; min-height: 44px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(21, 26, 42, .72); color: var(--muted); text-decoration: none; }
.portal-tile:hover { border-color: rgba(57, 215, 238, .35); color: var(--muted); }
.portal-tile .eyebrow, .portal-arcade .eyebrow { justify-self: start; }
.portal-tile strong { color: var(--text); font-size: 1.05rem; }
.portal-arcade { display: grid; gap: 4px; padding: 16px 18px; border: 1px dashed rgba(57, 215, 238, .3); border-radius: 16px; color: var(--muted); text-decoration: none; }
.portal-arcade strong { color: var(--text); }
.portal-arcade-cta { color: var(--cyan); font-weight: 750; }
.portal-arcade-cta::first-letter { text-transform: uppercase; }

/* Settings rows: forms (and their emailed codes) open only when changing something. */
.portal-settings { display: grid; gap: 6px; }
.portal-settings h2 { margin: 0; }
.setting-row { border-top: 1px solid var(--border); }
.setting-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; color: var(--text); font-weight: 700; }
.setting-row > summary::-webkit-details-marker { display: none; }
.setting-row > summary::after { content: "Change"; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .82rem; color: var(--muted-strong); }
.setting-row[open] > summary::after { content: "Close"; }
.setting-row > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.setting-row > form, .setting-row > .account-code-row, .setting-row > p { margin: 4px 0 16px; }
.setting-row > form > h3 { display: none; }
.portal-subsection { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.portal-subsection h3 { margin: 0; }
.account-plan-picker { margin-top: 14px; }
.account-plan-picker:empty { display: none; }

/* Below 900px the rail becomes a compact top bar that keeps its active state (s10). */
@media (max-width: 900px) {
  #account-private:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .portal-rail { border-right: 0; border-bottom: 1px solid var(--border); padding: 14px; }
  .portal-identity { margin-bottom: 8px; }
  .portal-rail-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .portal-rail-nav::-webkit-scrollbar { display: none; }
  .portal-rail-nav a { flex: none; white-space: nowrap; }
  .portal-tab-group { display: none; }
  .portal-rail-foot { display: none; }
}
@media (max-width: 900px) { .portal-shell .portal-hero { padding: 18px 16px 20px; } }

/* Chat sources: one row per platform, each connected on its own (Twitch, Kick, Restream). */
.chat-source-list { display: grid; gap: 10px; margin-top: 14px; }
.chat-source { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.chat-source-badge { font-size: 1.4rem; line-height: 1; }
.chat-source strong { display: block; }
.chat-source .portal-note { display: block; margin: 2px 0 0; }
.chat-source-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 600px) {
  .chat-source { grid-template-columns: auto minmax(0, 1fr); }
  .chat-source-actions { grid-column: 1 / -1; justify-content: stretch; }
  .chat-source-actions .button { flex: 1 1 100%; }
}