/* ============================================================
   Attune - skills-card.css
   The per-module quick-reference panel: a fixed toggle tab plus
   a slide-out card. On wide screens it docks as a rail in the
   empty margin beside .doc (content is never covered, no scrim).
   On narrow screens it becomes a full-width overlay, same pattern
   as dashboard.css's .drawer/.drawer-scrim.
   Load order: tokens.css -> base.css -> program.css ->
   program-hyperacusis.css -> skills-card.css
   ============================================================ */

.skills-tab {
  position: fixed; top: 50%; right: 0; z-index: 45;
  transform: translateY(-50%);
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent-deep); border-right: 0;
  border-radius: 6px 0 0 6px;
  font-family: var(--font-display); font-size: .95rem;
  padding: .7rem .55rem; writing-mode: vertical-rl; text-orientation: mixed;
  cursor: pointer; letter-spacing: .02em;
}
.skills-tab:hover { background: var(--accent-deep); }
.skills-tab[aria-expanded="true"] { right: min(24rem, 88vw); }
@media (min-width: 1200px) {
  .skills-tab[aria-expanded="true"] { right: 22rem; }
}

/* On phones the fixed side tab covers too much - body copy, form
   fields, the spike card, the section nav strip. Replace it with a
   compact bottom pill instead, using the same button/markup (only
   the visible label changes; aria-label still carries the real name
   for assistive tech). It hides while the drawer is open (the panel
   already provides its own close control) or while a "keep it with
   you" reference card is in view (.is-suppressed, set by
   Attune.initSkillsPillVisibility in shared.js). */
@media (max-width: 640px) {
  .skills-tab {
    top: auto; bottom: 1rem; left: 50%; right: auto;
    transform: translateX(-50%);
    writing-mode: horizontal-tb; text-orientation: initial;
    border: 1px solid var(--accent-deep); border-radius: 999px;
    padding: .6em 1.2em;
    font-size: 0; line-height: 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 25%, transparent);
  }
  .skills-tab::after {
    content: "Skills \2191";
    font-family: var(--font-display); font-size: .92rem; line-height: 1.3; letter-spacing: .02em;
  }
  .skills-tab[aria-expanded="true"],
  .skills-tab.is-suppressed { display: none; }

  /* The pill is fixed to the viewport bottom, so without reserved
     space it scrolls on top of whatever content - or the footer -
     happens to be underneath it. */
  body:has(.skills-tab:not(.is-suppressed):not([aria-expanded="true"])) { padding-bottom: 4rem; }
}

.skills-card-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
}

.skills-card {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
  width: min(24rem, 88vw); background: var(--paper);
  border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .3s ease;
  overflow-y: auto;
}
.skills-card.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .skills-card, .skills-tab { transition: none; } }

/* On phones the opener is a bottom pill, so the panel itself rises
   from the bottom too (a sheet), rather than sliding in from the
   side. */
@media (max-width: 640px) {
  .skills-card {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 85vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
  }
  .skills-card.open { transform: none; }
}

.skills-card-inner { padding: clamp(1.4rem, 4vw, 2rem) 1.6rem 2.4rem; }
.skills-card-close {
  position: absolute; top: 1rem; right: 1.1rem;
  background: none; border: 0; font-size: 1.8rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: .2em;
}
.skills-card-close:hover { color: var(--ink); }

.sc-eyebrow { font-size: .85rem; color: var(--muted); margin: 0 0 .3rem; }
.sc-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin: 0 0 1.1rem; }
.sc-steps { display: flex; flex-direction: column; gap: .8rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.sc-steps li {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .8rem .9rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 4px;
}
.sc-steps .sc-num {
  font-family: var(--font-display); color: var(--accent-deep); font-size: 1rem;
  flex: 0 0 auto; min-width: 1.3em;
}
.sc-steps .sc-what { color: var(--ink-soft); font-size: .95rem; }
.sc-note { font-size: .88rem; color: var(--muted); margin: 0; }

/* Cumulative "all skills so far" list, appended below the note in
   weeks whose on-page skills section is trimmed to just that week's
   new skill(s) - reached via a "View all skills" opener that scrolls
   the panel here once it's open. */
.sc-divider { border: 0; border-top: 1px dashed var(--line); margin: 1.6rem 0; }
.sc-skills { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.sc-skills li { padding: .7rem .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.sc-skill-name { display: block; font-family: var(--font-display); color: var(--ink); font-size: .98rem; margin: 0 0 .2rem; }
.sc-skill-what { display: block; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }

/* On wide viewports the card docks in the margin beside .doc rather
   than overlaying it, so the scrim never appears there. */
@media (min-width: 1200px) {
  .skills-card-scrim { display: none; }
  .skills-card { width: 22rem; top: 4.6rem; box-shadow: -2px 0 10px color-mix(in srgb, var(--ink) 8%, transparent); }
}