/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-templates.css, minus 1 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
/* ================================================================
   Marketing Hub — Template Library & Editor Styles
   ================================================================ */

/* ================================================================
   LIBRARY GRID
   ================================================================ */
.tpl-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Template Card */
.tpl-card {
  background: var(--surf, #fff);
  border-radius: var(--radius, 14px);
  border: 1.5px solid var(--border, #e0e0e0);
  overflow: hidden;
  cursor: pointer;
  transition: var(--ease);
  display: flex;
  flex-direction: column;
}

.tpl-card:hover {
  border-color: var(--c-blue, #6366f1);
  box-shadow: 0 4px 20px rgba(99,102,241,0.12);
  transform: translateY(-2px);
}

/* Preview area */
.tpl-card-preview {
  height: 180px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--border-s, #f4f4f4);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tpl-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tpl-card-mini-preview {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
}

.tpl-mini-iframe {
  width: 600px;
  height: 540px;
  border: none;
  transform: scale(0.47);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.tpl-card-placeholder {
  color: var(--ink3, #8d8d8d);
  opacity: 0.4;
}

.tpl-card-placeholder svg {
  width: 48px;
  height: 48px;
}

/* Card body */
.tpl-card-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tpl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tpl-card-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink2-4, #6b7280);
}

.tpl-card-channel svg {
  flex-shrink: 0;
}

.tpl-card-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #161616);
  line-height: 1.3;
}

.tpl-card-subject {
  font-size: 13px;
  color: var(--ink2, #525252);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tpl-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink3, #8d8d8d);
  margin-top: auto;
  padding-top: 4px;
}

.tpl-card-category {
  text-transform: capitalize;
}

.tpl-card-sg {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef2ff;
  color: #6366f1;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3px;
}

.tpl-card-date {
  margin-left: auto;
}

.tpl-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
}

.tpl-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-s, #f3f4f6);
  color: var(--ink2-4, #6b7280);
  font-size: 11px;
  font-weight: 500;
}

/* ================================================================
   EDITOR: SPLIT PANE
   ================================================================ */
.tpl-editor-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  min-height: 500px;
}

/* Editor header */
.tpl-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  margin-bottom: 12px;
}

.tpl-editor-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-s, #f3f4f6);
  color: var(--ink2, #525252);
  flex-shrink: 0;
  transition: var(--ease);
}

.tpl-editor-back:hover {
  background: var(--c-blue-bg, #eef2ff);
  color: var(--c-blue, #6366f1);
}

.tpl-editor-title-area {
  flex: 1;
  min-width: 0;
}

.tpl-editor-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink, #161616);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-editor-sub {
  font-size: 12px;
  color: var(--ink2-4, #6b7280);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.tpl-editor-sub svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tpl-sg-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: #defbe6;
  color: #198038;
  font-weight: 600;
  font-size: 10px;
}

.tpl-editor-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Subject bar */
.tpl-subject-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-s, #f3f4f6);
  border-radius: var(--radius-sm, 10px);
  margin-bottom: 12px;
}

.tpl-subject-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2-4, #6b7280);
  flex-shrink: 0;
}

.tpl-subject-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--f);
  font-size: 13px;
  color: var(--ink, #161616);
  outline: none;
}

.tpl-subject-input::placeholder {
  color: var(--ink4, #c6c6c6);
}

/* Split pane container */
.tpl-split {
  flex: 1;
  display: flex;
  gap: 0;
  min-height: 0;
  border-radius: var(--radius, 14px);
  border: 1.5px solid var(--border, #e0e0e0);
  overflow: hidden;
}

.tpl-split-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tpl-split-divider {
  width: 1px;
  background: var(--border, #e0e0e0);
  flex-shrink: 0;
}

/* Pane header */
.tpl-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-s, #f4f4f4);
  background: var(--bg-s, #f3f4f6);
}

.tpl-pane-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink2-4, #6b7280);
}

.tpl-pane-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--ink3, #8d8d8d);
  transition: var(--ease);
}

.tpl-pane-action:hover {
  background: var(--c-blue-bg, #eef2ff);
  color: var(--c-blue, #6366f1);
}

/* Code editor textarea */
.tpl-code-editor {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  padding: 14px;
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink, #161616);
  background: #fafafa;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}

.tpl-code-editor:focus {
  background: #fff;
}

/* Preview iframe */
.tpl-preview-frame-wrap {
  flex: 1;
  overflow: auto;
  background: #fff;
}

.tpl-preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

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

.tpl-split-divider {
    width: 100%;
    height: 1px;
  }

.tpl-split-pane {
    min-height: 250px;
  }

.tpl-code-pane {
    max-height: 40vh;
  }
}

@media (max-width: 640px) {
.tpl-library-grid {
    grid-template-columns: 1fr;
  }

.tpl-editor-header {
    flex-wrap: wrap;
  }

.tpl-editor-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* == THE SENDGRID KEY - IN THE RAIL, UNDER CREATE ==========================
   Tyler, 2026-08-20: *"Have a little key that says that's where they're getting
   stored through SendGrid, and maybe a quick button to take them there."*
   Tyler, 2026-08-21, having seen it: *"the naming rules ... just need to be more
   subtle. Same with the Open SendGrid button, because it's taking up way too much
   of the height of the page for no reason ... on the left side of Create,
   underneath the buttons, just do a quick naming rule."*

   🚨 WHAT THIS REPLACED WAS A ~90px FULL-WIDTH BANNER over the wall, on every
   visit, forever. Four sentences and two full-size buttons for two facts somebody
   needs once and one door pressed occasionally - and it pushed the scorecards and
   the first row of cards down on a laptop. The rail has the room, and a block that
   lives beside Create is where somebody already looks for "how do I make one".

   ⚠️ THE TWO CONTROLS WEAR THE RAIL'S OWN `.ph-sb-item.ph-sb-add`, the class the
   Create buttons above them use - so on MRG they inherit the CRM's quick-action
   styling for free and cannot drift from their neighbours. Only what the rail does
   not already say is set here.
   ⚠️ LIGHT ONLY, LIKE THE REST OF THIS FILE AND LIKE crm.css. Six dark rules in a
   sibling stylesheet are what once printed #e2e8f0 on white for a dark-OS user;
   half a dark theme is worse than none. */
.tplr {
  margin: 12px 6px 4px;
  padding-top: 11px;
  border-top: 1px solid #e2e8f0;
}

/* Tighter than the rail's own labels: this is a footnote, not a section. */
.tplr-hd {
  margin: 0 0 5px !important;
  font-size: 9px !important;
  letter-spacing: .08em;
}

.tplr-say,
.tplr-why {
  margin: 0 0 7px;
  font-size: 10.5px;
  line-height: 1.45;
  color: #64748b;
}

.tplr-why b { color: #334155; font-weight: 700; }

/* THE QUICK NAMING RULE. ⚠️ IT HAS TO BE ALLOWED TO WRAP - the rail is ~200px and
   `code` inherits nothing about wrapping, so a nowrap (or a long family name)
   would push a horizontal scrollbar onto the sidebar. */
.tplr-shape {
  display: block;
  margin: 0 0 7px;
  padding: 5px 7px;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.35;
  color: #4338ca;
  white-space: normal;
  overflow-wrap: break-word;
}

/* 🚨 `display` IS SET HERE ON PURPOSE, AND IT IS NOT REDUNDANT. `.ph-sb-add`
   sets none, so the Open SendGrid ANCHOR would fall back to `inline` - and an
   inline box holding an svg that has only a viewBox draws it at ~110px, which is
   exactly how the profile popup's footer once grew a giant arrow. Same reason
   `text-decoration` and `width` are restated: they come from `.ph-sb-item`, which
   was written for buttons. */
.tplr-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.tplr-ico { display: inline-flex; align-items: center; justify-content: center; }

.tplr-ico svg { width: 12px; height: 12px; }

/* == THE FINDER ROW - THE FAMILY TAGS, WITH THEIR COUNTS ====================
   Tyler, 2026-08-21: *"make it all better so that it actually organizes based off
   of those tags … and template finder."* The family segment of a name decides the
   shelf; this row makes that the way you find one. Written by renderFinder() from
   the items on the wall, so it can never offer a tag nothing carries.
   \u26a0\ufe0f The pills reuse `.mh-filter-pill`, which the search row already styles -
   only the label, the count and the single-family case are new here. */
.tplf-lbl {
  flex: 0 0 auto;
  margin-right: 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.tplf-lbl2 { margin-left: 10px; }

/* The count is what turns a filter into an inventory: a tag that says how many it
   holds answers the question before it is pressed. */
.mh-filter-pill b {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(15, 23, 42, .07);
  font-size: 10px;
  font-weight: 800;
}

.mh-filter-pill.is-active b { background: rgba(255, 255, 255, .28); }

/* ONE family is not a choice, so it is stated rather than offered - see
   renderFinder(). Deliberately not pill-shaped: nothing here is pressable. */
.tplf-only {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

.tplf-only b {
  padding: 0 5px;
  border-radius: 5px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 10.5px;
}

.tplf-only em { font-style: normal; font-weight: 500; color: #94a3b8; font-size: 10.5px; }

/* \ud83d\udea8 THE FAMILY CHIP ON A CARD IS THE SAME CONTROL. It named the shelf and did
   nothing, on every card - and a chip that names a place you cannot go to is the
   kind of dead affordance that gets reported as "the tags don't work". */
.mtw-chip-fam { cursor: pointer; transition: background .13s ease, color .13s ease; }

.mtw-chip-fam:hover { background: #eef2ff; color: #4338ca; }

.mtw-chip-fam:focus-visible { outline: 2px solid #4338ca; outline-offset: 1px; }

/* ══ THE NAMING SHEET ════════════════════════════════════════════════════════
   Painted inside `.wk-rr-fs`, the same full-screen layer the wall opens an email
   into — so only the CONTENTS need styling here, not a modal. */
.tnm-bar-btns { display: inline-flex; align-items: center; gap: 8px; }

/* == DOWNLOAD THE FILE, OR COPY THE TEXT - TWO DOORS, ONE DOCUMENT =========
   Tyler, 2026-08-21: *"the naming should be downloadable as an md file they can
   upload to their AI."* So `.tnm-dl` is the FILLED button now and `.tnm-copy`
   steps back to an outline: you paste into a chat box, but you UPLOAD a file to a
   project or an assistant, and the file is the one that stays attached to what is
   being built. Two primaries side by side would make neither one the answer. */
.tnm-dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: #4338ca;
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease;
}

.tnm-dl:hover:not(:disabled) { background: #312e81; }

.tnm-dl:disabled { background: #94a3b8; cursor: default; }

/* \u26a0\ufe0f SIZED, NOT LEFT TO THE VIEWBOX. An svg with only a viewBox has no
   intrinsic size, and inside a flex button it grows to the line box - which is how
   the SendGrid arrow in the profile footer once rendered at 110px. */
.tnm-dl svg { width: 14px; height: 14px; flex: 0 0 auto; }

.tnm-copy {
  padding: 7px 14px;
  border: 1px solid #c7cdf5;
  border-radius: 8px;
  background: #fff;
  color: #4338ca;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.tnm-copy:hover:not(:disabled) { background: #eef2ff; border-color: #a5b0ee; }

/* Disabled reads as "not yet", not as "broken": the bytes have not landed. */
.tnm-copy:disabled { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; cursor: default; }

.tnm-body { overflow: auto; background: #f8fafc; }

.tnm {
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
}

.tnm-loading { padding: 40px 24px; text-align: center; color: #64748b; font-size: 13px; }

.tnm-err { color: #b42318; }

.tnm-err code { background: #fff; padding: 1px 5px; border-radius: 4px; }

.tnm-shape {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

/* The shape, big enough to be the first thing read. Wraps rather than scrolls —
   a horizontally-scrolled diagram is a diagram nobody sees the end of. */
.tnm-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 19px;
  font-weight: 700;
}

.tnm-seg { padding: 3px 10px; border-radius: 8px; }

.tnm-dot { color: #94a3b8; font-size: 19px; font-weight: 700; }

.tnm-owner { background: #eef2ff; color: #4338ca; }

.tnm-fam   { background: #dcfce7; color: #15803d; }

.tnm-thing { background: #fef3c7; color: #92400e; }

.tnm-qual  { background: #f1f5f9; color: #64748b; font-size: 15px; }

.tnm-legend { margin: 16px 0 0; }

/* A flex row per line, so a two-line description stays in its own column instead
   of wrapping back underneath the chip. */
.tnm-legend p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 7px;
}

.tnm-legend p > span { flex: 1 1 auto; min-width: 0; }

.tnm-k {
  flex: 0 0 auto;
  display: inline-block;
  min-width: 96px;
  text-align: center;
  padding: 1px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.tnm-legend code, .tnm-foot code {
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

.tnm-sep {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #eef2f6;
  color: #64748b;
  font-size: 12px;
}

/* One real name, wearing the same colours as the diagram — the bridge between
   the abstract shape and something somebody has actually seen on the wall. */
.tnm-example {
  margin: 14px 0 26px;
  padding: 14px 18px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  text-align: center;
  overflow-x: auto;
}

.tnm-example span { padding: 2px 6px; border-radius: 5px; }

.tnm-h {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

/* ⚠️ The table scrolls inside its own box. Three columns of prose at a phone
   width would otherwise push the whole sheet sideways. */
.tnm-tablewrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.tnm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.tnm-table th {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

.tnm-table td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }

.tnm-table tr:last-child td { border-bottom: 0; }

.tnm-table td:first-child { white-space: nowrap; }

.tnm-table code {
  background: #dcfce7;
  color: #15803d;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12px;
}

/* The Platform row is not a shelf, it is the catch that keeps a password reset
   off a send screen — so it does not look like the other six. */
.tnm-risky { background: #fff7ed; }

.tnm-risky code { background: #fee2e2; color: #b42318; }

.tnm-never {
  display: block;
  margin-top: 4px;
  color: #b42318;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tnm-foot { margin: 14px 0 0; color: #64748b; font-size: 12px; }

@media (max-width: 720px) {
.tnm { padding: 18px 16px 32px; }

.tnm-line { font-size: 15px; }

.tnm-k { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE TYPE OVERVIEW, AND THE CONDITION CHIPS UNDER IT
   ══════════════════════════════════════════════════════════════════════════
   Tyler, 2026-08-21: *"You don't have the area at the top where you're able to
   select most of them, with an overview. You have the different types. You should
   have that."*  The type row itself is plain `.ax-cards-row` / `.ax-card` — the
   scorecard component the whole hub already uses, so it inherits the lit state
   (`.mh-card-on`), the accent bar and the hover, and cannot drift from its
   neighbours on every other tab. Only what is NEW is styled here.

   ⚠️ THIS FILE IS LIGHT-ONLY BY DESIGN. It is vendored onto the MRG CRM, which
   has no dark mode; hard-coded slate values are deliberate, not an oversight.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the five condition counts, demoted from scorecards to chips ──────────── */
.mtw-conds {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; margin: 0 0 12px; padding: 0 4px;
}

.mtw-cond {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 9px;
  border: 1px solid #e2e8f0; border-radius: 999px;
  background: #fff; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: #475569;
  line-height: 1.1; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

/* The dot is the colour the scorecard used to carry, so the mapping from a
   condition to its colour survives the demotion. */
.mtw-cond::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--_ac, #64748b); flex: none;
}

.mtw-cond b {
  font-weight: 800; font-size: 11.5px;
  color: var(--_ac, #334155); font-variant-numeric: tabular-nums;
}

.mtw-cond:hover { border-color: #cbd5e1; background: #f8fafc; }

.mtw-cond.is-on {
  border-color: color-mix(in srgb, var(--_ac) 45%, #e2e8f0);
  background: color-mix(in srgb, var(--_ac) 8%, #fff);
  color: #0f172a;
}

/* ── the marketing types nothing is filed under yet ───────────────────────
   🚫 NOT TILES. Eight scorecards reading 0 is exactly what the deleted
   campaign / social / reply sub-panels were, and what made them worth deleting.
   This is one line: what exists to file into, and what a name has to say to land
   there. It disappears entirely once every type has something in it. */
.tplt-more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 7px 10px;
  border: 1px dashed #e2e8f0; border-radius: 10px;
  background: #fcfcfd;
}

.tplt-more-h {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #94a3b8; margin-right: 2px;
}

.tplt-more-t {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 999px;
  background: #f1f5f9; color: #64748b;
  font-size: 11px; font-weight: 700; cursor: default;
}

.tplt-more-why { font-size: 11.5px; color: #94a3b8; margin-left: 2px; }

.tplt-more-why code {
  background: #eef2ff; color: #4338ca;
  padding: 1px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 700;
}

/* ⚠️ A `<button>` INSIDE A FLEX ROW STILL NEEDS ITS OWN `display`. This one is a
   real button, unlike the two in the rail that had to restate it because one was
   an anchor — but the padding and font-family do not inherit either way. */
.tplt-more-btn {
  display: inline-flex; align-items: center;
  margin-left: auto; padding: 4px 10px;
  border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; color: #4338ca;
}

.tplt-more-btn:hover { background: #eef2ff; border-color: #c7d2fe; }

/* An 8px uppercase label with a long shelf name in it ellipsises rather than
   wrapping — `.ax-card-lbl` already sets that. What it does NOT do is give the
   row enough width per card when there are ten of them, so the row scrolls
   (`.ax-cards-row` is overflow-x:auto) instead of squeezing "Promotions &
   offers" down to three characters. */
/* 🚨 A TILE IS NOT WIDER BECAUSE THERE ARE FEWER OF THEM. `.ax-card` is
   `flex:1`, which is right for a fixed row of five scorecards and wrong for a row
   whose length is however many types this account has — on MRG, with two, it drew
   two half-page slabs with a single digit floating in each. They still SHARE the
   width when there are many (eight fit at ~137px), they just stop growing. */
.tplt-card { flex: 1 1 132px; min-width: 132px; max-width: 200px; }

/* 🚨 A SHELF NAME IS NOT A STAT LABEL, SO IT WRAPS. `.ax-card-lbl` is an 8px
   uppercase single line with an ellipsis, which is right for "IN USE" and wrong
   for "Events & invitations" — measured at 1440px with eight cards it printed
   "EVENTS & INVITATI…" and "GENERAL MARKETI…", i.e. two shelves you cannot tell
   apart from their tiles. Two lines, and the row still scrolls rather than
   squeezing when there are more of them. */
/* ⚠️ `#tplTypeRow .tplt-lbl`, NOT `.tplt-lbl` — AND NOT `.ax-card-lbl` EITHER.
   One class ties with `.ax-card-lbl`'s `white-space:nowrap` on specificity, so
   which one wins is decided by stylesheet ORDER: upstream loads
   marketing-hub.css after this file and the label stopped wrapping, while MRG's
   order made it work. Measured on both. An ID is not a class, so the porter
   still carries this across (it drops selectors naming a class crm.css owns). */
#tplTypeRow .tplt-lbl {
  white-space: normal;
  line-height: 1.25;
  letter-spacing: .3px;
  max-height: 2.5em;
  overflow: hidden;
}

@media (max-width: 720px) {
.mtw-conds { gap: 5px; }

.tplt-more-btn { margin-left: 0; }

.tplt-more-why { order: 99; }
}