/* ui/support.css — the support portal. Owned by W24.

   EVERY SELECTOR IS PREFIXED `.sp-` (SHELL_CONTRACT §3.2). An unprefixed rule silently
   restyles somebody else's surface, and the last stylesheet loaded wins.

   NO CUSTOM PROPERTIES. Not one. `.ig-btn.primary { background: var(--ig-depth) }` shipped an
   INVISIBLE button — white text on a transparent background — for the entire life of the
   integration detail panel, because the variable was defined on a wrapper the panel was
   rendered outside of, and an undefined var() is invalid at computed-value time. Literal hex
   cannot do that to us. gate_support asserts this file references no var() at all.

   Loop's chrome, measured off their own product: card #FFF, 0.67px solid #E5E7EB, radius 12px,
   pad 24px. Pills 9999px. Primary fill #271257. Text links #581C87. Brand indigo #4330F5.   */

.sp { font-family: Poppins, "Nunito Sans", system-ui, sans-serif; color: #1F2937; }
.sp h3, .sp h4 { font-family: 'Sansation', 'Poppins', sans-serif; margin: 0; }

/* ---- top bar: tabs + the build you are on ---------------------------------------- */
.sp-bar { display: flex; align-items: center; justify-content: space-between;
          gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
          background: transparent; color: #6B7280; font: 600 13.5px/1 Poppins, sans-serif;
          padding: 9px 14px; border-radius: 9999px; transition: background .12s, color .12s; }
.sp-tab:hover { background: #F3F4F6; color: #271257; }
.sp-tab.on { background: #271257; color: #FFF; }
.sp-badge { font-style: normal; font-size: 11px; font-weight: 700; background: #4330F5;
            color: #FFF; border-radius: 9999px; padding: 1px 6px; }
.sp-tab.on .sp-badge { background: #FFF; color: #271257; }

.sp-build { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
            font-weight: 500; color: #6B7280; background: #F9FAFB;
            border: 0.67px solid #E5E7EB; border-radius: 9999px; padding: 5px 12px; }
.sp-build i { font-style: normal; color: #D1D5DB; }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: #1E7735; flex: none; }

/* ---- cards ------------------------------------------------------------------------ */
.sp-card { background: #FFF; border: 0.67px solid #E5E7EB; border-radius: 12px; padding: 24px; }
.sp-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.sp-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
              color: #6B7280; margin-bottom: 12px; }
.sp-hint { font-size: 12.5px; color: #6B7280; margin: 6px 0 0; }
.sp-capnote { font-size: 13px; color: #6B7280; margin: 0 0 14px; }
.sp-load, .sp-empty { background: #FFF; border: 0.67px solid #E5E7EB; border-radius: 12px;
                      padding: 24px; color: #6B7280; font-size: 14px; }
.sp-empty b { color: #1F2937; display: block; margin-bottom: 4px; font-size: 15px; }
.sp-empty p { margin: 0; }

/* ABSENCE. Visibly distinct from a real value, always. Never blank, never a zero. */
.sp-absent { color: #9CA3AF; font-style: italic; }

.sp-err { background: #FFF; border: 0.67px solid #FECACA; border-radius: 12px; padding: 24px; }
.sp-err b { color: #991B1B; }
.sp-code { font-family: ui-monospace, monospace; font-size: 12px; color: #6B7280; }

/* ---- filters (changelog) ---------------------------------------------------------- */
.sp-filters { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sp-seg { display: inline-flex; background: #F3F4F6; border-radius: 9999px; padding: 3px; gap: 2px; }
.sp-segb { border: 0; background: transparent; cursor: pointer; border-radius: 9999px;
           font: 600 12.5px/1 Poppins, sans-serif; color: #6B7280; padding: 7px 13px;
           display: inline-flex; align-items: center; gap: 5px; }
.sp-segb:hover { color: #271257; }
.sp-segb.on { background: #FFF; color: #271257; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.sp-segb i { font-style: normal; font-size: 11px; color: #9CA3AF; }
.sp-segb.on i { color: #4330F5; }
.sp-sel { border: 0.67px solid #E5E7EB; border-radius: 9999px; background: #FFF;
          font: 500 13px Poppins, sans-serif; color: #1F2937; padding: 8px 14px; cursor: pointer; }

/* ---- the changelog ---------------------------------------------------------------- */
.sp-rel { background: #FFF; border: 0.67px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.sp-relrow { display: grid; grid-template-columns: 168px 1fr; gap: 24px;
             padding: 20px 24px; border-bottom: 0.67px solid #F3F4F6; }
.sp-relrow:last-child { border-bottom: 0; }
.sp-lock { background: #FCFCFD; }
.sp-relwhen { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #6B7280; }
.sp-relprod { font-size: 12px; font-weight: 600; color: #4330F5; }
.sp-relhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sp-relbody h4 { font-size: 15px; font-weight: 600; color: #1F2937; line-height: 1.35; }
.sp-relbody p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #4B5563; max-width: 68ch; }

.sp-pill { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 9999px;
           white-space: nowrap; flex: none; }
.sp-p-live { background: #F1FCF3; color: #1E7735; }
.sp-p-coming { background: #EEF2FF; color: #4330F5; }
.sp-p-locked { background: #FFFBEB; color: #B45309; }

/* ---- knowledge base --------------------------------------------------------------- */
.sp-kbsearch { display: flex; align-items: center; gap: 10px; background: #FFF;
               border: 0.67px solid #E5E7EB; border-radius: 9999px; padding: 0 18px;
               margin-bottom: 14px; }
.sp-kbsearch svg { width: 18px; height: 18px; color: #9CA3AF; flex: none; }
.sp-kbsearch .sp-input { border: 0; padding: 14px 0; flex: 1; background: transparent; }
.sp-kbsearch .sp-input:focus { outline: none; }
.sp-x { border: 0; background: transparent; color: #9CA3AF; font-size: 20px; cursor: pointer;
        line-height: 1; padding: 0 2px; }
.sp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-chip { border: 0.67px solid #E5E7EB; background: #FFF; color: #6B7280; cursor: pointer;
           border-radius: 9999px; padding: 6px 13px; font: 500 12.5px Poppins, sans-serif; }
.sp-chip:hover { border-color: #C7D2FE; color: #271257; }
.sp-chip.on { background: #271257; border-color: #271257; color: #FFF; }

.sp-arts { display: flex; flex-direction: column; gap: 10px; }
.sp-art { background: #FFF; border: 0.67px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.sp-art.on { border-color: #C7D2FE; }
.sp-arthead { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
              background: transparent; border: 0; cursor: pointer; padding: 18px 24px; }
.sp-arthead:hover { background: #FAFAFB; }
.sp-arthead h4 { font-size: 14.5px; font-weight: 600; color: #1F2937; line-height: 1.4; }
.sp-answer { margin: 4px 0 0; font-size: 13px; color: #4B5563; line-height: 1.5; }
.sp-art mark { background: #FEF3C7; color: inherit; border-radius: 3px; padding: 0 1px; }
.sp-arttag { font-size: 12px; font-weight: 600; color: #4330F5; white-space: nowrap; flex: none; }
.sp-caret { width: 8px; height: 8px; border-right: 1.6px solid #9CA3AF;
            border-bottom: 1.6px solid #9CA3AF; transform: rotate(45deg); flex: none;
            transition: transform .15s; margin-top: -4px; }
.sp-art.on .sp-caret, .sp-tik.on .sp-caret { transform: rotate(225deg); margin-top: 3px; }
.sp-artbody { padding: 0 24px 22px; border-top: 0.67px solid #F3F4F6; margin-top: 2px; }
.sp-artbody p { font-size: 13.5px; line-height: 1.65; color: #374151; max-width: 72ch;
                margin: 14px 0 0; }
.sp-artfoot { margin-top: 16px; font-size: 12.5px; color: #6B7280; }

/* ---- the form --------------------------------------------------------------------- */
.sp-f { display: block; margin-bottom: 20px; }
.sp-f > span { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; }
.sp-opt { font-style: normal; font-weight: 400; color: #9CA3AF; font-size: 12px; margin-left: 4px; }
.sp-input { width: 100%; border: 0.67px solid #E5E7EB; border-radius: 10px; padding: 12px 14px;
            font: 400 13.5px Poppins, sans-serif; color: #1F2937; background: #FFF; }
.sp-input:focus { outline: none; border-color: #4330F5; box-shadow: 0 0 0 3px rgba(67,48,245,.09); }
.sp-ta { resize: vertical; min-height: 110px; line-height: 1.6; }
.sp-form .sp-sel { width: 100%; border-radius: 10px; padding: 12px 14px; }
.sp-file { font: 400 13px Poppins, sans-serif; color: #6B7280; }
.sp-sevs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sp-sev { display: flex; flex-direction: column; gap: 2px; border: 0.67px solid #E5E7EB;
          border-radius: 10px; padding: 12px 14px; cursor: pointer; position: relative; }
.sp-sev:hover { border-color: #C7D2FE; }
.sp-sev b { font-size: 13px; font-weight: 600; color: #1F2937; }
.sp-sev i { font-style: normal; font-size: 11.5px; color: #6B7280; line-height: 1.45; }
.sp-sev input { position: absolute; opacity: 0; }
.sp-sev:has(input:checked) { border-color: #4330F5; background: #F5F3FF; }

.sp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-btn { border-radius: 9999px; font: 600 13.5px Poppins, sans-serif; cursor: pointer;
          padding: 0 22px; height: 44px; border: 0.67px solid transparent; }
.sp-primary { background: #271257; color: #FFF; }
.sp-primary:hover { background: #1A0B3D; }
.sp-primary:disabled { background: #9CA3AF; cursor: default; }
.sp-ghost { background: #FFF; color: #581C87; border-color: #E5E7EB; }
.sp-ghost:hover { border-color: #C7D2FE; }
.sp-link { background: none; border: 0; padding: 0; cursor: pointer; color: #581C87;
           font: 600 inherit Poppins, sans-serif; text-decoration: underline;
           text-underline-offset: 2px; }

/* the auto-captured panel — shown, never hidden */
.sp-cap dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.sp-cap dt { font-size: 12px; color: #6B7280; }
.sp-cap dd { margin: 0; font-size: 12.5px; font-weight: 500; color: #1F2937; word-break: break-word; }

/* confirmation */
.sp-sent { text-align: center; max-width: 520px; margin: 0 auto; }
.sp-tick { width: 44px; height: 44px; border-radius: 50%; background: #F1FCF3; color: #1E7735;
           display: flex; align-items: center; justify-content: center; font-size: 22px;
           margin: 0 auto 14px; }
.sp-sent h3 { font-size: 19px; margin-bottom: 12px; }
.sp-sent p { font-size: 13.5px; color: #4B5563; line-height: 1.6; margin: 0 0 8px; }
.sp-ref { display: inline-flex; align-items: center; gap: 10px; background: #F9FAFB;
          border: 0.67px solid #E5E7EB; border-radius: 10px; padding: 10px 10px 10px 16px;
          margin-bottom: 14px; }
.sp-ref b { font-family: ui-monospace, monospace; font-size: 16px; letter-spacing: .5px; color: #271257; }
.sp-copy { height: 32px; padding: 0 14px; font-size: 12.5px; }
.sp-sent .sp-actions { justify-content: center; margin-top: 18px; }

/* ---- my tickets ------------------------------------------------------------------- */
.sp-tix { display: flex; flex-direction: column; gap: 10px; }
.sp-tik { background: #FFF; border: 0.67px solid #E5E7EB; border-radius: 12px; overflow: hidden; }
.sp-tik.on { border-color: #C7D2FE; }
.sp-tikhead { display: grid; grid-template-columns: 118px 1fr auto auto 12px; align-items: center;
              gap: 16px; width: 100%; text-align: left; background: transparent; border: 0;
              cursor: pointer; padding: 16px 24px; }
.sp-tikhead:hover { background: #FAFAFB; }
.sp-tikref { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; color: #271257; }
.sp-tiksub { font-size: 13.5px; color: #1F2937; }
.sp-tikwhen { font-size: 12.5px; color: #6B7280; }
.sp-st { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px;
         white-space: nowrap; background: #F3F4F6; color: #374151; }
.sp-st-received { background: #EEF2FF; color: #4330F5; }
.sp-st-in-progress { background: #FFFBEB; color: #B45309; }
.sp-st-resolved, .sp-st-closed { background: #F1FCF3; color: #1E7735; }
.sp-tikbody { padding: 4px 24px 22px; border-top: 0.67px solid #F3F4F6; }
.sp-tikdesc { font-size: 13.5px; line-height: 1.65; color: #374151; max-width: 72ch;
              margin: 16px 0; white-space: pre-wrap; }
.sp-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 18px; }
.sp-kv dt { font-size: 12px; color: #6B7280; }
.sp-kv dd { margin: 0; font-size: 12.5px; color: #1F2937; }
.sp-attach { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; }
.sp-attach a { color: #581C87; font-weight: 600; }
.sp-attach i { font-style: normal; color: #9CA3AF; font-size: 12px; }
.sp-hist { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid #EEF2FF; }
.sp-hist li { position: relative; padding-bottom: 14px; }
.sp-hist li::before { content: ""; position: absolute; left: -23px; top: 5px; width: 8px;
                      height: 8px; border-radius: 50%; background: #4330F5; }
.sp-hist b { font-size: 13px; color: #1F2937; margin-right: 8px; }
.sp-hist span { font-size: 12px; color: #9CA3AF; }
.sp-hist p { margin: 3px 0 0; font-size: 12.5px; color: #4B5563; line-height: 1.55; }

/* ---- contact & status ------------------------------------------------------------- */
.sp-am { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.sp-ava { width: 42px; height: 42px; border-radius: 50%; background: #EEF2FF; color: #4330F5;
          display: flex; align-items: center; justify-content: center; flex: none;
          font: 600 14px Poppins, sans-serif; }
.sp-am b { display: block; font-size: 14.5px; color: #1F2937; }
.sp-am a, .sp-am span { font-size: 13px; }
.sp-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #1F2937;
             margin-bottom: 14px; }

/* THE COMMITMENTS CARD. "No" is a legitimate answer and it is styled like one — a plain,
   readable statement, not an error and not a warning. We are not embarrassed by it. */
.sp-commit { margin-top: 24px; }
.sp-crows { display: flex; flex-direction: column; }
.sp-crow { display: grid; grid-template-columns: 74px 1fr; gap: 18px; padding: 16px 0;
           border-top: 0.67px solid #F3F4F6; }
.sp-crow:first-child { border-top: 0; padding-top: 0; }
.sp-cstate { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
             padding-top: 2px; }
.sp-c-yes .sp-cstate { color: #1E7735; }
.sp-c-no .sp-cstate { color: #B45309; }
.sp-c-partial .sp-cstate { color: #6B7280; }
.sp-c-unknown .sp-cstate { color: #9CA3AF; }
.sp-crow b { display: block; font-size: 14px; color: #1F2937; }
.sp-claim { display: block; font-size: 13px; color: #4330F5; font-weight: 500; margin-top: 2px; }
.sp-crow p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #4B5563; max-width: 74ch; }

@media (max-width: 1100px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-relrow { grid-template-columns: 1fr; gap: 10px; }
  .sp-relwhen { flex-direction: row; align-items: center; gap: 10px; }
  .sp-tikhead { grid-template-columns: 1fr auto; row-gap: 6px; }
  .sp-sevs { grid-template-columns: 1fr; }
}

/* ---- status / system health -------------------------------------------------------
   Green is EARNED here: every dot is a check that ran. sp-s-never is deliberately grey,
   never green — a green light on a system we have never checked is the lie this page
   exists to avoid. Green on a monitored row means a real observation: a completed pull
   (or the demo controller's simulated one, which says so on its own hover).             */
.sp-stat { display: flex; flex-direction: column; gap: 24px; }
.sp-big { display: flex; align-items: center; gap: 20px; }
/* The Loop mark on the headline (W109). Height-constrained so the card, not the asset,
   decides the size — /ui/loop_pearl.png is a 512px square. */
.sp-biglogo { width: 44px; height: 44px; flex: none; border-radius: 10px; }
.sp-biginfo { flex: 1; }
.sp-big h3 { font-size: 20px; color: #1F2937; }
.sp-big .sp-hint { margin-top: 4px; }
.sp-biglight { width: 46px; height: 46px; border-radius: 50%; display: flex; flex: none;
               align-items: center; justify-content: center; }
.sp-bigdot { width: 14px; height: 14px; border-radius: 50%; }
.sp-big-ok .sp-biglight { background: #F1FCF3; }
.sp-big-ok .sp-bigdot { background: #1E7735; box-shadow: 0 0 0 4px rgba(30,119,53,.12); }
.sp-big-degraded .sp-biglight { background: #FFFBEB; }
.sp-big-degraded .sp-bigdot { background: #B45309; box-shadow: 0 0 0 4px rgba(180,83,9,.12); }
.sp-big-down .sp-biglight { background: #FEF2F2; }
.sp-big-down .sp-bigdot { background: #B91C1C; box-shadow: 0 0 0 4px rgba(185,28,28,.12); }

.sp-comps { display: flex; flex-direction: column; }
.sp-comp { display: grid; grid-template-columns: 10px 1fr auto; align-items: start; gap: 14px;
           padding: 14px 0; border-top: 0.67px solid #F3F4F6; }
.sp-comp:first-child { border-top: 0; padding-top: 0; }
.sp-comp b { font-size: 13.5px; color: #1F2937; }
.sp-comp p { margin: 2px 0 0; font-size: 12.5px; color: #6B7280; line-height: 1.5; }
.sp-cval { font-size: 12.5px; font-weight: 500; color: #6B7280; white-space: nowrap; }
.sp-cdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: #D1D5DB; }
.sp-s-ok .sp-cdot { background: #1E7735; }
.sp-s-degraded .sp-cdot { background: #B45309; }
.sp-s-down .sp-cdot { background: #B91C1C; }
.sp-s-never .sp-cdot { background: #D1D5DB; }
.sp-mt { margin-top: 22px; }

/* The specific APIs behind a monitored card (HL-127). Indented under their card, same
   dot vocabulary as every other row — sp-s-never stays grey here too, for the same
   reason: a green light on an API we have never pulled from is the lie this page
   exists to avoid. The toggle is a count, not a claim. */
.sp-apitog { border: 0.67px solid #E5E7EB; background: #FFFFFF; color: #6B7280;
             font: 500 11px/1 'Poppins', sans-serif; border-radius: 999px;
             padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.sp-apitog:hover { border-color: #C7CBD1; color: #1F2937; }
.sp-apis { border-top: 0.67px dashed #F3F4F6; margin-left: 24px; }
.sp-api { display: grid; grid-template-columns: 8px 1fr auto; align-items: start;
          gap: 12px; padding: 9px 0; border-top: 0.67px solid #F8F9FA; }
.sp-api:first-child { border-top: 0; }
.sp-api b { font-size: 12.5px; font-weight: 500; color: #374151; }
.sp-api .sp-cdot { width: 7px; height: 7px; margin-top: 5px; }
.sp-api .sp-cval { font-size: 11.5px; }
.sp-ainame { min-width: 0; }
.sp-ainame p { margin: 1px 0 0; font-size: 11px; color: #9CA3AF; line-height: 1.45; }

/* Monitored applications (W109) — the vendor's real mark beside its name. The marks are
   window.JUNIOR_LOGOS' 200×56 canvases (or a monogram fallback), sized to a chip the way
   qi.css does: the row, not the asset, decides the height. */
.sp-iname { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Fixed-width chip so every row's NAME starts in the same column, mark or monogram. */
.sp-ilogo { width: 72px; height: 20px; flex: none; display: inline-flex;
            align-items: center; justify-content: flex-start; }
.sp-ilogo svg, .sp-ilogo img { height: 20px; width: auto; max-width: 72px; display: block; }
.sp-imono { width: 20px; height: 20px; display: inline-flex; align-items: center;
            justify-content: center; border-radius: 5px; background: #EEF2FF;
            color: #3730A3; font-size: 9px; font-weight: 700; font-style: normal; }
.sp-status { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: #1F2937;
             margin-bottom: 14px; }
.sp-status .sp-cdot { margin-top: 0; }

.sp-uphead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sp-upval { font-family: 'Sansation', 'Poppins', sans-serif; font-size: 30px; font-weight: 700;
            color: #271257; letter-spacing: -.5px; }
.sp-upval.sp-absent { font-size: 17px; font-weight: 600; }
/* sp-upbar, NOT sp-bar. `.sp-bar` was already the tab bar at the top of this file, and the
   second rule won: the tab bar rendered as a solid grey block, on the customer's screen.
   Prefixing every selector protects you from the OTHER modules. It does not protect you from
   yourself, and nothing but looking at it would have caught this. */
/* Fixed-width bars, left-aligned. `flex: 1` made a single recorded day render as one
   full-width orange slab across the card — which reads as "the whole month was degraded"
   when it means "we have checked on one day". The chart must not say something the data
   does not. */
.sp-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-bottom: 12px; }
.sp-upbar { width: 10px; flex: none; border-radius: 2px; background: #D1D5DB; display: block; }
.sp-upbar.ok { background: #1E7735; }
.sp-upbar.part { background: #B45309; }
.sp-upbar.bad { background: #B91C1C; }
.sp-nobars { font-size: 12.5px; margin: 0 0 12px; }
/* The method note. Small, grey, and never removed. */
.sp-method { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #6B7280;
             border-left: 2px solid #E5E7EB; padding-left: 12px; }

.sp-src { padding: 12px 0; border-top: 0.67px solid #F3F4F6; }
.sp-src b { display: block; font-size: 12px; font-weight: 600; color: #6B7280; }
.sp-src span { display: block; font-size: 13.5px; color: #1F2937; margin-top: 2px; }
.sp-src i { display: block; font-style: normal; font-size: 11.5px; color: #9CA3AF; margin-top: 2px; }

.sp-artfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-sep { color: #D1D5DB; }


/* ---- THE TRUST CENTRE LINK -------------------------------------------------------
   Replaces a list of absences with a door to the evidence. Namespaced .sp- like the
   rest of this file.

   LITERAL HEX, NOT var() - and that is this FILE's rule, enforced by gate_support ("no
   custom properties in ui/support.css"). I wrote var() first because integrations.css
   uses tokens, and got a deserved red: a convention is a property of the file you are
   in, not of the last file you edited. #271257 is Russian Violet, the anchor, and it is
   already the accent this file uses 13 times.                                       */
.sp-trust { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E5E7EB; }
.sp-trust b { display: block; font-size: 13px; color: #1F2937; }
.sp-trust p { margin: 3px 0 8px; font-size: 12.5px; line-height: 1.5; color: #6B7280; }
.sp-trust a { color: #271257; }