/* FOLIO // LOUPE — v6
   · seven films: the spine, the light table and the contact strip re-fit
   · native <button>s inside the capsule lose the browser's grey face
   · phone header fits one row
   · "Skin notes": the contest brief, point by point, with things to try */

/* ------------------------------------------------ capsule: native buttons -- */
:where(.fl-skin) button.fl-btn {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  font: inherit;
}

/* --------------------------------------- spine: fit short desktop windows -- */
@media (min-width: 901px) and (max-height: 980px) {
  .spine__rule { margin-block: 34px; }
  .lede { margin-top: 16px; }
  .index { margin-top: 30px; }
  .index__item { min-height: 38px; padding-block: 3px; }
  .folio { padding-top: 18px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .spine { padding-block: 26px 22px; }
  .spine__rule { margin-block: 22px; }
  .headline { font-size: clamp(40px, 3.7vw, 58px); }
  .lede { margin-top: 12px; font-size: 14px; }
  .index { margin-top: 20px; }
  .index__item { min-height: 34px; padding-block: 2px; }
  .folio { padding-top: 12px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .lede { display: none; }
  .index__item { min-height: 32px; }
}

/* ------------------------------------- light table: any number of strips -- */
@media (min-width: 901px) {
  .lt__strips { grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
  .lt__strip { grid-template-columns: 204px minmax(0, 1fr); }
}

/* ------------- contact sheet: 4 x 2, the eighth cell opens the light table -- */
.contact__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
@media (max-width: 620px) { .contact__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } }
.frame--lt {
  block-size: 100%;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 10px 8px;
  text-align: center;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(239 230 218 / 0.16);
  background: repeating-linear-gradient(135deg, rgb(239 230 218 / 0.035) 0 6px, transparent 6px 12px);
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.frame--lt::after { display: none; }
.frame--lt svg { inline-size: 30px; block-size: 30px; color: #f0a274; transition: scale 0.35s var(--glide), rotate 0.35s var(--glide); }
.frame--lt b { font: 500 12.5px/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.frame--lt span { font: 400 10.5px/1.3 var(--mono); letter-spacing: 0.05em; color: #b9ad9e; }
.frame--lt kbd { margin-inline-start: 4px; min-width: 20px; color: #2a2520; background: #efe6da; box-shadow: none; }
@media (hover: hover) {
  .frame--lt:hover { box-shadow: inset 0 0 0 1px #f0a274; background-color: rgb(240 162 116 / 0.06); }
  .frame--lt:hover svg { scale: 1.12; rotate: -8deg; }
}
@media (prefers-reduced-motion: reduce) { .frame--lt svg { transition: none; } }

/* the spine no longer scrolls: its contents fit, and the breathing leaf shadow
   (which overhangs by design) must not create a scroll range of its own */
@media (min-width: 901px) and (min-height: 621px) { .spine { overflow: hidden; } }

/* ------------------------------------------------ phone header: one row -- */
@media (max-width: 560px) {
  .sheet__head { align-items: center; gap: 8px; }
  .sheet__plate-no { letter-spacing: 0.16em; white-space: nowrap; }
  .lamp[aria-checked="false"] .lamp__lab--dark,
  .lamp[aria-checked="true"] .lamp__lab--day { display: none; }
}

/* ----------------------------------------------------------- skin notes -- */
.brief { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--hair); }
.brief__title { margin: 0 0 6px; font-size: 12.5px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 550; }
.brief__title span { color: var(--muted); font-weight: 400; letter-spacing: 0.1em; text-transform: none; }
.brief__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 2.6vw, 40px);
}
.brief__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
  padding-block: 20px 4px;
}
.brief__n { padding-top: 2px; font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--accent-ink); }
.brief__item h3 { margin: 0 0 6px; font: 600 14px/1.3 var(--sans); letter-spacing: 0.01em; color: var(--ink); }
.brief__item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.brief__item .brief__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.brief__try {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  background: none;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.brief__try i { inline-size: 11px; block-size: 11px; border-radius: 3px; box-shadow: 0 0 0 1px rgb(110 85 60 / 0.45); }
.brief__try i[data-tone="white"] { background: #f6f3ec; }
.brief__try i[data-tone="black"] { background: #050505; }
.brief__try[aria-pressed="true"], .brief__try[aria-checked="false"] { box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.brief__try:active { scale: 0.97; }
@media (hover: hover) { .brief__try:hover { box-shadow: inset 0 0 0 1px var(--accent); } }
@media (pointer: coarse) { .brief__try { min-height: 44px; padding-inline: 16px; } }
@media (max-width: 1320px) { .brief__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .brief__list { grid-template-columns: 1fr; } .brief { margin-top: 32px; padding-top: 22px; } .brief__item { padding-top: 16px; } }
.js-intro .brief { animation: fade 0.8s ease both 1s; }

/* the speed button gets the same two-tone focus ring as the v10 buttons */
.fl-skin .fl-btn--rate:focus-visible {
  outline: 3px solid var(--fl-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgb(252 249 244 / 0.95);
}

/* short windows: the strips give a little more room to the frames */
@media (min-width: 901px) and (max-height: 940px) {
  .lt__strips { gap: 6px; }
  .lt__strip { padding-block: 8px; }
}

/* touch screens: every target inside the player is 44 px or more, and the
   keyboard cheat-sheet steps aside (the full card is still one tap away) */
@media (pointer: coarse) {
  .fl-skin .fl-menu__item,
  .fl-skin .fl-menu__group .fl-menu__item,
  .fl-skin .fl-resume button,
  .fl-skin .fl-next button { min-block-size: 44px; }
  .fl-skin .fl-resume__x { inline-size: 44px; }
}
@media (hover: none) and (pointer: coarse) { .notes__keys { display: none; } }

/* light table on short windows: when a strip gets too low for three lines of
   lettering, the edge print goes and the number sits beside the title */
@media (min-width: 901px) {
  .lt__strips { container: lt / size; }
  @container lt (max-height: 480px) {
    .lt__edge { display: none; }
  }
  @container lt (max-height: 400px) {
    .lt__label { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
  }
}

/* medium windows (901–1180 px): the player is too small to hold seven strips,
   so the light table takes the whole window, as it does on phones */
@media (min-width: 901px) and (max-width: 1180px) {
  .lt { position: fixed; inset: 0; z-index: 60; border-radius: 0; padding: 14px 20px 18px; }
  .lt__strips { container-type: normal; grid-auto-rows: 76px; gap: 9px; align-content: center; overflow-y: auto; }
  .lt__strip { padding-block: 10px; }
}

/* header: nothing wraps. The studio line steps aside before it has to break */
.sheet__plate-no, .sheet__studio { white-space: nowrap; }
@media (max-width: 1420px) { .sheet__studio { display: none; } }
@media (max-width: 350px) { .lamp .lamp__lab { display: none; } }

/* phones: two frames per row, so the captions tighten to stay whole */
@media (max-width: 620px) {
  .frame__row { gap: 6px; font-size: 10.5px; letter-spacing: 0; }
}
/* touch-only screens have no "C" key to press */
@media (hover: none) and (pointer: coarse) { .frame--lt kbd, .contact__key { display: none; } }
@media (max-width: 380px) { .frame__row { gap: 5px; font-size: 9.8px; } }
@media (max-width: 340px) { .contact__strip { grid-template-columns: minmax(0, 1fr); } }

/* narrow spine (small laptops): the film titles stay on one line */
@media (min-width: 901px) and (max-width: 1320px) {
  .index__item { grid-template-columns: 24px 1fr auto; gap: 10px; letter-spacing: 0.16em; }
  .index__item[aria-current="true"] .index__dash,
  .index__item[aria-current="true"]:hover .index__dash { width: 20px; }
}
@media (min-width: 901px) and (max-width: 1240px) { .index__item { letter-spacing: 0.12em; } }