/* Inter and the iceberg/slate palette match sessiontalk.io. Fonts are served locally. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0f172a;background:#fff;font-size:16px;line-height:1.55;--accent:#206d9c;--muted:#64748b;--border:#e2e8f0}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #206d9c}a{color:#206d9c;text-underline-offset:4px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.hidden{display:none!important}.header{display:flex;align-items:center;gap:26px;padding:20px max(24px,calc((100vw - 1240px)/2));border-bottom:1px solid var(--border);background:#fff}.brand{line-height:0}.brand img{height:42px;width:auto}.portal-name{font-weight:600;padding-left:26px;border-left:1px solid var(--border)}#signout{margin-left:auto}main{max-width:1240px;margin:auto;padding:52px 24px 70px}h1,h2,p{margin-top:0}h1{font-size:clamp(2.4rem,4.8vw,4.2rem);line-height:1.08;letter-spacing:-.045em;font-weight:700;margin-bottom:24px}h2{font-size:1.22rem;letter-spacing:-.02em;margin-bottom:8px}p{color:var(--muted)}.auth-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center;padding:28px 0 60px}.intro>p{font-size:1.18rem;max-width:440px}.steps{padding:0;list-style:none;margin:36px 0}.steps li{display:flex;gap:18px;margin:24px 0}.steps li>span{height:32px;width:32px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#e7f1fc;color:var(--accent);font-weight:700}.steps p{margin:3px 0 0;font-size:.95rem}.auth-card{background:#fff;padding:36px;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 40px #273e5710}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:28px}.tabs button{background:none;border:0;padding:10px 12px;border-bottom:3px solid transparent;color:var(--muted);font-weight:600}.tabs button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}form label{display:block;font-weight:600;font-size:.9rem;margin:18px 0}input:not([type=file]){display:block;width:100%;border:1px solid #aebccc;border-radius:7px;padding:11px 12px;margin-top:7px;background:#fff;color:#0f172a}button{border-radius:7px;padding:10px 16px;font-weight:600;border:1px solid transparent}.primary{background:var(--accent);color:#fff}.primary:hover:not(:disabled){background:#1f4c6c}.secondary{background:#fff;border-color:#bbc7d6;color:#334155}.quiet{background:transparent;color:#206d9c}.quiet:hover{background:#e7f1fc}.full{display:block;width:100%;margin:10px 0}.small{font-size:.81rem;color:var(--muted);line-height:1.6}.auth-card>.small{margin:24px 0 0}.heading-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}.dashboard h1{font-size:2.5rem;margin-bottom:10px}.heading-row p{margin-bottom:0}.status{padding:6px 14px;background:#e8edf4;color:#43536a;border-radius:30px;font-size:.87rem;font-weight:600;white-space:nowrap}.status.published{background:#e1f3e9;color:#176242}.workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:26px;align-items:start}.editor{display:grid;gap:24px}.panel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px}.panel-heading{display:flex;gap:14px}.step-mark{color:var(--accent);background:#e7f1fc;border-radius:7px;display:grid;place-items:center;flex-shrink:0;height:34px;width:34px;font-weight:700}.panel-heading p,.preview-panel>p,.publish-panel>p{font-size:.92rem}.upload{border:1px dashed #a8b8ca;background:#f0f9ff;border-radius:9px;padding:22px;margin-top:16px}.upload label{font-weight:600;display:block;margin-bottom:12px}input[type=file]{max-width:100%;font-size:.85rem}input[type=file]::file-selector-button{border:1px solid #bdc8d6;border-radius:5px;background:#fff;padding:8px 12px;color:#253b55;margin-right:10px;cursor:pointer}.upload .small{display:block;margin-top:10px}.helper-row{display:flex;gap:12px;justify-content:space-between;align-items:center;font-size:.85rem;margin:14px 0}.helper-row button{font-size:.85rem}details{font-size:.85rem;color:var(--muted);margin-top:18px}summary{cursor:pointer;color:#334155;font-weight:600;margin-bottom:10px}details p{margin-bottom:10px}.config-summary{margin-bottom:0}.config-summary div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-top:1px solid #e2e8f0;font-size:.88rem}.config-summary dt{color:var(--muted)}.config-summary dd{margin:0;overflow-wrap:anywhere;text-align:right;font-weight:600}.logo-upload{display:flex;align-items:center;gap:22px}.logo-upload>img{height:72px;width:72px;object-fit:contain;background:#fff;border:1px solid var(--border);padding:5px;border-radius:7px}.logo-upload>div{min-width:0}.preview-area{display:grid;gap:24px}.phone-preview{border:1px solid #b9c6d5;border-radius:20px;padding:22px 14px 10px;margin:26px auto;background:#f0f9ff;max-width:310px}.phone-top{text-align:center;font-size:.88rem;font-weight:600;margin-bottom:18px}.provider-row{background:#fff;padding:16px 10px;display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:8px}.logo-slot{width:34px;height:34px;background:#e7f1fc;display:grid;place-items:center;border-radius:6px;flex-shrink:0}.logo-slot img{width:32px;height:32px;object-fit:contain}.provider-row strong{font-size:.9rem;overflow-wrap:anywhere}.provider-row>span{margin-left:auto;font-size:24px;color:#8190a1}.login-preview{padding:20px 8px 4px}.login-preview>span{font-size:.83rem;font-weight:600;display:block;text-align:center;margin-bottom:14px;overflow-wrap:anywhere}.login-preview>div{border-bottom:1px solid #e2e8f0;padding:10px 0;color:#7b8798;font-size:.81rem}.phone-preview>.small{text-align:center;margin:18px 0 2px;font-size:.72rem}.publish-panel{padding:0 10px}.notice,.error{padding:14px 18px;border-radius:8px;font-size:.9rem;margin:16px 0}.notice{background:#e7f1fc;color:#1f4c6c}.error{background:#fff0f0;color:#8b252a;border:1px solid #edc4c7}.notice button{font-size:.85rem}footer{max-width:1240px;margin:0 auto;padding:24px;border-top:1px solid var(--border);display:flex;gap:24px;font-size:.8rem;color:var(--muted)}footer>span{margin-right:auto}footer a{color:var(--muted)}@media(max-width:900px){.auth-layout{gap:40px}.workspace{grid-template-columns:1fr}.preview-area{grid-template-columns:1fr 1fr;align-items:start}.publish-panel{padding:24px 8px}}@media(max-width:640px){main{padding:32px 18px}.header{padding:16px 18px;gap:16px;flex-wrap:wrap}.brand img{height:34px}.portal-name{font-size:.8rem;padding-left:16px}.auth-layout{grid-template-columns:1fr;gap:32px;padding:0}.intro h1{font-size:2.8rem}.auth-card,.panel{padding:23px}.preview-area{grid-template-columns:1fr}.heading-row{align-items:start}.dashboard h1{font-size:2rem}.helper-row{align-items:start;flex-direction:column}.logo-upload{align-items:start;flex-direction:column}footer{flex-wrap:wrap;gap:14px}footer>span{width:100%}}
/* Let file inputs and long provider names shrink inside narrow grid tracks. */
.editor,.preview-area,.panel,.workspace>*{min-width:0}
@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.preview-area{grid-template-columns:minmax(0,1fr)}}

/* Shared website surfaces, typography and blue controls for every portal state. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 420px 360px at 0% 140px, rgb(84 175 236 / 14%), transparent 75%),
    radial-gradient(ellipse 420px 360px at 100% 220px, rgb(34 211 238 / 12%), transparent 75%),
    radial-gradient(ellipse 400px 360px at 65% 700px, rgb(129 140 248 / 8%), transparent 75%),
    #fff;
}
.header {
  padding: 20px max(24px, calc((100vw - 1216px) / 2));
  background: rgb(255 255 255 / 80%);
  border-color: rgb(226 232 240 / 70%);
  backdrop-filter: blur(8px);
}
.portal-name { color: #475569; font-size: .9rem; letter-spacing: .025em; }
main { width: 100%; max-width: 1280px; flex: 1; padding: 64px 32px 80px; }
h1 { color: #020617; font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -.025em; }
h2 { color: #334155; font-weight: 600; letter-spacing: .01em; }
.intro > p { max-width: 540px; font-size: 1.125rem; line-height: 1.75; }
.eyebrow {
  display: inline-flex;
  margin-bottom: 24px;
  border-radius: 6px;
  padding: 4px 8px;
  background: #e7f1fc;
  color: #206d9c;
  font-size: .875rem;
  font-weight: 600;
}
.gradient-text {
  color: #206d9c;
  background: linear-gradient(to right, #00a2e9, #52529f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; padding: 16px 0 40px; }
.steps strong { color: #334155; font-size: .95rem; font-weight: 600; }
.steps li > span, .step-mark { width: 36px; height: 36px; border-radius: 50%; background: #e7f1fc; color: #206d9c; }
.intro > a { display: inline-block; font-size: .875rem; font-weight: 600; text-decoration: none; }
.intro > a:hover { text-decoration: underline; }
.auth-card, .panel, .publish-panel {
  background: rgb(255 255 255 / 80%);
  border: 1px solid rgb(226 232 240 / 80%);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 5%);
  backdrop-filter: blur(8px);
}
.auth-card { padding: 36px; }
.auth-card > h2 { font-size: 1.5rem; font-weight: 700; color: #0f172a; letter-spacing: -.025em; }
.tabs { gap: 6px; padding: 5px; border: 0; border-radius: 10px; background: #f8fafc; }
.tabs button { flex: 1; border: 0; border-radius: 6px; padding: 10px 8px; font-size: .875rem; }
.tabs button[aria-pressed=true] { color: #206d9c; background: #e7f1fc; box-shadow: 0 1px 2px rgb(15 23 42 / 5%); }
.tabs button:hover:not([aria-pressed=true]) { color: #0f172a; background: #f1f5f9; }
form label { color: #334155; }
input:not([type=file]) { border-color: #cbd5e1; border-radius: 6px; }
input:not([type=file]):focus { border-color: #188bc7; box-shadow: 0 0 0 3px rgb(0 162 233 / 12%); }
button { min-height: 44px; border-radius: 6px; font-size: .875rem; font-weight: 600; letter-spacing: .025em; transition: background-color .2s, border-color .2s, box-shadow .2s; }
/* Use iceberg-700 for readable white button labels. */
.primary { background: #206d9c; box-shadow: 0 4px 10px rgb(0 162 233 / 12%); }
.primary:hover:not(:disabled) { background: #1f4c6c; }
.secondary { color: #475569; border-color: #cbd5e1; box-shadow: 0 1px 2px rgb(15 23 42 / 5%); }
.secondary:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
.quiet:hover:not(:disabled) { color: #1f4c6c; background: #e7f1fc; }
.status { background: #f1f5f9; color: #475569; border-radius: 6px; }
.upload { border-color: #98c9f3; border-radius: 12px; background: rgb(231 241 252 / 35%); }
input[type=file]::file-selector-button { color: #475569; border-color: #cbd5e1; border-radius: 6px; font-family: inherit; }
input[type=file]::file-selector-button:hover { background: #e7f1fc; }
.phone-preview { border-color: #cee3f9; background: rgb(231 241 252 / 45%); box-shadow: 0 1px 3px rgb(15 23 42 / 5%); }
.provider-row { border-radius: 12px; }
.provider-row > span { color: #188bc7; }
.login-preview > div { color: #64748b; }
.publish-panel { padding: 28px; }
.notice { border: 1px solid #cee3f9; border-radius: 10px; }
footer { width: 100%; max-width: 1280px; padding: 24px 32px; border-color: rgb(226 232 240 / 70%); }
footer a:hover { color: #206d9c; }
@media (max-width: 1024px) {
  .auth-layout { gap: 40px; }
}
@media (max-width: 800px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin: auto; }
}
@media (max-width: 640px) {
  main { padding: 40px 20px 56px; }
  .header { padding: 16px 20px; }
  .portal-name { font-size: .75rem; }
  .intro h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .auth-card, .panel, .publish-panel { padding: 24px; }
  .heading-row { flex-wrap: wrap; }
  footer { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}
@media (forced-colors: active) {
  .gradient-text { background: none; -webkit-text-fill-color: currentColor; }
  .tabs button[aria-pressed=true] { outline: 2px solid; outline-offset: -2px; }
}