/* île Teacher — same brand family as Studio/Classroom: graphite ground, cream type, Spectral (voice) + DM Sans (UI),
   hairline rules, quiet pill controls, one terracotta accent. Flat ground: no orbs, glows, blur or shadows. */
.stage--teacher {
  background: #0F0F0E;
  --te-cream: #EAE0C4; --te-ink: rgba(230,226,220,.9); --te-mute: rgba(230,226,220,.72);
  --te-faint: rgba(230,226,220,.66); --te-rule: rgba(230,226,220,.16); --te-tc: #C4694A; --te-tc-soft: #D4896D;
}
.te-scroll { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; padding:56px 40px 96px; box-sizing:border-box;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent; }
.te-scroll::-webkit-scrollbar { width:4px; } .te-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:2px; }
.te-root, .te-status { width:100%; max-width:980px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.te-scroll button:focus-visible, .te-scroll a:focus-visible { outline:1px solid rgba(234,224,196,.7); outline-offset:3px; }

.te-masthead { padding:8px 0 28px; }
.te-wordmark { display:block; font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:.1em; color:var(--te-mute); }
.te-title { position:relative; display:inline-block; margin:14px 0 0; padding-bottom:14px; font-family:'Spectral',serif; font-style:italic;
  font-weight:300; font-size:44px; line-height:1.1; color:rgba(234,224,196,.92); }
.te-title::after { content:''; position:absolute; left:0; bottom:0; height:1px; width:64px; background:var(--te-tc); opacity:.75; }
.te-sub { margin:16px 0 0; max-width:520px; font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:17px; line-height:1.65; color:var(--te-mute); }

/* First visit: two large choices */
.te-choices { list-style:none; margin:8px 0 0; padding:0; border-top:.5px solid var(--te-rule); }
.te-choices li { border-bottom:.5px solid var(--te-rule); }
.te-choice { display:flex; flex-direction:column; gap:7px; width:100%; padding:30px 2px 28px; text-align:left; background:transparent; border:0; color:inherit; font:inherit; cursor:pointer; }
.te-choice .te-row-name { font-size:28px; transition:color .2s; }
.te-choice:hover .te-row-name { color:#fff; }
.te-choice:hover .te-row-about { color:var(--te-ink); }
.te-back { margin:6px 0 0; }

.te-section { margin:0 0 40px; }
.te-eyebrow { display:block; margin:0 0 14px; font-family:'DM Sans',sans-serif; font-size:11px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--te-mute); }
.te-note { margin:0 0 14px; font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:15px; line-height:1.6; color:var(--te-faint); }
.te-lede { margin:0 0 18px; font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:19px; line-height:1.6; color:var(--te-mute); max-width:520px; }
.te-apply-line { margin-top:8px; }

.te-list { list-style:none; margin:0 0 6px; padding:0; border-top:.5px solid var(--te-rule); }
.te-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 2px; border-bottom:.5px solid var(--te-rule); }
.te-row-text { min-width:0; display:flex; flex-direction:column; gap:5px; }
.te-row-name { font-family:'Spectral',serif; font-weight:300; font-size:22px; line-height:1.25; color:var(--te-cream); }
.te-row-meta { font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--te-faint); }
.te-row-about { font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:14.5px; line-height:1.55; color:var(--te-mute); }
.te-row-actions { flex:none; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.te-results:empty { display:none; }
.te-bar .te-field { flex:1; margin:0; }
.te-results .te-note { padding:16px 2px 0; margin:0; border:0; }
.te-list > .te-note { padding:18px 2px; margin:0; }

.te-codebox { display:flex; flex-direction:column; gap:6px; margin:0 0 40px; padding:0 0 26px; border-bottom:.5px solid var(--te-rule); }
.te-codebox .te-eyebrow { margin:0; }
.te-code { font-family:'Spectral',serif; font-weight:300; font-size:38px; letter-spacing:.14em; color:var(--te-cream); font-variant-numeric:lining-nums; }
.te-codebox .te-note { margin:0; }

.te-field { display:flex; flex-direction:column; gap:7px; margin:0 0 18px; }
.te-label { font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--te-faint); }
.te-input { width:100%; box-sizing:border-box; background:transparent; color:var(--te-cream); border:0; border-bottom:.5px solid rgba(230,226,220,.28);
  border-radius:0; padding:8px 2px 9px; font-family:'Spectral',serif; font-weight:300; font-size:19px; line-height:1.4; transition:border-color .2s; }
.te-input:focus { outline:none; border-bottom-color:var(--te-tc-soft); }
.te-bio { resize:vertical; min-height:72px; border:1px solid rgba(230,226,220,.26); border-radius:10px; padding:10px 12px; font-size:17px; }
.te-bio:focus { border-color:var(--te-tc-soft); }
.te-bar { display:flex; gap:14px; align-items:flex-end; margin:0 0 6px; }
.te-form { margin:0 0 22px; }

.te-btn { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 16px; border-radius:18px; background:transparent;
  border:.5px solid rgba(255,255,255,.14); color:var(--te-mute); font-family:'DM Sans',sans-serif; font-size:12px; letter-spacing:.03em; cursor:pointer;
  transition:background .2s,border-color .2s,color .2s; white-space:normal; text-align:center; }
.te-btn:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.24); color:var(--te-cream); }
.te-primary { border-color:rgba(196,105,74,.55); color:var(--te-cream); }
.te-primary:hover { background:rgba(196,105,74,.14); border-color:var(--te-tc); }
.te-link { height:auto; padding:0; border:0; border-radius:0; color:var(--te-tc-soft); font-family:'Spectral',serif; font-style:italic; font-size:15px; letter-spacing:0; }
.te-link:hover { background:transparent; color:var(--te-cream); }
.te-section > .te-btn { margin-top:6px; }

.te-status { text-align:center; font-family:'DM Sans',sans-serif; font-size:12.5px; color:var(--te-mute); margin:6px auto 0; min-height:1.2em; }

@media (max-width:640px) {
  .te-scroll { padding:40px 20px 80px; }
  .te-title { font-size:36px; }
  .te-row { flex-direction:column; align-items:flex-start; gap:12px; }
  .te-row-actions { justify-content:flex-start; }
  .te-code { font-size:32px; }
}

/* Sign-up: learner / teacher choice (lives in the auth card) */
.auth-role { border:0; margin:2px 0 0; padding:0; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.auth-role legend { float:left; padding:0 6px 0 0; margin:0; font-family:'DM Sans',sans-serif; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(230,226,220,.35); }
.auth-role-opt { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; color:rgba(230,226,220,.8); }
.auth-role-opt input { accent-color:#C4694A; margin:0; }

/* ── Messages ── */
.has-dot { position:relative; }
.has-dot::after { content:''; position:absolute; top:3px; right:-7px; width:7px; height:7px; border-radius:50%; background:#C4694A; }
.te-btn.has-dot::after { top:-3px; right:-3px; }
.te-thread .te-back, .te-thread > .te-link { margin:0 0 6px; padding-left:0; }
.te-msgs { list-style:none; margin:18px 0 22px; padding:0 4px 0 0; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.te-msg { max-width:82%; align-self:flex-start; }
.te-msg.mine { align-self:flex-end; text-align:right; }
.te-msg-who { display:block; font-size:12px; letter-spacing:.04em; color:rgba(230,226,220,.5); margin-bottom:3px; }
.te-msg-body { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; color:var(--te-cream); }
.te-msg.mine .te-msg-body { color:var(--te-tc-soft); }
.te-composebar { align-items:flex-end; }
.te-compose { flex:1; resize:vertical; min-height:56px; }
@media (max-width:600px) { .te-msg { max-width:94%; } .te-msgs { max-height:46vh; } }

/* ── Sub-tabs inside a space ── */
.te-subtabs { display:flex; gap:22px; margin:18px 0 22px; border-bottom:.5px solid var(--te-rule); overflow-x:auto; }
.te-subtab { position:relative; background:none; border:0; border-bottom:1px solid transparent; margin-bottom:-.5px; padding:8px 0 10px; cursor:pointer;
  font:inherit; font-size:14px; letter-spacing:.04em; color:var(--te-faint); white-space:nowrap; }
.te-subtab:hover { color:var(--te-ink); }
.te-subtab.active { color:var(--te-cream); border-bottom-color:var(--te-tc); }
.te-subtab.has-dot::after { top:6px; right:-9px; }
.te-subbody { min-height:120px; }
.te-foot { margin-top:48px; padding-top:16px; border-top:.5px solid var(--te-rule); }
.te-subview > * + * { margin-top:26px; }

/* ── Materials ── */
.te-mat-top { margin:0 0 18px; }
.te-matform { margin:0 0 28px; padding:22px 0 8px; border-top:.5px solid var(--te-rule); border-bottom:.5px solid var(--te-rule); }
.te-matform > * + * { margin-top:20px; }
.te-audience { border:0; margin:0; padding:0; }
.te-audience legend { padding:0; margin-bottom:10px; }
.te-radio { display:flex; align-items:center; gap:10px; margin:6px 0; color:var(--te-ink); cursor:pointer; }
.te-radio input { accent-color:#C4694A; }
.te-chooser { margin:12px 0 0 26px; }
.te-picks { max-height:200px; overflow-y:auto; margin-top:10px; }
.te-pick { padding:2px 0; }
.te-matlist { list-style:none; margin:0; padding:0; }
.te-mat { padding:20px 0; border-top:.5px solid var(--te-rule); }
.te-mat:last-child { border-bottom:.5px solid var(--te-rule); }
.te-mat-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 18px; }
.te-mat-title { font-family:'Spectral', Georgia, serif; font-size:21px; color:var(--te-cream); }
.te-mat-note { margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; color:var(--te-ink); }
.te-mat-link { display:inline-block; margin-top:12px; color:var(--te-tc-soft); text-decoration:none; border-bottom:.5px solid rgba(212,137,109,.5); }
.te-mat-link:hover { color:var(--te-cream); border-bottom-color:var(--te-cream); }
.te-mat-host { margin-left:12px; font-size:12px; color:var(--te-faint); letter-spacing:.03em; }
.te-mat .te-row-actions { margin-top:14px; }
textarea.te-input, .te-compose { border:1px solid rgba(230,226,220,.26); padding:10px 12px; border-radius:6px; }
textarea.te-input:focus { border-color:var(--te-tc-soft); }

/* ── Live class ── */
.te-pair { display:flex; gap:18px; flex-wrap:wrap; }
.te-pair .te-field { flex:1 1 200px; margin:0; }
.te-select { appearance:none; background-color:transparent; color:var(--te-cream); }
.te-select option { background:#161615; color:#EAE0C4; }
input[type=datetime-local].te-input { color-scheme:dark; }
.te-join { margin-top:14px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.te-joinbtn { display:inline-block; text-decoration:none; }

/* ── Practice ── */
.te-items { margin:10px 0 0; padding-left:22px; color:var(--te-ink); line-height:1.6; }
.te-items li { padding-left:4px; overflow-wrap:anywhere; }
.te-practice { }
.te-practice-title { margin:14px 0 4px; font-weight:400; }
.te-msg-on { display:block; font-size:12px; font-style:italic; color:var(--te-tc-soft); margin-bottom:3px; }

/* ── Layout: single column for most views; learner workspace is two panes on desktop ── */
.te-view { max-width:680px; margin:0 auto; }
.te-view.te-wide { max-width:980px; }
.te-split { display:grid; grid-template-columns:230px minmax(0,1fr); gap:0 48px; align-items:start; }
.te-rail { border-right:.5px solid var(--te-rule); padding-right:28px; min-height:260px; }
.te-rail .te-eyebrow { margin-bottom:10px; }
.te-railist { list-style:none; margin:0 0 12px; padding:0; }
.te-railitem { margin:0; }
.te-railbtn { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding:11px 0 11px 14px; text-align:left;
  background:none; border:0; border-left:1px solid transparent; color:inherit; font:inherit; cursor:pointer; }
.te-railbtn .te-row-name { font-size:19px; overflow-wrap:anywhere; transition:color .2s; color:var(--te-mute); }
.te-railbtn:hover .te-row-name { color:var(--te-cream); }
.te-railbtn.active { border-left-color:var(--te-tc); }
.te-railbtn.active .te-row-name { color:var(--te-cream); }
.te-railbtn:disabled { cursor:default; }
.te-railbtn.has-dot::after { top:19px; right:6px; left:auto; }
.te-railitem > .te-btn { margin:2px 0 8px 14px; height:26px; font-size:11px; }
.te-railadd { margin:10px 0 0 14px; }
.te-mobileback { display:none; margin:0 0 16px; }
.te-space .te-spacetitle, .te-spacetitle { margin:0; font-family:'Spectral',serif; font-weight:300; font-size:30px; line-height:1.2; color:var(--te-cream); overflow-wrap:anywhere; }
.te-space .te-subtabs { margin-top:14px; }
@media (max-width:899px) {
  .te-view.te-wide { max-width:680px; }
  .te-split { display:block; }
  .te-rail { border-right:0; padding-right:0; min-height:0; }
  .te-split.te-open .te-rail { display:none; }
  .te-split:not(.te-open) .te-main { display:none; }
  .te-split.te-open .te-mobileback { display:inline-flex; }
}

/* ── Empty states ── */
.te-empty { display:flex; flex-direction:column; gap:6px; padding:30px 2px; border-bottom:.5px solid var(--te-rule); }
.te-list > .te-empty, .te-results > .te-empty { margin:0; }
.te-empty-title { font-family:'Spectral',serif; font-weight:300; font-size:21px; color:var(--te-mute); }
.te-empty-sub { font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:15px; line-height:1.55; color:var(--te-faint); }

/* ── Calmer destructive actions ── */
.te-foot .te-btn, .te-subview > .te-btn { border-color:rgba(230,226,220,.1); color:var(--te-faint); }
.te-foot .te-btn:hover, .te-subview > .te-btn:hover { color:var(--te-ink); }
.te-subtabs { gap:26px; margin:20px 0 26px; }
.te-subtab { font-size:14.5px; padding:9px 0 11px; }
.te-codebox { padding-bottom:22px; margin-bottom:34px; }
.te-code { font-size:30px; }

/* The design system sets "textarea{border:none !important; resize:none}" globally; Teacher needs visible, resizable text boxes. */
.te-scroll textarea.te-input:not(.te-fi) { border:1px solid rgba(230,226,220,.26) !important; border-radius:10px !important; padding:10px 12px !important; resize:vertical !important; }
.te-scroll textarea.te-input:not(.te-fi):focus, .te-scroll textarea.te-input:not(.te-fi):focus-visible { border-color:var(--te-tc-soft) !important; }
.te-scroll textarea.te-fi { resize:vertical !important; }
/* the Ask île drawer sits beside the scrolling area, so it needs its own frame against the global textarea reset */
.te-drawer textarea.te-ask-q { border:.5px solid rgba(255,255,255,.18) !important; border-radius:14px !important; padding:10px 14px !important; resize:vertical !important; }
.te-drawer textarea.te-ask-q:focus { border-color:rgba(157,187,149,.7) !important; }
.te-foot { border-top:0; margin-top:36px; padding-top:0; }
.te-empty-title, .te-empty-sub { padding-left:0; }
.te-msgs > .te-empty { border-bottom:0; padding-left:0; }

/* Narrow screens: the sub-tabs wrap instead of clipping. */
@media (max-width:560px) {
  .te-subtabs { flex-wrap:wrap; overflow:visible; gap:2px 16px; }
  .te-subtab { font-size:13.5px; letter-spacing:.02em; }
}

/* ── Create / Library ── */
.te-choicebar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; }
.te-chip { height:34px; padding:0 18px; border-radius:18px; background:transparent; border:.5px solid rgba(255,255,255,.18); color:var(--te-mute);
  font-family:'DM Sans',sans-serif; font-size:13px; letter-spacing:.03em; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.te-chip:hover { color:var(--te-cream); border-color:rgba(255,255,255,.3); }
.te-chip.active { color:var(--te-cream); border-color:var(--te-tc); background:rgba(196,105,74,.12); }
.te-chip:focus-visible { outline:1px solid rgba(234,224,196,.7); outline-offset:3px; }
.te-lede-small { font-size:18px; margin:0 0 14px; }
.te-coderow { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.te-copy { height:28px; font-size:11.5px; border-color:rgba(255,255,255,.1); color:var(--te-faint); }

/* ── Touch targets on phones: comfortable ~44px, same quiet look ── */
@media (max-width:640px) {
  .te-btn { min-height:44px; padding:0 20px; }
  .te-chip { min-height:44px; }
  .te-copy { min-height:44px; }
  .te-railitem > .te-btn { min-height:44px; }
  .te-link { min-height:44px; display:inline-flex; align-items:center; }
  .te-subtab { min-height:44px; padding:0 2px; display:inline-flex; align-items:center; }
  .te-railbtn { min-height:44px; }
  .te-input { min-height:44px; }
  .te-radio { min-height:44px; margin:0; }
}

/* Île chapter recommendation card (learner Materials) */
.te-chapter .te-mat-main .te-primary { margin-top: 10px; }

/* Draft with AI (Material and Practice forms) */
.te-ai { margin:0 0 24px; padding:16px 18px 6px; border:.5px solid var(--te-rule); border-radius:12px; }
.te-ai-sum { cursor:pointer; font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--te-tc-soft); }
.te-ai[open] > .te-ai-sum { margin-bottom:12px; }
.te-ai-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:4px 18px; margin:0 0 6px; }
.te-ai-grid .te-field { margin:0 0 14px; }
.te-ai-status { min-height:1.2em; margin:8px 0 12px; font-family:'DM Sans',sans-serif; font-size:12.5px; color:var(--te-mute); }
.te-ai-result { margin:6px 0 14px; padding-top:14px; border-top:.5px solid var(--te-rule); }
.te-ai-notes { margin:0 0 14px; }
.te-ai-notes-text { margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:'Spectral',serif; font-weight:300; font-size:15px; line-height:1.55; color:var(--te-ink); }
.te-ai .te-audience { margin:0 0 18px; }
.te-ai-result .te-row-meta { display:block; margin:0 0 6px; }

/* Live class "My notes": page-memory only */
.te-notes { margin-top:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.te-notes-text { width:100%; box-sizing:border-box; min-height:92px; resize:vertical; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:var(--te-ink); font:inherit; line-height:1.55; }
.te-notes-text:focus { outline:none; border-color:rgba(234,224,196,.3); background:rgba(255,255,255,.06); }
.te-notes .te-notes-warn { margin:0; font-size:14px; }

/* Material "Ask about this": page-memory display state only */
.te-ask { margin-top:14px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.te-ask-form { width:100%; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.te-ask-q { width:100%; box-sizing:border-box; min-height:56px; resize:vertical; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:var(--te-ink); font:inherit; line-height:1.5; }
.te-ask-q:focus { outline:none; border-color:rgba(234,224,196,.3); background:rgba(255,255,255,.06); }
.te-ask-note, .te-ask-warn { margin:0; font-size:14px; }
.te-ask-out { width:100%; display:flex; flex-direction:column; gap:6px; }
.te-ask-answer { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; color:var(--te-ink); padding:10px 12px; border-left:2px solid rgba(234,224,196,.3); background:rgba(255,255,255,.03); border-radius:0 8px 8px 0; }
.te-ask-err { margin:0; color:#e8a0a0; font-size:14px; }
.te-ask [hidden] { display:none !important; }


/* ═══ UI polish (presentation only) ═══════════════════════════════════════════════════════════════ */
.stage--teacher { --te-surface:rgba(255,255,255,.035); --te-surface-2:rgba(255,255,255,.06); --te-line:rgba(230,226,220,.2); --te-ring:rgba(234,224,196,.85); }

/* Header: content first */
.te-masthead { padding:0 0 14px; }
.te-title { margin:0; font-size:38px; padding-bottom:12px; }
.te-sub { margin:12px 0 0; font-size:16px; }
.te-scroll { padding-top:44px; }
@media (max-width:640px) { .te-title { font-size:30px; } .te-scroll { padding-top:28px; } .te-sub { font-size:15px; } }

/* One field style: soft surface, 1px border, 10px radius, 44px, same focus ring */
.te-input { background:var(--te-surface); border:1px solid var(--te-line); border-radius:10px; padding:10px 12px; min-height:44px; font-size:17px; }
.te-input::placeholder { color:var(--te-faint); opacity:.8; }
.te-input:hover { border-color:rgba(230,226,220,.34); }
.te-input:focus, .te-input:focus-visible, .te-scroll input:focus-visible { outline:2px solid var(--te-ring); outline-offset:1px; border-color:var(--te-tc-soft); }
.te-scroll textarea.te-input:focus, .te-scroll textarea.te-input:focus-visible { outline:2px solid var(--te-ring); outline-offset:1px; }
.te-scroll textarea.te-input { min-height:96px; }
.te-compose, .te-scroll textarea.te-compose { min-height:72px; }
.te-select { padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23EAE0C4' stroke-opacity='.75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.te-input[aria-invalid="true"] { border-color:#e8a0a0; }
.te-formmsg { margin:10px 0 0; font-family:'DM Sans',sans-serif; font-size:13px; color:#e8a0a0; }
.te-formmsg[hidden], .te-ai-tag[hidden] { display:none; }
input[type=checkbox], input[type=radio] { width:18px; height:18px; flex:none; }

/* Buttons: pressed, disabled and keyboard focus */
.te-scroll button:focus-visible, .te-scroll a:focus-visible, .te-scroll summary:focus-visible, .te-chip:focus-visible { outline:2px solid var(--te-ring); outline-offset:2px; border-radius:18px; }
.te-btn:active:not(:disabled) { transform:scale(.98); background:rgba(255,255,255,.1); }
.te-btn:disabled { opacity:.5; cursor:default; }
.te-primary { background:rgba(196,105,74,.1); }
.te-commitbar { align-items:center; margin-top:6px; }
.te-commit { height:44px; min-width:160px; font-size:13px; background:rgba(196,105,74,.2); border-color:var(--te-tc); }
.te-commit:hover:not(:disabled) { background:rgba(196,105,74,.3); }
.te-link { display:inline-flex; align-items:center; min-height:32px; }
.te-link:disabled { opacity:.5; }

/* Cards instead of hairline rows */
.te-list { border-top:0; display:flex; flex-direction:column; gap:10px; }
.te-list.te-picks { gap:0; }
.te-row, .te-mat { background:var(--te-surface); border:.5px solid var(--te-rule); border-radius:12px; padding:14px 16px; }
.te-mat { margin:0 0 10px; }
.te-mat:last-child { border-bottom:.5px solid var(--te-rule); margin-bottom:0; }
.te-matlist { display:flex; flex-direction:column; gap:10px; }
.te-matlist .te-mat { margin:0; }
.te-mat-head { align-items:baseline; }
.te-mat-title { font-size:20px; line-height:1.3; }
.te-mat-head .te-row-meta { letter-spacing:.1em; }
.te-mat-soon { font-family:'DM Sans',sans-serif; font-size:12px; letter-spacing:.04em; color:var(--te-tc-soft); background:rgba(196,105,74,.12); border-radius:10px; padding:2px 10px; }
.te-mat .te-row-actions { justify-content:flex-end; margin-top:12px; }
.te-mat .te-row-actions .te-btn:not(.te-primary) { border-color:rgba(230,226,220,.1); color:var(--te-faint); font-size:11.5px; }
.te-mat .te-row-actions .te-btn:not(.te-primary):hover { color:var(--te-ink); }
.te-empty { border:.5px dashed var(--te-rule); border-radius:12px; padding:22px 18px; }
.te-msgs > .te-empty { border:0; padding:22px 4px; }
.te-list > .te-note { padding:12px 2px; }
.te-row-name.is-unread { font-weight:500; color:#fff; }
.te-mat-link { min-height:0; }

/* Chapter card: action always on its own row */
.te-chapter .te-mat-main { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.te-chapter .te-mat-main .te-primary { margin-top:4px; }
.te-chapter .te-mat-main .te-mat-note { margin:0; }

/* Create: kind chips as a tidy grid on phones */
@media (max-width:640px) {
  .te-choicebar { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .te-choicebar .te-chip { width:100%; }
  .te-commit { width:100%; }
  .te-commitbar { flex-wrap:wrap; }
  .te-commitbar .te-link { margin:0 auto; }
  .te-btn.te-link { padding:0; }                              /* the 20px phone padding pushed link-buttons off the text edge */
  .te-mat-link { display:inline-flex; align-items:center; min-height:44px; margin-top:4px; }
  .te-mat-host { margin-left:10px; }
  .te-row-actions .te-btn { flex:1 1 auto; }
  .te-matform .te-field, .te-form .te-field { margin-bottom:14px; }
}

/* Tablet: comfortable targets */
@media (min-width:641px) and (max-width:1024px) {
  .te-btn { height:40px; padding:0 18px; }
  .te-chip { height:40px; }
  .te-subtab { min-height:40px; padding:10px 0 12px; }
  .te-copy { height:36px; }
  .te-railitem > .te-btn { height:34px; }
}

/* Draft with AI */
.te-ai { padding:0 16px 4px; margin:0 0 20px; background:var(--te-surface); border:.5px solid var(--te-rule); }
.te-ai-sum { display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; min-height:44px; padding:8px 0; list-style:none; color:var(--te-tc-soft); }
.te-ai-sum::-webkit-details-marker { display:none; }
.te-ai-sum::marker { content:''; }
.te-ai > .te-ai-sum::after { content:'+'; margin-left:auto; font-size:18px; letter-spacing:0; color:var(--te-mute); }
.te-ai[open] > .te-ai-sum::after { content:'–'; }
.te-ai-sum-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.te-ai-sum-hint { font-family:'Spectral',serif; font-style:italic; font-size:14px; letter-spacing:0; text-transform:none; color:var(--te-faint); flex:1 1 220px; }
.te-ai[open] > .te-ai-sum { margin-bottom:8px; }
.te-ai[open] > .te-ai-sum .te-ai-sum-hint { display:none; }
.te-ai .te-ai-notes > .te-ai-sum::after { content:none; }
.te-ai-opts { margin:6px 0 10px; }
.te-ai-grid { gap:0 14px; }
.te-ai .te-audience { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 16px; }
.te-ai .te-audience legend { float:left; width:100%; margin-bottom:8px; }
.te-ai .te-radio { margin:0; padding:6px 14px 6px 10px; min-height:36px; border:1px solid var(--te-line); border-radius:18px; font-size:14px; }
.te-ai .te-radio:has(input:checked) { border-color:var(--te-tc); background:rgba(196,105,74,.12); color:var(--te-cream); }
.te-ai-status { padding:0; }
.te-ai-tag { margin:0 0 -4px; padding:8px 12px; border-left:2px solid var(--te-sage-line); background:var(--te-sage-fill); border-radius:0 8px 8px 0; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--te-ink); }
.te-ai-count { text-align:right; margin:-8px 0 8px; font-size:13px; }

/* Ask about this: reads as optional AI help before any answer exists */
.te-ask-open { align-self:flex-start; min-height:36px; padding:0 14px; border:.5px solid rgba(212,137,109,.45); border-radius:18px; font-size:14px; gap:8px; }
.te-ask-open::before { content:'AI'; font-family:'DM Sans',sans-serif; font-style:normal; font-size:10px; letter-spacing:.12em; padding:2px 6px; border-radius:8px; background:rgba(196,105,74,.2); color:var(--te-cream); }
.te-ask-open:hover { background:rgba(196,105,74,.12); }
.te-ask-form { padding:12px; border:.5px solid var(--te-rule); border-radius:12px; background:var(--te-surface); box-sizing:border-box; }
.te-ask-label { margin:0; font-family:'DM Sans',sans-serif; font-size:12px; letter-spacing:.06em; color:var(--te-tc-soft); }
.te-ask-q:focus { outline:2px solid var(--te-ring); outline-offset:1px; }
.te-ask-albl { color:var(--te-tc-soft); }
.te-ask-answer { border-left-color:var(--te-tc); }
.te-notes-text:focus { outline:2px solid var(--te-ring); outline-offset:1px; }
@media (max-width:640px) { .te-ask-open { min-height:44px; } }

/* Messages: soft bubbles */
.te-msg-body { display:inline-block; text-align:left; padding:10px 14px; border-radius:14px; background:var(--te-surface-2); }
.te-msg.mine .te-msg-body { background:rgba(196,105,74,.16); color:var(--te-cream); border-bottom-right-radius:4px; }
.te-msg:not(.mine) .te-msg-body { border-bottom-left-radius:4px; }
.te-composebar { gap:10px; }

/* Rail: pending request row */
.te-railitem > .te-btn { margin:0 0 10px 14px; }

/* Motion: a quick fade after the person's own click only (te-enter is added by the click handler, never by timer refreshes) */
@media (prefers-reduced-motion:no-preference) {
  .te-enter { animation:teEnter .18s ease-out; }
  /* Layers: the student space and its popups fade in once when opened; a popup's inner view fades in when swapped (list → thread). A refresh repaints in place and never replays it. */
  .te-popwrap, .te-swwrap { animation:teLayerIn .16s ease-out both; }
  .te-pop { animation:teLayerPanelIn .2s ease-out both; }
  .te-pop-body > .te-popview, .te-pop-body > .te-thread { animation:teViewIn .16s ease-out both; }
  .te-sw-body > * { animation:teViewIn .2s ease-out both; }
  @keyframes teLayerIn { from { opacity:0; } to { opacity:1; } }
  @keyframes teLayerPanelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @keyframes teViewIn { from { opacity:0; } to { opacity:1; } }
  @keyframes teEnter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce) { .te-btn, .te-chip, .te-input { transition:none; } .te-btn:active:not(:disabled) { transform:none; } }
.te-chapter .te-mat-main { margin-top:8px; }
.te-matform .te-commitbar { margin-top:20px; }

/* ═══ Classroom finish: the same quiet surfaces, spring easing and expanding composer the Classroom uses ═══════════ */
.stage--teacher { --te-spring:cubic-bezier(.34,1.1,.64,1); --te-glass:rgba(255,255,255,.042); --te-glass-line:rgba(255,255,255,.1); --te-cream-soft:rgba(234,224,196,.78); }

/* Surfaces: translucent glass with a 0.5px edge */
.te-row, .te-mat, .te-ai, .te-ask-form { background:var(--te-glass); border:.5px solid var(--te-glass-line); border-radius:18px; }
.te-input, .te-notes-text, .te-ask-q { background:var(--te-glass); border:.5px solid rgba(255,255,255,.14); }
.te-scroll textarea.te-input:not(.te-fi) { border:.5px solid rgba(255,255,255,.14) !important; border-radius:16px !important; }
.te-empty { border:0; text-align:center; align-items:center; padding:34px 18px; }
.te-empty-title { font-style:italic; font-size:19px; color:rgba(230,226,220,.5); }
.te-empty-sub { color:rgba(230,226,220,.42); max-width:380px; }

/* Pills: quiet, spring lift on hover (as the Classroom pills and tool chips) */
.te-btn, .te-chip { border:.5px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); border-radius:22px; color:rgba(230,226,220,.62);
  transition:background .25s var(--te-spring), border-color .25s var(--te-spring), color .25s var(--te-spring), transform .25s var(--te-spring), box-shadow .25s var(--te-spring); }
.te-btn:hover:not(:disabled), .te-chip:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:rgba(230,226,220,.9); transform:translateY(-1px); }
.te-btn:active:not(:disabled) { transform:scale(.98); }
.te-primary { background:rgba(234,224,196,.08); border-color:rgba(234,224,196,.28); color:var(--te-cream-soft); }
.te-primary:hover:not(:disabled) { background:rgba(234,224,196,.17); border-color:rgba(234,224,196,.45); color:#EAE0C4; box-shadow:0 4px 14px rgba(234,224,196,.07); }
.te-commit { background:rgba(196,105,74,.2); border-color:var(--te-tc); color:var(--te-cream); }
.te-commit:hover:not(:disabled) { background:rgba(196,105,74,.3); border-color:var(--te-tc-soft); box-shadow:0 4px 14px rgba(196,105,74,.12); }
.te-chip.active { background:rgba(234,224,196,.08); border-color:rgba(234,224,196,.28); color:#EAE0C4; }
.te-link, .te-link:hover:not(:disabled) { background:transparent; border:0; box-shadow:none; transform:none; }
.te-ask-open { background:transparent; border:.5px solid rgba(212,137,109,.45); border-radius:22px; }
.te-mat .te-row-actions .te-btn:not(.te-primary) { background:transparent; }
.te-subtab { transition:color .25s var(--te-spring), border-color .25s var(--te-spring); }

/* Composers: a resting pill that opens on focus, with the Classroom's soft halo; send wakes up once there is text */
.te-composebar { position:relative; }
.te-scroll textarea.te-compose { min-height:46px !important; height:46px; border-radius:23px !important; padding:11px 18px !important; resize:none !important; line-height:1.5;
  background:var(--te-glass); border:.5px solid rgba(255,255,255,.12) !important;
  transition:height .5s var(--te-spring), border-radius .5s var(--te-spring), box-shadow .4s ease, border-color .4s ease, background .4s ease; }
.te-scroll textarea.te-compose:focus, .te-scroll textarea.te-compose.has-text { height:104px; border-radius:20px !important; }
.te-scroll textarea.te-compose:focus { border-color:rgba(234,224,196,.3) !important; background:rgba(255,255,255,.052); outline:none;
  box-shadow:0 0 0 3px rgba(234,224,196,.05), 0 8px 40px rgba(0,0,0,.25); }
.te-composebar .te-primary { align-self:flex-end; opacity:.55; }
.te-composebar .te-primary.ready { opacity:1; background:rgba(234,224,196,.1); border-color:rgba(234,224,196,.3); color:#EAE0C4; }
.te-ask-q, .te-notes-text { transition:border-color .4s ease, box-shadow .4s ease, background .4s ease; }
.te-ask-q:focus, .te-notes-text:focus { outline:none; border-color:rgba(234,224,196,.3); background:rgba(255,255,255,.052); box-shadow:0 0 0 3px rgba(234,224,196,.05), 0 8px 40px rgba(0,0,0,.25); }

/* Conversation: the Classroom's quiet turns instead of chat bubbles — tiny label, serif prose, a learner left rule */
.te-msgs { gap:24px; padding:12px 6px 12px 0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.te-msg, .te-msg.mine { max-width:100%; align-self:stretch; text-align:left; }
.te-msg-who { font-family:'DM Sans',sans-serif; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(230,226,220,.42); margin-bottom:6px; }
.te-msg-body, .te-msg.mine .te-msg-body { display:block; padding:0; background:none; border-radius:0; font-family:'Spectral',serif; font-weight:300; font-size:17px; line-height:1.85; color:rgba(240,236,230,.97); }
.te-msg.mine .te-msg-body { font-style:italic; font-size:16px; color:rgba(230,226,220,.66); padding-left:14px; border-left:1px solid rgba(234,224,196,.22); }
.te-msg-on { font-family:'Spectral',serif; }

/* Reading text uses the Classroom's serif */
.te-mat-note { font-family:'Spectral',serif; font-weight:300; font-size:17px; line-height:1.85; color:rgba(230,226,220,.88); }
.te-ask-answer { font-family:'Spectral',serif; font-weight:300; font-size:16.5px; line-height:1.8; background:none; padding:2px 0 2px 14px; border-radius:0; }
.te-items { font-family:'Spectral',serif; font-weight:300; font-size:16.5px; }
.te-mat-title, .te-row-name { font-weight:300; }

@media (prefers-reduced-motion:reduce) {
  .te-scroll textarea.te-compose { transition:none; }
  .te-btn:hover:not(:disabled), .te-chip:hover { transform:none; }
}

/* Chapter chooser (Île chapter form): current choice + a pane with search, stage filter and a grid of cards */
.te-cp-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 14px; background:var(--te-glass); border:.5px solid rgba(255,255,255,.14); border-radius:16px; }
.te-cp-current { font-family:'Spectral',serif; font-weight:300; font-size:17px; color:var(--te-faint); font-style:italic; min-width:0; overflow-wrap:anywhere; }
.te-cp-current.chosen { color:var(--te-cream); font-style:normal; }
.te-cp-pane { margin-top:12px; padding:14px; background:var(--te-glass); border:.5px solid var(--te-glass-line); border-radius:18px; }
.te-cp-pane[hidden] { display:none; }
.te-cp-pane > * + * { margin-top:12px; }
.te-cp-stages { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:2px; margin:0; }
.te-cp-stages[hidden] { display:none; }
.te-cp-stages .te-chip { flex:none; width:auto; }
.te-cp-count { margin:0; font-size:13px; }
.te-cp-grid { list-style:none; margin:0; padding:2px 2px 4px; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; max-height:420px; overflow-y:auto; overscroll-behavior:contain; }
.te-cp-item { margin:0; display:flex; }
.te-cp-card { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:12px 14px; min-height:44px; cursor:pointer; color:inherit; font:inherit;
  background:rgba(255,255,255,.03); border:.5px solid rgba(255,255,255,.1); border-radius:16px;
  transition:background .25s var(--te-spring), border-color .25s var(--te-spring), transform .25s var(--te-spring); }
.te-cp-card:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); transform:translateY(-1px); }
.te-cp-card.active { background:rgba(196,105,74,.14); border-color:var(--te-tc); }
.te-cp-card:focus-visible { outline:2px solid var(--te-ring); outline-offset:2px; }
.te-cp-name { font-family:'Spectral',serif; font-weight:300; font-size:18px; line-height:1.3; color:var(--te-cream); overflow-wrap:anywhere; }
.te-cp-desc { font-family:'Spectral',serif; font-style:italic; font-weight:300; font-size:14px; line-height:1.5; color:var(--te-mute); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.te-cp-none { grid-column:1 / -1; padding:22px 8px; text-align:center; font-family:'Spectral',serif; font-style:italic; color:var(--te-faint); }
@media (max-width:640px) { .te-cp-grid { grid-template-columns:1fr; max-height:60vh; } .te-cp-bar .te-btn { width:100%; } }
@media (prefers-reduced-motion:reduce) { .te-cp-card:hover { transform:none; transition:none; } }


/* ═══ Teacher desk — a calm classroom of its own ═══════════════════════════════════════════════════
   Same type pair and graphite ground as the rest of île, but its own character: a sage accent in place of terracotta,
   ledger rows (a monogram, a name, a status line) instead of glass cards, a plain desk header (three counts and the
   class code as a ticket). Presentation only: no behaviour, no data and no wording rules change. Scoped to .stage--teacher. */
.stage--teacher {
  --te-tc:#9DBB95; --te-tc-soft:#B7D2AF; --te-sage-fill:rgba(157,187,149,.14); --te-sage-line:rgba(157,187,149,.5);
  --te-faint:rgba(230,226,220,.7);
}
.stage--teacher .has-dot::after { background:#9DBB95; }

/* Masthead: a small wordmark line, a plain roman title, no ornament (the tab underline is the rule) */
.te-kicker { display:block; font-family:'DM Sans',sans-serif; font-size:14px; letter-spacing:.1em; text-transform:none; color:var(--te-mute); }
.te-title { display:block; margin:10px 0 0; padding-bottom:0; font-style:normal; font-weight:300; font-size:52px; line-height:1.05; color:rgba(234,224,196,.96); }
.te-title::after { content:none; }
.te-masthead { padding:0 0 4px; }
.te-sub { margin:12px 0 0; font-size:18px; }
@media (max-width:640px) { .te-title { font-size:38px; } }

/* Tabs: a sage underline */
.te-subtab.active { border-bottom:2px solid var(--te-tc); margin-bottom:-1px; }

/* Desk header: counts and the class-code ticket */
.te-deskhead { display:flex; flex-wrap:wrap; align-items:center; gap:22px 44px; padding:0 0 26px; margin:0 0 4px; border-bottom:.5px solid var(--te-rule); }
.te-stats { display:flex; gap:40px; flex-wrap:wrap; }
.te-stat b { display:block; font-family:'Spectral',serif; font-weight:300; font-size:42px; line-height:1; color:var(--te-cream); font-variant-numeric:lining-nums; }
.te-stat span { display:block; margin-top:8px; font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--te-faint); }
.te-deskhead .te-codebox { margin:0 0 0 auto; padding:12px 18px 10px; align-items:center; gap:2px; border:1px dashed var(--te-sage-line); border-radius:8px; max-width:280px; }
.te-deskhead .te-code { font-size:26px; letter-spacing:.18em; }
.te-deskhead .te-codebox .te-note { font-size:12.5px; text-align:center; font-style:normal; font-family:'DM Sans',sans-serif; line-height:1.5; }
.te-deskhead .te-coderow { justify-content:center; gap:10px; }
@media (max-width:640px) { .te-deskhead .te-codebox { margin:0; width:100%; max-width:none; } .te-stat b { font-size:34px; } }

/* Ledger rows instead of glass cards */
.te-list { gap:0; border-top:0; }
.te-row, .te-mat { background:none; border:0; border-bottom:.5px solid var(--te-rule); border-radius:0; padding:16px 0; }
.te-mat { margin:0; padding:22px 0; }
.te-mat:last-child { border-bottom:.5px solid var(--te-rule); }
.te-matlist { gap:0; }
.te-row { gap:16px; }
.te-mono { flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--te-sage-line); display:grid; place-items:center;
  font-family:'Spectral',serif; font-size:19px; color:var(--te-tc-soft); }
.te-row-text { flex:1 1 auto; }
.te-row-meta { color:var(--te-faint); }
.te-row-name.is-unread { color:#fff; font-weight:400; }
.te-section { margin:0 0 34px; }
.te-deskhead + .te-section, .te-deskhead + * { margin-top:30px; }
@media (max-width:640px) { .te-mono { display:none; } }

/* Sage replaces terracotta on controls */
.te-primary { background:var(--te-sage-fill); border-color:var(--te-sage-line); color:#E6EFE2; }
.te-primary:hover:not(:disabled) { background:rgba(157,187,149,.24); border-color:var(--te-tc); color:#fff; box-shadow:none; }
.te-commit { background:rgba(157,187,149,.22); border-color:var(--te-tc); color:#F1F6EE; }
.te-commit:hover:not(:disabled) { background:rgba(157,187,149,.32); border-color:var(--te-tc-soft); box-shadow:none; }
.te-chip.active { background:var(--te-sage-fill); border-color:var(--te-sage-line); color:#E6EFE2; }
.te-mat-soon { background:var(--te-sage-fill); color:var(--te-tc-soft); }
.te-mat-link { border-bottom-color:var(--te-sage-line); }
.te-link { color:var(--te-tc-soft); }
.te-radio input, .auth-role-opt input { accent-color:#9DBB95; }
.te-ai .te-radio:has(input:checked) { border-color:var(--te-tc); background:var(--te-sage-fill); }
.te-ai-tag { border-left-color:var(--te-tc); background:rgba(157,187,149,.08); }
.te-ask-open { border-color:var(--te-sage-line); }
.te-ask-open::before { background:var(--te-sage-fill); }
.te-ask-open:hover { background:rgba(157,187,149,.12); }
.te-ask-answer, .te-ask-albl { border-left-color:var(--te-tc); }
.te-ask-label, .te-ask-albl, .te-msg-on { color:var(--te-tc-soft); }
.te-cp-card.active { background:var(--te-sage-fill); border-color:var(--te-tc); }
.te-input:focus, .te-input:focus-visible { border-color:var(--te-tc-soft); }
.te-msg.mine .te-msg-body { border-left-color:var(--te-sage-line); }

/* Readability: the faintest small print is lifted */
.te-msg-who { font-size:10px; color:rgba(230,226,220,.62); }
.te-empty-title { color:rgba(230,226,220,.62); }
.te-empty-sub { color:rgba(230,226,220,.56); }
.te-view > .te-split { margin-top:34px; }


/* ═══ Teacher alive — lists that open into pages, filled fields, tiles, lively controls ═════════════════════════
   Presentation only. Scoped to .stage--teacher / .te-*. No !important in this block. Every animation lives inside
   prefers-reduced-motion: no-preference (and the reduce block below turns the transitions off), and list rows rise only
   after the person's own click (the view gets .te-rise for one second; timer refreshes never replay it). */
.stage--teacher {
  --te-k-material:#9DBB95; --te-k-live:#E3B76A; --te-k-practice:#8FB7D9; --te-k-chapter:#D69A8A; --te-k-teacher:#9DBB95;
  --te-ease:cubic-bezier(.22,.8,.3,1);
}
.te-k-material { --k:var(--te-k-material); } .te-k-live { --k:var(--te-k-live); } .te-k-practice { --k:var(--te-k-practice); }
.te-k-chapter { --k:var(--te-k-chapter); } .te-k-teacher { --k:var(--te-k-teacher); }

/* Lists that open: a row is one big button — monogram, title, a line of meta, a chevron */
.te-orows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.te-orow { margin:0; padding:0; border:0; background:none; position:relative; }
.te-orow-btn { position:relative; width:100%; box-sizing:border-box; text-align:left; cursor:pointer; color:var(--te-cream);
  display:grid; grid-template-columns:46px minmax(0,1fr) auto auto; grid-template-areas:"mono title soon chev" "mono meta soon chev"; align-items:center; column-gap:16px; row-gap:2px;
  padding:14px 18px 14px 16px; border-radius:18px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035);
  transition:transform .3s var(--te-ease), background .25s, border-color .25s; }
.te-orow-btn::before { content:attr(data-letter); grid-area:mono; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-family:'Spectral',serif; font-size:21px; color:var(--k, var(--te-tc)); border:1px solid color-mix(in srgb, var(--k, #9DBB95) 55%, transparent); background:color-mix(in srgb, var(--k, #9DBB95) 12%, transparent);
  transition:transform .3s var(--te-ease), background .25s; }
.te-orow-btn::after { content:'›'; grid-area:chev; font-size:26px; line-height:1; color:var(--te-faint); transition:transform .3s var(--te-ease), color .25s; }
.te-orow-title { grid-area:title; font-family:'Spectral',serif; font-weight:300; font-size:20px; line-height:1.25; overflow-wrap:anywhere; }
.te-orow-btn .te-row-meta { grid-area:meta; font-size:13.5px; letter-spacing:.02em; text-transform:none; }
.te-orow-btn .te-mat-soon { grid-area:soon; justify-self:end; }
.te-orow-btn:hover:not(:disabled) { transform:translateY(-2px); background:color-mix(in srgb, var(--k, #9DBB95) 9%, rgba(255,255,255,.03)); border-color:color-mix(in srgb, var(--k, #9DBB95) 55%, transparent); }
.te-orow-btn:hover:not(:disabled)::before { transform:scale(1.07); background:color-mix(in srgb, var(--k, #9DBB95) 22%, transparent); }
.te-orow-btn:hover:not(:disabled)::after { transform:translateX(5px); color:var(--k, var(--te-tc)); }
.te-orow-btn:active:not(:disabled) { transform:scale(.99); }
.te-orow-btn:disabled { cursor:default; opacity:.72; }
.te-orow.is-unread .te-orow-title { color:#fff; }
.te-orow-btn.has-dot::after { content:'›'; position:static; width:auto; height:auto; border-radius:0; background:none; }
.te-orow-btn.has-dot::before { box-shadow:0 0 0 2px #0F0F0E, 0 0 0 4px var(--te-tc); }
.te-orow > .te-btn { margin:8px 0 0 62px; }
.te-orows > .te-empty { list-style:none; }
.te-railadd { margin:18px 0 0; }
.te-masthead + .te-section { margin-top:34px; }
@media (max-width:640px) { .te-orow-btn { grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"mono title chev" "mono meta chev" "soon soon soon"; padding:12px 14px; column-gap:12px; }
  .te-orow-btn::before { width:40px; height:40px; font-size:18px; } .te-orow-btn .te-mat-soon { justify-self:start; margin-top:6px; } .te-orow > .te-btn { margin-left:52px; } }

/* A teacher or an item opened as a page of its own */
.te-backlink { margin:0 0 18px; padding:6px 0; }
.te-backlink:hover:not(:disabled) { transform:translateX(-3px); }
.te-view.te-page { padding-top:4px; }
.te-spacehead { display:flex; align-items:center; gap:18px; margin:0 0 4px; }
.te-link + .te-spacehead { margin-top:12px; }
.te-spacehead + .te-note { margin-top:8px; }
.te-mono-lg { display:grid; width:60px; height:60px; font-size:28px; }
.te-spacehead .te-spacetitle { margin:0; font-family:'Spectral',serif; font-weight:300; font-size:42px; line-height:1.1; color:rgba(234,224,196,.96); }
.te-mat.te-detail { padding:28px 30px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(255,255,255,.035); margin:0; }
.te-mat.te-detail:last-child { border-bottom:1px solid rgba(255,255,255,.1); }
.te-detail .te-mat-title { margin:0; font-family:'Spectral',serif; font-weight:300; font-size:32px; line-height:1.2; }
.te-detail .te-mat-head { margin-bottom:14px; padding-bottom:14px; border-bottom:.5px solid var(--te-rule); }
.te-detail .te-row-actions { margin-top:22px; }
@media (max-width:640px) { .te-spacehead .te-spacetitle { font-size:32px; } .te-mono-lg { width:48px; height:48px; font-size:22px; } .te-mat.te-detail { padding:20px 18px; } .te-detail .te-mat-title { font-size:26px; } }

/* Create: four tiles instead of a row of pills */
.te-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 26px; }
.te-tile { position:relative; display:flex; flex-direction:column; gap:6px; padding:16px 16px 15px; border-radius:18px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035);
  transition:transform .3s var(--te-ease), border-color .25s, background .25s; }
.te-tile:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--k) 60%, transparent); background:color-mix(in srgb, var(--k) 8%, rgba(255,255,255,.03)); }
.te-tile.active { border-color:var(--k); background:color-mix(in srgb, var(--k) 13%, rgba(255,255,255,.03)); }
.te-ico { width:28px; height:28px; fill:none; stroke:var(--k); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--te-ease); }
.te-tile:hover .te-ico { transform:rotate(-6deg) scale(1.1); }
.te-tile .te-tile-btn { position:static; background:none; border:0; padding:0; margin:6px 0 0; min-height:0; height:auto; border-radius:0; text-align:left; justify-content:flex-start;
  font-family:'Spectral',serif; font-weight:300; font-size:21px; color:var(--te-cream); transform:none; }
.te-tile .te-tile-btn:hover, .te-tile .te-tile-btn.active { background:none; border:0; transform:none; color:var(--te-cream); }
.te-tile .te-tile-btn::after { content:''; position:absolute; inset:0; border-radius:18px; }       /* the whole tile is the button */
.te-tile .te-tile-btn:focus-visible { outline:none; }
.te-tile:focus-within { outline:2px solid var(--te-ring); outline-offset:2px; }
.te-tile-hint { font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.5; color:var(--te-mute); }
@media (max-width:900px) { .te-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px) { .te-tiles { grid-template-columns:1fr; } }

/* Fields: a filled frame that wakes up on hover and focus; the label sits inside it */
.te-field:not(.te-field-bare) { position:relative; gap:1px; padding:10px 16px 8px; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.045);
  transition:border-color .25s, background .25s, transform .3s var(--te-ease), box-shadow .3s; }
.te-field:not(.te-field-bare):hover { border-color:rgba(255,255,255,.24); }
.te-field:not(.te-field-bare):focus-within { border-color:var(--te-tc); background:rgba(157,187,149,.07); transform:translateY(-1px); box-shadow:0 0 0 4px rgba(157,187,149,.14); }
.te-field .te-label { font-size:10.5px; letter-spacing:.14em; color:var(--te-faint); transition:color .25s; }
.te-field:focus-within .te-label { color:var(--te-tc-soft); }
.te-field .te-input.te-fi { background:transparent; border:0; border-radius:0; padding:5px 0 3px; min-height:30px; font-size:17px; }
.te-field .te-input.te-fi:hover { border:0; }
.te-field .te-input.te-fi:focus, .te-field .te-input.te-fi:focus-visible { outline:none; border:0; }
.te-field textarea.te-fi { min-height:84px; line-height:1.55; }
.te-field select.te-input.te-fi { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px; background-color:transparent; background-repeat:no-repeat; background-position:right 2px center; background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%239DBB95' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.te-field select.te-input.te-fi option { background:#161615; color:#EAE0C4; }
.te-select[hidden] { display:none; }
.te-bar .te-field:not(.te-field-bare) { flex:1; }
.te-pair { gap:14px; align-items:flex-start; }
.te-pair .te-field:nth-child(2) { flex:1 1 100%; }
input[type=datetime-local].te-input { font-family:'DM Sans',sans-serif; font-size:16px; }
.te-selchips { margin-top:8px; gap:8px; flex-wrap:wrap; }
.te-selchips .te-chip { min-height:34px; }

/* Choice controls: pills instead of bare radio buttons and tick boxes */
.te-matform > .te-audience > .te-radio { position:relative; display:inline-flex; margin:0 8px 8px 0; padding:0; min-height:0; }
.te-matform > .te-audience > .te-radio input { position:absolute; opacity:0; inset:0; margin:0; width:100%; height:100%; cursor:pointer; }
.te-matform > .te-audience > .te-radio > span { display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:20px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035); color:var(--te-mute);
  transition:background .25s, border-color .25s, color .25s, transform .3s var(--te-ease); }
.te-matform > .te-audience > .te-radio:hover > span { border-color:rgba(255,255,255,.3); transform:translateY(-1px); }
.te-matform > .te-audience > .te-radio:has(input:checked) > span { border-color:var(--te-tc); background:rgba(157,187,149,.18); color:#F1F6EE; }
.te-matform > .te-audience > .te-radio:has(input:focus-visible) > span { outline:2px solid var(--te-ring); outline-offset:2px; }
.te-pick .te-radio { position:relative; display:flex; align-items:center; gap:12px; margin:0; padding:9px 12px; border-radius:12px; transition:background .2s; }
.te-pick .te-radio:hover { background:rgba(255,255,255,.05); }
.te-pick .te-radio input { appearance:none; flex:none; width:20px; height:20px; margin:0; border-radius:7px; border:1.5px solid rgba(255,255,255,.34); background:transparent; cursor:pointer; transition:background .2s, border-color .2s; }
.te-pick .te-radio input:checked { border-color:var(--te-tc); background:var(--te-tc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%230F0F0E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.te-pick .te-radio input:focus-visible { outline:2px solid var(--te-ring); outline-offset:2px; }
.te-chooser { margin:12px 0 0; }

/* Buttons: the main action is filled and answers the pointer */
.te-primary { background:var(--te-tc); border-color:transparent; color:#0F1410; font-weight:500; }
.te-primary:hover:not(:disabled) { background:var(--te-tc-soft); color:#0F1410; border-color:transparent; box-shadow:0 8px 22px rgba(157,187,149,.28); transform:translateY(-2px); }
.te-primary:active:not(:disabled) { transform:scale(.97); box-shadow:none; }
.te-primary:disabled { opacity:.5; }
.te-commit { min-height:46px; padding:0 30px; font-size:15px; }
.te-commit:hover:not(:disabled) { background:var(--te-tc-soft); color:#0F1410; border-color:transparent; box-shadow:0 8px 22px rgba(157,187,149,.28); }
.te-link.te-primary, .te-primary.te-link { background:transparent; color:var(--te-tc-soft); box-shadow:none; }
.te-chip { transition:background .25s, border-color .25s, color .25s, transform .3s var(--te-ease); }
.te-chip.active { background:rgba(157,187,149,.2); border-color:var(--te-tc); color:#F1F6EE; }
.te-subtab { transition:color .2s, box-shadow .3s; box-shadow:inset 0 -2px 0 transparent; }
.te-subtab:hover:not(.active) { box-shadow:inset 0 -2px 0 rgba(157,187,149,.4); }
.te-row { transition:background .25s; }
.te-row:hover { background:rgba(255,255,255,.03); }
.te-stat b { transition:color .3s; }
.te-stat:hover b { color:var(--te-tc-soft); }

/* Messages: mine on the right in sage, theirs on the left with their initial — and always the name above */
.te-msgs { gap:16px; padding:36px 8px 36px 0; }
.te-msg, .te-msg.mine { text-align:left; max-width:78%; align-self:flex-start; position:relative; }
.te-msg.mine { align-self:flex-end; }
.te-msg.theirs { display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:10px; }
.te-msg.theirs::before { content:attr(data-letter); grid-column:1; grid-row:1 / span 3; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:'Spectral',serif; font-size:16px; color:var(--te-tc-soft); border:1px solid var(--te-sage-line); background:var(--te-sage-fill); }
.te-msg.theirs > * { grid-column:2; }
.te-msg-who { font-size:12px; letter-spacing:.02em; text-transform:none; color:var(--te-faint); margin-bottom:5px; }
.te-msg.mine .te-msg-who { text-align:right; }
.te-msg-body, .te-msg.mine .te-msg-body, .te-msg.theirs .te-msg-body { display:inline-block; padding:11px 16px; font-family:'DM Sans',sans-serif; font-weight:400; font-style:normal; font-size:15.5px; line-height:1.55; border-left:0;
  border-radius:18px 18px 18px 5px; background:rgba(255,255,255,.07); color:rgba(240,236,230,.97); }
.te-msg.mine .te-msg-body { border-radius:18px 18px 5px 18px; background:rgba(157,187,149,.2); color:#F1F6EE; }
.te-msg-on { text-align:inherit; }
@media (max-width:640px) { .te-msg, .te-msg.mine { max-width:92%; } }
.te-composebar .te-primary.ready { background:var(--te-tc); border-color:transparent; color:#0F1410; }

/* Ask île: a slim tab on the right edge (as in Studio) */
.te-drawer { position:absolute; top:0; right:0; bottom:0; z-index:6; display:flex; overflow:hidden; width:44px; border-left:.5px solid var(--te-sage-line); background:#0F0F0E; transition:width .38s var(--te-ease); }
.te-drawer.is-open { width:min(420px,92vw); background:#131312; border-left-color:rgba(234,224,196,.28); }
.te-drawer-tab { flex:0 0 44px; width:44px; height:100%; display:flex; flex-direction:column; align-items:center; gap:18px; padding:62px 0 0; background:transparent; border:0; cursor:pointer; color:var(--te-ink); transition:color .2s; }
.te-drawer-tab:hover, .te-drawer.is-open .te-drawer-tab { color:var(--te-cream); }
.te-drawer-bar { display:block; width:2px; height:38px; background:var(--te-tc-soft); border-radius:1px; transform-origin:center; }
.te-drawer-label { writing-mode:vertical-rl; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; letter-spacing:.1em; text-transform:none; }
.te-drawer-body { flex:0 0 auto; box-sizing:border-box; width:min(376px,calc(92vw - 44px)); height:100%; padding:52px 26px 24px 8px; overflow-y:auto; visibility:hidden; opacity:0; transition:opacity .25s, visibility 0s linear .25s; }
.te-drawer.is-open .te-drawer-body { visibility:visible; opacity:1; transition:opacity .3s .12s, visibility 0s; }
.te-drawer-title { margin:0 0 8px; font-family:'Spectral',serif; font-style:italic; font-weight:400; font-size:26px; line-height:1.2; color:rgba(234,224,196,.92); text-transform:none; }
.te-drawer-sub { margin:0 0 18px; font-family:'DM Sans',sans-serif; font-size:13.5px; line-height:1.6; color:var(--te-mute); }
.te-drawer .te-ask { margin:0; }
.te-drawer .te-ask-form { padding:0; border:0; background:none; }
.te-drawer .te-ask-q { min-height:96px; background:rgba(255,255,255,.05); }
.te-scroll.has-drawer { padding-right:72px; transition:opacity .3s, transform .38s var(--te-ease); }
.te-scroll.has-drawer.is-receded { opacity:.45; transform:scale(.97) translateX(-18px); }
@media (max-width:640px) { .te-scroll.has-drawer { padding-right:60px; } .te-drawer-body { padding-top:32px; } .te-drawer-tab { padding-top:40px; } }

/* Motion: only for people who have not asked for less */
@keyframes teRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes teNudge { 0%, 100% { opacity:.55; transform:scaleY(.85); } 50% { opacity:1; transform:scaleY(1); } }
@keyframes teBeat { 0%, 100% { box-shadow:0 0 0 2px #0F0F0E, 0 0 0 4px var(--te-tc); } 50% { box-shadow:0 0 0 2px #0F0F0E, 0 0 0 7px rgba(157,187,149,.3); } }
@media (prefers-reduced-motion:no-preference) {
  .te-rise .te-orow, .te-rise .te-tile, .te-rise .te-row, .te-rise .te-stat, .te-rise .te-detail { animation:teRise .5s var(--te-ease) both; }
  .te-rise .te-orow:nth-child(2), .te-rise .te-tile:nth-child(2), .te-rise .te-row:nth-child(2) { animation-delay:.05s; }
  .te-rise .te-orow:nth-child(3), .te-rise .te-tile:nth-child(3), .te-rise .te-row:nth-child(3) { animation-delay:.1s; }
  .te-rise .te-orow:nth-child(4), .te-rise .te-tile:nth-child(4), .te-rise .te-row:nth-child(4) { animation-delay:.15s; }
  .te-rise .te-orow:nth-child(5), .te-rise .te-row:nth-child(5) { animation-delay:.2s; }
  .te-rise .te-orow:nth-child(n+6), .te-rise .te-row:nth-child(n+6) { animation-delay:.25s; }
  .te-drawer-bar { animation:teNudge 2.4s ease-in-out infinite; }
  .te-orow-btn.has-dot::before { animation:teBeat 2.2s ease-in-out infinite; }
}
@media (prefers-reduced-motion:reduce) {
  .te-orow-btn, .te-orow-btn::before, .te-orow-btn::after, .te-tile, .te-ico, .te-field, .te-chip, .te-subtab, .te-row, .te-drawer, .te-drawer-body, .te-scroll.has-drawer, .te-matform > .te-audience > .te-radio > span, .te-pick .te-radio, .te-primary { transition:none; }
  .te-orow-btn:hover:not(:disabled), .te-tile:hover, .te-primary:hover:not(:disabled), .te-field:focus-within, .te-matform > .te-audience > .te-radio:hover > span, .te-backlink:hover:not(:disabled) { transform:none; }
  .te-scroll.has-drawer.is-receded { transform:none; }
}

/* Teacher — lists that grow: a search box, "Show more", and section tabs that stay in view while a long list scrolls. */
.te-subtabs { position:sticky; top:-44px; z-index:6; background:#0F0F0E; padding-top:10px; margin-top:10px; }   /* -44px = the scroller's own top padding, so the strip sits flush under the top bar */
@media (max-width:640px) { .te-subtabs { top:-28px; } }
.te-listtop:empty, .te-listfoot:empty { display:none; }
.te-listtop { margin:0 0 16px; }
.te-listtop .te-field { max-width:420px; }
.te-listfoot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:18px 0 0; }
.te-listfoot .te-count { margin:0; font-size:14px; }
.te-more { border-radius:999px; padding:0 20px; min-height:40px; border:.5px solid rgba(157,187,149,.5); color:var(--te-ink); background:rgba(157,187,149,.08); cursor:pointer; }
.te-more:hover { background:rgba(157,187,149,.18); }
.te-tiles + .te-listtop { margin-top:0; }

/* Leave teacher — a quiet button on the teacher's own row (My Teachers only). Armed (focused), it drops below the row so the full warning has room. */
@media (min-width:641px) {
  .te-orow > .te-btn.te-leave { position:absolute; right:58px; top:50%; transform:translateY(-50%); margin:0; min-height:32px; padding:0 12px; font-size:12.5px; opacity:.55; border-color:transparent; background:transparent; transition:opacity .2s; }
  .te-orow:hover > .te-btn.te-leave, .te-orow > .te-btn.te-leave:focus, .te-orow > .te-btn.te-leave:focus-visible { opacity:1; }
  .te-orow > .te-btn.te-leave:focus { position:static; transform:none; margin:8px 0 0 62px; border-color:rgba(230,226,220,.14); }
  .te-orow.te-hasleave .te-orow-title, .te-orow.te-hasleave .te-orow-btn .te-row-meta { margin-right:140px; }
}
@media (max-width:640px) { .te-orow > .te-btn.te-leave { border:0; background:none; padding:0 4px; min-height:36px; margin:0 0 0 48px; font-size:13px; opacity:.7; } .te-orow > .te-btn.te-leave:focus { opacity:1; } }

/* ── Guided Material brief (Slice 1) ── chips reuse .te-chip; only spacing and the "More options" block are new */
.te-ai .te-field-bare { margin:0 0 16px; }
.te-ai .te-field-bare > .te-label { display:block; margin:0 0 8px; }
.te-ai .te-selchips { flex-wrap:wrap; }
.te-ai .te-selchips .te-chip { height:auto; min-height:34px; padding:6px 14px; white-space:normal; text-align:left; }
.te-ai-more { margin:6px 0 14px; padding:0 0 4px; border-top:.5px solid var(--te-rule); }
.te-ai-more > .te-ai-sum { padding-top:12px; }
.te-ai-more > .te-ai-sum::after { content:'+'; margin-left:auto; font-size:18px; letter-spacing:0; color:var(--te-mute); }
.te-ai-more[open] > .te-ai-sum::after { content:'–'; }
@media (max-width:640px) { .te-ai .te-selchips .te-chip { min-height:44px; } }

/* Teacher Material video (Slice 3): click-to-load player, 16:9, never wider than the page */
.te-vframe { position:relative; width:100%; max-width:720px; aspect-ratio:16 / 9; background:#0c0c0c; border:.5px solid rgba(255,255,255,.12); border-radius:10px; overflow:hidden; margin:4px 0 10px; }
.te-vframe iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.te-vidle { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.te-vplay { min-height:44px; padding:0 22px; border-radius:999px; border:.5px solid rgba(212,137,109,.6); background:rgba(212,137,109,.12); color:var(--te-cream); cursor:pointer; font:inherit; }
.te-vplay:hover, .te-vplay:focus-visible { background:rgba(212,137,109,.22); }
.te-vhint { margin-top:6px; }

/* Slice 4 — Learn with île (transient conversation panel + teacher toggle) */
.te-learn-ctx { margin:6px 0 12px; }
.te-learn-log { display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
.te-learn-turn { display:flex; flex-direction:column; gap:3px; }
.te-learn-text { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.55; color:var(--te-ink); padding:10px 12px; border-left:2px solid rgba(234,224,196,.3); background:rgba(255,255,255,.03); border-radius:0 8px 8px 0; }
.te-learn-you .te-learn-text { border-left-color:var(--te-tc); background:rgba(255,255,255,.06); }
.te-learn-q { width:100%; box-sizing:border-box; margin:0 0 8px; }
.te-learn-ctl { flex-basis:100%; display:flex; flex-direction:column; gap:6px; margin:0 0 6px; }

/* Slice 5 — île language practice note (Teacher thread card) */
.te-learn-disclosure { margin:0 0 12px; }
.te-lnote { list-style:none; margin:10px 0; padding:12px 14px; border:1px solid rgba(234,224,196,.28); border-left:3px solid var(--te-tc); border-radius:10px; background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:6px; }
.te-lnote { color:var(--te-ink); }
.te-lnote-head { font-weight:600; color:var(--te-ink); }
.te-lnote-row { display:flex; flex-direction:column; gap:2px; }
.te-lnote-label { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--te-mute); }
.te-lnote-text { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; color:var(--te-ink); }
.te-lnote-foot { margin:4px 0 0; }

/* P2 — Practice: one answer box per item (composed into one ordinary response) and the private help row. */
.te-item-answers { display:flex; flex-direction:column; gap:12px; margin:12px 0; }
.te-item-answer { display:flex; flex-direction:column; gap:6px; }
.te-item-label { color:var(--te-ink); line-height:1.5; overflow-wrap:anywhere; font-weight:500; }
.te-item-box { width:100%; box-sizing:border-box; }
.te-practice-help { margin:10px 0; }
.te-perms { display:flex; flex-direction:column; gap:6px; }
.te-check { display:flex; align-items:center; gap:8px; color:var(--te-ink); }

/* ═══ U1 · Teacher workspace ═══ (presentation only; appended so every earlier rule and its verifier still stand)
   Wide shell · left rail + "+ New" · phone strip · list/detail from 1100px · Feedback · creator groups and preview · leave-confirm. */
/* the teacher workspace is the only view carrying .te-tview; :has() lets the width rules follow it without naming ids */
.te-scroll:has(.te-tview) { padding-left:clamp(16px, 3vw, 48px); padding-right:clamp(16px, 3vw, 48px); }
.te-root:has(.te-tview), .te-scroll:has(.te-tview) .te-status { max-width:none; }
.te-view.te-tview { max-width:none; margin:0; }
.te-tview .te-masthead { max-width:760px; }

/* phones and tablets: + New and Profile on one row, then the four destinations in equal columns (no sideways scrolling) */
.te-rail2 { position:sticky; top:-28px; z-index:6; background:#0F0F0E; padding-top:6px; }
.te-newrow { display:flex; gap:10px; align-items:stretch; margin:0 0 4px; }
.te-newrow .te-new { flex:1 1 auto; min-height:44px; font-size:15px; }
.te-newrow .te-new[aria-current] { box-shadow:inset 0 0 0 2px rgba(234,224,196,.6); }   /* the open creator keeps the sage button and gains a ring, never a greyed look */
.te-newrow .te-acct { flex:0 0 auto; min-height:44px; padding:0 16px; }
.te-tview .te-tnav { position:static; top:auto; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2px; margin:0 0 18px; overflow:visible; flex-wrap:nowrap; padding-top:0; background:none; }
.te-tview .te-tnav .te-subtab { min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 2px; font-size:13.5px; }
.te-tview .te-tnav .te-subtab-profile { display:none; }
.te-tview .te-tnav .te-subtab.has-dot::after { top:10px; right:calc(50% - 38px); }
.te-shellmain { min-width:0; }

/* desktop: left rail */
@media (min-width:900px) {
  .te-shell { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:0 clamp(28px, 3vw, 48px); align-items:start; }
  .te-rail2 { top:12px; padding-top:0; background:none; }
  .te-newrow { margin:0 0 18px; }
  .te-newrow .te-acct { display:none; }
  .te-tview .te-tnav { display:flex; flex-direction:column; gap:2px; margin:0; border-bottom:0; }
  .te-tview .te-tnav .te-subtab { justify-content:flex-start; text-align:left; padding:0 14px; font-size:15px; border-bottom:0; margin:0; border-left:2px solid transparent; box-shadow:none; position:relative; }
  .te-tview .te-tnav .te-subtab.active { border-left-color:var(--te-tc); background:rgba(255,255,255,.04); }
  .te-tview .te-tnav .te-subtab-profile { display:flex; }
  .te-tview .te-tnav .te-subtab.has-dot::after { top:50%; right:14px; margin-top:-3px; }
}

/* list / detail: one at a time below 1100px (the list, or the opened item with its back link); both from 1100px */
.te-md-list, .te-md-detail { min-width:0; }
.te-md:not(.te-open) .te-md-detail { display:none; }
.te-md.te-open .te-md-list { display:none; }
.te-mdph { margin:0; color:var(--te-mute); font-family:'Spectral',serif; font-style:italic; font-size:17px; }
.te-md-list .is-current .te-orow-btn, .te-md-list .te-row.is-current { background:rgba(234,224,196,.07); border-color:rgba(234,224,196,.28); }
.te-fbswitch { margin:0 0 14px; }
.te-limit { margin:10px 0 0; padding:8px 12px; border-left:2px solid rgba(234,224,196,.3); color:var(--te-mute); }
.te-threadpane > .te-spacehead { margin-top:6px; }
.te-notelist { margin-top:8px; }
@media (min-width:1100px) {
  .te-md { display:grid; grid-template-columns:minmax(280px, 380px) minmax(0, 1fr); gap:0 clamp(28px, 3vw, 56px); align-items:start; }
  .te-md:not(.te-open) .te-md-detail { display:block; }
  .te-md.te-open .te-md-list { display:block; }
  .te-md .te-mdback { display:none; }
  .te-md-detail .te-thread, .te-md-detail .te-notespane, .te-md-detail .te-practice { max-width:760px; }
  .te-md-detail { border-left:.5px solid var(--te-rule); padding-left:clamp(24px, 2.4vw, 44px); }
}

/* creator: sections, and the preview beside the form from 1100px (stacked under it on phones) */
.te-fgroup { margin:26px 0 10px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--te-mute); }
.te-matform > .te-fgroup:first-child, .te-matform > .te-ai + .te-fgroup, .te-matform > .te-ai-tag + .te-fgroup { margin-top:18px; }
.te-fgroup-sub { display:block; margin-top:4px; font-weight:400; letter-spacing:0; text-transform:none; font-size:13px; color:rgba(230,226,220,.5); }
.te-support { margin:0 0 6px; }
.te-create-form { min-width:0; max-width:760px; }
.te-preview { margin-top:30px; padding:18px 20px; border:.5px dashed rgba(234,224,196,.28); border-radius:14px; background:rgba(255,255,255,.02); }
.te-pv-tag { margin:0 0 12px; font-family:'DM Sans',sans-serif; font-size:12px; letter-spacing:.06em; color:var(--te-mute); }
.te-pv-card { padding:16px 18px; border:.5px solid rgba(255,255,255,.12); border-radius:12px; }
.te-pv-title.is-empty { color:var(--te-mute); font-style:italic; }
.te-pv-answers { display:grid; gap:12px; margin:14px 0 4px; }
.te-pv-box { min-height:46px; margin-top:6px; border:.5px solid rgba(255,255,255,.18); border-radius:10px; }
.te-pv-help { margin:14px 0 0; font-size:13px; color:var(--te-mute); }
.te-pv-pill { display:inline-block; margin-left:6px; padding:3px 10px; border:.5px solid rgba(234,224,196,.3); border-radius:12px; font-size:12px; color:var(--te-cream, #EAE0C4); }
.te-pv-foot { margin:10px 0 0; }
@media (min-width:1100px) {
  .te-create-grid { display:grid; grid-template-columns:minmax(0, 720px) minmax(320px, 560px); gap:0 clamp(32px, 3vw, 56px); align-items:start; }
  .te-preview { margin-top:0; position:sticky; top:12px; }
}

/* leaving an unsaved creator */
.te-leaveconfirm { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 16px; padding:12px 16px; border:.5px solid rgba(234,224,196,.35); border-radius:12px; background:rgba(234,224,196,.06); }
.te-leaveconfirm-text { flex:1 1 220px; margin:0; font-family:'DM Sans',sans-serif; font-size:14.5px; color:var(--te-ink); }
.te-leaveconfirm .te-btn { min-height:44px; }

/* U1 · box roles (refinement of the existing patterns: the selected, focused, error and advisory states are readable without colour or motion) */
.te-tile.active::before { content:'Selected'; position:absolute; top:12px; right:14px; font-family:'DM Sans',sans-serif; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--k, var(--te-tc)); }
.te-tile.active { box-shadow:inset 0 0 0 1px var(--k, var(--te-tc)); }
.te-field:not(.te-field-bare):has([aria-invalid="true"]) { border-color:#e8a0a0; background:rgba(232,160,160,.06); box-shadow:0 0 0 3px rgba(232,160,160,.14); }
.te-field:has([aria-invalid="true"]) .te-label { color:#e8a0a0; }
.te-md-list .is-current .te-orow-btn { box-shadow:inset 3px 0 0 var(--te-tc); }
.te-md-list .te-orow-btn[aria-current="true"]::after { color:var(--te-tc); }
.te-lnote-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.te-lnote-head::after { content:'Advisory · read-only'; padding:2px 9px; border:.5px solid rgba(234,224,196,.35); border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:400; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--te-mute); }
.te-preview { background:transparent; }
.te-preview .te-pv-card { background:rgba(255,255,255,.015); }
.te-field:not(.te-field-bare):has(:disabled) { opacity:.6; }
@media (prefers-reduced-motion:reduce) {
  .te-scroll textarea.te-compose { transition:none; }
  .te-tile.active, .te-md-list .is-current .te-orow-btn { transition:none; }
}

/* ── D1-A · Draft with île and the Material/Practice form (presentation only) ──
   A free-form request first; guidance optional; one inline question before replacing; requirement captions; item-line state. */
.te-ai-request { min-height:7.5em; }
.te-ai-guide { margin:6px 0 10px; }
.te-ai-gsum { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin:2px 0 10px; }
.te-ai-gsum[hidden], .te-rv-now[hidden], .te-inactive[hidden], .te-linecount[hidden], .te-ai-confirm[hidden] { display:none; }
.te-ai-confirm { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:6px 0 10px; padding:12px 14px; border-left:2px solid var(--te-sage-line); background:var(--te-sage-fill); border-radius:0 8px 8px 0; }
.te-ai-confirm > p { flex:1 1 100%; margin:0; }
.te-rv-then, .te-rv-now { margin:0 0 6px; }
.te-rv-now { color:var(--te-ink); }
.te-ai-rcount { margin:6px 0 0; }
.te-need { margin:-6px 0 12px; }
.te-linecount { margin:4px 0 0; text-align:right; }
.te-inactive { margin:6px 0 0; padding:8px 12px; border-left:2px solid var(--te-rule); }
.te-field.is-inactive .te-fi { opacity:.65; }

/* ── D1-B · the creator overlay (one overlay; chooser or one form; on-demand Preview; Expand to write) ──
   Presentation only. Sage/graphite tokens, opaque panel, no blur, no animation. Phones: the panel fills the screen. */
.te-overlay { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; background:rgba(8,8,7,.8); }
.te-ov-panel { position:relative; display:flex; flex-direction:column; width:min(920px, 100%); max-height:100%; box-sizing:border-box; overflow:hidden; background:#0F0F0E; border:.5px solid var(--te-rule); border-radius:16px; }
.te-ov-head { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:.5px solid var(--te-rule); }
.te-ov-title { flex:1 1 auto; margin:0; font-family:'Spectral',serif; font-weight:400; font-size:21px; color:var(--te-cream); }
.te-ov-head .te-btn { min-height:44px; }
.te-ov-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 22px 0; }
.te-ov-body .te-tiles { margin-bottom:22px; }
.te-ov-stick { position:sticky; bottom:0; z-index:2; margin:20px -22px 0; padding:10px 22px 12px; background:#0F0F0E; border-top:.5px solid var(--te-rule); }
.te-ov-stick .te-commitbar { margin:0; }
.te-ov-stick .te-formmsg { margin:0 0 8px; }
.te-notshared { margin:0 0 0 auto; }
.te-ov-pvwrap { padding-bottom:22px; }
.te-ov-pvbar { margin:0 0 14px; }
.te-ov-preview { margin-top:0; position:static; }
.te-ex-tools { display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.te-ex-title, .te-ex-count { display:none; }
.te-ex-tools .te-ex-btn { margin-left:auto; }
.te-exwrap.is-expanded { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; box-sizing:border-box; padding:16px 22px 18px; background:#0F0F0E; }
.te-exwrap.is-expanded .te-ex-tools { order:-1; margin:0 0 12px; }
.te-exwrap.is-expanded .te-ex-title { display:block; font-family:'Spectral',serif; font-size:19px; color:var(--te-cream); }
.te-exwrap.is-expanded .te-ex-count { display:block; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--te-mute); }
.te-exwrap.is-expanded > .te-field { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; margin:0; }
.te-exwrap.is-expanded textarea { flex:1 1 auto; min-height:0; height:100%; }
@media (max-width:640px) {
  .te-overlay { padding:0; }
  .te-ov-panel { width:100%; height:100%; max-height:none; border:0; border-radius:0; }
  .te-ov-body { padding:14px 16px 0; }
  .te-ov-stick { margin:16px -16px 0; padding:10px 16px 12px; }
  .te-exwrap.is-expanded { padding:12px 16px 16px; }
}
.te-ov-change[hidden], .te-ov-pvwrap[hidden], .te-ov-formhost[hidden], .te-exwrap[hidden] { display:none; }
.te-ov-formhost .te-matform { margin-bottom:0; padding-bottom:0; }
.te-exwrap.is-expanded { margin:0; }

/* ── D1-B polish · calm interactions, consistent checkboxes, guidance spacing (presentation only) ──
   Nothing moves, lifts or scales when hovered, focused, pressed or when a view changes; colour and border feedback stay. */
.te-scroll { scrollbar-gutter:stable; }
.te-btn:hover:not(:disabled), .te-chip:hover { transform:none; }
.te-btn:active:not(:disabled) { transform:none; }
.te-cp-card:hover { transform:none; }
.te-orow-btn:hover:not(:disabled), .te-orow-btn:hover:not(:disabled)::before, .te-orow-btn:hover:not(:disabled)::after, .te-orow-btn:active:not(:disabled) { transform:none; }
.te-backlink:hover:not(:disabled) { transform:none; }
.te-tile:hover, .te-tile:hover .te-ico { transform:none; }
.te-field:not(.te-field-bare):focus-within { transform:none; }
.te-matform > .te-audience > .te-radio:hover > span { transform:none; }
.te-primary:hover:not(:disabled), .te-primary:active:not(:disabled) { transform:none; }
.te-enter { animation-name:none; }
.te-rise .te-orow, .te-rise .te-tile, .te-rise .te-row, .te-rise .te-stat, .te-rise .te-detail { animation-name:none; }
.te-check input[type=checkbox] { -webkit-appearance:none; appearance:none; width:20px; height:20px; margin:0; flex:none; cursor:pointer; border:1.5px solid rgba(230,226,220,.5); border-radius:5px; background:transparent no-repeat center / 14px; accent-color:#9DBB95; color-scheme:dark; }
.te-check input[type=checkbox]:checked { background-color:#9DBB95; border-color:#9DBB95; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%230F1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.te-check input[type=checkbox]:focus-visible { outline:2px solid var(--te-ring); outline-offset:2px; }
.te-check input[type=checkbox]:disabled { opacity:.4; cursor:not-allowed; }
.te-perms { gap:10px; }
.te-perms > .te-label { margin-bottom:4px; }
.te-check { gap:10px; }
.te-check-note { margin:0 0 10px 28px; }
.te-learnhint { margin:2px 0 0; }
.te-ai-more.te-ai-guide > * + * { margin-top:22px; }
.te-ai-more.te-ai-guide > summary + .te-note { margin-top:10px; }

/* D1-B2: one guided question at a time (sentence, optional hint, then the controls that answer it). */
.te-ai-more.te-ai-guide > .te-ai-qgroup { display: grid; gap: 10px; }
.te-ai-qgroup > * { margin: 0; }
.te-ai-qgroup > .te-ai-q { font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.te-ai-qgroup .te-ai-grid { margin: 0; }
.te-ai-qgroup .te-field > .te-label.te-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; }
.te-ai-qgroup > .te-ai-q + .te-note { margin-top: -4px; }

/* Student workspace: a header and four cards; each card opens a popup (the same overlay look as the creator) */
.te-dash { display:flex; flex-direction:column; gap:18px; margin-top:6px; }
.te-dashhead { display:flex; align-items:center; gap:16px; padding:18px 22px; border-bottom:.5px solid var(--te-rule); }
.te-dashic { display:grid; place-items:center; width:40px; height:40px; color:var(--te-cream); }
.te-dashic .te-ic { width:22px; height:22px; }
.te-dashname { margin:0; font-family:'Spectral',serif; font-weight:400; font-size:26px; line-height:1.2; color:var(--te-cream); overflow-wrap:anywhere; }
.te-dashsub { margin:4px 0 0; font-size:14px; color:var(--te-faint); }
.te-dashgrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.te-dashcard { display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; box-sizing:border-box; min-height:150px; padding:20px 22px; cursor:pointer; color:var(--te-cream);
  border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.02); font:inherit; }
.te-dashcard:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.045); }
.te-dashcard:focus-visible { outline:2px solid var(--te-tc); outline-offset:2px; }
.te-dashtitle { display:flex; align-items:center; gap:10px; font-family:'Spectral',serif; font-size:20px; color:var(--te-cream); }
.te-dashtitle .te-ic { width:20px; height:20px; flex:0 0 auto; }
.te-dashtext { font-size:15px; line-height:1.5; color:var(--te-faint); }
.te-dashstatus { margin-top:auto; font-size:14px; color:var(--te-cream); }
.te-popwrap { z-index:210; }
.te-pop { width:min(760px, 100%); }
.te-pop-body { padding-bottom:22px; }
.te-pop-body .te-msgs { max-height:none; }
.te-popview > .te-note { margin-top:0; }
@media (max-width:640px) { .te-dashgrid { grid-template-columns:1fr; } .te-dashcard { min-height:0; } .te-dashname { font-size:22px; } .te-pop-body { padding-bottom:16px; } }

/* The student space: a full-screen layer for one student (the list stays behind it); popups open over it */
.te-swwrap { padding:0; background:#0F0F0E; }
.te-sw { width:100%; height:100%; max-height:none; border:0; border-radius:0; }
.te-sw-head { padding:10px clamp(16px, 4vw, 48px); }
.te-sw-head .te-backlink { margin:0; }
.te-sw-body { padding:18px clamp(16px, 4vw, 48px) 48px; }
.te-sw-body > * { max-width:1040px; margin-left:auto; margin-right:auto; }
.te-pop-body .te-practicetools { margin:0 0 12px; }
.te-pop-body .te-listtop { margin:0 0 12px; }
.te-pop-body .te-notelist { gap:14px; }

/* Notes shelves: a collapsed note shows its header and one preview line; a click opens it. */
.te-lnote-shelf { padding:0; gap:0; }
.te-lnote-toggle { display:grid; grid-template-columns:1fr auto; gap:3px 12px; align-items:center; width:100%; padding:12px 14px; background:none; border:0; border-radius:10px; color:var(--te-ink); text-align:left; font:inherit; cursor:pointer; }
.te-lnote-toggle:hover { background:rgba(255,255,255,.05); }
.te-lnote-toggle:focus-visible { outline:2px solid var(--te-tc); outline-offset:-2px; }
.te-lnote-toggle .te-lnote-sub { grid-column:1; }
.te-lnote-peek { grid-column:1; color:var(--te-mute); font-size:14px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.te-lnote.open .te-lnote-peek { display:none; }
.te-lnote-chev { grid-column:2; grid-row:1 / span 3; font-size:13px; color:var(--te-tc); }
.te-lnote-body { display:flex; flex-direction:column; gap:6px; padding:0 14px 14px; border-top:1px solid rgba(234,224,196,.18); padding-top:12px; }
.te-lnote-body[hidden] { display:none; }

/* A popup hangs from the top instead of being centred: the reply box grows when focused and shrinks when blurred, and a centred panel would slide its header (Back / Close) between mouse-down and mouse-up, losing the click. */
.te-popwrap { align-items:flex-start; padding-top:max(24px, 6vh); }

/* LT2 · Feedback page, and the five learner sections on a phone: one row that scrolls sideways, with a soft edge while more is hidden (the open section is kept in view by the page) */
.te-feedback > .te-note { margin:0 0 14px; }
.te-orow-btn.te-fb-row { grid-template-areas:"mono title soon chev" "mono meta soon chev" "mono prev prev chev"; }
.te-fb-prev { grid-area:prev; margin-top:4px; color:var(--te-mute); font-size:14px; line-height:1.4; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.te-fb-prev b { font-weight:500; color:var(--te-cream); }
@media (max-width:640px) { .te-orow-btn.te-fb-row { grid-template-areas:"mono title chev" "mono meta chev" "prev prev prev"; } }
.te-fb-open { margin-top:18px; flex-direction:column; align-items:flex-start; gap:10px; }
@media (max-width:560px) {
  .te-subtabs.te-lstrip { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:2px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .te-subtabs.te-lstrip::-webkit-scrollbar { display:none; }
  .te-subtabs.te-lstrip .te-subtab { flex:0 0 auto; white-space:nowrap; font-size:13px; letter-spacing:0; }
  .te-subtabs.te-lstrip.more { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); }
  .te-subtabs.te-lstrip.lead { -webkit-mask-image:linear-gradient(to right,transparent,#000 34px); mask-image:linear-gradient(to right,transparent,#000 34px); }
  .te-subtabs.te-lstrip.lead.more { -webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent); }
}

/* LT3 · a title or page that takes focus programmatically (so a keyboard or screen-reader user is not left on the page body) shows no ring of its own */
#teRoot [tabindex="-1"]:focus, .te-view [tabindex="-1"]:focus { outline:none; }