/* The Java UI's look (ADR-0005), the same recipe as web/src/index.css: the Storm tokens unchanged
   (storm-tokens.css, generated), Cervetos' own accent and radius on top, then Lumo's custom
   properties pointed at those tokens so every Vaadin component picks up the look by itself.
   Screen-specific styles (deck, conversations, login) arrive with their screens. */
@import url("storm-tokens.css");

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  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 Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Cervetos accent: the v2 orange from app-v2.css, so the screens without the shell match it.
     600 is the fill behind white text (4.75:1), 700 the hover and the orange text on white and on
     brand-50 (5.45:1 and 4.84:1), 500 decoration only (3.0:1 with white). */
  --color-brand-50: var(--sm2-orange-soft);
  --color-brand-100: var(--sm2-orange-line);
  --color-brand-200: var(--sm2-orange-line);
  --color-brand-500: var(--sm2-orange);
  --color-brand-600: var(--sm2-orange-ink);
  --color-brand-700: var(--sm2-orange-deep);
  --color-brand-800: #7A2E0E;
  --color-text-link: var(--sm2-orange-deep);
  --color-border-focus: var(--sm2-orange-ink);
  /* The guideline's "tight" radius: controls 5px, cards 6px, dialogs 9px. */
  --sm-radius-control: 5px;
  --sm-radius-card: 6px;
  --sm-radius-dialog: 9px;
  --sm-stage: #0f1729;
}

html {
  --lumo-font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lumo-font-size-xxs: 0.6875rem;
  --lumo-font-size-xs: 0.75rem;
  --lumo-font-size-s: 0.8125rem;
  --lumo-font-size-m: 0.875rem;
  --lumo-font-size-l: 1rem;
  --lumo-font-size-xl: 1.125rem;
  --lumo-font-size-xxl: 1.4375rem;
  --lumo-font-size-xxxl: 2.125rem;
  --lumo-line-height-m: 1.5;
  --lumo-size-s: 1.875rem;
  --lumo-size-m: 2.25rem;
  --lumo-size-l: 2.75rem;

  --lumo-border-radius-s: 4px;
  --lumo-border-radius-m: var(--sm-radius-control);
  --lumo-border-radius-l: var(--sm-radius-dialog);

  --lumo-base-color: var(--color-surface-raised);
  --lumo-header-text-color: var(--color-text-strong);
  --lumo-body-text-color: var(--color-text-default);
  --lumo-secondary-text-color: var(--color-text-secondary);
  --lumo-tertiary-text-color: var(--color-text-muted);
  --lumo-disabled-text-color: var(--color-text-disabled);

  /* Lumo's neutral ladder in Storm ink (rgb 15 23 41) instead of Lumo's blue-grey. */
  --lumo-contrast-5pct: rgba(15, 23, 41, 0.04);
  --lumo-contrast-10pct: rgba(15, 23, 41, 0.08);
  --lumo-contrast-20pct: rgba(15, 23, 41, 0.16);
  --lumo-contrast-30pct: rgba(15, 23, 41, 0.28);
  --lumo-contrast-40pct: rgba(15, 23, 41, 0.38);
  --lumo-contrast-50pct: rgba(15, 23, 41, 0.5);
  --lumo-contrast-60pct: rgba(15, 23, 41, 0.6);
  --lumo-contrast-70pct: rgba(15, 23, 41, 0.7);
  --lumo-contrast-80pct: rgba(15, 23, 41, 0.8);
  --lumo-contrast-90pct: rgba(15, 23, 41, 0.9);
  --lumo-contrast: var(--color-text-strong);

  --lumo-primary-color: var(--color-brand-600);
  --lumo-primary-color-50pct: rgba(196, 77, 23, 0.75); /* Lumo's focus ring: Storm's 75% */
  --lumo-primary-color-10pct: rgba(232, 116, 59, 0.12);
  --lumo-primary-text-color: var(--color-brand-700);
  --lumo-primary-contrast-color: #fff;
  --lumo-error-color: var(--color-danger-600);
  --lumo-error-color-50pct: rgba(220, 38, 38, 0.5);
  --lumo-error-color-10pct: rgba(220, 38, 38, 0.08);
  --lumo-error-text-color: var(--color-danger-700);
  --lumo-success-color: var(--color-success-600);
  --lumo-success-color-50pct: rgba(22, 163, 74, 0.5);
  --lumo-success-color-10pct: rgba(22, 163, 74, 0.1);
  --lumo-success-text-color: var(--color-success-700);
  --lumo-box-shadow-xs: var(--shadow-raised);
  --lumo-box-shadow-s: var(--shadow-overlay);
  --lumo-box-shadow-m: var(--shadow-overlay);
  --lumo-box-shadow-l: var(--shadow-dialog);
  --lumo-box-shadow-xl: var(--shadow-dialog);

  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  background: var(--color-surface-page);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-surface-page);
}

h1, h2, h3 {
  margin: 0;
  color: var(--color-text-strong);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: 23px; font-weight: 750; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 650; line-height: 1.3; }
h3 { font-size: 14px; font-weight: 650; line-height: 1.4; }
p { margin: 0; }

::selection { background: rgba(232, 116, 59, 0.25); }

/* ---------- Components: Storm treatments on Lumo ---------- */

vaadin-button {
  font-weight: 600;
  letter-spacing: 0;
  padding: 0 15px;
  cursor: pointer;
}
/* Storm "secondary": white, control border, raised shadow. Lumo's default is a grey fill. */
vaadin-button:not([theme~="primary"]):not([theme~="tertiary"]):not([theme~="tertiary-inline"]) {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-raised);
  color: var(--color-text-secondary);
}
vaadin-button[theme~="error"]:not([theme~="primary"]):not([theme~="tertiary"]):not([theme~="tertiary-inline"]) { color: var(--color-danger-700); }
vaadin-button[theme~="primary"] { box-shadow: var(--shadow-overlay); }
vaadin-button[theme~="primary"]:not([theme~="error"]):hover { background-color: var(--color-brand-700); }

vaadin-text-field, vaadin-email-field, vaadin-password-field, vaadin-integer-field,
vaadin-select, vaadin-combo-box, vaadin-date-picker, vaadin-text-area {
  --vaadin-input-field-label-font-weight: 600;
  --vaadin-input-field-label-color: var(--color-text-secondary);
  --vaadin-input-field-label-font-size: 13px;
}
vaadin-text-field::part(input-field), vaadin-email-field::part(input-field),
vaadin-password-field::part(input-field), vaadin-integer-field::part(input-field),
vaadin-select::part(input-field), vaadin-combo-box::part(input-field),
vaadin-date-picker::part(input-field), vaadin-text-area::part(input-field),
vaadin-message-input vaadin-text-area::part(input-field) {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--sm-radius-control);
}
vaadin-text-field[focused]::part(input-field), vaadin-email-field[focused]::part(input-field),
vaadin-password-field[focused]::part(input-field), vaadin-integer-field[focused]::part(input-field),
vaadin-select[focused]::part(input-field), vaadin-combo-box[focused]::part(input-field),
vaadin-date-picker[focused]::part(input-field), vaadin-text-area[focused]::part(input-field) {
  background: #fff;
  border-color: var(--color-brand-600);
}
vaadin-text-field::part(label), vaadin-email-field::part(label), vaadin-password-field::part(label),
vaadin-integer-field::part(label), vaadin-select::part(label), vaadin-combo-box::part(label),
vaadin-date-picker::part(label), vaadin-text-area::part(label) {
  font-weight: 600;
  color: var(--color-text-secondary);
}

vaadin-dialog::part(overlay) { border-radius: var(--sm-radius-dialog); box-shadow: var(--shadow-dialog); }

vaadin-grid {
  --vaadin-grid-cell-padding: 10px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--sm-radius-card);
  box-shadow: var(--shadow-raised);
  font-size: 13.5px;
}
vaadin-grid::part(header-cell) {
  background: var(--color-surface-sunken);
  font-size: 12px;
  font-weight: 650;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-height: 40px;
}
vaadin-grid::part(body-cell) { min-height: 52px; }

/* Choice cards: a real vaadin-radio-group, each radio styled as a card. */
vaadin-radio-group.sm-choices::part(group-field) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
vaadin-radio-group.sm-choices vaadin-radio-button {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--sm-radius-card);
  background: #fff;
  box-shadow: var(--shadow-raised);
  align-items: flex-start;
}
vaadin-radio-group.sm-choices vaadin-radio-button[checked] {
  border-color: var(--color-brand-600);
  background: var(--color-brand-50);
  box-shadow: 0 0 0 1px var(--color-brand-600);
}
vaadin-radio-group.sm-choices vaadin-radio-button::part(radio) { margin-top: 2px; }

vaadin-checkbox::part(label) { font-weight: 600; color: var(--color-text-default); }

/* Function areas (FRD M1): the catalog as two columns of checkboxes; a greyed one means three are chosen. */
vaadin-checkbox-group.sm-area-choices::part(group-field) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

/* The work level card follows the answer grid on the profile; it keeps the card rhythm. */
.sm-work-level { margin-top: 16px; }
.sm-work-level vaadin-checkbox::part(label) { font-weight: 500; }

/* ---------- App shell ---------- */

vaadin-app-layout::part(navbar) {
  min-height: 56px;
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: none;
}
vaadin-app-layout { background: var(--color-surface-page); }

.sm-header { display: flex; align-items: center; gap: 22px; width: 100%; }
.sm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text-strong); }
.sm-brand img { width: 30px; height: 30px; display: block; }
.sm-header-end .sm-user { font-size: 13.5px; font-weight: 600; color: var(--color-text-default); }
.sm-header-end vaadin-select { width: 190px; }
.sm-wordmark { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.sm-nav { display: flex; align-items: center; gap: 2px; }
.sm-nav-group { font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 6px 0 14px; }
.sm-nav a {
  padding: 6px 10px;
  border-radius: var(--sm-radius-control);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.sm-nav a:hover { background: var(--color-surface-sunken); color: var(--color-text-strong); }
.sm-nav a[highlight] { background: var(--color-brand-50); color: var(--color-brand-700); font-weight: 650; }
.sm-header-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sm-lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: var(--color-surface-sunken); }
.sm-lang vaadin-button { min-width: 0; height: 24px; margin: 0; padding: 0 9px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); border-radius: 4px; }
.sm-lang vaadin-button.on { background: #fff; color: var(--color-text-strong); box-shadow: var(--shadow-raised); }

.sm-page { box-sizing: border-box; width: 100%; max-width: 1152px; margin: 0 auto; padding: 32px 24px 64px; }
.sm-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sm-subtitle { margin-top: 4px; font-size: 14px; color: var(--color-text-secondary); }

/* ---------- Primitives ---------- */

.sm-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--sm-radius-card);
  box-shadow: var(--shadow-raised);
  padding: 24px;
  box-sizing: border-box;
}
.sm-card + .sm-card { margin-top: 16px; }
.sm-hint { font-size: 13px; color: var(--color-text-secondary); }
.sm-fineprint { font-size: 12px; color: var(--color-text-secondary); }
.sm-strong { font-weight: 600; color: var(--color-text-strong); }
.sm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sm-stack { display: flex; flex-direction: column; gap: 16px; }
.sm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sm-divider { height: 1px; background: var(--color-border-subtle); margin: 20px 0; }

.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.sm-badge.brand { background: var(--color-brand-50); color: var(--color-brand-700); border-color: var(--color-brand-200); }
.sm-badge.match { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-200); }
.sm-badge.muted { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.sm-badge.danger { background: var(--color-danger-50); color: var(--color-danger-700); border-color: var(--color-danger-200); }
.sm-badge.unknown { background: #fff; color: var(--color-text-secondary); border: 1px dashed var(--color-border-default); }

.sm-note {
  padding: 10px 12px;
  border-radius: var(--sm-radius-card);
  font-size: 13px;
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  border: 1px solid var(--color-brand-200);
}
.sm-note.warn { background: var(--color-warn-50); color: var(--color-warn-700); border-color: var(--color-warn-200); }

/* ---------- Home ---------- */

.sm-home-title { font-size: 36px; font-weight: 750; line-height: 1.1; letter-spacing: -0.025em; }
.sm-home-intro { margin-top: 12px; max-width: 42rem; font-size: 16px; color: var(--color-text-secondary); }
.sm-next { max-width: 42rem; margin-top: 32px; padding: 28px; }
.sm-next-label { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-700); }
.sm-next h2 { margin-top: 6px; font-size: 20px; }
.sm-next p { margin-top: 8px; font-size: 14px; color: var(--color-text-secondary); }
.sm-next a[theme~="primary"], .sm-button-link {
  display: inline-flex; align-items: center; margin-top: 20px; min-height: 36px; padding: 0 15px;
  border-radius: var(--sm-radius-control); background: var(--color-brand-600); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-overlay);
}
.sm-button-link:hover { background: var(--color-brand-700); }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .sm-header { gap: 12px; flex-wrap: wrap; }
  .sm-page { padding: 24px 16px 48px; }
  .sm-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Candidate screens (phase 2) ---------- */

.sm-link { color: var(--color-text-link); font-weight: 600; text-decoration: none; }
.sm-link:hover { text-decoration: underline; }
.sm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sm-error-note { padding: 10px 14px; border-radius: var(--sm-radius-control); border: 1px solid var(--color-danger-200, #fecaca); background: var(--color-danger-50, #fef2f2); color: var(--color-danger-700, #b91c1c); font-size: 14px; }
.sm-success-note { font-size: 14px; font-weight: 600; color: var(--color-success-700); }
.sm-section-title { margin: 28px 0 12px; font-size: 13px; font-weight: 650; color: var(--color-text-secondary); }
.sm-card h2 { font-size: 18px; }
.sm-card + .sm-card, .sm-card + .sm-error-note, .sm-error-note + .sm-card { margin-top: 16px; }
.sm-copy-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.sm-copy-row .sm-code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--sm-radius-control); background: var(--color-surface-subtle); font-size: 13px; }
.sm-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sm-answer-grid .sm-card + .sm-card { margin-top: 0; }
.sm-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* The journey: where a candidate is on the way to a live profile. */
.sm-journey { margin-bottom: 24px; padding: 14px 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--sm-radius-card); background: #fff; }
.sm-journey-title { font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.sm-journey ol { margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sm-journey-step { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--sm-radius-control); font-size: 12px; font-weight: 550; color: var(--color-text-secondary); text-decoration: none; }
.sm-journey-step.current { background: var(--color-brand-50); color: var(--color-brand-800, #7A2E0E); }
.sm-journey-step.done { color: var(--color-text-default); }
.sm-journey-dot { width: 24px; height: 24px; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.sm-journey-step.done .sm-journey-dot { background: var(--color-brand-600); color: #fff; }
.sm-journey-step.current .sm-journey-dot { background: #fff; color: var(--color-brand-700); box-shadow: 0 0 0 2px var(--color-brand-600); }

/* Guided pitch: one question at a time. */
.sm-guided { max-width: 42rem; margin: 0 auto; text-align: center; }
.sm-guided-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; font-weight: 550; }
.sm-guided .sm-progress { margin-bottom: 24px; }
.sm-guided .sm-progress span { flex: 1; width: auto; height: 6px; }
.sm-guided h2 { margin: 12px auto 0; max-width: 32rem; font-size: 24px; letter-spacing: -0.02em; }
.sm-guided .sm-row { justify-content: center; margin-top: 24px; }
.sm-done-mark { width: 48px; height: 48px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; font-size: 20px; font-weight: 700; background: var(--color-success-50); color: var(--color-success-700); }

/* <sm-video-recorder>: the camera in a modal. */
sm-video-recorder.sm-rec-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 41, 0.6); }
.sm-rec { width: 100%; max-width: 36rem; overflow: hidden; border-radius: var(--sm-radius-dialog); background: #fff; box-shadow: var(--shadow-dialog); }
.sm-rec-stage { position: relative; aspect-ratio: 16 / 9; background: var(--sm-stage); }
.sm-rec-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-rec-stage video[controls] { object-fit: contain; }
.sm-rec-stage [hidden] { display: none !important; }
.sm-rec-question { position: absolute; inset: 0 0 auto 0; padding: 16px; text-align: center; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent); }
.sm-rec-question-meta { font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.sm-rec-question-text { margin-top: 4px; font-size: 16px; font-weight: 650; color: #fff; }
.sm-rec-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #e2e8f0; font-size: 14px; }
.sm-rec-countdown-label { font-size: 14px; font-weight: 550; color: rgba(255, 255, 255, 0.85); }
.sm-rec-countdown { font-size: 60px; font-weight: 750; color: #fff; }
.sm-rec-saving { background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; }
.sm-rec-clock { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; font-weight: 550; }
.sm-rec-clock::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: #ef4444; animation: sm-pulse 1.2s ease-in-out infinite; }
@keyframes sm-pulse { 50% { opacity: 0.35; } }
.sm-rec-error { margin: 0; padding: 8px 16px; border-top: 1px solid var(--color-danger-100, #fee2e2); background: var(--color-danger-50, #fef2f2); color: var(--color-danger-700, #b91c1c); font-size: 14px; }
.sm-rec-error[hidden], .sm-rec-actions [hidden] { display: none; }
.sm-rec-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; }

/* <sm-direct-upload>: a file chooser styled as a button. */
sm-direct-upload { display: inline-block; }
.sm-upload { position: relative; display: inline-flex; cursor: pointer; }
.sm-upload-button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--color-border-default); border-radius: var(--sm-radius-control); background: #fff; font-size: 14px; font-weight: 600; color: var(--color-text-default); }
.sm-upload:hover .sm-upload-button { background: var(--color-surface-subtle); }
.sm-upload:focus-within .sm-upload-button { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
sm-direct-upload.primary .sm-upload-button { border-color: var(--color-brand-600); background: var(--color-brand-600); color: #fff; }
sm-direct-upload.primary .sm-upload:hover .sm-upload-button { background: var(--color-brand-700); }
sm-direct-upload.disabled .sm-upload { cursor: default; opacity: 0.5; }

/* <sm-pitch-player>: question card, answer, chapters. */
sm-pitch-player { display: block; }
.sm-player-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sm-radius-card); background: #000; }
.sm-player-stage video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.sm-player-stage video.hidden { opacity: 0; }
.sm-player-stage [hidden] { display: none !important; }
.sm-player-card { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: linear-gradient(135deg, var(--color-brand-700), #7A2E0E); }
.sm-player-card-meta { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.sm-player-card-text { margin: 8px auto 0; max-width: 28rem; font-size: 20px; font-weight: 700; color: #fff; }
.sm-player-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(0, 0, 0, 0.2); cursor: pointer; }
.sm-player-play span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--color-brand-700); font-size: 18px; }
.sm-player-watermark { position: absolute; pointer-events: none; user-select: none; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: 550; }
.sm-player-watermark.c0 { left: 12px; top: 12px; }
.sm-player-watermark.c1 { right: 12px; top: 12px; }
.sm-player-watermark.c2 { right: 12px; bottom: 12px; }
.sm-player-watermark.c3 { left: 12px; bottom: 12px; }
.sm-player-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sm-player-chapter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--color-surface-sunken); color: var(--color-text-secondary); font: inherit; font-size: 12px; font-weight: 550; cursor: pointer; }
.sm-player-chapter.on { background: var(--color-brand-600); color: #fff; }
.sm-player-chapter:disabled { opacity: 0.4; cursor: default; }
.sm-player-chapter-time { opacity: 0.7; }
.sm-player-empty { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: var(--sm-radius-card); background: var(--sm-stage); color: #94a3b8; font-size: 14px; }

/* Public profile: a page of its own, without the app header. */
.sm-public { min-height: 100vh; background: var(--color-surface-subtle); }
.sm-public-inner { max-width: 42rem; margin: 0 auto; padding: 40px 16px; }
/* Wraps, so a long first name and the availability badge never widen the page on a phone. */
.sm-public-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sm-public-head h1 { font-size: 26px; overflow-wrap: anywhere; min-width: 0; }
.sm-public-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.sm-public-footer { margin-top: 24px; text-align: center; font-size: 14px; color: var(--color-text-muted); }
.sm-centered { min-height: 100vh; display: grid; place-items: center; color: var(--color-text-secondary); }

/* CV review. */
.sm-claims { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.sm-claim { padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--sm-radius-card); }
.sm-claim-type { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.sm-claim-source { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--color-border-subtle); font-size: 14px; color: var(--color-text-secondary); white-space: pre-line; }
.sm-claim-source span { display: block; font-size: 12px; }
.sm-claim-dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sm-confirm-bar { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); }
.sm-older { margin: 12px 0 0; padding: 0; list-style: none; }
.sm-older li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 14px; }

/* Interests: one card per employer, the conversation inside once accepted. */
.sm-interest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sm-conversation { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); }
.sm-messages { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sm-messages .sm-bubble { max-width: 80%; }
.sm-composer { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.sm-composer vaadin-text-field { flex: 1; }
.sm-bubble-row { display: flex; }
.sm-bubble-row.own { justify-content: flex-end; }
.sm-bubble { padding: 10px 13px; border-radius: 9px; font-size: 14px; line-height: 1.5; background: var(--color-surface-sunken); white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-bubble-row.own .sm-bubble { background: var(--color-brand-50); border: 1px solid var(--color-brand-100); }
.sm-bubble-meta { margin-top: 4px; font-size: 12px; color: var(--color-text-secondary); }
.sm-progress { display: flex; gap: 4px; }
.sm-progress span { display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--color-border-default); }
.sm-progress span.done { background: var(--color-success-600, #16a34a); }
.sm-progress span.on { background: var(--color-brand-500); }

@media (max-width: 900px) {
  .sm-answer-grid, .sm-claim-dates { grid-template-columns: 1fr 1fr; }
  .sm-journey ol { grid-template-columns: 1fr 1fr; }
  vaadin-radio-group.sm-choices::part(group-field) { grid-template-columns: 1fr; }
  vaadin-checkbox-group.sm-area-choices::part(group-field) { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sm-answer-grid { grid-template-columns: 1fr; }
}