/* How to Talk to Anyone in English: shared styles for /talk/ pages.
   Colours, fonts, borders and shadows all come from /att.css. */

/* Anything with the hidden attribute stays hidden, even with a display class. */
[hidden]{display:none !important;}

/* ---------- Lesson tracker (sticky) ---------- */
.tracker{position:sticky; top:0; z-index:20; background:var(--white); border-bottom:var(--border-card) solid var(--ink);}
.tracker .wrap{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px;}
.tr-lbl{font:800 12px var(--font-sans); letter-spacing:.06em; text-transform:uppercase;}
.tr-steps{display:flex; gap:6px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
.tr-steps li{font:800 13px var(--font-sans); border:var(--border-hair) solid var(--ink); border-radius:var(--radius-pill); padding:3px 11px; background:var(--white);}
.tr-steps li a{color:var(--ink); text-decoration:none;}
.tr-steps li.on{background:var(--green);}
.tr-steps li.on::before{content:"✓ ";}
.tr-count{margin-left:auto; font-family:var(--font-display); font-size:18px; font-variant-numeric:tabular-nums;}
.tr-bar{height:6px; background:var(--white); border-top:var(--border-hair) solid var(--ink);}
.tr-bar span{display:block; height:100%; width:0; background:var(--orange); transition:width .25s ease;}

/* ---------- Lesson layout ---------- */
.lesson-hero h1{font-size:clamp(2.3rem,5.2vw,3.6rem); margin:16px 0 12px;}
.lesson-hero .hero-sub{font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:21px; max-width:46ch; margin:0 0 16px;}
.meta-chips{display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:0;}
.meta-chips li{font-weight:800; font-size:14px; border:var(--border-control) solid var(--ink); border-radius:var(--radius-pill); padding:4px 14px; background:var(--white);}
.lesson-body section{padding:52px 0; border-bottom:var(--border-hair) solid var(--line);}
.lesson-body section:last-of-type{border-bottom:0;}
.lesson-body h2{font-size:clamp(1.7rem,3.6vw,2.3rem); margin:14px 0 12px;}
.lesson-body p{font-size:17px; line-height:1.65; margin:0 0 14px;}
.lesson-body .lede{font-size:18px; max-width:60ch;}
.act-card{background:var(--white); border:var(--border-control) solid var(--ink); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-card-green);}
.act-card.alt{box-shadow:var(--shadow-card-yellow);}
.act-card h3{font-size:1.3rem; margin:0 0 6px;}
.act-card .why{font-family:var(--font-serif); font-style:italic; color:var(--ink-soft); margin:0 0 16px; font-size:16px;}
.act-done{display:none; margin-top:14px; font-weight:800; color:var(--green-text);}
.act-card.done .act-done{display:block;}
.act-card.done{box-shadow:var(--shadow-panel);}

/* Builder */
.builder{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
.builder > *{min-width:0;}
.builder .wide{grid-column:1 / -1;}
.fld label{display:block; font-weight:700; font-size:14px; margin-bottom:5px;}
.fld input,.fld select,.fld textarea{width:100%; font:500 16px var(--font-sans); padding:10px 12px; border:var(--border-control) solid var(--ink); border-radius:var(--radius-sm); background:var(--white); color:var(--ink);}
.fld textarea{min-height:84px; resize:vertical; border-radius:var(--radius-card-sm);}
.chip-btn{font:800 14px var(--font-sans); border:var(--border-control) solid var(--ink); border-radius:var(--radius-pill); padding:6px 14px; background:var(--white); color:var(--ink); cursor:pointer;}
.chip-btn:hover{background:var(--yellow);}
.chip-btn[aria-pressed="true"]{background:var(--ink); color:var(--white);}
.say-box{background:var(--yellow); border:var(--border-hair) solid var(--ink); border-radius:var(--radius-feedback); padding:16px 18px;}
.say-box .k{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
.say-box .line{font-family:var(--font-serif); font-weight:600; font-size:20px; line-height:1.4; margin:6px 0 0;}
.say-box .alts{margin:10px 0 0; padding:0; list-style:none; font-size:14px;}
.say-box .alts li{padding:3px 0;}
.row-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:16px;}
.btn.sm{font-size:15px; padding:10px 18px;}
.msg{font-weight:700; font-size:14px; color:var(--green-text);}

/* Sorter */
.sorter{list-style:none; padding:0; margin:0 0 14px;}
.sorter li{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 0; border-top:var(--border-hair) solid var(--line);}
.sorter li:first-child{border-top:0;}
.sorter .ph{font-family:var(--font-serif); font-weight:600; font-size:18px; min-width:0; flex:1 1 220px;}
.tag{font-family:var(--font-sans); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--orange-text); margin-left:6px;}
.lv{display:flex; gap:6px; flex-wrap:wrap;}
.lv button,.pick{font:700 14px var(--font-sans); border:var(--border-hair) solid var(--ink); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); padding:6px 11px; cursor:pointer;}
.lv button:hover,.pick:hover{background:var(--yellow);}
.right{background:var(--green) !important; color:var(--ink) !important;}
.wrong{background:var(--ink) !important; color:var(--white) !important;}
.lv button:disabled,.opt:disabled,.pick:disabled{cursor:default;}
.sorter .note{flex-basis:100%; font-size:14px; color:var(--ink-soft); margin:2px 0 0;}

/* Choose */
.q-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.q-text{font-weight:800; font-size:18px; line-height:1.4; margin:8px 0 14px;}
.opts{display:grid; gap:8px;}
.opt{text-align:left; font:700 16px var(--font-sans); border:var(--border-control) solid var(--ink); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); padding:11px 16px; cursor:pointer;}
.opt:hover{background:var(--yellow);}
.opts + .feedback,.feedback + .row-actions{margin-top:12px;}

/* Match */
.match{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;}
.match > div{display:grid; gap:8px; align-content:start; min-width:0;}
.match .mh{font:800 12px var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.match .pick{text-align:left; padding:10px 12px; font-size:15px;}
.match .pick.sel{background:var(--ink); color:var(--white);}

/* Order */
.order{list-style:none; padding:0; margin:0; display:grid; gap:8px; counter-reset:o;}
.order li{display:flex; align-items:center; gap:10px; border:var(--border-control) solid var(--ink); border-radius:var(--radius-sm); padding:8px 10px; background:var(--white); counter-increment:o;}
.order li::before{content:counter(o); font-family:var(--font-display); font-size:20px; min-width:22px; text-align:center;}
.order li span{flex:1; min-width:0; font-weight:600;}
.order li button{font:800 14px var(--font-sans); width:34px; height:34px; border:var(--border-hair) solid var(--ink); border-radius:var(--radius-sm); background:var(--white); cursor:pointer;}
.order li button:hover{background:var(--yellow);}

/* Recall cards */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.pcard{border:var(--border-control) solid var(--ink); border-radius:var(--radius-card-sm); padding:14px; background:var(--white); box-shadow:var(--shadow-stamp); min-width:0;}
.pcard b{display:block; font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:24px;}
.pcard span{font-size:14px; color:var(--ink-soft);}

/* Branching dialogue */
.chat{display:grid; gap:10px; margin-bottom:14px;}
.bubble{max-width:85%; padding:10px 14px; border:var(--border-hair) solid var(--ink); border-radius:12px; font-size:16px; line-height:1.45;}
.bubble.them{background:var(--white); justify-self:start; border-bottom-left-radius:2px;}
.bubble.me{background:var(--green); justify-self:end; border-bottom-right-radius:2px;}
.bubble .who{display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:2px;}

/* Timer */
.timer{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.tnum{font-family:var(--font-display); font-size:56px; line-height:1; min-width:90px; font-variant-numeric:tabular-nums;}
.tprompt{font-family:var(--font-serif); font-weight:600; font-size:20px; flex:1 1 260px; min-width:0;}

/* Rating */
.rate{list-style:none; padding:0; margin:0;}
.rate li{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; border-top:var(--border-hair) solid var(--line);}
.rate li:first-child{border-top:0;}
.rate li > span{font-weight:600; flex:1 1 240px; min-width:0;}
.rate .lv button[aria-pressed="true"]{background:var(--ink); color:var(--white);}

/* Habit grid */
.habit{overflow-x:auto;}
.habit table{border-collapse:collapse; min-width:520px; width:100%;}
.habit th,.habit td{border:var(--border-hair) solid var(--ink); padding:6px 8px; text-align:center; font-size:14px;}
.habit th{background:var(--ink); color:var(--white);}
.habit td:first-child{text-align:left; font-weight:600;}
.habit input{width:20px; height:20px; accent-color:var(--green-dark); cursor:pointer;}

/* Before and after */
.ba{display:grid; gap:12px;}
.ba-row{display:grid; grid-template-columns:150px 1fr 54px; gap:12px; align-items:center;}
.ba-row b{font-weight:800;}
.ba-bars{display:grid; gap:4px;}
.ba-bars div{height:14px; border:var(--border-hair) solid var(--ink); background:var(--white);}
.ba-bars span{display:block; height:100%;}
.ba-bars .b span{background:var(--yellow);}
.ba-bars .a span{background:var(--green);}
.ba-row .v{font-family:var(--font-display); font-size:18px; text-align:right; font-variant-numeric:tabular-nums;}
.key{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; font-weight:700; margin-top:6px;}
.key i{display:inline-block; width:14px; height:14px; border:var(--border-hair) solid var(--ink); vertical-align:-2px; margin-right:6px;}

/* Certificate */
.cert{border:6px double var(--ink); padding:30px 26px; text-align:center; background:var(--white); box-shadow:var(--shadow-feature); margin-top:16px;}
.cert .k{font:800 12px var(--font-sans); letter-spacing:.08em; text-transform:uppercase;}
.cert .nm{font-family:var(--font-display); text-transform:uppercase; font-size:clamp(2rem,6vw,3rem); margin:10px 0;}
.cert p{margin:6px auto; max-width:46ch;}

/* Research, completion, phrase boxes */
.research{border:var(--border-card) solid var(--ink); border-left:var(--border-accent) solid var(--green); padding:20px 22px; box-shadow:var(--shadow-panel); background:var(--white);}
.research .k{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--green-text);}
.research p{margin:6px 0 0 !important; font-size:16px !important;}
.phrasebox{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.phrasebox > div{border:var(--border-control) solid var(--ink); border-radius:var(--radius-card-sm); padding:16px; background:var(--white); box-shadow:var(--shadow-card-sm); min-width:0;}
.phrasebox h3{font-size:1.15rem; margin:0 0 6px;}
.phrasebox ul{list-style:none; padding:0; margin:0;}
.phrasebox li{font-family:var(--font-serif); font-weight:600; font-size:16px; padding:6px 0; border-top:1px solid var(--line);}
.phrasebox li:first-child{border-top:0;}
.complete{border:var(--border-card) solid var(--ink); border-radius:var(--radius-md); padding:24px; background:var(--white); box-shadow:var(--shadow-card-orange); display:grid; gap:12px; justify-items:start;}
.complete.on{background:var(--green); box-shadow:var(--shadow-panel);}
.complete p{margin:0 !important;}
.privacy-note{font-size:13px !important; color:var(--ink-soft);}
.noscript{border:var(--border-hair) solid var(--ink); padding:12px 14px; background:var(--yellow); font-weight:600;}

/* Landing extras */
.talk-book{display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:center;}
.talk-book > *{min-width:0;}
.talk-book .book-cover{max-width:100%; height:auto;}
.done-pill{display:inline-block; font:800 11px var(--font-sans); letter-spacing:.05em; text-transform:uppercase; background:var(--green); border:var(--border-hair) solid var(--ink); padding:1px 7px; margin-left:6px; vertical-align:2px;}
.meter{display:grid; grid-template-columns:150px 1fr 44px; gap:12px; align-items:center; padding:12px 0; border-top:var(--border-hair) solid var(--line);}
.meter:first-of-type{border-top:0;}
.meter b{font-weight:800;}
.meter .track{height:18px; border:var(--border-hair) solid var(--ink); background:var(--white);}
.meter .track span{display:block; height:100%;}
.meter .v{font-family:var(--font-display); font-size:20px; text-align:right; font-variant-numeric:tabular-nums;}
.kit-list{list-style:none; padding:0; margin:0;}
.kit-list li{padding:10px 0; border-top:var(--border-hair) solid var(--line);}
.kit-list li:first-child{border-top:0;}
.kit-list .k{display:block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--orange-text);}
.kit-list .v{font-family:var(--font-serif); font-weight:600; font-size:18px;}
.kit-list .v.empty{font-family:var(--font-sans); font-weight:500; font-size:15px; color:var(--ink-soft); font-style:italic;}
.ws-item strong{display:block; font-size:17px;}
.ws-links{font-size:14px; font-weight:700;}
.rooms{display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; padding:0; margin:0;}
.rooms a{display:inline-block; font-weight:800; font-size:15px; border:var(--border-control) solid var(--ink); border-radius:var(--radius-pill); padding:6px 16px; background:var(--white); color:var(--ink); text-decoration:none;}
.rooms a:hover{background:var(--yellow);}

@media (max-width:900px){
  .cards3,.phrasebox{grid-template-columns:1fr;}
  .talk-book{grid-template-columns:1fr; gap:36px;}
  .talk-book .book-cover{max-width:220px;}
}
@media (max-width:640px){
  .builder,.match{grid-template-columns:1fr;}
  .meter{grid-template-columns:110px 1fr 40px;}
  .ba-row{grid-template-columns:96px 1fr 44px;}
  .tr-count{margin-left:0;}
  .bubble{max-width:100%;}
}
@media print{
  .site-header,.site-footer,.tracker,.no-print,.chapter-nav{display:none !important;}
  .band{padding:20px 0 !important; border:0 !important;}
  body{background:var(--white);}
}
@media (prefers-reduced-motion:reduce){ .tr-bar span{transition:none;} }