:root {
    /* Fluid shell gutter: holds the content at a steady share of the
       viewport on desktop (matching the reference screenshot's ~77%+
       coverage) instead of capping at a fixed pixel width, and collapses
       to a thin margin as the window narrows. The same value drives the
       top bar, main column and footer so all three edges stay aligned. */
    --shell-gutter: clamp(16px, 8vw, 220px);

    /* Real Swedish party colors */
    --p-V:  #DA291C;
    --p-S:  #ED1B34;
    --p-MP: #83CF39;
    --p-C:  #009933;
    --p-L:  #006AB3;
    --p-KD: #221E54;
    --p-M:  #52BDEC;
    --p-SD: #DDDD00;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--kf-n-025);
    color: var(--kf-n-900);
    font-family: var(--ff-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--kf-y-200); color: var(--kf-n-900); }

  /* ---- Top bar ---- */
  .topbar {
    border-bottom: 1px solid var(--border-hair);
    background: var(--kf-n-000);
  }
  .topbar-inner {
    max-width: none;
    margin: 0 auto;
    padding: 10px var(--shell-gutter);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-5);
  }
  .topbar img { height: 33px; display: block; }
  .topbar .meta {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .topbar .meta b { color: var(--fg-1); font-weight: 500; }

  /* ---- Header actions ---- */
  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .topbar-btn {
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.01em;
    padding: 6px 12px;
    border: 1px solid var(--border-muted);
    background: var(--kf-n-000);
    color: var(--fg-1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition:
      background var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard),
      border-color var(--dur-fast) var(--ease-standard),
      transform var(--dur-fast) var(--ease-standard);
  }
  .topbar-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  /* Reserve the icon's box even if the icon script never runs (blocked CDN,
     extension), so an icon-only button never collapses to an untappable sliver. */
  .topbar-btn { min-height: 29px; }
  .topbar-btn i[data-lucide] { width: 13px; height: 13px; flex: none; display: inline-block; }
  .iconbtn i[data-lucide] { width: 18px; height: 18px; display: inline-block; }
  .topbar-btn:hover {
    background: var(--kf-n-900);
    color: var(--kf-n-000);
    border-color: var(--kf-n-900);
  }
  .topbar-btn:active { transform: translateY(1px); }
  .topbar-btn--primary {
    background: var(--kf-n-900);
    color: var(--kf-n-000);
    border-color: var(--kf-n-900);
  }
  .topbar-btn--primary:hover {
    background: var(--kf-y-500);
    color: var(--kf-n-900);
    border-color: var(--kf-y-500);
  }
  .topbar-btn .ok-tick {
    display: none;
    width: 13px; height: 13px;
  }
  .topbar-btn.copied .ok-tick { display: inline-flex; }
  .topbar-btn.copied .share-ic { display: none; }
  .topbar-btn .chev {
    width: 12px; height: 12px;
    transition: transform var(--dur-fast) var(--ease-standard);
    opacity: .8;
  }
  .topbar-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

  /* ---- Share menu (dropdown) ---- */
  .share-wrap { position: relative; display: inline-flex; }
  .share-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 208px;
    padding: 5px;
    background: var(--kf-n-000);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    gap: 1px;
    transform-origin: top right;
    animation: shareMenuIn 140ms var(--ease-entrance) both;
  }
  .share-menu[hidden] { display: none; }
  @keyframes shareMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  .share-menu .sm-head {
    font-family: var(--ff-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-3);
    padding: 6px 8px 5px;
    border-bottom: 1px solid var(--border-hair);
    margin-bottom: 3px;
  }
  .share-opt {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--fg-1);
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    transition:
      background var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard);
  }
  .share-opt svg { width: 16px; height: 16px; flex-shrink: 0; }
  .share-opt .sm-tick {
    margin-left: auto;
    width: 15px; height: 15px;
    color: var(--kf-y-700);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-standard);
  }
  .share-opt.done .sm-tick { opacity: 1; }
  .share-opt:hover,
  .share-opt:focus-visible {
    background: var(--kf-n-900);
    color: var(--kf-n-000);
    outline: none;
  }
  .share-opt.done:hover .sm-tick,
  .share-opt.done .sm-tick { color: var(--kf-y-500); }
  .share-sep {
    height: 1px;
    background: var(--border-hair);
    margin: 3px 2px;
  }

  /* ---- About dialog ---- */
  .about-overlay {
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2147483000;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px;
    background: rgba(35, 31, 32, 0.42);
    backdrop-filter: blur(2px);
    visibility: visible !important;
    opacity: 1 !important;
  }
  .about-overlay[hidden] { display: none !important; }
  .about-dialog {
    width: min(702px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid var(--border-strong);
    background: var(--kf-n-000);
    color: var(--fg-1);
    padding: 0;
    box-shadow: var(--shadow-3);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: auto;
  }

  .about-dialog .abt-inner { padding: calc(var(--sp-5) * 1.3); }
  .about-dialog .abt-bar {
    height: 4px; background: var(--kf-y-500);
  }
  .about-dialog .abt-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .about-dialog h2 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 31px;
    line-height: 1.1;
    margin: 0;
  }
  .about-dialog h2 .shade {
    background: var(--kf-y-500); color: var(--kf-n-900);
    padding: 0 .14em; font-style: italic;
  }
  .about-dialog .abt-close {
    border: none; background: transparent; color: var(--fg-3);
    cursor: pointer; padding: 4px; line-height: 1;
    display: grid; place-items: center;
  }
  .about-dialog .abt-close:hover { color: var(--kf-n-900); }
  .about-dialog .abt-close svg { width: 23px; height: 23px; }
  .about-dialog p {
    font-family: var(--ff-serif);
    font-size: 18px;
    line-height: 1.5;
    color: var(--fg-2);
    margin: 0 0 10px;
    text-wrap: pretty;
  }
  .about-dialog p:last-child { margin-bottom: 0; }
  .about-dialog .abt-meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-hair);
    font-family: var(--ff-mono);
    font-size: 13px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-3);
  }

  /* ---- Layout shell ---- */
  body { min-height: 100vh; display: flex; flex-direction: column; }
  main {
    flex: 1;
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 10px var(--shell-gutter) 10px;
    display: grid;
    grid-auto-rows: min-content;
    gap: 10px;
    min-height: 0;
  }

  /* ---- Hero ---- */
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .hero h1 { margin: 0; line-height: 1.05; }
  .eyebrow {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-2);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .eyebrow .dot {
    width: 7px; height: 7px; background: var(--kf-y-500);
    display: inline-block;
  }
  .hero h1 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin: 0;
    text-wrap: balance;
  }
  .hero h1 .shade {
    background: var(--kf-y-500);
    color: var(--kf-n-900);
    padding: 0 .14em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    font-style: italic;
  }
  .hero .lead {
    font-family: var(--ff-serif);
    font-size: 13px;
    line-height: 1.4;
    color: var(--fg-2);
    text-wrap: pretty;
    margin: 0;
  }
  .hero .lead em { font-style: italic; color: var(--fg-1); }

  /* ---- Section heading ---- */
  .section-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-hair);
  }
  .section-head .num {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-3);
  }
  .section-head h2 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.1;
    margin: 0;
    flex: 1;
  }
  .section-head .aside {
    font-family: var(--ff-sans);
    font-size: 11px;
    color: var(--fg-3);
  }
  .instructions {
    font-family: var(--ff-serif);
    font-size: 13px;
    line-height: 1.45;
    color: var(--fg-1);
    margin: 0 0 12px;
  }
  .instructions b { font-weight: 600; }

  /* ---- Slots ---- */
  .slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }
  .slot {
    position: relative;
    background: var(--kf-n-000);
    border: 1px solid var(--border-hair);
    padding: 6px 8px 6px 10px;
    min-height: 40px;
    min-width: 0;
    display: flex; align-items: center; gap: 8px;
    transition: border-color var(--dur-med) var(--ease-standard),
                background var(--dur-med) var(--ease-standard);
    cursor: default;
  }
  .slot.empty.next {
    border-color: var(--kf-n-900);
    border-style: dashed;
  }
  .slot.filled { cursor: pointer; }
  .slot.filled:hover { background: var(--kf-y-050); }
  .slot.filled::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px; background: var(--kf-y-500);
    transform-origin: left;
    animation: shrinkIn var(--dur-slow) var(--ease-standard);
  }
  @keyframes shrinkIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .slot .num {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    color: var(--fg-3);
    transition: color var(--dur-med);
    flex-shrink: 0;
    width: 28px;
  }
  .slot.next .num { color: var(--kf-n-900); }
  .slot.filled .num { color: var(--kf-y-700); }
  .slot .body {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0;
  }
  .slot .ph {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--fg-3);
  }
  .slot .pick {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
    flex: 1;
    animation: slotPop var(--dur-med) var(--ease-standard);
    min-width: 0;
  }
  @keyframes slotPop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
  .slot .pick-icon {
    width: 26px; height: 26px;
    background: var(--kf-y-100);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .slot .pick-icon svg { width: 14px; height: 14px; stroke: var(--kf-n-900); }
  .slot .pick-label {
    font-family: var(--ff-sans);
    font-weight: 500;
    /* Long names wrap to a second/third line and step down a size rather than
       being cut off; --label-fs is set per slot by JS from the name length. */
    font-size: var(--label-fs, clamp(10px, 1.05vw, 13px));
    line-height: 1.2;
    color: var(--fg-1);
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .slot .clear {
    position: absolute; top: 4px; right: 4px;
    width: 18px; height: 18px;
    border: none; background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    display: none;
    transition: color var(--dur-fast);
  }
  .slot.filled .clear { display: grid; place-items: center; }
  .slot .clear:hover { color: var(--kf-n-900); }
  .slot .clear svg { width: 12px; height: 12px; }

  /* ---- Interest grid ---- */
  .picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 3px;
    margin-bottom: 4px;
  }
  .chip {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 4px;
    background: var(--kf-n-000);
    border: 1px solid var(--border-hair);
    font-family: var(--ff-sans);
    font-weight: 400;
    font-size: 9.5px;
    color: var(--kf-n-900);
    cursor: pointer;
    text-align: left;
    user-select: none;
    line-height: 1.05;
    min-height: 19px;
    transition:
      background var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard),
      border-color var(--dur-fast) var(--ease-standard),
      transform var(--dur-fast) var(--ease-standard);
  }
  .chip-label {
    white-space: nowrap;
  }
  .chip:hover {
    background: var(--kf-n-900);
    color: var(--kf-n-000);
    border-color: var(--kf-n-900);
  }
  .chip:hover .chip-icon { background: var(--kf-y-500); }
  .chip:hover .chip-icon svg { stroke: var(--kf-n-900); }
  .chip:active { transform: translateY(1px); }
  .chip.selected {
    background: var(--kf-y-500);
    color: var(--kf-n-900);
    border-color: var(--kf-y-500);
  }
  .chip.selected:hover { background: var(--kf-y-700); border-color: var(--kf-y-700); }
  .chip.selected .chip-icon { background: var(--kf-n-900); }
  .chip.selected .chip-icon svg { stroke: var(--kf-y-500); }
  .chip[disabled] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
  }
  .chip-icon {
    width: 13px; height: 13px;
    background: var(--kf-y-100);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: background var(--dur-fast);
  }
  .chip-icon svg {
    width: 8px; height: 8px;
    stroke: var(--kf-n-900);
    stroke-width: 1.8;
    transition: stroke var(--dur-fast);
  }

  /* ---- Action row ---- */
  .actions {
    display: flex; gap: 8px; align-items: center;
    margin-top: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .btn {
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 13px;
    padding: 8px 16px;
    border: 1px solid var(--kf-n-900);
    background: var(--kf-n-900);
    color: var(--kf-n-000);
    cursor: pointer;
    letter-spacing: 0.01em;
    transition:
      background var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard),
      border-color var(--dur-fast) var(--ease-standard),
      transform var(--dur-fast) var(--ease-standard);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn:hover { background: var(--kf-y-500); color: var(--kf-n-900); border-color: var(--kf-y-500); }
  .btn:active { transform: translateY(1px); }
  .btn[disabled] {
    background: var(--kf-n-100);
    color: var(--kf-n-300);
    border-color: var(--kf-n-100);
    cursor: not-allowed;
    transform: none;
  }
  .btn--ghost {
    background: transparent;
    color: var(--kf-n-900);
  }
  .btn--ghost:hover { background: var(--kf-n-900); color: var(--kf-n-000); border-color: var(--kf-n-900); }
  .btn .arrow { transition: transform var(--dur-med) var(--ease-standard); }
  .btn:hover .arrow { transform: translateX(3px); }
  .actions .progress {
    margin-left: auto;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-3);
    text-transform: uppercase;
  }
  .actions .progress b { color: var(--kf-n-900); font-weight: 500; }

  /* ---- Disclaimer ---- */
  .disclaimer {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-hair);
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 11px;
    line-height: 1.35;
    color: var(--fg-3);
  }

  /* ---- Result ---- */
  .result {
    background: var(--kf-n-000);
    border: 1px solid var(--border-hair);
    padding: 10px 14px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .result.idle::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--kf-n-100);
  }
  .result.live::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--kf-y-500);
    transform-origin: left;
    animation: shrinkIn var(--dur-slow) var(--ease-standard);
  }
  .result-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }
  .result-head .label {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .result-head .top-pick {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.1;
    margin: 2px 0 0;
    color: var(--fg-3);
  }
  .result.live .top-pick { color: var(--fg-1); }
  .result-head .top-pick .name { font-style: italic; }
  .result-head .top-pick .pct {
    font-family: var(--ff-mono);
    font-style: normal;
    font-size: 18px;
    margin-left: 8px;
    color: var(--kf-y-700);
  }
  .result-head .quote {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--fg-2);
    max-width: 24ch;
    text-align: right;
    text-wrap: pretty;
  }

  /* ---- Bars (horizontal) ---- */
  .bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    flex: 1;
    min-height: 0;
  }
  .bar-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
  }
  .bar-row .name {
    display: contents;
  }
  .bar-row .full {
    font-family: var(--ff-sans);
    font-weight: 500;
    font-size: 12px;
    color: var(--fg-1);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
  }
  .bar-row .badge {
    width: 22px; height: 18px;
    display: grid; place-items: center;
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: 9.5px;
    color: var(--kf-n-000);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    grid-row: 1;
    grid-column: 1;
  }
  .bar-row[data-key="SD"] .badge { color: var(--kf-n-000); }

  /* Rows glide to their new rank when the order changes (FLIP) */

  /* A guess kept on screen while the selection is being edited */
  .result.stale .bars{opacity:.55;transition:opacity var(--dur-med) var(--ease-standard)}
  .result.stale .top-pick{opacity:.6}
  .result.stale #result-label{color:var(--fg-3)}

  /* Rows glide to their new rank when the order changes (FLIP) */
  .bar-row.gliding{transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
  .bar-track {
    position: relative;
    width: 100%;
    height: 14px;
    background: var(--kf-n-050);
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .bar-fill {
    width: 0;
    height: 100%;
    transition: width 900ms cubic-bezier(.22,.61,.36,1);
  }
  .bar-row .pct {
    font-family: var(--ff-mono);
    font-weight: 500;
    font-size: 11.5px;
    color: var(--fg-1);
    text-align: right;
    font-variant-numeric: tabular-nums;
    grid-row: 1;
    grid-column: 3;
  }
  .bar-row.idle .pct { color: var(--fg-3); }
  .bar-row.winner .full { color: var(--kf-n-900); font-weight: 600; }

  /* Thinking pulse — only when there is no previous guess to keep on screen
     (a recompute over an existing result keeps its real bars and widths).
     The shimmer sits on the TRACK so fills stay at zero and the first real
     result grows outward from the left instead of shrinking from full. */
  .thinking { pointer-events: none; }
  .thinking:not(.stale) .bar-track {
    background: repeating-linear-gradient(45deg,
      var(--kf-n-100) 0 8px, var(--kf-n-050) 8px 16px) !important;
    animation: shimmer 1s linear infinite;
  }
  .thinking:not(.stale) .bar-fill {
    width: 0 !important;
  }
  @keyframes shimmer {
    from { background-position: 0 0; }
    to   { background-position: 22px 0; }
  }
  .thinking-tag {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--kf-y-700);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .thinking-tag .pulse {
    width: 8px; height: 8px; background: var(--kf-y-500);
    animation: pulse 0.9s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
  }

  /* ---- Footer ---- */
  footer {
    border-top: 1px solid var(--border-hair);
    background: var(--kf-n-000);
    padding: 6px var(--shell-gutter);
  }
  footer .inner {
    max-width: none;
    margin: 0 auto;
    display: flex; justify-content: space-between; gap: var(--sp-5);
    font-family: var(--ff-sans);
    font-size: 11px;
    color: var(--fg-3);
    flex-wrap: wrap;
  }
  footer .inner a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
  footer .inner a:hover { color: var(--kf-y-700); }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* =========================================================================
     Tweakable: chip size (--chip-scale on <html>)
     ========================================================================= */
  /* Fluid base units: the interest buttons grow with the viewport (clamped)
     so the left column scales up on larger screens the same way the result
     box on the right fills its space — and stays at the current size on
     smaller windows. --chip-scale (the tweak) multiplies on top of this. */
  html {
    --chip-scale: 1;
    --chip-fs:    clamp(9.5px, 0.66vw, 15px);
    --chip-padY:  clamp(2px,   0.14vw, 3.2px);
    --chip-padX:  clamp(4px,   0.28vw, 6.3px);
    --chip-minH:  clamp(19px,  1.32vw, 30px);
    --chip-gap:   clamp(4px,   0.28vw, 6.3px);
    --chip-icon:  clamp(13px,  0.9vw,  20px);
    --chip-svg:   clamp(8px,   0.56vw, 12.6px);
    --picker-gap: clamp(3px,   0.2vw,  5px);
  }
  .picker { gap: calc(var(--picker-gap) * var(--chip-scale)); }
  .chip {
    padding: calc(var(--chip-padY) * var(--chip-scale)) calc(var(--chip-padX) * var(--chip-scale));
    font-size: calc(var(--chip-fs) * var(--chip-scale));
    min-height: calc(var(--chip-minH) * var(--chip-scale));
    gap: calc(var(--chip-gap) * var(--chip-scale));
    transition:
      padding var(--dur-med) var(--ease-standard),
      font-size var(--dur-med) var(--ease-standard),
      min-height var(--dur-med) var(--ease-standard),
      background var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard),
      border-color var(--dur-fast) var(--ease-standard),
      transform var(--dur-fast) var(--ease-standard);
  }
  .chip-icon {
    width: calc(var(--chip-icon) * var(--chip-scale));
    height: calc(var(--chip-icon) * var(--chip-scale));
    transition: width var(--dur-med) var(--ease-standard),
                height var(--dur-med) var(--ease-standard),
                background var(--dur-fast);
  }
  .chip-icon svg {
    width: calc(var(--chip-svg) * var(--chip-scale));
    height: calc(var(--chip-svg) * var(--chip-scale));
  }

  /* =========================================================================
     Tweakable: bar reveal animation ([data-bar-anim] on <html>)
     ========================================================================= */
  /* glid — current width-grow with stagger (default behaviour, no extra rules) */

  /* pop — each row scales in with overshoot; bars are full-width instantly */
  html[data-bar-anim="pop"] .result.live .bar-row {
    animation: barRowPop 420ms cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
    transform-origin: left center;
  }
  html[data-bar-anim="pop"] .result.live .bar-fill {
    transition: none;
  }
  @keyframes barRowPop {
    from { transform: scale(0.4); opacity: 0; }
    60%  { opacity: 1; }
    to   { transform: none; opacity: 1; }
  }

  /* stiga — bars rise from height 0 (scaleY from bottom), staggered top-down */
  html[data-bar-anim="stiga"] .result.live .bar-track {
    animation: barTrackRise 520ms cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 80ms);
    transform-origin: bottom;
  }
  html[data-bar-anim="stiga"] .result.live .bar-fill {
    transition: none;
  }
  @keyframes barTrackRise {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }

  /* =========================================================================
     Header title — permanent (the hero section was removed)
     ========================================================================= */
  .topbar-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .topbar-title {
    display: inline-block;
    justify-self: start;
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.012em;
    color: var(--fg-1);
    white-space: nowrap;
  }
  .topbar-title .shade {
    background: var(--kf-y-500);
    color: var(--kf-n-900);
    padding: 0 .14em;
    font-style: italic;
  }

  /* =========================================================================
     Tweakable: overall layout ([data-layout] on <html>)
       staplad — interests on top, results below (default)
       delad   — interests left, results right
       popup   — only interests; results open as a modal on "Gissa"
     ========================================================================= */

  /* Inert unless their layout/state calls for them */
  #result-backdrop { display: none; }
  .result-close { display: none; }

  /* --- Delad: side by side --- */
  /* Fit the whole app to the viewport: the interest list scrolls inside its
     own column so the content fills the vertical space, a 5% gap sits at the
     bottom, and the footer banner stays visible (no full-page scroll). */
  html[data-layout="delad"] body { height: 100vh; overflow: hidden; }
  html[data-layout="delad"] main {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
      "desc      desc"
      "interests result";
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 24px;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 5vh;
  }
  html[data-layout="delad"] .instructions  { grid-area: desc; margin: 0; align-self: start; }
  html[data-layout="delad"] .picker-section {
    grid-area: interests;
    align-self: stretch;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  html[data-layout="delad"] .picker-section #picker {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
  }
  html[data-layout="delad"] .result {
    grid-area: result;
    align-self: start;
    /* Size to the content — all rows at their minimum height — and hold there.
       The box never stretches to fill the column, and never compresses or
       scrolls; party names and symbols always stay visible above their bars. */
    height: auto;
  }
  @media (max-width: 900px) {
    html[data-layout="delad"] main {
      grid-template-columns: 1fr;
      grid-template-areas: "desc" "interests" "result";
      /* Once the columns stack, stop fitting to one screen: let the page
         scroll so the chips, the slots + buttons, and the results box stack
         at full height in reading order instead of fighting for a fixed
         100vh (which squashed the chips and overlapped the buttons). */
      grid-template-rows: auto auto auto;
      height: auto;
      overflow: visible;
      padding-bottom: 16px;
    }
    html[data-layout="delad"] body { height: auto; overflow: visible; }
    html[data-layout="delad"] .picker-section #picker {
      flex: 0 1 auto;
      overflow: visible;
      min-height: 0;
      padding-right: 0;
    }
    html[data-layout="delad"] .result { height: auto; }
  }

  /* --- Popup: results as a centered modal over the page --- */
  html[data-layout="popup"] .result.idle { display: none; }
  html[data-layout="popup"] .result.live,
  html[data-layout="popup"] .result.thinking {
    position: fixed;
    inset: 0;
    z-index: 100;
    margin: auto;
    width: min(1230px, calc(100vw - 48px));
    height: max-content;
    min-height: min(600px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    box-shadow: var(--shadow-3);
    animation: resultPopIn var(--dur-med) var(--ease-entrance);
  }
  @keyframes resultPopIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  html[data-layout="popup"][data-popup-open="1"] #result-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(35, 31, 32, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: fadeBackdrop var(--dur-med) var(--ease-standard);
  }
  @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } }
  html[data-layout="popup"] .result.live .result-close,
  html[data-layout="popup"] .result.thinking .result-close {
    display: grid;
    place-items: center;
  }
  .result-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 28px; height: 28px;
    border: 1px solid var(--border-muted);
    background: var(--kf-n-000);
    color: var(--fg-2);
    cursor: pointer;
    z-index: 2;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  }
  .result-close:hover { background: var(--kf-n-900); color: var(--kf-n-000); border-color: var(--kf-n-900); }
  .result-close svg { width: 15px; height: 15px; }

  /* --- Popup: interest chips as an equal-size 10×10 grid --- */
  html[data-layout="popup"] .picker {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: calc(3px * var(--chip-scale));
    align-items: stretch;
  }
  html[data-layout="popup"] .chip {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    min-height: 0;
    gap: calc(4px * var(--chip-scale));
    padding: calc(7px * var(--chip-scale)) calc(4px * var(--chip-scale));
    overflow: hidden;
  }
  html[data-layout="popup"] .chip-label {
    white-space: normal;
    line-height: 1.12;
    word-break: break-word;
    text-wrap: balance;
  }

  /* =========================================================================
     Tweakable: interest navigation ([data-picker-mode] on <html>)
       rutnat    — equal 10×10 grid (default)
       sok       — search field filters the grid live
       kategori  — interests grouped under category headings
     ========================================================================= */

  /* --- Picker toolbar: search on top, mode switch + count + Rensa beneath --- */
  .picker-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 8px}
  .picker-bar .picker-search{order:1;flex:1 1 100%;min-width:0;margin-bottom:0}
  .picker-bar .mode-switch{order:2}
  .picker-bar .progress{order:3;margin-left:auto;font-family:var(--ff-mono);font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
  .picker-bar .progress b{color:var(--kf-n-900);font-weight:500}
  .picker-bar .btn{order:4;flex:none;height:34px;padding:0 14px}

  /* --- Mode switch (A–Ö / Kategorier) --- */
  .mode-switch{display:flex;gap:0;flex:none;border:1px solid var(--border-strong);background:var(--kf-n-000);margin-bottom:0}
  .mode-opt{appearance:none;display:inline-flex;align-items:center;gap:5px;padding:0 12px;min-height:34px;border:0;background:transparent;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--fg-3);transition:background var(--dur-fast),color var(--dur-fast)}
  .mode-opt + .mode-opt{border-left:1px solid var(--border-hair)}
  .mode-opt svg{width:12px;height:12px}
  .mode-opt:hover{color:var(--kf-n-900)}
  .mode-opt[aria-selected="true"]{background:var(--kf-n-900);color:var(--kf-n-000)}

  /* --- Search bar --- */
  .picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 38px;
    min-height: 38px;
    flex: none;
    box-sizing: border-box;
    margin-bottom: 8px;
    background: var(--kf-n-000);
    border: 1px solid var(--border-strong);
  }
  .picker-search[hidden] { display: none; }
  .picker-search .ps-ic {
    width: 16px; height: 16px;
    color: var(--fg-3);
    flex-shrink: 0;
  }
  .picker-search .ps-ic svg { width: 16px; height: 16px; }
  .picker-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--ff-sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-1);
    padding: 0;
  }
  .picker-search input::placeholder { color: var(--fg-3); font-weight: 400; }
  .picker-search input::-webkit-search-cancel-button { display: none; }
  .picker-search .ps-count {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--fg-3);
    flex-shrink: 0;
  }
  .picker-search .ps-clear {
    appearance: none;
    border: 0; background: transparent;
    color: var(--fg-3);
    cursor: pointer;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    transition: color var(--dur-fast);
  }
  .picker-search .ps-clear[hidden] { display: none; }
  .picker-search .ps-clear:hover { color: var(--kf-n-900); }
  .picker-search .ps-clear svg { width: 14px; height: 14px; }

  /* --- Empty / no-match state --- */
  .picker-empty {
    grid-column: 1 / -1;
    padding: 28px 8px;
    text-align: center;
    font-family: var(--ff-sans);
    font-size: 14px;
    color: var(--fg-3);
  }

  /* --- Category groups --- */
  .cat-group { display: flex; flex-direction: column; gap: 7px; width: 100%; }
  .cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-strong);
  }
  .cat-head .cat-ic {
    width: clamp(18px, 1.25vw, 26px); height: clamp(18px, 1.25vw, 26px);
    display: grid; place-items: center;
    color: var(--kf-n-900);
    flex-shrink: 0;
  }
  .cat-head .cat-ic svg { width: clamp(15px, 1vw, 22px); height: clamp(15px, 1vw, 22px); }
  .cat-head .cat-name {
    font-family: var(--ff-mono);
    font-size: clamp(11px, 0.78vw, 17px);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--kf-n-900);
    font-weight: 500;
  }
  .cat-head .cat-count {
    margin-left: auto;
    font-family: var(--ff-mono);
    font-size: clamp(10px, 0.7vw, 15px);
    color: var(--fg-3);
  }
  /* Default (staplad/delad): groups flow as wrapping chip rows */
  .cat-grid { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: calc(var(--picker-gap) * var(--chip-scale)); }

  /* --- Popup: equal-size grids in every mode --- */
  /* Category mode lays groups out as full-width stacked rows in every layout,
     so each header's divider line spans the same width — including while the
     search filter shrinks individual groups. */
  html[data-picker-mode="kategori"] .picker {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: calc(14px * var(--chip-scale));
    grid-auto-rows: auto;
  }
  html[data-layout="popup"] .cat-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: calc(3px * var(--chip-scale));
    align-items: stretch;
  }

  /* =========================================================================
     Mobile (phone widths): the equal popup grids would shrink to unusable
     slivers at 10 columns, so drop to 4 and enlarge touch targets. The
     mobile preset uses the popup layout, so these rules drive the phone view.
     ========================================================================= */
  @media (max-width: 640px) {
    main { padding: 6px 14px 16px; gap: 12px; }
    .topbar-inner { gap: 10px; padding: 0 14px; }
    footer { padding: 6px 14px; }
    footer .footer-model { display: none; }
    /* Show the desktop headline on mobile too, sized responsively so it fits
       beside the right-aligned actions (the actions stay in the grid's right
       column). The About button collapses to its icon to free room. */
    .topbar-title {
      display: inline-block;
      justify-self: stretch;
      font-size: clamp(13px, 4.15vw, 25px) !important;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Both actions collapse to icon-only on mobile so the full headline fits
       at a readable size; they stay in the grid's right column. */
    #about-btn span,
    #share-label,
    .topbar-btn .chev { display: none; }
    .topbar-btn { padding: 6px 9px; }
    .topbar-actions { gap: 5px; }

    html[data-layout="popup"] .picker,
    html[data-layout="popup"] .cat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    html[data-layout="popup"] .chip { min-height: 60px; }

    .actions { gap: 8px; }
    .actions .btn { flex: 1 1 auto; justify-content: center; }
    html[data-layout="popup"] .result.live,
    html[data-layout="popup"] .result.thinking {
      width: calc(100vw - 24px);
      min-height: min(560px, calc(100vh - 24px));
      max-height: calc(100vh - 24px);
    }
  }
  @media (max-width: 440px) {
    #about-btn span { display: none; }
    .topbar-btn { padding: 6px 9px; }
  }

  /* =========================================================================
     Delad + Popup: fill the result box — rows distribute across the full
     height, bar tracks grow tall, and type scales up so there's no dead
     whitespace at the bottom. Staplad keeps its compact bars.
     ========================================================================= */
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .bars {
    gap: 0;
  }
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .bar-row {
    flex: 1 1 auto;
    /* Floor that always fits the name/symbol row + the bar track beneath it,
       so labels are never hidden behind the bars. Rows grow past this to
       fill a tall box; they never shrink below it. */
    min-height: 46px;
    grid-template-rows: auto 1fr;
    align-items: center;
    padding: 4px 0;
  }
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .bar-track {
    height: auto;
    align-self: stretch;
    min-height: 16px;
  }
  /* Larger type to match the taller bars */
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .bar-row .full {
    font-size: 15px;
  }
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .bar-row .pct {
    font-size: 14px;
  }
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .bar-row .badge {
    width: 26px; height: 20px; font-size: 11px;
  }
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .result-head .label {
    font-size: 11px;
  }
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .result-head .top-pick,
  :is(html[data-layout="delad"], html[data-layout="popup"]) .result .result-head .top-pick .pct {
    font-size: 22px;
  }

  /* Mobile: the pick slots keep the desktop-style boxes (number + icon +
     label), shown three side by side. They, and the Gissa/Rensa buttons, are
     reordered to sit BELOW the interest selection — between the chips and the
     results box. */
  @media (max-width: 640px) {
    .picker-section { display: flex; flex-direction: column; }
    .mode-switch   { order: 0; }
    .picker-search { order: 1; }
    .picker        { order: 2; }
    .mode-switch{width:auto}
    .mode-opt{flex:1;justify-content:center;min-height:44px;font-size:12px;padding:0 12px}
    .mode-opt svg{width:14px;height:14px}
    .picker-bar{order:1;margin:12px 0 8px}
    .picker-bar .picker-search{min-height:44px;height:44px}
    .picker-bar .mode-switch{flex:1 1 auto}
    .picker-bar .btn{height:44px;min-height:44px}

    .slots {
      order: 3;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin: 14px 0 0;
    }
    /* Tighten the desktop box just enough that three fit across a phone
       without the interest label being crowded out. */
    .slot { padding: 6px 6px 6px 8px; gap: 6px; }
    .slot .num { font-size: 17px; width: 16px; }
    .slot .pick-icon { width: 22px; height: 22px; }
    .slot .pick-icon svg { width: 12px; height: 12px; }
    .slot .pick-label { font-size: 12px; }
    .slot .ph { font-size: 12px; }

    .actions { order: 4; margin: 12px 0 2px; }
  }
/* ---- Mount wrapper ----
   The page is rendered inside a root <div> instead of directly in <body>,
   so the wrapper takes over the body's column-shell layout. */
.valoraklet-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Share my result (button inside the result card) ----
   Reuses .share-wrap / .share-menu / .share-opt from the top bar; only the
   trigger and its placement are new. */
.result-share[hidden] { display: none; }
.result-share { align-self: flex-start; flex-shrink: 0; }
.btn--share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  color: var(--kf-n-900);
  background: var(--kf-y-500);
  border: 1px solid var(--kf-n-900);
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.btn--share:hover,
.btn--share:focus-visible {
  background: var(--kf-n-900);
  color: var(--kf-n-000);
  outline: none;
}
.btn--share svg { width: 14px; height: 14px; }
.btn--share .chev { width: 12px; height: 12px; opacity: .85; }
.btn--share[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* In the popup layout a close button sits in the card's top-right corner, so
   keep the share menu clear of it and anchored inside the card. */
html[data-layout="popup"] .result-share { margin-right: 34px; }
.result-share .share-menu { min-width: 200px; }

@media (max-width: 640px) {
  /* On phones the card is narrow: stack the button under the heading and let
     the menu use the full card width so nothing is clipped. */
  .result-head { flex-wrap: wrap; }
  .result-share { width: 100%; margin-right: 0; }
  html[data-layout="popup"] .result-share { margin-right: 0; }
  .btn--share { width: 100%; justify-content: center; }
  .result-share .share-menu { left: 0; right: 0; min-width: 0; }
}