/* ==========================================================
   SC Design 1.2.0 - master styles for SpeakingClub redesigns
   Prefix: scd-  |  Opt-in: wrap new areas in .scd-root

   BENCHMARK: the /join/ page (first redesigned page).
   When in doubt, match what it does.

   DECISIONS (full notes on the reference page: /?scd-preview=1)
   - Fonts: Plus Jakarta Sans (headings) + Inter (text).
     Roboto only for the logo wordmark. Replaces the Figma
     Roboto-everywhere style, in new redesigns only.
   - Text scale (from /join/): showcase 36, h1 32, h2 24,
     h3 18, body 16, ui 15 (chat, buttons, meeting topics),
     small 14, meta 13 (hints, links under forms, dividers,
     errors), caption 12. Nothing below 12px.
     Display 42 dropped in 1.2.0 (.scd-display = showcase).
   - Sizes: 48px controls, 12px corners, 16px card corners.
     Replaces the Figma button specs (211x50, 8px corners).
   - Spacing: layout uses the --scd-s-* scale (4/8 grid).
     Inside components, any even value is fine (10, 14, 22).
   - Colors: tokens only. Exceptions: effects (shadows,
     gradients, glows) may use rgba() of token colors; emails
     and brand logos (e.g. Google) use raw hex.
   - Buttons: blue is the standard button across the product.
     Pink button (.scd-btn--pink): max one per page, marketing
     pages only, for the main conversion. Otherwise pink is
     for emphasis only (a word, an underline).
   - Errors: own red (--scd-red), never pink.
   - Not included yet: Figma validation/success colors and
     notification components. Add when a redesign needs them.
   - Figma remains the reference for logo, icons and grid.
   - After any change here, bump SCD_VERSION (CloudFront).
   ========================================================== */

/* ---------- Tokens ---------- */
:root{
	/* Colors */
	--scd-blue:#2074AC;
	--scd-blue-dark:#0B4E7A;
	--scd-blue-mid:#17639A;
	--scd-sky:#4FB3F6;
	--scd-pink:#CC1855;
	--scd-pink-dark:#A3123F;
	--scd-pink-light:#FF8FB4;
	--scd-red:#D92D20;
	--scd-ink:#061722;
	--scd-grey:#4D4D4D;
	--scd-muted:#5F6B78;
	--scd-placeholder:#8A96A3;
	--scd-faint:#9AA6B3;
	--scd-line:#E3E8EF;
	--scd-line-strong:#C9D3DF;
	--scd-line-active:#B9CCE0;
	--scd-soft:#DDEDF9;
	--scd-bubble:#F1F4F8;
	--scd-bg:#F6F8FB;
	--scd-white:#FFFFFF;
	--scd-green:#22C55E;
	--scd-green-dark:#15803D;
	--scd-green-light:#86EFAC;
	--scd-mint:#7DD3A8;
	--scd-gold:#F5B82E;
	--scd-navy:#0A1F2E;
	--scd-navy-mid:#0B4E7A;

	/* On dark panels */
	--scd-on-dark-muted:rgba(255,255,255,.78);
	--scd-on-dark-soft:rgba(255,255,255,.1);
	--scd-on-dark-strong:rgba(255,255,255,.2);

	/* Fonts */
	--scd-font-display:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
	--scd-font-body:Inter,system-ui,sans-serif;
	--scd-font-logo:Roboto,system-ui,sans-serif;

	/* Text sizes */
	--scd-fs-showcase:36px;
	--scd-fs-h1:32px;
	--scd-fs-h2:24px;
	--scd-fs-h3:18px;
	--scd-fs-body:16px;
	--scd-fs-ui:15px;
	--scd-fs-small:14px;
	--scd-fs-meta:13px;
	--scd-fs-caption:12px;
	--scd-fs-digit:22px;   /* code boxes */
	--scd-fs-logo:22px;    /* wordmark */

	/* Corners */
	--scd-r-sm:8px;
	--scd-r-md:12px;
	--scd-r-lg:16px;
	--scd-r-pill:999px;

	/* Spacing */
	--scd-s-1:4px;
	--scd-s-2:8px;
	--scd-s-3:12px;
	--scd-s-4:16px;
	--scd-s-5:24px;
	--scd-s-6:32px;
	--scd-s-6b:40px;
	--scd-s-7:48px;

	/* Controls */
	--scd-control-h:48px;
	--scd-control-h-sm:36px;
	--scd-focus:0 0 0 4px rgba(32,116,172,.14);
	--scd-focus-error:0 0 0 4px rgba(217,45,32,.12);

	/* Shadows */
	--scd-shadow-sm:0 1px 2px rgba(6,23,34,.04),0 4px 14px rgba(6,23,34,.06);
	--scd-shadow-lg:0 24px 50px rgba(0,0,0,.35);
}

@property --scd-angle{
	syntax:"<angle>";
	initial-value:0deg;
	inherits:false;
}

/* ---------- Base (only inside .scd-root) ---------- */
.scd-root{
	font-family:var(--scd-font-body);
	font-size:var(--scd-fs-body);
	line-height:1.55;
	color:var(--scd-ink);
	-webkit-font-smoothing:antialiased;
}
.scd-root *,
.scd-root *::before,
.scd-root *::after{box-sizing:border-box}
.scd-root a{color:var(--scd-blue)}
.scd-root code{font-size:.9em;background:var(--scd-bubble);padding:1px 5px;border-radius:4px}

.scd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typography ---------- */
.scd-showcase,.scd-display,.scd-h1,.scd-h2,.scd-h3{
	font-family:var(--scd-font-display);
	color:var(--scd-ink);
	margin:0 0 var(--scd-s-3);
	text-wrap:balance;
}
/* .scd-display is kept as an alias of .scd-showcase */
.scd-showcase,.scd-display{font-size:var(--scd-fs-showcase);font-weight:800;line-height:1.12;letter-spacing:-.025em}
.scd-h1{font-size:var(--scd-fs-h1);font-weight:800;line-height:1.15;letter-spacing:-.025em}
.scd-h2{font-size:var(--scd-fs-h2);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.scd-h3{font-size:var(--scd-fs-h3);font-weight:700;line-height:1.3;letter-spacing:-.01em}
.scd-text{font-size:var(--scd-fs-body);line-height:1.6;color:var(--scd-grey);margin:0 0 var(--scd-s-3);text-wrap:pretty}
.scd-small{font-size:var(--scd-fs-small);line-height:1.5;margin:0 0 var(--scd-s-2)}
.scd-meta{font-size:var(--scd-fs-meta);line-height:1.5;color:var(--scd-muted)}
.scd-caption{font-size:var(--scd-fs-caption);line-height:1.5;color:var(--scd-muted);margin:0}
.scd-muted{color:var(--scd-muted)}
.scd-accent{color:var(--scd-pink)}
.scd-panel .scd-accent{color:var(--scd-pink-light)}
.scd-mark{color:var(--scd-pink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

.scd-logo{font-family:var(--scd-font-logo);font-size:var(--scd-fs-logo);line-height:1;letter-spacing:-.01em;margin:0}
.scd-logo b{font-weight:700;color:var(--scd-blue)}
.scd-logo span{font-weight:300;color:var(--scd-pink)}

/* ---------- Buttons ---------- */
.scd-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	height:var(--scd-control-h);padding:0 22px;
	border:0;border-radius:var(--scd-r-md);cursor:pointer;
	background:var(--scd-blue);color:var(--scd-white);
	font:600 var(--scd-fs-ui) var(--scd-font-body);text-decoration:none;white-space:nowrap;
	transition:background .15s,border-color .15s,opacity .15s;
}
.scd-root a.scd-btn{color:var(--scd-white)}
.scd-btn:hover{background:var(--scd-blue-dark)}
.scd-btn:focus-visible{outline:none;box-shadow:var(--scd-focus)}
.scd-btn:disabled{opacity:.6;cursor:default}
.scd-btn:disabled:hover{background:var(--scd-blue)}

.scd-btn--secondary{
	background:var(--scd-white);color:var(--scd-ink);
	border:1.5px solid var(--scd-line);font-weight:500;
}
.scd-root a.scd-btn--secondary{color:var(--scd-ink)}
.scd-btn--secondary:hover{background:var(--scd-bg);border-color:var(--scd-line-strong)}

.scd-btn--ghost{background:transparent;color:var(--scd-blue)}
.scd-root a.scd-btn--ghost{color:var(--scd-blue)}
.scd-btn--ghost:hover{background:var(--scd-bubble)}

/* Pink: max one per page, marketing pages only, main conversion */
.scd-btn--pink{background:var(--scd-pink)}
.scd-btn--pink:hover{background:var(--scd-pink-dark)}
.scd-btn--pink:focus-visible{box-shadow:0 0 0 4px rgba(204,24,85,.18)}

.scd-btn--sm{height:var(--scd-control-h-sm);padding:0 14px;font-size:var(--scd-fs-small);border-radius:var(--scd-r-sm)}
.scd-btn--block{display:flex;width:100%}

.scd-link{
	border:0;background:none;padding:0;cursor:pointer;
	font:500 var(--scd-fs-small) var(--scd-font-body);color:var(--scd-blue);text-decoration:none;
}
.scd-link:hover{text-decoration:underline}
.scd-link:disabled{color:var(--scd-muted);cursor:default;text-decoration:none}

.scd-or{
	display:flex;align-items:center;gap:14px;margin:18px 0;
	font-size:var(--scd-fs-meta);color:var(--scd-muted);
}
.scd-or::before,.scd-or::after{content:"";flex:1;height:1px;background:var(--scd-line)}

/* ---------- Inputs ---------- */
.scd-label{display:block;margin-bottom:8px;font-size:var(--scd-fs-small);font-weight:500;color:var(--scd-ink)}
.scd-input{
	width:100%;height:var(--scd-control-h);padding:0 14px;
	border:1.5px solid var(--scd-line);border-radius:var(--scd-r-md);
	background:var(--scd-white);outline:none;
	font:400 var(--scd-fs-body) var(--scd-font-body);color:var(--scd-ink);
	transition:border-color .15s,box-shadow .15s;
}
.scd-input::placeholder{color:var(--scd-placeholder)}
.scd-input:focus{border-color:var(--scd-blue);box-shadow:var(--scd-focus)}
.scd-input.is-error{border-color:var(--scd-red);box-shadow:var(--scd-focus-error)}
.scd-error{min-height:18px;margin:5px 0 var(--scd-s-2);font-size:var(--scd-fs-meta);color:var(--scd-red)}

.scd-pass{position:relative}
.scd-pass .scd-input{padding-right:48px}
.scd-eye{
	position:absolute;right:6px;top:6px;width:var(--scd-control-h-sm);height:var(--scd-control-h-sm);
	border:0;border-radius:var(--scd-r-sm);background:none;cursor:pointer;color:var(--scd-muted);
	display:flex;align-items:center;justify-content:center;
}
.scd-eye:hover{background:var(--scd-bubble)}

.scd-code{display:flex;gap:8px;justify-content:space-between}
.scd-code input{
	width:100%;max-width:52px;height:56px;
	border:1.5px solid var(--scd-line);border-radius:var(--scd-r-md);
	background:var(--scd-white);text-align:center;outline:none;
	font:700 var(--scd-fs-digit) var(--scd-font-display);color:var(--scd-ink);
	transition:border-color .15s,box-shadow .15s;
}
.scd-code input:focus{border-color:var(--scd-blue);box-shadow:var(--scd-focus)}
.scd-code input.is-filled{border-color:var(--scd-line-active)}

/* ---------- Pills ---------- */
.scd-pill{
	display:inline-flex;align-items:center;gap:6px;
	padding:4px 10px;border-radius:var(--scd-r-pill);
	background:var(--scd-bubble);color:var(--scd-ink);
	font-size:var(--scd-fs-caption);font-weight:600;line-height:1.4;white-space:nowrap;
}
.scd-pill--blue{background:var(--scd-soft);color:var(--scd-blue-dark)}
.scd-pill--solid{background:var(--scd-blue);color:var(--scd-white)}
.scd-pill--live{background:rgba(34,197,94,.18);color:var(--scd-green-dark)}
.scd-panel .scd-pill{background:var(--scd-on-dark-soft);color:var(--scd-white)}
.scd-panel .scd-pill--solid{background:var(--scd-blue)}
.scd-panel .scd-pill--live{background:rgba(34,197,94,.18);color:var(--scd-green-light)}
.scd-pill--live::before{
	content:"";width:7px;height:7px;border-radius:50%;background:var(--scd-green);
	animation:scd-pulse 1.6s infinite;
}
@keyframes scd-pulse{
	0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
	70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
	100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* ---------- Avatars ---------- */
.scd-avatar{
	display:inline-flex;align-items:center;justify-content:center;flex:none;
	border-radius:50%;object-fit:cover;overflow:hidden;
	background:var(--scd-soft);color:var(--scd-blue-dark);
	font-weight:600;
}
.scd-avatar--sm{width:24px;height:24px;font-size:var(--scd-fs-caption)}
.scd-avatar--md{width:36px;height:36px;font-size:var(--scd-fs-small)}
.scd-avatar--lg{width:48px;height:48px;font-size:var(--scd-fs-h3)}
.scd-avatar--ring{border:1.5px solid var(--scd-sky)}

/* ---------- Cards ---------- */
.scd-card{
	background:var(--scd-white);border:1px solid var(--scd-line);
	border-radius:var(--scd-r-lg);padding:var(--scd-s-5);
	box-shadow:var(--scd-shadow-sm);
}

/* ---------- Showcase panel (dark) ---------- */
.scd-panel{
	position:relative;overflow:hidden;
	padding:var(--scd-s-7) 56px;
	background:
		radial-gradient(circle at 85% 8%,rgba(204,24,85,.30),transparent 40%),
		radial-gradient(circle at 10% 92%,rgba(32,116,172,.55),transparent 45%),
		linear-gradient(160deg,var(--scd-navy-mid) 0%,var(--scd-ink) 70%);
	color:var(--scd-white);
}
.scd-panel::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
	background-size:22px 22px;
}
.scd-panel > *{position:relative;z-index:1}
.scd-panel .scd-showcase,.scd-panel .scd-display,.scd-panel .scd-h1,.scd-panel .scd-h2,.scd-panel .scd-h3{color:var(--scd-white)}
.scd-panel .scd-text,.scd-panel .scd-muted{color:var(--scd-on-dark-muted)}

/* ---------- Meeting card (on dark panels) ---------- */
.scd-meeting{
	position:relative;
	display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:16px;align-items:center;
	padding:12px;
	background:var(--scd-navy);
	border:1px solid var(--scd-on-dark-soft);
	border-radius:var(--scd-r-lg);
	color:var(--scd-white);
	transition:transform .2s,box-shadow .2s,border-color .2s;
}
.scd-meeting:hover{transform:translateY(-2px);border-color:var(--scd-on-dark-strong);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.scd-meeting.is-first{box-shadow:var(--scd-shadow-lg)}
.scd-meeting.is-first::before{
	content:"";position:absolute;inset:-1px;
	border-radius:17px;padding:1.5px;pointer-events:none;
	background:conic-gradient(from var(--scd-angle),
		transparent 0deg,transparent 250deg,
		rgba(79,179,246,.9) 300deg,rgba(255,143,180,.95) 335deg,
		transparent 360deg);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
	animation:scd-spin 6s linear infinite;
}
@keyframes scd-spin{to{--scd-angle:360deg}}

.scd-meeting-thumb{
	aspect-ratio:16/9;border-radius:10px;overflow:hidden;
	background:var(--scd-navy) center/cover no-repeat;
}
.scd-meeting-thumb.is-empty{
	display:flex;align-items:center;justify-content:center;padding:8px;
	background:linear-gradient(135deg,var(--scd-blue-mid),var(--scd-blue-dark));
	font:700 var(--scd-fs-caption)/1.2 var(--scd-font-display);text-align:center;color:var(--scd-white);
}
.scd-meeting-body{min-width:0}
.scd-meeting-type{display:block;margin-bottom:3px;font-size:var(--scd-fs-caption);font-weight:600;letter-spacing:.02em;color:var(--scd-mint)}
.scd-meeting-topic{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	margin-bottom:8px;font-size:var(--scd-fs-ui);font-weight:600;line-height:1.3;
}
.scd-meeting-host{display:flex;align-items:center;gap:8px;font-size:var(--scd-fs-meta);color:var(--scd-on-dark-muted)}
.scd-meeting-when{text-align:right;white-space:nowrap}
.scd-meeting-time{display:block;margin-top:6px;font-size:var(--scd-fs-caption);color:var(--scd-on-dark-muted)}

/* ---------- Chat (host conversation) ---------- */
.scd-thread{display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.scd-row{display:flex;align-items:flex-end;gap:10px;animation:scd-pop .3s ease-out both}
.scd-row--me{justify-content:flex-end}
.scd-bubbles{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:85%}
.scd-msg{
	max-width:85%;
	padding:10px 14px;border-radius:18px;
	font-size:var(--scd-fs-ui);line-height:1.45;text-wrap:pretty;
}
.scd-bubbles .scd-msg{max-width:none}
.scd-row--host .scd-msg{background:var(--scd-bubble);border-bottom-left-radius:6px}
.scd-bubbles .scd-msg + .scd-msg{border-top-left-radius:6px}
.scd-row--me .scd-msg{background:var(--scd-blue);color:var(--scd-white);border-bottom-right-radius:6px;word-break:break-all}
.scd-msg strong{font-weight:600}
.scd-msg small{display:block;margin-bottom:2px;font-size:var(--scd-fs-caption);color:var(--scd-muted)}
@keyframes scd-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.scd-typing{display:inline-flex;gap:4px;padding:4px 0}
.scd-typing i{width:7px;height:7px;border-radius:50%;background:var(--scd-faint);animation:scd-bounce 1s infinite}
.scd-typing i:nth-child(2){animation-delay:.15s}
.scd-typing i:nth-child(3){animation-delay:.3s}
@keyframes scd-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
	.scd-panel{padding:40px 32px}
	.scd-meeting{grid-template-columns:104px minmax(0,1fr) auto;gap:12px}
}
@media (max-width:600px){
	:root{--scd-fs-showcase:30px;--scd-fs-h1:28px}
	.scd-panel{padding:32px 20px}
}
@media (max-width:400px){
	:root{--scd-fs-digit:20px}
	.scd-code{gap:6px}
	.scd-code input{height:50px}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
	.scd-root *,.scd-root *::before,.scd-root *::after{animation:none!important;transition:none!important}
}