/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* surfaces & ink */
  --page:        #f9f9f7;
  --surface:     #fcfcfb;
  --ink:         #0b0b0b;
  --ink-2:       #52514e;
  --ink-muted:   #898781;
  --rule:        #e1e0d9;
  --rule-strong: #c3c2b7;
  --border:      rgba(11, 11, 11, 0.10);
  --wash:        rgba(11, 11, 11, 0.04);

  /* data colours (validated: see README) */
  --accent:      #eb6834;   /* task ratings — single series */
  --accent-text: #c34513;   /* same hue, darkened to 4.89:1 for small text */
  --expected:    #eb6834;   /* survey expectation */
  --iclr:        #184f95;
  --emnlp:       #3987e5;

  /* phase chips — colour is redundant with the label, so these stay pale */
  /* brand marks, kept at their published colours where they are legible */
  --icon-github: #181717;   /* 17.43:1 */

  --phase-IDEAGEn:     #ece9f8;
  --phase-RESEARCHDEs: #e2edfb;
  --phase-DATACOl:     #dcf2ea;
  --phase-ANALYSIs:    #e4f0dc;
  --phase-WRITINg:     #fae6ee;

  /* tier washes — one hue, monotone by construction */
  --tier-mandatory:   rgba(42, 120, 214, 0.16);
  --tier-recommended: rgba(42, 120, 214, 0.09);
  --tier-optional:    rgba(42, 120, 214, 0.04);

  --radius: 8px;
  --content-max: 1240px;  /* content column; header aligns to the same edges */
  --gutter: 1.5rem;
  --header-h: 5.5rem;   /* sticky header height; anchor targets reserve it */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:        #0d0d0d;
    --surface:     #1a1a19;
    --ink:         #ffffff;
    --ink-2:       #c3c2b7;
    --ink-muted:   #898781;
    --rule:        #2c2c2a;
    --rule-strong: #383835;
    --border:      rgba(255, 255, 255, 0.10);
    --wash:        rgba(255, 255, 255, 0.05);

    --accent:      #d95926;
    --accent-text: #db6333;   /* 4.85:1 on the dark surface */
    --expected:    #d95926;
    --iclr:        #256abf;
    --emnlp:       #6da7ec;

    --icon-github: #ffffff;   /* #181717 is 1.03:1 on this surface */

    --phase-IDEAGEn:     #2b2740;
    --phase-RESEARCHDEs: #1e2c3f;
    --phase-DATACOl:     #17332c;
    --phase-ANALYSIs:    #22301c;
    --phase-WRITINg:     #38222c;

    --tier-mandatory:   rgba(109, 167, 236, 0.20);
    --tier-recommended: rgba(109, 167, 236, 0.11);
    --tier-optional:    rgba(109, 167, 236, 0.05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #0d0d0d;
  --surface:     #1a1a19;
  --ink:         #ffffff;
  --ink-2:       #c3c2b7;
  --ink-muted:   #898781;
  --rule:        #2c2c2a;
  --rule-strong: #383835;
  --border:      rgba(255, 255, 255, 0.10);
  --wash:        rgba(255, 255, 255, 0.05);

  --accent:      #d95926;
  --accent-text: #db6333;   /* 4.85:1 on the dark surface */
  --expected:    #d95926;
  --iclr:        #256abf;
  --emnlp:       #6da7ec;

  --icon-github: #ffffff;

  --phase-IDEAGEn:     #2b2740;
  --phase-RESEARCHDEs: #1e2c3f;
  --phase-DATACOl:     #17332c;
  --phase-ANALYSIs:    #22301c;
  --phase-WRITINg:     #38222c;

  --tier-mandatory:   rgba(109, 167, 236, 0.20);
  --tier-recommended: rgba(109, 167, 236, 0.11);
  --tier-optional:    rgba(109, 167, 236, 0.05);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* A `display` rule outranks the browser default for [hidden]; this keeps the
   attribute authoritative wherever it is used. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.25; }
h1 { font-size: 2rem; margin: 0 0 .6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* anything that is data, a control, or a label wears the sans face */
.site-nav, .controls, .task-table, .legend, .figure-note, .control-note,
.tile-go, .phase-chip, .site-footer, button, select, input, textarea,
.detail-row, .task-groups, .detail-checks, .thresholds { font-family: var(--font-sans); }

.num, .task-table td.num, .axis-tick { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

.header-right { display: flex; align-items: center; gap: 1.4rem; }

.site-nav { display: flex; gap: 1.4rem; font-size: .88rem; }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); background: var(--wash); }

/* Show the icon for the theme the button switches TO. Same dual-scope pattern
   as the tokens: media query for the OS setting, attribute for an explicit one. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-toggle .icon-sun { display: block; }
  :root:where(:not([data-theme="light"])) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.site-nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ==========================================================================
   Layout & view routing
   ========================================================================== */

#main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 4rem;
}

.view { display: none; }
.view.is-active { display: block; }

/* An anchor jump scrolls the target to the very top of the viewport, where the
   sticky header would cover it. Reserve the header's height on every scroll
   target. The header wraps on narrow screens, so the reserve grows there. */
html { scroll-behavior: smooth; }
.view, [id] { scroll-margin-top: var(--header-h); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.lede {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1.05rem;
  margin: 0 0 1.25rem;
}

.figure-note, .control-note {
  font-size: .82rem;
  color: var(--ink-2);
  margin: .5rem 0 0;
}

.linklike {
  background: none;
  border: 0;
  padding: 0;
  font-size: .82rem;
  color: var(--ink-2);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Overview
   ========================================================================== */

.intro { max-width: 66ch; }
.intro h1 { font-size: 2.4rem; }

.resource-links { display: flex; gap: 1.5rem; margin: 1.5rem 0 0; }

.resource {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .6rem 1.1rem;
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.2;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
}
.resource:hover {
  background: var(--wash);
  border-color: var(--accent);
}

/* This one copies rather than navigates, so it carries an icon, not an arrow. */
.resource-action {
  gap: .45em;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
}
.resource svg { color: var(--accent-text); flex: none; }
.resource[data-link="code"] svg  { color: var(--icon-github); }

a.resource::after {
  content: "\2192";
  margin-left: .35em;
  color: var(--accent-text);
  display: inline-block;
  transition: transform .15s ease;
}
a.resource:hover::after { transform: translateX(3px); }

.cite-note { margin-top: 1.15rem; }

.tiles {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
}
.tile:hover { border-color: var(--accent); }
.tile h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.tile p { margin: 0 0 1.25rem; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.tile-go {
  margin-top: auto;
  font-size: .85rem;
  color: var(--accent-text);
}
.tile-go::after {
  content: "\2192";
  margin-left: .5em;
  display: inline-block;
  transition: transform .15s ease;
}
.tile:hover .tile-go::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .tile-go::after, a.resource::after { transition: none; }
}

/* ==========================================================================
   Controls
   ========================================================================== */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.control { margin: 0; padding: 0; border: 0; }

.control > label, .control legend {
  display: block;
  padding: 0;
  margin-bottom: .4rem;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.control select {
  font-size: .9rem;
  padding: .4rem .6rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
}

.controls .control-note { align-self: flex-end; margin: 0 0 .45rem auto; }

.segmented { display: flex; }
.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented label {
  padding: .4rem .8rem;
  font-size: .88rem;
  color: var(--ink-2);
  background: var(--page);
  border: 1px solid var(--rule-strong);
  border-left-width: 0;
  cursor: pointer;
}
.segmented label:first-of-type { border-left-width: 1px; border-radius: 6px 0 0 6px; }
.segmented label:last-of-type { border-radius: 0 6px 6px 0; }
.segmented label:hover { background: var(--wash); }
.segmented input:checked + label {
  color: var(--surface);
  background: var(--ink-2);
  border-color: var(--ink-2);
}
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Task table
   ========================================================================== */

.task-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.task-table caption {
  caption-side: bottom;
  margin-top: .75rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  color: var(--ink-2);
  text-align: left;
}

.task-table th {
  text-align: left;
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 .6rem .5rem;
}
.task-table th:first-child, .task-table td:first-child { padding-left: 0; }

.task-table th button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.task-table th button:hover { color: var(--ink); }
.task-table th[aria-sort] button { color: var(--ink); }
.task-table th[aria-sort="ascending"] button::after  { content: " \25B2"; font-size: .7em; }
.task-table th[aria-sort="descending"] button::after { content: " \25BC"; font-size: .7em; }

.task-table td {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.task-table tbody tr:hover { background: var(--wash); }

.task-table td.num { text-align: right; width: 4.5rem; }
.task-table td.label-cell { color: var(--ink-2); width: 7rem; }
.task-table .plot-col { width: 240px; }

.phase-chip {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.phase-chip[data-phase="IDEAGEn"]     { background: var(--phase-IDEAGEn); }
.phase-chip[data-phase="RESEARCHDEs"] { background: var(--phase-RESEARCHDEs); }
.phase-chip[data-phase="DATACOl"]     { background: var(--phase-DATACOl); }
.phase-chip[data-phase="ANALYSIs"]    { background: var(--phase-ANALYSIs); }
.phase-chip[data-phase="WRITINg"]     { background: var(--phase-WRITINg); }

/* dot-and-CI marks (drawn by tasks.js, coloured here) */
.plot-track  { stroke: var(--rule); stroke-width: 1; }
.plot-tick   { stroke: var(--rule); stroke-width: 1; }
.plot-ci     { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .45; }
.plot-dot    { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.axis-tick   { fill: var(--ink-muted); font-size: 9px; font-family: var(--font-sans); }
.plot-axis   { display: block; margin-top: .2rem; overflow: visible; }
.task-table th.plot-col { text-transform: none; letter-spacing: 0; }
.task-table td.plot-col svg { display: block; overflow: visible; }

/* ==========================================================================
   Practice
   ========================================================================== */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: .85rem;
  color: var(--ink-2);
}
.legend li { display: flex; align-items: center; gap: .45rem; }

.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch-expected { background: var(--expected); }
.swatch-iclr     { background: var(--iclr); }
.swatch-emnlp    { background: var(--emnlp); }

.detail-list { display: flex; flex-direction: column; gap: .35rem; }
.detail-list[hidden] { display: none; }

.detail-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.detail-name { font-size: .92rem; color: var(--ink); }
.detail-sub {
  display: block;
  font-size: .78rem;
  color: var(--ink-2);
  margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}

#practice-switch { max-width: 22rem; margin-bottom: 1.25rem; }

.bar-group { display: flex; flex-direction: column; gap: 2px; }

.bar-line { display: flex; align-items: center; gap: .5rem; }

.bar-label {
  width: 4.2rem;
  flex: none;
  font-size: .78rem;
  color: var(--ink-2);
}

.bar-track { flex: 1; height: 14px; background: var(--wash); border-radius: 0 4px 4px 0; }

.bar {
  height: 100%;
  border-radius: 0 4px 4px 0;
  min-width: 2px;
}
.bar-expected { background: var(--expected); }
.bar-iclr     { background: var(--iclr); }
.bar-emnlp    { background: var(--emnlp); }

.bar-value {
  width: 3.2rem;
  font-size: .8rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Builder
   ========================================================================== */

.builder {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

.builder-pane {
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.builder-pane h2:first-of-type { margin-top: 0; }

.pane-switch { margin-bottom: 1.1rem; }
.pane-switch label { flex: 1; text-align: center; }
.pane-count { color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
.pane-intro { margin-top: 0; margin-bottom: .9rem; }

.thresholds {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .85rem;
}
.thresholds summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  color: var(--ink-2);
  list-style: none;
}
.thresholds summary::-webkit-details-marker { display: none; }
.thresholds summary:hover .thresholds-toggle { color: var(--accent-text); }

/* the label and the chevron both flip, so the closing action is signposted */
.thresholds-toggle { color: var(--ink-2); white-space: nowrap; }
.thresholds-toggle::after {
  content: " \25BE";
  display: inline-block;
  transition: transform .15s ease;
}
.thresholds[open] .thresholds-toggle::after { transform: rotate(180deg); }
.thresholds .when-open { display: none; }
.thresholds[open] .when-closed { display: none; }
.thresholds[open] .when-open { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .thresholds-toggle::after { transition: none; }
}
.threshold-body { padding-top: .75rem; }
.threshold-strip {
  position: relative;
  height: 88px;
  margin: .75rem 0 .25rem;
  touch-action: none;
}

.strip-axis {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  border-top: 1px solid var(--rule-strong);
}

.strip-tick {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: .72rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* one dot per task mean; lanes stack upward so clusters stay countable */
.strip-dot {
  position: absolute;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.strip-dot[data-tier="mandatory"]   { background: var(--accent); }
.strip-dot[data-tier="recommended"] { background: var(--accent); opacity: .55; }
.strip-dot[data-tier="optional"]    { background: var(--ink-muted); opacity: .5; }

.strip-divider {
  position: absolute;
  top: 0; bottom: 20px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink-2);
  cursor: ew-resize;
}
.strip-divider.is-dragging { background: var(--accent); }

.strip-handle {
  position: absolute;
  top: -3px; left: -5px;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--surface);
  border: 2px solid var(--ink-2);
}
.strip-divider.is-dragging .strip-handle { border-color: var(--accent); }

.strip-value {
  position: absolute;
  bottom: -19px; left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  color: var(--ink);
  background: var(--surface);
  padding: 0 .2rem;
  font-variant-numeric: tabular-nums;
}

.task-groups { display: flex; flex-direction: column; gap: .75rem; }

.tier-group { padding: .7rem .85rem; border-radius: 6px; }
.tier-group[data-tier="mandatory"]   { background: var(--tier-mandatory); }
.tier-group[data-tier="recommended"] { background: var(--tier-recommended); }
.tier-group[data-tier="optional"]    { background: var(--tier-optional); }

.tier-head {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .5rem;
}

.tier-tasks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .15rem .9rem;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .85rem;
  line-height: 1.35;
  padding: .15rem 0;
  cursor: pointer;
}
.check input { margin: .25rem 0 0; accent-color: var(--accent); flex: none; }
.check input:disabled { cursor: not-allowed; }
.check.is-locked { color: var(--ink-2); cursor: default; }

.detail-checks { display: flex; flex-direction: column; gap: .1rem; }
.check-note { display: block; font-size: .78rem; color: var(--ink-2); }

.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.output-head h2 { margin: 0; }

#copy-statement {
  padding: .35rem .9rem;
  font-size: .85rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  cursor: pointer;
}
#copy-statement:hover { background: var(--wash); }

#statement {
  width: 100%;
  min-height: 26rem;
  margin-top: .85rem;
  padding: 1rem;
  font-family: var(--font-sans);
  font-size: .88rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: 6px;
  resize: vertical;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-2);
}
.site-footer p { margin: 0; }

/* ==========================================================================
   Narrow screens
   ========================================================================== */

@media (max-width: 860px) {
  :root { --header-h: 7.5rem; }
  .tiles { grid-template-columns: 1fr; }
  .builder { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; gap: .5rem; }
  .tier-tasks { grid-template-columns: 1fr; }
  .task-table .plot-col, .task-table td.plot-col { display: none; }
  :root { --gutter: 1rem; }
  #main { padding: 2rem var(--gutter) 3rem; }
  .intro h1 { font-size: 1.8rem; }

  /* The four nav links are ~470px in a row; let them wrap instead. */
  .header-right { flex-wrap: wrap; gap: .75rem 1rem; }
  .site-nav { flex-wrap: wrap; gap: .5rem 1rem; }

  /* Filters stack full width; the four segments share the row evenly. */
  .controls { padding: .85rem; gap: .9rem; }
  .control { width: 100%; }
  .control select { width: 100%; }
  .segmented { width: 100%; }
  .segmented label {
    flex: 1;
    padding: .45rem .25rem;
    font-size: .8rem;
    text-align: center;
  }
  .controls .control-note { margin: 0; }

  /* Nothing in the table holds a fixed width, so it can shrink to fit. */
  .task-table { font-size: .85rem; }
  .task-table th, .task-table td { padding-left: .3rem; padding-right: .3rem; }
  .task-table td.num { width: auto; }
  .task-table td.label-cell { width: auto; }
  .phase-chip { white-space: normal; }

  /* Last resort: if it still will not fit, the table scrolls, not the page. */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}