/* App-specific extensions on top of the cargo.one design system.
   Keep this file small. If a pattern grows, push it into the design system. */

/* ---------- Surface override ----------
   Design system defaults body to #FAFBFC (light grey). We use plain white
   so cards (also white) read as primary surfaces and the page doesn't feel
   layered. */
:root { --c1-body-bg: #FFFFFF; }
body { background: #FFFFFF; }

/* ---------- Link hover normalisation ----------
   tokens.css forces underline on every anchor hover. That bleeds onto
   anchors-as-buttons (.btn, .btn-link, .hub-tile, .nav-link, card-c1
   anchors), which already signal hover via background or border. Strip
   the underline there — keep it only for inline prose links. */
.btn, .btn-link,
.btn:hover, .btn-link:hover,
a.card-c1, a.card-c1:hover,
.hub-tile, .hub-tile:hover,
.c1-sidebar a, .c1-sidebar a:hover,
.dropdown-item, .dropdown-item:hover {
  text-decoration: none;
}

/* ---------- Alert spacing ----------
   Design-system .alert ships with no margin. Default bottom margin so
   stacked flash messages and inline form errors don't bunch against the
   next block. */
.alert { margin-bottom: var(--c1-s3); }
.alert.mb-0 { margin-bottom: 0; }

/* ---------- Heading defaults ----------
   Design-system sizes (runway.css). Tokens (--c1-fs-h1/h2) are the "display"
   step; plain heading tags use the smaller, more conservative app sizes. */
h1, .h1 { font-size: var(--c1-fs-h2); line-height: 1.25; font-weight: 700; margin: 0 0 var(--c1-s3); color: var(--c1-cadet); }
h2, .h2 { font-size: var(--c1-fs-h2); line-height: 1.3;  font-weight: 700; margin: 0 0 var(--c1-s2); color: var(--c1-cadet); }
h3, .h3 { font-size: var(--c1-fs-h3); line-height: 1.35; font-weight: 700; margin: 0 0 var(--c1-s2); color: var(--c1-cadet); }
h4, .h4 { font-size: var(--c1-fs-h4); line-height: 1.4;  font-weight: 700; margin: 0 0 var(--c1-s1); color: var(--c1-cadet); }
.h1-display { font-size: var(--c1-fs-h1); line-height: var(--c1-lh-tight); font-weight: 700; color: var(--c1-cadet); margin: 0 0 var(--c1-s4); }
.h2-display { font-size: var(--c1-fs-h2); line-height: var(--c1-lh-tight); font-weight: 700; color: var(--c1-cadet); margin: 0 0 var(--c1-s3); }

/* ---------- Time cell ----------
   Stacked relative-time (primary) + absolute timestamp (dim). Used in any
   table where a "5d ago / 2026-05-15 09:33" pair reads better than the raw
   timestamp alone. */
.time-cell { display: flex; flex-direction: column; line-height: 1.25; }
.time-cell__rel { color: var(--c1-gunmetal-l10); }
.time-cell__abs { color: var(--c1-gunmetal-l30); font-size: 13px; font-family: var(--c1-font-mono); }

/* ---------- Action buttons in dense table rows ----------
   30x30 icon buttons for inline row actions. Used where one solid CTA per
   surface (design-system rule) doesn't fit because each row needs its own
   action affordance. */
.action-btn {
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c1-gunmetal-l70);
  background: #fff;
  border-radius: var(--c1-radius-lg);
  color: var(--c1-gunmetal-l20);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.action-btn:hover {
  background: var(--c1-offer-bg);
  border-color: var(--c1-gunmetal-l60);
  color: var(--c1-gunmetal);
}
.action-btn:focus-visible { outline: 2px solid var(--c1-cadet); outline-offset: 2px; }
.action-btn--danger { color: var(--c1-red); border-color: var(--c1-red-l40); background: var(--c1-red-l50); }
.action-btn--danger:hover { background: var(--c1-red); border-color: var(--c1-red); color: #fff; }
.action-btn--edit { color: var(--c1-blue); border-color: var(--c1-blue-l40); background: var(--c1-blue-l60); }
.action-btn--edit:hover { background: var(--c1-blue); border-color: var(--c1-blue); color: #fff; }

/* ---------- Monospace cells / IDs ----------
   Roboto Mono for table cells, identifiers, code-like values. Loaded via
   Google Fonts in base.html. */
.mono, .table-mono td, td.mono {
  font-family: var(--c1-font-mono);
}

/* ---------- Data-table overrides ----------
   Tighter rows, monospace body cells, single outer border, rounded corners
   via per-corner cell radii (no overflow:hidden, so the sticky thead can
   escape the table's clipping context and pin to the page scroll). */
.data-table {
  border: 1px solid var(--c1-gunmetal-l70);
  border-radius: var(--c1-radius-lg);
  box-shadow: var(--c1-shadow-card);
  background: #fff;
  border-spacing: 0;
  border-collapse: separate;
  overflow: visible;
}
/* Round the corner cell backgrounds to match the outer border. */
.data-table thead th:first-child { border-top-left-radius: var(--c1-radius-lg); }
.data-table thead th:last-child  { border-top-right-radius: var(--c1-radius-lg); }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--c1-radius-lg); }
.data-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--c1-radius-lg); }

/* The .data-table-wrap div (still emitted by some templates) is a no-op —
   no overflow, no chrome — so the table itself remains the scroll-ancestor
   target for sticky thead. Keeps templates working without churn. */
.data-table-wrap {
  display: block;
}
.data-table th { border-top: 0; }
.data-table td { border-bottom: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
/* Sticky header — stays in view while a long table scrolls under it.
   Applied to both <thead> and <th> because browsers vary on which one
   honours sticky inside a table layout. Solid bg on the cells prevents
   row content bleeding through when the row scrolls under. */
.data-table thead { position: sticky; top: 0; z-index: 3; }
.data-table thead tr { position: sticky; top: 0; z-index: 3; }
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--c1-gunmetal-l90);
}
/* NOTE: the header's bottom line is the th `border-bottom` (components.css) — a
   single line. We do NOT add a th::after underline here: the c1 DataTables sort
   caret uses th.sorting_*::after, so a second ::after underline (a) doubled the
   border under the header and (b) got replaced by the caret on the sorted column
   (single border there), making it inconsistent. One border-bottom for all. */
.data-table th { padding: 12px; }
.data-table td { padding: 8px 12px; }
.data-table th:first-child,
.data-table td:first-child { padding-left: 16px; border-left: 0; }
.data-table th:last-child,
.data-table td:last-child { padding-right: 16px; border-right: 0; }
.data-table td {
  font-family: var(--c1-font-mono);
  font-size: 13px;
  font-weight: 400;
}
.data-table td:first-child { font-weight: 400; color: var(--c1-gunmetal-l10); }
.data-table tbody tr:nth-child(even) td { background: var(--c1-cadet-l80); }
.data-table tbody tr:hover td { background: var(--c1-offer-bg); }
/* Status pills inside a table row match the 13px row data (the standalone
   .badge in components.css stays 14px). */
.data-table .badge { font-size: 13px; }
.data-table .action-btn {
  font-family: 'Proxima Nova', var(--c1-font-base);
}
.data-table .badge {
  font-family: var(--c1-font-mono);
  font-weight: 400;
  font-size: 13px;
  padding: 4px 8px;
}

/* ---------- Sidebar overrides ----------
   Slight uplift over the design-system defaults: wider rail, larger nav
   text, more breathing room around the wordmark. */
.c1-sidebar { flex: 0 0 264px; width: 264px; }
.c1-sidebar__logo { padding: 36px 20px 28px 26px; }
.c1-sidebar__logo img.c1-sidebar__logo--full { width: 144px; }
.c1-sidebar .nav-link,
.c1-sidebar .accordion-button {
  font-size: 15.5px;
  padding: 11px 14px;
}
.c1-sidebar .nav-link i,
.c1-sidebar .nav-link .bi,
.c1-sidebar .accordion-button i,
.c1-sidebar .accordion-button .bi { font-size: 17px; }
.c1-sidebar .accordion-body .nav-link { font-size: 14.5px; padding: 9px 14px; }

/* ---------- Provider chip in sidebar bottom row ----------
   Soft white-on-navy pill so it harmonises with the gradient instead of
   fighting it. Hide when sidebar is collapsed. */
.c1-sidebar .c1-sidebar__provider-badge {
  background: var(--c1-nav-hover-bg);
  color: var(--c1-nav-text-active);
  border: 1px solid var(--c1-nav-divider);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.c1-sidebar .c1-sidebar__provider-badge .bi {
  color: var(--c1-nav-text);
  font-size: 14px;
}
.c1-sidebar.is-collapsed .c1-sidebar__provider-badge { display: none; }

/* ---------- Logout icon ----------
   Square hit area so the lock glyph isn't squeezed by flex layout. */
.c1-sidebar .c1-sidebar__logout {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  flex: 0 0 32px;
  justify-content: center;
}

/* ---------- Impersonation banner row in sidebar ----------
   Soft amber highlight so it reads as "you are in another user's seat". */
.c1-sidebar .nav-link.impersonation-link {
  background: rgba(225, 120, 0, 0.18);
  color: #FFE0BD;
  border-left-color: var(--c1-amber);
}
.c1-sidebar .nav-link.impersonation-link:hover {
  background: rgba(225, 120, 0, 0.32);
  color: #fff;
}

/* ---------- 360 Ignite submodule heading in sidebar ----------
   Visual separator for the 360 dashboards block. */
.c1-sidebar .c1-360-heading {
  padding: 4px 16px 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  font-weight: 700;
}
.c1-sidebar.is-collapsed .c1-360-heading { display: none; }

/* 360 Ignite brand logo in the sidebar — slots above the 360 nav links
   so the sub-section reads as its own product. */
.c1-sidebar .c1-360-logo {
  padding: 14px 18px 10px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Sunset strip — flex-grows into the empty space to the right of the
   360 wordmark, vertically centred. Revealed on hover/active WITHIN the
   matching 360 section only. Each section (Ignite / Leap) reveals its OWN
   logo strip: scoping the :has() to the per-section link modifier
   (.nav-item--ignite / .nav-item--leap) and the strip to the matching logo
   modifier (.c1-360-logo--ignite / --leap) prevents cross-section bleed
   (hovering a Leap link must not light the Ignite wordmark, and vice-versa). */
.c1-sidebar .c1-360-logo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c1-gradient-sunset);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}
/* Ignite section reveals only the Ignite logo strip. */
.c1-sidebar .c1-360-logo--ignite:hover::after,
.c1-sidebar .nav.flex-column:has(.nav-item--ignite:hover) .c1-360-logo--ignite::after,
.c1-sidebar .nav.flex-column:has(.nav-item--ignite .nav-link.active) .c1-360-logo--ignite::after {
  transform: scaleX(1);
}
/* Leap section reveals only the Leap logo strip. */
.c1-sidebar .c1-360-logo--leap:hover::after,
.c1-sidebar .nav.flex-column:has(.nav-item--leap:hover) .c1-360-logo--leap::after,
.c1-sidebar .nav.flex-column:has(.nav-item--leap .nav-link.active) .c1-360-logo--leap::after {
  transform: scaleX(1);
}
.c1-sidebar .c1-360-logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  transition: filter .25s ease;
}
.c1-sidebar .c1-360-logo a:hover {
  filter: drop-shadow(0 0 6px rgba(225,162,90,0.45))
          drop-shadow(0 0 14px rgba(231,10,62,0.28));
}
.c1-sidebar .c1-360-logo .logo-360 { display: block; height: 24px; width: auto; }
.c1-sidebar.is-collapsed .c1-360-logo { display: none; }

/* ---------- 360 ignite nav-link hover — sunset glow + chevron arrow ----
   Only ignite nav items get the sunset treatment; rest of the rail keeps
   the default gunmetal hover from navbar.css. */
.c1-sidebar .nav-item--ignite .nav-link { position: relative; }
.c1-sidebar .nav-item--ignite .nav-link::after {
  content: "\F285";  /* bi-chevron-right */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  color: var(--c1-gold-l10);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
.c1-sidebar .nav-item--ignite .nav-link:hover::after,
.c1-sidebar .nav-item--ignite .nav-link.active::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.c1-sidebar .nav-item--ignite .nav-link:hover,
.c1-sidebar .nav-item--ignite .nav-link.active {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(225,162,90,0.10) 50%, rgba(231,10,62,0.20) 100%);
  color: #fff;
}
.c1-sidebar .nav-item--ignite .nav-link.active {
  border-left-color: #C1426C;  /* sunset mid — rose */
}
.c1-sidebar.is-collapsed .nav-item--ignite .nav-link::after { display: none; }

/* ---------- Hub grid ----------
   Compact clickable cards for landing / overview pages. Icon sits inline
   with the title; no big top thumb. Use anywhere we list navigable
   modules (welcome page, /admin). */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--c1-s3);
  max-width: none;
}
.hub-tile {
  background: #fff;
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
  box-shadow: var(--c1-shadow-card);
  display: flex;
  flex-direction: column;
  color: inherit;
  padding: 22px 24px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hub-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--c1-shadow-md);
  border-color: var(--c1-blue);
  color: inherit;
}
.hub-tile__body {
  display: flex; flex-direction: column; gap: 12px;
}
/* Card head: light-blue icon chip + title on one row (promoted from the
   design-system guide's .ds-card-head/.ds-card-icon — the admin-dashboard
   card style). The chip replaces the old inline-icon-in-title layout. */
.hub-tile__head { display: flex; align-items: center; gap: 12px; }
.hub-tile__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--c1-radius-lg);
  background: var(--c1-blue-l50); color: var(--c1-blue);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.hub-tile__icon .bi { line-height: 1; display: block; }  /* center glyph (kill bi's -.125em) */
.hub-tile__eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c1-gunmetal-l30);
  margin: 0;
}
.hub-tile__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c1-cadet);
  margin: 0;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-tile__title .bi {
  color: var(--c1-blue);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.hub-tile__desc {
  font-size: 15px;
  font-weight: 400;
  color: var(--c1-gunmetal-l20);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Hub bucket ----------
   Light card surface that groups a set of hub tiles under a title.
   Used on /portal/welcome to frame the "Manage your Offering" block so
   it reads as a distinct unit alongside the navy 360 banner-pace. */
.hub-bucket {
  background: var(--c1-cadet-l80);
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
  padding: 22px 26px 26px;
  max-width: 1100px;
}
.hub-bucket__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c1-cadet);
  line-height: 1.2;
}
.hub-bucket .hub-grid { max-width: none; }

/* Welcome header status line + 'Needs your attention' block (welcome redesign,
   lazy-loaded counts). */
.welcome-status { margin: 0; font-size: 17px; color: var(--c1-gunmetal-l20); }
.section-label {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c1-gunmetal-l30); margin: 0 0 14px;
}
.attention-section { margin-bottom: var(--c1-s5); }
.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
}
.attention-card {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  background: #fff;
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
  box-shadow: var(--c1-shadow-card);
  padding: 16px 18px 16px 21px;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.attention-card:hover { transform: translateY(-2px); box-shadow: var(--c1-shadow-darker, 0 10px 20px rgba(38,44,54,.08)); }
.attention-card__stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--c1-radius-lg) 0 0 var(--c1-radius-lg); }
.attention-card__chip {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--c1-radius-lg); font-size: 17px;
}
.attention-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attention-card__headline { font-size: 15.5px; font-weight: 700; color: var(--c1-cadet); }
.attention-card__label { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c1-gunmetal-l40); }
/* severity variants */
.attention-card--warn .attention-card__stripe { background: var(--c1-amber); }
.attention-card--warn .attention-card__chip { background: var(--c1-amber-l50); color: var(--c1-amber-d10, #9a6a00); }
.attention-card--info .attention-card__stripe { background: var(--c1-blue); }
.attention-card--info .attention-card__chip { background: var(--c1-blue-l50); color: var(--c1-blue); }
.attention-skel {
  height: 72px; border-radius: var(--c1-radius-lg);
  background: linear-gradient(90deg, var(--c1-gunmetal-l90) 25%, var(--c1-gunmetal-l80) 50%, var(--c1-gunmetal-l90) 75%);
  background-size: 200% 100%; animation: attnShimmer 1.2s ease-in-out infinite;
}
@keyframes attnShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .attention-skel { animation: none; } }

/* 'Your tools' grouped panels (welcome redesign). Tools are grouped into
   Operations / Rates & Publishing panels; each panel is a card of tool rows. */
.tools-section { margin-bottom: var(--c1-s5); }
.tools-section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.tools-section__count { font-size: 13px; color: var(--c1-gunmetal-l40); }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}
.tools-panel {
  background: #fff;
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
  box-shadow: var(--c1-shadow-card);
  overflow: hidden;
}
.tools-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c1-cadet-l70, #f1f3f9);
}
.tools-panel__icon { color: var(--c1-cadet); font-size: 15px; }
.tools-panel__title {
  flex: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c1-gunmetal-l30);
}
.tools-panel__pill {
  font-size: 12px;
  font-weight: 700;
  color: var(--c1-gunmetal-l30);
  background: var(--c1-gunmetal-l90);
  border-radius: 999px;
  padding: 1px 9px;
}
.tools-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  border-bottom: 1px solid var(--c1-cadet-l70, #f1f3f9);
  transition: background .12s;
}
.tools-row:last-child { border-bottom: none; }
.tools-row:hover { background: var(--c1-cadet-l80, #f8f9fc); }
.tools-row__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c1-blue-l50);
  color: var(--c1-blue);
  border-radius: var(--c1-radius-lg);
  font-size: 18px;
}
.tools-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tools-row__name { font-size: 16px; font-weight: 700; color: var(--c1-cadet); }
.tools-row__desc { font-size: 13.5px; color: var(--c1-gunmetal-l30); }
.tools-row__launch { color: var(--c1-gunmetal-l50); font-size: 14px; }
.tools-row:hover .tools-row__launch { color: var(--c1-blue); }

/* Bucket tiles — title stays single-line; description wraps to two lines
   with a line-clamp safety net for longer copy (e.g. admin tool descriptions
   that are sentence-long). Keeps the same type scale as standard hub-tiles. */
.hub-bucket .hub-tile__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hub-bucket .hub-tile__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

/* ---------- Hub section ----------
   Wrapper for a labelled group of hub tiles (e.g. 360 Ignite block). */
.hub-section { margin-top: var(--c1-s5); max-width: 1100px; }
.hub-section__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--c1-s3);
}
.hub-section__logo { display: block; height: 28px; width: auto; }

/* Dark-mode tile variant — used when hub-tiles sit inside .banner-pace.
   Translucent white surface so the navy gradient stays visible. */
.banner-pace .hub-grid { max-width: none; }
.banner-pace .hub-tile {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  box-shadow: none;
  color: #fff;
}
.banner-pace .hub-tile:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--c1-gold-l10);
  color: #fff;
}
.banner-pace .hub-tile__title { color: #fff; }
.banner-pace .hub-tile__title .bi { color: var(--c1-gold-l10); }
.banner-pace .hub-tile__desc { color: rgba(255,255,255,0.7); }

/* ---------- Sunset strip + Pace banner ----------
   Two-layer hero primitive from runway. Navy container + gold→rose→red
   accent strip. Use one per page — the construct itself is the moment. */
.banner-sunset-bar {
  height: 4px;
  width: 100%;
  background: var(--c1-gradient-sunset);
  border-radius: var(--c1-radius-pill);
}
.banner-sunset-bar--thin  { height: 2px; }
.banner-sunset-bar--thick { height: 6px; }

.banner-pace {
  position: relative;
  background: var(--c1-gradient-pace);
  color: #fff;
  border-radius: var(--c1-radius-lg);
  padding: 28px 32px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 6px rgba(38,44,54,.08), 0 3px 6px rgba(38,44,54,.08);
}
.banner-pace::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--c1-gradient-sunset);
}
.banner-pace__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 10px;
}
.banner-pace__eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--c1-gradient-sunset);
  border-radius: 2px;
}
.banner-pace__title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}
.banner-pace__sub {
  font-size: 16px;
  color: rgba(255,255,255,.82);
  margin: 0;
  line-height: 1.55;
}
.banner-pace .btn-white {
  background: #fff;
  color: var(--c1-red-d10);
  border: 0;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--c1-radius-lg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .12s;
}
.banner-pace .btn-white:hover { background: rgba(255,255,255,.92); color: var(--c1-red-d20); }
.banner-pace .btn-ghost {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 0;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--c1-radius-lg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .12s;
}
.banner-pace .banner-pace__actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* "Go deeper than Ignite" footer inside the Ignite hero — a divided band that
   upsells Leap to Ignite owners. */
.banner-pace__footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.banner-pace__footer-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.banner-pace__footer-sub {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  margin: 0;
}
/* Upsell sub line inside the banner — slightly dimmed, spaced above the CTA. */
.banner-pace__sub--upsell {
  margin-top: 14px;
  color: rgba(255,255,255,.82);
}
/* Sunset-gradient CTA — the warm accent used for the Leap upsell action. */
.banner-pace .btn-sunset {
  background: var(--c1-gradient-sunset);
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--c1-radius-lg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: filter .12s;
}
.banner-pace .btn-sunset:hover { filter: brightness(1.06); }

/* Clickable section logo wrapper. Removes link decoration so the image
   reads as a label, not a hyperlink. */
.hub-section__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity .12s;
}
.hub-section__logo-link:hover { opacity: .78; }

/* ---------- Eyebrow with sunset accent ----------
   Page-header eyebrow that mirrors the .banner-pace eyebrow treatment
   on light backgrounds. Use sparingly — section / page headers only. */
.eyebrow-sunset {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c1-gunmetal-l20);
  margin: 0 0 8px;
}
.eyebrow-sunset::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--c1-gradient-sunset);
  border-radius: 2px;
}

/* Inline 360 logo block inside .banner-pace — header above tiles.
   Logo uses currentColor (#fff inherited from .banner-pace). */
.banner-pace__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.banner-pace__head .logo-360 { color: #fff; }
.banner-pace__head a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity .12s;
}
.banner-pace__head a:hover { opacity: .85; }

/* ---------- 360 Ignite landing page ----------
   FOMO panel for users without 360 access — and a richer hub for users
   who have it. Sits inside `.c1-main`. */
/* Full container width so the 360 blocks line up with the tools section above
   (which has no max-width) — a narrower cap left them misaligned on wide screens. */
.ignite-page { width: 100%; }
.ignite-page .banner-pace { margin-bottom: var(--c1-s5); }
.ignite-page .banner-pace__logo {
  display: block;
  margin-bottom: 14px;
  color: #fff;
}
.ignite-page .banner-pace__logo .logo-360 { display: block; }
/* Package sections (Digital Distribution, etc.) have no wordmark logo — show the
   section name as a text wordmark in the same slot. */
.banner-pace__wordmark-text {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}
.ignite-features {
  display: grid;
  /* Fixed 3-up on desktop so every card keeps the SAME width regardless of how
     many there are — a 5-card set is 3 + 2, and the trailing 2 stay card-width
     (aligned left under the first two columns) instead of stretching to half the
     row each, which looked uneven. Steps down to 2-up then 1-up on smaller
     screens so it stays tidy at every width. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--c1-s3);
  margin-bottom: var(--c1-s5);
}
@media (max-width: 1100px) { .ignite-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .ignite-features { grid-template-columns: 1fr; } }
/* 'View all N dashboards' link shown under a capped card grid (welcome page). */
.ignite-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 var(--c1-s5);
  font-size: 14px;
  font-weight: 600;
  color: var(--c1-blue);
  text-decoration: none;
}
.ignite-see-all:hover { text-decoration: underline; }
.ignite-feature {
  background: #fff;
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  /* Cards are clickable links (open the dashboard) — reset anchor styling and
     add a lift on hover. */
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
}
a.ignite-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--c1-shadow-darker, 0 10px 20px rgba(38,44,54,.08));
}
.ignite-feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c1-gradient-sunset);
}
.ignite-feature__icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c1-red-l50);
  color: var(--c1-red);
  font-size: 20px;
  margin-bottom: 12px;
}
.ignite-feature__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--c1-cadet);
  margin: 0 0 6px;
}
.ignite-feature__desc {
  font-size: 15px;
  color: var(--c1-gunmetal-l20);
  line-height: 1.5;
  margin: 0;
}
/* The contact tile is a link styled as a feature card; reset the anchor and add a
   subtle lift so it reads as clickable (the other five cards are static). */
.ignite-feature--cta {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s ease, transform .25s ease;
}
/* gradient-pace wash fades in on hover (matches the 360 banner-pace hero).
   Gradients can't tween, so cross-fade an overlay for a harmonic transition. */
.ignite-feature--cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c1-gradient-pace);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}
.ignite-feature--cta > * { position: relative; z-index: 1; }
.ignite-feature--cta .ignite-feature__desc { font-weight: 400; }  /* anchor sets 600; keep body regular */
/* Locked teaser: content blurred behind a lock by default; hover reveals it. */
.ignite-feature__locked {
  filter: blur(5px);
  transition: filter .3s ease;
}
.ignite-feature__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--c1-gunmetal-l20);
  opacity: 1;
  transition: opacity .3s ease, color .3s ease;
  pointer-events: none;
}
.ignite-feature--cta:hover .ignite-feature__locked { filter: blur(0); }
.ignite-feature--cta:hover .ignite-feature__lock { opacity: 0; }
.ignite-feature--cta::before { z-index: 2; }  /* keep sunset strip above the wash */
.ignite-feature--cta:hover {
  box-shadow: var(--c1-shadow-card);
  transform: translateY(-2px);
  text-decoration: none;
}
.ignite-feature--cta:hover::after { opacity: 1; }
/* white content on the gradient; also blocks the global a:hover underline */
.ignite-feature--cta:hover .ignite-feature__title,
.ignite-feature--cta:hover .ignite-feature__desc {
  color: #fff;
  text-decoration: none;
}
.ignite-feature--cta:hover .ignite-feature__icon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* Higher-tier UPSELL: locked-preview dashboard cards (non-clickable teasers of a
   tier the provider does not own yet). Readable but visibly LOCKED — a subtle
   dashed border + tinted panel + a prominent lock badge, rather than a washed-out
   low-opacity card (which read as broken). No hover lift; nothing to click. */
.ignite-feature--locked {
  cursor: default;
  background: var(--c1-cadet-l80);
  border-style: dashed;
  border-color: var(--c1-card-border);
}
.ignite-feature--locked .ignite-feature__title,
.ignite-feature--locked .ignite-feature__desc {
  color: var(--c1-gunmetal-l40);  /* dimmed text, still legible */
}
.ignite-feature--locked .ignite-feature__icon {
  opacity: .7;
}
.ignite-feature--locked:hover {
  box-shadow: none;
  transform: none;
}
.ignite-feature__lockbadge {
  font-size: 12px;
  color: var(--c1-blue);
  margin-left: 6px;
  vertical-align: baseline;
}
/* Upsell banner is a compact teaser (title + one line + CTA), so trim its height
   vs the full owner hero — avoids a tall empty gradient band. */
.ignite-page--locked .banner-pace {
  padding: 22px 32px;
}
.ignite-page--locked .banner-pace__sub {
  max-width: 640px;
}

.ignite-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--c1-s3);
  margin-bottom: var(--c1-s5);
  padding: 24px;
  background: var(--c1-cadet-l80);
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
}
.ignite-stat__num {
  font-size: 32px;
  font-weight: 700;
  background: var(--c1-gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
  margin: 0 0 4px;
}
.ignite-stat__label {
  font-size: 14px;
  color: var(--c1-gunmetal-l20);
  margin: 0;
  line-height: 1.4;
}

.ignite-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border: 1px solid var(--c1-gold-l40);
  background: var(--c1-gold-l60);
  border-radius: var(--c1-radius-lg);
  position: relative;
  overflow: hidden;
}
.ignite-close::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c1-gradient-sunset);
}
.ignite-close__text { flex: 1 1 auto; }
.ignite-close__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c1-gold-d20);
}
.ignite-close__desc {
  margin: 0;
  font-size: 14px;
  color: var(--c1-gunmetal-l20);
  line-height: 1.5;
}
.btn-ignite-cta {
  flex-shrink: 0;
  background: var(--c1-cadet);
  border: 1px solid var(--c1-cadet);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--c1-radius-lg);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .12s, border-color .12s;
}
.btn-ignite-cta:hover {
  background: var(--c1-cadet-l10);
  border-color: var(--c1-cadet-l10);
  color: #fff;
}
@media (max-width: 720px) {
  .ignite-close { flex-direction: column; align-items: flex-start; }
}

/* ---------- Login shell ----------
   Centered card on navy gradient. Logo sits ABOVE the card so the wordmark
   reads as the page-level brand, not card content. */
.c1-login-shell {
  min-height: 100vh;
  background: var(--c1-navbar-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.c1-login-wrap {
  width: 100%;
  max-width: 460px;
}
.c1-login-logo {
  display: block;
  margin: 0 auto var(--c1-s5);
  height: 32px;
}
.c1-login-card {
  background: #fff;
  border-radius: var(--c1-radius-xl);
  padding: 40px 44px;
  box-shadow: var(--c1-shadow-lg);
}
.c1-login-card h1 {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--c1-s3);
  padding-bottom: var(--c1-s3);
  color: var(--c1-cadet);
  position: relative;
}
.c1-login-card h1::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c1-gunmetal-l70) 20%, var(--c1-gunmetal-l70) 80%, transparent);
}
.c1-login-footer {
  text-align: center;
  margin-top: var(--c1-s3);
  font-size: 12px;
}
.c1-login-footer a {
  color: rgba(255,255,255,.55);
  font-weight: 400;
  padding: 6px 12px;
  border-radius: var(--c1-radius-lg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
}
.c1-login-footer a:hover {
  color: #fff;
  background: var(--c1-nav-hover-bg);
  text-decoration: none;
}

/* ---------- Form layout primitives ----------
   Modeled on design-pack draft-form.html. Long-form forms split into
   sections; each section has a header (h2 + optional help paragraph)
   above a .card-c1 panel containing a .form-grid of fields. */
.form-page-head {
  margin: 0 0 var(--c1-s4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--c1-s3); flex-wrap: wrap;
}
.form-page-head h1 {
  margin: 0;
  font-size: var(--c1-fs-h2);
  line-height: var(--c1-lh-tight);
  font-weight: var(--c1-fw-bold);
  color: var(--c1-cadet);
}
.form-section { margin-bottom: var(--c1-s4); }
.form-section__head { margin-bottom: var(--c1-s2); }
.form-section__head h2 {
  margin: 0 0 2px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c1-cadet);
  display: flex; align-items: center; gap: 10px;
}
.form-section__head h2 .bi { color: var(--c1-blue); font-size: 17px; }
.form-section__head p {
  color: var(--c1-gunmetal-l20);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}
.form-section__panel {
  background: #fff;
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
  box-shadow: var(--c1-shadow-card);
  padding: var(--c1-s4);
}
/* Responsive grid for form fields. Auto-flows columns based on available
   width so wide screens use more horizontal space instead of stacking. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 24px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-grid--three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 520px) {
  .form-grid,
  .form-grid--three { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }
}

/* Compact checkbox list for a finite set of role/permission options.
   Cleaner than a data-table for small enumerations. */
.role-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 8px 16px;
}
.role-checklist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--c1-gunmetal-l70);
  border-radius: var(--c1-radius-lg);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.role-checklist__item:hover { border-color: var(--c1-blue-l30); background: var(--c1-blue-l60); }
.role-checklist__item input[type="checkbox"] { display: none; }
.role-checklist__item .form-check__box { grid-row: 1 / span 2; align-self: center; }
.role-checklist__item input:checked ~ .form-check__box { background: var(--c1-blue); border-color: var(--c1-blue); }
.role-checklist__item input:checked ~ .form-check__box::after {
  content: "";
  width: 9px; height: 5px;
  border: 1.8px solid #fff;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.role-checklist__item input:checked ~ * { /* no-op selector to anchor :has-less browsers */ }
.role-checklist__name {
  font-family: var(--c1-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--c1-cadet);
  line-height: 1.2;
}
.role-checklist__desc {
  font-size: 12.5px;
  color: var(--c1-gunmetal-l20);
  line-height: 1.35;
}
/* Inside a form-grid the .form-group margin would collide with the
   grid gap. Reset it — the gap is canonical. */
.form-grid .form-group { margin-bottom: 0; }

/* Bootstrap 5 ships a .form-check class with `min-height`, `padding-left`,
   `margin-bottom`, and a `float:left` on .form-check-input. Those settings
   fight the design-system .form-check pattern and visibly shift the
   checkbox + label on click. Null them. */
.form-check {
  min-height: 0;
  padding-left: 0;
  margin-bottom: 0;
}
.form-check .form-check-input {
  float: none;
  margin: 0;
}
.form-check__box { vertical-align: middle; }

/* Sticky action bar at the bottom of a form. */
.form-actions {
  display: flex;
  gap: var(--c1-s2);
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--c1-s3);
  border-top: 1px solid var(--c1-card-border);
  margin-top: var(--c1-s3);
}
.form-actions__left { margin-right: auto; }

/* WTForms ships <input> without any class. Apply .form-control look to
   plain <input>, <select>, <textarea> when they live inside a .form-group,
   so the WTForms templates don't need to pass an explicit class= to every
   field. Skip hidden inputs and checkboxes/radios. */
.form-group input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.form-check-input),
.form-group select,
.form-group textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--c1-gunmetal);
  background: var(--c1-gunmetal-l90);
  border: 1px solid var(--c1-gunmetal-l70);
  border-radius: var(--c1-radius-lg);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { min-height: 88px; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 0;
  border-color: #9BC1FB;
  box-shadow: 0 0 0 3px rgba(28,110,242,.18);
}
.form-group input[readonly],
.form-group input[disabled],
.form-group select[disabled],
.form-group textarea[readonly] {
  background: var(--c1-gunmetal-l80);
  color: var(--c1-gunmetal-l20);
  cursor: not-allowed;
}
/* WTForms label without explicit class still picks up the design-pack's
   label styles via the tag selector — keep it sized down to 14/600 to
   match form-pack. */
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--c1-gunmetal);
}
/* WTForms FieldList / form-check-label compatibility. */
.form-group .form-check-label {
  display: inline;
  font-weight: 500;
  margin-bottom: 0;
}
/* Inline error list (WTForms emits an unordered list by default; our
   templates also use a plain div for each error). Either renders as red
   13px help text below the field. */
.form-errors,
.form-group .errors,
.form-group ul.errors {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--c1-red);
  line-height: 1.4;
}
.form-errors div + div { margin-top: 2px; }

/* Form-check-input (Bootstrap-named WTForms checkbox) — basic styling so
   stock checkboxes from WTForms look at home next to .form-check__box. */
.form-check-input {
  width: 16px; height: 16px;
  border: 1px solid var(--c1-gunmetal-l60);
  border-radius: var(--c1-radius-lg);
  accent-color: var(--c1-blue);
  cursor: pointer;
  vertical-align: middle;
  margin-right: 8px;
}

/* "Read-only system info" — disabled-looking inputs surfacing audit data.
   Light fill so they don't fight the editable inputs above. */
.readonly-field,
.form-control.readonly-field {
  background: var(--c1-gunmetal-l80);
  color: var(--c1-gunmetal-l20);
  cursor: default;
}

/* ---------- Role-group accordion (admin user form, provider form) ---------- */
.role-group {
  border: 1px solid var(--c1-gunmetal-l70);
  border-radius: var(--c1-radius-lg);
  overflow: hidden;
  margin-bottom: 10px;
  background: #fff;
}
.role-group + .role-group { margin-top: 0; }
.role-group-header {
  padding: 12px 14px;
  background: var(--c1-gunmetal-l90);
  border-bottom: 1px solid var(--c1-gunmetal-l70);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600;
  color: var(--c1-cadet);
  font-size: 14px;
  transition: background .15s;
}
.role-group-header:hover { background: var(--c1-cadet-l70); }
.role-group-header[aria-expanded="false"] + .collapse,
.role-group-header.collapsed + .collapse { border-bottom: 0; }
.role-group-badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: var(--c1-radius-lg);
  background: var(--c1-gunmetal-l80);
  color: var(--c1-gunmetal-l20);
  font-weight: 500;
  margin-left: 8px;
}
.role-group-badge.is-filled {
  background: var(--c1-blue-l50);
  color: var(--c1-blue-d10);
}
.role-group-content {
  padding: 0;
  background: #fff;
}
.role-group-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.role-group-content th,
.role-group-content td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--c1-gunmetal-l80);
  vertical-align: middle;
}
.role-group-content tr:last-child td { border-bottom: 0; }
.role-group-content thead th {
  background: var(--c1-cadet-l70);
  font-weight: 600;
  font-size: 12px;
  color: var(--c1-gunmetal-l20);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.role-group-content .role-name {
  font-family: var(--c1-font-mono);
  font-size: 13px;
  color: var(--c1-cadet);
}
.role-group-content tbody tr:hover { background: var(--c1-offer-bg); cursor: pointer; }

/* ---------- Process console ----------
   Log viewer for /portal/process. Dark-ish console framed inside a card. */
.process-console {
  background: var(--c1-cadet);
  color: #E6EAF5;
  font-family: var(--c1-font-mono);
  font-size: 13px;
  line-height: 1.55;
  padding: 16px 18px;
  border-radius: var(--c1-radius-lg);
  /* Fills remaining viewport below the page chrome + section header + action row.
     Sized so the page itself does not scroll — only the console scrolls internally. */
  height: calc(100vh - 360px);
  min-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.process-console .log-line { padding: 1px 0; }
.process-console .log-empty {
  color: rgba(230,234,245,.55);
  font-style: italic;
}
.process-console .completion-message {
  color: #B7E26A;
  font-weight: 600;
  padding: 6px 0;
  display: block;
}
.process-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--c1-radius-lg);
  background: var(--c1-blue-l50);
  color: var(--c1-blue-d10);
  font-size: 13px;
  font-weight: 600;
}
.process-status .spinner {
  width: 14px; height: 14px;
  border-width: 2px;
  border-top-color: var(--c1-blue);
}

/* ---------- 360 Analytics locked preview cards ----------
   Shown on the 360 Analytics about page to users WITHOUT access: a grid of
   dashboard thumbnails, dimmed under a lock overlay (a teaser, not a link).
   These classes were referenced by 360analytics_about.html but defined nowhere
   (rendered unstyled) — defined here. */
.analytics-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--c1-s3);
  margin-bottom: var(--c1-s5);
}
.analytics-preview-card {
  position: relative;
  border: 1px solid var(--c1-card-border);
  border-radius: var(--c1-radius-lg);
  overflow: hidden;
  background: var(--c1-cadet-l80);
  aspect-ratio: 16 / 10;
}
.analytics-preview-card__thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(2px) saturate(.6); opacity: .55;
}
.analytics-preview-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, rgba(27,33,69,.18), rgba(27,33,69,.42));
  text-align: center; padding: 16px;
}
.analytics-preview-card__lock {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--c1-cadet);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.analytics-preview-card__name { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }