/*
 * UViewFile.com - Digital Forensic Brutalism
 * A strict, high-contrast, data-dense aesthetic.
 */

:root {
  /* Colors */
  --c-void: #050505;
  --c-paper: #F4F4F0;
  --c-steel: #333333;
  --c-alert: #FF3333;
  --c-accent: #00FF41; /* Phosphor Green */
  --c-slate: #8F9BA8;

  /* Typography */
  --f-display: 'Oswald', sans-serif;
  --f-body: 'Chivo', sans-serif;
  --f-mono: 'Space Mono', monospace;

  /* Sizing / Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem;
  --s-12: 6rem;
  --s-16: 8rem;

  /* Type Scale */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.25rem;
  --t-2xl: 1.5rem;
  --t-3xl: 1.875rem;
  --t-4xl: 2.25rem;
  --t-5xl: 3rem;
  --t-6xl: 3.75rem;
  --t-7xl: 4.5rem;
  --t-8xl: 6rem;

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-base: 1.5;
  --lh-relaxed: 1.75;
}

/* Font Loading */
@font-face { font-family: 'Oswald'; src: url('/assets/fonts/oswald-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('/assets/fonts/oswald-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chivo'; src: url('/assets/fonts/chivo-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chivo'; src: url('/assets/fonts/chivo-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
body {
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  background-color: var(--c-void);
  color: var(--c-paper);
  font-family: var(--f-body);
  font-size: var(--t-base);
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(var(--t-5xl), 8vw, var(--t-8xl)); margin-bottom: var(--s-6); }
h2 { font-size: clamp(var(--t-4xl), 6vw, var(--t-6xl)); margin-bottom: var(--s-5); }
h3 { font-size: clamp(var(--t-3xl), 4vw, var(--t-5xl)); margin-bottom: var(--s-4); }
h4 { font-size: var(--t-2xl); }
h5 { font-size: var(--t-xl); }

p { margin-bottom: var(--s-4); max-width: 65ch; }
p.lead { font-size: var(--t-xl); font-weight: 700; max-width: 50ch; margin-bottom: var(--s-6); color: var(--c-slate); }
a.inline-link { text-decoration: underline; text-decoration-color: var(--c-alert); text-underline-offset: 4px; transition: color 0.2s; }
a.inline-link:hover { color: var(--c-alert); }

/* Layout / Grid */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s-4);
}

.grid { display: grid; gap: var(--s-6); }
.grid-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-asym {
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .grid-asym {
        grid-template-columns: 2fr 1fr;
    }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--s-2); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }

/* Components */
.section { padding: var(--s-12) 0; border-bottom: 1px solid var(--c-steel); }
.section-tight { padding: var(--s-6) 0; border-bottom: 1px solid var(--c-steel); }
.section-fullbleed { padding: var(--s-16) 0; border-bottom: 1px solid var(--c-steel); }

.box {
  background: var(--c-void);
  border: 1px solid var(--c-steel);
  padding: var(--s-6);
  position: relative;
}
.box-highlight { border-color: var(--c-accent); }
.box-alert { border-color: var(--c-alert); }

.box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--c-steel);
}
.box-highlight::before { background: var(--c-accent); }
.box-alert::before { background: var(--c-alert); }

.mono-tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
  display: block;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--s-3) var(--s-6);
  background: var(--c-void);
  color: var(--c-paper);
  border: 1px solid var(--c-paper);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn:hover { background: var(--c-paper); color: var(--c-void); }

.btn-primary { background: var(--c-alert); border-color: var(--c-alert); color: var(--c-void); }
.btn-primary:hover { background: var(--c-void); color: var(--c-alert); }

/* Header & Nav */
.header {
  border-bottom: 1px solid var(--c-steel);
  padding: var(--s-4) 0;
  position: sticky;
  top: 0;
  background: var(--c-void);
  z-index: 50;
}
.logo {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.logo-icon { width: 24px; height: 24px; fill: var(--c-alert); }

.nav ul { display: flex; gap: var(--s-6); }
.nav a {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  color: var(--c-slate);
  transition: color 0.2s;
}
.nav a:hover, .nav a.active { color: var(--c-paper); }
.nav a.active { border-bottom: 2px solid var(--c-alert); padding-bottom: 2px;}

/* Tables */
table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-6); font-family: var(--f-mono); font-size: var(--t-sm); }
th, td { border: 1px solid var(--c-steel); padding: var(--s-3); text-align: left; }
th { background: rgba(255, 255, 255, 0.02); color: var(--c-paper); text-transform: uppercase; }
tr:hover { background: rgba(255,255,255,0.05); }

/* Footer */
.footer { border-top: 1px solid var(--c-steel); padding: var(--s-12) 0; font-family: var(--f-mono); font-size: var(--t-sm); color: var(--c-slate); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-6); margin-bottom: var(--s-8); }
.footer h4 { font-size: var(--t-base); color: var(--c-paper); margin-bottom: var(--s-4); }
.footer ul { display: flex; flex-direction: column; gap: var(--s-2); }
.footer a:hover { color: var(--c-paper); }
.footer-bottom { border-top: 1px solid var(--c-steel); padding-top: var(--s-4); display: flex; justify-content: space-between; align-items: center; }

/* Utilities */
.text-center { text-align: center; }
.text-accent { color: var(--c-accent); }
.text-alert { color: var(--c-alert); }
.text-slate { color: var(--c-slate); }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--s-4); }
.mb-8 { margin-bottom: var(--s-8); }
.mt-8 { margin-top: var(--s-8); }
.w-full { width: 100%; }
.max-w-prose { max-width: 65ch; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Code Blocks */
pre, code { font-family: var(--f-mono); background: #111; color: var(--c-accent); padding: var(--s-1) var(--s-2); border-radius: 2px; }
pre { padding: var(--s-4); overflow-x: auto; border: 1px solid var(--c-steel); margin-bottom: var(--s-4); font-size: var(--t-sm); }
pre code { background: transparent; padding: 0; color: inherit; }

/* Inputs */
.form-group { margin-bottom: var(--s-4); }
.form-label { display: block; font-family: var(--f-mono); font-size: var(--t-sm); margin-bottom: var(--s-2); text-transform: uppercase; color: var(--c-slate); }
.form-input { width: 100%; background: var(--c-void); border: 1px solid var(--c-steel); color: var(--c-paper); padding: var(--s-3); font-family: var(--f-mono); transition: border-color 0.2s; }
.form-input:focus { outline: none; border-color: var(--c-accent); }
.form-hint { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-slate); margin-top: var(--s-1); display: block; }

/* Interactive Tool Result */
.tool-result {
    margin-top: var(--s-6);
    padding: var(--s-6);
    border: 1px solid var(--c-steel);
    background: rgba(255, 255, 255, 0.02);
    display: none; /* Shown via JS */
}
.tool-result.active { display: block; }
.tool-result-value { font-family: var(--f-display); font-size: var(--t-5xl); color: var(--c-accent); margin-bottom: var(--s-2); line-height: 1; }
.tool-result-label { font-family: var(--f-mono); font-size: var(--t-sm); text-transform: uppercase; color: var(--c-slate); }

.hide-js { display: block; }
.show-js { display: none; }
.js-enabled .hide-js { display: none; }
.js-enabled .show-js { display: block; }