/* HACK-LAB.SPACE — local stylesheet, replaces the Tailwind CDN.
   Cream background per BDA guidance (white can appear dazzling).
   All interactive targets >= 44px. */

:root{
  --paper:#F6F1E6; --card:#FFFDF7; --line:#DDD4C0; --line-2:#CFC4AC;
  --ink:#1F2933; --ink-2:#33414C; --ink-3:#46545F; --ink-4:#5E6B75;
  --green:#047857; --amber:#B45309; --cyan:#0E7490; --violet:#6D28D9; --orange:#C2410C;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;-webkit-text-size-adjust:100%}
html[data-size="l"]{font-size:20.5px}
html[data-size="xl"]{font-size:23px}

body{
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  padding:1.5rem; line-height:1.6;
}
@media(min-width:768px){body{padding:3rem}}
.wrap{max-width:60rem;margin:0 auto}

/* ---- type ---- */
h1,h2,h3{line-height:1.3;color:var(--ink)}
h1{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
h2{font-size:1.05rem;font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p,li{line-height:1.7;max-width:68ch;text-align:left;color:var(--ink-2)}
.lede{color:var(--ink-3)}
.muted{color:var(--ink-4);font-size:.85rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.small{font-size:.85rem}
strong{font-weight:700;color:var(--ink)}

/* ---- layout ---- */
.stack>*+*{margin-top:2rem}
.stack-s>*+*{margin-top:.9rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.grid{display:grid;gap:1.25rem}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ---- header ---- */
.masthead{border-bottom:1px solid var(--line);padding-bottom:1.5rem}
.wordmark{font-size:1.8rem;font-weight:800;color:var(--green);letter-spacing:-.02em}
.wordmark span{color:var(--ink-4)}
.station{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid var(--line-2);
  color:var(--ink-3);background:var(--card)}

/* ---- controls ---- */
.ctl{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  gap:.4rem;padding:0 .9rem;border-radius:10px;border:1px solid var(--line-2);
  background:var(--card);color:var(--ink-2);font-size:.85rem;font-weight:700;
  cursor:pointer;font-family:inherit}
.ctl:hover{border-color:var(--ink-4)}
.ctl[aria-pressed="true"]{border-color:var(--green);color:var(--green);background:rgba(4,120,87,.08)}
.ctl-go{background:rgba(4,120,87,.1);border-color:rgba(4,120,87,.45);color:var(--green)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;position:relative}
.card-tight{padding:1.1rem}
.card--now{border-color:rgba(180,83,9,.45);border-width:2px}
.card--jacob{border-color:rgba(194,65,12,.45)}
.card--emma{border-color:rgba(109,40,217,.45)}
.card--ben{border-color:rgba(4,120,87,.45)}
a.card{display:block;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--ink-4)}

.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.04em;margin-bottom:.5rem}
.eyebrow--amber{color:var(--amber)} .eyebrow--cyan{color:var(--cyan)}
.eyebrow--violet{color:var(--violet)} .eyebrow--orange{color:var(--orange)}
.eyebrow--green{color:var(--green)}

.sec-title{font-size:.95rem;font-weight:700;color:var(--ink-2);
  border-left:3px solid var(--green);padding-left:.7rem}
.sec-title--quiet{border-left-color:var(--line-2);color:var(--ink-4)}
.sec-title--cyan{border-left-color:var(--cyan)}
.sec-title--violet{border-left-color:var(--violet)}

.tag{display:inline-block;font-size:.78rem;padding:.25rem .6rem;border-radius:7px;
  background:#EDE6D6;color:var(--ink-2)}


/* ---- clickable cards -------------------------------------------------
   Whole card is a hit area via one stretched link. Only one interactive
   element, so no nested controls and the keyboard order stays sane.   */
/* Link cards: the card IS the anchor. The read-aloud button lives outside
   it, in the shell, so there is never a control inside a link. */
.linkcard{position:relative}
.linkcard>a.card{display:block;text-decoration:none;color:inherit}
.linkcard>a.card:hover{border-color:var(--amber)}
.linkcard>a.card:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.linkcard>.speak-btn{z-index:5}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 1.4rem;border-radius:10px;
  background:var(--amber);color:#FFFDF7;font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid var(--amber)}
.cta-row{margin-top:1.5rem;clear:both}
.linkcard>a.card:hover .cta{background:#96450A}
a.card:hover .cta{background:#96450A}

/* front-page thumbnail: the hero at full width dominated the page */
.m0-row{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-start}
.m0-text{flex:1 1 18rem;min-width:0}
.m0-thumb{flex:0 1 17rem;max-width:17rem;width:100%}
.cta--violet{background:var(--violet)}
.card--link:hover .cta--violet{background:#5B21B6}

/* inert cards must not look like the tappable ones */
.card--soon{background:transparent;border-style:dashed}
.badge-soon{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.15rem .5rem;border-radius:6px;border:1px solid var(--line-2);color:var(--ink-4)}

/* ---- flow ---- */
.flow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch;list-style:none}
.flow li{flex:1 1 8rem;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .8rem;font-size:.85rem;font-weight:600;
  color:var(--ink-2);max-width:none;position:relative}
.flow li .n{display:block;font-size:.72rem;color:var(--ink-4);font-weight:700}

/* ---- images ---- */
.hero{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);display:block}
figure{margin:0}
figcaption{font-size:.85rem;color:var(--ink-4);margin-top:.5rem;max-width:68ch}

/* ---- read aloud ---- */
.speak-btn{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:10px;
  background:var(--card);border:1px solid var(--line-2);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;z-index:5}
.speak-btn:hover,.speak-btn.playing{color:var(--green);border-color:var(--green)}
.readable:not(.linkcard),.linkcard>a.card{position:relative}
.readable:not(.linkcard)>*:first-child,
.linkcard>a.card>*:first-child{padding-right:3.4rem}
.readable.tts-active{outline:2px solid var(--green);outline-offset:4px}
.tts-word{border-radius:3px}
.tts-word.on{background:#FDE68A;color:var(--ink)}

/* ---- easy read (BDA style guide values) ---- */
html[data-read="easy"] body,html[data-read="easy"] body *{font-family:Verdana,Geneva,sans-serif}
html[data-read="easy"] p,html[data-read="easy"] li{line-height:1.9;letter-spacing:.06em;word-spacing:.16em}
html[data-read="easy"] h1,html[data-read="easy"] h2,html[data-read="easy"] h3{letter-spacing:.04em}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

footer{border-top:1px solid var(--line);padding-top:1.5rem;text-align:center;
  font-size:.8rem;color:var(--ink-4)}
footer a{color:inherit}
.backlink{font-size:.85rem;color:var(--ink-4);text-decoration:none}
.backlink:hover{color:var(--green)}


/* ---- controls -------------------------------------------------------
   One primary action stays visible. Language, size and reading options
   live behind a native <details> so they stop eating the first screen. */
.bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.prefs{border:1px solid var(--line-2);border-radius:12px;background:var(--card)}
.prefs>summary{list-style:none;min-height:44px;display:flex;align-items:center;
  gap:.5rem;padding:0 1.1rem;cursor:pointer;font-weight:700;font-size:.85rem;
  color:var(--ink-2);white-space:nowrap}
.prefs>summary::-webkit-details-marker{display:none}
.prefs>summary::after{content:"\25BE";font-size:.7rem;color:var(--ink-4)}
.prefs[open]>summary::after{content:"\25B4"}
.prefs[open]{padding-bottom:.9rem}
.prefs-body{display:flex;flex-wrap:wrap;gap:1.2rem;padding:.2rem 1rem 0}
.prefs-group{display:flex;flex-direction:column;gap:.35rem}
.prefs-group>span{font-size:.75rem;font-weight:700;color:var(--ink-4);
  letter-spacing:.04em}
.prefs-group>.row{gap:.3rem}



/* language: plain letters beside the wordmark. Padding keeps the tap area
   at 44px even though the visible mark is small. */
.lang-set{display:flex;align-items:center}
.lang-set button{background:none;border:0;font-family:inherit;cursor:pointer;
  min-height:44px;padding:0 .4rem;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;color:var(--ink-4)}
.lang-set button:hover{color:var(--ink-2)}
.lang-set button[aria-pressed="true"]{color:var(--green)}
.lang-set button+button{border-left:1px solid var(--line-2)}

/* AI course tile: image beside the text */
.course-row{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:flex-start}
.course-text{flex:1 1 16rem;min-width:0}
.course-thumb{flex:0 0 8.5rem;width:8.5rem;border-radius:10px;border:1px solid var(--line);
  display:block;height:auto}


/* backlog cards keep their illustration but stay visually quiet */
.card--soon .hero{opacity:.82;border-color:var(--line-2)}