/* ============================================================================
   research — سامانهٔ پژوهش
   Self-hosted stylesheet (no CDN, no webfonts — system fonts only).
   Organization: 1 tokens · 2 base · 3 layout · 4 components · 5 modals
                 6 utilities · 7 responsive
   All font sizes are rem: the A−/A+ control scales the root font-size.
   ========================================================================== */

/* ---------- 1. design tokens ---------- */
:root{
  /* palette — warm paper / manuscript */
  --bg:#f4f1ea; --panel:#fffdf8; --panel-2:#faf6ee;
  --ink:#2b2620; --muted:#6d655a;
  --line:#ddd4c4; --line-soft:#e8e1d3;
  --accent:#7c4a2d; --accent-2:#a9743f; --accent-soft:#f3e7da;
  --chip:#efe7d6; --hi:#fff6e6;
  --danger:#9c3327; --danger-soft:#f7e5e2; --ok:#3a6b47;

  /* geometry */
  --r-s:7px; --r-m:10px; --r-l:14px;
  --shadow-1:0 1px 2px rgba(43,38,32,.05);
  --shadow-2:0 10px 32px rgba(43,38,32,.16);
  --focus:0 0 0 3px rgba(169,116,63,.28);

  /* type scale (rem) */
  --fs-xs:.75rem; --fs-s:.8125rem; --fs-m:.875rem;
  --fs-base:.9688rem; --fs-l:1.125rem; --fs-xl:1.25rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1e1b17; --panel:#272320; --panel-2:#2d2823;
    --ink:#ece5d8; --muted:#a89f90;
    --line:#3c352d; --line-soft:#332d26;
    --accent:#d79a6a; --accent-2:#c78a53; --accent-soft:#3a2f24;
    --chip:#332d26; --hi:#33291c;
    --danger:#e0776b; --danger-soft:#3d2723; --ok:#7bbf8c;
    --shadow-1:0 1px 2px rgba(0,0,0,.25);
    --shadow-2:0 10px 32px rgba(0,0,0,.5);
    --focus:0 0 0 3px rgba(215,154,106,.30);
  }
}

/* ---------- 2. fonts (all self-hosted, no CDN) ----------
   Primary: IRANSansX (Digikala's font, commercial) — NOT bundled for licensing
   reasons. If you own it, copy IRANSansX-Regular.woff2 / IRANSansX-Bold.woff2
   into app/web/ and it is picked up automatically.
   Bundled fallback: Vazirmatn (open source, OFL) — clean Persian digits. */
@font-face{
  font-family:"IRANSansX";font-style:normal;font-weight:400;font-display:swap;
  src:url("IRANSansX-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"IRANSansX";font-style:normal;font-weight:700;font-display:swap;
  src:url("IRANSansX-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"Vazirmatn";font-style:normal;font-weight:400;font-display:swap;
  src:url("Vazirmatn-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Vazirmatn";font-style:normal;font-weight:700;font-display:swap;
  src:url("Vazirmatn-Bold.woff2") format("woff2");
}

/* ---------- 2b. base ---------- */
*{box-sizing:border-box}
html{scrollbar-color:var(--line) transparent}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"IRANSansX","Vazirmatn",Tahoma,"Segoe UI",sans-serif;
  font-size:var(--fs-base);line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-2);color:#fff}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-s)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--muted);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 3. layout: header / nav / page ---------- */
header{
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:10px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow-1);
}
header h1{font-size:var(--fs-l);margin:0;color:var(--accent);white-space:nowrap;letter-spacing:.2px}
.stats{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:var(--fs-s);margin-inline-start:auto}
.stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.fontctl{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--muted)}
.fontctl button{
  background:var(--chip);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-s);padding:3px 9px;cursor:pointer;font-family:inherit;
  font-size:var(--fs-s);min-width:34px;transition:border-color .15s,color .15s,background .15s;
}
.fontctl button:hover{border-color:var(--accent);color:var(--accent)}

nav{
  display:flex;gap:2px;padding:0 14px;background:var(--panel);
  border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;           /* swipeable on phones */
}
nav::-webkit-scrollbar{display:none}
nav button{
  background:none;border:none;color:var(--muted);padding:11px 16px;cursor:pointer;
  font-family:inherit;font-size:var(--fs-base);border-bottom:3px solid transparent;
  white-space:nowrap;transition:color .15s;
}
nav button:hover{color:var(--accent-2)}
nav button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:bold}

.layout{display:flex;gap:14px;padding:14px;align-items:flex-start;max-width:1500px;margin:0 auto}
.side{flex:0 0 262px;position:sticky;top:64px}
.main{flex:1;min-width:0}

/* ---------- 4. components ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:13px;margin-bottom:12px;box-shadow:var(--shadow-1);
}
.card h3{margin:0 0 8px;font-size:var(--fs-m);color:var(--accent-2);letter-spacing:.2px}

label{display:block;font-size:var(--fs-s);color:var(--muted);margin:9px 0 4px}
input,select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:var(--fs-m);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-2);box-shadow:var(--focus)}
textarea{resize:vertical;min-height:100px;line-height:2}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
.row2{display:flex;gap:8px;flex-wrap:wrap}.row2>*{flex:1;min-width:120px}

button.btn{
  background:var(--accent);color:#fff;border:1px solid transparent;border-radius:var(--r-s);
  padding:9px 14px;cursor:pointer;font-family:inherit;font-size:var(--fs-m);
  transition:filter .15s,background .15s,transform .05s;
}
button.btn:hover{filter:brightness(1.08)}
button.btn:active{transform:translateY(1px)}
button.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
button.btn.ghost:hover{background:var(--accent-soft);filter:none}
button.btn.sm{padding:5px 11px;font-size:var(--fs-s)}
button.btn.warn{background:var(--danger)}
button.btn.warn.ghost,button.btn.ghost.warn{background:transparent;color:var(--danger);border-color:var(--danger)}

.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.toolbar .grow{flex:1;min-width:180px}
.search{position:relative}
.search input{padding-inline-start:34px;font-size:var(--fs-base)}
.search::before{content:"🔍";position:absolute;inset-inline-start:10px;top:8px;opacity:.45;font-size:.9em;pointer-events:none}

/* tables */
.tablewrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--panel);box-shadow:var(--shadow-1);
}
table{width:100%;border-collapse:collapse;background:var(--panel);min-width:560px}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
th{
  background:var(--chip);font-size:var(--fs-s);color:var(--muted);
  white-space:nowrap;position:sticky;top:0;z-index:5;
}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--accent)}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:var(--hi)}

.yr{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent-2);font-size:var(--fs-s)}
.pg{white-space:nowrap;color:var(--muted);font-size:var(--fs-s);font-variant-numeric:tabular-nums}
.src{font-size:var(--fs-s);color:var(--muted)}

.chip{
  display:inline-block;background:var(--chip);border-radius:20px;
  padding:2px 10px;margin:2px;font-size:var(--fs-xs);color:var(--ink);
}
.chip.k{cursor:pointer;transition:background .15s,color .15s}
.chip.k:hover{background:var(--accent);color:#fff}
.pill{
  background:var(--chip);border-radius:20px;padding:2px 9px;
  font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;
}
.count{color:var(--muted);font-size:var(--fs-s);margin-bottom:6px}

details>summary{cursor:pointer;color:var(--muted);transition:color .15s}
details>summary:hover{color:var(--accent-2)}

/* ---------- 5. modals / overlays ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(20,16,12,.5);display:none;
  align-items:center;justify-content:center;z-index:50;padding:20px;
  backdrop-filter:blur(2px);
}
.overlay.open{display:flex;animation:fadein .12s ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--panel);border-radius:var(--r-l);border:1px solid var(--line);
  max-width:min(760px,calc(100vw - 24px));width:100%;max-height:90vh;
  overflow:auto;padding:20px;box-shadow:var(--shadow-2);
  animation:pop .14s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.modal.wide{max-width:min(980px,calc(100vw - 24px));display:flex;flex-direction:column;overflow:hidden}
.modal h2{margin:0 0 4px;font-size:var(--fs-l);color:var(--accent)}
.close{float:left;cursor:pointer;color:var(--muted);font-size:1.375rem;border:none;background:none;line-height:1}
.close:hover{color:var(--danger)}

/* scrollable sub-list inside a modal (events of a source / keyword) */
.subwrap{
  flex:1;min-height:120px;max-height:46vh;overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-s);margin-top:8px;
}
.subwrap table{border-radius:0;min-width:520px;box-shadow:none}
.subwrap thead th{position:sticky;top:0;z-index:1;background:var(--chip);cursor:default}
.subwrap thead th:hover{color:var(--muted)}
.subwrap td{font-size:var(--fs-s);padding:8px 10px}
.wrapcell{word-break:break-word;overflow-wrap:anywhere;line-height:1.9}
.sechead{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.sechead h3{margin:0;font-size:var(--fs-m);color:var(--accent-2)}
.sechead .search{flex:1;min-width:180px}
.sechead .search input{padding:6px 10px;padding-inline-start:32px;font-size:var(--fs-s)}

.kv{display:flex;gap:8px;margin:7px 0;font-size:var(--fs-m)}
.kv .k{flex:0 0 95px;color:var(--muted)}
.raw{
  white-space:pre-wrap;background:var(--bg);border:1px dashed var(--line);
  border-radius:var(--r-s);padding:11px;font-size:var(--fs-m);line-height:2.1;
  max-height:240px;overflow:auto;
}

.toast{
  position:fixed;bottom:18px;inset-inline-start:18px;background:var(--ok);color:#fff;
  padding:10px 16px;border-radius:var(--r-s);z-index:80;display:none;
  box-shadow:var(--shadow-2);font-size:var(--fs-m);
}

/* ---------- 6. utilities / one-offs ---------- */
.muted{color:var(--muted)}
.tiny{font-size:var(--fs-xs)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.conv{display:flex;gap:6px;align-items:end;flex-wrap:wrap}.conv>div{flex:1;min-width:110px}
.convout{font-size:var(--fs-m);color:var(--accent-2);margin-top:8px;line-height:2.1}
a.link{color:var(--accent);cursor:pointer;text-decoration:none}
a.link:hover{text-decoration:underline}

/* ---------- 7. responsive ---------- */
@media (max-width: 920px){
  .layout{flex-direction:column;align-items:stretch;padding:10px}
  .side{position:static;flex:none;width:100%;max-width:100%}
  .main{width:100%;max-width:100%}
  .tablewrap{max-width:100%}
  .side .card{margin-bottom:10px}
  header{padding:8px 12px;gap:10px}
  .stats{display:none}                 /* keep the header light on phones */
}
@media (max-width: 560px){
  header h1{font-size:var(--fs-base)}
  .layout{padding:8px}
  .overlay{padding:8px}
  .modal{padding:14px;max-height:94vh}
  .kv{flex-direction:column;gap:2px}
  .kv .k{flex:none}
  th,td{padding:8px 9px}
  .toolbar .grow{min-width:130px}
}