/* AI Literacy module - shared styles.
 *
 * Light and dark are both first-class. Self-study material gets read late at
 * night on whatever device is to hand, and a page that only works in one scheme
 * is a page that is uncomfortable to read half the time.
 */

:root, [data-theme="dark"] {
  color-scheme: dark;

  --ink: #e6edf3;
  --muted: #9198a1;
  --line: #30363d;
  --bg: #0d1117;
  --panel: #161b22;
  --accent: #2dd4bf;
  --accent-soft: #10352f;
  --accent-ink: #5eead4;
  --warn: #e3b341;
  --warn-soft: #3a2d0f;
  --ok: #3fb950;
  --ok-soft: #12291a;
  --on-accent: #06231f;

  --signal: #e5484d;
  --signal-soft: #2a1215;
  --signal-ink: #ff6b6b;
}

[data-theme="light"] {
  color-scheme: light;

  --ink: #1b1f23;
  --muted: #57606a;
  --line: #d8dee4;
  --bg: #f6f8fa;
  --panel: #ffffff;
  --accent: #0f766e;
  --accent-soft: #d9f0ec;
  --accent-ink: #075b53;
  --warn: #8a5a00;
  --warn-soft: #fff4d6;
  --ok: #15703a;
  --ok-soft: #dcf5e3;
  --on-accent: #ffffff;

  --signal: #c0272d;
  --signal-soft: #fbe9ea;
  --signal-ink: #8f1d22;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

header,
main,
footer {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}

.storage-notice {
  border: 2px solid var(--warn);
  background: var(--warn-soft);
  padding: 14px 16px;
  margin: 14px 0 20px;
}

.storage-notice h3 {
  margin-top: 0;
}

.storage-state {
  font-weight: 600;
}

.learner-work,
.unit-record {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px solid var(--line);
}

.learner-work textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.completion-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 8px;
}

.record-settings {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 28rem);
  gap: 10px 16px;
  align-items: center;
}

.record-settings input,
.record-settings select {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.progress-list article {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.progress-list article h3,
.progress-list article p {
  margin: 4px 0;
}

.progress-list article[data-state="complete"] {
  border-left: 5px solid var(--ok);
  padding-left: 12px;
}

.record-actions {
  display: grid;
  gap: 12px;
  max-width: 48rem;
}

.record-actions fieldset,
#import-conflicts fieldset {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  padding: 12px;
}

.record-actions button,
#import-preview button {
  width: fit-content;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  cursor: pointer;
}

.record-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.export-actions {
  grid-template-columns: repeat(2, fit-content(22rem));
}

#import-preview {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
}

@media (max-width: 600px) {
  .record-settings {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .export-actions {
    grid-template-columns: 1fr;
  }
}

.storage-notice button {
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  cursor: pointer;
}

.storage-notice button:disabled {
  cursor: default;
  opacity: 0.75;
}

header {
  padding: 40px 0 20px;
}

h1 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.1;
}

h2 {
  margin: 32px 0 12px;
  font-size: 1.35rem;
}

.crumb {
  margin: 0 0 12px;
  font-size: 0.92rem;
}

.summary {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
}

p {
  max-width: 72ch;
}

.notice {
  margin: 24px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-left: 5px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 24px 0 40px;
  padding: 0;
  list-style: none;
}

article {
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

article h2,
article h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
}

article p {
  margin: 0;
  color: var(--muted);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  font-size: 0.84rem;
}

.tag,
.status {
  padding: 3px 9px;
  border-radius: 999px;
  max-width: 100%;
}

/* Status pills are single words and look better unbroken. Course-item tags
 * carry the full item name from course-map.md -- "Item 6: Re-Prompting,
 * Specification, And Overreliance" -- and a pill holding a sentence has to be
 * allowed to wrap, or it alone pushes the page past a 320px viewport. */
.status {
  white-space: nowrap;
}

.tag {
  white-space: normal;
}

.tag {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.status {
  background: var(--warn-soft);
  color: var(--warn);
}

.status[data-status="ready"] {
  background: var(--ok-soft);
  color: var(--ok);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.92rem;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  /* Inline code here is mostly file paths, and a path offers no break
   * opportunity by default -- `course/lab/exercises/ex04_bernoulli.py`
   * alone is wider than a 320px viewport (WCAG 1.4.10 Reflow). */
  overflow-wrap: anywhere;
}

pre {
  overflow-x: auto;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
}

pre code {
  border: 0;
  padding: 0;
  background: none;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  display: block;
  overflow-x: auto;
}

th,
td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
}

th {
  background: var(--panel);
}

.reviewer-path {
  margin: 32px 0;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.reviewer-path h2 {
  margin-top: 0;
}

footer {
  padding: 24px 0 48px;
  margin-top: 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

img {
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}


/* ---------------------------------------------------------------------------
 * Gothic register
 *
 * AUTHORING.md section 12 records this as a design decision with a reason: Ada
 * Lovelace was Byron's daughter, and the anxiety about a made thing that
 * reasons begins in the same century and the same household. Units 0-8 use the
 * restrained end of the register; Unit 9 adds `class="gothic"` for the full
 * one, matching the talk it derives from.
 *
 * The limits are not negotiable. Contrast wins over atmosphere, and colour
 * never carries meaning alone.
 * ------------------------------------------------------------------------ */

.signal {
  color: var(--signal-ink);
  font-weight: 600;
}

.gothic {
  /* White holds 5.9:1 on the arterial red accent. */
  --on-accent: #ffffff;
  --bg: #0b0b0d;
  --panel: #141417;
  --line: #2a2a30;
  --ink: #ece9e6;
  --muted: #8e8a86;
  --accent: #c0272d;
  --accent-ink: #ff6b6b;
  --accent-soft: #241012;
  color-scheme: dark;

  /* This class forces a near-black ground regardless of the reader's colour
   * scheme, so every token that assumes a light ground has to be re-stated
   * here. It originally was not: in a light-preference browser --signal-ink
   * stayed at its light value and rendered dark red on near-black at 2.22:1 --
   * and .signal is precisely the class that marks the thing that is wrong, so
   * the one element a reader must not miss was the one that disappeared. The
   * dark-scheme values are repeated rather than inherited because a class
   * cannot reach into a media query. */
  --warn: #e3b341;
  --warn-soft: #3a2d0f;
  --ok: #3fb950;
  --ok-soft: #12291a;
  --signal: #e5484d;
  --signal-soft: #2a1215;
  --signal-ink: #ff6b6b;
}

.gothic h1,
.gothic h2 {
  letter-spacing: -0.01em;
}

.gothic .rule {
  height: 2px;
  border: 0;
  margin: 6px 0 22px;
  background: linear-gradient(90deg, var(--signal), transparent);
}

/* Song and source quotations in Unit 9. Attribution is mandatory: the lyrics
 * quoted are in copyright and are used briefly, for commentary. */
.gothic blockquote,
blockquote.quote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--signal);
  font-style: italic;
  color: var(--ink);
}

blockquote.quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--signal-ink);
}

/* Animations are embedded live and must never depend on motion to be readable;
 * each one also ships a still and a prose alternative. */
/* Browsers give <figure> a 40px horizontal margin by default, which is enough
 * on its own to break reflow at a 320px viewport. */
figure {
  margin: 24px 0;
}

.animation {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 960 / 420;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0d1117;
}

.animation-alt {
  margin: 8px 0 24px;
  font-size: 0.94rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * Site chrome shared by every page: skip link, review banner, media
 * placeholders, and the download note on rendered reference documents.
 * ------------------------------------------------------------------------ */

/* First focusable element on each page; visually hidden until focused so
 * keyboard and screen-reader users can bypass the header on every page. */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 8px 14px;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 0 0 6px 0;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

.review-notice {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--warn);
  border-radius: 4px;
  background: var(--warn-soft);
  color: var(--warn);
  text-align: center;
  font-weight: bold;
}

.media-placeholder {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 1em;
  margin: 1em 0;
  background: var(--panel);
}

.media-placeholder h3 {
  margin-top: 0;
}

.doc-download {
  font-size: 0.92rem;
  color: var(--muted);
}

@media print {
  .skip-link,
  .review-notice,
  .storage-notice,
  .record-actions,
  .learner-work,
  .unit-record,
  .crumb {
    display: none !important;
  }
}