/* Styles for assignment pages emitted by 61a-build (publish-61a release).
   Installed into the site checkout by the builder; edit the copy in the
   assignments repo (src/publish/site_support/), not this one. Colors are
   scheme-neutral (translucent greys) so they work in light and dark mode. */

.assignment-header {
  margin-bottom: 2rem;
}

.assignment-header .assignment-facts {
  list-style: none;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0 0;
  background: rgba(127, 127, 127, 0.12);
  border-radius: 4px;
}

.assignment-header .assignment-facts li {
  display: inline-block;
  margin-right: 1.5rem;
}

/* Suppress the theme's "•" list marker so items aren't dot-separated. */
.assignment-header .assignment-facts li::before {
  content: none;
}

/* The discussion's link to its printable worksheet: a printer button at the
   right end of the title line, explained by its hover text. Floated rather
   than flexed so the h1's text and badge keep their inline layout. */
.assignment-header .print-button {
  float: right;
  font-size: 0.6em;
  line-height: 1;
  margin: 0.2em 0 0 0.75em;
  padding: 0.3em 0.45em;
  border: 1px solid rgba(127, 127, 127, 0.45);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.12);
  text-decoration: none;
  cursor: pointer;
}

.assignment-header .print-button:hover,
.assignment-header .print-button:focus-visible {
  background: rgba(127, 127, 127, 0.28);
  text-decoration: none;
}

.assignment-header .solution-badge {
  font-size: 0.6em;
  vertical-align: middle;
  padding: 0.15em 0.6em;
  border-radius: 1em;
  background: #b3261e;
  color: #fff;
}

.assignment-intro {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #003262; /* Berkeley Blue */
  background: rgba(0, 50, 98, 0.08);
}

/* Python Tutor embeds (topic pages) have no dark mode and paint no
   background of their own, so they get a light one: their dark text is
   unreadable on the dark scheme's ground. */
iframe[src*="pythontutor.com"] {
  background: #fff;
  color-scheme: light;
  border-radius: 4px;
}

/* Dimmed as a whole rather than tinted, so nothing Python Tutor paints white
   itself is left brighter than the surface around it. */
[data-theme="dark"] iframe[src*="pythontutor.com"] {
  filter: brightness(0.9);
}

/* Python-command switch (python3/python/py rewritten in commands), inserted
   by assignment.js when a page contains python3 commands. The zero-height
   bar overlays the pill on the right end of the page-title line, so it adds
   no vertical space; the bar ignores clicks, only the pill is interactive.
   It scrolls with the page. */
.python-toggle {
  display: flex;
  justify-content: flex-end;
  /* Without this, the zero-height flex container would stretch the pill's
     box to zero height too, leaving its border squashed flat across the
     middle of the buttons. */
  align-items: flex-start;
  height: 0;
  pointer-events: none;
  /* The bar is inserted just before .assignment-header, which follows it in
     the flow and would otherwise paint (and take clicks) on top of the
     overlapping pill. Positioning lifts the pill above that later content. */
  position: relative;
  z-index: 1;
}

.python-toggle-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  margin-top: 0.4rem; /* optically center on the h1 title line */
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.25rem;
  border: 1px solid rgba(127, 127, 127, 0.45);
  border-radius: 2em;
  background: #fff;
}

/* A narrow screen may not fit the title and the pill on one line; give the
   pill its own row above the title instead of overlapping it. */
@media (max-width: 640px) {
  .python-toggle {
    height: auto;
    margin-bottom: 0.5rem;
  }

  .python-toggle-pill {
    margin-top: 0;
  }
}

[data-theme="dark"] .python-toggle-pill {
  background: #141414;
}

/* Full-strength text color: dimming the label (e.g. opacity) fails the
   WCAG AA 4.5:1 contrast check at this font size. */
.python-toggle-label {
  padding: 0 0.4rem 0 0.6rem;
}

.python-toggle-pill button {
  /* The buttons are the command names themselves (python3/python/py). */
  font: inherit;
  font-family: SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1;
  padding: 0.4em 0.8em;
  border: none;
  border-radius: 2em;
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: relative;
}

/* The pill's padding and border leave a strip above and below the buttons
   that looks like part of the toggle but takes no clicks. Stretch each
   button's hit area over that strip so the full visible height is
   clickable. */
.python-toggle-pill button::after {
  content: "";
  position: absolute;
  top: -0.35rem;
  bottom: -0.35rem;
  left: 0;
  right: 0;
}

.python-toggle-pill button:hover {
  background: rgba(127, 127, 127, 0.18);
}

.python-toggle-pill button.active {
  background: #003262; /* Berkeley Blue */
  color: #fff;
}

[data-theme="dark"] .python-toggle-pill button.active {
  background: #6ea3ff; /* the dark scheme's link blue */
  color: #141414;
}

.pytest-command {
  position: relative;
  margin: 1rem 0;
}

.pytest-command pre {
  margin: 0;
  padding: 0.75rem 5rem 0.75rem 1rem;
  background: #263238;
  border-radius: 4px;
}

.pytest-command pre code {
  color: #e8eaf6;
  background: none;
  padding: 0;
}

.pytest-command .pytest-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  background: transparent;
  color: #e8eaf6;
  cursor: pointer;
}

.pytest-command .pytest-copy:hover {
  background: rgba(255, 255, 255, 0.15);
}

details.hint {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(127, 127, 127, 0.4);
  border-radius: 4px;
}

details.hint summary {
  cursor: pointer;
  font-weight: 600;
}

/* The "Unlocking Examples" toggle under an unlock command box: a button
   that reveals the transcript of the locked doctests (blanks to predict). */
details.unlock-examples {
  margin: 0.5rem 0 1rem;
}

details.unlock-examples > summary {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(127, 127, 127, 0.4);
  border-radius: 4px;
}

details.unlock-examples > summary::-webkit-details-marker {
  display: none;
}

details.unlock-examples > summary::before {
  content: "\25B8  ";
}

details.unlock-examples[open] > summary::before {
  content: "\25BE  ";
}

details.unlock-examples > pre.wwpd {
  margin-top: 0.75rem;
}

.solution {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #b3261e;
  background: rgba(179, 38, 30, 0.06);
}

.solution .solution-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #b3261e;
  margin-bottom: 0.5rem;
}

/* Ordinary assignment blockquotes get a full tinted box, making callouts
   visually distinct from body text. The theme's left accent rule is kept. */
.assignment blockquote {
  background-color: rgba(127, 127, 127, 0.1);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

/* Quote/attribution blockquotes (those containing a <cite>) drop the box and
   center instead. */
.assignment blockquote:has(cite) {
  background: none;
  border-left: none;
  padding: 0;
  text-align: center;
}

pre.wwpd .wwpd-blank {
  color: #9e9e9e;
  letter-spacing: 0.1em;
}

pre.wwpd .wwpd-answer {
  color: #2e7d32;
  font-weight: 600;
}

/* Source-viewer pages (<file>.html) are titled by their bundle path, which
   reads as a filename rather than prose. */
.source-view-title {
  font-family: monospace;
  font-size: 1.4rem;
  word-break: break-all;
}

/* Inline code editors on a discussion's web page (code-editor.js replaces the
   highlighted <pre> inside each .code-editor with a CodeMirror editor). The
   editor brings no colors of its own: the wrapper takes the theme's own code
   block styling — the `highlight` class the script adds once mounted — and the
   editor's tokens carry the same Pygments class names a listing does, so an
   editor and a listing look alike in either color scheme. */
/* The one signal that this block is different from a listing: it lights up
   while it has the cursor. */
.code-editor:focus-within {
  box-shadow: 0 0 0 2px rgba(127, 127, 127, 0.35);
}

/* The Reset button code-editor.js appends below each editor. Theme-neutral
   like the rest of the editor: it borrows the wrapper's text color (also for
   the border, via currentColor) and signals state with opacity alone, so it
   keeps its contrast in either color scheme. Its own right margin keeps it
   off the wrapper's edge: the wrapper carries no padding of its own (the
   listing's inset is copied onto the editor element instead). */
/* The row under an editor: Reset, and (on discussion pages) the Discuss
   app's Visualize link beside it, styled alike. */
.code-editor-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5em;
  margin: 0.5em;
}

.code-editor-reset,
.discuss-visualize {
  /* A button and a link, boxed alike: the link would otherwise take the
     listing's line-height and size its border outside its box. */
  display: inline-block;
  box-sizing: border-box;
  line-height: normal;
  padding: 0.1em 0.7em;
  font-family: inherit;
  font-size: 0.8em;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.9;
  cursor: pointer;
}

.code-editor-reset:hover:enabled,
.code-editor-reset:focus-visible,
.discuss-visualize:hover,
.discuss-visualize:focus-visible {
  opacity: 1;
}

.code-editor-reset:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The hover tooltip on a squiggle (python-lint.js). The editor carries no
   CodeMirror theme, so its tooltip is light in both schemes; restyle it for
   the dark one. */
[data-theme="dark"] .code-editor .cm-tooltip {
  background: #2a2a2e;
  color: #e6e6e6;
  border-color: #555;
}

/* ── Discuss (discuss.js): group bar, member tabs, Verify, cooldown ────── */

.discuss-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  border: 1px solid rgba(127, 127, 127, 0.45);
  border-radius: 6px;
}

/* Author display rules beat the UA's [hidden] { display: none }, so the
   flex containers discuss.js toggles need their own hidden rule. */
.discuss-bar form[hidden] {
  display: none;
}

.discuss-bar form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.discuss-bar input {
  font: inherit;
  color: inherit;
  background: transparent;
  padding: 0.25em 0.5em;
  border: 1px solid rgba(127, 127, 127, 0.5);
  border-radius: 4px;
}

.discuss-bar input[type="number"] {
  /* Wide enough for the "Group number" placeholder plus the spinner. */
  width: 11em;
}

.discuss-bar button {
  font: inherit;
  padding: 0.25em 0.9em;
  border: 1px solid rgba(127, 127, 127, 0.5);
  border-radius: 4px;
  background: #003262; /* Berkeley Blue */
  color: #fff;
  cursor: pointer;
}

.discuss-bar button:disabled {
  opacity: 0.4;
  cursor: default;
}

[data-theme="dark"] .discuss-bar button {
  background: #6ea3ff; /* the dark scheme's link blue */
  color: #141414;
}

.discuss-hint {
  opacity: 0.7;
  font-style: italic;
}

/* While in a group, each editor sits in a flex row beside its tab column:
   "You" on top, then one tab per other member (their color, name, and ✅/❌
   marks), then the group strikes line. The editor narrows to fit.

   Member colors: discuss.js puts a member's tint for each scheme on the tab
   (and on the pane while their code is shown) as --discuss-tint (near-white)
   and --discuss-tint-dark (very dark); the rules below pick one by
   [data-theme], so the live light/dark toggle recolors without a reload. */
.discuss-pane {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.discuss-pane .code-editor {
  flex: 1;
  min-width: 0;
}

.discuss-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  /* Room for a 22-char name plus … plus six marks (discuss.js truncates). */
  width: 15rem;
  flex-shrink: 0;
}

.discuss-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.35em 0.7em;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0 6px 6px 0;
  background: var(--discuss-tint, #e8e8e8);
  color: #1c1c1c;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

[data-theme="dark"] .discuss-tab {
  background: var(--discuss-tint-dark, #2a2a2a);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.discuss-tab .discuss-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.discuss-tab.active {
  outline: 2px solid #003262;
  outline-offset: 1px;
  font-weight: bold;
}

[data-theme="dark"] .discuss-tab.active {
  outline-color: #6ea3ff;
}

/* The You tab has no member tint: the #e8e8e8 / #2a2a2a fallbacks above are
   its colors in each scheme. */

.discuss-strikes {
  font-size: 0.75rem;
  opacity: 0.8;
  padding: 0.2em 0.7em;
}

/* Any strikes at all get loud: a big red count (a state color, fixed in
   both schemes, like the red Verify button). */
.discuss-strikes-count.nonzero {
  color: #c62828;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  vertical-align: middle;
}

/* While a member's code is shown in a pane: the pane takes their tint
   (outranking the wrapper's `highlight` code-block background), no selecting
   (answers are for reading, not pasting) and no Reset (it would edit their
   snapshot). */
.discuss-pane.showing-member .code-editor {
  background: var(--discuss-tint);
}

[data-theme="dark"] .discuss-pane.showing-member .code-editor {
  background: var(--discuss-tint-dark);
}

.discuss-pane.showing-member .code-editor,
.discuss-pane.showing-member .code-editor * {
  -webkit-user-select: none;
  user-select: none;
}

.discuss-pane.showing-member .code-editor-actions {
  display: none;
}

/* The Verify button: gray until run, then the outcome. The colors are
   states, not theme decoration, so they are fixed in both schemes. The
   ✅/❌ history of past presses sits beside it. */
.discuss-check-button {
  position: relative;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35em 1em;
  border: 1px solid rgba(127, 127, 127, 0.5);
  border-radius: 4px;
  background: #e0e0e0;
  color: #1c1c1c;
  cursor: pointer;
}

.discuss-check-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.discuss-check-button[data-state="green"] {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #fff;
}

.discuss-check-button[data-state="red"] {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
}

[data-theme="dark"] .discuss-check-button[data-state="gray"] {
  background: #2a2a2a;
  color: #e0e0e0;
}

.discuss-history {
  margin-left: 0.5em;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

/* An exception (SyntaxError, NameError, or the first one an example
   raised) named in one line next to the Verify button, after the marks. */
.discuss-check-output {
  margin-left: 0.75em;
  font-size: 0.75rem;
  color: #c62828;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[data-theme="dark"] .discuss-check-output {
  color: #ef9a9a;
}