/* Annie's Training Center - generated by build.py, do not hand-edit.
   Uses the site's existing :root tokens from style.css. Nothing here
   restyles the site; it only styles training components. */

.tc-hero{background:var(--navy);color:#fff;padding:64px 0 56px}
.tc-hero h1{font-family:var(--font-headline);font-size:clamp(2rem,4vw,3rem);margin:0 0 14px;line-height:1.15}
.tc-hero p{max-width:64ch;font-size:1.08rem;line-height:1.65;color:#D7E2F0;margin:0 0 12px}
.tc-hero .tc-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--green);
  font-weight:700;margin:0 0 12px}

.tc-wrap{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.tc-section{padding:56px 0}
.tc-section h2{font-family:var(--font-headline);color:var(--navy);font-size:1.6rem;margin:0 0 20px}

/* lesson grid */
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.tc-card{display:block;background:#fff;border:1px solid var(--medium-gray);border-radius:var(--radius-card);
  padding:26px;text-decoration:none;box-shadow:var(--shadow-card);transition:box-shadow .2s,transform .2s}
.tc-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.tc-card .tc-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:.95rem;margin-bottom:14px}
.tc-card h3{font-family:var(--font-headline);color:var(--navy);font-size:1.16rem;margin:0 0 8px;line-height:1.3}
.tc-card p{color:var(--dark-gray);font-size:.96rem;line-height:1.6;margin:0 0 14px}
.tc-card .tc-meta{font-size:.82rem;color:var(--dark-gray);text-transform:uppercase;letter-spacing:.08em}

/* lesson page */
.tc-lesson-head{background:var(--navy);color:#fff;padding:52px 0 44px}
.tc-lesson-head .tc-eyebrow{color:var(--green);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;margin:0 0 10px}
.tc-lesson-head h1{font-family:var(--font-headline);font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 12px;line-height:1.2}
.tc-lesson-head p{color:#D7E2F0;max-width:62ch;line-height:1.65;margin:0}

.tc-body{max-width:760px}
.tc-body h2{font-family:var(--font-headline);color:var(--navy);font-size:1.32rem;margin:38px 0 14px}
.tc-body p{line-height:1.75;color:var(--nearly-black);margin:0 0 16px;font-size:1.03rem}
.tc-body ul{margin:0 0 20px;padding-left:0;list-style:none}
.tc-body ul li{position:relative;padding-left:26px;margin-bottom:11px;line-height:1.7;color:var(--nearly-black)}
.tc-body ul li:before{content:"";position:absolute;left:6px;top:.65em;width:7px;height:7px;border-radius:50%;
  background:var(--green)}

.tc-outcomes{background:var(--soft-white);border-left:4px solid var(--green);border-radius:0 var(--radius-card) var(--radius-card) 0;
  padding:24px 26px;margin:0 0 12px}
.tc-outcomes h2{margin:0 0 12px;font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.tc-outcomes ul{margin:0}

/* flashcards */
.tc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:8px 0 8px}
.flip{perspective:1000px;height:172px;cursor:pointer;background:none;border:0;padding:0;font:inherit;text-align:left;width:100%}
.flip-inner{display:block;position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius-card);padding:20px;display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.5;overflow:auto}
.flip-front{background:var(--navy);color:#fff;font-weight:600;font-size:1rem}
.flip-back{background:#fff;color:var(--nearly-black);border:2px solid var(--green);transform:rotateY(180deg);font-size:.94rem}
.tc-hint{color:var(--dark-gray);font-size:.88rem;margin:0 0 16px}

/* self-check quiz */
.q{background:#fff;border:1px solid var(--medium-gray);border-radius:var(--radius-card);padding:24px;margin:0 0 18px;
  box-shadow:var(--shadow-card)}
.q > p.q-text{font-weight:600;color:var(--navy);margin:0 0 14px;font-size:1.04rem;line-height:1.5}
.q button.opt{display:block;width:100%;text-align:left;background:var(--soft-white);border:1.5px solid var(--medium-gray);
  border-radius:var(--radius-btn);padding:13px 16px;margin:0 0 9px;cursor:pointer;font:inherit;font-size:.98rem;
  line-height:1.5;color:var(--nearly-black);transition:border-color .15s,background .15s}
.q button.opt:hover{border-color:var(--blue)}
.q button.opt[data-correct="yes"].picked{border-color:var(--green);background:#EAF9EB}
.q button.opt[data-correct="no"].picked{border-color:#D64545;background:#FDEDED}
.q button.opt .mark{float:right;font-weight:700}
.q .why{display:block;margin-top:14px;padding:15px 17px;background:var(--light-gray);border-radius:var(--radius-btn);
  font-size:.95rem;line-height:1.65;color:var(--nearly-black)}
.q .why b{color:var(--navy)}

/* workbook */
.tc-workbook{background:var(--soft-white);border:1px solid var(--medium-gray);border-radius:var(--radius-card);padding:26px}
.tc-workbook h2{margin-top:0}
.tc-print{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;padding:12px 22px;
  border-radius:var(--radius-btn);font-weight:600;margin-top:6px}
.tc-print:hover{background:#0d1a2c}

/* footer nav within the centre */
.tc-pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;
  border-top:1px solid var(--medium-gray);padding-top:26px}
.tc-pager a{color:var(--blue);text-decoration:none;font-weight:600}
.tc-pager a:hover{color:var(--blue-hover);text-decoration:underline}

/* the standing notice - appears on every training page */
.tc-notice{background:#FFF8E6;border:1px solid #F0D68A;border-radius:var(--radius-card);padding:20px 24px;
  margin:32px 0;font-size:.95rem;line-height:1.7;color:#4A3B14}
.tc-notice b{color:#3A2E0F}

@media print{
  .tc-hero,.tc-lesson-head{background:#fff;color:#000}
  .tc-hero h1,.tc-lesson-head h1{color:#000}
  .flip{height:auto}
  .flip-face{position:static;transform:none}
  .flip-front{background:#fff;color:#000;border:1px solid #999}
}