/* PORTED VERBATIM from vo-app-marketing-hub/apps/Marketing-Hub/marketing-hub-template-profile.css, minus 0 rule(s)
   whose selectors name a class crm.css / ax-containers.css already own.
   DO NOT EDIT — node tools/port-marketing-hub.cjs */
/* ══════════════════════════════════════════════════════════════════════════
   THE TEMPLATE WALL AND THE TEMPLATE PROFILE
   ══════════════════════════════════════════════════════════════════════════
   Tyler, 2026-08-11, looking at a piece's review popup: *"where the template is,
   should show you where that template is … make sure the templates and playbooks
   area is fully bringing in the send kit templates so you can view them. They
   should look like beautiful cards from the training materials … when you click
   it, it shows a profile for that template."*

   ⚠️ THE POPUP ITSELF IS NOT STYLED HERE. It wears `marketing-hub-review.css`'s
   `.wk-rr-*` shell — the same one the piece review popup wears — because a
   template profile that looked like a different application would read as a
   different application. This file is the two things that shell does not have:
   the CARD WALL (`.mtw-*`) and the profile's own sections (`.mtp-*`).

   ⚠️ NEW FILE ON PURPOSE. marketing-hub-templates.css is loaded by the vendored
   MRG port and edited by other sessions; a rule dropped into the middle of it is
   a rule somebody else has to ship. */

/* == THE POPUP'S SCORECARD ROW =============================================
   Tyler, 2026-08-20: *"You need to make this pop-up feel more like the send
   screen ... put them through scorecards."* Five totals, straight off the send
   ledger, sitting between the title and the tabs -- which is where the send
   sheet puts its own numbers, so the two screens read as one application.

   A DASH IS NOT A ZERO, and the CSS has to make that legible: `.mtp-sc-dash` is
   deliberately faint and light-weight so a row of them reads as "not counted
   yet" rather than as five real zeros in a heavy figure. */
.mtp-scores {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  padding: 12px 22px 13px;
  background: #f8fafc;
  border-bottom: 1px solid #e9eef5;
}

.mtp-sc {
  flex: 1 1 96px;
  min-width: 88px;
  padding: 9px 12px 10px;
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 11px;
  border-top: 3px solid var(--c, #6366f1);
}

.mtp-sc-v {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.mtp-sc-dash { color: #cbd5e1; font-weight: 500; }

/* SIX tiles now, not five -- Bounced joined the row so that addresses,
   delivered and bounced can be reconciled without leaving the screen, and
   "Pressed a link" is a two-word label. 96px was tuned for five: at six the
   flex basis has to drop or the row wraps 5 + 1 and the orphan reads as a
   different kind of number. Measured at the popup's 1240px: 6 x ~229px. */
.mtp-scores > .mtp-sc { flex: 1 1 128px; min-width: 118px; }

/* The qualifier under a figure -- "5,216 confirmed by the provider, the rest
   proved by an open or a click". Deliberately NOT a second tile: two adjacent
   five-thousands in the same typeface is the mistake Performance already undid.
   It wraps, so the tile grows rather than clipping the sentence. */
.mtp-sc-sub {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0;
  text-transform: none;
}

.mtp-sc-l {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* The note takes the whole second line -- it is the sentence that stops the row
   above it being read as more certain than it is. */
.mtp-sc-note {
  flex: 1 1 100%;
  font-size: 11px;
  line-height: 1.5;
  color: #94a3b8;
}

/* The dot that leads an outcome chip on the lifeline. `.wk-rr-tl-co` in
   marketing-hub-review.css is padded 3px 12px 3px 4px -- that narrow left edge
   was written for a leading element, and it had no user until the lifeline's
   send nodes stopped putting five numbers inside a sentence. The dot carries the
   same colour as the matching scorecard above, so "delivered" is one colour on
   this popup wherever it is read. */
.mtp-co-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-left: 4px;
}

/* The door into SendGrid, wherever it appears in the facts column. */
.mtp-sg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4338ca;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(67, 56, 202, .3);
}

.mtp-sg:hover { color: #312e81; border-bottom-color: #312e81; }

.mtp-sg svg { width: 12px; height: 12px; }

/* == THE TAB SWAP ==========================================================
   Only the swapped PANE fades, and only when the view actually changed. paint()
   rebuilds the whole modal on every repaint -- a tab press, the ledger landing,
   the pieces arriving -- so animating the modal would re-run an entrance
   animation four times while somebody reads it, which looks like a flicker
   rather than a transition. */
.mtp-swap { opacity: 0; transform: translateY(4px); }

.mtp-swap.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.22, .68, .32, 1);
}

@media (prefers-reduced-motion: reduce) {
.mtp-swap, .mtp-swap.is-in { opacity: 1; transform: none; transition: none; }
}

/* The primary action in the foot -- "Create a piece from this". Indigo, not the
   send screen's green: this button does not send anything, and wearing Send's
   colour on the one popup that deliberately cannot send would be the worst
   possible place to reuse it. */
.wk-rr-btn--go {
  background: #4338ca;
  border-color: #4338ca;
  color: #fff;
}

.wk-rr-btn--go:hover { background: #312e81; border-color: #312e81; }

/* == THE WALL ============================================================== */
/* == THE CARD IS THE PICTURE, SO GIVE THE PICTURE THE ROOM ==================
   Tyler, 2026-08-20: *"I want it to look exactly like the templates have to
   look."* At minmax(272px) with a 178px window the render came out as a postage
   stamp with a paragraph of metadata under it -- the metadata was the card and
   the email was a decoration. 300px columns and a 226px window invert that: the
   email is most of the card and the words are the caption.
   ⚠️ THE THREE NUMBERS BELOW MOVE TOGETHER. 600px is what an email IS; the scale
   is chosen so the render FILLS the column (600 x .62 = 372px against a ~357px
   card, deliberately a hair over so it reaches both edges rather than floating
   in grey bands), and the render HEIGHT decides how much of the email you see --
   400px cropped by a 226px window, not squeezed into it. */
.mtw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}

/* == THE WRAP EXISTS SO THE EXPAND BUTTON CAN BE A REAL BUTTON ==============
   A <button> inside a <button> is invalid HTML and browsers silently UN-NEST it
   -- which drags the expand control out of the card's box and drops it at the
   end of the grid row. So the card is a div[role=button] and the two are
   siblings inside this wrap, which is also what owns `position:relative` for the
   button's absolute placement. */
.mtw-cardwrap {
  position: relative;
  display: flex;
  min-width: 0;
}

.mtw-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.mtw-card:hover,
.mtw-card:focus-visible {
  transform: translateY(-2px);
  border-color: #c7d2fe;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .13);
  outline: none;
}

/* Hovering the expand button must not let the card drop back down under it --
   the lift is on the WRAP's hover, so both children keep it. */
.mtw-cardwrap:hover .mtw-card {
  transform: translateY(-2px);
  border-color: #c7d2fe;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .13);
}

/* == EXPAND -- Tyler: "there need to be expand buttons" =====================
   Revealed on hover over the wrap, like the piece review's own .wk-rr-expand,
   and always present for the keyboard: `opacity:0` still takes focus, so
   :focus-visible brings it back without a second tab stop appearing out of
   nowhere. */
.mtw-blow {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: rgba(15, 23, 42, .68);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px) scale(.94);
  transition: opacity .16s ease, transform .16s ease, background .14s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .24);
}

.mtw-cardwrap:hover .mtw-blow,
.mtw-blow:focus-visible {
  opacity: 1;
  transform: none;
}

.mtw-blow:hover { background: #4338ca; }

.mtw-blow svg { width: 15px; height: 15px; display: block; }

/* ⚠️ A THUMBNAIL IS AN IFRAME, NOT AN IMAGE — the same trick the send screen's
   design gallery uses, and for the same reason: there is nowhere to get a
   PICTURE of a SendGrid template from. The real rendered HTML is drawn at the
   600px an email actually is and scaled down.
   ⚠️ `pointer-events:none` ON THE FRAME IS WHAT MAKES IT A PICTURE. Without it
   the frame swallows the click and the card looks broken rather than inert. */
.mtw-shot {
  position: relative;
  display: flex;
  justify-content: center;
  height: 226px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border-bottom: 1px solid #e2e8f0;
}

/* ⚠️ 600px IS WHAT AN EMAIL IS, AND THE SCALE IS CHOSEN TO FILL THE CARD.
   At .44 the render came out 264px wide inside a ~356px column and the card
   read as a small page floating in two grey bands. .58 lands at 348px — the
   picture reaches the edges, and the 340px render height means the frame is
   CROPPED by the 178px window rather than shrunk into it, so the words in the
   thumbnail are still big enough to recognise. */
.mtw-shot-in {
  flex: 0 0 600px;
  width: 600px;
  height: 400px;
  transform: scale(.62);
  transform-origin: top center;
}

.mtw-shot-in iframe {
  display: block;
  width: 600px;
  height: 400px;
  border: 0;
  background: #fff;
  pointer-events: none;
}

/* No body to draw — a plate, never an empty frame. The card that is guaranteed
   to be on screen must not be the ugly one. */
.mtw-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  color: #64748b;
  text-align: center;
}

.mtw-plate svg { width: 30px; height: 30px; opacity: .55; }

.mtw-plate span { font-size: 11.5px; line-height: 1.45; max-width: 200px; }

.mtw-card.is-dead .mtw-plate { color: #b45309; }

.mtw-card.is-dead .mtw-shot { background: linear-gradient(135deg, #fffbeb, #fef3c7); }

.mtw-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 13px;
}

.mtw-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mtw-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--c, #475569);
  background: color-mix(in srgb, var(--c, #475569) 12%, #fff);
}

.mtw-chip svg { width: 12px; height: 12px; }

.mtw-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mtw-sub {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mtw-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 11px;
  color: #94a3b8;
}

.mtw-meta b { font-weight: 600; color: #64748b; }

.mtw-used {
  color: #4338ca;
  font-weight: 600;
}

/* THE SEND COUNT IS THE HEADLINE NUMBER ON THE CARD, not the piece count -- a
   design that had gone to 6,011 people through no piece at all read "unused" on
   this wall. Sent is the strong state and gets the strong colour; "never used"
   is deliberately quiet, because it is a fact about a template rather than a
   problem with it. */
.mtw-used.is-sent { color: #15803d; }

.mtw-used.is-queued { color: #b45309; }

.mtw-used.is-none { color: #94a3b8; font-weight: 500; }

/* == THE DATE THE TEMPLATE TALKS ABOUT =====================================
   Its own row, not the fourth item in a dot-separated meta line: somebody
   scanning this wall for "what is about to go stale" is looking for exactly this
   and it has to be findable without reading. The colour is the state -- amber
   inside 45 days, red once the date has passed, quiet grey when it is far off --
   and the WORDS always name the date, so the Expiring soon tile is checkable
   rather than a number to be trusted. */
.mtw-when {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.mtw-when svg { flex: 0 0 auto; width: 13px; height: 13px; }

.mtw-when.is-soon { background: #fffbeb; color: #b45309; }

.mtw-when.is-past { background: #fef2f2; color: #b91c1c; }

.mtw-when.is-ahead { background: #f1f5f9; color: #64748b; }

/* The section headings that split the wall — "Marketing", "Reports", "Stored in
   MPMA Marketing". A wall of eighteen designs with no shelves is a list of pictures. */
.mtw-sec { margin: 0 0 18px; }

.mtw-sec-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
}

.mtw-sec-h b { font-weight: 600; color: #94a3b8; letter-spacing: 0; text-transform: none; font-size: 11.5px; }

.mtw-sec + .mtw-sec { border-top: 1px solid #eef2f7; padding-top: 16px; }

/* A source that could not be read says so IN the wall — it is never drawn as
   "there are none". Same rule as the board's tiles. */
.mtw-down {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
}

.mtw-down svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }

/* ══ THE PROFILE'S OWN SECTIONS ═══════════════════════════════════════════ */

/* Where it lives — the answer to the question that opened this screen. */
.mtp-where {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.mtp-where svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: #6366f1; }

.mtp-where b { display: block; color: #0f172a; font-weight: 700; margin-bottom: 1px; }

/* Used by — pieces and campaigns, each one a door. */
.mtp-list { display: flex; flex-direction: column; gap: 6px; }

.mtp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}

.mtp-row:hover { border-color: #c7d2fe; background: #f8faff; }

.mtp-row-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, #94a3b8);
}

.mtp-row-t { flex: 1 1 auto; min-width: 0; }

.mtp-row-n {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtp-row-s {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mtp-row-go { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #4f46e5; opacity: 0; transition: opacity .14s ease; }

.mtp-row:hover .mtp-row-go { opacity: 1; }

/* The token contract — what the design asks the sender to fill in. */
.mtp-tokens { display: flex; flex-wrap: wrap; gap: 5px; }

.mtp-token {
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.mtp-token.is-auto { color: #64748b; background: #fff; border-style: dashed; }

.mtp-note {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #64748b;
}

.mtp-load { padding: 10px 2px; font-size: 12px; color: #94a3b8; }

@media (max-width: 720px) {
.mtw-grid { grid-template-columns: 1fr; }
}

/* ══ 🚨 AN <a> WEARING .wk-rr-btn IS NOT A BUTTON, AND ITS ICON PROVED IT ═════
   The footer's "Open in SendGrid" is an anchor, because it opens a new tab and a
   <button> that navigates is a lie to a screen reader and to middle-click. But
   `.wk-rr-btn` was written for a <button>: it sets no `display`, so the anchor
   stayed `inline` — and an inline SVG with only a `viewBox` and no width has no
   intrinsic size to shrink to, so it rendered at its container's width. Measured
   in a screenshot: a 110px arrow under the footer, three times the height of the
   button it belonged to.
   Caught only because the shot was taken. Any icon this file puts inside a
   .wk-rr-btn gets its size from here. */
.wk-rr-modal-foot a.wk-rr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.wk-rr-modal-foot a.wk-rr-btn svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}