/* CTM Assessment: reveals, the lecture/reading switch, embedded pages and
 * link targets (ctm-libs) — AGPL-3.0-or-later. Colours are custom properties;
 * a site overrides them on :root (light) or .quarto-dark (dark). The values
 * are the courses' own: ingmat3a's "Gå i dybden" box and switch, ctm-demo's
 * green solution box. Text keeps the theme's colour, and the backgrounds are
 * faint tints over the page: on white they give exactly the courses' #f6f8fa,
 * #f4f8f4 and #f4f8fa; under a dark theme (also one without a light twin,
 * where Quarto sets no .quarto-dark) they stay dark, and the theme's text
 * reads as on the page itself. */
:root {
  /* Shared control dimensions; existing feedback defaults stay identical. */
  --ctm-button-font-size: .875rem;
  --ctm-button-padding-y: .375rem;
  --ctm-button-padding-x: .75rem;
  --ctm-button-line-height: 1.5;
  --ctm-button-radius: var(--bs-border-radius, .375rem);
  --ctm-reveal-border: #7899ac;
  --ctm-reveal-background: rgba(75, 115, 155, 0.05);
  --ctm-reveal-solution-border: #4f7d57;
  --ctm-reveal-solution-background: rgba(35, 115, 35, 0.05);
  --ctm-reveal-details-border: #9aaebc;
  --ctm-reveal-focus: #ad6600;
  --ctm-modes-border: #9aaebc;
  --ctm-modes-background: rgba(35, 115, 155, 0.05);
  --ctm-modes-button-border: #245b79;
  --ctm-modes-button-background: #fff;
  --ctm-modes-button-color: #183e53;
  --ctm-modes-pressed-background: #245b79;
  --ctm-modes-pressed-color: #fff;
  --ctm-embed-border: #d4e0e7;
}
.quarto-dark {
  --ctm-reveal-border: #7899ac;
  --ctm-reveal-solution-border: #6f9f77;
  --ctm-reveal-details-border: #7d93a3;
  --ctm-reveal-focus: #f0a43a;
  --ctm-modes-border: #5d7383;
  --ctm-modes-button-border: #7fb2cf;
  --ctm-modes-button-background: transparent;
  --ctm-modes-button-color: #d6e6ef;
  --ctm-modes-pressed-background: #7fb2cf;
  --ctm-modes-pressed-color: #10222d;
  --ctm-embed-border: #3c4c57;
}

/* Reveals: <details class="ctm-reveal <kind>"> with a summary and a
 * .ctm-reveal-body. "Gå i dybden" (.reading-step) and .hint share the box;
 * .solution is green; .details (closed, never touched by the switch) is
 * related but distinct: a dashed line, no fill, a plain summary with "›". */
details.ctm-reveal {
  margin: 1rem 0;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--ctm-reveal-border);
  background: var(--ctm-reveal-background);
}
details.ctm-reveal.solution {
  border-left-color: var(--ctm-reveal-solution-border);
  background: var(--ctm-reveal-solution-background);
}
details.ctm-reveal > summary { cursor: pointer; font-weight: 600; }
details.ctm-reveal[open] > summary { margin-bottom: 0.8rem; }
details.ctm-reveal > summary:focus-visible {
  outline: 3px solid var(--ctm-reveal-focus);
  outline-offset: 3px;
}
details.ctm-reveal.details {
  border-left: 2px dashed var(--ctm-reveal-details-border);
  background: transparent;
}
details.ctm-reveal.details > summary {
  font-weight: 400;
  list-style: none;
}
details.ctm-reveal.details > summary::-webkit-details-marker { display: none; }
/* The "›" is drawn, not written: no text for screen readers to read out. */
details.ctm-reveal.details > summary::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin: 0 0.6em 0.12em 0.15em;
  border-right: 0.12em solid currentColor;
  border-bottom: 0.12em solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease-in-out;
}
details.ctm-reveal.details[open] > summary::before { transform: rotate(45deg); }
.ctm-reveal-body > :last-child { margin-bottom: 0; }

/* The lecture/reading switch (hidden until ui/ctm-reveal.js runs). */
.ctm-modes {
  padding: 0.85rem 1rem;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--ctm-modes-border);
  border-radius: 0.4rem;
  background: var(--ctm-modes-background);
}
.ctm-modes[hidden] { display: none; }
.ctm-modes button {
  padding: 0.4rem 0.85rem;
  margin: 0.25rem 0.4rem 0.25rem 0;
  border: 1px solid var(--ctm-modes-button-border);
  border-radius: 0.3rem;
  background: var(--ctm-modes-button-background);
  color: var(--ctm-modes-button-color);
}
.ctm-modes button[aria-pressed="true"] {
  background: var(--ctm-modes-pressed-background);
  color: var(--ctm-modes-pressed-color);
}
.ctm-modes button:focus-visible {
  outline: 3px solid var(--ctm-reveal-focus);
  outline-offset: 3px;
}
.ctm-modes-status { display: block; margin-top: 0.4rem; font-size: 0.9rem; }

/* Embedded pages (::: {.embed}); the height comes with the element. */
.ctm-embed {
  width: 100%;
  border: 1px solid var(--ctm-embed-border);
  border-radius: 6px;
}

/* A link target that ui/ctm-nav.js focuses (tabindex -1 while focused): no
 * ring for mouse users. Only its own targets: the rest of the page keeps the
 * theme's rules. */
[data-ctm-nav-focus]:focus:not(:focus-visible) { outline: none; }

@media print {
  .ctm-modes { display: none !important; }
}

/* Saved answers, progress, export and shared copy. */
.ctm-save-bar, .ctm-progress, .ctm-export-view {
  margin:1rem 0;padding:.85rem 1rem;border:1px solid var(--ctm-modes-border);border-radius:.4rem;background:var(--ctm-modes-background);
}
.ctm-save-bar[hidden] {display:none;}
.ctm-save-bar p {margin:0 0 .5rem;}
.ctm-save-actions, .ctm-export-view>div {display:flex;flex-wrap:wrap;gap:.5rem;}
.ctm-save-bar button, .ctm-export-view button, .ctm-copy-dialog button, .ctm-progress button {
  padding:.4rem .65rem;border:1px solid var(--ctm-modes-button-border);border-radius:.3rem;
  background:var(--ctm-modes-button-background);color:var(--ctm-modes-button-color);
}
.ctm-save-bar button:focus-visible, .ctm-export-view button:focus-visible, .ctm-progress button:focus-visible {
  outline:3px solid var(--ctm-reveal-focus);outline-offset:2px;
}
.ctm-save-status {display:block;margin-top:.5rem;}
.ctm-save-status:empty {margin:0;}
.ctm-progress ol {display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding-left:0;}
.ctm-progress-outdated, .ctm-saved-result {opacity:.65;}
.ctm-export-view textarea, .ctm-copy-dialog textarea {display:block;box-sizing:border-box;width:100%;margin-top:1rem;font-family:monospace;}
.ctm-copy-dialog {width:min(90vw,55rem);}
.ctm-copy-status {position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
@media print {
  .ctm-save-bar,.ctm-progress,.ctm-export-view,.ctm-copy-dialog,.ctm-copy-status {display:none !important;}
}

/* Shared settings and a quiet save indicator, outside the exercise flow. */
.ctm-sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.ctm-settings-toolbar {display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin:.25rem 0 .75rem;}
.ctm-icon-button {display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:44px;min-height:44px;padding:.35rem;border:1px solid var(--ctm-modes-border);border-radius:.35rem;background:var(--bs-body-bg,Canvas);color:var(--bs-body-color,CanvasText);font:inherit;cursor:pointer;}
.ctm-icon-button:focus-visible,.ctm-save-summary:focus-visible,.ctm-settings button:focus-visible {outline:3px solid var(--ctm-reveal-focus);outline-offset:3px;}
.ctm-save-summary {background:none;border:0;padding:.25rem;color:inherit;font:inherit;font-size:.8rem;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;}
.ctm-settings,.ctm-questions-dialog {box-sizing:border-box;max-width:calc(100vw - 2rem);max-height:85dvh;overflow:auto;overscroll-behavior:contain;border:1px solid var(--ctm-modes-border);border-radius:.5rem;background:var(--bs-body-bg,Canvas);color:var(--bs-body-color,CanvasText);padding:1rem;}
.ctm-settings {width:42rem;}
.ctm-settings::backdrop,.ctm-questions-dialog::backdrop {background:rgb(0 0 0 / .35);}
.ctm-settings>h2 {font-size:1.25rem;margin:0 3rem 1rem 0;}
.ctm-settings-close {position:absolute;right:.75rem;top:.75rem;}
.ctm-settings>section {padding-top:1rem;margin-top:1rem;border-top:1px solid var(--ctm-modes-border);}
.ctm-settings h3 {font-size:1.05rem;}
.ctm-settings .ctm-save-bar {margin:0;padding:0;border:0;background:none;}
.ctm-settings .ctm-save-actions {flex-direction:column;align-items:flex-start;}
.ctm-settings [data-ctm-export] {margin-bottom:.75rem;}
.ctm-settings [data-ctm-clear-page],.ctm-settings [data-ctm-clear-course] {border-color:var(--ctm-modes-border);background:none;color:inherit;}
.ctm-settings .ai-feedback-settings {box-sizing:border-box;width:100%;max-height:none;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:inherit;overflow:visible;}
.ctm-settings .ai-feedback-settings-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.ctm-settings .ai-feedback-settings-grid input,.ctm-settings .ai-feedback-settings-grid select {box-sizing:border-box;min-width:0;}
.ctm-settings .ai-feedback-notice {color:inherit;}

/* Number-only question tiles. Credit fills bottom-up without changing text contrast. */
.ctm-quiz-rail {width:100%;max-width:10rem;max-height:65dvh;overflow:auto;padding:.35rem;scrollbar-width:thin;}
.ctm-quiz-rail-fixed {position:fixed;top:6rem;width:10rem;z-index:10;}
.ctm-quiz-rail .ctm-progress {margin:0 0 .75rem;padding:0;border:0;background:none;}
.ctm-progress ol {display:grid;grid-template-columns:repeat(3,44px);gap:4px;margin:0;list-style:none;padding:0;}
.ctm-progress li {margin:0;padding:0;}
.ctm-progress button.ctm-question-tile {position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:0;padding:0;margin:4px;border:1px solid currentColor;border-radius:3px;font:inherit;font-size:.875rem;font-weight:700;color:var(--bs-body-color,CanvasText);background:linear-gradient(to top,color-mix(in srgb,currentColor 24%,transparent) var(--ctm-credit,0%),transparent var(--ctm-credit,0%));cursor:pointer;}
.ctm-question-tile::before {content:"";position:absolute;inset:-5px;}
.ctm-question-tile[data-status="answered"]::after {content:"";position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:currentColor;}
.ctm-question-tile[data-status="wrong"]::after {content:"×";position:absolute;right:1px;top:-4px;font-size:13px;}
.ctm-progress button[aria-current="step"] {outline:2px solid currentColor;outline-offset:2px;}
.ctm-progress button:focus-visible {outline:3px solid var(--ctm-reveal-focus);outline-offset:3px;}
.ctm-progress button.ctm-progress-outdated {opacity:1;border-style:dashed;}
.ctm-questions-toggle {position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:100;box-shadow:0 2px 8px rgb(0 0 0 / .12);}
.ctm-questions-toggle[hidden],.ctm-questions-toggle.ctm-keyboard-open {display:none;}
.ctm-questions-dialog {width:max-content;min-width:11rem;}
.ctm-questions-dialog>.ctm-icon-button {display:flex;margin:0 0 .5rem auto;}
.ctm-questions-dialog .ctm-quiz-rail {max-height:60dvh;}
@media (pointer:coarse) {
  .ctm-progress button.ctm-question-tile {width:44px;height:44px;margin:0;}
  .ctm-question-tile::before {inset:0;}
}
@media (forced-colors:active) {
  .ctm-progress button.ctm-question-tile {background:Canvas;color:CanvasText;}
  .ctm-question-tile[data-status="partial"]::after {content:"½";position:absolute;right:0;top:-4px;font-size:12px;}
  .ctm-question-tile[data-status="correct"]::after {content:"✓";position:absolute;right:0;top:-4px;font-size:12px;}
}
@media print {
  .ctm-settings-toolbar,.ctm-settings,.ctm-quiz-rail,.ctm-questions-toggle,.ctm-questions-dialog {display:none!important;}
}