/* Group "agencies-shorts": For agencies (/for-agencies) and Shorts (/shorts).
   Refines the shared patterns in site.css and pages.css. Every drawing here
   mirrors a real screen: the project list and its preferences, the upload
   form's project field, the video page's versions and clip controls, and the
   video chat. Tokens only; the fixed colours are the sample client brand
   swatches (each shows the value written beside it) and the always-dark
   video frames. */

/* ================================================================ shared */
.ag-flush, .sh-flush { margin-bottom: 0; }
.ag-tc-dim, .sh-tc-dim { color: var(--ink-400); }
/* A drawing beside a heading may shrink: its long file names truncate
   instead of pushing the page sideways on a phone. */
.split > .center2 { min-width: 0; }
/* Text links that sit alone get a real touch target. */
.ag-tap, .sh-tap { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: var(--font-medium); }
.sx__head--row > .ag-tap, .sx__head--row > .sh-tap { margin-bottom: -0.5rem; }

/* A finished frame as a small 9:16 thumbnail, with the client's brand
   colour as a dot on its corner. */
.ag-thumb { position: relative; flex: none; display: block; width: 2.25rem; aspect-ratio: 9 / 16; border-radius: var(--radius-xs);
  background: #1A232A; box-shadow: 0 0 0 1px var(--border); }
.ag-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ag-thumb::after { content: ""; position: absolute; right: -0.3rem; bottom: -0.3rem; width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--sw); box-shadow: 0 0 0 2px var(--surface); }
.ag-thumb--lg { width: 3rem; border-radius: var(--radius-sm); }
.ag-thumb--lg::after { width: 1rem; height: 1rem; }
.ag-swatch { flex: none; display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--sw); }

/* ======================================================= agencies: hero */
/* The project list: one row per client. */
.ag-board { width: 100%; max-width: 31rem; }
.ag-board__list { list-style: none; padding: var(--space-2) var(--space-2) 0; display: flex; flex-direction: column; }
.ag-board__list li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); min-width: 0; }
.ag-board__list li + li { border-top: var(--border-w) solid var(--border-subtle); }
.ag-board__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ag-board__text b { font-size: var(--text-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-board__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-board__meta span + span::before { content: " · "; }
.ag-hex { flex: none; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.ag-board__list .s-badge { flex: none; }
.ag-board__new { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-4) var(--space-4); padding: 0 var(--space-3);
  min-height: 2.75rem; border: var(--border-w) dashed var(--border-strong); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-subtle); }
.ag-board__new svg { color: var(--accent-text); }
@media (max-width: 559px) { .ag-hex { display: none; } .ag-board__list li { gap: var(--space-3); } }
/* Small laptops: the list is narrow there, so the hex values step aside and
   each client's line reads in full. */
@media (min-width: 1024px) and (max-width: 1279px) { .ag-hex { display: none; } }
/* The smallest phones: the kind of video and the count stack under the
   client's name instead of ending in an ellipsis. */
@media (max-width: 399px) {
  .ag-board__meta { white-space: normal; }
  .ag-board__meta span { display: block; }
  .ag-board__meta span + span::before { content: none; }
}

/* ======================================================= agencies: look */
.ag-checks { margin-top: var(--space-2); }
.ag-checks li { color: var(--text); line-height: 1.5; }

/* The project page: its name, what it remembers, and the chat line that
   taught it the last one. */
.ag-proj { width: 100%; max-width: 30rem; background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg); overflow: hidden; }
.ag-proj__head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: var(--border-w) solid var(--border); }
.ag-proj__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-proj__name b { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.015em; color: var(--text-strong); line-height: 1.15; }
.ag-proj__name span { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.ag-proj__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
.ag-proj__label { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-subtle); }
.ag-prefs { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ag-prefs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 2.5rem; padding-block: var(--space-1);
  font-size: var(--text-sm); color: var(--text); border-bottom: var(--border-w) solid var(--border-subtle); }
.ag-prefs li:last-child { border-bottom: 0; }
.ag-prefs svg { flex: none; color: var(--text-subtle); }
.ag-prefs .ag-swatch { margin-inline: 1px; }
.ag-prefs code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.ag-prefs li.is-new { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); border-radius: var(--radius-md); background: var(--cut-subtle);
  border-bottom-color: transparent; }
.ag-prefs li.is-new svg { color: var(--cut-text); }
.ag-prefs .pill { margin-left: auto; }
.ag-proj__chat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--bg-subtle); border-top: var(--border-w) solid var(--border); }
.ag-proj__chat .bub { max-width: 88%; }
@media (max-width: 419px) {
  .ag-proj__head, .ag-proj__body, .ag-proj__chat { padding-inline: var(--space-4); }
  .ag-prefs .pill { margin-left: 0; }
}

/* ======================================================= agencies: steps */
/* Step 1: the upload form's project field and the file going in. */
.ag-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ag-field__label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); }
.ag-field__box { display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3); border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); color: var(--text); }
.ag-field__box svg { margin-left: auto; color: var(--text-subtle); }
.ag-file { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; max-width: 100%; padding: 0.3rem 0.65rem;
  border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--text-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-file svg { flex: none; }

/* Step 2: three edits in progress, each with the job page's step bar. */
.ag-runs { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-subtle); }
.ag-run { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.ag-run b { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-medium); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Step 3: the client's note, passed on as it is. */
.ag-chat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: var(--border-w) solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-subtle); }
.ag-chat .bub { max-width: 94%; }

/* Step 4: the versions, the approved one ticked, and its download. */
.ag-vers { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.ag-vers__row { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-vers__row i { display: inline-flex; align-items: center; gap: 0.3rem; font-style: normal; font-family: var(--font-mono); font-size: var(--text-2xs);
  padding: 0.25rem 0.65rem; border-radius: var(--radius-full); border: var(--border-w) solid var(--border); color: var(--text-muted); background: var(--surface); }
.ag-vers__row i.is-on { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); }
.ag-vers__dl { pointer-events: none; }

/* Phones: each drawing gets the card's full width, under the words. */
@media (max-width: 559px) { .step2 .step2__art.ag-field, .step2 .step2__art.ag-runs, .step2 .step2__art.ag-chat, .step2 .step2__art.ag-vers { grid-column: 1 / -1; } }
/* Small laptops: two columns would squeeze each drawing, so the heading
   sits on top and the steps get the full width, as on a tablet. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ag-steps.steps2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .ag-steps .steps2__head { position: static; }
}

/* ===================================================== agencies: output */
/* The heading beside the frames on a wide screen, so four real frames sit
   at a readable size without a full-height band. */
.ag-out { display: grid; gap: var(--space-10); }
@media (min-width: 1024px) { .ag-out { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: var(--space-12); align-items: end; } }
.ag-frames figcaption, .sh-frames figcaption { color: var(--text-muted); }
.ag-frames figcaption b, .sh-frames figcaption b { display: block; color: var(--text-strong); font-weight: var(--font-semibold); }
.sx--ink .ag-frames img, .sx--ink .sh-frames img { border-color: var(--ink-700); }
/* Phones: two frames per row instead of a sideways strip, so none hides. */
@media (max-width: 767px) {
  .frames.ag-frames { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* ===================================================== agencies: volume */
.ag-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .ag-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359px) { .ag-specs { grid-template-columns: minmax(0, 1fr); } }
/* Phones: "83 h 20 min" stays on one line in its half-width tile. */
@media (min-width: 360px) and (max-width: 419px) {
  .ag-specs .spec { padding-inline: var(--space-4); }
  .ag-specs .spec b { font-size: 1.375rem; }
}
.ag-limits { display: grid; gap: var(--space-4) var(--space-8); }
@media (min-width: 768px) { .ag-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ag-band { margin-top: var(--space-10); }
.ag-band h3 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); letter-spacing: -0.025em; }
@media (max-width: 479px) { .ag-band .s-btn { width: 100%; } }

/* ============================================================ FAQ */
.ag-flush .lede a, .sh-flush .lede a { font-weight: var(--font-medium); }

/* ============================================================ your turn */
/* The smallest phones (320px): the shared closing box is a little too
   padded for its button, so it gives back some room here. */
@media (max-width: 359px) {
  .final { padding: var(--space-6) var(--space-4); }
  .final__drop { padding: var(--space-5) var(--space-3); }
}
/* The drop's title wraps as a pair of even lines, never one word alone. */
.final__drop b { text-wrap: balance; text-align: center; }

/* ========================================================= shorts: hero */
/* The fan of real frames is wider than its column on a small laptop and on
   the smallest phones, so the phones shrink there instead of pushing the
   page sideways. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sh-fan .phone { width: 9.5rem; }
  .sh-fan .phone:nth-child(2) { width: 11rem; }
}
@media (max-width: 359px) {
  .sh-fan .phone { width: 6.5rem; border-width: 4px; border-radius: 1.1rem; }
  .sh-fan .phone:nth-child(2) { width: 7.75rem; }
}

/* ===================================================== shorts: the rules */
.sh-rules { margin-top: var(--space-2); }
.sh-rules > li span { line-height: 1.5; }

/* An example transcript: skipped passages struck in orange with the reason,
   the picked one boxed in blue with its reasons, and where it sits in the
   long video. */
.sh-pick { width: 100%; max-width: 32rem; }
.sh-pick__list { list-style: none; padding: var(--space-2) var(--space-5); display: flex; flex-direction: column; }
.sh-line { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding-block: var(--space-4); }
.sh-line + .sh-line { border-top: var(--border-w) solid var(--border-subtle); }
.sh-line__t { padding-top: 0.2rem; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.sh-line__words { font-size: var(--text-sm); line-height: 1.6; color: var(--text); }
.sh-line__words b { font-weight: var(--font-semibold); color: var(--text-strong); }
.sh-line__why { grid-column: 2; justify-self: start; }
.sh-line.is-skip .sh-line__words { color: var(--text-muted); }
.sh-line.is-pick { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); border-radius: var(--radius-lg);
  background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); border-top-color: transparent; }
.sh-line.is-pick + .sh-line { border-top-color: transparent; }
.sh-line__checks { grid-column: 2; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: var(--text-xs); color: var(--text-muted); }
.sh-line__checks li { display: inline-flex; align-items: center; gap: 0.3rem; }
.sh-line__checks svg { color: var(--accent-text); }
.sh-pick__tl { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); border-top: var(--border-w) solid var(--border); }
.sh-pick__bar { position: relative; display: block; height: 0.625rem; border-radius: var(--radius-full); background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px var(--border); }
.sh-pick__bar i { position: absolute; top: -0.25rem; bottom: -0.25rem; left: var(--a); width: max(var(--w), 0.5rem); border-radius: 2px; background: var(--accent); }
.sh-pick__marks { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
@media (max-width: 479px) {
  .sh-pick__list, .sh-pick__tl { padding-inline: var(--space-4); }
  .sh-line { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2); }
}
/* Small phones: the window dots step aside so the title reads in full. */
@media (max-width: 399px) { .sh-pick .editwin__bar i { display: none; } .sh-pick .editwin__file { margin-left: 0; } }
@media (max-width: 359px) {
  .sh-line { grid-template-columns: minmax(0, 1fr); }
  .sh-line__why, .sh-line__checks { grid-column: 1; }
}

/* ===================================================== shorts: how to ask */
/* The real controls, drawn: the upload form's select and the video page's
   clips card with its count and button. */
.sh-art { justify-content: center; gap: var(--space-2); }
.sh-art__label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); }
.sh-art__select { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3);
  border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); color: var(--text); }
.sh-art__select svg { color: var(--text-subtle); }
.sh-art__row { display: flex; gap: var(--space-2); }
/* The video page's clips card: its title with the "Free" tag, then the count
   and the button. */
.sh-art__label--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sh-art__free { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.45rem; border-radius: var(--radius-full);
  background: var(--success-subtle); color: var(--success); font-size: var(--text-2xs); font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.sh-art__count { flex: none; display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3);
  border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); color: var(--text); }
.sh-art__count svg { color: var(--text-subtle); }
.sh-art__btn { flex: 1; display: grid; place-items: center; min-height: 2.5rem; padding-inline: var(--space-3); border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); white-space: nowrap; }
.sh-ways .ocard__art .bub { max-width: 92%; }
/* Tablets: three cards do not fit in a row, and two leave one orphan, so
   each card lies on its side with the drawing beside the words. */
@media (min-width: 600px) and (max-width: 1023px) {
  .sh-ways { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .sh-ways .ocard { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr;
    gap: var(--space-2) var(--space-6); align-items: start; }
  .sh-ways .ocard__art { grid-row: 1 / span 2; }
  .sh-ways .ocard h3 { align-self: end; margin-top: var(--space-3); }
}

/* ======================================================= shorts: each clip */
.sh-checks li { line-height: 1.5; }
@media (max-width: 767px) {
  .frames.sh-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-inline: 0; padding-inline: 0; overflow: visible; }
}
@media (max-width: 479px) { .sh-frames figcaption { font-size: var(--text-2xs); } }

/* ======================================================= shorts: how many */
.sh-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .sh-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }