/* Categories */
  .cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }
  .cat-nav a {
    text-decoration: none;
    color: var(--text-dim);
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    transition: all 0.15s;
  }
  .cat-nav a:hover { color: var(--text); background: var(--surface-3); }

  section.category {
    margin-bottom: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
  }
  .cat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    background: linear-gradient(180deg, var(--surface-2), transparent);
    border-bottom: 1px solid var(--border);
  }
  .cat-header .num {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--accent-2);
    font-weight: 700;
    letter-spacing: 0.18em;
    width: 48px;
    flex-shrink: 0;
  }
  .cat-header .title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .cat-header .title p {
    margin: 4px 0 0;
    color: var(--text-dim);
    font-size: 13.5px;
  }
  .cat-progress {
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .cat-progress .pct {
    display: block;
    font-size: 18px;
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* ==================== CATEGORY COMPLETED (FULL) ====================
     v.checked === v.total: the section receives the .completed class.
     Accent color: a teal/turquoise that is the 50/50 RGB blend of MVP green
     (#22c55e) and Release blue (#3b82f6), applied to the whole category
     (background, text and check badge).
     Meaning: both MVP and Release are done; the mathematical midpoint of the
     two level colors becomes this category's "reward" color. (For light theme
     a separately derived, more muted teal #19678A is used, matching the
     light-mode midpoint of the same combination.) */
  section.category.completed {
    /* Dark mode teal border */
    border-color: rgba(47, 164, 170, 0.35);
    box-shadow: 0 0 0 1px rgba(47, 164, 170, 0.35) inset;
  }
  [data-theme="light"] section.category.completed {
    border-color: rgba(25, 103, 138, 0.40);
    box-shadow: 0 0 0 1px rgba(25, 103, 138, 0.40) inset;
  }
  section.category.completed .cat-header {
    background:
      linear-gradient(180deg,
        rgba(47, 164, 170, 0.16),
        rgba(47, 164, 170, 0.03)
      );
    border-bottom-color: rgba(47, 164, 170, 0.35);
  }
  [data-theme="light"] section.category.completed .cat-header {
    background:
      linear-gradient(180deg,
        rgba(25, 103, 138, 0.12),
        rgba(25, 103, 138, 0.02)
      );
    border-bottom-color: rgba(25, 103, 138, 0.40);
  }
  /* Text in teal: dark mode #2FA4AA, light mode #19678A */
  section.category.completed .cat-header .num,
  section.category.completed .cat-header .title h2,
  section.category.completed .cat-progress .pct,
  section.category.completed [data-cat-num] {
    color: #2FA4AA;
  }
  [data-theme="light"] section.category.completed .cat-header .num,
  [data-theme="light"] section.category.completed .cat-header .title h2,
  [data-theme="light"] section.category.completed .cat-progress .pct,
  [data-theme="light"] section.category.completed [data-cat-num] {
    color: #19678A;
  }
  /* Teal check badge next to the title: white check on teal background plus shadow */
  section.category.completed .cat-header .title h2::after {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 10px;
    background: #2FA4AA;
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    vertical-align: middle;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(47, 164, 170, 0.4);
  }
  [data-theme="light"] section.category.completed .cat-header .title h2::after {
    background: #19678A;
    box-shadow: 0 1px 4px rgba(25, 103, 138, 0.4);
  }
  section.category.completed .cat-header .title p {
    color: var(--text);
    opacity: 0.85;
  }
  section.category.completed [data-cat-num] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
  }
  /* Hover: stay within the teal tone */
  section.category.completed .cat-header:hover {
    background:
      linear-gradient(180deg,
        rgba(47, 164, 170, 0.22),
        rgba(47, 164, 170, 0.06)
      );
  }
  [data-theme="light"] section.category.completed .cat-header:hover {
    background:
      linear-gradient(180deg,
        rgba(25, 103, 138, 0.18),
        rgba(25, 103, 138, 0.04)
      );
  }

  /* ----- VARIATION: MVP ONLY COMPLETED -----
     Green background + green text (MVP color); NO check badge because
     Release work is still pending. Conveys the feeling: "core is done,
     polishing to professional quality remains". */
  section.category.completed-mvp {
    border-color: var(--mvp-border);
  }
  section.category.completed-mvp .cat-header {
    background:
      linear-gradient(180deg,
        rgba(34, 197, 94, 0.16),
        rgba(34, 197, 94, 0.03)
      );
    border-bottom-color: var(--mvp-border);
  }
  [data-theme="light"] section.category.completed-mvp .cat-header {
    background:
      linear-gradient(180deg,
        rgba(22, 163, 74, 0.12),
        rgba(22, 163, 74, 0.02)
      );
  }
  section.category.completed-mvp .cat-header .num,
  section.category.completed-mvp .cat-header .title h2,
  section.category.completed-mvp .cat-progress .pct,
  section.category.completed-mvp [data-cat-num] {
    color: var(--mvp);
  }
  section.category.completed-mvp .cat-header:hover {
    background:
      linear-gradient(180deg,
        rgba(34, 197, 94, 0.22),
        rgba(34, 197, 94, 0.06)
      );
  }
  [data-theme="light"] section.category.completed-mvp .cat-header:hover {
    background:
      linear-gradient(180deg,
        rgba(22, 163, 74, 0.18),
        rgba(22, 163, 74, 0.04)
      );
  }

  /* ----- VARIATION: RELEASE ONLY COMPLETED -----
     Blue background + blue text (Release color); NO check badge because
     MVP work is still pending. (Generally a rare state: the user may have
     ticked Release items while still skipping MVPs.) */
  section.category.completed-release {
    border-color: var(--release-border);
  }
  section.category.completed-release .cat-header {
    background:
      linear-gradient(180deg,
        rgba(59, 130, 246, 0.16),
        rgba(59, 130, 246, 0.03)
      );
    border-bottom-color: var(--release-border);
  }
  [data-theme="light"] section.category.completed-release .cat-header {
    background:
      linear-gradient(180deg,
        rgba(29, 78, 216, 0.12),
        rgba(29, 78, 216, 0.02)
      );
  }
  section.category.completed-release .cat-header .num,
  section.category.completed-release .cat-header .title h2,
  section.category.completed-release .cat-progress .pct,
  section.category.completed-release [data-cat-num] {
    color: var(--release);
  }
  section.category.completed-release .cat-header:hover {
    background:
      linear-gradient(180deg,
        rgba(59, 130, 246, 0.22),
        rgba(59, 130, 246, 0.06)
      );
  }
  [data-theme="light"] section.category.completed-release .cat-header:hover {
    background:
      linear-gradient(180deg,
        rgba(29, 78, 216, 0.18),
        rgba(29, 78, 216, 0.04)
      );
  }

  .feature-list { padding: 6px 0; }
  .feature {
    position: relative;
    border-bottom: 1px solid var(--border);
    padding: 20px 26px;
    /* Perspective for the 3D flip animation */
    perspective: 1800px;
  }
  .feature:last-child { border-bottom: 0; }

  /* ==================== HOW-TO FLIP (card back face) ====================
     Pressing the "How?" button in the top-right corner flips the card in 3D.
     The front face keeps the full checklist UI (including the checkbox); the
     back face holds only the educational "How-To" guide and contains no
     checkbox or progress control of its own. */
  /* Static states are driven by CSS: the "active" face (the one that drives
     the height) sits in normal flow while the "passive" face is layered on
     top via position:absolute.
     - Not flipped: front is in normal flow, so card height equals front
       content. Back is absolute, so it does not contribute to height and the
       checklist view does not grow unnecessarily.
     - Flipped: roles swap, back is in normal flow (it drives the height) and
       front becomes absolute. The card grows to fit the How-To content.
     During the animation JS temporarily sets an explicit pixel height on
     .feature-inner; because transition is defined for height, it grows or
     shrinks in lockstep with the rotate. When the transition ends the
     explicit height is removed so CSS resumes natural sizing, producing the
     correct height regardless of card visibility (collapsed category, etc.). */
  .feature-inner {
    position: relative;
    transform-style: preserve-3d;
    transition:
      transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
      height    0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, height;
  }
  .feature-inner > .feature-front,
  .feature-inner > .feature-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  /* DEFAULT: front in normal flow (height driver), back absolute (overlay) */
  .feature-inner > .feature-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: rotateY(180deg);
  }
  /* FLIPPED: roles swap, back is now in normal flow, front becomes absolute. */
  .feature.flipped .feature-inner > .feature-front {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .feature.flipped .feature-inner > .feature-back {
    position: relative;
    /* transform: rotateY(180deg) is already applied (from the rule above); once
       the wrapper rotates 180 degrees, the back face is now facing forward. */
  }
  .feature.flipped .feature-inner {
    transform: rotateY(180deg);
  }

  /* Flip button: small icon-style control in the card's top-right corner.
     Because it is position:absolute, the 3D rotation is not applied to it,
     so it always stays in front and remains accessible. */
  .feature-flip-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 5;
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--text-dim);
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
  }
  .feature-flip-btn:hover {
    border-color: var(--accent);
    background: var(--surface-2);
    color: var(--text);
  }
  .feature-flip-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .feature-flip-btn .flip-icon { font-size: 13px; line-height: 1; }
  /* On the front face show only the "How?" label; on the back face show only "Back" */
  .feature .flip-face-back { display: none; }
  .feature.flipped .flip-face-front { display: none; }
  .feature.flipped .flip-face-back { display: inline-flex; }
  .feature.flipped .feature-flip-btn {
    background: var(--hero-grad);
    color: var(--text);
    border-color: var(--accent);
  }

  /* Back face content: educational only; NO checkbox, NO completion control */
  .feature-back {
    /* Spacing roughly mirrors the front face */
  }
  .feature-back .feature-head {
    margin-bottom: 12px;
  }
  .feature-back .feature-head h3 {
    color: var(--accent-2);
  }
  .howto-body {
    margin-top: 4px;
  }
  .howto-empty {
    font-size: 13px;
    color: var(--text-mute);
    line-height: 1.55;
    margin: 8px 0 0;
    font-style: italic;
  }
  /* Single grid: both the MVP and Release rows share the same column layout.
     Thanks to "auto 1fr", the label column is sized to the widest tag (Release),
     so the text in both rows starts at the same x coordinate. */
  .howto-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px 14px;
    align-items: start;
  }
  /* Thin separator between the MVP and Release rows. Border + padding-top is
     applied ONLY to the text cell: adding padding-top to the chip would break
     its fixed height and cause the line box to overflow the border (the
     "RELEASE" label used to spill out of its capsule). For the chip we mirror
     the same vertical offset via margin-top: 14px padding + 1px border = 15px,
     which lines up with where the text visually begins. */
  .howto-grid > .howto-text:nth-child(n+3) {
    padding-top: 14px;
    border-top: 1px dashed var(--border);
  }
  .howto-grid > .howto-tag:nth-child(n+3) {
    margin-top: 15px;
  }
  .howto-tag {
    /* Chip height is fixed at 24px (border included). Line-height matches the
       content area (22px = 24 - 2*1px border), so the text's line box stays
       inside the border and the baseline lands centered in the content area
       per the font's natural metrics.
       With fonts that have asymmetric ascent/descent ratios (such as Segoe UI),
       the combination of min-height + 5/5 padding + line-height:1 visually
       dropped the text toward the bottom. A single fixed height plus a matching
       line-height cleans this up. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 12px;
    height: 24px;
    line-height: 22px;
    border-radius: 999px;
    align-self: start;
    text-align: center;
    /* All tags share the same width (sized to the widest one): the grid 'auto'
       column already enforces this. The min-width is an extra safeguard so
       that, even when "MVP" and "Release" stack vertically, the labels still
       reserve equal space. */
    min-width: 64px;
  }
  .howto-tag.mvp {
    background: var(--mvp-bg);
    color: var(--mvp);
    border: 1px solid var(--mvp-border);
  }
  .howto-tag.release {
    background: var(--release-bg);
    color: var(--release);
    border: 1px solid var(--release-border);
  }
  .howto-text {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    min-width: 0;
  }
  .howto-text strong { color: var(--accent-2); font-weight: 600; }
  .howto-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    padding: 1px 6px;
    background: var(--surface-2);
    border-radius: 4px;
    color: var(--accent-2);
  }
  /* Numbered step list: the 1, 2, 3 markers are re-drawn via CSS counter inside
     a colored circle; inline markers from the author (e.g. "1) ") are parsed
     out by formatHowtoSteps and moved into the <ol>.
     Steps are clickable like checkboxes: when data-step-key is present, hover
     and cursor interaction turn on, and in the .checked class a check replaces
     the number while the text becomes gray and struck through. This state is
     persisted via state[stepKey] and stays two-way synchronized with the
     parent level check. */
  .howto-steps {
    list-style: none;
    counter-reset: howtostep;
    margin: 0;
    padding: 0;
  }
  .howto-steps > li {
    counter-increment: howtostep;
    position: relative;
    padding: 4px 0 4px 36px;
    margin: 0 0 8px;
    line-height: 1.6;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
  }
  .howto-steps > li:last-child { margin-bottom: 0; }
  .howto-steps > li::before {
    content: counter(howtostep);
    position: absolute;
    left: 0;
    top: 4px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--accent-2);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  /* Clickable steps: subtle background on hover, pointer cursor on the whole li */
  .howto-steps > li[data-step-key] {
    cursor: pointer;
    padding-right: 10px;
  }
  .howto-steps > li[data-step-key]:hover {
    background: var(--surface-2);
  }
  .howto-steps > li[data-step-key]:hover::before {
    border-color: var(--accent-2);
  }
  .howto-steps > li[data-step-key]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* Checked state: the number is replaced by a check mark, accent matches the
     level (MVP green / Release blue); text turns gray and struck through to
     give a visual "done" feel. */
  .howto-steps > li.checked::before {
    content: "✓";
    color: #fff;
    font-size: 13px;
    line-height: 24px;
    border-color: transparent;
  }
  .howto-steps.howto-steps-mvp > li.checked::before {
    background: var(--mvp);
  }
  .howto-steps.howto-steps-release > li.checked::before {
    background: var(--release);
  }
  .howto-steps > li.checked {
    color: var(--text-mute);
    text-decoration: line-through;
    text-decoration-color: var(--text-mute);
    text-decoration-thickness: 1px;
  }
  .howto-steps > li.checked strong,
  .howto-steps > li.checked code {
    color: var(--text-mute);
  }
  .howto-step-intro {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--text-dim);
    line-height: 1.55;
  }
  /* Nested lists (if any): places where the author used <ul>/<ol> directly */
  .howto-text ol, .howto-text ul {
    margin: 6px 0;
    padding-left: 22px;
  }
  .howto-text li {
    margin: 4px 0;
  }
  .howto-text .hint {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border-left: 2px solid var(--accent);
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    color: var(--text-mute);
    font-style: italic;
  }

  /* Feature card actions (Note + AI): placed OUTSIDE feature-inner so they look
     and behave the same on both the front face (checklist) and the back face
     (How-To). The 3D flip animation targets only feature-inner, so this
     container is not affected by it. */
  .feature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    align-items: center;
  }
  /* feature-actions already supplies its own padding-top; zero out the legacy
     margin-top on the inner buttons and wrappers (otherwise the spacing doubles) */
  .feature-actions .feature-note-toggle,
  .feature-actions .feature-ai-wrap {
    margin-top: 0;
  }
  /* On narrow screens, let buttons grow but still fit on one row */
  @media (max-width: 540px) {
    .feature-actions { gap: 6px 8px; }
  }

  /* During the card flip animation, an open note panel or AI panel on the
     front face does not rotate along; this is fine because they share the
     same plane via grid-area:stack. The note and AI panels stay open on the
     front face, so the card may appear a little taller during the flip
     animation; this is acceptable. */

  /* In print output, the flip button and the back face must not appear.
     JS may have set a temporary explicit pixel height on .feature-inner; clear
     that override for print. Also, in the .flipped state CSS makes front
     position:absolute, which combined with back:display:none would mean
     front's height is not reflected on .feature-inner. For print we keep
     front in normal flow at all times. */
  @media print {
    .feature-flip-btn { display: none !important; }
    .feature-inner {
      transform: none !important;
      transition: none !important;
      height: auto !important;
    }
    .feature-inner > .feature-back { display: none !important; }
    .feature.flipped .feature-inner > .feature-front {
      position: static !important;
    }
  }
  .feature-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .feature-head .id {
    font-size: 11px;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .feature-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .feature-desc {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 14px;
  }

  .levels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .level {
    /* position:relative establishes the containing block for the partial-fill badge */
    position: relative;
    display: grid;
    grid-template-columns: 28px auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
  }
  .level:hover { background: var(--surface-3); }
  .level.mvp { border-left: 3px solid var(--mvp); }
  .level.release { border-left: 3px solid var(--release); }

  /* Partial fill based on step progress: when some How-To steps are checked
     but not all, the left side of the level row appears X% filled with the
     MVP/Release tint. --step-progress is supplied as an inline style (set at
     render time or dynamically by JS). When all steps are checked, the
     .level.checked solid background takes over; when none are checked,
     --step-progress is absent and the default background is used. */
  .level.mvp[style*="--step-progress"] {
    background:
      linear-gradient(to right,
        var(--mvp-bg) var(--step-progress, 0%),
        transparent var(--step-progress, 0%)
      ),
      var(--surface-2);
    border-color: var(--mvp-border);
  }
  .level.release[style*="--step-progress"] {
    background:
      linear-gradient(to right,
        var(--release-bg) var(--step-progress, 0%),
        transparent var(--step-progress, 0%)
      ),
      var(--surface-2);
    border-color: var(--release-border);
  }
  .level.checked.mvp { background: var(--mvp-bg); border-color: var(--mvp-border); }
  .level.checked.release { background: var(--release-bg); border-color: var(--release-border); }

  /* Percent badge: lives in the grid's 4th column (the column is only created
     when a badge is present, otherwise the 3-column layout is preserved). It
     does not collide with long level-text; the grid automatically reserves
     space for it. */
  .level:has(.level-progress-badge) {
    grid-template-columns: 28px auto 1fr auto;
  }
  .level-progress-badge {
    align-self: start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--border);
    margin-top: 2px;
  }
  .level.mvp .level-progress-badge {
    color: var(--mvp);
    border-color: var(--mvp-border);
    background: var(--mvp-bg);
  }
  .level.release .level-progress-badge {
    color: var(--release);
    border-color: var(--release-border);
    background: var(--release-bg);
  }
  /* On mobile the same column template still applies; the level grid was
     already overridden to `24px auto 1fr` in the responsive block, so the
     extra auto column for the badge does not conflict. */
  @media (max-width: 700px) {
    .level:has(.level-progress-badge) {
      grid-template-columns: 24px auto 1fr auto;
    }
  }

  .check {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    flex-shrink: 0;
    transition: all 0.15s;
    margin-top: 1px;
  }
  .level.mvp .check { border-color: var(--mvp-border); }
  .level.release .check { border-color: var(--release-border); }
  .level.checked .check::after {
    content: "";
    width: 12px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
  }
  .level.checked.mvp .check { background: var(--mvp); border-color: var(--mvp); }
  .level.checked.release .check { background: var(--release); border-color: var(--release); }

  .level-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    align-self: center;
    text-align: center;
    min-width: 84px;
  }
  .level.mvp .level-tag { background: var(--mvp-bg); color: var(--mvp); border: 1px solid var(--mvp-border); }
  .level.release .level-tag { background: var(--release-bg); color: var(--release); border: 1px solid var(--release-border); }

  .level-text {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
  }
  .level-text strong { font-weight: 600; }
  .level-text .hint {
    display: block;
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 6px;
    font-style: italic;
  }

  /* Footer */
  footer {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    text-align: center;
  }
  footer .foot-line {
    margin: 6px 0;
    line-height: 1.5;
  }
  footer .foot-org {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
    font-weight: 500;
  }
  footer .foot-title {
    font-size: 16px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 8px 0 12px;
  }
  footer .foot-title::before,
  footer .foot-title::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--border);
    vertical-align: middle;
    margin: 0 14px;
  }
  footer .foot-instructor {
    font-size: 13px;
    color: var(--text-dim);
  }
  footer .foot-label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-2);
    margin-right: 6px;
  }

  .feature.hidden { display: none; }
  .category.hidden { display: none; }

  /* Active (toggle) button style */
  .btn.active {
    background: var(--surface-3);
    color: var(--accent-2);
    border-color: var(--accent-2);
  }
  /* Hero level pills now use dropdowns: 3 groups side by side, each pill + menu */
  .lv-group {
    position: relative;
    display: inline-flex;
    flex: 1 1 auto;
  }
  .lv-group .level-filter-pill {
    flex: 1 1 auto;
  }
  .level-filter-pill .lv-label {
    font-weight: inherit;
  }
  .level-filter-pill .lv-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    margin-left: 4px;
    color: inherit;
  }
  [data-theme="light"] .level-filter-pill .lv-sub {
    background: rgba(0, 0, 0, 0.08);
  }
  .level-filter-pill .lv-chevron {
    color: var(--text-mute);
    font-size: 11px;
    margin-left: 2px;
    transition: transform 0.18s ease;
  }
  .level-filter-pill[aria-expanded="true"] .lv-chevron {
    transform: rotate(180deg);
    color: inherit;
  }

  /* Dropdown menu */
  .lv-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    z-index: 200;
    animation: lvMenuIn 0.15s ease;
  }
  [data-theme="light"] .lv-menu {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  }
  .lv-menu[hidden] { display: none; }
  @keyframes lvMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .lv-menu button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
  }
  .lv-menu button:hover {
    background: var(--surface-2);
  }
  .lv-menu button.active {
    background: var(--accent);
    color: #0b0f17;
    font-weight: 700;
  }
  /* Disabled: when the relevant level has no checks, the Done/Pending options
     go gray, hover effects are suppressed, and the "off" feeling is obvious
     (the "All" option is always active). */
  .lv-menu button:disabled,
  .lv-menu button[disabled] {
    color: var(--text-mute);
    cursor: not-allowed;
    opacity: 0.5;
  }
  .lv-menu button:disabled:hover,
  .lv-menu button[disabled]:hover {
    background: transparent;
  }
  /* Color variants for the active menu item (matching the pill's color) */
  .lv-group[data-view-mode="mvp"] .lv-menu button.active {
    background: var(--mvp);
    color: #0b0f17;
  }
  .lv-group[data-view-mode="release"] .lv-menu button.active {
    background: var(--release);
    color: #fff;
  }
  /* On mobile the menu matches the pill's width so it does not overflow to the right */
  @media (max-width: 700px) {
    .lv-menu { left: auto; right: auto; min-width: 140px; }
  }

  /* Category collapse / expand */
  .cat-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
  }
  .cat-header:hover {
    background: linear-gradient(180deg, var(--surface-3), transparent);
  }
  .cat-header .chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-mute);
    transition: transform 0.2s ease;
    margin-left: 6px;
  }
  .category.collapsed .cat-header .chevron {
    transform: rotate(-90deg);
  }
  .category.collapsed .feature-list {
    display: none;
  }
  /* Only an ACTIVE SEARCH overrides the collapsed state (so that, while the
     user is searching for "X", matches inside collapsed categories are still
     visible: those categories auto-open). Changes to viewMode/viewFilter do
     not trigger search, so the Expand All / Collapse All buttons keep working
     as a manual toggle. */
  body.searching .category.collapsed .feature-list,
  body.searching .category.collapsed .cat-header .chevron {
    display: block;
    transform: none;
  }
  body.searching .category.collapsed .feature-list {
    display: block !important;
  }

  /* Per-item note */
  .feature-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-mute);
    background: none;
    border: 1px dashed var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.15s;
    font-family: inherit;
  }
  .feature-note-toggle:hover {
    color: var(--accent-2);
    border-color: var(--accent-2);
    border-style: solid;
  }
  .feature.has-note .feature-note-toggle {
    color: var(--accent-2);
    border-color: var(--accent-2);
    border-style: solid;
    background: rgba(249, 115, 22, 0.06);
  }
  .feature-note {
    display: none;
    margin-top: 10px;
  }
  .feature.note-open .feature-note {
    display: block;
  }
  .feature-note textarea {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.55;
    outline: none;
    transition: border-color 0.15s;
  }
  .feature-note textarea:focus {
    border-color: var(--accent);
  }
  .feature-note .note-meta {
    font-size: 11px;
    color: var(--text-mute);
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .feature-note .note-clear {
    background: none;
    border: 0;
    color: var(--text-mute);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .feature-note .note-clear:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
  }