/* GBKL tool theme (decoder and checker). Loaded after each page's own styles.
   Dark by default, light when the phone is set to light, and the sun/moon button
   overrides either way (stored per device). Orange means light or an action. */
@font-face{font-family:'D-DIN';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/d-din-400.woff2) format('woff2')}
@font-face{font-family:'D-DIN';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/d-din-700.woff2) format('woff2')}
@font-face{font-family:'D-DIN Condensed';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/d-din-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/public-sans-400.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/public-sans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/plex-mono-500.woff2) format('woff2')}

:root{
  --graphite:#14181B; --gunmetal:#1C2125; --steel:#22282D; --slate:#8E877C;
  --concrete:#A9A296; --aluminium:#E6DFD2; --blue:#C9B68A; --teal:#C9B68A; --teal-dk:#2A2E2A;
  --orange:#FC9C24; --ok:#4CC38A; --bad:#F0706F; --warn:#F2C14E;
  --glass:#1C2125; --line:#353D44; --radius:3px;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --t-sheet:#1C2125; --t-field:#14181B; --t-field-line:#4A535A; --t-bar:#14181B;
  --t-warn-bg:#2A2416; --t-warn-line:#6B5520; --t-warn-ink:#F5DFA6;
  --t-bad-bg:#2D1A1A; --t-bad-line:#6E3330; --t-bad-ink:#F7C1C1;
  --t-verdict-ink:#14181B; --t-link:#FC9C24;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --graphite:#EEF0EE; --gunmetal:#FFFFFF; --steel:#E3E6E6; --slate:#5E676D;
    --concrete:#3F474C; --aluminium:#101315; --blue:#8A7440; --teal:#8A7440; --teal-dk:#E9E3D3;
    --orange:#B05A00; --ok:#1E7A4B; --bad:#B3261E; --warn:#8A6100;
    --glass:#FFFFFF; --line:#C5CBCE;
    --t-sheet:#FFFFFF; --t-field:#FFFFFF; --t-field-line:#8E979C; --t-bar:#FFFFFF;
    --t-warn-bg:#FFF4D6; --t-warn-line:#E2B84A; --t-warn-ink:#5C4300;
    --t-bad-bg:#FDE7E6; --t-bad-line:#E6A3A0; --t-bad-ink:#7A1A14;
    --t-verdict-ink:#FFFFFF; --t-link:#A85400;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --graphite:#EEF0EE; --gunmetal:#FFFFFF; --steel:#E3E6E6; --slate:#5E676D;
  --concrete:#3F474C; --aluminium:#101315; --blue:#8A7440; --teal:#8A7440; --teal-dk:#E9E3D3;
  --orange:#B05A00; --ok:#1E7A4B; --bad:#B3261E; --warn:#8A6100;
  --glass:#FFFFFF; --line:#C5CBCE;
  --t-sheet:#FFFFFF; --t-field:#FFFFFF; --t-field-line:#8E979C; --t-bar:#FFFFFF;
  --t-warn-bg:#FFF4D6; --t-warn-line:#E2B84A; --t-warn-ink:#5C4300;
  --t-bad-bg:#FDE7E6; --t-bad-line:#E6A3A0; --t-bad-ink:#7A1A14;
  --t-verdict-ink:#FFFFFF; --t-link:#A85400;
  color-scheme:light;
}

/* base: no glows, no blueprint grid, no glass */
html,body{background:var(--graphite)!important}
body{background-image:none!important;font-family:'Public Sans','Segoe UI',Arial,sans-serif!important;color:var(--concrete)}
h1,h2,h3,h4,.brand,.verdict,.part-label{font-family:'D-DIN Condensed','D-DIN','Arial Narrow',sans-serif!important;font-weight:700!important;letter-spacing:0!important}
h1{color:var(--aluminium)}
.eyebrow{font-family:'IBM Plex Mono',monospace!important;text-transform:none!important;letter-spacing:0!important;color:var(--concrete)!important}
.eyebrow::before{display:none!important}
.chip,.backlink,.tools button,label,button{font-family:'D-DIN','Public Sans',sans-serif}
a{color:var(--t-link)}
*{text-shadow:none!important}

header.bar{background:var(--t-bar)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid var(--line)!important}
.backlink,.chip,.tools button,.ref,.theme-btn{border-color:var(--line)!important;border-radius:var(--radius)!important}
textarea,input,select{background:var(--t-field)!important;color:var(--aluminium)!important;border:1.5px solid var(--t-field-line)!important;border-radius:var(--radius)!important}
.input,.stat,.part,.reason,.string,.result section,.card,.panel{background:var(--t-sheet)!important;border-color:var(--line)!important;border-radius:var(--radius)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.warn{background:var(--t-warn-bg)!important;border-color:var(--t-warn-line)!important;color:var(--t-warn-ink)!important;border-radius:var(--radius)!important}
.warn.bad,.preview{background:var(--t-bad-bg)!important;border-color:var(--t-bad-line)!important;color:var(--t-bad-ink)!important;border-radius:var(--radius)!important}
.preview a{color:var(--t-bad-ink)!important}
.verdict{color:var(--t-verdict-ink)!important;border-radius:var(--radius)!important}
.verdict.na{background:var(--slate)!important}
.notsign{border-radius:0!important}
.hazard,.hazard-in{border-radius:var(--radius)!important}
.disclaimer{background:transparent!important;border:0!important}
.checklink{border-radius:var(--radius)!important}

/* the sun/moon switch */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;margin-left:auto;margin-right:10px;background:transparent;border:1px solid var(--line);color:var(--aluminium);cursor:pointer;padding:0}
.theme-btn:hover{border-color:var(--orange)!important;color:var(--orange)}
.theme-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .moon{display:none}:root:not([data-theme="light"]) .theme-btn .sun{display:block}}
@media (prefers-color-scheme: light){:root:not([data-theme]) .theme-btn .sun{display:none}:root:not([data-theme]) .theme-btn .moon{display:block}}
:root[data-theme="light"] .theme-btn .sun{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (max-width:440px){.brand small{display:none}.brand{font-size:17px}}
