/* MarksCalc.com — layout and components.
   Every rule here is a direct translation of the approved prototype. */

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

html { -webkit-text-size-adjust: 100%; }

/* Beats the display:flex on component classes when a block is toggled off. */
[hidden] { display: none !important; }

/* Announced to screen readers, never painted. The count-up would otherwise
   fire a live-region update on every animation frame. */
.mc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Copy and Share need JavaScript. Without it they are dead controls, so they
   are not rendered at all — the rest of the page works as static content. */
.no-js .js-copy,
.no-js .js-share { display: none; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-base);
  /* A single-column page on a wide dark screen is mostly background, and a
     flat #hex reads as switched off. One fixed radial glow in the brand
     colour, faint enough to survive both themes, gives the empty area a
     centre of gravity. Paints once — no scroll repaints, no new layer. */
  background-image: radial-gradient(1100px 480px at 50% -120px,
    var(--bg-glow), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

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

.mc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-card);
  color: var(--text-primary);
  padding: 10px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  z-index: 40;
}
.mc-skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- header */

/* Two grids, not one.
 *
 * The chrome — header bar, tab strip, footer — sits on a 1080px container.
 * The content sits on 680px, centred inside it. Both are needed: the content
 * column is sized by what a line of text can carry, and the tab strip is
 * sized by what seven tabs need, and those are different numbers. Forcing
 * them equal was tried; at 680px the strip clipped "All 15 calculators" on a
 * 1440px screen — text cut off with an ocean of room either side.
 *
 * Every wide reference layout does it this way: the chrome is a full-width
 * band with its own inner measure, the reading column is narrower and
 * centred. What must still agree is the padding, so at small widths — where
 * both containers are wider than the screen — chrome and content share one
 * left edge again. verify.mjs checks both containers and that shared edge. */

.mc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Opaque first: color-mix is unsupported before Safari 16.2, and without a
     fallback the sticky header goes transparent and content scrolls through it. */
  background: var(--surface-card);
  background: color-mix(in srgb, var(--surface-card) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.mc-header__bar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.mc-header__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.mc-header__link:hover { color: var(--text-primary); background: var(--surface-sunken); text-decoration: none; }
.mc-header__link[aria-current="page"] { color: var(--accent-text); }

.mc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
}
.mc-logo:hover { color: var(--text-primary); text-decoration: none; }

.mc-logo__tile {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--text-primary);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
}

.mc-logo__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
}
.mc-logo__word em { font-style: normal; color: var(--accent); }

.mc-header__spacer { flex: 1; }

.mc-theme {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-theme__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* switch */
.mc-switch {
  position: relative;
  width: 40px;
  height: 24px;
  flex: none;
  border: none;
  padding: 0;
  border-radius: 999px;
  background: var(--border-default);
  cursor: pointer;
  transition: var(--transition-colors);
}
.mc-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 160ms var(--ease-standard);
}
.mc-switch[aria-checked="true"] { background: var(--accent); }
.mc-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ------------------------------------------------------------- site menu */

/* A <details>, so the whole site is reachable with JavaScript off. The panel
   drops below the full header (its containing block is the sticky header, the
   nearest positioned ancestor — .mc-menu itself is deliberately unpositioned). */
/* The stacking context keeps the veil's z-index:-1 inside the menu — without
   it the veil would sink behind the page instead of over it. */
.mc-menu { isolation: isolate; }

/* Everything that is not the menu drops back while it is open. The veil is a
   pseudo-element of the menu itself, so a click on it is a click on the menu
   element — the inline script treats that as "close". */
.mc-menu[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.45);
  z-index: -1;
}

.mc-menu summary {
  list-style: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.mc-menu summary::-webkit-details-marker { display: none; }
.mc-menu summary:hover { background: var(--surface-sunken); }
.mc-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mc-menu__icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.mc-menu__icon span {
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform 180ms var(--ease-standard), opacity 120ms var(--ease-standard);
}
/* Open: the three lines become a cross. Transform and opacity only. */
.mc-menu[open] .mc-menu__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mc-menu[open] .mc-menu__icon span:nth-child(2) { opacity: 0; }
.mc-menu[open] .mc-menu__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mc-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
/* 148px, so the six groups make one row inside the 1080px container — five
   plus a lone straggler on row two reads as a mistake, not a layout. */
.mc-menu__cols {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 28px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 20px 24px;
}
.mc-menu__group { display: flex; flex-direction: column; gap: 2px; }
.mc-menu__title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mc-menu__group a {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 5px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm, 6px);
  transition: var(--transition-colors);
}
.mc-menu__group a:hover { color: var(--text-primary); background: var(--surface-sunken); text-decoration: none; }
.mc-menu__group a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
.mc-menu__more { color: var(--accent-text) !important; font-weight: 600; margin-top: 2px; }

/* tabs */
.mc-nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px 12px;
  display: flex;
  align-items: stretch;
}

/* Only the tabs scroll. The home button is a sibling of the scroller, not a
   child of it, which is the whole point — it cannot be swiped out of reach. */
.mc-nav__scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.mc-nav__scroll::-webkit-scrollbar { display: none; }

/* When the strip overflows, the cut edge must look cut on purpose. A hard
   clip through the middle of "Attendance" reads as a bug; a fade reads as
   "more this way". The classes are set from scroll position, each fade shown
   only while there is actually content hidden behind it — a fade over the
   last tab would just dim it, including when it is the active one. Applies at
   every width: the strip can overflow on a tablet too, not just a phone. */
.mc-nav__scroll.is-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.mc-nav__scroll.is-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px);
  mask-image: linear-gradient(to right, transparent, #000 34px);
}
.mc-nav__scroll.is-start.is-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent);
}

.mc-home {
  display: inline-flex;
  align-items: center;
  padding: 0 14px 0 0;
  min-height: 40px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-colors);
}
.mc-home:hover { color: var(--accent-text); text-decoration: none; }
.mc-home:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.mc-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-height: 40px;
  border-bottom: 1px solid var(--border-subtle);
  /* Inside a horizontal scroller a plain flex row is sized to the visible
     width, not to its own content — so this rule stopped mid-strip and the
     scrolled-past tabs sat on nothing. max-content grows the box to fit the
     tabs; the 100% floor keeps margin-left:auto working on the hub link when
     everything already fits. */
  min-width: max-content;
}
.mc-tabs a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-colors);
}
.mc-tabs a:hover { color: var(--text-primary); text-decoration: none; }
.mc-tabs a[aria-current="page"] {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}
/* The hub link closes the strip. Set apart so it does not read as a sixth
   sibling calculator. */
.mc-tabs__all {
  margin-left: auto;
  padding-left: 18px !important;
  border-left: 1px solid var(--border-subtle);
  color: var(--text-muted) !important;
}
.mc-tabs__all[aria-current="page"] { color: var(--accent-text) !important; }
@media (max-width: 640px) {
  .mc-tabs__all { margin-left: 0; padding-left: 12px !important; }
}

/* ------------------------------------------------------------------ main */

.mc-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 22px 28px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mc-head { display: flex; flex-direction: column; gap: 10px; }

.mc-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.mc-crumbs a { color: var(--text-muted); }
.mc-crumbs a:hover { color: var(--text-secondary); }

h1.mc-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.mc-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.mc-section { display: flex; flex-direction: column; gap: 10px; }
.mc-tool { display: flex; flex-direction: column; gap: 14px; }

/* ------------------------------------------------------------ components */

.mc-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.mc-stack { display: flex; flex-direction: column; gap: 14px; }
.mc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.mc-field__hint { font-size: 12px; color: var(--text-muted); }

.mc-input,
.mc-select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 16px; /* 16px prevents iOS auto-zoom */
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: var(--transition-colors), box-shadow 160ms var(--ease-standard);
}
.mc-input:hover,
.mc-select:hover { border-color: var(--border-strong); }
.mc-input:focus,
.mc-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mc-input::placeholder { color: var(--text-muted); }

.mc-select {
  /* iOS Safari keeps its own chevron without the prefixed property, so the
     control ends up with two. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2379716B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
[data-theme="dark"] .mc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2378829A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* pills */
.mc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-pill {
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  transition: var(--transition-colors);
}
.mc-pill:hover { border-color: var(--border-strong); }
.mc-pill[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

/* buttons */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-colors);
}
.mc-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
}
.mc-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
  text-decoration: none;
}
.mc-btn--secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}
.mc-btn--secondary:hover { border-color: var(--border-strong); text-decoration: none; }
.mc-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.mc-btn:disabled,
.mc-row__remove:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mc-btn:disabled:hover { background: var(--surface-card); border-color: var(--border-default); }
.mc-row__remove:disabled:hover { background: transparent; color: var(--text-muted); }

/* badges */
.mc-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.mc-badge--accent {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-text);
}
.mc-badge--neutral {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* scale row on conversion pages */
.mc-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.mc-scale strong { font-weight: 600; color: var(--text-primary); }
.mc-scale__chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ------------------------------------------------------------ result card */

.mc-result {
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft);
  border-radius: var(--radius-2xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mc-result__msg { margin: 0; font-size: 15px; color: var(--text-secondary); }
.mc-result__body { display: flex; flex-direction: column; gap: 16px; }
.mc-verdict-group { display: flex; flex-direction: column; gap: 6px; }
.mc-custom {
  max-width: 200px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* the reverse instruction is the hero — PRD §7.3 */
.mc-verdict {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 7.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--accent);
}
.mc-verdict__sub {
  margin: 0;
  font-size: 15px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.mc-bignum {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 12vw, 60px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.mc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 14px;
  border-top: 1px solid var(--accent-soft-border);
  font-size: 13px;
  color: var(--text-secondary);
}
.mc-stats strong {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.mc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.mc-actions--divided {
  padding-top: 18px;
  border-top: 1px solid var(--accent-soft-border);
}
/* the result block is screenshotted into group chats — it must be branded */
.mc-actions__brand {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

.mc-inline-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
}
.mc-minilabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.mc-mininum {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.mc-contrib {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--accent-soft-border);
}
.mc-contrib__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* ------------------------------------------------------------ the track
 *
 * Motion rules for this file, in one place:
 *   1. Only transform and opacity animate. Both composite on the GPU, so a
 *      mid-range phone holds 60fps. Animating width or left would not.
 *   2. Every animated element renders at its final value in the HTML. The
 *      script animates from that value; it never supplies it. With JS off the
 *      bars are still correct, just static.
 *   3. Everything here is switched off under prefers-reduced-motion, at the
 *      bottom of this block. That is not a courtesy — motion sickness and
 *      vestibular disorders are real and this is a page people use under
 *      exam-week stress.
 */

.mc-track { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }

.mc-track__rail {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--accent-soft-border);
  overflow: hidden;
}
.mc-track__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 620ms var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    background-color 320ms ease;
  will-change: transform;
}
/* Below the requirement the bar stops asserting success. Colour is the signal,
   not the only signal — the verdict line above says it in words. */
.mc-track.is-short .mc-track__fill { background: var(--text-muted); }

.mc-track__mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--text-primary);
  border-radius: 1px;
  /* No transition on `left`. It is a layout property, so animating it would
     break the rule at the top of this block, and it would buy nothing: the
     requirement changes only when a pill is tapped, which is a discrete choice
     rather than a value sliding. The fill animates; the line it is measured
     against moves at once. */
}

/* Height is reserved by the caption itself, which is always present — so the
   marker moving never reflows anything below it. */
.mc-track__scale {
  position: relative;
  min-height: 15px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.mc-track__req {
  position: absolute;
  white-space: nowrap;
  color: var(--text-secondary);
}
/* Anchored by the engine, not by CSS guesswork: near the ends the caption
   pins to the edge so it cannot overhang the card. */
.mc-track__req[data-anchor="mid"] { transform: translateX(-50%); }
.mc-track__req[data-anchor="start"] { left: 0; }
.mc-track__req[data-anchor="end"] { right: 0; }

/* The bar behind a contribution row. Sits under the text rather than beside
   it, so adding it cost no horizontal space on a 375px screen. */
.mc-contrib__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 6px;
  background: var(--accent-soft);
  transform-origin: left center;
  transition: transform 560ms var(--ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
  z-index: 0;
  will-change: transform;
}
.mc-contrib__row > *:not(.mc-contrib__bar) { position: relative; z-index: 1; }

/* Sections lift into place on first scroll-in. The hidden state is added by
   motion.js and only to sections that start below the fold, so with JavaScript
   off — or under reduced motion — nothing here ever applies and the page is
   fully visible from the first paint. */
.mc-reveal { opacity: 0; transform: translateY(12px); }
.mc-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-expo), transform 520ms var(--ease-expo);
}

/* The transitions on the bars are already neutralised by the blanket
   `* { transition-duration: 0.01ms !important }` at the foot of this file, so
   they are not repeated here. These two are not covered by it:

   - The reveal hides with opacity, and a duration of zero on a hidden element
     leaves it hidden. motion.js does not add the class under reduced motion,
     so this is the second line of defence rather than the first.
   - A `*` selector does not match view-transition pseudo-elements, so the
     theme cross-fade has to be switched off by name. */
@media (prefers-reduced-motion: reduce) {
  .mc-reveal,
  .mc-reveal.is-in { opacity: 1; transform: none; transition: none; }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

.mc-contrib__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 8px;
  margin: 0 -8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mc-contrib__name {
  flex: 1;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.mc-contrib__detail { color: var(--text-muted); }
.mc-contrib__share { width: 64px; text-align: right; font-weight: 600; }

/* --------------------------------------------------------- formula block */

.mc-formula {
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-formula__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mc-formula code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.mc-formula code.is-worked { color: var(--accent-text); }
.mc-formula code.is-muted { color: var(--text-secondary); }
/* A full sentence, not a label — 13px, one step up from the uppercase caption
   above it. */
.mc-formula p { margin: 0; font-size: 13px; color: var(--text-muted); text-wrap: pretty; }
.mc-formula p.is-spaced { margin-top: 4px; }

.mc-verify {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.mc-verify__badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-text);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* --------------------------------------------------------- subject rows */

.mc-rows { display: flex; flex-direction: column; gap: 12px; }
.mc-row {
  display: grid;
  grid-template-columns: 1fr 96px 96px 32px;
  gap: 12px;
  align-items: center;
}
.mc-row--head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mc-row .mc-input,
.mc-row .mc-select { height: 40px; font-size: 15px; }
/* Wrapper exists so each field can carry its own label once the row
   restructures onto two lines on a phone. Label is hidden on desktop —
   the column header above already names it. */
.mc-row__field { min-width: 0; }
.mc-row__field::before {
  content: attr(data-label);
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mc-row__remove {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: var(--transition-colors);
}
.mc-row__remove:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* ---------------------------------------------------------------- tables */

.mc-tablewrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.mc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
/* A column header is not decoration. Uppercase and letterspaced, it already
   reads smaller than its px size suggests, and it is the label you need before
   the column below it means anything — so it gets 12px, not the 11 that the
   rest of the muted chrome uses. */
.mc-table th {
  text-align: left;
  padding: 9px 16px;
  background: var(--surface-sunken);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mc-table td {
  padding: 8px 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.mc-table td:last-child { color: var(--text-secondary); }

/* -------------------------------------------------------------- mistakes */

.mc-mistakes { display: flex; flex-direction: column; gap: 8px; }
.mc-mistake {
  display: flex;
  gap: 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.mc-mistake__n {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 2px;
}
.mc-mistake__body { display: flex; flex-direction: column; gap: 4px; }
.mc-mistake__body strong { font-size: 16px; }
/* Explanatory prose in a compact card: a step below the 17px article text,
   because the card is narrow, but not the 14px it was — this is the part of
   the page that changes what someone does. */
.mc-mistake__body span {
  font-size: 15px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- faq */

.mc-faq {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
}
.mc-faq details { border-top: 1px solid var(--border-subtle); }
.mc-faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary > span:first-child { flex: 1; }
.mc-chev {
  color: var(--text-muted);
  transition: transform 160ms var(--ease-standard);
}
.mc-faq details[open] .mc-chev { transform: rotate(180deg); }
/* An FAQ answer is running text and is sized with the running text, further
   down the file — not set here, where it would only drift from the paragraph
   it sits three inches below. */
.mc-faq__a {
  padding: 0 18px 14px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- related */

.mc-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.mc-related a {
  display: block;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms var(--ease-standard),
    transform 180ms var(--ease-standard);
}
.mc-related a:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--text-primary);
}
.mc-related__title {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
/* One line of what the page does, clamped to two on narrow cards. The old
   sub-line repeated the title in different words — every card said its own
   name twice. */
.mc-related__sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- editorial */

.mc-prose { display: flex; flex-direction: column; gap: 12px; }
.mc-prose p { margin: 0; color: var(--text-secondary); text-wrap: pretty; }

/* Measure is set by the container, not per element.
 *
 * The first attempt capped running text at 68ch and left cards and tables on
 * the full 724px column. The measure was right and the page looked wrong: every
 * paragraph was 137px narrower than the box above it, so no two blocks shared
 * an edge and the eye had nothing to anchor on.
 *
 * `.mc-main` is now 680px, which after its 28px padding leaves 624px — about
 * 72 characters a line, inside the readable band. One container, one width,
 * and cards, tables, results and paragraphs all start and end together. Widen
 * it and the measure goes with it; there is no second cap to catch that. */
/* Justified body copy.
 *
 * The browser reaches the right margin by stretching the spaces between words,
 * and it has no other lever unless it can also break words. So hyphenation is
 * not a nicety here — it is what keeps the gaps from opening up. It needs a
 * hyphenation dictionary for the document language and cannot be feature-
 * detected, which is why the measure cap above matters more now than it did:
 * a longer line has more spaces to absorb the same slack.
 *
 * Deliberately not justified: the short-answer card (three lines of 20px type
 * has too few spaces to stretch without tearing), headings, table cells, the
 * contents list and the worked-formula blocks. */
.mc-prose > p,
.mc-prose li,
p.mc-prose,
.mc-note,
.mc-faq__a {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* Reading size, set apart from the 16px interface size.
 *
 * The two jobs are different. Interface text is glanced at — a label, a button,
 * a number you already know the meaning of. Running text is read for minutes at
 * a stretch, and it was inheriting the 16px/1.5 the buttons use.
 *
 * Measured before this rule: 85 characters a line on every screen 820px and up,
 * at 1.5 leading. Both numbers point the same way. 85 is past the 75 where the
 * eye starts losing its place on the return sweep, and 1.5 is the leading that
 * makes a long line hardest to track, because there is no vertical cue to tell
 * one line from the next.
 *
 * 17px brings the line to 80 characters and 1.62 gives the return sweep a rail
 * to land on. 80 is still above the ideal band, and it is deliberate: the only
 * other lever is a narrower column, and the whole page shares one column width
 * on purpose. A prose block set narrower than the card above it is the exact
 * fault this file spent an afternoon removing. Long lines, well led, beat
 * ragged alignment. */
.mc-prose > p,
.mc-prose li,
p.mc-prose,
.mc-note,
.mc-faq__a {
  font-size: 17px;
  line-height: 1.62;
}

/* The last line of a justified paragraph is set flush left, never stretched.
   This is the browser default; stated so a future edit does not "fix" it. */
.mc-prose > p,
.mc-prose li,
p.mc-prose,
.mc-note,
.mc-faq__a { text-align-last: auto; }
.mc-prose h3 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.mc-prose ul { margin: 0; padding-left: 20px; color: var(--text-secondary); }
.mc-prose li { margin-bottom: 4px; }

.mc-updated {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.mc-prose ol { margin: 0; padding-left: 20px; color: var(--text-secondary); }
.mc-prose ol li { margin-bottom: 6px; }
.mc-prose strong { color: var(--text-primary); font-weight: 650; }

/* A caveat that must not be skimmed past. Left rule rather than a filled
   box, so it stays legible in both themes without a second surface token. */
.mc-note {
  margin: 4px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- article */

/* The answer reuses the amber result card: on this site that card means
   "this is the answer". Only the type scale changes, because a paragraph at
   the 46px verdict size is unreadable. */
.mc-answer p {
  margin: 0;
  font-size: clamp(17px, 4.2vw, 20px);
  line-height: 1.5;
  color: var(--text-primary);
  text-wrap: pretty;
}
.mc-answer p + p { margin-top: -8px; }
.mc-answer strong { font-weight: 750; color: var(--accent-text); }

.mc-toc {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-toc__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mc-toc ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text-muted);
}
.mc-toc a { color: var(--text-secondary); }
.mc-toc a:hover { color: var(--text-primary); }

.mc-guides { display: flex; flex-direction: column; gap: 10px; }
.mc-guides a {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 15px 18px;
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms var(--ease-standard),
    transform 180ms var(--ease-standard);
}
.mc-guides a:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--text-primary);
}
.mc-guides__sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Anchored headings must clear the sticky header when jumped to. */
.mc-h2[id] { scroll-margin-top: 84px; }

/* ------------------------------------------------- desktop split layout */

/* Invisible below 1080px: display:contents dissolves the wrappers and the
   page is the same single stack, calculator first, that a phone gets. */
.mc-cols,
.mc-cols__tool,
.mc-cols__article { display: contents; }

@media (min-width: 1080px) {
  /* A desktop is not a wide phone. Reading stays at its measure in the left
     column; the calculator docks beside it and stays put while the article
     scrolls — the tool is what the visitor came for, so it never leaves the
     screen. Only calculator pages split: a guide is a reading page, and a
     reading page at 680px is correct at every width. */
  body[data-engine] .mc-main { max-width: 1080px; }
  body[data-engine] .mc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    column-gap: 32px;
    align-items: start;
  }
  body[data-engine] .mc-cols__article {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  body[data-engine] .mc-cols__tool {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 2;
    grid-row: 1;
  }

  /* Docked only when the whole tool fits the viewport, and only by the
     script that measured it. The subject-row calculators run to ~800px and
     a pinned rail taller than the screen hides its own bottom — the exact
     thing pinning is supposed to prevent. Measured, not assumed: rows can be
     added and windows resized, so app.js re-checks on both. Without JS the
     rail simply scrolls with the page, which is never wrong. */
  body[data-engine] .mc-cols__tool.is-docked {
    position: sticky;
    top: 128px;
  }

  /* With the strip, the Guides link and the hub link all on screen, the
     hamburger has nothing left to reveal that is not already visible —
     showing it anyway is what makes a desktop read as a blown-up phone. */
  .mc-menu { display: none; }
}

/* --------------------------------------------------------------- ad slot */

.mc-adslot {
  height: 90px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
:root:not([data-ad-slots="on"]) .mc-adslot { display: none; }

/* ---------------------------------------------------------------- footer */

.mc-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

/* On the chrome grid with the header, so the wordmark down here sits under
   the logo up there. With the room that buys, the brand block and the link
   columns share a row instead of stacking — the footer gets shorter and
   reads as one composed band rather than a pile of sections. */
.mc-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 13px;
  color: var(--text-muted);
}

.mc-footer__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) 2fr;
  gap: 24px 48px;
  align-items: start;
}

.mc-footer__top { display: flex; flex-direction: column; gap: 8px; }
.mc-footer__brand { display: flex; align-items: center; gap: 9px; }
.mc-footer__brand .mc-logo__tile { width: 24px; height: 24px; border-radius: 6px; font-size: 14px; }
.mc-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.mc-footer__wordmark em { font-style: normal; color: var(--accent); }
.mc-footer__tagline {
  margin: 0;
  max-width: 52ch;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.mc-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.mc-footer__col { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.mc-footer__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1px;
}
.mc-footer__col a { color: var(--text-secondary); }
.mc-footer__col a:hover { color: var(--accent-text); }
.mc-footer__more { color: var(--accent) !important; font-weight: 600; }

.mc-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.mc-footer__note { margin: 0; max-width: 62ch; text-wrap: pretty; }
.mc-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.mc-footer__legal a { color: var(--text-muted); }
.mc-footer__legal a:hover { color: var(--text-secondary); }

/* --------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .mc-header__bar { padding: 12px 16px; gap: 12px; }
  .mc-main { padding: 14px 16px 36px; gap: 14px; }
  .mc-footer__inner { padding: 22px 16px 26px; gap: 18px; }
  /* The row layout needs the room it no longer has: stack brand over columns. */
  .mc-footer__grid { grid-template-columns: 1fr; }
  /* Three columns at 320px leaves ~90px each and every label wraps. */
  .mc-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  /* At phone width the bar has four controls; the word "Dark" is the one
     that gives way, not the switch that does the work. */
  .mc-theme__label { display: none; }
  .mc-menu__cols { padding: 16px 16px 20px; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The mobile type floor.
   *
   * The base sizes are desktop sizes: on a large screen at a desk, 12-13px
   * secondary text is comfortable because the screen is close-packed with a
   * mouse to aim. A phone is held further from the eye, at a walk, in sun.
   * The same 12px that reads as "dense" on a desktop reads as "squint" on a
   * phone — and it was most of the page: labels, hints, stats, the formula,
   * every card sub-line, the whole footer.
   *
   * The floor: nothing meant to be read goes below 14px on a phone; the
   * labels beside inputs — the text you act on — go to 15; only uppercase
   * micro-captions (already letterspaced to read larger than their size) stay
   * at 12. Inputs were already 16px, which iOS requires anyway. */
  .mc-field__label { font-size: 15px; }
  .mc-field__hint { font-size: 14px; }
  .mc-stats { font-size: 14px; }
  .mc-stats strong { font-size: 16px; }
  .mc-formula code { font-size: 15px; }
  .mc-formula p { font-size: 14px; }
  .mc-verify { font-size: 13px; }
  .mc-result__msg { font-size: 16px; }
  .mc-related__title { font-size: 16px; }
  .mc-related__sub { font-size: 14px; }
  .mc-guides__sub { font-size: 15px; }
  .mc-toc { font-size: 15px; }
  .mc-mistake__body span { font-size: 15px; }
  .mc-mistake__body strong { font-size: 16px; }
  .mc-contrib__detail { font-size: 13px; }
  .mc-updated { font-size: 13px; }
  .mc-menu__group a { font-size: 15px; padding: 7px 8px; }
  .mc-footer__inner { font-size: 14px; }
  .mc-formula__label, .mc-menu__title, .mc-footer__title { font-size: 12px; }
  .mc-card { padding: 14px; }
  .mc-result { padding: 16px 14px; border-radius: var(--radius-lg); }
  .mc-formula { padding: 13px 14px; }
  .mc-footer__inner { padding: 24px 16px; }
  .mc-grid2 { grid-template-columns: 1fr; }

  /* Justification comes off on phones.
   *
   * It is not a preference. A justified line has to absorb its slack in the
   * spaces it has, and at 44 characters there are only about seven of them.
   * Measured at 375px: the median space stretched to 1.67x and the worst one
   * to 6.38x — a 29.69px hole sitting inside a paragraph, wider than three
   * characters. That reads as a white river down the column, which is worse
   * than the ragged right edge it was hiding.
   *
   * The same text at 768px and up stays inside 2.19x at the worst, because a
   * 80-character line has twice the spaces to share the same slack. So the
   * rule is kept where it works and dropped where it does not. */
  .mc-prose > p,
  .mc-prose li,
  p.mc-prose,
  .mc-note,
  .mc-faq__a { text-align: start; }

  .mc-nav { padding: 0 16px 10px; }
  .mc-home { padding-right: 11px; }
  /* The strip scrolls and the fades say so — shrinking the tabs to cram one
     more in is not worth tab text smaller than the floor. */
  .mc-tabs a { padding: 0 10px; font-size: 14px; }
  /* The first tab loses its left padding only when it is the leading edge;
     with the home button present it needs the gap. */
  .mc-nav__scroll:first-child .mc-tabs a:first-child { padding-left: 0; }

  /* Subject rows go to two lines. At 390px a four-column grid leaves ~110px
     for the subject name, which truncates every real subject title. */
  .mc-row--head { display: none; }
  .mc-row--subject {
    grid-template-columns: 1fr 92px;
    grid-template-areas: "name remove" "grade credits";
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .mc-row--subject:last-child { padding-bottom: 0; border-bottom: none; }
  .mc-row--subject .js-name { grid-area: name; }
  .mc-row--subject .js-remove {
    grid-area: remove;
    align-self: center;
    justify-self: end;
  }
  .mc-row__field--grade { grid-area: grade; }
  .mc-row__field--credits { grid-area: credits; }
  .mc-row__field::before { display: block; margin-bottom: 4px; }

  /* Narrower padding buys the columns room on a phone. The type does not pay
     for it: 10px uppercase headers were the smallest text on the site, and a
     table nobody can read is worse than one that scrolls. */
  .mc-table th, .mc-table td { padding: 9px 12px; }
  .mc-table td { font-size: 14px; }
  .mc-table th { font-size: 12px; letter-spacing: 0.05em; }

  .mc-inline-stats { gap: 20px; }
  .mc-contrib__detail { font-size: 12px; }
  .mc-contrib__share { width: 48px; }

  /* Actions stay on one line and within thumb reach. */
  .mc-actions { width: 100%; gap: 8px; }
  .mc-actions .mc-btn { flex: 1 1 auto; padding: 0 12px; }
  .mc-actions__brand { width: 100%; margin-left: 0; }
  .mc-related { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .mc-actions .mc-btn { flex: 1 1 100%; }
  .mc-stats { gap: 8px 18px; }
  /* At 320px the bar cannot hold four controls; the Guides link is the one
     with a second route (the menu carries a whole Guides group), so it is
     the one that folds. */
  .mc-header__link { display: none; }
  .mc-header__bar { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .mc-header, .mc-footer, .mc-actions, .mc-adslot { display: none; }
}