/* Light theme for the study section. Dark stays the default; the choice is shared with the home page. */
:root:not([data-theme="light"]){ --text-dim:#7A8291; }
:root[data-theme="light"]{
  --bg:#F6F5F1; --panel:#FFFFFF; --panel-border:#DDD9CE;
  --text:#15181E; --text-muted:#4F5664; --text-dim:#6B7280;
  --accent:#15803D; --gold:#B45309;
  --easy:#15803D; --medium:#B45309; --hard:#DC2626;
}
.theme-toggle{
  position:absolute; top:16px; right:16px; z-index:20; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--panel-border); background:var(--panel); color:var(--text);
  font-size:15px; line-height:1; cursor:pointer; padding:0;
}
.theme-toggle:hover{ border-color:var(--accent); }

/* Reading mode (study/theme.js): a warmer version of the active theme. These selectors outrank the light
   rules above and each page's own :root colours. */
:root[data-theme="light"][data-reading="on"]{
  --bg:#F4ECD8; --panel:#FBF6EA; --panel-border:#DDCDAA;
  --text:#3A2E22; --text-muted:#5B4A38; --text-dim:#7C6852;
  --accent:#8E5A14; --gold:#A0561A;
  --easy:#3D7A36; --medium:#A0561A; --hard:#B3261E;
}
:root[data-reading="on"]:not([data-theme="light"]){
  --bg:#17130F; --panel:#221C16; --panel-border:#3A3026;
  --text:#EFE6D8; --text-muted:#C4B49F; --text-dim:#9A8A74;
  --accent:#E3A857; --gold:#EDBB74;
  --easy:#95C97F; --medium:#E3A857; --hard:#EF8A7C;
}
:root[data-reading="on"] body{ background:var(--bg); }
:root[data-theme="light"][data-reading="on"] ::selection{ background:#E8D3A2; color:#3A2E22; }
:root[data-reading="on"]:not([data-theme="light"]) ::selection{ background:#5A4428; color:#EFE6D8; }
.read-toggle{
  position:absolute; top:16px; right:58px; z-index:20; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--panel-border); background:var(--panel); color:var(--text);
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.read-toggle:hover{ border-color:var(--accent); }
/* On: filled with the accent colour. Off: outlined like the other toolbar buttons. */
.read-toggle[aria-pressed="true"]{ border-color:var(--accent); color:var(--bg); background:var(--accent); }
.read-toggle[aria-pressed="true"]:hover{ filter:brightness(1.08); }
.read-toggle:focus-visible, .theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Pages with the account button (DSA, Study home): it sits at right:58px, so move one step left, and the
   DSA list's "Surprise me" button (right:100px) one more step. */
body:has(.dsa-acct-btn) .read-toggle{ right:100px; }
body:has(.read-toggle) .f-surprise{ right:142px; }
/* DSA workspace bar: same row as the other buttons, and room for the third one. */
html.dsa-ws-on .read-toggle{ top:9px; }
html.dsa-ws-on body .dsa-ws-bar{ padding-right:146px; }
/* Mock interview in progress hides the toolbar buttons; hide this one too. */
.iv-mode .read-toggle, .iv-running .read-toggle{ display:none !important; }

/* DSA: links out to the practice sites */
.practice{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin:-12px 0 22px; }
.practice a{ color:var(--accent); }
.practice a:hover{ text-decoration:underline; }