/* Content Studio (studio.js): calendar, post markup, shot requests, references. Built on portal.css tokens. Phone first. */
/* client on a computer: calendar, posts and requests use the width (the phone column stays for upload pages) */
@media (min-width: 900px) {
  body.client.st-wide .shell { max-width: 1180px; }
  body.client.st-wide .page { padding-left: 32px; padding-right: 32px; }
  body.client.st-wide .tabbar { max-width: 640px; width: 100%; margin: 0 auto; border-radius: 16px 16px 0 0; }
  body.client.st-wide .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.client.st-wide .st-card { grid-template-columns: 120px 1fr; }
  body.client.st-wide .st-card__img { width: 120px; }
}
.st-h2 { display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; }
.st-h3 { font-size: 1rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.st-title { font-size: 1.35rem; line-height: 1.2; margin: 8px 0 4px; overflow-wrap: anywhere; }
.st-cols { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; align-items: start; }
@media (min-width: 700px) { .st-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-col h2 { font-size: .95rem; margin: 0 0 10px; display: flex; gap: 2px; align-items: center; }
.st-col h2 .chip__count { margin-left: 6px; }
.st-col { background: var(--paper-2); border-radius: var(--r-lg); padding: 12px; min-width: 0; }
/* on a computer a card is a picture with its title under it, the column already says the status, and an empty column gives its width to the full ones */
@media (min-width: 700px) {
  .st-col.is-empty h2 { margin: 0; }
  .st-col.is-empty .st-cards { display: none; }
  .st-col .st-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; align-items: start; }
  .st-col .st-card__img { width: 100%; aspect-ratio: 16 / 9; max-height: 170px; border-radius: 0; }
  .st-col .st-card__m { padding: 10px 12px 12px; }
  .st-col .st-card__m b { line-height: 1.3; text-wrap: pretty; }
  .st-col .st-tick { left: auto; right: 0; } /* a client's logo sits top left on most designs */
  .st-col .st-tick input { box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
}
/* a laptop keeps the five status columns in one row (audit 2026-10-31 fix 1): they no longer wrap 3 + 2, and a full board scrolls sideways inside itself, never the page */
@media (min-width: 700px) and (max-width: 1199px) {
  .st-cols { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .st-col { flex: 1 0 170px; scroll-snap-align: start; }
  .st-col.is-empty { flex: 0 0 140px; }
}
@media (min-width: 1200px) {
  .st-cols { display: flex; align-items: flex-start; }
  .st-col { flex: 1 1 0; }
  .st-col.is-empty { flex: 0 0 170px; }
}
.st-card__foot:empty { display: none; }
.st-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-card { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px; color: inherit; text-decoration: none; min-height: var(--tap); }
.st-card:hover, .st-card:focus-visible { border-color: var(--ink-3); }
.st-card__img { position: relative; width: 88px; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-2); }
.st-card__img img, .st-card__img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-card__play { position: absolute; inset: auto 6px 6px auto; background: rgba(0,0,0,.6); color: #fff; border-radius: 99px; padding: 4px; display: flex; }
.st-card__m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-card__m b { overflow-wrap: anywhere; }
.st-card__foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-agenda a { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); color: inherit; text-decoration: none; min-height: var(--tap); }
.st-agenda__m { display: flex; flex-direction: column; min-width: 0; }
.st-day { display: flex; flex-direction: column; align-items: center; line-height: 1; background: var(--gold-wash); color: var(--gold-ink); border-radius: var(--r-sm); padding: 6px 0; }
.st-day b { font-size: 1.3rem; } .st-day small { font-size: .65rem; letter-spacing: .08em; font-weight: 700; }
@media (max-width: 420px) { .st-agenda a { grid-template-columns: 44px 1fr; } .st-agenda a .pill { grid-column: 2; justify-self: start; } }
/* team post search (2026-11-01): a full-width box above the columns; results reuse the agenda row look */
.st-search { display: grid; gap: 6px; margin: 0 0 16px; }
.st-search input { width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--card); box-sizing: border-box; }
.st-qres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-qres a { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 12px; min-height: var(--tap); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.st-qres a b { flex: 1 1 100%; min-width: 0; }

.st-post { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 960px) { .st-post { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; } }
.st-stage-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-tools__sp { flex: 1; }
/* the marks layer sits on the picture itself, never on the black bars round it, so a mark means the same spot on every screen (audit team H4) */
.st-stage { position: relative; display: flex; justify-content: center; background: #111; border-radius: var(--r-lg); overflow: hidden; line-height: 0; touch-action: auto; }
.st-fit { position: relative; width: 100%; max-width: 100%; flex: none; }
.st-fit img, .st-fit video { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; }
.st-fit.is-fit img, .st-fit.is-fit video { height: 100%; max-height: none; }
.st-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.st-stage.is-marking .st-fit .st-over { pointer-events: auto; cursor: crosshair; touch-action: none; }
.st-stage.is-marking { outline: 3px solid var(--gold); outline-offset: -3px; }
.st-stroke { fill: none; stroke: #2F80ED; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st-stroke.is-client, .st-stroke.is-new { stroke: #FF3B30; }
.st-pin circle { fill: #2F80ED; stroke: #fff; stroke-width: 4; }
.st-pin.is-client circle, .st-pin.is-new circle { fill: #FF3B30; }
.st-pin text, .st-label { fill: #fff; font: 700 28px system-ui, sans-serif; text-anchor: middle; }
.st-label { fill: #FF3B30; paint-order: stroke; stroke: #fff; stroke-width: 6px; }
.st-hint { margin: 0; color: var(--ink-2); }
/* draw tools: pen / arrow / box, four colours, two sizes; marks keep the same thickness at any screen size */
.st-shape, g.st-shape > * { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st-shape { stroke-width: 5; } /* an arrow is a <g>: its line and head inherit the width, vector-effect does not inherit */
.st-shape[stroke-width="18"] { stroke-width: 10; }
.st-shape.is-new { opacity: .9; }
.st-draw { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px; background: var(--gold-wash); border-radius: var(--r); }
.st-draw__g { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-draw .chip, .st-draw .btn { min-height: 40px; }
.st-draw .chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.st-sw { width: 40px; height: 40px; border-radius: 99px; background: var(--sw); border: 2px solid var(--line); cursor: pointer; padding: 0; }
.st-sw[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.st-thumb { position: relative; display: block; width: 140px; max-width: 100%; margin: 6px 0; border-radius: 8px; overflow: hidden; background: #111; line-height: 0; }
.st-thumb img { width: 100%; height: auto; display: block; }
.st-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-thumb:not(:has(img)) { aspect-ratio: 16 / 9; }
.st-thumb .st-shape { stroke-width: 2.5; }
.st-thumb .st-shape[stroke-width="18"] { stroke-width: 4; }
.st-assign { flex: 0 1 170px !important; }
.st-compose { background: var(--gold-wash); padding: 8px; border-radius: var(--r); }
.st-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-inline .input { flex: 1 1 180px; min-width: 0; }
.st-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.st-cap { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; }
.st-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.st-ch { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.st-file { position: relative; cursor: pointer; }
.st-notes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.st-notes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.st-notes li.muted { display: block; } /* "No notes yet." has no number beside it, so it needs the whole row */
.st-notes p { margin: 4px 0; overflow-wrap: anywhere; }
.st-num { width: 28px; height: 28px; border-radius: 99px; background: #2F80ED; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.st-num.is-client { background: #C62828; }

.st-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-req { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); color: inherit; text-decoration: none; min-height: var(--tap); }
@media (max-width: 420px) { .st-req { grid-template-columns: auto 1fr; } .st-req .pill { grid-column: 2; justify-self: start; } }
.st-req__m { display: flex; flex-direction: column; min-width: 0; }
.st-req__n { font-weight: 800; font-size: 1.1rem; background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 6px 10px; }
.st-req__n--lg { font-size: 1.5rem; padding: 10px 14px; }
.st-req-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0 16px; }
.st-req-head > div { flex: 1 1 200px; min-width: 0; }
.st-brief p { white-space: pre-wrap; margin: 0; }
.st-shots { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.st-shot { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .st-shot { grid-template-columns: 220px 1fr; } }
.st-shot__ex { background: var(--paper-2); border-radius: var(--r); min-height: 120px; display: grid; place-items: center; overflow: hidden; }
.st-shot__ex img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-shot__m { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-shot__m .eyebrow { margin: 0; }
.st-shot-files { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.st-shot-files li { display: flex; flex-direction: column; gap: 4px; width: 120px; }
.st-shot-file { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-sm); background: #111; }
.st-shot-files a { overflow-wrap: anywhere; }

.st-refs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.st-ref { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 0; }
.st-ref > img, .st-ref__pic img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); }
/* a made cover for a card with no picture: the site's colours, the title big, a play button on a link */
.st-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; aspect-ratio: 4/3; padding: 14px; border-radius: var(--r-sm); color: #fff; text-decoration: none; overflow: hidden; background: linear-gradient(135deg, #2b2b30, #111114); }
.st-cover--instagram { background: linear-gradient(135deg, #833ab4, #c13584 45%, #e1306c 65%, #f77737); }
.st-cover--facebook { background: linear-gradient(135deg, #1877f2, #0b4fb3); }
.st-cover--tiktok { background: linear-gradient(135deg, #111, #000); box-shadow: inset 3px 0 0 #25f4ee, inset -3px 0 0 #fe2c55; }
.st-cover--youtube { background: linear-gradient(135deg, #e62117, #9b0f0a); }
.st-cover--vimeo { background: linear-gradient(135deg, #0e7ea3, #09566f); }
.st-cover--pinterest { background: linear-gradient(135deg, #e60023, #a3001a); }
.st-cover--voice { background: linear-gradient(135deg, #5b4bd6, #2e2380); }
.st-cover--idea { background: linear-gradient(135deg, #a4660c, #7a4708); }
.st-cover__site { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .5); font-size: 13px; font-weight: 600; }
.st-cover__title { font-size: 20px; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
a.st-cover .st-cover__title { padding-right: 52px; }
.st-cover__play { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; }
.st-ref > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.st-ref audio { width: 100%; }
.st-ref p { margin: 0; overflow-wrap: anywhere; }
/* S1: a reference's extra pictures and PDFs, and the picker list in the Add sheet */
.st-rf-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.st-rf-files li { min-width: 0; }
.st-rf-files--pdf { flex-direction: column; }
.st-rf-files--pdf li, .st-rf-files--pdf .st-rf-pdf { width: 100%; }
.st-rf-files--pdf .st-rf-pdf span { flex: 1; max-width: none; }
.st-rf-files img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); }
.st-rf-files a { display: block; min-width: 48px; min-height: 48px; }
.st-rf-pdf { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--line, #ddd); border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.st-rf-pdf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.st-rf-pdf small { opacity: .7; white-space: nowrap; }
/* S2: a post's extra pictures and PDFs, under the main graphic */
.st-pf { margin-top: 16px; display: grid; gap: 8px; }
.st-pf .field__label { display: flex; align-items: center; gap: 6px; margin: 0; }
.st-pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-pf-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.st-pf-list .st-rf-pdf { flex: 1 1 200px; min-width: 0; }
.st-pf-list .st-rf-pdf span { flex: 1; max-width: none; }
.st-pf-pic { display: block; min-width: 48px; min-height: 48px; }
.st-pf-pic img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.st-pf-list .link-btn { min-height: 48px; padding: 0 8px; }
.st-rf-picked { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.st-rf-picked li { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.st-rf-picked .is-bad { color: var(--danger, #c0231c); font-weight: 600; }
/* the in-portal PDF viewer: one page at a time, full sheet width */
.st-pdf { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.st-pdf__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-pdf__bar .btn { min-width: 48px; min-height: 48px; }
.st-pdf__bar .tap-link { margin-left: auto; min-height: 48px; display: inline-flex; align-items: center; gap: 4px; }
.st-pdf__page { width: 100%; min-width: 0; overflow: hidden; background: #f4f1ec; border-radius: var(--r-sm); }
.st-pdf__page canvas { display: block; max-width: 100%; }

/* the client switcher is always shown now: on a phone the title shrinks instead of pushing the header off-screen */
.t-top__title { min-width: 0; flex: 1 1 auto; }
.t-top__title .cl-pick { max-width: 100%; width: 100%; }
@media (max-width: 520px) { .t-top .who > span { display: none; } }
/* the tabs do not fit beside the client picker under a very wide screen: they take their own row, so nothing squeezes to one letter a line */
.t-top .who > span { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 1700px) {
  .t-top { flex-wrap: wrap; row-gap: 6px; }
  header.t-top nav { order: 3; flex: 0 0 100%; min-width: 0; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
}
.drop.is-over { outline: 3px dashed var(--gold); outline-offset: 4px; background: var(--gold-wash); }
/* phone calendar: empty columns step aside, the month and the main calendar come before a long draft list (audit team M14) */
.st-order { display: flex; flex-direction: column; }
@media (max-width: 700px) {
  .st-col.is-empty { display: none; }
  .st-order .st-month { order: -2; } .st-order .st-main { order: -1; }
}
.st-m__k { display: inline-flex; align-items: center; white-space: nowrap; margin-right: 8px; }
.st-m__nodate { margin: 10px 0 0; }
.st-m__p { min-height: 6px; }
.tap-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
/* client on a computer: the tab bar is a plain row at the foot of the page, not floating over the work (audit client M11) */
@media (min-width: 900px) { body.client.st-wide .tabbar { position: static; } }
/* on a phone the client's decision sits right after the caption, in the flow: a floating bar covered the title and caption (audit client H12) */
.st-bar { display: none; }
@media (max-width: 899px) {
  .st-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
  .st-bar .btn { min-height: 48px; }
}
/* on a phone the marking tools are one row at the foot of the screen, and the picture stays in view (audit client H13, team M11) */
.st-draw .chip, .st-draw .btn { min-height: 44px; min-width: 44px; }
.st-sw { width: 44px; height: 44px; flex: none; }
@media (max-width: 720px) {
  body.is-marking .tabbar { display: none; }
  body.is-marking .page, body.is-marking .t-wrap { padding-bottom: 96px; }
  .st-draw { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -16px rgba(10, 18, 32, .4); }
  .st-draw__g { flex-wrap: nowrap; flex: none; }
  .st-draw .chip, .st-draw .btn { flex: none; padding: 0 12px; }
  #sp-compose:not(:empty) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 13; }
  #sp-compose .st-compose { border-radius: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
}
/* fix #4: month view */
.st-month { margin: 20px 0 8px; padding: 12px; }
.st-month header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.st-month header h2 { font-size: 1.05rem; margin: 0; }
.st-next svg { transform: scaleX(-1); }
.st-m, .st-m__h { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.st-m__h li { font-size: .7rem; font-weight: 700; color: var(--ink-3); text-align: center; padding: 2px 0; }
.st-m li { min-height: 56px; background: var(--paper-2); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.st-m li.st-m__blank { background: transparent; }
.st-m li.is-today { outline: 2px solid var(--gold); }
.st-m__d { font-size: .75rem; font-weight: 700; color: var(--ink-2); }
.st-m__p { display: block; font-size: .7rem; line-height: 1.2; padding: 2px 4px; border-radius: 4px; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-m__p--draft { background: #8a8f98; } .st-m__p--omar { background: #6B46A8; } .st-m__p--review { background: #2F80ED; } .st-m__p--changes { background: #D9480F; }
.st-m__p--approved { background: #1b7a3a; } .st-m__p--posted { background: #0b1220; }
@media (max-width: 600px) { .st-m li { min-height: 44px; } .st-m__p { font-size: 0; height: 6px; padding: 0; border-radius: 3px; } }
.st-m__key { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 10px 0 0; }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.st-tell { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.st-stops { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 18px; }
.st-stop { display: grid; grid-template-columns: 72px 1fr; gap: 14px; }
@media (max-width: 520px) { .st-stop { grid-template-columns: 1fr; } }
.st-stop__time { background: var(--ink); color: #fff; border-radius: var(--r); padding: 10px 6px; text-align: center; align-self: start; display: flex; flex-direction: column; }
.st-stop__time b { font-size: 1.15rem; } .st-stop__time small { opacity: .8; }
.st-stop__m { min-width: 0; }
.st-day--lg { padding: 10px 14px; } .st-day--lg b { font-size: 1.6rem; }
.st-takes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.st-takes li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; }
.st-takes li > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.st-takes a { overflow-wrap: anywhere; }
.st-retake { color: var(--bad); font-weight: 600; margin: 0; }
.st-prog:empty { display: none; }
@media print { .t-top, .t-subnav, .crumbs, .st-file, .st-inline, #wo-send, .btn { display: none !important; } body { background: #fff; } .st-shot { break-inside: avoid; } }
.st-form { display: flex; flex-direction: column; gap: 12px; }
.st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .st-row { grid-template-columns: 1fr; } }
.st-shot-f { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; min-width: 0; }
.st-shot-f legend { font-weight: 700; padding: 0 4px; }
.st-sheet .sheet__foot { display: flex; gap: 10px; }
.st-sheet .sheet__foot .btn { flex: 1; }
select.input { appearance: auto; }
/* tick posts on a column: the box sits on the corner of the picture, the card stays one link */
.st-cardrow { position: relative; min-width: 0; }
.st-tick { position: absolute; top: 0; left: 0; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.st-tick input { width: 22px; height: 22px; margin: 0; }
.st-batch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.st-batch[hidden] { display: none; }
.st-revs { display: grid; gap: 16px; margin-top: 12px; }
.st-rev { min-width: 0; display: grid; gap: 8px; }
.st-rev img, .st-rev video { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #111; border-radius: 12px; }
.st-rev__do { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.st-rev__do .textarea, .st-rev__do .btn--dark { grid-column: 1 / -1; }
.st-rev__all { margin: 16px 0 8px; }
.st-req--row { grid-template-columns: minmax(0, 1fr) auto; }
.st-fails { margin: 0; padding-left: 18px; display: grid; gap: 8px; overflow-wrap: anywhere; }
/* the monthly report: figures in a grid that folds on a phone, a bar per platform against the scope */
.rp-bar-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.rp-month { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rp-act { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.rp-tile { background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.rp-tile b { font-size: 22px; line-height: 1.2; }
.rp-tile span { font-size: 13px; color: var(--muted, #555); overflow-wrap: anywhere; }
.rp-scope { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 8px; }
.rp-scope li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.rp-bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--brand, #0A1220); }
.rp-list { margin-top: 24px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pp-tile { display: grid; gap: 4px; position: relative; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.pp-tile input { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; margin: 0; }
.pp-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--line); }
@media print { .rp-act, .rp-month .btn, .tabbar, .topbar { display: none !important; } .rp-tile { break-inside: avoid; } }
/* the bad reviews desk. A client with finished work and a review has seven tabs, which fit a 375 px line only a little smaller */
.tabbar--7 { gap: 0; padding-left: 4px; padding-right: 4px; }
.tabbar--7 a { font-size: 10.5px; }
.bd-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.bd-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bd-grid { display: grid; gap: 16px; }
@media (min-width: 800px) { .bd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.bd-shot { display: block; width: 100%; max-height: 70vh; object-fit: contain; background: var(--line); border-radius: 12px; }
.bd-side, .bd-act { display: grid; gap: 12px; min-width: 0; }
.bd-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bd-stories { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.bd-story { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; overflow-wrap: anywhere; }
.bd-story p { margin: 0; }
.bd-story audio { width: 100%; }

/* S3: "What are you sending?" picker. Tiles are 48 px+ tall; two columns on a phone, four on desktop. */
.st-kinds { border: 0; padding: 0; margin: 0; min-width: 0; }
.st-kinds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .st-kinds__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-kind { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 10px; border: 1.5px solid var(--line, #d8d2c4); border-radius: 12px; background: var(--card, #fff); cursor: pointer; }
.st-kind b { font-size: 15px; }
.st-kind small { color: var(--muted, #6b6b6b); font-size: 12px; }
.st-kind:has(input:checked) { border-color: var(--brand, #FF4C01); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #FF4C01) 25%, transparent); }
.st-kind:has(input:focus-visible) { outline: 2px solid var(--brand, #FF4C01); outline-offset: 2px; }
.st-kind.is-soon { opacity: .55; cursor: not-allowed; }

/* S4: carousel. The stage takes a sideways swipe (the page still scrolls up and down); arrows and the strip's buttons are 48 px. */
.st-stage.is-car { touch-action: pan-y; }
.st-car { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-car__b { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line, #d8d2c4); background: var(--card, #fff); font-size: 28px; line-height: 1; cursor: pointer; color: inherit; }
.st-car__b:disabled { opacity: .35; cursor: default; }
.st-car__mid { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 4px; }
.st-car__n { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-car__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 100%; line-height: 0; }
.st-car__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line, #d8d2c4); }
.st-car__dots i.is-on { background: var(--brand, #FF4C01); }
.st-strip { display: grid; gap: 6px; min-width: 0; }
.st-strip .field__label { margin: 0; }
.st-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.st-strip__it { display: grid; gap: 2px; min-width: 0; border-radius: 10px; padding: 2px; border: 2px solid transparent; }
.st-strip__it.is-on { border-color: var(--brand, #FF4C01); }
.st-strip__it.is-dragging { opacity: .6; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.st-strip__pic { position: relative; display: block; width: 100%; min-height: 48px; padding: 0; border: 0; background: #111; border-radius: 8px; overflow: hidden; cursor: pointer; line-height: 0; }
.st-strip__pic.is-drag { touch-action: none; cursor: grab; }
.st-strip__pic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.st-strip__pic b { position: absolute; top: 4px; left: 4px; min-width: 22px; padding: 2px 6px; border-radius: 11px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; line-height: 18px; }
.st-strip__mv { display: grid; grid-template-columns: 1fr 1fr; }
.st-strip__mv button { min-height: 48px; min-width: 48px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: inherit; }
.st-strip__mv button:disabled { opacity: .3; cursor: default; }
.st-stage.is-car img { -webkit-user-drag: none; user-select: none; } /* a mouse swipe must not start dragging the picture away */
.link-btn.st-goslide { min-height: 48px; min-width: 48px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; }
.st-car-dl { min-height: 48px; }
/* S5 print PDF: the page is drawn into a picture; until it is, a plain line holds the stage. A PDF has no picture thumb, so a tile stands in. */
.st-stage.is-print { background: #4a4a4a; }
.st-print-wait { margin: 0; padding: 80px 16px; line-height: 1.4; color: #fff; text-align: center; }
.st-fit img:not([src]) { display: none; }
.st-spec { overflow-wrap: anywhere; }
.st-pdf-tile { display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px; font: 700 1.1rem/1 system-ui, sans-serif; letter-spacing: .08em; color: var(--ink, #0B1322); background: var(--paper-2, #F4EFE4); }
.st-rev .st-pdf-tile { min-height: 160px; border-radius: 12px; }
/* S6 website link: the page's own preview when there is one, else the plain address; Open live page is a full-size tap */
.st-link { display: grid; gap: 10px; min-width: 0; padding: 12px; background: var(--card, #fff); border: 1px solid var(--line, #d8d2c4); border-radius: var(--r-lg, 16px); }
.st-link__img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; background: var(--paper-2, #F4EFE4); }
.st-link__m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-link__site { display: inline-flex; align-items: center; gap: 6px; }
.st-link__t { font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.st-link__d, .st-link__u { overflow-wrap: anywhere; }
.st-link__u { word-break: break-all; }
.st-link__open { min-height: 48px; justify-content: center; }
@media (min-width: 900px) { .st-link--big:has(.st-link__img) { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; } .st-link--big .st-link__open { grid-column: 1 / -1; justify-self: start; } }
.st-rev .st-link__img { max-height: 200px; object-fit: cover; background: var(--paper-2, #F4EFE4); }