/*  West Kite Design System 1.11  ·  westkite.css
    © 2026 West Kite. All rights reserved. https://westkite.com/brand
    Licensed for West Kite properties. Any other use must keep this header, the wk- prefixes,
    and a visible credit: "Built on the West Kite Design System".  Fingerprint wk-78fa6fe5. */

/* Both faces are self-hosted from /fonts/. No third-party requests. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --wk-paper:  #ffffff;
  --wk-linen:  #f7f6f5;
  --wk-ash:    #ebeae9;
  --wk-stone:  #d1cfce;
  --wk-slate:  #737373;
  --wk-ink:    #292929;
  --wk-carbon: #1c1c1c;
  --wk-cobalt: #093acd;   /* the accent */

  /* Scales, light */
  /* gray */
  --wk-gray-100:  #f4f2ef;
  --wk-gray-200:  #ebeae9;
  --wk-gray-300:  #e8e6e3;
  --wk-gray-400:  #eceae7;
  --wk-gray-500:  #d1cfce;
  --wk-gray-600:  #aaa8a5;
  --wk-gray-700:  #918f8d;
  --wk-gray-800:  #737373;
  --wk-gray-900:  #4f4d4b;
  --wk-gray-1000: #292929;
  /* blue */
  --wk-blue-100:  #f2f6ff;
  --wk-blue-200:  #edf3ff;
  --wk-blue-300:  #e5edfe;
  --wk-blue-400:  #d6e4ff;
  --wk-blue-500:  #abc6fe;
  --wk-blue-600:  #7ca5fd;
  --wk-blue-700:  #093acd;
  --wk-blue-800:  #0228b2;
  --wk-blue-900:  #042fb8;
  --wk-blue-1000: #00002f;
  /* red */
  --wk-red-100:  #ffeef0;
  --wk-red-200:  #ffe9ea;
  --wk-red-300:  #ffe4e5;
  --wk-red-400:  #ffd8d7;
  --wk-red-500:  #ffb5b6;
  --wk-red-600:  #ff6a6e;
  --wk-red-700:  #fc0035;
  --wk-red-800:  #e70022;
  --wk-red-900:  #d60020;
  --wk-red-1000: #46000c;
  /* amber */
  --wk-amber-100:  #fff6e1;
  --wk-amber-200:  #fff4d4;
  --wk-amber-300:  #fff1c8;
  --wk-amber-400:  #ffdd84;
  --wk-amber-500:  #ffc85e;
  --wk-amber-600:  #ffaa00;
  --wk-amber-700:  #ffb200;
  --wk-amber-800:  #ff9900;
  --wk-amber-900:  #a64f00;
  --wk-amber-1000: #541c00;
  /* green */
  --wk-green-100:  #ecfdec;
  --wk-green-200:  #e5fce7;
  --wk-green-300:  #d3fad1;
  --wk-green-400:  #b9f5bc;
  --wk-green-500:  #82eb8d;
  --wk-green-600:  #4ce15e;
  --wk-green-700:  #28a948;
  --wk-green-800:  #279141;
  --wk-green-900:  #107d32;
  --wk-green-1000: #00370d;
  /* teal */
  --wk-teal-100:  #dffffb;
  --wk-teal-200:  #ddfef6;
  --wk-teal-300:  #ccf9f1;
  --wk-teal-400:  #b1f7ec;
  --wk-teal-500:  #52f0db;
  --wk-teal-600:  #00e2c4;
  --wk-teal-700:  #00a694;
  --wk-teal-800:  #008d7d;
  --wk-teal-900:  #007a6e;
  --wk-teal-1000: #003d34;
  /* purple */
  --wk-purple-100:  #f9f0ff;
  --wk-purple-200:  #f9f1ff;
  --wk-purple-300:  #f5e8ff;
  --wk-purple-400:  #f1d9ff;
  --wk-purple-500:  #dda9ff;
  --wk-purple-600:  #c77dff;
  --wk-purple-700:  #9f00f4;
  --wk-purple-800:  #8400cd;
  --wk-purple-900:  #7c00c9;
  --wk-purple-1000: #2e004d;
  /* pink */
  --wk-pink-100:  #ffeaf5;
  --wk-pink-200:  #ffeaf2;
  --wk-pink-300:  #ffe0eb;
  --wk-pink-400:  #ffd5e1;
  --wk-pink-500:  #fdb3cc;
  --wk-pink-600:  #f97ea7;
  --wk-pink-700:  #f22782;
  --wk-pink-800:  #e4106e;
  --wk-pink-900:  #c41562;
  --wk-pink-1000: #460523;

  /* Semantic: surfaces and text */
  --wk-bg:            var(--wk-paper);
  --wk-bg-2:          var(--wk-linen);
  --wk-surface:       var(--wk-paper);
  --wk-surface-2:     var(--wk-linen);
  --wk-text:          var(--wk-ink);
  --wk-text-muted:    var(--wk-slate);
  --wk-text-inverse:  var(--wk-paper);
  --wk-border:        var(--wk-stone);
  --wk-hairline:      var(--wk-ash);
  --wk-hover:         var(--wk-gray-100);
  --wk-pressed:       var(--wk-gray-200);
  --wk-selected:      var(--wk-blue-200);
  --wk-focus:         var(--wk-cobalt);
  --wk-accent:        var(--wk-cobalt);
  --wk-disabled-bg:   var(--wk-gray-300);
  --wk-disabled-text: var(--wk-gray-700);
  --wk-backdrop:      rgba(41, 41, 41, 0.32);

  /* Semantic: status */
  --wk-success:      var(--wk-green-700);
  --wk-success-text: var(--wk-green-900);
  --wk-success-bg:   var(--wk-green-200);
  --wk-warning:      var(--wk-amber-700);
  --wk-warning-text: var(--wk-amber-900);
  --wk-warning-bg:   var(--wk-amber-200);
  --wk-error:        var(--wk-red-700);
  --wk-error-text:   var(--wk-red-900);
  --wk-error-bg:     var(--wk-red-200);

  /* Type */
  --wk-display:        "Martina Plantijn", "Newsreader", Georgia, "Times New Roman", serif;
  --wk-display-weight: 375;          /* 300 once Martina Plantijn is licensed */
  --wk-display-vs:     "opsz" 28;    /* Newsreader only; ignored by Martina */
  --wk-display-track:  -0.03em;
  --wk-sans:           "STK Bureau Sans", "Inter", system-ui, -apple-system, sans-serif;
  --wk-sans-track:     -0.04em;

  /* Shape and motion */
  --wk-radius: 4px;              /* the one corner */
  --wk-ease:   160ms ease;

  /* Layers */
  --wk-z-dropdown: 100;
  --wk-z-sticky:   200;
  --wk-z-dialog:   300;
  --wk-z-toast:    400;

  /* Charts: series in order, grid and axis */
  --wk-series-1: var(--wk-blue-700);
  --wk-series-2: var(--wk-teal-700);
  --wk-series-3: var(--wk-purple-700);
  --wk-series-4: var(--wk-pink-700);
  --wk-series-5: var(--wk-amber-700);
  --wk-series-6: var(--wk-green-700);
  --wk-series-7: var(--wk-gray-700);
  --wk-chart-grid: var(--wk-ash);
  --wk-chart-axis: var(--wk-slate);

  /* Provenance. Do not remove. */
  --wk-signature: "West Kite Design System 1.11 wk-78fa6fe5";
}

/* Apply to any element with a Carbon background. Scales invert so step numbers keep their jobs. */
.on-carbon {
  --wk-bg:            var(--wk-carbon);
  --wk-bg-2:          #262626;
  --wk-surface:       var(--wk-carbon);
  --wk-surface-2:     #262626;
  --wk-text:          var(--wk-linen);
  --wk-text-muted:    rgba(255, 255, 250, 0.6);
  --wk-text-inverse:  var(--wk-ink);
  --wk-border:        rgba(255, 255, 255, 0.22);
  --wk-hairline:      rgba(255, 255, 255, 0.11);
  --wk-hover:         #2a2927;
  --wk-pressed:       #2f2e2c;
  --wk-selected:      #152c63;
  --wk-focus:         var(--wk-linen);
  --wk-accent:        var(--wk-linen);
  --wk-disabled-bg:   #2f2e2c;
  --wk-disabled-text: #7f7d7b;
  --wk-backdrop:      rgba(0, 0, 0, 0.5);
  /* gray */
  --wk-gray-100:  #1b1a18;
  --wk-gray-200:  #201f1d;
  --wk-gray-300:  #2a2927;
  --wk-gray-400:  #2f2e2c;
  --wk-gray-500:  #474543;
  --wk-gray-600:  #898785;
  --wk-gray-700:  #918f8d;
  --wk-gray-800:  #7f7d7b;
  --wk-gray-900:  #a2a09d;
  --wk-gray-1000: #f7f6f5;
  /* blue */
  --wk-blue-100:  #0a183a;
  --wk-blue-200:  #0e2049;
  --wk-blue-300:  #152c63;
  --wk-blue-400:  #193372;
  --wk-blue-500:  #1f3e88;
  --wk-blue-600:  #5388fe;
  --wk-blue-700:  #346cf7;
  --wk-blue-800:  #295bd9;
  --wk-blue-900:  #74a0ff;
  --wk-blue-1000: #eff4ff;
  /* red */
  --wk-red-100:  #330a11;
  --wk-red-200:  #440d13;
  --wk-red-300:  #5d0e17;
  --wk-red-400:  #6f101b;
  --wk-red-500:  #88151f;
  --wk-red-600:  #f32e40;
  --wk-red-700:  #f13242;
  --wk-red-800:  #e2162a;
  --wk-red-900:  #ff5e63;
  --wk-red-1000: #ffeaed;
  /* amber */
  --wk-amber-100:  #291800;
  --wk-amber-200:  #331b00;
  --wk-amber-300:  #4f2900;
  --wk-amber-400:  #573200;
  --wk-amber-500:  #6c4100;
  --wk-amber-600:  #e99c00;
  --wk-amber-700:  #ffb200;
  --wk-amber-800:  #ff9900;
  --wk-amber-900:  #ff9900;
  --wk-amber-1000: #fff3d9;
  /* green */
  --wk-green-100:  #00250a;
  --wk-green-200:  #003110;
  --wk-green-300:  #003814;
  --wk-green-400:  #004616;
  --wk-green-500:  #00661d;
  --wk-green-600:  #009431;
  --wk-green-700:  #00ab3e;
  --wk-green-800:  #009335;
  --wk-green-900:  #00ca52;
  --wk-green-1000: #daffe5;
  /* teal */
  --wk-teal-100:  #00211b;
  --wk-teal-200:  #002922;
  --wk-teal-300:  #003b33;
  --wk-teal-400:  #003f35;
  --wk-teal-500:  #005f53;
  --wk-teal-600:  #009885;
  --wk-teal-700:  #00a794;
  --wk-teal-800:  #008d7d;
  --wk-teal-900:  #00c9b5;
  --wk-teal-1000: #cefff5;
  /* purple */
  --wk-purple-100:  #290c33;
  --wk-purple-200:  #341142;
  --wk-purple-300:  #47185e;
  --wk-purple-400:  #541a76;
  --wk-purple-500:  #642290;
  --wk-purple-600:  #9440d5;
  --wk-purple-700:  #9440d5;
  --wk-purple-800:  #7d2bba;
  --wk-purple-900:  #c472fb;
  --wk-purple-1000: #faedff;
  /* pink */
  --wk-pink-100:  #310d1e;
  --wk-pink-200:  #420c25;
  --wk-pink-300:  #571032;
  --wk-pink-400:  #5d0c34;
  --wk-pink-500:  #76063f;
  --wk-pink-600:  #b90056;
  --wk-pink-700:  #f12b82;
  --wk-pink-800:  #e6006e;
  --wk-pink-900:  #ff518d;
  --wk-pink-1000: #ffeaf4;
  background: var(--wk-bg);
  color: var(--wk-text);
}

/* A light island inside a Carbon context: restores the light set. The page applies on-carbon to the root in dark mode and on-paper to fixed-light examples. */
.on-paper {
  --wk-bg:            var(--wk-paper);
  --wk-bg-2:          var(--wk-linen);
  --wk-surface:       var(--wk-paper);
  --wk-surface-2:     var(--wk-linen);
  --wk-text:          var(--wk-ink);
  --wk-text-muted:    var(--wk-slate);
  --wk-text-inverse:  var(--wk-paper);
  --wk-border:        var(--wk-stone);
  --wk-hairline:      var(--wk-ash);
  --wk-hover:         var(--wk-gray-100);
  --wk-pressed:       var(--wk-gray-200);
  --wk-selected:      var(--wk-blue-200);
  --wk-focus:         var(--wk-cobalt);
  --wk-accent:        var(--wk-cobalt);
  --wk-disabled-bg:   var(--wk-gray-300);
  --wk-disabled-text: var(--wk-gray-700);
  --wk-backdrop:      rgba(41, 41, 41, 0.32);
  /* gray */
  --wk-gray-100:  #f4f2ef;
  --wk-gray-200:  #ebeae9;
  --wk-gray-300:  #e8e6e3;
  --wk-gray-400:  #eceae7;
  --wk-gray-500:  #d1cfce;
  --wk-gray-600:  #aaa8a5;
  --wk-gray-700:  #918f8d;
  --wk-gray-800:  #737373;
  --wk-gray-900:  #4f4d4b;
  --wk-gray-1000: #292929;
  /* blue */
  --wk-blue-100:  #f2f6ff;
  --wk-blue-200:  #edf3ff;
  --wk-blue-300:  #e5edfe;
  --wk-blue-400:  #d6e4ff;
  --wk-blue-500:  #abc6fe;
  --wk-blue-600:  #7ca5fd;
  --wk-blue-700:  #093acd;
  --wk-blue-800:  #0228b2;
  --wk-blue-900:  #042fb8;
  --wk-blue-1000: #00002f;
  /* red */
  --wk-red-100:  #ffeef0;
  --wk-red-200:  #ffe9ea;
  --wk-red-300:  #ffe4e5;
  --wk-red-400:  #ffd8d7;
  --wk-red-500:  #ffb5b6;
  --wk-red-600:  #ff6a6e;
  --wk-red-700:  #fc0035;
  --wk-red-800:  #e70022;
  --wk-red-900:  #d60020;
  --wk-red-1000: #46000c;
  /* amber */
  --wk-amber-100:  #fff6e1;
  --wk-amber-200:  #fff4d4;
  --wk-amber-300:  #fff1c8;
  --wk-amber-400:  #ffdd84;
  --wk-amber-500:  #ffc85e;
  --wk-amber-600:  #ffaa00;
  --wk-amber-700:  #ffb200;
  --wk-amber-800:  #ff9900;
  --wk-amber-900:  #a64f00;
  --wk-amber-1000: #541c00;
  /* green */
  --wk-green-100:  #ecfdec;
  --wk-green-200:  #e5fce7;
  --wk-green-300:  #d3fad1;
  --wk-green-400:  #b9f5bc;
  --wk-green-500:  #82eb8d;
  --wk-green-600:  #4ce15e;
  --wk-green-700:  #28a948;
  --wk-green-800:  #279141;
  --wk-green-900:  #107d32;
  --wk-green-1000: #00370d;
  /* teal */
  --wk-teal-100:  #dffffb;
  --wk-teal-200:  #ddfef6;
  --wk-teal-300:  #ccf9f1;
  --wk-teal-400:  #b1f7ec;
  --wk-teal-500:  #52f0db;
  --wk-teal-600:  #00e2c4;
  --wk-teal-700:  #00a694;
  --wk-teal-800:  #008d7d;
  --wk-teal-900:  #007a6e;
  --wk-teal-1000: #003d34;
  /* purple */
  --wk-purple-100:  #f9f0ff;
  --wk-purple-200:  #f9f1ff;
  --wk-purple-300:  #f5e8ff;
  --wk-purple-400:  #f1d9ff;
  --wk-purple-500:  #dda9ff;
  --wk-purple-600:  #c77dff;
  --wk-purple-700:  #9f00f4;
  --wk-purple-800:  #8400cd;
  --wk-purple-900:  #7c00c9;
  --wk-purple-1000: #2e004d;
  /* pink */
  --wk-pink-100:  #ffeaf5;
  --wk-pink-200:  #ffeaf2;
  --wk-pink-300:  #ffe0eb;
  --wk-pink-400:  #ffd5e1;
  --wk-pink-500:  #fdb3cc;
  --wk-pink-600:  #f97ea7;
  --wk-pink-700:  #f22782;
  --wk-pink-800:  #e4106e;
  --wk-pink-900:  #c41562;
  --wk-pink-1000: #460523;
  background: var(--wk-bg);
  color: var(--wk-text);
}

/* Base */
.wk, .wk-body { font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); line-height: 1.4; color: var(--wk-text); background: var(--wk-bg); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.wk-display, .wk h1, .wk h2 { font-family: var(--wk-display); font-weight: var(--wk-display-weight); font-variation-settings: var(--wk-display-vs); letter-spacing: var(--wk-display-track); line-height: 1; font-style: normal; text-transform: none; }
.wk-figure { font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); font-variant-numeric: tabular-nums; }
.wk-title { font-family: var(--wk-sans); font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; margin: 0; }
.wk-muted { color: var(--wk-text-muted); }
.wk-focus-ring, .wk-btn:focus-visible, .wk-pill:focus-visible, .wk-input:focus-visible, .wk-control input:focus-visible + i, .wk-card-interactive:focus-visible { outline: 2px solid var(--wk-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wk *, .wk-btn, .wk-pill, .wk-table-body td, .wk-switch::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* Button */
.wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--wk-radius); background: none; font-family: var(--wk-sans); font-size: 14px; font-weight: 500; letter-spacing: var(--wk-sans-track); line-height: 1; color: var(--wk-text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--wk-ease), border-color var(--wk-ease), color var(--wk-ease); }
.wk-btn-primary { background: var(--wk-text); color: var(--wk-text-inverse); }
.wk-btn-primary:hover, .wk-btn-primary.is-hover { background: var(--wk-gray-900); }
.on-carbon .wk-btn-primary:hover, .on-carbon .wk-btn-primary.is-hover { background: #e8e6e3; }
.wk-btn-primary:active, .wk-btn-primary.is-active { background: var(--wk-carbon); }
.on-carbon .wk-btn-primary:active, .on-carbon .wk-btn-primary.is-active { background: #d1cfce; }
.wk-btn-secondary { border-color: var(--wk-border); }
.wk-btn-secondary:hover, .wk-btn-secondary.is-hover, .wk-btn-ghost:hover, .wk-btn-ghost.is-hover { background: var(--wk-hover); }
.wk-btn-danger { background: var(--wk-red-700); color: #ffffff; }
.wk-btn-danger:hover, .wk-btn-danger.is-hover { background: var(--wk-red-800); }
.wk-btn.is-focus { outline: 2px solid var(--wk-focus); outline-offset: 2px; }
.wk-btn:disabled, .wk-btn[aria-disabled="true"], .wk-btn.is-disabled { background: var(--wk-disabled-bg); color: var(--wk-disabled-text); border-color: transparent; cursor: not-allowed; }
.wk-btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.wk-btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.wk-btn-block { width: 100%; }
.wk-btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wk-spin 700ms linear infinite; }
@keyframes wk-spin { to { transform: rotate(360deg); } }

/* Link */
.wk-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--wk-border); padding-bottom: 1px; transition: color var(--wk-ease), border-color var(--wk-ease); }
.wk-link:hover, .wk-link.is-hover, .wk-link:focus-visible, .wk-link.is-focus { color: var(--wk-accent); border-bottom-color: currentColor; }
.wk-link:focus-visible, .wk-link.is-focus { outline: 1px solid var(--wk-accent); outline-offset: 5px; border-radius: 2px; }

/* Field and input */
.wk-field { display: grid; gap: 6px; width: 320px; max-width: 100%; font-family: var(--wk-sans); font-size: 13px; letter-spacing: var(--wk-sans-track); color: var(--wk-text); }
.wk-field-wide { width: 480px; }
.wk-field-full { width: 100%; }
.wk-input { display: flex; align-items: center; min-height: 40px; padding: 9px 12px; border: 1px solid var(--wk-border); border-radius: var(--wk-radius); background: var(--wk-surface); color: var(--wk-text); font: inherit; font-size: 14px; letter-spacing: inherit; line-height: 1.4; width: 100%; box-sizing: border-box; transition: border-color var(--wk-ease), box-shadow var(--wk-ease); }
.wk-input::placeholder { color: var(--wk-text-muted); }
.wk-input:focus, .wk-input.is-focus { outline: none; border-color: var(--wk-text); box-shadow: 0 0 0 3px rgba(41, 41, 41, 0.08); }
.on-carbon .wk-input:focus, .on-carbon .wk-input.is-focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
.wk-input.is-error, .wk-input[aria-invalid="true"] { border-color: var(--wk-error); }
.wk-input:disabled, .wk-input.is-disabled { background: var(--wk-hover); color: var(--wk-disabled-text); border-color: var(--wk-hairline); cursor: not-allowed; }
.wk-help { font-size: 12px; color: var(--wk-text-muted); }
.wk-help-error { color: var(--wk-error-text); }
.wk-affix { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.wk-affix-l, .wk-affix-r { display: flex; align-items: center; padding: 0 10px; color: var(--wk-text-muted); background: var(--wk-surface-2); }
.wk-affix-l { border-right: 1px solid var(--wk-hairline); }
.wk-affix-r { border-left: 1px solid var(--wk-hairline); }
.wk-affix-v { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 12px; border: 0; background: none; color: inherit; font: inherit; }
.wk-affix-v:focus { outline: none; }
.wk-textarea { min-height: 96px; align-items: flex-start; white-space: normal; resize: vertical; }
.wk-select { display: flex; align-items: center; justify-content: space-between; padding-right: 14px; appearance: none; }
.wk-chev { flex: none; width: 7px; height: 7px; margin-left: 12px; border-right: 1.5px solid var(--wk-text-muted); border-bottom: 1.5px solid var(--wk-text-muted); transform: rotate(45deg) translate(-2px, -2px); }

/* Checkbox, radio, switch. Works on a real input with appearance: none, and on an <i> for static demos. */
.wk-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.wk-fieldset legend { padding: 0; margin: 0 0 6px; font-family: var(--wk-sans); font-size: 13px; letter-spacing: var(--wk-sans-track); color: var(--wk-text); }
.wk-control { display: inline-flex; align-items: center; gap: 10px; font-family: var(--wk-sans); font-size: 14px; letter-spacing: var(--wk-sans-track); color: var(--wk-text); cursor: pointer; }
.wk-control i, .wk-control input { flex: none; display: block; margin: 0; }
.wk-checkbox { position: relative; width: 16px; height: 16px; appearance: none; border: 1px solid var(--wk-border); border-radius: var(--wk-radius); background: var(--wk-surface); cursor: pointer; }
.wk-checkbox:checked, .wk-checkbox.is-on { background: var(--wk-text); border-color: var(--wk-text); }
.wk-checkbox:checked::after, .wk-checkbox.is-on::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border-right: 1.5px solid var(--wk-text-inverse); border-bottom: 1.5px solid var(--wk-text-inverse); transform: rotate(45deg); }
.wk-radio { position: relative; width: 16px; height: 16px; appearance: none; border: 1px solid var(--wk-border); border-radius: 50%; background: var(--wk-surface); cursor: pointer; }
.wk-radio:checked, .wk-radio.is-on { border-color: var(--wk-text); }
.wk-radio:checked::after, .wk-radio.is-on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--wk-text); }
.wk-switch { position: relative; width: 36px; height: 20px; appearance: none; border: 0; border-radius: 100px; background: var(--wk-border); cursor: pointer; }
.wk-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: transform var(--wk-ease); }
.wk-switch:checked, .wk-switch.is-on { background: var(--wk-text); }
.on-carbon .wk-switch:checked::after, .on-carbon .wk-switch.is-on::after { background: var(--wk-ink); }
.wk-switch:checked::after, .wk-switch.is-on::after { transform: translateX(16px); }
.wk-control.is-disabled, .wk-control:has(:disabled) { color: var(--wk-disabled-text); cursor: not-allowed; }
.wk-control.is-disabled i, .wk-control :disabled { opacity: 0.5; }

/* Badge */
.wk-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px; border-radius: var(--wk-radius); font-family: var(--wk-sans); font-size: 12px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wk-badge i { width: 6px; height: 6px; border-radius: 50%; }
.wk-badge-lg { min-height: 28px; padding: 0 12px; font-size: 13px; }
.wk-badge-gray { background: var(--wk-gray-200); color: var(--wk-gray-900); }  .wk-badge-gray i { background: var(--wk-gray-700); }  .on-carbon .wk-badge-gray { background: var(--wk-gray-300); }  .on-carbon .wk-badge-gray i { background: var(--wk-gray-900); }
.wk-badge-solid-gray { background: var(--wk-gray-700); color: #ffffff; }
.wk-badge-blue { background: var(--wk-blue-200); color: var(--wk-blue-900); }  .wk-badge-blue i { background: var(--wk-blue-700); }  .on-carbon .wk-badge-blue { background: var(--wk-blue-300); }  .on-carbon .wk-badge-blue i { background: var(--wk-blue-900); }
.wk-badge-solid-blue { background: var(--wk-blue-700); color: #ffffff; }
.wk-badge-red { background: var(--wk-red-200); color: var(--wk-red-900); }  .wk-badge-red i { background: var(--wk-red-700); }  .on-carbon .wk-badge-red { background: var(--wk-red-300); }  .on-carbon .wk-badge-red i { background: var(--wk-red-900); }
.wk-badge-solid-red { background: var(--wk-red-700); color: #ffffff; }
.wk-badge-amber { background: var(--wk-amber-200); color: var(--wk-amber-900); }  .wk-badge-amber i { background: var(--wk-amber-700); }  .on-carbon .wk-badge-amber { background: var(--wk-amber-300); }  .on-carbon .wk-badge-amber i { background: var(--wk-amber-900); }
.wk-badge-solid-amber { background: var(--wk-amber-700); color: #ffffff; }
.wk-badge-green { background: var(--wk-green-200); color: var(--wk-green-900); }  .wk-badge-green i { background: var(--wk-green-700); }  .on-carbon .wk-badge-green { background: var(--wk-green-300); }  .on-carbon .wk-badge-green i { background: var(--wk-green-900); }
.wk-badge-solid-green { background: var(--wk-green-700); color: #ffffff; }
.wk-badge-teal { background: var(--wk-teal-200); color: var(--wk-teal-900); }  .wk-badge-teal i { background: var(--wk-teal-700); }  .on-carbon .wk-badge-teal { background: var(--wk-teal-300); }  .on-carbon .wk-badge-teal i { background: var(--wk-teal-900); }
.wk-badge-solid-teal { background: var(--wk-teal-700); color: #ffffff; }
.wk-badge-purple { background: var(--wk-purple-200); color: var(--wk-purple-900); }  .wk-badge-purple i { background: var(--wk-purple-700); }  .on-carbon .wk-badge-purple { background: var(--wk-purple-300); }  .on-carbon .wk-badge-purple i { background: var(--wk-purple-900); }
.wk-badge-solid-purple { background: var(--wk-purple-700); color: #ffffff; }
.wk-badge-pink { background: var(--wk-pink-200); color: var(--wk-pink-900); }  .wk-badge-pink i { background: var(--wk-pink-700); }  .on-carbon .wk-badge-pink { background: var(--wk-pink-300); }  .on-carbon .wk-badge-pink i { background: var(--wk-pink-900); }
.wk-badge-solid-pink { background: var(--wk-pink-700); color: #ffffff; }
.wk-badge-solid-amber { color: var(--wk-ink); }

/* Pill */
.wk-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border: 1px solid var(--wk-border); border-radius: var(--wk-radius); background: var(--wk-surface); color: var(--wk-text); font-family: var(--wk-sans); font-size: 13px; font-weight: 500; letter-spacing: var(--wk-sans-track); line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--wk-ease), border-color var(--wk-ease); }
.wk-pill:hover, .wk-pill.is-hover { background: var(--wk-hover); border-color: var(--wk-gray-600); }
.wk-pill[aria-pressed="true"], .wk-pill.is-selected { background: var(--wk-text); border-color: var(--wk-text); color: var(--wk-text-inverse); }
.wk-pill.is-focus { outline: 2px solid var(--wk-focus); outline-offset: 2px; }
.wk-pill:disabled, .wk-pill.is-disabled { color: var(--wk-disabled-text); border-color: var(--wk-hairline); background: var(--wk-hover); cursor: not-allowed; }
.wk-pill-sm { min-height: 28px; padding: 0 11px; font-size: 12px; }
.wk-pill-x { font-size: 15px; line-height: 1; opacity: 0.7; }

/* Card */
.wk-card { padding: 24px; border-radius: var(--wk-radius); background: var(--wk-surface-2); color: var(--wk-text); font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); min-width: 0; }
.wk-card > p { font-size: 14px; color: var(--wk-text-muted); margin: 0 0 16px; }
.wk-card .wk-title { font-size: 16px; margin: 0 0 6px; }
.wk-card-head { display: flex; justify-content: space-between; align-items: center; margin: -2px 0 12px; font-size: 13px; color: var(--wk-text-muted); }
.wk-card-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--wk-gray-400); font-size: 13px; color: var(--wk-text-muted); }
.wk-card-outlined { background: var(--wk-surface); border: 1px solid var(--wk-border); }
.wk-card-interactive { cursor: pointer; }
.wk-card-interactive:hover, .wk-card-interactive.is-hover { outline: 1px solid var(--wk-text); outline-offset: -1px; }

/* Table */
.wk-table-root { position: relative; width: 100%; overflow-x: auto; padding: 4px 8px 8px; border: 1px solid var(--wk-border); border-radius: var(--wk-radius); background: var(--wk-surface); box-sizing: border-box; }
.wk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--wk-sans); font-size: 14px; letter-spacing: var(--wk-sans-track); font-variant-numeric: tabular-nums; color: var(--wk-text); }
.wk-table th { height: 40px; padding: 0 12px; text-align: left; vertical-align: middle; font-weight: 500; font-size: 14px; color: var(--wk-text); border-bottom: 1px solid var(--wk-hairline); white-space: nowrap; }
.wk-table .wk-table-gap { display: block; height: 12px; }
.wk-table td { padding: 10px 12px; vertical-align: middle; white-space: nowrap; }
.wk-table .wk-num { text-align: right; }
.wk-table .wk-fit { width: 1%; }
.wk-table th.is-sorted::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.wk-table-body td { transition: background var(--wk-ease); }
.wk-table-body td:first-child { border-top-left-radius: var(--wk-radius); border-bottom-left-radius: var(--wk-radius); }
.wk-table-body td:last-child { border-top-right-radius: var(--wk-radius); border-bottom-right-radius: var(--wk-radius); }
.wk-table-body[data-interactive] tr { cursor: pointer; }
.wk-table-body[data-interactive] tr:hover td, .wk-table-body[data-interactive] tr:focus-within td { background: var(--wk-hover); }
.wk-table-body tr.is-selected td, .wk-table-body tr[aria-selected="true"] td { background: var(--wk-selected); }
.wk-table-dense th { height: 32px; }
.wk-table-dense td { padding: 6px 12px; }

/* Note */
.wk-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid; border-radius: var(--wk-radius); font-family: var(--wk-sans); font-size: 14px; letter-spacing: var(--wk-sans-track); line-height: 1.45; max-width: 520px; box-sizing: border-box; }
.wk-note i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.wk-note b { font-weight: 500; }
.wk-note-neutral { background: var(--wk-surface-2); border-color: var(--wk-hairline); color: var(--wk-text); }  .wk-note-neutral i { background: var(--wk-gray-700); }
.wk-note-info { background: var(--wk-blue-200); border-color: var(--wk-blue-400); color: var(--wk-blue-900); }  .wk-note-info i { background: var(--wk-blue-700); }
.wk-note-success { background: var(--wk-success-bg); border-color: var(--wk-green-400); color: var(--wk-success-text); }  .wk-note-success i { background: var(--wk-success); }
.wk-note-warning { background: var(--wk-warning-bg); border-color: var(--wk-amber-400); color: var(--wk-warning-text); }  .wk-note-warning i { background: var(--wk-warning); }
.wk-note-error { background: var(--wk-error-bg); border-color: var(--wk-red-400); color: var(--wk-error-text); }  .wk-note-error i { background: var(--wk-error); }

/* Dialog */
.wk-backdrop { display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px; background: var(--wk-backdrop); }
dialog.wk-dialog::backdrop { background: var(--wk-backdrop); }
.wk-dialog { width: 100%; max-width: 440px; padding: 28px; border: 1px solid var(--wk-border); border-radius: var(--wk-radius); background: var(--wk-surface); color: var(--wk-text); font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); box-sizing: border-box; }
.wk-dialog .wk-title { font-size: 18px; margin: 0 0 8px; }
.wk-dialog > p { font-size: 14px; color: var(--wk-text-muted); margin: 0 0 20px; }
.wk-dialog .wk-field { width: 100%; }
.wk-dialog-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.wk-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Toast */
.wk-toast { display: inline-flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: var(--wk-radius); background: var(--wk-text); color: var(--wk-text-inverse); font-family: var(--wk-sans); font-size: 13px; letter-spacing: -0.03em; line-height: 1.3; }
.wk-toast-action { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; border-bottom: 1px solid currentColor; opacity: 0.85; cursor: pointer; }
.wk-toast-fixed { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); }

/* Empty state */
.wk-empty { text-align: center; padding: 48px 24px; border: 1px dashed var(--wk-border); border-radius: var(--wk-radius); font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); color: var(--wk-text); }
.wk-empty svg { display: block; height: 28px; width: auto; margin: 0 auto 16px; color: var(--wk-border); }
.wk-empty .wk-title { font-size: 18px; margin: 0 auto 6px; }
.wk-empty p { font-size: 14px; color: var(--wk-text-muted); max-width: 36ch; margin: 0 auto 18px; }
.wk-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* App shell and navigation (product) */
.wk-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; background: var(--wk-bg); color: var(--wk-text); font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); }
.wk-shell-demo { min-height: 0; border: 1px solid var(--wk-hairline); border-radius: var(--wk-radius); overflow: hidden; }
.wk-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--wk-surface-2); border-right: 1px solid var(--wk-hairline); }
.wk-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font-size: 14px; font-weight: 500; color: var(--wk-text); }
.wk-sidebar-brand svg { display: block; height: 20px; width: auto; }
.wk-nav-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--wk-radius); color: var(--wk-text-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background var(--wk-ease), color var(--wk-ease); }
.wk-nav-item:hover, .wk-nav-item.is-hover { background: var(--wk-hover); color: var(--wk-text); }
.wk-nav-item[aria-current="page"], .wk-nav-item.is-current { background: var(--wk-surface); color: var(--wk-text); box-shadow: inset 0 0 0 1px var(--wk-hairline); }
.wk-nav-group { margin: 14px 0 4px; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--wk-text-muted); }
.wk-main { min-width: 0; padding: 24px 32px 64px; }
@media (max-width: 1100px) { .wk-shell { grid-template-columns: 1fr; } .wk-sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--wk-hairline); } .wk-sidebar-brand { padding: 6px 10px; } .wk-nav-group { display: none; } .wk-main { padding: 20px 20px 48px; } }

/* Page header, breadcrumbs and toolbar (product) */
.wk-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; font-family: var(--wk-sans); font-size: 13px; letter-spacing: var(--wk-sans-track); color: var(--wk-text-muted); }
.wk-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--wk-stone); }
.wk-crumbs a { color: inherit; text-decoration: none; }  .wk-crumbs a:hover { color: var(--wk-text); }
.wk-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--wk-hairline); font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); }
.wk-page-title { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; margin: 0; color: var(--wk-text); }
.wk-page-sub { margin: 4px 0 0; font-size: 14px; color: var(--wk-text-muted); }
.wk-page-actions { display: flex; gap: 10px; flex: none; }
.wk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wk-toolbar .wk-field { width: 260px; }
.wk-toolbar-spacer { flex: 1; }
.wk-section-title { font-family: var(--wk-sans); font-size: 18px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; margin: 32px 0 12px; color: var(--wk-text); }

/* Stat: a figure with its label, change and source (product) */
.wk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.wk-stat { display: grid; gap: 6px; padding: 20px 24px; border-radius: var(--wk-radius); background: var(--wk-surface-2); font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); min-width: 0; color: var(--wk-text); }
.wk-stat-label { font-size: 13px; color: var(--wk-text-muted); }
.wk-stat-value { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wk-stat-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--wk-text-muted); }
.wk-delta { font-variant-numeric: tabular-nums; font-weight: 500; }
.wk-delta-up { color: var(--wk-success-text); }  .wk-delta-down { color: var(--wk-error-text); }  .wk-delta-flat { color: var(--wk-text-muted); }
.wk-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wk-text-muted); }
.wk-source::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-stone); }

/* Description list (product) */
.wk-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 24px; margin: 0; font-family: var(--wk-sans); font-size: 14px; letter-spacing: var(--wk-sans-track); color: var(--wk-text); }
.wk-dl dt { padding: 10px 0; color: var(--wk-text-muted); border-bottom: 1px solid var(--wk-hairline); }
.wk-dl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--wk-hairline); font-variant-numeric: tabular-nums; }
.wk-dl dt:last-of-type, .wk-dl dd:last-of-type { border-bottom: 0; }

/* Skeleton (product) */
.wk-skeleton { display: block; height: 14px; border-radius: var(--wk-radius); background: var(--wk-ash); animation: wk-pulse 1.2s ease-in-out infinite; }
.on-carbon .wk-skeleton { background: var(--wk-gray-300); }
.wk-skeleton-title { height: 20px; width: 40%; }
.wk-skeleton-row { height: 40px; }
.wk-skeleton-stack { display: grid; gap: 10px; }
@keyframes wk-pulse { 50% { opacity: 0.5; } }

/* Sizes: extra small, for dense product screens */
.wk-btn-xs { min-height: 28px; padding: 0 10px; font-size: 12px; }
.wk-input-sm { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.wk-input-xs { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.wk-pill-xs { min-height: 24px; padding: 0 9px; font-size: 12px; }
.wk-badge-sm { min-height: 18px; padding: 0 7px; font-size: 11px; }

/* Density. Put wk-dense on the shell, a panel or the html element and every component inside shrinks one step. */
.wk-dense { font-size: 13px; }
.wk-dense .wk-btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.wk-dense .wk-btn-sm { min-height: 28px; padding: 0 10px; font-size: 12px; }
.wk-dense .wk-btn-xs { min-height: 24px; padding: 0 8px; font-size: 12px; }
.wk-dense .wk-btn-lg { min-height: 40px; padding: 0 18px; font-size: 14px; }
.wk-dense .wk-input { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.wk-dense .wk-textarea { min-height: 72px; }
.wk-dense .wk-field { gap: 4px; font-size: 12px; }
.wk-dense .wk-pill { min-height: 28px; padding: 0 11px; font-size: 12px; }
.wk-dense .wk-badge { min-height: 20px; padding: 0 8px; font-size: 11px; }
.wk-dense .wk-table th { height: 32px; font-size: 13px; }
.wk-dense .wk-table td { padding: 6px 12px; font-size: 13px; }
.wk-dense .wk-table .wk-table-gap { height: 8px; }
.wk-dense .wk-table-root { padding: 2px 6px 6px; }
.wk-dense .wk-nav-item { min-height: 32px; font-size: 13px; }
.wk-dense .wk-sidebar { padding: 12px 8px; }
.wk-dense .wk-main { padding: 20px 24px 48px; }
.wk-dense .wk-page-head { padding-bottom: 14px; margin-bottom: 16px; }
.wk-dense .wk-page-title { font-size: 20px; }
.wk-dense .wk-section-title { font-size: 16px; margin: 24px 0 10px; }
.wk-dense .wk-stat { padding: 14px 16px; gap: 4px; }
.wk-dense .wk-stat-value { font-size: 22px; }
.wk-dense .wk-card { padding: 16px; }
.wk-dense .wk-dl dt, .wk-dense .wk-dl dd { padding: 7px 0; font-size: 13px; }
.wk-dense .wk-toolbar { margin-bottom: 12px; gap: 8px; }
.wk-dense .wk-toolbar .wk-field { width: 220px; }
.wk-dense .wk-control { font-size: 13px; gap: 8px; }
.wk-dense .wk-note { padding: 10px 12px; font-size: 13px; }
.wk-dense .wk-dialog { padding: 20px; }
.wk-dense .wk-tab { padding: 8px 10px; font-size: 13px; }
.wk-dense .wk-menu-item { min-height: 28px; font-size: 13px; }
@media (pointer: coarse) { .wk-dense .wk-btn, .wk-dense .wk-input, .wk-dense .wk-pill, .wk-dense .wk-nav-item { min-height: 40px; } }

/* Tabs */
.wk-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--wk-hairline); font-family: var(--wk-sans); letter-spacing: var(--wk-sans-track); }
.wk-tab { position: relative; margin-bottom: -1px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--wk-text-muted); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: inherit; cursor: pointer; transition: color var(--wk-ease), border-color var(--wk-ease); }
.wk-tab:hover, .wk-tab.is-hover { color: var(--wk-text); }
.wk-tab[aria-selected="true"], .wk-tab.is-selected { color: var(--wk-text); border-bottom-color: var(--wk-text); }
.wk-tab-count { margin-left: 6px; color: var(--wk-text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Menu */
.wk-menu { display: inline-grid; gap: 2px; min-width: 200px; padding: 6px; border: 1px solid var(--wk-border); border-radius: var(--wk-radius); background: var(--wk-surface); font-family: var(--wk-sans); font-size: 14px; letter-spacing: var(--wk-sans-track); color: var(--wk-text); z-index: var(--wk-z-dropdown); }
.wk-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--wk-radius); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.wk-menu-item:hover, .wk-menu-item.is-hover, .wk-menu-item:focus-visible { background: var(--wk-hover); outline: none; }
.wk-menu-item.wk-menu-danger { color: var(--wk-error-text); }
.wk-menu-sep { height: 1px; margin: 4px 0; background: var(--wk-hairline); }
.wk-kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border: 1px solid var(--wk-border); border-bottom-width: 2px; border-radius: 3px; background: var(--wk-surface); font-family: var(--wk-sans); font-size: 11px; line-height: 1.4; letter-spacing: 0; color: var(--wk-text-muted); text-align: center; }

/* Tooltip */
.wk-tooltip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--wk-radius); background: var(--wk-text); color: var(--wk-text-inverse); font-family: var(--wk-sans); font-size: 12px; letter-spacing: -0.02em; line-height: 1.3; white-space: nowrap; z-index: var(--wk-z-dropdown); }
.wk-tooltip .wk-kbd { background: none; border-color: rgba(255,255,255,.35); color: inherit; }

/* Pagination */
.wk-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; font-family: var(--wk-sans); font-size: 13px; letter-spacing: var(--wk-sans-track); color: var(--wk-text-muted); }
.wk-pagination-spacer { flex: 1; }
.wk-pagination .wk-field { width: auto; }
.wk-pagination .wk-input { min-height: 32px; padding: 4px 10px; font-size: 13px; width: auto; }

/* Form layout */
.wk-form { display: grid; gap: 16px; }
.wk-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.wk-form .wk-field { width: 100%; }
.wk-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }