/* Settings: sites, site settings, AI, publishing, tag performance, users, notifications, API keys (owner: WP5).
   Tokens only. The helpers these screens share with others (.ts-mono, .ts-optional, .ts-result,
   .ts-all-sites, .ts-row-actions, .ts-cards-table, .ts-choice) live in components.css. */

/* The tag's state: calm when normal, loud only when stopped */
.ts-tag-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ts-tag-state > .bi { color: var(--ts-success-icon); }
.ts-page-meta .ts-tag-state > .bi { color: var(--ts-success-icon); }
.ts-tag-state--stopped { color: var(--ts-danger-fg); font-weight: 600; }
.ts-tag-state--stopped > .bi, .ts-page-meta .ts-tag-state--stopped > .bi { color: var(--ts-danger-icon); }

/* Section tabs (Settings and Library). The focus ring is the shared .nav-link rule in bootstrap-overrides.css.
   On phones the tabs scroll sideways in one row, like the filter tabs, instead of wrapping. */
@media (max-width: 767.98px) {
  .ts-section-tabs .nav-tabs { flex-wrap: nowrap; gap: 4px 24px; overflow-x: auto; margin: -4px -16px 0; padding: 4px 16px 0; scrollbar-width: none; }
  .ts-section-tabs .nav-tabs::-webkit-scrollbar { display: none; }
  .ts-section-tabs .nav-link { white-space: nowrap; }
}

/* The settings tables as cards below 768px (.ts-cards-table, components.css): the screens' own rows */
@media (max-width: 767.98px) {
  .ts-rules.ts-cards-table tr.ts-rules__group > th { padding: 10px var(--ts-space-4) !important; }
  .ts-rules.ts-cards-table > tbody > tr.ts-rules__group { padding: 0; }
  .ts-publishes.ts-cards-table > tbody > tr.is-live { background: var(--ts-green-50); }
  .ts-publishes.ts-cards-table > tbody > tr.is-live > * { background: transparent; }
}

/* People and keys that can't be used any more read quieter */
.ts-users tr.is-disabled > *, .ts-keys tr.is-off > * { color: var(--ts-text-secondary); }

/* Header: the site's mark before its name in the title */
.ts-page-title:has(> .ts-settings-mark) { display: flex; align-items: center; gap: 14px; }
.ts-settings-mark {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--ts-radius-sm); background: var(--_c, var(--ts-blue-900)); color: var(--ts-white);
  font-size: 15px; line-height: 1; font-weight: 700; letter-spacing: 0;
}
.ts-settings-mark::before { content: attr(data-mark); }
@media (max-width: 575.98px) {
  .ts-page-title:has(> .ts-settings-mark) { gap: 10px; }
  .ts-settings-mark { width: 30px; height: 30px; font-size: 13px; }
}

/* Sections: a card with a title and one line on what it holds ---------------------------- */
.ts-settings-form { max-width: var(--ts-page-narrow); }
.ts-settings-form > .ts-settings-section + .ts-settings-section { margin-top: var(--ts-space-6); }
.ts-settings-section__head { padding: 18px var(--ts-space-6) var(--ts-space-4); border-bottom: 1px solid var(--ts-border-subtle); }
.ts-settings-section__title { margin: 0; font-size: var(--ts-fs-card); line-height: var(--ts-lh-card); font-weight: 600; letter-spacing: var(--ts-ls-card); }
.ts-settings-section__text { margin: 2px 0 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-settings-section .card-body { padding: var(--ts-space-6); }
.ts-settings-section .ts-code-field:last-child { margin-bottom: 0 !important; }
@media (max-width: 767.98px) {
  .ts-settings-section__head { padding: 14px var(--ts-space-4) 12px; }
  .ts-settings-section .card-body { padding: var(--ts-space-4); }
}

/* Sites list ------------------------------------------------------------------------------- */
.ts-site-row { display: flex; align-items: center; gap: var(--ts-space-3); min-width: 0; }
.ts-site-row__mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--ts-radius-sm); background: var(--_c, var(--ts-blue-900)); color: var(--ts-white); font-size: 13px; line-height: 1; font-weight: 600; }
.ts-site-row__text { display: flex; flex-direction: column; min-width: 0; }
.ts-sites .table a.ts-site-row__name { font-size: 15px; line-height: 22px; }
.ts-site-row__domain { color: var(--ts-text-muted); font-size: 12px; line-height: 16px; }
.ts-sites tr[data-row-link-url]:hover a.ts-site-row__name { text-decoration: underline; text-underline-offset: 3px; }

/* Emergency stop: the site-wide kill, first on the Publishing tab ------------------------------ */
.ts-estop {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ts-space-5);
  padding: var(--ts-space-6);
  border: 1px solid var(--ts-danger-border); border-radius: var(--ts-radius-lg);
  background: var(--ts-danger-bg);
}
.ts-estop__icon {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ts-danger-solid); color: var(--ts-white); font-size: 22px;
  box-shadow: 0 0 0 5px var(--ts-red-100);
}
.ts-estop__title { margin: 0; font-size: var(--ts-fs-section); line-height: var(--ts-lh-section); font-weight: 600; letter-spacing: var(--ts-ls-section); }
.ts-estop__text { margin: var(--ts-space-1) 0 0; max-width: 68ch; color: var(--ts-text); }
.ts-estop__note { margin: var(--ts-space-3) 0 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); }
.ts-estop__form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ts-space-3) var(--ts-space-4); margin-top: var(--ts-space-5); }
.ts-estop__field { flex: 1 1 280px; max-width: 440px; }
.ts-estop__field .form-label { font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); }
.ts-estop__button { min-height: 48px; padding-left: 20px; padding-right: 20px; font-size: 15px; }
.ts-estop__button .bi { font-size: 18px; }
/* On: the one solid red block on the page, with a white button to undo it */
.ts-estop--on { border-color: var(--ts-danger-solid); background: var(--ts-danger-solid); color: var(--ts-white); }
.ts-estop--on .ts-estop__icon { background: var(--ts-white); color: var(--ts-danger-solid); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ts-white) 22%, transparent); }
.ts-estop--on .ts-estop__title, .ts-estop--on .ts-estop__text, .ts-estop--on .form-label { color: var(--ts-white); }
.ts-estop--on .ts-estop__note { color: var(--ts-white); }
.ts-estop--on .form-control { border-color: transparent; }
.ts-estop--on .form-control:focus { border-color: var(--ts-white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-white) 45%, transparent); }
.ts-estop--on .ts-estop__button {
  --bs-btn-color: var(--ts-red-700); --bs-btn-bg: var(--ts-white); --bs-btn-border-color: var(--ts-white);
  --bs-btn-hover-color: var(--ts-white); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--ts-white);
  --bs-btn-active-color: var(--ts-red-700); --bs-btn-active-bg: var(--ts-red-50); --bs-btn-active-border-color: var(--ts-white);
}
.ts-estop--on :focus-visible { outline-color: var(--ts-white); }
@media (hover: none) {
  .ts-estop--on .ts-estop__button { --bs-btn-hover-color: var(--ts-red-700); --bs-btn-hover-bg: var(--ts-white); }
}
@media (max-width: 575.98px) {
  .ts-estop { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-3); padding: var(--ts-space-5) var(--ts-space-4); }
  .ts-estop__icon { width: 40px; height: 40px; font-size: 18px; }
  .ts-estop__field { max-width: none; }
  .ts-estop__form > .btn { width: 100%; white-space: normal; }
}

/* The tag: address and Publish now ------------------------------------------------------------ */
.ts-tagbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ts-space-4) var(--ts-space-8); }
.ts-tagbar__url { flex: 1 1 360px; max-width: 560px; }
.ts-tagbar__url .form-control[readonly] { color: var(--ts-text); }
.ts-tagbar__publish { display: flex; align-items: center; gap: var(--ts-space-3); margin-left: auto; }
.ts-tagbar__note { color: var(--ts-text-muted); font-size: var(--ts-fs-small); }
@media (max-width: 575.98px) {
  .ts-tagbar__publish { margin-left: 0; flex-wrap: wrap; }
}

/* Publish history -------------------------------------------------------------------------- */
.ts-version { color: var(--ts-slate-600); background: var(--ts-slate-50); font-size: 12px; }
.ts-pub-live {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-left: var(--ts-space-2); padding: 0 8px 0 7px;
  border-radius: var(--ts-radius-pill); background: var(--ts-st-live-bg); color: var(--ts-st-live-fg);
  font-size: 12px; line-height: 1; font-weight: 600; vertical-align: middle;
}
.ts-pub-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ts-st-live-dot); }
.ts-publishes tr.is-live > * { background: var(--ts-green-50); }
.ts-pub-message, .ts-pub-reason, .ts-pub-took { display: block; margin-top: 2px; color: var(--ts-text-muted); font-size: 12px; line-height: 16px; }
.ts-pub-message { max-width: 34ch; white-space: normal; color: var(--ts-danger-fg); }
.ts-pub-kind { font-weight: 500; }
.ts-pub-reason { max-width: 36ch; }

/* AI ------------------------------------------------------------------------------------------- */
.ts-ai-switch { margin: 0; }
.ts-ai-switch .form-check-label { font-weight: 600; }
.ts-ai-switch .form-text { max-width: 62ch; }
.ts-ai-detail { display: block; margin-top: 4px; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); }
.ts-ai-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--ts-border-subtle); }
.ts-ai-facts > div { padding: var(--ts-space-4) var(--ts-space-6); min-width: 0; }
.ts-ai-facts > div + div { border-left: 1px solid var(--ts-border-subtle); }
.ts-ai-facts dt { color: var(--ts-text-secondary); font-size: var(--ts-fs-small); line-height: var(--ts-lh-small); font-weight: 500; }
.ts-ai-facts dd { margin: 4px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.4px; overflow-wrap: anywhere; }
.ts-ai-facts dd span { color: var(--ts-text-secondary); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.ts-ai-facts dd.ts-mono { font-size: 13px; line-height: 28px; letter-spacing: 0; font-weight: 500; }
@media (max-width: 767.98px) {
  .ts-ai-facts { grid-template-columns: minmax(0, 1fr); }
  .ts-ai-facts > div + div { border-left: 0; border-top: 1px solid var(--ts-border-subtle); }
  .ts-ai-facts > div { padding: 12px var(--ts-space-4); }
}

/* Users and roles ------------------------------------------------------------------------------ */
.ts-users .ts-users__person { font-weight: 400; }
.ts-users__name { font-weight: 600; }
.ts-users__you { color: var(--ts-text-muted); font-weight: 500; }
.ts-users__linked { color: var(--ts-slate-400); font-size: 12px; margin-left: 2px; }
.ts-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ts-role {
  display: inline-flex; align-items: center; gap: var(--ts-space-2); min-height: 32px; padding: 3px 4px 3px 4px;
  border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); background: var(--ts-white);
  font-size: var(--ts-fs-small); line-height: 18px; font-weight: 500; white-space: nowrap;
}
.ts-role:not(:has(form)) { padding-right: 10px; }
.ts-role__mark { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border-radius: var(--ts-radius-xs); background: var(--_c, var(--ts-blue-900)); color: var(--ts-white); font-size: 11px; line-height: 1; font-weight: 600; }
.ts-role__mark--all { background: var(--ts-slate-100); color: var(--ts-blue-900); font-size: 12px; }
.ts-role form { display: inline-flex; margin: 0; }
/* The remove control: a labelled 24px button (WCAG 2.5.8) */
.ts-role__remove {
  width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--ts-radius-xs); background: transparent; color: var(--ts-slate-500);
  transition: background-color var(--ts-dur-1) var(--ts-ease), color var(--ts-dur-1) var(--ts-ease);
}
.ts-role__remove .bi { font-size: 12px; }
.ts-role__remove:hover { background: var(--ts-red-50); color: var(--ts-red-700); }

/* Invite dialog: roles as choices (.ts-choice, components.css) with what each can do */
.ts-invite__intro { margin: 0 0 var(--ts-space-5); color: var(--ts-text-secondary); }
.ts-invite__roles { margin: var(--ts-space-5) 0 0; }
.ts-invite__roles legend { float: none; margin-bottom: var(--ts-space-2); }

/* Notifications -------------------------------------------------------------------------------- */
.ts-rules__group > th {
  padding-top: 12px !important; padding-bottom: 8px !important;
  background: var(--ts-surface-sunken); color: var(--ts-text); font-size: var(--ts-fs-small); font-weight: 600;
}
.ts-rules__group > th .bi { margin-right: var(--ts-space-2); color: var(--ts-slate-400); }
.ts-rules tbody + tbody .ts-rules__group > th { border-top: 1px solid var(--ts-border); }
.ts-channel { display: inline-flex; align-items: center; gap: var(--ts-space-2); font-weight: 500; }
.ts-channel > .bi { color: var(--ts-slate-500); }
.ts-rules__target { color: var(--ts-text); }

/* API keys ---------------------------------------------------------------------------------- */
.ts-newkey {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ts-space-5);
  padding: var(--ts-space-6); border: 1px solid var(--ts-success-border); border-radius: var(--ts-radius-lg);
  background: var(--ts-success-bg);
}
.ts-newkey__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ts-white); color: var(--ts-success-icon); font-size: 22px; box-shadow: 0 0 0 5px var(--ts-green-100); }
.ts-newkey__title { margin: 0; font-size: var(--ts-fs-section); line-height: var(--ts-lh-section); font-weight: 600; letter-spacing: var(--ts-ls-section); }
.ts-newkey__text { margin: var(--ts-space-1) 0 0; max-width: 66ch; }
.ts-newkey__field { max-width: 680px; margin-top: var(--ts-space-4); }
.ts-newkey__field .form-control { background: var(--ts-white); color: var(--ts-text); }
.ts-newkey__usage { margin: var(--ts-space-3) 0 0; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); }
@media (max-width: 575.98px) {
  .ts-newkey { grid-template-columns: minmax(0, 1fr); gap: var(--ts-space-3); padding: var(--ts-space-5) var(--ts-space-4); }
}
.ts-keys th[scope="row"] { font-weight: 400; }
.ts-keys__name { display: block; font-weight: 600; }
.ts-keys__prefix { display: block; margin-top: 2px; color: var(--ts-text-muted); font-size: 12px; }
.ts-scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ts-scopes li { padding: 2px 8px; border-radius: var(--ts-radius-pill); background: var(--ts-slate-100); color: var(--ts-slate-700); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }

/* Tag performance: percentiles in columns, budget warnings under the figure they belong to */
.ts-rum-table td.num { white-space: nowrap; }
.ts-rum-table .ts-rum-total th, .ts-rum-table .ts-rum-total td { font-weight: 600; }
.ts-rum-table caption { caption-side: top; color: var(--ts-text-secondary); font-size: var(--ts-fs-small); padding: var(--ts-space-3) var(--ts-space-4); }
.ts-rum-over { display: flex; justify-content: flex-end; gap: 4px; font-size: var(--ts-fs-small); }
.ts-rum-notes { color: var(--ts-text-secondary); font-size: var(--ts-fs-small); }
.ts-rum-notes p:last-child { margin-bottom: 0; }
.ts-rum-compare-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ts-space-4); margin-bottom: var(--ts-space-5); }

/* Webhooks tab (settings/webhooks.html.twig) */
.ts-webhooks > li { display: flex; flex-direction: column; gap: var(--ts-space-3); }
.ts-webhooks > li.is-off .ts-webhooks__url { color: var(--ts-text-secondary); }
.ts-webhooks__form { display: flex; flex-direction: column; gap: var(--ts-space-3); }
.ts-webhooks__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ts-space-2) var(--ts-space-4); }
.ts-webhooks__url { font-weight: 600; overflow-wrap: anywhere; }
.ts-webhooks__events { min-width: 0; }
.ts-webhooks__actions { display: flex; flex-wrap: wrap; gap: var(--ts-space-2); }