/* muscledb theme v12 ------------------------------------------------------
 * Anatomy reference. Latin names in an italic serif (scientific convention);
 * arteries / veins / nerves colour-coded red / blue / amber.
 * If `curl .../css/custom.css | grep "theme v12"` matches, the live file is current.
 * --------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,600;1,400;1,500&display=swap');

:root {
  --page:    #eef1f4;
  --surface: #ffffff;
  --ink:     #1b2127;
  --muted:   #5b6770;
  --hair:    #e2e6ea;
  --accent:  #a32638;
  --accent-d:#7c1b2b;
  --artery:  #c0392b;
  --vein:    #2d6ca2;
  --nerve:   #b9871f;
  --bar:     #20262b;
}

/* ---------- base ---------- */
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-d); text-decoration: underline; }
.container { max-width: 760px; }

/* ---------- navigation ---------- */
nav { float: left; width: 100%; background: var(--bar); overflow: hidden; position: relative; }
nav ul {
  list-style: none; margin: 0; padding: 4px 0;
  left: 0 !important; float: none !important; width: 100%; height: auto !important;
  display: flex; flex-wrap: wrap; justify-content: center;
}
nav ul li { right: 0 !important; float: none !important; margin: 0; padding: 0; }
nav ul li a {
  display: block; padding: 14px 18px; background: transparent;
  color: #e7ebee; font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em;
}
nav ul li a:hover { background: #2c343a; color: #fff; text-decoration: none; }
nav ul li a.active, nav ul li a.active:hover {
  background: transparent; color: #fff; font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent);
}

/* ---------- content column width ---------- */
/* The nav lives alone in #main.container — let that container span the full
 * viewport so the dark bar is edge-to-edge. The separate content container
 * below keeps its centered max-width. */
div#main.container { max-width: 100%; width: 100%; padding: 0; margin: 0; text-align: center; }
/* The pages put content in a narrow "four columns" slot — fine on phones
 * (full width), too narrow on desktop. Widen + re-center above Skeleton's
 * 550px breakpoint. */
@media (min-width: 550px) {
  .four.columns.offset-by-four { width: 62% !important; margin-left: 19% !important; }
}

/* ---------- search (index) ---------- */
input#searchterm {
  width: 100%; height: 46px; padding: 0 14px; font-size: 1.05rem;
  border: 1px solid var(--hair); border-radius: 8px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(20,30,40,0.04); transition: border-color .15s, box-shadow .15s;
}
input#searchterm:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(163,38,56,0.12); }

table#muscleResults { width: 100% !important; max-width: 100%; }

/* search results: tidy cards (search table has no <th>) */
table#muscleResults { border: none !important; border-collapse: separate; border-spacing: 0 6px; margin-top: 14px; }
td#muscleResultItem {
  padding: 0; background: var(--surface); border: 1px solid var(--hair); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20,30,40,0.04); font-size: 0.98rem; transition: border-color .12s, box-shadow .12s;
}
td#muscleResultItem:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(163,38,56,0.12); }
td#muscleResultItem a { display: block; padding: 11px 14px; color: var(--ink); }
td#muscleResultItem a:hover { color: var(--accent); text-decoration: none; }

/* ---------- detail card (muscle / artery / vein / nerve) ---------- */
/* Detail tables have <th> label cells; the search table does not. */
#muscleResults:has(th) {
  background: var(--surface); border: 1px solid var(--hair) !important; border-radius: 12px;
  box-shadow: 0 4px 18px rgba(20,30,40,0.06); border-spacing: 0; margin-top: 6px;
  overflow: hidden; text-align: left; table-layout: fixed;
}
#muscleResults:has(th) th, #muscleResults:has(th) td {
  padding: 11px 18px; border-bottom: 1px solid var(--hair);
  vertical-align: top; overflow-wrap: anywhere;
}
#muscleResults:has(th) tr:last-child th, #muscleResults:has(th) tr:last-child td { border-bottom: none; }
/* larger, readable value text in the detail card */
#muscleResults:has(th) td { font-size: 1.15rem; line-height: 1.45; }

/* label column (data rows). Title rows span via colspan and are handled below. */
#muscleResults:has(th) th {
  width: 30%; color: var(--muted); font-weight: 700; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: normal;
}

/* Hero: Latin name — first row on every detail page. colspan makes it span;
 * no display:block (that would shrink-wrap and stack the words). */
#muscleResults tbody tr:first-child > th,
#muscleResults tbody tr.m-latin > th {
  width: auto; text-align: center; text-transform: none; letter-spacing: 0;
  font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 2rem; line-height: 1.2; color: var(--ink);
  background: #fbfcfd; padding: 22px 18px 6px; border-bottom: none;
}
/* Subtitle: English name */
#muscleResults tbody tr:nth-child(2) > th,
#muscleResults tbody tr.m-english > th {
  width: auto; text-align: center; text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 1.2rem; color: var(--muted);
  background: #fbfcfd; padding: 0 18px 18px; border-bottom: 1px solid var(--hair);
}
/* Group breadcrumb */
#muscleResults tbody tr.m-groups > td {
  text-align: center; font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 1.4rem; color: var(--muted); background: #fbfcfd;
}

/* Anatomy colour-coding */
#muscleResults tr.m-artery th { color: var(--artery); }
#muscleResults tr.m-vein   th { color: var(--vein); }
#muscleResults tr.m-nerve  th { color: var(--nerve); }
#muscleResults tr.m-vessel td { box-shadow: inset 3px 0 0 var(--hair); }
#muscleResults tr.m-artery td { box-shadow: inset 3px 0 0 var(--artery); }
#muscleResults tr.m-vein   td { box-shadow: inset 3px 0 0 var(--vein); }
#muscleResults tr.m-nerve  td { box-shadow: inset 3px 0 0 var(--nerve); }
#muscleResults .m-none { color: #aab2b8; font-size: 1.15rem; }

/* Detail layout: info card + image card side by side on wide screens, so the
 * whole image is visible without scrolling. Stacks on narrow screens. */
.m-detail { text-align: left; }
@media (min-width: 900px) {
  /* two-column detail needs more room than the default 760px content slot */
  .container:has(.m-detail:not(.m-detail-noimg)) { max-width: 1120px; }
  #view:has(.m-detail:not(.m-detail-noimg)) { width: 92% !important; margin-left: 4% !important; }
  .m-detail:not(.m-detail-noimg) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px; align-items: start;
  }
}
/* Image card */
.m-media {
  margin: 0; padding: 16px; background: #fbfcfd;
  border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: 0 4px 18px rgba(20,30,40,0.06);
  display: flex; align-items: center; justify-content: center;
}
.m-media img {
  max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto;
  object-fit: contain; border-radius: 8px; border: 1px solid var(--hair);
}
@media (min-width: 700px) { .m-media { position: sticky; top: 16px; } }
.m-detail #muscleResults { margin-top: 0; }
img.m-img-missing { border: 1px dashed var(--hair); }

/* Back link */
.back-link { display: inline-block; margin: 0 0 12px; font-weight: 600; font-size: 0.95rem; }
.back-link::before { content: "\2039  "; }
.muted { color: var(--muted); }

/* ---------- group tree (groups.html) ---------- */
div#grouplist { text-align: left; }
div#grouplist > ul {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: 0 4px 18px rgba(20,30,40,0.06); padding: 18px 22px;
}
div#grouplist ul { list-style: none !important; padding-left: 14px; }
div#grouplist li { margin: 3px 0; list-style: none !important; }
div#grouplist li[style*="bold"] {
  font-family: 'Newsreader', Georgia, serif; font-style: normal; font-weight: 600;
  font-size: 1.05rem; color: var(--ink); margin-top: 10px;
}
/* muscle leaf list: kill the inline square marker, use one red dot */
ul[id^="ml"], ul[id^="ml"] li { list-style: none !important; }
ul[id^="ml"] { padding-left: 6px; }
ul[id^="ml"] li::before { content: "\2022"; color: var(--accent); margin-right: 8px; }
ul[id^="ml"] li a { font-family: 'Newsreader', Georgia, serif; font-style: italic; }

/* ---------- vessel ancestor path (breadcrumb, inside the header block) ---------- */
/* when a path row follows the english name, the divider moves below the path */
#muscleResults tbody tr.m-english:has(+ tr.vessel-path-row) > th { border-bottom: none !important; }
#muscleResults tr.vessel-path-row td {
  background: #fbfcfd;
  border-top: none !important;
  padding: 0 18px 16px !important;
}
.vessel-path {
  font-size: 0.8rem;
  line-height: 1.7;
  color: #8a929a;
  text-align: center;
}
.vessel-path a { color: #8a929a; text-decoration: none; }
.vessel-path a:hover { color: var(--accent); text-decoration: underline; }
.vessel-path .sep { margin: 0 0.45em; color: #c7ced4; }

/* ---------- quiz / flashcards ---------- */
.quiz-h { font-family: 'Newsreader', Georgia, serif; font-size: 1.8rem; margin: 0 0 6px; }
.quiz-sub { margin: 0 0 18px; }
.quiz-lbl { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
.quiz-setup select { width: 100%; padding: 9px 10px; font-size: 1rem; border: 1px solid var(--hair); border-radius: 8px; background: #fff; }
.quiz-stats { display: flex; gap: 16px; justify-content: center; margin: 18px 0 22px; color: var(--muted); font-size: 0.95rem; }
.quiz-stats strong { color: var(--accent); font-size: 1.15rem; }
.quiz-btn { width: 100%; padding: 13px; font-size: 1.05rem; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 10px; cursor: pointer; }
.quiz-btn:hover { filter: brightness(1.07); }
.quiz-reset { width: 100%; margin-top: 10px; padding: 9px; font-size: 0.85rem; color: var(--muted); background: none; border: none; cursor: pointer; }
.quiz-reset:hover { color: var(--accent); }

.quiz-card { text-align: center; }
.q-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.q-quit { font-weight: 600; font-size: 0.9rem; }
.q-prog { color: var(--muted); font-size: 0.85rem; }
.q-muscle { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.7rem; line-height: 1.25; }
.q-label { color: var(--muted); margin: 8px 0 26px; font-size: 1.05rem; }
.q-answer { border-top: 1px solid var(--hair); padding-top: 22px; margin-bottom: 24px; }
.q-ans-text { font-size: 1.2rem; line-height: 1.5; }
.q-ans-list { display: flex; flex-direction: column; gap: 6px; font-size: 1.2rem; font-weight: 600; }
.q-ans-list.m-artery span { color: var(--artery); }
.q-ans-list.m-vein span { color: var(--vein); }
.q-ans-list.m-nerve span { color: var(--nerve); }
.q-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qr { padding: 12px 4px; font-size: 0.92rem; font-weight: 600; border: none; border-radius: 9px; cursor: pointer; color: #fff; }
.qr-again { background: #c0392b; } .qr-hard { background: #d98a2b; }
.qr-good { background: #3a7d44; } .qr-easy { background: #2c6e8f; }
.qr:hover { filter: brightness(1.08); }

.quiz-done { text-align: center; padding: 18px 0; }
.q-check { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #eaf4ec; color: #3a7d44; font-size: 2rem; }

/* ---------- version footer ---------- */
#version-footer {
  text-align: center;
  color: #9aa3aa;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 22px 12px 28px;
  user-select: none;
}
#version-footer strong { color: var(--muted); font-weight: 600; }

/* subtle fade when the view changes */
#view { animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- small screens ---------- */
@media (max-width: 550px) {
  body { font-size: 15px; }
  .container { padding: 0 12px; }
  nav ul li a { padding: 12px 14px; }
  #muscleResults tbody tr:first-child > th,
  #muscleResults tbody tr.m-latin > th { font-size: 1.55rem; }
  #muscleResults:has(th) td { font-size: 1.05rem; }
  #muscleResults:has(th) th, #muscleResults:has(th) td { padding: 10px 14px; }
}