/* Focus study page (studies/focus.html) and the DoF ruler (ui/dof-ruler.js).
   Requires tokens.css, base.css, player.css.
   Layout: phone = head, picture (4:3), ruler + readout, controls stacked; tablet = the same with the
   controls in two columns; desktop = picture, ruler and readout in columns 1–8 with the head above,
   controls sticky in columns 9–12. */

.study--focus .study__main { padding-top: var(--s5); }

.focus-layout.study__layout {
  display: grid;
  gap: var(--s5) var(--s6);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "ruler" "panel";
  align-items: start;
}
.focus-head { grid-area: head; margin: 0; }
.focus-stage { grid-area: stage; min-width: 0; }
.focus-ruler { grid-area: ruler; min-width: 0; }
.focus-panel { grid-area: panel; }

.focus-lede {
  max-width: 62ch;
  color: var(--paper-2);
  font-size: var(--step-0);
}

/* Full-bleed picture on phones. */
@media (max-width: 639px) {
  .focus-stage { margin-inline: calc(-1 * var(--gutter)); }
}

/* --- Ruler ------------------------------------------------------------------ */

.focus-ruler { margin: 0; display: grid; gap: var(--s4); }
.focus-ruler__frame {
  padding: var(--s3) var(--s3) var(--s2);
  border: var(--hairline);
  border-radius: var(--radius-2);
  background: var(--ink-0);
}
.dof-ruler { display: block; width: 100%; height: auto; overflow: visible; }

.dof-ruler__band { fill: var(--tungsten); fill-opacity: 0.16; }
.dof-ruler__edge { stroke: var(--tungsten); stroke-width: 1; stroke-opacity: 0.85; }
.dof-ruler__axis { stroke: var(--line-strong); stroke-width: 1; }
.dof-ruler__axis--gap { stroke-dasharray: 2 3; }
.dof-ruler__tick { stroke: var(--line-strong); stroke-width: 1; }
.dof-ruler__tick--major { stroke: var(--paper-3); }
.dof-ruler__hyper { stroke: var(--daylight); stroke-width: 1.25; stroke-dasharray: 3 2; }
.dof-ruler__focus { stroke: var(--paper); stroke-width: 1.5; }
.dof-ruler__witness { fill: var(--paper); }

.dof-ruler text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.dof-ruler__num { fill: var(--paper-3); }
.dof-ruler__num--inf { font-size: 13px; }
.dof-ruler__label--focus { fill: var(--paper); }
.dof-ruler__label--hyper { fill: var(--daylight); }
.dof-ruler__name { fill: var(--paper-3); }

.dof-ruler__subject circle { fill: var(--ink-0); stroke: var(--paper-3); stroke-width: 1; }
.dof-ruler__subject.is-sharp circle { fill: var(--tungsten); stroke: var(--tungsten); }
.dof-ruler__subject.is-sharp .dof-ruler__name { fill: var(--tungsten); }

/* --- Readout + chips ---------------------------------------------------------- */

.focus-ruler__caption { display: grid; gap: var(--s4); }
.focus-readout { display: grid; gap: var(--s4); }
.dof-readout__list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s4);
}
.dof-readout__list > div {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding-top: var(--s2);
  border-top: var(--hairline);
}
.dof-readout__list dt, .dof-readout__list dd,
.dof-chip {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.dof-readout__list dt { color: var(--paper-3); }
.dof-readout__list dd { color: var(--paper); }

.dof-readout__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); }
.dof-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 32px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--paper-3);
}
.dof-chip__dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.dof-chip__id { color: var(--paper-2); }
.dof-chip__state { color: var(--paper-3); }
.dof-chip.is-sharp { border-color: var(--tungsten); color: var(--paper); }
.dof-chip.is-sharp .dof-chip__dot { background: var(--tungsten); border-color: var(--tungsten); }
.dof-chip.is-sharp .dof-chip__id, .dof-chip.is-sharp .dof-chip__state { color: var(--tungsten); }

.focus-key {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--s2);
  font-size: var(--step--1); color: var(--paper-3);
}
.focus-key li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: var(--s3); }
.focus-key__band { width: 18px; height: 10px; background: rgb(244 178 106 / 0.16); border-inline: 1px solid var(--tungsten); }
.focus-key__h { justify-self: center; width: 0; height: 12px; border-left: 1.25px dashed var(--daylight); }
.focus-key__disc { justify-self: center; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--paper-3); }

/* --- Focus slider: lens-ring engravings under the track ------------------------------- */

.focus-panel .controls__item--range:has(.dof-ring) { padding-bottom: var(--s4); }
.dof-ring { position: relative; height: 14px; margin-top: -2px; pointer-events: none; }  /* clear of the slider's focus ring */
.dof-ring__mark {
  position: absolute; top: 0;
  left: calc(8px + (100% - 16px) * var(--u));
  transform: translateX(-50%);
  padding-top: 5px;
  font-family: var(--font-mono); font-size: 0.66rem; line-height: 1;
  color: var(--paper-3); font-variant-numeric: tabular-nums;
}
.dof-ring__mark::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 4px; background: var(--paper-3);
}
.dof-ring__mark--inf { font-size: 0.8rem; color: var(--paper-2); }
/* Thin the engravings on narrow panels so they never collide. */
@media (max-width: 420px) {
  .dof-ring__mark:nth-child(2), .dof-ring__mark:nth-child(4) { visibility: hidden; }
}

/* --- Tablet: controls in two columns ---------------------------------------------- */

@media (min-width: 720px) and (max-width: 1023px) {
  .focus-panel .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .dof-readout__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Desktop: picture and ruler in cols 1–8, controls sticky in cols 9–12 ------------- */

@media (min-width: 1024px) {
  .focus-layout.study__layout {
    grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
    grid-template-areas: "head head" "stage panel" "ruler panel";
    grid-template-rows: auto auto 1fr;
  }
  .focus-panel { position: sticky; top: var(--s5); }
  .dof-readout__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}