/* ===== Meritocracy Research Portal — core styles ===== */
:root{
  --accent:#7a2836;
  --accent-ink:#5c1d27;
  --accent-soft:#f5ecee;
  --ink:#1f2328;
  --muted:#5c6570;
  --line:#d8dce1;
  --bg:#ffffff;
  --bg-soft:#f6f4f1;
  --serif:"Georgia","Times New Roman","Songti SC","Noto Serif SC","SimSun",serif;
  --sans:"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","Consolas","Courier New",monospace;
  --radius:6px;
  --shadow:0 1px 3px rgba(20,24,30,.08),0 4px 14px rgba(20,24,30,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:var(--serif);font-size:17px;line-height:1.7;
  -webkit-text-size-adjust:100%;
}
/* ===== i18n chrome toggle ===== */
html[data-lang="zh"] .i18n-en{display:none!important}
html[data-lang="en"] .i18n-zh{display:none!important}

/* ===== Layout ===== */
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
header.site{
  border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20;
}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 10px}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand .name{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.2px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .sub{font-size:13px;color:var(--muted);white-space:nowrap}
.lang-toggle{
  font-family:var(--sans);font-size:13px;border:1px solid var(--line);background:var(--bg);
  color:var(--ink);padding:6px 12px;border-radius:999px;cursor:pointer;flex:0 0 auto;
}
.lang-toggle:hover{border-color:var(--accent);color:var(--accent)}
nav.main{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:-1px}
nav.main a{
  font-family:var(--sans);font-size:14.5px;color:var(--muted);text-decoration:none;
  padding:9px 13px 11px;border-bottom:2px solid transparent;white-space:nowrap;
}
nav.main a:hover{color:var(--accent)}
nav.main a.active{color:var(--accent);border-bottom-color:var(--accent)}
main{padding:30px 0 60px;min-height:70vh}
footer.site{border-top:1px solid var(--line);background:var(--bg-soft);padding:26px 0 34px;color:var(--muted);font-size:14px}
footer.site a{color:var(--accent)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ===== Typography ===== */
h1,h2,h3,h4{font-family:var(--serif);line-height:1.3;color:var(--ink);font-weight:700}
h1{font-size:30px;margin:.2em 0 .4em}
h2{font-size:24px;margin:1.6em 0 .5em;padding-bottom:.25em;border-bottom:2px solid var(--line)}
h2 .sec-en{font-weight:400;color:var(--muted);font-size:.6em;display:block;letter-spacing:.02em}
h3{font-size:19px;margin:1.4em 0 .4em}
h4{font-size:17px;margin:1.2em 0 .3em}
p{margin:.6em 0 1em}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-ink)}
.lede{font-size:19px;color:#3a414a;max-width:60em}
.zh-only-en-tip{color:var(--muted);font-size:13px;font-family:var(--sans)}
.f-en{font-weight:400}
.f-zh{color:var(--muted)}
.original{font-style:italic}
.muted{color:var(--muted)}
.small{font-size:13.5px}

/* ===== Hero ===== */
.hero{padding:34px 0 14px}
.hero h1{margin-top:0;font-size:34px}
.hero .badges{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.badge{font-family:var(--sans);font-size:12.5px;color:var(--accent);background:var(--accent-soft);border:1px solid #e6cfd4;padding:4px 11px;border-radius:999px}

/* ===== Cards ===== */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  padding:16px 18px;display:flex;flex-direction:column;gap:8px;
  transition:box-shadow .15s,border-color .15s;position:relative;
}
.card:hover{box-shadow:var(--shadow);border-color:#c3c9d1}
.card .card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.card .type{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:999px;flex:0 0 auto}
.card h3{font-size:17.5px;margin:0;line-height:1.4}
.card .byline{font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.card .abs{font-size:14.5px;color:#333a42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-family:var(--sans);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}
.card .actions{margin-top:auto;display:flex;gap:10px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-family:var(--sans);font-size:12px;color:#40464e;background:var(--bg-soft);border:1px solid var(--line);padding:1px 9px;border-radius:999px}

/* ===== Controls ===== */
.controls{display:flex;flex-direction:column;gap:14px;margin:0 0 22px}
.search-row{display:flex;gap:10px;flex-wrap:wrap}
.search-row input[type=search]{flex:1 1 260px;min-width:220px}
.field{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:14px;color:var(--muted)}
select,input[type=search],input[type=number]{
  font-family:var(--sans);font-size:14.5px;padding:8px 11px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);
}
select:focus,input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fbtn{
  font-family:var(--sans);font-size:13px;padding:5px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:#40464e;
}
.fbtn:hover{border-color:var(--accent);color:var(--accent)}
.fbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.fbtn-group-label{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-right:2px}
.resultbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.count{font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:0 0 20px}
.tabbtn{
  font-family:var(--sans);font-size:15px;padding:9px 18px;cursor:pointer;background:none;border:none;
  border-bottom:2px solid transparent;color:var(--muted);
}
.tabbtn:hover{color:var(--accent)}
.tabbtn.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
button.btn,.btn{
  font-family:var(--sans);font-size:13.5px;padding:7px 14px;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
button.btn:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
button.btn.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.btn.primary:hover{background:var(--accent-ink);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ===== Detail modal ===== */
dialog.detail{
  border:1px solid var(--line);border-radius:10px;padding:0;max-width:760px;width:calc(100vw - 40px);
  max-height:min(86vh,900px);overflow:auto;box-shadow:0 12px 44px rgba(20,24,30,.28);
}
dialog.detail::backdrop{background:rgba(25,28,32,.45)}
.detail-inner{padding:26px 30px 30px}
.detail-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.detail-head h2{margin:0;border:none;padding:0;font-size:23px}
.detail-body h3{font-size:15.5px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:1.4em 0 .3em}
.detail-body p{margin:.2em 0 .6em}
.close-x{font-family:var(--sans);font-size:22px;line-height:1;border:none;background:none;cursor:pointer;color:var(--muted);padding:2px 6px}
.close-x:hover{color:var(--accent)}
.kv{font-family:var(--sans);font-size:14px}
.kv b{color:#333}
.rel-links{display:flex;flex-wrap:wrap;gap:8px}

/* ===== Empty / notice ===== */
.notice{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--accent);padding:14px 18px;border-radius:var(--radius);font-size:15px}
.empty{padding:40px 0;color:var(--muted);font-family:var(--sans)}

/* ===== Concept page: timeline & term tables ===== */
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--line);margin-left:6px}
.timeline li{position:relative;padding:0 0 22px 26px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px var(--accent)}
.timeline .year{font-family:var(--sans);font-weight:600;color:var(--accent);font-size:14px}
table.terms{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0 20px}
table.terms th,table.terms td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
table.terms th{background:var(--bg-soft);font-family:var(--sans);font-size:13.5px;color:#333}
table.terms td:first-child{font-weight:600;white-space:nowrap}

/* ===== Sections w/ prose ===== */
.prose{max-width:78ch}
.prose li{margin:.35em 0}
blockquote{margin:1em 0;padding:.2em 1.1em;border-left:3px solid var(--accent);color:#3a414a;background:var(--accent-soft);border-radius:0 4px 4px 0}
code{font-family:var(--mono);font-size:.86em;background:var(--bg-soft);padding:.1em .4em;border-radius:4px}
pre{max-width:100%;overflow-x:auto;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
pre code{background:none;padding:0}

/* ===== Responsive ===== */
@media (max-width:720px){
  body{font-size:16px}
  table.terms{display:block;overflow-x:auto}
  table.terms th,table.terms td{white-space:nowrap}
  .brand .sub{display:none}
  h1{font-size:25px}
  .hero h1{font-size:28px}
  .cardgrid{grid-template-columns:1fr}
  nav.main a{padding:8px 10px 10px;font-size:13.5px}
  .detail-inner{padding:20px}
}
@media (max-width:460px){
  .brand-row{flex-wrap:wrap}
  .lang-toggle{order:-1}
}
/* ===== Print ===== */
@media print{
  header.site,footer.site,.controls,.tabs,.no-print,button{display:none!important}
  body{font-size:12pt;color:#000;background:#fff}
  main{padding:0}
  .card{break-inside:avoid;border:1px solid #999}
  a{color:#000;text-decoration:none}
  .i18n-en,.i18n-zh{display:inline!important}
  dialog.detail{position:static;box-shadow:none;border:none;max-width:100%;width:100%}
}