/* ============================================================
   NU Result Homepage — Bangladesh Newspaper Directory design system
   Light, glassmorphic UI · English · system fonts · green #06694d + red accent
   Fully scoped under .nrh-root. Result grids 2-up, card details vertical.
   ============================================================ */

.nrh-root {
  --green: #06694d;
  --green-soft: #0c8a64;
  --green-ink: #0a5e44;
  --green-dark: #0a5e44;
  --green-mid: #0c8a64;
  /* Accent handed to an embedded checker (e.g. NU Latest Result). Follows
     --green, which the admin colour overrides inline at render time. */
  --nrh-accent: var(--green);
  --red: #e23b46;
  --danger: #e23b46;
  --ink: #18222f;
  --text: #18222f;
  --body: #3a4654;
  --muted: #5a6a7d;
  --hint: #7b8799;
  --line: rgba(24, 34, 47, 0.09);
  --line-soft: rgba(24, 34, 47, 0.07);
  --border: rgba(24, 34, 47, 0.09);
  --page: #f2f5f9;
  --card: #ffffff;
  --glass: rgba(255, 255, 255, 0.86);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 4px rgba(24, 34, 47, 0.06), 0 1px 2px rgba(24, 34, 47, 0.04);
  --shadow: 0 12px 26px -16px rgba(24, 34, 47, 0.26), 0 4px 10px rgba(24, 34, 47, 0.06);
  --shadow-lg: 0 40px 80px -30px rgba(24, 34, 47, 0.42);
  --shadow-card: var(--shadow-sm);
  --shadow-md: var(--shadow);

  --grad: linear-gradient(135deg, var(--green) 0%, var(--green-soft) 100%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  position: relative;
  font-family: var(--font);
  color: var(--ink);
  background: none;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: clip;
}

.nrh-root *,
.nrh-root *::before,
.nrh-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nrh-root [hidden] { display: none !important; }
.nrh-root a { text-decoration: none; }
.nrh-root svg { display: inline-block; vertical-align: middle; }
.nrh-root h1, .nrh-root h2, .nrh-root h3, .nrh-root h4 { color: var(--ink); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }

.nrh-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0; }

/* ---- Ambient background blobs ---- */

/* ---- Reveal on scroll ---- */
.nrh-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.nrh-reveal.nrh-in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.05s; } .d2 { transition-delay: 0.1s; } .d3 { transition-delay: 0.15s; }
.d4 { transition-delay: 0.2s; } .d5 { transition-delay: 0.25s; } .d6 { transition-delay: 0.3s; }

/* ============================================================
   BUTTONS
   ============================================================ */
.nrh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 15px; cursor: pointer;
  padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.nrh-btn svg { width: 17px; height: 17px; }
.nrh-btn-lg { padding: 14px 26px; font-size: 16px; }
.nrh-btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.nrh-btn-block { width: 100%; }
.nrh-btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 16px -7px rgba(6, 105, 77, 0.55); }
.nrh-btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(6, 105, 77, 0.6); }
.nrh-btn-primary:disabled { filter: grayscale(0.4) opacity(0.7); cursor: not-allowed; transform: none; }

/* ============================================================
   HERO
   ============================================================ */
.nrh-hero { position: relative; z-index: 1; width: 100%; text-align: center; padding: 34px 0 8px; }
.nrh-hero-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.nrh-hero-inner h1 { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.nrh-tagline {
  order: -1; margin-bottom: 10px;
  font-weight: 600; font-size: clamp(12px, 1.6vw, 14px); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--green-ink);
}
.nrh-lead { margin-top: 10px; font-size: clamp(14px, 1.7vw, 16.5px); line-height: 1.65; color: var(--body); font-weight: 500; max-width: 64ch; }
.nrh-lead a { color: var(--green-ink); font-weight: 600; }

/* ============================================================
   SECTIONS + section head
   ============================================================ */
.nrh-section { position: relative; z-index: 1; padding: 26px 0; }
.nrh-section.nrh-tint { background: transparent; }

.nrh-section-head { max-width: 720px; margin: 0 auto 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.nrh-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-weight: 700; font-size: 12.5px; letter-spacing: 0.01em;
  padding: 5px 14px; border-radius: var(--radius-pill);
  background: rgba(6, 105, 77, 0.09); color: var(--green-ink); border: 1px solid rgba(6, 105, 77, 0.16);
}
.nrh-eyebrow svg, .nrh-eyebrow .nrh-eyebrow-ico { width: 15px; height: 15px; color: var(--green); }
.nrh-section-head h2 { font-size: clamp(22px, 3.2vw, 30px); }
.nrh-section-head p { margin-top: 10px; font-size: 15.5px; line-height: 1.65; color: var(--body); }

.nrh-block-h { font-size: clamp(17px, 2.2vw, 20px); margin: 24px 0 12px; }
.nrh-sub-h { font-size: 17px; margin-bottom: 14px; }

/* ============================================================
   Shared card base
   ============================================================ */
.nrh-exr-card, .nrh-exp-card, .nrh-all-item, .nrh-timeline-block, .nrh-grade-card,
.nrh-conclusion, .nrh-faq-item, .nrh-fact-card, .nrh-stat, .nrh-checker {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   RESULT CHECKER
   ============================================================ */
.nrh-checker-section { position: relative; z-index: 1; padding: 6px 0 20px; }
.nrh-checker-wrap { width: 100%; max-width: 100%; margin: 0 auto; }
.nrh-checker-toggle { display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.nrh-ct-btn { border: none; background: transparent; font-family: var(--font); font-weight: 700; font-size: 13.5px; color: var(--muted); padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.2s var(--ease); }
.nrh-ct-btn.is-active { background: var(--grad); color: #fff; box-shadow: 0 8px 16px -7px rgba(6, 105, 77, 0.5); }

.nrh-checker { border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.nrh-checker-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.nrh-checker-top .nrh-ttl { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; color: var(--ink); }
.nrh-checker-top .nrh-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(6, 105, 77, 0.1); color: var(--green); }
.nrh-checker-top .nrh-ico svg { width: 21px; height: 21px; }
.nrh-checker-top .nrh-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--green-ink); background: rgba(6, 105, 77, 0.09); padding: 5px 12px; border-radius: var(--radius-pill); }
.nrh-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(6, 105, 77, 0.5); animation: nrh-pulse 1.8s infinite; }
@keyframes nrh-pulse { 0% { box-shadow: 0 0 0 0 rgba(6, 105, 77, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(6, 105, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(6, 105, 77, 0); } }

.nrh-checker-body { padding: 22px 24px 24px; }
.nrh-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.nrh-rt-fields { display: grid; gap: 14px; margin-bottom: 16px; }
.nrh-cfield { display: flex; flex-direction: column; gap: 7px; }
.nrh-cfield.nrh-full { grid-column: 1 / -1; }
.nrh-cfield label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.nrh-muted-inline { color: var(--hint); font-weight: 500; }
.nrh-ctrl { position: relative; }
.nrh-root .nrh-cfield input,
.nrh-root .nrh-cfield select {
  width: 100%; font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--ink);
  padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff;
  outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none;
}
.nrh-root .nrh-cfield input:focus,
.nrh-root .nrh-cfield select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(6, 105, 77, 0.14); }
.nrh-root .nrh-cfield input::placeholder { color: #7b8799; font-weight: 400; }
.nrh-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.4px; }
.nrh-checker-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); font-weight: 600; }
.nrh-checker-foot svg { width: 15px; height: 15px; color: var(--green); }
.nrh-checker-live { width: 100%; }

/* ============================================================
   RESULT GRIDS — 2 per row (desktop), vertical stack (mobile)
   ============================================================ */
.nrh-exr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.nrh-year-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.nrh-exr-card { padding: 20px; display: flex; flex-direction: column; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.nrh-exr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(6, 105, 77, 0.32); }
.nrh-exr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nrh-et { display: flex; align-items: center; gap: 12px; }
.nrh-exr-head h3 { font-size: 16.5px; font-weight: 800; }
.nrh-pub { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.nrh-status { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.nrh-status.nrh-live { background: rgba(6, 105, 77, 0.1); color: var(--green-ink); }
.nrh-status.nrh-soon { background: rgba(226, 59, 70, 0.1); color: var(--red); }

/* Vertical detail rows (label left, value right, one per line) */
.nrh-exr-stats { display: flex; flex-direction: column; gap: 0; margin: 2px 0 14px; }
.nrh-exr-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.nrh-exr-row:last-child { border-bottom: none; }
.nrh-exr-row .nrh-k { font-size: 13px; font-weight: 600; color: var(--muted); }
.nrh-exr-row .nrh-v { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: right; }
.nrh-exr-foot { margin-top: auto; }

/* ============================================================
   NU RESULT — stats, explained types, all-results, timeline
   ============================================================ */
.nrh-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px; }
.nrh-stat { padding: 18px 16px; text-align: center; }
.nrh-stat-v { display: block; font-size: 23px; font-weight: 800; color: var(--green-ink); letter-spacing: -0.01em; }
.nrh-stat-l { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.nrh-exp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.nrh-exp-card { display: flex; gap: 14px; align-items: flex-start; padding: 20px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.nrh-exp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(6, 105, 77, 0.32); }
.nrh-exp-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(6, 105, 77, 0.1); color: var(--green); }
.nrh-exp-ico svg { width: 22px; height: 22px; }
.nrh-exp-card h4 { font-size: 16px; margin-bottom: 5px; }
.nrh-exp-card p { font-size: 13.5px; line-height: 1.6; color: var(--body); font-weight: 500; }

.nrh-all-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nrh-all-item { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 14.5px; font-weight: 700; color: var(--ink); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.nrh-all-item > svg:first-child { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }
.nrh-all-item span { flex: 1; }
.nrh-all-arrow { width: 16px; height: 16px; color: var(--hint); transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
.nrh-all-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(6, 105, 77, 0.32); }
.nrh-all-item:hover .nrh-all-arrow { transform: translateX(3px); color: var(--green); }

.nrh-timeline-block { margin-top: 22px; padding: 22px 24px; border-radius: var(--radius); }
.nrh-timeline { list-style: none; }
.nrh-tl-item { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.nrh-tl-item::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: -2px; width: 2px; background: var(--line); }
.nrh-tl-item:last-child { padding-bottom: 0; }
.nrh-tl-item:last-child::before { display: none; }
.nrh-tl-dot { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; position: relative; z-index: 1; box-shadow: 0 8px 16px -8px rgba(6, 105, 77, 0.5); }
.nrh-tl-body { display: flex; flex-direction: column; gap: 3px; padding-top: 5px; }
.nrh-tl-stage { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.nrh-tl-desc { font-size: 13.5px; line-height: 1.55; color: var(--body); font-weight: 500; }

/* ============================================================
   HOW TO CHECK — steps
   ============================================================ */

/* ============================================================
   GRADING TABLE
   ============================================================ */
.nrh-grade-card { max-width: 860px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; }
.nrh-grade-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.nrh-grade-table thead th { text-align: left; padding: 15px 18px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--page); border-bottom: 1px solid var(--line); }
.nrh-grade-table tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); color: var(--body); font-weight: 500; }
.nrh-grade-table tbody tr:last-child td { border-bottom: none; }
.nrh-grade-table tbody tr { transition: background 0.15s ease; }
.nrh-grade-table tbody tr:hover { background: rgba(6, 105, 77, 0.03); }
.nrh-gl { display: inline-grid; place-items: center; min-width: 42px; padding: 3px 11px; border-radius: 9px; background: var(--grad); color: #fff; font-weight: 800; font-size: 13px; }

/* ============================================================
   ABOUT
   ============================================================ */
.nrh-about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.nrh-about-text p { font-size: 15.5px; line-height: 1.8; color: var(--body); margin-bottom: 14px; font-weight: 500; }
.nrh-about-text p:last-child { margin-bottom: 0; }
.nrh-about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nrh-fact-card { padding: 20px 16px; text-align: center; }
.nrh-fi { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(6, 105, 77, 0.1); color: var(--green); margin-bottom: 10px; }
.nrh-fi svg { width: 21px; height: 21px; }
.nrh-fn { font-size: 20px; font-weight: 800; color: var(--green-ink); }
.nrh-fl { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* ============================================================
   FAQ (accordion)
   ============================================================ */
.nrh-faq-wrap { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.nrh-faq-item { overflow: hidden; }
.nrh-faq-h { margin: 0; }
.nrh-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; background: transparent; border: none; box-shadow: none; -webkit-appearance: none; appearance: none; cursor: pointer; font-family: var(--font); font-size: 15.5px; font-weight: 700; color: var(--ink); text-align: left; transition: background 0.15s ease; }
.nrh-faq-q:hover, .nrh-faq-q:focus, .nrh-faq-q:active { background: rgba(6, 105, 77, 0.045); color: var(--ink); outline: none; box-shadow: none; }
.nrh-faq-q span { color: var(--ink); }
.nrh-faq-q .nrh-qico, .nrh-faq-q .nrh-qico svg { color: var(--green); }
.nrh-qico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(6, 105, 77, 0.1); color: var(--green); transition: transform 0.25s var(--ease); }
.nrh-qico svg { width: 16px; height: 16px; }
.nrh-faq-item.nrh-open .nrh-qico { transform: rotate(45deg); }
.nrh-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.nrh-faq-a p { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.7; color: var(--body); font-weight: 500; }

/* ============================================================
   CONCLUSION
   ============================================================ */
.nrh-conclusion { max-width: 820px; margin: 0 auto; padding: 28px 30px; border-radius: var(--radius); }
.nrh-conclusion p { font-size: 15px; line-height: 1.8; color: var(--body); font-weight: 500; margin-bottom: 14px; }
.nrh-conclusion p:last-child { margin-bottom: 0; }
.nrh-conclusion p:first-of-type { font-size: 16.5px; color: var(--ink); font-weight: 600; }
.nrh-conclusion a { color: var(--green-ink); font-weight: 700; }

/* ============================================================
   Brand (footer/embeds if present)
   ============================================================ */
.nrh-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); }
.nrh-brand-logo { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.nrh-brand-logo img { width: 30px; height: 30px; object-fit: contain; }

/* ============================================================
   RESPONSIVE — vertical stacking on mobile
   ============================================================ */
@media (max-width: 900px) {
  .nrh-about-grid { grid-template-columns: 1fr; }
  .nrh-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .nrh-all-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .nrh-exr-grid, .nrh-year-grid { grid-template-columns: 1fr; }
  .nrh-exp-grid { grid-template-columns: 1fr; }
  .nrh-field-grid { grid-template-columns: 1fr; }
  .nrh-all-grid { grid-template-columns: 1fr; }
  .nrh-about-facts { grid-template-columns: 1fr 1fr; }
  .nrh-section { padding: 32px 0; }
}
@media (max-width: 420px) {
  .nrh-stat-strip { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Embedded "NU Latest Result" checker integration
   ------------------------------------------------------------
   When checker mode = "NU Latest Result", the NU Latest Result
   plugin's shortcode is embedded inside .nrh-checker-live--nlr.
   That plugin ships its own green palette scoped to .nlr-root;
   here we (1) rebind its accent to the homepage accent so it
   matches whatever primary colour the admin picked, and
   (2) tidy spacing so the card sits flush in the section.
   ============================================================ */

/* Layout: let the embedded card span the checker column, centered. */
.nrh-checker-live--nlr { width: 100%; }
.nrh-checker-live--nlr .nlr-root {
  max-width: 640px;
  margin: 0 auto;
  padding: 0;              /* the section already provides vertical rhythm */
  line-height: 1.6;
}

/* Card chrome: match the homepage card (radius + shadow) so it reads as
   one piece with the rest of the page rather than a foreign widget. */
.nrh-checker-live--nlr .nlr-card {
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* Accent rebind — solid fallback (works everywhere). */
.nrh-checker-live--nlr .nlr-root {
  --green:      var(--nrh-accent, #06694d);
  --green-soft: var(--nrh-accent, #06694d);
  --green-ink:  var(--nrh-accent, #06694d);
  --grad: linear-gradient(135deg, var(--nrh-accent, #06694d) 0%, var(--nrh-accent, #06694d) 100%);
}

/* Nicer derived shades where color-mix is supported (all evergreen browsers). */
@supports (color: color-mix(in srgb, red, blue)) {
  .nrh-checker-live--nlr .nlr-root {
    --green-soft: color-mix(in srgb, var(--nrh-accent, #06694d) 80%, #ffffff);
    --green-ink:  color-mix(in srgb, var(--nrh-accent, #06694d) 82%, #000000);
    --grad: linear-gradient(135deg,
              var(--nrh-accent, #06694d) 0%,
              color-mix(in srgb, var(--nrh-accent, #06694d) 78%, #ffffff) 100%);
  }
}

/* A few nlr.css rules hard-code the green rgba (focus ring / button glow);
   override them so the accent stays consistent regardless of admin colour. */
.nrh-checker-live--nlr .nlr-root input[type=text]:focus,
.nrh-checker-live--nlr .nlr-root select:focus {
  border-color: var(--nrh-accent, #06694d);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nrh-accent, #06694d) 22%, transparent);
}
.nrh-checker-live--nlr .nlr-submit,
.nrh-checker-live--nlr .nlr-root .nlr-print {
  box-shadow: 0 8px 16px -7px color-mix(in srgb, var(--nrh-accent, #06694d) 60%, transparent);
}

/* Fallback focus ring for browsers without color-mix (declared first so the
   color-mix rule above wins where supported). */
@supports not (color: color-mix(in srgb, red, blue)) {
  .nrh-checker-live--nlr .nlr-root input[type=text]:focus,
  .nrh-checker-live--nlr .nlr-root select:focus {
    box-shadow: 0 0 0 3px rgba(24, 34, 47, 0.14);
  }
  .nrh-checker-live--nlr .nlr-submit,
  .nrh-checker-live--nlr .nlr-root .nlr-print {
    box-shadow: 0 8px 16px -7px rgba(24, 34, 47, 0.5);
  }
}