/* Creative Studio (PRD v1.1 Section 18.3 and 18.4). Uses ONLY the shared --sg-* tokens and the shared component classes; no colour,
   font or size is invented here. Gold (--sg-accent) is an editorial label and ring, never the primary button: primary is navy ink. */
.stu { display: flex; flex-direction: column; gap: var(--sg-space-5); font-family: var(--sg-font-body); color: var(--sg-text); min-width: 0; }
.stu .sg-btn--primary { background: var(--sg-text); color: var(--sg-bg); border-color: var(--sg-text); }
.stu .sg-btn--primary:hover { border-color: var(--sg-accent); }
.stu-muted { color: var(--sg-text-muted); font-size: 0.9rem; margin: 0; }
.stu-source { color: var(--sg-text-muted); font-size: 0.8rem; margin: var(--sg-space-1) 0 0; }
.stu-mono { font-family: var(--sg-font-mono); font-size: 0.82rem; word-break: break-all; }
.stu-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.stu-stack { display: flex; flex-direction: column; gap: var(--sg-space-4); }
.stu-select { min-height: var(--sg-tap); padding: 0 var(--sg-space-3); font: 600 0.95rem var(--sg-font-body); color: var(--sg-text); background: var(--sg-surface);
  border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m); min-width: 0; max-width: 100%; }

/* Head: title and purpose, then the week navigator, primary action and the Ask Maya hook */
.stu-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sg-space-4) var(--sg-space-6); align-items: flex-end; }
.stu-head__title { flex: 1 1 340px; min-width: 0; max-width: 62ch; }
.stu-eyebrow { margin: 0 0 var(--sg-space-1); color: var(--sg-accent); font: 700 0.75rem var(--sg-font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.stu-head h1 { font-family: var(--sg-font-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 var(--sg-space-2); }
.stu-purpose { margin: 0; color: var(--sg-text); max-width: 56ch; }
.stu-head__tools { display: flex; flex-direction: column; gap: var(--sg-space-3); align-items: flex-end; flex: 0 1 auto; min-width: 0; }
.stu-weeknav { display: flex; gap: var(--sg-space-2); align-items: center; max-width: 100%; }
.stu-weeknav .stu-select { flex: 1 1 auto; min-width: 150px; }

/* Honest notices: view only, ledger unavailable, stale Buffer read */
.stu-main { display: flex; flex-direction: column; gap: var(--sg-space-5); min-width: 0; }
.stu-notices { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.stu-notices:empty { display: none; }
.stu-banner { display: flex; align-items: center; gap: var(--sg-space-3); padding: var(--sg-space-3) var(--sg-space-4); border: 1px solid var(--sg-border); border-left: 4px solid var(--sg-info);
  border-radius: var(--sg-radius-m); background: var(--sg-surface); }
.stu-banner p { margin: 0; font-size: 0.92rem; }
.stu-banner--view { border-left-color: var(--sg-accent); background: var(--sg-accent-soft); }
.stu-banner--warn { border-left-color: var(--sg-warning); }
.stu-banner--needs { border-left-color: var(--sg-accent); background: var(--sg-accent-soft); }
.stu-banner--ok { border-left-color: var(--sg-success); }

/* The week at a glance */
.stu-tally { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-3); }
.stu-tally li { display: flex; flex-direction: column; min-width: 104px; padding: var(--sg-space-3) var(--sg-space-4); background: var(--sg-surface); border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-m); flex: 0 1 auto; }
.stu-tally__n { font-family: var(--sg-font-display); font-size: 1.7rem; line-height: 1.1; }
.stu-tally__l { color: var(--sg-text-muted); font-size: 0.8rem; }

/* Filters: chips from tablet up, one select on a phone */
.stu-filterbar { display: block; }
.stu-filters { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.stu-filters-select { display: none; width: 100%; }

/* Sections */
.stu-needs, .stu-day { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.stu-needs h2, .stu-day__title { font-family: var(--sg-font-display); font-weight: 400; font-size: 1.35rem; margin: 0; }
.stu-needs h2 { color: var(--sg-text); }
.stu-day__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sg-space-3); padding-bottom: var(--sg-space-2); border-bottom: 1px solid var(--sg-border); }
.stu-day__topic { font: 500 0.9rem var(--sg-font-body); color: var(--sg-text-muted); }
.stu-calm { margin: 0; padding: var(--sg-space-3) var(--sg-space-4); border: 1px dashed var(--sg-border); border-radius: var(--sg-radius-m); color: var(--sg-text-muted); background: var(--sg-surface); }
.stu-grid { display: grid; gap: var(--sg-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.stu-features { display: grid; gap: var(--sg-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.stu-skel { min-height: 320px; border-radius: var(--sg-radius-l); }

/* Content card: the picture first, as the audience will see it */
.stu-card { position: relative; display: flex; flex-direction: column; background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l);
  box-shadow: var(--sg-shadow-1); overflow: hidden; min-width: 0; }
.stu-card.is-needs { border-color: var(--sg-accent); box-shadow: 0 0 0 1px var(--sg-accent), var(--sg-glow, var(--sg-shadow-1)); }
.stu-card__open { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.stu-card__open:hover .stu-card__media img { transform: scale(1.02); }
.stu-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--sg-media-bg, var(--sg-surface-2)); overflow: hidden; width: 100%; }
.stu-card__media[data-kind="story"], .stu-card__media[data-kind="reel"] { aspect-ratio: 9 / 14; }
.stu-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.stu-card__pills { position: absolute; top: var(--sg-space-2); left: var(--sg-space-2); display: flex; gap: var(--sg-space-1); flex-wrap: wrap; }
.stu-card__count { position: absolute; right: var(--sg-space-2); bottom: var(--sg-space-2); }
.stu-pill { display: inline-flex; align-items: center; padding: 2px var(--sg-space-2); border-radius: 999px; font: 700 0.72rem var(--sg-font-body); letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--sg-text) 82%, transparent); color: var(--sg-bg); white-space: nowrap; }
.stu-nomedia { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; min-height: 140px; padding: var(--sg-space-4);
  color: var(--sg-text-muted); background: var(--sg-surface-2); font-size: 0.9rem; }
.stu-card__body { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-3) var(--sg-space-4); }
.stu-when { margin: 0; font-size: 0.95rem; }
.stu-flag { display: inline-flex; align-items: center; padding: 2px var(--sg-space-2); border-radius: 999px; background: var(--sg-accent-soft); color: var(--sg-text);
  border: 1px solid var(--sg-accent); font: 700 0.72rem var(--sg-font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.stu-reason { margin: 0; font-size: 0.92rem; }
.stu-facts { margin: 0; display: grid; gap: 2px var(--sg-space-3); font-size: 0.8rem; }
.stu-facts div { display: flex; gap: var(--sg-space-2); min-width: 0; }
.stu-facts dt { flex: 0 0 4.6rem; color: var(--sg-text-muted); }
.stu-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.stu-card__foot { border-top: 1px solid var(--sg-border); padding: 0 var(--sg-space-2); }
.stu-ask { width: 100%; justify-content: flex-start; color: var(--sg-text-muted); }

/* Status words: always text, colour only supports it */
.stu-status[data-state="live"] { color: var(--sg-success); }
.stu-status[data-state="queued"], .stu-status[data-state="accepted"] { color: var(--sg-info); }
.stu-status[data-state="awaiting_acceptance"], .stu-status[data-state="held"], .stu-status[data-state="sent_unconfirmed"] { color: var(--sg-warning); }
.stu-status[data-state="failed"] { color: var(--sg-danger); }
.stu-status[data-state="unknown"] { color: var(--sg-text-muted); border-style: dotted; }

/* Feature card (Needs you): picture beside the reason, wider than a tile */
.stu-card--feature { flex-direction: row; flex-wrap: wrap; }
.stu-card--feature .stu-card__open { flex-direction: row; flex: 1 1 100%; }
.stu-card--feature .stu-card__media { width: 44%; max-width: 260px; flex: 0 0 44%; aspect-ratio: 4 / 5; min-height: 0; }
.stu-card--feature .stu-card__body { flex: 1 1 auto; justify-content: center; min-width: 0; }
.stu-card--feature .stu-card__foot { flex: 1 1 100%; }

/* Revision mini progress on a card: four bars and one honest phrase */
.stu-revmini { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.stu-revmini__bar { display: flex; gap: 3px; }
.stu-revmini__bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--sg-border); }
.stu-revmini__bar i[data-state="done"] { background: var(--sg-success); }
.stu-revmini__bar i[data-state="current"] { background: var(--sg-accent); }
.stu-revmini__bar i[data-state="blocked"] { background: var(--sg-danger); }

/* Revision steps (inspector) */
.stu-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-3); }
.stu-step { display: flex; gap: var(--sg-space-3); align-items: flex-start; }
.stu-step__mark { flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 0.7rem var(--sg-font-body);
  border: 2px solid var(--sg-border); color: var(--sg-text-muted); background: var(--sg-surface); }
.stu-step[data-state="done"] .stu-step__mark { background: var(--sg-success); border-color: var(--sg-success); color: var(--sg-bg); }
.stu-step[data-state="current"] .stu-step__mark { border-color: var(--sg-accent); color: var(--sg-text); background: var(--sg-accent-soft); }
.stu-step[data-state="blocked"] .stu-step__mark { border-color: var(--sg-danger); color: var(--sg-danger); }
.stu-step[data-state="na"] .stu-step__mark { border-style: dotted; }
.stu-step__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stu-step__state { font: 700 0.7rem var(--sg-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sg-text-muted); }
.stu-step[data-state="done"] .stu-step__state { color: var(--sg-success); }
.stu-step[data-state="blocked"] .stu-step__state { color: var(--sg-danger); }

/* Inspector: a large dialog on desktop, a full-height surface on tablet portrait and phone */
.stu-scrim { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--sg-space-5);
  background: color-mix(in srgb, var(--sg-text) 62%, transparent); }
.stu-insp { display: flex; flex-direction: column; width: min(1180px, 100%); height: min(860px, 100%); background: var(--sg-bg); color: var(--sg-text);
  border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-2); overflow: hidden; outline: none; }
.stu-insp__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); padding: var(--sg-space-3) var(--sg-space-4); background: var(--sg-surface); border-bottom: 1px solid var(--sg-border); }
.stu-insp__nav { display: flex; align-items: center; gap: var(--sg-space-2); }
.stu-insp__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.stu-insp__media { display: flex; flex-direction: column; gap: var(--sg-space-3); padding: var(--sg-space-4); background: var(--sg-surface-2); min-height: 0; overflow-y: auto; }
.stu-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 260px; background: var(--sg-surface-2); border-radius: var(--sg-radius-m); overflow: hidden; }
.stu-stage img, .stu-stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: var(--sg-radius-m); }
.stu-slides { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-2); }
.stu-thumbs { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.stu-thumb { width: 56px; height: 56px; padding: 0; border-radius: var(--sg-radius-s); border: 2px solid var(--sg-border); background: var(--sg-surface); overflow: hidden; cursor: pointer; }
.stu-thumb[aria-pressed="true"] { border-color: var(--sg-accent); }
.stu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stu-insp__info { padding: var(--sg-space-5); overflow-y: auto; min-height: 0; }
.stu-insp__title h2 { font-family: var(--sg-font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; margin: var(--sg-space-2) 0 0; }
.stu-sec { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-4); border-top: 1px solid var(--sg-border); }
.stu-sec h3 { margin: 0; font: 700 0.75rem var(--sg-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-accent); }
.stu-caption { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; padding: var(--sg-space-3) var(--sg-space-4); background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m); }
.stu-dl { margin: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.stu-dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sg-space-3); font-size: 0.92rem; }
.stu-dl dt { color: var(--sg-text-muted); }
.stu-dl dd { margin: 0; overflow-wrap: anywhere; }
.stu-list { margin: 0; padding-left: var(--sg-space-5); display: flex; flex-direction: column; gap: var(--sg-space-2); font-size: 0.92rem; }
.stu-score { font-family: var(--sg-font-display); font-size: 1.3rem; font-weight: 400; }
.stu-details { border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m); padding: 0 var(--sg-space-3); background: var(--sg-surface); }
.stu-details summary { min-height: var(--sg-tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.stu-details .stu-dl { padding-bottom: var(--sg-space-3); }
.stu-insp__actions { display: flex; flex-direction: column; gap: var(--sg-space-3); padding: var(--sg-space-3) var(--sg-space-4) calc(var(--sg-space-3) + env(safe-area-inset-bottom)); background: var(--sg-surface); border-top: 1px solid var(--sg-border); }
.stu-buttons { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.stu-askpost { margin-top: var(--sg-space-3); }
.stu-viewonly { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-2); align-items: center; font-size: 0.92rem; }
.stu-note { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.stu-note label { font-weight: 700; }
.stu-note textarea { width: 100%; min-height: 120px; padding: var(--sg-space-3); font: 400 1rem var(--sg-font-body); color: var(--sg-text); background: var(--sg-bg); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m); resize: vertical; }
.stu-result { margin: 0; min-height: 1.2em; font-size: 0.92rem; }
.stu-result:empty { display: none; }

/* Tablet portrait and phone: the inspector is the whole screen, picture on top */
@media (max-width: 899px) {
  .stu-scrim { padding: 0; align-items: stretch; }
  .stu-insp { width: 100%; height: 100%; border-radius: 0; }
  .stu-insp__body { display: flex; flex-direction: column; overflow-y: auto; }
  .stu-insp__media { overflow: visible; flex: 0 0 auto; padding: var(--sg-space-3); }
  .stu-stage { min-height: 0; max-height: 58vh; }
  .stu-stage img, .stu-stage video { max-height: 58vh; }
  .stu-insp__info { overflow: visible; padding: var(--sg-space-4); }
}

/* Phone: its own composition, not a shrunk desktop. One column, each post a row with its real picture. */
@media (max-width: 760px) {
  .stu { gap: var(--sg-space-4); }
  .stu-head { align-items: stretch; }
  .stu-head__tools { align-items: stretch; width: 100%; }
  .stu-weeknav .stu-select { min-width: 0; }
  .stu-weeknav .sg-btn { padding: 0 var(--sg-space-3); }
  .stu-tally { display: grid; gap: var(--sg-space-2); }
  .stu-tally li { min-width: 0; padding: var(--sg-space-2); }
  .stu-tally__n { font-size: 1.3rem; }
  .stu-filters { display: none; }
  .stu-filters-select { display: block; }
  .stu-grid, .stu-features { grid-template-columns: 1fr; gap: var(--sg-space-3); }
  .stu-card { flex-direction: row; flex-wrap: wrap; }
  .stu-card__open { flex-direction: row; flex: 1 1 100%; }
  .stu-card__media { width: 112px; flex: 0 0 112px; aspect-ratio: auto; min-height: 150px; }
  .stu-card__pills { top: var(--sg-space-1); left: var(--sg-space-1); }
  .stu-card__pills .stu-pill { font-size: 0.65rem; padding: 1px var(--sg-space-2); }
  .stu-card__body { flex: 1 1 auto; min-width: 0; padding: var(--sg-space-3); }
  .stu-card__foot { flex: 1 1 100%; }
  .stu-card--feature .stu-card__media { width: 112px; flex: 0 0 112px; min-height: 150px; }
  .stu-insp__actions { max-height: 62vh; overflow-y: auto; }
  .stu-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stu-buttons .sg-btn { padding: 0 var(--sg-space-2); }
  .stu-askpost { width: 100%; }
  .stu-head__tools .stu-row { flex-wrap: nowrap; }
  .stu-head__tools .stu-row .sg-btn { flex: 1 1 0; padding: 0 var(--sg-space-2); font-size: 0.85rem; }
  .stu-tally li:nth-child(n+5) { display: none; }
  .stu-tally { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stu-insp__bar { padding: var(--sg-space-2) var(--sg-space-3); }
  .stu-dl > div { grid-template-columns: 1fr; gap: 0; }
  .stu-banner { align-items: flex-start; flex-direction: column; gap: var(--sg-space-1); }
}

@media (prefers-reduced-motion: reduce) { .stu-card__media img { transition: none; } .stu-card__open:hover .stu-card__media img { transform: none; } }

.stu-card__borrowed { position: absolute; left: var(--sg-space-2); bottom: var(--sg-space-2); }

/* Week tag under the title, and the agency-style card extras: caption excerpt and the four production stages */
.stu-weektag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); margin: 0 0 var(--sg-space-2); font-size: 1.05rem; }
.stu-weektag .stu-pill { background: var(--sg-accent-soft); color: var(--sg-text); border: 1px solid var(--sg-accent); }
.stu-excerpt { margin: 0; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stu-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sg-space-1); }
.stu-pipe__step { display: flex; flex-direction: column; gap: 3px; min-width: 0; font: 600 0.7rem var(--sg-font-body); color: var(--sg-text-muted); }
.stu-pipe__dot { display: block; height: 5px; border-radius: 3px; background: var(--sg-border); }
.stu-pipe__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-pipe__step[data-state="done"] { color: var(--sg-text); }
.stu-pipe__step[data-state="done"] .stu-pipe__dot { background: var(--sg-success); }
.stu-pipe__step[data-state="current"] .stu-pipe__dot { background: var(--sg-accent); }
.stu-pipe__step[data-state="blocked"] .stu-pipe__dot { background: var(--sg-danger); }
.stu-pipe__step[data-state="unknown"] .stu-pipe__dot { background: transparent; border: 1px dashed var(--sg-border-strong, var(--sg-border)); height: 5px; }
.stu-step[data-state="unknown"] .stu-step__mark { border-style: dashed; }
.stu-card:hover { box-shadow: var(--sg-shadow-lift, var(--sg-shadow-2)); }
@media (max-width: 760px) { .stu-excerpt { -webkit-line-clamp: 2; } .stu-pipe__name { font-size: 0.65rem; } }

.stu-daytag { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sg-space-2); padding: var(--sg-space-2) var(--sg-space-4); background: var(--sg-surface-2); border-bottom: 1px solid var(--sg-border); font-size: 0.9rem; }
.stu-card--feature .stu-daytag { flex: 1 1 100%; }
.stu-card > .stu-daytag { flex: 1 1 100%; }