/* Shared by every Letworks page. Loaded after each page's own <style>, so a
   rule here wins over a page rule of the same specificity. Page palettes stay
   in each page; this file only holds the behaviour and components they share. */

/* ---- skip link ---- */
.skip{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  padding:.7rem 1rem;border-radius:8px;
  background:#fff;color:#1E2328;font-family:var(--ui);font-size:.85rem;font-weight:600;text-decoration:none;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.35);
}
.skip:focus{top:1rem}

/* ---- reading progress: transform instead of width, so scrolling never re-runs layout ---- */
.progress-fill{width:100%;transform:scaleX(0);transform-origin:left;transition:none}

/* ---- type ---- */
h1,h2{text-wrap:balance}
p,dd,li{text-wrap:pretty}

/* ---- press and hover: lifts only for a real mouse, so a tap never leaves one stuck ---- */
.btn:active{transform:scale(.97)}
.app-card:active{transform:scale(.99)}
@media (hover:none), (pointer:coarse){
  .btn:hover,.app-card:hover{transform:none}
}

/* ---- roadmap toggles: full-size touch targets; body, dot and chevron move as one ---- */
.ms-toggle{min-height:44px}
.ms-body,.milestone .dot,.ms-toggle .chev{transition-duration:.22s;transition-timing-function:cubic-bezier(.23,1,.32,1)}

/* ---- motion: reduced means less, not none. Movement goes; colour and fades stay ---- */
@keyframes lw-fade{from{opacity:0}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-property:color,background-color,border-color,opacity,box-shadow!important}
  .btn:active,.app-card:active{transform:none}
}

/* ---- arrival cue: a highlighter pass over the heading a link just scrolled to ---- */
.chapter:target > h2{position:relative;isolation:isolate;width:fit-content}
.chapter:target > h2::before{
  content:"";position:absolute;inset:0 -.25em;z-index:-1;border-radius:4px;
  background:var(--s-tint);transform-origin:left;opacity:0;
  animation:lw-arrive 1.6s cubic-bezier(.16,1,.3,1) .35s both;
}
@keyframes lw-arrive{0%{transform:scaleX(0);opacity:1} 35%,70%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0}}
@keyframes lw-arrive-still{0%,60%{opacity:1} 100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .chapter:target > h2::before{animation-name:lw-arrive-still}
}

/* ---- status vocabulary, one set of words and shapes across the family ----
   Works (dot) · Partial (half dot) · Up next (filled) · Planned (ring) · Not supported (dash).
   Each page sets --s-ink, --s-tint and --s-strong from its own palette. */
.st{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--ui);font-size:.75rem;font-weight:600;line-height:1;letter-spacing:.01em;
  padding:.32rem .55rem;border-radius:5px;white-space:nowrap;border:1px solid transparent;
  vertical-align:middle;
}
.st::before{content:"";width:.5rem;height:.5rem;border-radius:50%;flex:0 0 auto;box-sizing:border-box}
.st.works{background:var(--s-tint);color:var(--s-ink)}
.st.works::before{background:var(--s-ink)}
.st.partial{border-color:var(--s-ink);color:var(--s-ink)}
.st.partial::before{background:linear-gradient(90deg,var(--s-ink) 50%,transparent 50%);border:1px solid var(--s-ink)}
.st.next{background:var(--s-strong);color:#fff}
.st.next::before{background:#fff}
.st.planned{background:#EEF0F3;color:#4F5A66}
.st.planned::before{border:1.5px solid #4F5A66}
.st.never{border:1px dashed #6A7480;color:#4F5A66}
.st.never::before{width:.55rem;height:1.5px;border-radius:0;background:#4F5A66}
.st-legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;justify-content:center;margin:1.2rem auto 0;max-width:44rem}

/* ---- status tables stack on phones: name and tag on one line, the note underneath ---- */
@media (max-width:560px){
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.stack,table.stack tbody{display:block}
  table.stack tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem .75rem;align-items:center;
    padding:1rem 0;border-bottom:1px solid var(--hairline);
  }
  table.stack td{padding:0;border:0;white-space:normal}
  table.stack td:last-child{grid-column:1 / -1}
  .st-legend{justify-content:flex-start}
}

/* the skip link focuses the hero; no ring on a section that was focused by script */
[tabindex="-1"]:focus{outline:none}