/* The supplied Sign ASL artwork is the complete wordmark. */
.signasl-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 1;
}
.signasl-brand .signasl-logo {
  display: block;
  width: auto;
  height: 76px;
  max-width: 170px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.signasl-brand:focus-visible {
  outline: 3px solid #327eac;
  outline-offset: 6px;
  border-radius: 4px;
}
.signasl-brand--secondary { margin-bottom: 24px; }
.signasl-brand-header { flex-wrap: wrap; }
@media (max-width: 760px) {
  .signasl-brand .signasl-logo { height: 64px; max-width: 146px; }
  .signasl-brand-header { gap: 14px; }
  .signasl-brand-header > span { flex: 1; }
}

/* Logo palette: blue actions, teal selections, cyan highlights. */
:root {
  --brand-blue: #1356cf;
  --brand-blue-hover: #1146ac;
  --brand-teal: #087a86;
  --brand-teal-ink: #0f6170;
  --brand-cyan: #62e4e7;
  --brand-mist: #e8fafa;
  --brand-control-line: #748fa9;
  --paper: #f5f9fc;
  --surface: #fff;
  --ink: #142a42;
  --muted: #52677d;
  --line: #d5e4ed;
  --pine: var(--brand-blue);
  --blue: var(--brand-blue);
  --soft: #eaf2ff;
  --accent: var(--brand-teal);
  color: var(--ink);
  background: var(--paper);
  accent-color: var(--brand-teal);
}
body, .studio-page {
  color: var(--ink);
  background: radial-gradient(ellipse at 95% 0, #d8f7f780, transparent 42%), var(--paper);
}
::selection { background: #b9eeee; color: var(--ink); }
:is(button, a, summary, input, textarea, select):focus-visible,
.studio-page :is(button, a, summary, input, textarea, select):focus-visible,
.avatar-options button:focus-visible, .avatar-trigger:focus-visible,
.task-tabs button:focus-visible, .signasl-brand:focus-visible,
#avatar-canvas:focus-visible, #letter-avatar:focus-visible,
.rating-choice label:has(input:focus-visible) {
  outline-color: var(--brand-blue);
}
.studio-page .site-header, .signasl-brand-header { border-color: var(--line); }
.studio-brand, .header-about, .studio-nav a[aria-current] { color: var(--brand-blue); }
.studio-nav, .task-tabs, .catalog-switch { background: #edf4fa; border-color: var(--line); }
.studio-nav a, .task-tabs button, .word-chip { color: var(--muted); }
.studio-nav a[aria-current], .task-tabs button[aria-pressed=true] {
  color: var(--brand-blue);
  box-shadow: 0 2px 6px #1356cf0d;
}
.header-about:hover, .text-button:hover { color: var(--brand-teal); }
.hero-copy h1 span, .alphabet-welcome h1 span { color: var(--brand-blue); }
.hero-eyebrow, .hero-copy>p:not(.hero-eyebrow), .hero-benefits,
.alphabet-welcome p:not(.hero-eyebrow), .practice-section-heading>p {
  color: var(--muted);
}
.hero-eyebrow>span, .hero-benefits svg,
.practice-section-heading>p span { color: var(--brand-teal); }
.journey-card {
  background: linear-gradient(120deg, #243dc2 0%, #0866b6 62%, #087a86 100%);
  box-shadow: 0 12px 28px #1356cf18;
}
.journey-kicker, .journey-card>p, .journey-meter label, .journey-people { color: #fff; }
.journey-spark { color: var(--brand-cyan); }
.journey-start { background: var(--brand-cyan); color: #053f5b; }
.journey-start:hover { background: #a6f5f1; }
.journey-start:disabled { opacity: 1; background: #b5dde5; color: #2c576a; }
.portrait-stack img { border-color: #0866b6; background: var(--brand-mist); }
progress, progress::-webkit-progress-bar { background: #e0ebf3; }
progress::-webkit-progress-value { background: var(--brand-teal); }
progress::-moz-progress-bar { background: var(--brand-teal); }
.journey-meter progress, .journey-meter progress::-webkit-progress-bar { background: #ffffff30; }
.journey-meter progress::-webkit-progress-value { background: var(--brand-cyan); }
.journey-meter progress::-moz-progress-bar { background: var(--brand-cyan); }
.task-panel, .studio-page .player-card { border-color: var(--line); box-shadow: 0 8px 28px #1356cf08; }
.practice-select-label, .learn-panel>p, .practice-progress-label,
.learn-panel .practice-storage, .learn-panel .practice-note, .step-state { color: var(--muted); }
.practice-step { color: var(--muted); }
.practice-step:hover { background: #f0f8fc; }
.practice-step[aria-current=true] { background: var(--brand-mist); border-color: #b4dfdf; color: var(--brand-teal-ink); }
.step-number { background: #edf4fa; color: var(--muted); }
.practice-step[aria-current=true] .step-number { background: var(--brand-teal); color: #fff; }
.learn-panel .practice-note, .alphabet-welcome-note { border-color: var(--line); }
.primary-button, .studio-page .primary-button, .studio-page .play-button,
.submit-feedback, #inbox-login button {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 3px 8px #1356cf1a;
}
.primary-button:hover, .studio-page .primary-button:hover, .studio-page .play-button:hover,
.submit-feedback:hover, #inbox-login button:hover { background: var(--brand-blue-hover); }
.studio-page .stage { background: radial-gradient(ellipse at 50% 30%, #fcfeff 0%, #eef7fb 55%, #e0f1f4 100%); }
.studio-page .stage-topline, .stage-character, .character-kind, .letter-badge { color: var(--muted); }
.status-dot, .view-dot, .stage-character-dot, .sign-indicator { background: var(--brand-teal); }
.loading-overlay { background: #eef7fbf5; }
.spinner { border-color: #b9dfe6; border-top-color: var(--brand-blue); }
.studio-page .player-options, .studio-page .view-options>summary { background: #f8fcff; }
.studio-page .view-options>summary, .studio-page .detail-hint { color: var(--muted); }
#review-shortcut { color: var(--brand-blue); }
#review-shortcut:hover { color: var(--brand-teal); }
.view-options>summary:hover { background: #edf7fb; }
.view-options[open]>summary { border-color: var(--line); }
.avatar-trigger { background: #f3f9fc; border-color: var(--line); color: var(--ink); }
.avatar-trigger:hover { background: var(--brand-mist); }
.avatar-trigger small, .avatar-picker-heading p, .avatar-options .avatar-description { color: var(--muted); }
.avatar-trigger img { background: #e2f1f5; }
.studio-page .speed-control button.active, .studio-page .loop-button[aria-pressed=true],
.camera-control-row button[aria-pressed=true], .phrase-segments button.active {
  background: var(--brand-mist); color: var(--brand-teal-ink); border-color: #98cbce;
}
.studio-page .sentence-modes button { border-color: var(--brand-control-line); color: var(--muted); }
.studio-page .sentence-modes button[aria-pressed=true] {
  background: var(--soft); border-color: var(--brand-blue); color: var(--brand-blue);
}
.studio-page .sentence-examples button { background: var(--brand-mist); color: var(--brand-teal-ink); }
.studio-page .sentence-examples button:hover { background: #c9f0ef; }
.studio-page .sentence-input-label, .alphabet-task label { color: var(--muted); }
.studio-page #word-input, #name-input, .search-box, #practice-set,
.collection-select select, #translation-sequence, #inbox-login input {
  border-color: var(--brand-control-line); color: var(--ink);
}
.search-box:focus-within { border-color: var(--brand-blue); outline-color: var(--brand-blue); }
.studio-page #word-input::placeholder, #name-input::placeholder,
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.studio-page .composer-hint, .studio-page .input-message { color: var(--muted); }
.studio-page .input-message.error { color: #9b3535; }
.studio-page #word-input[aria-invalid=true], #name-input[aria-invalid=true] { border-color: #a33535; }
.studio-page .translation-preview, #translation-sequence { background: #f3f8ff; border-color: #b8cfe8; }
.translation-part { background: var(--soft); border-color: #c3d6ef; color: var(--brand-blue); }
.translation-part.spelled { background: var(--brand-mist); border-color: #98cbce; color: var(--brand-teal-ink); }
.translation-notes { border-color: #b7d7e9; }
.word-list { scrollbar-color: #b4cbdc transparent; }
.word-chip:hover { background: #f0f8fc; }
.word-chip.active { color: var(--brand-teal-ink); background: var(--brand-mist); border-color: #b4dfdf; }
.suggest-word-button { color: var(--brand-blue); }
.suggest-word-button:hover { color: var(--brand-teal); }
.practice-coach { background: #e9f9f7; border-color: #b8e5df; }
.coach-icon { background: #cef2ee; color: var(--brand-teal-ink); }
.practice-coach h3 { color: var(--brand-teal-ink); }
.practice-coach p { color: #3d6c73; }
.practice-coach button { border-color: var(--brand-teal); color: var(--brand-teal-ink); }
.practice-coach button:hover { background: #d9f4f0; }
.letter-art b { color: var(--brand-blue); background: #e5edff; }
.letter-art b:nth-child(2) { color: #0864a2; background: #dff4ff; }
.letter-art b:nth-child(3) { color: var(--brand-teal-ink); background: #d9f4f0; }
.alphabet-grid button, .spelling-letters button { color: var(--brand-blue); background: #f2f7ff; border-color: #c7d8ed; }
.alphabet-grid button:hover { background: #e2f4f8; }
.alphabet-grid button.active, .spelling-letters button.active {
  background: var(--brand-mist); border-color: var(--brand-teal); color: var(--brand-teal-ink);
}
.letter-badge strong { color: var(--brand-blue); }
.studio-dialog, .suggestion-dialog { color: var(--ink); border-color: var(--line); box-shadow: 0 24px 90px #142a4230; }
.studio-dialog::backdrop, .suggestion-dialog::backdrop { background: #142a4266; }
.studio-dialog .dialog-close, .suggestion-dialog .dialog-close { background: #edf4fa; color: var(--muted); }
.review-panel label:not(.rating-choice label), .suggestion-kicker,
.suggestion-note, #suggestion-description { color: var(--muted); }
.review-panel select, .review-panel textarea, .review-panel input:not([type=radio]),
#suggestion-fields input, #suggestion-fields textarea { border-color: var(--brand-control-line); background: #fff; color: var(--ink); }
.review-panel input::placeholder, .review-panel textarea::placeholder,
#suggestion-word::placeholder, #suggestion-context::placeholder { color: var(--muted); }
.rating-choice svg { stroke: var(--muted); }
.rating-choice label:hover { background: var(--brand-mist); }
.feedback-details { border-color: var(--line); }
.feedback-details summary { color: var(--muted); }
.footer-line>span:first-child { color: var(--ink); }
.avatar-picker-heading h2 { color: var(--ink); }
.avatar-picker-heading [role=status] { color: var(--brand-teal-ink); }
.avatar-options button { background: #f0f7fb; color: var(--ink); }
.avatar-options button:hover { background: #e0f3f5; }
.avatar-options button[aria-pressed=true] { border-color: var(--brand-teal); background: var(--brand-mist); }
.note { background: var(--soft); border-left-color: var(--brand-blue); }
.note, .note p { color: var(--ink); }
.signasl-brand-header a { color: var(--brand-blue); }
.signasl-brand-header>span, body:has(#inbox-login) .eyebrow,
body:has(#inbox-login) .intro, #inbox-login p, #inbox-status,
.feedback-meta, .feedback-footer span { color: var(--muted); }
#inbox-login, .feedback-item { border-color: var(--line); }
.feedback-topline a, .feedback-topline h3 { color: var(--brand-blue); }
.inbox-toolbar button, .inbox-switch button, .feedback-footer button {
  background: var(--brand-mist); color: var(--brand-teal-ink); border-color: #98cbce;
}
.inbox-switch button[aria-pressed=true] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }