/* stats.css - cards, year bars and tables shared by stats.html and cv_failures.html */

/* summary cards */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0.6em 0 1.0em 0;
}
.stats-card{
  border: 1px solid #dddddd;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 10px 12px;
}
.stats-card .k{ font-size: 0.92em; color: #333; margin-bottom: 6px; }
.stats-card .v{ font-size: 1.6em; font-weight: 700; line-height: 1.0; }
.stats-card .sub{ font-size: 0.82em; color: #777; margin-top: 4px; }

.stats-note{
  font-size: 0.92em;
  color: #555;
  margin: 0.2em 0 0.8em 0;
}

/* legend */
.legend{ font-size: 0.9em; color: #555; margin: 0.2em 0 0.8em 0; }
.legend span{ display: inline-block; margin-right: 1.1em; }
.legend i{
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 5px; vertical-align: -1px;
}

/* one horizontal bar per year */
.yr-bars{ margin: 0.4em 0 1.2em 0; }
.yr-row{
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) 2.4em;
  column-gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.yr-row:last-child{ border-bottom: none; }
.yr-year{ font-weight: 700; color: #333; }
.yr-bar{
  display: flex; height: 14px; border-radius: 3px; overflow: hidden;
  background: #f1f1f1;
}
.yr-bar span{ display: block; height: 100%; }
.yr-count{ text-align: right; font-weight: 700; color: #333; }

/* series colors */
.c-paper, .c-lead    { background: #527bbd; }
.c-fellowship, .c-coauthor{ background: #cd7b62; }
.c-travel            { background: #e0a458; }
.c-paper_award       { background: #a67c52; }
.c-grant             { background: #6aa36a; }
.c-job               { background: #8e6bb5; }
.c-internship        { background: #c9a227; }
.c-proposal          { background: #4fa3a5; }
.c-competition       { background: #b5656b; }
.c-commitment        { background: #7a7a7a; }
.c-degree            { background: #80a0b0; }
.c-rate              { background: #6aa36a; }

/* tables */
.stats-table .abbr{ display: none; }
@media (max-width: 800px){ .stats-table .abbr{ display: inline; } }
.stats-table{ width: 100%; border: none; }
.stats-table td{ text-align: left; border: none; border-bottom: 1px solid #eee; padding: 5px 6px; }
.stats-table tr.heading td{ font-weight: 700; border-bottom: 2px solid #ccc; }
.stats-table td.num{ text-align: right; }
.stats-table .mini{ display: inline-block; height: 8px; background: #6aa36a; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* mini line used on the home page */
.mini-stats{ font-size: 0.95em; color: #444; }
.mini-stats .k{ color: #222; }
.mini-stats .v{ font-weight: 700; }
.mini-stats .sep{ margin: 0 0.4em; color: #999; }

@media (max-width: 800px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stats-table{ table-layout: fixed; }
  .stats-table td{ padding: 5px 3px; font-size: 0.9em; overflow-wrap: anywhere; }
  .stats-table td.num{ width: 4.4em; }
  .stats-table .full{ display: none; }
  .stats-table .mini{ display: none; }
  #acc-table td:nth-child(4), #acc-table td:nth-child(8), #acc-table td:nth-child(9){ display: none; }   /* narrower table on phones */
  .stats-card .v{ font-size: 1.4em; }
  .yr-row{ grid-template-columns: 3.2em minmax(0, 1fr) 2.2em; }
}

/* paper journeys */
.jr-table td.path{ font-size: 0.88em; line-height: 1.7; overflow-wrap: anywhere; }
.jr-table .step{ white-space: nowrap; }
@media (max-width: 800px){ .jr-table .step{ white-space: normal; } }  /* long journal names must wrap on phones */
.jr-table .step.accepted{ color: #3d7a3d; font-weight: 700; }
.jr-table .step.rejected{ color: #a4483a; }
.jr-table .step.under_review{ color: #666; }
.jr-table .step.preprint, .jr-table .step.withdrawn{ color: #888; font-style: italic; }
.jr-table .arrow{ color: #bbb; margin: 0 0.35em; }
details.stats-details summary{ cursor: pointer; color: #224b8d; font-size: 0.95em; margin: 0.2em 0 0.6em 0; }

.lineage{ margin: 0.3em 0 0.6em 0; }
.ln-row{ display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; padding: 4px 0; position: relative; }
.ln-row::before{ content: ""; position: absolute; left: 8px; top: 0; bottom: 0; border-left: 2px solid #e2e2e2; }
.ln-row:first-child::before{ top: 50%; }
.ln-row:last-child::before{ bottom: 50%; }
.ln-dot{ width: 10px; height: 10px; border-radius: 50%; background: #527bbd; margin: 6px 0 0 3px; position: relative; z-index: 1; }
.ln-body .n{ color: #777; font-size: 0.9em; }

.erdos{ margin: 0.4em 0 0.8em 0; }
.erdos .stats-card{ display: inline-block; min-width: 260px; }
.erdos .sub{ white-space: normal; }

/* collapsible sections + TOC */
#toc{ background: #f8f8f8; border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; margin: 0.6em 0 1em 0; font-size: 0.92em; }
#toc .toc-head{ margin-bottom: 4px; color: #333; }
#toc .toc-links a{ display: inline-block; margin: 2px 10px 2px 0; }
#toc .toc-links a.dim{ color: #888; }

/* form guide */
.form{ display: flex; gap: 4px; margin: 0.2em 0 0.3em 0; }
.pill{ display: inline-flex; width: 24px; height: 24px; border-radius: 6px; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85em; }
.pill.accepted{ background: #6aa36a; }
.pill.rejected{ background: #cd7b62; }
.stats-table td.pos{ color: #3d7a3d; font-weight: 700; }
.stats-table td.neg{ color: #a4483a; font-weight: 700; }
.stats-table tr.total td{ border-top: 2px solid #ccc; font-weight: 700; }

.pill.small{ width: 18px; height: 18px; font-size: 0.75em; border-radius: 4px; }
.venue-form{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; margin: 0.3em 0 1em 0; }
.vf-row{ display: grid; grid-template-columns: 6em 1fr auto; align-items: center; column-gap: 8px; font-size: 0.9em; padding: 2px 0; border-bottom: 1px solid #f0f0f0; }
.vf-venue{ font-weight: 700; color: #333; }
.vf-pills{ display: flex; gap: 3px; }
.vf-rec{ color: #666; white-space: nowrap; }

/* submission barcode */
.barcode{ margin: 0.4em 0 1em 0; }
.bc-year{ display: grid; grid-template-columns: 3.2em 1fr 5em; align-items: center; column-gap: 10px; padding: 3px 0; border-bottom: 1px solid #f0f0f0; }
.bc-label{ font-weight: 700; color: #333; }
.bc-count{ font-size: 0.85em; color: #666; text-align: right; white-space: nowrap; }
.bc-strip{ position: relative; height: 44px; display: flex; align-items: center; gap: 3px; }
.bc-strip::before{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #ccc; }
.bc{ display: inline-block; width: 9px; border-radius: 2px; opacity: 0.85; position: relative; }
/* phones: a busy year (25+ submissions) must not widen the page -- bars shrink to fit the strip instead */
@media (max-width: 800px){
  .bc-year{ grid-template-columns: 3.2em minmax(0, 1fr) 5em; }
  .bc-strip{ gap: 1px; min-width: 0; }
  .bc{ width: auto; flex: 0 1 9px; min-width: 2px; }
}
.bc.accepted{ height: 20px; margin-bottom: 20px; }
.bc.rejected{ height: 14px; margin-top: 16px; opacity: 0.6; }
.bc:hover{ opacity: 1; outline: 2px solid #333; }
.year-label{ font-weight: 700; color: #333; }

/* Altmetric badges */
.alt-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 10px; margin: 0.4em 0 1em 0; }
.alt-card{ text-align: center; font-size: 0.82em; line-height: 1.3; }
.alt-card .altmetric-embed{ display: flex; justify-content: center; min-height: 64px; }
.alt-card .alt-title{ margin-top: 4px; color: #333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.alt-card .alt-sub{ color: #888; font-size: 0.9em; }
.alt-card.quiet{ opacity: 0.45; }
.alt-card.quiet:hover{ opacity: 1; }

/* ECharts containers */
.chart{ width: 100%; height: 260px; margin: 0.2em 0 1em 0; }
/* on phones the layout table grows to its widest child; a chart drawn at a fixed px width would hold it open */
@media (max-width: 800px){ .chart{ max-width: calc(100vw - 48px); overflow: hidden; } }
.chart.short{ height: 220px; }
.chart.tall{ height: 460px; border: 1px solid #eee; border-radius: 6px; }
#net-min, #net-color{ font-family: inherit; font-size: 0.95em; }
.net-controls{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.92em; color: #555; margin: 0.2em 0 0.6em 0; }
.net-controls button{ font-family: inherit; font-size: 0.95em; padding: 2px 10px; border: 1px solid #c9d6ea; background: #eef2f8; color: #224b8d; border-radius: 4px; cursor: pointer; }
.net-controls button:hover{ background: #e2e9f5; }
.net-controls input[type=range]{ flex: 1 1 140px; max-width: 320px; accent-color: #527bbd; }
.net-controls .year-label{ font-weight: 700; color: #333; min-width: 6em; }
.net-controls .sep{ color: #ccc; }
.chart-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px){ .chart-row{ grid-template-columns: 1fr; } }

/* CV of Failures: question cards with small unlabeled pictures, each opening a stats section */
.explore-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0.6em 0 0.8em 0; }
@media (max-width: 800px){ .explore-grid{ grid-template-columns: minmax(0, 1fr); } }
.explore-card{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid #e4e4e4; border-radius: 8px;
  background: #fff; text-decoration: none !important; color: inherit; transition: border-color .15s, box-shadow .15s; }
.explore-card:hover{ border-color: #527bbd; box-shadow: 0 2px 8px rgba(82,123,189,.12); }
.explore-card .ex-q{ font-size: 0.95em; color: #333; }
.explore-card .ex-pic svg{ display: block; width: 100%; height: 70px; }

/* CV of Failures: the PDF, one compact line near the top */
.pdf-box{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0.5em 0 1em 0; }
.pdf-btn{ padding: 3px 10px; border-radius: 5px; background: #527bbd; color: #fff !important; white-space: nowrap;
  font-size: 0.92em; font-weight: 600; text-decoration: none !important; }
.pdf-btn:hover{ background: #3f66a8; }
.pdf-meta{ font-size: 0.86em; color: #777; white-space: nowrap; }
.pdf-toggle{ font: inherit; font-size: 0.86em; color: #527bbd; background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap; }
.pdf-toggle:hover{ text-decoration: underline; }
.pdf-frame object{ width: 100%; height: 760px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 1em; }
@media (max-width: 800px){ .pdf-frame object{ height: 520px; } }