/* ---------- Brand colors ---------- */
:root {
  --brand: #0056b3;          /* same blue as header */
  --brand-dark: #003e86;     /* hover/active */
  --brand-contrast: #ffffff;
  --border: #e2e8f0;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  color: #000;
}

/* ---------- Header & Nav ---------- */
header {
  background-color: var(--brand);
  color: #fff;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header h1 { margin: 0; font-size: 1.5rem; }
nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 1.5rem;
  font-weight: bold;
}
nav a:hover { text-decoration: underline; }

/* ---------- Layout: two-column grid with ratio modifiers ---------- */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* default = 1:2 */
  gap: 2rem;
  align-items: start;
  padding: 2rem;
  min-height: calc(100vh - 100px);
}
.container.ratio-1-2 { grid-template-columns: 1fr 2fr; }
.container.ratio-1-3 { grid-template-columns: 1fr 3fr; }

/* Panels */
.form-section, .info-section {
  background: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ---------- Forms ---------- */
form label:not(.seg) {        /* avoid affecting segmented labels */
  display: block;
  margin-top: 1rem;
  font-weight: bold;
}
form input[type="text"],
form input[type="file"],
form input[type="number"],
form select,
form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--brand); }

button {
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  background-color: var(--brand);
  color: var(--brand-contrast);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover { background-color: var(--brand-dark); }

/* ---------- Info section ---------- */

.info-section h2 {
  color: var(--brand);
  margin-bottom: 1rem;
}
.info-section p { line-height: 1.6; }

/* ---------- Progress Page ---------- */
pre {
  background: #f9f9f9;
  color: #111;
  padding: 1rem;
  border: 1px solid #ccc;
  overflow-x: auto;
}
.status { font-weight: bold; margin-top: 1rem; }

/* ---------- Results table ---------- */
.result-table {
  border-collapse: collapse;
  margin: 2rem auto;
  width: 90%;
}
.result-table th, .result-table td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: center;
}
.result-table th {
  background-color: var(--brand);
  color: var(--brand-contrast);
}
.result-table td img { max-width: 100px; }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem;
  gap: 1rem;
}
.pagination button {
  background-color: var(--brand);
  color: var(--brand-contrast);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.pagination button:hover { background-color: var(--brand-dark); }

/* ---------- Footer ---------- */
footer {
  background-color: var(--brand);
  color: var(--brand-contrast);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  margin-top: 2rem;
}
.footer-container { max-width: 1200px; margin: 0 auto; }
.footer-links { margin-top: 0.5rem; }
.footer-links a {
  color: var(--brand-contrast);
  text-decoration: none;
  margin: 0 1rem;
}
.footer-links a:hover { text-decoration: underline; }

/* ---------- Utility ---------- */
.hidden { display: none; }

/* ---------- Segmented radio toggle (Input Method) ---------- */
.input-method { margin: 1rem 0; border: 0; padding: 0; }
.input-method > legend { font-weight: 600; margin-bottom: .5rem; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.segmented .seg {
  position: relative;
  display: flex;           /* fix vertical centering */
  align-items: center;
  margin: 0;               /* remove stray gap from global label rule */
  line-height: 1;
}
.segmented .seg + .seg { border-left: 1px solid var(--border); }
.segmented .seg input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer; margin: 0;
}
.segmented .seg span {
  display: flex; align-items: center;
  padding: .55rem 1rem;
  user-select: none;
}
.input-method .segmented .seg input:checked + span {
  background: var(--brand);
  color: var(--brand-contrast);
}
.input-method .segmented .seg input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.input-method .segmented .seg:hover span {
  background: rgba(0, 86, 179, 0.08); /* brand-tinted hover */
}

/* ---------- Dark mode tweaks (optional) ---------- */
@media (prefers-color-scheme: dark) {
  .segmented { border-color: #334155; }
  .segmented .seg + .seg { border-left-color: #334155; }
  .input-method .segmented .seg:hover span {
    background: rgba(148,163,184,.12);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .container,
  .container.ratio-1-2,
  .container.ratio-1-3 {
    grid-template-columns: 1fr;
  }
  nav a { display: block; margin: 0.5rem 0; }
  .result-table td img { max-width: 60px; }
}