/* Mafy Labs: asiakassivujen (aloitussivu, arviointi, kielenhuolto,
   kirjoitustaito, kutsu) yhteiset tyylit. Ulkoasu noudattaa Mafynettiä:
   tokenit shared/mafynetti-tokens.css, ohje designsystem_aiai.md. */

/* ===== Mafynetti: hallinnan kanssa jaetut komponentit =====
   Napit, kentät ja muut perusluokat määritellään labs-base.css:ssä, jota
   hallinta käyttää sellaisenaan. Tämä tiedosto ladataan vain asiakassivuilla
   labs-base.css:n jälkeen, joten alla olevat säännöt korvaavat ne samalla
   tarkkuudella. */

/* Button (ohjeen luku 7.1): .primary-button = contained, .secondary-button =
   outlined, .ghost-button = outlined neutral, .danger-button = outlined
   danger, .success-button = contained success. Kaikilla on 1px:n reuna
   (läpinäkyvä, kun täyttö riittää), joten koko on sama muunnelmasta
   riippumatta: 36px, kuten MUI:n medium-nappi. MUI:n min-width: 64px
   jätetään pois: se sallisi flex-rivin kutistaa napin tekstiä kapeammaksi. */
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.success-button {
  border: 1px solid transparent;
  border-radius: var(--mf-radius-default);
  font: var(--mf-font-button);
  gap: var(--mf-space-1);
  min-height: 36px;
  padding: 5px 15px;
  text-transform: none;
  transition: background-color 250ms var(--mf-ease), box-shadow 250ms var(--mf-ease),
    border-color 250ms var(--mf-ease), color 250ms var(--mf-ease);
}

.primary-button {
  background: var(--mf-primary-main);
  box-shadow: var(--mf-elevation-2);
  color: var(--mf-primary-contrast-text);
}

.primary-button:hover {
  background: var(--mf-primary-dark);
  box-shadow: var(--mf-elevation-4);
}

.secondary-button {
  background: transparent;
  border-color: color-mix(in srgb, var(--mf-primary-main) 50%, transparent);
  color: var(--mf-primary-main);
}

.secondary-button:hover {
  background: color-mix(in srgb, var(--mf-primary-main) 4%, transparent);
  border-color: var(--mf-primary-main);
}

.ghost-button {
  background: transparent;
  border-color: var(--mf-legacy-outline-default);
  color: var(--mf-legacy-text-primary);
}

.ghost-button:hover {
  background: var(--mf-action-hover);
}

/* Lähteessä danger-main (#f44336) on valkoisella 3,7:1, joten teksti on
   600-sävyä (ohjeen AIAI-valinta). */
.danger-button {
  background: transparent;
  border-color: color-mix(in srgb, var(--mf-danger-main) 50%, transparent);
  color: var(--mf-danger-600);
}

.danger-button:hover {
  background: color-mix(in srgb, var(--mf-danger-main) 4%, transparent);
  border-color: var(--mf-danger-600);
}

.success-button {
  background: var(--mf-success-main);
  box-shadow: var(--mf-elevation-2);
  color: var(--mf-success-contrast-text);
}

.success-button:hover {
  background: var(--mf-success-dark);
  box-shadow: var(--mf-elevation-4);
}

/* Koko small (MUI 4px 10px ja 13px, tässä miinus 1px reuna). */
.compact-button {
  font-size: 0.8125rem;
  min-height: 30px;
  padding: 3px 9px;
}

/* Disabled korvaa labs-base.css:n läpikuultavuuden (button:disabled). */
:is(.primary-button, .secondary-button, .ghost-button, .danger-button, .success-button):disabled,
:is(.primary-button, .secondary-button, .ghost-button, .danger-button, .success-button):disabled:hover {
  background: var(--mf-action-disabled-background);
  border-color: transparent;
  box-shadow: none;
  color: var(--mf-action-disabled);
  opacity: 1;
}

:is(.secondary-button, .ghost-button, .danger-button):disabled,
:is(.secondary-button, .ghost-button, .danger-button):disabled:hover {
  background: transparent;
  border-color: var(--mf-action-disabled-background);
}

/* TextField (luku 7.2): outlined-kenttä, korkeus 56px, label kentän
   yläpuolella. Fontti periytyy sivulta (body1), jotta kenttäkohtaiset
   koot (esim. kirjautumiskoodi) pysyvät voimassa. */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
  background: var(--mf-background-paper);
  border: 1px solid var(--mf-legacy-outline-default);
  border-radius: var(--mf-radius-default);
  color: var(--mf-legacy-text-primary);
  min-height: 56px;
  padding: 15px 13px;
  transition: border-color 150ms var(--mf-ease), box-shadow 150ms var(--mf-ease);
}

textarea {
  line-height: 1.5;
}

:is(input[type="search"], input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea):not([readonly], :disabled):hover {
  border-color: var(--mf-legacy-text-primary);
}

:is(input[type="search"], input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea):not([readonly]):focus {
  border-color: var(--mf-primary-main);
  box-shadow: inset 0 0 0 1px var(--mf-primary-main);
  outline: 0;
}

:is(input, textarea)::placeholder {
  color: var(--mf-legacy-text-primary);
  opacity: 0.42;
}

.inline-select-field span {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-subtitle2);
}

/* Overline: pieni versaalirivi otsikon yläpuolella. */
.section-kicker {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-overline);
  letter-spacing: normal;
  text-transform: uppercase;
}

/* Tag (luku 7.7): litteä tilamerkki 4px:n kulmilla. */
.tag {
  background: var(--mf-neutral-300);
  border: 0;
  border-radius: var(--mf-radius-default);
  color: var(--mf-legacy-text-primary);
  font: 500 0.875rem/1.43 var(--mf-font-sans);
  min-height: 0;
  padding: 2px 8px;
}

/* Pistevähennys: Banner danger (luku 7.3). */
.length-penalty-notice {
  background: var(--mf-legacy-banner-danger);
  border: 0;
  border-radius: var(--mf-radius-large);
  color: var(--mf-legacy-banner-text-danger);
  padding: var(--mf-space-2);
}

.length-penalty-notice p,
.length-penalty-table,
.length-penalty-tips ul {
  font: var(--mf-font-body2);
}

.length-penalty-notice-title {
  font: 500 1rem/1.5 var(--mf-font-sans);
}

.length-penalty-summary,
.length-penalty-table th,
.length-penalty-table tr.length-penalty-row-active td {
  color: var(--mf-legacy-banner-text-danger);
}

.length-penalty-table th,
.length-penalty-table td {
  border-bottom-color: color-mix(in srgb, var(--mf-danger-600) 25%, transparent);
}

.length-penalty-table th {
  font-weight: 500;
}

.length-penalty-table tr.length-penalty-row-active td {
  background: color-mix(in srgb, var(--mf-danger-600) 12%, transparent);
  font-weight: 500;
}

.length-penalty-tips {
  border-top-color: color-mix(in srgb, var(--mf-danger-600) 25%, transparent);
  color: var(--mf-legacy-banner-text-danger);
}

.length-penalty-tips-title {
  font: 500 0.875rem/1.43 var(--mf-font-sans);
}

/* Viestikeskuksen kuplat ja vastauskenttä. */
.client-message-bubble {
  border-radius: var(--mf-radius-large);
}

.client-message-bubble.is-own {
  border-color: var(--mf-primary-100);
}

.client-message-meta {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-caption);
}

.client-message-body {
  font: var(--mf-font-body2);
}

.client-messages-reply label {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-subtitle2);
}

.client-messages-reply textarea {
  border-color: var(--mf-legacy-outline-default);
  border-radius: var(--mf-radius-default);
  font: var(--mf-font-body2);
  padding: var(--mf-space-1-5);
}

.client-messages-badge {
  background: var(--mf-danger-600);
  color: var(--mf-danger-contrast-text);
  font-weight: 500;
}

/* Tutorin muutoslista ja mallivertailu (äidinkielen tutor). */
.tutor-change-item {
  border-color: var(--mf-legacy-outline-weak);
  border-radius: var(--mf-radius-default);
}

.tutor-change-old,
.tutor-change-new {
  border-radius: var(--mf-radius-default);
  font: var(--mf-font-body2);
}

.tutor-change-old {
  color: var(--mf-legacy-banner-text-danger);
}

.tutor-change-item.is-active {
  background: var(--mf-primary-surface-faint);
  border-color: var(--mf-primary-300);
}

.tutor-comparison-col {
  border-radius: var(--mf-radius-default);
}

.tutor-comparison-col h5 {
  font: 500 0.75rem/1.66 var(--mf-font-sans);
  letter-spacing: normal;
}

.tutor-comparison-col p {
  font: var(--mf-font-body2);
}

.tutor-comparison-col.is-original {
  border-color: var(--mf-warning-200);
}

.tutor-comparison-col.is-improved {
  border-color: var(--mf-success-200);
}

button.tutor-comparison-col.is-original:hover,
button.tutor-comparison-col.is-original:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mf-warning-700) 15%, transparent);
}

/* Kielenhuollon yhteenveto, virheen ponnahdus ja varatoimintailmoitus. */
.proofread-summary-card h3,
.proofread-note-card h3 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h6);
  text-transform: none;
}

.proofread-popover {
  background: var(--mf-legacy-text-primary);
  border-radius: var(--mf-radius-default);
  box-shadow: var(--mf-elevation-8);
  color: var(--mf-primary-contrast-text);
}

.proofread-popover::after {
  border-top-color: var(--mf-legacy-text-primary);
}

.proofread-popover span {
  font: 500 0.8125rem/1.43 var(--mf-font-sans);
}

.proofread-popover small {
  color: color-mix(in srgb, var(--mf-primary-contrast-text) 80%, transparent);
  font: var(--mf-font-caption);
}

.proofread-feedback-card .proofread-fallback-notice {
  background: var(--mf-legacy-banner-warning);
  border: 0;
  border-radius: var(--mf-radius-large);
  color: var(--mf-warning-700);
  font: 500 0.8125rem/1.43 var(--mf-font-sans);
  padding: var(--mf-space-1) var(--mf-space-1-5);
}

/* ===== Asiakassivujen runko ===== */

.client-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
}

.client-workspace {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  min-height: 100vh;
  overflow: visible;
}

.client-topbar {
  align-items: center;
  background: var(--mf-background-paper);
  border-bottom: 1px solid var(--mf-legacy-header-border);
  display: flex;
  gap: var(--mf-space-3);
  justify-content: space-between;
  min-height: 64px;
  padding: var(--mf-space-1-5) clamp(20px, 8vw, 150px);
}

.client-brand {
  align-items: center;
  display: inline-flex;
  gap: var(--mf-space-2);
  line-height: 1;
  text-decoration: none;
}

.client-brand-tagline {
  border-left: 1px solid var(--mf-divider);
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-caption);
  padding-left: var(--mf-space-2);
}

.client-logo-image {
  display: block;
  height: 40px;
  object-fit: contain;
  width: auto;
}

.client-topbar-actions {
  align-items: center;
  display: flex;
  gap: var(--mf-space-1);
}

/* Yläpalkin napit: Button outlined neutral. */
.client-back-button,
.client-logout-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--mf-legacy-outline-default);
  border-radius: var(--mf-radius-default);
  color: var(--mf-legacy-text-primary);
  cursor: pointer;
  display: inline-flex;
  font: var(--mf-font-button);
  min-height: 36px;
  padding: 5px 15px;
  text-decoration: none;
  transition: background-color 250ms var(--mf-ease);
}

.client-back-button:hover,
.client-back-button:focus-visible,
.client-logout-button:hover,
.client-logout-button:focus-visible {
  background: var(--mf-action-hover);
}

.client-logged-in-user {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-body2);
  margin-right: var(--mf-space-1);
}

.client-test-mode-toggle {
  background: var(--mf-legacy-banner-warning);
  border: 1px solid var(--mf-warning-200);
  border-radius: var(--mf-radius-default);
  color: var(--mf-warning-700);
  cursor: pointer;
  font: var(--mf-font-button);
  min-height: 36px;
  padding: 5px 15px;
}

.client-test-mode-toggle:hover,
.client-test-mode-toggle:focus-visible {
  background: var(--mf-warning-100);
  border-color: var(--mf-warning-300);
}

.client-main {
  display: grid;
  gap: var(--mf-space-3);
  margin: 0 auto;
  max-width: 1040px;
  padding: var(--mf-space-5) clamp(16px, 5vw, 56px) var(--mf-space-6);
}

.client-login-form {
  display: grid;
  gap: var(--mf-space-2);
  max-width: 420px;
}

.client-login-field {
  display: grid;
  gap: var(--mf-space-0-5);
}

.client-login-field label {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-subtitle2);
}

/* Kirjautumiskoodi: numerot harvennettuna, jotta 6 merkkiä on helppo lukea. */
.client-login-code {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  max-width: 220px;
  text-align: center;
}

.client-login-notice {
  color: var(--mf-legacy-text-primary-subtle);
  font: var(--mf-font-body2);
  margin: 0;
}

.client-login-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font: var(--mf-font-body2);
  gap: var(--mf-space-1);
  margin: 0;
}

.client-login-links .link-button {
  background: none;
  border: 0;
  color: var(--mf-primary-main);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.client-login-links .link-button:disabled {
  color: var(--mf-action-disabled);
  cursor: default;
  text-decoration: none;
}

.client-login-links-sep {
  color: var(--mf-legacy-text-primary-faded);
}

/* Card (luku 7.6). */
.client-panel {
  background: var(--mf-background-paper);
  border-radius: var(--mf-radius-default);
  box-shadow: var(--mf-elevation-1);
  padding: var(--mf-space-3);
}

.client-intro {
  align-items: start;
  display: grid;
  gap: var(--mf-space-1-5);
  grid-template-columns: minmax(0, 1fr);
}

.client-intro-copy {
  display: grid;
  gap: var(--mf-space-1);
  max-width: none;
}

.client-intro h1,
.client-intro p,
.client-panel-heading h2,
.client-panel-heading p,
.client-result-card h3,
.client-result-card p,
.client-feedback-section h4,
.client-feedback-section p {
  margin: 0;
}

/* Sivun otsikko: heading4. */
.client-intro h1 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h4);
  overflow-wrap: anywhere;
}

.client-intro p,
.client-task-prompt,
.client-material-text,
.client-result-card p,
.client-feedback-section p,
.client-feedback-section li {
  line-height: 1.5;
}

.client-work-grid {
  align-items: start;
  display: grid;
  gap: var(--mf-space-3);
  grid-template-columns: minmax(0, 1fr);
}

/* Tehtävä- ja vastauskortti: Card, varjo elevation-1. Sisämarginaali on
   sama kuin yo-arvioinnin vaihejanan --client-yo-panel-pad
   (arviointi.css), koska jana ulottuu kortin reunasta reunaan. */
.client-task-panel,
.client-answer-panel,
.client-status-panel {
  background: var(--mf-background-paper);
  border-radius: var(--mf-radius-default);
  box-shadow: var(--mf-elevation-1);
  display: grid;
  gap: var(--mf-space-2);
  padding: clamp(18px, 3vw, 28px);
}

.client-status-panel {
  align-items: center;
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 260px;
}

.client-status-panel h1 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h4);
  margin: var(--mf-space-0-5) 0 var(--mf-space-1);
}

.client-proofread-intro {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
}

/* Sivun kuvakelaatta kuten ActivityOverviewCardin ikonilaatta. Vahvempi
   pohjasävy erottuu sekä sivun pohjalta että valkoisesta kortista. */
.client-proofread-intro-icon {
  /* Hailakan sininen, samaa sävyä kuin sivun liukuvärin yläosa. */
  background: var(--mf-primary-surface-faint);
  border-radius: var(--mf-radius-large);
  font-size: 32px;
  line-height: 1;
  padding: var(--mf-space-1-5);
}

/* Latauskortti: nukkuva kettu (mascot_waiting) latausrivin vieressä ilman
   puhekuplaa — sovellus hakee jotain, kettu ei puhu. */
.client-loading-card {
  padding: clamp(18px, 3vw, 28px);
}

/* min-width: 0 ja overflow-wrap: kapealla näytöllä pitkä sana
   ("arviointityökalua") ei saa levittää korttia ketun vierestä yli näytön. */
.client-loading-card-body {
  display: grid;
  gap: var(--mf-space-1-5);
  min-width: 0;
}

.client-loading-row {
  align-items: center;
  display: flex;
  gap: var(--mf-space-2);
}

.client-loading-row h1 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h5);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.client-loading-row .loading-spinner {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .client-loading-row h1 {
    font: var(--mf-font-h6);
  }
}

/* ===== Maskotti: Mafy-kettu =====
   Yksi hahmo, monta ilmettä; ilme kertoo sovelluksen tilan, ei opiskelijan
   suoritusta (assets/MASKOTTI.md). Kaksi asettelua:
   - .mascot-figure: kettu sisällön vieressä ilman kuplaa (lataus, tyhjä tila)
   - .mascot-speech: kettu puhuu. Sisällä .mascot-bubble (kettu + kupla
     rinnakkain, pystysuunnassa keskitetty) ja sen alla .mascot-bubble-actions
     (valintanapit täysleveinä) — napit eivät ole kuplan sisällä.
   Kuplan väri, nuolen paikka ja kettukoko ovat muuttujia: oletukset ovat
   .mascot-speech-kääreellä, ja variantit (esim. valkoinen chat-kupla)
   asettavat omansa millä tahansa esi-isällä. Chat-rivit käyttävät
   .mascot-bubblea ilman käärettä, siksi var()-kutsuissa on myös fallback.
   Kupla ja kettu ovat AIAI:n omia, eivät Mafynettin komponentteja: ulkoasu
   on pidetty ennallaan, vain värit ovat Mafynettin lähimmät vastineet.
   HUOM: sama lohko on kopioitu tiedostoon tutor/tutor.css, koska MafyTutor
   ei lataa tätä tiedostoa — muuta molemmat. */
.mascot-figure {
  --mascot-avatar-size: 96px;
  align-items: center;
  display: flex;
  gap: 20px;
}

.mascot-speech {
  --mascot-bubble-bg: var(--mf-primary-surface-faint);
  --mascot-bubble-border: var(--mf-primary-100);
  --mascot-arrow-top: 50%;
  display: grid;
  gap: 10px;
}

.mascot-bubble {
  align-items: center;
  display: flex;
  gap: 12px;
}

.mascot-bubble.is-large {
  --mascot-avatar-size: 96px;
}

.mascot-bubble.is-compact {
  --mascot-avatar-size: 30px;
  gap: 8px;
}

/* Korkeus aina auto: tiedostojen mittasuhteet eroavat, eikä kuvaa saa
   venyttää. */
.mascot-bubble-avatar {
  flex: 0 0 auto;
  height: auto;
  width: var(--mascot-avatar-size, 48px);
}

.mascot-bubble-body {
  background: var(--mascot-bubble-bg, var(--mf-primary-surface-faint));
  border: 1px solid var(--mascot-bubble-border, var(--mf-primary-100));
  border-radius: var(--mf-radius-large);
  color: var(--mf-legacy-text-primary-subtle);
  display: grid;
  flex: 1 1 auto;
  font-size: 14px;
  gap: 6px;
  line-height: 1.55;
  min-width: 0;
  padding: 10px 14px;
  position: relative;
}

/* Nuoli kettuun päin: 45° käännetty neliö, jonka vasen ja alareuna
   piirtävät kärjen. Oletuksena pystysuunnassa keskellä; ylös tasatuissa
   riveissä (chat) --mascot-arrow-top siirtää sen ensimmäisen rivin
   korkeudelle. */
.mascot-bubble-body::before {
  background: var(--mascot-bubble-bg, var(--mf-primary-surface-faint));
  border-bottom: 1px solid var(--mascot-bubble-border, var(--mf-primary-100));
  border-left: 1px solid var(--mascot-bubble-border, var(--mf-primary-100));
  content: "";
  height: 10px;
  left: -6px;
  position: absolute;
  top: var(--mascot-arrow-top, 50%);
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
}

.mascot-bubble-title {
  color: var(--mf-legacy-text-primary);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.mascot-bubble-text {
  margin: 0;
}

/* Ydinlause omalla rivillään lihavoituna, loppu tavallisena. */
.mascot-bubble-lead {
  color: var(--mf-legacy-text-primary);
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.mascot-bubble-actions {
  display: grid;
  gap: 8px;
}

/* Kettu-A/B: yo-pilotin kutsussa valittu "ei kettua". Kettukuva ja kettuun
   osoittava nuoli jäävät pois, kupla ja teksti säilyvät ennallaan. Luokan
   asettaa <html>-elementille shared/labs-session.js (applyMascotVisibility)
   ja kutsusivulla kutsu/kutsu.js. Koskee vain AIAI:n asiakassivuja, ei
   MafyTutoria (tutor/tutor.css). */
.mascot-hidden .mascot-bubble-avatar,
.mascot-hidden .mascot-bubble-body::before {
  display: none;
}

@media (max-width: 640px) {
  .mascot-figure,
  .mascot-bubble.is-large {
    --mascot-avatar-size: 64px;
  }

  .mascot-bubble {
    --mascot-avatar-size: 40px;
    gap: 10px;
  }

  .mascot-bubble.is-compact {
    --mascot-avatar-size: 26px;
  }
}

.client-panel-heading {
  display: grid;
  gap: var(--mf-space-0-5);
}

/* Kortin otsikko: heading5. */
.client-panel-heading h2 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h5);
}

.client-answer-form {
  display: grid;
  gap: var(--mf-space-1-5);
}

.client-answer-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mf-space-1);
  justify-content: space-between;
}

.client-answer-meta {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-body2);
}

/* Lähetysnappi: koko large (MUI 8px 22px ja 15px, miinus 1px reuna). */
.client-submit-button {
  font-size: 0.9375rem;
  min-height: 42px;
  padding: 7px 21px;
}

/* Vastauskortin sisäiset tuloskortit: litteä Card (reunus, ei varjoa). */
.client-result-card {
  background: var(--mf-background-paper);
  border: 1px solid var(--mf-legacy-outline-weak);
  border-radius: var(--mf-radius-default);
  display: grid;
  gap: var(--mf-space-1-5);
  padding: var(--mf-space-2);
}

.client-result-card h3 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h6);
}

.client-result-error {
  background: var(--mf-legacy-banner-danger);
  border-color: var(--mf-danger-200);
  color: var(--mf-legacy-banner-text-danger);
}

/* Programmatic focus on the error card (for scroll/focus on a failed
   evaluation) shouldn't draw a full-card outline. */
.client-result-error:focus {
  outline: none;
}

.client-result-ready {
  background: var(--mf-background-paper);
}

.client-score-number {
  align-items: center;
  background: var(--mf-primary-main);
  border-radius: var(--mf-radius-default);
  color: var(--mf-primary-contrast-text);
  display: grid;
  height: 112px;
  justify-items: center;
  padding: var(--mf-space-1-5);
  width: 126px;
}

.client-score-number span {
  font: var(--mf-font-h3);
  line-height: 1;
}

.client-score-number small {
  font: var(--mf-font-subtitle2);
}

.client-feedback-section {
  border-top: 1px solid var(--mf-divider);
  display: grid;
  gap: var(--mf-space-1);
  padding-top: var(--mf-space-1-5);
}

/* Palautteen väliotsikko: heading6 kuten kortin muutkin sisäiset väliotsikot. */
.client-feedback-section h4 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h6);
}

/* Perustelukappaleen kriteerin nimi: subtitle2, väliotsikkoa pienempi. */
.client-feedback-section .client-criterion-label {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-subtitle2);
}

.client-feedback-section ul {
  display: grid;
  gap: var(--mf-space-1);
  margin: 0;
  padding-left: var(--mf-space-3);
}

/* Palautekenttä: HighlightedArea neutral (luku 7.4). */
.client-learning-feedback {
  background: var(--mf-legacy-background-default-light);
  border: 0;
  border-radius: var(--mf-radius-large);
  gap: var(--mf-space-1-5);
  margin-top: var(--mf-space-0-5);
  padding: var(--mf-space-2);
}

.client-learning-feedback.is-guided {
  background: var(--mf-primary-surface-faint);
  box-shadow: 0 0 0 2px var(--mf-primary-200);
  transition: background 180ms var(--mf-ease), box-shadow 180ms var(--mf-ease);
}

.client-learning-feedback-head {
  display: grid;
  gap: var(--mf-space-0-5);
}

.client-star-rating {
  border: 0;
  display: grid;
  gap: var(--mf-space-1);
  margin: 0;
  padding: 0;
}

.client-star-rating legend,
.client-learning-feedback-comment span {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-subtitle2);
  margin-bottom: var(--mf-space-0-5);
}

.client-star-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mf-space-0-5);
}

/* Rating: valittu tähti meripihka (accent-1), tyhjä action-disabled. */
.client-star-option {
  border-radius: var(--mf-radius-default);
  color: var(--mf-action-disabled);
  cursor: pointer;
  display: grid;
  font-size: 32px;
  line-height: 1;
  min-height: 44px;
  min-width: 42px;
  place-items: center;
  position: relative;
}

.client-star-option:focus-within {
  outline: 2px solid var(--mf-primary-main);
  outline-offset: 2px;
}

.client-star-option.is-preview {
  background: var(--mf-legacy-primary-light);
  color: var(--mf-primary-main);
}

.client-star-option.is-selected {
  color: var(--mf-accent-1-main);
}

.client-star-options.is-previewing .client-star-option.is-selected:not(.is-preview) {
  color: var(--mf-action-disabled);
}

.client-star-input {
  cursor: pointer;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.client-learning-feedback-comment {
  display: grid;
  gap: var(--mf-space-0-5);
}

.client-learning-feedback-hint {
  color: var(--mf-primary-dark);
  font: 500 0.875rem/1.43 var(--mf-font-sans);
  margin: 0;
}

.client-learning-feedback-hint[hidden] {
  display: none;
}

#client-learning-feedback-comment {
  min-height: 110px;
}

.client-learning-feedback-error {
  color: var(--mf-danger-600);
  font-weight: 500;
}

.client-learning-feedback-submit {
  justify-self: start;
}

.client-learning-feedback-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--mf-space-1);
}

.client-test-select-field,
.proofread-test-select-field {
  background: var(--mf-legacy-background-default-light);
  border: 1px solid var(--mf-legacy-outline-weak);
  border-radius: var(--mf-radius-default);
  margin-bottom: var(--mf-space-1);
  padding: var(--mf-space-1);
}

.proofread-test-badge {
  background: var(--mf-neutral-800);
  border-radius: var(--mf-radius-default);
  color: var(--mf-primary-contrast-text);
  display: inline-block;
  font: 500 0.6875rem/1 var(--mf-font-sans);
  margin-right: 6px;
  padding: 4px 7px;
  text-transform: uppercase;
}

.proofread-debug-panel {
  background: var(--mf-background-paper);
  border: 1px dashed var(--mf-legacy-outline-default);
  border-radius: var(--mf-radius-default);
  display: grid;
  gap: var(--mf-space-1);
  padding: var(--mf-space-2);
}

.proofread-debug-panel h3,
.proofread-debug-panel h4,
.proofread-debug-panel p {
  margin: 0;
}

.proofread-debug-panel h3 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-h6);
}

.proofread-debug-panel h4 {
  color: var(--mf-legacy-text-primary);
  font: var(--mf-font-subtitle2);
}

.proofread-debug-panel pre {
  background: var(--mf-legacy-background-default-light);
  border: 1px solid var(--mf-legacy-outline-weak);
  border-radius: var(--mf-radius-default);
  color: var(--mf-legacy-text-primary);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  max-height: 380px;
  overflow: auto;
  padding: var(--mf-space-1-5);
  white-space: pre-wrap;
}

.proofread-debug-progress-block,
.proofread-debug-compare-grid {
  display: grid;
  gap: var(--mf-space-1);
}

.proofread-debug-compare-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.proofread-debug-compare-grid > div {
  display: grid;
  gap: var(--mf-space-1);
  min-width: 0;
}

/* Dialog (luku 7.10): taustaverho musta 50 %, paperi elevation-24. */
.proofread-completion-overlay {
  align-items: center;
  background: color-mix(in srgb, var(--mf-common-black) 50%, transparent);
  display: none;
  inset: 0;
  justify-content: center;
  padding: var(--mf-space-3);
  position: fixed;
  z-index: 140;
}

.proofread-completion-overlay.is-visible {
  display: flex;
}

.proofread-completion-dialog {
  background: var(--mf-background-paper);
  border-radius: var(--mf-radius-default);
  box-shadow: var(--mf-elevation-24);
  display: grid;
  gap: var(--mf-space-1-5);
  max-width: 520px;
  padding: var(--mf-space-3);
  width: min(520px, 100%);
}

.proofread-completion-dialog h2,
.proofread-completion-dialog p {
  margin: 0;
}

.proofread-completion-dialog h2 {
  color: var(--mf-legacy-ds-text-primary);
  font: var(--mf-font-h5);
}

.proofread-completion-dialog p:not(.section-kicker) {
  color: var(--mf-legacy-text-primary-subtle);
  line-height: 1.5;
}

.proofread-completion-dialog .primary-button {
  justify-self: start;
}

@media (max-width: 1120px) {
  .client-intro,
  .client-work-grid,
  .proofread-dashboard {
      grid-template-columns: 1fr;
  }

  .client-intro {
      align-items: start;
  }

}

@media (max-width: 720px) {
  .client-topbar {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--mf-space-1-5);
      padding: var(--mf-space-2);
  }

  .client-logo-image {
      height: 36px;
  }

  /* Toiminnot rivittyvät: muuten yläpalkki leventää sivun yli näytön, ja
     selain laajentaa asettelunäkymän, jolloin myös kiinnittyvät elementit
     (yo-arvioinnin vaihejana) voivat jäädä näkyvän alueen ulkopuolelle. */
  .client-topbar-actions {
      flex-wrap: wrap;
  }

  .client-main {
      padding: var(--mf-space-3) var(--mf-space-2) var(--mf-space-5);
  }

  .client-task-panel,
  .client-answer-panel,
  .client-status-panel {
      padding: var(--mf-space-2);
  }

  .client-status-panel,
  .client-score-summary {
      grid-template-columns: 1fr;
  }

  .client-score-number {
      height: auto;
      min-height: 104px;
      width: 100%;
  }

  .client-answer-title-row {
      align-items: flex-start;
      flex-direction: column;
  }

}

/* ===== Viestitoiminto: asiakkaan viestikuvake, overlay ja viestikeskus ===== */
.client-messages-wrap {
  position: relative;
}

/* Viestikuvake: outlined neutral -nappi pelkällä ikonilla. */
.client-messages-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--mf-legacy-outline-default);
  border-radius: var(--mf-radius-default);
  color: var(--mf-action-active);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background-color 250ms var(--mf-ease);
  width: 40px;
}

.client-messages-button:hover,
.client-messages-button:focus-visible {
  background: var(--mf-action-hover);
}

.client-messages-icon {
  fill: currentColor;
  height: 20px;
  width: 20px;
}

.client-messages-button.has-unread {
  animation: client-messages-glow 1.8s ease-in-out infinite;
  border-color: var(--mf-primary-main);
  color: var(--mf-primary-main);
}

@media (prefers-reduced-motion: reduce) {
  .client-messages-button.has-unread {
      animation: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-primary-main) 35%, transparent);
  }

}

.client-messages-button .client-messages-badge {
  position: absolute;
  right: -7px;
  top: -7px;
}

/* Popover: elevation-8. */
.client-messages-popover {
  animation: client-messages-popover-in 0.25s ease-out;
  background: var(--mf-background-paper);
  border: 1px solid var(--mf-legacy-outline-weak);
  border-radius: var(--mf-radius-default);
  box-shadow: var(--mf-elevation-8);
  padding: var(--mf-space-1-5) var(--mf-space-2);
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 240px;
  z-index: 60;
}

.client-messages-popover::before {
  background: var(--mf-background-paper);
  border-left: 1px solid var(--mf-legacy-outline-weak);
  border-top: 1px solid var(--mf-legacy-outline-weak);
  content: "";
  height: 10px;
  position: absolute;
  right: 14px;
  top: -6px;
  transform: rotate(45deg);
  width: 10px;
}

.client-messages-popover-text {
  color: var(--mf-legacy-text-primary);
  font: 500 0.875rem/1.43 var(--mf-font-sans);
  margin: 0 0 var(--mf-space-1-5);
}

.client-messages-popover-actions {
  align-items: center;
  display: flex;
  gap: var(--mf-space-1);
  justify-content: space-between;
}

.client-messages-popover-close {
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--mf-action-active);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
}

.client-messages-popover-close:hover,
.client-messages-popover-close:focus-visible {
  background: var(--mf-action-hover);
  color: var(--mf-legacy-text-primary);
}

.client-messages-overlay {
  align-items: flex-start;
  background: color-mix(in srgb, var(--mf-common-black) 50%, transparent);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 6vh 16px 16px;
  position: fixed;
  z-index: 90;
}

.client-messages-dialog {
  background: var(--mf-background-paper);
  border-radius: var(--mf-radius-default);
  box-shadow: var(--mf-elevation-24);
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  overflow: hidden;
  width: min(560px, 100%);
}

.client-messages-dialog-head {
  align-items: center;
  border-bottom: 1px solid var(--mf-divider);
  display: flex;
  gap: var(--mf-space-1);
  justify-content: space-between;
  padding: var(--mf-space-1-5) var(--mf-space-3);
}

.client-messages-dialog-head h3 {
  color: var(--mf-legacy-ds-text-primary);
  font: var(--mf-font-h6);
  margin: 0;
}

.client-messages-back {
  background: transparent;
  border: none;
  color: var(--mf-primary-main);
  cursor: pointer;
  font: var(--mf-font-button);
  padding: 4px 0;
}

.client-messages-close {
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--mf-action-active);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 2px 8px;
}

.client-messages-close:hover,
.client-messages-close:focus-visible {
  background: var(--mf-action-hover);
  color: var(--mf-legacy-text-primary);
}

.client-messages-note {
  margin: 0;
  padding: var(--mf-space-3);
}

.client-messages-error {
  color: var(--mf-danger-600);
  font: 500 0.875rem/1.43 var(--mf-font-sans);
  margin: var(--mf-space-1) var(--mf-space-3);
}

.client-messages-thread-list {
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: var(--mf-space-1);
}

.client-messages-thread-item {
  background: transparent;
  border: none;
  border-radius: var(--mf-radius-default);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--mf-space-1-5);
  text-align: left;
  width: 100%;
}

.client-messages-thread-item:hover,
.client-messages-thread-item:focus-visible {
  background: var(--mf-action-hover);
}

.client-messages-thread-item.has-unread {
  background: var(--mf-primary-surface-faint);
}

.client-messages-thread-top {
  align-items: center;
  display: flex;
  gap: var(--mf-space-1);
  justify-content: space-between;
}

.client-messages-thread-top strong {
  font-weight: 500;
}

.client-messages-thread-preview {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-body2);
}

.client-messages-thread-time {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-caption);
}

.client-messages-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: var(--mf-space-2) var(--mf-space-3) var(--mf-space-3);
}

.client-messages-thread-subject {
  font: 500 1rem/1.5 var(--mf-font-sans);
  margin: 0 0 var(--mf-space-1-5);
}

.client-messages-reply .client-messages-error {
  margin: 0;
}

.client-messages-send {
  align-self: flex-end;
}

@media (max-width: 640px) {
  .client-messages-popover {
      right: -8px;
      width: min(240px, calc(100vw - 40px));
  }

  .client-messages-overlay {
      padding: 3vh 8px 8px;
  }

}

/* Alatunniste: ehdot ja tietosuoja jokaisella asiakassivulla. */
.client-footer {
  align-items: center;
  color: var(--mf-legacy-text-primary-faded);
  display: flex;
  flex-wrap: wrap;
  font: var(--mf-font-body2);
  gap: var(--mf-space-1) var(--mf-space-2);
  justify-content: center;
  margin: 0 auto;
  max-width: 1040px;
  padding: 0 clamp(16px, 5vw, 56px) var(--mf-space-4);
}

.client-footer-links {
  display: flex;
  gap: var(--mf-space-2);
}

.client-footer a {
  color: inherit;
  text-decoration: underline;
}

.client-footer a:hover,
.client-footer a:focus-visible {
  color: var(--mf-primary-main);
}

.client-login-legal {
  color: var(--mf-legacy-text-primary-faded);
  font: var(--mf-font-body2);
  margin: 0;
}

.client-login-legal a {
  color: var(--mf-primary-main);
}