/* TraceSynthesis — styled to feel like the original Shiny app
   (Bootstrap "flatly": dark navy navbar #2c3e50, teal success #18bc9c). */

:root {
  --navy: #2c3e50;
  --navy-dark: #1a252f;
  --teal: #18bc9c;
  --teal-dark: #128f76;
  --blue: #3498db;
  --gray-bg: #f8f9fa;
  --border: #dee2e6;
  --text: #212529;
  --muted: #6c757d;
  --pink: #ffcccc;
  --green: #2e7d4f;
  --yellow: #c9971c;
  --red: #c0392b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: #fff;
}

/* ---------- navbar ---------- */
.navbar {
  display: flex; align-items: center; gap: 8px;
  background: var(--navy); color: #fff;
  padding: 0 16px; min-height: 52px; flex-wrap: wrap;
}
.navbar-brand { font-size: 19px; font-weight: 600; margin-right: 18px; }
.nav-tabs { display: flex; gap: 2px; flex: 1; }
.nav-tab {
  background: none; border: none; color: rgba(255,255,255,.75);
  font-size: 15px; padding: 15px 14px; cursor: pointer;
}
.nav-tab:hover { color: #fff; }
.nav-tab.active { color: #fff; background: var(--navy-dark); }
.adv-toggle {
  color: rgba(255,255,255,.85); font-size: 13.5px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; padding: 6px 0;
}
.adv-toggle input { accent-color: var(--teal); width: 16px; height: 16px; }

/* ---------- layout ---------- */
.page { max-width: 1400px; margin: 0 auto; padding: 18px 20px 60px; }
.titleblock h1 { font-size: 28px; font-weight: 700; margin: 8px 0 4px; }
.tagline { font-size: 18px; color: #555; margin: 0 0 20px; line-height: 1.5; }
.tagline em { font-size: 15px; }

.layout-sidebar { display: flex; gap: 22px; align-items: flex-start; }
.sidebar {
  width: 340px; flex-shrink: 0;
  background: var(--gray-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px;
}
.mainarea { flex: 1; min-width: 0; }
@media (max-width: 980px) {
  .layout-sidebar { flex-direction: column; }
  .sidebar { width: 100%; }
}

.step { margin-bottom: 22px; }
.step h4, .card h4 { font-size: 16.5px; font-weight: 600; margin: 0 0 10px; }
.step label { display: block; font-size: 13.5px; margin: 10px 0 4px; }
.step input[type=file] { font-size: 13px; width: 100%; }
.step input[type=password], .step input[type=text], .step input[type=number],
.step select, .step textarea {
  width: 100%; padding: 7px 9px; font-size: 14px;
  border: 1px solid #ced4da; border-radius: 5px; background: #fff;
}
.step textarea { resize: vertical; margin-top: 6px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.hint a { color: var(--blue); }

.mini-add { display: flex; gap: 6px; margin-top: 6px; }
.mini-add input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  font-size: 12.5px; padding: 2px 9px; display: inline-flex;
  align-items: center; gap: 5px;
}
.chip button {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 0;
}
.chip button:hover { color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 5px;
  padding: 8px 16px; font-size: 14.5px; cursor: pointer;
  text-decoration: none; color: #fff; background: var(--muted);
  margin: 4px 6px 4px 0;
}
.btn:hover { filter: brightness(0.93); }
.btn-primary { background: var(--navy); }
.btn-primary:hover { background: var(--navy-dark); filter: none; }
.btn-success { background: var(--teal); }
.btn-success:hover { background: var(--teal-dark); filter: none; }
.btn-light {
  background: #fff; color: var(--text); border-color: #ced4da;
}
.btn-lg { padding: 11px 22px; font-size: 16px; width: 100%; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- progress ---------- */
.progress-wrap b { font-size: 13.5px; }
.progress {
  height: 18px; background: #e9ecef; border-radius: 5px;
  overflow: hidden; margin: 6px 0 4px;
}
.progress-bar {
  height: 100%; width: 0%; background: var(--blue);
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%,
    transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.18) 75%, transparent 75%, transparent);
  background-size: 24px 24px; transition: width .3s;
}

/* ---------- status box (same look as original) ---------- */
.status {
  font-size: 14px; line-height: 1.6; padding: 12px; border-radius: 6px;
  margin-bottom: 14px; background: var(--gray-bg);
  border-left: 4px solid var(--blue); white-space: pre-wrap;
  word-wrap: break-word;
}
.status.processing { color: var(--muted); font-style: italic; }
.status.complete {
  color: #155724; background: #d4edda; border-left-color: #28a745;
}
.status.error {
  color: #721c24; background: #f8d7da; border-left-color: #dc3545;
}
.statusmini {
  background: var(--gray-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px; font-size: 13px; white-space: pre-wrap;
  min-height: 20px; font-family: inherit;
}

.adv-note {
  font-size: 13px; color: var(--muted); margin-bottom: 12px;
  border: 1px dashed var(--border); border-radius: 6px; padding: 8px 11px;
}
body.advanced .adv-note { display: none; }
.adv-only { display: none; }
body.advanced .adv-only { display: block; }
.filters.adv-only, span.adv-only { }
body.advanced .filters.adv-only { display: flex; }
body.advanced span.adv-only { display: inline; }

/* ---------- banners / legend / filters ---------- */
.banner {
  border-radius: 8px; padding: 12px 14px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.banner.warn { background: #fff3cd; border: 1px solid #ffeeba; }
.legend {
  font-size: 13px; color: var(--muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  vertical-align: middle;
}
.dot-green { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red { background: var(--red); }
.dot-gray { background: #b0b7bd; }
.filters { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.chipbtn {
  border: 1px solid var(--border); background: #fff; border-radius: 14px;
  padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.chipbtn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- results table ---------- */
.tablewrap { overflow-x: auto; }
#resultsTable, #mergedTable {
  border-collapse: collapse; width: 100%; font-size: 13.5px;
  background: #fff;
}
#resultsTable th, #resultsTable td,
#mergedTable th, #mergedTable td {
  border: 1px solid var(--border); padding: 6px 8px; vertical-align: top;
  text-align: left;
}
#resultsTable th, #mergedTable th {
  background: var(--gray-bg); font-weight: 600; white-space: nowrap;
}
#resultsTable td.c-file { min-width: 110px; color: var(--muted); font-size: 12.5px; }
#resultsTable td.c-item { min-width: 130px; font-weight: 600; }
#resultsTable td.c-value { min-width: 150px; }
#resultsTable td.c-type { white-space: nowrap; font-size: 12.5px; }
#resultsTable td.c-expl { min-width: 240px; max-width: 420px; font-size: 12.5px; }
#resultsTable td.c-check { text-align: center; }
#resultsTable td.c-accept { text-align: center; }
#resultsTable td.c-hv input, #resultsTable td.c-notes input {
  width: 100%; min-width: 110px; border: 1px solid #ced4da; border-radius: 4px;
  padding: 4px 6px; font-size: 13px;
}
#resultsTable td.c-final { min-width: 120px; }
#resultsTable td.c-final.unconfirmed { background: var(--pink); }
#resultsTable tr.detail-row td {
  background: #fbfcfd; font-size: 13px;
}
.detail-inner { padding: 6px 4px; }
.detail-inner blockquote {
  margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--teal);
  background: var(--gray-bg);
}
.detail-inner blockquote.bad { border-left-color: var(--red); }
.detail-inner .dlabel {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-top: 8px;
}
.judge-btns button {
  border: 1px solid var(--border); background: #fff; border-radius: 4px;
  cursor: pointer; padding: 2px 8px; font-size: 13px; margin-right: 4px;
}
.judge-btns button.on-correct { background: #d4edda; border-color: #28a745; }
.judge-btns button.on-wrong { background: #f8d7da; border-color: #dc3545; }
.auto-tag {
  font-size: 11px; background: #d4edda; color: #155724;
  border-radius: 4px; padding: 1px 6px; margin-left: 6px;
}
.rulewarn { color: var(--red); font-weight: 600; }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px; margin-bottom: 18px; background: #fff;
}
.muted { color: var(--muted); font-size: 13.5px; }
.privacy-box {
  background: #eef6ff; border: 1px solid #cfe2ff;
  border-left: 6px solid #0d6efd; border-radius: 8px;
  padding: 12px 14px; font-size: 14px; margin-top: 10px;
}
.howto li { margin-bottom: 8px; }
.video-slot {
  border: 2px dashed var(--border); border-radius: 8px;
  padding: 30px; text-align: center;
}
code {
  background: var(--gray-bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: 12.5px;
}

/* ---------- calibration ---------- */
.calib-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.calib-controls label { font-size: 13px; display: block; }
.calib-controls input { display: block; width: 110px; margin-top: 4px;
  padding: 6px 8px; border: 1px solid #ced4da; border-radius: 5px; }
.guarantee {
  margin-top: 10px; padding: 10px 12px; border-radius: 6px;
  background: #d4edda; border: 1px solid #28a745; font-size: 13.5px;
}
.guarantee.none { background: var(--gray-bg); border-color: var(--border); }

/* ---------- viz page ---------- */
.pager { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 13.5px; }
.dl-row { display: flex; align-items: center; gap: 8px; margin-top: 12px;
  flex-wrap: wrap; }
.dl-row select { padding: 6px 9px; border: 1px solid #ced4da;
  border-radius: 5px; }
.viz-controls { display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px; }
.viz-controls select { padding: 6px 9px; border: 1px solid #ced4da;
  border-radius: 5px; min-width: 180px; }
.viz-out { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
@media (max-width: 900px) { .viz-out { grid-template-columns: 1fr; } }

/* ---------- rules list ---------- */
#ruleList .rule-item {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  padding: 5px 0; border-bottom: 1px dotted var(--border);
}
#ruleList code { flex: 1; }

/* ---------- misc ---------- */
.footer {
  text-align: center; color: var(--muted); font-size: 12.5px;
  padding: 18px; border-top: 1px solid var(--border); margin-top: 30px;
}
#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 9px 16px;
  border-radius: 6px; font-size: 14px; z-index: 50; max-width: 90vw;
}
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }