/* study.nexuslanguages.com

   A reading page, not a dashboard. Everything that is not the text gets out of its way: the
   measure is a control rather than whatever the window happens to be, the colour schemes are
   the four that actually help somebody read, and focus mode dims everything except the line
   in front of you. */

:root{
  --study-size:19px;
  --study-leading:1.75;
  --study-measure:62ch;
  --study-ruler-y:-100px;
}
html[data-study-theme="paper"]{--bg:#f7f5f0;--bg-2:#fffdf8;--panel:#fffdf8;--panel-2:#f2eee5;--text:#1d1c19;--muted:#5f5b52;--line:#e0dace;--accent:#0f766e;--accent-2:#0e7490;--accent-text:#0b5f59}
html[data-study-theme="night"]{--bg:#0b1016;--bg-2:#121a23;--panel:#121a23;--panel-2:#0e151d;--text:#e8eef5;--muted:#93a2b3;--line:#22303d;--accent:#3fd0c9;--accent-2:#4aa8ff;--accent-text:#69ddd6}
html[data-study-theme="sepia"]{--bg:#f4ecd8;--bg-2:#fbf5e6;--panel:#fbf5e6;--panel-2:#efe4cb;--text:#3b2f1c;--muted:#6b5a3e;--line:#ddd0b0;--accent:#9a5b1f;--accent-2:#7c4a17;--accent-text:#7c4a17}
html[data-study-theme="contrast"]{--bg:#000;--bg-2:#0a0a0a;--panel:#0a0a0a;--panel-2:#000;--text:#fff;--muted:#d8d8d8;--line:#4a4a4a;--accent:#ffdd00;--accent-2:#00e5ff;--accent-text:#ffdd00}

html[data-study-font="serif"] .study-text{font-family:Georgia,"Iowan Old Style","Times New Roman",serif}
html[data-study-font="mono"] .study-text{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
html[data-study-font="dyslexic"] .study-text{font-family:"Atkinson Hyperlegible","Comic Sans MS",Verdana,sans-serif;letter-spacing:.012em;word-spacing:.09em}

.study-body{background:var(--bg);color:var(--text);margin:0;min-height:100vh}
.study-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.study-brand{display:flex;align-items:center;gap:11px}
.study-brand strong{display:block;font-size:16px}
.study-brand span{display:block;color:var(--muted);font-size:12px}
.study-bar-actions{display:flex;gap:8px}
.study-main{max-width:1100px;margin:0 auto;padding:20px 16px 80px;display:grid;gap:18px}

.study-open-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.study-open-row input[type=text]{flex:1;min-width:190px}
.study-file{display:inline-flex}
.study-file .secondary-button{display:inline-block}
.study-hint{color:var(--muted);font-size:13px;margin:0}

.study-shelf{margin-top:14px}
.study-shelf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.study-shelf-item{text-align:left;border:1px solid var(--line);background:var(--bg-2);color:var(--text);border-radius:12px;padding:10px 12px;min-width:0}
.study-shelf-item b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.study-shelf-item small{display:block;color:var(--muted);font-size:11px;margin-top:3px}

.study-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.study-tools #study-work{color:var(--muted);font-size:13px}

/* The text itself. Size, spacing and measure are the three controls that decide whether a page
   is readable, so all three are live. */
.study-text{font-size:var(--study-size);line-height:var(--study-leading);max-width:var(--study-measure);margin:0 auto;outline:0}
.study-text p{margin:0 0 1.1em}
.study-text p:last-child{margin-bottom:0}
.study-text mark.key-line{background-color:transparent;color:inherit;border-radius:3px;padding:1px 2px;margin:0 -2px;background-image:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 14%,transparent));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .7s cubic-bezier(.22,.61,.36,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.study-text mark.key-line.lit{background-size:100% 100%}
.study-text mark.spoken-word{background:color-mix(in srgb,var(--accent) 36%,transparent);color:inherit;border-radius:4px;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Focus: everything but the paragraph under the pointer steps back. Reading a long page with a
   condition that makes lines swim is what this is for. */
.study-focus-on .study-text p{opacity:.42;transition:opacity .18s}
.study-focus-on .study-text p:hover,.study-focus-on .study-text p:focus-within{opacity:1}
.study-focus-on .study-bar,.study-focus-on .study-notebooks,.study-focus-on .study-tools{opacity:.5}
.study-focus-on .study-bar:hover,.study-focus-on .study-notebooks:hover,.study-focus-on .study-tools:hover{opacity:1}

/* The ruler follows the pointer and marks the line being read. */
.study-ruler-on::after{content:"";position:fixed;left:0;right:0;top:var(--study-ruler-y);height:2px;background:color-mix(in srgb,var(--accent) 70%,transparent);pointer-events:none;z-index:15}
.study-ruler-on::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--study-ruler-y) - 14px);background:color-mix(in srgb,var(--bg) 62%,transparent);pointer-events:none;z-index:14}

.study-notebook-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.study-notebook-tabs .tab small{opacity:.7;margin-left:5px}
.study-notes{display:grid;gap:12px}
.study-note{border:1px solid var(--line);border-radius:16px;background:var(--bg-2);padding:14px 16px}
.study-note header{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.study-note header h3{margin:0;font-size:15px}
.study-note header small{color:var(--muted);font-size:11px}
.study-note header .link-tool{margin-left:auto}
.study-note ul{margin:0;padding-left:18px;display:grid;gap:7px}
.study-note li{line-height:1.5}
.study-note li b{color:var(--accent-text,var(--accent))}

/* The map: every note grouped by the word it is about, sized by how much you have on it, so a
   thin patch is visible rather than something you have to go looking for. */
.study-map-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.study-map-node{border:1px solid color-mix(in srgb,var(--accent) calc(20% + var(--weight) * 45%),var(--line));background:color-mix(in srgb,var(--accent) calc(4% + var(--weight) * 14%),var(--panel));color:var(--text);border-radius:999px;padding:7px 13px;display:inline-flex;align-items:baseline;gap:7px}
.study-map-node b{font-size:calc(12px + var(--weight) * 5px)}
.study-map-node small{color:var(--muted)}

.study-check{display:flex;align-items:center;gap:9px}
.study-check input{width:auto}

@media(max-width:640px){
  .study-main{padding:14px 12px 90px}
  .study-bar{padding:10px 12px}
  .study-brand span{display:none}
  .study-text{--study-measure:100%}
}
@media(prefers-reduced-motion:reduce){
  .study-text mark.key-line{transition:none}
  .study-focus-on .study-text p{transition:none}
}