/* ============================================================
   Real Estate Support VA — Shared Course Stylesheet
   PVA Academy — standalone deployment
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* Core palette */
  --paper: #F6F2E9;
  --paper-dim: #EFE9DB;
  --card: #FFFFFE;
  --ink: #24313D;
  --ink-soft: #4B5A64;
  --ink-faint: #637078;
  --line: #DCD3BF;
  --line-strong: #C6BB9F;
  --ledger: #1F4B4A;
  --ledger-dark: #163736;
  --ledger-tint: #E7EEEC;
  --brass: #9C6531;
  --brass-dark: #8C592A;
  --brass-tint: #F3E5D2;

  /* ACT / CLARIFY / VERIFY / ESCALATE — functional, recurring throughout */
  --act: #3E6B8A;
  --act-tint: #E4EDF3;
  --clarify: #88641F;
  --clarify-tint: #F6ECD6;
  --verify: #4C6B4B;
  --verify-tint: #E6EDE3;
  --escalate: #A9502F;
  --escalate-tint: #F3E1D6;

  /* Tag colors */
  --practice: #5C6B7A;
  --practice-tint: #E7EAED;
  --portfolio: #1F4B4A;
  --portfolio-tint: #E7EEEC;
  --capstone: #96602D;
  --capstone-tint: #F3E5D2;
  --artifact: #6B5C7A;
  --artifact-tint: #ECE7ED;

  --radius: 3px;
  --radius-lg: 6px;
  --shadow-soft: 0 1px 2px rgba(36,49,61,0.06);
  --measure: 680px;

  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--ledger); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}
h1,h2,h3,h4{ font-family: var(--font-head); font-weight:600; line-height:1.2; margin: 0 0 .5em; color: var(--ink); }
h1{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.01em; }
h2{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: 2.2em; }
h3{ font-size: 1.2rem; margin-top: 1.7em; }
h4{ font-size: 1.02rem; margin-top: 1.4em; font-weight:700; font-family: var(--font-body); }
p{ margin: 0 0 1.1em; max-width: var(--measure); }
ul, ol{ margin: 0 0 1.1em; padding-left: 1.35em; max-width: var(--measure); }
li{ margin-bottom: .4em; }
strong{ color: var(--ink); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ledger); color:#fff; padding:.6em 1em; z-index:200; border-radius: 0 0 var(--radius) 0; }
.skip-link:focus{ left:0; }

/* ---------- Top route bar ---------- */
.route-bar{
  position: sticky; top:0; z-index: 50;
  display:flex; align-items:center; gap:.75rem;
  background: var(--ledger); color:#fff;
  padding: .65rem 1.1rem;
  font-size:.92rem;
  border-bottom: 3px solid var(--brass);
}
.route-bar a{ color:#EFE9DB; }
.route-bar .home-btn{
  display:inline-flex; align-items:center; gap:.4em;
  color:#fff; font-weight:600; text-decoration:none;
  padding:.25em .5em; border-radius: var(--radius);
}
.route-bar .home-btn:hover{ background: rgba(255,255,255,.12); }
.route-crumb{ opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.route-crumb .sep{ margin:0 .4em; opacity:.6; }
.route-progress{ margin-left:auto; display:flex; align-items:center; gap:.6rem; white-space:nowrap; font-variant-numeric: tabular-nums; }
.route-progress .dots{ display:flex; gap:4px; }
.route-progress .dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.28); }
.route-progress .dot.done{ background: var(--brass); }

/* ---------- Page shell ---------- */
.page-shell{
  max-width: 1180px; margin: 0 auto;
  display:grid; grid-template-columns: 250px 1fr; gap: 2.6rem;
  padding: 2.2rem 1.4rem 5rem;
}
.page-shell.no-rail{ display:block; max-width: 780px; }

.lesson-rail{
  align-self:start; position: sticky; top: 66px;
  max-height: calc(100vh - 90px); overflow-y:auto;
  padding-right: .5rem;
}
.lesson-rail-title{
  font-family: var(--font-head); font-weight:600; font-size:.78rem;
  text-transform: none; letter-spacing:.02em; color: var(--ink-faint);
  margin: 1.3rem 0 .5rem;
}
.lesson-rail-title:first-child{ margin-top:0; }
.lesson-rail ol, .lesson-rail ul{ list-style:none; margin:0 0 .3rem; padding:0; }
.lesson-rail li{ margin:0; }
.lesson-rail a{
  display:flex; gap:.55em; align-items:flex-start;
  padding: .4em .5em; border-radius: var(--radius);
  color: var(--ink-soft); text-decoration:none; font-size:.91rem; line-height:1.35;
  border-left: 3px solid transparent;
}
.lesson-rail a:hover{ background: var(--paper-dim); }
.lesson-rail a.current{
  background: var(--ledger-tint); border-left-color: var(--ledger); color: var(--ledger-dark); font-weight:600;
}
.lesson-rail .rail-check{
  flex: 0 0 auto; width:16px; height:16px; margin-top:.15em;
  border-radius:50%; border:1.5px solid var(--line-strong);
  display:inline-block;
}
.lesson-rail a.done .rail-check{ background: var(--verify); border-color: var(--verify); }
.lesson-rail a.done .rail-check::after{ content:"✓"; display:block; color:#fff; font-size:10px; line-height:16px; text-align:center; }

.rail-toggle{ display:none; }

/* ---------- Content ---------- */
.lesson-main{ min-width:0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.78rem; font-weight:700; color: var(--ledger);
  margin-bottom:.6em;
}
.eyebrow .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; border-radius:50%;
  background: var(--ledger-tint); color: var(--ledger-dark); font-family: var(--font-head);
}
.lede{ font-size:1.08rem; color: var(--ink-soft); }

/* ---------- Tag chips: PRACTICE / PORTFOLIO EVIDENCE / CAPSTONE / LEARNING ARTIFACT ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-family: var(--font-body); font-weight:700; font-size:.74rem;
  padding: .28em .65em; border-radius: 999px;
  white-space:nowrap; border:1px solid transparent;
}
.tag::before{ content:""; width:7px; height:7px; border-radius:50%; }
.tag-practice{ background: var(--practice-tint); color:#414D59; }
.tag-practice::before{ background: var(--practice); }
.tag-portfolio{ background: var(--portfolio-tint); color: var(--ledger-dark); }
.tag-portfolio::before{ background: var(--portfolio); }
.tag-capstone{ background: var(--capstone-tint); color: var(--brass-dark); }
.tag-capstone::before{ background: var(--capstone); }
.tag-artifact{ background: var(--artifact-tint); color:#4E4159; }
.tag-artifact::before{ background: var(--artifact); }

.tag-legend{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: .9rem;
  margin: 1.4rem 0 2rem; padding: 0;
}
.tag-legend-item{
  border:1px solid var(--line); border-radius: var(--radius-lg); background: var(--card);
  padding: 1rem 1.1rem;
}
.tag-legend-item p{ margin: .5em 0 0; font-size:.93rem; color: var(--ink-soft); }

/* ---------- ACT / CLARIFY / VERIFY / ESCALATE key ---------- */
.acve-key{
  display:grid; grid-template-columns: repeat(4,1fr); gap: .7rem;
  margin: 1.4rem 0 1.8rem;
}
@media (max-width: 640px){ .acve-key{ grid-template-columns: 1fr 1fr; } }
.acve-card{
  border-radius: var(--radius-lg); padding: .85rem .9rem;
  border: 1.5px solid var(--line); background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.acve-card h4{ margin: 0 0 .25em; font-size:.95rem; }
.acve-card p{ margin:0; font-size:.82rem; color: var(--ink-soft); }
.acve-card.act{ border-top: 4px solid var(--act); }
.acve-card.clarify{ border-top: 4px solid var(--clarify); }
.acve-card.verify{ border-top: 4px solid var(--verify); }
.acve-card.escalate{ border-top: 4px solid var(--escalate); }
.acve-card.act h4{ color: var(--act); }
.acve-card.clarify h4{ color: var(--clarify); }
.acve-card.verify h4{ color: var(--verify); }
.acve-card.escalate h4{ color: var(--escalate); }
.acve-card.is-lit{ box-shadow: 0 0 0 3px var(--ring, transparent); }
.acve-card.act.is-lit{ --ring: rgba(62,107,138,.35); background: var(--act-tint); }
.acve-card.clarify.is-lit{ --ring: rgba(136,100,31,.35); background: var(--clarify-tint); }
.acve-card.verify.is-lit{ --ring: rgba(76,107,75,.35); background: var(--verify-tint); }
.acve-card.escalate.is-lit{ --ring: rgba(169,80,47,.35); background: var(--escalate-tint); }

.acve-pill{
  display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size:.78rem;
  padding:.3em .7em; border-radius:999px;
}
.acve-pill.act{ background: var(--act-tint); color: var(--act); }
.acve-pill.clarify{ background: var(--clarify-tint); color: var(--clarify); }
.acve-pill.verify{ background: var(--verify-tint); color: var(--verify); }
.acve-pill.escalate{ background: var(--escalate-tint); color: var(--escalate); }

/* ---------- Cards & sections ---------- */
.card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem; margin: 1.6rem 0; box-shadow: var(--shadow-soft);
}
.card > *:last-child{ margin-bottom:0; }
.card-do{ border-left: 4px solid var(--ledger); }
.card-do .eyebrow{ color: var(--ledger); }
.card-example{ background: var(--paper-dim); border-style:dashed; }
.callout{
  border:1px solid var(--brass); background: var(--brass-tint);
  border-radius: var(--radius-lg); padding: 1rem 1.2rem; margin: 1.4rem 0;
}
.callout p:last-child{ margin-bottom:0; }
.callout-title{ font-weight:700; color: var(--brass-dark); margin-bottom:.3em; display:block; }

hr.divider{ border:none; border-top:1px solid var(--line); margin: 2.4rem 0; }

table{ border-collapse: collapse; width:100%; margin: 1.2rem 0 1.6rem; font-size:.94rem; }
th, td{ text-align:left; padding: .55em .7em; border:1px solid var(--line); vertical-align:top; }
th{ background: var(--paper-dim); font-family: var(--font-head); font-weight:600; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family: var(--font-body); font-weight:700; font-size:.94rem;
  border-radius: var(--radius); border:1.5px solid transparent;
  padding: .62em 1.15em; text-decoration:none; line-height:1.2;
}
.btn-primary{ background: var(--ledger); color:#fff; }
.btn-primary:hover{ background: var(--ledger-dark); }
.btn-secondary{ background: transparent; color: var(--ledger); border-color: var(--ledger); }
.btn-secondary:hover{ background: var(--ledger-tint); }
.btn-brass{ background: var(--brass); color:#fff; }
.btn-brass:hover{ background: var(--brass-dark); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-row{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.2rem; }

/* ---------- Forms ---------- */
label{ display:block; font-weight:700; margin-bottom:.35em; font-size:.92rem; }
textarea, input[type=text], input[type=email], select{
  width:100%; font-family: var(--font-body); font-size:.95rem;
  border:1.5px solid var(--line-strong); border-radius: var(--radius);
  padding: .6em .75em; background:#fff; color:var(--ink);
}
textarea{ min-height: 90px; resize: vertical; }
.field{ margin-bottom: 1.1rem; max-width: var(--measure); }
.field-hint{ font-size:.82rem; color: var(--ink-faint); margin-top:.3em; }

/* ---------- Radio/decision groups ---------- */
.decision-group{ display:flex; flex-wrap:wrap; gap:.6rem; margin: .7rem 0 1rem; }
.decision-opt{ position:relative; }
.decision-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.decision-opt label{
  display:inline-flex; margin:0; cursor:pointer; font-weight:700; font-size:.86rem;
  padding:.5em .95em; border-radius:999px; border:1.5px solid var(--line-strong); color: var(--ink-soft);
}
.decision-opt input:focus-visible + label{ outline:3px solid var(--brass); outline-offset:2px; }
.decision-opt input:checked + label{ color:#fff; border-color: transparent; }
.decision-opt[data-v="ACT"] input:checked + label{ background: var(--act); }
.decision-opt[data-v="CLARIFY"] input:checked + label{ background: var(--clarify); }
.decision-opt[data-v="VERIFY"] input:checked + label{ background: var(--verify); }
.decision-opt[data-v="ESCALATE"] input:checked + label{ background: var(--escalate); }

/* ---------- Feedback ---------- */
.feedback{ border-radius: var(--radius-lg); padding: .9rem 1.1rem; margin-top:.8rem; font-size:.94rem; display:none; }
.feedback.show{ display:block; }
.feedback.correct{ background: var(--verify-tint); border:1px solid var(--verify); color:#2E4A2D; }
.feedback.incorrect{ background: var(--escalate-tint); border:1px solid var(--escalate); color:#7A3A21; }
.feedback.neutral{ background: var(--paper-dim); border:1px solid var(--line-strong); color: var(--ink-soft); }

/* ---------- Quiz ---------- */
.quiz-progress{ display:flex; justify-content:space-between; align-items:center; font-size:.85rem; color:var(--ink-faint); margin-bottom:.6rem; }
.quiz-q{ font-weight:700; font-size:1.05rem; margin-bottom:.9rem; }
.quiz-opt{ display:block; margin-bottom:.6rem; }
.quiz-opt input{ position:absolute; opacity:0; }
.quiz-opt label{
  display:flex; gap:.7em; align-items:flex-start; cursor:pointer;
  border:1.5px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: .7em .9em; font-weight:500; font-size:.95rem;
}
.quiz-opt input:focus-visible + label{ outline:3px solid var(--brass); outline-offset:2px; }
.quiz-opt input:checked + label{ border-color: var(--ledger); background: var(--ledger-tint); }
.quiz-opt .letter{
  flex:0 0 auto; width:1.6em; height:1.6em; border-radius:50%; background: var(--paper-dim);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.quiz-result-badge{ font-family: var(--font-head); font-size:1.5rem; font-weight:600; }
.quiz-summary-list{ list-style:none; padding:0; margin: 1rem 0; }
.quiz-summary-list li{ padding:.5em 0; border-bottom:1px solid var(--line); display:flex; gap:.6em; align-items:baseline; }
.quiz-summary-list .mark{ font-weight:700; }
.quiz-summary-list .mark.right{ color: var(--verify); }
.quiz-summary-list .mark.wrong{ color: var(--escalate); }

/* ---------- Requests / scenario grid ---------- */
.request-card{ border:1.5px solid var(--line-strong); border-radius: var(--radius-lg); padding:1.1rem 1.2rem; margin-bottom:1rem; background:#fff; }
.request-card .req-num{ font-family: var(--font-head); color: var(--brass-dark); font-weight:600; font-size:.85rem; margin-bottom:.3em; display:block; }
.request-card blockquote{ margin:.4em 0 .9em; padding:.6em .9em; border-left:3px solid var(--line-strong); color: var(--ink-soft); font-style:italic; }
.reveal-btn{ background:none; border:1.5px dashed var(--line-strong); color: var(--ink-soft); border-radius: var(--radius); padding:.4em .8em; font-size:.85rem; cursor:pointer; font-weight:700; }
.reveal-panel{ display:none; margin-top:.8rem; padding-top:.8rem; border-top:1px dashed var(--line); }
.reveal-panel.show{ display:block; }

/* ---------- Glossary ---------- */
.glossary-list{ list-style:none; padding:0; margin: 1.2rem 0; }
.glossary-list li{
  border-bottom:1px solid var(--line); padding: .8em 0; display:grid;
  grid-template-columns: 200px 1fr; gap: .8rem;
}
@media (max-width: 640px){ .glossary-list li{ grid-template-columns: 1fr; } }
.glossary-term{ font-family: var(--font-head); font-weight:600; color: var(--ledger-dark); }
.glossary-list textarea{ min-height:56px; }

/* ---------- Progress footer / completion ---------- */
.lesson-nav-footer{
  display:flex; justify-content:space-between; gap:1rem; margin-top: 3rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.lesson-nav-footer a{ text-decoration:none; }
.lesson-nav-footer .nav-label{ display:block; font-size:.72rem; color: var(--ink-faint); font-weight:700; }
.lesson-nav-footer .nav-title{ font-weight:700; color: var(--ledger-dark); }
.mark-done-row{ display:flex; align-items:center; gap:.7rem; margin: 1.5rem 0; padding: .9rem 1.1rem; background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); }
.mark-done-row input[type=checkbox]{ width:19px; height:19px; accent-color: var(--verify); }
.mark-done-row label{ margin:0; font-weight:600; }

.save-toast{
  position: fixed; bottom: 1.2rem; right: 1.2rem; background: var(--ink); color:#fff;
  padding:.6em 1em; border-radius: var(--radius); font-size:.85rem; opacity:0; transform: translateY(6px);
  transition: opacity .25s, transform .25s; pointer-events:none; z-index: 90;
}
.save-toast.show{ opacity:1; transform:translateY(0); }

.checklist{ list-style:none; padding:0; }
.checklist li{ display:flex; gap:.6em; align-items:flex-start; margin-bottom:.55em; }
.checklist input[type=checkbox]{ margin-top:.28em; width:17px; height:17px; accent-color: var(--ledger); flex:0 0 auto; }

@media (max-width: 880px){
  .page-shell{ grid-template-columns: 1fr; padding-top: 1.4rem; }
  .lesson-rail{ position:static; max-height:none; border:1px solid var(--line); border-radius: var(--radius-lg); background:var(--card); padding: .3rem .8rem; margin-bottom: 1rem; }
  .rail-toggle{
    display:flex; width:100%; justify-content:space-between; align-items:center;
    background:none; border:none; padding: .8rem .2rem; font-weight:700; color: var(--ledger-dark);
    font-family: var(--font-head); font-size:1rem; cursor:pointer;
  }
  .lesson-rail-body{ display:none; padding-bottom:.6rem; }
  .lesson-rail-body.open{ display:block; }
  .route-crumb{ display:none; }
}

@media print{
  .route-bar, .lesson-rail, .lesson-nav-footer, .no-print, .save-toast{ display:none !important; }
  .page-shell{ display:block; }
  body{ background:#fff; }
}