/*
 * The operational UI's whole appearance. One file, no framework, no build step.
 *
 * The list is a content dashboard, not a diagnostic dump: the thumbnail and the
 * title carry the card, the three badges sit under them as small chips, and the
 * technical vocabulary lives on the detail page. Nothing on a card is allowed to
 * compete with the title for attention.
 *
 * #FF8400 is the Dique Plays brand colour. It is spent on the masthead rule, on
 * focus and on one primary action - not on status, and not on every link, so it
 * still means something where it appears. Status never speaks through colour
 * alone: every badge prints its own word.
 */

:root {
  color-scheme: dark;

  --brand: #ff8400;
  --brand-ink: #1a1205;
  --brand-dim: rgba(255, 132, 0, 0.16);

  --bg: #0e1014;
  --surface: #171a20;
  --surface-raised: #1f232b;
  --border: #272b34;
  --border-strong: #3a404c;

  --text: #f1f3f7;
  --text-muted: #a7aeba;
  --text-faint: #767d8a;

  --ok: #6fd99a;
  --ok-bg: rgba(111, 217, 154, 0.12);
  --warn: #ffc766;
  --warn-bg: rgba(255, 199, 102, 0.12);
  --bad: #ff9b93;
  --bad-bg: rgba(255, 155, 147, 0.12);
  --info: #8fbcff;
  --info-bg: rgba(143, 188, 255, 0.12);

  --radius: 10px;
  --radius-sm: 6px;
  --gap: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 8px 14px;
  font-weight: 600;
  z-index: 10;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* --------------------------------------------------------------------- */
/* Masthead: the channel first, the tool second                          */
/* --------------------------------------------------------------------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 3px 0 var(--brand);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-section {
  color: var(--text-muted);
  font-size: 15px;
}

.brand-section::before {
  content: "—";
  margin-right: 8px;
  color: var(--text-faint);
}

.channel-identity {
  display: inline-flex;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-raised);
  display: block;
}

/* Present on every page, and deliberately quiet: it is a standing condition,
   not an alert. It lives at the foot of the page, not in the navigation. */
.local-note {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 28px 28px;
  color: var(--text-faint);
  font-size: 12px;
  border-top: 1px solid var(--border);
}

.masthead-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  min-width: 0;
}

.primary-nav {
  display: flex;
  gap: 4px;
}

.nav-link {
  position: relative;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text);
  background: var(--surface-raised);
}

.nav-link.is-active {
  color: var(--text);
  background: var(--surface-raised);
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.masthead-context {
  display: flex;
  align-items: center;
  gap: 10px;
}

.env-chip {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.env-chip.env-production {
  color: var(--warn);
  border-color: rgba(255, 199, 102, 0.4);
  background: var(--warn-bg);
}

.internal-name {
  color: #565d6a;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 28px 48px;
}

.page-heading {
  margin-bottom: 18px;
}

h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.note {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 12px;
}

.concept-note {
  margin: 0;
  max-width: 70ch;
}

/* The list page only - the one that carries the toolbar: the title closer to
   the masthead, the toolbar closer to the intro it follows. The toolbar's own
   bottom margin gives the search its room. Other pages keep the defaults. */
main:has(> .overview-bar) {
  padding-top: 26px;
}

main:has(> .overview-bar) > .page-heading {
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------- */
/* Toolbar and banners                                                   */
/* --------------------------------------------------------------------- */

/* The refresh row: Atualizar and its status on the left, the page size on
   the right. The page size is display density, not a filter, so it carries no
   box of its own. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
}

.page-size-label {
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.page-size select {
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.refresh-status {
  margin: 0;
  color: var(--text-faint);
  font-size: 12.5px;
}

.banner {
  margin: 0 0 12px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  font-size: 13px;
}

/* One calm line, once, at the top - never repeated inside the cards. */
.banner-mode {
  color: var(--text-muted);
  background: var(--surface);
  border-color: var(--border);
  border-left: 3px solid var(--brand);
}

.banner-error {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: rgba(255, 155, 147, 0.35);
}

.banner-action {
  display: inline-block;
  max-width: 100%;
  padding: 6px 10px;
  color: var(--text-muted);
  background: var(--surface);
  border-color: var(--border);
}

.banner-action[data-tone="success"] {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: rgba(111, 217, 154, 0.3);
}

.banner-action[data-tone="error"] {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: rgba(255, 155, 147, 0.35);
}

.banner-action:empty {
  display: none;
}

/* --------------------------------------------------------------------- */
/* Cards                                                                 */
/* --------------------------------------------------------------------- */

.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  display: flex;
  gap: 18px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.12s ease;
}

.card:hover {
  border-color: var(--border-strong);
}

.card-media {
  flex: 0 0 320px;
}

.thumb-link {
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.thumb {
  width: 320px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-raised);
  display: block;
}

/* Orientation-driven media (core.media): portrait content is a real 9:16
   portrait - no landscape frame, no filler, no stretch. `cover` shows the
   central portrait area, which is where a YouTube Short's picture sits inside
   its landscape thumbnail; a TikTok cover is already portrait. */
.card-media-portrait {
  flex: 0 0 180px;
}

.thumb.thumb-portrait {
  width: 180px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center;
}

/* Actual aspect ratio first (Phase M): when the media's real size is known,
   the image is shown whole in its own ratio - no fixed frame, no crop, no
   stretch - bounded so a card stays usable. Orientation is only the fallback
   above. Two classes, so the responsive `.thumb` widths never override it. */
.card-media-natural {
  flex: 0 0 auto;
  max-width: 320px;
}

.thumb.thumb-natural {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 360px;
  aspect-ratio: auto;
  object-fit: contain;
}

.thumb-absent {
  width: 320px;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  color: var(--text-faint);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The title is the loudest thing on the card, and nothing else may be. */
.card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.title-link {
  text-decoration: none;
  color: var(--text);
}

.title-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 3px;
}

.external-mark {
  margin-left: 6px;
  font-size: 0.7em;
  color: var(--text-faint);
  vertical-align: 1px;
}

.card-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.provider {
  font-weight: 600;
  color: var(--text-muted);
}

.dot {
  color: var(--text-faint);
}

/* --------------------------------------------------------------------- */
/* Badges: three answers, three chips, never merged                      */
/* --------------------------------------------------------------------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.badge {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.badge-value {
  font-weight: 600;
  color: var(--text);
}

/* Classification gates nothing, so it stays neutral: a type, not a verdict. */
.badge-classification .badge-value {
  color: var(--text);
}

.badge-eligibility[data-eligible="true"] {
  border-color: rgba(111, 217, 154, 0.4);
  background: var(--ok-bg);
}

.badge-eligibility[data-eligible="true"] .badge-value {
  color: var(--ok);
}

.badge-eligibility[data-eligible="false"] .badge-value {
  color: var(--text-muted);
}

.badge-notification.notification-delivered {
  border-color: rgba(111, 217, 154, 0.4);
  background: var(--ok-bg);
}

.badge-notification.notification-delivered .badge-value {
  color: var(--ok);
}

.badge-notification.notification-bootstrap_suppressed {
  border-color: rgba(143, 188, 255, 0.35);
  background: var(--info-bg);
}

.badge-notification.notification-bootstrap_suppressed .badge-value {
  color: var(--info);
}

/* not_delivered is not an error and must not look like one. */
.badge-notification.notification-not_delivered .badge-value {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------- */
/* Actions                                                               */
/* --------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

button.action,
a.action {
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

button.action:hover:not(:disabled),
a.action:hover {
  border-color: var(--brand);
  color: var(--text);
}

button.action:disabled {
  cursor: not-allowed;
  color: var(--text-faint);
  background: transparent;
  border-color: var(--border);
}

/* The refresh control is the page's one primary action. */
.action-refresh:not(:disabled) {
  background: var(--brand-dim);
  border-color: rgba(255, 132, 0, 0.45);
  color: var(--brand);
}

/* The sandbox send stays visibly a test, whatever else is on the row. */
.action-test-delivery:not(:disabled) {
  border-color: rgba(255, 199, 102, 0.45);
  color: var(--warn);
  background: var(--warn-bg);
}

.action-detail {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------- */
/* Empty state                                                           */
/* --------------------------------------------------------------------- */

.empty {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.empty-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.empty-detail {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* --------------------------------------------------------------------- */
/* Detail page: still the diagnostic surface, deliberately               */
/* --------------------------------------------------------------------- */

.back-link {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.card-detail .card-title {
  font-size: 22px;
}

.panel {
  margin-top: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.panel h3 {
  margin: 0 0 10px;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11px;
}

.states {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.states .field {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  min-width: 150px;
}

.states dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.states dd {
  margin: 2px 0 0;
  font-weight: 600;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

dd.notification-delivered {
  color: var(--ok);
}

dd.notification-bootstrap_suppressed {
  color: var(--info);
}

dd.notification-not_delivered {
  color: var(--text-muted);
}

.value-eligibility[data-eligible="true"] {
  color: var(--ok);
}

.value-eligibility[data-eligible="false"] {
  color: var(--text-muted);
}

.reasons,
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 20px;
  margin: 0;
}

.reasons {
  margin-top: 4px;
}

.reasons dt,
.fields dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.reasons dd,
.fields dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.absent {
  color: var(--text-faint);
}

/* The exact stored UTC string, beside the local wall clock it was converted
   to. Subordinate, but present: an audit compares this one character by
   character. */
.raw-timestamp {
  display: inline-block;
  color: var(--text-faint);
  font-size: 0.85em;
}

.history {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  display: block;
  overflow-x: auto;
}

.history th,
.history td {
  text-align: left;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}

.history th {
  color: var(--text-faint);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.history tbody tr:last-child td {
  border-bottom: none;
}

.outcome {
  font-weight: 600;
}

.outcome-succeeded {
  color: var(--ok);
}

.outcome-failed {
  color: var(--bad);
}

/* --------------------------------------------------------------------- */
/* Detail: human-facing summary above the diagnostics                    */
/* --------------------------------------------------------------------- */

.card-detail .card-title {
  font-size: 24px;
}

/* The three answers, each with its reason under it. Same colours as the chips. */
.operational-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
}

.summary-field {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.summary-field dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.summary-field dd {
  margin: 2px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-value {
  font-weight: 650;
  font-size: 15px;
}

.summary-reason {
  color: var(--text-muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.summary-eligibility[data-eligible="true"] .summary-value,
.summary-notification.notification-delivered .summary-value {
  color: var(--ok);
}

.summary-eligibility[data-eligible="false"] .summary-value {
  color: var(--warn);
}

.summary-notification.notification-bootstrap_suppressed .summary-value {
  color: var(--info);
}

.summary-notification.notification-not_delivered .summary-value {
  color: var(--text-muted);
}

/* History: the timestamp column leads, and the newest row is marked. */
.history td.when {
  color: var(--text);
  font-weight: 550;
}

.history tr.is-latest td {
  background: var(--brand-dim);
}

.latest-mark {
  display: inline-block;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand);
  border: 1px solid rgba(255, 132, 0, 0.45);
}

/* An action with its request in flight. */
button.action[data-busy] {
  cursor: progress;
  opacity: 0.7;
}

.notification-summary {
  font-weight: 600;
}

dd.notification-summary.notification-delivered {
  color: var(--ok);
}

dd.notification-summary.notification-bootstrap_suppressed {
  color: var(--info);
}

dd.notification-summary.notification-not_delivered {
  color: var(--text-muted);
}

.action-external,
.action-back {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------- */
/* Technical data: present, on demand, never in the way                  */
/* --------------------------------------------------------------------- */

.technical {
  margin-top: 22px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--text-muted);
}

.technical > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  list-style-position: inside;
}

.technical > summary:hover {
  color: var(--text);
}

.technical[open] > summary {
  border-bottom: 1px solid var(--border);
  color: var(--brand);
}

.technical-body {
  padding: 4px 16px 16px;
}

.subsection {
  margin-top: 14px;
}

.subsection h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
}

/* --------------------------------------------------------------------- */
/* Confirmation dialog                                                   */
/* --------------------------------------------------------------------- */

/* Belt and braces. A closed <dialog> is hidden by the user-agent stylesheet,
   and every browser that implements the element does that correctly - but the
   one that does not would render this confirmation as loose text at the bottom
   of the page. Saying it here costs one rule and removes the possibility. */
.dialog:not([open]) {
  display: none;
}

.dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  padding: 0;
  max-width: 30rem;
  width: calc(100% - 32px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.dialog::backdrop {
  background: rgba(6, 8, 11, 0.68);
}

.dialog-form {
  padding: 20px;
  margin: 0;
}

.dialog h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.dialog-body {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* The activity dialog is wider than a confirmation and its content can grow,
   so the body scrolls inside the dialog and the close control stays put. */
.dialog-activity {
  max-width: 46rem;
  max-height: min(80vh, 720px);
}

.dialog-activity[open] {
  display: flex;
  flex-direction: column;
}

.dialog-scroll {
  overflow-y: auto;
  min-height: 0;
}

.dialog-activity .dialog-actions {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* Cancel is the safe default: it reads as the quiet option, and it is the one
   that already has focus when the dialog opens. */
.action-cancel {
  background: transparent;
  color: var(--text-muted);
}

.action-cancel:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------- */
/* Overview and recent activity (list page)                              */
/* --------------------------------------------------------------------- */

/* A dense toolbar, not a card: one band of four groups - each a subtle
   label over its own chips - and, at the right behind a rule, the activity
   control sitting on the chips' line. Groups wrap only as whole units. */
.overview-bar {
  display: flex;
  align-items: stretch;
  gap: 8px 12px;
  margin: 0 0 20px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.overview-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.overview-group {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 3px;
  min-width: 0;
}

.overview-group-heading {
  color: var(--text-faint);
  font-size: 10px;
  line-height: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.overview-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

button.action-activity {
  padding: 3px 10px;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  border-color: rgba(255, 132, 0, 0.45);
  color: var(--brand);
  background: var(--brand-dim);
}

.overview-items {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.overview-link {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11.5px;
  line-height: 18px;
  white-space: nowrap;
}

.overview-link:hover,
.overview-link:focus-visible {
  border-color: var(--brand);
  color: var(--text);
}

.overview-link[aria-current="true"] {
  border-color: var(--brand);
  background: var(--brand-dim);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.overview-link[aria-current="true"] .overview-count {
  color: var(--brand);
}

.overview-count {
  color: var(--text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* One line per timeline: heading at the left, latest row beside it, older rows
   under a disclosure. Stacked, so an empty timeline stays one short line. */
.activity-timeline {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.activity-timeline > :not(.activity-heading) {
  grid-column: 2;
}

.activity-heading {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11px;
}

.activity-empty {
  margin: 0;
  color: var(--text-faint);
  font-size: 12.5px;
}

.activity-more summary {
  cursor: pointer;
  width: fit-content;
  color: var(--text-muted);
  font-size: 12px;
}

.activity-more summary:hover,
.activity-more summary:focus-visible {
  color: var(--text);
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}

.activity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 2px 0;
  min-width: 0;
}

.activity-more .activity-row {
  border-top: 1px dashed var(--border);
}

.activity-when {
  color: var(--text-faint);
  font-size: 11.5px;
  white-space: nowrap;
}

.activity-title {
  color: var(--text);
  overflow-wrap: anywhere;
}

.activity-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--text-muted);
}

.activity-status {
  font-weight: 600;
}

.activity-status-succeeded,
.activity-status-delivered {
  color: var(--ok);
}

.activity-status-failed,
.activity-status-refused {
  color: var(--bad);
}

.activity-status-indeterminate {
  color: var(--warn);
}

/* --------------------------------------------------------------------- */
/* Narrower viewports                                                    */
/* --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .overview-bar {
    flex-direction: column;
  }

  .overview-actions {
    padding: 6px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .card-media {
    flex: 0 0 240px;
  }

  .thumb,
  .thumb-absent {
    width: 240px;
  }

  .card-title {
    font-size: 17px;
  }
}

@media (max-width: 680px) {
  /* Two rows, no menu button: identity left and the context (Entrar, on the
     public shell) right on the first; the section navigation on the second.
     `.masthead-main` dissolves so its brand and nav take their own cells. */
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand context"
      "nav nav";
    align-items: center;
    gap: 10px 12px;
    padding: 12px 16px;
  }

  .masthead-main {
    display: contents;
  }

  .masthead .brand {
    grid-area: brand;
    flex-wrap: wrap;
    min-width: 0;
  }

  .masthead .primary-nav {
    grid-area: nav;
    flex-wrap: wrap;
    gap: 10px 2px;
  }

  /* A little narrower on a phone so three links share one row down to 320px;
     the underline keeps the same inset as the padding, tight under the text. */
  .masthead .nav-link {
    padding: 6px 8px;
  }

  .masthead .nav-link.is-active::after {
    left: 8px;
    right: 8px;
  }

  .masthead-context {
    grid-area: context;
    justify-self: end;
  }

  /* The environment badge and the internal name are desktop-only; on a phone
     the first row is the identity alone. */
  .masthead-context .env-chip,
  .masthead-context .internal-name {
    display: none;
  }

  /* Only here may a group's own chips wrap: a phone cannot hold four. The
     label stays above them, and the targets grow to a finger's size. */
  .overview-items {
    flex-wrap: wrap;
    gap: 6px;
  }

  .overview-link,
  button.action-activity {
    padding: 6px 12px;
    min-height: 34px;
    align-items: center;
  }

  .activity-timeline {
    grid-template-columns: minmax(0, 1fr);
  }

  .activity-timeline > :not(.activity-heading),
  .activity-heading {
    grid-column: 1;
    grid-row: auto;
  }

  .local-note {
    padding: 12px 16px 20px;
  }

  .nav-link.is-active::after {
    bottom: -5px;
  }

  main {
    padding: 24px 16px 16px;
  }

  .card {
    flex-direction: column;
  }

  .card-media {
    flex: 0 0 auto;
  }

  .thumb,
  .thumb-absent,
  .thumb-link {
    width: 100%;
  }

  .actions .action {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --- Phase I4: search, manual production requests ------------------------ */

.search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--gap);
}

.search-label {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.search input[type="search"] {
  flex: 1 1 280px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.search input[type="search"]:focus-visible,
.page-size select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: var(--gap) 0 0;
}

.page-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.page-link.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.dialog-points {
  margin: 0 0 12px;
  padding-left: 1.2em;
  line-height: 1.5;
}

.dialog-points-production li::marker {
  color: var(--bad);
}

.dialog-production {
  border-color: var(--bad);
}

.dialog-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn);
}

.action-manual-delivery {
  border-color: var(--bad);
}

.manual-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  background: var(--info-bg);
  color: var(--info);
}

.manual-status-succeeded {
  background: var(--ok-bg);
  color: var(--ok);
}

.manual-status-failed,
.manual-status-refused {
  background: var(--bad-bg);
  color: var(--bad);
}

.manual-status-indeterminate {
  background: var(--warn-bg);
  color: var(--warn);
}

.manual-warning {
  margin: 6px 0 0;
  color: var(--warn);
  font-size: 0.85rem;
}

.back-nav {
  margin: 0 0 12px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 4px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.back-link:hover,
.back-link:focus-visible {
  background: var(--surface-raised);
}

.back-arrow {
  font-size: 1.15rem;
  line-height: 1;
}

.production-only-notice {
  margin: 0 0 8px;
}

/* --------------------------------------------------------------------- */
/* Notification copy management (K6)                                     */
/* --------------------------------------------------------------------- */

/* Shared: plain sections with a sentence-case title, not uppercase labels. */
.page-lead {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.block {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.block + .block,
.block + .technical {
  margin-top: 16px;
}

.block-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.block-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.block-note {
  margin: -6px 0 12px;
  color: var(--text-faint);
  font-size: 12.5px;
}

.count {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.empty-line {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.template-source.source-code_default {
  color: var(--text);
  background: var(--surface-raised);
}

.template-source.source-persisted_active,
.template-active {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: rgba(111, 217, 154, 0.35);
}

.fingerprint {
  color: var(--text-faint);
  font-size: 11.5px;
}

.key-code {
  color: var(--text-faint);
  font-size: 11.5px;
}

.template-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 20px;
}

button.action-primary:not(:disabled),
a.action-primary {
  color: var(--brand-ink);
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 650;
}

button.action-primary:hover:not(:disabled),
a.action-primary:hover {
  color: var(--brand-ink);
  background: #ff9a2e;
  border-color: #ff9a2e;
}

button.action-quiet:not(:disabled) {
  background: transparent;
  color: var(--text-muted);
}

button.action-quiet:hover:not(:disabled) {
  color: var(--text);
}

/* -- list ---------------------------------------------------------------- */

/* Templates grouped by platform: stable sections, each a heading over its own
   responsive card grid. Nothing collapses. */
.template-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.template-section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 18px;
}

.template-section-icon {
  font-size: 18px;
  line-height: 1;
}

.template-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.template-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.12s ease;
}

.template-card:hover {
  border-color: var(--border-strong);
}

.template-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.template-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}

.template-card-title a {
  text-decoration: none;
}

.template-card-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 3px;
}

.template-card-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.template-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 12.5px;
}

.template-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.template-card-fingerprint {
  color: var(--text-faint);
  font-size: 11.5px;
}

/* -- detail: heading and status ------------------------------------------ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--text);
  text-decoration: underline;
}

.crumb-sep {
  color: var(--text-faint);
}

.title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.title-row h1 {
  margin: 0;
}

.status-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}

.status-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin: 0;
  flex: 1 1 auto;
}

.status-facts .field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-facts dt {
  color: var(--text-faint);
  font-size: 12.5px;
}

.status-facts dd {
  margin: 0;
  font-size: 13px;
}

.status-actions {
  flex: 0 0 auto;
}

.status-card > .banner {
  flex-basis: 100%;
  margin: 0;
}

.compare {
  flex-basis: 100%;
  font-size: 13px;
}

.compare > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--text-muted);
}

.compare > summary:hover {
  color: var(--text);
}

.detail-status + .status-regions {
  margin-bottom: 4px;
}

/* -- detail: editor + preview -------------------------------------------- */

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

/* A grid item's automatic minimum is its content, so one unbreakable line -
   a long item title in the test row - makes the editor wider than its track
   and pushes it over the preview. Every box between the workspace track and
   that line is told it may be narrower than its content; the clamp on the
   title itself then has somewhere to clamp to. */
.editor,
.preview-pane,
.template-form,
.form-field,
.editor-actions,
.test-offer {
  min-width: 0;
}

.template-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.field-head,
.field-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.field-label {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  padding: 0;
}

.optional {
  color: var(--text-faint);
  font-weight: 400;
}

.field-hint {
  margin: 0;
  color: var(--text-faint);
  font-size: 12px;
}

.counter {
  color: var(--text-faint);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.template-form textarea,
.template-form input[type="text"] {
  width: 100%;
  padding: 9px 11px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.template-form textarea {
  resize: vertical;
}

.template-form textarea:focus-visible,
.template-form input[type="text"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 0;
  border-color: transparent;
}

/* "Inserir variável": a native disclosure that opens a small grouped panel. */
.variable-menu {
  position: relative;
}

.variable-toggle {
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.variable-toggle::-webkit-details-marker {
  display: none;
}

.variable-toggle::before {
  content: "{ } ";
  color: var(--brand);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
}

.variable-toggle:hover,
.variable-menu[open] > .variable-toggle {
  color: var(--text);
  border-color: var(--brand);
}

.variable-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  width: 290px;
  max-width: calc(100vw - 48px);
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.variable-group + .variable-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.variable-group-title {
  margin: 0 0 2px;
  padding: 0 6px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.variable-options {
  margin: 0;
  padding: 0;
  list-style: none;
}

button.variable-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 8px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

button.variable-option:hover,
button.variable-option:focus-visible {
  background: var(--brand-dim);
}

.variable-code {
  color: var(--brand);
  font-size: 11.5px;
}

.variable-hint {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: 11.5px;
}

.marker {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--brand-dim);
  color: var(--brand);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
}

.editor-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

.editor-actions {
  margin-top: 0;
}

.preview-pane {
  position: sticky;
  top: 16px;
}

.preview-status {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 12.5px;
}

.preview-status:empty {
  display: none;
}

.preview-note {
  margin: 10px 0 0;
  color: var(--text-faint);
  font-size: 12px;
}

/* A Discord-like message: enough to answer "what will it look like?", not a
   copy of Discord. */
.discord-preview {
  padding: 14px 14px 16px;
  border-radius: var(--radius-sm);
  background: #313338;
  color: #dbdee1;
}

.discord-message {
  display: flex;
  gap: 12px;
}

.discord-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e1f22;
}

.discord-body {
  flex: 1 1 auto;
  min-width: 0;
}

.discord-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
}

.discord-author {
  color: #f2f3f5;
  font-weight: 600;
  font-size: 15px;
}

.discord-tag {
  padding: 0 4px;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
}

.discord-time {
  color: #949ba4;
  font-size: 11.5px;
}

.discord-text {
  margin: 0 0 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.4;
}

.discord-embed {
  max-width: 440px;
  padding: 10px 14px 14px 12px;
  border-radius: 4px;
  border-left: 4px solid var(--brand);
  background: #2b2d31;
}

.discord-embed.accent-live {
  border-left-color: #e53935;
}

.embed-author {
  margin: 0 0 6px;
  color: #f2f3f5;
  font-size: 12.5px;
  font-weight: 600;
}

.embed-title {
  margin: 0 0 6px;
  color: #00a8fc;
  font-size: 15px;
  font-weight: 600;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.embed-description {
  margin: 0 0 8px;
  font-size: 13.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.embed-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin-top: 8px;
  border-radius: 4px;
  border: 1px dashed #4e5058;
  color: #949ba4;
  font-size: 12px;
}

/* -- detail: versions, history ------------------------------------------- */

.version-list,
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.version {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.version:first-child {
  border-top: 0;
  padding-top: 0;
}

.version-details {
  flex: 1 1 auto;
  min-width: 0;
}

.version-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
}

.version-details > summary::-webkit-details-marker {
  display: none;
}

.version-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.version-name {
  font-size: 14px;
}

.version-meta {
  color: var(--text-muted);
  font-size: 12.5px;
}

.version-toggle {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12.5px;
}

.version-toggle::after {
  content: " ▾";
}

.version-details[open] .version-toggle::after {
  content: " ▴";
}

.version-details > summary:hover .version-toggle {
  color: var(--text);
}

.version-body {
  padding: 8px 0 4px;
}

.version-actions {
  flex: 0 0 auto;
  padding-top: 1px;
}

.version-actions .action {
  padding: 4px 12px;
  font-size: 12.5px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--border-strong);
  position: relative;
  font-size: 13px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}

.timeline-item:first-child::before {
  background: var(--brand);
}

.timeline-when {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.timeline-who {
  color: var(--text-muted);
}

/* -- publications: one compact row, with room between its parts ----------- */

[data-publications] .timeline-item {
  padding-top: 10px;
  padding-bottom: 10px;
}

[data-publications] .timeline-what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

[data-publications] .timeline-what > strong {
  margin-right: 2px;
}

[data-publications] .timeline-who {
  flex: none;
}

/* Which snapshot the event applied: technical, so it reads as an aside. */
[data-publications] .timeline-ref {
  flex: none;
  color: var(--text-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[data-publications] .version-details,
[data-publications] .version-actions {
  flex-basis: 100%;
  margin-top: 4px;
}

[data-publications] .action-template-restore {
  font-size: 12.5px;
}

/* -- copy (versions, comparison, dialogs) -------------------------------- */

.copy {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.copy p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.copy-links {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
}

.copy-url {
  color: var(--text-faint);
}

.copy-embed {
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border-left: 3px solid var(--border-strong);
  border-radius: 3px;
  background: var(--bg);
}

.copy-title {
  font-weight: 600;
}

.copy-description {
  color: var(--text-muted);
}

.copy-compare {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 10px 0 0;
}

.copy-block {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}

.copy-block h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-muted);
}

.copy-caption {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 13.5px;
}

.copy-block[data-copy="target"] {
  border-color: rgba(255, 132, 0, 0.55);
}

.copy-block[data-copy="target"] h3 {
  color: var(--brand);
}

.dialog-template {
  max-width: 44rem;
}

.dialog-template .copy-compare {
  margin: 12px 0 14px;
}

.dialog-template .dialog-points {
  color: var(--text-muted);
  font-size: 13px;
}

/* -- editor: sandbox test of the draft ------------------------------------ */

/* The button on its own row, the context under it: one stack, same on every
   width, so nothing sits beside the title and nothing has to wrap. */
.test-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* The buttons above must not sit on the divider. */
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.draft-controls {
  display: grid;
  gap: 10px;
}

.draft-controls .editor-actions {
  margin-top: 2px;
  padding-bottom: 4px;
}

.test-context {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12.5px;
}

.test-context.absent {
  overflow-wrap: anywhere;
}

/* Its own line, above the kind and the title. */
.test-context-label {
  flex: 0 0 100%;
}

.test-context-kind {
  flex: none;
}

/* One line, clipped by the box - never by the data. The full title stays in
   the element's `title`, which is what a pointer and a screen reader read. */
.test-context-title {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-offer .action-template-test {
  flex: none;
}

.action-template-test[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.dialog-test {
  max-width: 32rem;
}

.dialog-test .dialog-facts {
  margin: 12px 0;
}

/* -- responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-pane {
    position: static;
  }
}

@media (max-width: 680px) {
  .block {
    padding: 14px;
  }

  .timeline-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .version {
    flex-direction: column;
    gap: 4px;
  }

  .variable-menu {
    flex-basis: 100%;
  }

  .variable-panel {
    position: static;
    width: auto;
    margin-top: 6px;
  }

  .status-facts .field {
    flex-wrap: wrap;
  }
}

/* The public pages (Phase L): home, Terms of Service, Privacy Policy.
   The same text in either shell; a readable measure. */
.public-content {
  max-width: 760px;
}

.public-content h2 {
  font-size: 17px;
  margin: 28px 0 8px;
}

.public-content p,
.public-content li {
  color: var(--text-muted);
}

.public-content a {
  color: var(--brand);
}

/* The anonymous shell's sign-in action, at the masthead's right. */
.login-link {
  padding: 6px 14px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.login-link:hover,
.login-link:focus-visible {
  background: var(--brand-dim);
}

/* The shared footer: the site links above the page's note. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 8px;
}

.footer-links a {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-links a[aria-current="page"] {
  color: var(--brand);
}

.footer-note {
  margin: 0;
}

/* Videos: one list, scoped by provider (Phase L). Same accent as the header nav. */
.provider-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}

.provider-tab {
  position: relative;
  padding: 8px 14px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.provider-tab:hover,
.provider-tab:focus-visible {
  color: var(--text);
}

.provider-tab.is-active {
  color: var(--text);
}

.provider-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}