/* ASRT Mail console — view-specific layout.
   Composer, template builder, inbox, analytics plots and the developer console. */
/* ---------- overview ---------- */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.flow .step { padding: 13px 14px; border-right: 1px solid var(--line); position: relative; }
.flow .step:last-child { border-right: 0; }
.flow .step .v { font: 600 19px/1.1 var(--mono); letter-spacing: -0.02em; }
.flow .step .k { font-size: 11.5px; color: var(--muted); }
.flow .step .bar { margin-top: 8px; }
.checklist { display: grid; gap: 2px; }
.checklist a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: var(--r); color: var(--ink); font-size: 13px; }
.checklist a:hover { background: var(--wash); text-decoration: none; }
.checklist .dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; font-size: 9px; color: var(--paper); }
.checklist .done .dot { background: var(--ok); border-color: var(--ok); }
.checklist .done span.lbl { color: var(--muted); }
.checklist .go { margin-left: auto; font-size: 11px; color: var(--cyan-deep); font-weight: 600; }

/* ---------- composer ---------- */
.composer { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 14px; align-items: start; }
.cmp-main { min-width: 0; }
.cmp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: var(--wash);
  align-items: center;
}
.cmp-toolbar button { width: 27px; height: 24px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-sm); color: var(--slate); cursor: pointer; font-size: 12px; }
.cmp-toolbar button:hover { background: var(--paper); color: var(--ink); }
.cmp-toolbar button.on { background: var(--paper); color: var(--cyan-deep); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cmp-toolbar .div { width: 1px; height: 16px; background: var(--line-strong); margin: 0 4px; }
.cmp-toolbar .grow { margin-left: auto; display: flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--muted); }
.cmp-toolbar svg { width: 14px; height: 14px; }

.editor {
  border: 1px solid var(--line-strong);
  border-radius: 0 0 var(--r) var(--r);
  background: var(--paper);
  padding: 15px 17px;
  min-height: 320px;
  max-height: 62vh;
  overflow: auto;
  font-size: 14.5px;
  line-height: 1.65;
  outline: none;
}
.editor:focus { box-shadow: 0 0 0 3px var(--cyan-wash); }
.editor[data-empty="true"]::before { content: attr(data-placeholder); color: var(--muted); }
.editor h1, .editor h2, .editor h3 { margin: 0.7em 0 0.35em; }
.editor p, .editor ul, .editor ol { margin: 0 0 0.85em; }
.editor ul, .editor ol { padding-left: 1.3em; }
.editor blockquote { margin: 0 0 0.85em; padding: 2px 0 2px 12px; border-left: 3px solid var(--cyan); color: var(--slate); }
.editor a { color: var(--cyan-deep); text-decoration: underline; }
.editor img { max-width: 100%; border-radius: var(--r); }
.editor table { border-collapse: collapse; }
.editor td, .editor th { border: 1px solid var(--line); padding: 5px 8px; }
.editor.html-src { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; tab-size: 2; }

.tokens { display: flex; flex-wrap: wrap; gap: 4px; }
.token {
  font: 500 11px/1 var(--mono);
  padding: 4px 6px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--wash);
  color: var(--slate);
  cursor: pointer;
}
.token:hover { border-style: solid; color: var(--cyan-deep); border-color: var(--cyan); background: var(--cyan-wash); }
.token.bad { color: var(--bad); border-color: var(--bad); }

.cmp-side { display: grid; gap: 14px; position: sticky; top: calc(var(--topbar) + 14px); }
.recips { display: grid; gap: 5px; max-height: 190px; overflow: auto; padding: 2px; }
.recip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--wash);
  font-size: 12.5px;
}
.recip b { font-weight: 500; font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.recip .why { margin-left: auto; font-size: 10.5px; color: var(--muted); }
.recip.sup { background: var(--bad-wash); border-color: transparent; }
.recip.sup b { text-decoration: line-through; color: var(--bad); }
.dropzone {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--wash);
  cursor: pointer;
}
.dropzone.over { border-color: var(--cyan); background: var(--cyan-wash); color: var(--cyan-deep); }
.files { display: grid; gap: 4px; margin-top: 8px; }
.file { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.file .sz { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.file button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.file button:hover { color: var(--bad); }

.preview-frame { background: var(--wash-2); border-radius: var(--r); padding: 14px; display: grid; justify-items: center; }
.preview-frame .device { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-2); overflow: hidden; transition: width 0.2s ease; }
.preview-frame .device.w-desktop { width: 100%; max-width: 640px; }
.preview-frame .device.w-mobile { width: 320px; }
.preview-frame .device .chrome { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--wash); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.preview-frame .mail { padding: 18px; max-height: 62vh; overflow: auto; color: #14203a; font-size: 14px; }
.preview-frame .mail .subject { font-size: 16px; font-weight: 600; margin-bottom: 3px; color: #07152e; }
.preview-frame .mail .pre { font-size: 12px; color: #6b7893; margin-bottom: 14px; }
.device.w-mobile .mail { font-size: 13px; }
.device.w-mobile .mail img, .device.w-mobile .mail table { max-width: 100% !important; }

/* ---------- template builder ---------- */
.builder { display: grid; grid-template-columns: 208px minmax(0, 1fr) 232px; gap: 14px; align-items: start; }
.blocklib { display: grid; gap: 4px; }
.blocklib .blk {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  cursor: grab;
  font-size: 12.5px;
  color: var(--slate);
}
.blocklib .blk:hover { border-color: var(--cyan); color: var(--ink); }
.blocklib .blk svg { width: 15px; height: 15px; color: var(--cyan-deep); flex: none; }
.canvas { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--wash); padding: 12px; min-height: 340px; display: grid; gap: 8px; align-content: start; }
.canvas.hint-drop { outline: 2px dashed var(--cyan); outline-offset: -6px; }
.canvas .slot { height: 3px; border-radius: 2px; background: transparent; }
.canvas .slot.over { background: var(--cyan); height: 5px; }
.bdoc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; }
.brow {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 30px 9px 11px;
  background: #fff;
  cursor: pointer;
  color: #14203a;
  font-size: 13px;
}
.brow.sel { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-wash); }
.brow .kind { font: 700 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 3px; }
.brow .up, .brow .rm { position: absolute; right: 6px; width: 19px; height: 19px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 3px; display: grid; place-items: center; font-size: 11px; }
.brow .up { top: 14px; }
.brow .rm { top: 34px; }
.brow .up:hover, .brow .rm:hover { background: var(--wash-2); color: var(--bad); }
.brow .up { color: var(--slate); }
.insp { display: grid; gap: 11px; position: sticky; top: calc(var(--topbar) + 14px); }

/* ---------- inbox / message detail ---------- */
.mail-list { display: grid; align-content: start; max-height: calc(100vh - var(--topbar) - 132px); overflow: auto; }
.mail-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: start; }
.mail-row:hover { background: var(--wash); }
.mail-row.on { background: var(--cyan-wash); box-shadow: inset 3px 0 0 var(--cyan); }
.mail-row .unread { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); margin-top: 6px; }
.mail-row .who2 { font-size: 13px; font-weight: 600; }
.mail-row .snip { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row .when { font: 500 11px/1.4 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.mail-row.unread .who2 { color: var(--ink); }
.mail-read { padding: 18px 20px; display: grid; gap: 16px; align-content: start; }
.mail-read .hd { display: grid; gap: 4px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.mail-read .hd h2 { font-size: 17px; }
.mail-body { max-width: 720px; font-size: 14.5px; line-height: 1.65; }
.mail-body img { max-width: 100%; }

.tl { display: grid; gap: 0; position: relative; padding-left: 4px; }
.tl .ev { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; gap: 11px; padding: 7px 0; align-items: baseline; }
.tl .ev i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); margin-top: 5px; }
.tl .ev.hit i { background: var(--cyan); }
.tl .ev.bad i { background: var(--bad); }
.tl .ev .l { font-size: 13px; }
.tl .ev .l small { display: block; color: var(--muted); font-size: 11.5px; }
.tl .ev .t { font: 500 11px/1 var(--mono); color: var(--muted); }
.tl .ev + .ev { border-top: 1px solid var(--line); }

.badges { display: grid; gap: 5px; }
.badge { display: flex; gap: 9px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); cursor: pointer; font-size: 12.5px; }
.badge:hover { border-color: var(--cyan); }
.badge input { accent-color: var(--cyan-deep); }
.badge .m { margin-left: auto; font: 500 10.5px/1 var(--mono); color: var(--muted); }

/* ---------- analytics ---------- */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--sans); fill: var(--muted); font-size: 10.5px; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--cyan); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.b { stroke: var(--bad); stroke-dasharray: 3 3; }
.chart .area { fill: var(--cyan); opacity: 0.08; }
.chart .bar-r { fill: var(--cyan); }
.chart .bar-r.bad { fill: var(--bad); }
.chart .bar-r.ok { fill: var(--ok); }
.chart .pt { fill: var(--paper); stroke: var(--cyan); stroke-width: 1.5; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit:hover ~ .cue, .chart .cue.on { opacity: 1; }
.chart .cue { opacity: 0; }
.chart .cue line { stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 2 2; }
.chart .lbl { font: 600 11px/1 var(--mono); fill: var(--ink); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.donut { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; }
.donut circle { fill: none; stroke-width: 15; }
.donut .track { stroke: var(--wash-2); }
.bars-list { display: grid; gap: 9px; }
.bars-list .b { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 10px; align-items: center; font-size: 12.5px; }
.bars-list .b .bar { grid-column: 1 / -1; margin-top: -4px; }
.bars-list .b .v { font: 500 11.5px/1 var(--mono); color: var(--slate); text-align: right; }

.heat { display: grid; grid-template-columns: auto repeat(14, minmax(0, 1fr)); gap: 2px; font-size: 10px; }
.heat .cell { aspect-ratio: 1; border-radius: 2px; background: var(--wash-2); }
.heat .cell[data-lvl="1"] { background: #b9e4ee; }
.heat .cell[data-lvl="2"] { background: #6fcadd; }
.heat .cell[data-lvl="3"] { background: #2aa9c4; }
.heat .cell[data-lvl="4"] { background: #0b7f96; }
.heat .rl { font: 500 9.5px/1 var(--mono); color: var(--muted); align-self: center; padding-right: 4px; }
:root[data-theme="dark"] .heat .cell[data-lvl="1"] { background: #143b45; }
:root[data-theme="dark"] .heat .cell[data-lvl="2"] { background: #175463; }
:root[data-theme="dark"] .heat .cell[data-lvl="3"] { background: #1c7386; }
:root[data-theme="dark"] .heat .cell[data-lvl="4"] { background: #28a5bf; }

/* ---------- campaigns ---------- */
.wiz { display: grid; gap: 0; }
.wiz .st { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.wiz .st + .st { border-top: 1px solid var(--line); }
.wiz .st .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--mono); background: var(--wash-2); color: var(--muted); }
.wiz .st.done .n { background: var(--ok); color: #fff; }
.wiz .st.now .n { background: var(--navy); color: #fff; }
.wiz .st h4 { font-size: 13.5px; margin-bottom: 3px; }
.wiz .st p { font-size: 12px; color: var(--muted); }
.aud-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aud-preview .a { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; text-align: center; }
.aud-preview .a .v { font: 600 17px/1.2 var(--mono); }
.aud-preview .a .k { font-size: 11px; color: var(--muted); }
.matrix { display: grid; grid-template-columns: 132px repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 12px; }
.matrix > div { background: var(--paper); padding: 7px 9px; }
.matrix .h { background: var(--wash); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.matrix .yes { color: var(--ok); text-align: center; font-weight: 700; }
.matrix .no { color: var(--line-strong); text-align: center; }

/* ---------- developer console ---------- */
.dev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 14px; align-items: start; }
.req { display: grid; gap: 8px; }
.req .verb { font: 700 11px/1 var(--mono); color: var(--cyan-deep); }
.kv-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 28px; gap: 6px; align-items: center; }
.secret {
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 11px;
  border-radius: var(--r);
  background: var(--navy);
  color: #8ee7f7;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
}
.secret.once { box-shadow: 0 0 0 3px var(--cyan-wash); }
.scope-list { display: flex; gap: 4px; flex-wrap: wrap; }
.hook-form { display: grid; gap: 9px; }
.log-line { display: grid; grid-template-columns: 62px 54px minmax(0, 1fr) 58px 52px; gap: 9px; font: 500 11.5px/1.5 var(--mono); padding: 6px 0; border-bottom: 1px solid var(--line); align-items: center; }
.log-line .s2 { color: var(--ok); }
.log-line .s4 { color: var(--bad); }
.log-line .s5 { color: var(--warn); }
.curl { position: relative; }
.curl .cp { position: absolute; top: 7px; right: 7px; }

/* ---------- settings ---------- */
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 30px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.set-row .lbl { font-size: 13px; }
.set-row .lbl small { display: block; font-size: 11.5px; color: var(--muted); }
.set-row:last-child { border-bottom: 0; }
.danger-zone { border-color: var(--bad); }
.danger-zone > header { border-bottom-color: var(--bad); color: var(--bad); }

/* ---------- brand verification ---------- */
.brand-ic { width: 14px; height: 14px; flex: none; }
.brand-readonly { margin-top: 16px; max-width: 82ch; line-height: 1.5; }

.brand-flash { align-items: flex-start; margin-bottom: 14px; }
.brand-flash b { font-size: 13px; }
.brand-flash .tiny { margin-top: 3px; opacity: 0.86; }
.brand-flash-x { margin-left: auto; border: 0; background: none; color: inherit; opacity: 0.6; font-size: 15px; line-height: 1; cursor: pointer; }
.brand-flash-x:hover { opacity: 1; }

/* readiness strip */
.brand-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.brand-rs { display: grid; gap: 7px; align-content: start; padding: 12px 13px; border-right: 1px solid var(--line); min-width: 0; }
.brand-rs:last-child { border-right: 0; }
.brand-rs-meta { font-size: 11px; color: var(--muted); line-height: 1.4; }
.brand-strip-note { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--slate); max-width: 96ch; }
.brand-strip-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line-strong); font-size: 11.5px; color: var(--muted); }

/* group heading above a block of cards */
.brand-ghead { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin: 22px 0 12px; padding: 0 2px 8px; border-bottom: 1px solid var(--line-strong); }
.brand-ghead-txt { font-size: 12px; color: var(--muted); }
.brand-ghead .grow { margin-left: auto; }

/* the checks */
.brand-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.brand-checks > .card + .card { margin-top: 0; }
.brand-checks-wrap + .card { margin-top: 14px; }
.brand-headline { font-size: 13.5px; font-weight: 600; letter-spacing: -0.011em; line-height: 1.45; }
.brand-detail { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--slate); max-width: 84ch; }
.brand-do { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 11px; margin-top: 12px; padding: 9px 11px; border-left: 2px solid var(--cyan); border-radius: 0 var(--r) var(--r) 0; background: var(--cyan-wash); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.brand-do .caps { color: var(--cyan-deep); padding-top: 1px; }
.brand-disc { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.brand-disc summary { display: flex; gap: 7px; align-items: center; cursor: pointer; list-style: none; font-size: 11.5px; font-weight: 600; color: var(--slate); }
.brand-disc summary::-webkit-details-marker { display: none; }
.brand-disc summary::before { content: ""; width: 0; height: 0; border-left: 4px solid var(--cyan-deep); border-top: 3px solid transparent; border-bottom: 3px solid transparent; transition: transform 0.12s ease; }
.brand-disc[open] summary::before { transform: rotate(90deg); }
.brand-disc summary:hover { color: var(--ink); }
.brand-evidence { margin-top: 9px; max-height: 250px; overflow: auto; font-size: 11.5px; }
.brand-eline { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 10px; }
.brand-eline > span:last-child { overflow-wrap: anywhere; color: #b9cbe4; }

/* records to publish */
.brand-settings { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.brand-settings-sw { padding-top: 3px; }
.brand-settings .grow { margin-left: auto; align-self: end; }
.brand-rtype { font: 700 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-deep); }
.brand-rval { display: grid; gap: 5px; min-width: 0; }
.brand-rval code { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; color: var(--ink); }
.brand-rguide { font-size: 11.5px; line-height: 1.5; color: var(--muted); max-width: 74ch; }
.brand-diff { align-items: flex-start; margin-bottom: 13px; }
.brand-diff .grow { margin-left: auto; }
.brand-diff code { display: block; font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.brand-diff .kv { margin-top: 8px; }

/* shared bits */
.brand-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.brand-link { font-size: 12px; overflow-wrap: anywhere; }
.brand-digest { font-family: var(--mono); font-size: 11px; color: var(--slate); overflow-wrap: anywhere; }
.brand-meta { grid-template-columns: minmax(96px, 148px) minmax(0, 1fr); gap: 7px 14px; margin-top: 13px; }
.brand-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.brand-meta dd { font-size: 12.5px; }
.brand-sans { display: flex; flex-wrap: wrap; gap: 4px; }
.brand-sans .mono { font-size: 11px; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--wash); color: var(--slate); }
.brand-pem { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; tab-size: 2; }
.brand-findings { display: grid; gap: 5px; margin-top: 13px; }
.brand-find { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 11px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); font-size: 12px; line-height: 1.5; }
.brand-find.bad { border-color: transparent; background: var(--bad-wash); color: var(--bad); }
.brand-find.warn { border-color: transparent; background: var(--warn-wash); color: var(--warn); }
.brand-fcode { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; }
.brand-exp { display: inline-block; font: 600 11.5px/1 var(--mono); padding: 3px 7px; border-radius: var(--r-sm); background: var(--ok-wash); color: var(--ok); white-space: nowrap; }
.brand-exp.warn { background: var(--warn-wash); color: var(--warn); }
.brand-exp.crit { background: var(--bad-wash); color: var(--bad); }

/* forms inside a card */
.brand-form { display: grid; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.brand-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.brand-form-row > .btn { grid-column: 3; }
.brand-form-row > .field:first-child:nth-last-child(2) { grid-column: 1 / span 2; }
.brand-form-row > .field:only-child { grid-column: 1 / -1; }
.brand-form-row.end { grid-template-columns: auto; justify-content: end; }
.brand-form-row .grow { margin-left: auto; }
.brand-form input[type="file"] { font-family: var(--mono); font-size: 11.5px; padding: 6px 8px; }
.brand-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px; align-items: start; }
.brand-step-n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--navy); color: #8ee7f7; font: 700 11px/1 var(--mono); }
.brand-step .caps { color: var(--slate); }
.brand-step p { margin-top: 3px; }

/* probe verdicts */
.brand-verdicts { display: grid; gap: 5px; margin-top: 11px; }
.brand-verdict { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.brand-vname { width: 46px; font: 700 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--slate); }
.brand-vmeta { color: var(--muted); }
.brand-vfix { flex-basis: 100%; padding-left: 55px; color: var(--muted); line-height: 1.5; }
.brand-arc { display: flex; gap: 9px; align-items: center; margin-top: 9px; }
.brand-probe-list { display: grid; gap: 8px; margin-top: 18px; }

/* eligibility */
.brand-elig { display: grid; margin-top: 13px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.brand-elig-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 13px; }
.brand-elig-row + .brand-elig-row { border-top: 1px solid var(--line); }
.brand-elig-row.on { background: var(--ok-wash); }
.brand-elig-row .switch { align-items: flex-start; }
.brand-elig-row .switch small { padding-top: 3px; padding-right: 14px; line-height: 1.5; }
.brand-elig-by { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }
.brand-platform { display: grid; gap: 8px; margin-top: 13px; }
.brand-platform-row { display: grid; grid-template-columns: 138px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.brand-platform-row b { font-size: 12.5px; }
.brand-platform-row .tiny { margin-top: 3px; line-height: 1.5; }

/* the internal mark, drawn deliberately unlike a provider badge */
.brand-mark-sep { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.brand-mark { display: flex; gap: 14px; align-items: center; padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--wash); }
.brand-hex { position: relative; flex: none; width: 44px; height: 50px; display: grid; place-items: center; background: var(--cyan); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.brand-hex::before { content: ""; position: absolute; inset: 2px; background: var(--navy); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.brand-hex b { position: relative; font: 700 9px/1 var(--mono); letter-spacing: 0.06em; color: #7fe0f2; }
.brand-mark-meta { display: grid; gap: 4px; min-width: 0; }
.brand-mark-meta .tiny { color: var(--slate); line-height: 1.5; }
.brand-mark-word { font-size: 13px; letter-spacing: -0.011em; }
.brand-mark-not { color: var(--muted); }
.brand-mark .chip { margin-left: auto; }

/* history */
.brand-hlist { display: grid; }
.brand-hrow { display: grid; grid-template-columns: 92px minmax(0, 236px) minmax(0, 1fr) 88px 76px; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.brand-hrow:last-child { border-bottom: 0; }
.brand-hrow:hover { background: var(--wash); }
.brand-hrow.chg { box-shadow: inset 2px 0 0 var(--cyan); }
.brand-hcomp { font-size: 10px; }
.brand-htrans { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.brand-arrow { font-style: normal; color: var(--muted); font-family: var(--mono); }
.brand-hdetail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-hsrc { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-hwhen { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }

/* setup dialog */
.brand-help { display: grid; gap: 9px; }
.brand-help h4 { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.brand-help-lead { font-size: 13px; line-height: 1.6; color: var(--slate); max-width: 92ch; }
.brand-help-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.brand-help-recs li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wash); }
.brand-help-rec-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.brand-help-rec-h .grow { margin-left: auto; }
.brand-help-recs p { margin-top: 7px; line-height: 1.5; }
.brand-help-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.55; color: var(--slate); }
.brand-help-foot { margin-top: 8px; line-height: 1.55; max-width: 92ch; }

@media (max-width: 1180px) {
  .brand-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-rs:nth-child(2) { border-right: 0; }
  .brand-rs:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .brand-settings { grid-template-columns: minmax(0, 1fr); }
  .brand-hrow { grid-template-columns: 88px minmax(0, 1fr) 76px; }
  .brand-hdetail, .brand-hsrc { display: none; }
}
@media (max-width: 720px) {
  .brand-strip { grid-template-columns: minmax(0, 1fr); }
  .brand-rs { border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-rs:last-child { border-bottom: 0; }
  .brand-rs:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .brand-checks { grid-template-columns: minmax(0, 1fr); }
  .brand-form-row { grid-template-columns: minmax(0, 1fr); }
  .brand-form-row > .btn { grid-column: auto; justify-self: start; }
  .brand-form-row > .field:first-child:nth-last-child(2), .brand-form-row > .field:only-child { grid-column: auto; }
  .brand-platform-row, .brand-elig-row { grid-template-columns: minmax(0, 1fr); }
  .brand-find { grid-template-columns: minmax(0, 1fr); }
  .brand-eline { grid-template-columns: minmax(0, 1fr); }
  .brand-mark .chip { margin-left: 0; }
}

@media (max-width: 1180px) {
  .composer { grid-template-columns: minmax(0, 1fr); }
  .builder { grid-template-columns: 188px minmax(0, 1fr); }
  .builder .insp { grid-column: 1 / -1; position: static; }
  .dev { grid-template-columns: minmax(0, 1fr); }
  .cmp-side { position: static; }
}
@media (max-width: 720px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow .step { border-bottom: 1px solid var(--line); }
  .matrix { grid-template-columns: 96px repeat(4, minmax(0, 1fr)); font-size: 11px; }
  .log-line { grid-template-columns: 52px 44px minmax(0, 1fr); }
  .log-line .m { grid-column: 1 / -1; }
  .set-grid, .set-row { grid-template-columns: minmax(0, 1fr); }
}