/*
  styles.css — One‑page, SEO- and UX-friendly
  - Accessible color contrast, focus states, reduced motion, print styles
  - Responsive layout, fluid typography, light/dark themes
  - Matches IDs/classes used in index/PHP markup
*/

/* ----------------------------------
   Root + Theming
---------------------------------- */
:root{
  /* Light theme (default) */
  --bg: #f7f8fc;
  --bg-grad-1: #eef1fb;
  --bg-grad-2: #f7f8fc;
  --card: #ffffff;
  --text: #0e122b;
  --muted: #5b6280;
  --border: rgba(10,15,35,0.12);
  --accent: #3557ff;
  --accent-2: #6a83ff;
  --ok: #16a34a;
  --err: #ef4444;

  --surface-1: #f1f3fe;
  --surface-2: #f6f7ff;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --shadow-sm: 0 6px 18px rgba(14,18,43,.08);
  --shadow-md: 0 10px 30px rgba(14,18,43,.12);

  --focus: #0ea5e9; /* cyan-ish */

  /* Type scale */
  --fs-900: clamp(1.8rem, 2vw + 1rem, 2.2rem);
  --fs-800: clamp(1.4rem, 1.2vw + 1rem, 1.6rem);
  --fs-700: 1.25rem;
  --fs-600: 1.125rem;
  --fs-500: 1rem;
  --fs-400: .9375rem;
  --fs-300: .875rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --bg-grad-1: #0a0f1f;
    --bg-grad-2: #0b1020;
    --card: #161b2e;
    --text: #e8ecff;
    --muted: #98a1c0;
    --border: rgba(255,255,255,.12);
    --accent: #5b8cff;
    --accent-2: #7aa0ff;

    --surface-1: #0d1330;
    --surface-2: #0f1636;

    --shadow-sm: 0 10px 24px rgba(0,0,0,.35);
    --shadow-md: 0 18px 50px rgba(0,0,0,.45);
  }
}

/* ----------------------------------
   Global Resets + Base
---------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2) 60%);
}
img{max-width:100%;display:block}

/* Visually hidden (for a11y/SEO where helpful) */
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;padding:0;border:0;white-space:nowrap}

/* ----------------------------------
   Layout
---------------------------------- */
.container{max-width:980px;margin:32px auto;padding:0 16px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:20px;
}

header.page-header{margin:8px 0 18px}
header.page-header h1{font-size:var(--fs-900);margin:0}
header.page-header p{color:var(--muted);font-size:var(--fs-400);margin:.5rem 0 0}

/* Grid used by the form */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:760px){.grid{grid-template-columns:1fr}}

/* ----------------------------------
   Typography
---------------------------------- */
h1,h2,h3{line-height:1.25}
.small{font-size:var(--fs-300);color:var(--muted)}

/* ----------------------------------
   Forms
---------------------------------- */
label{font-weight:600;margin-top:8px;display:block}
input,select,textarea,button{
  width:100%;
  padding:10px 12px;
  margin-top:6px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface-1);
  color:var(--text);
  font-size:var(--fs-500);
  transition:border-color .15s ease, box-shadow .15s ease, background .2s ease, transform .02s ease;
}
input::placeholder,textarea::placeholder{color:color-mix(in oklab, var(--muted) 85%, var(--text))}

/* Better focus visibility */
:where(input,select,textarea,button):focus{outline:none}
:where(input,select,textarea,button):focus-visible{
  border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--focus) 30%, transparent);
}

/* Buttons */
button{
  cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  border:none;
}
button:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
button:active{transform:translateY(0)}
button:disabled{opacity:.6;cursor:not-allowed}

/* File input helpers */
#dropzone{
  border:2px dashed var(--border);
  border-radius:var(--radius-md);
  padding:24px;
  text-align:center;
  color:var(--muted);
  background:var(--surface-2);
  transition:background .2s ease, border-color .2s ease;
}
#dropzone.drag{background:color-mix(in oklab, var(--surface-2) 60%, #fff 40%)}

/* Progress bar */
.progress{width:100%;height:14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;margin:14px 0}
.pb{height:100%;width:0;background:linear-gradient(90deg,#22c55e,#84d8a6);transition:width .25s ease}

/* Per-file list */
#fileList{margin-top:10px}
.row{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--border)}
.row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:var(--fs-300)}
.row .ok{color:var(--ok)}
.row .err{color:var(--err)}
.linklike{color:var(--accent-2);text-decoration:underline;cursor:pointer}

/* Results area */
#results{margin-top:12px}

/* Toast-like inline alerts */
.alert{padding:10px 12px;border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm)}
.alert--error{border-color:color-mix(in oklab, var(--err) 40%, var(--border));background:color-mix(in oklab, var(--err) 8%, var(--surface-2));color:var(--text)}
.alert--ok{border-color:color-mix(in oklab, var(--ok) 40%, var(--border));background:color-mix(in oklab, var(--ok) 8%, var(--surface-2))}

/* ----------------------------------
   Utilities
---------------------------------- */
.max-w-narrow{max-width:720px}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.center{text-align:center}

/* ----------------------------------
   Reduced Motion / Print
---------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media print{
  body{background:#fff}
  .card{box-shadow:none;border-color:#e5e7eb}
  .progress,.badge,.linklike,#dropzone{display:none!important}
}

/* ----------------------------------
   Optional: helper styles for SEO-friendly sections (if added)
---------------------------------- */
section{scroll-margin-top:80px}
nav a{color:var(--accent);text-decoration:none}
nav a:hover{text-decoration:underline}

/* ----------------------------------
   Helper states toggled by JS
---------------------------------- */
.is-loading{opacity:.75;pointer-events:none}
.is-hidden{display:none!important}