/* 2SM members area — port of app/src/pages/portal/ and app/src/components/ModuleList.astro.
   Black bar, warm grey surface, yellow for the one thing that matters on each screen. */

@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSans-400-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSans-400-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSans-700-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSans-700-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSerif-700-latin.sub.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSerif-700-latin-ext.sub.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

body.twosm-material{
  --paper:#fff; --ink:#000; --ink-body:#141414; --ink-soft:#4a4a4a; --ink-faint:#6b6b6b;
  --rule:#e3e3e0; --wash:#f7f7f5; --band:#000; --cta:#ffd61e; --cta-ink:#000; --cta-shade:#d0a800;
  --tick:#12783f;
  --font:'Noto Sans',system-ui,sans-serif; --font-display:'Noto Serif',Georgia,serif;
  background:var(--wash); color:var(--ink-body);
  font:400 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.55 var(--font);
  letter-spacing:0; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.twosm-material .site-content{padding-top:0}
body.twosm-material .inside-article{padding:0}
body.twosm-material .entry-header{display:none}
body.twosm-material h1,
body.twosm-material h2,
body.twosm-material h3{font-family:var(--font-display); color:var(--ink); font-weight:700}
/* Tracking tightens as the type grows and opens up on the micro caps, the same
   size-specific treatment the sales page uses. */
body.twosm-material h1{
  font-size:clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem); line-height:1.08;
  letter-spacing:-0.02em; margin:0 0 10px;
}
body.twosm-material h2{
  font-size:clamp(1.375rem, 1.15rem + 1vw, 1.625rem); line-height:1.16;
  letter-spacing:-0.016em;
}
body.twosm-material h3{letter-spacing:-0.012em}
body.twosm-material a{color:var(--ink); text-underline-offset:3px}
body.twosm-material :focus-visible{outline:3px solid var(--ink); outline-offset:3px}

.twosm-material .twosm-shell{max-width:1180px; margin:0 auto; padding:0 20px 56px}
/* The band runs full width, but what is written on it lines up with the reading column
   below — otherwise the label floats off on its own left edge and nothing aligns. */
.twosm-material .twosm-band{
  margin:0 -20px 0; padding:16px 20px; border-bottom:3px solid var(--cta);
  background:var(--band); color:#fff;
}
.twosm-material .twosm-band a{
  display:block; max-width:760px; margin:0 auto; color:#fff;
  font-size:15px; font-weight:700; letter-spacing:.02em; text-underline-offset:4px;
}

/* ---------- Root view ---------- */
.twosm-material .twosm-head,
.twosm-material .twosm-list{max-width:760px; margin:0 auto; width:100%}
.twosm-material .twosm-head{padding:40px 0 20px}
.twosm-material .twosm-eyebrow{
  margin:0 0 10px; color:var(--ink-faint); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.twosm-material .twosm-lede{color:var(--ink-soft); font-size:17px; margin:0}

/* The one action on this screen, in the one colour that means "do this". */
.twosm-material .twosm-resume{
  display:inline-flex; align-items:center; gap:16px; margin-top:24px;
  padding:16px 22px; border-radius:10px; text-decoration:none;
  background:var(--cta); color:var(--cta-ink); box-shadow:0 4px 0 0 var(--cta-shade);
  transition:transform .14s ease-out, box-shadow .14s ease-out;
}
.twosm-material .twosm-resume:hover{transform:translateY(-2px); box-shadow:0 6px 0 0 var(--cta-shade)}
.twosm-material .twosm-resume:active{transform:translateY(2px); box-shadow:0 2px 0 0 var(--cta-shade)}
.twosm-material .twosm-resume-kicker{
  flex:none; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(0,0,0,.55);
}
.twosm-material .twosm-resume-title{min-width:0; font-weight:700; font-size:17px; line-height:1.3}
.twosm-material .twosm-resume-arrow{flex:none; font-size:19px; line-height:1}
.twosm-material .twosm-list{padding:0 0 56px}

/* ---------- Module accordions ---------- */
.twosm-material .mod{border:2px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--paper)}
.twosm-material .mod + .mod{margin-top:14px}
.twosm-material .mod[open]{border-color:var(--band)}
.twosm-material .mod > summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; cursor:pointer; list-style:none; background:var(--band); color:#fff;
}
.twosm-material .mod > summary::-webkit-details-marker{display:none}
.twosm-material .mod > summary:hover .mod-caret{border-color:var(--cta); color:var(--cta)}
.twosm-material .mod-name{font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.3; letter-spacing:-0.012em}
.twosm-material .mod-meta{
  display:flex; align-items:center; gap:12px; flex:none;
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.twosm-material .mod-count{color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums}
.twosm-material .mod.is-done .mod-count{color:var(--cta)}
.twosm-material .mod-lock{display:inline-flex; align-items:center; gap:7px; color:var(--ink-faint)}
.twosm-material .mod-lock svg{width:13px; height:15px}

/* Drawn rather than left to the UA triangle, which cannot be recoloured on black in Safari. */
.twosm-material .mod-caret{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border:2px solid rgba(255,255,255,.28); border-radius:50%;
  transition:transform .18s ease-out, border-color .14s, color .14s;
}
.twosm-material .mod-caret::after{
  content:""; width:8px; height:8px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
}
.twosm-material .mod[open] > summary .mod-caret{transform:rotate(180deg)}

/* Locked reads as unavailable without hiding what it is. */
.twosm-material .mod.is-locked > summary{background:var(--wash); color:var(--ink)}
.twosm-material .mod.is-locked .mod-caret{border-color:var(--rule); color:var(--ink-soft)}
.twosm-material .mod.is-locked > summary:hover .mod-caret{border-color:var(--ink); color:var(--ink)}

.twosm-material .mod-bar{height:4px; background:var(--rule)}
.twosm-material .mod-bar span{display:block; height:100%; background:var(--cta); transition:width .3s ease-out}

.twosm-material .mod-list{list-style:none; margin:0; padding:0}
.twosm-material .mod-list li{display:flex; flex-direction:column}
.twosm-material .mod-list li + li{border-top:1px solid var(--rule)}
.twosm-material .mod-list a{
  display:flex; gap:15px; align-items:center; min-height:0;
  padding:14px 20px 14px 16px; text-decoration:none; color:var(--ink);
  border-left:4px solid transparent;
}
.twosm-material .mod-list a:hover{background:var(--wash); border-left-color:var(--rule)}

/* One 28px disc per row: the position number until opened, a filled tick after. Same box
   either way, so nothing shifts sideways when one fills in. */
.twosm-material .mod-tick{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--rule); background:var(--paper);
  color:var(--ink-faint); font:700 13px/1 var(--font);
}
.twosm-material .mod-list a.is-read .mod-tick{
  border-color:var(--band);
  background:var(--band) center/12px 10px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 4 7.5 10 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.twosm-material .mod-list a.is-read .mod-num{display:none}
.twosm-material .mod-list a.is-here{background:var(--wash); border-left-color:var(--cta)}
.twosm-material .mod-list a.is-here .mod-tick{border-color:var(--ink); color:var(--ink)}

.twosm-material .mod-text{min-width:0}
.twosm-material .mod-title{display:block; font-weight:700; font-size:17px; line-height:1.4}
.twosm-material .mod-sum{display:block; margin-top:4px; color:var(--ink-soft); font-size:15px; line-height:1.5}

.twosm-material .mod-note{margin:0; color:var(--ink-soft); font-size:17px; line-height:1.5}
.twosm-material .mod-note.pad{padding:20px}
.twosm-material .mod-buy{padding:20px}
.twosm-material .mod-buy .mod-note{margin-bottom:18px}
.twosm-material .mod-unlock{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:5px; text-decoration:none;
  background:var(--cta); color:var(--cta-ink); box-shadow:0 4px 0 0 var(--cta-shade);
  font-size:18px; font-weight:700; line-height:1.3;
  transition:transform .14s ease-out, box-shadow .14s ease-out;
}
.twosm-material .mod-unlock:hover{transform:translateY(-2px); box-shadow:0 6px 0 0 var(--cta-shade)}
.twosm-material .mod-unlock:active{transform:translateY(2px); box-shadow:0 2px 0 0 var(--cta-shade)}

/* ---------- Lesson view ---------- */
.twosm-material .twosm-grid{display:grid; gap:30px; padding-top:28px}
.twosm-material .twosm-read{padding:28px; background:var(--paper); border-radius:10px}
.twosm-material .twosm-read h1{margin-bottom:18px}
.twosm-material .twosm-read img{display:block; max-width:100%; height:auto; margin:28px auto}
.twosm-material .twosm-read figure{margin:28px 0}
.twosm-material .twosm-read .copy-script{
  min-height:44px; padding:8px 12px; border:1px solid var(--rule); border-radius:6px;
  background:#fff; font:700 15px/1 var(--font); cursor:pointer;
}
.twosm-material .twosm-pager{
  display:flex; justify-content:space-between; gap:16px;
  margin-top:32px; padding-top:24px; border-top:1px solid var(--rule);
}
.twosm-material .twosm-next{
  padding:13px 20px; border-radius:5px; text-decoration:none;
  background:var(--cta); color:var(--cta-ink); box-shadow:0 4px 0 0 var(--cta-shade); font-weight:700;
}
.twosm-material .twosm-menu{display:none}

/* In the rail the same list runs one notch smaller — it is beside the reading column
   rather than being the page. */
.twosm-material .rail .mod + .mod{margin-top:10px}
.twosm-material .rail .mod > summary{padding:14px 15px}
.twosm-material .rail .mod-name{font-size:16px}
.twosm-material .rail .mod-meta{gap:9px; font-size:11px}
.twosm-material .rail .mod-caret{width:24px; height:24px}
.twosm-material .rail .mod-list a{min-height:54px; padding:11px 14px 11px 12px; gap:12px}
.twosm-material .rail .mod-tick{width:24px; height:24px; font-size:12px}
.twosm-material .rail .mod-title{font-size:15px; line-height:1.35}
.twosm-material .rail .mod-sum{display:none}
.twosm-material .rail .mod-unlock{font-size:16px; padding:13px 20px}
.twosm-material .rail .mod-note{font-size:15px}

@media(min-width:721px){
  .twosm-material .twosm-shell{padding:0 24px 56px}
  .twosm-material .twosm-band{margin:0 -24px}
  .twosm-material .twosm-head{padding:56px 0 26px}
  .twosm-material .mod > summary{padding:20px 24px}
  .twosm-material .mod-name{font-size:21px}
  .twosm-material .mod-list a{padding:16px 24px 16px 20px; min-height:0}
  .twosm-material .mod-title{font-size:18px}
  .twosm-material .rail .mod-name{font-size:16px}
  .twosm-material .rail .mod-list a{min-height:54px; padding:11px 14px 11px 12px}
  .twosm-material .rail .mod-title{font-size:15px}
  .twosm-material .twosm-read{padding:40px}
}

@media(min-width:981px){
  .twosm-material .twosm-grid{grid-template-columns:320px minmax(0,1fr)}
  .twosm-material .twosm-rail{position:sticky; top:20px; align-self:start; max-height:calc(100vh - 40px); overflow:auto}
}

@media(max-width:980px){
  .twosm-material .twosm-menu{
    display:inline-block; margin:20px 0 0; padding:12px 18px;
    border:2px solid var(--rule); border-radius:8px; background:#fff;
    font:700 16px/1 var(--font); cursor:pointer;
  }
  .twosm-material .twosm-rail{display:none}
  .twosm-material.twosm-nav-open .twosm-rail{display:block; margin-bottom:18px}
}

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