/* readable minimum size */
.text-\[10px\]{font-size:0.75rem!important}
.text-\[11px\]{font-size:0.75rem!important}
.text-\[9px\]{font-size:0.75rem!important}

/* unhandled surfaces, light scheme */
@media (prefers-color-scheme: light){
.btn-secondary{background-color:rgba(228,230,233,0.5)!important}
.btn-secondary:hover{background-color:rgba(170,184,204,0.5)!important}
.card{background-color:rgba(228,230,233,0.6)!important}
.step-panel-right{background-color:rgba(228,230,233,0.3)!important}
.divide-slate-700>:not([hidden])~:not([hidden]){border-color:#aab8cc!important}
.border-slate-700{border-color:#aab8cc!important}
.border-slate-700\/50{border-color:rgba(170,184,204,0.5)!important}
.border-slate-800{border-color:#e4e6e9!important}
.bg-slate-700{background-color:#aab8cc!important}
.bg-slate-700\/20{background-color:rgba(170,184,204,0.2)!important}
.bg-slate-800{background-color:#e4e6e9!important}
.bg-slate-800\/30{background-color:rgba(228,230,233,0.3)!important}
.bg-slate-800\/50{background-color:rgba(228,230,233,0.5)!important}
.bg-slate-900{background-color:#edeef2!important}
.bg-slate-900\/50{background-color:rgba(237,238,242,0.5)!important}
.bg-slate-900\/70{background-color:rgba(237,238,242,0.7)!important}
.bg-slate-900\/95{background-color:rgba(237,238,242,0.95)!important}
.bg-slate-950{background-color:#f6f7fa!important}
.bg-slate-950\/50{background-color:rgba(246,247,250,0.5)!important}
.hover\:bg-slate-700:hover{background-color:#aab8cc!important}
.hover\:bg-slate-700\/50:hover{background-color:rgba(170,184,204,0.5)!important}
}

/* AA text contrast, light scheme */
@media (prefers-color-scheme: light){
input::-moz-placeholder,textarea::-moz-placeholder{color:#59606e!important}
input::placeholder,textarea::placeholder{color:#59606e!important}
.btn-primary{color:#616161!important}
.btn-secondary{color:#3a6188!important}
.card-header{color:#446084!important}
.text-amber-400{color:#7a5802!important}
.text-blue-400{color:#065cc5!important}
.text-green-400{color:#147036!important}
.text-indigo-400{color:#3445f4!important}
.text-indigo-500{color:#3e41ee!important}
.text-orange-400{color:#9b4703!important}
.text-primary-400{color:#3445f4!important}
.text-red-400{color:#c60a0a!important}
.text-rose-400{color:#c30621!important}
.text-slate-100{color:#3a6188!important}
.text-slate-200{color:#446084!important}
.text-slate-300{color:#4a6381!important}
.text-slate-400{color:#506078!important}
.text-slate-50{color:#3a6188!important}
.text-slate-500{color:#536073!important}
.text-teal-400{color:#15675d!important}
.text-white{color:#616161!important}
.text-yellow-400{color:#745d02!important}
.hover\:text-primary-400:hover{color:#3445f4!important}
.hover\:text-slate-300:hover{color:#4a6381!important}
.focus\:text-white:focus{color:#616161!important}
}

/* AA text contrast, dark scheme */
@media (prefers-color-scheme: dark){
.text-gray-900{color:#6d87bf!important}
.text-indigo-500{color:#7f82f4!important}
.text-indigo-600{color:#827ced!important}
.text-slate-500{color:#79899f!important}
.text-slate-600{color:#7b8ca6!important}
.dark\:text-slate-600:is(.dark *){color:#7b8ca6!important}
}
/* gradient surfaces, light scheme.
   The sweep gave every flat surface a light counterpart (.bg-slate-900 above) and
   darkened the text to suit, but left gradient colour stops at their dark values. The
   hero and two full-width sections are painted with gradients, so in light mode they kept
   a near-black background while their headline, body copy and button labels turned dark —
   dark on dark, unreadable. These are the surface stops only, mapped to the same palette
   as the flat backgrounds beside them; brand gradients on buttons and clipped-text
   headlines already read correctly on a pale page and are left alone. !important is
   required because this stylesheet loads before the app bundle that defines them. */
@media (prefers-color-scheme: light){
.from-slate-900{--tw-gradient-from:#edeef2 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(237,238,242,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.via-slate-900{--tw-gradient-to:rgba(237,238,242,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),#edeef2 var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.to-slate-900{--tw-gradient-to:#edeef2 var(--tw-gradient-to-position)!important}
.from-slate-800{--tw-gradient-from:#e4e6e9 var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(228,230,233,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.via-slate-800{--tw-gradient-to:rgba(228,230,233,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),#e4e6e9 var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.to-slate-800{--tw-gradient-to:#e4e6e9 var(--tw-gradient-to-position)!important}
.from-slate-950{--tw-gradient-from:#f6f7fa var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(246,247,250,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.to-slate-950{--tw-gradient-to:#f6f7fa var(--tw-gradient-to-position)!important}
.from-indigo-950\/40{--tw-gradient-from:rgba(226,228,245,.55) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(226,228,245,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
.from-indigo-950\/50{--tw-gradient-from:rgba(226,228,245,.65) var(--tw-gradient-from-position)!important;--tw-gradient-to:rgba(226,228,245,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)!important}
}

/* brand-coloured controls and clipped headline type, light scheme.
   Two leftovers from flipping the text globally. A button label was darkened along with
   the body copy even though its own background is a saturated brand gradient that never
   turns pale, so it reads dark-on-indigo; and the headline that is painted with a gradient
   and clipped to its glyphs still uses stops picked for a dark page, which wash out to
   almost nothing on a white one. */
@media (prefers-color-scheme: light){
.btn-primary{color:#fff!important}
.text-white.bg-gradient-to-r,.text-white.bg-gradient-to-br,.text-white.bg-gradient-to-b,.text-white.bg-gradient-to-l{color:#fff!important}
.gradient-text{--tw-gradient-from:#4338ca var(--tw-gradient-from-position)!important;--tw-gradient-stops:var(--tw-gradient-from),#4f46e5 var(--tw-gradient-via-position),var(--tw-gradient-to)!important;--tw-gradient-to:#a35a05 var(--tw-gradient-to-position)!important}
.bg-clip-text.from-indigo-400{--tw-gradient-from:#4338ca var(--tw-gradient-from-position)!important}
.bg-clip-text.via-amber-400{--tw-gradient-to:rgba(163,90,5,0) var(--tw-gradient-to-position)!important;--tw-gradient-stops:var(--tw-gradient-from),#a35a05 var(--tw-gradient-via-position),var(--tw-gradient-to)!important}
.bg-clip-text.to-indigo-400{--tw-gradient-to:#4338ca var(--tw-gradient-to-position)!important}
}

/* --- tap targets: standalone links below 24px (WCAG 2.2 SC 2.5.8) --- */
@media (max-width: 820px) {
  footer a { padding-block: 0.4rem; }
  /* the network line is a whole paragraph that is one link, not a link inside
     prose, so the inline exemption does not apply to it */
  a[href*="globalknowledgegraph.com"] { padding-block: 0.4rem; }
  /* the slider track keeps its drawn thickness: the padding is transparent and
     the background is clipped to the content box */
  /* h-2 plus border-box means padding alone is absorbed by the declared height,
     so the box has to be given the 24px explicitly; the track still paints at
     its drawn 8px because the background is clipped to the content area */
  input[type="range"] { height: 24px; padding-block: 8px; background-clip: content-box; }
  /* padding alone makes adjacent one-link lines collide, so the rows they sit on
     are given matching separation — an enlarged target that overlaps its
     neighbour trades one mis-tap for another */
  footer p, footer li { margin-block: 0.35rem; }
  footer nav a, footer .flex a { margin-block: 0.15rem; }
}