/* Annotation tutor workspace (plan 2026-10-19-003 U8): claim screen, item strip + stepper,
 * on-demand queue panel, two-column editor, answer cards, action bar with a More menu.
 * Loaded after review.css; only the tutor workspace uses these classes. Tokens are the
 * --bb-* / --color-* set from /static/style.css. */

.annotation-shell { position: relative; }
.annotation-main { min-width: 0; padding-bottom: calc(var(--review-bar-height) + var(--bb-spacing-3u)); }

/* ── Claim screen ─────────────────────────────────────────────────────────── */
.annotation-claim { max-width: 960px; }
.annotation-claim-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bb-spacing-1-5u);
  margin: var(--bb-spacing-2u) 0;
}
.annotation-claim-status-text { margin: 0; flex: 1 1 auto; color: var(--color-text-muted); }
.annotation-claim-status > .review-button-small { margin-left: auto; }
.annotation-claim-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bb-spacing-2u);
  align-items: stretch;
}
.annotation-claim-card {
  display: flex;
  flex-direction: column;
  gap: var(--bb-spacing-1-5u);
  padding: var(--bb-spacing-2u);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--bb-color-bg-surface);
}
.annotation-claim-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bb-spacing-1u); }
.annotation-claim-card h2.annotation-claim-card-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.annotation-claim-card-fields { display: flex; flex-direction: column; gap: var(--bb-spacing-1-5u); flex: 1 1 auto; align-content: start; }
.annotation-claim-card-fields .review-label { margin-top: 0; display: flex; flex-direction: column; gap: var(--bb-spacing-half); font-size: 14px; font-weight: 600; }
.annotation-claim-card-fields select {
  width: 100%;
  padding: var(--bb-spacing-1u);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 400;
}
.annotation-claim-help { font-weight: 400; }
.annotation-claim-count { margin: 0; font-size: 16px; font-weight: 600; min-height: 24px; }
.annotation-claim-count.is-zero { color: var(--color-text-muted); }
.annotation-claim-empty { margin: 0; font-size: 14px; }
.annotation-claim-empty[hidden],
.annotation-claim-empty > [hidden],
.annotation-claim-reset[hidden] { display: none; }
.annotation-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.annotation-claim-empty .annotation-linkbtn { font-size: inherit; }
.review-button.annotation-claim-big {
  width: 100%;
  padding: var(--bb-spacing-1-5u) var(--bb-spacing-3u);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.review-button.annotation-continue { width: auto; }
@media (max-width: 899px) {
  .annotation-claim-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ── Strip, stepper ───────────────────────────────────────────────────────── */
.annotation-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bb-spacing-1-5u);
  margin-bottom: var(--bb-spacing-2u);
  padding: var(--bb-spacing-1u) var(--bb-spacing-2u);
  background: var(--bb-color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--bb-border-radius-md);
}
.annotation-strip-main { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bb-spacing-1-5u); min-width: 0; }
.annotation-strip-label { font-weight: 600; }
.annotation-stepper { display: flex; flex-wrap: wrap; gap: var(--bb-spacing-1u); list-style: none; margin: 0; padding: 0; }
.annotation-step {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-spacing-half);
  padding: 3px var(--bb-spacing-1-5u);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-panel);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.annotation-step:hover { background: var(--bb-color-bg-surface-hover); }
.annotation-step.status-drafting { border-color: var(--color-warning-border); }
.annotation-step.status-ready,
.annotation-step.status-reviewed { border-color: var(--color-success); }
.annotation-step.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--bb-color-text-invert);
  font-weight: 600;
  cursor: default;
}
.annotation-step-mark { font-size: 13px; line-height: 1; }
.annotation-step-legend { font-size: 12px; white-space: nowrap; }
@media (max-width: 699px) { .annotation-step-legend { display: none; } }

/* ── Queue panel (on demand) ──────────────────────────────────────────────── */
.annotation-queue {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(420px, 100vw);
  overflow-y: auto;
  padding: var(--bb-spacing-2u) var(--bb-spacing-2u) var(--bb-spacing-4u);
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.annotation-queue-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bb-spacing-1u); }
.annotation-queue-head h2 { margin: 0; }
.annotation-queue .review-queue { margin-top: 0; }
.annotation-queue .review-queue-row { cursor: pointer; flex-wrap: wrap; justify-content: flex-start; gap: var(--bb-spacing-1u); }
.annotation-queue .review-queue-row.is-current { background: var(--bb-color-bg-surface-hover); }
.annotation-row-chips { gap: var(--bb-spacing-half); }
.annotation-row-types { flex-basis: 100%; }
.review-group { margin-bottom: var(--bb-spacing-1u); }
.annotation-queue .review-group-header { margin: var(--bb-spacing-2u) 0 0; font-size: 14px; font-weight: 600; color: var(--color-text-muted); overflow-wrap: anywhere; font-family: inherit; }

/* ── Editor grid ──────────────────────────────────────────────────────────── */
.annotation-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bb-spacing-3u); align-items: start; }
.annotation-passage-col { max-height: none; }
.annotation-passage-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bb-spacing-1u); }
.annotation-passage-head h2 { margin: 0; }
.annotation-passage { margin: 0; padding: 0; border: 0; }
.annotation-passage-body { margin-top: var(--bb-spacing-1u); max-height: 45vh; overflow-y: auto; }
.annotation-passage-p { margin: 0 0 var(--bb-spacing-1-5u); line-height: 1.6; overflow-wrap: anywhere; }
.annotation-passage-p:last-child { margin-bottom: 0; }
.annotation-passage.is-collapsed .annotation-passage-body { display: none; }
@media (min-width: 1100px) {
  .annotation-grid:not(.annotation-grid-single) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .annotation-passage-col {
    position: sticky;
    top: calc(56px + var(--bb-spacing-2u));
    max-height: calc(100vh - 56px - var(--review-bar-height) - var(--bb-spacing-4u));
    overflow-y: auto;
  }
  .annotation-passage-toggle { display: none; }
  .annotation-passage-body { max-height: none; overflow: visible; display: block !important; }
}

.annotation-item-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--bb-spacing-1u); margin-bottom: var(--bb-spacing-1u); }
.annotation-item-head .annotation-item-title { margin: 0; font-size: 24px; line-height: 32px; }
.annotation-item-head .annotation-title-chips { margin-left: 0; }
.annotation-item-head .review-hint { flex-basis: 100%; margin: 0; }
.annotation-title-chips { display: inline-flex; flex-wrap: wrap; gap: var(--bb-spacing-half); margin-left: var(--bb-spacing-1u); vertical-align: middle; }
.annotation-question { margin-bottom: var(--bb-spacing-2u); }
.annotation-question .review-stem { margin: 0; }

/* Existing explanation: one line for a forum link, collapsible text otherwise. */
.annotation-existing-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bb-spacing-1-5u);
  margin: 0 0 var(--bb-spacing-2u);
  padding: var(--bb-spacing-1u) var(--bb-spacing-1-5u);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}
.annotation-existing-lead { overflow-wrap: anywhere; }
.annotation-keep { display: inline-flex; align-items: center; gap: var(--bb-spacing-half); margin-left: auto; font-size: 14px; cursor: pointer; }
.annotation-existing { margin: 0 0 var(--bb-spacing-2u); }
.annotation-existing-details { margin-bottom: var(--bb-spacing-1u); padding: var(--bb-spacing-1u) var(--bb-spacing-1-5u); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-surface); }
.annotation-existing-details > summary { cursor: pointer; font-weight: 600; }
.annotation-existing-text { max-height: 160px; overflow-y: auto; margin-top: var(--bb-spacing-1u); font-size: 14px; }

/* Answer cards: option text, then its explanation box. */
.annotation-cards { display: flex; flex-direction: column; gap: var(--bb-spacing-2u); }
.annotation-card { padding: var(--bb-spacing-1-5u) var(--bb-spacing-2u); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-panel); }
.annotation-card-correct { border-color: var(--color-success); background: var(--color-success-tint); }
.annotation-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--bb-spacing-1u); margin-bottom: var(--bb-spacing-1u); }
.annotation-card-text { flex: 1 1 200px; min-width: 0; }
.annotation-card .review-label { margin: 0; display: flex; flex-direction: column; gap: var(--bb-spacing-half); font-size: 14px; font-weight: 600; }
.annotation-card textarea { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; background: var(--color-panel); }
.annotation-rich-box { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-panel); overflow: hidden; }
.annotation-rich-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.annotation-rich-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px 4px; border-bottom: 1px solid var(--color-border-light); background: var(--color-surface); }
.annotation-rich-tool { min-width: 28px; padding: 1px 6px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.6; cursor: pointer; }
.annotation-rich-tool:hover:not(:disabled) { background: var(--bb-color-bg-surface-hover); color: var(--color-text); }
.annotation-rich-tool[aria-pressed="true"] { background: var(--color-border); color: var(--color-text); }
.annotation-rich-tool:disabled { opacity: 0.5; cursor: default; }
.annotation-rich-tool.is-bold { font-weight: 700; }
.annotation-rich-tool.is-italic { font-style: italic; }
.annotation-rich-tool.is-underline { text-decoration: underline; }
.annotation-rich-tool.is-strike { text-decoration: line-through; }
.annotation-rich-count { margin-left: auto; padding-right: 4px; font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
.annotation-rich-count.is-over { color: var(--color-danger, #b42318); font-weight: 600; }
.annotation-rich { min-height: 4.5em; max-height: 24em; overflow-y: auto; padding: 6px 8px; border: 0; background: var(--color-panel); color: var(--color-text); font: inherit; font-weight: 400; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.annotation-rich:focus { outline: none; }
.annotation-rich.is-empty::before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none; }
.annotation-rich[contenteditable="false"].is-empty::before { content: none; }
.annotation-rich[contenteditable="false"] { background: var(--color-bg, transparent); color: var(--color-text-muted); }
.annotation-rich p { margin: 0 0 0.5em; }
.annotation-rich p:last-child { margin-bottom: 0; }
.annotation-rich ul, .annotation-rich ol { margin: 0 0 0.5em; padding-left: 1.5em; }
/* My work: question first, chips beside it, then where it lives and its id. */
.annotation-mine-row { flex-direction: column; align-items: stretch; gap: var(--bb-spacing-half); }
.annotation-mine-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bb-spacing-1-5u); }
.annotation-mine-link { font-weight: 600; text-decoration: none; min-width: 0; }
.annotation-mine-link:hover { text-decoration: underline; }
.annotation-mine-head .annotation-row-chips { display: inline-flex; align-items: center; flex-wrap: wrap; flex-shrink: 0; gap: var(--bb-spacing-1u); }
.annotation-mine-meta, .annotation-mine-row [data-role="when"] { margin: 0; }
.annotation-mine-ref { font-size: 12px; }
.annotation-required { margin-top: var(--bb-spacing-1-5u); }
.annotation-report { margin-top: var(--bb-spacing-2u); }
.annotation-report h3 { margin-top: 0; }
.annotation-report textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* ── Action bar ───────────────────────────────────────────────────────────── */
.annotation-actionbar { flex-wrap: wrap; row-gap: var(--bb-spacing-1u); }
.annotation-actionbar .review-submit { margin-left: 0; }
.annotation-ready-hint { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.annotation-bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bb-spacing-1u); margin-left: auto; }
.annotation-menu { position: relative; }
.annotation-menu-list {
  position: absolute;
  bottom: calc(100% + var(--bb-spacing-1u));
  right: 0;
  z-index: 30;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  padding: var(--bb-spacing-half);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.annotation-menu-item {
  padding: var(--bb-spacing-1u) var(--bb-spacing-1-5u);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.annotation-menu-item:hover,
.annotation-menu-item:focus-visible { background: var(--bb-color-bg-surface-hover); }

@media (max-width: 899px) {
  .annotation-ready-hint { flex-basis: 100%; white-space: normal; }
  .annotation-bar-actions { flex: 1 1 100%; justify-content: flex-end; }
}