/* ================================================================
   Upsticks — style.css
   Single stylesheet. No preprocessor. Mobile-first.
   ================================================================ */

/* ── Custom properties ─────────────────────────────────────────── */
:root {
  /* Colour */
  --color-bg:            #f9fafb;
  --color-surface:       #ffffff;
  --color-border:        #e4e7ec;
  --color-border-strong: #c1c9d2;
  --color-text:          #1d2939;
  --color-text-muted:    #4b5563;
  --color-primary:       #1346c0;
  --color-primary-dark:  #0e3799;
  --color-primary-light: #eff4ff;
  --color-focus:         #2e90fa;

  /* Typography */
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Menlo', 'Consolas', 'Courier New', monospace;

  --text-sm:   0.875rem;   /* 14 px */
  --text-base: 1rem;       /* 16 px */
  --text-md:   1.125rem;   /* 18 px */
  --text-lg:   1.25rem;    /* 20 px */
  --text-xl:   1.5rem;     /* 24 px */
  --text-2xl:  2rem;       /* 32 px */
  --text-3xl:  2.5rem;     /* 40 px */

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Layout */
  --container-max: 1100px;
  --container-pad: var(--sp-4);

  /* Shape */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0 0 0 / .08);
  --shadow-md: 0 4px 12px rgba(0 0 0 / .10);
  --shadow-lg: 0 8px 24px rgba(0 0 0 / .12);

  --transition: 150ms ease;
}

@media (min-width: 480px) {
  :root { --container-pad: var(--sp-6); }
}
@media (min-width: 1024px) {
  :root { --container-pad: var(--sp-8); }
}

/* ── Reset / base ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background:  var(--color-bg);
  color:       var(--color-text);
  font-family: var(--font);
  font-size:   var(--text-base);
  line-height: 1.6;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }
button   { cursor: pointer; font: inherit; }

a {
  color: var(--color-primary);
  text-underline-offset: 2px;
}
a:hover { color: var(--color-primary-dark); }

/* ── Focus styles — never remove ──────────────────────────────── */
:focus-visible {
  outline:        3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}

/* ── Screen-reader only ────────────────────────────────────────── */
.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* ── Skip link ─────────────────────────────────────────────────── */
.skip-link {
  position:        absolute;
  top:             -100%;
  left:            var(--sp-4);
  z-index:         1000;
  padding:         var(--sp-2) var(--sp-4);
  background:      var(--color-primary);
  color:           #fff;
  font-weight:     600;
  text-decoration: none;
  border-radius:   0 0 var(--radius) var(--radius);
  transition:      top var(--transition);
}
.skip-link:focus { top: 0; }

/* ── Site header ────────────────────────────────────────────────── */
.site-header {
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position:      sticky;
  top:           0;
  z-index:       200;
  box-shadow:    var(--shadow-sm);
}

.site-header .container {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
  height:      60px;
}

.site-header__logo {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  font-size:       var(--text-lg);
  font-weight:     800;
  letter-spacing:  -0.02em;
  color:           var(--color-text);
  text-decoration: none;
  flex-shrink:     0;
}
.site-header__logo:hover { color: var(--color-primary); }

.site-header__logo-icon {
  width:           28px;
  height:          28px;
  background:      var(--color-primary);
  color:           #fff;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* ── Main navigation ────────────────────────────────────────────── */
#main-nav { margin-left: auto; }

.nav__list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  align-items: center;
  gap:         var(--sp-1);
}

/* Shared styles for nav links and dropdown toggle buttons */
.nav__item > a,
.nav__dropdown-toggle {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-1);
  padding:         var(--sp-2) var(--sp-3);
  color:           var(--color-text);
  text-decoration: none;
  font-size:       var(--text-sm);
  font-weight:     500;
  border-radius:   var(--radius-sm);
  border:          0;
  background:      transparent;
  white-space:     nowrap;
  transition:      background var(--transition), color var(--transition);
}

.nav__item > a:hover,
.nav__dropdown-toggle:hover {
  background: var(--color-primary-light);
  color:      var(--color-primary);
}

.nav__item > a[aria-current="page"] {
  color:       var(--color-primary);
  background:  var(--color-primary-light);
  font-weight: 600;
}

/* Dropdown button highlighted when we're somewhere under /tools/ */
.nav__dropdown-toggle[data-active] {
  color:       var(--color-primary);
  font-weight: 600;
}

/* ── Dropdown menu ──────────────────────────────────────────────── */
.nav__item--has-dropdown { position: relative; }

.nav__dropdown {
  display:       none;
  position:      absolute;
  top:           calc(100% + var(--sp-2));
  left:          0;
  min-width:     200px;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-md);
  z-index:       100;
  list-style:    none;
  padding:       var(--sp-2) 0;
  margin:        0;
}

.nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown {
  display: block;
}

.nav__dropdown li { margin: 0; }

.nav__dropdown a {
  display:         block;
  padding:         var(--sp-2) var(--sp-4);
  color:           var(--color-text);
  text-decoration: none;
  font-size:       var(--text-sm);
  border-radius:   0;
  transition:      background var(--transition);
}
.nav__dropdown a:hover         { background: var(--color-primary-light); color: var(--color-primary); }
.nav__dropdown a[aria-current] { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }

/* ── Mobile hamburger toggle ────────────────────────────────────── */
.nav-toggle {
  display:     none;   /* shown via media query below */
  align-items: center;
  justify-content: center;
  width:       40px;
  height:      40px;
  border:      1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background:  transparent;
  color:       var(--color-text);
  margin-left: auto;
  flex-shrink: 0;
}

/* Three-bar icon drawn in CSS */
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display:       block;
  width:         18px;
  height:        2px;
  background:    currentColor;
  border-radius: 1px;
  transition:    transform 0.2s, opacity 0.2s;
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content:  '';
  position: absolute;
  left:     0;
}

.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top:  6px; }

/* Animate to × when open */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon              { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before      { transform: rotate(45deg);  top: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after       { transform: rotate(-45deg); top: 0; }

/* ── Mobile nav layout ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-toggle { display: flex; }

  #main-nav {
    display:       none;
    position:      absolute;
    top:           60px;
    left:          0;
    right:         0;
    background:    var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow:    var(--shadow-md);
    padding:       var(--sp-4);
    z-index:       190;
    margin-left:   0;
  }

  #main-nav.is-open { display: block; }

  .nav__list {
    flex-direction: column;
    align-items:    stretch;
    gap:            var(--sp-1);
  }

  .nav__item > a,
  .nav__dropdown-toggle {
    width:     100%;
    padding:   var(--sp-3) var(--sp-4);
    font-size: var(--text-base);
  }

  /* Mobile dropdown sits inline */
  .nav__dropdown {
    position:      static;
    display:       none;
    box-shadow:    none;
    border:        0;
    background:    var(--color-bg);
    border-radius: var(--radius-sm);
    padding:       var(--sp-2) 0;
    margin-top:    var(--sp-1);
  }

  .nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown {
    display: block;
  }
}

/* ── noscript nav fallback ─────────────────────────────────────── */
noscript nav {
  padding:       var(--sp-3) var(--sp-4);
  background:    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  text-align:    center;
  font-size:     var(--text-sm);
}

noscript nav a { margin-inline: var(--sp-2); }

/* ── Main content ────────────────────────────────────────────────── */
main {
  flex:         1;
  padding-top:  var(--sp-10);
  padding-bottom: var(--sp-16);
}

/* ── Site footer ─────────────────────────────────────────────────── */
.site-footer {
  background:   var(--color-text);
  color:        #d1d5db;
  padding-block: var(--sp-8);
}

.site-footer__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);
}

.site-footer__copy {
  font-size: var(--text-sm);
  margin:    0;
  color:     #9ca3af;
}

.site-footer__nav {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-2) var(--sp-4);
}

.site-footer__nav a {
  font-size:       var(--text-sm);
  color:           #d1d5db;
  text-decoration: none;
}
.site-footer__nav a:hover { color: #fff; text-decoration: underline; }

/* ── Layout helpers ──────────────────────────────────────────────── */
.container {
  width:         100%;
  max-width:     var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight:    700;
  line-height:    1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-2xl); margin-bottom: var(--sp-4); }
h2 { font-size: var(--text-xl);  margin-bottom: var(--sp-3); }
h3 { font-size: var(--text-lg);  margin-bottom: var(--sp-2); }

@media (min-width: 480px) {
  h1 { font-size: var(--text-3xl); }
}

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size:     var(--text-md);
  color:         var(--color-text-muted);
  margin-bottom: var(--sp-6);
}

ul, ol {
  padding-left:  var(--sp-6);
  margin-bottom: var(--sp-4);
}
li { margin-bottom: var(--sp-1); }
li:last-child { margin-bottom: 0; }

/* Flowing prose: headings get more breathing room */
.prose h2 { margin-top: var(--sp-10); }
.prose h3 { margin-top: var(--sp-6); }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose { max-width: 72ch; }

code, kbd {
  font-family:   var(--font-mono);
  font-size:     0.875em;
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       0.1em 0.35em;
}

/* ── Page header ─────────────────────────────────────────────────── */
.page-header {
  margin-bottom:  var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom:  1px solid var(--color-border);
}

.page-header h1  { margin-bottom: var(--sp-2); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  padding-block:  var(--sp-16) var(--sp-12);
  text-align:     center;
  max-width:      640px;
  margin-inline:  auto;
}

.hero p { font-size: var(--text-md); color: var(--color-text-muted); }

/* ── Sections ────────────────────────────────────────────────────── */
.section { margin-block: var(--sp-12); }

.section__title {
  font-size:     var(--text-xl);
  margin-bottom: var(--sp-2);
}

.section__intro {
  font-size:     var(--text-base);
  color:         var(--color-text-muted);
  margin-bottom: var(--sp-6);
  max-width:     64ch;
}

/* ── Tool grid ───────────────────────────────────────────────────── */
.tool-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--sp-6);
  margin-top:            var(--sp-6);
}

.tool-card {
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  padding:         var(--sp-6);
  text-decoration: none;
  color:           inherit;
  display:         flex;
  flex-direction:  column;
  gap:             var(--sp-2);
  transition:      box-shadow var(--transition), border-color var(--transition);
}
.tool-card:hover {
  box-shadow:    var(--shadow-md);
  border-color:  var(--color-primary);
  color:         inherit;
}

.tool-card--soon {
  opacity: 0.6;
  cursor:  default;
  pointer-events: none;
}

.tool-card__title {
  font-size:   var(--text-lg);
  font-weight: 700;
  color:       var(--color-primary);
}

.tool-card--soon .tool-card__title { color: var(--color-text-muted); }

.tool-card__desc {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: 1.5;
  flex:        1;
}

.tool-card__badge {
  display:       inline-flex;
  align-items:   center;
  font-size:     0.75rem;
  font-weight:   600;
  padding:       2px var(--sp-2);
  border-radius: 99px;
  background:    var(--color-bg);
  color:         var(--color-text-muted);
  border:        1px solid var(--color-border);
  width:         fit-content;
}

/* ── Use cases ───────────────────────────────────────────────────── */
.use-cases {
  margin-top:    var(--sp-12);
  padding:       var(--sp-6) var(--sp-8);
  background:    var(--color-primary-light);
  border-left:   4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.use-cases h2 {
  font-size:     var(--text-lg);
  margin-bottom: var(--sp-4);
  color:         var(--color-primary-dark);
}

.use-cases__list {
  list-style:            none;
  padding:               0;
  margin:                0;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   var(--sp-3);
}

.use-cases__list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-2);
  font-size:   var(--text-sm);
  line-height: 1.5;
  margin:      0;
}

.use-cases__list li::before {
  content:     '→';
  color:       var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Data footnote ───────────────────────────────────────────────── */
.data-footnote {
  margin-top:    var(--sp-10);
  padding:       var(--sp-4) var(--sp-5);
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
}

.data-footnote p        { margin: 0; }
.data-footnote strong   { color: var(--color-text); }

/* ── Tables ──────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x:    auto;
  border-radius: var(--radius);
  border:        1px solid var(--color-border);
  margin-block:  var(--sp-6);
}

table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm);
  background:      var(--color-surface);
}

thead { background: var(--color-bg); }

th {
  text-align:    left;
  padding:       var(--sp-3) var(--sp-4);
  font-weight:   600;
  color:         var(--color-text);
  border-bottom: 1px solid var(--color-border);
  white-space:   nowrap;
}

td {
  padding:       var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height:   1.5;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover         { background: var(--color-bg); }

/* ── Description lists ───────────────────────────────────────────── */
dl { margin-bottom: var(--sp-4); }

dt {
  font-weight:  600;
  margin-top:   var(--sp-5);
  color:        var(--color-text);
}
dt:first-child { margin-top: 0; }

dd {
  margin-left:   var(--sp-5);
  color:         var(--color-text-muted);
  font-size:     var(--text-sm);
  margin-bottom: var(--sp-2);
}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-group {
  display:       flex;
  flex-direction: column;
  gap:           var(--sp-2);
  margin-bottom: var(--sp-5);
}

.form-group label {
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--color-text);
}

.form-group .hint {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding:        var(--sp-3) var(--sp-4);
  border:         1.5px solid var(--color-border-strong);
  border-radius:  var(--radius);
  font:           inherit;
  font-size:      var(--text-base);
  background:     var(--color-surface);
  color:          var(--color-text);
  transition:     border-color var(--transition);
  width:          100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  outline:      none;  /* replaced by border highlight */
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline:        3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);
  padding:         var(--sp-3) var(--sp-5);
  font:            inherit;
  font-size:       var(--text-base);
  font-weight:     600;
  border-radius:   var(--radius);
  border:          0;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--transition), transform 0.1s;
  white-space:     nowrap;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--color-primary);
  color:      #fff;
}
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn--outline {
  background: transparent;
  color:      var(--color-primary);
  border:     1.5px solid var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary-light); }

/* ── Notice / alert boxes ────────────────────────────────────────── */
.notice {
  padding:    var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size:  var(--text-sm);
  margin-block: var(--sp-4);
}

.notice p { margin: 0; }
.notice p + p { margin-top: var(--sp-2); }

.notice--info {
  background:  var(--color-primary-light);
  border-color: var(--color-primary);
  color:        #1e3a8a;
}

.notice--warning {
  background:  #fffbeb;
  border-color: #d97706;
  color:        #78350f;
}

.notice--error {
  background:  #fef2f2;
  border-color: #dc2626;
  color:        #7f1d1d;
}

/* ── Working days calculator ─────────────────────────────────────── */
.wd-form {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-5);
  max-width:     640px;
}

@media (min-width: 480px) {
  .wd-form { padding: var(--sp-6); }
}

.wd-fieldset {
  border:        0;
  margin-bottom: var(--sp-5);
  min-width:     0;
}

.wd-fieldset legend {
  font-size:     var(--text-sm);
  font-weight:   600;
  margin-bottom: var(--sp-2);
}

.wd-options {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

.wd-days {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-2);
}

.wd-choice {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-2);
  padding:       var(--sp-2) var(--sp-3);
  border:        1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
  cursor:        pointer;
  min-height:    44px;
}

.wd-choice:has(input:checked) {
  border-color: var(--color-primary);
  background:   var(--color-primary-light);
}

.wd-choice input {
  width:        1.125rem;
  height:       1.125rem;
  accent-color: var(--color-primary);
  flex-shrink:  0;
}

.wd-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0 var(--sp-4);
}

@media (min-width: 480px) {
  .wd-row { grid-template-columns: 1fr 1fr; }
}

.wd-row .form-group { margin-bottom: var(--sp-3); }

.wd-panel { margin-bottom: var(--sp-5); }

.wd-hint {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.wd-hours { max-width: 12rem; }

.wd-results:not(:empty) { margin-top: var(--sp-6); max-width: 640px; }

.wd-result {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-top:    4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding:       var(--sp-5);
}

.wd-result__headline {
  font-size:     var(--text-xl);
  color:         var(--color-primary-dark);
  margin-bottom: var(--sp-2);
}

.wd-stats {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:                   var(--sp-3);
  margin-block:          var(--sp-4);
}

.wd-stats div {
  background:    var(--color-bg);
  border-radius: var(--radius);
  padding:       var(--sp-3);
}

.wd-stats dt {
  margin:      0;
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-text-muted);
}

.wd-stats dd {
  margin:      0;
  font-size:   var(--text-lg);
  font-weight: 700;
  color:       var(--color-text);
}

.wd-skipped__heading {
  font-size:  var(--text-base);
  margin-top: var(--sp-4);
}

.wd-skipped {
  list-style: none;
  padding:    0;
}

.wd-skipped li {
  display:        flex;
  flex-wrap:      wrap;
  gap:            0 var(--sp-2);
  padding-block:  var(--sp-2);
  border-bottom:  1px solid var(--color-border);
  font-size:      var(--text-sm);
  margin:         0;
}

.wd-skipped__date  { font-weight: 600; }
.wd-skipped__title { color: var(--color-text-muted); }

.wd-result__source {
  margin-top: var(--sp-4);
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
}

.wd-privacy {
  margin-top: var(--sp-6);
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  max-width:  640px;
}

/* ── Articles ────────────────────────────────────────────────────── */
.article { max-width: 72ch; margin-inline: auto; }

.article__header { margin-bottom: var(--sp-6); }

.article__kicker {
  font-size:      var(--text-sm);
  font-weight:    600;
  color:          var(--color-text-muted);
  margin-bottom:  var(--sp-2);
}

.article__meta {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.article__figure { margin-bottom: var(--sp-8); }

.article__figure img {
  width:         100%;
  height:        auto;
  border-radius: var(--radius-lg);
  border:        1px solid var(--color-border);
}

.article__body li { margin-bottom: var(--sp-2); }

.article__figures {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--sp-3);
  margin-block:          var(--sp-4) var(--sp-6);
}

@media (min-width: 768px) {
  .article__figures { grid-template-columns: repeat(3, 1fr); }
}

.article__figures div {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       var(--sp-4);
}

.article__figures dt { margin: 0; }

.article__figures dd {
  margin:    0;
  font-size: var(--text-sm);
}

.article__figures .article__figure-value {
  font-size:   var(--text-xl);
  font-weight: 700;
  color:       var(--color-primary-dark);
  margin-bottom: var(--sp-1);
}

.article__cta {
  margin-block:  var(--sp-8);
  padding:       var(--sp-5) var(--sp-6);
  background:    var(--color-primary-light);
  border-left:   4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.prose .article__cta h2 { margin-top: 0; font-size: var(--text-lg); color: var(--color-primary-dark); }
.article__cta ul { margin-bottom: 0; }

.article__references li {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.article__back { margin-top: var(--sp-8); }

/* Article listing */
.article-list {
  list-style:            none;
  padding:               0;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--sp-6);
}

.article-list li { margin: 0; }

.article-card {
  display:         flex;
  flex-direction:  column;
  height:          100%;
  background:      var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  overflow:        hidden;
  text-decoration: none;
  color:           inherit;
  transition:      box-shadow var(--transition), border-color var(--transition);
}

.article-card:hover {
  box-shadow:   var(--shadow-md);
  border-color: var(--color-primary);
  color:        inherit;
}

.article-card__image {
  width:        100%;
  height:       auto;
  aspect-ratio: 16 / 9;
  object-fit:   cover;
}

.article-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
  padding:        var(--sp-5);
}

.article-card__meta {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.article-card__title {
  font-size:   var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  color:       var(--color-primary);
}

.article-card__desc {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: 1.5;
}

/* ── House prices dashboard ──────────────────────────────────────── */
.hp-controls {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-5);
}

@media (min-width: 480px) {
  .hp-controls { padding: var(--sp-6); }
}

.hp-controls__place { max-width: 640px; }

.hp-search {
  display: flex;
  gap:     var(--sp-2);
}

.hp-search input { min-width: 0; flex: 1; }

.hp-controls__row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0 var(--sp-4);
}

@media (min-width: 768px) {
  .hp-controls__row { grid-template-columns: repeat(3, 1fr); }
}

.hp-controls__row .form-group { margin-bottom: var(--sp-4); }

.hp-check {
  display:     inline-flex;
  align-items: center;
  gap:         var(--sp-2);
  min-height:  44px;
  font-size:   var(--text-sm);
  cursor:      pointer;
}

.hp-check input {
  width:        1.125rem;
  height:       1.125rem;
  accent-color: var(--color-primary);
}

.hp-status:empty { display: none; }

.hp-status {
  margin-top: var(--sp-4);
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
}

.hp-status--error {
  padding:       var(--sp-3) var(--sp-4);
  border-left:   4px solid #dc2626;
  border-radius: var(--radius);
  background:    #fef2f2;
  color:         #7f1d1d;
}

#results:not(:empty) { margin-top: var(--sp-6); }

.hp-summary__level {
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--color-text-muted);
}

.hp-summary__place {
  font-size:   var(--text-xl);
  margin:      0;
}

.hp-summary__note {
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  margin-top: var(--sp-1);
}

.hp-summary__period {
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  margin-top: var(--sp-2);
  max-width:  72ch;
}

.hp-stats {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--sp-3);
  margin-block:          var(--sp-4) 0;
}

@media (min-width: 768px) {
  .hp-stats { grid-template-columns: repeat(4, 1fr); }
}

.hp-stats div {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       var(--sp-3) var(--sp-4);
  min-width:     0;
}

.hp-stats dt {
  margin:      0;
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-text-muted);
}

.hp-stats dd {
  margin:      0;
  font-size:   var(--text-xl);
  font-weight: 700;
  color:       var(--color-text);
  line-height: 1.3;
}

.hp-stats .hp-stats__sub {
  font-size:   var(--text-sm);
  font-weight: 400;
  color:       var(--color-text-muted);
}

.hp-dashboard { margin-top: var(--sp-5); }

.hp-panel {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-4);
  margin-bottom: var(--sp-4);
  min-width:     0;
}

@media (min-width: 480px) {
  .hp-panel { padding: var(--sp-5); }
}

.hp-panel__title {
  font-size: var(--text-lg);
  margin:    0;
}

.hp-panel__sub,
.hp-panel__note {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.hp-panel__note:empty { display: none; }

.hp-chart {
  width:      100%;
  height:     320px;
  margin-top: var(--sp-3);
}

.hp-chart--short { height: 260px; }

@media (min-width: 768px) {
  .hp-chart { height: 400px; }
  .hp-chart--short { height: 280px; }
}

.hp-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0 var(--sp-4);
}

@media (min-width: 1024px) {
  .hp-grid { grid-template-columns: 1fr 1fr; }
}

.hp-table {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-3) var(--sp-4);
}

.hp-table summary {
  cursor:      pointer;
  font-weight: 600;
  color:       var(--color-primary);
  min-height:  44px;
  display:     flex;
  align-items: center;
}

.hp-table__scroll { overflow-x: auto; }

.hp-data {
  border-collapse: collapse;
  font-size:       var(--text-sm);
  margin-block:    var(--sp-3) var(--sp-5);
  min-width:       100%;
}

.hp-data caption {
  text-align:    left;
  font-weight:   600;
  margin-bottom: var(--sp-2);
}

.hp-data th,
.hp-data td {
  padding:       var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  text-align:    left;
  white-space:   nowrap;
}

.hp-data thead th { color: var(--color-text-muted); font-weight: 600; }
.hp-data tbody th { font-weight: 500; }
.hp-data .num     { text-align: right; font-variant-numeric: tabular-nums; }

.hp-search-form .form-group { max-width: 640px; }

.hp-period {
  border:        0;
  min-width:     0;
  margin-bottom: var(--sp-4);
  display:       grid;
  grid-template-columns: 3fr 2fr;
  gap:           var(--sp-2);
}

.hp-period legend {
  font-size:     var(--text-sm);
  font-weight:   600;
  margin-bottom: var(--sp-2);
}

.hp-controls select {
  padding:       var(--sp-3);
  border:        1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  font:          inherit;
  background:    var(--color-surface);
  color:         var(--color-text);
  width:         100%;
  min-height:    44px;
}

.hp-chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-2);
  list-style: none;
  padding:    0;
  margin:     0;
}

.hp-chips:empty { display: none; }

.hp-chips li {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-1);
  background:    var(--color-primary-light);
  border-radius: 999px;
  padding:       2px 2px 2px var(--sp-3);
  font-size:     var(--text-sm);
}

.hp-chip__remove {
  border:        0;
  background:    transparent;
  color:         var(--color-primary-dark);
  font-size:     1.25rem;
  line-height:   1;
  min-width:     36px;
  min-height:    36px;
  border-radius: 50%;
}

.hp-chip__remove:hover { background: #dbe7ff; }

.hp-layout {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0 var(--sp-4);
}

@media (min-width: 1024px) {
  .hp-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

.hp-map {
  width:      100%;
  height:     460px;
  margin-top: var(--sp-3);
}

@media (min-width: 768px) {
  .hp-map { height: 620px; }
  .hp-stats--five { grid-template-columns: repeat(5, 1fr); }
}

.hp-row--selected th,
.hp-row--selected td { background: var(--color-primary-light); font-weight: 600; }

.hp-privacy {
  margin-top: var(--sp-6);
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  max-width:  640px;
}

.hp-about {
  margin-top: var(--sp-8);
  max-width:  72ch;
}

.hp-about h2 { font-size: var(--text-lg); }

.hp-about li {
  font-size:     var(--text-sm);
  margin-bottom: var(--sp-2);
}

/* ── Times Tables Trainer (all scoped to #ss-tt) ─────────────────── */
#ss-tt {
  /* Accuracy: green / orange / red tints with a strong edge */
  --tt-green-bg:   #dcfce7;
  --tt-green:      #15803d;
  --tt-orange-bg:  #ffedd5;
  --tt-orange:     #c2410c;
  --tt-red-bg:     #fee2e2;
  --tt-red:        #b91c1c;
  /* Speed: shades of blue, darker = quicker */
  --tt-quick-bg:   #1e40af;
  --tt-quick-text: #ffffff;
  --tt-steady-bg:  #93c5fd;
  --tt-steady-text:#0c1f4d;
  --tt-slow-bg:    #eff6ff;
  --tt-slow-text:  #1e3a8a;
  --tt-slow-edge:  #60a5fa;
  --tt-tap:        44px;
}

/* .btn and flex rows set display, which would otherwise beat [hidden] */
#ss-tt [hidden] { display: none !important; }

#ss-tt h2[tabindex="-1"]:focus:not(:focus-visible),
#ss-tt h3[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

#ss-tt .tt-screen {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-5) var(--sp-4);
}
@media (min-width: 480px) {
  #ss-tt .tt-screen { padding: var(--sp-6); }
}

#ss-tt .tt-screen > h2 { font-size: var(--text-xl); margin-bottom: var(--sp-2); }

#ss-tt .tt-hint {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

#ss-tt .tt-actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-3);
  margin-top: var(--sp-6);
}
#ss-tt .tt-actions .btn { min-height: var(--tt-tap); white-space: normal; }
#ss-tt .tt-btn-big { font-size: var(--text-md); padding-inline: var(--sp-8); }

/* Pressable chips (toggles) */
#ss-tt .tt-chip {
  min-height:    var(--tt-tap);
  padding:       var(--sp-2) var(--sp-4);
  border:        1.5px solid var(--color-primary);
  border-radius: 99px;
  background:    var(--color-surface);
  color:         var(--color-primary);
  font-weight:   600;
}
#ss-tt .tt-chip[aria-pressed="true"] {
  background: var(--color-primary);
  color:      #fff;
}

#ss-tt .tt-link-btn {
  min-height:  var(--tt-tap);
  padding:     0 var(--sp-2);
  border:      0;
  background:  none;
  color:       var(--color-primary);
  font-size:   var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 1. Choose */
#ss-tt .tt-tables {
  list-style:            none;
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap:                   var(--sp-3);
  margin-top:            var(--sp-5);
}
#ss-tt .tt-table-btn {
  width:          100%;
  min-height:     96px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            var(--sp-1);
  padding:        var(--sp-3) var(--sp-2);
  border:         1.5px solid var(--color-border-strong);
  border-radius:  var(--radius-lg);
  background:     var(--color-primary-light);
  color:          var(--color-text);
}
#ss-tt .tt-table-btn:hover { border-color: var(--color-primary); }
#ss-tt .tt-table-btn__num {
  font-size:   var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  color:       var(--color-primary-dark);
}
#ss-tt .tt-table-btn__label,
#ss-tt .tt-table-btn__last { font-size: 0.8125rem; color: var(--color-text-muted); }
#ss-tt .tt-strip {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   1px;
  width:                 100%;
  max-width:             84px;
}
#ss-tt .tt-strip__cell { height: 6px; border-radius: 1px; background: var(--color-border); }
#ss-tt .tt-strip__cell--green  { background: #16a34a; }
#ss-tt .tt-strip__cell--orange { background: #ea580c; }
#ss-tt .tt-strip__cell--red    { background: #dc2626; }

/* 2. Review */
#ss-tt .tt-review-tip {
  font-size:     var(--text-md);
  margin-bottom: var(--sp-4);
}
#ss-tt .tt-ladder-toggle {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--sp-2);
  margin-bottom: var(--sp-4);
}
#ss-tt .tt-ladders { display: grid; gap: var(--sp-4); }
#ss-tt .tt-ladders[data-show="a"] .tt-ladder--b,
#ss-tt .tt-ladders[data-show="b"] .tt-ladder--a { display: none; }
@media (min-width: 480px) {
  #ss-tt .tt-ladder-toggle { display: none; }
  #ss-tt .tt-ladders { grid-template-columns: 1fr 1fr; }
  #ss-tt .tt-ladders .tt-ladder { display: block !important; }
}
#ss-tt .tt-ladder__title {
  font-size:     var(--text-base);
  color:         var(--color-text-muted);
  margin-bottom: var(--sp-2);
}
#ss-tt .tt-ladder__list { list-style: none; }
#ss-tt .tt-ladder__list li {
  display:               grid;
  grid-template-columns: 1fr auto 3.5ch;
  gap:                   var(--sp-3);
  align-items:           baseline;
  padding:               var(--sp-2) var(--sp-3);
  font-size:             var(--text-lg);
  font-variant-numeric:  tabular-nums;
  border-bottom:         1px solid var(--color-border);
}
#ss-tt .tt-ladder__list li:nth-child(odd) { background: var(--color-bg); }
#ss-tt .tt-ladder__eq { color: var(--color-text-muted); }
#ss-tt .tt-ladder__a  { font-weight: 700; text-align: right; }

/* 3. Test */
#ss-tt .tt-testbar {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--sp-2);
  font-size:       var(--text-sm);
  color:           var(--color-text-muted);
}
#ss-tt .tt-progress { font-weight: 600; color: var(--color-text); }
#ss-tt .tt-timer { display: flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }

#ss-tt .tt-ask,
#ss-tt .tt-learn { max-width: 420px; margin-inline: auto; }

#ss-tt .tt-question {
  margin-block: var(--sp-6) var(--sp-4);
  text-align:   center;
  font-size:    clamp(2.75rem, 14vw, 4rem);
  font-weight:  700;
  line-height:  1.1;
  font-variant-numeric: tabular-nums;
}
#ss-tt .tt-answer-label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
#ss-tt .tt-answer-row { display: flex; gap: var(--sp-2); }
#ss-tt .tt-answer {
  flex:          1;
  min-width:     0;
  min-height:    64px;
  padding:       var(--sp-2) var(--sp-4);
  border:        2px solid var(--color-border-strong);
  border-radius: var(--radius);
  font:          inherit;
  font-size:     var(--text-2xl);
  font-weight:   700;
  text-align:    center;
  color:         var(--color-text);
  background:    var(--color-surface);
}
#ss-tt .tt-answer:focus { border-color: var(--color-primary); }
#ss-tt .tt-check { min-height: 64px; font-size: var(--text-md); }
#ss-tt .tt-feedback {
  min-height: 2rem;
  margin-top: var(--sp-2);
  text-align: center;
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
}
#ss-tt .tt-feedback--right {
  font-size:   var(--text-lg);
  font-weight: 700;
  color:       var(--tt-green);
}

#ss-tt .tt-pad {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-2);
  margin-top:            var(--sp-2);
}
#ss-tt .tt-pad button {
  min-height:    56px;
  border:        1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  background:    var(--color-bg);
  color:         var(--color-text);
  font-size:     var(--text-xl);
  font-weight:   600;
}
#ss-tt .tt-pad button:hover { border-color: var(--color-primary); }
#ss-tt .tt-pad .tt-pad__ok {
  background:   var(--color-primary);
  border-color: var(--color-primary);
  color:        #fff;
}

/* Learning moment: calm, no red */
#ss-tt .tt-learn { margin-top: var(--sp-4); }
#ss-tt .tt-learn__heading { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
#ss-tt .tt-mini { list-style: none; display: grid; gap: var(--sp-1); }
#ss-tt .tt-mini__row {
  padding:       var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  background:    var(--color-bg);
  font-size:     var(--text-lg);
  color:         var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
#ss-tt .tt-mini__row--focus {
  background:  var(--tt-green-bg);
  border-left: 6px solid var(--tt-green);
  color:       #14532d;
  font-size:   var(--text-2xl);
  font-weight: 700;
}
#ss-tt .tt-learn__flip { margin-top: var(--sp-4); font-size: var(--text-md); font-weight: 600; }
#ss-tt .tt-learn__tip  { margin-top: var(--sp-2); }
#ss-tt .tt-learn__typed {
  margin-top: var(--sp-3);
  font-size:  0.8125rem;
  color:      var(--color-text-muted);
}
#ss-tt .tt-learn .tt-hint { margin-top: var(--sp-4); }

/* 4. Results */
#ss-tt .tt-view-toggle { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

#ss-tt .tt-legend {
  list-style: none;
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-2) var(--sp-4);
  margin:     var(--sp-4) 0 var(--sp-3);
  font-size:  var(--text-sm);
}
#ss-tt .tt-legend li { display: flex; align-items: center; gap: var(--sp-2); }
#ss-tt .tt-swatch {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           1.5rem;
  height:          1.5rem;
  border-radius:   var(--radius-sm);
  border-left:     4px solid;
  font-weight:     700;
  font-size:       var(--text-sm);
}
#ss-tt .tt-swatch--green  { background: var(--tt-green-bg);  border-color: var(--tt-green); }
#ss-tt .tt-swatch--orange { background: var(--tt-orange-bg); border-color: var(--tt-orange); }
#ss-tt .tt-swatch--red    { background: var(--tt-red-bg);    border-color: var(--tt-red); }

#ss-tt .tt-badge {
  display:       inline-block;
  padding:       1px var(--sp-2);
  border-radius: 99px;
  font-size:     0.8125rem;
  font-weight:   600;
  white-space:   nowrap;
}
#ss-tt .tt-badge--quick  { background: var(--tt-quick-bg);  color: var(--tt-quick-text); }
#ss-tt .tt-badge--steady { background: var(--tt-steady-bg); color: var(--tt-steady-text); }
#ss-tt .tt-badge--slow   { background: var(--tt-slow-bg);   color: var(--tt-slow-text); border: 1px solid var(--tt-slow-edge); }

#ss-tt .tt-map { list-style: none; display: grid; gap: var(--sp-1); }
#ss-tt .tt-row {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   0 var(--sp-3);
  align-items:           center;
  min-height:            var(--tt-tap);
  padding:               var(--sp-2) var(--sp-3);
  border-left:           6px solid var(--color-border-strong);
  border-radius:         var(--radius-sm);
  background:            var(--color-bg);
  font-variant-numeric:  tabular-nums;
}
#ss-tt .tt-row__fact { font-weight: 700; font-size: var(--text-md); }
#ss-tt .tt-row__flip { font-weight: 400; font-size: var(--text-sm); }
#ss-tt .tt-row__ans  { grid-column: 1; font-size: var(--text-sm); }
#ss-tt .tt-row__stats {
  grid-column:  2;
  grid-row:     1 / span 2;
  display:      flex;
  align-items:  center;
  gap:          var(--sp-2);
  font-weight:  700;
}
#ss-tt .tt-row__more {
  grid-column: 1 / -1;
  display:     flex;
  flex-wrap:   wrap;
  gap:         0 var(--sp-3);
  font-size:   0.8125rem;
}
#ss-tt .tt-row__more:empty { display: none; }
#ss-tt .tt-row__kind { font-weight: 600; }
#ss-tt .tt-row__na   { font-weight: 400; font-size: var(--text-sm); color: var(--color-text-muted); }
#ss-tt .tt-row--none { border-left-style: dashed; color: var(--color-text-muted); }

/* Accuracy colours (accuracy and both views) */
#ss-tt .tt-map:not([data-view="speed"]) .tt-row--acc-green  { background: var(--tt-green-bg);  border-color: var(--tt-green); }
#ss-tt .tt-map:not([data-view="speed"]) .tt-row--acc-orange { background: var(--tt-orange-bg); border-color: var(--tt-orange); }
#ss-tt .tt-map:not([data-view="speed"]) .tt-row--acc-red    { background: var(--tt-red-bg);    border-color: var(--tt-red); }

/* Speed colours (speed view only) */
#ss-tt .tt-map[data-view="speed"] .tt-row--speed-quick  { background: var(--tt-quick-bg);  border-color: #172554;  color: var(--tt-quick-text); }
#ss-tt .tt-map[data-view="speed"] .tt-row--speed-steady { background: var(--tt-steady-bg); border-color: #2563eb;  color: var(--tt-steady-text); }
#ss-tt .tt-map[data-view="speed"] .tt-row--speed-slow   { background: var(--tt-slow-bg);   border-color: var(--tt-slow-edge); color: var(--tt-slow-text); }

/* What each view shows */
#ss-tt .tt-map[data-view="accuracy"] .tt-row__time,
#ss-tt .tt-map[data-view="accuracy"] .tt-row__badge,
#ss-tt .tt-map[data-view="accuracy"] .tt-row__kind,
#ss-tt .tt-map[data-view="speed"] .tt-row__acc,
#ss-tt .tt-map[data-view="speed"] .tt-row__badge,
#ss-tt .tt-map[data-view="speed"] .tt-row__more,
#ss-tt .tt-map[data-view="both"] .tt-row__time { display: none; }

/* 2×2 key */
#ss-tt .tt-kinds { margin-top: var(--sp-6); }
#ss-tt .tt-kinds__heading { font-size: var(--text-base); margin-bottom: var(--sp-2); }
#ss-tt .tt-kinds__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-2);
  max-width:             560px;
}
#ss-tt .tt-kinds__cell {
  padding:       var(--sp-3);
  border-radius: var(--radius);
  border:        1px solid var(--color-border);
  background:    var(--color-bg);
  font-size:     var(--text-sm);
  line-height:   1.4;
}
#ss-tt .tt-kinds__cell dt { font-weight: 700; margin-bottom: var(--sp-1); }
#ss-tt .tt-kinds__cell--secure      { border-left: 4px solid var(--tt-green); }
#ss-tt .tt-kinds__cell--right-slow  { border-left: 4px solid var(--tt-steady-bg); }
#ss-tt .tt-kinds__cell--quick-wrong { border-left: 4px solid var(--tt-orange); }
#ss-tt .tt-kinds__cell--slow-wrong  { border-left: 4px solid var(--tt-red); }

/* Words */
#ss-tt .tt-feedback-words,
#ss-tt .tt-go-over,
#ss-tt .tt-history { margin-top: var(--sp-6); }
#ss-tt .tt-feedback-words h3,
#ss-tt .tt-go-over h3,
#ss-tt .tt-history h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
#ss-tt .tt-summary { font-size: var(--text-lg); font-weight: 700; }
#ss-tt .tt-sentences { padding-left: var(--sp-5); margin-block: var(--sp-2); }
#ss-tt .tt-sentences li { margin-bottom: var(--sp-1); }
#ss-tt .tt-compare { color: var(--color-primary-dark); font-weight: 600; margin-bottom: var(--sp-3); }

#ss-tt .tt-go-over {
  padding:       var(--sp-4);
  border-radius: var(--radius);
  background:    #fffbeb;
  border-left:   4px solid #d97706;
}
#ss-tt .tt-go-over__list { padding-left: var(--sp-6); }
#ss-tt .tt-go-over__list li { margin-bottom: var(--sp-1); }
#ss-tt .tt-go-over__fact { font-weight: 700; font-size: var(--text-md); }
#ss-tt .tt-go-over__kind { font-size: var(--text-sm); color: #78350f; }

#ss-tt .tt-history__list { list-style: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
#ss-tt .tt-history__list li { padding-block: var(--sp-1); border-bottom: 1px solid var(--color-border); }

/* 5. Saving */
#ss-tt .tt-save {
  margin-top:    var(--sp-6);
  padding:       var(--sp-4);
  border:        1px dashed var(--color-border-strong);
  border-radius: var(--radius);
}
#ss-tt .tt-save__check {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  min-height:  var(--tt-tap);
  font-weight: 600;
  cursor:      pointer;
}
#ss-tt .tt-save__check input { width: 22px; height: 22px; accent-color: var(--color-primary); }
#ss-tt .tt-save .btn { margin-top: var(--sp-3); min-height: var(--tt-tap); }
#ss-tt .tt-save .tt-hint:empty { display: none; }

/* How to use */
#ss-tt .tt-howto { margin-top: var(--sp-12); max-width: 72ch; }
#ss-tt .tt-howto h2 { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
#ss-tt .tt-howto h3 { font-size: var(--text-md); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
#ss-tt .tt-howto ol,
#ss-tt .tt-howto ul { padding-left: var(--sp-6); }
#ss-tt .tt-howto li { margin-bottom: var(--sp-2); }
#ss-tt .tt-howto p  { margin-bottom: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  #ss-tt *,
  #ss-tt *::before,
  #ss-tt *::after { animation: none !important; transition: none !important; }
}

/* ── Home tools carousel ─────────────────────────────────────────── */
/* Without JavaScript this is a plain scroll-snapping row of cards.
   carousel.js adds the buttons, dots and arrow keys. */
.carousel { position: relative; margin-top: var(--sp-6); }

.carousel__viewport {
  position:            relative; /* slides measure their offsetLeft from here */
  overflow-x:          auto;
  scroll-snap-type:    x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width:     thin;
  padding:             var(--sp-1) var(--sp-1) var(--sp-4);
  margin-inline:       calc(var(--sp-1) * -1);
}

.carousel__track {
  list-style: none;
  display:    flex;
  gap:        var(--sp-4);
}

.carousel__slide {
  flex:              0 0 85%;
  scroll-snap-align: start;
  display:           flex;
}
.carousel__slide > .tool-card { width: 100%; }

@media (min-width: 768px) {
  .carousel__slide { flex-basis: calc((100% - var(--sp-4)) / 2); }
}
@media (min-width: 1024px) {
  .carousel__slide { flex-basis: calc((100% - 2 * var(--sp-4)) / 3); }
}

.carousel__controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-3);
  margin-top:      var(--sp-3);
}

.carousel__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       44px;
  min-height:      44px;
  padding:         0 var(--sp-3);
  border:          1.5px solid var(--color-primary);
  border-radius:   99px;
  background:      var(--color-surface);
  color:           var(--color-primary);
  font-weight:     600;
}
.carousel__btn:hover:not(:disabled) { background: var(--color-primary-light); }
.carousel__btn:disabled { border-color: var(--color-border-strong); color: var(--color-text-muted); cursor: default; }

.carousel__dots { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }

.carousel__dot {
  width:      44px;
  height:     44px;
  border:     0;
  background: none;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
}
.carousel__dot::before {
  content:       '';
  width:         10px;
  height:        10px;
  border-radius: 50%;
  border:        2px solid var(--color-primary);
}
.carousel__dot[aria-current="true"]::before { background: var(--color-primary); width: 14px; height: 14px; }

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

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .nav-toggle { display: none; }

  main { padding: 0; }

  a[href]::after { content: ' (' attr(href) ')'; }
}