/* Content studio, an assigned article: the panel above the page (who has it,
   the goal, the notes, what happens next), the In review state, the
   read-only text and the count on "Content" in the menu.
   View: js/views/content-review.js. */

/* The panel sits on the page's measure, above the question and the title. */
body.new-ui #viewContent .ctr-panel { box-sizing: border-box; width: calc(100% - 112px); max-width: 700px; margin: 40px auto 0;
  padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2);
  font-size: 13.5px; line-height: 1.5; color: var(--ui-ink-2); }
body.new-ui #viewContent .ctr-panel[hidden] { display: none; }
body.new-ui #viewContent.ctr-on .ctw-kicker { margin-top: 22px; }
body.new-ui #viewContent .ctr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
/* Who gave it to whom: a neutral label, not a button. */
body.new-ui #viewContent .ctr-who { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--ui-line); font-size: 12px; color: var(--ui-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.new-ui #viewContent .ctr-rows { margin: 0; display: grid; gap: 6px; }
body.new-ui #viewContent .ctr-rows > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
body.new-ui #viewContent .ctr-rows dt { color: var(--ui-ink-3); font-size: 12.5px; }
body.new-ui #viewContent .ctr-rows dd { margin: 0; color: var(--ui-ink); overflow-wrap: anywhere; }
body.new-ui #viewContent .ctr-notes { white-space: pre-line; }
body.new-ui #viewContent .ctr-next { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ui-line-2); color: var(--ui-ink-2); }

/* In review: in ink with a half-filled dot, like Draft (hollow) and Published. */
body.new-ui .cts-st.review { color: var(--ui-ink); }
body.new-ui .cts-st.review > i { border: 1.5px solid var(--ui-ink); background: linear-gradient(90deg, var(--ui-ink) 50%, transparent 50%); }

/* Changes asked: back with the writer, hollow dot like Draft. */
body.new-ui .cts-st.returned { color: var(--ui-ink); }
body.new-ui .cts-st.returned > i { border: 1.5px solid var(--ui-ink-3); }

/* Send back lives beside Mark as published; on a phone, in the ⋯ menu. */
body.new-ui #ctrReturnItem { display: none; }

/* The panel says who has it and the notes: the brief doesn't repeat them. */
body.new-ui #viewContent.ctr-on .cts-brief-as { display: none; }

/* Read-only: the text stays, the tools to change it step away. */
body.new-ui #viewContent.ctr-ro .ct-toolbar { display: none; }
body.new-ui #viewContent.ctr-ro .ct-doc-edit [data-ph]::before { content: none; }
body.new-ui #viewContent.ctr-ro .ctw-cover li.missing .ctw-row { pointer-events: none; }
body.new-ui #viewContent.ctr-ro .ct-doc-edit { cursor: default; }

/* The count on "Content": what waits for your review. */
body.new-ui #navContent .ctr-badge, #navContent .ctr-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  box-sizing: border-box; background: var(--ui-ink, #0E0F11); color: var(--ui-bg, #fff); font-size: 11px; font-weight: 600; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; }

/* Focus is the text alone. */
body.new-ui #viewContent.ctw-focus .ctr-panel { display: none; }

@media (max-width: 1180px) {
  body.new-ui #viewContent .ctr-panel { width: calc(100% - 80px); }
}
@media (max-width: 760px) {
  body.new-ui #viewContent .ctr-panel { width: calc(100% - 36px); margin-top: 16px; padding: 12px 14px; }
  body.new-ui #viewContent .ctr-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body.new-ui #viewContent.ctr-on .ctw-kicker { margin-top: 16px; }
  body.new-ui #ctrReturnBtn { display: none; }
  /* With a state chip, a long primary ("Marcar como publicado") takes its own row rather than run off the edge. */
  body.new-ui .cts-bar:has(.cts-st.review, .cts-st.returned) { flex-wrap: wrap; row-gap: 8px; }
  body.new-ui #ctrReturnItem { display: block; }
}