/*
  Studio v2 layout and look. Loaded after studio.css, which still styles every class
  studio.js renders; this file only rearranges the frame and restyles toward the
  prototype (docs/prototype/studio-build.html).

  Colour rule, as in the prototype: blue means "needs you", green means "passed". Never
  red against green, and every state also has its words on screen.
*/

.studio-body.studio-v2 {
  /* Back to the app's neutral workbench palette (app.css :root) from the warm paper
     studio.css sets on .studio-body. */
  --canvas: #eef1f4;
  --surface: #ffffff;
  --surface-muted: #f8f9fb;
  --studio-line: var(--line);
  --studio-line-strong: var(--line-strong);
  --studio-user-card: #ffffff;
  --studio-ink: var(--text);
  --studio-muted: var(--text-muted);
  --studio-subtle: var(--text-subtle);
  --font-prose: var(--font-ui);
  --v2-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --v2-dur: 200ms;
  --v2-attn-bg: #eaf0ff;
  --v2-attn-ink: #1d3a8f;
  --v2-attn-line: #b9c9f3;
  --v2-done-bg: #e6f3ec;
  --v2-done-ink: #1d6a43;
  --v2-done-line: #b9dcc7;
  --v2-rail-width: 15rem;
  --v2-strip-width: 2.5rem;
  --v2-thread-width: clamp(20rem, 26vw, 25rem);
  --v2-draft-width: clamp(21rem, 27vw, 26rem);
  font-size: 14px;
}

.studio-v2 :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 72%, white);
  outline-offset: 2px;
}

/* ---------- Compact top bar ---------- */
.studio-v2 .studio-v2-topbar {
  flex-wrap: wrap;
  gap: 6px 12px;
  min-block-size: var(--topbar-height);
  padding-block: 6px;
  background: var(--surface);
  border-block-end-color: var(--line-strong);
}

.studio-v2 .studio-v2-topbar .brand-mark {
  inline-size: 30px;
  block-size: 26px;
}

.studio-v2-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-inline-size: 0;
}

.studio-v2 .studio-v2-topbar h1 {
  font-size: 15px;
  white-space: nowrap;
}

.studio-v2 .topbar-meta {
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- Conversation head ---------- */
.studio-v2-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

/* ---------- Output preview (filled in milestone 2) ---------- */
.preview-pane {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 24px;
  background: var(--surface);
  border-block-start: 3px solid transparent;
}

.preview-empty {
  max-inline-size: 24rem;
  padding: 18px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}

.preview-empty .panel-copy {
  margin: 6px 0 0;
  color: var(--text-muted);
}

.studio-shell[data-verification-status="passed"] .preview-pane {
  border-block-start-color: var(--v2-done-ink);
}

.studio-shell:is([data-verification-status="failed"], [data-verification-status="error"]) .preview-pane {
  border-block-start-color: var(--accent-blue);
}

/* ---------- The frame: strip, rail, conversation, preview, draft ---------- */
@media (min-width: 961px) {
  .studio-v2 .studio-shell {
    grid-template-columns:
      var(--v2-strip-width) var(--v2-rail-width) var(--v2-thread-width)
      minmax(0, 1fr) 0;
    block-size: calc(100vh - var(--topbar-height));
    min-block-size: 0;
  }

  .studio-v2 .studio-shell.draft-open {
    grid-template-columns:
      var(--v2-strip-width) var(--v2-rail-width) minmax(var(--v2-thread-width), 1fr)
      0 var(--v2-draft-width);
  }

  /* Once a check has produced output there is something to preview: it takes the middle,
     and the conversation keeps a fixed readable width beside it. */
  .studio-v2 .studio-shell.draft-open[data-has-preview="true"] {
    grid-template-columns:
      var(--v2-strip-width) var(--v2-rail-width) var(--v2-thread-width)
      minmax(0, 1fr) var(--v2-draft-width);
  }

  .studio-v2 .studio-shell.draft-open:not([data-has-preview="true"]) .preview-pane {
    display: none;
  }

  /* The conversation's content fills its column instead of keeping the page-wide cap
     studio.css sets for the centred single-column layout. */
  .studio-v2 .thread-col,
  .studio-v2 .composer {
    max-inline-size: none;
    inline-size: 100%;
  }

  /* Below 1366px studio.js folds the rail when a workspace opens; the strip brings it
     back. The strip stays in place while the rail is showing too, so the control that
     folded the list is always where the operator last saw it. Sam Hardacre (30 Sep
     2026) was left with a strip that only appeared once the list had gone, and it did
     not look like anything to click. */
  .studio-v2 .studio-shell:has(#studioRail[data-open="false"]) {
    --v2-rail-width: 0px;
  }

  /* Before any workspace is open there is nothing to preview: the conversation takes
     the space instead of an empty panel. */
  .studio-v2 .studio-shell:not(.draft-open) {
    grid-template-columns: var(--v2-strip-width) var(--v2-rail-width) minmax(0, 1fr) 0 0;
  }

  .studio-v2 .studio-shell:not(.draft-open) .preview-pane {
    display: none;
  }

  /* The whole strip is the button: an icon at the top, then "Customers" reading down.
     The label runs top to bottom so it starts beside the icon. Sizes and borders here
     are physical, because vertical writing turns the button's own inline axis upright. */
  .studio-v2 .rail-toggle {
    position: static;
    display: flex;
    grid-column: 1;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 8px 0 12px;
    overflow: hidden;
    color: var(--text);
    background: var(--surface-rail);
    border: 0;
    border-right: 1px solid var(--line-strong);
    border-radius: 0;
    cursor: pointer;
    writing-mode: vertical-rl;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  /* A framed "show the list" icon (panel with a chevron pointing out). It turns round
     to point back in while the list is showing. */
  .studio-v2 .rail-toggle::before {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232952cc' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='2'/%3E%3Cpath d='M5.5 2.5v11M8.5 6l2 2-2 2'/%3E%3C/svg%3E") center / 18px no-repeat;
    border: 1px solid var(--v2-attn-line);
    border-radius: var(--radius-xs);
  }

  .studio-v2 .rail-toggle[aria-expanded="true"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232952cc' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='2'/%3E%3Cpath d='M5.5 2.5v11M10.5 6l-2 2 2 2'/%3E%3C/svg%3E");
  }

  .studio-v2 .rail-toggle:hover:not(:disabled) {
    color: var(--v2-attn-ink);
    background: var(--v2-attn-bg);
    border-color: var(--line-strong);
  }

  .studio-v2 .rail-toggle:hover::before {
    border-color: var(--accent-blue);
  }

  /* Inset, because the frame clips anything drawn outside the strip. */
  .studio-v2 .rail-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 72%, white);
    outline-offset: -3px;
  }

  .studio-v2 .studio-rail {
    grid-column: 2;
    min-inline-size: 0;
  }

  .studio-v2 .studio-rail[data-open="false"] {
    visibility: hidden;
    padding-inline: 0;
    border-inline-end-width: 0;
  }

  .studio-v2 .studio-thread {
    grid-column: 3;
    border-inline-end: 1px solid var(--line-strong);
  }

  .studio-v2 .preview-pane {
    grid-column: 4;
  }

  .studio-v2 .draft-panel {
    grid-column: 5;
    border-inline-start: 1px solid var(--line-strong);
  }
}

/* Laptop widths with the preview showing. Four columns side by side left the preview
   128px wide at 1024, so the customer list becomes a panel over the conversation (as
   on narrow screens, opened from the strip) and the side columns give up a little. The
   id in :is() outranks the rule above that gives an open rail its column. */
@media (min-width: 961px) and (max-width: 1365px) {
  .studio-v2 .studio-shell.draft-open[data-has-preview="true"]:not([data-catalogue-open="true"]):is(#studioShell) {
    --v2-rail-width: 0px;
    --v2-thread-width: 17rem;
    --v2-draft-width: 20rem;
  }

  .studio-v2 .studio-shell.draft-open[data-has-preview="true"]:not([data-catalogue-open="true"]):is(#studioShell) .studio-rail {
    position: fixed;
    inset-block: var(--topbar-height) 0;
    inset-inline-start: var(--v2-strip-width);
    z-index: 40;
    inline-size: 15rem;
    overflow-y: auto;
    border-inline-end: 1px solid var(--line-strong);
    box-shadow: var(--shadow-md);
  }
}

@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .studio-v2 .studio-shell {
    transition: grid-template-columns var(--v2-dur) var(--v2-ease);
  }
}

/* ---------- Rail ---------- */
.studio-v2 .studio-rail {
  padding: 12px 10px;
  background: var(--surface-rail);
  border-inline-end: 1px solid var(--line);
}

.studio-v2 .studio-rail-head {
  flex-wrap: wrap;
  margin-block-end: 10px;
}

/* A card never grows past the rail: long names and meta lines wrap inside it, and a
   name longer than two lines ends in an ellipsis. Before this a single-line name
   stretched the card past the rail's edge, which clipped it mid-word. */
.studio-v2 .area-card {
  min-inline-size: 0;
}

.studio-v2 .area-button {
  min-inline-size: 0;
  padding: 8px;
}

.studio-v2 .area-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.studio-v2 .area-meta {
  overflow-wrap: anywhere;
}

.studio-v2 :is(.area-button, .thread-button):hover {
  background: var(--surface);
  border-color: var(--line);
}

/* ---------- Conversation ---------- */
.studio-v2 .studio-thread {
  /* One column that may shrink below its content's widest line. Without it the column
     sized itself to its widest content (409px in a 374px track) and the conversation
     spilled over the left edge of the preview. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface-muted);
}

.studio-v2 .thread-scroll {
  padding: 14px 12px;
}

.studio-v2 .thread-col {
  gap: 12px;
}

.studio-v2 .empty-state h2,
.studio-v2 .loading-state h2,
.studio-v2 .error-state h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.studio-v2 .suggestion-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-block-start: 14px;
}

.studio-v2 .suggestion-card {
  padding: 8px 10px;
  background: var(--surface);
  border-color: var(--line);
}

.studio-v2 .msg-body {
  font-size: 13.5px;
  line-height: 1.5;
}

.studio-v2 .msg-user {
  padding: 8px 10px;
  background: var(--surface);
  border-color: var(--line);
  border-radius: 8px 8px 2px 8px;
  font-size: 13.5px;
}

.studio-v2 .msg-body code {
  background: var(--surface-rail);
  border-color: var(--line);
}

.studio-v2 .composer {
  inline-size: calc(100% - 20px);
  margin: 0 auto 10px;
  padding: 8px;
  background: var(--surface);
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.studio-v2 .jump-pill {
  inset-block-end: 96px;
}

/* ---------- Draft panel ---------- */
.studio-v2 .draft-panel {
  background: var(--surface-rail);
}

.studio-v2 .draft-panel-head {
  padding: 8px 12px;
  background: var(--surface-rail);
  border-block-end-color: var(--line);
}

.studio-v2 .draft-panel-head h2 {
  font-size: 14px;
}

.studio-v2 .draft-tabs {
  position: sticky;
  inset-block-start: 49px;
  z-index: 2;
  gap: 0;
  padding: 0 8px;
  background: var(--surface-rail);
  border-block-end-color: var(--line);
}

.studio-v2 .draft-tab {
  min-block-size: 34px;
  padding-inline: 9px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.studio-v2 .draft-tab[aria-selected="true"] {
  color: var(--accent-pressed);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.studio-v2 .draft-tabpanel {
  padding: 12px;
}

.studio-v2 .draft-tabpanel h3,
.studio-v2 .panel-card h3,
.studio-v2 .next-step-card h3 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Cards ---------- */
.studio-v2 :is(
    .panel-card,
    .setup-card,
    .golden-card,
    .publish-card,
    .checks-card,
    .publication-list,
    .history-list,
    .proposal-list,
    .draft-summary,
    .file-panel
  ) {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.studio-v2 .draft-tabpanel > * + * {
  margin-block-start: 10px;
}

.studio-v2 .panel-copy {
  font-size: 12.5px;
  line-height: 1.45;
}

/* What to do next is always something that needs the operator: blue. */
.studio-v2 .next-step-card,
.studio-v2 .needs-review-card {
  padding: 10px 12px;
  background: var(--v2-attn-bg);
  border: 1px solid var(--v2-attn-line);
  border-inline-start: 4px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  color: var(--v2-attn-ink);
}

.studio-v2 .next-step-card :is(p, h3),
.studio-v2 .needs-review-card :is(p, h3) {
  color: inherit;
}

.studio-v2 :is(.lifecycle-card, .output-summary-card, .onboarding-guidance) {
  padding: 8px 10px;
  background: var(--surface-muted);
  border-color: var(--line);
}

.studio-v2 .lifecycle-step[data-state="done"] .lifecycle-dot {
  background: var(--v2-done-ink);
  box-shadow: 0 0 0 1px var(--v2-done-ink);
}

.studio-v2 .lifecycle-step[data-state="current"] .lifecycle-dot,
.studio-v2 .lifecycle-step[data-state="blocked"] .lifecycle-dot {
  background: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
}

/* ---------- Checks: a vertical list with a tick or step mark per check ---------- */
.studio-v2 .stage-rail {
  gap: 0;
  counter-reset: v2-stage;
}

.studio-v2 .stage-row {
  position: relative;
  padding: 2px 0 12px 32px;
  background: transparent;
  border: 0;
  border-radius: 0;
  counter-increment: v2-stage;
}

.studio-v2 .stage-row::before {
  content: counter(v2-stage) / "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  color: var(--text-muted);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.studio-v2 .stage-row:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 24px 0;
  inset-inline-start: 10px;
  inline-size: 2px;
  background: var(--line);
}

.studio-v2 .stage-row strong {
  font-size: 12.5px;
}

.studio-v2 .stage-row span {
  text-transform: none;
}

.studio-v2 .stage-row[data-status="passed"]::before {
  content: "\2713" / "";
  color: #ffffff;
  background: var(--v2-done-ink);
  border-color: var(--v2-done-ink);
}

.studio-v2 .stage-row[data-status="passed"]:not(:last-child)::after {
  background: var(--v2-done-line);
}

.studio-v2 .stage-row[data-status="passed"] > span {
  color: var(--v2-done-ink);
}

.studio-v2 .stage-row:is([data-status="failed"], [data-status="error"], [data-status="draft"])::before {
  content: "!" / "";
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.studio-v2 .stage-row:is([data-status="failed"], [data-status="error"], [data-status="draft"]) > :is(span, p) {
  color: var(--v2-attn-ink);
}

.studio-v2 .stage-row:is([data-status="queued"], [data-status="running"])::before {
  color: var(--accent-blue);
  border-style: dashed;
  border-color: var(--accent-blue);
}

/* ---------- Proposals ---------- */
.studio-v2 .proposal-card {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent-blue);
  border-radius: var(--radius-sm);
}

.studio-v2 .proposal-card-approved {
  border-inline-start-color: var(--v2-done-ink);
}

.studio-v2 :is(.proposal-card-rejected, .proposal-card-superseded) {
  background: var(--surface-muted);
  border-inline-start-color: var(--line-strong);
}

/* ---------- Rows and chips ---------- */
.studio-v2 :is(.publication-row, .file-row, .revision-row) {
  padding-block: 7px;
  border-block-start-color: var(--line);
  font-size: 12.5px;
}

.studio-v2 :is(.attach-chip, .revision-chip) {
  min-block-size: 24px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
}

.studio-v2 .breakdown-table {
  font-size: 12px;
}

/* ---------- Narrow screens: the v1 drawer behaviour, without the preview ---------- */
@media (max-width: 960px) {
  .studio-v2 .preview-pane {
    display: none;
  }

  .studio-v2 .studio-thread {
    min-block-size: calc(100vh - var(--topbar-height));
  }
}

/* ---------- Toast ----------
   Bottom-left, above the composer, so it never covers the draft panel's cards. */
.studio-v2 .toast {
  inset-inline: 16px auto;
  inset-block-end: 96px;
}

/* ---------- Collapsible cards (studio-v2.js) ----------
   The card's section label becomes a full-width toggle with a chevron. Folded cards keep
   only their heading, so the panel reads as a short list of sections. */
.studio-v2 .v2-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  inline-size: 100%;
  min-block-size: 28px;
  margin: 0;
  padding: 2px 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-transform: inherit;
  cursor: pointer;
}

.studio-v2 .v2-card-toggle::after {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-end: 4px;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.studio-v2 [data-open="false"] > .section-label > .v2-card-toggle::after {
  transform: rotate(-45deg);
}

.studio-v2 .v2-card-toggle:hover {
  color: var(--text);
}

.studio-v2 [data-collapsible][data-open="false"] {
  padding-block: 10px;
}

.studio-v2 [data-collapsible] > .section-label {
  margin-block-end: 0;
}

.studio-v2 [data-collapsible][data-open="true"] > .section-label {
  margin-block-end: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .studio-v2 .v2-card-toggle::after {
    transition: transform var(--v2-dur) var(--v2-ease);
  }
}

/* The check's download buttons carry the whole file name. .button never wraps, so a long
   name ran off the right edge of the draft panel; here it wraps inside the button. */
.studio-v2 .stage-downloads {
  min-inline-size: 0;
}

.studio-v2 .stage-downloads .button {
  max-inline-size: 100%;
  white-space: normal;
}