/* ════════════════════════════════════════════════════════════════════
   DiffLab — styles.css
   Family aesthetic with sky blue accent (#0ea5e9)
   ════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0d14; --grid:#11151f;
  --surface:#141823; --surface2:#1c2130; --surface3:#252b3d;
  --border:#2a3148; --border2:#3a4262;
  --ink:#e7e9f0; --soft:#b0b5c4; --mute:#7d859a;

  --accent:#0ea5e9;
  --accent-light:#38bdf8;
  --accent-deep:#0284c7;
  --accent-bg:rgba(14,165,233,.14);
  --accent-glow:rgba(14,165,233,.4);

  --added:#10b981; --added-bg:rgba(16,185,129,.18); --added-row:rgba(16,185,129,.08);
  --removed:#f87171; --removed-bg:rgba(248,113,113,.20); --removed-row:rgba(248,113,113,.08);
  --modified:#fbbf24; --modified-bg:rgba(251,191,36,.16);

  --gold:#f5a44e; --gold-bg:rgba(245,164,78,.1);

  --mono:"JetBrains Mono","SF Mono","Courier New",monospace;
  --serif:"Times New Roman",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:14.5px; line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px; min-height:100vh;
}
a{color:var(--accent-light); text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background:var(--accent); color:#04293c;}

.wrap{max-width:1400px;margin:0 auto;padding:0 24px;}

/* ── Masthead ─────────────────────────────────────────────── */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:14px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand__mark{
  width:36px;height:36px;border-radius:9px;background:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  color:#04293c;font-weight:800;font-family:var(--sans);font-size:18px;
}
.brand__name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;}
.brand__tag{
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:3px 8px;
}
.masthead__nav{display:flex;gap:18px;font-size:14px;}
.masthead__nav a{color:var(--soft);}
.masthead__nav a:hover{color:var(--ink);text-decoration:none;}

/* ── Hero ────────────────────────────────────────────────── */
.hero{padding:36px 0 18px;}
.hero__kicker{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent);margin:0 0 12px;
}
.hero__kicker::before{content:'\25C6\00A0';}
.hero h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,40px);
  line-height:1.15;margin:0 0 10px;
}
.hero h1 em{color:var(--accent-light);font-style:italic;}
.hero__lede{color:var(--soft);font-size:16px;max-width:780px;margin:0;}

/* ── Panels ───────────────────────────────────────────────── */
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;
}
.panel h3{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);margin:0 0 12px;display:flex;align-items:center;gap:8px;
}
.panel h3::before{content:'\25C6';font-size:8px;}
.panel--accent{border-color:var(--accent);}
.panel--gold{border-color:var(--gold);}

/* ── Input pair (two file/text inputs side by side) ───────── */
.input-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;
}
@media (max-width:900px){.input-pair{grid-template-columns:1fr;}}
.input-cell{
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;
  display:flex;flex-direction:column;gap:8px;
}
.input-cell__head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.input-cell__label{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--accent);
}
.input-cell__label--alt{color:var(--gold);}
.input-cell__actions{display:flex;gap:6px;}
.input-cell__meta{font-family:var(--mono);font-size:11px;color:var(--mute);min-height:14px;}
.input-cell textarea{
  width:100%;min-height:140px;max-height:280px;
  background:var(--bg);border:1px solid var(--border);border-radius:7px;
  padding:10px 12px;color:var(--ink);
  font-family:var(--mono);font-size:12.5px;line-height:1.5;
  resize:vertical;color-scheme:dark;
}
.input-cell textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}
.input-cell.is-dragover{border-color:var(--accent);background:var(--surface2);}

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:10px 14px;margin:18px 0;
}
.toolbar__group{display:flex;align-items:center;gap:6px;}
.toolbar__label{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--mute);
}
.toolbar__sep{width:1px;height:24px;background:var(--border);}

/* Segmented toggle (mode, view, etc.) */
.seg{
  display:inline-flex;border:1px solid var(--border);border-radius:7px;
  overflow:hidden;background:var(--bg);
}
.seg-opt{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  padding:6px 12px;background:transparent;border:none;color:var(--mute);
  cursor:pointer;transition:all .12s ease;
}
.seg-opt:hover{color:var(--soft);}
.seg-opt.is-active{background:var(--accent-bg);color:var(--accent);}
.seg-opt + .seg-opt{border-left:1px solid var(--border);}

.checkbox{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  user-select:none;font-size:12.5px;color:var(--soft);}
.checkbox input{width:auto;accent-color:var(--accent);}

/* ── Stats badges ─────────────────────────────────────────── */
.stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;}
.stat{
  font-family:var(--mono);font-size:11.5px;
  padding:4px 10px;border-radius:99px;background:var(--bg);border:1px solid var(--border);
  display:inline-flex;align-items:center;gap:5px;
}
.stat--add{color:var(--added);border-color:var(--added);background:var(--added-bg);}
.stat--del{color:var(--removed);border-color:var(--removed);background:var(--removed-bg);}
.stat--neutral{color:var(--soft);}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:transparent;border:1px solid var(--border);color:var(--soft);
  padding:6px 14px;border-radius:7px;font-family:var(--sans);font-size:12.5px;
  font-weight:500;cursor:pointer;transition:all .12s ease;text-decoration:none;
}
.btn:hover{color:var(--ink);border-color:var(--accent);text-decoration:none;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn--primary{background:var(--accent);color:#04293c;border-color:var(--accent);font-weight:600;}
.btn--primary:hover{background:var(--accent-light);color:#04293c;}
.btn--sm{padding:4px 9px;font-size:11px;}
.btn--block{width:100%;}

/* ── Diff view ────────────────────────────────────────────── */
.diff-view{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;margin-top:14px;
}
.diff-view__head{
  display:flex;background:var(--surface2);border-bottom:1px solid var(--border);
  font-family:var(--mono);font-size:11px;color:var(--mute);
  text-transform:uppercase;letter-spacing:.12em;
}
.diff-view__head > div{flex:1;padding:8px 14px;}
.diff-view__head > div + div{border-left:1px solid var(--border);}
.diff-view__head .add-arrow{color:var(--added);}
.diff-view__head .rm-arrow{color:var(--removed);}

.diff-body{
  display:grid;grid-template-columns:1fr 1fr;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;
  max-height:75vh;overflow:auto;
}
.diff-col{
  border-left:1px solid var(--border);
  min-width:0;        /* allow grid track to actually shrink */
  overflow:hidden;    /* clip any visual spill into the neighbouring column */
}
.diff-col:first-child{border-left:none;}
.diff-row{
  display:flex;align-items:flex-start;gap:6px;
  padding:1px 10px 1px 7px;
  min-height:1.55em;white-space:pre-wrap;word-break:break-word;
  border-left:3px solid transparent;   /* primary change indicator */
}
.diff-row__num{
  flex:0 0 38px;text-align:right;color:var(--mute);user-select:none;
  font-size:10.5px;padding-top:1px;
}
.diff-row__marker{
  flex:0 0 12px;font-weight:bold;user-select:none;
}
.diff-row__text{flex:1;min-width:0;}

/* Row-level change indicator: subtle bg + bold left border in the change colour */
.diff-row--unchanged{background:transparent;color:var(--soft);}
.diff-row--added{
  background:rgba(16,185,129,.06);
  border-left-color:var(--added);
  color:var(--ink);
}
.diff-row--added .diff-row__marker,
.diff-row--added .diff-row__num{color:var(--added);}
.diff-row--removed{
  background:rgba(248,113,113,.06);
  border-left-color:var(--removed);
  color:var(--ink);
}
.diff-row--removed .diff-row__marker,
.diff-row--removed .diff-row__num{color:var(--removed);}
.diff-row--empty{
  background:rgba(0,0,0,.22);
  border-left-color:var(--surface3);
  color:transparent;
}
.diff-row--empty .diff-row__marker,
.diff-row--empty .diff-row__num{color:transparent;}

/* Word-level highlights INSIDE a modification pair — used when one line
   changed by just a few words. Background only; no strikethrough. Following
   GitHub / GitLab / Diffchecker convention: the colour itself signals the
   meaning, no need for line-through. */
.diff-word--added{
  background:rgba(16,185,129,.32);
  color:var(--ink);
  padding:0 2px;border-radius:2px;
}
.diff-word--removed{
  background:rgba(248,113,113,.32);
  color:var(--ink);
  padding:0 2px;border-radius:2px;
}

/* Inline (unified) view */
.diff-body--inline{display:block;}
.diff-body--inline .diff-row{padding:0 14px 0 11px;}

/* Empty state */
.diff-empty{padding:50px 24px;text-align:center;color:var(--mute);font-family:var(--mono);font-size:13px;}
.diff-empty strong{color:var(--soft);display:block;margin-bottom:6px;}

/* ── Stats panel ─────────────────────────────────────────── */
.stats-panel{
  display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:14px;
  margin:14px 0;
}
@media (max-width:900px){.stats-panel{grid-template-columns:1fr;}}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;
}
.stat-card__label{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--mute);margin:0 0 10px;display:flex;align-items:center;gap:6px;
}
.stat-card--left .stat-card__label{color:var(--accent);}
.stat-card--left .stat-card__label::before{content:'\25C6';font-size:7px;}
.stat-card--right .stat-card__label{color:var(--gold);}
.stat-card--right .stat-card__label::before{content:'\25C6';font-size:7px;}
.stat-card--similarity .stat-card__label{color:var(--accent-light);}
.stat-card--similarity .stat-card__label::before{content:'\25C6';font-size:7px;}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:3px 0;font-family:var(--mono);font-size:12.5px;}
.stat-row__name{color:var(--mute);text-transform:lowercase;letter-spacing:.04em;}
.stat-row__val{color:var(--ink);font-weight:500;}
.stat-row__val--ok{color:var(--added);}
.stat-row__val--del{color:var(--removed);}
.stat-row__val--big{font-size:18px;font-weight:600;}

/* Similarity gauge */
.similarity{display:flex;flex-direction:column;gap:8px;}
.similarity__big{
  font-family:var(--serif);font-size:34px;font-weight:400;line-height:1;
  color:var(--accent-light);
}
.similarity__sublabel{
  font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--mute);
}
.similarity__bar{
  height:6px;border-radius:3px;background:var(--bg);overflow:hidden;
  border:1px solid var(--border);
}
.similarity__bar-fill{
  height:100%;border-radius:3px;background:linear-gradient(90deg,var(--removed),var(--gold),var(--added));
  transition:width .3s ease;
}
.similarity__row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:12px;color:var(--mute);
  padding-top:2px;border-top:1px solid var(--border);margin-top:4px;
}
.similarity__row-label{text-transform:lowercase;letter-spacing:.04em;}
.similarity__row-val{color:var(--soft);font-weight:500;}
.similarity__hint{
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--gold);
  background:var(--gold-bg);border:1px solid var(--gold);border-radius:6px;
  padding:6px 9px;margin-top:8px;
}

/* ── View mode toggle bar ────────────────────────────────── */
.view-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:10px 14px;margin:14px 0;
}
.view-bar__legend{
  display:flex;align-items:center;gap:14px;margin-left:auto;
  font-size:12.5px;color:var(--soft);
}
.view-bar__legend span{display:inline-flex;align-items:center;gap:6px;}
.view-bar__legend .dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
}
.view-bar__legend .dot--add{background:var(--added);}
.view-bar__legend .dot--del{background:var(--removed);}

/* Toggle switch (sync scroll) */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;}
.switch input{position:absolute;opacity:0;pointer-events:none;}
.switch__track{
  width:34px;height:18px;background:var(--surface3);border-radius:99px;
  position:relative;transition:background .15s;border:1px solid var(--border);
}
.switch__track::after{
  content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;
  border-radius:50%;background:var(--soft);transition:all .15s;
}
.switch input:checked + .switch__track{background:var(--accent);border-color:var(--accent);}
.switch input:checked + .switch__track::after{left:17px;background:#fff;}
.switch__label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--mute);}

/* ── Documents (visual PDF) view ─────────────────────────── */
.docs-view{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px;
}
.docs-pane{
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.docs-pane__head{
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.docs-pane__title{
  font-family:var(--mono);font-size:11.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.docs-pane__meta{font-family:var(--mono);font-size:11px;color:var(--mute);white-space:nowrap;}
.docs-pane__scroll{
  background:#1a1f2c;border:1px solid var(--border);border-radius:8px;
  height:75vh;overflow:auto;padding:10px;
  scroll-behavior:auto; /* sync scroll handles smoothness itself */
}
.docs-pane__scroll::-webkit-scrollbar{width:10px;height:10px;}
.docs-pane__scroll::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px;}
.docs-page{
  margin:0 0 14px;background:#fff;border-radius:4px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
.docs-page__num{
  font-family:var(--mono);font-size:10.5px;color:var(--mute);
  padding:4px 0 6px;text-align:center;
}
.docs-loading{
  display:flex;align-items:center;justify-content:center;height:75vh;
  color:var(--mute);font-family:var(--mono);font-size:13px;text-align:center;
  background:#1a1f2c;border:1px solid var(--border);border-radius:8px;
}
.docs-loading__progress{display:block;margin-top:6px;color:var(--accent-light);}

/* ── EuKosmos family card (static) ──────────────────────── */
.euk-card{margin:24px 0 8px;}
.euk-card > h3{color:var(--gold);}
.euk-card p{color:var(--soft);margin:0 0 14px;font-size:13.5px;line-height:1.55;}
.euk-card p em{color:var(--gold);font-style:italic;font-family:var(--serif);}
.euk-family{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.euk-family__item{
  display:block;padding:12px 14px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;text-decoration:none;color:var(--ink);transition:all .12s ease;position:relative;
}
.euk-family__item:hover{
  border-color:var(--gold);background:var(--surface2);transform:translateY(-1px);
  text-decoration:none;box-shadow:0 8px 20px -12px var(--gold-bg);
}
.euk-family__item strong{display:block;font-family:var(--serif);font-style:italic;
  font-weight:400;font-size:17px;color:var(--gold);margin:0 0 4px;}
.euk-family__item span{display:block;font-size:12.5px;color:var(--soft);line-height:1.45;}
.euk-family__item::after{content:'\2197';position:absolute;top:12px;right:14px;
  color:var(--gold);font-size:14px;opacity:.6;}

/* ── Footer ──────────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--border);padding:24px 0;margin-top:30px;
  color:var(--mute);font-size:13px;text-align:center;
}
.footer a{color:var(--soft);}
.footer__row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:6px;}

/* status text */
.status{font-family:var(--mono);font-size:11.5px;color:var(--soft);}
.status--ok{color:var(--added);}
.status--warn{color:var(--gold);}
.status--err{color:var(--removed);}
.notice{
  background:var(--accent-bg);border:1px solid var(--accent);border-radius:8px;
  padding:10px 14px;font-size:12.5px;color:#b1e2f9;margin:8px 0;
}
.notice strong{color:var(--accent-light);}

/* Hidden file inputs */
.input-cell input[type=file]{display:none;}