/* ==========================================================================
   MyDeskForge — design system
   Tokens → base → layout → components → utilities → responsive → print
   ========================================================================== */

:root {
  /* Dark theme (default) */
  --bg-color: #16181d;
  --bg-elevated: #1c1f26;
  --card-bg: #22262e;
  --text-color: #f2f4f7;
  --text-muted: #a3acba;
  --accent-color: #00a8e8;
  --accent-hover: #4cc4f2;
  --accent-contrast: #06202b;   /* text placed on top of accent fills */
  --accent-soft: rgba(0, 168, 232, 0.14);
  --accent-2: #5ee7c4;
  --border-color: #333944;
  --border-strong: #454d5b;
  --header-bg: rgba(28, 31, 38, 0.82);
  --success: #56d78e;
  --danger: #ff7b7b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.45);

  /* Chart mark. Deliberately not --accent-color: the UI accent sits outside
     the OKLCH lightness band a data mark needs against the dark card surface
     (L 0.69 vs the 0.48–0.67 band). Both values below are validated for
     lightness, chroma and >=3:1 contrast against their own surface. */
  --chart-mark: #0e9ad9;
  --chart-grid: #333944;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  --measure: 68ch;
  --header-h: 70px;
}

html.light-theme,
body.light-theme {
  --bg-color: #f7f8fa;
  --bg-elevated: #ffffff;
  --card-bg: #ffffff;
  --text-color: #16181d;
  --text-muted: #5b6472;
  --accent-color: #0077b0;      /* AA-compliant against light surfaces */
  --accent-hover: #005a86;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(0, 119, 176, 0.10);
  --accent-2: #0d8f74;
  --border-color: #e2e6ec;
  --border-strong: #c8cfda;
  --header-bg: rgba(255, 255, 255, 0.85);
  --success: #1c7a45;
  --danger: #b3261e;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 45px rgba(16, 24, 40, 0.12);

  --chart-mark: #0077b0;
  --chart-grid: #dbe1e7;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s ease, color 0.25s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > footer {
  margin-top: auto;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-hover);
}

/* Body-copy links stay underlined so they are not colour-only affordances. */
.article-content p > a,
.prose p > a,
.prose li > a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

ul {
  list-style: none;
}

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

::selection {
  background: var(--accent-soft);
  color: var(--text-color);
}

/* Skip link — first tab stop on every page */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--accent-color);
  color: var(--accent-contrast);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--accent-contrast);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container--narrow {
  max-width: 760px;
}

main {
  flex: 1 0 auto;
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

header {
  background-color: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-color);
  flex-shrink: 0;
}

.logo:hover {
  color: var(--text-color);
}

.logo-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  color: var(--text-color);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  /* Multi-word items ("Standing Desks") otherwise wrap inside their own box
     once the bar is full, which silently doubles the header height. */
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--accent-color);
}

.nav-links a[aria-current='page'] {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hamburger {
  display: none;
  cursor: pointer;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-color);
  font-size: 1.2rem;
  line-height: 1;
  padding: 8px 11px;
}

.theme-toggle {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
  background-color: var(--accent-soft);
  border-color: var(--border-color);
}

/* Search */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  padding: 9px 14px;
  width: 190px;
  max-width: 42vw;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s, width 0.2s;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  border-color: var(--accent-color);
}

.search-results {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, 84vw);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 200;
}

.search-results[hidden] {
  display: none;
}

.search-results a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-color);
}

.search-results a:hover,
.search-results a:focus-visible {
  background: var(--accent-soft);
  color: var(--text-color);
}

.search-results .sr-title {
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
}

.search-results .sr-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.search-results .sr-empty {
  padding: 14px 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Affiliate disclosure banner
   -------------------------------------------------------------------------- */

.disclosure-banner {
  background-color: var(--bg-elevated);
  color: var(--text-muted);
  text-align: center;
  padding: 9px 20px;
  font-size: 0.83rem;
  border-bottom: 1px solid var(--border-color);
}

.disclosure-banner a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.disclosure-banner a:hover {
  color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   Reading progress bar
   -------------------------------------------------------------------------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-color), var(--accent-2));
  z-index: 300;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: clamp(56px, 9vw, 100px) 20px;
  border-bottom: 1px solid var(--border-color);
  background:
    radial-gradient(900px 420px at 78% -10%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(700px 380px at 10% 110%, rgba(94, 231, 196, 0.10) 0%, transparent 60%),
    var(--bg-color);
}

.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  max-width: 18ch;
  margin-inline: auto;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-color);
}

.hero p {
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0 auto;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-trust span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* --------------------------------------------------------------------------
   Section headings & grids
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-3);
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  margin: var(--space-5) 0 var(--space-3);
}

.section-head .section-title {
  margin: 0;
}

.section-sub {
  color: var(--text-muted);
  margin-top: -0.75rem;
  margin-bottom: var(--space-3);
  max-width: 62ch;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
  background-color: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}

.card-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--accent-soft);
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.card-title {
  font-size: 1.18rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.card-title a {
  color: var(--text-color);
}

.card-title a:hover {
  color: var(--accent-color);
}

.card-excerpt {
  color: var(--text-muted);
  font-size: 0.94rem;
  margin-bottom: 16px;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.94rem;
  margin-top: auto;
}

.read-more::after {
  content: '→';
  transition: transform 0.2s ease;
}

.read-more:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Category grid
   -------------------------------------------------------------------------- */

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.category-card {
  background-color: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-color);
}

.category-card a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 20px;
  text-align: center;
  color: var(--text-color);
  font-size: 1.02rem;
  font-weight: 600;
}

.category-card small {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--accent-color);
  color: var(--accent-contrast);
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: var(--accent-hover);
  color: var(--accent-contrast);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--text-color);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  background: var(--accent-soft);
  color: var(--text-color);
  border-color: var(--accent-color);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 9px 18px;
  font-size: 0.87rem;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumbs {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: var(--space-3) 0 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--border-strong);
}

.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumbs a:hover {
  color: var(--accent-color);
}

.breadcrumbs [aria-current='page'] {
  color: var(--text-color);
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.newsletter {
  background:
    radial-gradient(600px 240px at 80% 0%, var(--accent-soft) 0%, transparent 70%),
    var(--card-bg);
  padding: clamp(32px, 5vw, 52px) 24px;
  text-align: center;
  border-radius: var(--radius-lg);
  margin: var(--space-5) 0;
  border: 1px solid var(--border-color);
}

.newsletter h3 {
  margin-bottom: 8px;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  letter-spacing: -0.02em;
}

.newsletter > p {
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 auto;
}

.newsletter form {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.newsletter input[type='email'] {
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: var(--text-color);
  width: 100%;
  max-width: 340px;
  font-size: 1rem;
  font-family: inherit;
}

.newsletter input[type='email']:focus {
  border-color: var(--accent-color);
}

.newsletter small {
  display: block;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.form-status {
  margin-top: 16px;
  font-size: 0.92rem;
  font-weight: 500;
  min-height: 1.4em;
}

.form-status[data-state='ok'] {
  color: var(--success);
}

.form-status[data-state='error'] {
  color: var(--danger);
}

/* Honeypot — hidden from humans, visible to naive bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Article layout
   -------------------------------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  align-items: start;
}

/* Prose stays at a readable measure, but wide blocks are not held to it.
   A single max-width on this element capped the table and chart at ~68ch and
   left the rest of the column empty, so a 7-column table scrolled sideways
   while there was free space beside it. Two tracks fix that: running text
   sits in the first, anything wide spans both. */
.article-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
  align-content: start;
}

.article-content > * {
  grid-column: 1;
  min-width: 0;
}

.article-content > .table-responsive,
.article-content > .chart-figure,
.article-content > .review-box,
.article-content > .versus,
.article-content > .grid,
.article-content > .related-posts,
.article-content > .newsletter,
.article-content > img {
  grid-column: 1 / -1;
}

.article-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background-color: var(--card-bg);
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  order: 2;
}

.toc-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--text-muted);
}

.toc-list li {
  margin-bottom: 4px;
}

.toc-list a {
  color: var(--text-muted);
  font-size: 0.92rem;
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--border-color);
  transition: color 0.2s, border-color 0.2s;
}

.toc-list a:hover,
.toc-list a.active {
  color: var(--accent-color);
  border-left-color: var(--accent-color);
  font-weight: 500;
}

.toc-list .toc-sub a {
  padding-left: 24px;
  font-size: 0.87rem;
}

article h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  margin-bottom: 14px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

article img {
  max-width: 100%;
  border-radius: var(--radius);
  margin: var(--space-3) 0;
  box-shadow: var(--shadow-sm);
}

article h2 {
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  letter-spacing: -0.02em;
  margin: var(--space-4) 0 var(--space-2);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

article h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  letter-spacing: -0.01em;
  margin: var(--space-3) 0 12px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

article p {
  margin-bottom: 18px;
  font-size: 1.06rem;
}

.article-content ul:not(.toc-list):not(.pros ul):not(.cons ul),
.article-content ol {
  margin: 0 0 20px 1.35rem;
  padding: 0;
}

.article-content ul:not(.toc-list) {
  list-style: disc;
}

.article-content ol {
  list-style: decimal;
}

.article-content li {
  margin-bottom: 8px;
  font-size: 1.04rem;
}

.article-content blockquote {
  margin: var(--space-3) 0;
  padding: 18px 24px;
  border-left: 3px solid var(--accent-color);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-color);
}

.article-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Key takeaways / TL;DR box */
.takeaway {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-color);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: var(--space-3) 0;
}

.takeaway h2,
.takeaway h3 {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.takeaway ul {
  list-style: none;
  margin: 0;
}

.takeaway li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 1rem;
}

.takeaway li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Desk Height Calculator
   -------------------------------------------------------------------------- */

.calc-intro,
.planner-intro {
  max-width: 62ch;
  margin: var(--space-3) 0 var(--space-3);
}

.calc-intro h1,
.planner-intro h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.calc-intro p,
.planner-intro p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.calc {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-4);
}

.calc-controls,
.calc-output {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
}

.calc-controls {
  display: grid;
  gap: var(--space-3);
  border: 0;
  margin: 0;
}

.calc-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.calc-legend,
.calc-label {
  display: block;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 50px;
}

.seg-btn {
  flex: 1;
  padding: 9px 12px;
  border: 0;
  border-radius: 50px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.seg-btn:hover {
  color: var(--text-color);
}

.seg-btn.is-on {
  background: var(--accent-color);
  color: var(--accent-contrast);
}

.calc-hint {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 10px 0 0;
  line-height: 1.5;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.calc-input:focus {
  border-color: var(--accent-color);
}

.unit-tag {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 2.2em;
}

.calc-range {
  width: 100%;
  margin-top: 14px;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.calc-actions .btn {
  flex: 1 1 auto;
}

/* Output side.
   The unit switch lives here rather than with the inputs: it does not change
   the calculation, only how the results are written, so it belongs beside the
   numbers it formats. */
.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.output-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* Sized to its labels instead of filling the row. */
.seg--compact {
  flex: 0 0 auto;
}

.seg--compact .seg-btn {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: 0.82rem;
}

.calc-figure {
  margin: 0 0 var(--space-3);
}

.calc-figure svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 12px;
}

.dg-floor {
  stroke: var(--border-strong);
  stroke-width: 2;
}

.dg-body,
.dg-leg {
  stroke: var(--text-muted);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.dg-surface {
  stroke: var(--accent-color);
  stroke-width: 5;
  stroke-linecap: round;
}

.dg-fill {
  fill: var(--text-muted);
}

.dg-screen {
  fill: var(--accent-soft);
  stroke: var(--accent-color);
  stroke-width: 2;
}

.dg-note {
  fill: var(--text-muted);
  font-size: 10px;
  font-family: var(--font-family);
}

.results {
  display: grid;
  /* Six results. At minmax(160px) the column filled to four and left two dead
     cells on the second row; 210px settles on three, so it lands as two full
     rows of three at every width the output column actually takes. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}

.result {
  background: var(--card-bg);
  padding: 14px 16px;
}

.result dt {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.result dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.result dd .u {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 3px;
}

.result--key {
  background: var(--accent-soft);
}

.result--key dd {
  color: var(--accent-color);
}

.calc-status {
  font-size: 0.88rem;
  color: var(--success);
  min-height: 1.3em;
  margin: 12px 0 0;
}

.calc-verdict {
  margin-top: var(--space-2);
  padding: 18px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-color);
  border-radius: var(--radius-sm);
}

.calc-verdict p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 8px;
  color: var(--text-muted);
}

.calc-verdict p:last-child {
  margin-bottom: 0;
}

.calc-verdict strong {
  color: var(--text-color);
}

.label-inline {
  font-size: 0.74rem !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-color) !important;
}

@media (max-width: 860px) {
  .calc {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "From measured elbows" will not sit beside its sibling on a narrow phone,
   so those options stack into full-width rows rather than overflowing.
   The unit switch is exempt: "cm" and "inches" fit side by side at any width,
   and stacking them doubled the height of the results header for nothing. */
@media (max-width: 480px) {
  .seg:not(.seg--compact) {
    flex-direction: column;
    border-radius: var(--radius-sm);
  }

  .seg:not(.seg--compact) .seg-btn {
    white-space: normal;
    border-radius: calc(var(--radius-sm) - 2px);
    padding: 11px 12px;
  }
}

/* --------------------------------------------------------------------------
   Desk Setup Planner

   The planner used to be a standalone page with its own palette, its own
   header and its own footer — an orange-accented island inside a cyan site,
   with no light theme because it never loaded this stylesheet. Everything
   below is the same UI rebuilt on the site's tokens, so it themes, scales and
   ages with the rest of the design system instead of drifting away from it.
   -------------------------------------------------------------------------- */

.planner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-4);
}

.planner-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.6vw, 26px);
  min-width: 0;
}

/* ── Stage ─────────────────────────────────────────────────────────────── */

.planner-stage {
  margin: 0 0 var(--space-3);
}

.planner-stage svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

/* The stage is drawn from JS, so its colours live here as classes rather than
   as hard-coded hex in the script. That is what lets it follow the theme. */
.pl-floor { stroke: var(--border-strong); stroke-width: 2; }
.pl-leg { fill: var(--border-strong); }
.pl-hardware { fill: var(--text-muted); }
.pl-screen { fill: var(--bg-color); stroke: var(--accent-color); stroke-width: 1.5; }
.pl-seat { fill: var(--accent-2); }
.pl-lamp { stroke: var(--accent-2); stroke-width: 3; fill: none; }
.pl-bulb { fill: var(--accent-2); }
.pl-leaf { fill: var(--accent-2); }
.pl-label {
  fill: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-family);
  text-anchor: middle;
}

.planner-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.seg-group {
  min-width: 0;
}

.seg-group > .calc-label {
  margin-bottom: 8px;
}

/* ── Item palette ──────────────────────────────────────────────────────── */

.planner-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-color);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.palette-item:hover:not(:disabled) {
  border-color: var(--accent-color);
}

.palette-item[aria-pressed='true'] {
  border-color: var(--accent-color);
  background: var(--accent-soft);
}

/* The desk is mandatory and its button says so, rather than looking clickable
   and then doing nothing. */
.palette-item:disabled {
  cursor: default;
}

.palette-item.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
}

.palette-item .ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  font-size: 17px;
  line-height: 1;
}

.palette-item .nm {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
}

.palette-item .pr {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.palette-item .chk {
  display: grid;
  place-items: center;
  flex: none;
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border-color);
  font-size: 12px;
  line-height: 1;
  color: transparent;
}

.palette-item[aria-pressed='true'] .chk {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-contrast);
}

/* ── Running total and buy list ────────────────────────────────────────── */

.planner-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color);
}

.planner-total .amt {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.planner-total .amt small {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.planner-buylist {
  display: grid;
  gap: 8px;
  margin-top: var(--space-2);
}

.buyrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.buyrow .nm {
  font-size: 0.88rem;
  font-weight: 600;
  min-width: 0;
}

.buyrow .pr {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
}

.buyrow a {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.planner-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
}

.planner-actions {
  display: flex;
  gap: 10px;
  margin-top: var(--space-2);
}

.planner-actions .btn {
  flex: 1;
}

/* ── Notes and toast ───────────────────────────────────────────────────── */

.planner-note {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.88rem;
}

.planner-note p {
  margin: 0 0 10px;
}

.planner-note p:last-child {
  margin-bottom: 0;
}

.planner-note strong {
  color: var(--text-color);
}

.planner-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  padding: 11px 20px;
  background: var(--accent-color);
  color: var(--accent-contrast);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}

.planner-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Stacking earlier than the calculator: the stage has a fixed aspect ratio, so
   it goes unreadable well before the column itself runs out of room. */
@media (max-width: 900px) {
  .planner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .planner-actions {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   Desk Setup Checklist
   The .checklist-sheet is designed to survive printing: see the print block
   at the foot of this file, which strips the site chrome and lays the sheet
   out in two columns on A4/Letter.
   -------------------------------------------------------------------------- */

.checklist-intro {
  max-width: 62ch;
  margin: var(--space-3) 0 var(--space-4);
}

.checklist-intro h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 14px;
}

.checklist-intro p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.checklist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.checklist-note {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.checklist-sheet {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
  margin-bottom: var(--space-5);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--accent-color);
}

.sheet-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-color);
  font-weight: 700;
  margin: 0 0 2px;
}

.sheet-title {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0;
}

.sheet-mark {
  flex-shrink: 0;
  margin: 0;
  border-radius: 10px;
}

/* Step 0 — the measurements */
.numbers-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 28px;
}

.numbers-box h3 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.numbers-box > p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 18px;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 24px;
  list-style: none;
  margin: 0 0 16px;
}

.numbers-grid li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.num-label {
  font-size: 0.86rem;
  font-weight: 600;
}

.num-blank {
  display: block;
  height: 30px;
  border-bottom: 2px dotted var(--border-strong);
}

.numbers-grid small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.numbers-hint {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

/* The eight groups */
.checklist-columns {
  columns: 2;
  column-gap: 40px;
}

.check-group {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 26px;
  display: inline-block; /* keeps groups whole across columns in Safari */
  width: 100%;
}

.check-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--accent-contrast);
  font-size: 0.75rem;
  font-weight: 700;
}

.check-list {
  list-style: none;
  margin: 0;
}

.check-list li {
  margin-bottom: 9px;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* The whole row is the target, kept at the 24px WCAG 2.5.8 minimum. Print
   overrides these back down — paper has no tap targets. */
.check-list label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  min-height: 24px;
  padding: 2px 0;
}

.check-list input[type='checkbox'] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.check-list .check-note {
  margin-top: 10px;
  padding-left: 26px;
  font-size: 0.84rem;
  color: var(--text-muted);
  font-style: italic;
}

.sheet-foot {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.sheet-foot p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sheet-source {
  font-size: 0.8rem !important;
}

.sheet-url {
  font-size: 0.8rem !important;
  font-weight: 600;
  color: var(--accent-color) !important;
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  .checklist-columns {
    columns: 1;
  }
}

/* --------------------------------------------------------------------------
   Head-to-head figures
   -------------------------------------------------------------------------- */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.versus figure {
  margin: 0;
  text-align: center;
}

.versus img {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

.versus figcaption {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.45;
}

.versus-mark {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  background: var(--bg-elevated);
}

@media (max-width: 560px) {
  .versus {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* --------------------------------------------------------------------------
   Range chart
   Marks recede to a single data hue; grid and axes stay quiet; every value is
   directly labelled, so there is no information hidden behind a hover state.
   -------------------------------------------------------------------------- */

.chart-figure {
  margin: var(--space-3) 0;
  padding: 22px 24px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.chart-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.chart-scroll {
  overflow-x: auto;
}

.range-chart {
  width: 100%;
  min-width: 520px;
  height: auto;
  display: block;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

.ch-bar {
  fill: var(--chart-mark);
}

.ch-val {
  fill: var(--accent-contrast);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ch-name {
  fill: var(--text-color);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
}

.ch-ref {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.75;
}

.ch-reflabel {
  fill: var(--text-muted);
  font-family: var(--font-family);
  font-size: 10.5px;
  font-weight: 500;
}

.ch-axis {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.ch-tick {
  fill: var(--text-muted);
  font-family: var(--font-family);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chart-note {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 14px 0 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   References / citations
   -------------------------------------------------------------------------- */

.references {
  margin-top: var(--space-4);
  padding: 24px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

.references h2 {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.references p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.references ol {
  margin: 0 0 0 1.2rem;
  padding: 0;
  list-style: decimal;
}

.references li {
  margin-bottom: 8px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.references a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-responsive {
  overflow-x: auto;
  margin: var(--space-3) 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  background-color: var(--card-bg);
}

th,
td {
  padding: 15px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95rem;
  vertical-align: middle;
}

th {
  background-color: var(--bg-elevated);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Header labels wrap rather than forcing the table wider than its column.
     A two-line "Height range" costs nothing; a sideways scrollbar on a
     comparison table costs the comparison. */
  white-space: normal;
  text-wrap: balance;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background-color: var(--accent-soft);
}

.table-img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
}

.rating .stars {
  color: #f5b544;
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   Product review box
   -------------------------------------------------------------------------- */

.review-box {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 36px);
  margin: var(--space-3) 0 var(--space-4);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
}

.review-box--winner {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px var(--accent-color);
}

.review-img-col img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin: 0 0 14px;
  border: 1px solid var(--border-color);
}

.review-content {
  min-width: 0;
}

.review-content > h3 {
  margin-top: 0;
}

.award {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 50px;
  background: var(--accent-color);
  color: var(--accent-contrast);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  list-style: none;
}

.spec-list li {
  margin: 0;
  font-size: 0.9rem;
}

.spec-list dt,
.spec-list .spec-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.spec-list .spec-value {
  font-weight: 600;
}

.pros-cons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 22px 0;
}

.pros,
.cons {
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

.pros h4,
.cons h4 {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pros h4 {
  color: var(--success);
}

.cons h4 {
  color: var(--danger);
}

.pros ul,
.cons ul {
  list-style: none;
  margin: 0;
}

.pros li,
.cons li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 0.94rem;
}

.pros li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: bold;
}

.cons li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--danger);
  font-weight: bold;
}

.verdict {
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
}

.verdict strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   Author bio, share, related
   -------------------------------------------------------------------------- */

.author-bio {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  background-color: var(--card-bg);
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  margin-top: var(--space-4);
}

.author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-color);
  margin: 0;
  flex-shrink: 0;
}

.author-info {
  flex: 1;
  min-width: 220px;
}

.author-info h4,
.author-info .author-name {
  font-weight: 700;
  color: inherit;
  margin-bottom: 4px;
  font-size: 1.05rem;
}

.author-info p {
  margin-bottom: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.social-share {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.social-share .share-label {
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}

.share-btn {
  padding: 9px 18px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 50px;
  color: var(--text-color);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.88rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.share-btn:hover {
  background-color: var(--accent-color);
  color: var(--accent-contrast);
  border-color: var(--accent-color);
}

.related-posts {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: 0;
}

.related-list a {
  display: block;
  padding: 18px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-color);
  font-weight: 600;
  font-size: 0.98rem;
  transition: border-color 0.2s, transform 0.2s;
}

.related-list a:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.related-list small {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.83rem;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-color);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  z-index: 120;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent-color);
  color: var(--accent-contrast);
  border-color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  background-color: var(--bg-elevated);
  padding: var(--space-4) 20px var(--space-3);
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  text-align: left;
  padding-bottom: var(--space-3);
}

.footer-col h4,
.footer-col .footer-heading {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.footer-col ul {
  display: grid;
  gap: 8px;
}

.footer-col a {
  color: var(--text-color);
  font-size: 0.92rem;
}

.footer-col a:hover {
  color: var(--accent-color);
}

.footer-col p {
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 34ch;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--text-muted);
}

.prose {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

.prose h2 {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: var(--space-3) 0 12px;
}

.prose p,
.prose li {
  font-size: 1.04rem;
}

.prose ul,
.prose ol {
  margin: 0 0 20px 1.35rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: 8px;
}

.empty-state {
  text-align: center;
  padding: var(--space-5) 20px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Animation — strictly opt-in, so content can never be stranded invisible.

   Default state is VISIBLE. Hiding only happens under `.js-anim`, which the
   inline <head> script adds and then removes again on window.load if main.js
   never reported in. So a blocked, 404'd or erroring main.js degrades to
   plain visible content rather than a blank page.
   -------------------------------------------------------------------------- */

.fade-in-up {
  opacity: 1;
  transform: none;
}

.js-anim .fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-anim .fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* JavaScript fully disabled: the inline script never ran, so `no-js` remains. */
.no-js .reading-progress,
.no-js .back-to-top,
.no-js .search-container {
  display: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-anim .fade-in-up {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-sidebar {
    position: static;
    order: 0;
    margin-bottom: var(--space-2);
  }

  .review-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-img-col {
    max-width: 280px;
  }
}

/* Eight nav items, a search field and two buttons is more than the bar holds
   below its full 1200px container. Since the links no longer wrap, the row
   would push the actions cluster off-screen instead — so the search field
   drops out and the links tighten before that can happen. Search stays
   reachable: the mobile menu keeps it, and every page is one nav click away. */
@media (max-width: 1240px) {
  .nav-links {
    gap: 15px;
  }

  .nav-links a {
    font-size: 0.9rem;
  }

  .search-container {
    display: none;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background-color: var(--bg-elevated);
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-color);
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  .nav-links a[aria-current='page'] {
    border-bottom-color: var(--border-color);
  }

  .hamburger {
    display: block;
    order: 3;
  }

  .search-container {
    display: none;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .card-content {
    padding: 18px;
  }

  .social-share {
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  header,
  footer,
  .disclosure-banner,
  .article-sidebar,
  .social-share,
  .newsletter,
  .back-to-top,
  .reading-progress,
  .related-posts {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .fade-in-up {
    opacity: 1;
    transform: none;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    word-break: break-all;
  }

  /* ---- Desk Setup Checklist -------------------------------------------
     When the checklist page is printed, everything except the sheet itself
     is dropped and the sheet is re-laid out to fill the page. */

  .checklist-intro,
  .checklist-actions,
  .breadcrumbs,
  .prose {
    display: none !important;
  }

  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  .checklist-sheet {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }

  .checklist-sheet .sheet-head {
    border-bottom: 2pt solid #000 !important;
    margin-bottom: 3.5mm;
    padding-bottom: 2mm;
  }

  .checklist-sheet .sheet-kicker {
    color: #000 !important;
  }

  .checklist-sheet .sheet-title {
    font-size: 20pt;
  }

  .checklist-sheet .numbers-box {
    background: #fff !important;
    border: 1pt solid #000 !important;
    padding: 2.5mm 3.5mm;
    margin-bottom: 3.5mm;
    break-inside: avoid;
  }

  .checklist-sheet .numbers-box h3 {
    font-size: 10pt;
  }

  .checklist-sheet .numbers-box > p,
  .checklist-sheet .numbers-hint {
    font-size: 7pt;
    color: #333 !important;
    padding-top: 2mm;
  }

  .checklist-sheet .numbers-grid {
    gap: 2mm 5mm;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 2mm;
  }

  .checklist-sheet .num-blank {
    height: 5mm;
    border-bottom: 1pt dotted #666;
  }

  .checklist-sheet .num-label {
    font-size: 8pt;
  }

  .checklist-sheet .numbers-grid small {
    font-size: 7pt;
    color: #555 !important;
  }

  .checklist-columns {
    columns: 2;
    column-gap: 8mm;
  }

  .check-group {
    margin-bottom: 3mm;
  }

  .check-group h3 {
    font-size: 9pt;
    border-bottom: 0.5pt solid #999 !important;
    padding-bottom: 1mm;
    margin-bottom: 1.5mm;
  }

  .step-n {
    background: #000 !important;
    color: #fff !important;
    width: 14px;
    height: 14px;
    font-size: 7pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .check-list li {
    font-size: 7.8pt;
    margin-bottom: 1.1mm;
    line-height: 1.28;
  }

  .check-list label {
    min-height: 0;
    padding: 0;
    gap: 5pt;
  }

  .check-list input[type='checkbox'] {
    width: 9pt;
    height: 9pt;
    margin-top: 1pt;
  }

  .check-list .check-note {
    font-size: 6.8pt;
    color: #444 !important;
    padding-left: 14pt;
    margin-top: 1.5mm;
  }

  .sheet-foot {
    border-top: 0.5pt solid #999 !important;
    padding-top: 2mm;
    margin-top: 0;
    break-inside: avoid;
  }

  .sheet-foot p {
    font-size: 7pt;
    color: #333 !important;
    margin-bottom: 1.5mm;
  }

  .sheet-url {
    color: #000 !important;
  }

  /* The citation URLs are already named in the text — no need to expand them
     inside the printed sheet and blow the layout. */
  .checklist-sheet a[href^='http']::after {
    content: '';
  }
}