/* Per-course reading preferences. The library keeps the original application theme. */
html[data-reading-theme] {
  --bg: var(--ui-bg);
  --bg-soft: var(--ui-panel-rail-bg);
  --surface: var(--ui-surface-1);
  --surface-2: var(--ui-surface-2);
  --surface-3: var(--ui-surface-3);
  --border: var(--ui-border);
  --border-strong: var(--ui-border-strong);
  --fg: var(--ui-text-1);
  --fg-soft: var(--ui-text-2);
  --muted: var(--ui-text-2);
  --shadow: var(--ui-shadow);
  --accent-strong: var(--accent-hover);
  --accent-2: var(--accent);
  --reading-paper-image: none;
  --reading-paper-size: auto;
  color-scheme: dark;
}
html[data-reading-theme][data-reading-mode="light"] {
  --ok: #237547;
  --warn: #865000;
  --danger: #b7313d;
  color-scheme: light;
}
html[data-reading-theme] body { background: var(--bg); }
html[data-reading-theme] ::selection { background: var(--ui-active); color: var(--fg); }
html[data-reading-theme] :where(button, input, select, textarea, summary, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* A small, always available reading toolbar; each preference has a native label. */
.reading-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 16px;
  min-height: 49px;
  padding: 7px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-soft);
  font-size: 12px;
}
.reading-controls-title { margin-right: auto; color: var(--fg); font-size: 11px; font-weight: 650; }
.reading-controls label { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; white-space: nowrap; }
.reading-controls input[type="range"] {
  width: 96px;
  height: 24px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.reading-controls output { min-width: 3ch; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.reading-controls input[data-tone="hue"] {
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(to right, #ff3333, #ffff33, #33ff33, #33ffff, #3333ff, #ff33ff, #ff3333) center / 100% 6px no-repeat;
}
.reading-controls input[data-tone="hue"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--fg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--surface);
}
.reading-controls input[data-tone="hue"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--fg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--surface);
}
.reading-controls button {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--fg-soft);
  cursor: pointer;
  white-space: nowrap;
  font-size: 11px;
}
.reading-controls button:hover { background: var(--ui-hover); color: var(--fg); }
.reading-controls .reading-hue-reset { min-width: 28px; margin-left: -10px; padding: 0; border-color: transparent; background: transparent; font-size: 17px; }
.reading-controls .reading-borders[aria-pressed="true"] { border-color: var(--accent-border-strong); background: var(--accent-subtle); color: var(--fg); }
.reading-controls :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reading-paper-control { gap: 9px !important; }
.reading-paper-control output { min-width: 68px; text-align: left; }
.paper-slider { display: grid; align-content: center; }
.paper-slider input[type="range"] { width: 104px; height: 20px; }
.paper-ticks { display: flex; justify-content: space-between; margin: -2px 5px 0; color: var(--muted); font-size: 8px; line-height: 10px; pointer-events: none; }

/* Replace fixed dark colors in application chrome and generated materials. */
html[data-reading-theme] :is(.topbar, .sidebar, .section-group > summary) { background: var(--ui-panel-bg); }
html[data-reading-theme] .topbar { backdrop-filter: none; }
html[data-reading-theme] .material-switch { background: var(--ui-panel-rail-bg); }
html[data-reading-theme] .material-switch button:hover { background: var(--ui-hover); }
html[data-reading-theme] .material-switch button.active { color: var(--accent-ink); background: var(--accent); }
html[data-reading-theme] .material-switch button.active .chk-icon { border-color: currentColor; }
html[data-reading-theme] .material-switch button.checked .chk-icon { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-reading-theme] .material-switch button.active.checked .chk-icon { border-color: currentColor; }
html[data-reading-theme] .chk-icon { border-color: var(--border-strong); }
html[data-reading-theme] :is(.brand-mark, .welcome-mark) { color: var(--accent-ink); background: var(--accent); box-shadow: 0 5px 15px var(--accent-subtle-2); }
html[data-reading-theme] .btn-primary { color: var(--accent-ink); }
html[data-reading-theme] .btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
html[data-reading-theme] .btn-new { color: var(--fg); background: var(--accent-subtle); border-color: var(--accent-border); }
html[data-reading-theme] .btn-new:hover:not(:disabled) { background: var(--accent-subtle-2); border-color: var(--accent-border-strong); }
html[data-reading-theme] .btn-danger { color: #fff; }
html[data-reading-theme][data-reading-mode="dark"] .btn-danger { color: #210a0b; }
html[data-reading-theme] .topic:hover { background: var(--ui-hover); }
html[data-reading-theme] .topic.active { background: var(--ui-active); border-left-color: var(--accent); }
html[data-reading-theme] .topic .dot:not(.ok):not(.busy) { background: var(--border-strong); }
html[data-reading-theme] .progress-bar { background: var(--ui-active); }
html[data-reading-theme] .progress-text { color: var(--fg); text-shadow: none; }
html[data-reading-theme] body[data-view="workspace"] .layout { height: calc(100dvh - var(--workspace-top, 120px)); }
html[data-reading-theme] .content { padding: 20px clamp(18px, 3vw, 42px) 70px; }
html[data-reading-theme] .viewer {
  min-width: 0;
  padding: clamp(20px, 3vw, 38px);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  background-color: var(--ui-surface-1);
  background-image: var(--reading-paper-image);
  background-size: var(--reading-paper-size);
  background-repeat: repeat;
  box-shadow: 0 4px 24px rgb(0 0 0 / 4%);
  overflow-wrap: break-word;
}
html[data-reading-theme] .viewer :is(h1, h2, h3, h4, h5, h6) { color: var(--fg); }
html[data-reading-theme] .viewer .block > h3 { color: var(--fg-soft); }
html[data-reading-theme] .viewer :is(code, pre, details, .formula, ul.tezis li, ol.quiz li, ol.problems > li) { background-color: var(--ui-card-bg); color: var(--fg); }
html[data-reading-theme] .viewer :is(ol.quiz details, ol.problems details) { background: transparent; }
html[data-reading-theme] .viewer .hero { border-color: var(--accent-border); background: var(--accent-subtle); }
html[data-reading-theme] .viewer .callout-key { background: var(--accent-subtle); }
html[data-reading-theme] .viewer .callout-tip { background: var(--accent-subtle); }
html[data-reading-theme] .viewer .callout-warn { background: color-mix(in srgb, var(--warn) 8%, transparent); }
html[data-reading-theme] .viewer :is(ol.quiz li, ol.problems > li)::before { color: var(--accent-ink); }
html[data-reading-theme] .viewer .formula-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
html[data-reading-theme] .viewer .formula { min-width: 0; }
html[data-reading-theme] .viewer .formula .vars { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
html[data-reading-theme] .viewer dl.defs { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
html[data-reading-theme] .viewer table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; color: var(--fg); }
html[data-reading-theme] .viewer :is(th, td) { padding: 9px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
html[data-reading-theme] .viewer th { background: var(--ui-card-bg); }
html[data-reading-theme] .viewer tr:nth-child(even) td { background: var(--accent-subtle); }
html[data-reading-theme] .viewer blockquote { margin: 16px 0; padding: 10px 16px; border-left: 3px solid var(--accent); background: var(--accent-subtle); }
html[data-reading-theme] .viewer hr { border: 0; border-top: 1px solid var(--border); }
html[data-reading-theme] .viewer figure.infographic { background: var(--ui-card-media-bg); }
html[data-reading-theme] .viewer .badge { border-color: var(--accent-border); background: var(--accent-subtle-2); }
html[data-reading-theme] .material-missing { background: var(--ui-card-bg); }
html[data-reading-theme] :is(.import-status-card, .outline-review) { background: var(--ui-panel-bg); box-shadow: var(--shadow); }
html[data-reading-theme] :is(.field input, .field select, .topic-title-input, .page-input, textarea) { background: var(--ui-input-bg); color: var(--fg); }
html[data-reading-theme] :is(.field input, .field select, .topic-title-input, .page-input, textarea):focus { box-shadow: 0 0 0 3px var(--ui-focus-ring); }
html[data-reading-theme] .outline-topic { border-bottom-color: var(--border); }
html[data-reading-theme] .add-topic:hover { color: var(--accent-hover); }
html[data-reading-theme] .import-steps li.active > span { color: var(--accent-ink); box-shadow: 0 0 0 5px var(--accent-subtle); }
html[data-reading-theme] .import-steps li.complete > span { color: var(--accent-ink); }
html[data-reading-theme] .modal-card { background: var(--ui-panel-elevated-bg); }
html[data-reading-theme][data-reading-mode="light"] .modal::backdrop { background: rgb(23 27 36 / 35%); }
html[data-reading-theme] .drop-zone:hover, html[data-reading-theme] .drop-zone.dragging { background: var(--accent-subtle); }
html[data-reading-theme] .drop-icon { background: var(--accent-subtle); border-color: var(--accent-border); }
html[data-reading-theme] :is(.status-badge, .form-status) { color: var(--fg); border-color: var(--accent-border); background: var(--accent-subtle); }
html[data-reading-theme] :is(.status-badge.ok, .form-status.ok) { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
html[data-reading-theme] :is(.status-badge.warn, .notice-list b) { color: var(--warn); }
html[data-reading-theme] :is(.status-badge.warn, .notice-list > div) { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
html[data-reading-theme] :is(.status-badge.danger, .form-status.err) { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
html[data-reading-theme] .file-details b { color: var(--ok); }
html[data-reading-theme] .drop-zone.has-file { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: var(--ok); }

/* Transparent, monochrome relief sits behind the material, never over images or text.
   SVG noise is desaturated and low-opacity, so it adapts to every surface color. */
html[data-reading-theme][data-reading-paper="1"] {
  --reading-paper-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  --reading-paper-size: 180px 180px;
}
html[data-reading-theme][data-reading-paper="2"] {
  --reading-paper-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055 .58' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3Cpath d='M12 37l28-2m57 46l44-1m34 46l32 2M22 171l39-3m72 39l48-1' stroke='%23000' stroke-opacity='.045' fill='none'/%3E%3C/svg%3E");
  --reading-paper-size: 220px 220px;
}
html[data-reading-theme][data-reading-paper="3"] {
  --reading-paper-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3Cpattern id='p' width='6' height='6' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 1h6M1 0v6' stroke='%23000' stroke-opacity='.045'/%3E%3Cpath d='M0 2h6M2 0v6' stroke='%23fff' stroke-opacity='.05'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E");
  --reading-paper-size: 120px 120px;
}
html[data-reading-theme][data-reading-paper="4"] {
  --reading-paper-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cdefs%3E%3Cpattern id='p' width='60' height='5' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 1h60' stroke='%23000' stroke-opacity='.065'/%3E%3Cpath d='M0 2h60M1 0v5' stroke='%23fff' stroke-opacity='.055'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23p)'/%3E%3C/svg%3E");
  --reading-paper-size: 180px 180px;
}
html[data-reading-theme][data-reading-paper="5"] {
  --reading-paper-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' amplitude='1' exponent='1.8' offset='0'/%3E%3CfeFuncG type='gamma' amplitude='1' exponent='1.8' offset='0'/%3E%3CfeFuncB type='gamma' amplitude='1' exponent='1.8' offset='0'/%3E%3CfeFuncA type='linear' slope='.23'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --reading-paper-size: 280px 280px;
}

/* Hide decoration without moving edges or suppressing meaningful states. */
html[data-reading-theme][data-reading-borders="hidden"] :is(
  .topbar, .reading-controls, .course-context, .material-switch,
  .sidebar, .sidebar-head, .section-group > summary, .progress,
  .viewer, .viewer details, .viewer code, .viewer pre,
  .viewer .hero, .viewer .formula, .viewer ol.quiz li, .viewer ol.problems > li,
  .viewer figure.infographic, .viewer figure.infographic figcaption,
  .viewer .badge, .viewer th, .viewer td, .viewer hr,
  .import-status-card, .outline-review, .outline-summary,
  .outline-section, .outline-section-head, .outline-topic, .outline-actions,
  .modal-card
) { border-color: transparent; }
html[data-reading-theme][data-reading-borders="hidden"] .viewer ul.tezis li { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }
html[data-reading-theme][data-reading-borders="hidden"] :is(.btn:not(.btn-primary):not(.btn-danger):not(.btn-dashed), .icon-button, .reading-borders):not(:focus-visible):not([aria-pressed="true"]) { border-color: transparent; }
html[data-reading-theme][data-reading-borders="hidden"] :is(.field input, .field select, .topic-title-input, .page-input, textarea):not(:focus) { border-color: transparent; }

@media (max-width: 1180px) {
  .reading-controls { gap: 4px 13px; }
  .reading-controls-title { flex-basis: 100%; font-size: 10px; }
}
@media (max-width: 700px) {
  .reading-controls { gap: 7px 14px; padding: 10px 12px; }
  .reading-controls-title { font-size: 11px; }
  .reading-controls label { min-height: 34px; }
  .reading-controls input[type="range"] { width: 100px; height: 28px; }
  .reading-controls button { min-height: 34px; }
  .reading-controls .reading-hue-reset { min-width: 34px; }
  .paper-slider input[type="range"] { height: 22px; }
  html[data-reading-theme] body[data-view="workspace"] .layout { height: auto; }
  html[data-reading-theme] .content { padding: 14px 10px 55px; }
  html[data-reading-theme] .viewer { padding: 23px 17px; border-radius: 10px; }
  html[data-reading-theme] .viewer :is(dl.defs, .formula .vars) { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  html[data-reading-theme] .viewer :is(dl.defs dd, .formula .vars dd) { margin-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-reading-theme] :is(.btn, .progress-bar, .section-group > summary::before, .resizer) { transition: none; }
}

.reading-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.reading-save-note { margin-left: auto; color: var(--muted); font-size: 9px; }
.reading-paper-control output { min-width: 92px; }
html[data-reading-theme] .progress { top: var(--topbar-height, 68px); }
@media (max-width: 1180px) and (min-width: 701px) {
  .reading-controls-title { flex-basis: auto; }
}
@media (max-width: 700px) {
  .reading-save-note { flex-basis: 100%; margin-left: 0; font-size: 10px; }
}