:root {
  --color-bluebook-gray5: #b2b2b2;
  --color-bluebook-gray2: #e2e2e2;
  --color-bluebook-blue: #324dc7;
  --color-bluebook-blue3: #15327f;
  --color-bluebook-gray8: #f5f5f5;
  --color-bluebook-gray1: #505050;
  --color-bluebook-red1: #ab2334;
  --color-bluebook-checked-green: #1d7846;
}

body {
  margin: 0;
  padding: 40px;
  background: #f4f4f5;
  font-family: Roboto, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition: background-color 0.15s ease;
}

body.is-violation {
  background-color: #dc2626;
}

.frq {
  max-width: 720px;
  margin: 0 auto;
}

/* Nothing to show until a join code opens a quiz. Without this the sign-in and
   join steps sit on top of an empty exam skeleton, which reads as a page that
   failed to load. */
#page-content.is-pending {
  display: none;
}

/* Two-pane pages need room for both halves. 1200px is inferred, not measured:
   it leaves each pane a little under the 720px single-column width, which is
   where the 16px response text still breaks comfortably. */
.frq.frq-wide {
  max-width: 1200px;
}

/* --- header strip above the editor --- */
.frq-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-bluebook-gray2);
}

.frq-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.frq-date {
  font-size: 13px;
  color: #52525b;
  white-space: nowrap;
}

/* --- rich text editor: toolbar + editable area + word count footer --- */
.lrn_texteditor {
  margin-top: 8px;
}

.lrn-wysihtml-toolbar-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 0 0 0 3px;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  margin: 3px 4px 3px 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  padding: 0;
}

.toolbar-btn:hover {
  background: var(--color-bluebook-gray2);
}

.toolbar-btn.is-active {
  background: var(--color-bluebook-gray2);
  border-color: #999;
}

.toolbar-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.toolbar-btn:disabled:hover {
  background: none;
}

.toolbar-btn svg {
  width: 18px;
  height: 18px;
  fill: #333;
}

/* the label needs to be one inline formatting context, otherwise the
   sub/sup become flex items of the button and lose their baseline shift */
.toolbar-btn .btn-label {
  display: inline-block;
  line-height: 1;
  padding: 0 4px;
  color: #333;
}

/* keep sub/sup from stretching the line box, both in the toolbar and in
   the response text */
sub,
sup {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

.toolbar-sep {
  width: 1px;
  height: 20px;
  background: #d9d9d9;
  margin: 0 6px 0 2px;
}

/* Read-only scaffold above the response field: the method signature the
   student is completing. It joins the editor stack under the same shared-border
   rule as the other pieces — left and right only, since the toolbar owns the
   edge above it and the editable area the one below. Tinted rather than white
   so it reads as given, not as something to type over, and padded to 16px on
   the left so the signature lines up with the body typed beneath it. */
.lrn-answer-stub {
  display: none;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  overflow-x: auto;
  background: var(--color-bluebook-gray8);
  border-left: 1px solid var(--color-bluebook-gray5);
  border-right: 1px solid var(--color-bluebook-gray5);
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  /* 16px/1.5, matching the response field exactly rather than the 14px of a
     reference listing: the signature and the body typed under it have to share
     a column grid, or the student's indentation won't line up with it */
  font-size: 16px;
  line-height: 1.5;
  color: #1e1e1e;
  white-space: pre;
  tab-size: 4;
}

.lrn-answer-stub.is-visible {
  display: block;
}

.lrn-answer-stub code {
  font: inherit;
}

/* a question that hands over a method signature is answered in code, so the
   response field takes the same face — still 16px, which is the floor that
   keeps iOS from zooming on focus */
.lrn_texteditor_editable.is-code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  tab-size: 4;
}

.lrn_texteditor_editable {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 350px;
  overflow-y: auto;
  padding: 16px;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
  white-space: pre-wrap;
  border: 1px solid var(--color-bluebook-gray5);
  border-top: none;
  outline: none;
  resize: none;
}

.lrn_texteditor_editable:focus {
  border: 1px solid var(--color-bluebook-blue);
  border-top: 1px solid var(--color-bluebook-blue);
  outline: none;
  box-shadow: none;
}

.lrn_texteditor_editable p {
  margin: 0 0 1em 0;
}

.lrn-toolbar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #52525b;
}

.autosave-status {
  color: #6b7280;
  font-style: italic;
}

.autosave-status.is-error {
  color: #b91c1c;
  font-style: normal;
}

.submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.submit-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--color-bluebook-blue);
  border: none;
  border-radius: 20px;
  padding: 10px 24px;
  cursor: pointer;
}

.submit-btn:hover {
  background: #28399c;
}

/* --- quiz: counter, progress bar, question panel --- */
.quiz-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: #52525b;
}

.quiz-counter {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1e1e1e;
}

.quiz-progress {
  height: 6px;
  margin-top: 8px;
  background: var(--color-bluebook-gray2);
  border-radius: 4px;
  overflow: hidden;
}

.quiz-progress-fill {
  width: 0;
  height: 100%;
  background: var(--color-bluebook-blue);
  border-radius: 4px;
  transition: width 0.15s ease;
}

.quiz-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}

/* The grid owns the spacing between the panes, and stretches both to one row
   height. The editor is laid out as a column inside that height so the response
   field takes whatever the toolbar and footer don't — otherwise a tall question
   leaves the answer box stranded at its 220px minimum with dead space beneath. */
.quiz-panes .lrn_texteditor {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.quiz-panes .lrn_texteditor_editable {
  flex: 1;
  max-height: none;
}

.quiz-question {
  box-sizing: border-box;
  padding: 16px;
  /* a long listing scrolls in its own pane rather than driving the row taller
     than the screen; the floor keeps short viewports usable */
  max-height: max(320px, 60vh);
  overflow-y: auto;
  background: var(--color-bluebook-gray8);
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 6px;
}

/* one column once two panes would squeeze the response text */
@media (max-width: 900px) {
  .quiz-panes {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* blocks stack inside the question pane; the first one sits flush with the
   panel padding, the rest are separated by one line */
.quiz-prompt {
  margin: 12px 0 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
}

#quiz-content > :first-child {
  margin-top: 0;
}

.quiz-list {
  margin: 12px 0 0 0;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
}

.quiz-list li {
  margin-bottom: 6px;
}

.quiz-list li:last-child {
  margin-bottom: 0;
}

/* the wrapper scrolls, not the table, so a wide table can't widen the pane */
.quiz-table-wrap {
  margin-top: 12px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 6px;
}

.quiz-table-wrap:focus-visible {
  border-color: var(--color-bluebook-blue);
  outline: none;
}

.quiz-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  color: #1e1e1e;
}

.quiz-table th,
.quiz-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-bluebook-gray2);
}

.quiz-table th {
  font-weight: 700;
  background: var(--color-bluebook-gray8);
  white-space: nowrap;
}

.quiz-table tr:last-child td {
  border-bottom: none;
}

.quiz-prompt.is-error {
  color: var(--color-bluebook-red1);
}

/* Code listing inside a question. The original has no recorded code component,
   so this is derived from the scale that is recorded: the 6px container radius,
   the 1px gray5 border, and #1e1e1e body text. The 14px size is the guide's
   control-text size — the 16px floor applies to the response field, which is
   what iOS zooms on focus, not to read-only listings. Roboto Mono leads the
   stack because the page's prose stack is Roboto. */
.quiz-code {
  box-sizing: border-box;
  margin: 12px 0 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 6px;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #1e1e1e;
  /* `pre`, not `pre-wrap`: a wrapped line of Java reads as a different
     program, so long lines scroll instead */
  white-space: pre;
  tab-size: 4;
}

.quiz-code:focus-visible {
  border-color: var(--color-bluebook-blue);
  outline: none;
}

.quiz-code code {
  font: inherit;
}

/* --- quiz: back / next --- */
.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

/* secondary pill: same geometry as .submit-btn, outlined instead of filled */
.nav-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-bluebook-blue);
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 20px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nav-btn:hover {
  background: var(--color-bluebook-gray2);
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nav-btn:disabled:hover {
  background: #fff;
}

/* the last step out of the question stack reads as final, not as another Next */
.submit-btn.is-final {
  background: var(--color-bluebook-blue3);
}

.submit-btn.is-final:hover {
  background: #0f2360;
}

.submit-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.submit-btn:disabled:hover {
  background: var(--color-bluebook-blue);
}

/* --- quiz: progress tracker at the foot of the page --- */
.quiz-tracker {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--color-bluebook-gray2);
}

.quiz-tracker-title {
  margin: 0 0 10px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1e1e1e;
}

.quiz-tracker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tracker-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  height: 30px;
  min-width: 30px;
  padding: 0 6px;
  color: var(--color-bluebook-gray1);
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tracker-btn:hover {
  background: var(--color-bluebook-gray2);
}

.tracker-btn.is-answered {
  color: #fff;
  background: var(--color-bluebook-blue);
  border-color: var(--color-bluebook-blue);
}

.tracker-btn.is-answered:hover {
  background: #28399c;
}

/* outline rather than a fill change, so "where I am" reads on top of either state */
.tracker-btn.is-current,
.tracker-btn:focus-visible {
  outline: 2px solid var(--color-bluebook-blue3);
  outline-offset: 2px;
}

.quiz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: #52525b;
}

.quiz-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 3px;
  background: #fff;
}

.legend-swatch.is-answered {
  background: var(--color-bluebook-blue);
  border-color: var(--color-bluebook-blue);
}

.legend-swatch.is-current {
  background: #fff;
  outline: 2px solid var(--color-bluebook-blue3);
  outline-offset: 1px;
  /* an outline reserves no space, so it eats into the flex gap on both sides */
  margin: 0 3px;
}

/* Sign-in, teacher notice, join code and the honour gate are one sequence of
   blocking steps, so they share an anatomy and are toggled the same way. The
   gate starts hidden and `initGate` shows it — immediately on a page with no
   sign-in flow, or when the flow reaches it. */
.gate-overlay,
.flow-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(24, 24, 27, 0.6);
  z-index: 2100;
}

.gate-overlay.is-visible,
.flow-overlay.is-visible {
  display: flex;
}

.gate-card,
.flow-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.gate-card h2,
.flow-card h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #1a1a1a;
}

.gate-card p,
.flow-card p {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #52525b;
}

.gate-yes-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--color-bluebook-blue);
  border: none;
  border-radius: 20px;
  padding: 10px 32px;
  cursor: pointer;
}

.gate-yes-btn:hover {
  background: #28399c;
}

/* --- sign-in / join flow --- */
.flow-card .submit-btn,
.flow-card .nav-btn {
  width: 100%;
}

.flow-error {
  margin: 12px 0 0 0 !important;
  font-size: 13px;
  color: var(--color-bluebook-red1) !important;
  min-height: 1em;
}

.flow-foot {
  margin: 16px 0 0 0 !important;
  font-size: 12px;
  color: #52525b;
}

/* a join code is transcribed from a board or a slide, so it is set wide and
   monospaced: O/0 and I/1 have to be told apart at a glance */
.join-input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 14px;
  padding: 12px;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 6px;
  outline: none;
}

.join-input:focus {
  border-color: var(--color-bluebook-blue);
}

.join-input::placeholder {
  color: var(--color-bluebook-gray5);
  letter-spacing: 0.18em;
}

/* a text button for a secondary action inside body copy */
.linkish {
  font-family: inherit;
  font-size: 12px;
  color: var(--color-bluebook-blue);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* --- identity in the header strip --- */
.frq-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: #52525b;
}

.frq-user {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.violation-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.94);
  z-index: 3000;
}

.violation-overlay.is-visible {
  display: flex;
}

.violation-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.violation-card svg {
  width: 36px;
  height: 36px;
  fill: #dc2626;
  margin-bottom: 8px;
}

.violation-card h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #1a1a1a;
}

.violation-card p {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #52525b;
}

.violation-input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 6px;
  outline: none;
}

.violation-input:focus {
  border-color: #dc2626;
}

.violation-continue-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #dc2626;
  border: none;
  border-radius: 20px;
  padding: 10px 32px;
  cursor: pointer;
}

.violation-continue-btn:hover {
  background: #b91c1c;
}

.violation-continue-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.violation-continue-btn:disabled:hover {
  background: #dc2626;
}

/* --- submit confirmation --- */
.confirm-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(24, 24, 27, 0.6);
  z-index: 2000;
}

.confirm-overlay.is-visible {
  display: flex;
}

.confirm-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.confirm-card h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #1a1a1a;
}

.confirm-card p {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #52525b;
}

.confirm-note.is-warning {
  color: var(--color-bluebook-red1);
}

.confirm-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.confirm-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  height: 30px;
  min-width: 30px;
  padding: 0 6px;
  color: var(--color-bluebook-blue);
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 4px;
  cursor: pointer;
}

.confirm-chip:hover {
  background: var(--color-bluebook-gray2);
}

.confirm-input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 6px;
  outline: none;
}

.confirm-input:focus {
  border-color: var(--color-bluebook-blue);
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* --- submitted --- */
.done-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(24, 24, 27, 0.6);
  z-index: 2500;
}

.done-overlay.is-visible {
  display: flex;
}

.done-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.done-card svg {
  width: 36px;
  height: 36px;
  fill: var(--color-bluebook-checked-green);
  margin-bottom: 8px;
}

.done-card h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #1a1a1a;
}

.done-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #52525b;
}

/* --- teacher panel (teacher.html) --- */
/* Values reuse the exam page's scale: 30px-class controls, 14px control text,
   the gray ramp and the 10px card radius from .flow-card. */
#teacher.is-pending {
  display: none;
}

.tp-header-sub {
  font-weight: 400;
  color: #52525b;
}

.tp-header-sub::before {
  content: "\00b7\00a0";
}

.tp-global-error:empty {
  display: none;
}

.tp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .tp-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tp-panel {
  background: #fff;
  border: 1px solid var(--color-bluebook-gray2);
  border-radius: 10px;
  padding: 20px;
  min-width: 0;
}

.tp-panel h2 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.tp-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tp-panel-head h2 {
  margin-bottom: 4px;
}

.tp-muted {
  font-size: 13px;
  color: #52525b;
}

.tp-empty {
  font-size: 14px;
  color: #52525b;
}

/* fields */
.tp-field {
  display: block;
  margin-bottom: 12px;
}

.tp-field > span {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #52525b;
}

.tp-field-row {
  display: flex;
  gap: 12px;
}

.tp-field-row .tp-field {
  flex: 1 1 0;
  min-width: 0;
}

.tp-field-narrow {
  flex: 0 0 120px !important;
}

.tp-input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--color-bluebook-gray5);
  border-radius: 6px;
  outline: none;
}

.tp-input:focus {
  border-color: var(--color-bluebook-blue);
}

/* the bank picker */
.tp-bank-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0 6px 0;
  font-size: 13px;
  color: #52525b;
}

.tp-bank {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--color-bluebook-gray2);
  border-radius: 6px;
}

.tp-unit {
  border-bottom: 1px solid var(--color-bluebook-gray2);
}

.tp-unit:last-child {
  border-bottom: none;
}

.tp-unit-summary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.tp-unit-summary::-webkit-details-marker {
  display: none;
}

.tp-unit-summary::before {
  content: "\25B8";
  font-size: 11px;
  color: var(--color-bluebook-gray5);
}

.tp-unit[open] > .tp-unit-summary::before {
  content: "\25BE";
}

.tp-unit-summary:hover {
  background: var(--color-bluebook-gray8);
}

.tp-unit-code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--color-bluebook-blue3);
}

.tp-pick {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px 8px 30px;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.tp-pick:hover {
  background: var(--color-bluebook-gray8);
}

.tp-pick input {
  margin: 3px 0 0 0;
  flex: 0 0 auto;
}

.tp-pick-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tp-pick-id {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #52525b;
  word-break: break-all;
}

.tp-tag {
  display: inline-block;
  align-self: flex-start;
  margin: 2px 0 0 0;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--color-bluebook-blue3);
  background: #e6edf8;
  border-radius: 10px;
}

.tp-actions {
  margin-top: 14px;
  justify-content: flex-start;
}

/* quiz list */
.tp-quiz-item {
  padding: 12px 0;
  border-top: 1px solid var(--color-bluebook-gray2);
}

.tp-quiz-item:first-child {
  border-top: none;
  padding-top: 0;
}

.tp-quiz-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tp-quiz-item-title {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}

.tp-quiz-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 4px 0 8px 0;
  font-size: 13px;
  color: #52525b;
}

.tp-code-inline {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  color: #1a1a1a;
}

.tp-btn-small {
  padding: 6px 16px;
  font-size: 13px;
}

.tp-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
  border-radius: 10px;
  color: #52525b;
  background: var(--color-bluebook-gray2);
}

.tp-pill.is-published,
.tp-pill.is-submitted {
  color: #fff;
  background: var(--color-bluebook-checked-green);
}

.tp-pill.is-in_progress {
  color: #fff;
  background: var(--color-bluebook-blue);
}

.tp-pill.is-closed {
  color: #fff;
  background: var(--color-bluebook-gray1);
}

/* detail */
.tp-detail {
  margin-top: 20px;
}

.tp-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 0 0;
  padding: 14px 16px;
  background: var(--color-bluebook-gray8);
  border-radius: 6px;
}

.tp-code-block {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.tp-code-label {
  font-size: 13px;
  color: #52525b;
}

/* mirrors .join-input: read off a board, so wide and monospaced */
.tp-code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #1a1a1a;
  user-select: all;
}

.tp-code.is-empty {
  color: var(--color-bluebook-gray5);
  letter-spacing: 0;
}

.tp-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-detail-actions [hidden] {
  display: none;
}

.tp-tabs {
  display: flex;
  gap: 4px;
  margin-top: 16px;
  border-bottom: 1px solid var(--color-bluebook-gray2);
}

.tp-tab {
  font-family: inherit;
  font-size: 14px;
  color: #52525b;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  margin-bottom: -1px;
  cursor: pointer;
}

.tp-tab:hover {
  color: #1a1a1a;
}

.tp-tab.is-active {
  color: var(--color-bluebook-blue);
  border-bottom-color: var(--color-bluebook-blue);
}

.tp-tab-panel {
  padding-top: 16px;
}

.tp-question {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-bluebook-gray2);
}

.tp-question:last-child {
  border-bottom: none;
}

.tp-question-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.tp-question-num {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.tp-content .quiz-prompt {
  font-size: 14px;
}

.tp-model-answer {
  margin-top: 8px;
  font-size: 14px;
}

.tp-model-answer summary {
  cursor: pointer;
  color: var(--color-bluebook-blue);
  font-size: 13px;
}

.tp-model-answer p {
  margin: 8px 0 0 0;
  padding: 10px 12px;
  line-height: 1.5;
  background: var(--color-bluebook-gray8);
  border-radius: 6px;
  white-space: pre-wrap;
}

/* submissions */
.tp-submission {
  border: 1px solid var(--color-bluebook-gray2);
  border-radius: 6px;
  margin-bottom: 10px;
}

.tp-submission-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
}

.tp-submission-who {
  font-weight: 500;
  color: #1a1a1a;
}

.tp-submission-q {
  padding: 10px 14px 14px 14px;
  border-top: 1px solid var(--color-bluebook-gray2);
}

.tp-submission-q .tp-question-num {
  margin: 0 0 8px 0;
  font-weight: 500;
}

.tp-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 700px) {
  .tp-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tp-compare-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tp-compare-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #52525b;
}

.tp-answer {
  margin: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  background: var(--color-bluebook-gray8);
  border-radius: 6px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tp-answer p {
  margin: 0 0 8px 0;
  white-space: normal;
}

.tp-answer p:last-child {
  margin-bottom: 0;
}

.tp-danger {
  display: block;
  margin: 6px 14px 12px 14px;
  color: var(--color-bluebook-red1);
}

.tp-link-btn {
  display: inline-block;
  text-decoration: none;
}