/* Material opens beside the day, not on another page and not on top of it.
   On a wide screen the day column becomes the document's outline. */
:root { --reader-w: max(calc(100vw - 340px), 60vw) }
/* With the app sidebar, the outline still gets ~300px of its own beside the reader. */
body.sp-shell { --reader-w: max(calc(100vw - var(--sp-side-w, 220px) - 310px), 50vw) }

#inline-reader{
  position:fixed; inset:0 0 0 auto; width:var(--reader-w);
  background:var(--card); border-left:1px solid var(--border);
  display:flex; flex-direction:column; z-index:1000;
}
#inline-reader[hidden]{display:none}
#inline-reader header{position:relative;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 18px;border-bottom:1px solid var(--border);background:var(--card)}
#inline-reader .ir-head{flex:1;min-width:0}
#inline-reader .ir-title{margin:0;font:600 .95rem/1.3 var(--font-head,inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Provenance: the teacher's own file, a StudyPal-made set, or an upload. */
#inline-reader .ir-sub{display:flex;align-items:center;gap:8px;margin:1px 0 0;min-width:0;font-size:.72rem;line-height:1.35;color:var(--text-secondary)}
#inline-reader .ir-cite{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#inline-reader .ir-cite:empty,#inline-reader .ir-time[hidden]{display:none}
#inline-reader .ir-time{flex:none;padding:1px 7px;border-radius:5px;background:var(--primary-light);color:var(--primary-dark);font-weight:600;font-variant-numeric:tabular-nums}
#inline-reader .ir-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
#inline-reader .ir-tools button{font:var(--ctl-font);min-height:var(--ctl-h);padding:0 12px;border:1px solid var(--border);border-radius:var(--ctl-r);background:var(--card);color:var(--text);cursor:pointer;white-space:nowrap}
#inline-reader .ir-tools button:hover{border-color:var(--primary);color:var(--primary-dark)}
#inline-reader .ir-tools button[hidden]{display:none}
#inline-reader .ir-tools .ir-wide,#inline-reader .ir-tools .ir-fs,#inline-reader .ir-size button{border-color:transparent;color:var(--text-secondary);background:none}
#inline-reader .ir-tools .ir-wide:hover,#inline-reader .ir-tools .ir-fs:hover,#inline-reader .ir-size button:hover:not(:disabled){border-color:transparent;color:var(--primary-dark);background:var(--primary-light)}
#inline-reader .ir-tools .ir-wide[aria-pressed="true"]{color:var(--primary-dark);background:var(--primary-light)}
#inline-reader .ir-tools .ir-wide::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;border:1.5px solid currentColor;vertical-align:1px}
#inline-reader .ir-tools .ir-wide[aria-pressed="true"]::before{background:var(--primary);border-color:var(--primary)}
#inline-reader .ir-size{display:inline-flex;align-items:center;padding-left:6px;margin-left:2px;border-left:1px solid var(--border)}
#inline-reader .ir-size button{padding:0 8px;font-weight:700;font-variant-numeric:tabular-nums}
#inline-reader .ir-size button:disabled{opacity:.35;cursor:default}
#inline-reader .ir-tools .ir-fs{width:var(--ctl-h);padding:0;display:inline-grid;place-items:center}
#inline-reader .ir-fs svg{width:15px;height:15px}
#inline-reader:fullscreen{width:100vw;border:0}
#inline-reader:fullscreen .ir-grip{display:none}
#inline-reader .ir-full{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;padding:0 6px}
#inline-reader .ir-full[hidden]{display:none}
#inline-reader .ir-body{flex:1;min-height:0;background:var(--bg)}
#inline-reader iframe{width:100%;height:100%;border:0;display:block}

/* Ask about this page: one slim line under the reading column. */
#inline-reader .ir-ask{display:flex;align-items:center;gap:6px;padding:7px 14px calc(7px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--card)}
#inline-reader .ir-ask[hidden]{display:none}
#inline-reader .ir-ask input{flex:1;min-width:0;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:var(--ctl-r,8px);background:var(--bg);color:var(--text);font:400 .88rem/1.2 var(--font-ui,inherit)}
#inline-reader .ir-ask input:focus{outline:none;border-color:var(--primary);background:var(--card);box-shadow:0 0 0 3px var(--primary-light)}
#inline-reader .ir-ask button{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:var(--ctl-r,8px);background:var(--primary-dark);color:#fff;cursor:pointer}
#inline-reader .ir-ask button:disabled{opacity:.5;cursor:wait}
#inline-reader .ir-ask svg{width:15px;height:15px}
#inline-reader .ir-answer{position:relative;margin:0 14px;max-height:min(38vh,320px);overflow:auto;padding:10px 34px 10px 14px;border:1px solid var(--border);border-bottom:0;border-radius:10px 10px 0 0;background:var(--card);box-shadow:0 -8px 24px rgba(24,52,62,.08);font:400 .9rem/1.5 var(--font-ui,inherit);color:var(--text)}
#inline-reader .ir-answer[hidden]{display:none}
#inline-reader .ir-answer p{margin:0 0 6px}
#inline-reader .ir-answer .ir-q{font-weight:700;color:var(--primary-dark)}
#inline-reader .ir-answer .ir-src{margin:4px 0 0;font-size:.74rem;color:var(--text-secondary)}
#inline-reader .ir-answer.busy p:last-child{color:var(--text-secondary)}
#inline-reader .ir-answer-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:6px;background:none;color:var(--text-secondary);font-size:1.05rem;line-height:1;cursor:pointer}
#inline-reader .ir-answer-x:hover{background:var(--primary-light);color:var(--primary-dark)}
body.reader-pdf #inline-reader .ir-ask,body.reader-pdf #inline-reader .ir-answer,body.reader-pdf #inline-reader .ir-size{display:none}

/* Thin progress line: in the outline on a wide screen, under the header otherwise. */
.ir-progress{height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.ir-progress i{display:block;height:100%;width:0;background:var(--primary);transition:width .15s linear}
#inline-reader .ir-progress-top{border-radius:0;height:2px;display:none}
body.reader-pdf .ir-progress{display:none !important}

/* Phone "Contents" dropdown. */
#inline-reader .ir-drop{position:absolute;top:52px;right:10px;left:10px;z-index:2;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(24,52,62,.16);max-height:60vh;overflow:auto;padding:6px}
#inline-reader .ir-drop[hidden]{display:none}

/* The outline list, shared by the side column and the dropdown. */
.ir-toc{list-style:none;margin:0;padding:0}
.ir-toc button{display:flex;gap:8px;align-items:baseline;width:100%;min-height:32px;padding:5px 10px;border:0;border-left:2px solid transparent;background:none;color:var(--text);font:400 .86rem/1.35 var(--font-ui,inherit);text-align:left;cursor:pointer}
.ir-toc button:hover{color:var(--primary-dark);background:var(--primary-light)}
.ir-toc button b{flex:0 0 1.3em;font-weight:600;font-size:.78rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
/* Read already: a small teal ✓ takes the number's place. */
.ir-toc button.done b{font-size:0;align-self:center}
.ir-toc button.done b::before{content:"✓";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--primary);color:var(--card);font-size:.62rem;font-weight:800;line-height:1}
.ir-toc button.done:not(.on){color:var(--text-secondary)}
.ir-toc button.on{border-left-color:var(--primary);color:var(--primary-dark);font-weight:700;background:var(--primary-light)}
.ir-toc button.on b{color:var(--primary-dark)}
.ir-toc li.sub button{padding-left:31px;font-size:.78rem;color:var(--text-secondary)}
.ir-toc li.sub button.on{color:var(--primary-dark)}

/* The side column while reading (wide screens only). */
#ir-outline{display:none}
@media (min-width: 900px){
  body.reader-open{ padding-right:var(--reader-w) }
  body.reader-open #app-nav{ padding-right:0 }
  /* While reading, the left column is only the outline: nothing else from the day. */
  body.reader-open .day-head,
  body.reader-open #day-loading,
  body.reader-open #day-context,
  body.reader-open #study-context-strip,
  body.reader-open #notes-section,
  body.reader-open #app-footer{ display:none !important }
  body.reader-open #ir-outline{
    display:flex; flex-direction:column; gap:10px;
    position:sticky; top:12px; max-height:calc(100vh - 24px); padding:4px 0 0;
  }
  body.reader-open #ir-outline{ height:calc(100vh - 24px) }
  #ir-outline .ir-back{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:0;border:0;background:none;font:600 .86rem/1.3 var(--font-ui,inherit);color:var(--text);cursor:pointer}
  #ir-outline .ir-back:hover{color:var(--primary-dark)}
  #ir-outline .ir-crumbs{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font:500 .76rem/1.4 var(--font-ui,inherit);color:var(--text-secondary)}
  #ir-outline .ir-crumbs i{font-style:normal;opacity:.6}
  #ir-outline .ir-crumbs b{color:var(--text);font-weight:700}
  #ir-outline .ir-meter{padding:10px 12px 11px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
  #ir-outline .ir-meter p{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px;font:500 .76rem/1.2 var(--font-ui,inherit);color:var(--text-secondary);font-variant-numeric:tabular-nums}
  #ir-outline .ir-meter b{font-size:.88rem;color:var(--primary-dark)}
  #ir-outline .ir-o-label{display:flex;justify-content:space-between;margin:6px 0 0;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
  #ir-outline .ir-count{font-weight:500;letter-spacing:0;text-transform:none}
  #ir-outline .ir-toc{flex:0 1 auto;min-height:0;overflow:auto;margin-left:-10px}
  body.reader-open:not(.reader-has-toc) #ir-outline .ir-o-label,
  body.reader-open:not(.reader-has-toc) #ir-outline .ir-toc{display:none}
  body.reader-pdf #ir-outline .ir-meter{display:none}
  #ir-outline .ir-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
  #ir-outline .ir-next{display:grid;gap:2px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);text-decoration:none}
  #ir-outline .ir-next[hidden]{display:none}
  #ir-outline .ir-next:hover{border-color:var(--primary)}
  #ir-outline .ir-next small{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
  #ir-outline .ir-next b{font:700 .88rem/1.3 var(--font-ui,inherit)}
  #ir-outline .ir-next span{font-size:.74rem;color:var(--text-secondary)}
  #ir-outline .ir-next span:empty{display:none}
  #ir-outline .ir-acts{display:flex;justify-content:space-between;gap:8px}
  #ir-outline .ir-acts button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 8px;margin:0 -8px;border:0;border-radius:var(--ctl-r,8px);background:none;font:600 .82rem/1.2 var(--font-ui,inherit);color:var(--text);cursor:pointer}
  #ir-outline .ir-acts button:hover,#ir-outline .ir-acts button[aria-pressed="true"]{background:var(--primary-light);color:var(--primary-dark)}
  #ir-outline .ir-acts button[hidden]{display:none}
  #ir-outline .ir-acts svg{width:15px;height:15px}
  #ir-outline .ir-asktutor:only-child,#ir-outline .ir-listen[hidden] + .ir-asktutor{margin-left:auto}
  body.reader-pdf #ir-outline .ir-acts{display:none}
  /* On a wide screen the breadcrumb names the page; the header keeps where it came from. */
  body.reader-open:not(.reader-full) #inline-reader .ir-title{display:none}
  #inline-reader .ir-toc-btn{display:none !important}

  /* Full guide: the material takes the whole screen. */
  body.reader-open.reader-full{ padding-right:0; overflow:hidden }
  body.reader-full #inline-reader{ width:100vw; border-left:0 }
  body.reader-full #inline-reader .ir-grip{ display:none }
  body.reader-full #inline-reader .ir-progress-top{ display:block }
}

/* Drag the edge to trade space between the day and the material. */
#inline-reader .ir-grip{
  position:absolute; left:-4px; top:0; bottom:0; width:9px; cursor:col-resize;
  background:transparent; border:0; padding:0;
}
#inline-reader .ir-grip:hover, #inline-reader .ir-grip:focus-visible{background:var(--primary-light,#cfe6e8)}
body.reader-sizing{user-select:none;cursor:col-resize}

/* No room to split a phone: the material takes the screen below the day header,
   so the day arrows and date stay usable; Back returns. */
@media (max-width: 899px){
  :root, body.sp-shell{ --reader-w:100vw }
  #inline-reader{width:100vw;border-left:0;top:var(--reader-top,0px);height:auto}
  #inline-reader .ir-grip,
  #inline-reader .ir-tools .ir-wide,
  #inline-reader .ir-tools .ir-fs,
  #inline-reader .ir-time{display:none !important}
  #inline-reader .ir-size{padding-left:0;margin-left:0;border-left:0}
  #inline-reader .ir-ask{padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px))}
  #inline-reader .ir-answer{margin:0 10px}
  #inline-reader header{padding:6px 10px 6px 14px;gap:8px}
  #inline-reader .ir-tools button{min-height:32px;padding:0 10px}
  #inline-reader .ir-progress-top{display:block}
  body.reader-open{overflow:hidden}
  /* Reading on a phone: the day header shrinks to its arrows so the material gets the screen. */
  body.reader-open .day-head h1,
  body.reader-open .day-head .day-facts,
  body.reader-open .day-head #today,
  body.reader-open #study-context-strip{display:none !important}
  body.reader-open .day-head{margin-bottom:0;padding-bottom:8px}
}

@media print{#inline-reader{position:static;width:auto;border:0}#inline-reader header{display:none}body.reader-open{padding-right:0}}

a.mat-chip.reading{ outline:2px solid var(--primary,#006b78); outline-offset:1px; background:var(--primary-light,#dcebea); color:var(--primary-dark,#004f59) }