/* Sight-read, compact: frame + controls + change log on the left; everything Clef reads packed on the right.
   This page runs wider than the others so more fits on one screen. */
.masthead, .programme, main, .foot { max-width: 1560px; }
.sources .how-btn { float: none; margin: 0 0 0 auto; padding: 0.42rem 0.85rem; font-size: 0.86rem; }
.sr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); align-items: start; padding-top: 0.6rem; }
.sr-left { position: sticky; top: 0.8rem; display: grid; gap: 0.9rem; }
.sr h3 { margin: 0 0 0.45rem; font: italic 400 1.02rem/1.1 var(--serif); color: var(--text-dim); }
.ghost.small { padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.fine { color: var(--text-faint); font-size: 0.78rem; margin: 0.7rem 0 0; }

/* the frame */
.sr .frame { aspect-ratio: 16 / 10; }
.sr .frame video { transform: none; }
.sr .frame.mirror video { transform: scaleX(-1); }
.sr .frame.contain video, .sr .frame.contain img { object-fit: contain; background: #0B0507; }
.sr .frame-copy strong { font-size: 1.7rem; }
.frame-tag {
  position: absolute; left: 10px; bottom: 10px; margin: 0; max-width: calc(100% - 20px); z-index: 2;
  padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(18, 7, 9, 0.82); color: var(--brass-hi);
  font: italic 1rem/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beam { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; }
.frame.reading .beam {
  opacity: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(242, 203, 126, 0) 42%, rgba(242, 203, 126, 0.22) 50%, rgba(242, 203, 126, 0) 58%, transparent 100%);
  background-size: 100% 220%; animation: sweep 0.9s linear infinite;
}
@keyframes sweep { from { background-position: 0 100%; } to { background-position: 0 0%; } }
.frame.flash { animation: flash 1.2s ease-out; }
@keyframes flash {
  0%, 30% { box-shadow: 0 0 0 10px #1A0B10, 0 0 0 16px var(--brass-hi), 0 0 60px rgba(242, 203, 126, 0.8); }
  100% { box-shadow: 0 0 0 10px #1A0B10, 0 0 0 11px rgba(212, 162, 76, 0.45), 0 30px 60px -25px rgba(0, 0, 0, 0.8); }
}

/* controls: one wrapping row */
.sources { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.4rem; }
.sources .primary { padding: 0.5rem 1rem; font-size: 0.88rem; }
.sources .ghost { padding: 0.42rem 0.85rem; font-size: 0.86rem; }
.cam-pick select { width: auto; max-width: 15rem; padding: 0.42rem 2.2rem 0.42rem 0.8rem; border-radius: 999px; font-size: 0.84rem; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-dim); padding: 0.28rem 0.75rem; border-radius: 999px; cursor: pointer; font-size: 0.82rem; }
.seg button[aria-checked="true"] { background: var(--brass); color: var(--ebony); }
.sources .status { font-size: 0.82rem; }

/* the four numbers */
.meter-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.meter-strip div { padding: 0.45rem 0.65rem; display: flex; align-items: baseline; gap: 0.4rem; border-left: 1px solid var(--line); min-width: 0; }
.meter-strip div:first-child { border-left: 0; }
.meter-strip b { font: 400 1.35rem/1 var(--serif); color: var(--brass-hi); }
.meter-strip span { font-size: 0.7rem; color: var(--text-faint); line-height: 1.15; }

/* change log */
.log-head { display: flex; align-items: baseline; justify-content: space-between; }
.log-head h2 { margin: 0; font: italic 400 1.25rem/1 var(--serif); }
.log { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 15rem; overflow-y: auto; display: grid; gap: 1px; }
.log li { display: grid; grid-template-columns: 5.2rem 0.8rem minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; padding: 0.22rem 0.35rem; border-radius: 5px; font-size: 0.82rem; }
.log li:first-child { background: rgba(241, 233, 218, 0.05); }
.log .lt { color: var(--text-faint); font-size: 0.72rem; white-space: nowrap; }
.log .lm { text-align: center; font-weight: 600; color: var(--text-faint); }
.log .lx { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .lx b { font-weight: 400; color: var(--text-faint); font-size: 0.74rem; }
.log img { border-radius: 3px; display: block; width: 44px; height: auto; }
.log .log-on .lm { color: var(--brass-hi); }
.log .log-off .lm { color: var(--danger); }
.log .log-switch .lx { color: var(--text); }
.log .log-switch .lm { color: var(--signal); }
.log .log-watch { background: rgba(242, 203, 126, 0.14) !important; }
.log .log-watch .lm, .log .log-watch .lx { color: var(--brass-hi); }
.log .log-empty { display: block; color: var(--text-faint); font: italic 1rem/1.35 var(--serif); background: none !important; white-space: normal; }

/* readout */
.readout { padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); margin-bottom: 0.7rem; }
.readout-kicker { margin: 0; color: var(--text-faint); font-size: 0.8rem; }
.readout-line { display: flex; align-items: baseline; gap: 0.4rem 1rem; flex-wrap: wrap; }
.readout-main { margin: 0; font: italic 400 clamp(1.9rem, 3.2vw, 2.5rem)/1.05 var(--serif); color: var(--brass-hi); text-shadow: 0 0 30px rgba(242, 203, 126, 0.2); }
.readout-sub { margin: 0; font: 400 1.15rem/1.2 var(--serif); color: var(--text); }
.readout-sentence { margin: 0.4rem 0 0; color: var(--text-dim); font-size: 0.88rem; line-height: 1.45; }
.readout-sentence:empty, .readout-sub:empty, .alerts:empty { display: none; }
.alerts { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.alerts li { padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(242, 144, 127, 0.15); color: var(--danger); font-size: 0.8rem; }
.alerts b { font-weight: 600; margin-left: 0.2rem; }

/* dense cards of ranked answers */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; }
.card { padding: 0.5rem 0.65rem 0.55rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 244, 228, 0.025); min-width: 0; transition: opacity 0.3s; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.22rem; }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem 2.1rem; gap: 0.3rem; align-items: center; font-size: 0.8rem; color: var(--text-dim); }
.rank .rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .rb { height: 5px; border-radius: 3px; background: rgba(241, 233, 218, 0.09); overflow: hidden; }
.rank .rb i { display: block; height: 100%; background: var(--ivory-shade); border-radius: 3px; transition: width 0.4s ease; }
.rank .rp { text-align: right; color: var(--text-faint); font-size: 0.74rem; }
.rank li.win { color: var(--text); font-weight: 500; }
.rank li.win .rb i { background: var(--brass); }
.rank li.win .rp { color: var(--brass-hi); }
.rank .rank-empty { display: block; color: var(--text-faint); font: italic 0.95rem var(--serif); }

/* colour as one stacked strip */
.spectrum { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: rgba(241, 233, 218, 0.06); box-shadow: inset 0 0 0 1px var(--line); }
.spectrum i { display: block; height: 100%; transition: flex-grow 0.4s ease; min-width: 0; }
.spectrum-cap { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-dim); }
.spectrum-cap b { color: var(--text); font-weight: 500; }

/* 0-4 scales as five-segment meters, side by side */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.level { display: grid; gap: 0.3rem; padding: 0.45rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 244, 228, 0.025); transition: opacity 0.3s; }
.lv-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-head { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.78rem; color: var(--text-dim); }
.lv-head b { color: var(--text); font-weight: 500; white-space: nowrap; }
.lv-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.lv-seg i { height: 6px; border-radius: 2px; background: rgba(241, 233, 218, 0.1); position: relative; overflow: hidden; }
.lv-seg i::after { content: ""; position: absolute; inset: 0; background: var(--brass); opacity: var(--p, 0); transition: opacity 0.4s; }
.lv-seg i.win::after { background: var(--brass-hi); }

/* yes/no indicators: one row per group */
.flags { display: grid; gap: 0.35rem; }
.fg { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.fg-name { font: italic 0.98rem/1.6 var(--serif); color: var(--text-dim); }
.flag-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.flag {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.16rem 0.5rem 0.16rem 0.38rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 244, 228, 0.03); color: var(--text-faint); font-size: 0.76rem; cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}
.flag i { width: 8px; height: 8px; border-radius: 50%; background: rgba(241, 233, 218, 0.18); flex: none; transition: background 0.3s, box-shadow 0.3s; }
.flag b { font-weight: 400; font-size: 0.7rem; color: var(--text-faint); min-width: 2.1em; text-align: right; }
.flag.on { color: var(--text); border-color: rgba(212, 162, 76, 0.55); background: rgba(212, 162, 76, 0.12); }
.flag.on i { background: var(--brass-hi); box-shadow: 0 0 8px rgba(242, 203, 126, 0.85); }
.flag.on b { color: var(--brass-hi); }
.flag.maybe i { background: rgba(242, 203, 126, 0.45); }
.flag.watched { outline: 1.5px dashed var(--signal); outline-offset: 1px; }
.flag.alert.on { border-color: rgba(242, 144, 127, 0.6); background: rgba(242, 144, 127, 0.14); }
.flag.alert.on i { background: var(--danger); box-shadow: 0 0 8px rgba(242, 144, 127, 0.8); }
.flag.alert.on b { color: var(--danger); }
.stale { opacity: 0.5; }
.flag.stale { opacity: 0.55; }

.add-look { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.35rem 0.6rem; margin-top: 0.35rem; align-items: center; }
.add-look .flag-row:empty { display: none; }
.add-look-row { grid-column: 2; display: flex; gap: 0.4rem; }
.add-look-row input { flex: 1; padding: 0.4rem 0.75rem; font-size: 0.84rem; border-radius: 999px; }
.sr .raw { margin-top: 0.9rem; }

@media (max-width: 1000px) {
  .sr { grid-template-columns: 1fr; row-gap: 0.9rem; }
  /* phone/tablet order: frame, controls, what Clef sees, then the numbers and the log */
  .sr-left { display: contents; }
  .sr .frame { order: 1; } .sources { order: 2; } .sr-right { order: 3; } .meter-strip { order: 4; } .log-wrap { order: 5; }
}
@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .levels { grid-template-columns: 1fr; }
  .fg, .add-look { grid-template-columns: 1fr; gap: 0.2rem; }
  .add-look-row { grid-column: 1; }
  .meter-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meter-strip div:nth-child(3) { border-left: 0; }
  .meter-strip div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .log li { grid-template-columns: 5rem 0.8rem minmax(0, 1fr); }
  .log img { display: none; }
  .cam-pick { flex-basis: 100%; }
  .cam-pick select { max-width: 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .frame.reading .beam { animation: none; background: rgba(242, 203, 126, 0.06); }
  .frame.flash { animation: none; }
  .rank .rb i, .spectrum i, .lv-seg i::after, .flag, .flag i { transition: none; }
}