/* ============================================================
   CISO Consulting — theme
   ------------------------------------------------------------
   Repoints the variables the existing stylesheets already use at
   the brand palette in brand.css. Load this AFTER admin.css and
   portal.css; it overrides, it does not replace.

   Doing it as an override rather than editing 111 variable
   definitions across two files means nothing else has to change,
   and reverting is a matter of removing one <link>.

   Two systems are covered because the portal has two:
     portal.css  --bg / --fg / --accent      [data-theme]
     admin.css   --a-bg / --a-fg / --a-accent [data-admin-theme]

   Gold is the accent. It is a fill colour — #E5A833 on white is
   2.10:1 and fails at any text size — so anywhere a variable
   feeds text, the darker gold stop is used instead.
   ============================================================ */

/* ------------------------------------------------------------
   Fallbacks.

   Every var() below carries a literal, e.g. var(--gold-400, #E5A833).
   An undefined custom property makes the whole declaration invalid and the
   browser discards it — which is exactly what happened in the admin panel's
   second <head>, where this file loaded without brand.css. Every colour
   silently reverted to admin.css and nothing indicated why.

   With a literal fallback, a missing brand.css costs nothing.
   ------------------------------------------------------------ */

/* ── Public site + customer portal — light (white base) ────── */
:root,
[data-theme="light"] {
  --bg:            var(--n-0, #FFFFFF);
  --bg-2:          var(--n-50, #F7F8FA);
  --bg-card:       var(--n-0, #FFFFFF);
  --bg-glass:      rgba(255, 255, 255, 0.94);

  --fg:            var(--n-900, #12161B);
  --fg-2:          var(--n-700, #333A45);
  --fg-muted:      var(--n-600, #4B5361);
  --fg-subtle:     var(--n-500, #6B7280);   /* drop 730: n-400 was 2.6:1 on white */

  --accent:        var(--gold-400, #E5A833);
  --accent-text:   #8A5C0A;   /* drop 731: gold for text on light backgrounds (AA) */
  --accent-2:      var(--gold-500, #C98E1F);
  --accent-light:  rgba(229, 168, 51, 0.10);
  --accent-rgb:    229, 168, 51;
  --accent-b:      var(--blue-400, #0068D7);
  --accent-b-rgb:  0, 104, 215;

  /* The old palette carried purple, amber and lime as decorative
     accents. Folding them into the two brand hues stops the
     interface drifting back to six colours. */
  --accent-purple:     var(--blue-600, #013678);
  --accent-purple-rgb: 1, 54, 120;
  --accent-amber:      var(--gold-500, #C98E1F);
  --accent-amber-rgb:  201, 142, 31;
  --accent-green:      var(--gold-600, #A5731A);
  --accent-green-rgb:  165, 115, 26;

  --grad: linear-gradient(135deg, var(--gold-300, #EDC155) 0%, var(--gold-400, #E5A833) 55%, var(--gold-500, #C98E1F) 100%);

  --border:        rgba(18, 22, 27, 0.09);
  --border-2:      rgba(18, 22, 27, 0.16);

  --shadow-sm:     0 1px 2px rgba(18, 22, 27, 0.05);
  --shadow:        0 2px 8px rgba(18, 22, 27, 0.07);
  --shadow-lg:     0 8px 28px rgba(18, 22, 27, 0.10);
  --shadow-glow:   0 0 0 3px rgba(229, 168, 51, 0.22);
}

/* ── Public site + customer portal — dark (black base) ─────── */
[data-theme="dark"] {
  --bg:            var(--n-1000, #000000);
  --bg-2:          var(--n-950, #0A0C0F);
  --bg-card:       var(--n-950, #0A0C0F);
  --bg-glass:      rgba(0, 0, 0, 0.90);

  --fg:            var(--n-50, #F7F8FA);
  --fg-2:          var(--n-300, #C9CED6);
  --fg-muted:      var(--n-400, #9AA1AD);
  --fg-subtle:     var(--n-500, #6B7280);

  /* Gold at full saturation glares against pure black; the 300
     stop holds the same hue with the intensity taken off. */
  --accent:        var(--gold-300, #EDC155);
  --accent-text:   var(--gold-300, #EDC155);
  --accent-2:      var(--gold-200, #F5D888);
  --accent-light:  rgba(229, 168, 51, 0.14);
  --accent-rgb:    237, 193, 85;
  --accent-b:      var(--blue-300, #4B92DE);
  --accent-b-rgb:  75, 146, 222;

  --accent-purple:     var(--blue-300, #4B92DE);
  --accent-purple-rgb: 75, 146, 222;
  --accent-amber:      var(--gold-300, #EDC155);
  --accent-amber-rgb:  237, 193, 85;
  --accent-green:      var(--gold-200, #F5D888);
  --accent-green-rgb:  245, 216, 136;

  --grad: linear-gradient(135deg, var(--gold-200, #F5D888) 0%, var(--gold-300, #EDC155) 55%, var(--gold-400, #E5A833) 100%);

  --border:        rgba(255, 255, 255, 0.10);
  --border-2:      rgba(255, 255, 255, 0.17);

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:        0 2px 10px rgba(0, 0, 0, 0.55);
  --shadow-lg:     0 10px 34px rgba(0, 0, 0, 0.62);
  --shadow-glow:   0 0 0 3px rgba(229, 168, 51, 0.26);
}

/* ── Admin panel — dark is its default ─────────────────────── */
:root,
[data-admin-theme="dark"] {
  --a-bg:        var(--n-1000, #000000);
  --a-bg-2:      var(--n-950, #0A0C0F);
  --a-bg-3:      var(--n-900, #12161B);
  --a-bg-card:   var(--n-950, #0A0C0F);
  --a-card:      var(--n-950, #0A0C0F);

  --a-border:    rgba(255, 255, 255, 0.09);
  --a-border-2:  rgba(255, 255, 255, 0.16);

  --a-fg:        var(--n-50, #F7F8FA);
  --a-fg-2:      var(--n-400, #9AA1AD);
  --a-fg-3:      var(--n-400, #9AA1AD);   /* drop 730: n-500 was 4.0:1 on the dark card — below WCAG AA for small text */

  --a-accent:    var(--gold-300, #EDC155);
  --a-accent-2:  var(--gold-200, #F5D888);
  --a-accent-l:  rgba(229, 168, 51, 0.13);
  --a-accent-r:  237, 193, 85;

  --a-success:   #4ADE9B;
  --a-danger:    #F87171;
  --a-warning:   #F0B54A;
  --a-info:      var(--blue-300, #4B92DE);
}

/* ── Admin panel — light ───────────────────────────────────── */
[data-admin-theme="light"] {
  --a-bg:        var(--n-50, #F7F8FA);
  --a-bg-2:      var(--n-100, #EFF1F4);
  --a-bg-3:      var(--n-200, #E2E5EA);
  --a-bg-card:   var(--n-0, #FFFFFF);
  --a-card:      var(--n-0, #FFFFFF);

  --a-border:    rgba(18, 22, 27, 0.09);
  --a-border-2:  rgba(18, 22, 27, 0.16);

  --a-fg:        var(--n-900, #12161B);
  --a-fg-2:      var(--n-700, #333A45);
  --a-fg-3:      #565E6B;   /* drop 1018: muted text 5.4:1 on the light page (#6B7280 was 4.3:1) */

  --a-accent:    #946510;   /* drop 1018: readable gold on white (6.1:1) */
  --a-accent-2:  #7E560D;
  --a-accent-l:  rgba(229, 168, 51, 0.12);
  --a-accent-r:  201, 142, 31;

  --a-success:   #12805C;
  --a-danger:    #B42318;
  --a-warning:   #9A6300;
  --a-info:      var(--blue-600, #013678);
}

/* ------------------------------------------------------------
   Text on gold.

   The one mistake this palette invites is white text on a gold
   button — 2.10:1, effectively unreadable. Any element filled
   with the accent gets near-black text instead.
   ------------------------------------------------------------ */
.btn-primary,
.a-btn-primary,
.badge-accent,
.pill-accent,
[class*="btn"][style*="--accent"],
button.primary {
  color: var(--n-900, #12161B);
}

[data-theme="dark"] .btn-primary,
[data-admin-theme="dark"] .a-btn-primary,
[data-theme="dark"] .badge-accent,
[data-theme="dark"] .pill-accent {
  color: var(--n-1000, #000000);
}

/* Links carry the accent as text, so they take the darker stop
   rather than the fill stop. */
a,
.link-accent {
  color: var(--gold-700, #7D5715);
}

[data-theme="dark"] a,
[data-admin-theme="dark"] a,
[data-theme="dark"] .link-accent {
  color: var(--gold-300, #EDC155);
}

/* Drop 1078: the hover shade is for plain text links only. A link styled as a button, pill or card carries its own
   colors; the old a:hover outranked them and turned button text dark gold on the gold or navy fill. */
a:where(:not([class])):hover,
.link-accent:hover {
  color: var(--gold-800, #553B0E);
}

[data-theme="dark"] a:where(:not([class])):hover,
[data-admin-theme="dark"] a:where(:not([class])):hover,
[data-theme="dark"] .link-accent:hover {
  color: var(--gold-200, #F5D888);
}

/* Drop 651: the expert application form (public site). */
.ex-otp { display: grid; gap: .8rem; max-width: 460px; margin-bottom: 1.2rem; } .ex-otp .btn { justify-self: start; }
.ex-set { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.ex-set > legend { margin-bottom: .5rem; padding: 0; }
.ex-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem .9rem; }
.ex-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; margin: .35rem 0; cursor: pointer; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.ex-check input { margin-top: .25rem; flex: none; accent-color: var(--accent, #C98E1F); }
.ex-check:has(input:checked) { border-color: var(--accent, #C98E1F); background: rgba(201, 142, 31, .06); }
form > .ex-check { max-width: 900px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; inset-inline-start: 0; }

/* Drop 652: the public experts page. */
.xs-filters { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: 1.6rem; } .xs-filters .field-input { width: auto; min-width: 220px; }
.xs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; }
.xs-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; transition: transform .2s, box-shadow .2s; }
.xs-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.xs-top { display: flex; gap: .9rem; align-items: center; }
.xs-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--border); }
.xs-initial { display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; color: var(--accent, #C98E1F); background: rgba(201,142,31,.1); }
.xs-name { font-size: 1.05rem; margin: 0; color: var(--fg); } .xs-type { font-size: .78rem; color: var(--fg-muted); }
.xs-head { font-weight: 600; margin: 0; color: var(--fg); } .xs-bio { margin: 0; color: var(--fg-muted); font-size: .9rem; line-height: 1.6; }
.xs-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.xs-tags li { font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: rgba(201,142,31,.1); color: var(--accent, #C98E1F); }
.xs-certs, .xs-langs { margin: 0; font-size: .8rem; color: var(--fg-muted); }
.xs-empty { color: var(--fg-muted); } .xs-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.4rem 1.6rem; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-card); }
.xs-cta p { margin: 0; font-weight: 600; }
/* Drop 653: pages on the experts list. */
.xs-pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; margin-top: 1.8rem; }
.xs-pg { min-width: 2.4rem; text-align: center; padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--fg); font-weight: 600; font-size: .88rem; text-decoration: none; }
.xs-pg:hover { border-color: var(--accent, #C98E1F); } .xs-pg.is-on { background: var(--accent, #C98E1F); border-color: var(--accent, #C98E1F); color: #fff; }
.xs-gap { color: var(--fg-muted); padding: 0 .2rem; } .xs-count { color: var(--fg-muted); font-size: .8rem; margin-inline-start: .6rem; }
/* Drop 654: one expert's page. */
.xs-name a { color: inherit; text-decoration: none; } .xs-name a:hover { color: var(--accent, #C98E1F); }
.xs-more { margin-top: auto; font-weight: 700; font-size: .85rem; color: var(--accent, #C98E1F); text-decoration: none; }
.xd-top { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; } .xd-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--border); }
.xd-photo.xs-initial { display: grid; place-items: center; font-size: 2.6rem; font-weight: 800; }
.xd-name { margin: .2rem 0; } .xd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 2.2rem; align-items: start; }
@media (max-width: 900px) { .xd-grid { grid-template-columns: 1fr; } }
.xd-h2 { font-size: 1rem; margin: 1.4rem 0 .6rem; color: var(--fg); } .xd-grid > div > .xd-h2:first-child { margin-top: 0; }
.xd-bio { color: var(--fg-muted); line-height: 1.8; margin: 0; }
.xd-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem 1.5rem; position: sticky; top: 90px; }
.xd-form .xd-h2 { margin-top: 0; } .xd-form .field-group { margin-bottom: .8rem; }
.xd-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }   /* drop 680: no off-screen offset — it made right-to-left pages scroll sideways */
/* Drop 655: one partner's page. */
.pd-logo { width: 120px; height: 120px; border-radius: 22px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; flex: none; }
.pd-logo img { max-width: 88%; max-height: 88%; object-fit: contain; } .pd-meta { color: var(--fg-muted); font-size: .9rem; margin: .3rem 0 0; }
/* Drop 662: the expected rate — amount, currency, basis on one line. */
.ex-rate-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 1.4fr) minmax(140px, 1fr); gap: .8rem; }
@media (max-width: 640px) { .ex-rate-row { grid-template-columns: 1fr; } }
/* Drop 665: privacy choices. */
.pv-wrap { display: grid; gap: 1.2rem; } .pv-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem 1.6rem; }
.pv-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .8rem; } .pv-row .field-input { flex: 1 1 260px; }
.pv-list { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .5rem; } .pv-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 12px; }
.pv-list li span { display: block; color: var(--fg-muted); font-size: .8rem; } .pv-note { color: var(--fg-muted); font-size: .82rem; margin-top: .6rem; } .pv-mail { color: var(--fg-muted); font-size: .85rem; }
.pv-form-note { padding: .6rem 1rem; font-size: .78rem; color: var(--fg-muted); line-height: 1.6; } .pv-form-note p { margin: .4rem 0 0; } .pv-form-note a { color: var(--accent, #C98E1F); }
/* Drop 666: experts on the client's project. */
.px-card { margin-top: 1.4rem; } .px-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.px-item { border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; display: grid; gap: .55rem; align-content: start; }
.px-top { display: flex; gap: .8rem; align-items: center; } .px-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.px-init { display: grid; place-items: center; background: var(--bg-2); font-weight: 800; font-size: 1.2rem; } .px-sub { display: block; color: var(--fg-muted); font-size: .78rem; }
.px-head { margin: 0; font-size: .86rem; color: var(--fg-muted); } .px-link { font-size: .82rem; font-weight: 700; color: var(--accent, #C98E1F); text-decoration: none; }
.px-rate { display: grid; gap: .45rem; } .px-scale { display: flex; gap: .3rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0; } .px-scale label { cursor: pointer; }
.px-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; } .px-scale span { display: inline-grid; place-items: center; min-width: 2.2rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 10px; font-weight: 700; font-size: .85rem; }
.px-scale input:checked + span { background: var(--accent, #C98E1F); border-color: var(--accent, #C98E1F); color: #fff; }
.px-card .px-scale label > span { display: inline-grid; place-items: center; min-width: 2.2rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 10px; font-weight: 700; font-size: .85rem; background: var(--bg-card); }
.px-card .px-scale label > input:checked + span { background: var(--accent, #C98E1F); border-color: var(--accent, #C98E1F); color: #fff; }
.px-card .px-scale label > input:focus-visible + span { outline: 2px solid var(--accent, #C98E1F); outline-offset: 2px; }
/* Drop 673: expert workspace. */
.xw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.xw-proj { display: grid; gap: .4rem; align-content: start; } .xw-proj.is-closed { opacity: .75; } .xw-top { display: flex; justify-content: space-between; gap: .6rem; align-items: start; }
.xw-badge { background: var(--accent, #C98E1F); color: #fff; border-radius: 999px; padding: .1rem .6rem; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.xw-lock { font-size: .85rem; color: var(--fg-muted); } .xw-note { margin-top: .6rem; font-size: .8rem; }
.xw-thread { display: grid; gap: .6rem; margin-bottom: .9rem; max-height: 420px; overflow-y: auto; padding-inline-end: .3rem; }
.xw-msg { max-width: 78%; padding: .6rem .85rem; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border); }
.xw-msg.is-me { margin-inline-start: auto; background: color-mix(in srgb, var(--accent, #C98E1F) 10%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent, #C98E1F) 40%, transparent); }
.xw-msg p { margin: .25rem 0 0; line-height: 1.6; } .xw-who { font-size: .72rem; color: var(--fg-muted); } .xw-send { display: grid; gap: .5rem; }
/* Drop 675: expert and partner homes. */
.eh-att { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.eh-count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--accent, #C98E1F); color: #fff; font-size: .78rem; margin-inline-start: .4rem; }
.eh-clear { color: var(--fg-muted); } .eh-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .45rem; }
.eh-item a { display: flex; align-items: center; gap: .7rem; padding: .65rem .9rem; border-radius: 12px; border: 1px solid var(--border); color: var(--fg); text-decoration: none; }
.eh-item a:hover, .eh-item a:focus-visible { border-color: var(--accent, #C98E1F); outline: none; } .eh-item span:nth-child(2) { flex: 1; }
.eh-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .eh-item.is-bad .eh-dot { background: #dc2626; } .eh-item.is-warn .eh-dot { background: #d97706; } .eh-item.is-ok .eh-dot { background: #16a34a; }
.eh-go { color: var(--fg-muted); }
.eh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.eh-tile { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); text-decoration: none; color: var(--fg); }
.eh-tile:hover { border-color: var(--accent, #C98E1F); } .eh-l { font-size: .78rem; color: var(--fg-muted); } .eh-v { font-size: 1.7rem; font-weight: 800; } .eh-v small { font-size: .8rem; font-weight: 600; } .eh-money { font-size: 1.15rem; } .eh-s { font-size: .74rem; color: var(--accent, #C98E1F); font-weight: 700; }
.eh-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 900px) { .eh-cols { grid-template-columns: 1fr; } }
.eh-rows { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; } .eh-rows li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.eh-rows li:last-child { border-bottom: 0; } .eh-rows a, .eh-rows li > span:first-child { display: grid; color: var(--fg); text-decoration: none; min-width: 0; } .eh-rows small { color: var(--fg-muted); font-size: .76rem; }
.eh-rows li > span:last-child { color: var(--fg-muted); font-size: .8rem; white-space: nowrap; } .eh-none { color: var(--fg-muted); }
.eh-bar { width: 90px; height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; flex: none; } .eh-bar i { display: block; height: 100%; background: var(--accent, #C98E1F); }
/* Drop 683: signed copies of the services agreement. */
.xa-copies { list-style: none; padding: 0; margin: .6rem 0 1rem; display: grid; gap: .5rem; } .xa-copies li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 12px; }
.xa-copies li > span { font-weight: 700; min-width: 12rem; } .xa-up { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; } .xa-up .field-label { flex-basis: 100%; }
/* Drop 688: executive summary. */
.ex-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ex-score.is-good, .ex-fw .is-good { color: #16a34a; } .ex-score.is-mid, .ex-fw .is-mid { color: #d97706; } .ex-score.is-low, .ex-fw .is-low { color: #dc2626; }
.ex-fw { padding: .55rem 0; border-bottom: 1px solid var(--border); } .ex-fw:last-child { border-bottom: 0; } .ex-fw-top { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .3rem; }
.ex-bar i.is-good { background: #16a34a; } .ex-bar i.is-mid { background: #d97706; } .ex-bar i.is-low { background: #dc2626; }
.ex-risk { display: inline-grid; place-items: center; min-width: 2rem; height: 1.6rem; border-radius: 8px; font-weight: 800; color: #fff; } .ex-risk.is-low { background: #dc2626; } .ex-risk.is-mid { background: #d97706; } .ex-risk.is-good { background: #16a34a; }
.ex-dig { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }