/* Edición Costa. Keep the sea and sky on the main practice surfaces. */
.topbar {background:var(--paper)}
.brand-name > span:first-child {color:var(--blue)}
.brand-mark {background:var(--ocean);color:var(--sky)}
.sidebar-note .brand-mark {display:grid;color:var(--sky)}
.top-stat.streak {background:var(--surf);color:var(--ocean)}
.top-stat.xp {background:var(--ice);color:var(--blue)}
.edition {background:var(--foam);color:var(--blue)}
.eyebrow,.side-label {color:var(--blue)}
.button.primary {box-shadow:0 3px 0 var(--shore)}
.button.orange {box-shadow:0 3px 0 var(--shore)}
.nav-button:hover {background:var(--foam)}
.nav-button[aria-current=page] {background:var(--ice);color:var(--ocean);border-color:var(--line)}

.welcome-hero {
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(22px,4vw,55px);
  padding:clamp(22px,3.6vw,48px);
  background:linear-gradient(145deg,var(--paper),var(--foam) 75%);
  border-color:var(--line);
}
.welcome-copy .display {max-width:9.4ch;color:var(--ocean);font-size:clamp(3.4rem,6.65vw,6.4rem);letter-spacing:-.075em}
.welcome-copy .display em {color:var(--blue)}
.welcome-copy .lead {max-width:39ch;line-height:1.58}
.hero-visual {
  width:100%;
  aspect-ratio:1.13;
  min-height:285px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:23px;
  border:1px solid var(--line);
  background:var(--ice) url('./assets/costa.svg') center / cover;
  padding:15px 16px 39px;
}
.hero-visual .ray-face {width:min(84%,385px);filter:drop-shadow(0 12px 9px #102c5130)}
.shore-label {
  position:absolute;top:14px;left:14px;z-index:1;
  background:var(--paper);color:var(--blue);border:1px solid var(--line);border-radius:999px;
  padding:5px 9px;font-size:.61rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase;
}
.hero-visual figcaption {
  display:flex;align-items:center;gap:9px;right:14px;bottom:14px;
  padding:7px 12px 7px 7px;border:1px solid var(--line);border-radius:13px;
  transform:none;box-shadow:0 5px 16px #102c511c;
  font-size:.84rem;line-height:1.23;
}
.hero-visual figcaption strong,.hero-visual figcaption small {display:block}
.hero-visual figcaption small {margin-top:2px;color:var(--quiet);font-size:.7rem;font-weight:600}
.incoming-icon {
  display:grid;place-items:center;width:34px;height:34px;border-radius:8px;
  background:var(--ocean);color:var(--sky);
}
.incoming-icon .icon {width:17px;height:17px}
.hero-micro {gap:13px;margin-top:18px}
.hero-micro article {border-radius:18px}
.coach {background:var(--ice)}
.coach .coach-ray {flex:none;border-radius:10px}
.course-banner,.course-banner.work,.course-banner.media {
  background:
    linear-gradient(100deg,var(--paper) 20%,var(--foam) 48%,#e5f3fe80 100%),
    var(--ice) url('./assets/costa.svg') right bottom / auto 100% no-repeat;
  border-color:var(--line);
}
.path-node.active {background:var(--foam);border-color:var(--shore);box-shadow:0 3px 0 var(--ice)}
.cabin {
  background:linear-gradient(145deg,var(--ocean),var(--deep));
  color:var(--paper);border-color:var(--ocean);
}
.cabin .eyebrow {color:var(--sky)}
.cabin .small,.cabin .lead {color:var(--surf)}
.cabin .card-title {color:var(--paper)}
.cabin .ray-face.mini {width:min(70%,175px);margin-inline:auto}
.cabin .ray-avatar {max-height:none;filter:drop-shadow(0 0 10px #83c4f360)}
.cabin .session-steps {color:var(--surf)}
.cabin .session-steps li {border-color:var(--blue)}
.cabin .session-steps strong {color:var(--sky)}
.correction.retry {border:1px dashed var(--shore)}
.results-card {background:linear-gradient(145deg,var(--paper),var(--ice));border-color:var(--line)}

/* A focused, dark call room. */
.call-screen {position:relative;display:grid;grid-template-rows:auto 1fr;min-height:min(750px,calc(100svh - 132px));max-width:100%;overflow:hidden;background:var(--deep);border:1px solid var(--shore);border-radius:27px;color:var(--paper);isolation:isolate;box-shadow:0 16px 42px #102c5112}
.call-screen :focus-visible {outline-color:var(--sky)}
.call-workspace :focus-visible,.call-caption :focus-visible {outline-color:var(--blue)}
.call-top {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 22px;border-bottom:1px solid var(--shore);color:var(--paper)}
.call-top > div {display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0}
.call-top h1,.call-top h2,.call-top strong {font-size:1rem;font-weight:800;letter-spacing:-.025em}
.call-top .small,.call-top p,.call-top time {color:var(--surf);font-size:.78rem}
.call-top .icon-btn,.call-top .button {background:var(--blue);border-color:var(--shore);color:var(--paper);box-shadow:none}
.call-top .tag {background:var(--blue);color:var(--surf)}
.call-top .tag.green {background:var(--blue);color:var(--surf)}
.call-top .call-timer {color:var(--sky);font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:750;white-space:nowrap}
.caller-stage {position:relative;display:grid;place-content:center;justify-items:center;gap:9px;padding:32px 22px;min-height:270px;background:var(--ice) url('./assets/costa.svg') center / cover}
.caller-stage h2,.caller-stage h3 {color:var(--ocean);letter-spacing:-.04em;font-size:1.3rem}
.caller-stage > p,.caller-stage .small {color:var(--ocean);text-align:center;max-width:32ch}
.ray-face {width:min(100%,240px);aspect-ratio:1;display:grid;place-items:center;position:relative;border-radius:30%;transform:translateZ(0)}
.ray-avatar {width:100%;height:100%;object-fit:contain}
.ray-face.listening {background:#ffffff38;box-shadow:0 0 0 1px #1c558e32,0 0 0 9px #ffffff36}
.ray-face.talking .ray-avatar {animation:ray-speech .44s ease-in-out infinite alternate}
@keyframes ray-speech {from {transform:scale(.985)}to {transform:translateY(-3px) scale(1.025)}}
.self-tile {position:absolute;right:20px;top:24px;width:112px;aspect-ratio:3/4;border:1px solid var(--shore);border-radius:16px;overflow:hidden;background:var(--blue);display:grid;place-items:center;box-shadow:0 6px 18px #081e3933;color:var(--surf)}
.self-tile video {display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);position:absolute;inset:0}
.self-tile .icon {width:25px;height:25px}
.self-tile .small,.self-tile > span:last-child,.self-label {position:absolute;bottom:7px;left:8px;right:8px;z-index:1;background:var(--deep);border-radius:6px;padding:3px 6px;font-size:.65rem;color:var(--paper);text-align:center}
.call-transcript {padding:17px 22px;border-top:1px solid var(--shore);background:var(--ocean);max-height:200px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--shore) var(--ocean);line-height:1.45}
.call-transcript p + p {margin-top:10px}
.call-transcript strong,.call-transcript .speaker {color:var(--sky);font-size:.75rem;font-weight:800}
.call-transcript .small,.call-transcript small {color:var(--surf)}
.call-transcript .translation {display:block;font-size:.81rem;color:var(--surf);margin-top:4px}
.call-footer {padding:17px 20px 20px;display:grid;justify-items:center;gap:12px;background:var(--deep);border-top:1px solid var(--shore);text-align:center}
.call-footer .small {color:var(--surf);max-width:55ch;line-height:1.4;font-size:.75rem}
.call-controls {display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.call-controls button,.call-controls .button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:50px;min-height:50px;padding:11px 15px;border:1px solid var(--shore);border-radius:15px;color:var(--paper);background:var(--blue);box-shadow:none;font-size:.8rem;font-weight:750;line-height:1.2}
.call-controls button:hover:not(:disabled) {background:var(--blue)}
.call-controls button.active,.call-controls button[aria-pressed=true],.call-controls .button.primary {background:var(--sky);border-color:var(--sky);color:var(--ocean)}
.call-controls button.active:hover,.call-controls button[aria-pressed=true]:hover,.call-controls .button.primary:hover {background:var(--sky)}
.call-controls .hangup,.call-controls .end-call,.call-controls [data-action="end-call"] {background:var(--blue);color:white;border-color:var(--shore)}
.call-controls .hangup:hover,.call-controls .end-call:hover,.call-controls [data-action="end-call"]:hover {background:var(--blue)}
.call-controls .icon {width:19px;height:19px}
.call-screen .answer {background:var(--blue);border-color:var(--shore);color:var(--paper);min-height:60px}
.call-screen .answer::placeholder {color:var(--surf)}
.call-screen .hint {background:var(--blue);color:var(--surf)}
.call-screen .correction {background:var(--blue);color:var(--surf)}
.call-screen .correction.retry {background:var(--blue);color:var(--surf)}
.call-input {display:flex;width:100%;gap:9px;max-width:650px;align-items:stretch}
.call-input input {min-width:0;flex:1;background:var(--blue);border:1px solid var(--shore);border-radius:12px;color:var(--paper);padding:10px 12px;min-height:46px}
.call-input input::placeholder {color:var(--surf)}
.call-input .button {flex:none;background:var(--sky);color:var(--ocean);border-color:var(--sky);box-shadow:none}
.call-status {display:flex;align-items:center;justify-content:center;gap:7px;color:var(--surf);font-size:.75rem}
.call-status::before {content:"";width:6px;height:6px;border-radius:50%;background:var(--sky);flex:none}
.incoming-call {
  background:linear-gradient(115deg,var(--ice),var(--paper) 74%);
  border:1px solid var(--line);border-radius:24px;padding:25px;
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.7fr);
  align-items:center;gap:23px;color:var(--ocean);
}
.incoming-call .ray-face {width:min(100%,210px);justify-self:center}
.incoming-call h2 {font-size:1.65rem;letter-spacing:-.05em;line-height:1.1}
.incoming-call p {max-width:39ch;color:var(--quiet)}
.incoming-call .small {color:var(--quiet)}
.incoming-call .row {gap:10px}
.incoming-call .button {border-color:var(--shore);background:var(--paper);color:var(--ocean)}
.incoming-call .button.primary {background:var(--ocean);color:var(--paper);border-color:var(--ocean);box-shadow:none}

/* Personal conversations and a deliberately quiet social layer. */
.chat-thread {display:flex;flex-direction:column;gap:14px;padding:20px 0;min-width:0;max-height:650px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--shore) transparent}
.chat-message {max-width:86%;padding:14px 17px;border-radius:18px;border:1px solid var(--line);line-height:1.5;overflow-wrap:anywhere;min-width:0;white-space:normal}
.chat-message p + p {margin-top:8px}
.chat-message.incoming {align-self:flex-start;background:var(--ice);color:var(--ocean);border-bottom-left-radius:5px}
.chat-message.outgoing {align-self:flex-end;background:var(--ocean);color:var(--paper);border-color:var(--ocean);border-bottom-right-radius:5px}
.chat-message .speaker,.chat-message > span:first-child,.chat-message > strong:first-child {display:block;font-size:.72rem;letter-spacing:.015em;margin-bottom:5px;color:var(--quiet)}
.chat-message.outgoing .speaker,.chat-message.outgoing > span:first-child,.chat-message.outgoing > strong:first-child {color:var(--sky)}
.chat-message .small,.chat-message small {display:block;font-size:.76rem;color:var(--quiet);margin-top:5px}
.chat-message.outgoing .small,.chat-message.outgoing small {color:var(--surf)}
.chat-message .button {min-height:36px;padding:7px 10px;font-size:.75rem;margin-top:8px}
.chat-message audio {max-width:100%;height:38px;margin-top:8px}
.chat-composer {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding-top:15px;border-top:1px solid var(--line)}
.chat-composer textarea {resize:vertical;min-height:67px;max-height:180px;border:1px solid var(--shore);border-radius:14px;background:var(--paper);padding:12px;color:var(--ocean);width:100%}
.chat-composer .button {min-height:49px}
.friends-grid {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);align-items:start;gap:18px}
.friends-grid > * {min-width:0}
.leader-table {border-collapse:collapse;width:100%;font-size:.87rem;table-layout:auto}
.leader-table th {padding:10px 9px;border-bottom:1px solid var(--line);color:var(--quiet);text-align:left;text-transform:uppercase;letter-spacing:.065em;font-size:.63rem;font-weight:800}
.leader-table td {padding:12px 9px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.leader-table th:first-child,.leader-table td:first-child {width:38px;color:var(--quiet);font-variant-numeric:tabular-nums}
.leader-table th:last-child,.leader-table td:last-child {text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.leader-table td:last-child {font-weight:800;color:var(--ocean)}
.leader-table tr:last-child td {border-bottom:0}
.leader-table tr.me,.leader-table tr.you,.leader-table tr.is-you,.leader-table tr[aria-current=true] {background:var(--surf)}
.leader-table .person,.leader-person {display:flex;align-items:center;gap:10px;min-width:0}
.leader-table .avatar,.friend-avatar {display:inline-grid;place-items:center;flex:none;width:33px;height:33px;border-radius:11px;background:var(--ice);color:var(--quiet);font-size:.72rem;font-weight:850}
.leader-table strong {font-size:.87rem;line-height:1.2}
.leader-table .small {font-size:.71rem;line-height:1.25}
.invite-card {background:var(--ice);border-color:var(--line);border-radius:13px;padding:13px}
.invite-card .eyebrow,.invite-card .small,.invite-card .lead {color:var(--quiet)}
.invite-card .card-title {color:var(--ocean)}
.invite-card code,.invite-code {display:block;background:var(--surf);border:1px dashed var(--shore);border-radius:11px;padding:12px 14px;font:750 1rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.06em;color:var(--ocean);overflow-wrap:anywhere;user-select:all}
.friend-form {display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.friend-form .form-field {flex:1;min-width:180px}
.friend-form .button {flex:none}
.form-field {display:grid;gap:6px;min-width:0}
.form-field > label,.form-field > span:first-child {font-size:.8rem;font-weight:760;color:var(--quiet)}
.form-field input,.form-field select,.form-field textarea {width:100%;min-width:0;min-height:46px;border:1px solid var(--shore);border-radius:12px;padding:10px 12px;font-size:1rem;background:var(--paper);color:var(--ocean)}
.form-field input::placeholder,.form-field textarea::placeholder {color:var(--quiet)}
.form-field .small {font-size:.73rem;color:var(--quiet)}
.friend-card {display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:13px 15px;background:var(--paper)}
.friend-card > div {min-width:0;flex:1}
.friend-card strong {display:block;overflow-wrap:anywhere}
.friend-card .small {font-size:.76rem}

@media(max-width:1080px) {
  .welcome-hero {gap:24px;padding:38px}
  .welcome-copy .display {font-size:clamp(3.4rem,6.5vw,5.3rem)}
}
@media(max-width:840px) {
  .navigation {grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:670px}
  .friends-grid {grid-template-columns:1fr}
  .call-screen {min-height:650px}
  .call-top {padding:16px 18px}
}
@media(max-width:640px) {
  .welcome-hero {grid-template-columns:1fr;gap:28px;padding:27px 22px 30px;border-radius:23px}
  .welcome-copy .display {font-size:clamp(3.35rem,14vw,5.2rem);max-width:9.4ch}
  .welcome-copy .lead {font-size:1rem;max-width:38ch}
  .hero-visual {aspect-ratio:auto;min-height:235px;border-radius:17px;padding:18px 10px 11px}
  .hero-visual .ray-face {width:min(79%,285px)}
  .hero-visual figcaption {position:static;justify-self:end;margin-top:-5px}
  .hero-micro {margin-top:12px}
  .call-screen {min-height:560px;border-radius:21px}
  .call-top {padding:14px;gap:8px}
  .call-top h1,.call-top h2,.call-top strong {font-size:.91rem}
  .call-top .small,.call-top p {font-size:.7rem}
  .caller-stage {padding:24px 16px 22px;min-height:225px;gap:7px}
  .caller-stage .ray-face {width:175px;max-width:100%}
  .caller-stage h2,.caller-stage h3 {font-size:1.12rem}
  .caller-stage > p {font-size:.78rem}
  .self-tile {right:11px;top:17px;width:76px;border-radius:12px}
  .self-tile .small,.self-tile > span:last-child,.self-label {font-size:.57rem;left:4px;right:4px;padding:3px 2px}
  .call-transcript {padding:14px;max-height:180px;font-size:.9rem}
  .call-footer {padding:14px 12px 17px;gap:10px}
  .call-controls {gap:7px}
  .call-controls button,.call-controls .button {min-width:45px;min-height:46px;padding:10px;border-radius:13px;font-size:.7rem;gap:6px}
  .call-controls .icon {width:18px;height:18px}
  .call-input {gap:6px}
  .call-input .button {padding:10px 12px;font-size:.76rem}
  .call-input input {padding:9px 10px;font-size:.9rem}
  .incoming-call {grid-template-columns:1fr;gap:7px;padding:22px 17px;border-radius:20px;text-align:center;justify-items:center}
  .incoming-call .ray-face {width:155px}
  .incoming-call .row {justify-content:center}
  .incoming-call h2 {font-size:1.45rem}
  .chat-thread {gap:11px;padding:17px 0}
  .chat-message {max-width:91%;padding:12px 14px;font-size:.9rem}
  .chat-composer {grid-template-columns:1fr;gap:8px}
  .chat-composer .button {justify-self:end;min-width:110px}
  .leader-table {font-size:.8rem}
  .leader-table th,.leader-table td {padding:10px 6px}
  .leader-table .person,.leader-person {gap:7px}
  .leader-table .avatar {width:28px;height:28px;border-radius:9px}
  .friends-grid {gap:13px}
}
@media(max-width:430px) {
  .nav-button {flex-direction:column;gap:3px;font-size:.66rem;line-height:1.1;padding:5px 2px;min-height:49px;border-radius:10px}
  .nav-button .icon {width:18px;height:18px}
  .nav-button .count {display:none}
  .top-status {gap:3px}
  .top-stat {gap:3px;padding:5px;font-size:.77rem}
  .welcome-hero {padding:25px 18px 29px}
  .self-tile {width:63px;right:9px}
  .caller-stage .ray-face {width:153px}
  .call-controls {gap:6px}
  .call-controls button,.call-controls .button {padding:9px;min-width:43px;font-size:.67rem;gap:4px}
  .friend-form .form-field {min-width:0;flex-basis:100%}
  .friend-form > .button {width:100%}
  .leader-table th:first-child,.leader-table td:first-child {width:26px}
  .leader-table .avatar {display:none}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Keep the response desk bright and readable beside the call stage. */
.call-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch}
.call-layout>.caller-stage{min-height:540px;display:flex;flex-direction:column;justify-content:center;padding:65px 18px 30px;gap:18px}
.call-workspace{background:var(--paper);color:var(--ocean);padding:30px;border-radius:0 0 24px 0}
.call-workspace .eyebrow,.call-workspace .small,.call-workspace summary,.call-workspace #call-status{color:var(--blue)}
.call-workspace .button:not(.primary){background:var(--paper);color:var(--ocean);border-color:var(--line)}
.call-workspace .button.primary{background:var(--ocean);color:var(--paper);border-color:var(--ocean)}
.call-workspace .answer{background:var(--paper);color:var(--ocean);border:2px solid var(--line)}
.call-workspace .call-feedback{background:var(--ice);color:var(--ocean);border:1px solid var(--line);padding:20px;border-radius:16px}
.call-workspace .call-transcript{background:var(--ice);color:var(--ocean);border-radius:12px;padding:14px}
.call-workspace .card-title{font-size:1.3rem;line-height:1.45}
.call-workspace .hint{color:var(--ocean);background:var(--ice)}
.call-layout .chat-thread{min-height:500px;max-height:750px;overflow:auto;padding:25px}
.call-caption{color:var(--ocean);padding:20px;max-width:650px;margin:auto;background:#fffffff0;border:1px solid var(--line);border-radius:18px}
.call-caption h1{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.05}
.call-caption .row,.call-caption p[lang]{margin-top:10px}
.call-caption h1 + p{margin:10px 0 14px}
.call-caption .eyebrow{color:var(--blue)}
.call-finish{color:var(--ocean);margin:25px}
@media(max-width:800px){.call-layout{grid-template-columns:1fr}.call-layout>.caller-stage{min-height:250px;padding:22px 15px 18px}.call-layout .ray-face{width:150px}.call-workspace{padding:22px;border-radius:0 0 24px 24px}.call-layout .chat-thread{min-height:170px;max-height:360px}}