/* Grammar Vault only. Shared learning-vault behaviour is gated by the page class. */
body.grv-practice { --vault-accent: var(--sky); }
body.grv-practice .main-content { max-width: 960px; }
body.grv-practice .module-header { gap: 24px; }
body.grv-practice .module-title-row { align-items: flex-start; min-width: 0; gap: 16px; }
body.grv-practice .module-title-row > div:last-child { min-width: 0; }
body.grv-practice .module-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--practice-accent-wash); }
body.grv-practice #vaultIcon svg { color: var(--sky); stroke: var(--sky); }
body.grv-practice .header-actions { width: 100%; gap: 12px; }
body.grv-practice .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-size: 14px; font-weight: 500; line-height: 1.5; padding: 12px 20px; border-radius: 12px; color: var(--muted); background: transparent; border-color: var(--border2); text-decoration: none; text-align: center; }
body.grv-practice .btn:hover { color: var(--text); background: var(--surface2); border-color: var(--border2); }
body.grv-practice .btn-primary { background: var(--sky); color: var(--practice-on-accent); border-color: transparent; font-weight: 600; }
body.grv-practice .btn-primary:hover { background: var(--sky2); color: var(--practice-on-accent); border-color: transparent; }
body.grv-practice .btn:disabled { color: var(--muted); background: var(--bg3); border-color: var(--border); opacity: 1; cursor: not-allowed; }
body.grv-practice .vault-search { margin-bottom: 24px; }
body.grv-practice .vault-control-label { display: block; color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
body.grv-practice .vault-input { width: 100%; min-width: 0; min-height: 52px; height: auto; padding: 14px 16px; font-family: inherit; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--practice-card); border: 1px solid var(--border2); border-radius: 12px; }
body.grv-practice .vault-input::placeholder { color: var(--muted); opacity: 1; }
body.grv-practice .vault-input:focus { border-color: var(--sky); box-shadow: none; }
body.grv-practice .vault-tools { grid-template-columns: minmax(0,1fr) auto; margin-bottom: 0; gap: 12px; }
body.grv-practice .count-text { font-size: 13px; line-height: 1.6; margin: 24px 0 16px; }
body.grv-practice .vault-list { gap: 16px; }
body.grv-practice .vault-card { padding: 24px; border-radius: 16px; background: var(--practice-card); border-color: var(--border); overflow-wrap: anywhere; }
body.grv-practice .vault-card-top { gap: 16px; margin-bottom: 0; align-items: flex-start; }
body.grv-practice .vault-card-top > div { min-width: 0; }
body.grv-practice .vault-item-title { font-family: inherit; font-size: clamp(21px,2.5vw,25px); font-weight: 500; line-height: 1.5; color: var(--text); }
body.grv-practice .vault-meta { gap: 8px; margin-top: 12px; }
body.grv-practice .vault-meta span { color: var(--muted); background: var(--bg); border-color: var(--border); font-size: 12px; font-weight: 400; padding: 4px 10px; line-height: 1.6; }
body.grv-practice .icon-btn { flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; background: transparent; border-color: var(--border2); color: var(--muted); border-radius: 12px; }
body.grv-practice .icon-btn:hover { background: var(--surface2); border-color: var(--red); color: var(--red); }
body.grv-practice .vault-field { margin-top: 20px; padding-top: 16px; }
body.grv-practice .vault-field-label { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
body.grv-practice .vault-field-text { font-size: 16px; color: var(--text); line-height: 1.7; }
body.grv-practice .empty-state { background: var(--practice-card); border: 1px solid var(--border); padding: 36px 24px; border-radius: 16px; }
body.grv-practice .empty-state h2 { font-weight: 600; font-size: 21px; line-height: 1.5; }
body.grv-practice .empty-state p { font-size: 15px; line-height: 1.7; max-width: 52ch; margin: 0 auto; }
body.grv-practice .empty-state .btn { margin-top: 20px; }
body.grv-practice .empty-icon svg { color: var(--sky); stroke: var(--sky); }
body.grv-practice .ai-badge-nav { color: var(--muted); background: transparent; border-color: var(--border); }
body.grv-practice .pp-tour-btn { min-height: 44px !important; background: transparent; color: var(--muted); border-color: var(--border2); }
body.grv-practice .pp-tour-btn:hover { background: var(--practice-accent-wash); color: var(--sky); border-color: var(--sky); }
body.grv-practice .grv-tour-card { background: var(--practice-card); border-color: var(--border); box-shadow: none; }
body.grv-practice .grv-tour-card h2 { color: var(--text); font-weight: 600; }
body.grv-practice .grv-tour-card p { color: var(--muted); line-height: 1.7; }
body.grv-practice .grv-tour-kicker { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body.grv-practice .grv-tour-progress { color: var(--muted); font-weight: 400; }
body.grv-practice .grv-tour-action { min-height: 44px; border-color: var(--border2); background: transparent; color: var(--muted); font-weight: 500; }
body.grv-practice .grv-tour-action:hover { color: var(--text); background: var(--surface2); border-color: var(--border2); }
body.grv-practice .grv-tour-action.primary { background: var(--sky); color: var(--practice-on-accent); border-color: transparent; font-weight: 600; }
body.grv-practice .grv-tour-action.primary:hover { background: var(--sky2); color: var(--practice-on-accent); border-color: transparent; }
body.grv-practice .grv-tour-close { min-width: 44px; min-height: 44px; top: 0; inset-inline-end: 0; color: var(--muted); }
body.grv-practice .grv-tour-close:hover { color: var(--text); }
body.grv-practice .grv-tour-spotlight { background: transparent; border-color: var(--sky); box-shadow: 0 0 0 9999px rgba(0,0,0,.68); }
body.grv-practice #pp-vault-delete-modal > div { background: var(--practice-card) !important; border-color: var(--border) !important; box-shadow: none !important; border-radius: 16px !important; }
body.grv-practice #pp-del-title { color: var(--text) !important; font-weight: 600 !important; }
body.grv-practice #pp-del-subtitle { color: var(--muted) !important; line-height: 1.7; }
body.grv-practice #pp-del-preview { color: var(--text) !important; background: var(--bg) !important; border-color: var(--border) !important; font-size: 15px !important; }
body.grv-practice #pp-del-cancel,
body.grv-practice #pp-del-confirm { min-height: 48px; border-radius: 12px !important; }
body.grv-practice #pp-del-cancel { color: var(--muted) !important; border-color: var(--border2) !important; }
body.grv-practice #pp-del-confirm { background: var(--red) !important; color: var(--practice-on-accent) !important; }
body.grv-practice #pp-vault-delete-modal svg { stroke: var(--red); }

@media (max-width: 860px) {
  body.grv-practice .header-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  body.grv-practice #practiceLink { grid-column: 1 / -1; }
  body.grv-practice .vault-card { padding: 20px; }
}
@media (max-width: 500px) {
  body.grv-practice .vault-tools,
  body.grv-practice .header-actions { grid-template-columns: minmax(0,1fr); }
  body.grv-practice .grv-tour-footer { flex-wrap: wrap; }
  body.grv-practice .grv-tour-actions { margin-inline-start: auto; }
}
html.pp-embedded-exercise body.grv-practice .main-content { padding-top: 28px !important; }