/* Minimal styling — this is a tool, not a product. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", sans-serif;
  color: #222; background: #f7f7f8;
}
header {
  display: flex; align-items: center; gap: 1em;
  background: #222; color: #fafafa;
  padding: .5em 1em;
}
header .logo { color: #fafafa; text-decoration: none; font-weight: 600; }
header .who { margin-left: auto; }
header .progress { background: #444; padding: .15em .5em; border-radius: 3px; }
header .change-scorer { margin: 0; }
header .change-scorer button {
  background: transparent; color: #aaa; border: 1px solid #555;
  font-size: .85em; padding: .15em .5em; cursor: pointer;
}
header .change-scorer button:hover { color: #fff; border-color: #888; }
main { max-width: 1100px; margin: 0 auto; padding: 1em; }

a { color: #2766c2; }
code { font: 12px/1 SFMono-Regular, Menlo, monospace;
       background: #eef0f3; padding: 1px 4px; border-radius: 3px; }
.muted { color: #777; }
.small { font-size: .9em; }
.badge { display: inline-block; padding: .1em .5em; border-radius: 3px;
         font-size: .85em; background: #ddd; margin-left: .3em; }
.badge.practice { background: #ffe9b3; }
.badge.timed-out { background: #ffd6cc; }

/* Index */
.sample { width: 100%; border-collapse: collapse; }
.sample th, .sample td { padding: .35em .6em; border-bottom: 1px solid #ddd; text-align: left; }
.sample tr.status-complete { background: #ebf6ed; }
.sample tr.status-in_progress { background: #fff7da; }
.status-pill { padding: .1em .5em; border-radius: 3px; font-size: .85em; background: #e3e3e3; }
.status-complete .status-pill { background: #76c08c; color: #fff; }
.status-in_progress .status-pill { background: #d6a700; color: #fff; }
.setup { max-width: 480px; }

/* Score page */
.score-nav { display: flex; gap: 1em; align-items: center; padding: .5em 0;
             border-bottom: 1px solid #ddd; margin-bottom: 1em; }
.score-nav a { text-decoration: none; }
.score-nav .next-unscored { margin-left: 1em; font-weight: 600; }
.save-indicator { margin-left: auto; padding: .15em .5em; border-radius: 3px;
                  background: #eee; font-size: .85em; }
.save-indicator.saving { background: #d4e7ff; }
.save-indicator.saved { background: #d6f0d6; }
.save-indicator.error { background: #fbcaca; }

.score-header h1 { margin: 0; font-size: 1.3em; }
.score-header .meta { margin: .15em 0 .25em 0; color: #555; }
.sample-note { background: #fff5d4; padding: .35em .5em; border-left: 3px solid #c0a000; }

.audio-row { display: flex; gap: 1em; align-items: center; padding: .5em 0; }
.audio-row .playhead { font-family: SFMono-Regular, monospace; }
.audio-row .hint { color: #666; font-size: .85em; }
.audio-row audio { flex: 1; max-width: 600px; }

.reference-strip { background: #f1f3f5; padding: .25em .75em; border-radius: 4px; margin: .5em 0; }
.reference-strip ul { margin: .25em 0; padding-left: 1.5em; }

.markers { background: #fff; padding: .6em .75em; border-radius: 4px;
           border: 1px solid #ddd; margin-bottom: .75em; }
.marker-row { display: flex; flex-wrap: wrap; gap: .75em;
              align-items: center; padding: .15em 0; }
.marker-row label { display: inline-flex; gap: .35em; align-items: center; }
.marker-row input[type="number"] { font: inherit; padding: .15em .35em;
                                    width: 6.5em; border: 1px solid #ccc;
                                    border-radius: 3px; }
.marker-hint { color: #666; font-size: .85em; padding-top: .25em; }
#wcpm-display { font-weight: 600; }
.wcpm-flash {
  animation: wcpm-flash 1.0s ease-out;
}
@keyframes wcpm-flash {
  0%   { background: #ffe680; box-shadow: 0 0 0 3px #ffe680; }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
.markers.set-first-pending #set-first { background: #fcd34d; color: #000; }
.markers.set-last-pending  #set-last  { background: #fcd34d; color: #000; }
button { font: inherit; padding: .35em .75em; border: 1px solid #aaa; border-radius: 3px;
         background: #fafafa; cursor: pointer; }
button:hover { background: #fff; }
button:disabled { opacity: .5; cursor: not-allowed; }

.passage { background: #fff; padding: .75em 1em; border-radius: 4px;
           border: 1px solid #ddd; margin-bottom: .75em; }
#passage-words { line-height: 2; }
.word {
  display: inline-block;
  padding: .1em .35em;
  margin: 1px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #d4d4d4;
  background: #f7f7f7;
  user-select: none;
}
.word:hover { background: #fff; outline: 2px solid #b3d7ff; }
.word.label-correct       { background: #d4ecd4; border-color: #67a467; }
.word.label-deletion      { background: #ffd2d2; border-color: #c44; text-decoration: line-through; }
.word.label-substitution  { background: #ffe1b8; border-color: #c87a17; }
.word.label-not_reached   { background: #e3e3e3; color: #888; }
.word.label-not_attempted { background: #f7f7f7; }
/* "default" — the human hasn't actively touched this word; the label
   was filled in from marker-aware defaults (base-rate prior, not an
   API pre-fill). Subtle italic + faded color to distinguish from
   explicit. */
.word.is-default          { font-style: italic; opacity: .68;
                            border-style: dashed; }
.word.is-first { box-shadow: inset 0 -3px 0 #2766c2; }
.word.is-last  { box-shadow: inset 0 -3px 0 #2766c2; }
.word.is-first.is-last { box-shadow: inset 0 -3px 0 #2766c2; }
.word .substitution-input { font-size: .9em; margin-left: .25em; }
.word .sc-badge { font-size: .7em; vertical-align: super;
                  background: #cfe6ff; padding: 0 .25em;
                  border-radius: 3px; margin-left: .15em;
                  cursor: pointer; }
.word.human-self-corrected .sc-badge { background: #2766c2; color: #fff; }
.word .sc-badge.sc-hint { opacity: .6; }

.insertions ul { padding-left: 1em; list-style: square; }
.insertions li { display: flex; gap: .5em; align-items: center; padding: .15em 0; }
.insertions form { display: flex; gap: .5em; align-items: center; margin-top: .35em; }

.passage-notes textarea { width: 100%; min-height: 6em; font: inherit;
                          padding: .5em; border-radius: 3px; border: 1px solid #ccc; }

.complete-row { padding: .75em 0; }
.complete-row #complete { background: #2766c2; color: #fff; border-color: #2055a0; }
.complete-row #complete:hover { background: #2055a0; }

/* Right-click word menu */
.word-menu {
  position: absolute;
  background: #fff;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: .25em 0;
  z-index: 100;
  min-width: 180px;
}
.word-menu[hidden] { display: none; }
.word-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; padding: .35em .8em;
  cursor: pointer;
  font: inherit;
}
.word-menu button:hover { background: #ebf2ff; }
.word-menu hr { margin: .25em .25em; border: 0; border-top: 1px solid #eee; }