/* Observation exercise (/lab/see/)
 *
 * Same palette and type as the Lab index, which mirrors the homepage
 * sections in css/core/index.css where the values are authored.
 *
 * The photograph is the page. Everything else is set quiet around it so
 * the eye goes back to the image between lines, which is the point.
 */
.ob {
  --ob-paper:  #F7F6F3;
  --ob-dot:    #ccc8c0;
  --ob-forest: #2C4132;
  --ob-rust:   #B85C3D;
  --ob-mute:   #6B6864;
  --ob-rule:   #d5d0c5;
  --ob-mine:   #EDE5D0;
  --ob-serif:  "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", "Georgia", serif;

  background-color: var(--ob-paper);
  background-image: radial-gradient(circle, var(--ob-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--ob-forest);
  min-height: 100vh;
  padding: 40px 20px 80px;
}

.ob-inner { max-width: 760px; margin: 0 auto; }

.ob-head { margin-bottom: 26px; }
.ob-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ob-rust);
}
.ob-title {
  font-family: var(--ob-serif);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.1;
  margin: 8px 0 0;
  /* Not balanced. Balance evens the lines by keeping them short, which
     left the heading stopping well before the photograph underneath it
     ended and a gap down the right with no reason a reader could see. */
  text-wrap: pretty;
}

.ob-figure { margin: 0 0 22px; }
.ob-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #e4dfd6;
}
.ob-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-top: 10px;
  font-size: 0.82rem;
}
.ob-photo-title { font-weight: 700; }
.ob-credit { color: var(--ob-mute); }

.ob-lede {
  /* Runs the full column. The 62 character measure is right for a page of
     running text and wrong for one paragraph sitting over a grid: it
     stopped short of the photographs underneath and left a gap down the
     right with nothing explaining it. */
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 26px;
}
.ob-empty, .ob-none {
  color: var(--ob-mute);
  line-height: 1.65;
  max-width: 62ch;
}

/* ── The list ─────────────────────────────────────────────── */
.ob-rows { display: flex; flex-direction: column; gap: 10px; }
.ob-row { display: flex; align-items: baseline; gap: 10px; }
.ob-row-prefix {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ob-mute);
  width: 44px;
}
.ob-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ob-forest);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ob-rule);
  padding: 4px 2px;
  outline: none;
}
.ob-input:focus { border-bottom-color: var(--ob-rust); }

.ob-add {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ob-rust);
  cursor: pointer;
}
.ob-add:hover { text-decoration: underline; }

.ob-actions { margin-top: 26px; }
.ob-btn {
  border: 0;
  border-radius: 20px;
  background: var(--ob-forest);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
}
.ob-btn:hover { background: var(--ob-rust); }
.ob-note {
  margin-top: 16px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ob-mute);
  max-width: 58ch;
}

/* ── Results ──────────────────────────────────────────────── */
.ob-results-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  margin-top: 34px;
}
.ob-results-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ob-mute);
  margin: 34px 0 12px;
}
.ob-results-head .ob-results-title { margin: 0; }
.ob-people { font-size: 0.78rem; color: var(--ob-mute); }

.ob-mine, .ob-rare, .ob-common { list-style: none; margin: 0; padding: 0; }
.ob-mine li, .ob-rare li {
  padding: 7px 0;
  border-bottom: 1px solid var(--ob-rule);
  line-height: 1.5;
}

.ob-common-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--ob-rule);
}
.ob-common-row.is-mine { background: var(--ob-mine); }
.ob-common-text { line-height: 1.5; }
.ob-common-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ob-mute);
}
.ob-got-it {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-rust);
}

@media (max-width: 560px) {
  .ob { padding: 28px 16px 60px; }
  .ob-row-prefix { width: 38px; font-size: 0.66rem; }
  .ob-common-row { grid-template-columns: 1fr auto; }
  .ob-got-it { grid-column: 1 / -1; }
}

.ob-back {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-rust);
  text-decoration: none;
  border-bottom: 2px solid var(--ob-rust);
  padding-bottom: 2px;
}
.ob-back:hover { color: var(--ob-forest); border-bottom-color: var(--ob-forest); }

/* ── The tag, matching the Lab index ──────────────────────── */
.ob-tag {
  display: inline-block;
  background: var(--ob-forest);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 22px;
}

/* ── Three passes ─────────────────────────────────────────── */
.ob-steps {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.ob-steps li { list-style: none; }
.ob-step-dot {
  padding: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px dashed var(--ob-rule);
  display: grid;
  place-items: center;
  font-family: var(--ob-mono, inherit);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ob-mute);
}
.ob-step-dot.is-current {
  border-style: solid;
  border-color: var(--ob-forest);
  background: var(--ob-forest);
  color: #fff;
}
.ob-step-dot.is-done { border-style: solid; border-color: var(--ob-forest); color: var(--ob-forest); }

.ob-panel .ob-title { margin-top: 0; }
.ob-panel .ob-title:focus { outline: none; }

/* The photograph turns for the shapes pass. Held to a height that
   survives being on its side, so a portrait picture rotated 90 degrees
   does not push the questions off the screen. */
.ob-photo {
  /* The element hugs the picture rather than stretching to the column and
     letterboxing inside itself. A portrait photograph was painting into
     the middle of a full-width box with empty ground either side, which
     made it look small and gave the eye somewhere else to go. Height is
     the limit; width follows the picture. */
  width: auto;
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  transition: transform 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ob-photo { transition: none; }
}
/* Air between the prompt and the picture, so the heading is not sitting
   on top of the photograph it is asking about. */
.ob-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 26px;
}

.ob-rotate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 14px;
  border: 2px solid var(--ob-forest);
  border-radius: 4px;
  background: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ob-forest);
  cursor: pointer;
}
.ob-rotate:hover { background: var(--ob-forest); color: #fff; }

/* ── The index of photographs ─────────────────────────────── */
/* Three across, so a set of six fills two rows exactly. auto-fill gave
   four at this width and left the last two stranded on a row of their
   own. The count of photographs and the width of the grid have to agree,
   so if the set changes size this number is the other half of it. */
.ob-grid {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 760px) {
  .ob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .ob-grid { grid-template-columns: minmax(0, 1fr); }
}
.ob-grid-link { display: block; text-decoration: none; color: inherit; }
.ob-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ob-rule);
}
.ob-grid-title {
  display: block;
  margin-top: 10px;
  font-family: var(--ob-serif);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--ob-forest);
}
.ob-grid-state {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-mute);
}
.ob-grid-item.is-done .ob-thumb { opacity: 0.55; }
.ob-grid-link:hover .ob-grid-title { color: var(--ob-rust); }

.ob-progress {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-mute);
  margin: 10px 0 0;
}
.ob-result-block { margin-bottom: 40px; }


.ob-step-dot[disabled] { cursor: default; opacity: 0.55; }
.ob-step-dot:not([disabled]):hover { border-color: var(--ob-forest); }

.ob-back-step {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ob-mute);
  cursor: pointer;
}
.ob-back-step:hover { color: var(--ob-forest); }

.ob-step-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ob-rust);
  margin-bottom: 6px;
}

/* Back on the left, forward on the right, on one line. The forward
   control takes the auto margin so it stays right even on the first
   pass, where there is nothing to go back to. */
.ob-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.ob-nav .ob-btn { margin-left: auto; }

/* ── One box per pass ─────────────────────────────────────── */
.ob-entry-label {
  display: block;
  font-size: 0.76rem;
  color: var(--ob-mute);
  margin-bottom: 8px;
}
.ob-entry {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ob-forest);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--ob-rule);
  border-radius: 4px;
  padding: 12px 14px;
  outline: none;
  resize: vertical;
}
.ob-entry:focus { border-color: var(--ob-forest); }
.ob-entry::placeholder { color: var(--ob-mute); }

/* The split, shown back before it is acted on. */
.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.ob-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ob-mine);
  border: 1px solid var(--ob-rule);
  border-radius: 4px;
  padding: 5px 6px 5px 10px;
  font-size: 0.86rem;
  color: var(--ob-forest);
}
.ob-chip-x {
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
  color: var(--ob-mute);
  cursor: pointer;
}
.ob-chip-x:hover { color: var(--ob-rust); }

.ob-rotate-icon {
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
}

.ob-rotate-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.ob-rotate-note {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ob-mute);
}


/* One line of breadcrumb rather than a link and a tag jammed together.
   The tag said which exercise this was and so does the trail, without
   two shapes fighting for the same corner. */
.ob-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ob-crumb { color: var(--ob-mute); text-decoration: none; }
.ob-crumb:hover { color: var(--ob-forest); text-decoration: underline; }
.ob-crumb-sep { color: var(--ob-rule); }
.ob-crumb-here { color: var(--ob-forest); }

.ob-warn {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--ob-rust);
}

/* The closing move, marked out from the comparison above it: a rule and a
   tint rather than a card, since it is a message rather than something to
   act on inside the page. */
.ob-challenge {
  margin: 8px 0 30px;
  padding: 20px 22px;
  background: var(--ob-mine);
  border-left: 4px solid var(--ob-forest);
  border-radius: 4px;
}
.ob-challenge-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ob-rust);
  margin-bottom: 8px;
}
.ob-challenge-text {
  /* Runs the width of the box. The measure was set for a column of body
     copy, and inside a callout it left the text short of the right edge
     with no reason a reader could see. */
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ob-forest);
}

.ob-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}
/* The count is the thing holding the reader in place, so it is sized to
   be read from where they are actually looking, which is the photograph
   rather than the button. */
.ob-hold-note {
  font-family: var(--ob-serif);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ob-rust);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Sits under a heading that needs a counter-example, which is not the
   same as the model answer the placeholder carries. */
.ob-hint {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ob-mute);
  margin: 8px 0 0;
  max-width: 52ch;
}

/* ── The reveal, read across rather than down ─────────────── */
.ob-result-heading {
  font-family: var(--ob-serif);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--ob-forest);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ob-forest);
}
.ob-result-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.ob-col-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ob-mute);
  margin: 0 0 8px;
}
.ob-result-col .ob-mine li,
.ob-result-col .ob-common-row { padding: 6px 0; }

/* A row the reader also caught is marked on the shared side, which is
   where the comparison actually happens. */
.ob-common-row.is-mine {
  background: var(--ob-mine);
  box-shadow: -6px 0 0 var(--ob-mine), 6px 0 0 var(--ob-mine);
}
.ob-common-row.is-mine .ob-common-text { font-weight: 700; }

.ob-only-you {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dotted var(--ob-rule);
}

@media (max-width: 620px) {
  .ob-result-cols { grid-template-columns: 1fr; gap: 20px; }
}

/* ── How much you wrote against how much people write ─────── */
.ob-tally {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dotted var(--ob-rule);
}
.ob-tally-row {
  display: grid;
  grid-template-columns: 68px 1fr 34px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ob-tally-who {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ob-mute);
}
.ob-tally-track {
  display: block;
  height: 12px;
  background: var(--ob-mine);
  border-radius: 2px;
  overflow: hidden;
}
.ob-tally-bar {
  display: block;
  height: 100%;
  background: var(--ob-rule);
  border-radius: 2px;
}
.ob-tally-bar.is-mine { background: var(--ob-forest); }
.ob-tally-n {
  font-family: var(--ob-serif);
  font-weight: 900;
  font-size: 1rem;
  color: var(--ob-forest);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ob-tally-note {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: var(--ob-mute);
}

/* What a room of people saw and this reader did not. Marked out with the
   accent because it is the useful half of the comparison, not a scold. */
.ob-missed {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--ob-mine);
  border-left: 3px solid var(--ob-rust);
  border-radius: 3px;
}
.ob-missed-list { list-style: none; margin: 0; padding: 0; }
.ob-missed-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.95rem;
  color: var(--ob-forest);
}
.ob-missed-n {
  font-weight: 800;
  color: var(--ob-mute);
  font-variant-numeric: tabular-nums;
}

/* The reader's own list, folded to the one number worth putting beside
   the other column. Open it and the list is underneath. */
.ob-mine-fold { margin: 0; }
.ob-mine-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.ob-mine-summary::-webkit-details-marker { display: none; }
.ob-mine-summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--ob-mute);
  font-size: 0.8rem;
}
.ob-mine-fold[open] .ob-mine-summary::after { content: '▾'; }
.ob-mine-n {
  font-family: var(--ob-serif);
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ob-forest);
  font-variant-numeric: tabular-nums;
}
.ob-mine-of {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ob-mute);
}
.ob-mine-fold .ob-mine { margin-top: 10px; }

/* Leading the page rather than closing a section, so it gets the room a
   headline gets. */
.ob-tally-lead {
  margin: 0 0 34px;
  padding: 20px 22px;
  background: var(--ob-mine);
  border-radius: 4px;
  border-top: none;
}
.ob-tally-lead .ob-tally-track { height: 16px; }
.ob-tally-lead .ob-tally-n { font-size: 1.3rem; }