/* compare-tool.html */
    .ct-search {
      width: 100%;
      max-width: 420px;
      padding: .55rem .8rem;
      border: 1.5px solid rgba(30, 42, 43, .18);
      border-radius: 8px;
      font-weight: 500;
      font-size: .95rem;
      font-family: var(--font-ui);
      line-height: normal;
      margin: .5rem 0 .75rem;
    }
    .ct-picker-list {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      max-height: 220px;
      overflow: auto;
      padding: .25rem 0 .5rem;
    }
    .ct-count { margin: .25rem 0 0; }
    .mt175 { margin-top: 1.75rem; }
    .ct-fine1 { margin: .35rem 0 .75rem; }
    .ct-form { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
    .ct-label { font: 600 .85rem var(--font-ui); display: grid; gap: .25rem; }
    .ct-input {
      width: 130px;
      padding: .5rem .7rem;
      border: 1.5px solid rgba(30, 42, 43, .18);
      border-radius: 8px;
      font: 600 1rem var(--font-ui);
    }
    .ct-out { margin-top: 1.75rem; }
    .fine-mt14 { margin-top: 14px; }

    /* Platform picker pills. These were inline style attributes written by
       js/compare-tool.js; a stylesheet can give them the 44px hit target,
       14px label and visible focus ring that an inline style could not. */
    .ct-pick {
      min-height: 44px;
      padding: .5rem 1rem;
      border: 1.5px solid rgba(30, 42, 43, .18);
      border-radius: 999px;
      background: rgba(255, 255, 255, .6);
      font: 600 14px var(--font-ui);
      color: var(--ink);
      cursor: pointer;
    }
    .ct-pick[aria-pressed="true"] {
      border-color: var(--accent);
      background: rgba(78, 107, 47, .1);
      color: var(--accent);
    }
    .ct-pick:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .ct-status-ok { color: var(--accent); }
    .ct-status-warn { color: var(--warn); }