/* ==========================================================================
   TDSM project page: brand tokens and page components.
   The shared components (layout, nav, hero, section heads, figures, tabs,
   tables, disclosures, key points, lightbox, BibTeX, footer) are in
   family.css, which this file follows. Brand colours come from the icon
   (skull, bridge, document): ink #1C2738, document blue #1082D9 ("Text",
   "SM"), skull green #34A853 ("Skeleton", "TD").
   ========================================================================== */

/* ---------- 1. Brand tokens ---------------------------------------------- */
:root {
  --accent: #1082D9;           /* document blue of the icon: rules, borders, large text (4.0:1) */
  --accent-text: #0E71BE;      /* small text and white-on-blue fills (5.1:1 on white) */
  --accent-strong: #0B5E9F;    /* hover */
  --accent-soft: #EEF5FC;      /* tinted fills */
  --accent-line: #BCD9F2;      /* tinted borders */
  --brand-s: #34A853;          /* skull green of the icon: "Skeleton" in the title */
  --logo-k: 1;                 /* hero logo height factor (wordmark = GeoSET wordmark) */
}

/* hero title: "Skeleton" in the icon's green, "Text" in its blue (.hero-accent), as the old page coloured them */
.hero-accent-s { color: var(--brand-s); }
/* the title is long: three balanced lines on wide screens */
@media (min-width: 1000px) { .hero-title { max-width: 36ch; } }

/* what the name stands for, right under the hero logo (the paper's original title): initials T, D, S, M bold */
.hero-logo-note {
  display: block; margin-top: calc(3px - clamp(12px, 1.6vw, 18px));
  font: 600 clamp(.8125rem, .74rem + .35vw, 1rem)/1.3 var(--font-display); letter-spacing: .01em; color: #6B7385;
}
.hero-logo-note b { font-weight: 800; color: #3F4756; }
/* wordmark (hero logo, nav, footer): plain gray, as the user asked */
.topnav-brand .wordmark, .topnav-brand .wordmark > span, .footer-brand .wordmark, .footer-brand .wordmark > span { color: #6B7385; }
/* the icon is a 5.7:1 trio (skull, bridge, document): a little lower than the family's square marks */
.topnav-brand img { height: 22px; }
@media (max-width: 820px) { .topnav-brand img { height: 18px; } }
/* phones: the skull alone (the favicon glyph) at the family's 28 px mark height, so the link row keeps its room */
.topnav-brand .topnav-mark { display: none; height: 28px; width: auto; }
@media (max-width: 480px) {
  .topnav-brand img:not(.topnav-mark) { display: none; }
  .topnav-brand .topnav-mark { display: block; }
}
.footer-brand img { height: 17px; }

/* bold math symbols (\mathbf z, \bm\epsilon): a span, since family.css sets key-point <b> as block titles */
.bm { font-weight: 700; }
figcaption i, .table-note i, .results i, .keypoints i { margin-right: .04em; }

/* ---------- 2. Headline table (Table 1) ---------------------------------- */
#table-1 { width: 100%; max-width: 1180px; margin-inline: auto; }
#table-1 > figcaption { max-width: 118ch; }

/* ---------- 3. Paper figures: prev, thumbnail strip, next ----------------- */
/* horizontal scroller with edge fades (fade classes set by main.js) */
.hscroll {
  position: relative;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.hscroll::-webkit-scrollbar { display: none; }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; }
.carousel-nav .thumbs { flex: 0 1 auto; min-width: 0; }
.thumbs { display: flex; gap: 10px; padding: 3px; scroll-padding-inline: 3px; }
.thumb {
  flex: 0 0 148px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 5px 5px 7px; border-radius: var(--radius); text-align: left;
  background: var(--bg); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s;
  scroll-snap-align: start;
}
.thumb:hover { border-color: var(--border-strong); }
.thumb img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain;
  border-radius: var(--radius-s); background: #fff; border: 1px solid var(--border);
}
.thumb > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 0 3px; font-size: .8rem; line-height: 1.35; color: var(--muted); font-weight: 500;
}
.thumb > span > b:first-child { color: var(--ink); font-weight: 700; margin-right: 2px; }
.thumb[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 640px) {
  .carousel-nav .carousel-btn { display: none; }
  .thumb { flex-basis: 132px; }
}
/* diagrams and plots with large type stop at the content width */
.slide--content .figure-media { max-width: min(100%, var(--w-content)); margin-inline: auto; }

/* ---------- 4. Tables: pairs, check marks, text table --------------------- */
.table-grid { display: grid; gap: clamp(28px, 3.5vw, 40px) 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .table-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.results-note { margin-top: 14px; }
.table-figure .table-note { margin-top: 10px; }
/* single tables in the results tabs keep their few columns close together */
#table-2, #table-9 { width: 100%; max-width: 820px; margin-inline: auto; }
#table-11 { width: 100%; max-width: 1080px; margin-inline: auto; }

/* check-mark columns (Tables 3, 4 and 9) */
.results .col-check { font-size: .8125rem; line-height: 1.25; }
.results .mark-ok { color: var(--brand-s); font-weight: 700; }
.results .mark-no { color: var(--faint); }
/* rows of the final configuration in check-mark tables (no method column): the bar goes on the first cell */
.results--checks tr.ours td:first-child { box-shadow: inset 3px 0 0 var(--ours-bar); }
.results--checks td { font-variant-numeric: tabular-nums lining-nums; }
/* Table 10: the average row, figure references */
.results .fig-ref { margin-left: 3px; font-size: .86em; font-weight: 500; text-decoration: none; }
.results .fig-ref:hover { text-decoration: underline; }
/* Table 11: sentences wrap */
.results--wrap td.col-text { white-space: normal; min-width: 26ch; line-height: 1.5; text-align: left; }
.results--wrap th.col-text { text-align: left; }
.results--wrap td.col-text b { font-weight: 600; color: var(--text); }
.results--wrap tr.ours td.col-text { color: var(--text); }

/* ---------- 5. Method key points: the TD-loss formula --------------------- */
/* two unbreakable halves: the line may only break after "‖ϵ − ϵ̂p‖2 −" */
.keypoints .fx { white-space: nowrap; }

/* ---------- 6. BibTeX: the long title wraps instead of scrolling ---------- */
.bibtex pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 7. Print ------------------------------------------------------ */
@media print {
  .topnav, .copy-btn, .carousel-nav .carousel-btn, .skip-link { display: none !important; }
  .section { padding-block: 24px; }
}