/* Page-scoped CSS for compare.css, lifted verbatim out of the inline <style> block
   comparison.html carried (#7007). A plain file rather than an inline block or a
   .razor.css: the selectors below use sibling and descendant combinators that
   Blazor's CSS isolation rewriter would silently change the meaning of, and a
   file caches while an inline block is re-sent with every page. */

  /* Page-local layout only. Every colour is a design-system token, so the page
     follows the visitor's light/dark setting with no second palette to maintain. */
  .page-head{padding:var(--space-2xl) 0 var(--space-lg)}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
  table.cmp{width:100%;border-collapse:collapse;min-width:38rem}
  table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:.75rem 1rem;
    border-bottom:1px solid var(--border);font-size:var(--step--1)}
  table.cmp thead th{color:var(--text-strong);font-weight:var(--weight-heading);
    font-size:var(--step--2);text-transform:uppercase;letter-spacing:var(--tracking-label);
    background:var(--surface-strong);white-space:nowrap}
  table.cmp tbody tr:last-child td{border-bottom:0}
  table.cmp td:first-child{color:var(--text-strong)}
  table.cmp td.from{white-space:nowrap}
  .os-block{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-alt);
    margin:0 0 var(--space-sm);padding:0 var(--space-md) var(--space-md)}
  .os-block > summary{list-style:none;cursor:pointer;padding:var(--space-md) 0;
    font-size:var(--step-1);font-weight:var(--weight-heading);color:var(--text-strong);
    display:flex;align-items:center;gap:var(--space-2xs)}
  .os-block > summary::-webkit-details-marker{display:none}
  .os-block > summary::after{content:"+";margin-left:auto;font-family:var(--mono);
    font-size:var(--step-1);color:var(--muted)}
  .os-block[open] > summary::after{content:"\2212"}
  .os-block > summary:hover{color:var(--accent)}
  .bundle-block{margin:0 0 var(--space-lg)}
  .bundle-block h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs)}
  .bundle-price{font-size:var(--step--1);color:var(--muted);font-weight:var(--weight-body)}
  .soon-list{list-style:none;padding:0;margin:var(--space-sm) 0 0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:.6rem}
  .soon-list li{border:1px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface);padding:.7rem .9rem;font-size:var(--step--1);color:var(--muted)}
  .soon-list b{display:block;color:var(--text-strong)}
  .os-block:not([open]){padding-bottom:0}
  main .section{padding:var(--space-xl) 0}
  /* The shared nav collapses to a burger only at 760px; with seven links it
     overflows between 760 and ~900, so it wraps instead of pushing the page
     sideways. Page-local because the design system is shared with pages this
     ticket does not touch. */
  @media (max-width:980px){
    .nav-inner{height:auto;padding:.5rem 0;flex-wrap:wrap}
    .nav-links{flex-wrap:wrap;justify-content:flex-end}
  }
  .behind h3{margin-top:var(--space-md)}
  .note-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
    padding:var(--space-md)}
  .note-card > :last-child{margin-bottom:0}

  /* ======================================================================
     THE TWO FILTERS (#7027) — radios, sibling selectors, and no script.

     Both filters are HTML: a radio group, and rules that hide the blocks the
     chosen radio does not name. Nothing here needs JavaScript, so there is
     nothing to degrade — with script blocked, the filter still filters, and a
     visitor who never touches it sees the page exactly as it shipped, because
     the "All" radio is the one that arrives checked.

     The inputs are hidden from sight but NOT from the keyboard or a screen
     reader: they are the control. Clipping rather than display:none is what
     keeps them focusable, and the label chips carry a visible focus ring
     through :focus-visible on the input.
     ====================================================================== */
  .filter-radio{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}
  .filterbar{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--space-md)}
  .filter-chip{cursor:pointer;font-size:var(--step--2);font-weight:var(--weight-heading);
    letter-spacing:var(--tracking-label);text-transform:uppercase;font-family:var(--mono);
    color:var(--muted);background:var(--surface);border:1px solid var(--border);
    padding:.3rem .8rem;border-radius:var(--pill);
    transition:color var(--duration-fast) var(--easing),
      background-color var(--duration-fast) var(--easing),
      border-color var(--duration-fast) var(--easing)}
  .filter-chip:hover{color:var(--text-strong);border-color:var(--border-strong)}

  /* the chosen chip */
  #os-all:checked ~ .filterbar label[for="os-all"],
  #os-windows:checked ~ .filterbar label[for="os-windows"],
  #os-macos:checked ~ .filterbar label[for="os-macos"],
  #os-linux:checked ~ .filterbar label[for="os-linux"],
  #cmp-bundle-all:checked ~ .filterbar label[for="cmp-bundle-all"],
  #cmp-bundle-developer:checked ~ .filterbar label[for="cmp-bundle-developer"],
  #cmp-bundle-productivity:checked ~ .filterbar label[for="cmp-bundle-productivity"],
  #cmp-bundle-personalization:checked ~ .filterbar label[for="cmp-bundle-personalization"],
  #cmp-bundle-creative:checked ~ .filterbar label[for="cmp-bundle-creative"],
  #cmp-bundle-remote:checked ~ .filterbar label[for="cmp-bundle-remote"]{
    color:var(--text-on-accent);background:var(--accent);border-color:var(--accent)}

  /* the focus ring, on the chip the hidden input belongs to */
  #os-all:focus-visible ~ .filterbar label[for="os-all"],
  #os-windows:focus-visible ~ .filterbar label[for="os-windows"],
  #os-macos:focus-visible ~ .filterbar label[for="os-macos"],
  #os-linux:focus-visible ~ .filterbar label[for="os-linux"],
  #cmp-bundle-all:focus-visible ~ .filterbar label[for="cmp-bundle-all"],
  #cmp-bundle-developer:focus-visible ~ .filterbar label[for="cmp-bundle-developer"],
  #cmp-bundle-productivity:focus-visible ~ .filterbar label[for="cmp-bundle-productivity"],
  #cmp-bundle-personalization:focus-visible ~ .filterbar label[for="cmp-bundle-personalization"],
  #cmp-bundle-creative:focus-visible ~ .filterbar label[for="cmp-bundle-creative"],
  #cmp-bundle-remote:focus-visible ~ .filterbar label[for="cmp-bundle-remote"]{
    outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}

  /* WHAT IS HIDDEN. Linux keeps both its blocks — the plain one and the KDE
     one are the same answer to "I am on Linux", and hiding one of them would
     make the filter lie by omission. */
  #os-windows:checked ~ .os-block:not([data-os="windows"]),
  #os-macos:checked ~ .os-block:not([data-os="macos"]),
  #os-linux:checked ~ .os-block:not([data-os="linux"]):not([data-os="linux-kde"]){display:none}

  #cmp-bundle-developer:checked ~ .bundle-block:not(#bundle-developer),
  #cmp-bundle-productivity:checked ~ .bundle-block:not(#bundle-productivity),
  #cmp-bundle-personalization:checked ~ .bundle-block:not(#bundle-personalization),
  #cmp-bundle-creative:checked ~ .bundle-block:not(#bundle-creative),
  #cmp-bundle-remote:checked ~ .bundle-block:not(#bundle-remote){display:none}

  /* ======================================================================
     THE SIDE-BY-SIDE TABLE (#7086) — five columns, one of them ours.

     table.cmp above is a three-column table with a single competitor in it.
     This one puts four products beside each other, so it needs a wider
     minimum width and a marked product column of our own. Everything else it
     inherits from table.cmp, which is why the element carries both classes.
     ====================================================================== */
  table.side-by-side{min-width:64rem}
  table.side-by-side th.us,table.side-by-side td.us{background:var(--surface-strong);color:var(--text-strong)}
  table.side-by-side th.us{color:var(--accent)}
  table.side-by-side td.us .pill{margin-top:.35rem;display:inline-block}
  table.side-by-side th:first-child,table.side-by-side td:first-child{width:15rem}
  .side-by-side-note{font-size:var(--step--2);color:var(--muted);margin-top:var(--space-sm)}