/* ============================================================
   BestSoftwareFor.com design tokens — Colors & Type
   ============================================================
   Source: docs/design/design-system-tokens.css (the web font import is removed).
   ------------------------------------------------------------ */

/* -------- Web fonts (Google Fonts substitutes) ------------- */
/* Parkinsans — display / brand voice, used everywhere in product
   Roboto Mono — design-system labels & spec sheets
   Azeret Mono — display headlines for the foundations doc
   SF Pro / Roboto — system UI text on iOS / Android (use system stack) */


:root {
  /* ──────────────────────────────────────────────
     PRIMITIVES — raw color scales
     ────────────────────────────────────────────── */

  /* Greys */
  --grey-50:  #F6F6F6;
  --grey-100: #F0F0F0;
  --grey-200: #E5E5E5;
  --grey-300: #C7C7C7;
  --grey-400: #B3B3B3;
  --grey-500: #999999;
  --grey-600: #6E6E6E;
  --grey-700: #575757;
  --grey-800: #383838;
  --grey-850: #333333;
  --grey-900: #262626;
  --grey-950: #1A1A1A;
  --black:    #000000;
  --white:    #FFFFFF;

  /* Blue (utility / informational) */
  --blue-30:  #AAD2E6;
  --blue-50:  #1787AE;
  --blue-80:  #193E54;
  --blue-100: #1C2B42;

  /* Green (positive) */
  --green-30:  #C6E096;
  --green-50:  #669900;
  --green-60:  #578200;
  --green-80:  #415B10;
  --green-100: #28311A;

  /* Orange (warning / accent) */
  --orange-30:  #FECD9E;
  --orange-50:  #F26500;
  --orange-80:  #844313;
  --orange-100: #3A2C1F;

  /* Red (negative) */
  --red-30:  #F4AFAF;
  --red-40:  #FF4949;
  --red-50:  #EE0000;
  --red-80:  #871413;
  --red-100: #42221F;

  /* Brand */
  --brand-primary: #BBE635;            /* lime for now; the original yellow #FDCD00 comes back later (see CLAUDE.md) */
  --brand-opacity: rgba(187, 230, 53, 0.6);
  --brand-light:   #F8FDE8;
  --brand-dark:    #2F3716;
  --brand-bolha:            #037299;            /* sister brand, sometimes used as accent */
  --brand-bolha-opacity:    rgba(3, 115, 153, 0.6);

  /* Overlays */
  --overlay-80: rgba(0, 0, 0, 0.8);
  --overlay-40: rgba(0, 0, 0, 0.4);
  --overlay-20: rgba(0, 0, 0, 0.2);
  --overlay-12: rgba(0, 0, 0, 0.12);

  /* ──────────────────────────────────────────────
     SEMANTIC — light mode (default)
     ────────────────────────────────────────────── */

  /* Surfaces */
  --surface-primary:    var(--white);          /* page bg, cards */
  --surface-secondary:  var(--grey-50);        /* page-level neutral bg */
  --surface-tertiary:   var(--grey-100);       /* nested fill, skeletons */
  --surface-inverse:    var(--grey-950);       /* dark callout on light page */

  /* Text */
  --text-primary:       var(--grey-950);       /* default body / headings */
  --text-secondary:     var(--grey-600);       /* meta, captions */
  --text-tertiary:      var(--grey-500);       /* hint, placeholder */
  --text-inactive:      var(--grey-400);
  --text-on-primary:    var(--grey-950);       /* text sitting on the brand colour */
  --text-on-color:      var(--white);          /* text on dark / saturated colors */
  --text-success:       var(--green-60);
  --text-alert:         var(--red-50);
  --text-link:          var(--blue-50);

  /* Border / divider */
  --border-subtle:      var(--grey-200);
  --border-default:     var(--grey-300);
  --border-strong:      var(--grey-700);

  /* Accent / brand */
  --brand:              var(--brand-primary);
  --brand-soft:         var(--brand-light);
  --brand-deep:         var(--brand-dark);

  /* Utility — feedback */
  --utility-positive-light: var(--green-30);
  --utility-positive:       var(--green-50);
  --utility-positive-dark:  var(--green-80);
  --utility-warning:        var(--orange-50);
  --utility-warning-light:  var(--orange-30);
  --utility-negative-light: var(--red-30);
  --utility-negative:       var(--red-50);
  --utility-negative-dark:  var(--red-80);
  --utility-info:           var(--blue-50);
  --utility-info-light:     var(--blue-30);

  /* ──────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────── */
  --font-display: "Parkinsans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Parkinsans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Roboto Mono", "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-ios:     -apple-system, "SF Pro Text", "SF Pro", system-ui, sans-serif;
  --font-android: "Roboto", system-ui, sans-serif;

  /* Type scale (Parkinsans) */
  /* Display */
  --text-display-xl:     800 64px/1.0     var(--font-display);     /* hero — wordmark */
  --text-display-lg:     700 40px/1.05    var(--font-display);
  --text-display-md:     700 32px/1.1     var(--font-display);

  /* Title (Parkinsans) */
  --text-title-lg:       600 22px/24px    var(--font-display);     /* Title Large */
  --text-title-md:       700 18px/20px    var(--font-display);     /* Title Medium Emph */
  --text-title-sm:       500 16px/20px    var(--font-display);     /* Title Small */

  /* Body */
  --text-body-lg:        400 16px/24px    var(--font-body);        /* Body Large 16/24/.5 */
  --text-body-md:        400 14px/20px    var(--font-body);        /* Body Medium 14/20/.25 */
  --text-body-sm:        400 12px/16px    var(--font-body);

  /* Label (interactive / chips / buttons) */
  --text-label-lg:       600 16px/20px    var(--font-body);        /* Label Large Emph */
  --text-label-md:       500 14px/20px    var(--font-body);        /* Label Medium */
  --text-label-sm:       500 12px/16px    var(--font-body);        /* Label Small */
  --text-label-price:    700 18px/20px    var(--font-body);        /* € amount on cards */

  /* Mono — used for tokens & spec annotations only */
  --text-mono-sm:        500 12px/16px    var(--font-mono);
  --text-mono-md:        500 16px/24px    var(--font-mono);

  /* ──────────────────────────────────────────────
     RADIUS, SHADOW, SPACING
     ────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;       /* image thumbs in card */
  --radius-lg: 16px;       /* most cards */
  --radius-xl: 24px;       /* prominent cards / sheets */
  --radius-2xl: 32px;      /* full-screen sheet */
  --radius-pill: 999px;    /* chips, search, FAB */

  /* Shadow tokens — material elevations */
  --shadow-1: 0 1px 2px rgba(51,51,51,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-fab: 0 6px 14px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.10);

  /* 4-pt spacing scale */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ──────────────────────────────────────────────
   DARK MODE — Semantic overrides
   Toggle via [data-theme="dark"] on <html> or <body>
   ────────────────────────────────────────────── */
[data-theme="dark"] {
  --surface-primary:    var(--grey-950);
  --surface-secondary:  var(--grey-900);
  --surface-tertiary:   var(--grey-850);
  --surface-inverse:    var(--white);

  --text-primary:       var(--grey-50);
  --text-secondary:     var(--grey-500);
  --text-tertiary:      var(--grey-600);
  --text-inactive:      var(--grey-700);
  --text-on-primary:    var(--grey-950);

  --border-subtle:      var(--grey-850);
  --border-default:     var(--grey-800);
  --border-strong:      var(--grey-300);

  --utility-positive-light: var(--green-80);
  --utility-positive-dark:  var(--green-30);
  --utility-negative-light: var(--red-80);
  --utility-negative-dark:  var(--red-30);
}

/* ──────────────────────────────────────────────
   SEMANTIC ELEMENT STYLES — apply on top of tokens
   ────────────────────────────────────────────── */
body {
  font: var(--text-body-md);
  color: var(--text-primary);
  background: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: var(--text-display-lg); margin: 0; letter-spacing: -0.01em; }
h2 { font: var(--text-display-md); margin: 0; }
h3 { font: var(--text-title-lg); margin: 0; }
h4 { font: var(--text-title-md); margin: 0; }
h5 { font: var(--text-title-sm); margin: 0; }

p  { font: var(--text-body-md); margin: 0; }
small { font: var(--text-label-sm); color: var(--text-secondary); }
code, kbd, samp { font: var(--text-mono-sm); }

a { color: var(--text-link); text-decoration: none; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-4) 0; }

::selection { background: var(--brand); color: var(--text-on-primary); }

/* ============================================================
   Components of the BestSoftwareFor.com pages (docs/design)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-secondary); color: var(--text-primary); font: var(--text-body-md); }
a { color: var(--text-primary); }
a:hover { color: var(--grey-800); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--grey-950); outline-offset: 2px; box-shadow: 0 0 0 4px var(--white); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 16px; border: 1px solid var(--grey-950); border-radius: var(--radius-pill); background: var(--white); color: var(--grey-950); font-weight: 600; font-size: 14px; text-decoration: none; }
.skip:focus { left: 16px; }

.site-header { background: var(--brand); padding: 12px 16px; }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; max-width: 1200px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-on-primary); font: 800 22px/28px var(--font-display); text-decoration: none; white-space: nowrap; }
.search { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0; }
.search input { flex: 1 1 240px; width: 240px; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--grey-700); border-radius: var(--radius-pill); background: var(--white); color: var(--text-primary); font: var(--text-body-md); }
.search input::placeholder { color: var(--grey-600); opacity: 1; }
.search button { height: 44px; padding: 0 18px; border: 1px solid var(--grey-950); border-radius: var(--radius-pill); background: var(--grey-950); color: var(--white); font: var(--text-label-lg); cursor: pointer; }

.page { max-width: 1232px; margin: 0 auto; padding: 24px 16px 64px; display: flex; flex-direction: column; gap: 24px; }
.page__intro { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.page__intro h1 { font: 700 32px/38px var(--font-display); letter-spacing: -0.01em; }
.page__intro p { color: var(--text-secondary); font: var(--text-body-lg); }
.meta { color: var(--text-secondary); font-size: 12px; line-height: 16px; }

.panel { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: 16px; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 16px 24px; margin-bottom: 16px; }
.filters__group { display: flex; flex-direction: column; gap: 6px; }
.filters__label { color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 500; }
.sort { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sort select { min-height: 44px; min-width: 248px; padding: 0 12px; border: 1px solid var(--grey-700); border-radius: var(--radius-md); background: var(--white); color: var(--text-primary); font: var(--text-body-md); }
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 4px 16px; border: 1px solid var(--grey-700); border-radius: var(--radius-pill); background: var(--white); color: var(--text-primary); font: var(--text-label-md); text-decoration: none; cursor: pointer; }
.btn--primary { min-height: 48px; border-color: var(--grey-950); background: var(--brand); color: var(--text-on-primary); font-weight: 600; }
.btn--primary small { color: var(--text-on-primary); }
.btn--dark { border-color: var(--grey-950); background: var(--grey-950); color: var(--white); }

.list-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 8px; }
.list-heading h2 { font: 700 20px/24px var(--font-display); }
.cards { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.card { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 20px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); }
.card--recommended { padding: 24px; background: var(--brand-soft); border-color: var(--grey-300); border-radius: var(--radius-xl); }
.card__main { display: flex; flex: 999 1 300px; flex-direction: column; gap: 8px; min-width: 0; }
.card__side { display: flex; flex: 1 1 240px; flex-direction: column; gap: 8px; }
.card__title { font: 700 18px/24px var(--font-display); }
.card--recommended .card__title { font-size: 28px; line-height: 32px; }
.card__verdict { font-size: 14px; line-height: 20px; }
.card--recommended .card__verdict { font-size: 16px; line-height: 24px; }
.badge { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.badge--brand { background: var(--brand); color: var(--text-on-primary); }
.badge--outline { padding: 2px 8px; border: 1.5px solid var(--grey-950); border-radius: 6px; background: var(--white); color: var(--grey-950); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip { padding: 2px 10px; border: 1px solid var(--grey-300); border-radius: var(--radius-pill); background: var(--white); font-size: 12px; line-height: 16px; font-weight: 500; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.meta-row strong { color: var(--text-primary); font-weight: 600; }
.verified { display: inline-flex; align-items: center; gap: 4px; }
.verified svg { stroke: var(--green-60); }
.price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.price__amount { font-weight: 700; font-size: 20px; line-height: 24px; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag { padding: 2px 8px; border-radius: 6px; background: var(--grey-100); font-size: 12px; line-height: 16px; font-weight: 500; }
.note { color: var(--text-secondary); font-size: 14px; line-height: 20px; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.category-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); }
.category-card h2 { font: 700 18px/24px var(--font-display); }
.results { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.site-footer { max-width: 1232px; margin: 0 auto; padding: 24px 16px 40px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }

@media (max-width: 760px) {
  .page__intro h1 { font-size: 26px; line-height: 32px; }
  .sort select { min-width: 0; width: 100%; }
  .sort, .filters__group { width: 100%; }
  .card--recommended .card__title { font-size: 24px; line-height: 28px; }
}

/* ---- Shortlist and comparison ---- */
.with-aside__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.shortlist { min-width: 0; }
/* The Shortlist is beside the page on every page that shows it. Middle widths: it takes 320px from the page. */
.shortlist { padding: 0 16px 24px; }
@media (min-width: 761px) {
  .shell:has(.shortlist) { display: grid; grid-template-columns: minmax(0, 1fr) 336px; max-width: 1232px; margin: 0 auto; }
  .shell:has(.shortlist) .page { width: 100%; margin: 0; padding-right: 24px; }
  .shortlist { padding: 24px 16px 64px 0; }
}
/* Wide screens: the Shortlist sits outside the page column, to its right, so the main column keeps its full width.
   Where the window has no room for that beside a centred page, header, page and footer move left together. */
@media (min-width: 1600px) {
  .shell:has(.shortlist) { grid-template-columns: minmax(0, 1fr) minmax(0, 1232px) minmax(0, 1fr); max-width: none; }
  .shell:has(.shortlist) .page { grid-column: 2; padding-right: 16px; }
  .shortlist { grid-column: 3; width: 328px; padding: 24px 0 64px 8px; }
  body:has(.shortlist) :is(.site-header__inner, .shell, .site-footer) { position: relative; left: min(0px, 50vw - 972px); }
}
.shortlist__box { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); }
.shortlist__items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.shortlist__item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 0; border-top: 1px solid var(--grey-200); }
.shortlist__clear { align-self: flex-end; display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; margin: -4px -8px -8px 0; border-radius: 4px; color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none; }
.shortlist__clear:hover { background: var(--grey-100); color: var(--text-primary); }
.rank { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--grey-950); color: var(--white); font-weight: 700; font-size: 14px; }
.shortlist__name { display: flex; flex: 1 1 120px; flex-direction: column; min-width: 0; }
.shortlist__actions { display: flex; flex-wrap: wrap; gap: 4px; }
.shortlist-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0 6px 0 14px; border: 1px solid var(--grey-700); border-radius: var(--radius-pill); background: var(--white); color: var(--text-primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.shortlist-link__count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--grey-950); color: var(--white); font-weight: 700; }
.btn--disabled { background: var(--grey-100); border-color: var(--grey-300); color: var(--grey-600); cursor: not-allowed; }
.btn--on { border-color: var(--grey-950); background: var(--grey-950); color: var(--white); }
.compare-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); }
.compare { width: 100%; min-width: 720px; border-collapse: collapse; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--grey-200); font-size: 14px; line-height: 20px; }
.compare thead th, .compare thead td { border-top: 0; }
.compare tbody th[scope="row"] { width: 180px; font-weight: 700; }
.compare th + th, .compare td { border-left: 1px solid var(--grey-200); }
.compare__group th { background: var(--grey-50); font: var(--text-label-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.compare ul { margin: 0; padding-left: 18px; }
.compare .chips { margin: 0; }
.swap summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.swap ul { padding-left: 0; list-style: none; }
.link-box { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.link-box input[type="text"], .link-box input[readonly] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--grey-700); border-radius: var(--radius-md); font: var(--text-body-md); }
.link-box__actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .shortlist__box { position: static; }
}

/* ---- Home page and information pages ---- */
.hero { display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; background: var(--brand-soft); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); }
.hero h1 { max-width: 760px; font: 700 40px/46px var(--font-display); letter-spacing: -0.01em; }
.hero > p { font: var(--text-body-lg); color: var(--text-primary); }
.category-card { text-decoration: none; color: inherit; }
.category-card:hover { border-color: var(--grey-700); }
.category-card h3 { font: 700 18px/24px var(--font-display); }
.category-card p { color: var(--text-secondary); }
/* The icon floats, so the title starts beside it and a long title bends around it. */
.category-card__head { display: flow-root; }
.category-card__icon { float: left; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 14px 4px 0; border-radius: var(--radius-md); background: var(--brand); color: var(--text-on-primary); }
.category-card__head h3 { padding-top: 4px; }
.category-card__icon svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.category-card > .meta { margin-top: auto; }
.verify { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); }
.verify ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.verify li { display: flex; flex-direction: column; gap: 4px; }
.prose { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.prose h1 { font: 700 32px/38px var(--font-display); letter-spacing: -0.01em; }
.prose h2 { margin-top: 12px; font: 700 20px/24px var(--font-display); }
.prose ul { margin: 0; padding-left: 20px; }
.prose p, .prose li { font: var(--text-body-lg); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 760px) {
  .hero { padding: 24px 16px; }
  .hero h1 { font-size: 28px; line-height: 34px; }
}
.compare__name { display: block; margin-bottom: 4px; font: 700 18px/24px var(--font-display); }
.compare thead th p { margin: 0 0 8px; font-weight: 400; color: var(--text-secondary); }
a.compare__name, .card__title a { border-radius: 4px; }
a.compare__name:hover, .card__title a:hover { background: var(--brand-opacity); }

/* ---- Tool page ---- */
.tool { display: flex; flex-direction: column; gap: 24px; }
.tool__title { font: 700 32px/38px var(--font-display); letter-spacing: -0.01em; }
.tool__verdict { max-width: 680px; font: var(--text-body-lg); }
.tool a.badge { text-decoration: none; }
.tool h2 { font: 700 20px/24px var(--font-display); }
.tool > section { display: flex; flex-direction: column; gap: 12px; }
.tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tool__box { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); }
.tool__box ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; }
/* The Report link sits right below the boxes, at the right, under the cost box. */
.tool__report { align-self: flex-end; margin: -20px 0 -12px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border-radius: 4px; color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none; }
.tool__report svg { fill: var(--red-50); stroke: var(--red-50); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool__report:hover { background: var(--grey-100); color: var(--text-primary); }
.facts { display: flex; flex-direction: column; margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--grey-200); }
.facts div:first-child { padding-top: 0; border-top: 0; }
.facts dt { color: var(--text-secondary); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }
.prose h2 { scroll-margin-top: 16px; }

/* ---- Public form (report an issue) ---- */
.form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.form label { margin-top: 8px; font-weight: 600; font-size: 14px; line-height: 20px; }
.form label .meta { font-weight: 400; }
.form select, .form textarea, .form input[type="email"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--grey-700); border-radius: var(--radius-md); background: var(--white); color: var(--text-primary); font: var(--text-body-md); }
.form textarea { padding: 12px; resize: vertical; }
.form .btn { margin-top: 12px; cursor: pointer; }
.form .cf-turnstile { margin-top: 12px; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tool__listed a, .tool .note a { border-radius: 4px; font-weight: 600; }
.tool__listed a:hover, .tool .note a:hover { background: var(--brand-soft); }
@media (max-width: 760px) {
  .tool__title { font-size: 26px; line-height: 32px; }
}

/* ---- Links: plain text, told apart by weight, colour and a hover background ---- */
.prose a, .verify a, .page__intro a, .site-footer a { border-radius: 4px; font-weight: 600; }
.prose a:hover, .verify a:hover, .page__intro a:hover { background: var(--brand-soft); color: var(--text-primary); }
.site-footer a { color: var(--text-secondary); font-weight: 500; }
.site-footer a:hover { color: var(--text-primary); background: var(--grey-100); }

/* ---- Top bar switch and latest reviews ---- */
.os-switch { display: inline-flex; align-items: stretch; height: 44px; gap: 2px; padding: 2px; border: 1px solid var(--grey-950); border-radius: var(--radius-pill); background: var(--white); }
.os-switch__item { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--text-primary); font: var(--text-label-sm); text-decoration: none; }
.os-switch__item:hover { background: var(--grey-100); }
/* A divider shows that these are two buttons while neither is chosen; a chosen button is black and needs none. */
.os-switch__item + .os-switch__item { position: relative; }
.os-switch__item + .os-switch__item::before { content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 1px; background: var(--grey-400); }
.os-switch:has([aria-current="true"]) .os-switch__item::before { display: none; }
.os-switch__item[aria-current="true"] { background: var(--grey-950); color: var(--white); }
.latest__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.latest__item p { color: var(--text-secondary); }

/* ---- Shortlist items: checkbox, icons on the right, dragging ---- */
.shortlist__item { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; cursor: grab; }
.shortlist__item.is-dragging { opacity: 0.4; background: var(--grey-50); }
.shortlist__name { flex: 1 1 auto; min-width: 0; }
.shortlist__actions { flex: none; display: flex; gap: 0; margin-left: auto; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); color: var(--text-secondary); }
.icon-link svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-link:hover { background: var(--grey-100); color: var(--text-primary); }
.check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--grey-700); border-radius: 6px; background: var(--white); color: var(--white); cursor: pointer; }
.check svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.check:hover { border-color: var(--grey-950); }
.check--on { background: var(--grey-950); border-color: var(--grey-950); }
.check--on svg { opacity: 1; }
.check--disabled { border-color: var(--grey-300); background: var(--grey-100); cursor: not-allowed; }
.check--disabled:hover { border-color: var(--grey-300); }

/* ---- Latest reviews: one row that scrolls sideways ---- */
.latest__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.latest__nav { display: flex; gap: 6px; }
.latest__nav[hidden] { display: none; }
.latest__button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--grey-700); border-radius: var(--radius-pill); background: var(--white); color: var(--text-primary); cursor: pointer; }
.latest__button svg { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.latest__button:hover { background: var(--grey-100); }
.latest { display: flex; gap: 12px; margin: 0; padding: 2px 2px 4px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 2px; scrollbar-width: none; }
.latest::-webkit-scrollbar { display: none; }
.latest__item { position: relative; flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); scroll-snap-align: start; }
.latest__item:hover { border-color: var(--grey-700); }
.latest__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.latest__name { font: 700 18px/24px var(--font-display); color: var(--text-primary); }
.latest__name::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.latest__item p { color: var(--text-secondary); }
.latest__category { position: relative; z-index: 1; border-radius: 4px; font-weight: 600; }
.latest__category:hover { background: var(--brand-soft); color: var(--text-primary); }
.card__title { scroll-margin-top: 16px; }

/* Narrow header: name, then the input with the Search button beside it, then the operating system switch on the left
   and the Shortlist on the right. The form's children take part in the header grid directly. */
@media (max-width: 900px) {
  .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 8px; }
  .brand { grid-row: 1; grid-column: 1 / -1; justify-self: start; }
  .search { display: contents; }
  .search input { grid-row: 2; grid-column: 1; width: auto; }
  .search button { grid-row: 2; grid-column: 2; }
  .os-switch { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
  .shortlist-link { grid-row: 3; grid-column: 1 / -1; justify-self: end; margin-left: 0; }
}
#categories-title { margin-bottom: 12px; }

/* ---- Notice: a short message at the bottom left, shown by the script ---- */
.toast { position: fixed; left: 16px; bottom: 16px; z-index: 20; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--radius-lg); background: var(--grey-950); color: var(--white); font-weight: 600; font-size: 14px; line-height: 20px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.25); }
.toast:empty { display: none; }

/* ---- Dialog: a message in the middle of the screen with its buttons, shown by the script ---- */
.dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); background: var(--white); color: var(--text-primary); box-shadow: 0 8px 32px rgb(0 0 0 / 0.3); }
.dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.dialog p { font: var(--text-body-lg); }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dialog__actions .btn { min-width: 96px; }
.warning { max-width: 760px; padding: 12px 16px; border: 1px solid #8a1c1c; border-radius: var(--radius-lg); background: var(--white); color: #8a1c1c; font-weight: 600; }

/* ---- CMS (admin): the plain forms and tables of the CMS screens, in the look of the public pages ---- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--grey-950); border-radius: var(--radius-pill); background: var(--white); color: var(--text-primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.admin-nav a:hover { background: var(--grey-100); }
.admin-user { display: flex; align-items: center; gap: 12px; margin-left: auto; color: var(--text-on-primary); font-weight: 600; font-size: 14px; }
.admin button { min-height: 44px; padding: 0 18px; border: 1px solid var(--grey-950); border-radius: var(--radius-pill); background: var(--grey-950); color: var(--white); font: var(--text-label-lg); cursor: pointer; }
.admin main h1 { font: 700 32px/38px var(--font-display); letter-spacing: -0.01em; }
.admin main h2 { font: 700 20px/26px var(--font-display); }
.admin main a { border-radius: 4px; font-weight: 600; }
.admin main a:hover { background: var(--brand-soft); color: var(--text-primary); }
.admin main section { display: flex; flex-direction: column; gap: 8px; }
.admin main form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 760px; }
.admin main label { display: flex; flex-direction: column; gap: 6px; width: 100%; font-weight: 600; font-size: 14px; line-height: 20px; }
.admin main label:has(input[type="checkbox"], input[type="radio"]) { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.admin main input:not([type="checkbox"], [type="radio"]), .admin main select, .admin main textarea { width: 100%; min-height: 44px; padding: 0 16px; border: 1px solid var(--grey-700); border-radius: var(--radius-lg); background: var(--white); color: var(--text-primary); font: var(--text-body-md); }
.admin main textarea { padding: 12px 16px; }
.admin main input[readonly] { background: var(--grey-100); color: var(--text-secondary); }
.admin main fieldset { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; padding: 16px; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); background: var(--white); }
.admin main legend { padding: 0 6px; font-weight: 700; }
.admin main table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--grey-200); }
.admin main th, .admin main td { padding: 12px 16px; border-bottom: 1px solid var(--grey-200); text-align: left; vertical-align: top; }
.admin main thead th { color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 600; }
.admin main [role="alert"] { max-width: 760px; padding: 12px 16px; border: 1px solid #8a1c1c; border-radius: var(--radius-lg); background: var(--white); color: #8a1c1c; font-weight: 600; }
/* A link that creates something new ("New tool", "New category"): a plus sign before it, in capitals. */
.admin main a[href$="/new"] { text-transform: uppercase; letter-spacing: 0.04em; }
.admin main a[href$="/new"]::before { content: "+ "; }

/* ---- Buttons on hover: a light 3D lift. The button rises a little, gets a highlight on its top edge and a soft
   shadow below; pressing it puts it back down. The text keeps its colour (a plain link turns grey on hover, which
   cannot be read on a black button). ---- */
.btn, .search button, .latest__button, .shortlist-link, .admin button { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.btn:hover, .shortlist-link:hover { color: var(--text-primary); }
.btn--primary:hover { color: var(--text-on-primary); }
.btn--on:hover, .btn--dark:hover { color: var(--white); }
.btn:not(.btn--disabled):hover:not(:focus-visible), .search button:hover:not(:focus-visible), .latest__button:hover:not(:focus-visible), .shortlist-link:hover:not(:focus-visible), .admin button:hover:not(:focus-visible) {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 0 rgb(0 0 0 / 0.1), 0 3px 8px rgb(0 0 0 / 0.18);
}
.btn--on:hover:not(:focus-visible), .btn--dark:hover:not(:focus-visible), .search button:hover:not(:focus-visible), .admin button:hover:not(:focus-visible) {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -2px 0 rgb(0 0 0 / 0.4), 0 3px 8px rgb(0 0 0 / 0.25);
}
.btn:not(.btn--disabled):active, .search button:active, .latest__button:active, .shortlist-link:active, .admin button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .search button, .latest__button, .shortlist-link, .admin button { transition: none; }
  .btn:hover, .search button:hover, .latest__button:hover, .shortlist-link:hover, .admin button:hover { transform: none !important; }
}