/* The expressive layer: the overview header and phase path, the case gallery, the pages panel,
   the deck filmstrip and the page transitions. Built on tokens.css. */

/* ---- Cover ---------------------------------------------------------------
   Light and high-contrast: navy type on the site's pale-blue surface. */

.cover { position: relative; padding: 32px 36px 0; border: 1px solid var(--blue-100); border-radius: 20px; background: var(--blue-50); }
.cover__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cover__date { color: var(--text-3); font-size: 13.5px; }
.cover__kicker { margin-top: 14px; color: var(--blue-ink); font-size: 14.5px; font-weight: 500; }
.cover__title { max-width: 22ch; margin-top: 2px; color: var(--navy); font-size: 38px; font-weight: 600; line-height: 1.05; letter-spacing: -0.032em; }
.cover__lede { max-width: 72ch; margin-top: 10px; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.path {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  margin: 26px -36px 0;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--blue-100);
  border-radius: 0 0 19px 19px;
  background: var(--surface);
  list-style: none;
}
.path__step { position: relative; }
.path__step::before { content: ""; position: absolute; top: 18px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 2px; border-radius: 1px; background: var(--blue-200); }
.path__step:first-child::before { display: none; }
.path__step--done::before, .path__step--current::before, .path__step--partial::before { background: var(--blue); }
.path__step a { display: grid; justify-items: center; gap: 6px; padding: 4px; border-radius: 10px; color: var(--text-2); text-align: center; text-decoration: none; transition: background 0.15s; }
.path__step a:hover { background: var(--blue-50); }
.path__node { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--blue-300); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.path__step--done .path__node { background: var(--blue); box-shadow: none; color: #fff; }
.path__step--current .path__node { background: var(--navy); box-shadow: none; color: #fff; animation: halo 2.6s ease-in-out infinite; }
.path__name { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.path__step--current .path__name { color: var(--navy); font-weight: 600; }
.path__count { color: var(--text-3); font-size: 11.5px; }
@keyframes halo { 0%, 100% { box-shadow: 0 0 0 4px rgba(48, 131, 255, 0.22); } 50% { box-shadow: 0 0 0 8px rgba(48, 131, 255, 0.06); } }

/* ---- Overview work area -------------------------------------------------- */

.seg__n { margin-left: 6px; color: var(--text-3); font-size: 11px; }
.seg__item.is-active .seg__n { color: var(--work); font-weight: 600; }
.step.is-next { background: var(--blue-50); box-shadow: inset 3px 0 0 var(--blue); }
.step__flag { display: inline-block; margin-bottom: 3px; color: var(--blue-ink); font-size: 12px; font-weight: 600; }
.panel__note { padding: 12px 18px 0; color: var(--text-2); font-size: 13px; }

.fixes { margin: 0; padding: 6px 8px 8px; list-style: none; }
.fix { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; transition: background 0.15s; }
.fix:hover { background: var(--blue-50); }
.fix:hover .desk > .thumb { transform: scale(1.04); }
.desk--fix { width: 80px; aspect-ratio: 4 / 3; border-radius: 7px; }
.desk--fix > .thumb { max-width: calc(100% - 10px); max-height: calc(100% - 10px); }
.fix__body { display: grid; gap: 2px; min-width: 0; }
.fix__title { display: flex; align-items: center; gap: 7px; color: var(--navy); font-size: 14px; font-weight: 600; }
.fix__action { display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 13px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.mini-cases { margin: 0; padding: 8px 8px 10px; list-style: none; }
.mini-cases a { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 4px 12px; align-items: center; min-height: 38px; padding: 6px 10px; border-radius: 8px; text-decoration: none; transition: background 0.15s; }
.mini-cases a:hover { background: var(--blue-50); }
.mini-cases a .st { grid-column: 1 / -1; }
.mini-cases__title { overflow: hidden; color: var(--navy); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mini-cases__count { color: var(--text-2); font-size: 12.5px; text-align: right; }
.mini-cases .bar__cell { width: 8px; }

/* ---- Case gallery ----------------------------------------------------------- */

.case-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 18px; }
.case-cell { display: flex; }
.case-cell > .case-card { width: 100%; }
.case-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; transition: border-color 0.2s, box-shadow 0.3s; }
.case-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-2); }
.case-card__media { border-radius: 0; aspect-ratio: 4 / 3; }
.case-card__media > .thumb { max-width: calc(100% - 36px); max-height: calc(100% - 32px); }
.case-card:hover .case-card__media > .thumb { transform: scale(1.035); }
.case-card__body { display: grid; flex: 1; align-content: start; gap: 4px; padding: 12px 14px 14px; }
.case-card__meta { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; }
.case-card__meta .mono { color: var(--navy); }
.case-card__title { display: -webkit-box; min-height: 2.6em; overflow: hidden; color: var(--navy); font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.case-card__label { overflow: hidden; color: var(--text-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.case-card__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.case-card__count { color: var(--text-2); font-size: 12.5px; }
.case-card__foot .st { margin-left: auto; }
.case-card .bar__cell { width: 9px; }
.seg--icons .seg__item { padding: 0 9px; }

/* ---- Case header and pages panel -------------------------------------------- */

.case-head { align-items: stretch; margin-bottom: 18px; }
.case-head__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 16px 0 0; padding: 0 0 0 16px; color: var(--text-2); font-size: 13px; list-style: none; }
.case-head__stats li { display: flex; align-items: center; gap: 8px; }
.case-head__stats .i { color: var(--text-3); }
.case-head__side { display: flex; flex: none; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; }
.desk--head { width: 252px; aspect-ratio: 16 / 11; border-radius: 12px; cursor: zoom-in; }
.desk--head > .thumb { max-width: calc(100% - 28px); max-height: calc(100% - 24px); }

.editor--rail { grid-template-columns: 68px minmax(0, 1fr) 296px; gap: 28px; }
.pages-rail { position: sticky; top: 20px; display: grid; gap: 6px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 2px; scrollbar-width: none; }
.pages-rail::-webkit-scrollbar { display: none; }
.pr-item { display: grid; justify-items: center; gap: 3px; padding: 3px; border-radius: 8px; text-decoration: none; }
.pr-thumb { position: relative; display: grid; place-items: center; width: 56px; height: 42px; overflow: hidden; border-radius: 5px; background: var(--desk); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.15s; }
.pr-thumb > .thumb { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 8px); max-height: calc(100% - 8px); background: #fff; box-shadow: 0 1px 2px rgba(19, 52, 102, 0.25); }
.pr-thumb .thumb--empty span, .pr-thumb .thumb--empty .i { display: none; }
.pr-thumb--copy, .pr-thumb--cta { background: var(--surface); }
.pr-thumb--copy { align-content: center; justify-items: stretch; gap: 4px; padding: 0 9px; }
.pr-thumb--copy i { display: block; height: 3px; border-radius: 2px; background: #d6deec; }
.pr-thumb--copy i:last-child { width: 60%; }
.pr-pill { display: block; width: 30px; height: 9px; border-radius: 5px; background: var(--blue); }
.pr-num { color: var(--text-3); font-family: var(--mono); font-size: 10px; }
.pr-item--work .pr-thumb { box-shadow: inset 0 0 0 2px #f0b46a; }
.pr-item--omitted .pr-thumb { opacity: 0.4; }
.pr-item:hover .pr-thumb { box-shadow: inset 0 0 0 2px var(--blue-300); }
.pr-item.is-current .pr-thumb { box-shadow: inset 0 0 0 2px var(--blue), 0 4px 10px -4px rgba(48, 131, 255, 0.5); }
.pr-item.is-current .pr-num { color: var(--blue-ink); font-weight: 600; }

/* ---- Deck filmstrip ------------------------------------------------------- */

.filmstrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.film { display: grid; gap: 7px; color: var(--text-2); text-decoration: none; }
.film__frame { position: relative; display: grid; aspect-ratio: 297 / 210; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--paper); transition: border-color 0.15s, box-shadow 0.2s; }
.film__frame > .thumb { position: absolute; inset: 0; margin: auto; max-width: 84%; max-height: 74%; box-shadow: 0 1px 3px rgba(19, 52, 102, 0.22); }
.film__text { align-self: start; padding: 10px; color: var(--navy); font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.film:hover .film__frame { border-color: var(--blue-300); }
.film.is-blocked .film__frame { border-color: #f0b46a; box-shadow: 0 0 0 1px #f0b46a, var(--paper); }
.film__label { overflow: hidden; font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.film__label .mono { margin-right: 4px; color: var(--text-3); }

/* ---- Pipeline touch dots ---------------------------------------------------- */

.next { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.next .dots { grid-row: span 2; }
.next .next__due { grid-column: 2; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px #b5c0d5; }
.dots i.is-sent { background: var(--blue); box-shadow: none; }

/* ---- Sliding navigation marker ---------------------------------------------- */

.nav-wrap { position: relative; }
.nav-pill { position: absolute; top: 0; right: 0; left: 0; height: 36px; border-radius: 9px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); opacity: 0; pointer-events: none; transition: transform 0.32s var(--ease), height 0.32s var(--ease), opacity 0.2s; }
.nav .nav__item { position: relative; z-index: 1; }
.nav .nav__item.is-active { background: transparent; box-shadow: none; }

/* ---- Page transitions ---------------------------------------------------- */

.main { view-transition-name: page; }
::view-transition-old(page) { animation: vt-out 0.14s ease-in both; }
::view-transition-new(page) { animation: vt-in 0.34s var(--ease) both; }
::view-transition-group(case-hero) { z-index: 3; animation-duration: 0.48s; animation-timing-function: cubic-bezier(0.2, 0.75, 0.15, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 1360px) {
  .editor--rail { grid-template-columns: minmax(0, 1fr) 296px; }
  .pages-rail { display: none; }
}

@media (max-width: 1180px) {
  .cover__title { font-size: 34px; }
}

@media (max-width: 1080px) {
  .editor--rail { grid-template-columns: minmax(0, 1fr); }
  .case-head__side { flex-direction: row-reverse; align-items: flex-start; }
  .desk--head { width: 200px; }
  .filmstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path { grid-template-columns: repeat(9, minmax(96px, 1fr)); overflow-x: auto; }
}

@media (max-width: 860px) {
  .cover { padding: 24px 20px 0; border-radius: 16px; }
  .cover__body { flex-direction: column; align-items: flex-start; }
  .cover__title { font-size: 30px; }
  .cover__lede { font-size: 14px; }
  .path { margin: 24px -20px 0; padding: 14px 10px 16px; border-radius: 0 0 15px 15px; }
  .case-head { flex-direction: column; }
  .case-head__side { width: 100%; flex-direction: column-reverse; align-items: stretch; }
  .desk--head { width: 100%; }
  .case-head__side .pager { justify-content: flex-end; }
  .filmstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}