/* ─────────────────────────────────────────────────────────────
   Access screens — component kit (HSF-1041, /dashboard/access_*).
   Lifted 1:1 from the approved prototype
   (sofi-code-manager …/wl-permissionamento/prototype/perfis-de-acesso.html),
   prefixed `acc-` because application.css is shared by every layout.
   Layout = Tailwind utilities (`brand`/`ink` palettes in
   config/tailwind.config.js); these are the pieces every access screen
   (list U10, editor U11, people U12, user U13) shares:
     .acc-btn-p / .acc-btn-s   primary / secondary button
     .acc-inp                  text input / textarea
     .acc-fld (+ .is-open)     field of the picker (no native <select>, D24); .acc-fld__toggle is its button
     .acc-tag                  chosen value inside .acc-fld, with its own ✕ button
     .acc-pop …                the picker's popover (search, list, options, footer)
     .acc-chip (.on .inh .sys) permission chip of the editor
     .acc-seg (button.on)      Nada / Ver / Editar / Tudo segmented control
     .acc-bar > span           coverage bar
     .acc-avatar               initials avatar (`access_avatar`; badges are `access_badge`,
                               Dashboard::AccessScreensHelper)
   ───────────────────────────────────────────────────────────── */

.acc-btn-p { display: inline-flex; align-items: center; border-radius: 10px; background: #00897C; color: #fff; font-weight: 600; font-size: 14px; padding: 9px 16px; transition: background .15s; }
.acc-btn-p:hover { background: #00736A; }
.acc-btn-p:disabled { opacity: .45; cursor: not-allowed; }
.acc-btn-s { display: inline-flex; align-items: center; border-radius: 10px; background: #fff; color: #333D3D; font-weight: 600; font-size: 14px; padding: 9px 16px; box-shadow: inset 0 0 0 1px #D3D9D9; }
.acc-btn-s:hover { background: #F5F7F7; }

.acc-inp { width: 100%; border-radius: 10px; border: 1px solid #D3D9D9; padding: 9px 12px; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.acc-inp:focus { outline: none; border-color: #00A393; box-shadow: 0 0 0 4px rgba(0,163,147,.14); }
.acc-inp.is-invalid { box-shadow: 0 0 0 2px #FDA4AF; }

.acc-fld { width: 100%; min-height: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 36px 6px 10px; border-radius: 10px; border: 1px solid #D3D9D9; background: #fff; position: relative; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.acc-fld:hover { border-color: #B3BCBC; }
.acc-fld:focus-visible, .acc-fld:focus-within, .acc-fld.is-open { outline: none; border-color: #00A393; box-shadow: 0 0 0 4px rgba(0,163,147,.14); }
.acc-fld::after { content: ""; position: absolute; right: 13px; top: 50%; height: 8px; width: 8px; border-right: 2px solid #8A9494; border-bottom: 2px solid #8A9494; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.acc-fld.is-open::after { transform: translateY(-30%) rotate(-135deg); }
.acc-fld__ph { color: #8A9494; font-size: 14px; }
.acc-fld__toggle { flex: 1; min-width: 40px; min-height: 28px; display: flex; align-items: center; text-align: left; background: transparent; outline: none; }

.acc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #E9FFFC; color: #00736A; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0,163,147,.3); }
.acc-tag button { height: 18px; width: 18px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; color: #00897C; }
.acc-tag button:hover { background: rgba(0,163,147,.15); }
.acc-tag button:focus-visible { outline: 2px solid #00A393; outline-offset: 1px; }

.acc-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 100%; width: 340px; max-width: calc(100vw - 24px); background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(18,25,24,.18), 0 0 0 1px rgba(18,25,24,.06); overflow: hidden; animation: acc-fi .14s ease; }
.acc-pop__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #E8ECEC; }
.acc-pop__search input { flex: 1; border: 0; outline: 0; box-shadow: none; padding: 0; font: inherit; font-size: 14px; }
.acc-pop__search input:focus { box-shadow: none; }
.acc-pop__list { max-height: 300px; overflow-y: auto; padding: 6px; }
.acc-pop__empty { padding: 24px 12px; text-align: center; font-size: 14px; color: #647070; }
.acc-pop__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #E8ECEC; background: #F5F7F7; font-size: 12px; color: #647070; }
.acc-pop__done { font-weight: 600; color: #00736A; }
.acc-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.acc-opt:hover, .acc-opt.is-active { background: #F0FBFA; }
.acc-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.acc-opt__box { margin-top: 2px; height: 18px; width: 18px; flex: none; border-radius: 6px; border: 1.5px solid #B3BCBC; display: grid; place-items: center; color: #fff; font-size: 12px; }
.acc-opt__box.radio { border-radius: 999px; }
.acc-opt.is-sel .acc-opt__box { background: #00A393; border-color: #00A393; }
.acc-opt__t { font-size: 14px; font-weight: 600; color: #121918; }
.acc-opt__s { font-size: 12px; color: #647070; margin-top: 1px; }
.acc-opt__why { font-size: 12px; color: #B45309; margin-top: 1px; }
.acc-opt__m { margin-left: auto; font-size: 11px; color: #8A9494; white-space: nowrap; }
.acc-kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; padding: 1px 5px; border-radius: 5px; border: 1px solid #D3D9D9; background: #fff; color: #4A5555; }

.acc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; border: 1px solid #D3D9D9; background: #fff; color: #333D3D; cursor: pointer; transition: all .12s; }
.acc-chip:hover { border-color: #00A393; }
.acc-chip .dot { height: 8px; width: 8px; border-radius: 50%; border: 1.5px solid #8A9494; }
.acc-chip.on { background: #E9FFFC; border-color: #00A393; color: #00736A; }
.acc-chip.on .dot { background: #00A393; border-color: #00A393; }
.acc-chip.inh { background: #F0FBFA; border-color: #A7E8E0; color: #0b7d72; cursor: not-allowed; }
.acc-chip.inh .dot { background: #7FDCCF; border-color: #7FDCCF; }
.acc-chip.sys { background: #EEF2F2; border-color: #E8ECEC; color: #4A5555; cursor: not-allowed; }
.acc-chip.sys .dot { background: #8A9494; border-color: #8A9494; }
.acc-chip .k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }

.acc-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: #EEF2F2; gap: 2px; }
.acc-seg button { font-size: 12px; font-weight: 600; color: #647070; padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.acc-seg button:hover { color: #121918; }
.acc-seg button.on { background: #fff; color: #00736A; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,163,147,.35); }
.acc-seg button.on.mixed { color: #8a5a00; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(224,161,0,.45); }

.acc-bar { height: 6px; border-radius: 999px; background: #E8ECEC; overflow: hidden; }
.acc-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #00C2AE, #00897C); }

.acc-avatar { height: 36px; width: 36px; flex: none; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 13px; }

/* A whole table row is the link: the name's link stretches over its row. */
.acc-row { position: relative; }
.acc-row__link::after { content: ""; position: absolute; inset: 0; }

.acc-fade-in { animation: acc-fi .16s ease; }
@keyframes acc-fi { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

@tailwind base;

.checkbox-label:has(input:checked) {
  @apply border-yellow-500;
}

.checkbox-label input[type="checkbox"] {
  @apply accent-yellow-500 text-yellow-500 ring-0;
}

.checkbox-label input[type="checkbox"]:checked {
  @apply accent-yellow-500 text-yellow-500;
}

.custom-underline {
  @apply underline underline-offset-0 decoration-8 decoration-blue-300;
}

.gradient-headline {
  @apply animated slide-left block font-bold text-gray-800 text-3xl md:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-500;
}

.animated {}

.btn-demo {
  @apply hover:-translate-y-1 transition-all duration-300 inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-r from-cyan-500 to-blue-500 border-transparent text-white text-sm font-semibold rounded-lg focus:outline-none ring-0 focus:ring-0 py-3 px-5;
}

.fade-in {
  animation: fadeInAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

.animation.slide-bottom {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation: slideBottomAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideBottomAnimation {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.animation.slide-top {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation: slideUpAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideUpAnimation {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.animation.slide-left {
  view-timeline: --subjectReveal block;
  view-timeline-inset: 70% -100px;
  animation-timeline: --subjectReveal;

  animation: slideLeftAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideLeftAnimation {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.animation.slide-right {
  animation: slideRightAnimation ease 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes slideRightAnimation {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0%);
  }
}

/* Firefox */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: #ffffff30 #00000000;
}

/* Chrome, Edge, and Safari */
.sidebar::-webkit-scrollbar {
  width: 11px;
}

.sidebar::-webkit-scrollbar-track {
  background: #00000000;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #ffffff30;
  /* border: 3px solid #00000022; */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff50;
  /* border: 3px solid #00000022; */
}

.b-scroll {
  scrollbar-width: thin;
  scrollbar-color: #ffffff30 #00000000;
}

/* Chrome, Edge, and Safari */
.b-scroll::-webkit-scrollbar {
  width: 11px;
}

.b-scroll::-webkit-scrollbar-track {
  background: #00000005;
  border: 1px solid #dfdfdf;
}

.b-scroll::-webkit-scrollbar-thumb {
  background-color: #00000030;
  /* border: 3px solid #00000022; */
}

.b-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #00000015;
  /* border: 3px solid #00000022; */
}

@keyframes broadcast-timer {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes flow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@tailwind components;
@tailwind utilities;


/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/* Portal auth form styles extracted from inline template for maintainability. */
input::placeholder {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: #9EA3A9 !important;
}

select::placeholder {
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: #9EA3A9 !important;
}

.country-select-centered + .select2-container .select2-dropdown {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90px !important;
}

ul[id*="country_code"] {
  left: 0 !important;
  right: auto !important;
  width: 90px !important;
}

select[id*="country_code"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 32px !important;
  text-align: center !important;
  text-align-last: center !important;
}

select[id*="country_code"] option {
  background-repeat: no-repeat !important;
  background-position: 10px center !important;
  background-size: 20px 14px !important;
  padding-left: 32px !important;
  text-align: left !important;
}

/* Force selected option highlight to match teal hover used in document dropdown */
select[id*="country_code"] option:checked {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

/* Hover style for custom country dropdown items */
[data-controller="country-select"] ul li:hover,
[data-controller="country-select"] ul li:focus {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

select[id*="country_code"] option:hover,
select[id*="country_code"] option:focus {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

ul[id*="country_code"] li.select2-results__option--highlighted[aria-selected] {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

ul[id*="country_code"] li:hover,
ul[id*="country_code"] li:focus {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted:hover {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
}
/* ── Whitelabel BI dashboard — page-scoped components. Extend the shared wl-* kit
   (whitelabel_wizard.css), same --hs-* tokens. Loaded ONLY on the active-WL BI surface
   via content_for(:head). 1:1 with admin-whitelabel-prototype/dashboard.html
   (names-only, card 86aje3e5t). */

/* header lead spans the full content width (proto: kills the top-right dead space) */
header .wl-page__lead { max-width: none; }

/* controls toolbar */
.wl-toolbar { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.wl-toolbar__field { display: flex; flex-direction: column; gap: 5px; }
.wl-toolbar__lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hs-ink-400); }
.wl-daterange { display: inline-flex; align-items: center; gap: 8px; }
.wl-daterange .wl-input { width: auto; }
.wl-presets { display: inline-flex; gap: 2px; padding: 3px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 9px; }
.wl-presets__btn { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 7px 13px; border-radius: 6px; text-decoration: none; transition: all var(--hs-dur) var(--hs-ease); }
.wl-presets__btn:hover { color: var(--hs-ink-800); }
.wl-presets__btn.is-active { background: var(--hs-primary-200); color: #fff; }
.wl-presets__btn.is-disabled, .wl-presets__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* KPI stat tiles */
.wl-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .wl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .wl-stats { grid-template-columns: 1fr; } }
.wl-stat { position: relative; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 16px 18px; transition: box-shadow var(--hs-dur) var(--hs-ease), transform var(--hs-dur) var(--hs-ease); }
.wl-stat:hover { box-shadow: var(--hs-shadow-md); transform: translateY(-1px); }
.wl-stat__label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--hs-ink-500); }
.wl-stat__ico { display: grid; place-items: center; height: 24px; width: 24px; flex: none; border-radius: 7px; background: var(--hs-primary-000); color: var(--hs-primary-300); }
.wl-stat__ico svg { height: 14px; width: 14px; }
.wl-stat__ico--warn { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-stat__ico--bad { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-stat__val { margin-top: 10px; font-size: 27px; font-weight: 600; letter-spacing: -0.02em; color: var(--hs-ink-900); line-height: 1.05; }
.wl-stat__val small { font-size: 15px; font-weight: 500; color: var(--hs-ink-400); margin-left: 2px; }
.wl-stat__delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.wl-stat__delta svg { height: 13px; width: 13px; }
.wl-stat__delta.is-up { color: var(--hs-positive-dark); }
.wl-stat__delta.is-down { color: var(--hs-negative-dark); }
.wl-stat__delta.is-flat { color: var(--hs-ink-400); }
.wl-stat__delta em { font-style: normal; color: var(--hs-ink-400); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
/* signal tile accent: a hairline top rule in the tile's hue */
.wl-stat--signal::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--sig, var(--hs-primary-200)); opacity: 0.9; }

/* funnel */
.wl-funnel { display: flex; flex-direction: column; }
.wl-funnel__row { position: relative; padding: 3px 0; }
.wl-funnel__row.is-request .wl-funnel__track { box-shadow: inset 0 0 0 1px var(--hs-primary-100); }
.wl-funnel__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.wl-funnel__stage { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-800); }
.wl-funnel__n { display: grid; place-items: center; height: 22px; width: 22px; flex: none; border-radius: 50%; background: var(--hs-ink-050); color: var(--hs-ink-500); font-size: 11.5px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--hs-ink-200); }
.wl-funnel__row.is-request .wl-funnel__n { background: var(--hs-primary-000); color: var(--hs-primary-300); box-shadow: inset 0 0 0 1.5px var(--hs-primary-100); }

/* kind badge (AÇÃO do devedor vs REQUISIÇÃO front→BFF→sofi-api) */
.wl-kind { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.wl-kind--action { background: var(--hs-ink-050); color: var(--hs-ink-500); box-shadow: inset 0 0 0 1px var(--hs-ink-100); }
.wl-kind--request { background: var(--hs-primary-000); color: var(--hs-primary-300); box-shadow: inset 0 0 0 1px var(--hs-primary-100); }
.wl-kind svg { height: 10px; width: 10px; }

.wl-funnel__vals { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wl-funnel__count { font-size: 15px; font-weight: 700; color: var(--hs-ink-900); }
.wl-funnel__pct { font-size: 12px; font-weight: 600; color: var(--hs-ink-400); }
.wl-funnel__track { position: relative; height: 32px; border-radius: 8px; background: var(--hs-ink-050); overflow: hidden; }
.wl-funnel__fill { display: flex; height: 100%; width: 0; border-radius: 8px; overflow: hidden; transition: width 900ms var(--hs-ease); background: linear-gradient(90deg, var(--hs-primary-300), var(--hs-primary-100)); }
.wl-funnel__row.is-critical .wl-funnel__track { box-shadow: inset 0 0 0 1.5px rgba(230,70,46,0.30); }
.wl-funnel__drop { display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: 20px; padding-right: 2px; font-size: 11.5px; font-weight: 600; color: var(--hs-ink-400); }
.wl-funnel__drop svg { height: 12px; width: 12px; color: var(--hs-ink-300); }
.wl-funnel__drop.is-critical { color: var(--hs-negative-dark); }
.wl-funnel__drop.is-critical svg { color: var(--hs-negative-medium); }
.wl-funnel__drop.is-gain { color: var(--hs-positive-dark); }

/* real event-name caption per funnel stage (mono chip — "metrify everything") */
.wl-funnel__ev { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500; color: var(--hs-ink-500); background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); padding: 1px 6px; border-radius: 5px; letter-spacing: -0.01em; margin-top: 4px; }

/* per-request ERROR slice — result-suffix name counts (…_failed) · ops error monitoring */
.wl-errrow { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 5px; }
.wl-errchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-errchip svg { height: 11px; width: 11px; flex: none; }
.wl-errchip--ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-errchip--watch { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }

/* NPS score distribution — one chip per note 0..10 (scrolls horizontally when tight) */
.wl-npsrow { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-top: 6px; }
.wl-npschip { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--hs-ink-050); color: var(--hs-ink-600); }
.wl-npschip__n { display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 999px; font-size: 10px; background: rgba(0,0,0,0.06); }
.wl-npschip--ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-npschip--watch { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-npschip--bad { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

/* path legend above the funnel */
.wl-pathkey { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wl-pathkey__i { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--hs-ink-600); }
.wl-pathkey__sw { height: 11px; width: 11px; border-radius: 3px; flex: none; }

/* branch leaks off a funnel stage (shared structure) */
.wl-leak { position: relative; display: flex; align-items: center; gap: 12px; margin: 8px 0 2px 30px; padding: 10px 14px; border-radius: 11px; background: var(--hs-warning-soft); border: 1px solid rgba(159,103,6,0.20); }
.wl-leak::before { content: ""; position: absolute; left: -16px; top: -20px; width: 15px; height: 34px; border-left: 2px solid var(--hs-warning-medium); border-bottom: 2px solid var(--hs-warning-medium); border-bottom-left-radius: 9px; }
.wl-leak__ico { display: grid; place-items: center; height: 30px; width: 30px; flex: none; border-radius: 9px; background: rgba(255,177,39,0.28); color: var(--hs-warning-dark); }
.wl-leak__ico svg { height: 16px; width: 16px; }
.wl-leak__title { font-size: 13.5px; font-weight: 700; color: var(--hs-warning-dark); }
.wl-leak__sub { font-size: 12px; color: #8a6413; margin-top: 1px; line-height: 1.4; }
.wl-leak__pct { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--hs-warning-dark); white-space: nowrap; }

/* re-simulation loop branch — an engagement branch (info hue), mirrors the leak structure */
.wl-leak--loop { background: var(--hs-primary-000); border-color: rgba(0,163,147,0.22); }
.wl-leak--loop::before { border-left-color: var(--hs-primary-200); border-bottom-color: var(--hs-primary-200); }
.wl-leak--loop .wl-leak__ico { background: rgba(0,163,147,0.16); color: var(--hs-primary-300); }
.wl-leak--loop .wl-leak__title { color: var(--hs-primary-300); }
.wl-leak--loop .wl-leak__sub { color: var(--hs-ink-500); }
.wl-leak--loop .wl-leak__pct { color: var(--hs-primary-300); }

/* eligibility-rejection branch — a NEGATIVE-outcome branch (red hue): debtor logged in
   but the program eligibility gate refused ("não é elegível ao programa"). */
.wl-leak--reject { background: var(--hs-negative-soft); border-color: rgba(230,70,46,0.22); }
.wl-leak--reject::before { border-left-color: var(--hs-negative-medium); border-bottom-color: var(--hs-negative-medium); }
.wl-leak--reject .wl-leak__ico { background: rgba(230,70,46,0.16); color: var(--hs-negative-dark); }
.wl-leak--reject .wl-leak__title { color: var(--hs-negative-dark); }
.wl-leak--reject .wl-leak__sub { color: #8a2b1c; }
.wl-leak--reject .wl-leak__pct { color: var(--hs-negative-dark); }

/* horizontal breakdown bars */
.wl-bars { display: flex; flex-direction: column; gap: 13px; }
.wl-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.wl-bar__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--hs-ink-800); }
.wl-bar__swatch { height: 10px; width: 10px; border-radius: 3px; flex: none; }
.wl-bar__val { font-size: 12.5px; color: var(--hs-ink-400); white-space: nowrap; }
.wl-bar__val strong { color: var(--hs-ink-900); font-weight: 700; font-size: 13px; }
.wl-bar__track { height: 9px; border-radius: 999px; background: var(--hs-ink-050); overflow: hidden; }
.wl-bar__fill { height: 100%; width: 0; border-radius: 999px; transition: width 800ms var(--hs-ease); }

/* time-series legend */
.wl-legend { display: flex; align-items: center; gap: 16px; }
.wl-legend__i { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hs-ink-500); }
.wl-legend__sw { height: 10px; width: 10px; border-radius: 3px; }
.wl-legend__ln { height: 3px; width: 16px; border-radius: 999px; }

.wl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .wl-grid-2 { grid-template-columns: 1fr; } }

/* platform segmentation control */
.wl-seg { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 12px 14px; }
.wl-seg__head { display: flex; flex-direction: column; gap: 3px; flex: none; }
.wl-seg__lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-400); }
.wl-seg__scope { font-size: 12.5px; color: var(--hs-ink-500); }
.wl-seg__scope b { color: var(--hs-ink-900); font-weight: 600; }
.wl-seg__scope code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--hs-primary-300); background: var(--hs-primary-000); padding: 1px 5px; border-radius: 5px; }
.wl-seg__list { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; padding: 4px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 12px; }
.wl-segbtn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 7px 14px 7px 8px; font: inherit; text-align: left; text-decoration: none; transition: all var(--hs-dur) var(--hs-ease); }
.wl-segbtn:hover { background: var(--hs-white); border-color: var(--hs-ink-100); }
.wl-segbtn.is-active { background: var(--hs-white); border-color: var(--hs-primary-200); box-shadow: var(--hs-shadow-sm), 0 0 0 1px var(--hs-primary-200) inset; }
.wl-segbtn__logo { display: grid; place-items: center; height: 30px; width: 30px; flex: none; border-radius: 9px; color: #fff; font-weight: 700; font-size: 13px; background: linear-gradient(135deg,#00A393,#00C9B5); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); transition: transform var(--hs-dur) var(--hs-ease); }
.wl-segbtn.is-active .wl-segbtn__logo { transform: scale(1.04); }
.wl-segbtn__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wl-segbtn__name { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-700); }
.wl-segbtn.is-active .wl-segbtn__name { color: var(--hs-ink-900); }
.wl-segbtn__check { display: none; height: 14px; width: 14px; color: var(--hs-primary-300); }
.wl-segbtn.is-active .wl-segbtn__check { display: block; }
.wl-segbtn__sub { font-size: 11px; color: var(--hs-ink-400); font-family: ui-monospace, Menlo, monospace; }

/* empty / low-N states */
.wl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 24px; background: var(--hs-white); border: 1px dashed var(--hs-ink-200); border-radius: var(--hs-radius-lg); }
.wl-empty__ico { display: grid; place-items: center; height: 48px; width: 48px; border-radius: 14px; background: var(--hs-primary-000); color: var(--hs-primary-300); }
.wl-empty__ico svg { height: 24px; width: 24px; }
.wl-empty__title { font-size: 18px; font-weight: 600; color: var(--hs-ink-900); }
.wl-empty__sub { font-size: 13.5px; color: var(--hs-ink-500); max-width: 440px; }
.wl-lown { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hs-warning-dark); background: var(--hs-warning-soft); border: 1px solid rgba(159,103,6,0.20); border-radius: 999px; padding: 4px 12px; }

/* Active-WL management header (Option A, card 86aje3e5t) — badge + Desativar + Editar
   at the page-title altitude, a single hairline dividing it from the analytics. 1:1
   with the prototype (admin-whitelabel-prototype/dashboard.html). */
.wl-mgmt { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--hs-ink-100); }
.wl-mgmt__id { min-width: 0; }
.wl-mgmt__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ── Whitelabel BI consolidado — page-scoped, 1:1 with the approved
   prototipo-consolidado.html (card 86ajpczu8, U4). Every selector is scoped under
   the `.wlc` wrapper; the prototype's OWN light/dark tokens live on `.wlc`
   (prefers-color-scheme + [data-theme] override, same token names as the proto).
   Loaded ONLY on the ?view=consolidado surface via content_for(:head). */

.wlc {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --ring: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --accent-wash: rgba(42, 120, 214, 0.08);
  --s-vol: #2a78d6;
  --s-ok: #1baf7a;
  --s-fail: #e34948;
  --st-good: #0ca30c;
  --st-warn: #b97e00;
  --st-serious: #c05f35;
  --st-critical: #d03b3b;
  --good-text: #006300;

  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .wlc {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --ring: rgba(255, 255, 255, 0.10);
    --accent: #3987e5;
    --accent-wash: rgba(57, 135, 229, 0.14);
    --s-vol: #3987e5;
    --s-ok: #199e70;
    --s-fail: #e66767;
    --st-warn: #fab219;
    --st-serious: #ec835a;
    --good-text: #0ca30c;
  }
}
:root[data-theme="dark"] .wlc {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --ring: rgba(255, 255, 255, 0.10);
  --accent: #3987e5;
  --accent-wash: rgba(57, 135, 229, 0.14);
  --s-vol: #3987e5;
  --s-ok: #199e70;
  --s-fail: #e66767;
  --st-warn: #fab219;
  --st-serious: #ec835a;
  --good-text: #0ca30c;
}

.wlc * { box-sizing: border-box; }

/* ---------- page header ---------- */
.wlc .wlc-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.wlc .wlc-title {
  margin: 6px 0 4px; font-size: 27px; line-height: 1.2; font-weight: 700;
  text-wrap: balance;
}
.wlc .wlc-meta { color: var(--ink-2); font-size: 14px; }
.wlc .wlc-meta b { color: var(--ink); font-weight: 600; }

/* ---------- caveats ---------- */
.wlc .wlc-caveats {
  margin: 20px 0 0; display: grid; gap: 8px;
  border: 1px solid var(--ring); border-radius: 10px;
  background: var(--surface); padding: 14px 16px; font-size: 13.5px;
  color: var(--ink-2);
}
.wlc .wlc-caveats div::before { content: "▲ "; color: var(--st-warn); font-size: 10px; }
.wlc .wlc-caveats b { color: var(--ink); font-weight: 600; }

.wlc .wlc-h2 { margin: 44px 0 4px; font-size: 19px; font-weight: 700; }
.wlc .wlc-sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 16px; }

/* ---------- empty card ---------- */
.wlc .wlc-card {
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 16px 18px;
}
.wlc .wlc-card__title { font-weight: 700; }
.wlc .wlc-card__desc { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }

/* ---------- tiles ---------- */
.wlc .wlc-tiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.wlc .wlc-tile {
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 14px 16px 12px;
}
.wlc .wlc-tile .k { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.wlc .wlc-tile .v { font-size: 26px; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.wlc .wlc-tile .d { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.wlc .wlc-tile .d.bad { color: var(--st-critical); }
.wlc .wlc-tile .d.good { color: var(--good-text); }
.wlc .wlc-tile .wlc-tile__sub { margin-top: 10px; white-space: normal; }

/* ---------- funnel ---------- */
.wlc .funnel { display: grid; gap: 6px; }
.wlc .stage {
  display: grid; grid-template-columns: 218px 1fr 110px; gap: 14px;
  align-items: center; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 10px; padding: 10px 16px; cursor: pointer;
  color: inherit; font: inherit;
}
.wlc .stage:hover { background: var(--accent-wash); }
.wlc .stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wlc .stage[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.wlc .stage .nm { font-weight: 600; font-size: 14px; line-height: 1.3; }
.wlc .stage .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.wlc .stage .track { height: 14px; border-radius: 4px; background: transparent; position: relative; }
.wlc .stage .seg { position: absolute; top: 0; bottom: 0; border-radius: 4px; min-width: 2px; }
.wlc .stage .seg.ok { background: var(--s-ok); }
.wlc .stage .seg.fail { background: var(--s-fail); }
.wlc .stage .seg.vol { background: var(--s-vol); }
.wlc .stage .ct { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; font-size: 15px; }
.wlc .stage .ct small { display: block; font-weight: 500; color: var(--st-critical); font-size: 11.5px; }
.wlc .stage .ct small.quiet { color: var(--muted); }
.wlc .flag {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
  border: 1px solid var(--ring); border-radius: 99px; padding: 0 7px;
  color: var(--muted); vertical-align: 1px; margin-left: 6px;
}
.wlc .flag.alert { color: var(--st-critical); border-color: var(--st-critical); }

.wlc .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin: 10px 2px 0; }
.wlc .legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.wlc .legend .l-ok::before { background: var(--s-ok); }
.wlc .legend .l-fail::before { background: var(--s-fail); }
.wlc .legend .l-vol::before { background: var(--s-vol); }

/* ---------- detail panel ---------- */
.wlc .detail {
  margin-top: 14px; background: var(--surface);
  border: 1px solid var(--accent); border-radius: 12px; padding: 20px 22px;
}
.wlc .detail h3 { margin: 0 0 2px; font-size: 17px; font-weight: 700; }
.wlc .detail .win { color: var(--muted); font-size: 12.5px; }
.wlc .detail p.desc { color: var(--ink-2); font-size: 14px; max-width: 68ch; margin: 10px 0 14px; }
.wlc .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.wlc .chip {
  font-size: 12px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--ring); border-radius: 99px; padding: 3px 10px;
  color: var(--ink-2); background: var(--page);
}
.wlc .chip b { color: var(--ink); font-weight: 600; }
.wlc .chip.ok b { color: var(--s-ok); }
.wlc .chip.fail b { color: var(--s-fail); }

/* ---------- chart ---------- */
.wlc .chartbox { position: relative; }
.wlc .chartbox svg { display: block; width: 100%; height: auto; }
.wlc .tip {
  position: absolute; pointer-events: none; display: none;
  background: var(--ink); color: var(--page);
  border-radius: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.5;
  font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 5;
  transform: translate(-50%, -100%); margin-top: -10px;
}
.wlc .tip b { font-weight: 600; }
.wlc details.tbl { margin-top: 10px; font-size: 13px; }
.wlc details.tbl summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.wlc details.tbl summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- tables ---------- */
.wlc table { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 13px; }
.wlc th, .wlc td { text-align: right; padding: 5px 10px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
.wlc th:first-child, .wlc td:first-child { text-align: left; }
.wlc th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.wlc .tscroll { overflow-x: auto; }
.wlc .wlc-okfail { color: var(--muted); font-size: 11px; }

@media (max-width: 640px) {
  .wlc .stage { grid-template-columns: 1fr 84px; }
  .wlc .stage .track { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .wlc .stage { transition: background-color 0.15s ease; }
}

/* ────────────────────────────────────────────────────────────────────────
   Funnel v2 (card 86ajq0y6a) — the debtor spine + typed context cards + toggles.
   Formal `.wlc` vocabulary, theme-aware. NO emoji, no saturated mock tones. */
.wlc {
  --srv: #8a6d3b;          /* server/health — muted bronze */
  --srv-wash: rgba(138, 109, 59, 0.09);
  --engage: #4a3aa7;       /* engagement — muted indigo */
  --engage-wash: rgba(74, 58, 167, 0.08);
  --reject-wash: rgba(208, 59, 59, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .wlc {
    --srv: #c98500; --srv-wash: rgba(201, 133, 0, 0.13);
    --engage: #9085e9; --engage-wash: rgba(144, 133, 233, 0.13);
    --reject-wash: rgba(230, 103, 103, 0.13);
  }
}
:root[data-theme="dark"] .wlc {
  --srv: #c98500; --srv-wash: rgba(201, 133, 0, 0.13);
  --engage: #9085e9; --engage-wash: rgba(144, 133, 233, 0.13);
  --reject-wash: rgba(230, 103, 103, 0.13);
}

/* toggles */
.wlc .wlc-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0 6px; }
.wlc .wlc-controls__label { font-size: 12px; font-weight: 600; color: var(--muted); }
.wlc .wlc-seg { display: inline-flex; border: 1px solid var(--ring); border-radius: 9px; overflow: hidden; background: var(--surface); }
.wlc .wlc-seg__btn { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent; color: var(--ink-2); padding: 6px 12px; cursor: pointer; }
.wlc .wlc-seg__btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.wlc .wlc-seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wlc .wlc-hint { font-size: 12.5px; color: var(--muted); max-width: 44ch; }
.wlc .wlc-coverage { margin-top: 8px; font-size: 12.5px; color: var(--st-warn); }

/* card legend */
.wlc .wlc-cardlegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); margin: 8px 2px 0; }
.wlc .wlc-cardlegend b { color: var(--muted); font-weight: 700; }
.wlc .wlc-cardlegend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.wlc .wlc-cardlegend .l-server::before { background: var(--srv); }
.wlc .wlc-cardlegend .l-reject::before { background: var(--s-fail); }
.wlc .wlc-cardlegend .l-engage::before { background: var(--engage); }

/* v2 funnel rows */
.wlc .funnel--v2 { margin-top: 8px; }
.wlc .stage--v2 { display: block; border-left: 4px solid var(--accent); }
.wlc .stage--v2 .rowhead { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; }
.wlc .stage--v2 .nm { font-weight: 600; font-size: 14.5px; }
.wlc .stage--v2 .val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; white-space: nowrap; }
.wlc .stage--v2 .val .conv { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-left: 7px; }
.wlc .stage--v2 .bar { height: 15px; border-radius: 5px; background: var(--grid); overflow: hidden; margin-top: 8px; display: flex; position: relative; }
.wlc .stage--v2 .bar .seg { position: static; height: 100%; min-width: 2px; }
.wlc .stage--v2 .bar .seg + .seg { box-shadow: inset 2px 0 0 var(--surface); }
.wlc .stage--v2 .bar .seg.user { background: var(--s-vol); }
.wlc .stage--v2 .bar .seg.ok { background: var(--s-ok); }
.wlc .stage--v2 .bar .seg.bad { background: var(--s-fail); }
.wlc .stage--v2 .bar .seg.mut { background: var(--muted); }
.wlc .stage--v2 .breakdown { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 8px; }
.wlc .stage--v2 .breakdown .chip { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); border: 1px solid var(--ring); border-radius: 99px; padding: 2px 9px; background: var(--page); }
.wlc .stage--v2 .breakdown .chip b { color: var(--ink); font-weight: 600; }
.wlc .wlc-tag { font-size: 10.5px; color: var(--st-warn); border: 1px solid var(--st-warn); border-radius: 99px; padding: 0 7px; margin-left: 8px; }

/* typed context cards (scroll-x inside the row) */
.wlc .srv { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--ring); scrollbar-width: thin; }
.wlc .srv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wlc .srvcard { flex: 0 0 auto; border: 1px solid var(--ring); border-left-width: 3px; border-radius: 8px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.wlc .srvcard .sh { display: block; font-weight: 600; font-size: 11.5px; }
.wlc .srvcard .sv { display: block; font-variant-numeric: tabular-nums; margin-top: 2px; color: var(--ink-2); }
.wlc .srvcard .sv b { color: var(--ink); font-weight: 600; }
.wlc .srvcard .sv b.bad { color: var(--s-fail); }
.wlc .srvcard.t-server { background: var(--srv-wash); border-left-color: var(--srv); }
.wlc .srvcard.t-server .sh { color: var(--srv); }
.wlc .srvcard.t-reject { background: var(--reject-wash); border-left-color: var(--s-fail); }
.wlc .srvcard.t-reject .sh { color: var(--s-fail); }
.wlc .srvcard.t-engage { background: var(--engage-wash); border-left-color: var(--engage); }
.wlc .srvcard.t-engage .sh { color: var(--engage); }

/* Completa section bands */
.wlc tr.secband td { background: var(--accent-wash); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); font-weight: 700; padding: 8px 10px; }
/* ═════════════ The "ver tudo" of a history or approval line (the owner's extra of 10/10) ═════════════
 * A line the list cut (`.wl-xp-row`, histories/_row) keeps its look and gains the pointer, a hover tint and the ⤢
 * "ver tudo" button in its top-right corner (absolute: it never takes a cell of the line's grid). The second modal
 * (`.wl-xp`, built by wl_change_expand_controller.js; panel in whitelabel_portal/full_values/show) sits on top of the
 * first one: resizable by its corner within sane bounds, Maximizar fills the screen, and on a phone it is the whole
 * screen. Each side scrolls on both axes; JSON keeps its lines (`white-space: pre`), other text wraps. Loaded by the
 * Portal WL layout, so every page with a list has it. Tokens: the wizard's (`--hs-*`). */

.wl-xp-row { position: relative; cursor: pointer; padding-right: 76px; transition: background-color .12s ease; }
.wl-xp-row:hover { background: var(--hs-ink-050); }
.wl-xp-row__open {
  position: absolute; top: 6px; right: 8px; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--hs-ink-100); border-radius: 999px; background: var(--hs-white); padding: 2px 8px;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--hs-primary-400); cursor: pointer; white-space: nowrap;
}
.wl-xp-row__open::before { content: '⤢ ' attr(data-hint); }
.wl-xp-row:hover .wl-xp-row__open, .wl-xp-row__open:focus-visible {
  border-color: var(--hs-primary-200); box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.wl-xp-row__open:focus-visible { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }

.wl-xp {
  border: 0; padding: 0; margin: auto; width: min(1080px, 94vw); height: min(78vh, 720px);
  min-width: min(360px, 100vw); min-height: 260px; max-width: 98vw; max-height: 96vh;
  border-radius: 16px; box-shadow: 0 28px 72px rgba(0,0,0,.34); color: var(--hs-ink-800); font-family: var(--hs-font);
  overflow: hidden; resize: both;
}
.wl-xp[open] { display: flex; flex-direction: column; }
.wl-xp:focus, .wl-xp:focus-visible { outline: none; }
.wl-xp::backdrop { background: rgba(6,17,15,.55); backdrop-filter: blur(2px); }
.wl-xp.is-max {
  width: 100vw !important; height: 100vh !important; max-width: none; max-height: none; margin: 0; border-radius: 0;
  resize: none;
}
.wl-xp__frame { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wl-xp__loading {
  margin: auto; height: 28px; width: 28px; border-radius: 50%; border: 3px solid var(--hs-ink-100);
  border-top-color: var(--hs-primary-400); animation: wl-xp-spin .8s linear infinite;
}
@keyframes wl-xp-spin { to { transform: rotate(360deg); } }
.wl-xp__error { margin: auto; padding: 24px; font-size: 14px; color: var(--hs-negative-dark); text-align: center; }

.wl-xp__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wl-xp__head {
  display: flex; align-items: center; gap: 6px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--hs-ink-100);
}
.wl-xp__title { flex: 1; min-width: 0; }
.wl-xp__title small {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hs-ink-400);
}
.wl-xp__title b { display: block; font-size: 16px; color: var(--hs-ink-900); overflow-wrap: anywhere; }
.wl-xp__tool {
  display: grid; place-items: center; height: 34px; width: 34px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--hs-ink-500); font-size: 16px; cursor: pointer;
}
.wl-xp__tool:hover { background: var(--hs-ink-050); color: var(--hs-ink-900); }
.wl-xp__tool[aria-pressed="true"] { background: var(--hs-ink-050); color: var(--hs-primary-400); }

.wl-xp__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0;
  padding: 14px 16px 16px; background: var(--hs-ink-050);
}
.wl-xp__side {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 10px; background: var(--hs-white);
  box-shadow: inset 0 0 0 1px var(--hs-ink-100); overflow: hidden;
}
.wl-xp__side-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--hs-ink-100);
}
.wl-xp__side-head b { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wl-xp__side-head small { flex: 1; font-size: 12px; color: var(--hs-ink-400); }
.wl-xp__side--before .wl-xp__side-head { background: #FDF3F1; }
.wl-xp__side--before .wl-xp__side-head b { color: #9b2c1b; }
.wl-xp__side--after .wl-xp__side-head { background: #EFFAF3; }
.wl-xp__side--after .wl-xp__side-head b { color: #145c32; }
.wl-xp__pre {
  flex: 1; min-height: 0; margin: 0; padding: 12px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo,
  Consolas, monospace; font-size: 12.5px; line-height: 1.5; color: var(--hs-ink-800); tab-size: 2;
}
.wl-xp__pre--json { white-space: pre; }
.wl-xp__pre--text { white-space: pre-wrap; overflow-wrap: anywhere; }
.wl-xp__pre:focus-visible { outline: 2px solid var(--hs-primary-200); outline-offset: -2px; }
.wl-xp__blank { margin: 0; padding: 12px; font-size: 13px; color: var(--hs-ink-400); }
.wl-xp__capped {
  margin: 0; padding: 8px 12px; border-top: 1px solid #F5D27A; background: #FFF7E0; font-size: 12px; color: #6b4a00;
}

@media (max-width: 560px) {
  .wl-xp-row { padding-right: 12px; padding-top: 30px; }
  .wl-xp {
    width: 100vw; height: 100dvh; min-width: 0; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0;
    resize: none;
  }
  .wl-xp__body { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); padding: 10px; }
}
/* ─────────────────────────────────────────────────────────────
   Fila de aprovação (HSF-1043 U10, spec §7.8/§7.11) — the step's 🔔 pill and the request cards of the queue.
   1:1 with the approved prototypes (prototypes/admin-whitelabel-prototype/assets/change-requests.js: cr-pill--pend,
   cr-req; inicio.html: md-req, md-tabs, cr-stale), on the kit's tokens (whitelabel_wizard.css). The diff rows and the
   reason reuse the 🕘's (`wl-hist__diff`, `wl-hist__why`). Markup: whitelabel_portal/whitelabels/_pending_pill* and
   whitelabel_portal/change_requests/*.
   ───────────────────────────────────────────────────────────── */
.wl-pill--pending { background: #FFF7E0; border-color: #F5D27A; color: #6b4a00; }
.wl-pill--pending .wl-pill__n { background: #e5484d; color: var(--hs-white); }
.wl-pill--pending.is-hot svg { transform-origin: 50% 8%; animation: wl-crq-ring 2.6s ease-in-out infinite; }
.wl-pill--pending.is-hot::after {
  content: ''; position: absolute; inset: -1px; border-radius: 999px; animation: wl-crq-halo 2.6s ease-out infinite;
}
@keyframes wl-crq-ring {
  0%, 62%, 100% { transform: rotate(0); } 66% { transform: rotate(16deg); } 70% { transform: rotate(-14deg); }
  74% { transform: rotate(10deg); } 78% { transform: rotate(-8deg); } 86% { transform: rotate(0); }
}
@keyframes wl-crq-halo { 0%, 60% { box-shadow: 0 0 0 0 rgba(245,179,1,.5); } 100% { box-shadow: 0 0 0 9px rgba(245,179,1,0); } }
@media (prefers-reduced-motion: reduce) {
  .wl-pill--pending.is-hot svg, .wl-pill--pending.is-hot::after { animation: none; }
}

.wl-crq-tabs { margin-bottom: 14px; }
.wl-crq-tabs .wl-pagetab { text-decoration: none; }
.wl-crq-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--hs-ink-050); color: var(--hs-ink-700); font-size: 11.5px;
}
.wl-pagetab.is-active .wl-crq-count { background: rgba(255,255,255,.25); color: var(--hs-white); }
.wl-crq-empty { font-size: 13px; color: var(--hs-ink-400); padding: 12px 0; }
.wl-crq-notice { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.wl-crq-notice--success { background: #EAF8EF; box-shadow: inset 0 0 0 1px #A9DDBC; color: #145c32; }
.wl-crq-notice--danger { background: #FDF0EE; box-shadow: inset 0 0 0 1px #F3B9AF; color: #7a2416; }

.wl-crq { border: 1px solid var(--hs-ink-100); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: var(--hs-white); }
.wl-crq__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; color: var(--hs-ink-900); }
.wl-crq__title b { font-weight: 600; }
.wl-crq__meta { margin: 2px 0 0; font-size: 12px; color: var(--hs-ink-400); }
.wl-crq .wl-chip--muted { background: var(--hs-ink-050); color: var(--hs-ink-500); border-color: transparent; }
.wl-crq__stale {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: #FDF0EE; box-shadow: inset 0 0 0 1px #F3B9AF; color: #7a2416;
}
.wl-crq__stale strong { display: block; }
.wl-crq__quorum { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--hs-warning-dark); }
.wl-crq__label {
  margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hs-ink-400);
}
.wl-crq__hint { font-size: 13px; color: var(--hs-ink-500); }
.wl-crq__reveal {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--hs-ink-050);
  box-shadow: inset 0 0 0 1px var(--hs-ink-100); font-size: 13px;
}
.wl-crq__reveal--shown { background: #FFF7E0; box-shadow: inset 0 0 0 1px #F5D27A; color: #6b4a00; }
.wl-crq__reveal .wl-hint { margin-top: 0; }
.wl-crq__secret { margin-top: 8px; width: 100%; font-family: ui-monospace, Menlo, monospace; }
.wl-crq__foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed var(--hs-ink-100);
}
.wl-crq__foot .wl-hint { margin: 0 auto 0 0; }
.wl-crq__dialog {
  width: min(480px, calc(100vw - 32px)); padding: 18px; border: 0; border-radius: 14px; background: var(--hs-white);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
}
.wl-crq__dialog::backdrop { background: rgba(15, 23, 42, .45); }
.wl-crq__dialog-title { margin: 0; font-size: 16px; font-weight: 700; }
.wl-crq__dialog-foot { display: flex; justify-content: flex-end; gap: 8px; }
.wl-crq-pages { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; }
.wl-crq-pages .wl-hint { margin: 0; }
.wl-crq__reject-form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
@media (max-width: 560px) {
  .wl-crq__foot { flex-direction: column-reverse; align-items: stretch; }
  .wl-crq__foot .wl-btn { justify-content: center; min-height: 44px; }
}

/* ─────────────────────────────────────────────────────────────
   Pacote do wizard (HSF-1043 U22, spec §7.10, D51) — the bar and the "No pacote" pill of the step pages, the review
   page and the edits of a sent package. 1:1 with the approved prototype (prototypes/admin-whitelabel-prototype/
   assets/change-package.js: pkg-bar, pkg-pill, pkg-sec, pkg-item, pkg-why, pkg-err, pkg-foot, pkg-keys), on the
   kit's tokens (whitelabel_wizard.css). The banners reuse the requester kit's (`wl-cr-banner--*`), the diff rows the
   🕘's (`wl-hist__diff`). Markup: whitelabel_portal/whitelabels/_change_package_* , whitelabels/change_packages/*,
   change_requests/_package_*. Loaded with the queue's styles (this file).
   ───────────────────────────────────────────────────────────── */
.wl-pkg-ico { height: 15px; width: 15px; flex: none; }

.wl-pkg-bar {
  position: fixed; right: 16px; bottom: 16px; z-index: 69; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--hs-ink-900, #121918); color: var(--hs-white);
  font-family: var(--hs-font); font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.wl-pkg-bar .wl-pkg-ico { height: 17px; width: 17px; color: #00E0CA; }
.wl-pkg-bar a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--hs-primary-200); color: var(--hs-white); text-decoration: none; font-size: 13px;
}
@media (max-width: 560px) { .wl-pkg-bar { left: 16px; bottom: 64px; justify-content: space-between; } }

a.wl-pkg-pill { text-decoration: none; background: #EAFBF8; border-color: rgba(0,163,147,.35); color: #064a42; }

.wl-pkg-sec {
  display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--hs-ink-400);
}
.wl-pkg-item {
  background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 10px; box-shadow: var(--hs-shadow-sm);
}
.wl-pkg-item.is-out { background: var(--hs-ink-050); box-shadow: none; }
.wl-pkg-item.is-bad { border-color: #F3B9AF; }
.wl-pkg-item__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-pkg-item__n {
  flex: none; height: 24px; width: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hs-ink-050); font-size: 12px; font-weight: 700; color: var(--hs-ink-600);
}
.wl-pkg-item__t { margin-right: auto; min-width: 0; }
.wl-pkg-item__t b { display: block; font-size: 15px; font-weight: 600; color: var(--hs-ink-900); }
.wl-pkg-item__t small { font-size: 12px; color: var(--hs-ink-400); }
.wl-pkg-item__acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wl-pkg-item .wl-chip--muted { background: var(--hs-ink-050); color: var(--hs-ink-500); border-color: transparent; }
.wl-pkg-diff { margin-top: 10px; border-top: 1px dashed var(--hs-ink-100); padding-top: 4px; }
.wl-pkg-why { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--hs-ink-600); }
.wl-pkg-err { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #FDF0EE; color: #7a2416; font-size: 13px; }
.wl-pkg-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.wl-pkg-foot {
  margin-top: 18px; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: 14px;
  padding: 16px; box-shadow: var(--hs-shadow-sm);
}
.wl-pkg-req { color: #c0392b; }
.wl-pkg-foot__acts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 560px) {
  .wl-pkg-foot__acts { flex-direction: column-reverse; align-items: stretch; }
  .wl-pkg-foot__acts .wl-btn { width: 100%; min-height: 44px; justify-content: center; }
}
.wl-cn-kind { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.wl-cn-kind--external { color: var(--hs-ink-600); background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); }
.wl-cn-kind--internal { color: var(--hs-primary-400); background: rgba(0,163,147,0.08); border: 1px solid rgba(0,163,147,0.25); }
.wl-cn-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; max-width: 760px; }
.wl-cn-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.wl-cn-tag--active { color: var(--hs-positive-dark); background: var(--hs-positive-soft); }
.wl-cn-tag--off { color: var(--hs-warning-dark); background: var(--hs-warning-soft); }
.wl-cn-tag--soon { color: var(--hs-ink-500); background: var(--hs-ink-050); border: 1px dashed var(--hs-ink-200); }
.wl-cn-tag--informative, .wl-cn-tag--role { color: var(--hs-ink-600); background: #fff; border: 1px solid var(--hs-ink-100); }
.wl-cn-states { display: grid; grid-template-columns: minmax(230px, 280px) 1fr; border: 1px solid var(--hs-ink-100); border-radius: 12px; overflow: hidden; background: #fff; }
.wl-cn-states__nav { background: var(--hs-ink-050); border-right: 1px solid var(--hs-ink-100); padding: 10px 0; }
.wl-cn-state { width: 100%; text-align: left; display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 0; border-left: 3px solid transparent; background: transparent; cursor: pointer; font: inherit; }
.wl-cn-state:hover { background: #fff; }
.wl-cn-state:focus-visible { outline: 2px solid var(--hs-primary-200); outline-offset: -2px; }
.wl-cn-state.is-selected { background: #fff; border-left-color: var(--hs-primary-200); }
.wl-cn-state__n { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--hs-ink-500); border: 1.5px solid var(--hs-ink-200); background: #fff; }
.wl-cn-state.is-selected .wl-cn-state__n { color: #fff; background: var(--hs-primary-200); border-color: var(--hs-primary-200); }
.wl-cn-state__t { display: block; font-size: 14px; font-weight: 600; color: var(--hs-ink-900); }
.wl-cn-state__d { display: block; font-size: 12px; color: var(--hs-ink-500); margin-top: 2px; }
.wl-cn-pane { padding: 20px 22px; min-width: 0; }
.wl-cn-pane__title { font-size: 18px; font-weight: 700; color: var(--hs-ink-900); }
.wl-cn-pane__lead { font-size: 13.5px; color: var(--hs-ink-500); margin-top: 4px; max-width: 700px; }
.wl-cn-note { margin-top: 10px; font-size: 12.5px; color: var(--hs-ink-600); background: var(--hs-ink-050); border-radius: 8px; padding: 9px 12px; }
.wl-cn-addbar { margin-top: 14px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--hs-ink-100); border-radius: 10px; background: #fff; }
.wl-cn-addbar .wl-field { margin: 0; min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.wl-cn-addbar__hint { font-size: 12.5px; color: var(--hs-ink-500); align-self: center; }
.wl-cn-el { border: 1px solid var(--hs-ink-100); border-radius: 10px; margin-top: 14px; overflow: hidden; }
.wl-cn-el.is-soon { border-style: dashed; }
.wl-cn-el__h { width: 100%; text-align: left; font: inherit; border: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; background: #fff; cursor: pointer; }
.wl-cn-el__h:hover { background: var(--hs-ink-050); }
.wl-cn-el__h:focus-visible { outline: 2px solid var(--hs-primary-200); outline-offset: -2px; }
.wl-cn-el__t { font-size: 14.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-cn-el__dir { font-size: 12px; font-weight: 600; color: var(--hs-ink-500); white-space: nowrap; }
.wl-cn-el__chev { margin-left: auto; color: var(--hs-ink-500); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.wl-cn-el__chev svg { width: 16px; height: 16px; transition: transform .18s ease-out; }
.wl-cn-el__h[aria-expanded="true"] .wl-cn-el__chev svg { transform: rotate(180deg); }
.wl-cn-el__b { border-top: 1px solid var(--hs-ink-100); padding: 14px; background: #fcfcfd; }
.wl-cn-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hs-ink-500); margin: 16px 0 8px; }
.wl-cn-code { font-size: 12.5px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 6px; padding: 3px 8px; color: var(--hs-ink-800); font-family: ui-monospace, Menlo, monospace; }
.wl-cn-mech { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-cn-mech span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; border: 1px solid var(--hs-ink-100); border-radius: 8px; padding: 7px 12px; background: #fff; color: var(--hs-ink-500); }
.wl-cn-mech span.is-current { border-color: var(--hs-primary-200); box-shadow: 0 0 0 1px var(--hs-primary-200) inset; color: var(--hs-ink-900); font-weight: 600; }
.wl-cn-mech small { font-weight: 500; color: var(--hs-ink-500); }
.wl-cn-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1100px) { .wl-cn-flow { grid-template-columns: minmax(0, 1fr); } }
.wl-cn-box { border: 1px solid var(--hs-ink-100); border-radius: 8px; overflow: hidden; background: #fff; }
.wl-cn-box__h { font-size: 12px; font-weight: 700; color: var(--hs-ink-600); background: var(--hs-ink-050); border-bottom: 1px solid var(--hs-ink-100); padding: 7px 12px; }
.wl-cn-box pre { margin: 0; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--hs-ink-800); overflow-x: auto; max-height: 300px; }
.wl-cn-soonbar { margin-bottom: 12px; border: 1px dashed var(--hs-ink-200); background: var(--hs-ink-050); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--hs-ink-600); }
.wl-cn-actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wl-cn-reasons { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--hs-ink-700); }
.wl-cn-format { margin-top: 16px; }
.wl-cn-format__verdict { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.wl-cn-format__verdict-badge { display: inline-flex; border-radius: 999px; padding: 3px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.wl-cn-format__verdict-badge--ready { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-cn-format__verdict-badge--blocked { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-cn-format__verdict-text { color: var(--hs-ink-500); font-size: 12px; }
.wl-cn-format__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hs-ink-100); }
.wl-cn-format__tab { border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; background: transparent; color: var(--hs-ink-500); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wl-cn-format__tab.is-selected { border-bottom-color: var(--hs-primary-200); color: var(--hs-ink-900); }
.wl-cn-format__tab:focus-visible { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.wl-cn-format__panel { padding-top: 4px; }
.wl-cn-format__modes { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--hs-ink-100); border-radius: 8px; background: var(--hs-ink-050); }
.wl-cn-format__mode { padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--hs-ink-500); font: inherit; font-size: 12.5px; cursor: pointer; }
.wl-cn-format__mode:focus-visible { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.wl-cn-format__modes .is-selected { background: #fff; color: var(--hs-ink-900); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); font-weight: 600; }
.wl-cn-format__mode-panel { margin-top: 14px; }
.wl-cn-format__editor { display: grid; gap: 12px; margin-top: 16px; }
.wl-cn-format__editor-heading, .wl-cn-format__preview-heading { display: flex; align-items: flex-start; gap: 12px; }
.wl-cn-format__preview-heading { margin-top: 18px; }
.wl-cn-format__editor-title { margin: 0 0 4px; color: var(--hs-ink-900); font-size: 15px; font-weight: 700; }
.wl-cn-format__editor-section { border: 1px solid var(--hs-ink-100); border-radius: 10px; background: #fff; }
.wl-cn-format__editor-section > summary { padding: 11px 13px; color: var(--hs-ink-800); font-size: 13px; font-weight: 700; cursor: pointer; }
.wl-cn-format__editor-section[open] > summary { border-bottom: 1px solid var(--hs-ink-100); }
.wl-cn-format__path-input { box-sizing: border-box; min-width: 160px; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.wl-cn-format__pairs { display: grid; gap: 6px; min-width: 220px; }
.wl-cn-format__pairs label { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(100px, 1fr); gap: 6px; align-items: center; }
.wl-cn-format__pairs span { overflow-wrap: anywhere; color: var(--hs-ink-600); font-size: 11px; }
.wl-cn-format__pairs .wl-input { box-sizing: border-box; min-width: 0; width: 100%; }
.wl-cn-format__table-wrap { overflow-x: auto; }
.wl-cn-format__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wl-cn-format__table th, .wl-cn-format__table td { padding: 9px 10px; border-bottom: 1px solid var(--hs-ink-100); text-align: left; vertical-align: middle; }
.wl-cn-format__table thead th { color: var(--hs-ink-500); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.wl-cn-format__table tbody th { color: var(--hs-ink-800); font-weight: 600; }
.wl-cn-format__table code { color: var(--hs-ink-700); font-size: 12px; overflow-wrap: anywhere; }
.wl-cn-format__group { background: var(--hs-ink-050); }
.wl-cn-format__group th { color: var(--hs-ink-900); }
.wl-cn-format__protection { display: inline-flex; border-radius: 999px; padding: 2px 7px; background: var(--hs-ink-050); color: var(--hs-ink-600); font-size: 11px; font-weight: 600; }
.wl-cn-format__add { display: flex; justify-content: flex-end; gap: 8px; align-items: center; padding: 12px; background: var(--hs-ink-050); }
.wl-cn-format__add .wl-select { min-width: min(100%, 280px); }
.wl-cn-format__remove { min-width: 34px; padding: 5px 9px; }
.wl-cn-format__preview { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 18px; }
.wl-cn-format__preview-box { min-width: 0; border: 1px solid var(--hs-ink-100); border-radius: 8px; overflow: hidden; background: #fff; }
.wl-cn-format__preview-title { padding: 7px 10px; border-bottom: 1px solid var(--hs-ink-100); background: var(--hs-ink-050); color: var(--hs-ink-600); font-size: 11.5px; font-weight: 700; }
.wl-cn-format__preview-box pre { max-height: 300px; margin: 0; padding: 10px; overflow: auto; color: var(--hs-ink-800); font-size: 11.5px; line-height: 1.5; }
.wl-cn-format__preview-arrow { color: var(--hs-primary-300); font-size: 20px; font-weight: 700; }
@media (max-width: 720px) {
  .wl-cn-format__table-wrap { overflow: visible; }
  .wl-cn-format__path-input { min-width: 0; }
  .wl-cn-format__pairs { min-width: 0; }
  .wl-cn-format__add { align-items: stretch; flex-direction: column; }
  .wl-cn-format__table, .wl-cn-format__table tbody { display: block; }
  .wl-cn-format__table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .wl-cn-format__table tbody { display: grid; gap: 10px; }
  .wl-cn-format__table tbody tr { display: grid; border: 1px solid var(--hs-ink-100); border-radius: 8px; overflow: hidden; background: #fff; }
  .wl-cn-format__table tbody th, .wl-cn-format__table tbody td { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 8px; border: 0; border-bottom: 1px solid var(--hs-ink-100); }
  .wl-cn-format__table tbody th { overflow-wrap: anywhere; }
  .wl-cn-format__table tbody tr > :last-child { border-bottom: 0; }
  .wl-cn-format__table [data-label]::before { content: attr(data-label); color: var(--hs-ink-500); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
  .wl-cn-format__preview { grid-template-columns: 1fr; }
  .wl-cn-format__preview-arrow { justify-self: center; transform: rotate(90deg); }
}

.wl-cn-conn__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-cn-conn__edit { margin-left: auto; }
.wl-cn-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wl-cn-conn { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; color: var(--hs-ink-600); }
.wl-cn-conn code { font-size: 12.5px; overflow-wrap: anywhere; }
.wl-cn-test { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.wl-cn-test [data-test="gateway-probe"] { margin-bottom: 0 !important; }
.wl-cn-tbl-wrap { overflow-x: auto; max-width: 620px; }
.wl-cn-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.wl-cn-tbl th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--hs-ink-100); }
.wl-cn-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--hs-ink-100); vertical-align: middle; }
.wl-cn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin-top: 12px; max-width: 620px; font-size: 13px; }
.wl-cn-facts > div { display: flex; flex-direction: column; gap: 4px; }
.wl-cn-format__bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wl-cn-format__bar > :first-child { flex: 1; min-width: 0; }
.wl-cn-format__hint { margin: 0 0 8px; }
.wl-cn-format__edit { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.wl-cn-format[data-editing] .wl-cn-format__tabs { border-bottom-color: var(--hs-primary-200); }
.wl-cn-format__current { margin: 2px 0 12px; color: var(--hs-ink-900); font-size: 13px; font-weight: 600; }
.wl-cn-format__editing { margin-top: 18px; }
.wl-cn-format__footer { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--hs-ink-100); background: #fff; }
.wl-cn-format__footer .wl-spacer { flex: 1; color: var(--hs-ink-500); font-size: 12.5px; }
@media (max-width: 640px) {
  .wl-cn-format__bar { flex-wrap: wrap; }
  .wl-cn-format__footer { flex-wrap: wrap; }
  .wl-cn-format__footer .wl-spacer { flex-basis: 100%; }
}
.wl-cn-format__editor { grid-template-columns: minmax(0, 1fr); }
.wl-cn-format__editor-section, .wl-cn-format__panel, .wl-cn-format__mode-panel { min-width: 0; }
.wl-cn-format__editor .wl-cn-format__table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.wl-cn-format__editor .wl-cn-format__table { min-width: 880px; }
.wl-cn-format__editor .wl-cn-format__table th:nth-child(2) .wl-select { min-width: 200px; }
.wl-cn-format__editor .wl-cn-format__table td:nth-child(3) .wl-select { min-width: 170px; }
.wl-cn-format__async { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px); gap: 12px 16px; align-items: end; margin: 6px 0 18px; }
.wl-cn-format__async .wl-field { margin: 0; }
.wl-cn-format__async-help { grid-column: 1 / -1; margin: 0; }
.wl-cn-format__proof [data-test^="connect-format-proof-trail"] { margin-bottom: 16px; }
.wl-cn-format__proof [data-test^="connect-format-proof-trail"] h4 { margin: 0 0 8px; color: var(--hs-ink-900); font-size: 13px; font-weight: 700; }
.wl-cn-format__proof [data-test^="connect-format-proof-trail"] ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wl-cn-format__proof [data-proof-step] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--hs-ink-050); color: var(--hs-ink-600); font-size: 12px; font-weight: 600; }
.wl-cn-format__proof [data-proof-step] > span { display: none; }
.wl-cn-format__proof [data-proof-step][data-state="ok"], .wl-cn-format__proof [data-proof-step][data-state="passed"] { background: #E3F7EC; color: #066E37; }
.wl-cn-format__proof [data-proof-step][data-state="failed"], .wl-cn-format__proof [data-proof-step][data-state="error"] { background: #FBE4E0; color: #871E0E; }
.wl-cn-format__proof > label, .wl-cn-format__proof label[for^="connect-format-scenario"] { display: block; margin: 0 0 6px; color: var(--hs-ink-700); font-size: 12px; font-weight: 600; }
.wl-cn-format__proof select[id^="connect-format-scenario"] { min-width: 240px; height: 40px; padding: 0 10px; border: 1px solid var(--hs-ink-200); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.wl-cn-format__proof textarea[id^="connect-format-example"] { box-sizing: border-box; width: 100%; min-height: 140px; padding: 10px; border: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; resize: vertical; }
.wl-cn-format__proof p[role="status"] { margin: 10px 0; color: var(--hs-ink-700); font-size: 13px; font-weight: 600; }
@media (max-width: 640px) { .wl-cn-format__async { grid-template-columns: minmax(0, 1fr); } }
.wl-cn-states { grid-template-columns: minmax(200px, 232px) minmax(0, 1fr); font-size: 13px; }
/* HSF-2642: the stack below 900 px comes after the denser columns above, or they win the cascade and a phone keeps the
   232 px state list beside a pane squeezed to ~140 px. Below 640 px the add field takes its own line: its 260 px floor
   is wider than the add bar there, and pushed «Adicionar» out of the card. Same breakpoints as the prototype. */
@media (max-width: 900px) { .wl-cn-states { grid-template-columns: minmax(0, 1fr); } .wl-cn-states__nav { border-right: 0; border-bottom: 1px solid var(--hs-ink-100); } }
@media (max-width: 640px) { .wl-cn-addbar .wl-field { min-width: 0; flex-basis: 100%; max-width: none; } }
.wl-cn-states .wl-cn-pane { padding: 16px 18px; }
.wl-cn-states .wl-cn-pane__title { font-size: 17px; }
.wl-cn-states .wl-cn-pane__lead, .wl-cn-states .wl-cn-note { font-size: 12.5px; }
.wl-cn-states .wl-cn-el__h { padding: 10px 12px; gap: 8px; }
.wl-cn-states .wl-cn-el__t { font-size: 14px; }
.wl-cn-states .wl-cn-el__b { padding: 12px; }
.wl-cn-states .wl-cn-sub { margin: 12px 0 6px; font-size: 11px; }
.wl-cn-states .wl-label { margin-bottom: 4px; font-size: 12px; }
.wl-cn-states .wl-hint { font-size: 11.5px; }
.wl-cn-states .wl-input, .wl-cn-states .wl-select { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.wl-cn-states .wl-select { padding-right: 32px; background-position: right 8px center; background-size: 16px; }
.wl-cn-states .wl-btn { padding: 7px 12px; font-size: 13px; }
.wl-cn-states .wl-btn svg { width: 14px; height: 14px; }
.wl-cn-states .wl-cn-format__tab { padding: 7px 12px; font-size: 12.5px; }
.wl-cn-states .wl-cn-format__mode { padding: 4px 9px; font-size: 12px; }
.wl-cn-states .wl-cn-format__table { font-size: 12px; }
.wl-cn-states .wl-cn-format__table th, .wl-cn-states .wl-cn-format__table td { padding: 7px 8px; }
.wl-cn-states .wl-cn-format__table thead th { font-size: 10.5px; }
.wl-cn-states .wl-cn-format__path-input { min-width: 140px; font-size: 11.5px; }
.wl-cn-states .wl-cn-format__editor .wl-cn-format__table { min-width: 800px; }
.wl-cn-states .wl-cn-format__editor .wl-cn-format__table th:nth-child(2) .wl-select { min-width: 180px; }
.wl-cn-states .wl-cn-format__editor .wl-cn-format__table td:nth-child(3) .wl-select { min-width: 150px; }
.wl-cn-states .wl-cn-format__editor-section > summary { padding: 9px 12px; font-size: 12.5px; }
.wl-cn-states .wl-cn-format__editor-title { font-size: 14px; }
.wl-cn-states .wl-cn-format__current { font-size: 12.5px; margin-bottom: 10px; }
.wl-cn-states pre { font-size: 11.5px; }
.wl-cn-format__add .wl-select { flex: 1 1 auto; min-width: 0; max-width: 320px; }
.wl-cn-format__add .wl-btn { flex: none; }

/* ── wl-cn-notices: Avisos do parceiro (D95) ── */
.wl-cn-notices__users { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; align-items: center; font-size: 13.5px; color: var(--hs-ink-500); }
.wl-cn-card + .wl-cn-card { margin-top: 16px; }
.wl-cn-notices__state { margin-left: auto; }
.wl-cn-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--hs-ink-500); }
.wl-cn-status b { color: var(--hs-ink-800); font-weight: 600; }
.wl-cn-part { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hs-ink-100); }
.wl-cn-part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.wl-cn-part__t { font-size: 15px; font-weight: 600; color: var(--hs-ink-900); margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-cn-part__d { font-size: 13.5px; color: var(--hs-ink-500); margin: 0 0 12px; line-height: 1.5; max-width: 70ch; }
.wl-cn-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.wl-cn-val { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; color: var(--hs-ink-900); background: var(--hs-ink-050);
  border: 1px solid var(--hs-ink-100); border-radius: 6px; padding: 6px 10px; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.wl-cn-val--mask { letter-spacing: .18em; }
.wl-cn-btnrow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.wl-cn-secret { margin-top: 12px; border: 1px solid var(--hs-positive-medium); background: var(--hs-positive-soft); border-radius: var(--hs-radius-md); padding: 12px 14px; }
.wl-cn-secret__h { font-size: 13.5px; font-weight: 600; color: var(--hs-positive-dark); margin: 0; }
.wl-cn-secret .wl-cn-val { background: #fff; border-color: var(--hs-positive-medium); }
.wl-cn-secret__w { font-size: 12px; color: var(--hs-positive-dark); margin: 8px 0 0; line-height: 1.45; }
.wl-cn-gate { margin-top: 10px; }
.wl-cn-gate a { font-weight: 600; text-decoration: underline; color: inherit; }

/* Passo 1: exemplo + árvore */
.wl-cn-ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .wl-cn-ex { grid-template-columns: minmax(0, 1fr); } }
.wl-cn-ex textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12px; min-height: 230px; }
.wl-cn-ex__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wl-cn-tree { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: var(--hs-ink-050); padding: 10px 12px;
  min-height: 230px; max-height: 340px; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.9; }
.wl-cn-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px dashed var(--hs-ink-200); }
.wl-cn-tree > ul { padding-left: 0; border-left: 0; }
.wl-cn-tree__k { color: var(--hs-ink-500); }
.wl-cn-leaf { font: inherit; cursor: pointer; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 0 6px; color: var(--hs-ink-700); max-width: 100%; overflow-wrap: anywhere; }
.wl-cn-leaf:hover, .wl-cn-leaf:focus-visible { background: #fff; border-color: var(--hs-primary-200); outline: none; }
.wl-cn-leaf b { color: var(--hs-primary-400); font-weight: 600; }
.wl-cn-leaf.is-used { background: #fff; border-color: var(--hs-primary-200); }
.wl-cn-tree__empty { font-family: var(--hs-font); font-size: 13.5px; color: var(--hs-ink-500); }
.wl-cn-pick { font-size: 12px; color: var(--hs-primary-400); font-weight: 600; margin: 0 0 6px; min-height: 18px; }

/* Passo 2: a lista única (grade que vira cartão no estreito) */
.wl-cn-list { container: wl-cn-list / inline-size; }
.wl-cn-group { margin-top: 14px; border: 1px solid var(--hs-ink-100); border-radius: 10px; background: #fff; overflow: hidden; }
.wl-cn-group:first-child { margin-top: 0; }
.wl-cn-group__h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--hs-ink-050); border-bottom: 1px solid var(--hs-ink-100);
  font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-cn-group__why { font-size: 12px; font-weight: 400; color: var(--hs-ink-500); }
.wl-cn-group.is-off .wl-cn-group__h { color: var(--hs-ink-400); }
.wl-cn-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 14px; border-top: 1px solid var(--hs-ink-050); }
.wl-cn-row:first-of-type { border-top: 0; }
.wl-cn-row.is-active { box-shadow: inset 3px 0 0 var(--hs-primary-200); background: rgba(0,163,147,0.04); }
.wl-cn-row__name { font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-cn-row__help { display: block; font-size: 12px; font-weight: 400; color: var(--hs-ink-500); margin-top: 2px; line-height: 1.45; }
.wl-cn-row .wl-input { font-family: ui-monospace, Menlo, monospace; font-size: 12px; height: 34px; }
.wl-cn-row__lbl { display: block; font-size: 12px; font-weight: 600; color: var(--hs-ink-400); margin-bottom: 2px; }
.wl-cn-found { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--hs-ink-600); min-width: 0; padding-top: 2px; }
.wl-cn-found code { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.wl-cn-mark { flex: none; display: inline-grid; place-items: center; height: 18px; width: 18px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--hs-ink-050); color: var(--hs-ink-400); }
.wl-cn-mark.is-ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-cn-mark.is-bad { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-cn-req { font-size: 12px; font-weight: 600; color: var(--hs-ink-400); margin-left: 4px; }
.wl-cn-row__wide { grid-column: 2 / -1; }
.wl-cn-types { display: grid; gap: 6px; margin-top: 6px; }
.wl-cn-types label { display: grid; grid-template-columns: minmax(0, 260px) auto minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--hs-ink-600); }
.wl-cn-types .wl-input { height: 30px; }
/* grupo não usado: mesma estrutura, linhas apagadas e campos travados (D55) */
.wl-cn-group.is-off .wl-cn-row { opacity: .55; }
.wl-cn-group.is-off .wl-cn-row .wl-input { background: var(--hs-ink-050); cursor: not-allowed; }
@container wl-cn-list (max-width: 640px) {
  .wl-cn-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wl-cn-found { padding-top: 0; }
  .wl-cn-row__wide { grid-column: 1 / -1; }
  .wl-cn-types label { grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; }
  .wl-cn-types .wl-input { grid-column: 1 / -1; }
}

/* Passo 3: a prova */
.wl-cn-proof { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 11px 14px; border-radius: var(--hs-radius-md); font-size: 13.5px; font-weight: 600; }
.wl-cn-proof.is-ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-cn-proof.is-bad { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-cn-proof.is-idle { background: var(--hs-ink-050); color: var(--hs-ink-600); border: 1px dashed var(--hs-ink-200); }
.wl-cn-proof span { font-weight: 400; }

/* a prova por tipo de aviso */
.wl-cn-proofs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.wl-cn-proofs li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--hs-ink-600); }
.wl-cn-proofs li b { color: var(--hs-ink-900); font-weight: 600; }

/* tela de avisos: o que o protótipo não tinha */
.wl-cn-notices { min-width: 0; }
.wl-cn-notices [hidden] { display: none !important; }
.wl-cn-notices [tabindex="-1"]:focus { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.wl-cn-notices .wl-cn-card { min-width: 0; }
.wl-cn-copy-status { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--hs-primary-400); }
.wl-cn-copy-status:empty { display: none; }
.wl-cn-proof:empty { display: none; }
.wl-cn-proof.is-ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-cn-proof.is-bad { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-cn-proof.is-idle { background: var(--hs-ink-050); color: var(--hs-ink-600); border: 1px dashed var(--hs-ink-200); }
.wl-cn-proof { margin-top: 12px; padding: 11px 14px; border-radius: var(--hs-radius-md); font-size: 13.5px; font-weight: 600; }
.wl-cn-leaf.is-used { background: #fff; border-color: var(--hs-primary-200); }
.wl-cn-row input[aria-invalid="true"] { border-color: var(--hs-warning-dark); }
.wl-cn-confirm { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hs-ink-100); }
.wl-cn-proofs li.is-ok { color: var(--hs-ink-800); }
.wl-cn-types input[type="hidden"] { display: none; }
@media (max-width: 640px) { .wl-cn-ex { grid-template-columns: minmax(0, 1fr); } .wl-cn-notices .wl-card__header { flex-wrap: wrap; } }
/* "Criar WL" (HSF-1615) — only what the wizard's `wl-*` kit does not have: the two-column page, the platform tiles. */
.wl-new { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) { .wl-new { grid-template-columns: minmax(0, 1fr) 320px; } }
.wl-new__identity { display: grid; gap: 16px; }
@media (min-width: 640px) { .wl-new__identity { grid-template-columns: 2fr 1fr; } }
.wl-new__group + .wl-new__group { margin-top: 20px; }
.wl-new__group-title { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hs-ink-500); }
.wl-new__tiles { display: grid; gap: 10px; }
@media (min-width: 640px) { .wl-new__tiles { grid-template-columns: 1fr 1fr; } }
.wl-new__tile { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--hs-ink-100); border-radius: 10px; background: var(--hs-white); cursor: pointer; }
.wl-new__tile.is-picked { border-color: var(--hs-primary-200); background: rgba(0, 164, 150, 0.06); box-shadow: 0 0 0 1px var(--hs-primary-200); }
.wl-new__tile.is-off { opacity: .45; cursor: not-allowed; }
.wl-new__tile small { display: block; font-size: 12px; color: var(--hs-ink-500); }
.wl-new__id { font-size: 12px; color: var(--hs-ink-400); }
.wl-new__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.wl-new__buttons { display: inline-flex; gap: 8px; }
.wl-new__steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; }
/* HSF-326 Escada (U5b) — Prévia por regra do Escalonamento: um cartão por regra + o Senão, as mesmas 6 linhas
   alinhadas entre cartões por subgrid (meta, QUANDO, máximo, 6 linhas, trilha = 10 linhas da grade). */
.wl-pvc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: stretch; }
.wl-pvc__card { display: grid; grid-row: span 10; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: var(--hs-white); padding: 10px 12px; }
.wl-pvc__card--own { border-top: 3px solid var(--hs-primary-200); }
.wl-pvc__card--fallback { background: var(--hs-ink-050); border-style: dashed; }
.wl-pvc__card--never { opacity: .6; }
.wl-pvc__meta { font-size: 11px; color: var(--hs-ink-400); margin-bottom: 2px; }
.wl-pvc__never { color: var(--hs-negative-dark); font-weight: 600; }
.wl-pvc__when { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 4px 5px; margin-bottom: 4px; }
.wl-pvc__kw { flex-basis: 100%; font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--hs-ink-400); }
.wl-pvc__join { flex-basis: 100%; font-size: 12px; line-height: 1; color: var(--hs-ink-400); }
.wl-pvc__card--fallback .wl-pvc__join { flex-basis: auto; }
.wl-pvc__chip { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--hs-ink-100); border-radius: 6px; overflow: hidden; font-size: 12px; line-height: 1.3; }
.wl-pvc__chip-axis { background: var(--hs-ink-050); color: var(--hs-ink-500); padding: 2px 7px; border-bottom: 1px solid var(--hs-ink-100); }
.wl-pvc__chip-key { font-weight: 600; color: var(--hs-ink-800); background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.wl-pvc__chip-val { background: var(--hs-white); color: var(--hs-ink-900); font-weight: 600; padding: 3px 8px; overflow-wrap: anywhere; }
.wl-pvc__max { font-size: 11.5px; color: var(--hs-ink-500); margin: 0 0 6px; }
.wl-pvc__trail { margin-top: 6px; }
.wl-pvp { display: contents; }
.wl-pvp__row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; align-items: start; padding: 2px 0; font-size: 12.5px; }
.wl-pvp__row:first-child { border-top: 1px solid var(--hs-ink-100); padding-top: 6px; }
.wl-pvp__row:last-child { border-bottom: 1px solid var(--hs-ink-100); padding-bottom: 6px; margin-bottom: 4px; }
.wl-pvp__row dt { color: var(--hs-ink-400); font-size: 11.5px; }
.wl-pvp__row dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.wl-pvp__v { color: var(--hs-ink-900); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wl-pvp__note { color: var(--hs-ink-500); font-weight: 400; font-size: 11.5px; }
.wl-pvp__src { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1.5; padding: 0 7px; border-radius: 999px; border: 1px solid var(--hs-ink-100); background: var(--hs-ink-050); color: var(--hs-ink-500); white-space: nowrap; }
.wl-pvp__src--policy { background: var(--hs-info-soft); border-color: var(--hs-info-soft); color: var(--hs-info-dark); }
.wl-pvp__src--own { background: rgba(0, 163, 147, .09); border-color: var(--hs-primary-200); color: var(--hs-primary-400); }
.wl-pvp__src--na { background: transparent; border-style: dashed; color: var(--hs-ink-300); }
.wl-pvp__row.is-na .wl-pvp__v { color: var(--hs-ink-300); }
.wl-pvt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; padding: 4px 0; border-top: 1px dashed var(--hs-ink-100); }
.wl-pvt:first-child { border-top: 0; }
.wl-pvt__n { flex: none; width: 22px; font-size: 11px; font-weight: 700; color: var(--hs-ink-400); }
.wl-pvt__v { flex: none; font-weight: 600; color: var(--hs-ink-900); font-variant-numeric: tabular-nums; }
.wl-pvt__l { flex: 1; min-width: 0; color: var(--hs-ink-500); font-size: 12px; }
.wl-pvt__line { flex-basis: 100%; padding-left: 30px; font-size: 11px; color: var(--hs-ink-400); }
.wl-pvc__empty { border: 1px dashed var(--hs-ink-100); border-radius: var(--hs-radius-md); background: var(--hs-ink-050); padding: 10px 12px; font-size: 13px; color: var(--hs-ink-800); }
@media (max-width: 720px) { .wl-pvc__card { grid-row: auto; display: block; } }
/* ─────────────────────────────────────────────────────────────
   Visão geral — the Portal WL home (HSF-1043 U12, spec §8).
   1:1 with the approved prototype `inicio.html` (D19); its `ov-*`
   classes live here as `wl-ov-*` on the `--hs-*` tokens of the
   shared kit (whitelabel_wizard.css, loaded by the layout).
   ───────────────────────────────────────────────────────────── */

.wl-ov { overflow-x: hidden; }
.wl-ov-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }

/* toolbar */
.wl-ov-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wl-ov-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: 9px; box-shadow: var(--hs-shadow-sm); }
.wl-ov-seg a, .wl-ov-seg button { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 6px 12px; border-radius: 7px; text-decoration: none; }
.wl-ov-seg a:hover, .wl-ov-seg button:hover { color: var(--hs-ink-900); }
.wl-ov-seg .is-on, .wl-ov-seg .is-on:hover { background: var(--hs-primary-200); color: #fff; }
.wl-ov-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--hs-ink-500); }
.wl-ov-live i { height: 8px; width: 8px; border-radius: 50%; background: var(--hs-positive-medium); }
.wl-ov-search { width: 200px; }

/* summary strip */
.wl-ov-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 24px; }
.wl-ov-sum__t { position: relative; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 14px 16px; overflow: hidden; }
.wl-ov-sum__t.is-hero { background: linear-gradient(160deg, #032a26, #064a42 65%, var(--hs-primary-400)); border-color: transparent; color: #fff; }
.wl-ov-sum__l { margin: 0; font-size: 12px; font-weight: 600; color: var(--hs-ink-500); }
.is-hero .wl-ov-sum__l { color: rgba(255,255,255,.72); }
.wl-ov-sum__v { margin: 6px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--hs-ink-900); line-height: 1.05; }
.is-hero .wl-ov-sum__v { color: #fff; }
.wl-ov-sum__d { margin: 6px 0 0; font-size: 12px; font-weight: 600; }
.wl-ov-sum__spark { position: absolute; right: 10px; bottom: 10px; display: block; width: 76px; opacity: .9; }
.wl-ov-sum__spark svg { display: block; width: 76px; height: 26px; }

/* section header */
.wl-ov-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 28px 0 12px; }
.wl-ov-h__t { margin: 0; font-size: 17px; font-weight: 600; color: var(--hs-ink-900); }
.wl-ov-h__t small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--hs-ink-400); }
.wl-ov-h__note { font-size: 12px; color: var(--hs-ink-400); }

/* WL card grid — auto-fill: a bigger monitor fits more cards per row */
.wl-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
@media (max-width: 420px) { .wl-ov-grid { grid-template-columns: 1fr; } }
.wl-ov-card { position: relative; display: flex; flex-direction: column; background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); transition: box-shadow .15s, transform .15s; overflow: hidden; container-type: inline-size; }
.wl-ov-card:hover { box-shadow: var(--hs-shadow-md); transform: translateY(-1px); }
.wl-ov-card[hidden] { display: none; }
.wl-ov-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--wl-ov-state, var(--hs-positive-medium)); }
.wl-ov-card.is-warn { --wl-ov-state: #e0a100; }
.wl-ov-card.is-bad { --wl-ov-state: var(--hs-negative-medium); }
.wl-ov-card.is-idle { --wl-ov-state: var(--hs-ink-200); }
.wl-ov-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px 18px; }
.wl-ov-logo { display: grid; place-items: center; height: 34px; width: 34px; flex: none; border-radius: 10px; color: #fff; font-weight: 700; font-size: 13px; }
.wl-ov-card__name { min-width: 0; flex: 1; }
.wl-ov-card__name b { display: block; font-size: 15px; font-weight: 600; color: var(--hs-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-ov-card__name span { display: block; font-size: 12px; color: var(--hs-ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-ov-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.wl-ov-state::before { content: ""; height: 7px; width: 7px; border-radius: 50%; background: currentColor; }
.wl-ov-state.ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-ov-state.warn { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-ov-state.bad { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-ov-state.idle { background: var(--hs-ink-100); color: var(--hs-ink-600); }

.wl-ov-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hs-ink-050); border-bottom: 1px solid var(--hs-ink-050); }
@container (max-width: 380px) {
  .wl-ov-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-ov-m:nth-child(2) { border-right: 0; }
  .wl-ov-m:nth-child(-n+2) { border-bottom: 1px solid var(--hs-ink-050); }
}
.wl-ov-m { padding: 10px 10px 8px 18px; border-right: 1px solid var(--hs-ink-050); min-width: 0; }
.wl-ov-m:last-child { border-right: 0; }
.wl-ov-m p { margin: 0; }
.wl-ov-m__l { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--hs-ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-ov-m__v { margin-top: 3px !important; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--hs-ink-900); line-height: 1.1; }
.wl-ov-m__d { margin-top: 2px !important; font-size: 11.5px; font-weight: 600; }
.wl-ov-m__s { font-size: 11px; color: var(--hs-ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-ov-m svg { display: block; margin-top: 6px; width: 100%; height: 22px; }
.wl-ov-up { color: var(--hs-positive-dark); }
.wl-ov-down { color: var(--hs-negative-dark); }
.wl-ov-flat { color: var(--hs-ink-400); }

.wl-ov-funnel { padding: 10px 16px 4px 18px; }
.wl-ov-funnel__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--hs-ink-050); }
.wl-ov-funnel__bar span { height: 100%; }
.wl-ov-funnel__k { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--hs-ink-500); }
.wl-ov-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px 12px 18px; margin-top: auto; }
.wl-ov-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--hs-ink-050); color: var(--hs-ink-600); }
.wl-ov-tag.is-bad { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-ov-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; margin-left: auto; }
.wl-ov-card__open { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--hs-primary-300); text-decoration: none; }
.wl-ov-card__open:hover { color: var(--hs-primary-400); }
.wl-ov-card__actions .wl-ov-card__open { margin-left: 0; }
.wl-ov-card__open--secondary { color: var(--hs-ink-500); }
.wl-ov-card__open--secondary:hover { color: var(--hs-ink-700); }
.wl-ov-idle { padding: 18px; font-size: 13px; color: var(--hs-ink-500); border-top: 1px solid var(--hs-ink-050); }

/* ── Approvals (HSF-1043 U13, prototype `ov-bell` / `md-*`): the 🔔 of each card rings while
      something waits for the viewer; the modal reuses the history's <dialog> box (`wl-hist`,
      whitelabel_wizard.css) and U10's request cards (whitelabel_change_requests.css). ── */
.wl-ov-bell { position: relative; display: grid; place-items: center; height: 32px; width: 32px; flex: none; border-radius: 9px; border: 1px solid var(--hs-ink-100); background: var(--hs-white); color: var(--hs-ink-300); cursor: pointer; transition: background .15s, color .15s; }
.wl-ov-bell svg { height: 18px; width: 18px; }
.wl-ov-bell:hover { background: var(--hs-ink-050); color: var(--hs-ink-600); }
.wl-ov-bell:focus-visible { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.wl-ov-bell.is-ringing { color: #b77900; border-color: #f5d27a; background: #fff8e5; }
.wl-ov-bell.is-ringing svg { transform-origin: 50% 8%; animation: wl-ov-ring 2.6s ease-in-out infinite; }
.wl-ov-bell.is-ringing::after { content: ""; position: absolute; inset: -1px; border-radius: 9px; box-shadow: 0 0 0 0 rgba(245,179,1,.55); animation: wl-ov-halo 2.6s ease-out infinite; }
.wl-ov-bell__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--hs-white); }
@keyframes wl-ov-ring { 0%, 62%, 100% { transform: rotate(0) } 66% { transform: rotate(16deg) } 70% { transform: rotate(-14deg) } 74% { transform: rotate(10deg) } 78% { transform: rotate(-8deg) } 82% { transform: rotate(4deg) } 86% { transform: rotate(0) } }
@keyframes wl-ov-halo { 0%, 60% { box-shadow: 0 0 0 0 rgba(245,179,1,.55) } 100% { box-shadow: 0 0 0 9px rgba(245,179,1,0) } }
@media (prefers-reduced-motion: reduce) { .wl-ov-bell.is-ringing svg, .wl-ov-bell.is-ringing::after { animation: none; } }
.wl-ov-sum__link { color: #7a5300; text-decoration: none; }
.wl-ov-sum__link:hover { text-decoration: underline; }
.wl-ov-sum__quiet { color: var(--hs-ink-400); }

@media (min-width: 561px) { .wl-ov-md { width: min(760px, calc(100% - 32px)); max-width: 760px; } }
.wl-ov-md__head { display: flex; align-items: center; gap: 12px; }
.wl-ov-md__head .wl-ov-logo svg { height: 18px; width: 18px; color: #fff; }
.wl-ov-md__all { background: linear-gradient(135deg, #032a26, #00736A); }
.wl-ov-md__title { flex: 1; min-width: 0; }
.wl-ov-md__title b { display: block; font-size: 17px; color: var(--hs-ink-900); }
.wl-ov-md__title small { font-size: 12.5px; color: var(--hs-ink-500); }
.wl-ov-md__tabs { padding: 12px 20px; border-bottom: 1px solid var(--hs-ink-100); background: var(--hs-ink-050); }
.wl-ov-md__tabs .wl-pagetab { font-size: 13px; padding: 7px 14px; }
.wl-ov-md__tabs .wl-crq-count[hidden] { display: none; }
.wl-ov-md__body { background: var(--hs-ink-050); }
/* The modal's own tabs replace the queue's (open | history) inside it. */
.wl-ov-md .wl-crq-tabs { display: none; }

/* ── Modo TV: a monitor on the wall — dark, full screen, no menu. The page covers the
      layout (sidebar + header) instead of reaching into it. ── */
.wl-ov.is-tv { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: 20px 24px 40px; background: #06110f; }
.wl-ov.is-tv .wl-ov-tv-hide { display: none !important; }
.wl-ov.is-tv .wl-ov-head { justify-content: flex-end; }
.wl-ov.is-tv .wl-ov-sum__t:not(.is-hero), .wl-ov.is-tv .wl-ov-card { background: #0c1f1c; border-color: #17342f; box-shadow: none; }
.wl-ov.is-tv .wl-ov-sum__v, .wl-ov.is-tv .wl-ov-card__name b, .wl-ov.is-tv .wl-ov-m__v, .wl-ov.is-tv .wl-ov-h__t { color: #e6fffb; }
.wl-ov.is-tv .wl-ov-metrics, .wl-ov.is-tv .wl-ov-m, .wl-ov.is-tv .wl-ov-idle { border-color: #17342f; }
.wl-ov.is-tv .wl-ov-funnel__bar, .wl-ov.is-tv .wl-ov-tag { background: #12302b; }
.wl-ov.is-tv .wl-ov-tag { color: #a7c9c3; }
.wl-ov.is-tv .wl-ov-live { color: #a7c9c3; }
.wl-ov.is-tv .wl-ov-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wl-ov.is-tv .wl-ov-seg { background: #0c1f1c; border-color: #17342f; box-shadow: none; }
.wl-ov.is-tv .wl-ov-seg a:not(.is-on) { color: #a7c9c3; }
.wl-ov.is-tv .wl-btn--secondary { background: #0c1f1c; border-color: #17342f; color: #e6fffb; }
.wl-ov.is-tv .wl-btn--secondary:hover { background: #12302b; border-color: #17342f; color: #e6fffb; }
.wl-ov.is-tv .wl-ov-bell { background: #0c1f1c; border-color: #17342f; color: #4f7a73; }
.wl-ov.is-tv .wl-ov-bell.is-ringing { background: #3a2c05; border-color: #6b520b; color: #ffd978; }
.wl-ov.is-tv .wl-ov-bell__n { box-shadow: 0 0 0 2px #0c1f1c; }
.wl-ov.is-tv .wl-ov-sum__link { color: #ffd978; }
/* «Tema da plataforma» › Textos (HSF-1111 U32) — the groups, rows, tags and sub-tabs, 1:1 with the approved prototype
   (admin-whitelabel-prototype/assets/platform-theme.css, blocks "texts"): same tokens, same class names. */
.pt-subtabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--hs-ink-100); background: #fff; overflow-x: auto; scrollbar-width: none; }
.pt-subtab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 11px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap; }
.pt-subtab.is-active { color: var(--hs-ink-900); border-bottom-color: var(--hs-ink-900); }
.pt-subtab__n { margin-left: 5px; padding: 0 6px; border-radius: 999px; background: var(--hs-ink-050); font-size: 11px; color: var(--hs-ink-500); }
.pt-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.pt-tools .pt-search { flex: 1 1 200px; width: auto; }
.pt-only { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--hs-ink-600); cursor: pointer; }
.pt-grp { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: #fff; }
.pt-grp + .pt-grp { margin-top: 10px; }
.pt-grp > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--hs-ink-900); }
.pt-grp > summary::-webkit-details-marker { display: none; }
.pt-grp > summary small { font-size: 12px; font-weight: 500; color: var(--hs-ink-400); }
.pt-grp > summary .wl-ovgroup__chev { margin-left: auto; height: 16px; width: 16px; color: var(--hs-ink-400); transition: transform var(--hs-dur) var(--hs-ease); }
.pt-grp[open] > summary .wl-ovgroup__chev { transform: rotate(180deg); }
.pt-rows { border-top: 1px solid var(--hs-ink-100); }
.pt-row { padding: 12px 14px; border-bottom: 1px solid var(--hs-ink-050); transition: background var(--hs-dur) var(--hs-ease); }
.pt-row:last-child { border-bottom: 0; }
.pt-row.is-own { box-shadow: inset 3px 0 0 var(--hs-primary-200); }
.pt-row.has-error { box-shadow: inset 3px 0 0 var(--hs-negative-medium); }
.pt-row.is-flash { animation: pt-flash 1.2s var(--hs-ease); }
@keyframes pt-flash { 0% { background: #CFF5EF; } 100% { background: #F1FBF9; } }
.pt-row__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; }
.pt-row__name { font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.pt-row__key { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--hs-ink-400); overflow-wrap: anywhere; }
.pt-row__meta { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pt-row__inh { margin-top: 6px; font-size: 12px; color: var(--hs-ink-400); line-height: 1.45; overflow-wrap: anywhere; }
.pt-row__inh b { font-weight: 600; color: var(--hs-ink-500); }
.pt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pt-pair .wl-label { font-size: 11px; margin-bottom: 4px; }
.pt-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--hs-ink-050); color: var(--hs-ink-600); box-shadow: inset 0 0 0 1px var(--hs-ink-100); white-space: nowrap; }
.pt-tag svg { height: 11px; width: 11px; }
.pt-tag--restricted { background: var(--hs-negative-soft); color: var(--hs-negative-dark); box-shadow: none; }
.pt-tag--legal { background: var(--hs-ink-050); color: var(--hs-ink-600); box-shadow: inset 0 0 0 1px var(--hs-ink-100); }
.pt-tok { display: inline-flex; align-items: center; padding: 1px 7px; margin: 0 1px; border-radius: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; background: var(--hs-ink-100); color: var(--hs-ink-700); }
.pt-tok--data { background: rgba(0,163,147,.14); color: var(--hs-primary-400); }
.pt-tok--bad { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.pt-toks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--hs-ink-500); }
.pt-toks button.pt-tok { border: 0; cursor: pointer; }
.pt-empty { padding: 28px 16px; text-align: center; font-size: 13.5px; color: var(--hs-ink-500); }
.pt-back svg { height: 14px; width: 14px; }
.pt-row__where { font-size: 12px; color: var(--hs-ink-400); }
.pt-techkey { font-family: ui-monospace, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.pt-row__meta .pt-back { padding: 4px 8px; font-size: 12px; }
.pt-sub { border-top: 1px solid var(--hs-ink-050); }
.pt-sub > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--hs-ink-700); background: var(--hs-ink-050); }
.pt-sub > summary::-webkit-details-marker { display: none; }
.pt-sub > summary small { font-size: 11.5px; font-weight: 500; color: var(--hs-ink-400); }
.pt-sub > summary .wl-ovgroup__chev { margin-left: auto; height: 14px; width: 14px; color: var(--hs-ink-400); transition: transform var(--hs-dur) var(--hs-ease); }
.pt-sub[open] > summary .wl-ovgroup__chev { transform: rotate(180deg); }
.pt-grp__note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0 14px 10px; font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-500); }
.pt-grp__note > span:last-child { flex: 1 1 220px; }
.pt-linesnote { margin: 0; padding: 9px 14px; border-top: 1px solid var(--hs-ink-050); font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-500); }
.pt-tools ~ .pt-linesnote { border: 1px dashed var(--hs-ink-100); border-radius: var(--hs-radius-md); margin-bottom: 12px; }
.pt-fixed { font-size: 11.5px; color: var(--hs-ink-400); white-space: nowrap; }
.pt-pvhint { display: flex; gap: 6px; margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--hs-ink-500); }
.pt-pvhint svg { height: 14px; width: 14px; flex: none; margin-top: 2px; color: var(--hs-info-dark); }
.pt-pvhint .dp-linkbtn { font-size: 12px; }
.pt-screennote { padding: 0 0 12px; }
.pt-pvhint.is-warn svg { color: var(--hs-warning-dark); }
.pt-pvhint.is-warn { color: var(--hs-ink-700); }
.pto-empty { margin: 0 22px 8px; padding: 8px 12px; border-radius: var(--ds-r-input, 8px); background: var(--hs-warning-soft); }
.pto-empty[hidden] { display: none; }
.pt-pair__uses { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--hs-primary-000); color: var(--hs-primary-400); font-size: 10.5px; font-weight: 600; }
.pt-legalwhy { margin: -2px 0 8px; font-size: 12px; line-height: 1.45; color: var(--hs-ink-500); }
/* The «?» keeps its room while hidden: if focus gave it room, a row whose head fills its line would wrap on the press that
   focuses one of its buttons, and the release would land beside the button (HSF-1641 S-A1c). */
.pt-row__more { display: inline-flex; visibility: hidden; }
.pt-row.is-focus .pt-row__more, .pt-row:focus-within .pt-row__more { visibility: visible; }
.pt-grp__wl { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 14px 8px; font-size: 12.5px; }
.pt-copylist { display: flex; flex-direction: column; gap: 8px; }
/* U32 additions: the unsaved chip, the status line, the moved base chip, the versions dialog rows and the read-only fields. */
.pt-texts .pt-row__name { overflow-wrap: anywhere; }
.pt-unsaved { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.pt-status { margin: 0 0 12px; font-size: 13px; color: var(--hs-ink-700); }
.pt-status[data-tone="error"] { color: var(--hs-negative-dark); }
.pt-moved { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.pt-row textarea.wl-textarea[readonly], .pt-row input.wl-input[readonly] { background: var(--hs-ink-050); color: var(--hs-ink-500); cursor: not-allowed; }
.pt-row textarea.is-invalid { box-shadow: 0 0 0 1px var(--hs-negative-medium); }
.pt-row__hist { font-size: 12px; }
.pt-row[hidden], .pt-grp[hidden], .pt-sub[hidden] { display: none; }
.pt-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-versions li { border-top: 1px solid var(--hs-ink-050); padding-top: 10px; }
.pt-versions li:first-child { border-top: 0; padding-top: 0; }
.pt-versions q { display: block; margin: 4px 0 8px; font-size: 13px; }
.pt-versions .pt-row__where { display: block; }
.pt-texts-orphans { margin-top: 18px; }
@media (max-width: 560px) { .pt-pair { grid-template-columns: 1fr; } }

/* Origin of a text that takes data (HSF-1111 U43; HSF-1640 U3): the value box or the field, the recipe of a data (in the row's modal) and
   the phrase with labels. */
.pt-origin { display: grid; gap: 8px; }
.pt-origin-pick { display: inline-flex; align-items: center; gap: 4px; }
.pt-origin__fix { justify-self: start; font-size: 12.5px; }
.pto-recipe { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.pto-field { display: grid; gap: 4px; }
.pto-field .wl-select, .pto-field .wl-input { width: 100%; }
.pto-why { margin: 0; font-size: 12.5px; color: var(--hs-ink-500); }
.pto-recipe [aria-invalid="true"], .pto-phrase__box[aria-invalid="true"] { border-color: var(--hs-negative-medium); }
.pto-chain[aria-invalid="true"] { border-left: 3px solid var(--hs-negative-medium); padding-left: 8px; }
.pto-phrase { display: grid; gap: 8px; }
.pto-phrase__box { min-height: 48px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pto-phrase__bar { display: flex; gap: 10px; align-items: center; }
.pto-chip { display: inline-flex; align-items: center; margin: 0 1px; padding: 0 8px; border-radius: 999px; background: rgba(0,163,147,.14); color: var(--hs-primary-400); font-size: 12.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; cursor: pointer; }
.pto-chip:hover { box-shadow: inset 0 0 0 1px var(--hs-primary-200); }
.pto-chip.is-bad { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.pto-chip.is-static { cursor: default; }
.pto-marks { display: grid; gap: 6px; }
.pto-marks[hidden] { display: none; }
.pto-marks .pt-marks__h { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--hs-ink-500); text-transform: uppercase; letter-spacing: .04em; }
.pto-marks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pto-markrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--hs-ink-100); border-radius: 8px; background: #fff; }
.pto-markrow__how { flex: 1; min-width: 0; font-size: 12.5px; color: var(--hs-ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pto-link { display: grid; gap: 10px; }
.pto-link[hidden], .pto-field[hidden] { display: none; }
.pto-chain { display: grid; gap: 10px; }
/* The Detalhes groups of a data (U43b): the modal's own markup (`ptm-*`) inside the recipe; the rules move by their buttons, not by the grip. */
.pto-advanced { display: grid; gap: 8px; }
.pto-advanced .dp-row2 { gap: 12px; }
.pto-advanced .ptm-rule__grip { display: none; }

/* ═══════════ HSF-1640 / D93 (15/10): the hiSofi design system on the step «Tema da plataforma» only — its Textos, its Detalhes and their
   modals (prototypes/engine-admin-prototype/design_system.html; prototype platform-theme.css «HSF-1640 / D93»): Inter Tight, teal
   #00A393, input/select 48px / radius 8 / border gray-200 #CACDD4 / padding 0 16, focus primary-100 + ring primary-50; badge radius 4,
   10px/500, solid colour; the badge of a text's origin, its menu and the value box. Nothing outside the step changes. ═══════════ */
.wl-app[data-active-step="platform_theme"] {
  --ds-primary: #00A393; --ds-primary-100: #00E0CA; --ds-primary-50: #BAFFFA;
  --ds-gray-50: #F7F8FA; --ds-gray-100: #E1E4E9; --ds-gray-200: #CACDD4; --ds-gray-300: #9EA3A9; --ds-gray-400: #717880;
  --ds-gray-500: #5B626A; --ds-gray-600: #454C54; --ds-gray-800: #1C1D1F; --ds-black: #010204;
  --ds-positive: #26BF6E; --ds-negative: #E6462E; --ds-warning: #FFB127;
  --ds-r-input: 8px; --ds-r-badge: 4px; --ds-r-card: 16px; --ds-r-button: 8px;
}
.wl-app[data-active-step="platform_theme"] .wl-input,
.wl-app[data-active-step="platform_theme"] .wl-select {
  height: 48px; padding: 0 16px; font-family: "Inter Tight", var(--hs-font); font-size: 14px; color: var(--ds-gray-800);
  border: 1px solid var(--ds-gray-200); border-radius: var(--ds-r-input); background-color: #fff;
}
.wl-app[data-active-step="platform_theme"] .wl-select { padding-right: 40px; background-position: right 14px center; }
.wl-app[data-active-step="platform_theme"] .wl-textarea {
  min-height: 48px; padding: 12px 16px; font-family: "Inter Tight", var(--hs-font); font-size: 14px; line-height: 1.5; color: var(--ds-gray-800);
  border: 1px solid var(--ds-gray-200); border-radius: var(--ds-r-input); background-color: #fff;
}
.wl-app[data-active-step="platform_theme"] .pt-row textarea.wl-textarea { field-sizing: content; resize: none; }
.wl-app[data-active-step="platform_theme"] .wl-input::placeholder,
.wl-app[data-active-step="platform_theme"] .wl-textarea::placeholder { color: var(--ds-gray-300); }
.wl-app[data-active-step="platform_theme"] .wl-input:focus,
.wl-app[data-active-step="platform_theme"] .wl-select:focus,
.wl-app[data-active-step="platform_theme"] .wl-textarea:focus { outline: none; border-color: var(--ds-primary-100); box-shadow: 0 0 0 2px var(--ds-primary-50); }
.wl-app[data-active-step="platform_theme"] .wl-input[disabled],
.wl-app[data-active-step="platform_theme"] .wl-select[disabled] { background-color: var(--ds-gray-50); color: var(--ds-gray-400); }
.wl-app[data-active-step="platform_theme"] .wl-input.is-error { border: 2px solid var(--ds-negative); box-shadow: none; }
.wl-app[data-active-step="platform_theme"] .pto-phrase__box.wl-textarea { height: auto; min-height: 48px; padding: 12px 16px; line-height: 1.6; }
.wl-app[data-active-step="platform_theme"] .pto-phrase__box[aria-invalid="true"] { border: 2px solid var(--ds-negative); box-shadow: none; }
.wl-app[data-active-step="platform_theme"] .wl-label { font-family: "Inter Tight", var(--hs-font); font-size: 14px; font-weight: 500; color: var(--ds-gray-600); margin-bottom: 6px; }
/* badges: radius 4, 10px/500, solid colour */
.wl-app[data-active-step="platform_theme"] .pt-inh--own,
.wl-app[data-active-step="platform_theme"] .pt-tag,
.wl-app[data-active-step="platform_theme"] .pt-inh--req {
  border-radius: var(--ds-r-badge); font-size: 10px; font-weight: 500; padding: 2px 8px; box-shadow: none; letter-spacing: .01em; line-height: 16px;
}
.wl-app[data-active-step="platform_theme"] .pt-inh--own { background: var(--ds-primary); color: #fff; }
.wl-app[data-active-step="platform_theme"] .pt-tag { background: var(--ds-gray-500); color: #fff; }
.wl-app[data-active-step="platform_theme"] .pt-tag--list { background: var(--ds-primary); color: #fff; }
.wl-app[data-active-step="platform_theme"] .pt-tag--restricted { background: var(--ds-negative); color: #fff; }
.wl-app[data-active-step="platform_theme"] .pt-inh--req { background: var(--ds-warning); color: var(--ds-gray-800); }
.wl-app[data-active-step="platform_theme"] .pt-tag svg { height: 10px; width: 10px; }

/* the badge of a text: a DS badge; clickable when the origin may change, with a padlock when it may not */
.pt-osel {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px 0 8px; border: 0; border-radius: var(--ds-r-badge, 4px);
  font: 500 10px/1 "Inter Tight", var(--hs-font); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: filter 100ms ease-out, box-shadow 100ms ease-out;
}
.pt-osel svg { height: 12px; width: 12px; }
.pt-osel--static { background: var(--ds-gray-500, #5B626A); color: #fff; }
.pt-osel--dynamic { background: var(--ds-primary, #00A393); color: #fff; }
.pt-osel--mixed { background: var(--ds-primary-100, #00E0CA); color: var(--ds-black, #010204); }
.pt-osel.is-locked { background: var(--ds-gray-100, #E1E4E9); color: var(--ds-gray-600, #454C54); padding: 0 8px 0 6px; cursor: default; }
.pt-osel.is-locked svg { height: 10px; width: 10px; }
button.pt-osel:hover { filter: brightness(1.08); }
button.pt-osel:focus-visible, button.pt-osel[aria-expanded="true"] { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ds-primary-100, #00E0CA); }

/* the value of a Dinâmico / Misto text: looks like a DS input, opens the origin menu */
.pt-valbox {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 16px; text-align: left; cursor: pointer;
  font: 400 14px/1.5 "Inter Tight", var(--hs-font); color: var(--ds-gray-800, #1C1D1F);
  background: #fff; border: 1px solid var(--ds-gray-200, #CACDD4); border-radius: var(--ds-r-input, 8px); transition: border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.pt-valbox:hover { border-color: var(--ds-gray-300, #9EA3A9); }
.pt-valbox:focus-visible { outline: none; border-color: var(--ds-primary-100, #00E0CA); box-shadow: 0 0 0 2px var(--ds-primary-50, #BAFFFA); }
.pt-valbox.is-locked { background: var(--ds-gray-50, #F7F8FA); }
.pt-valbox { flex-wrap: wrap; }
.pt-valbox__v { flex: 0 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.pt-valbox__how { flex: 1 1 12rem; min-width: 0; font-size: 12px; color: var(--ds-gray-400, #717880); overflow-wrap: anywhere; }
.pt-valbox__how[hidden] { display: none; }
.pt-valbox__how[hidden] ~ .pt-valbox__edit, .pt-valbox__v:only-child { margin-left: auto; }
.pt-valbox__edit { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ds-primary, #00A393); white-space: nowrap; }
.pt-valbox__edit svg { height: 14px; width: 14px; }

/* the origin menu: compact DS dropdown (card, radius 8, shadow), one line of explanation per choice, under what opened it */
.pt-texts { position: relative; }
.pt-omenu {
  position: absolute; z-index: 60; width: 340px; max-width: calc(100% - 24px); padding: 6px; background: #fff; border: 1px solid var(--ds-gray-100, #E1E4E9);
  border-radius: var(--ds-r-input, 8px); box-shadow: 0 12px 32px rgba(1,2,4,.12), 0 1px 3px rgba(1,2,4,.10); font-family: "Inter Tight", var(--hs-font);
  animation: pt-omenu-in 160ms ease-out;
}
.pt-omenu[hidden] { display: none; }
@keyframes pt-omenu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pt-omenu { animation: none; } .pt-osel, .pt-valbox { transition: none; } }
.pt-omenu__h { margin: 4px 8px 6px; font-size: 12px; font-weight: 500; color: var(--ds-gray-400, #717880); }
.pt-omenu__opt {
  display: grid; grid-template-columns: 78px 1fr 16px; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; font: inherit;
}
.pt-omenu__opt:hover, .pt-omenu__opt:focus-visible { background: var(--ds-gray-50, #F7F8FA); outline: none; }
.pt-omenu__opt.is-cur { background: rgba(0,224,202,.10); }
.pt-omenu__opt .pt-osel { justify-content: center; cursor: inherit; padding: 0 8px; }
.pt-omenu__line { font-size: 13px; line-height: 1.35; color: var(--ds-gray-600, #454C54); }
.pt-omenu__ok { color: var(--ds-primary, #00A393); display: inline-flex; visibility: hidden; }
.pt-omenu__opt.is-cur .pt-omenu__ok { visibility: visible; }
.pt-omenu__ok svg { height: 16px; width: 16px; }

/* the modal of a text (a `<dialog>` with the Detalhes modal's markup): «Na prévia» on top, the empty-phrase error under the phrase */
dialog.pto-modal { padding: 0; border: 0; width: min(920px, calc(100% - 48px)); max-height: min(920px, calc(100vh - 48px)); margin: auto; }
dialog.pto-modal:not([open]) { display: none; }
dialog.pto-modal::backdrop { background: rgba(6,17,15,.5); backdrop-filter: blur(2px); }
dialog.pto-modal--mark { width: min(880px, calc(100% - 64px)); }
.pto-modal .ptm__body { background: #F7F9F9; }
.ptm-live { display: flex; align-items: baseline; gap: 10px; margin: 12px 22px 4px; padding: 10px 14px; background: var(--ds-gray-50, #F7F8FA); border-radius: var(--ds-r-input, 8px); font-family: "Inter Tight", var(--hs-font); }
.ptm-live__cap { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-gray-400, #717880); white-space: nowrap; }
.pto-phrase .pt-render { margin: 8px 0 0; font-size: 13px; color: var(--ds-gray-800, #1C1D1F); overflow-wrap: anywhere; }
.pto-phrase .pt-render__cap { margin-right: 6px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--ds-gray-400, #717880); }
.ptm-live__text { font-size: 14px; font-weight: 500; color: var(--ds-gray-800, #1C1D1F); overflow-wrap: anywhere; }
.ptx-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12px; font-weight: 400; color: var(--ds-negative, #E6462E); }
.ptx-err[hidden] { display: none; }
.pto-modal .ptm-foot__msg { flex: 1; font-size: 12.5px; color: var(--ds-negative, #E6462E); }
/* the badge, «Ajustado nesta plataforma» and the way back sit on the right of the title line, as in the prototype — when the column is
   too narrow for one line they wrap to the right, never to the left under the name */
.wl-app[data-active-step="platform_theme"] .pt-row__meta { justify-content: flex-end; }
.wl-app[data-active-step="platform_theme"] .pt-row__meta .pt-back { white-space: nowrap; }
/* «Tema da plataforma» step (HSF-1111 U9) — the band, the screen tabs, the orphans and the Editar/Prévia panes,
   1:1 with the approved prototype (admin-whitelabel-prototype/assets/platform-theme.css). The wizard kit
   (whitelabel_wizard.css: wl-fontes, wl-fonte, wl-card, wl-callout, wl-btn) does the rest. */
.pt-band { padding: 8px 12px; gap: 10px 14px; row-gap: 6px; }
.pt-band .wl-fontes__list { gap: 6px; flex: 1 1 auto; }
.pt-band .wl-fonte { position: relative; gap: 6px; padding: 5px 9px 5px 6px; text-decoration: none; }
.pt-band .wl-fonte__logo { height: 22px; width: 22px; border-radius: 6px; font-size: 11px; }
.pt-band .wl-fonte__name { font-size: 13px; white-space: nowrap; }
.pt-band .wl-fontes__manage { font-size: 12px; margin-left: auto; }
.pt-inh { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.pt-inh--own { background: rgba(0,163,147,.12); color: var(--hs-primary-400); }
.pt-inh--default { padding: 0; background: none; color: var(--hs-ink-400); font-weight: 600; }
.pt-inh--req { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.pt-bandwhy { margin: 8px 0 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-500); }
/* «no pacote» (U22): the prototype's package pill colours (change-package.js `pkg-pill`). */
.pt-inh--pkg { background: #EAFBF8; color: #064a42; }
.pt-bandpkg { align-items: center; flex-wrap: wrap; }
.pt-bandpkg__form { display: inline; margin: 0; }
.pt-screens { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 16px; border-bottom: 1px solid var(--hs-ink-100); }
.pt-screen { position: relative; flex: none; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-500); padding: 10px 12px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.pt-screen:hover { color: var(--hs-ink-900); }
.pt-screen.is-active { color: var(--hs-primary-300); border-bottom-color: var(--hs-primary-200); }
.pt-screen__n { margin-right: 6px; font-size: 11px; color: var(--hs-ink-300); }
.pt-screen.is-active .pt-screen__n { color: var(--hs-primary-200); }
.pt-orphans { margin-top: 18px; }
.pt-orphan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hs-ink-050); font-size: 13px; }
@media (max-width: 560px) {
  .pt-band { flex-direction: column; align-items: stretch; gap: 10px; }
  .pt-band .wl-fontes__list { flex-direction: column; }
  .pt-band .wl-fonte { width: 100%; }
  .pt-band .wl-fontes__manage { margin-left: 0; align-self: flex-end; }
  .pt-screens { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* The card and the preview side by side; below 1240 px they are two tabs, «Editar» and «Prévia» (prototype pt-mtabs).
   HSF-1641 S-A1b: the preview column follows the device on show, as the prototype's .pt-grid[data-device] does — 380 px
   beside the phone, 1.3 parts of the row beside the computer (548 px on a 1440 px screen); the panel's stage says which. */
.pt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.pt-grid:has(.wl-pv__stage[data-device="desktop"]) { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.3fr); }
.pt-mtabs { display: none; gap: 4px; margin-top: 14px; border-bottom: 1px solid var(--hs-ink-100); }
.pt-mtab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-500); padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.pt-mtab.is-active { color: var(--hs-ink-900); border-bottom-color: var(--hs-ink-900); }
.pt-preview { position: sticky; top: 16px; margin-top: 16px; }
/* HSF-1641 S-A1: a sticky column is a layer of its own; while the preview is expanded it lets the overlay go above the admin's header */
.pt-preview:has(.wl-pv.is-expanded) { position: static; }
@media (max-width: 1240px) {
  .pt-mtabs { display: flex; }
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-grid:has(.wl-pv__stage[data-device="desktop"]) { grid-template-columns: minmax(0, 1fr); }
  .pt-grid[data-pane="edit"] .pt-preview, .pt-grid[data-pane="preview"] .pt-form { display: none; }
  .pt-preview { position: static; }
}

/* The Acordo's sample agreement (U42): the box to name one, and the lines the draft draws on it. */
.pt-sample { margin-top: 18px; }
.pt-sample__pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pt-sample__pick .wl-input { flex: 0 1 180px; min-width: 120px; }
.pt-sample__instalments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.pt-sample__instalments-label { font-size: 13px; color: var(--hs-ink-500); margin-right: 4px; }
.pt-sample__lines { margin: 8px 0 0; display: grid; gap: 6px; }
.pt-sample__line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--hs-ink-100); padding-bottom: 6px; }
.pt-sample__line dt { color: var(--hs-ink-500); }
.pt-sample__line dd { margin: 0; color: var(--hs-ink-900); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
/* Política › Desconto: «Prévia por atraso» and the rule-level gateway errors (Escada × Política U4).
   1:1 with the approved prototype (sofi-code-manager prototypes/admin-whitelabel-prototype/assets/wizard.css,
   blocks «Prévia por atraso», «v3» and «v3.4»). The Escalonamento's per-rule preview (U5) reuses the grid. */
.wl-agegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wl-agegrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wl-agecol { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: var(--hs-white); padding: 10px 12px; min-width: 0; }
.wl-agecol__title { font-size: 12px; font-weight: 700; color: var(--hs-ink-700); margin-bottom: 6px; }
.wl-agecol__title small { font-weight: 500; color: var(--hs-ink-400); }
.wl-agerow { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 4px 0; border-top: 1px dashed var(--hs-ink-100); }
.wl-agerow:first-of-type { border-top: 0; }
.wl-agerow--wrap { flex-wrap: wrap; row-gap: 0; }
.wl-agerow__v { flex: none; font-weight: 600; color: var(--hs-ink-900); font-variant-numeric: tabular-nums; }
.wl-agerow__l { flex: 1; min-width: 0; color: var(--hs-ink-500); font-size: 12px; }
.wl-agerow__note { flex-basis: 100%; font-size: 11.5px; }
.wl-agerow__l--neg { color: var(--hs-negative-dark); }
[data-overdue-preview][data-state="updating"] [data-overdue-grid] { opacity: .6; }
.wl-overdue__error { margin: 0 0 10px; color: var(--hs-negative-dark); font-weight: 500; }
@media (max-width: 960px) { .wl-agegrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .wl-agegrid, .wl-agegrid--4 { grid-template-columns: 1fr; } }

.wl-rule--focus { box-shadow: 0 0 0 2px var(--hs-primary-200); background: rgba(0, 163, 147, 0.05); transition: box-shadow var(--hs-dur) var(--hs-ease), background var(--hs-dur) var(--hs-ease); }
.wl-rule__gwerr { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; font-weight: 500; color: var(--hs-negative-dark); }
.wl-rule__gwerr a { color: var(--hs-primary-400); font-weight: 600; }
.wl-rule--invalid { border-color: var(--hs-negative-medium); box-shadow: 0 0 0 1px var(--hs-negative-medium) inset; }
.wl-rule select.is-invalid, .wl-rule input.is-invalid { border-color: var(--hs-negative-medium); box-shadow: 0 0 0 1px var(--hs-negative-medium); }
/* «Prévia no portal» — the admin's preview panel (HSF-1111 U12). Ported from the approved prototype
   (prototypes/admin-whitelabel-prototype/platform-theme.css: dp-pv / pt-pv / pt-desk) over the wizard kit
   (wl-seg, wl-btn, wl-select, wl-input, wl-callout, wl-help) and its --hs-* tokens; only what the kit lacks lives here.
   Loaded by the panel partial through content_for :head (the whitelabel_sofia precedent). */

.wl-pv { background: #fff; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 14px; }
.wl-pv [hidden] { display: none !important; }
.wl-pv__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-pv__title { font-size: 15px; font-weight: 600; color: var(--hs-ink-900); }
.wl-pv__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 12px; }
.wl-pv__bar .wl-seg__btn { padding: 6px 12px; }
.wl-pv__expand { margin-left: auto; }
.wl-pv__pick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wl-pv__pick .wl-label { margin: 0; }
.wl-pv__by { width: auto; }
/* HSF-1641 adendo A3: «Contrato de exemplo» is one full-width select, as in the prototype */
.wl-pv__sample-select { width: 100%; }
.wl-pv__notice { margin: 0; color: var(--hs-warning-dark); }
.wl-pv__loading { margin: 0 0 8px; }
.wl-pv__slow { margin: 0 0 8px; }
.wl-pv__stale { align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* HSF-1641 S-A1 (D97) — the device around ONE stage (platform-theme.css pp-phone / pt-desk): `data-chrome` on the fit box says
   phone or browser and the controller sets the numbers (frames.js `fitOf`): --wl-pv-handset-scale (the whole phone),
   --wl-pv-page-scale + --wl-pv-shift (the browser's page, cropped on its 900 px centre), --wl-pv-frame-h, --wl-pv-h, --wl-pv-w. */
.wl-pv__fit { position: relative; }
.wl-pv__device { position: relative; }
.wl-pv__screen { position: relative; overflow: hidden; }
.wl-pv__stage { position: relative; overflow: hidden; background: #fff; }
.wl-pv__frame { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }

/* phone: a 390 px screen in a dark handset, zoomed down whole only when the panel is narrower than 408 px */
.wl-pv__fit[data-chrome="phone"] { height: var(--wl-pv-h, 798px); }
/* 408 × 798 = 9 px of rim around a 390 × 780 screen (the «9:41» bar + a 390 × 752 page), whatever box-sizing the host page has */
.wl-pv__fit[data-chrome="phone"] .wl-pv__device {
  position: absolute; top: 0; left: 50%; width: 408px; padding: 9px; box-sizing: border-box; border-radius: 38px; background: #14181B;
  box-shadow: 0 18px 40px rgba(1,2,4,.22), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: translateX(-50%) scale(var(--wl-pv-handset-scale, 1)); transform-origin: top center;
}
/* the screen holds BOTH the 28 px «9:41» bar and the 752 px stage (_preview_pane: .wl-pv__screen > .wl-pv__status + .wl-pv__stage) */
.wl-pv__fit[data-chrome="phone"] .wl-pv__screen { height: 780px; box-sizing: border-box; border-radius: 30px; background: #fff; }
.wl-pv__fit[data-chrome="phone"] .wl-pv__chrome { display: none; }
.wl-pv__status { display: flex; justify-content: space-between; height: 28px; box-sizing: border-box; padding: 10px 22px 4px; font-size: 11.5px; font-weight: 600; line-height: 1; color: #1C1D1F; background: #fff; }
.wl-pv__fit[data-chrome="phone"] .wl-pv__stage { width: 390px; height: var(--wl-pv-frame-h, 752px); }
.wl-pv__fit[data-chrome="phone"] .wl-pv__frame { width: 390px; height: var(--wl-pv-frame-h, 752px); }

/* browser: the bar stays crisp; the 1280 × 900 page is scaled to the panel and shifted by its rails while cropped */
/* the fit box takes no height here: it grows with the device, so the 34 px bar flows above the scaled stage */
.wl-pv__fit[data-chrome="browser"] .wl-pv__device {
  width: var(--wl-pv-w, 100%); max-width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 40px rgba(1,2,4,.16), 0 0 0 1px rgba(1,2,4,.08);
}
.wl-pv__fit[data-chrome="browser"] .wl-pv__status { display: none; }
.wl-pv__fit[data-chrome="browser"] .wl-pv__stage { height: var(--wl-pv-h, 400px); background: #f4f8fb; }
.wl-pv__fit[data-chrome="browser"] .wl-pv__frame {
  width: 1280px; height: var(--wl-pv-frame-h, 900px);
  transform: scale(var(--wl-pv-page-scale, 1)) translateX(var(--wl-pv-shift, 0px));
}
.wl-pv__chrome { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #ECEEF1; border-bottom: 1px solid #DADDE2; box-sizing: border-box; }
.wl-pv__dots { display: flex; gap: 6px; flex: none; }
.wl-pv__dots i { height: 10px; width: 10px; border-radius: 50%; background: #CACDD4; }
/* HSF-1641 S-A1b: the host is never cut — the bar takes what the zoom label leaves (basis 0) but never less than the host
   (`--wl-pv-host-w`, measured by chrome.js; the 1em keeps room for the path's ellipsis): the path gives way first, and
   only then the label. */
.wl-pv__url { flex: 1 1 0; min-width: calc(var(--wl-pv-host-w, 0px) + 20px + 1em); max-width: 460px; height: 22px; line-height: 22px; padding: 0 10px; border-radius: 6px; background: #fff; font-size: 11.5px; color: #5B626A; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; }
.wl-pv__zoom { flex: 0 1 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: #717880; white-space: nowrap; }

/* the load still on its way sits behind the visible one, invisible and untouchable (inert + aria-hidden in the DOM) */
.wl-pv__frame[data-pane-layer="back"] { opacity: 0; pointer-events: none; z-index: 0; }
.wl-pv__frame[data-pane-layer="front"] { z-index: 1; }

.wl-pv__text-only .wl-callout { margin: 0 0 8px; }
.wl-pv__text-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hs-ink-100); }
.wl-pv__text-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--hs-ink-100); font-size: 13px; color: var(--hs-ink-800); }
.wl-pv__text-label { color: var(--hs-ink-500); }
.wl-pv__empty { display: grid; gap: 6px; place-items: center; padding: 40px 24px; text-align: center; border-radius: 12px; background: var(--hs-ink-050); color: var(--hs-ink-500); font-size: 13.5px; line-height: 1.5; }
.wl-pv__empty b { color: var(--hs-ink-800); font-size: 15px; }
.wl-pv__note { margin: 10px 0 0; font-size: 12px; color: var(--hs-ink-500); line-height: 1.45; }

/* «Expandir» (desktop only): the panel takes the screen over a dimmed admin, 20 px from its edges, with the page whole (1:1,
   reduced only when the screen is narrower); Esc, «Fechar» or a click on the dimmed admin brings it back */
/* Tema geral › Textos pins its column's panel with `.tg-pv .wl-pv { position: static }` (same weight as the plain rule): the
   overlay names that host too, so it wins whatever order the two stylesheets load in. The hosts' sticky columns let go of
   the panel while it is expanded (their own stylesheets), or the admin's header would cover its top. */
.wl-pv.is-expanded, .tg-pv .wl-pv.is-expanded {
  position: fixed; inset: 20px; z-index: 70; overflow: auto; padding: 16px 20px; border-radius: 16px; background: transparent;
  box-shadow: none;
}
/* Inside the overlay's own layer, below its content: the dimmed admin (a real element, so a click lands on it and not on
   the admin underneath) and, above it, the white sheet (fixed like the panel, so it stays put while the panel scrolls). */
.wl-pv__backdrop { display: none; }
.wl-pv.is-expanded > .wl-pv__backdrop { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(1,2,4,.55); }
.wl-pv.is-expanded::after { content: ""; position: fixed; inset: 20px; z-index: -1; border-radius: 16px; background: #fff; }

/* D93: the panel's selects follow the hiSofi design system (48 px, Inter Tight 14/400, radius 8, padding 0 16)
   on every page that mounts the panel (Tema da plataforma and Tema geral › Textos) */
.wl-pv .wl-pv__by {
  height: 48px; padding: 0 16px; font-family: "Inter Tight", var(--hs-font); font-size: 14px; font-weight: 400; color: #1C1D1F;
  border: 1px solid #CACDD4; border-radius: 8px; background-color: #fff; box-sizing: border-box;
}
.wl-pv .wl-pv__by { padding-right: 40px; background-position: right 14px center; }
.wl-pv .wl-pv__by:focus { outline: none; border-color: #00E0CA; box-shadow: 0 0 0 2px #BAFFFA; }
/* HSF-326 Escada (U5a) — the Ritmo panel of the Escalonamento screen (prototype v3.3/v3.4/v3.5 blocks, ported).
   The rule row repeats the Política grammar (numbered circle + QUANDO/ENTÃO, chips «eixo | valor»); the 5-cell strip
   is the same order as the editor lines (grey = from the default, green = own, dashed = does not apply; red/amber =
   error/warning on that adjustment). Tokens come from whitelabel_wizard.css. */
.wl-rx { display: block; min-width: 0; }
/* While a newer answer is on its way the old panel stays, a little faded («atualizando»); the delay keeps typing calm. */
.wl-rx [data-whitelabel-value-escalation-rhythm-target="body"] { transition: opacity .2s ease .25s; }
.wl-rx[aria-busy="true"] [data-whitelabel-value-escalation-rhythm-target="body"] { opacity: .72; }
.wl-rx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wl-rx-unavailable { margin: 8px 0; font-size: 13px; color: var(--hs-ink-500); }

/* source: «De onde vêm os degraus» */
.wl-rx-source { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.wl-rx-source__t { font-size: 14px; font-weight: 700; color: var(--hs-ink-900); margin-bottom: 6px; }
.wl-rx-source__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.wl-rx-source .wl-choice.is-disabled { opacity: .55; cursor: not-allowed; }
.wl-rx-tag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); color: var(--hs-ink-500); }
.wl-rx-source__warn { margin: 8px 0 0; font-size: 12.5px; color: var(--hs-ink-700); }
.wl-rx-source__warn a { color: var(--hs-primary-400); font-weight: 600; }

/* mini-cards (v3.3): the wl-choice, compact; the native radio hides (keyboard keeps it), the chosen card gets a ✓ */
.wl-mc-group { flex: 1 1 380px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.wl-choice--mini { position: relative; gap: 0; padding: 8px 30px 8px 11px; background: var(--hs-white); }
.wl-choice--mini > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wl-choice__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wl-choice--mini .wl-choice__title { font-size: 13px; line-height: 1.3; }
.wl-choice--mini .wl-choice__desc { font-size: 11.5px; line-height: 1.35; margin-top: 1px; }
.wl-choice__inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 7px; font-size: 12px; color: var(--hs-ink-700); }
.wl-choice__inline .wl-input { width: 72px; height: 28px; margin: 0; padding: 2px 8px; }
.wl-choice__inline .wl-input[type="text"] { width: 130px; max-width: 100%; }
.wl-choice--mini:not(:has(> input:checked)) .wl-choice__inline { opacity: .55; }
.wl-choice--mini:has(> input:checked) .wl-choice__title { color: var(--hs-primary-400); }
.wl-choice--mini:has(> input:checked)::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 999px;
  background: var(--hs-primary-200); color: var(--hs-white); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.wl-choice--mini:has(> input:focus-visible) { outline: 2px solid var(--hs-primary-300); outline-offset: 2px; }

/* multiselect with search and chips (D42) */
.wl-ms { position: relative; margin-top: 0; min-width: 0; }
.wl-ms__box { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 5px 10px; border: 1px solid var(--hs-ink-200); border-radius: var(--hs-radius-md); background: var(--hs-white); cursor: pointer; }
.wl-ms__box:focus-visible { outline: 2px solid var(--hs-primary-300); outline-offset: 1px; }
.wl-ms__chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wl-ms__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); font-size: 12.5px; font-weight: 600; color: var(--hs-ink-700); }
.wl-ms__chip button { border: 0; background: transparent; color: var(--hs-ink-400); font-size: 15px; line-height: 1; width: 22px; height: 22px; border-radius: 999px; cursor: pointer; }
.wl-ms__chip button:hover { background: var(--hs-ink-100); color: var(--hs-ink-900); }
.wl-ms__placeholder { font-size: 13px; color: var(--hs-ink-400); }
.wl-ms__caret { flex: none; color: var(--hs-ink-400); font-size: 12px; }
.wl-ms__panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 8px; }
.wl-ms__search { width: 100%; margin-bottom: 6px; box-sizing: border-box; }
.wl-ms__list { max-height: 280px; overflow-y: auto; }
.wl-ms__opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: var(--hs-radius-md); cursor: pointer; }
.wl-ms__opt:hover { background: var(--hs-ink-050); }
.wl-ms__opt[hidden] { display: none; }
.wl-ms__opt input { margin-top: 3px; flex: none; }
.wl-ms__title { display: block; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-ms__desc { display: block; font-size: 12px; color: var(--hs-ink-500); margin-top: 2px; }
.wl-ms__empty { margin: 6px 8px; font-size: 12.5px; color: var(--hs-ink-400); }

/* summary + default rhythm */
.wl-rx-sum { margin: 4px 0 10px; font-size: 12.5px; color: var(--hs-ink-600); }
.wl-rx-sum.is-ok { color: var(--hs-positive-dark); }
.wl-rx-sum.is-error { color: var(--hs-negative-dark); font-weight: 600; }
.wl-rx-default { border: 1px solid var(--hs-ink-100); border-left: 3px solid var(--hs-primary-200); border-radius: var(--hs-radius-md); background: var(--hs-white); box-shadow: var(--hs-shadow-sm); padding: 12px 14px 6px; }
.wl-rx-default__t { margin: 0; font-size: 14px; font-weight: 700; color: var(--hs-ink-900); }
.wl-rx-default__lead { margin: 2px 0 6px; font-size: 12.5px; color: var(--hs-ink-500); }

/* an editor line = one adjustment: label (+ origin) | controls; the same grid on the default and on a rule */
.wl-rx-line { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 6px 14px; align-items: start; padding: 9px 0; border-top: 1px solid var(--hs-ink-050); }
.wl-rx-line__k { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 6px; min-width: 0; }
.wl-rx-line__t { font-size: 12.5px; font-weight: 600; color: var(--hs-ink-600); }
.wl-rx-line__v { min-width: 0; }
.wl-rx-line .wl-mc-group { flex: none; }
.wl-rx-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--hs-ink-700); padding-top: 4px; }
.wl-rx-inline .wl-input { width: 72px; height: 32px; margin: 0; }
.wl-rx-na { margin: 6px 0 0; font-size: 12.5px; color: var(--hs-ink-400); }
.wl-rx-line.is-own { background: linear-gradient(90deg, rgba(0,163,147,0.06), transparent 60%); box-shadow: inset 3px 0 0 var(--hs-primary-200); padding-left: 10px; margin-left: -10px; }
.wl-rx-line.is-na .wl-rx-line__t, .wl-rx-line.is-stale .wl-rx-line__t { color: var(--hs-ink-400); }
.wl-rx-line.is-inherited .wl-choice--mini { border-style: dashed; background: var(--hs-ink-050); }
.wl-rx-line.is-inherited .wl-choice--mini:has(> input:checked) { background: var(--hs-white); border-color: var(--hs-ink-300); box-shadow: none; }
.wl-rx-line.is-inherited .wl-choice--mini:has(> input:checked) .wl-choice__title { color: var(--hs-ink-800); }
.wl-rx-line.is-inherited .wl-choice--mini:has(> input:checked)::after { background: var(--hs-ink-400); }
.wl-rx-line__src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.wl-rx-origin { font-size: 11.5px; font-weight: 600; color: var(--hs-ink-500); background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 999px; padding: 1px 8px; }
.wl-rx-origin.is-own { color: var(--hs-primary-400); background: rgba(0,163,147,0.07); border-color: var(--hs-primary-200); }
.wl-rx-src { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--hs-primary-400); text-decoration: underline; text-underline-offset: 2px; border-radius: 2px; cursor: pointer; white-space: nowrap; }
.wl-rx-src:hover { color: var(--hs-primary-300); }
.wl-rx-src:focus-visible { outline: 2px solid var(--hs-primary-300); outline-offset: 2px; }
.wl-rx-reach { font-size: 11.5px; color: var(--hs-ink-400); }
.wl-rx-twin { margin: 6px 0 0; font-size: 12px; color: var(--hs-ink-500); }
.wl-rx-editor__lead { margin: 10px 0 2px; font-size: 12.5px; color: var(--hs-ink-500); line-height: 1.45; }

/* messages (error / warning / note) */
.wl-rx-issues { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.wl-rx-issue { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-600); min-width: 0; overflow-wrap: anywhere; }
.wl-rx-issue__ic { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; font-style: normal; }
.wl-rx-issue__was { display: block; margin-top: 2px; color: var(--hs-ink-500); font-weight: 400; }
.wl-rx-issue--error { color: var(--hs-negative-dark); font-weight: 500; }
.wl-rx-issue--error .wl-rx-issue__ic { background: var(--hs-negative-medium); color: var(--hs-white); }
.wl-rx-issue--warn { color: var(--hs-ink-800); }
.wl-rx-issue--warn .wl-rx-issue__ic { background: var(--hs-warning-medium); color: var(--hs-ink-900); }
.wl-rx-issue--note { color: var(--hs-ink-500); }
.wl-rx-issue--note .wl-rx-issue__ic { background: var(--hs-info-soft); color: var(--hs-info-dark); }
.wl-rx-issue a, .wl-rx-linkbtn { color: var(--hs-primary-400); font-weight: 600; }
.wl-rx-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wl-rx-line__issues .wl-rx-issues { margin-top: 6px; }

/* the rule list */
.wl-rx-list-head { margin: 18px 0 8px; }
.wl-rx-list-head__t { margin: 0; font-size: 14px; font-weight: 700; color: var(--hs-ink-900); }
.wl-rx-list-head__d { margin: 2px 0 0; font-size: 12.5px; color: var(--hs-ink-500); line-height: 1.45; max-width: 75ch; }
.wl-rx-list-head__d a, .wl-rx-empty a { color: var(--hs-primary-400); font-weight: 600; }
.wl-rx-empty { border: 1px dashed var(--hs-ink-200); border-radius: var(--hs-radius-md); padding: 12px 14px; font-size: 13px; color: var(--hs-ink-600); margin-bottom: 8px; }
.wl-rx-rule { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: var(--hs-white); padding: 11px 14px 12px; margin-bottom: 8px; min-width: 0; }
.wl-rx-rule.is-own { border-left: 3px solid var(--hs-primary-200); padding-left: 12px; }
.wl-rx-rule.has-error { border-color: var(--hs-negative-medium); box-shadow: 0 0 0 1px var(--hs-negative-medium) inset; }
.wl-rx-rule__head { display: flex; align-items: flex-start; gap: 10px; }
.wl-rx-rule__n { display: grid; place-items: center; height: 22px; width: 22px; flex: none; border-radius: 50%; background: var(--hs-primary-200); color: var(--hs-white); font-size: 12px; font-weight: 700; }
.wl-rx-rule__when { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wl-rx-kw { font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: var(--hs-ink-400); }
.wl-rx-kw--never { color: var(--hs-white); background: var(--hs-negative-medium); border-radius: 4px; padding: 1px 6px; }
.wl-rx-join { font-size: 12px; color: var(--hs-ink-400); }
.wl-rx-chip { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--hs-ink-100); border-radius: 6px; overflow: hidden; font-size: 12.5px; line-height: 1.3; }
.wl-rx-chip__axis { background: var(--hs-ink-050); color: var(--hs-ink-500); padding: 3px 7px; border-right: 1px solid var(--hs-ink-100); white-space: nowrap; }
.wl-rx-chip__axis code { font-family: inherit; font-weight: 600; color: var(--hs-ink-800); background: var(--hs-white); border: 1px solid var(--hs-ink-100); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.wl-rx-chip__val { background: var(--hs-white); color: var(--hs-ink-900); font-weight: 600; padding: 3px 8px; min-width: 0; overflow-wrap: anywhere; }
.wl-rx-then { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 7px 0 0 32px; min-height: 20px; font-size: 12.5px; color: var(--hs-ink-600); }
.wl-rx-then strong { color: var(--hs-ink-900); }
.wl-rx-then .wl-rx-neg { color: var(--hs-negative-dark); }
.wl-rx-pay { font-size: 11.5px; color: var(--hs-ink-500); background: var(--hs-ink-050); border-radius: 999px; padding: 1px 8px; }
.wl-rx-rule > .wl-rx-issues { margin-left: 32px; }

/* the 5-cell strip */
.wl-rx-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0 32px; }
.wl-rx-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; min-width: 0; padding: 6px 8px 7px; border: 1px solid var(--hs-ink-100); border-radius: 6px; background: var(--hs-ink-050); cursor: pointer; font-family: inherit; }
.wl-rx-cell:hover { border-color: var(--hs-ink-300); }
.wl-rx-cell:focus-visible, .wl-rx-cell.is-active { outline: 2px solid var(--hs-primary-300); outline-offset: 1px; }
.wl-rx-cell__k { font-size: 10.5px; color: var(--hs-ink-400); }
.wl-rx-cell__v { font-size: 12.5px; font-weight: 500; color: var(--hs-ink-600); line-height: 1.3; overflow-wrap: anywhere; }
.wl-rx-cell__tag { font-size: 10.5px; color: var(--hs-ink-400); }
.wl-rx-cell.is-own { background: rgba(0,163,147,0.07); border-color: var(--hs-primary-200); }
.wl-rx-cell.is-own .wl-rx-cell__v, .wl-rx-cell.is-own .wl-rx-cell__tag { color: var(--hs-primary-400); font-weight: 700; }
.wl-rx-cell.is-na, .wl-rx-cell.is-stale { background: transparent; border-style: dashed; cursor: default; }
.wl-rx-cell.is-na .wl-rx-cell__v, .wl-rx-cell.is-stale .wl-rx-cell__v { color: var(--hs-ink-300); }
.wl-rx-cell.is-stale .wl-rx-cell__tag { color: var(--hs-ink-600); font-weight: 600; }
.wl-rx-cell.has-warn { border-color: var(--hs-warning-medium); box-shadow: 0 0 0 1px var(--hs-warning-medium) inset; }
.wl-rx-cell.has-error { border-color: var(--hs-negative-medium); box-shadow: 0 0 0 1px var(--hs-negative-medium) inset; background: rgba(230,70,46,0.06); }
.wl-rx-cell.has-error .wl-rx-cell__v { color: var(--hs-negative-dark); }

/* rule foot, editor, SENÃO, orphan, no-discount rule */
.wl-rx-rule__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0 32px; min-height: 24px; }
.wl-rx-rule__count { font-size: 12px; color: var(--hs-ink-500); }
.wl-rx-editor--rule { margin: 10px 0 0 32px; border-top: 1px solid var(--hs-ink-100); }
.wl-rx-editor--rule[hidden] { display: none; }
.wl-rx-rule--fallback { background: var(--hs-ink-050); border-style: dashed; }
.wl-rx-rule--fallback .wl-rx-rule__n { background: var(--hs-ink-300); }
.wl-rx-rule--orphan { background: rgba(230,70,46,0.04); }
.wl-rx-rule--orphan .wl-rx-rule__n { background: var(--hs-negative-medium); }
.wl-rx-rule.is-none .wl-rx-rule__n { background: var(--hs-ink-300); }

/* v3.5 (D55): the rhythm button next to «Editar na Política», full symmetry */
.wl-rx-rule__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.wl-rx-act { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 1px solid var(--hs-primary-200); border-radius: 8px; background: var(--hs-white); color: var(--hs-primary-400); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; }
.wl-rx-act:hover { background: rgba(0,163,147,0.07); }
.wl-rx-act:focus-visible { outline: 2px solid var(--hs-primary-300); outline-offset: 2px; }
.wl-rx-act.is-own { background: rgba(0,163,147,0.09); }
.wl-rx-act.is-off, .wl-rx-act:disabled { border-style: dashed; border-color: var(--hs-ink-200); background: transparent; color: var(--hs-ink-300); cursor: not-allowed; }
.wl-rx-rule--fallback .wl-rx-strip .wl-rx-cell { cursor: default; }

/* policy-mode knobs + save footer */
.wl-rx-knobs { margin-top: 18px; border-top: 1px solid var(--hs-ink-100); padding-top: 12px; }
.wl-rx-knobs__t { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--hs-ink-900); }
.wl-rx-knobs__note { margin: 4px 0 8px; font-size: 12.5px; color: var(--hs-ink-500); line-height: 1.45; }
.wl-rx-knob { padding: 8px 0; }
.wl-rx-knob__t { font-size: 13px; font-weight: 600; color: var(--hs-ink-700); }
.wl-rx-knob__hint { margin: 4px 0 0; font-size: 12px; color: var(--hs-ink-500); }
.wl-rx-knob.is-off .wl-rx-switch { color: var(--hs-ink-400); cursor: not-allowed; }
.wl-rx-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.wl-rx-foot { display: flex; flex-direction: column; gap: 2px; min-height: 44px; margin-top: 12px; padding: 10px 12px; border-radius: var(--hs-radius-md); background: var(--hs-ink-050); font-size: 12.5px; color: var(--hs-ink-600); }
.wl-rx-foot p { margin: 0; }
.wl-rx-foot.is-blocked .wl-rx-foot__errors { color: var(--hs-negative-dark); font-weight: 600; }

@media (max-width: 720px) {
  .wl-rx-line { grid-template-columns: 1fr; gap: 6px; }
  .wl-rx-line__k { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 0; }
  .wl-rx-line.is-own { margin-left: 0; padding-left: 8px; }
  .wl-rx-rule__head { flex-wrap: wrap; }
  .wl-rx-rule__when { flex-basis: calc(100% - 32px); }
  .wl-rx-then, .wl-rx-rule > .wl-rx-issues, .wl-rx-strip, .wl-rx-rule__foot, .wl-rx-editor--rule { margin-left: 0; }
  /* 390px: the strip 2 × 3 (the 5th cell takes the whole last line) */
  .wl-rx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-rx-strip .wl-rx-cell:last-child { grid-column: 1 / -1; }
  /* mini-cards stacked */
  .wl-mc-group { grid-template-columns: 1fr; }
  /* the twin buttons side by side, on a full line */
  .wl-rx-rule__actions { flex-basis: 100%; margin-left: 0; flex-wrap: nowrap; box-sizing: border-box; }
  .wl-rx-act { flex: 1 1 0; min-width: 0; min-height: 40px; height: auto; padding: 8px 12px; white-space: normal; text-align: center; }
  .wl-rx-chip { flex-wrap: wrap; }
  .wl-rx-chip__axis { white-space: normal; }
}
/* Sofia step — page-scoped kit (HSF-550 U13/U20, KTD15).
   Ported from prototypes/admin-whitelabel-prototype/sofia.html @ 06e2e4b9e (page-local <style>),
   only wizard.css tokens, minus the prototype's state-preview bar and the mock live chat (the
   Testar loads the real widget, which draws its own frame — DV-5). The inline styles of the
   prototype markup became the sf-*__head/__txt/__body classes at the end. Loaded by the step
   partial through content_for :head, not on every module page (webhooks precedent). */

.sf-hide { display: none !important; }
/* abas do passo (HSF-773, D74 — protótipo @ fa69383ef): a peça wl-pagetabs do kit (Auth, Tema, Política). Local só o
   que faltava: a fila rola na horizontal quando não cabe (sem rolar a página), aba fechada, anel de foco por
   dentro e Revoke em vermelho discreto (família do wl-btn--danger), separada das outras por um traço. */
.sf-tabs { max-width: 100%; }
.sf-tablist { position: relative; max-width: 100%; overflow-x: auto; scrollbar-width: thin; vertical-align: top; }
.sf-tablist .wl-pagetab { flex: none; white-space: nowrap; text-decoration: none; }
.sf-tablist .wl-pagetab[aria-disabled="true"],
.sf-tablist .wl-pagetab[aria-disabled="true"]:hover { color: var(--hs-ink-300); background: transparent; cursor: not-allowed; }
/* anel por dentro: a fila rola na horizontal e cortaria o anel de fora */
.sf-tablist .wl-pagetab:focus-visible { outline: 2px solid var(--hs-ink-800); outline-offset: -4px; border-radius: 8px; }
.sf-tabs__sep { flex: none; align-self: center; width: 1px; height: 20px; margin: 0 4px; background: var(--hs-ink-100); }
.sf-tablist .sf-tab--revoke { color: var(--hs-negative-dark); }
.sf-tablist .sf-tab--revoke:hover { background: #fdf3f1; color: var(--hs-negative-dark); }
.sf-tablist .sf-tab--revoke.is-active { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.sf-tabs__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--hs-ink-400); }
@media (max-width: 560px) {
  .sf-tablist { display: flex; }
  .sf-tablist .wl-pagetab { padding: 9px 14px; }
}

/* interruptor no topo: badge + frase + Ligar/Desligar (+ Testar) */
.sf-state { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sf-state__txt { flex: 1 1 260px; min-width: 0; }
.sf-state__line { margin: 8px 0 0; font-size: 14px; color: var(--hs-ink-600); line-height: 1.5; }
.sf-state__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sf-badge--info { background: var(--hs-info-soft); color: #0a4a7a; }
.sf-big { min-height: 44px; padding-left: 20px; padding-right: 20px; }
.sf-big svg { height: 16px; width: 16px; }

/* prontidão: checklist do kit + detalhe quando ok */
.sf-ready .wl-checklist__item { align-items: flex-start; }
.sf-ready .wl-checklist__reason { color: var(--hs-ink-500); }
.sf-ready .is-pending .wl-checklist__reason { color: var(--hs-warning-dark); }
.sf-ready code, .sf-code-inline { font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 4px;
  padding: 1px 5px; color: var(--hs-ink-800); overflow-wrap: anywhere; }
.sf-ready .wl-checklist__resolve { min-height: 32px; display: inline-flex; align-items: center; }

/* partner-app (antes de ligar) e escolha da operação (2+ no engine) */
.sf-app { margin-top: 16px; max-width: 620px; }
.sf-apptext { font-size: 14px; color: var(--hs-ink-800); line-height: 1.5; overflow-wrap: anywhere; }
/* lista de partner-apps: mesmo padrão da etapa Auth (wl-choice + chips), só os que a Sofia pode usar */
.sf-apps { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.sf-apps legend { padding: 0; }
.sf-approw__body { flex: 1; min-width: 0; }
.sf-approw__body > span { display: block; }
.sf-approw__body > .sf-approw__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-chip-pub { background: var(--hs-positive-soft); color: var(--hs-positive-dark); border-color: transparent; }
.sf-excluded { margin: 10px 0 0; font-size: 12.5px; color: var(--hs-ink-400); line-height: 1.45; }
.sf-excluded a, .sf-appempty a { font-weight: 600; color: var(--hs-primary-200); white-space: nowrap; }
.sf-ops { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; display: grid; gap: 8px; max-width: 620px; }
.sf-ops legend { padding: 0; }
.sf-op { align-items: center; }
.sf-op input { margin-top: 0; }
.sf-op__body { flex: 1; min-width: 0; }
.sf-op__body > span { display: block; }
.sf-op__eng { flex: none; font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.sf-op__eng svg { height: 13px; width: 13px; }
.sf-readnow { font-size: 12px; color: var(--hs-ink-400); }
.sf-readnow i { font-style: normal; border-bottom: 1px dotted var(--hs-ink-300); }
.sf-why { margin: 12px 0 0; font-size: 12.5px; color: var(--hs-warning-dark); line-height: 1.45; }
.sf-go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.sf-swap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hs-ink-100); }
.sf-swap__note { margin: 6px 0 0; font-size: 12.5px; color: var(--hs-ink-500); line-height: 1.45; }
.sf-ready button.wl-checklist__resolve { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
/* onde o código funciona (domínios permitidos do partner-app) */
.sf-where { margin-top: 14px; }
.sf-where__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--hs-ink-700); }
.sf-where__head strong { color: var(--hs-ink-900); }
.sf-where__head a { font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); }
.sf-where ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.sf-caption { display: block; margin-top: 6px; font-size: 12px; color: var(--hs-ink-400); }

/* ligando: passos */
.sf-steps { list-style: none; margin: 0; padding: 0; }
.sf-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--hs-ink-100); }
.sf-steps li:first-child { border-top: 0; padding-top: 0; }
.sf-stepmark { display: inline-grid; place-items: center; height: 24px; width: 24px; flex: none; border-radius: 50%;
  font-size: 11.5px; font-weight: 700; background: var(--hs-ink-050); color: var(--hs-ink-400); border: 1px solid var(--hs-ink-100); }
.sf-stepmark svg { height: 13px; width: 13px; }
.is-ok > .sf-stepmark { background: var(--hs-positive-soft); color: var(--hs-positive-dark); border-color: transparent; }
.is-failed > .sf-stepmark { background: var(--hs-negative-soft); color: var(--hs-negative-dark); border-color: transparent; }
.is-running > .sf-stepmark { border: 2px solid var(--hs-primary-000); border-top-color: var(--hs-primary-200);
  background: #fff; animation: sf-spin .8s linear infinite; }
.sf-step__t { font-size: 14px; font-weight: 600; color: var(--hs-ink-900); }
.sf-step__s { display: block; margin-top: 1px; font-size: 12.5px; color: var(--hs-ink-400); }
.is-failed .sf-step__s { color: var(--hs-negative-dark); }
.is-ok .sf-step__s { color: var(--hs-positive-dark); }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-running > .sf-stepmark { animation: none; } }

/* o chat — mesma peça na prévia e no Testar (é o mesmo widget do portal) */
.sf-stage { position: relative; border-radius: var(--hs-radius-md); padding: 18px 18px 86px;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(1,2,4,.035) 22px 23px),
    var(--hs-ink-050);
  border: 1px solid var(--hs-ink-100); overflow: hidden; }
.sf-stage__page { font-size: 11.5px; color: var(--hs-ink-400); margin-bottom: 12px; overflow-wrap: anywhere; }
.sf-chat { width: 100%; max-width: 340px; margin-left: auto; background: #fff; border-radius: 16px;
  box-shadow: var(--hs-shadow-lg); overflow: hidden; border: 1px solid var(--hs-ink-100); }
.sf-chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; }
.sf-chat__av { display: grid; place-items: center; height: 32px; width: 32px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.22); font-weight: 700; font-size: 14px; }
.sf-chat__name { display: block; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; }
.sf-chat__sub { font-size: 11.5px; opacity: .9; }
.sf-chat__x { margin-left: auto; opacity: .85; font-size: 20px; line-height: 1; background: none; border: 0;
  color: inherit; cursor: pointer; padding: 4px 6px; font-family: inherit; }
.sf-chat__body { padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.sf-chat__msg { align-self: flex-start; max-width: 88%; padding: 9px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); font-size: 13px; line-height: 1.45;
  color: var(--hs-ink-800); overflow-wrap: anywhere; }
.sf-chat__msg.is-me { align-self: flex-end; border-radius: 14px 14px 4px 14px; color: #fff; border-color: transparent; }
.sf-chat__in { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hs-ink-100); }
.sf-chat__field { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--hs-ink-800); padding: 8px 12px;
  border: 1px solid var(--hs-ink-100); border-radius: 999px; background: #fff; }
.sf-chat__field--fake { color: var(--hs-ink-300); }
.sf-chat__send { display: grid; place-items: center; height: 34px; width: 34px; flex: none; border-radius: 50%;
  color: #fff; border: 0; cursor: pointer; }
.sf-chat__send svg { height: 15px; width: 15px; }
.sf-launcher { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center;
  height: 54px; width: 54px; border-radius: 50%; color: #fff; box-shadow: 0 8px 22px rgba(1,2,4,.22); border: 0; }
.sf-launcher svg { height: 24px; width: 24px; }
.sf-swatch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--hs-ink-500); }
.sf-swatch i { display: inline-block; height: 14px; width: 14px; border-radius: 4px; border: 1px solid rgba(1,2,4,.12); }

/* o <script> de copiar e colar (D2: um bloco, um botão, zero texto) */
.sf-snippet { position: relative; margin: 0; padding: 14px 14px 58px; border-radius: var(--hs-radius-md);
  background: var(--hs-ink-800); color: #E1E4E9; font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-snippet .t { color: #9EA3A9; }
.sf-snippet .a { color: #00E0CA; }
.sf-snippet .v { color: #F7E8CE; }
.sf-snippet__copy { position: absolute; right: 10px; bottom: 10px; min-height: 38px; font-family: var(--hs-font); }

/* o que foi provisionado (tabela 1:1 da Sofia no módulo WL; só dado imutável) */
.sf-prov { display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; margin: 0; }
.sf-prov dt { font-size: 12.5px; font-weight: 600; color: var(--hs-ink-500); padding-top: 1px; }
.sf-prov dd { margin: 0; font-size: 14px; color: var(--hs-ink-800); min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.sf-prov__sub { display: block; font-size: 12.5px; color: var(--hs-ink-400); margin-top: 1px; }
.sf-id { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--hs-ink-700);
  background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 4px; padding: 1px 5px; }
.sf-yes { color: var(--hs-positive-dark); font-weight: 600; }
.sf-no { color: var(--hs-negative-dark); font-weight: 600; }
.sf-err { color: var(--hs-negative-dark); }
.sf-provhead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sf-provhead > div { flex: 1 1 220px; min-width: 0; }
.sf-ext svg { height: 14px; width: 14px; }
.sf-raw { margin-top: 18px; }
.sf-raw .wl-ovgroup__sum { font-size: 13px; }
.sf-rawkv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.sf-rawkv dt { color: var(--hs-ink-500); }
.sf-rawkv dd { margin: 0; color: var(--hs-ink-900); min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sf-rawkv .is-null { color: var(--hs-ink-300); }
@media (max-width: 480px) {
  .sf-prov, .sf-rawkv { grid-template-columns: 1fr; gap: 2px; }
  .sf-prov dd + dt { margin-top: 12px; }
  .sf-rawkv dd + dt { margin-top: 8px; }
}

/* zona de perigo */
.sf-danger { border-color: var(--hs-negative-soft); }
.sf-danger .wl-card__icon { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

@media (max-width: 560px) {
  .sf-state__acts, .sf-go { width: 100%; }
  .sf-state__acts:empty { display: none; }
  .sf-op { flex-wrap: wrap; row-gap: 2px; }
  .sf-op__body { flex: 1 1 calc(100% - 40px); }
  .sf-op__eng { margin-left: 28px; min-height: 28px; }
  .sf-state__acts .wl-btn, .sf-go .wl-btn, .sf-provhead .wl-btn { flex: 1 1 100%; justify-content: center; }
  .wl-card__header { flex-wrap: wrap; }
  /* grid do kit (22px 1fr auto): no celular o link desce para a linha de baixo */
  .sf-ready .wl-checklist__item { grid-template-columns: 22px 1fr; row-gap: 2px; }
  .sf-ready .wl-checklist__resolve { grid-column: 2; margin-top: 0; }
}

/* the prototype's inline styles, as classes */
.sf-state__head { margin-top: 0; gap: 10px; }
.sf-state__title { margin: 0; }
.sf-ready__txt { flex: 1; min-width: 0; }
.sf-provhead-wrap { flex: 1; min-width: 0; }
.sf-danger__body { margin: 0; font-size: 13.5px; color: var(--hs-ink-600); line-height: 1.5; }
.sf-swatch-row { gap: 12px; }
/* button_to / form_with wrappers must not add their own box */
.sf-form { margin: 0; }
@media (max-width: 560px) {
  .sf-state__acts .sf-form, .sf-go .sf-form { flex: 1 1 100%; }
  .sf-state__acts .sf-form .wl-btn, .sf-go .sf-form .wl-btn { width: 100%; justify-content: center; }
}

/* "Animação" (D50, HSF-742): the checked radio in the kit's accent, as in the approved prototype. The
   @tailwindcss/forms reset draws radios itself (appearance: none, fill = currentColor), so the wizard's
   `.wl-choice input { accent-color }` alone leaves the browser blue here; color and ring carry the token. */
.sf-motion .wl-choice input[type="radio"] { color: var(--hs-primary-200); accent-color: var(--hs-primary-200); --tw-ring-color: var(--hs-primary-200); }

/* "Onde a Sofia aparece" (D72, HSF-773): the whitelabel's domains, each with its switch — 1:1 with the prototype
   (sofia.html @4d233351e). Row = the kit's wl-cap (the Fluxo step's piece); tags = the "Acesso do portal" precedent. */
.sf-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.sf-tags .wl-tag { margin-left: 0; }
.sf-hosts__help { margin: 0 0 14px; font-size: 14px; color: var(--hs-ink-600); line-height: 1.5; max-width: 640px; }
.sf-hosts { display: grid; gap: 8px; max-width: 720px; border: 0; margin: 0; padding: 0; min-width: 0; }
/* D74: "Domínio de teste" lives on the Domínios step; here the chip is read-only, with the link there (sofia.html @fa69383ef) */
.sf-host { flex-direction: column; align-items: stretch; gap: 4px; cursor: default; }
.sf-host__main { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.sf-host .wl-switch { margin-top: 0; }
.sf-chip-test { background: var(--hs-warning-soft); color: var(--hs-warning-dark); border-color: transparent; }
.sf-host__testlink { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); display: inline-flex; align-items: center; min-height: 32px; }
.sf-host__body { flex: 1; min-width: 0; }
.sf-host__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-host__name { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; font-weight: 500;
  color: var(--hs-ink-900); overflow-wrap: anywhere; }
.sf-host.is-off .sf-host__name { color: var(--hs-ink-500); }
.sf-host__sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--hs-ink-400); line-height: 1.45; }
.sf-host__state { flex: none; font-size: 12.5px; font-weight: 600; color: var(--hs-primary-300); min-width: 72px; text-align: right; }
.sf-host.is-off .sf-host__state { color: var(--hs-ink-400); }
.sf-chip-primary { background: var(--hs-primary-000, #e6f6f4); color: var(--hs-primary-300); border-color: transparent; }
.sf-hosts__sum { margin: 12px 0 0; font-size: 13px; color: var(--hs-ink-600); line-height: 1.45; }
.sf-hosts__none { margin-top: 12px; max-width: 720px; }
.sf-hosts__add { font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 560px) {
  .sf-host { gap: 4px; padding: 12px 14px; }
  .sf-host__main { gap: 12px; }
  .sf-host__state { display: none; }
  .sf-hosts-go .wl-btn { flex: 1 1 100%; justify-content: center; }
}
/* D107 (HSF-829): before turning on, the steps — the chat app filtered by the marked domains, the ones that do not
   serve greyed out with their reason, the read-only login of each company (sofia.html @e4947f273). */
.sf-step { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hs-primary-300); margin-bottom: 2px; }
.sf-approw.is-off { opacity: .62; cursor: not-allowed; }
.sf-approw.is-off input { cursor: not-allowed; }
.sf-approw__why { display: block; margin-top: 3px; font-size: 12.5px; color: var(--hs-warning-dark); line-height: 1.45; }
.sf-approw__why a { font-weight: 600; color: var(--hs-primary-200); }
.sf-apps--off { margin-top: 16px; }
.sf-appcard { max-width: 620px; }
.sf-hosts__dirty { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--hs-warning-dark); line-height: 1.45; }
.sf-host__warn { font-size: 12.5px; color: var(--hs-warning-dark); line-height: 1.45; }
.sf-cos { display: grid; gap: 8px; max-width: 720px; }
.sf-co { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 12px 14px; background: var(--hs-white); }
.sf-co.is-missing { border-color: var(--hs-negative-medium); background: var(--hs-negative-soft); }
.sf-co__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-co__name { font-weight: 600; font-size: 14px; color: var(--hs-ink-800); }
.sf-co__line { margin: 6px 0 0; font-size: 13.5px; color: var(--hs-ink-700); line-height: 1.5; overflow-wrap: anywhere; }
.sf-co.is-missing .sf-co__line { color: var(--hs-negative-dark); font-weight: 600; }
.sf-co__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--hs-ink-500); line-height: 1.45; }
.sf-co a { font-weight: 600; color: var(--hs-primary-200); white-space: nowrap; }
.sf-otp-on { background: var(--hs-positive-soft); color: var(--hs-positive-dark); border-color: transparent; }
.sf-otp-off { background: var(--hs-ink-050); color: var(--hs-ink-600); }
.sf-logins__alert { margin-bottom: 12px; max-width: 720px; }
/* Catálogo › Provedores de identidade and Auth › Entrada pelo parceiro (HSF-1959, prototype `provedores.html` / `assets/sso.css`): only what the wizard
   kit (whitelabel_wizard.css) lacks. The mode-dependent fields are shown by the radio picked (`:has`), never removed. */
.sso-badge--testing { background: var(--hs-info-soft); color: var(--hs-info-dark); }
.sso-badge--blocked { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.sso-sub { font-size: 13px; font-weight: 600; color: var(--hs-ink-800); margin: 0 0 4px; }
.sso-block__desc { margin: 0 0 12px; }
.sso-block + .sso-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hs-ink-100); }
.sso-field { margin: 0; }
.sso-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .sso-grid--2 { grid-template-columns: 1fr 1fr; } }
.sso-mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.sso-ro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--hs-ink-700); }
.sso-ro + .sso-ro { margin-top: 6px; }
.sso-ro .sso-mono { background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 6px; padding: 5px 9px; word-break: break-all; user-select: all; }
.sso-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sso-chip-x { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--hs-ink-050);
  border: 1px solid var(--hs-ink-100); border-radius: 999px; padding: 3px 10px; color: var(--hs-ink-800); }
.sso-chip-x--locked { background: #fff; color: var(--hs-ink-500); font-family: ui-monospace, Menlo, monospace; }
.sso-choice__text { flex: 1; min-width: 0; }
.sso-choice__text .wl-choice__title { display: block; }
.sso-secret { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sso-secret .wl-input { width: 100%; }
.sso-probe { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--hs-radius-md); padding: 14px 16px; border: 1px solid var(--hs-ink-100); }
.sso-probe__title { font-weight: 600; font-size: 14px; margin: 0; }
.sso-probe__text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.sso-probe__meta { margin: 6px 0 0; font-size: 12px; opacity: .85; }
.sso-probe--muted { background: var(--hs-ink-050); color: var(--hs-ink-600); }
.sso-probe--info { background: var(--hs-info-soft); color: var(--hs-info-dark); border-color: transparent; }
.sso-probe--success { background: var(--hs-positive-soft); color: var(--hs-positive-dark); border-color: transparent; }
.sso-probe--danger { background: var(--hs-negative-soft); color: var(--hs-negative-dark); border-color: transparent; }
.sso-probe--blocked { background: var(--hs-warning-soft); color: var(--hs-warning-dark); border-color: transparent; }
.sso-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sso-spacer { flex: 1; min-width: 240px; margin: 0; }
.sso-danger { color: var(--hs-negative-dark); }
.sso-mode-note { margin-top: 10px; }
.sso-fold > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--hs-ink-700); list-style: none; }
.sso-fold > summary::before { content: "▸ "; color: var(--hs-ink-400); }
.sso-fold[open] > summary::before { content: "▾ "; }
.sso-fold > div { margin-top: 12px; }
.sso-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-md); background: #fff; text-decoration: none; }
.sso-row:hover { border-color: var(--hs-primary-200); }
.sso-row + .sso-row { margin-top: 10px; }
.sso-row__logo { height: 36px; width: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: var(--hs-ink-700); font-weight: 700; font-size: 14px; flex: none; }
.sso-row__main { min-width: 0; flex: 1; }
.sso-row__title { font-weight: 600; color: var(--hs-ink-900); font-size: 14.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sso-row__sub { display: block; font-size: 12.5px; color: var(--hs-ink-400); margin-top: 2px; }
.sso-row__host { color: var(--hs-ink-400); }
/* Mode-dependent parts: hidden unless their radio is the one picked. */
.sso-mode { display: none; }
.sso-modes:has(input[value="direct"]:checked) .sso-mode--direct,
.sso-modes:has(input[value="relay"]:checked) .sso-mode--relay,
.sso-modes:has(input[value="browser"]:checked) .sso-mode--browser { display: block; }
.sso-client .sso-secret--public { display: none; }
.sso-client:has(input[value="none"]:checked) .sso-secret--public { display: flex; }
.sso-client:has(input[value="none"]:checked) .sso-secret--sealed { display: none; }
/* Auth › «Entrada pelo parceiro (SSO)» (HSF-1959 B2, prototype `auth.html#sso`). */
.sso-status { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sso-status__note { margin: 0; }
.sso-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sso-grow { flex: 1; min-width: 240px; }
.sso-narrow { max-width: 220px; }
.sso-hint-inline { margin: 0; }
.sso-entries { margin-bottom: 4px; }
.sso-row.is-on { border-color: var(--hs-primary-200); box-shadow: 0 0 0 3px rgba(0, 163, 147, .12); }
.sso-locale + .sso-locale { margin-top: 14px; }
.sso-locale[hidden] { display: none; }
.sso-locale-tabs { display: inline-flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.sso-locale-tabs[hidden] { display: none; }
.sso-locale-tabs button { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--hs-ink-100);
  background: #fff; color: var(--hs-ink-500); border-radius: 999px; padding: 3px 10px; }
.sso-locale-tabs button.is-on { background: var(--hs-ink-800); color: #fff; border-color: var(--hs-ink-800); }
.sso-login { border: 1px solid var(--hs-ink-100); border-radius: 14px; background: #fff; padding: 22px 20px; max-width: 340px; }
.sso-login__brand { font-weight: 700; font-size: 15px; color: var(--hs-ink-900); }
.sso-login__lead { font-size: 12.5px; color: var(--hs-ink-500); margin: 4px 0 14px; }
.sso-login__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 10px;
  padding: 11px 14px; font-size: 14px; font-weight: 600; border: 1px solid var(--hs-ink-200); background: #fff; color: var(--hs-ink-900); }
.sso-login__btn--primary { background: var(--hs-ink-800); border-color: var(--hs-ink-800); color: #fff; }
.sso-login__btn svg { height: 16px; width: 16px; }
.sso-login__btn svg[hidden] { display: none; }
.sso-login__off { font-size: 12px; color: var(--hs-ink-400); text-align: center; border: 1px dashed var(--hs-ink-200); border-radius: 10px;
  padding: 10px; margin: 12px 0 0; }
.sso-check { list-style: none; margin: 0; padding: 0; }
.sso-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--hs-ink-700); padding: 7px 0; }
.sso-check li + li { border-top: 1px dashed var(--hs-ink-100); }
.sso-check__mark { flex: none; width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.sso-check__mark--ok { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.sso-check__mark--no { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.sso-check__mark--wait { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.sso-check small { display: block; color: var(--hs-ink-400); font-size: 12px; margin-top: 2px; }
@media (max-width: 560px) {
  .sso-actions .wl-btn { width: 100%; justify-content: center; }
  .sso-row { flex-wrap: wrap; }
}

/* HSF-1959 G10: the one-shot result of «Testar login com conta do parceiro» (masked claims). */
.sso-test-result { margin-top: 12px; border: 1px solid var(--hs-ink-100); border-radius: 10px; padding: 12px 14px; }
.sso-test-result--approved { border-color: var(--hs-positive-soft); background: var(--hs-positive-soft); }
.sso-test-result--refused { border-color: var(--hs-warning-soft); background: var(--hs-warning-soft); }
.sso-claims { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 6px 0 0; font-size: 13px; }
.sso-claims dt { margin: 0; overflow-wrap: anywhere; }
.sso-claims dd { margin: 0; color: var(--hs-ink-700); overflow-wrap: anywhere; }
/* Tema geral › Textos (HSF-1111 U47; ported from the approved prototype assets/theme-texts.css) — the page reuses the rows of the
 * step «Tema da plataforma» (whitelabel_platform_theme.css / whitelabel_platform_texts.css: pt-grp, pt-sub, pt-row…); this file
 * lays out the columns (pages · texts · preview) and the lines particular to this door. 390 px: nothing scrolls sideways. */
.tg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 24px; }
@media (min-width: 1024px) { .tg-grid { grid-template-columns: 264px minmax(0, 1fr); } }
.tg-main, .tg-cols, #text-panes, .tg-body, .tg-row { min-width: 0; }
.tg-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.tg-pv { display: none; min-width: 0; }
.tg-mtabs { display: none; margin-bottom: 14px; }

/* AD6: the list of pages is a <select> under 1024 px (the buttons above it) */
.tg-pagesel { display: block; }
.tg-pagesel .wl-select { width: 100%; }
.tg-nav { display: none; }
@media (min-width: 1024px) { .tg-nav { display: block; } .tg-pagesel { display: none; } }
.tg-legend { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0 4px; }
.tg-legend__dot { position: static; display: inline-block; flex: none; }
#text-panes .wl-textpane { scroll-margin-top: 84px; }

/* wide: the preview is a third column; narrower: Editar / Prévia, as the step does under 1240 px */
@media (min-width: 1500px) {
  .tg-cols.has-pv { grid-template-columns: minmax(0, 1fr) 360px; }
  .tg-cols.has-pv .tg-pv { display: block; position: sticky; top: 84px; }
  /* HSF-1641 S-A1: a sticky column is a layer of its own; while the preview is expanded it lets the overlay go above the admin's header */
  .tg-cols.has-pv .tg-pv:has(.wl-pv.is-expanded) { position: static; }
}
@media (max-width: 1499px) {
  .tg-main.has-pv .tg-mtabs { display: inline-flex; }
  .tg-main.has-pv[data-mtab="preview"] #text-panes { display: none; }
  .tg-main.has-pv[data-mtab="preview"] .tg-pv { display: block; }
}
.tg-pv .wl-pv { position: static; }
.tg-pvbar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tg-pvbar[hidden] { display: none; }
.tg-pvbar__head { display: flex; align-items: center; gap: 6px; }
.tg-pvbar__head .wl-label { margin: 0; }
.tg-pvbar .wl-select { width: 100%; }
.tg-pvnote { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--hs-radius-md); background: var(--hs-warning-soft); color: var(--hs-warning-dark); font-size: 12.5px; line-height: 1.45; }
.tg-pvnote[hidden] { display: none; }
.tg-pvdraft { margin: 10px 0 0; }

.tg-body { display: flex; flex-direction: column; gap: 10px; }
.tg-body > .pt-rows, .tg-body > .pt-grp { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: #fff; }
.tg-pagesum { margin: 0; font-size: 13px; line-height: 1.5; color: var(--hs-ink-600); }
.tg-body > .pt-linesnote { border: 1px dashed var(--hs-ink-100); border-radius: var(--hs-radius-md); }
/* the system default is always written under the field here (the placeholder alone is not enough to compare) */
.tg-row.pt-row .pt-row__inh[data-sys] { display: block; }
.tg-row .pt-row__name, .tg-row .pt-row__where { overflow-wrap: anywhere; }
.tg-row .wl-textarea { width: 100%; max-width: 100%; }
.tg-row.is-target .wl-textarea { box-shadow: 0 0 0 3px rgba(0,163,147,.25); border-color: var(--hs-primary-200); }
.tg-row .wl-textarea[readonly] { background: var(--hs-ink-050); color: var(--hs-ink-500); cursor: not-allowed; }
.tg-row .pt-row__head { flex-wrap: wrap; }
.tg-over { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-600); overflow-wrap: anywhere; }
.tg-over > span:first-child { font-weight: 600; }
.tg-over__link { font-weight: 600; }
.tg-over__val { color: var(--hs-ink-500); }
.tg-shadow { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--hs-radius-md); background: var(--hs-warning-soft); color: var(--hs-warning-dark); font-size: 12.5px; line-height: 1.45; }
.tg-shadow[hidden] { display: none; }
@media (max-width: 640px) { .tg-row .pt-pair { grid-template-columns: minmax(0, 1fr); } }
.wl-textnav__key { font-family: inherit; }
.wl-textpane .wl-card__desc a, .tg-body a { color: var(--hs-primary-400); font-weight: 600; text-decoration: none; }
.wl-textpane .wl-card__desc a:hover, .tg-body a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ─────────────────────────────────────────────────────────────
   Whitelabel Admin Wizard — shared component kit (PROTOTYPE)
   Brand tokens lifted verbatim from the hiSofi design system
   (docs .../Whitelabel - Autosserviço/assets/colors_and_type.css).
   Plain CSS so it is openable on file:// and trivially portable to
   the Rails/Tailwind app. Layout = Tailwind utilities; the .wl-*
   classes below are the reusable pieces every step shares.
   ───────────────────────────────────────────────────────────── */

:root {
  --hs-primary-000: #BAFFFA;
  --hs-primary-100: #00E0CA;
  --hs-primary-200: #00A393;
  --hs-primary-300: #00897C;
  --hs-primary-400: #00736A;

  --hs-ink-900: #010204;
  --hs-ink-800: #1C1D1F;
  --hs-ink-700: #27282C;
  --hs-ink-600: #454C54;
  --hs-ink-500: #5B626A;
  --hs-ink-400: #717880;
  --hs-ink-300: #9EA3A9;
  --hs-ink-200: #CACDD4;
  --hs-ink-100: #E1E4E9;
  --hs-ink-050: #F7F8FA;
  --hs-white: #FFFFFF;

  --hs-info-dark: #038EFF;     --hs-info-soft: #B7F2FB;
  --hs-positive-dark: #066E37; --hs-positive-medium: #26BF6E; --hs-positive-soft: #C9F5DE;
  --hs-warning-dark: #9F6706;  --hs-warning-medium: #FFB127;  --hs-warning-soft: #F7E8CE;
  --hs-negative-dark: #871E0E; --hs-negative-medium: #E6462E; --hs-negative-soft: #F8D3CD;

  --hs-font: "Inter Tight", system-ui, sans-serif;
  --hs-font-alt: "Istok Web", Georgia, serif;

  --hs-radius-sm: 4px;
  --hs-radius-md: 8px;
  --hs-radius-lg: 16px;

  --hs-shadow-sm: 0 1px 2px rgba(1,2,4,0.05);
  --hs-shadow-md: 0 2px 5px rgba(1,2,4,0.10);
  --hs-shadow-lg: 0 12px 32px rgba(1,2,4,0.10);

  --hs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hs-dur: 180ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--hs-font);
  color: var(--hs-ink-800);
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(0,224,202,0.07), transparent 60%),
    var(--hs-ink-050);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--hs-primary-200); text-decoration: none; }
a:hover { color: var(--hs-primary-300); }

:focus-visible {
  outline: 2px solid var(--hs-primary-200);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── App shell layout ─────────────────────────────────────────── */
.wl-app { min-height: 100vh; }

.wl-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 32px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hs-ink-100);
}
.wl-header__brand { display: flex; align-items: center; gap: 10px; }
.wl-header__brand svg { display: block; height: 22px; width: auto; }
.wl-header__divider { width: 1px; height: 26px; background: var(--hs-ink-100); }

.wl-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wl-identity__logo {
  display: grid; place-items: center;
  height: 36px; width: 36px; flex: none;
  border-radius: 10px; color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), var(--hs-shadow-sm);
}
.wl-identity__name { font-weight: 600; font-size: 15px; line-height: 1.1; color: var(--hs-ink-900); }
.wl-identity__sub { font-size: 12px; color: var(--hs-ink-400); }

.wl-header__spacer { flex: 1; }

.wl-main { max-width: 1280px; }
.wl-shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 36px;
  padding: 28px 32px 80px;
}
@media (max-width: 900px) {
  .wl-shell { grid-template-columns: 1fr; gap: 20px; }
}

.wl-breadcrumb {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--hs-ink-500);
  padding: 6px 4px; margin-bottom: 14px;
  transition: color var(--hs-dur) var(--hs-ease);
}
.wl-breadcrumb:hover { color: var(--hs-ink-800); }
.wl-breadcrumb svg { height: 15px; width: 15px; }

/* ── Rail ─────────────────────────────────────────────────────── */
.wl-rail {
  position: sticky; top: 92px;
  background: var(--hs-white);
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-sm);
  padding: 10px;
}
/* HSF-2637: below 1024 px the panel stacks the rail over the step (`flex-col lg:flex-row`), and the rail is taller
   than a phone. Pinned, it covered the step and took its clicks («Provar», the password card); it scrolls with the
   page instead, and stays pinned only beside the step. */
@media (max-width: 1023px) {
  .wl-rail { position: static; }
}
.wl-rail__title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hs-ink-400); padding: 8px 10px 10px;
}
.wl-rail__list { list-style: none; margin: 0; padding: 0; position: relative; }

.wl-step {
  position: relative;
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start;
  width: 100%; text-align: left;
  padding: 10px 10px; border-radius: var(--hs-radius-md);
  color: var(--hs-ink-600); background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 14px;
  transition: background var(--hs-dur) var(--hs-ease), color var(--hs-dur) var(--hs-ease);
}
.wl-step:hover { background: var(--hs-ink-050); }

/* connector line between markers */
.wl-step::before {
  content: ""; position: absolute; left: 23px; top: 34px; bottom: -8px;
  width: 2px; background: var(--hs-ink-100);
}
.wl-step:last-child::before { display: none; }

.wl-step__marker {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  height: 28px; width: 28px; border-radius: 50%;
  font-size: 12px; font-weight: 600;
  background: var(--hs-white); color: var(--hs-ink-400);
  box-shadow: inset 0 0 0 2px var(--hs-ink-200);
  z-index: 1;
}
.wl-step__label { font-weight: 500; color: var(--hs-ink-700); line-height: 1.3; }
.wl-step__hint {
  display: block; margin-top: 3px; font-size: 12px; line-height: 1.4;
  color: var(--hs-ink-400);
}
.wl-step__resolve {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--hs-primary-200);
}
.wl-step__resolve svg { height: 12px; width: 12px; }
/* HSF-2627 — the rail's resolve link is a sibling of the step anchor (never nested), so it is lined up under the
   label as in the prototype: step padding 10px + marker 28px + gap 12px, tucked into the step's bottom padding. */
.wl-rail__list > li > .wl-step__resolve { margin: -6px 0 6px 50px; }

/* state: complete — number kept; teal ring signals done, check sits on the right */
.wl-step.is-complete .wl-step__marker {
  background: #fff; color: var(--hs-primary-200); box-shadow: inset 0 0 0 2px var(--hs-primary-200);
}
/* state: active — filled teal "you are here" (wins over complete) */
.wl-step.is-active {
  background: linear-gradient(180deg, rgba(0,163,147,0.10), rgba(0,163,147,0.05));
  box-shadow: inset 2px 0 0 var(--hs-primary-200);
}
.wl-step.is-active .wl-step__label { color: var(--hs-ink-900); font-weight: 600; }
.wl-step.is-active .wl-step__marker { background: var(--hs-primary-200); color: #fff; box-shadow: none; }

/* state: invalid — amber ring on the number, amber dot on the right */
.wl-step.is-invalid .wl-step__marker {
  background: #fff; color: var(--hs-warning-dark);
  box-shadow: inset 0 0 0 2px var(--hs-warning-medium);
}
.wl-step.is-invalid .wl-step__hint { color: var(--hs-warning-dark); }

/* right-side status indicator */
.wl-step__status { display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; }
.wl-step__status svg { height: 16px; width: 16px; }
.wl-step__status.is-ok { color: var(--hs-positive-medium); }
.wl-step__status.is-lock { color: var(--hs-ink-300); }
.wl-step__status.is-warn { height: 9px; width: 9px; border-radius: 50%; background: var(--hs-warning-medium); margin-top: 9px; }
.wl-step.is-disabled .wl-tag { margin-top: 3px; }

/* state: blocked (depends_on unmet) — not clickable, no resolve link */
.wl-step.is-blocked { cursor: not-allowed; }
.wl-step.is-blocked:hover { background: transparent; }
.wl-step.is-blocked .wl-step__marker {
  background: var(--hs-ink-050); color: var(--hs-ink-300); box-shadow: inset 0 0 0 2px var(--hs-ink-100);
}
.wl-step.is-blocked .wl-step__label { color: var(--hs-ink-400); }

/* state: disabled (coming soon) */
.wl-step.is-disabled { cursor: not-allowed; }
.wl-step.is-disabled:hover { background: transparent; }
.wl-step.is-disabled .wl-step__marker { background: var(--hs-ink-050); color: var(--hs-ink-300); box-shadow: inset 0 0 0 2px var(--hs-ink-100); }
.wl-step.is-disabled .wl-step__label { color: var(--hs-ink-300); }

.wl-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; background: var(--hs-ink-100); color: var(--hs-ink-500);
}

/* ── Page heading ─────────────────────────────────────────────── */
.wl-page__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--hs-primary-200);
}
.wl-page__eyebrow::before { content: "/ "; color: var(--hs-primary-200); }
.wl-page__title { margin: 6px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--hs-ink-900); }
.wl-page__lead { margin: 8px 0 0; max-width: 60ch; font-size: 14.5px; color: var(--hs-ink-500); line-height: 1.55; }

/* ── Card ─────────────────────────────────────────────────────── */
.wl-card {
  background: var(--hs-white);
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-sm);
  overflow: hidden;
}
.wl-card__header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--hs-ink-100);
}
.wl-card__icon {
  display: grid; place-items: center; height: 32px; width: 32px; flex: none;
  border-radius: 9px; background: var(--hs-primary-000); color: var(--hs-primary-300);
}
.wl-card__icon svg { height: 17px; width: 17px; }
.wl-card__title { font-size: 15px; font-weight: 600; color: var(--hs-ink-900); }
.wl-card__desc { font-size: 12.5px; color: var(--hs-ink-400); margin-top: 1px; }
.wl-card__body { padding: 20px; }
.wl-card__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; background: var(--hs-ink-050); border-top: 1px solid var(--hs-ink-100);
}
.wl-card__footer .wl-spacer { margin-right: auto; font-size: 12.5px; color: var(--hs-ink-400); }

/* ── Form fields ──────────────────────────────────────────────── */
.wl-field { display: block; }
.wl-field + .wl-field { margin-top: 18px; }
.wl-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--hs-ink-700); margin-bottom: 6px;
}
.wl-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--hs-ink-400); line-height: 1.45; }
.wl-counter { font-size: 11px; font-weight: 500; color: var(--hs-ink-400); }
.wl-counter.is-over { color: var(--hs-negative-dark); }
.wl-robots { display: inline-block; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--hs-ink-500); }

.wl-input, .wl-select, .wl-textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--hs-ink-900);
  background: var(--hs-white);
  border: 1px solid var(--hs-ink-200); border-radius: var(--hs-radius-md);
  padding: 9px 12px;
  transition: border-color var(--hs-dur) var(--hs-ease), box-shadow var(--hs-dur) var(--hs-ease);
}
.wl-input::placeholder { color: var(--hs-ink-300); }
.wl-input:focus, .wl-select:focus, .wl-textarea:focus {
  outline: none; border-color: var(--hs-primary-200);
  box-shadow: 0 0 0 3px rgba(0,163,147,0.16);
}
.wl-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23717880'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
  padding-right: 38px;
}
.wl-input-affix { position: relative; display: flex; align-items: center; }
.wl-input-affix__suffix {
  position: absolute; right: 12px; font-size: 13px; color: var(--hs-ink-400); pointer-events: none;
}
.wl-input.is-error { border-color: var(--hs-negative-medium); box-shadow: 0 0 0 3px rgba(230,70,46,0.14); }
.wl-input.is-error:focus { box-shadow: 0 0 0 3px rgba(230,70,46,0.20); }
.wl-error { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--hs-negative-dark); }

/* color token row */
.wl-color { display: flex; align-items: center; gap: 12px; }
.wl-color input[type="color"] {
  -webkit-appearance: none; appearance: none; border: none; background: none;
  width: 46px; height: 46px; padding: 0; cursor: pointer; border-radius: 12px;
  flex: none; /* HSF-2873: in a narrow column the swatch shrank to a 2 px line; the hex gives way instead */
}
.wl-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wl-color input[type="color"]::-webkit-color-swatch { border: 1px solid var(--hs-ink-100); border-radius: 12px; }
/* HSF-2873: an optional colour left empty (= the portal's default) draws «no colour», never the picker's #000000 */
.wl-color.is-empty input[type="color"]::-webkit-color-swatch {
  background: repeating-conic-gradient(var(--hs-ink-100) 0 25%, var(--hs-white) 0 50%) 50% / 12px 12px !important;
}
.wl-color.is-empty input[type="color"]::-moz-color-swatch {
  background: repeating-conic-gradient(var(--hs-ink-100) 0 25%, var(--hs-white) 0 50%) 50% / 12px 12px !important;
}
.wl-color__hex {
  min-width: 0; width: 100%; max-width: 190px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px;
  color: var(--hs-ink-700); background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-sm); padding: 5px 9px; text-transform: uppercase;
}

/* HSF-2873: a card's field grid that follows the CARD's width, not the viewport's. The Tema › Geral form column is
   ~360 px at 1280 (steps list + sections rail + preview), where the viewport `sm:` columns overflowed the card. As
   many columns as fit at --wl-fit-min each, never more than --wl-fit-cols (the count the card had before). */
.wl-fit-grid {
  --wl-fit-cols: 2; --wl-fit-min: 200px; --wl-fit-gap: 24px;
  display: grid; column-gap: var(--wl-fit-gap); row-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--wl-fit-min),
    calc((100% - (var(--wl-fit-cols) - 1) * var(--wl-fit-gap)) / var(--wl-fit-cols))), 1fr));
}
.wl-fit-grid--3 { --wl-fit-cols: 3; }
.wl-fit-grid--4 { --wl-fit-cols: 4; --wl-fit-min: 140px; --wl-fit-gap: 20px; row-gap: 16px; }

/* segmented / radio-card group */
.wl-choice {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--hs-ink-200); border-radius: var(--hs-radius-md);
  padding: 13px 14px; cursor: pointer;
  transition: border-color var(--hs-dur) var(--hs-ease), background var(--hs-dur) var(--hs-ease);
}
.wl-choice:hover { border-color: var(--hs-ink-300); background: var(--hs-ink-050); }
.wl-choice input { margin-top: 2px; accent-color: var(--hs-primary-200); width: 16px; height: 16px; }
.wl-choice__title { font-size: 14px; font-weight: 600; color: var(--hs-ink-900); }
.wl-choice__desc { font-size: 12.5px; color: var(--hs-ink-500); margin-top: 2px; line-height: 1.45; }
.wl-choice:has(input:checked) { border-color: var(--hs-primary-200); background: rgba(0,163,147,0.05); box-shadow: 0 0 0 1px var(--hs-primary-200) inset; }

/* toggle row (checkbox with label + help) */
.wl-toggle {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--hs-ink-100);
}
/* The HTML `hidden` attribute must always win. This sheet loads AFTER Tailwind's
   preflight `[hidden]{display:none}`, and several `wl-*` component classes set their
   own `display` (`.wl-btn` inline-flex, `.wl-field` block, `.wl-toggle` flex) at the
   same specificity — source order would otherwise leave a `hidden` element visible.
   The live theme-preview toggles (`syncDarkAvailability` on the "Escuro" button and
   the per-key dark color fields) rely on `hidden` to actually hide. (Supersedes the
   per-class `.wl-toggle[hidden]` below.) */
[hidden] { display: none !important; }
.wl-toggle[hidden] { display: none; }

/* Read-only surface (DR-12): an origin=api pricing editor is dimmed AND
   non-interactive at first paint (server-rendered, JS-off-safe) — the gateway
   dictates the ruler, so the whole Desconto/Encargos/Configurações surface is
   read-only. The Stimulus policy-form controller toggles this live as the origin
   radio changes. pointer-events:none blocks every tab/input inside. */
.wl-readonly { opacity: 0.55; pointer-events: none; }
.wl-toggle:first-child { border-top: 0; }
.wl-toggle input { margin-top: 2px; accent-color: var(--hs-primary-200); width: 16px; height: 16px; flex: none; }
.wl-toggle__title { display: block; font-size: 14px; font-weight: 500; color: var(--hs-ink-800); }
.wl-toggle__desc { display: block; font-size: 12.5px; color: var(--hs-ink-400); margin-top: 2px; line-height: 1.45; }

/* ── Buttons ──────────────────────────────────────────────────── */
.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: var(--hs-radius-md); cursor: pointer;
  border: 1px solid transparent; transition: all var(--hs-dur) var(--hs-ease);
  white-space: nowrap;
}
.wl-btn svg { height: 16px; width: 16px; }
.wl-btn--primary { background: var(--hs-primary-200); color: #fff; box-shadow: var(--hs-shadow-sm); }
.wl-btn--primary:hover { background: var(--hs-primary-300); color: #fff; box-shadow: var(--hs-shadow-md); }
.wl-btn--secondary { background: var(--hs-white); color: var(--hs-ink-700); border-color: var(--hs-ink-200); }
.wl-btn--secondary:hover { border-color: var(--hs-ink-300); background: var(--hs-ink-050); color: var(--hs-ink-900); }
.wl-btn--ghost { background: transparent; color: var(--hs-ink-600); }
.wl-btn--ghost:hover { background: var(--hs-ink-050); color: var(--hs-ink-900); }
.wl-btn--danger { background: var(--hs-white); color: var(--hs-negative-dark); border-color: var(--hs-negative-soft); }
.wl-btn--danger:hover { background: #fdf3f1; border-color: var(--hs-negative-medium); }
.wl-btn--success { background: var(--hs-positive-dark); color: #fff; }
.wl-btn--success:hover { background: #055a2d; color: #fff; }
.wl-btn--warning { background: var(--hs-warning-dark); color: #fff; }
.wl-btn--warning:hover { background: #855705; color: #fff; }
.wl-btn[disabled], .wl-btn.is-disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.wl-btn--sm { padding: 7px 12px; font-size: 13px; }

/* ── Badges & pills ───────────────────────────────────────────── */
.wl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.wl-badge::before { content: ""; height: 7px; width: 7px; border-radius: 50%; background: currentColor; }
.wl-badge--active { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-badge--draft { background: var(--hs-ink-100); color: var(--hs-ink-600); }
.wl-badge--disabled { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

.wl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 6px;
  background: var(--hs-ink-050); color: var(--hs-ink-600); border: 1px solid var(--hs-ink-100);
}
.wl-chip--mono { font-family: ui-monospace, Menlo, monospace; }
.wl-chip--warning { background: var(--hs-warning-soft); color: var(--hs-warning-dark); border-color: transparent; }
.wl-chip--success { background: var(--hs-positive-soft); color: var(--hs-positive-dark); border-color: transparent; }
.wl-chip--danger { background: var(--hs-negative-soft); color: var(--hs-negative-dark); border-color: transparent; }
.wl-chip__icon { height: 13px; width: 13px; }

/* ── Switch ───────────────────────────────────────────────────── */
.wl-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.wl-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wl-switch__track { position: absolute; inset: 0; background: var(--hs-ink-200); border-radius: 999px; transition: background var(--hs-dur) var(--hs-ease); pointer-events: none; }
.wl-switch__track::before { content: ""; position: absolute; top: 2px; left: 2px; height: 18px; width: 18px; background: #fff; border-radius: 50%; box-shadow: var(--hs-shadow-sm); transition: transform var(--hs-dur) var(--hs-ease); }
.wl-switch input:checked + .wl-switch__track { background: var(--hs-primary-200); }
.wl-switch input:checked + .wl-switch__track::before { transform: translateX(16px); }
.wl-switch input:focus-visible + .wl-switch__track { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.wl-switch input:disabled { cursor: not-allowed; }
.wl-switch input:disabled + .wl-switch__track { opacity: 0.55; }

/* ── Gateway card sections ────────────────────────────────────── */
.wl-gsection { padding: 16px 0; border-top: 1px solid var(--hs-ink-100); }
.wl-gsection:first-child { border-top: 0; padding-top: 0; }
.wl-gsection__head { display: flex; gap: 12px; align-items: flex-start; }
.wl-gsection__body { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--hs-primary-100); }
.wl-gsection__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; max-width: 640px; }
.wl-gsection__status { padding-top: 16px; border-top: 1px solid var(--hs-ink-100); }

/* ── Reorderable list (flow page catalog) ─────────────────────── */
.wl-orderitem {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: #fff;
}
.wl-orderitem + .wl-orderitem { margin-top: 8px; }
.wl-orderitem.is-off { background: var(--hs-ink-050); }
.wl-orderitem.is-off .wl-orderitem__name { color: var(--hs-ink-400); }
.wl-orderitem__handle { display: flex; color: var(--hs-ink-300); cursor: grab; }
.wl-orderitem__handle svg { height: 16px; width: 16px; }
.wl-orderitem__pos { width: 20px; text-align: center; font-size: 12px; font-weight: 600; color: var(--hs-ink-400); }
.wl-orderitem__name { font-size: 14px; font-weight: 500; color: var(--hs-ink-900); }
.wl-orderitem__key { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--hs-ink-400); }

/* ── Capability row (negotiation types) ───────────────────────── */
.wl-cap {
  display: flex; align-items: flex-start; gap: 16px; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md);
  background: #fff; transition: border-color var(--hs-dur) var(--hs-ease);
}
.wl-cap:hover { border-color: var(--hs-ink-200); }
.wl-cap.is-off { background: var(--hs-ink-050); }
.wl-cap.is-off .wl-cap__title { color: var(--hs-ink-500); }
.wl-cap__title { font-size: 14.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-cap__desc { margin: 5px 0 0; font-size: 13px; color: var(--hs-ink-500); line-height: 1.45; }
.wl-cap__portal {
  display: flex; gap: 8px; margin: 9px 0 0; padding: 8px 11px; border-radius: 8px;
  background: rgba(0,163,147,0.06); font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-700);
}
.wl-cap__portal > span {
  flex: none; font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--hs-primary-300); padding-top: 1px;
}
.wl-cap .wl-switch { margin-top: 2px; }

/* ── Shape activation section (flow step v3) ──────────────────── */
/* Each debt selection SHAPE is an activatable section with its own
   per-shape config container. A shape the gateway can't support renders
   greyed/disabled (can't be activated). */
.wl-shape {
  border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md);
  background: #fff; overflow: hidden;
  transition: border-color var(--hs-dur) var(--hs-ease), box-shadow var(--hs-dur) var(--hs-ease);
}
.wl-shape + .wl-shape { margin-top: 12px; }
.wl-shape.is-active { border-color: var(--hs-primary-200); box-shadow: inset 0 0 0 1px var(--hs-primary-200); }
.wl-shape.is-unavailable { background: var(--hs-ink-050); border-style: dashed; }
.wl-shape__head { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; }
.wl-shape__title { font-size: 14.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-shape.is-unavailable .wl-shape__title { color: var(--hs-ink-400); }
.wl-shape__desc { margin: 5px 0 0; font-size: 13px; color: var(--hs-ink-500); line-height: 1.45; }
.wl-shape__activate { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wl-shape__activate .wl-label { font-size: 11px; margin: 0; }
.wl-shape__config {
  border-top: 1px dashed var(--hs-ink-200); padding: 14px 16px;
  background: rgba(0,163,147,0.035);
}
.wl-shape__config-eyebrow {
  display: flex; align-items: center; gap: 7px; margin: 0 0 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--hs-primary-300);
}
.wl-shape__config-eyebrow svg { height: 13px; width: 13px; }
.wl-shape__config-hint { margin: 0 0 12px; font-size: 12px; color: var(--hs-ink-400); line-height: 1.4; }

/* per-shape config knob (inside a shape's config container) */
.wl-knob {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 11px 13px; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-sm); background: #fff;
}
.wl-knob + .wl-knob { margin-top: 8px; }
.wl-knob__title { font-size: 13.5px; font-weight: 600; color: var(--hs-ink-800); }
.wl-knob__desc { margin: 3px 0 0; font-size: 12.5px; color: var(--hs-ink-500); line-height: 1.4; }
.wl-knob__label { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wl-knob__label .wl-label { font-size: 11px; margin: 0; }

.wl-tag--off { background: var(--hs-ink-100); color: var(--hs-ink-400); }

/* ── Legal text marker (Tema/Textos, D29 — prototype pt-tag--restricted / pt-tag--legal, pt-legalwhy) ── */
.wl-legal-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wl-legal-tag svg { height: 11px; width: 11px; }
.wl-legal-tag--locked { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-legal-tag--editor { background: var(--hs-ink-050); color: var(--hs-ink-600); box-shadow: inset 0 0 0 1px var(--hs-ink-100); }
.wl-legal-why { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--hs-ink-500); }
/* HSF-1111 U46 (prototype platform-theme.css `.pt-tok`/`.pt-toks`/`.dp-issues`): the markers the portal fills in, as
   pills that insert themselves at the cursor, and the errors of a draft text under its field. */
.wl-toks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--hs-ink-500); }
.wl-tok { display: inline-flex; align-items: center; padding: 1px 7px; border: 0; border-radius: 6px; cursor: pointer;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; background: var(--hs-ink-100); color: var(--hs-ink-700); }
.wl-tok[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.wl-issues { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px;
  line-height: 1.4; color: var(--hs-negative-dark); }
.wl-issues--warn { color: var(--hs-warning-dark); }
.wl-issues--warn ul { list-style: disc; margin: 2px 0 0 18px; padding: 0; }
textarea.is-invalid { border-color: var(--hs-negative-medium); }
[data-date-rule-row][data-pending] [data-field="step_id"] { border-color: var(--hs-negative-medium); }
textarea[readonly][aria-disabled="true"] { background: var(--hs-ink-050); color: var(--hs-ink-500); }

/* ── Dimension card + conditional rule (policy step) ──────────── */
.wl-dimcard { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 14px; background: #fff; }
.wl-dimcard__head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }

.wl-rule { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 14px; background: #fff; }
.wl-rule__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-rule__if { font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: var(--hs-ink-400); }
.wl-rule__num { display: grid; place-items: center; height: 22px; width: 22px; flex: none; border-radius: 50%; background: var(--hs-primary-200); color: #fff; font-size: 12px; font-weight: 700; }
.wl-rule__conds { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--hs-ink-700); }
.wl-rule__addcond { margin-top: 8px; }
.wl-rule__then { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hs-ink-100); font-size: 13px; color: var(--hs-ink-700); }
.wl-rule__eff { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.wl-rule__eff input[type="radio"] { accent-color: var(--hs-primary-200); width: 15px; height: 15px; }
/* HSF-118 — destination rule ("SE … ENTÃO ir para …"): the kind's own field under the then,
   and the save-gate's refusal painted ON the rule it names (the sheet's global `[hidden]`
   rule above hides both when the controller says so). */
.wl-rule__dest { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wl-rule__dest .wl-input, .wl-rule__dest .wl-select { flex: 1 1 320px; min-width: 240px; max-width: 520px; }
.wl-rule__errors { margin-top: 10px; padding: 8px 10px; border-radius: var(--hs-radius-md); background: var(--hs-negative-soft); color: var(--hs-negative-dark); font-size: 12px; }
.wl-rule__errors-title { display: block; font-weight: 700; margin-bottom: 4px; }
.wl-rule__errors ul { margin: 0; padding-left: 16px; list-style: disc; }
.wl-rule.is-refused { border-color: var(--hs-negative-dark); }

/* HSF-494 — the grouping-rule builder inside the multiple_contracts card (prototype wizard.css). */
.wl-grouping { margin-top: 10px; padding: 14px; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-sm); background: #fff; }
.wl-grouping__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.wl-grouping__head .wl-section-title { margin: 0; }
.wl-grouping__inert { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--hs-ink-400); }
.wl-grouping__inert svg { height: 14px; width: 14px; flex: none; }
.wl-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.wl-verdict--permit { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-verdict--deny { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-rule__fixedthen { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hs-ink-100); font-size: 13px; color: var(--hs-ink-600); }
.wl-rule__fixedthen .wl-rule__if { background: var(--hs-ink-100); color: var(--hs-ink-700); padding: 3px 7px; border-radius: 4px; }
.wl-lock { color: var(--hs-ink-300); height: 13px; width: 13px; flex: none; }
.wl-grouping .wl-cond__quant { flex: 0 0 auto; width: auto; }
.wl-grouping .wl-cond__axis { flex-basis: 300px; }
.wl-grouping .wl-condrow.has-quant .wl-cond__axis { flex-basis: 200px; }
.wl-grouping .wl-condrow.is-payload .wl-cond__axis { flex-basis: 140px; min-width: 130px; }
.wl-grouping .wl-condrow.is-payload .wl-cond__rest { flex: 3 1 300px; }
.wl-grouping .wl-condrow.is-payload [data-cond-key] { max-width: 110px; }
.wl-grouping .wl-condrow.is-payload [data-cond-value] { max-width: 140px; }
.wl-grouping .wl-cond__note { flex-basis: 100%; margin: 0; }
.wl-else { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--hs-ink-100); }

.wl-condrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-condrow__type { flex: 1; min-width: 0; }
.wl-condrow__param { max-width: 150px; flex: none; }
.wl-condrow__rm { display: grid; place-items: center; height: 36px; width: 36px; flex: none; padding: 0; border: 0; border-radius: var(--hs-radius-md); background: var(--hs-ink-050); color: var(--hs-ink-500); cursor: pointer; font-size: 16px; line-height: 1; }
.wl-condrow__rm:hover { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

/* QUANDO condition row: axis + dynamic operator + dependent value(s) */
.wl-cond__axis { flex: 1 1 170px; min-width: 150px; }
.wl-cond__rest { flex: 2 1 300px; display: flex; align-items: center; gap: 6px 8px; min-width: 0; flex-wrap: wrap; }
/* inputs/selects sit at natural width, never 100% (which collapsed them in flex) */
.wl-cond__rest .wl-input, .wl-cond__rest .wl-select { width: auto; flex: 0 0 auto; }
.wl-cond__input, .wl-cond__input2 { min-width: 80px; max-width: 110px; }
.wl-cond__rest input[type="date"] { min-width: 132px; max-width: 150px; }
/* component rows (ENTÃO): number input direct child shouldn't stretch to 100% */
.wl-condrow > .wl-input { width: auto; flex: 0 0 auto; }
.wl-cond__op { font-size: 13px; color: var(--hs-ink-500); flex: none; }
.wl-cond__unit { font-size: 13px; color: var(--hs-ink-400); flex: none; }
.wl-cond__static { font-size: 13px; color: var(--hs-ink-400); font-style: italic; }
/* HSF-105 — the spelled-out echo of a vigência date. A date input paints itself in the
   BROWSER's locale, so the page echoes what it understood, in the page's own. */
.wl-cond__echo { font-size: 12px; color: var(--hs-ink-400); flex: none; white-space: nowrap; }

/* ENTÃO — one unified card: header strip + connected underline tabs + body */
/* section header (two-part split inside a step) */
.wl-secthead { display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; }
.wl-secthead--divided { border-top: 1px solid var(--hs-ink-100); padding-top: 28px; margin-top: 32px; }
.wl-secthead__icon { display: grid; place-items: center; height: 36px; width: 36px; flex: none; border-radius: 10px; background: var(--hs-primary-000); color: var(--hs-primary-300); }
.wl-secthead__icon svg { height: 19px; width: 19px; }
.wl-secthead__eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hs-primary-200); }
.wl-secthead__title { margin: 3px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--hs-ink-900); }
.wl-secthead__desc { margin: 4px 0 0; font-size: 13.5px; color: var(--hs-ink-500); line-height: 1.5; max-width: 60ch; }

/* page-level concern tabs (Política de negociação | Regras de seleção) */
.wl-pagetabs { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 4px; box-shadow: var(--hs-shadow-sm); }
.wl-pagetab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--hs-ink-500); padding: 9px 18px; border-radius: 8px; transition: all var(--hs-dur) var(--hs-ease); }
.wl-pagetab:hover { color: var(--hs-ink-900); background: var(--hs-ink-050); }
.wl-pagetab.is-active { background: var(--hs-primary-200); color: #fff; }

/* segmented control (flow switch) */
.wl-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 9px; }
.wl-seg__btn { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 6px 16px; border-radius: 6px; transition: all var(--hs-dur) var(--hs-ease); }
.wl-seg__btn:hover { color: var(--hs-ink-800); }
.wl-seg__btn.is-active { background: #fff; color: var(--hs-primary-300); box-shadow: var(--hs-shadow-sm); }
/* preventivo rule footer (QUANDO-only, no ENTÃO) */
.wl-rule__prevfoot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hs-ink-100); font-size: 13px; color: var(--hs-ink-600); }

.wl-rule__then { display: block; margin-top: 12px; border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); background: var(--hs-ink-050); overflow: hidden; }
.wl-then__head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 12px 14px; background: var(--hs-ink-050); border-bottom: 1px solid var(--hs-ink-100); }
.wl-package { width: 100%; background: #fff; border: 0; border-radius: 0; padding: 0; margin: 0; }
.wl-tabs { display: flex; gap: 4px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--hs-ink-100); }
.wl-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); padding: 12px 6px; margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: 0; transition: color var(--hs-dur) var(--hs-ease); }
.wl-tab:hover { color: var(--hs-ink-800); }
.wl-tab.is-active { color: var(--hs-primary-300); border-bottom-color: var(--hs-primary-200); }
.wl-tabpanel { padding: 16px; }
.wl-tabpanel[hidden] { display: none; }
.wl-pkg__title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--hs-ink-600); margin-bottom: 8px; }
.wl-pkg__col > .wl-condrow, [data-comps] > .wl-condrow { margin-bottom: 8px; }
.wl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.wl-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; align-items: start; }
@media (max-width: 720px) { .wl-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wl-grid2, .wl-grid3 { grid-template-columns: 1fr; } }
.wl-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.wl-num { width: auto; max-width: 90px; flex: 0 0 auto; }

/* ── Rule chip (preventivo dynamic rules) ─────────────────────── */
.wl-rulechip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); color: var(--hs-ink-700);
}
.wl-rulechip em { font-style: normal; color: var(--hs-ink-400); }
.wl-rulechip button {
  display: grid; place-items: center; height: 18px; width: 18px; padding: 0;
  border: 0; border-radius: 50%; background: var(--hs-ink-100); color: var(--hs-ink-500);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.wl-rulechip button:hover { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }

/* ── Journey stepper (fixed negotiate→simulate→agreement) ─────── */
.wl-journey {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border: 1px solid var(--hs-ink-100);
  border-radius: 999px; background: #fff;
}
.wl-journey__n {
  display: grid; place-items: center; height: 26px; width: 26px; flex: none;
  border-radius: 50%; background: var(--hs-primary-200); color: #fff; font-size: 12px; font-weight: 700;
}
.wl-journey__t { display: block; font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-journey__d { display: block; font-size: 11.5px; color: var(--hs-ink-400); }
.wl-journey__sep { height: 16px; width: 16px; color: var(--hs-ink-300); flex: none; }

/* ── Callout (info / warning / danger / success) ──────────────── */
.wl-callout {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--hs-radius-md); padding: 13px 15px; font-size: 13.5px; line-height: 1.5;
}
/* `display: flex` above beats the UA `[hidden] { display: none }` rule, so a
   callout server-rendered with `hidden` (e.g. the origin=api read-only banner on
   an internal policy) or toggled hidden by Stimulus stayed VISIBLE. Re-assert the
   hide — same fix as .wl-toggle[hidden] / .wl-tabpanel[hidden] below. */
.wl-callout[hidden] { display: none; }
.wl-callout__icon { flex: none; margin-top: 1px; }
.wl-callout__icon svg { height: 18px; width: 18px; }
.wl-callout p { margin: 0; }
.wl-callout strong { font-weight: 600; }
.wl-callout--info { background: var(--hs-info-soft); color: #0a4a7a; }
.wl-callout--info .wl-callout__icon { color: var(--hs-info-dark); }
.wl-callout--warning { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-callout--danger { background: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-callout--success { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.wl-callout--muted { background: var(--hs-ink-050); color: var(--hs-ink-600); border: 1px solid var(--hs-ink-100); }

/* ── Checklist (Resumo) ───────────────────────────────────────── */
.wl-checklist { list-style: none; margin: 0; padding: 0; }
.wl-checklist__item {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 4px; border-top: 1px solid var(--hs-ink-100);
}
.wl-checklist__item:first-child { border-top: 0; }
.wl-checklist__mark {
  display: grid; place-items: center; height: 20px; width: 20px; border-radius: 50%; margin-top: 1px;
}
.wl-checklist__mark svg { height: 13px; width: 13px; }
.is-ok .wl-checklist__mark { background: var(--hs-positive-soft); color: var(--hs-positive-dark); }
.is-pending .wl-checklist__mark { background: var(--hs-warning-soft); color: var(--hs-warning-dark); }
.wl-checklist__label { font-size: 14px; font-weight: 500; color: var(--hs-ink-900); }
.wl-checklist__reason { font-size: 12.5px; color: var(--hs-ink-500); margin-top: 2px; line-height: 1.45; }
.is-pending .wl-checklist__reason { color: var(--hs-warning-dark); }
.is-warn .wl-checklist__reason { color: var(--hs-warning-dark); }
.wl-checklist__resolve { font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); white-space: nowrap; margin-top: 2px; }

/* ── Help chip + popover (CC3) ────────────────────────────────── */
.wl-help { position: relative; display: inline-flex; }
.wl-help__btn {
  display: grid; place-items: center; height: 16px; width: 16px; border-radius: 50%;
  background: var(--hs-ink-100); color: var(--hs-ink-500); border: 0; cursor: help;
  font-size: 11px; font-weight: 700; padding: 0; line-height: 1;
}
.wl-help__btn:hover, .wl-help__btn:focus-visible { background: var(--hs-primary-200); color: #fff; }
.wl-help__pop {
  position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px);
  width: 248px; padding: 10px 12px; z-index: 40;
  background: var(--hs-ink-900); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.5;
  border-radius: 10px; box-shadow: var(--hs-shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--hs-dur) var(--hs-ease), transform var(--hs-dur) var(--hs-ease);
}
.wl-help__pop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--hs-ink-900);
}
.wl-help:hover .wl-help__pop,
.wl-help__btn:focus-visible + .wl-help__pop,
.wl-help.is-open .wl-help__pop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
}

/* ── Override accordion (theme texts) ─────────────────────────── */
.wl-ovgroup { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); overflow: hidden; }
.wl-ovgroup + .wl-ovgroup { margin-top: 10px; }
.wl-ovgroup__sum {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--hs-ink-900);
  background: var(--hs-ink-050);
}
.wl-ovgroup__sum::-webkit-details-marker { display: none; }
.wl-ovgroup__sum .wl-orderitem__key { font-weight: 400; }
.wl-ovgroup__chev { height: 18px; width: 18px; margin-left: auto; color: var(--hs-ink-300); transition: transform var(--hs-dur) var(--hs-ease); }
.wl-ovgroup[open] .wl-ovgroup__chev { transform: rotate(180deg); }
.wl-ovgroup__body { padding: 16px 14px; border-top: 1px solid var(--hs-ink-100); }

/* ── Data list / read-only fields ─────────────────────────────── */
.wl-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.wl-dl dt { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hs-ink-400); }
.wl-dl dd { margin: 4px 0 0; font-size: 14px; color: var(--hs-ink-900); }
.wl-dl dd.mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; }

/* ── Misc ─────────────────────────────────────────────────────── */
.wl-divider { height: 1px; background: var(--hs-ink-100); border: 0; margin: 24px 0; }
.wl-section-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hs-ink-400); }

/* ── v2 chrome: global sidebar + main + progress + footer nav ─── */
.wl-root { display: flex; min-height: 100vh; }

.wl-gnav {
  position: sticky; top: 0; align-self: flex-start;
  width: 64px; height: 100vh; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 0; background: var(--hs-ink-900);
}
.wl-gnav__brand {
  display: grid; place-items: center; height: 40px; width: 40px; margin-bottom: 8px;
  border-radius: 11px; color: var(--hs-primary-100); background: rgba(255,255,255,0.06);
}
.wl-gnav__brand svg { height: 22px; width: 22px; }
.wl-gnav__list { display: flex; flex-direction: column; gap: 6px; }
.wl-gnav__item {
  display: grid; place-items: center; height: 40px; width: 40px;
  border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; color: var(--hs-ink-300);
  transition: all var(--hs-dur) var(--hs-ease);
}
.wl-gnav__item svg { height: 19px; width: 19px; }
.wl-gnav__item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.wl-gnav__item.is-active { background: var(--hs-primary-200); color: #fff; }
@media (max-width: 720px) { .wl-gnav { display: none; } }

.wl-main { flex: 1; min-width: 0; }

.wl-header__pending {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--hs-warning-dark);
  background: var(--hs-warning-soft); padding: 6px 11px; border-radius: 999px;
  transition: filter var(--hs-dur) var(--hs-ease);
}
.wl-header__pending:hover { filter: brightness(0.97); color: var(--hs-warning-dark); }
.wl-header__pending .wl-dot { height: 7px; width: 7px; border-radius: 50%; background: var(--hs-warning-medium); }

.wl-col { min-width: 0; }

/* rail progress meter */
.wl-rail__head { padding: 6px 10px 12px; }
.wl-rail__meter { margin-top: 8px; }
.wl-rail__bar { height: 6px; border-radius: 999px; background: var(--hs-ink-100); overflow: hidden; }
.wl-rail__bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--hs-primary-200), var(--hs-primary-100)); transition: width 500ms var(--hs-ease); }
.wl-rail__count { display: block; margin-top: 7px; font-size: 11.5px; color: var(--hs-ink-400); }

/* footer step nav */
.wl-footernav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hs-ink-100);
}
.wl-footernav__pos { font-size: 12.5px; font-weight: 600; color: var(--hs-ink-400); }
@media (max-width: 560px) { .wl-footernav__pos { display: none; } }

/* Turbo-style top navigation bar */
.wl-navbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--hs-primary-200), var(--hs-primary-100));
}
.wl-navbar.is-loading { animation: wl-load 900ms var(--hs-ease) forwards; }
@keyframes wl-load { 0% { transform: scaleX(0); } 60% { transform: scaleX(0.75); } 100% { transform: scaleX(0.95); } }

/* page-load stagger */
@keyframes wl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wl-rise { animation: wl-rise 420ms var(--hs-ease) both; }
.wl-rise-1 { animation-delay: 60ms; }
.wl-rise-2 { animation-delay: 120ms; }
.wl-rise-3 { animation-delay: 180ms; }
.wl-rise-4 { animation-delay: 240ms; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wl-rise { animation: none; } }

/* ─────────────────────────────────────────────────────────────
   Portal Whitelabel — module shell sidenav (mirrors integration_hub
   mechanics, skinned with the wl-* brand ink/teal tokens). Used by
   app/views/layouts/whitelabel_portal/*.
   ───────────────────────────────────────────────────────────── */
.wl-sidenav { background: var(--hs-ink-900); }
.wl-sidenav__brand {
  display: flex; align-items: center; flex-shrink: 0;
  padding: 16px; background: var(--hs-ink-900);
}
.wl-sidenav__section {
  padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--hs-ink-300);
}
.wl-sidenav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: var(--hs-radius-md);
  font-size: 14px; font-weight: 500; color: var(--hs-ink-200);
  transition: background var(--hs-dur) var(--hs-ease), color var(--hs-dur) var(--hs-ease);
}
.wl-sidenav__item:hover { background: var(--hs-primary-400); color: var(--hs-white); }
.wl-sidenav__item.is-active { background: var(--hs-primary-300); color: var(--hs-white); }
.wl-sidenav__icon { height: 20px; width: 20px; flex: none; }
/* The menu's counter (HSF-1043 U13, prototype `wl-side__count`): requests waiting for the viewer. */
.wl-sidenav__count { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: #f5b301; color: #2a1d00; font-size: 11px; font-weight: 700; text-align: center; }

/* The narrow rail (HSF-1641, D110): a page that asks for it (`whitelabel_portal_sidebar_rail!`) opens with the desktop
   sidebar folded to 64 px of icons, like the prototype's `wl-gnav`; `sidebar#toggleRail` unfolds it for that page.
   Desktop only: below `lg` the sidebar is the drawer, which the rail never touches. */
.wl-sidenav__toggle {
  display: grid; place-items: center; height: 40px; width: 40px; margin-left: auto; flex: none;
  border-radius: var(--hs-radius-md); color: var(--hs-ink-200);
  transition: background var(--hs-dur) var(--hs-ease), color var(--hs-dur) var(--hs-ease);
}
.wl-sidenav__toggle:hover { background: var(--hs-primary-400); color: var(--hs-white); }
.wl-sidenav__toggle:focus-visible { outline: 2px solid var(--hs-white); outline-offset: -2px; }
.wl-sidenav__toggle-open { display: none; }
.wl-portal-shell--rail .wl-sidenav__toggle-open { display: contents; }
.wl-portal-shell--rail .wl-sidenav__toggle-collapse { display: none; }
@media (min-width: 1024px) {
  .wl-portal-shell--rail .wl-portal-shell__aside { width: 64px; }
  .wl-portal-shell--rail .wl-portal-shell__content { padding-left: 64px; }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav { min-width: 0; overflow: hidden; }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__brand { justify-content: center; padding: 12px 0; }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__toggle { margin-left: 0; }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__logo { display: none; }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__heading { margin: 12px 0; }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__section { height: 1px; padding: 0; overflow: hidden; color: transparent; background: rgba(255, 255, 255, 0.08); }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__item { position: relative; justify-content: center; padding: 10px 0; }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .wl-portal-shell--rail .wl-portal-shell__aside .wl-sidenav__count { position: absolute; top: 2px; right: -2px; min-width: 16px; padding: 0 4px; font-size: 10px; }
}
.wl-empty { padding: 24px 4px; font-size: 14px; color: var(--hs-ink-400); }

/* ── Rail group headings (R7 — grouped 5-section rail) ───────────── */
.wl-rail__group {
  padding: 14px 10px 6px; margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--hs-ink-300);
}
.wl-rail__list > .wl-rail__group:first-child { margin-top: 0; padding-top: 6px; }

/* ── Per-platform selector band + Fontes membership step (D-UX1/R6) ── */
.wl-fontes {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--hs-white); border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm);
  padding: 12px 14px; margin-top: 20px;
}
.wl-fontes__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hs-ink-400); flex: none;
}
.wl-fontes__list { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.wl-fonte {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--hs-white); border: 1px solid var(--hs-ink-200);
  border-radius: var(--hs-radius-md); padding: 7px 14px 7px 9px;
  font: inherit; text-align: left; transition: all var(--hs-dur) var(--hs-ease);
}
.wl-fonte:hover { border-color: var(--hs-ink-300); background: var(--hs-ink-050); }
.wl-fonte.is-active {
  border-color: var(--hs-primary-200); background: rgba(0,163,147,0.06);
  box-shadow: 0 0 0 1px var(--hs-primary-200) inset;
}
.wl-fontes__manage { flex: none; font-size: 12.5px; font-weight: 600; color: var(--hs-primary-200); white-space: nowrap; }
.wl-fonte__logo {
  display: grid; place-items: center; height: 30px; width: 30px; flex: none;
  border-radius: 9px; color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.wl-fonte__txt { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.wl-fonte__name { font-size: 13.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-fonte__sub { font-size: 11px; color: var(--hs-ink-400); font-family: ui-monospace, Menlo, monospace; }

/* fonte roster row (Fontes membership step) */
.wl-fonterow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.wl-fonterow + .wl-fonterow { border-top: 1px solid var(--hs-ink-100); }
.wl-fonterow__name { font-size: 14.5px; font-weight: 600; color: var(--hs-ink-900); }
.wl-fonterow__sub { font-size: 12.5px; color: var(--hs-ink-400); margin-top: 1px; }

/* scope context line under the band (which fonte you are configuring) */
.wl-scope {
  display: flex; align-items: center; gap: 9px; margin: 16px 0 2px;
  font-size: 13px; color: var(--hs-ink-500);
}
.wl-scope strong { color: var(--hs-ink-900); font-weight: 600; }
.wl-scope__logo {
  display: grid; place-items: center; height: 22px; width: 22px; flex: none;
  border-radius: 6px; color: #fff; font-weight: 700; font-size: 11px;
}

/* ── Text master-detail nav (Tema › Textos — mini-wizard) ─────── */
.wl-textnav {
  position: sticky; top: 92px;
  background: var(--hs-white); border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-lg); box-shadow: var(--hs-shadow-sm); padding: 8px;
}
.wl-textnav__title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hs-ink-400); padding: 8px 10px 10px;
}
.wl-textnav__item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; background: transparent; border-radius: var(--hs-radius-md);
  cursor: pointer; font: inherit; transition: background var(--hs-dur) var(--hs-ease);
}
.wl-textnav__item + .wl-textnav__item { margin-top: 2px; }
.wl-textnav__item:hover { background: var(--hs-ink-050); }
.wl-textnav__item.is-active { background: linear-gradient(180deg, rgba(0,163,147,0.10), rgba(0,163,147,0.05)); box-shadow: inset 2px 0 0 var(--hs-primary-200); }
.wl-textnav__num {
  display: grid; place-items: center; height: 26px; width: 26px; flex: none;
  border-radius: 50%; font-size: 12px; font-weight: 600;
  background: var(--hs-white); color: var(--hs-ink-400); box-shadow: inset 0 0 0 2px var(--hs-ink-200);
}
.wl-textnav__item.is-active .wl-textnav__num { background: var(--hs-primary-200); color: #fff; box-shadow: none; }
.wl-textnav__txt { flex: 1; min-width: 0; }
.wl-textnav__label { display: block; font-size: 14px; font-weight: 500; color: var(--hs-ink-900); line-height: 1.25; }
.wl-textnav__item.is-active .wl-textnav__label { font-weight: 600; }
.wl-textnav__key { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--hs-ink-400); margin-top: 1px; }
.wl-textnav__dot { height: 7px; width: 7px; flex: none; border-radius: 50%; background: var(--hs-primary-200); }
.wl-textpane[hidden] { display: none; }

/* ── Métodos de Pagamento step (payments.html parity — card 86ajckwjj) ── */
.pm-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--hs-ink-100); border-radius: 8px; background: #fff; }
.pm-row + .pm-row { margin-top: 10px; }
.pm-row.is-off { opacity: .55; background: var(--hs-ink-050); }
.pm-row__ico { flex: none; display: grid; place-items: center; height: 34px; width: 34px;
  border-radius: 8px; background: var(--hs-ink-050); color: var(--hs-ink-600); }
.pm-row__ico svg { height: 17px; width: 17px; }
.pm-row__name { font-weight: 600; color: var(--hs-ink-900); font-size: 14px; }
.pm-row__desc { margin: 2px 0 0; font-size: 12.5px; color: var(--hs-ink-500); }
.pm-row__meta { margin: 6px 0 0; font-size: 12px; color: var(--hs-ink-500); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pm-row__meta b { color: var(--hs-ink-700); font-weight: 600; }
.pm-row__meta a { color: var(--hs-primary-300); text-decoration: underline; word-break: break-all; }
.pm-row__side { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.pm-row__side form { display: inline-flex; }
.pm-gwchip { display: inline-flex; align-items: center; gap: 5px; }
/* Row actions are real FORM buttons (server round-trip, rack_test-clickable):
   the toggle is painted exactly like .wl-switch — .is-on mirrors input:checked. */
.wl-switchbtn { position: relative; display: inline-block; width: 38px; height: 22px;
  padding: 0; border: 0; background: transparent; cursor: pointer; flex: none; }
.wl-switchbtn.is-on .wl-switch__track { background: var(--hs-primary-200); }
.wl-switchbtn.is-on .wl-switch__track::before { transform: translateX(16px); }
.wl-switchbtn:focus-visible .wl-switch__track { outline: 2px solid var(--hs-primary-200); outline-offset: 2px; }
.pm-move { padding: 0 8px; }
.pm-move[disabled] { opacity: .4; cursor: not-allowed; }
/* Inline edit disclosure (card 86ajckwjj) — a JS-free <details> under the row's
   content column; the summary reads as a small ghost-link affordance. */
.pm-edit { margin-top: 8px; }
.pm-edit__summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--hs-primary-300); list-style: none;
  width: fit-content; user-select: none; }
.pm-edit__summary::-webkit-details-marker { display: none; }
.pm-edit__summary::before { content: "\270E"; font-weight: 400; }
.pm-edit[open] > .pm-edit__summary { margin-bottom: 4px; }
/* ≤480px: the reorder arrows (a plan addition over the prototype) would crush
   the row's content column — the action cluster wraps to its own line instead,
   keeping the name/description at full width (the prototype has no arrows). */
@media (max-width: 480px) {
  .pm-row { flex-wrap: wrap; }
  /* flex-basis 100% forces the wrap: the content column carries an inline
     min-width:0 (prototype-faithful) and would otherwise shrink forever. */
  .pm-row__side { flex-basis: 100%; justify-content: flex-end; padding-top: 4px; }
}

/* ── Acesso de Máquina (Sofia) — U5.2a, page-local kit-consistent styles
      ported 1:1 from admin-whitelabel-prototype/auth.html #sofia ─────────── */
.wl-sofia-cred { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-md); padding: 16px 18px; background: #fff; }
.wl-sofia-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-sofia-line + .wl-sofia-line { margin-top: 12px; }
.wl-sofia-key { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--hs-ink-400); min-width: 72px; }
.wl-sofia-val { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; color: var(--hs-ink-900); }
.wl-sofia-copybtn { display: inline-flex; align-items: center; gap: 5px; }
.wl-sofia-copybtn svg { height: 13px; width: 13px; }
.wl-sofia-secret { border: 1px solid var(--hs-positive-medium, transparent); background: var(--hs-positive-soft); border-radius: var(--hs-radius-md); padding: 14px 16px; margin-top: 14px; }
.wl-sofia-secret__head { display: flex; gap: 8px; align-items: center; color: var(--hs-positive-dark); font-size: 13px; font-weight: 700; }
.wl-sofia-secret__head svg { height: 16px; width: 16px; }
.wl-sofia-secret__val { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.wl-sofia-secret__code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--hs-ink-900); word-break: break-all; }
.wl-sofia-secret__warn { margin: 8px 0 0; font-size: 12px; color: var(--hs-positive-dark); }
.wl-sofia-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wl-sofia-status__meta { font-size: 13px; color: var(--hs-ink-500); }
.wl-sofia-status__meta b { color: var(--hs-ink-700); font-weight: 600; }
.wl-sofia-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hs-ink-100); display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--hs-ink-400); }
.wl-sofia-foot svg { height: 14px; width: 14px; flex: none; margin-top: 1px; color: var(--hs-ink-300); }

/* ── Acesso do portal (HSF-756, D57/D58) — 1:1 with the prototype's .pa-* block (auth.html @2f08e2e0f); the card
   reuses the .wl-sofia-* kit, only what it lacks lives here. */
#portal-access { scroll-margin-top: 120px; }
.wl-pa-desc { margin: 0 0 16px; font-size: 14px; color: var(--hs-ink-600); line-height: 1.5; max-width: 640px; }
.wl-pa-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.wl-pa-tags .wl-tag { margin-left: 0; }
.wl-pa-created { margin: 12px 0 0; font-size: 12.5px; color: var(--hs-ink-500); }
.wl-pa-created b { color: var(--hs-ink-700); font-weight: 600; }
.wl-pa-val--revoked { color: var(--hs-ink-400); text-decoration: line-through; }
/* The portal card follows the approved prototype's .sofia-* kit (auth.html @2f08e2e0f), which differs from the one
   the Sofia card was approved with; scoped here so the Sofia card above keeps its own approved look. */
#portal-access .wl-sofia-key { color: var(--hs-ink-500); min-width: 96px; }
#portal-access .wl-sofia-val { background: var(--hs-ink-050); border: 1px solid var(--hs-ink-100); border-radius: 6px;
  padding: 6px 10px; overflow-wrap: anywhere; min-width: 0; } /* a real client id is 43 characters: it wraps on a phone */
#portal-access .wl-sofia-secret { margin-top: 12px; }
#portal-access .wl-sofia-secret__head { font-weight: 600; font-size: 13.5px; }
#portal-access .wl-sofia-secret__code { background: #fff; border: 1px solid var(--hs-positive-medium, var(--hs-ink-100));
  border-radius: 6px; padding: 7px 11px; }
#portal-access .wl-sofia-foot { font-size: 12px; gap: 7px; }
.wl-sofia-secret__code.wl-pa-code { word-break: break-all; min-width: 0; }
.wl-pa-confirm { margin-top: 16px; border: 1px solid var(--hs-negative-soft); background: #fdf3f1;
  border-radius: var(--hs-radius-md); padding: 14px 16px; }
.wl-pa-confirm[hidden] { display: none; }
.wl-pa-confirm__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--hs-negative-dark); }
.wl-pa-confirm__text { margin: 6px 0 0; font-size: 13.5px; color: var(--hs-ink-700); line-height: 1.5; }
.wl-pa-confirm .wl-inline { gap: 10px; margin-top: 12px; }
@media (max-width: 560px) {
  .wl-pa-confirm .wl-inline .wl-btn, .wl-pa-confirm .wl-inline form, .wl-pa-go .wl-btn { width: 100%; justify-content: center; }
}

/* ── policy_groups rule-chain editor (U5) — page-local kit-consistent styles.
      The nested matcher tree, ordered rule cards, fixed else row, and inline
      per-node validation. Uses the shared --hs-* tokens. ─────────────────── */
.wl-alert { border-radius: var(--hs-radius-md); padding: 10px 12px; font-size: 12.5px; line-height: 1.45; margin: 8px 0; }
.wl-alert--error { background: #fdf3f1; border: 1px solid var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-alert--warn { background: var(--hs-warning-soft, #fff7e6); border: 1px solid var(--hs-warning-medium, #f0c36d); color: var(--hs-warning-dark); }
.wl-list { margin: 6px 0 0; padding-left: 18px; }
.wl-list li { margin: 2px 0; }
.wl-hint--muted { color: var(--hs-ink-400); }
.wl-btn--xs { padding: 4px 8px; font-size: 12px; border-radius: var(--hs-radius-sm); }
.wl-icon-btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; width: 26px; border-radius: var(--hs-radius-sm); border: 1px solid var(--hs-ink-200); background: #fff; color: var(--hs-ink-500); cursor: pointer; font-size: 13px; line-height: 1; }
.wl-icon-btn:hover { background: var(--hs-ink-050); color: var(--hs-ink-900); }
.wl-icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
.wl-icon-btn--danger:hover { background: #fdf3f1; border-color: var(--hs-negative-soft); color: var(--hs-negative-dark); }
.wl-select--sm, .wl-input--sm { padding: 5px 8px; font-size: 13px; }
.wl-input--sm { min-width: 120px; }
.wl-select--auto, .wl-input--auto { width: auto; }
.wl-radio, .wl-radio:focus { color: var(--hs-primary-200); --tw-ring-color: var(--hs-primary-200); }
.wl-link--strong { font-weight: 600; }
.wl-choice__body { flex: 1; }
.wl-choice__body > .wl-choice__desc { display: block; }
.wl-toggle--flush { border-top: 0; }
.wl-toggle__title--strong { font-weight: 600; }
.wl-grid2--flush { margin-bottom: 0; }
.wl-field--spaced { margin-top: 12px; }
.wl-hint--flush { margin: 0; }
.wl-hint--lead { margin: 0 0 12px; }
.wl-hint--spaced { margin: 8px 0 0; }
.wl-hint--tight { margin: 2px 0 0; }
.wl-inline--flush { margin: 0; }
.wl-inline--spaced { margin-top: 10px; }
.wl-inline--loose { gap: 8px; }
.wl-grow { flex: 1 1 180px; min-width: 0; }
.wl-grow--xs { flex-basis: 90px; }
.wl-grow--sm { flex-basis: 140px; }
.wl-grow--md { flex-basis: 200px; }
.wl-grow--lg { flex-basis: 240px; }
.wl-grow--fixed { flex-grow: 0; }
.wl-callout__body { flex: 1; min-width: 0; }
.wl-orderitem--wrap { align-items: flex-start; flex-wrap: wrap; }
.wl-orderitem__body { flex: 1 1 160px; min-width: 0; }
.wl-orderitem__value { font-size: 15px; color: var(--hs-ink-900); }
.wl-orderitem__marks { margin-top: 6px; }

.wl-chain { display: flex; flex-direction: column; gap: 10px; }
.wl-chain__rule { border: 1px solid var(--hs-ink-200); border-radius: var(--hs-radius-md); padding: 12px; background: #fff; }
.wl-chain__rule-head { display: flex; align-items: center; gap: 8px; }
.wl-chain__rule-num { display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; padding: 0 5px; border-radius: 999px; background: var(--hs-primary-100); color: var(--hs-primary-300); font-size: 12px; font-weight: 700; }
.wl-chain__rule-ctl { display: inline-flex; gap: 4px; margin-left: auto; }
.wl-chain__match { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--hs-ink-100); }
.wl-chain__root-ctl { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wl-chain__else { border: 1px dashed var(--hs-ink-300); border-radius: var(--hs-radius-md); padding: 12px; background: var(--hs-ink-050); }
.wl-chain__else-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hs-ink-400); }

.wl-node { border: 1px solid var(--hs-ink-100); border-radius: var(--hs-radius-sm); padding: 8px; background: var(--hs-ink-050); }
.wl-node + .wl-node { margin-top: 8px; }
.wl-node--error { border-color: var(--hs-negative-medium); background: #fdf3f1; }
.wl-node__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-node__ctl { display: inline-flex; gap: 4px; margin-left: auto; align-items: center; }
.wl-node__children, .wl-node__not-child { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--hs-ink-100); }
.wl-node__not-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--hs-negative-dark); }
.wl-node__err { margin-top: 6px; font-size: 12px; color: var(--hs-negative-dark); }
.wl-node--group { background: #fff; }

/* "Domínio de teste" (D73 + D74, HSF-773) on the Domínios step — the band under each active host, 1:1 with
   prototypes/admin-whitelabel-prototype/domains.html @ fa69383ef. */
.dm-help { margin: 0 0 14px; font-size: 14px; color: var(--hs-ink-600); line-height: 1.5; max-width: 640px; }
.dm-chip-test { background: var(--hs-warning-soft); color: var(--hs-warning-dark); border-color: transparent; }
.dm-host__testform { margin: 0; display: grid; gap: 10px; }
.dm-host__test { display: flex; align-items: center; gap: 16px; padding-top: 10px; border-top: 1px dashed var(--hs-ink-100); cursor: pointer; }
.dm-host__test.is-locked { cursor: not-allowed; }
.dm-host__testbody { flex: 1; min-width: 0; }
.dm-host__testlabel { display: block; font-size: 13px; font-weight: 600; color: var(--hs-ink-700); }
.dm-host__testhint { display: block; margin-top: 2px; font-size: 12.5px; color: var(--hs-ink-400); line-height: 1.45; }
.dm-host__test.is-locked .dm-host__testlabel { color: var(--hs-ink-400); }
.dm-host__test .wl-switch { margin-top: 0; }
.dm-host__confirm { margin: 0; }
.dm-host__confirm[hidden] { display: none; }
.dm-host__confirm-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 560px) {
  .dm-host__test { gap: 12px; }
  .dm-host__confirm-acts .wl-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── HSF-397 U8b: Roteamento (Fluxos) — ported 1:1 from admin-whitelabel-prototype/assets/wizard.css ── */
.wl-origin { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hs-ink-500); }
.wl-origin svg { height: 13px; width: 13px; color: var(--hs-ink-300); flex: none; }
.wl-rule__then-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.wl-rule__then > [data-issue] { width: 100%; }
.wl-onoff { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; min-height: 44px; }
.wl-onoff__label { font-size: 13px; font-weight: 600; color: var(--hs-ink-500); }
.wl-onoff:has(input:checked) .wl-onoff__label { color: var(--hs-primary-300); }
.wl-rules-off .wl-rule { background: var(--hs-ink-050); }
.wl-sheet {
  border: 0; padding: 0; width: min(460px, calc(100% - 32px)); border-radius: var(--hs-radius-lg);
  box-shadow: var(--hs-shadow-lg); color: var(--hs-ink-800); font-family: var(--hs-font);
}
.wl-sheet::backdrop { background: rgba(1,2,4,0.40); }
.wl-sheet__body { padding: 22px 22px 6px; }
.wl-sheet__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--hs-ink-900); }
.wl-sheet__text { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--hs-ink-600); }
.wl-sheet .wl-callout { margin-top: 12px; }
.wl-sheet__actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px 22px; }
@media (max-width: 560px) {
  .wl-pagetabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .wl-pagetabs::-webkit-scrollbar { display: none; }
  .wl-pagetab { flex: none; white-space: nowrap; padding: 9px 14px; }
  .wl-rule__then .wl-rule__effect { display: flex; flex-direction: column; width: 100%; }
  .wl-rule__then .wl-rule__effect .wl-seg__btn { min-height: 44px; text-align: left; }
  .wl-card__header:has(.wl-onoff) { flex-wrap: wrap; }
  .wl-card__header .wl-onoff { margin-left: 0; width: 100%; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--hs-ink-100); }
  .wl-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--hs-radius-lg) var(--hs-radius-lg) 0 0; }
  .wl-sheet__actions { flex-direction: column-reverse; }
  .wl-sheet__actions .wl-btn { width: 100%; justify-content: center; min-height: 44px; }
  .wl-stack-sm { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .wl-stack-sm .wl-btn { justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────
   Histórico das etapas (HSF-1042 U10b, D27–D29) — the step title bar with its 🕘 pill and the history modal.
   1:1 with the approved prototype (prototypes/admin-whitelabel-prototype/assets/change-requests.js: cr-titlebar,
   cr-pill, cr-md, cr-fchips, cr-tl, cr-diff), on the kit's tokens. Markup: whitelabel_portal/whitelabels/
   _title_badges + histories/{show,_entry,_row}; behavior: wl_history_modal_controller.js.
   ───────────────────────────────────────────────────────────── */
.wl-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wl-titlebar .wl-page__title { margin-right: auto; }
.wl-titlebar__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wl-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--hs-ink-100); background: var(--hs-white);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--hs-ink-700); cursor: pointer; transition: all .15s;
}
.wl-pill:hover { border-color: var(--hs-primary-200); color: var(--hs-primary-400); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wl-pill svg { height: 15px; width: 15px; }
.wl-pill__n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--hs-ink-050);
  font-size: 11.5px; display: grid; place-items: center;
}
.wl-hist {
  border: 0; padding: 0; width: min(640px, calc(100% - 32px)); max-height: 88vh; border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28); color: var(--hs-ink-800); font-family: var(--hs-font); overflow: hidden;
}
.wl-hist::backdrop { background: rgba(6,17,15,.5); backdrop-filter: blur(2px); }
.wl-hist__panel { display: flex; flex-direction: column; max-height: 88vh; }
.wl-hist__head { padding: 18px 22px 12px; border-bottom: 1px solid var(--hs-ink-100); }
.wl-hist__head b { display: block; font-size: 17px; color: var(--hs-ink-900); }
.wl-hist__head small { font-size: 13px; color: var(--hs-ink-500); }
.wl-hist__body { flex: 1; overflow-y: auto; padding: 16px 22px; }
.wl-hist__foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px;
  border-top: 1px solid var(--hs-ink-100); background: var(--hs-ink-050);
}
.wl-hist__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.wl-hist__chips button {
  border: 1px solid var(--hs-ink-100); background: var(--hs-white); border-radius: 999px; padding: 4px 11px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--hs-ink-600); cursor: pointer;
}
.wl-hist__chips button.on { background: var(--hs-ink-900); border-color: var(--hs-ink-900); color: var(--hs-white); }
.wl-hist__empty { font-size: 13px; color: var(--hs-ink-400); }
.wl-hist__list { list-style: none; margin: 0; padding: 0; }
.wl-hist__entry { position: relative; padding: 0 0 16px 26px; }
.wl-hist__entry[hidden] { display: none; }
.wl-hist__entry::before {
  content: ''; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; background: var(--hs-ink-100);
}
.wl-hist__entry:last-child::before { display: none; }
.wl-hist__dot {
  position: absolute; left: 0; top: 3px; height: 16px; width: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; color: var(--hs-white);
}
.wl-hist__dot--muted { background: var(--hs-ink-500); }
.wl-hist__dot--teal { background: var(--hs-primary-400); }
.wl-hist__dot--success { background: var(--hs-primary-200); }
.wl-hist__dot--info { background: var(--hs-info-dark); }
.wl-hist__dot--warning { background: var(--hs-warning-medium); }
.wl-hist__dot--danger { background: var(--hs-negative-medium); }
.wl-hist__title { margin: 0; font-size: 14px; color: var(--hs-ink-900); }
.wl-hist__meta { margin: 1px 0 0; font-size: 12px; color: var(--hs-ink-400); }
.wl-hist__unattributed { color: var(--hs-warning-dark); font-weight: 600; }
.wl-hist__why {
  margin: 6px 0 0; font-size: 13px; color: var(--hs-ink-700); padding: 7px 10px;
  border-left: 3px solid var(--hs-primary-200); background: rgba(0,163,147,.06); border-radius: 0 8px 8px 0;
}
.wl-hist__diff {
  list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--hs-ink-100); border-radius: 10px;
  overflow: hidden; font-size: 13px;
}
.wl-hist__row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; align-items: start; padding: 8px 12px;
  border-bottom: 1px solid var(--hs-ink-050);
}
.wl-hist__row:last-child { border-bottom: 0; }
.wl-hist__row--more { display: block; color: var(--hs-ink-500); }
.wl-hist__field { color: var(--hs-ink-500); word-break: break-word; }
.wl-hist__row del {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #FDE7E3; color: #9b2c1b;
  border-radius: 5px; padding: 1px 6px; word-break: break-word;
}
.wl-hist__row ins {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #DDF5E6; color: #145c32;
  text-decoration: none; font-weight: 600; border-radius: 5px; padding: 1px 6px; word-break: break-word;
}
.wl-hist__thumb {
  display: block; height: 32px; width: auto; max-width: 96px; object-fit: contain; border-radius: 4px;
  background: var(--hs-white); box-shadow: inset 0 0 0 1px var(--hs-ink-100);
}
.wl-hist__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.wl-hist__more { margin-top: 4px; }
@media (max-width: 560px) {
  .wl-hist { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .wl-hist__row { grid-template-columns: 1fr 1fr; }
  .wl-hist__field { grid-column: 1 / -1; }
}

/* ─────────────────────────────────────────────────────────────
   Pedidos de aprovação — o lado de quem pede (HSF-1043 M4 U11, spec §7.8, D27–D29): the step's banner, the
   "pede aprovação"/"direto" tag, the lock of a claimed block, the "⏳ proposto:" chip, the per-source lock on the
   fonte band, the modal's reason and the toast. 1:1 with the approved prototype (prototypes/admin-whitelabel-
   prototype/assets/change-requests.js: cr-banner, cr-b-*, cr-btn-tag, cr-locked, cr-prop, cr-lbl, cr-invalid,
   cr-toast), on the kit's tokens; the modal itself reuses the history modal's box (`wl-hist`). Markup:
   whitelabel_portal/whitelabels/_change_request_{banner,lock,modal} + `ChangeRequestHelper`; behavior:
   wl_change_request_controller.js.
   ───────────────────────────────────────────────────────────── */
.wl-cr-banner {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px;
  border-radius: var(--hs-radius-lg, 14px); font-size: 14px; line-height: 1.45;
}
.wl-cr-banner b { font-weight: 600; }
.wl-cr-banner__ico {
  flex: none; height: 28px; width: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px;
}
.wl-cr-banner__text { flex: 1; min-width: 0; }
.wl-cr-banner__acts { margin-left: auto; display: flex; flex: none; gap: 8px; flex-wrap: wrap; align-items: center; }
.wl-cr-banner--info { background: #EAFBF8; box-shadow: inset 0 0 0 1px rgba(0,163,147,.25); color: #064a42; }
.wl-cr-banner--info .wl-cr-banner__ico { background: var(--hs-primary-000); }
.wl-cr-banner--muted { background: var(--hs-ink-050); box-shadow: inset 0 0 0 1px var(--hs-ink-100); color: var(--hs-ink-700); }
.wl-cr-banner--muted .wl-cr-banner__ico { background: var(--hs-white); }
.wl-cr-banner--warn { background: #FFF7E0; box-shadow: inset 0 0 0 1px #F5D27A; color: #6b4a00; }
.wl-cr-banner--warn .wl-cr-banner__ico { background: #FFE9A8; }
.wl-cr-banner--bad { background: #FDF0EE; box-shadow: inset 0 0 0 1px #F3B9AF; color: #7a2416; }
.wl-cr-banner--bad .wl-cr-banner__ico { background: #FAD6CF; }
.wl-cr-banner--ok { background: #EAF8EF; box-shadow: inset 0 0 0 1px #A9DDBC; color: #145c32; }
.wl-cr-banner--ok .wl-cr-banner__ico { background: #C9F0D6; }
.wl-cr-btn-tag {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.22);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.wl-locked { position: relative; }
.wl-locked input, .wl-locked textarea, .wl-locked select, .wl-locked button:not(.wl-cr-keep) {
  pointer-events: none; opacity: .6;
}
.wl-cr-prop {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  background: #FFF7E0; box-shadow: inset 0 0 0 1px #F5D27A; color: #6b4a00; font-size: 12px; font-weight: 600;
  max-width: 100%;
}
.wl-cr-prop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-fonte--locked { box-shadow: inset 0 0 0 1px #F5D27A; }
.wl-fonte__lock { margin-left: 4px; font-size: 12px; }
.wl-cr-lbl {
  margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hs-ink-400);
}
.wl-cr-lbl:first-child { margin-top: 0; }
.wl-cr-lbl label { font: inherit; color: inherit; }
.wl-cr-lbl__req { color: #c0392b; }
.wl-cr-lbl__opt { text-transform: none; letter-spacing: 0; font-weight: 600; }
.wl-cr-lbl__req[hidden], .wl-cr-lbl__opt[hidden] { display: none; }
.wl-cr-invalid { border-color: #e5484d !important; box-shadow: 0 0 0 3px #FDE7E3 !important; }
.wl-cr-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 80px); opacity: 0; visibility: hidden;
  transition: all .28s; z-index: 90; background: var(--hs-ink-900); color: var(--hs-white); font-size: 13.5px;
  padding: 10px 18px; border-radius: 999px;
}
.wl-cr-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .wl-cr-toast { transition: none; } }
@media (max-width: 560px) {
  .wl-cr-banner { flex-wrap: wrap; }
  .wl-cr-banner__acts { margin-left: 0; width: 100%; }
  .wl-cr-banner__acts .wl-btn { flex: 1; min-height: 44px; }
}

/* ═════════════ HSF-1111 U10 — Detalhes editor (Tema da plataforma · Contrato) ═════════════
 * Ported from the admin prototype (platform-theme.css): the Detalhes list, the Etiqueta card and the row modal. Only the rules the
 * server-rendered editor uses; the preview column, the screen tabs and the Textos pieces belong to other units. */
.dp-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dp-row {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-md);
  background: #fff;
  transition: border-color var(--hs-dur) var(--hs-ease), box-shadow var(--hs-dur) var(--hs-ease);
}
.dp-row + .dp-row {
  margin-top: 8px;
}
.dp-row.is-off {
  background: var(--hs-ink-050);
}
.dp-row.is-off .dp-row__title {
  color: var(--hs-ink-400);
}
.dp-row.has-error {
  border-color: var(--hs-negative-medium);
  box-shadow: inset 3px 0 0 var(--hs-negative-medium);
}
.dp-row.is-drop {
  box-shadow: 0 -3px 0 var(--hs-primary-200);
}
.dp-row.is-dragging {
  opacity: .45;
}
.dp-row.is-readonly {
  background: var(--hs-ink-050);
}
.dp-row__handle {
  display: flex;
  padding-top: 3px;
  color: var(--hs-ink-300);
  cursor: grab;
}
.dp-row__handle svg {
  height: 16px;
  width: 16px;
}
.dp-row__pos {
  min-width: 22px;
  padding-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-ink-400);
}
.dp-row__main {
  min-width: 0;
}
.dp-row__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hs-ink-900);
}
.dp-row__acts {
  display: flex;
  gap: 2px;
}
.dp-iconbtn {
  display: grid;
  place-items: center;
  height: 32px;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hs-ink-500);
  cursor: pointer;
}
.dp-iconbtn:hover {
  background: var(--hs-ink-050);
  color: var(--hs-ink-900);
}
.dp-iconbtn[disabled] {
  opacity: .3;
  cursor: default;
  background: transparent;
}
.dp-iconbtn svg {
  height: 16px;
  width: 16px;
}
.dp-iconbtn--danger:hover {
  background: var(--hs-negative-soft);
  color: var(--hs-negative-dark);
}
.dp-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--hs-primary-300);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dp-layoutmsg {
  margin-bottom: 12px;
}
.dp-addbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .dp-row {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .dp-row__handle {
    display: none;
  }
  .dp-row__acts {
    grid-column: 1 / -1;
    justify-content: flex-end;
    border-top: 1px dashed var(--hs-ink-100);
    padding-top: 6px;
  }
}
.dp-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .dp-row2 {
    grid-template-columns: 1fr;
  }
}
.dp-ro {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--hs-radius-md);
  background: var(--hs-ink-050);
  border: 1px dashed var(--hs-ink-200);
  font-size: 14px;
  color: var(--hs-ink-700);
}
.dp-ro svg {
  height: 14px;
  width: 14px;
  color: var(--hs-ink-400);
}
.pt-form .wl-card__header {
  flex-wrap: wrap;
  row-gap: 10px;
}
.pt-form .wl-card__header .pt-state {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
@keyframes pt-flash {
  0% { background: #CFF5EF;
  } 100% { background: #F1FBF9;
  };
}
.dp-row.is-locked .dp-row__handle {
  visibility: hidden;
}
.pt-form .wl-card__footer {
  flex-wrap: wrap;
  row-gap: 8px;
}
.pt-form #pt-foot {
  flex: 1 1 220px;
  font-size: 13px;
}
.pt-dhead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pt-dhead__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--hs-ink-900);
  letter-spacing: -.005em;
}
.dp-row.pt-li {
  grid-template-columns: auto auto auto minmax(0, 1fr) minmax(120px, max-content) auto;
  align-items: center;
}
.dp-row.pt-li .dp-row__handle, .dp-row.pt-li .dp-row__pos {
  padding-top: 0;
}
.pt-li__name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hs-ink-900);
  text-align: left;
  cursor: pointer;
}
button.pt-li__name:hover {
  color: var(--hs-primary-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.pt-li__name:focus-visible {
  outline: 2px solid var(--hs-primary-200);
  outline-offset: 2px;
  border-radius: 4px;
}
.pt-block {
  container-type: inline-size;
}
.pt-pillcard {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--hs-ink-100);
  border-radius: 12px;
  background: #fff;
}
.pt-pillcard .pt-dhead {
  margin-bottom: 8px;
}
.pt-pillcard__body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.pt-pillcard .dp-addbar {
  margin-top: 10px;
}
.ptm-ov {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6,17,15,.5);
  backdrop-filter: blur(2px);
  animation: ptm-fade .16s ease-out;
}
.ptm {
  width: min(920px, 100%);
  max-height: min(920px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  font-family: var(--hs-font);
  color: var(--hs-ink-800);
  animation: ptm-rise .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes ptm-fade {
  from { opacity: 0;
  };
}
@keyframes ptm-rise {
  from { opacity: 0;
  transform: translateY(10px) scale(.99);
  };
}
@keyframes ptm-in {
  from { opacity: 0;
  };
}
.ptm__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--hs-ink-100);
}
.ptm__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--hs-ink-900);
}
.ptm__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--hs-ink-500);
}
.ptm__x {
  margin-left: auto;
  display: grid;
  place-items: center;
  height: 36px;
  width: 36px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hs-ink-500);
  cursor: pointer;
}
.ptm__x:hover {
  background: var(--hs-ink-050);
  color: var(--hs-ink-900);
}
.ptm__x svg {
  height: 20px;
  width: 20px;
}
.ptm__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #F7F9F9;
}
.ptm__form {
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ptm__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--hs-ink-100);
  background: #fff;
}
.ptm-grp {
  border: 1px solid var(--hs-ink-100);
  border-radius: 12px;
  background: #fff;
}
.ptm-grp > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 12px;
}
.ptm-grp > summary::-webkit-details-marker {
  display: none;
}
.ptm-grp > summary:focus-visible {
  outline: 2px solid var(--hs-primary-200);
  outline-offset: 2px;
}
.ptm-grp__t {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hs-ink-900);
  white-space: nowrap;
}
.ptm-grp__sum {
  min-width: 0;
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--hs-ink-500);
}
.ptm-grp > summary .wl-ovgroup__chev {
  margin-left: auto;
  height: 16px;
  width: 16px;
  flex: none;
  color: var(--hs-ink-400);
  transition: transform var(--hs-dur) var(--hs-ease);
}
.ptm-grp[open] > summary .wl-ovgroup__chev {
  transform: rotate(180deg);
}
.ptm-grp__body {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--hs-ink-050);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ptm-grp__body > * {
  margin-top: 0;
}
.ptm-field {
  min-width: 0;
}
.ptm-field .wl-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ptm-field .wl-input + .wl-select, .ptm-field .wl-select + .wl-input {
  margin-top: 6px;
}
.ptm .dp-row2 {
  gap: 12px;
}
/* HSF-1641 S-F6 (D93): every select of the «Detalhes» modal is 48 px tall, as the platform-theme step's own fields
   (41 px in a field, 36 px in a rule before). */
.ptm .wl-select {
  height: 48px;
}
.ptm-hint {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--hs-ink-500);
}
.ptm-hint code, .ptm-msg code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--hs-ink-050);
  box-shadow: inset 0 0 0 1px var(--hs-ink-100);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--hs-ink-700);
}
.ptm-muted {
  color: var(--hs-ink-500);
  font-weight: 400;
}
.ptm-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  letter-spacing: -.01em;
}
.ptm-under {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hs-ink-500);
}
.ptm-count {
  flex: none;
  color: var(--hs-ink-400);
  font-variant-numeric: tabular-nums;
}
.ptm-count.is-over {
  color: var(--hs-negative-dark);
  font-weight: 600;
}
.ptm .pt-lang {
  margin: 0;
}
.ptm-switchrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-md);
}
.ptm-switchrow b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hs-ink-800);
}
.ptm-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.ptm-msg svg {
  height: 14px;
  width: 14px;
  flex: none;
  margin-top: 2px;
}
.ptm-msg.is-err {
  color: var(--hs-negative-dark);
}
.ptm-msg.is-warn {
  color: var(--hs-warning-dark);
}
.ptm-msg.is-good {
  color: var(--hs-primary-400);
}
.dp-elo {
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-md);
  background: #fff;
}
.dp-elo + .dp-elo {
  margin-top: 8px;
}
.dp-elo.is-active {
  border-color: var(--hs-primary-200);
}
.dp-elo__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--hs-radius-md);
}
.dp-elo__head:focus-visible {
  outline: 2px solid var(--hs-primary-200);
  outline-offset: 2px;
}
.dp-elo__n {
  display: grid;
  place-items: center;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--hs-ink-100);
  color: var(--hs-ink-600);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.dp-elo.is-active .dp-elo__n {
  background: var(--hs-primary-200);
  color: #fff;
}
.dp-elo__what {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hs-ink-900);
  overflow-wrap: anywhere;
}
.dp-elo__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-top: 1px dashed var(--hs-ink-100);
}
.ptm-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ptm-kind {
  padding: 7px 12px;
  border: 1px solid var(--hs-ink-200);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--hs-ink-700);
  cursor: pointer;
  transition: border-color var(--hs-dur) var(--hs-ease), background var(--hs-dur) var(--hs-ease);
}
.ptm-kind:hover {
  border-color: var(--hs-ink-300);
}
.ptm-kind.is-on {
  border-color: var(--hs-primary-200);
  background: #F2FBF9;
  color: var(--hs-primary-400);
  box-shadow: inset 0 0 0 1px var(--hs-primary-200);
  font-weight: 600;
}
.ptm-kind:focus-visible {
  outline: 2px solid var(--hs-primary-200);
  outline-offset: 2px;
}
.ptm-addrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ptm-rules {
  --cols: 16px 18px 128px minmax(0, 1.3fr) 14px minmax(0, 1fr) 104px auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ptm-rule .wl-input, .ptm-rule .wl-select {
  padding: 7px 9px;
  font-size: 13px;
}
.ptm-rule .wl-select {
  padding-right: 28px;
  background-position: right 6px center;
  background-size: 16px;
}
.ptm-rule__n {
  font-size: 11px;
  font-weight: 700;
  color: var(--hs-ink-400);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ptm-rule__val {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
}
.ptm-rule__val .wl-input {
  flex: 1 1 0;
  min-width: 60px;
}
.ptm-ci {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--hs-ink-600);
  cursor: pointer;
}
.ptm-ci input {
  margin: 0;
  accent-color: var(--hs-primary-200);
}
.ptm-rule__and {
  font-size: 12px;
  color: var(--hs-ink-500);
}
.ptm-rule__arrow {
  color: var(--hs-ink-300);
  text-align: center;
}
.ptm-rule__acts {
  display: flex;
}
.ptm-rule__acts .dp-iconbtn {
  height: 30px;
  width: 30px;
}
.ptm-rule__err {
  grid-column: 3 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--hs-negative-dark);
}
.ptm-rule__err.at-op {
  grid-column: 3 / 5;
}
.ptm-rule__err.at-value {
  grid-column: 4 / 6;
}
.ptm-rule__err.at-text {
  grid-column: 6 / -1;
}
.ptm-rule__err:empty {
  display: none;
}
.ptm-rule .is-bad {
  border-color: var(--hs-negative-medium);
  box-shadow: 0 0 0 3px rgba(230,70,46,.12);
}
.ptm-rule__cell {
  min-width: 0;
}
.ptm-rule__cell > .wl-input, .ptm-rule__cell > .wl-select {
  width: 100%;
}
.ptm-rule__grip {
  display: flex;
  color: var(--hs-ink-300);
  cursor: grab;
}
.ptm-rule__grip svg {
  height: 14px;
  width: 14px;
}
.ptm-rule.is-drop {
  box-shadow: 0 -3px 0 var(--hs-primary-200);
}
.ptm-rule.is-dragging {
  opacity: .45;
}
.ptm-rules__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ptm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  border: 1px dashed var(--hs-ink-300);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  color: var(--hs-warning-dark);
  cursor: pointer;
  white-space: nowrap;
}
.ptm-chip:hover {
  border-color: var(--hs-primary-200);
  color: var(--hs-primary-400);
}
.ptm-chip svg {
  height: 12px;
  width: 12px;
}
.dp-found {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-md);
  padding: 6px 10px;
}
.dp-found__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--hs-ink-050);
}
.dp-found__row:last-child {
  border-bottom: 0;
}
.dp-found__raw {
  color: var(--hs-ink-700);
  overflow-wrap: anywhere;
}
.dp-found__ok {
  font-size: 12px;
  font-weight: 600;
  color: var(--hs-positive-dark);
}
.dp-found__raw small {
  color: var(--hs-ink-400);
}
.ptm-test {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed var(--hs-ink-200);
}
.ptm-test label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hs-ink-600);
}
.ptm-test__note {
  flex-basis: 100%;
  order: 3;
  font-size: 11.5px;
  color: var(--hs-ink-400);
}
.ptm-test .wl-input {
  flex: 0 1 220px;
  width: auto;
  padding: 6px 9px;
  font-size: 13px;
}
.ptm-test__out {
  font-size: 13px;
  color: var(--hs-ink-700);
}
.ptm-test__out b {
  color: var(--hs-primary-400);
}
.ptm-foot__msg {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--hs-ink-500);
}
.ptm-foot__msg svg {
  height: 14px;
  width: 14px;
  flex: none;
  margin-top: 2px;
}
.ptm-foot__msg.is-err {
  color: var(--hs-negative-dark);
}
.ptm-foot__msg.is-warn {
  color: var(--hs-warning-dark);
}
.ptm .wl-help__pop {
  z-index: 80;
}
.ptm-labrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ptm-labrow .wl-label {
  margin: 0;
}

@media (max-width: 760px) {
  .ptm-rule {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 10px;
    border: 1px solid var(--hs-ink-100);
    border-radius: 10px;
    background: #fff;
  }
  .ptm-rule__n, .ptm-rule__arrow, .ptm-rule__grip {
    display: none;
  }
  .ptm-rule__cell::before {
    content: attr(data-lab);
    display: block;
    flex-basis: 100%;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--hs-ink-500);
  }
  .ptm-rule__val, .ptm-rule__cell[data-lab="Texto exibido"] {
    grid-column: 1 / -1;
  }
  .ptm-rule__acts {
    justify-content: flex-end;
    align-self: end;
  }
  .ptm-rule__err, .ptm-rule__err.at-op, .ptm-rule__err.at-value, .ptm-rule__err.at-text {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .ptm-ov {
    padding: 0;
    align-items: stretch;
  }
  .ptm {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
  .ptm__head {
    padding: 14px 16px 12px;
  }
  .ptm__form {
    padding: 12px 12px 20px;
  }
  .ptm-grp__sum {
    display: none;
  }
  .ptm__foot {
    flex-wrap: wrap;
    padding: 10px 16px 14px;
  }
  .ptm-foot__msg {
    flex-basis: 100%;
  }
  .ptm__foot .wl-btn {
    flex: 1;
    min-height: 44px;
  }
}
.pt-lang {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--hs-ink-400);
}
.pt-sumline {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hs-ink-500);
  overflow-wrap: anywhere;
}
.pt-pillcard__warn {
  display: flex;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hs-warning-dark);
}
.pt-pillcard__warn svg {
  height: 14px;
  width: 14px;
  flex: none;
  margin-top: 2px;
}
.ptm-grp__why {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hs-ink-500);
}
.ptm-typerow {
  padding: 10px 12px;
  border-radius: var(--hs-radius-md);
  background: #F2FBF9;
  border: 1px solid rgba(0,163,147,.25);
}
.ptm-typerow .wl-select {
  max-width: 320px;
}
.ptm-typerow > .wl-label {
  margin: 0 8px 0 0;
}
.ptm-typefixed {
  font-size: 13px;
  color: var(--hs-ink-700);
}
.ptm-kindhint {
  margin-top: 2px;
}
.wl-help__pop .ptm-tech {
  color: var(--hs-ink-200);
}
.ptm-tech {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--hs-ink-400);
}
.dp-elo.is-single {
  border: 0;
  background: transparent;
}
.dp-elo.is-single > .dp-elo__body {
  padding: 0;
  border-top: 0;
}
.ptm-msg.is-info {
  color: var(--hs-ink-600);
}
.ptm-msg.is-info svg {
  color: var(--hs-info-dark);
}
.ptm-foot__msg.is-todo {
  color: var(--hs-ink-600);
}
.ptm-foot__msg.is-todo svg {
  color: var(--hs-warning-medium);
}
.ptm-foot__go {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ptm-foot__go:hover {
  color: var(--hs-ink-900);
}
.ptm__foot .wl-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.pt-form .wl-card__desc .dp-linkbtn {
  font-size: inherit;
}
@media (max-width: 560px) {
  .pt-form .wl-card__footer .wl-btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
}
.pt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pt-reqbox {
  margin: 12px 18px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--hs-warning-soft);
  color: var(--hs-ink-800, #1f2a29);
  font-size: 13px;
  line-height: 1.45;
}
.pt-reqbox svg {
  flex: none;
  height: 15px;
  width: 15px;
  margin-top: 2px;
  color: var(--hs-warning-dark);
}
.pt-reqbox .cr-lbl {
  margin: 10px 0 4px;
}
.pt-reqbox .cr-diff {
  background: #fff;
}
@media (max-width: 560px) {
  .pt-reqbox {
    margin: 10px 12px 0;
  }
  .pt-reqbox .cr-diff > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.pt-reqbox .dp-addbar {
  margin-top: 10px;
}
.pt-reqbox__h {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
}
.pt-reqbox--pkg {
  background: #eafbf8;
  box-shadow: inset 0 0 0 1px rgba(0, 163, 147, .25);
}
.pt-reqbox--pkg.is-bad {
  background: #fdf0ee;
  box-shadow: inset 0 0 0 1px #f3b9af;
}
.pt-reqlines {
  margin: 0;
  padding-left: 18px;
}
.dp-proposed {
  background: var(--hs-warning-soft);
  color: var(--hs-warning-dark);
}
.wl-chip.pt-chip-pkg {
  background: #eafbf8;
  color: #064a42;
  box-shadow: inset 0 0 0 1px rgba(0, 163, 147, .3);
}
.pt-rejected {
  margin: 12px 18px 0;
}
.ptm-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ptm-ent {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--hs-ink-050);
  color: var(--hs-ink-600);
  white-space: nowrap;
}
.ptm-ent[data-ent="debt"], .ptm-ent[data-ent="offer"], .ptm-ent[data-ent="payload"], .ptm-ent[data-ent="item"] {
  background: #EEF4FF;
  color: #2f4f8a;
}
.ptm-ent[data-ent="agreement"], .ptm-ent[data-ent="instalment"] {
  background: #F2FBF9;
  color: var(--hs-primary-400);
}
.ptm-ent[data-ent="simulation"] {
  background: #FFF6E5;
  color: #7a5200;
}
.ptm-kind.is-on .ptm-ent {
  box-shadow: inset 0 0 0 1px currentColor;
}
.pt-copied {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: var(--hs-radius-md);
  background: var(--hs-ink-050);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--hs-ink-600);
}
.pt-pillcard .pt-copied {
  margin: 8px 0 0;
}
.pt-copylist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-copyopt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--hs-ink-100);
  border-radius: var(--hs-radius-md);
  cursor: pointer;
}
.pt-copyopt:has(input:checked) {
  border-color: var(--hs-primary-200);
  background: #F2FBF9;
}
.pt-copyopt input {
  margin-top: 3px;
  accent-color: var(--hs-primary-300);
}
.pt-copyopt span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pt-copyopt small {
  color: var(--hs-ink-500);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.pt-copywhy {
  font-size: 12px;
  line-height: 1.45;
  color: var(--hs-ink-500);
}

/* Not in the prototype: pieces of the server-rendered editor. */
.pt-sed .pt-dot { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: var(--hs-warning-medium); }
.pt-sed .pt-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hs-ink-500); }
.pt-sed .pt-foot { font-size: 13px; color: var(--hs-ink-500); }
.pt-sed .pt-rowerr, .ptm-fielderr { margin: 4px 0 0; font-size: 12.5px; color: var(--hs-negative-dark); }
.ptm-fielderr:empty { display: none; }
.pt-sed .pt-resetlist { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; }
.pt-sed .dp-iconbtn--spot { display: block; height: 32px; width: 32px; pointer-events: none; }
.pt-sed [aria-disabled="true"], .ptm [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ptm-ov[hidden] { display: none; }
.ptm.ptm--sm { max-width: 520px; }
.ptm__ctx { display: none; }
.ptm-ov .ptm-grp:target, .ptm-grp[data-open-now] { scroll-margin-top: 12px; }
.ptm .is-bad { border-color: var(--hs-negative-medium); }

/* ── The Detalhes list: search, locked lines (HSF-1111 U10b) ───────────────── */
.pt-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.pt-tools .pt-search { flex: 1 1 200px; width: auto; }
.is-filtering .dp-row__handle { visibility: hidden; }
.pt-lock { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--hs-ink-100); color: var(--hs-ink-600); font-size: 11px; font-weight: 600; }
.pt-lock svg { height: 11px; width: 11px; }
.pt-lockwhy { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--hs-ink-500); }
.ptm-lockednote { margin: 0 0 12px; }
.ptm-recipe { display: contents; }

/* A (i) that opens a line (no text before it) sits at the modal's edge: its pop opens to the right, never centred past the clip. */
.ptm .ptm-labrow > .wl-help:first-child .wl-help__pop { left: 0; transform: translateY(4px); }
.ptm .ptm-labrow > .wl-help:first-child .wl-help__pop::after { left: 8px; transform: none; }
.ptm .ptm-labrow > .wl-help:first-child:hover .wl-help__pop,
.ptm .ptm-labrow > .wl-help:first-child .wl-help__btn:focus-visible + .wl-help__pop,
.ptm .ptm-labrow > .wl-help:first-child.is-open .wl-help__pop { transform: translateY(0); }

/* Removal confirmation of a platform (HSF-1111 B3): a native dialog listing what the removal discards and orphans. */
.wl-rmplat {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 20px; border: 0; border-radius: 14px; background: var(--hs-white, #fff);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3); color: var(--hs-ink-800);
}
.wl-rmplat::backdrop { background: rgba(15, 23, 42, .45); }
.wl-rmplat__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--hs-ink-900); }
.wl-rmplat__sub { margin: 12px 0 4px; font-weight: 600; }
.wl-rmplat__group { margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--hs-ink-500); }
.wl-rmplat__list { margin: 0 0 8px; padding-left: 20px; list-style: disc; }
.wl-rmplat__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 560px) {
  .wl-rmplat__foot { flex-direction: column-reverse; }
  .wl-rmplat__foot .wl-btn { justify-content: center; min-height: 44px; }
}

/* HSF-1553: a draft with a deletion scheduled or waiting for approval (index mark). */
.wl-badge--deleting { background: #FFF7E0; color: #6b4a00; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

.scrollable::-webkit-scrollbar {
  display: none;
}

.scrollable {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/*!
 * FilePond 4.30.4
 * Licensed under MIT, https://opensource.org/licenses/MIT/
 * Please visit https://pqina.nl/filepond/ for details.
 */

/* eslint-disable */
.filepond--assistant {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}
/* Hard to override styles */
.filepond--browser.filepond--browser {
    /* is positioned absolute so it is focusable for form validation errors */
    position: absolute;
    margin: 0;
    padding: 0;

    /* is positioned ~behind drop label */
    left: 1em;
    top: 1.75em;
    width: calc(100% - 2em);

    /* hide visually */
    opacity: 0;
    font-size: 0; /* removes text cursor in Internet Explorer 11 */
}
.filepond--data {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    visibility: hidden;
    pointer-events: none;
    contain: strict;
}
.filepond--drip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0.1;

    /* can't interact with this element */
    pointer-events: none;

    /* inherit border radius from parent (needed for drip-blob cut of) */
    border-radius: 0.5em;

    /* this seems to prevent Chrome from redrawing this layer constantly */
    background: rgba(0, 0, 0, 0.01);
}
.filepond--drip-blob {
    position: absolute;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    top: 0;
    left: 0;
    width: 8em;
    height: 8em;
    margin-left: -4em;
    margin-top: -4em;
    background: #292625;
    border-radius: 50%;

    /* will be animated */
    will-change: transform, opacity;
}
.filepond--drop-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    color: #4f4f4f;

    /* center contents */
    display: flex;
    justify-content: center;
    align-items: center;

    /* fixes IE11 centering problems (is overruled by label min-height) */
    height: 0px;

    /* dont allow selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* will be animated */
    will-change: transform, opacity;
}
/* Hard to override styles on purpose */
.filepond--drop-label.filepond--drop-label label {
    display: block;
    margin: 0;
    padding: 0.5em; /* use padding instead of margin so click area is not impacted */
}
.filepond--drop-label label {
    cursor: default;
    font-size: 0.875em;
    font-weight: normal;
    text-align: center;
    line-height: 1.5;
}
.filepond--label-action {
    text-decoration: underline;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
    -webkit-text-decoration-color: #a7a4a4;
    text-decoration-color: #a7a4a4;
    cursor: pointer;
}
.filepond--root[data-disabled] .filepond--drop-label label {
    opacity: 0.5;
}
/* Hard to override styles */
.filepond--file-action-button.filepond--file-action-button {
    font-size: 1em;
    width: 1.625em;
    height: 1.625em;

    font-family: inherit;
    line-height: inherit;

    margin: 0;
    padding: 0;
    border: none;
    outline: none;

    will-change: transform, opacity;

    /* hidden label */
}
.filepond--file-action-button.filepond--file-action-button span {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}
.filepond--file-action-button.filepond--file-action-button {
    /* scale SVG to fill button */
}
.filepond--file-action-button.filepond--file-action-button svg {
    width: 100%;
    height: 100%;
}
.filepond--file-action-button.filepond--file-action-button {
    /* bigger touch area */
}
.filepond--file-action-button.filepond--file-action-button::after {
    position: absolute;
    left: -0.75em;
    right: -0.75em;
    top: -0.75em;
    bottom: -0.75em;
    content: '';
}
/* Soft styles */
.filepond--file-action-button {
    /* use default arrow cursor */
    cursor: auto;

    /* reset default button styles */
    color: #fff;

    /* set default look n feel */
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    background-image: none;

    /* we animate box shadow on focus */
    /* it's only slightly slower than animating */
    /* a pseudo-element with transforms and renders */
    /* a lot better on chrome */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transition: box-shadow 0.25s ease-in;
}
.filepond--file-action-button:hover,
.filepond--file-action-button:focus {
    box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
}
.filepond--file-action-button[disabled] {
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.25);
}
.filepond--file-action-button[hidden] {
    display: none;
}
/* edit button */
.filepond--action-edit-item.filepond--action-edit-item {
    width: 2em;
    height: 2em;
    padding: 0.1875em;
}
.filepond--action-edit-item.filepond--action-edit-item[data-align*='center'] {
    margin-left: -0.1875em;
}
.filepond--action-edit-item.filepond--action-edit-item[data-align*='bottom'] {
    margin-bottom: -0.1875em;
}
.filepond--action-edit-item-alt {
    border: none;
    line-height: inherit;
    background: transparent;
    font-family: inherit;
    color: inherit;
    outline: none;
    padding: 0;
    margin: 0 0 0 0.25em;
    pointer-events: all;
    position: absolute;
}
.filepond--action-edit-item-alt svg {
    width: 1.3125em;
    height: 1.3125em;
}
.filepond--action-edit-item-alt span {
    font-size: 0;
    opacity: 0;
}
.filepond--file-info {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    margin: 0 0.5em 0 0;
    min-width: 0;

    /* will be animated */
    will-change: transform, opacity;

    /* can't do anything with this info */
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* no margins on children */
}
.filepond--file-info * {
    margin: 0;
}
.filepond--file-info {
    /* we don't want to have these overrules so these selectors are a bit more specific */
}
.filepond--file-info .filepond--file-info-main {
    font-size: 0.75em;
    line-height: 1.2;

    /* we want ellipsis if this bar gets too wide */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.filepond--file-info .filepond--file-info-sub {
    font-size: 0.625em;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
    white-space: nowrap;
}
.filepond--file-info .filepond--file-info-sub:empty {
    display: none;
}
.filepond--file-status {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-grow: 0;
    flex-shrink: 0;

    margin: 0;
    min-width: 2.25em;
    text-align: right;

    /* will be animated */
    will-change: transform, opacity;

    /* can't do anything with this info */
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* no margins on children */
}
.filepond--file-status * {
    margin: 0;
    white-space: nowrap;
}
.filepond--file-status {
    /* font sizes */
}
.filepond--file-status .filepond--file-status-main {
    font-size: 0.75em;
    line-height: 1.2;
}
.filepond--file-status .filepond--file-status-sub {
    font-size: 0.625em;
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out;
}
/* Hard to override styles */
.filepond--file-wrapper.filepond--file-wrapper {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    height: 100%;

    /* hide legend for visual users */
}
.filepond--file-wrapper.filepond--file-wrapper > legend {
    position: absolute;
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}
.filepond--file {
    position: static;
    display: flex;
    height: 100%;
    align-items: flex-start;

    padding: 0.5625em 0.5625em;

    color: #fff;
    border-radius: 0.5em;

    /* control positions */
}
.filepond--file .filepond--file-status {
    margin-left: auto;
    margin-right: 2.25em;
}
.filepond--file .filepond--processing-complete-indicator {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 3;
}
.filepond--file .filepond--processing-complete-indicator,
.filepond--file .filepond--progress-indicator,
.filepond--file .filepond--file-action-button {
    position: absolute;
}
.filepond--file {
    /* .filepond--file-action-button */
}
.filepond--file [data-align*='left'] {
    left: 0.5625em;
}
.filepond--file [data-align*='right'] {
    right: 0.5625em;
}
.filepond--file [data-align*='center'] {
    left: calc(50% - 0.8125em); /* .8125 is half of button width */
}
.filepond--file [data-align*='bottom'] {
    bottom: 1.125em;
}
.filepond--file [data-align='center'] {
    top: calc(50% - 0.8125em);
}
.filepond--file .filepond--progress-indicator {
    margin-top: 0.1875em;
}
.filepond--file .filepond--progress-indicator[data-align*='right'] {
    margin-right: 0.1875em;
}
.filepond--file .filepond--progress-indicator[data-align*='left'] {
    margin-left: 0.1875em;
}
/* make sure text does not overlap */
[data-filepond-item-state='cancelled'] .filepond--file-info,
[data-filepond-item-state*='invalid'] .filepond--file-info,
[data-filepond-item-state*='error'] .filepond--file-info {
    margin-right: 2.25em;
}
[data-filepond-item-state~='processing'] .filepond--file-status-sub {
    opacity: 0;
}
[data-filepond-item-state~='processing']
    .filepond--action-abort-item-processing
    ~ .filepond--file-status
    .filepond--file-status-sub {
    opacity: 0.5;
}
[data-filepond-item-state='processing-error'] .filepond--file-status-sub {
    opacity: 0;
}
[data-filepond-item-state='processing-error']
    .filepond--action-retry-item-processing
    ~ .filepond--file-status
    .filepond--file-status-sub {
    opacity: 0.5;
}
[data-filepond-item-state='processing-complete'] {
    /* busy state */
}
[data-filepond-item-state='processing-complete'] .filepond--action-revert-item-processing svg {
    -webkit-animation: fall 0.5s 0.125s linear both;
    animation: fall 0.5s 0.125s linear both;
}
[data-filepond-item-state='processing-complete'] {
    /* hide details by default, only show when can revert */
}
[data-filepond-item-state='processing-complete'] .filepond--file-status-sub {
    opacity: 0.5;
}
[data-filepond-item-state='processing-complete']
    .filepond--processing-complete-indicator:not([style*='hidden'])
    ~ .filepond--file-status
    .filepond--file-status-sub {
    opacity: 0;
}
[data-filepond-item-state='processing-complete'] .filepond--file-info-sub {
    opacity: 0;
}
[data-filepond-item-state='processing-complete']
    .filepond--action-revert-item-processing
    ~ .filepond--file-info
    .filepond--file-info-sub {
    opacity: 0.5;
}
/* file state can be invalid or error, both are visually similar but */
/* having them as separate states might be useful */
[data-filepond-item-state*='invalid'] .filepond--panel,
[data-filepond-item-state*='invalid'] .filepond--file-wrapper,
[data-filepond-item-state*='error'] .filepond--panel,
[data-filepond-item-state*='error'] .filepond--file-wrapper {
    -webkit-animation: shake 0.65s linear both;
    animation: shake 0.65s linear both;
}
/* spins progress indicator when file is marked as busy */
[data-filepond-item-state*='busy'] .filepond--progress-indicator svg {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
/**
 * States
 */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@-webkit-keyframes shake {
    10%,
    90% {
        -webkit-transform: translateX(-0.0625em);
        transform: translateX(-0.0625em);
    }

    20%,
    80% {
        -webkit-transform: translateX(0.125em);
        transform: translateX(0.125em);
    }

    30%,
    50%,
    70% {
        -webkit-transform: translateX(-0.25em);
        transform: translateX(-0.25em);
    }

    40%,
    60% {
        -webkit-transform: translateX(0.25em);
        transform: translateX(0.25em);
    }
}
@keyframes shake {
    10%,
    90% {
        -webkit-transform: translateX(-0.0625em);
        transform: translateX(-0.0625em);
    }

    20%,
    80% {
        -webkit-transform: translateX(0.125em);
        transform: translateX(0.125em);
    }

    30%,
    50%,
    70% {
        -webkit-transform: translateX(-0.25em);
        transform: translateX(-0.25em);
    }

    40%,
    60% {
        -webkit-transform: translateX(0.25em);
        transform: translateX(0.25em);
    }
}
@-webkit-keyframes fall {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes fall {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
/* ignore all other interaction elements while dragging a file */
.filepond--hopper[data-hopper-state='drag-over'] > * {
    pointer-events: none;
}
/* capture all hit tests using a hidden layer, this speeds up the event flow */
.filepond--hopper[data-hopper-state='drag-over']::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.filepond--progress-indicator {
    z-index: 103;
}
.filepond--file-action-button {
    z-index: 102;
}
.filepond--file-status {
    z-index: 101;
}
.filepond--file-info {
    z-index: 100;
}
.filepond--item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;

    padding: 0;
    margin: 0.25em;

    will-change: transform, opacity;

    /* item children order */
}
.filepond--item > .filepond--panel {
    z-index: -1;
}
/* has a slight shadow */
.filepond--item > .filepond--panel .filepond--panel-bottom {
    box-shadow: 0 0.0625em 0.125em -0.0625em rgba(0, 0, 0, 0.25);
}
.filepond--item {
    /* drag related */
}
.filepond--item > .filepond--file-wrapper,
.filepond--item > .filepond--panel {
    transition: opacity 0.15s ease-out;
}
.filepond--item[data-drag-state] {
    cursor: -webkit-grab;
    cursor: grab;
}
.filepond--item[data-drag-state] > .filepond--panel {
    transition: box-shadow 0.125s ease-in-out;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.filepond--item[data-drag-state='drag'] {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.filepond--item[data-drag-state='drag'] > .filepond--panel {
    box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.325);
}
.filepond--item[data-drag-state]:not([data-drag-state='idle']) {
    z-index: 2;
}
/* states */
.filepond--item-panel {
    background-color: #64605e;
}
[data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: #369763;
}
[data-filepond-item-state*='invalid'] .filepond--item-panel,
[data-filepond-item-state*='error'] .filepond--item-panel {
    background-color: #c44e47;
}
/* style of item panel */
.filepond--item-panel {
    border-radius: 0.5em;
    transition: background-color 0.25s;
}
/* normal mode */
.filepond--list-scroller {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    will-change: transform;
}
/* scroll mode */
.filepond--list-scroller[data-state='overflow'] .filepond--list {
    bottom: 0;
    right: 0;
}
.filepond--list-scroller[data-state='overflow'] {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
    mask: linear-gradient(to bottom, #000 calc(100% - 0.5em), transparent 100%);
}
/* style scrollbar */
.filepond--list-scroller::-webkit-scrollbar {
    background: transparent;
}
.filepond--list-scroller::-webkit-scrollbar:vertical {
    width: 1em;
}
.filepond--list-scroller::-webkit-scrollbar:horizontal {
    height: 0;
}
.filepond--list-scroller::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 99999px;
    border: 0.3125em solid transparent;
    background-clip: content-box;
}
/* hard to overide styles on purpose */
.filepond--list.filepond--list {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;

    /* prevents endless paint calls on filepond--list-scroller */
    will-change: transform;
}
/* used for padding so allowed to be restyled */
.filepond--list {
    left: 0.75em;
    right: 0.75em;
}
.filepond--root[data-style-panel-layout~='integrated'] {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root {
    border-radius: 0;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--panel-root > *,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--panel-root > * {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--drop-label,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
    bottom: 0;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 7;
}
.filepond--root[data-style-panel-layout~='circle'],
.filepond--root[data-style-panel-layout~='integrated'] {
    /* we're only loading one item, this makes the intro animation a bit nicer */
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--item-panel,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--item-panel {
    display: none;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--list-scroller,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--list-scroller {
    overflow: hidden;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--list,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--list {
    left: 0;
    right: 0;
    height: 100%;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--item,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--item {
    margin: 0;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--file-wrapper,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--file-wrapper {
    height: 100%;
}
.filepond--root[data-style-panel-layout~='compact'] .filepond--drop-label,
.filepond--root[data-style-panel-layout~='integrated'] .filepond--drop-label {
    z-index: 7;
}
.filepond--root[data-style-panel-layout~='circle'] {
    border-radius: 99999rem;
    overflow: hidden;
}
.filepond--root[data-style-panel-layout~='circle'] > .filepond--panel {
    border-radius: inherit;
}
.filepond--root[data-style-panel-layout~='circle'] > .filepond--panel > * {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] {
    /* circle cuts of this info, so best to hide it */
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--file-info {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--file-status {
    display: none;
}
.filepond--root[data-style-panel-layout~='circle'] .filepond--action-edit-item {
    opacity: 1 !important;
    visibility: visible !important;
}
/* dirfty way to fix circular overflow issue on safari 11+ */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
        .filepond--root[data-style-panel-layout~='circle'] {
            will-change: transform;
        }
    }
}
.filepond--panel-root {
    border-radius: 0.5em;
    background-color: #f1f0ef;
}
.filepond--panel {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;

    /* defaults to 100% height (fixed height mode) this fixes problem with panel height in IE11 */
    height: 100% !important;

    /* no interaction possible with panel */
    pointer-events: none;
}
.filepond-panel:not([data-scalable='false']) {
    height: auto !important;
}
.filepond--panel[data-scalable='false'] > div {
    display: none;
}
.filepond--panel[data-scalable='true'] {
    /* this seems to fix Chrome performance issues */
    /* - when box-shadow is enabled */
    /* - when multiple ponds are active on the same page */
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* prevent borders and backgrounds */
    background-color: transparent !important;
    border: none !important;
}
.filepond--panel-top,
.filepond--panel-bottom,
.filepond--panel-center {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
.filepond--panel-top,
.filepond--panel-bottom {
    height: 0.5em;
}
.filepond--panel-top {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;

    /* fixes tiny transparant line between top and center panel */
}
.filepond--panel-top::after {
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: -1px;
    background-color: inherit;
}
.filepond--panel-center,
.filepond--panel-bottom {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: translate3d(0, 0.5em, 0);
    transform: translate3d(0, 0.5em, 0);
}
.filepond--panel-bottom {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;

    /* fixes tiny transparant line between bottom and center of panel */
}
.filepond--panel-bottom::before {
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    top: -1px;
    background-color: inherit;
}
.filepond--panel-center {
    /* the center panel is scaled using scale3d to fit the correct height */
    /* we use 100px instead of 1px as scaling 1px to a huge height is really laggy on chrome */
    height: 100px !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;

    /* hide if not transformed, prevents a little flash when the panel is at 100px height while attached for first time */
}
.filepond--panel-center:not([style]) {
    visibility: hidden;
}
.filepond--progress-indicator {
    position: static;
    width: 1.25em;
    height: 1.25em;

    color: #fff;

    /* can't have margins */
    margin: 0;

    /* no interaction possible with progress indicator */
    pointer-events: none;

    /* will be animated */
    will-change: transform, opacity;
}
.filepond--progress-indicator svg {
    width: 100%;
    height: 100%;
    vertical-align: top;
    transform-box: fill-box; /* should center the animation correctly when zoomed in */
}
.filepond--progress-indicator path {
    fill: none;
    stroke: currentColor;
}
.filepond--list-scroller {
    z-index: 6;
}
.filepond--drop-label {
    z-index: 5;
}
.filepond--drip {
    z-index: 3;
}
.filepond--root > .filepond--panel {
    z-index: 2;
}
.filepond--browser {
    z-index: 1;
}
.filepond--root {
    /* layout*/
    box-sizing: border-box;
    position: relative;
    margin-bottom: 1em;

    /* base font size for whole component */
    font-size: 1rem;

    /* base line height */
    line-height: normal;

    /* up uses default system font family */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    /* will increase font weight a bit on Safari */
    font-weight: 450;

    /* default text alignment */
    text-align: left;

    /* better text rendering on Safari */
    text-rendering: optimizeLegibility;

    /* text direction is ltr for now */
    direction: ltr;

    /* optimize rendering */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/contain */
    contain: layout style size;

    /* correct box sizing, line-height and positioning on child elements */
}
.filepond--root * {
    box-sizing: inherit;
    line-height: inherit;
}
.filepond--root *:not(text) {
    font-size: inherit;
}
.filepond--root {
    /* block everything */
}
.filepond--root[data-disabled] {
    pointer-events: none;
}
.filepond--root[data-disabled] .filepond--list-scroller {
    pointer-events: all;
}
.filepond--root[data-disabled] .filepond--list {
    pointer-events: none;
}
/**
 * Root element children layout
 */
.filepond--root .filepond--drop-label {
    min-height: 4.75em;
}
.filepond--root .filepond--list-scroller {
    margin-top: 1em;
    margin-bottom: 1em;
}
.filepond--root .filepond--credits {
    position: absolute;
    right: 0;
    opacity: 0.175;
    line-height: 0.85;
    font-size: 11px;
    color: inherit;
    text-decoration: none;
    z-index: 3;
    bottom: -14px;
}
.filepond--root .filepond--credits[style] {
    top: 0;
    bottom: auto;
    margin-top: 14px;
}