/* ==========================================================
   Computer classes page — animated PC hero, "Know your
   computer" desk, typing test, course ladder.
   Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.pc-hero{ width:100%; max-width:500px; display:block; margin:0 auto; filter: drop-shadow(0 30px 40px rgba(60,20,0,.35)); }
.pc-hero .pc-typed{ font-family: var(--font-display); font-weight:800; font-size:22px; fill: var(--navy); }

/* ---------- Know your computer ---------- */
.pc-desk{ width:100%; display:block; user-select:none; -webkit-user-select:none; }
.pc-desk .part{ cursor:pointer; outline:none; -webkit-tap-highlight-color: transparent; }
.pc-desk .part > *:not(text):not(title){ transition: opacity .2s ease; }
.pc-desk:hover .part:not(:hover) > *:not(text){ opacity:.55; }
.pc-desk .part:focus-visible > rect:first-of-type{ stroke: var(--gold); stroke-width:3; }
.pc-desk .part-label{
  font-family: var(--font-display); font-weight:700; font-size:13px; fill: var(--navy); text-anchor:middle;
  paint-order: stroke; stroke: var(--paper); stroke-width:4px; stroke-linejoin: round; pointer-events:none;
}
.pc-desk .part[data-part="monitor"] .part-label, .pc-desk .part-label.is-inside{ fill:#fff; stroke:none; }
/* Labels only in Learn mode — the quiz would be too easy otherwise */
.pc-desk.is-quiz .part-label{ display:none; }
.pc-desk .part.is-selected > *:not(text){ opacity:1 !important; }
.pc-desk .part.is-selected .part-label{ fill: var(--coaching-accent); }
.pc-desk .part.is-right > *:not(text):not(title){ opacity:1 !important; animation: partFlash .7s ease; }
.pc-desk .part.is-wrong > *:not(text):not(title){ animation: partShake .4s ease; }
.pc-desk .part.is-hint > *:not(text):not(title){ opacity:1 !important; animation: partFlash .7s ease; }
@keyframes partFlash{ 50%{ opacity:.35; } }
@keyframes partShake{ 25%{ opacity:.3; } 75%{ opacity:.3; } }

.pc-info{
  display:flex; flex-direction:column; justify-content:center; min-height:150px; background: var(--paper); border-radius: var(--radius-md);
  padding:1.2rem 1.3rem; border-left:4px solid var(--coaching-accent);
}
.pc-info > i{ font-size:1.6rem; color: var(--coaching-accent); margin-bottom:.4rem; }
.pc-info h5{ margin:.2rem 0 .4rem; }
.pc-info h5 span{ font-family: var(--font-body); font-weight:600; font-size:.95rem; color: var(--slate); }
.pc-info.is-filled{ animation: infoIn .35s ease; }
@keyframes infoIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.pc-type{ font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--coaching-accent); }
.pc-quiz-label{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); }
.pc-quiz-score{ font-family: var(--font-display); font-weight:800; color: var(--study-accent); }
.pc-question{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; color: var(--navy); margin-bottom:.4rem; }

/* ---------- Typing test ---------- */
.type-target{
  font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size:1.25rem; line-height:1.9; letter-spacing:.02em;
  background: var(--paper); border-radius: var(--radius-md); padding:1rem 1.2rem; margin-bottom:.8rem; color:#A9A190;
  word-break: break-word;
}
.type-target span.ok{ color: var(--study-accent); }
.type-target span.bad{ color:#fff; background:#D9412C; border-radius:3px; }
.type-target span.cur{ color: var(--navy); background: rgba(217,164,65,.35); border-bottom:3px solid var(--coaching-accent); }
.type-input{ font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size:1.05rem; resize:none; }
.type-stats{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
.type-stat{ background: var(--paper); border-radius: var(--radius-sm); padding:.7rem; text-align:center; }
.type-stat b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.5rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.type-stat span{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--slate); }
.type-tip{ font-size:.8rem; color: var(--slate); }

.type-keyboard{ margin-top:1rem; }
.kb-row{ display:flex; justify-content:center; gap:.3rem; margin-bottom:.3rem; }
.kb-row-1{ padding-left:1.2rem; } .kb-row-2{ padding-right:1.2rem; }
.kb-key{
  min-width:2.3rem; height:2.3rem; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:.9rem; color: var(--navy); text-transform:uppercase;
  border:1px solid rgba(16,32,61,.08); box-shadow: 0 3px 0 rgba(16,32,61,.12); transition: transform .1s ease, background .15s ease;
  background:#fff;
}
.kb-wide{ min-width:4rem; font-size:.7rem; }
.kb-space{ min-width:16rem; font-size:.7rem; text-transform:none; }
.kb-home{ text-decoration: underline; text-underline-offset:4px; }
/* Finger zones (left pinky → right pinky) */
.kb-key.f1{ background:#FCE4E4; } .kb-key.f2{ background:#FDEFD8; } .kb-key.f3{ background:#FFF7CC; } .kb-key.f4{ background:#E2F4E6; }
.kb-key.f5{ background:#DFF1F7; } .kb-key.f6{ background:#E4E8FB; } .kb-key.f7{ background:#EEE4FA; } .kb-key.f8{ background:#F8E3F1; }
.kb-key.is-next{ background: var(--coaching-accent); color:#fff; transform: translateY(2px); box-shadow: 0 1px 0 rgba(16,32,61,.2), 0 0 0 4px rgba(217,114,44,.25); }

/* ---------- Course ladder ---------- */
.ladder-step{ position:relative; }
.ladder-step.is-start{ border:2px solid var(--coaching-accent); }
.ladder-num{
  position:absolute; top:1.2rem; right:1.2rem; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--coaching-accent); background: rgba(217,114,44,.1); border-radius:999px; padding:.2rem .6rem;
}
@media (min-width: 992px){
  .ladder > div:not(:last-child) .ladder-step::after{
    content:"\F138"; font-family:"bootstrap-icons"; position:absolute; right:-1.15rem; top:50%; transform: translateY(-50%);
    color: var(--coaching-accent); font-size:1.3rem; z-index:2; background: var(--paper); border-radius:50%; line-height:1;
  }
}