/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Portal-specific global styles (beyond design system) */

/* ──────────────────────────────────────────────────────────────────
 * Dashboard — editorial home
 * The home page sets the tone for every other surface. A confident
 * Fraunces greeting, a tabular signal strip, then the app grid and
 * quick-links dock.
 * ────────────────────────────────────────────────────────────────── */

.portal-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* Dashboard 2-1 split row — Recent activity (wide) + System pulse
   (narrow). Stacks below 980px so each card gets full width. */
.portal-dashboard__split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-gap: var(--s-5);
  gap: var(--s-5);
  align-items: start;
}

@media (max-width: 980px) {
  .portal-dashboard__split { grid-template-columns: 1fr; }
}

/* System pulse card — 2-up KPI grid + small weather row at the foot. */
.portal-pulse__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--s-4) var(--s-5);
  gap: var(--s-4) var(--s-5);
}

.portal-pulse__weather {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.portal-pulse__weather-icon {
  font-size: 32px;
  line-height: 1;
}

/* "Today" signal strip ---------------------------------------------- */
.portal-today {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  overflow: hidden;
  position: relative;
}

/* Signature coral hairline at the top — the same treatment as
   .kwg-card--accent, applied here for the dashboard signal strip. */
.portal-today::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 100%);
}

.portal-today__cell {
  padding: var(--s-5);
  border-right: 1px solid var(--border-subtle);
}
.portal-today__cell:last-child { border-right: none; }

.portal-today .kwg-metric__value {
  text-decoration: none;
  color: var(--fg-1);
  transition: color var(--dur-fast) var(--ease-out);
}
.portal-today .kwg-metric__value:hover { color: var(--brand-1-strong); }

@media (max-width: 720px) {
  .portal-today__cell {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .portal-today__cell:last-child { border-bottom: none; }
}

/* Apps section — primary cards + secondary tile grid ---------------- */
.portal-apps { display: flex; flex-direction: column; }

.portal-apps__primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: var(--s-3);
  gap: var(--s-3);
}

.portal-app-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  text-decoration: none;
  color: var(--fg-1);
  position: relative;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.portal-app-card:hover {
  border-color: var(--brand-1);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}

.portal-app-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-8);
  background: var(--brand-1-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  color: var(--brand-1-strong);
  border: 1px solid color-mix(in oklch, var(--brand-1) 18%, transparent);
}

.portal-app-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1;
}

.portal-app-card__label {
  font: var(--w-600) var(--t-15)/1.25 var(--font-display);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.portal-app-card__desc {
  font: var(--type-body-sm);
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-app-card__chev {
  color: var(--fg-4);
  font-size: 18px;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.portal-app-card:hover .portal-app-card__chev {
  color: var(--brand-2);
  transform: translateX(2px);
}

/* Secondary apps — dense tiles, icon-led. */
.portal-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: var(--s-3);
  gap: var(--s-3);
}

.portal-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  text-decoration: none;
  color: var(--fg-1);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
}

.portal-app-tile:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-1);
  transform: translateY(-2px);
  text-decoration: none;
}

.portal-app-tile__icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  color: var(--fg-2);
  border-radius: var(--r-8);
  border: 1px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.portal-app-tile:hover .portal-app-tile__icon {
  background: var(--brand-1-soft);
  border-color: color-mix(in oklch, var(--brand-1) 28%, transparent);
  color: var(--brand-1-strong);
}

.portal-app-tile__label {
  font: var(--w-500) var(--t-13)/1.2 var(--font-display);
  text-align: center;
  color: var(--fg-2);
}

/* Quick links dock */
.portal-dock {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  padding: var(--s-2) var(--s-3);
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  box-shadow: var(--shadow-xs);
}

.portal-dock__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--s-3);
  border-radius: var(--r-full);
  font: var(--type-label-sm);
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.portal-dock__link:hover {
  background: var(--hover-bg);
  color: var(--fg-1);
  text-decoration: none;
}

.portal-dock__add {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 1px dashed var(--border-base);
  background: none;
  color: var(--fg-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.portal-dock__add:hover {
  border-color: var(--brand-1);
  color: var(--brand-1-strong);
}

/* Weather card */
.portal-weather {
  display: flex;
  flex-direction: column;
  gap: var(--kwg-space-2);
}

.portal-weather__main {
  display: flex;
  align-items: center;
  gap: var(--kwg-space-3);
}

.portal-weather__temp {
  font: var(--w-500) 36px/1 var(--font-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.portal-weather__icon { font-size: 36px; }

.portal-weather__desc {
  font: var(--type-body-sm);
  color: var(--fg-2);
}

.portal-weather__location {
  font: var(--type-label-xs);
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Login page — split screen per design system. Aside owns the brand;
   main owns the form. Both halves stack on narrow viewports. */
.portal-login {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--surface-base);
  color: var(--fg-1);
}

.portal-login__aside {
  background:
    linear-gradient(180deg,
      var(--surface-1) 0%,
      color-mix(in oklch, var(--brand-1) 5%, var(--surface-1)) 100%);
  padding: var(--s-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border-subtle);
}

.portal-login__aside::before {
  /* Editorial radial wash — subtle duotone glow that anchors the
     marketing copy without competing with it. */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-gradient-soft);
  pointer-events: none;
}

/* Architectural rule running down the inside edge of the aside.
   Pairs with the coral hairlines in the chrome. */
.portal-login__aside::after {
  content: '';
  position: absolute;
  top: var(--s-12);
  bottom: var(--s-12);
  right: -1px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--brand-2) 50%, transparent);
  opacity: 0.25;
  pointer-events: none;
}

.portal-login__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  position: relative;
}

.portal-login__mark {
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  background: var(--brand-gradient);
  box-shadow: var(--shadow-sm), inset 0 -1px 0 oklch(0 0 0 / 0.18);
}

/* Vendor side adopts an inverted gradient (coral first) so the mark is
   instantly distinguishable from the staff portal even at a glance. */
.portal-login__mark--vendor {
  background: linear-gradient(135deg, var(--brand-2), var(--brand-1));
}

.portal-login--vendor .portal-login__aside::after {
  background: linear-gradient(180deg, transparent, var(--brand-1) 50%, transparent);
}

.portal-login__name {
  font: var(--type-h4);
  letter-spacing: var(--ls-snug);
}

.portal-login__copy {
  position: relative;
  max-width: 38ch;
}

.portal-login__copy h1 {
  font-family: var(--font-editorial);
  font-weight: var(--w-500);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-5);
  color: var(--fg-1);
}

.portal-login__copy h1 em {
  font-style: italic;
  color: var(--brand-1-strong);
  font-weight: var(--w-500);
}

.portal-login__copy p {
  font: var(--type-body-lg);
  color: var(--fg-2);
  margin: 0;
}

.portal-login__foot {
  position: relative;
  font: var(--type-body-sm);
  color: var(--fg-3);
  display: flex;
  gap: var(--s-4);
}

.portal-login__foot a {
  color: var(--fg-3);
  text-decoration: none;
}

.portal-login__foot a:hover { color: var(--fg-2); text-decoration: underline; }

.portal-login__main {
  padding: var(--s-10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-login__form {
  width: 100%;
  max-width: 380px;
}

.portal-login__title {
  font-family: var(--font-editorial);
  font-weight: var(--w-500);
  font-size: clamp(2rem, 3vw, 2.5rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  margin: 0 0 var(--s-2);
  color: var(--fg-1);
}

.portal-login__subtitle {
  font: var(--type-page-lede);
  color: var(--fg-2);
  margin: 0 0 var(--s-8);
}

.portal-login__divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-5);
  color: var(--fg-3);
  font: var(--type-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.portal-login__divider::before,
.portal-login__divider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--border-subtle);
}

.portal-login__sso-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--s-2);
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.portal-login__sso-row > * { width: 100%; }

.portal-login__help {
  font: var(--type-body-sm);
  color: var(--fg-3);
  margin-top: var(--s-6);
  text-align: center;
}

.portal-login__help a {
  color: var(--brand-1-strong);
  text-decoration: none;
}

.portal-login__help a:hover { text-decoration: underline; }

@media (max-width: 880px) {
  .portal-login { grid-template-columns: 1fr; }
  .portal-login__aside { padding: var(--s-5) var(--s-5) var(--s-8); }
  .portal-login__copy h1 { font-size: 2rem; }
  .portal-login__main { padding: var(--s-5); }
}

/* ──────────────────────────────────────────────────────────────────
 * Login / accept-invitation form
 * Mockup-faithful field, label, checkbox, and SSO button styles. The
 * elements are bare HTML — not the design-system Input — so the form
 * can sit inside the editorial column without inheriting unrelated
 * field chrome. The same classes are reused by the accept-invitation
 * page and any future auth-style flows.
 * ────────────────────────────────────────────────────────────────── */
.portal-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.portal-login-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.portal-login-form__field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.portal-login-form__label {
  font: var(--type-label-sm);
  color: var(--fg-2);
}

.portal-login-form__link {
  font: var(--type-body-sm);
  color: var(--brand-1-strong);
  text-decoration: none;
}

.portal-login-form__link:hover { text-decoration: underline; }

.portal-login-form__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--s-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border-base);
  border-radius: var(--r-8);
  color: var(--fg-1);
  font: var(--type-body-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.portal-login-form__input::placeholder { color: var(--fg-3); }

.portal-login-form__input:focus {
  outline: none;
  border-color: var(--brand-1);
  box-shadow: var(--shadow-focus);
}

.portal-login-form__check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-2);
  font: var(--type-body-md);
  color: var(--fg-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.portal-login-form__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-1);
}

.portal-login-form__sso-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 44px;
  width: 100%;
  padding: 0 var(--s-4);
  border-radius: var(--r-8);
  border: 1px solid var(--border-base);
  background: var(--surface-elevated);
  color: var(--fg-1);
  font: var(--type-label-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.portal-login-form__sso-btn:hover {
  background: var(--hover-bg);
  border-color: var(--brand-1);
  text-decoration: none;
}

.portal-login-form__sso-btn svg { width: 16px; height: 16px; }

.portal-login-form__step-title {
  font: var(--type-h3);
  margin: 0 0 var(--s-1);
  color: var(--fg-1);
}

.portal-login-form__step-hint {
  font: var(--type-body-md);
  color: var(--fg-2);
  margin: 0;
}

.portal-login-form__back {
  background: none;
  border: none;
  color: var(--brand-1-strong);
  cursor: pointer;
  font: var(--type-body-sm);
  padding: 0;
  align-self: flex-start;
  margin-top: var(--s-2);
}

.portal-login-form__back:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────
 * Accept-invitation — centred panel, same editorial typography as
 * login but in a single column. Used the first time a user follows
 * an invitation link.
 * ────────────────────────────────────────────────────────────────── */
.portal-accept {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  background: var(--surface-base);
  position: relative;
  overflow: hidden;
}

.portal-accept::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-gradient-soft);
  pointer-events: none;
}

.portal-accept__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  padding: var(--s-8);
  box-shadow: var(--shadow-lg);
}

.portal-accept__panel::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: var(--r-12) var(--r-12) 0 0;
  background: var(--brand-gradient);
}

.portal-accept__mark {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--r-8);
  background: var(--brand-gradient);
  box-shadow: var(--shadow-sm), inset 0 -1px 0 oklch(0 0 0 / 0.18);
  margin-bottom: var(--s-5);
}

.portal-accept__title {
  font-family: var(--font-editorial);
  font-weight: var(--w-500);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  margin: 0 0 var(--s-2);
  color: var(--fg-1);
}

.portal-accept__lede {
  font: var(--type-page-lede);
  color: var(--fg-2);
  margin: 0 0 var(--s-6);
}

/* ──────────────────────────────────────────────────────────────────
 * Helpdesk dashboard — stat strip
 * Five tabular metric cards across the top. Each carries a tone
 * (--stat-tone) that drives a top hairline + active outline.
 * ────────────────────────────────────────────────────────────────── */
.helpdesk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--s-3);
  gap: var(--s-3);
}

.helpdesk-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  position: relative;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  font-family: inherit;
  color: var(--fg-1);
}

.helpdesk-stat::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--r-12) var(--r-12) 0 0;
  background: var(--stat-tone, var(--brand-1));
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.helpdesk-stat:hover { border-color: var(--border-base); transform: translateY(-1px); }
.helpdesk-stat:hover::before { opacity: 1; }

.helpdesk-stat .kwg-metric__value { color: var(--stat-tone, var(--fg-1)); }

.helpdesk-stat--active {
  border-color: var(--stat-tone, var(--brand-1));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--stat-tone, var(--brand-1)) 18%, transparent);
}
.helpdesk-stat--active::before { opacity: 1; height: 3px; }

.helpdesk-stat__hint {
  font: var(--type-body-sm);
  color: var(--fg-3);
  margin-top: 2px;
}

/* Softphone placeholder */
.portal-softphone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  border: none;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  position: relative;
}

.portal-softphone-btn:hover {
  background: var(--hover-bg);
  color: var(--c-success);
}

.portal-softphone-btn--active {
  background: var(--c-success-soft);
  color: var(--c-success);
}

@media (max-width: 768px) {
  .portal-hero { flex-direction: column; }
  .portal-hero__right { width: 100%; }
  .portal-app-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------
 * Public knowledge base — editorial layout per design system.
 * Used when /kb is served unauthenticated (kb.kwgroup.uk host or
 * the public-host fallback). Authenticated /kb falls back to
 * PortalShell so it inherits the in-app chrome instead.
 * ------------------------------------------------------------------ */
.kb-public {
  min-height: 100dvh;
  background: var(--surface-base);
  color: var(--fg-1);
  display: flex;
  flex-direction: column;
}

.kb-public__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-8);
  border-bottom: 1px solid var(--border-subtle);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: color-mix(in oklch, var(--surface-base) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 10;
}

.kb-public__brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--fg-1);
}

.kb-public__mark {
  width: 28px;
  height: 28px;
  border-radius: var(--r-8);
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}

.kb-public__name {
  font: var(--type-h5);
  letter-spacing: var(--ls-snug);
}

.kb-public__search {
  position: relative;
  width: 280px;
  max-width: 40vw;
}

.kb-public__search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
}

.kb-public__search input {
  width: 100%;
  height: 36px;
  padding: 0 var(--s-3) 0 36px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-base);
  border-radius: var(--r-8);
  color: var(--fg-1);
  font: var(--type-body-md);
  outline: none;
}

.kb-public__search input::placeholder { color: var(--fg-3); }
.kb-public__search input:focus { border-color: var(--brand-1); box-shadow: var(--shadow-focus); }

.kb-public__main {
  flex: 1 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-8);
}

.kb-public__foot {
  padding: var(--s-10) var(--s-8);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  color: var(--fg-3);
  font: var(--type-body-sm);
}

.kb-public__foot a {
  color: var(--fg-3);
  text-decoration: none;
}

.kb-public__foot a:hover { color: var(--fg-2); text-decoration: underline; }

/* Editorial type for KB long-form. The hero on the listing page and the
   article body adopt Fraunces; everything else stays in General Sans. */
.kb-hero {
  padding: var(--s-16) 0 var(--s-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.kb-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, color-mix(in oklch, var(--brand-1) 8%, transparent) 0%, transparent 50%);
  pointer-events: none;
}

.kb-hero h1 {
  font-family: var(--font-editorial);
  font-size: 3.25rem;
  font-weight: var(--w-500);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-3);
  position: relative;
}

.kb-hero p {
  font: var(--type-body-lg);
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0 auto var(--s-6);
  position: relative;
}

.kb-article {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-12) 0;
}

.kb-article h1 {
  font-family: var(--font-editorial);
  font-size: 2.5rem;
  font-weight: var(--w-500);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  margin: 0 0 var(--s-4);
}

.kb-article__lede {
  font: var(--type-body-lg);
  color: var(--fg-2);
  margin: 0 0 var(--s-6);
}

.kb-article__body {
  font: var(--type-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}

.kb-article__body h2 {
  font: var(--type-h2);
  letter-spacing: var(--ls-tight);
  margin: var(--s-10) 0 var(--s-4);
}

.kb-article__body h3 {
  font: var(--type-h3);
  margin: var(--s-6) 0 var(--s-2);
}

.kb-article__body p { margin: 0 0 var(--s-4); }
.kb-article__body ol,
.kb-article__body ul { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.kb-article__body li { margin-bottom: var(--s-2); }

.kb-article__body code {
  font: var(--type-mono-md);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  padding: 1px 6px;
}

.kb-article__body pre {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-8);
  padding: var(--s-4);
  overflow: auto;
}

.kb-article__body pre code { background: transparent; border: 0; padding: 0; }

.kb-article__body blockquote {
  border-left: 3px solid var(--brand-1);
  padding: var(--s-2) var(--s-4);
  margin: var(--s-5) 0;
  color: var(--fg-2);
  font-style: italic;
}

/* KB category card hover — borrowed from the mockup. Lift + brand border. */
.kb-cat-card:hover { border-color: var(--brand-1); transform: translateY(-2px); }

@media (max-width: 768px) {
  .kb-public__nav { padding: var(--s-3) var(--s-4); }
  .kb-public__main { padding: var(--s-4); }
  .kb-hero { padding: var(--s-10) 0 var(--s-6); }
  .kb-hero h1 { font-size: 2.25rem; }
  .kb-article h1 { font-size: 1.75rem; }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../packages/design-system/src/styles/tokens.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* KW Platform — design tokens
 *
 * Canonical token file. Both raw scales and semantic aliases live here.
 * Light + dark are first-class. The brand duotone (--brand-1, --brand-2)
 * is overridable at runtime — the in-product Branding panel sets new
 * values on :root or a wrapper element, and the rest of the system
 * follows.
 *
 * Legacy --kwg-* tokens are aliased onto the new system at the bottom
 * of each mode block so existing components written against the old
 * names keep working.
 */

@import url("https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap");

/* ============================================================
 * MODE-INDEPENDENT FOUNDATIONS
 * (typography, spacing, radii, motion, brand defaults)
 * ============================================================ */
:root {
  /* Type families ----------------------------------------------------- */
  --font-display: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-editorial: "Fraunces", Georgia, "Times New Roman", serif;

  /* Type weights ------------------------------------------------------ */
  --w-200: 200;
  --w-300: 300;
  --w-400: 400;
  --w-500: 500;
  --w-600: 600;
  --w-700: 700;

  /* Type scale (base 16, ratio ~1.2) --------------------------------- */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-36: 2.25rem;
  --t-48: 3rem;
  --t-60: 3.75rem;
  --t-72: 4.5rem;

  /* Line heights ----------------------------------------------------- */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  /* Letter spacing --------------------------------------------------- */
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-base: 0;
  --ls-wide: 0.02em;
  --ls-caps: 0.06em;

  /* Spacing scale (4px base) ---------------------------------------- */
  --s-0: 0;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Radii ----------------------------------------------------------- */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-full: 9999px;

  /* Border widths --------------------------------------------------- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* Brand duotone — defaults (overridable at runtime) -------------- *
   * Both share lightness ~0.60 and chroma ~0.13. Only hue varies
   * (230 petrol vs 30 coral). Accents customised via the Branding
   * panel must preserve the lightness/chroma envelope to stay on-system.
   * --------------------------------------------------------------- */
  --brand-1: oklch(0.60 0.13 230);
  --brand-1-strong: oklch(0.50 0.15 230);
  --brand-1-soft: oklch(0.94 0.04 230);
  --brand-1-on: oklch(0.99 0.005 230);

  --brand-2: oklch(0.66 0.13 30);
  --brand-2-strong: oklch(0.56 0.15 30);
  --brand-2-soft: oklch(0.95 0.04 30);
  --brand-2-on: oklch(0.99 0.005 30);

  /* Composed brand surfaces — used for editorial gradients and
     duotone "moments" (login, hero, marketing). Centralised so
     marketing surfaces stay coherent if the brand changes. */
  --brand-gradient: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --brand-gradient-soft:
    radial-gradient(circle at 12% 10%, color-mix(in oklch, var(--brand-1) 14%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 88% 80%, color-mix(in oklch, var(--brand-2) 12%, transparent) 0%, transparent 46%);

  /* Functional roles (mode-aware via OKLCH lightness) -------------- */
  --c-success: oklch(0.62 0.13 150);
  --c-success-soft: oklch(0.94 0.04 150);
  --c-warning: oklch(0.72 0.14 75);
  --c-warning-soft: oklch(0.95 0.05 75);
  --c-danger: oklch(0.58 0.18 25);
  --c-danger-soft: oklch(0.94 0.04 25);
  --c-info: oklch(0.62 0.10 240);
  --c-info-soft: oklch(0.94 0.03 240);
}

/* ============================================================
 * LIGHT MODE — warm-neutral surfaces (hue 80, chroma <= 0.012)
 * ============================================================ */
:root,
[data-theme="light"] {
  --grey-0: oklch(0.99 0.003 80);
  --grey-1: oklch(0.97 0.005 80);
  --grey-2: oklch(0.94 0.006 80);
  --grey-3: oklch(0.90 0.008 80);
  --grey-4: oklch(0.82 0.010 80);
  --grey-5: oklch(0.68 0.010 80);
  --grey-6: oklch(0.50 0.012 80);
  --grey-7: oklch(0.36 0.012 80);
  --grey-8: oklch(0.24 0.010 80);
  --grey-9: oklch(0.16 0.008 80);
  --grey-10: oklch(0.10 0.006 80);

  /* Surfaces ------------------------------------------------------- */
  --surface-base: var(--grey-0);
  --surface-1: var(--grey-1);
  --surface-2: var(--grey-2);
  --surface-3: var(--grey-3);
  --surface-elevated: var(--grey-0);
  --surface-overlay: oklch(0.20 0.01 80 / 0.55);
  --surface-inverse: var(--grey-9);
  --surface-brand-1-tint: var(--brand-1-soft);
  --surface-brand-2-tint: var(--brand-2-soft);

  /* Foreground ----------------------------------------------------- */
  --fg-1: var(--grey-9);
  --fg-2: var(--grey-7);
  --fg-3: var(--grey-6);
  --fg-4: var(--grey-5);
  --fg-on-inverse: var(--grey-1);
  --fg-link: var(--brand-1-strong);

  /* Borders -------------------------------------------------------- */
  --border-subtle: var(--grey-2);
  --border-base: var(--grey-3);
  --border-strong: var(--grey-4);
  --border-focus: var(--brand-1);

  /* Component states ---------------------------------------------- */
  --hover-bg: var(--grey-2);
  --press-bg: var(--grey-3);
  --selected-bg: var(--brand-1-soft);
  --selected-fg: var(--brand-1-strong);
  --disabled-bg: var(--grey-1);
  --disabled-fg: var(--grey-5);

  /* Shadows (warm-tinted, soft) ----------------------------------- */
  --shadow-xs: 0 1px 1px oklch(0.20 0.01 80 / 0.04);
  --shadow-sm: 0 1px 2px oklch(0.20 0.01 80 / 0.06), 0 1px 4px oklch(0.20 0.01 80 / 0.04);
  --shadow-md: 0 2px 4px oklch(0.20 0.01 80 / 0.06), 0 4px 12px oklch(0.20 0.01 80 / 0.06);
  --shadow-lg: 0 4px 8px oklch(0.20 0.01 80 / 0.08), 0 12px 32px oklch(0.20 0.01 80 / 0.10);
  --shadow-xl: 0 12px 24px oklch(0.20 0.01 80 / 0.10), 0 32px 80px oklch(0.20 0.01 80 / 0.16);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--brand-1) 30%, transparent);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.6), inset 0 -1px 0 oklch(0.20 0.01 80 / 0.04);

  color-scheme: light;

  /* ============================================================
   * LEGACY --kwg-* ALIASES
   * Keep old code working by mapping every legacy token to the
   * canonical equivalent. Do not introduce new --kwg-* tokens —
   * write new code against the canonical names above.
   * ============================================================ */
  --kwg-primary: var(--brand-1);
  --kwg-primary-light: var(--brand-1);
  --kwg-primary-dark: var(--brand-1-strong);
  --kwg-accent: var(--brand-2);

  --kwg-success: var(--c-success);
  --kwg-success-bg: var(--c-success-soft);
  --kwg-warning: var(--c-warning);
  --kwg-warning-bg: var(--c-warning-soft);
  --kwg-danger: var(--c-danger);
  --kwg-danger-bg: var(--c-danger-soft);
  --kwg-info: var(--c-info);
  --kwg-info-bg: var(--c-info-soft);

  --kwg-bg: var(--surface-base);
  --kwg-surface: var(--surface-elevated);
  --kwg-surface-raised: var(--surface-elevated);
  --kwg-surface-overlay: oklch(0.99 0.003 80 / 0.95);
  --kwg-border: var(--border-subtle);
  --kwg-border-strong: var(--border-base);
  --kwg-shadow-sm: var(--shadow-sm);
  --kwg-shadow: var(--shadow-md);
  --kwg-shadow-lg: var(--shadow-lg);

  /* Sidebar — was dark slate; new design uses a light side rail */
  --kwg-sidebar-bg: var(--surface-1);
  --kwg-sidebar-text: var(--fg-2);
  --kwg-sidebar-text-active: var(--selected-fg);
  --kwg-sidebar-hover: var(--hover-bg);
  --kwg-sidebar-active: var(--selected-bg);
  --kwg-sidebar-width: 240px;
  --kwg-sidebar-width-collapsed: 56px;

  /* TopNav */
  --kwg-topnav-bg: var(--surface-base);
  --kwg-topnav-border: var(--border-subtle);
  --kwg-topnav-height: 56px;
  --kwg-topnav-brand-bg: var(--surface-1);
  --kwg-topnav-brand-text: var(--fg-1);

  /* Text */
  --kwg-text: var(--fg-1);
  --kwg-text-secondary: var(--fg-2);
  --kwg-text-tertiary: var(--fg-3);
  --kwg-text-inverse: var(--fg-on-inverse);
  --kwg-text-on-primary: var(--brand-1-on);

  /* Typography */
  --kwg-font-family: var(--font-body);
  --kwg-font-mono: var(--font-mono);
  --kwg-text-xs: 11px;
  --kwg-text-sm: 13px;
  --kwg-text-base: 14px;
  --kwg-text-md: 15px;
  --kwg-text-lg: 16px;
  --kwg-text-xl: 18px;
  --kwg-text-2xl: 20px;
  --kwg-text-3xl: 24px;
  --kwg-text-4xl: 30px;

  /* Spacing */
  --kwg-space-1: var(--s-1);
  --kwg-space-2: var(--s-2);
  --kwg-space-3: var(--s-3);
  --kwg-space-4: var(--s-4);
  --kwg-space-5: var(--s-5);
  --kwg-space-6: var(--s-6);
  --kwg-space-8: var(--s-8);
  --kwg-space-10: var(--s-10);
  --kwg-space-12: var(--s-12);
  --kwg-space-16: var(--s-16);

  /* Radius */
  --kwg-radius-sm: var(--r-4);
  --kwg-radius: var(--r-8);
  --kwg-radius-lg: var(--r-12);
  --kwg-radius-xl: var(--r-16);
  --kwg-radius-full: var(--r-full);

  /* Transition */
  --kwg-transition: var(--dur-fast) var(--ease-out);
  --kwg-transition-slow: var(--dur-base) var(--ease-out);

  /* Z-index layers */
  --kwg-z-sidebar: 100;
  --kwg-z-topnav: 200;
  --kwg-z-dropdown: 300;
  --kwg-z-modal: 400;
  --kwg-z-toast: 500;
}

/* ============================================================
 * DARK MODE — cool-neutral surfaces (hue 250)
 * ============================================================ */
[data-theme="dark"] {
  --grey-0: oklch(0.10 0.008 250);
  --grey-1: oklch(0.13 0.010 250);
  --grey-2: oklch(0.16 0.012 250);
  --grey-3: oklch(0.20 0.013 250);
  --grey-4: oklch(0.26 0.014 250);
  --grey-5: oklch(0.36 0.014 250);
  --grey-6: oklch(0.50 0.013 250);
  --grey-7: oklch(0.66 0.011 250);
  --grey-8: oklch(0.80 0.009 250);
  --grey-9: oklch(0.92 0.007 250);
  --grey-10: oklch(0.98 0.005 250);

  --surface-base: var(--grey-0);
  --surface-1: var(--grey-1);
  --surface-2: var(--grey-2);
  --surface-3: var(--grey-3);
  --surface-elevated: var(--grey-2);
  --surface-overlay: oklch(0.06 0.01 250 / 0.65);
  --surface-inverse: var(--grey-9);
  --surface-brand-1-tint: oklch(0.30 0.07 230);
  --surface-brand-2-tint: oklch(0.30 0.07 30);

  --fg-1: var(--grey-10);
  --fg-2: var(--grey-8);
  --fg-3: var(--grey-7);
  --fg-4: var(--grey-6);
  --fg-on-inverse: var(--grey-1);
  --fg-link: oklch(0.78 0.10 230);

  --border-subtle: var(--grey-2);
  --border-base: var(--grey-3);
  --border-strong: var(--grey-4);
  --border-focus: var(--brand-1);

  --hover-bg: var(--grey-2);
  --press-bg: var(--grey-3);
  --selected-bg: oklch(0.30 0.07 230);
  --selected-fg: oklch(0.85 0.08 230);
  --disabled-bg: var(--grey-1);
  --disabled-fg: var(--grey-5);

  --shadow-xs: 0 1px 1px oklch(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35), 0 1px 4px oklch(0 0 0 / 0.25);
  --shadow-md: 0 2px 4px oklch(0 0 0 / 0.35), 0 4px 12px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.40), 0 12px 32px oklch(0 0 0 / 0.45);
  --shadow-xl: 0 12px 24px oklch(0 0 0 / 0.45), 0 32px 80px oklch(0 0 0 / 0.55);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--brand-1) 40%, transparent);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.04), inset 0 -1px 0 oklch(0 0 0 / 0.30);

  color-scheme: dark;

  /* Legacy aliases — dark variant ------------------------------- */
  --kwg-bg: var(--surface-base);
  --kwg-surface: var(--surface-elevated);
  --kwg-surface-raised: var(--surface-3);
  --kwg-surface-overlay: oklch(0.16 0.012 250 / 0.95);
  --kwg-border: var(--border-subtle);
  --kwg-border-strong: var(--border-base);
  --kwg-shadow-sm: var(--shadow-sm);
  --kwg-shadow: var(--shadow-md);
  --kwg-shadow-lg: var(--shadow-lg);
  --kwg-topnav-bg: var(--surface-base);
  --kwg-topnav-border: var(--border-subtle);
  --kwg-topnav-brand-bg: var(--surface-1);
  --kwg-topnav-brand-text: var(--fg-1);
  --kwg-sidebar-bg: var(--surface-1);
  --kwg-sidebar-text: var(--fg-2);
  --kwg-sidebar-text-active: var(--selected-fg);
  --kwg-sidebar-hover: var(--hover-bg);
  --kwg-sidebar-active: var(--selected-bg);
  --kwg-text: var(--fg-1);
  --kwg-text-secondary: var(--fg-2);
  --kwg-text-tertiary: var(--fg-3);
  --kwg-success-bg: var(--c-success-soft);
  --kwg-warning-bg: var(--c-warning-soft);
  --kwg-danger-bg: var(--c-danger-soft);
  --kwg-info-bg: var(--c-info-soft);
}

/* Auto dark when user has no explicit preference ------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --grey-0: oklch(0.10 0.008 250);
    --grey-1: oklch(0.13 0.010 250);
    --grey-2: oklch(0.16 0.012 250);
    --grey-3: oklch(0.20 0.013 250);
    --grey-4: oklch(0.26 0.014 250);
    --grey-5: oklch(0.36 0.014 250);
    --grey-6: oklch(0.50 0.013 250);
    --grey-7: oklch(0.66 0.011 250);
    --grey-8: oklch(0.80 0.009 250);
    --grey-9: oklch(0.92 0.007 250);
    --grey-10: oklch(0.98 0.005 250);

    --surface-base: var(--grey-0);
    --surface-1: var(--grey-1);
    --surface-2: var(--grey-2);
    --surface-3: var(--grey-3);
    --surface-elevated: var(--grey-2);
    --surface-overlay: oklch(0.06 0.01 250 / 0.65);
    --surface-brand-1-tint: oklch(0.30 0.07 230);
    --surface-brand-2-tint: oklch(0.30 0.07 30);

    --fg-1: var(--grey-10);
    --fg-2: var(--grey-8);
    --fg-3: var(--grey-7);
    --fg-4: var(--grey-6);
    --fg-link: oklch(0.78 0.10 230);

    --border-subtle: var(--grey-2);
    --border-base: var(--grey-3);
    --border-strong: var(--grey-4);

    --hover-bg: var(--grey-2);
    --press-bg: var(--grey-3);
    --selected-bg: oklch(0.30 0.07 230);
    --selected-fg: oklch(0.85 0.08 230);

    --shadow-xs: 0 1px 1px oklch(0 0 0 / 0.30);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35), 0 1px 4px oklch(0 0 0 / 0.25);
    --shadow-md: 0 2px 4px oklch(0 0 0 / 0.35), 0 4px 12px oklch(0 0 0 / 0.30);
    --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.40), 0 12px 32px oklch(0 0 0 / 0.45);
    --shadow-xl: 0 12px 24px oklch(0 0 0 / 0.45), 0 32px 80px oklch(0 0 0 / 0.55);
    --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.04), inset 0 -1px 0 oklch(0 0 0 / 0.30);

    color-scheme: dark;

    --kwg-bg: var(--surface-base);
    --kwg-surface: var(--surface-elevated);
    --kwg-surface-raised: var(--surface-3);
    --kwg-surface-overlay: oklch(0.16 0.012 250 / 0.95);
    --kwg-border: var(--border-subtle);
    --kwg-border-strong: var(--border-base);
    --kwg-topnav-bg: var(--surface-base);
    --kwg-topnav-border: var(--border-subtle);
    --kwg-topnav-brand-bg: var(--surface-1);
    --kwg-topnav-brand-text: var(--fg-1);
    --kwg-sidebar-bg: var(--surface-1);
    --kwg-sidebar-text: var(--fg-2);
    --kwg-sidebar-text-active: var(--selected-fg);
    --kwg-sidebar-hover: var(--hover-bg);
    --kwg-sidebar-active: var(--selected-bg);
    --kwg-text: var(--fg-1);
    --kwg-text-secondary: var(--fg-2);
    --kwg-text-tertiary: var(--fg-3);
    --kwg-success-bg: var(--c-success-soft);
    --kwg-warning-bg: var(--c-warning-soft);
    --kwg-danger-bg: var(--c-danger-soft);
    --kwg-info-bg: var(--c-info-soft);
  }
}

/* ============================================================
 * SEMANTIC TYPE TOKENS
 * Composed shorthand: weight size/line-height family.
 * Usable as `font: var(--type-h1);`.
 * ============================================================ */
:root {
  --type-display-xl: var(--w-500) var(--t-72)/var(--lh-tight) var(--font-display);
  --type-display-lg: var(--w-500) var(--t-60)/var(--lh-tight) var(--font-display);
  --type-display-md: var(--w-500) var(--t-48)/var(--lh-tight) var(--font-display);

  --type-h1: var(--w-600) var(--t-30)/var(--lh-snug) var(--font-display);
  --type-h2: var(--w-600) var(--t-24)/var(--lh-snug) var(--font-display);
  --type-h3: var(--w-600) var(--t-20)/var(--lh-snug) var(--font-display);
  --type-h4: var(--w-600) var(--t-18)/var(--lh-snug) var(--font-display);
  --type-h5: var(--w-600) var(--t-16)/var(--lh-snug) var(--font-display);

  --type-body-lg: var(--w-400) var(--t-16)/var(--lh-base) var(--font-body);
  --type-body-md: var(--w-400) var(--t-14)/var(--lh-base) var(--font-body);
  --type-body-sm: var(--w-400) var(--t-13)/var(--lh-base) var(--font-body);

  --type-label-md: var(--w-500) var(--t-14)/var(--lh-snug) var(--font-display);
  --type-label-sm: var(--w-500) var(--t-13)/var(--lh-snug) var(--font-display);
  --type-label-xs: var(--w-600) var(--t-12)/var(--lh-snug) var(--font-display);

  --type-caps: var(--w-600) var(--t-12)/var(--lh-snug) var(--font-display);

  --type-mono-md: var(--w-400) var(--t-13)/var(--lh-base) var(--font-mono);
  --type-mono-sm: var(--w-400) var(--t-12)/var(--lh-base) var(--font-mono);

  --type-editorial-display: var(--w-500) var(--t-60)/var(--lh-tight) var(--font-editorial);
  --type-editorial-h: var(--w-500) var(--t-36)/var(--lh-tight) var(--font-editorial);
  --type-editorial-quote: italic var(--w-400) var(--t-24)/var(--lh-snug) var(--font-editorial);

  /* Page-level hierarchy — the editorial display sits at the top of
     every primary page. Eyebrow above pairs with it. Together they
     give the platform a consistent, considered "front of house"
     feel that contrast with the General Sans-driven UI chrome. */
  --type-page-title: var(--w-500) clamp(2rem, 4vw, 2.75rem)/1.05 var(--font-editorial);
  --type-page-eyebrow: var(--w-600) var(--t-12)/1.2 var(--font-display);
  --type-page-lede: var(--w-400) var(--t-18)/var(--lh-base) var(--font-body);

  /* Numeric / metric typography — tabular figures for dashboards,
     status counters, license dates, etc. */
  --type-metric-xl: var(--w-500) var(--t-48)/1 var(--font-display);
  --type-metric-lg: var(--w-500) var(--t-30)/1 var(--font-display);
  --type-metric-md: var(--w-500) var(--t-20)/1 var(--font-display);
}

/* ============================================================
 * PRINT
 * ============================================================ */
@media print {
  :root {
    --surface-base: white;
    --fg-1: black;
  }
  body { font: var(--w-400) 11pt/1.45 var(--font-body); }

  /* Hide everything that's not part of the printable report. The
     helpdesk reports page wraps its hidden controls in `.kwg-no-print`
     (date pickers, download button, custom-report builder when not
     in use). Anything else like the top nav, sidebar, and floating
     widgets gets hidden too. */
  .kwg-no-print,
  .kwg-topnav,
  .kwg-sidebar,
  .kwg-shell__sidebar,
  .kwg-shell__topnav,
  [data-print="hide"] {
    display: none !important;
  }

  /* Pop the print root out of the shell so it fills the page. */
  .kwg-shell,
  .kwg-shell__main,
  .kwg-shell__content,
  main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
  }

  /* Cards lose their shadow + heavy backgrounds for print legibility. */
  .kwg-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    background: white !important;
  }

  .kwg-print-section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 16pt;
  }

  /* Bar/percent fills should ink-print, not rely on background-color
     that some browsers suppress by default. */
  .kwg-table th, .kwg-table td {
    border-color: #ddd !important;
  }
  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* Show-only-in-print helper, complementary to .kwg-no-print. */
@media not print {
  .kwg-print-only { display: none !important; }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../packages/design-system/src/styles/base.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* KW Group Platform — Base / Reset styles */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font: var(--type-body-md);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
  background: var(--surface-base);
}

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

img, svg { display: block; max-width: 100%; }

input, button, textarea, select {
  font: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: var(--w-600);
  color: var(--fg-1);
}

::selection {
  background: var(--brand-1-soft);
  color: var(--brand-1-strong);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-4);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* PWA / mobile */
@media (max-width: 768px) {
  html { font-size: 14px; }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../packages/design-system/src/styles/components.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* KW Group Platform — Component CSS classes */
/* Referenced by TSX components via className strings */

/* ── Shell Layout ──────────────────────────────────────────────────────── */
/* Topnav spans the full width across the top; sidebar sits below it on the
   left. This puts every page inside the same horizontal frame and frees the
   top-left corner for the menu toggle alone. */
.kwg-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background: var(--kwg-bg);
}

.kwg-shell__body {
  display: flex;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.kwg-shell__main {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--s-8) var(--s-10);
  background: var(--surface-base);
}

/* Wider viewports get the full editorial gutter; narrower ones tighten
   up to keep content density readable. */
@media (max-width: 1280px) {
  .kwg-shell__main { padding: var(--s-6) var(--s-8); }
}
@media (max-width: 768px) {
  .kwg-shell__main { padding: var(--s-4); }
}

/* ── TopNav ────────────────────────────────────────────────────────────── */
.kwg-topnav {
  display: flex;
  align-items: center;
  height: var(--kwg-topnav-height);
  background: var(--kwg-topnav-bg);
  border-bottom: 1px solid var(--kwg-topnav-border);
  padding: 0 var(--kwg-space-4);
  gap: var(--kwg-space-3);
  flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--kwg-z-topnav);
}

.kwg-topnav__left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.kwg-topnav__spacer { flex: 1 1; }

.kwg-topnav__search {
  flex: 0 1 400px;
  position: relative;
  min-width: 200px;
}

@media (max-width: 900px) {
  .kwg-topnav__search { display: none; }
}

.kwg-topnav__actions {
  display: flex;
  align-items: center;
  gap: var(--kwg-space-1);
}

/* App-chip: brand mark pill that names the current app. Replaces the
   full-height logo band — smaller, more editorial, and consistent with
   the platform mockup. The "/" separator and current-app label give the
   user a constant orientation cue. */
.kwg-topnav__app-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  color: var(--fg-1);
  text-decoration: none;
  font: var(--w-500) var(--t-13)/1.2 var(--font-display);
  letter-spacing: var(--ls-snug);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

.kwg-topnav__app-chip:hover { background: var(--surface-2); text-decoration: none; }

.kwg-topnav__app-chip-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 11px;
  font-weight: var(--w-700);
  letter-spacing: 0;
  box-shadow: inset 0 -1px 0 oklch(0 0 0 / 0.18);
}

.kwg-topnav__app-chip-org {
  color: var(--fg-1);
  font-weight: var(--w-500);
}

.kwg-topnav__app-chip-sep {
  color: var(--fg-4);
  font-weight: var(--w-300);
}

.kwg-topnav__app-chip-current {
  color: var(--fg-1);
  font-weight: var(--w-600);
}

@media (max-width: 720px) {
  .kwg-topnav__app-chip-org,
  .kwg-topnav__app-chip-sep { display: none; }
}

.kwg-topnav__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--kwg-radius);
  border: none;
  background: transparent;
  color: var(--kwg-text-secondary);
  cursor: pointer;
  transition: background var(--kwg-transition), color var(--kwg-transition);
  position: relative;
}

.kwg-topnav__icon-btn:hover {
  background: var(--kwg-border);
  color: var(--kwg-text);
}

.kwg-topnav__icon-btn--active {
  background: var(--kwg-border);
  color: var(--kwg-primary);
}

.kwg-topnav__icon-btn-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  border: 2px solid var(--kwg-topnav-bg);
}

.kwg-topnav__menu-btn {
  display: none;
}

@media (max-width: 768px) {
  .kwg-topnav__menu-btn { display: flex; }
}

/* 9-dot launcher button. Lives at the far-left of the topbar; persists
   across every app. Matches the mockup's ".launcher-btn". */
.kwg-launcher-root {
  position: relative;
  display: flex;
  align-items: center;
}

.kwg-launcher-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.kwg-launcher-btn:hover {
  background: var(--hover-bg);
  color: var(--fg-1);
}

.kwg-launcher-btn[aria-expanded="true"] {
  background: var(--brand-1-soft);
  color: var(--brand-1-strong);
  border-color: color-mix(in oklch, var(--brand-1) 25%, transparent);
}

.kwg-launcher-btn__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3px;
  gap: 3px;
  width: 18px;
  height: 18px;
}

.kwg-launcher-btn__grid > i {
  background: currentColor;
  border-radius: 1px;
  width: 4px;
  height: 4px;
}

/* Topbar search field — full input with leading icon and trailing kbd. */
.kwg-topbar-search {
  position: relative;
  width: 100%;
}

.kwg-topbar-search__input {
  width: 100%;
  height: 36px;
  padding: 0 var(--s-3) 0 36px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-8);
  color: var(--fg-1);
  font: var(--type-body-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
}

.kwg-topbar-search__input::placeholder { color: var(--fg-3); }

.kwg-topbar-search__input:focus {
  border-color: var(--brand-1);
  box-shadow: var(--shadow-focus);
  background: var(--surface-base);
}

.kwg-topbar-search > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--fg-3);
  pointer-events: none;
}

.kwg-topbar-search__kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font: var(--type-mono-sm);
  color: var(--fg-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  padding: 1px 6px;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.kwg-sidebar {
  width: var(--kwg-sidebar-width);
  background: var(--kwg-sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--kwg-transition-slow);
  z-index: var(--kwg-z-sidebar);
}

.kwg-sidebar--collapsed {
  width: var(--kwg-sidebar-width-collapsed);
}

/* Collapsed sidebar shows icons only — labels are hidden but each item is
   still clickable as a normal anchor. The user expands by clicking the
   chevron at the bottom of the sidebar; we don't auto-expand on hover. */
.kwg-sidebar--collapsed .kwg-sidebar__item-label,
.kwg-sidebar--collapsed .kwg-sidebar__section-label,
.kwg-sidebar--collapsed .kwg-sidebar__header-name,
.kwg-sidebar--collapsed .kwg-sidebar__item-badge {
  display: none;
}
.kwg-sidebar--collapsed .kwg-sidebar__item {
  justify-content: center;
}

/* Bottom expand/collapse chevron. Sticks to the foot of the column so it's
   the same place whether content scrolls or not. */
.kwg-sidebar__toggle {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--kwg-sidebar-text);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kwg-sidebar__toggle:hover {
  background: var(--hover-bg);
  color: var(--fg-1);
}

.kwg-sidebar__header {
  display: flex;
  align-items: center;
  padding: var(--kwg-space-4);
  gap: var(--kwg-space-3);
  min-height: var(--kwg-topnav-height);
  border-bottom: 1px solid var(--border-subtle);
}

.kwg-sidebar__header-logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

.kwg-sidebar__header-name {
  font-size: var(--kwg-text-md);
  font-weight: 700;
  color: var(--kwg-sidebar-text-active);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kwg-sidebar__group {
  /* Per-app sidebar header — names the current app's context.
     Bold display type, generous margin so the per-app sub-nav reads
     as a discrete page within the shell. */
  font: var(--w-600) var(--t-14)/1.25 var(--font-display);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
  padding: var(--s-4) var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--s-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kwg-sidebar__section {
  padding: var(--s-3) 0 var(--s-2);
}

.kwg-sidebar__section + .kwg-sidebar__section {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--s-1);
}

/* When the sidebar starts with a group label, drop the leading padding
   on the first section so the divider sits flush. */
.kwg-sidebar__group + .kwg-sidebar__section {
  padding-top: 0;
}

.kwg-sidebar__section-label {
  font: var(--type-page-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  padding: var(--s-2) var(--s-4) var(--s-1);
  white-space: nowrap;
  overflow: hidden;
}

.kwg-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  color: var(--fg-2);
  text-decoration: none;
  font: var(--w-500) var(--t-14)/1.3 var(--font-display);
  border-radius: var(--r-6);
  margin: 1px var(--s-2);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  border: none;
  background: none;
  width: calc(100% - 16px);
  text-align: left;
  white-space: nowrap;
  position: relative;
}

.kwg-sidebar__item:hover {
  background: var(--hover-bg);
  color: var(--fg-1);
  text-decoration: none;
}

/* Active item — soft brand fill with a 2px coral lead-in on the left
   edge. The lead-in is the same hairline language used in the brand
   band, tying the chrome together visually. */
.kwg-sidebar__item--active {
  background: var(--selected-bg);
  color: var(--selected-fg);
  font-weight: var(--w-600);
}

.kwg-sidebar__item--active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: var(--r-full);
  background: var(--brand-2);
}

/* Disabled item — the feature is off for this tenancy. We keep the
   row visible (settings discoverability) but make it visibly inert:
   muted, no pointer, no hover affordance, and a small "off" chip. */
.kwg-sidebar__item--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto; /* keep the title tooltip on hover */
}
.kwg-sidebar__item--disabled:hover {
  background: transparent;
  color: inherit;
}
.kwg-sidebar__item--disabled .kwg-sidebar__item-badge {
  background: var(--surface-3, rgba(120,120,120,0.18));
  color: var(--fg-3, #888);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.06em;
}

.kwg-sidebar__item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}

.kwg-sidebar__item--active .kwg-sidebar__item-icon { opacity: 1; }

.kwg-sidebar__item-label {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kwg-sidebar__item-badge {
  background: var(--brand-2);
  color: var(--brand-2-on);
  font: var(--w-700) 10px/1.3 var(--font-display);
  padding: 1px 6px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Tabular count chip on sidebar items — appears at the trailing edge
   (e.g., "128" next to "All open"). Lighter visual weight than the
   coral pill `__badge` so a list of counts reads as a hierarchy of
   numbers, not a stack of alerts. */
.kwg-sidebar__item-count {
  margin-left: auto;
  font: var(--type-mono-sm);
  color: var(--fg-3);
  flex-shrink: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.kwg-sidebar__item--active .kwg-sidebar__item-count {
  color: var(--brand-1-strong);
}

/* Licence banners — rendered inside the shell main when the tenant is
   on a trial or expired licence. */
.kwg-license-banner {
  padding: var(--s-1) var(--s-4);
  font: var(--type-label-xs);
  text-align: center;
  border-bottom: 1px solid transparent;
}

.kwg-license-banner a { color: inherit; text-decoration: underline; font-weight: var(--w-600); }

.kwg-license-banner--expired {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  border-bottom-color: color-mix(in oklch, var(--c-danger) 25%, transparent);
  padding: var(--s-2) var(--s-4);
  font: var(--type-label-sm);
}

.kwg-license-banner--trial {
  background: var(--brand-1-soft);
  color: var(--brand-1-strong);
  border-bottom-color: color-mix(in oklch, var(--brand-1) 25%, transparent);
}

.kwg-sidebar__footer {
  margin-top: auto;
  padding: var(--s-4);
  border-top: 1px solid var(--border-subtle);
}

/* Mobile sidebar overlay */
@media (max-width: 768px) {
  .kwg-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--kwg-transition-slow);
  }
  .kwg-sidebar--open {
    transform: translateX(0);
    box-shadow: var(--kwg-shadow-lg);
  }
  .kwg-sidebar--collapsed {
    width: var(--kwg-sidebar-width);
  }
}

/* ── App Launcher ──────────────────────────────────────────────────────── */
.kwg-launcher {
  position: fixed;
  top: var(--kwg-topnav-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--kwg-z-dropdown);
  background: color-mix(in oklch, var(--surface-base) 80%, transparent);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--s-6) var(--s-6) 0;
  animation: kwg-launcher-fade var(--dur-fast) var(--ease-out);
}

@keyframes kwg-launcher-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kwg-launcher__panel {
  width: 100%;
  max-width: 1100px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-lg);
  padding: var(--s-6) var(--s-6) var(--s-5);
  position: relative;
  max-height: calc(100vh - var(--kwg-topnav-height) - var(--s-8));
  overflow-y: auto;
}

.kwg-launcher__panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 100%);
  border-radius: var(--r-12) var(--r-12) 0 0;
}

.kwg-launcher__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--s-4);
}

.kwg-launcher__eyebrow {
  font: var(--type-page-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  margin-bottom: var(--s-1);
}

.kwg-launcher__title {
  font: var(--w-500) clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-editorial);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

.kwg-launcher__group {
  font: var(--type-page-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  margin: var(--s-4) 0 var(--s-2);
}

.kwg-launcher__group:first-of-type { margin-top: 0; }

.kwg-launcher__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: var(--s-2);
  gap: var(--s-2);
}

.kwg-launcher__tile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-10);
  text-decoration: none;
  color: var(--fg-1);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-instant) var(--ease-out);
}

.kwg-launcher__tile:hover {
  background: var(--surface-2);
  border-color: var(--brand-1);
  text-decoration: none;
  transform: translateY(-1px);
}

.kwg-launcher__tile--active {
  background: var(--brand-1-soft);
  border-color: var(--brand-1);
  color: var(--brand-1-strong);
}

.kwg-launcher__tile-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
  color: var(--brand-1-strong);
  flex-shrink: 0;
}

.kwg-launcher__tile-icon svg {
  width: 18px;
  height: 18px;
}

.kwg-launcher__tile-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1;
}

.kwg-launcher__tile-title {
  font: var(--w-600) var(--t-14)/1.25 var(--font-display);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.kwg-launcher__tile-desc {
  font: var(--type-body-sm);
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Back-compat: small 3×3 grid still works for callers passing `apps` */
.kwg-launcher__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--kwg-space-2);
  gap: var(--kwg-space-2);
}

.kwg-launcher__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kwg-space-2);
  padding: var(--kwg-space-3) var(--kwg-space-2);
  border-radius: var(--kwg-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--kwg-transition);
  border: none;
  background: none;
  color: var(--kwg-text);
}

.kwg-launcher__item:hover {
  background: var(--kwg-border);
  text-decoration: none;
}

.kwg-launcher__item--active {
  background: var(--brand-1-soft);
  color: var(--brand-1-strong);
}

.kwg-launcher__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--surface-2);
  color: var(--fg-2);
  border: 1px solid var(--border-subtle);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.kwg-launcher__item:hover .kwg-launcher__icon {
  background: var(--brand-1-soft);
  border-color: color-mix(in oklch, var(--brand-1) 30%, transparent);
  color: var(--brand-1-strong);
}

.kwg-launcher__item--active .kwg-launcher__icon {
  background: var(--brand-1-soft);
  border-color: var(--brand-1);
  color: var(--brand-1-strong);
}

.kwg-launcher__label {
  font: var(--w-500) var(--t-12)/1.2 var(--font-display);
  text-align: center;
  color: var(--fg-2);
  letter-spacing: var(--ls-snug);
}

/* ── Button ────────────────────────────────────────────────────────────── */
.kwg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border-radius: var(--r-8);
  font: var(--type-label-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-instant) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
}

.kwg-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.kwg-btn:active:not(:disabled) { transform: scale(0.98); }
.kwg-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Sizes — tighter and consistent with the design system. */
.kwg-btn--sm { height: 32px; padding: 0 var(--s-3); font: var(--type-label-xs); }
.kwg-btn--md { height: 36px; padding: 0 var(--s-4); }
.kwg-btn--lg { height: 44px; padding: 0 var(--s-5); font: var(--type-label-md); }

/* Variants */
.kwg-btn--primary {
  background: var(--kwg-primary);
  color: var(--kwg-text-on-primary);
  border-color: var(--kwg-primary);
}
.kwg-btn--primary:hover:not(:disabled) {
  background: var(--kwg-primary-dark);
  border-color: var(--kwg-primary-dark);
}

.kwg-btn--secondary {
  background: var(--surface-elevated);
  color: var(--fg-1);
  border-color: var(--border-base);
}
.kwg-btn--secondary:hover:not(:disabled) {
  background: var(--surface-1);
  border-color: var(--brand-1);
  color: var(--brand-1-strong);
}

.kwg-btn--ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: transparent;
}
.kwg-btn--ghost:hover:not(:disabled) {
  background: var(--hover-bg);
  color: var(--fg-1);
}

.kwg-btn--danger {
  background: var(--c-danger);
  color: #fff;
  border-color: var(--c-danger);
}
.kwg-btn--danger:hover:not(:disabled) {
  background: oklch(0.50 0.18 25);
  border-color: oklch(0.50 0.18 25);
}

.kwg-btn--link {
  background: transparent;
  color: var(--kwg-primary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.kwg-btn--link:hover:not(:disabled) { text-decoration: underline; }

/* ── Input / Form fields ───────────────────────────────────────────────── */
.kwg-field {
  display: flex;
  flex-direction: column;
  gap: var(--kwg-space-1);
}

.kwg-label {
  font-size: var(--kwg-text-sm);
  font-weight: 500;
  color: var(--kwg-text);
}

.kwg-label--required::after {
  content: ' *';
  color: var(--kwg-danger);
}

.kwg-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.kwg-input {
  width: 100%;
  background: var(--surface-elevated);
  border: 1px solid var(--border-base);
  border-radius: var(--r-8);
  padding: 0 var(--s-3);
  font: var(--type-body-md);
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  outline: none;
  height: 36px;
}

.kwg-input::placeholder { color: var(--fg-3); }

.kwg-input:focus {
  border-color: var(--brand-1);
  box-shadow: var(--shadow-focus);
}

.kwg-input--error {
  border-color: var(--c-danger);
}
.kwg-input--error:focus {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-danger) 25%, transparent);
}

.kwg-input--sm { height: 32px; padding: 0 var(--s-2); font: var(--type-body-sm); }
.kwg-input--lg { height: 44px; padding: 0 var(--s-4); font: var(--type-body-lg); }

.kwg-input-icon-left { position: absolute; left: 10px; color: var(--kwg-text-tertiary); }
.kwg-input-icon-right { position: absolute; right: 10px; color: var(--kwg-text-tertiary); }

.kwg-input--has-left { padding-left: 34px; }
.kwg-input--has-right { padding-right: 34px; }

.kwg-field-hint { font-size: var(--kwg-text-xs); color: var(--kwg-text-secondary); }
.kwg-field-error { font-size: var(--kwg-text-xs); color: var(--kwg-danger); }

.kwg-textarea {
  height: auto;
  resize: vertical;
  min-height: 96px;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-body);
}

/* Select */
.kwg-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

/* ── Badge ─────────────────────────────────────────────────────────────── */
.kwg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  font: var(--type-label-xs);
  line-height: 1.4;
  white-space: nowrap;
}

.kwg-badge--neutral { background: var(--surface-2); color: var(--fg-2); }
.kwg-badge--primary { background: var(--brand-1-soft); color: var(--brand-1-strong); }
.kwg-badge--success { background: var(--c-success-soft); color: var(--c-success); }
.kwg-badge--warning { background: var(--c-warning-soft); color: oklch(0.45 0.15 75); }
.kwg-badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.kwg-badge--info    { background: var(--c-info-soft);    color: var(--c-info); }

/* Dark-mode soft pills lift the lightness of the soft background so they
   stay legible on the cool-neutral surface set. */
[data-theme="dark"] .kwg-badge--primary { background: oklch(0.30 0.07 230); color: oklch(0.85 0.10 230); }
[data-theme="dark"] .kwg-badge--success { background: oklch(0.30 0.07 150); color: oklch(0.85 0.13 150); }
[data-theme="dark"] .kwg-badge--warning { background: oklch(0.32 0.07 75);  color: oklch(0.88 0.14 75); }
[data-theme="dark"] .kwg-badge--danger  { background: oklch(0.30 0.08 25);  color: oklch(0.82 0.15 25); }
[data-theme="dark"] .kwg-badge--info    { background: oklch(0.30 0.06 240); color: oklch(0.82 0.10 240); }

/* ── Card ──────────────────────────────────────────────────────────────── */
.kwg-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-xs);
  position: relative;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* Optional accent variant — adds a coral hairline along the top edge.
   Used to call out a card without adding visual weight elsewhere
   (e.g. dashboard hero, important system status, primary actions). */
.kwg-card--accent::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: var(--r-12) var(--r-12) 0 0;
  background: linear-gradient(90deg, var(--brand-1) 0%, var(--brand-2) 100%);
}

.kwg-card__header {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.kwg-card__title {
  font: var(--type-h4);
  color: var(--fg-1);
  flex: 1 1;
  margin: 0;
  letter-spacing: var(--ls-tight);
}

.kwg-card__body { padding: var(--s-5); }

.kwg-card__footer {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.kwg-card--flush .kwg-card__body { padding: 0; }

/* ── Alert ─────────────────────────────────────────────────────────────── */
.kwg-alert {
  display: flex;
  gap: var(--kwg-space-3);
  padding: var(--kwg-space-3) var(--kwg-space-4);
  border-radius: var(--kwg-radius);
  border: 1px solid transparent;
  font-size: var(--kwg-text-sm);
}

.kwg-alert__icon { flex-shrink: 0; margin-top: 1px; }
.kwg-alert__body { flex: 1 1; }
.kwg-alert__title { font-weight: 600; margin-bottom: 2px; }

.kwg-alert--info    { background: var(--c-info-soft);    color: var(--c-info);    border-color: color-mix(in oklch, var(--c-info) 25%, transparent); }
.kwg-alert--success { background: var(--c-success-soft); color: var(--c-success); border-color: color-mix(in oklch, var(--c-success) 25%, transparent); }
.kwg-alert--warning { background: var(--c-warning-soft); color: oklch(0.45 0.15 75); border-color: color-mix(in oklch, var(--c-warning) 25%, transparent); }
.kwg-alert--danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border-color: color-mix(in oklch, var(--c-danger) 25%, transparent); }

[data-theme="dark"] .kwg-alert--info    { background: oklch(0.30 0.06 240); color: oklch(0.82 0.10 240); }
[data-theme="dark"] .kwg-alert--success { background: oklch(0.30 0.07 150); color: oklch(0.85 0.13 150); }
[data-theme="dark"] .kwg-alert--warning { background: oklch(0.32 0.07 75);  color: oklch(0.88 0.14 75); }
[data-theme="dark"] .kwg-alert--danger  { background: oklch(0.30 0.08 25);  color: oklch(0.82 0.15 25); }

/* ── Spinner ───────────────────────────────────────────────────────────── */
.kwg-spinner {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-color: currentColor;
  border-top-color: transparent;
  animation: kwg-spin 0.65s linear infinite;
}

.kwg-spinner--sm  { width: 14px; height: 14px; border-width: 2px; }
.kwg-spinner--md  { width: 20px; height: 20px; border-width: 2px; }
.kwg-spinner--lg  { width: 32px; height: 32px; border-width: 3px; }
.kwg-spinner--xl  { width: 48px; height: 48px; border-width: 4px; }

@keyframes kwg-spin {
  to { transform: rotate(360deg); }
}

/* ── Avatar ────────────────────────────────────────────────────────────── */
.kwg-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kwg-radius-full);
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 600;
  background: var(--kwg-primary);
  color: var(--kwg-text-on-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.kwg-avatar--xs  { width: 20px; height: 20px; font-size: 9px; }
.kwg-avatar--sm  { width: 26px; height: 26px; font-size: 11px; }
.kwg-avatar--md  { width: 32px; height: 32px; font-size: 13px; }
.kwg-avatar--lg  { width: 40px; height: 40px; font-size: 15px; }
.kwg-avatar--xl  { width: 56px; height: 56px; font-size: 20px; }
.kwg-avatar--2xl { width: 72px; height: 72px; font-size: 26px; }

.kwg-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.kwg-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  z-index: var(--kwg-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  animation: kwg-fade-in var(--dur-base) var(--ease-out);
}

.kwg-modal {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  animation: kwg-slide-up var(--dur-base) var(--ease-out);
}

.kwg-modal--sm  { max-width: 380px; }
.kwg-modal--md  { max-width: 520px; }
.kwg-modal--lg  { max-width: 720px; }
.kwg-modal--xl  { max-width: 960px; }
.kwg-modal--full { max-width: calc(100vw - 32px); }

.kwg-modal__header {
  display: flex;
  align-items: center;
  padding: var(--kwg-space-4) var(--kwg-space-5);
  border-bottom: 1px solid var(--kwg-border);
  flex-shrink: 0;
}

.kwg-modal__title {
  flex: 1 1;
  font-size: var(--kwg-text-lg);
  font-weight: 600;
}

.kwg-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--kwg-radius);
  border: none;
  background: transparent;
  color: var(--kwg-text-secondary);
  cursor: pointer;
  font-size: 18px;
  transition: background var(--kwg-transition);
}

.kwg-modal__close:hover { background: var(--kwg-border); }

.kwg-modal__body {
  padding: var(--kwg-space-5);
  overflow-y: auto;
  flex: 1 1;
}

.kwg-modal__footer {
  padding: var(--kwg-space-4) var(--kwg-space-5);
  border-top: 1px solid var(--kwg-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kwg-space-3);
  flex-shrink: 0;
}

@keyframes kwg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kwg-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Table ─────────────────────────────────────────────────────────────── */
.kwg-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--r-12);
  border: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
}

.kwg-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-md);
}

.kwg-table thead {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border-subtle);
}

.kwg-table th {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font: var(--type-page-eyebrow);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
  height: 38px;
}

.kwg-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-1);
  vertical-align: middle;
}

.kwg-table tbody tr:last-child td { border-bottom: none; }

.kwg-table tbody tr {
  background: var(--surface-elevated);
  transition: background var(--dur-fast) var(--ease-out);
}

.kwg-table tbody tr:hover { background: var(--surface-1); }

.kwg-table--striped tbody tr:nth-child(even) { background: var(--surface-1); }

/* Compact variant for dense ticket-queue / device-list tables. */
.kwg-table--compact th,
.kwg-table--compact td { padding: var(--s-2) var(--s-3); height: auto; }

/* Filters bar — selects + search row used at the top of list pages.
 * Wraps gracefully on narrow viewports; a free-form search input flexes
 * to fill the remaining space. */
.kwg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  align-items: center;
}

.kwg-filters__search {
  flex: 1 1;
  min-width: 220px;
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-base);
  border-radius: var(--r-8);
  background: var(--surface-elevated);
  color: var(--fg-1);
  font: var(--type-body-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.kwg-filters__search::placeholder { color: var(--fg-3); }

.kwg-filters__search:focus {
  outline: none;
  border-color: var(--brand-1);
  box-shadow: var(--shadow-focus);
}

/* Pill toggle group — used for status filters above tables. Sits on the
 * filters bar. The active pill picks up the brand fill. */
.kwg-pill-group {
  display: inline-flex;
  border: 1px solid var(--border-base);
  border-radius: var(--r-full);
  padding: 2px;
  background: var(--surface-elevated);
  gap: 2px;
}

.kwg-pill-group__btn {
  background: transparent;
  border: none;
  height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-full);
  font: var(--type-label-xs);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.kwg-pill-group__btn:hover { background: var(--hover-bg); color: var(--fg-1); }

.kwg-pill-group__btn--active {
  background: var(--brand-1);
  color: var(--brand-1-on);
}

.kwg-pill-group__btn--active:hover {
  background: var(--brand-1-strong);
  color: var(--brand-1-on);
}

/* SLA progress bar — small pill bar that fills in proportion to time
 * elapsed against the SLA window. Tones cue urgency (warn/danger). */
.kwg-sla {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 90px;
}

.kwg-sla__bar {
  height: 4px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}

.kwg-sla__fill {
  height: 100%;
  background: var(--c-success);
  border-radius: var(--r-full);
  transition: width var(--dur-base) var(--ease-out);
}

.kwg-sla__fill--warn   { background: var(--c-warning); }
.kwg-sla__fill--danger { background: var(--c-danger); }

.kwg-sla__hint {
  font: var(--type-mono-sm);
  color: var(--fg-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Numeric columns adopt tabular figures so number columns line up. */
.kwg-table td.is-numeric,
.kwg-table th.is-numeric {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Divider ───────────────────────────────────────────────────────────── */
.kwg-divider {
  border: none;
  border-top: 1px solid var(--kwg-border);
  margin: var(--kwg-space-4) 0;
}

/* ── Page header ───────────────────────────────────────────────────────── *
 * Two-row editorial header. Eyebrow (uppercase General Sans) sits above
 * an editorial title in Fraunces. Right-side slot houses primary actions.
 * Bottom hairline connects header to page content without ceremony.
 * ----------------------------------------------------------------------- */
.kwg-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.kwg-page-header__lead {
  flex: 1 1;
  min-width: 0;
}

.kwg-page-header__eyebrow {
  font: var(--type-page-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.kwg-page-header__eyebrow::before {
  /* Tiny brand-2 dot — the same coral accent used in the sidebar
     active marker. Pairs the page with the chrome. */
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--brand-2);
  flex-shrink: 0;
}

.kwg-page-title {
  font: var(--type-page-title);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

.kwg-page-subtitle {
  font: var(--type-page-lede);
  color: var(--fg-2);
  margin-top: var(--s-2);
  max-width: 64ch;
}

.kwg-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .kwg-page-header { flex-direction: column; align-items: flex-start; }
  .kwg-page-header__actions { width: 100%; }
}

/* ── Dropdown ──────────────────────────────────────────────────────────── */
.kwg-dropdown {
  position: absolute;
  background: var(--kwg-surface);
  border: 1px solid var(--kwg-border);
  border-radius: var(--kwg-radius);
  box-shadow: var(--kwg-shadow-lg);
  z-index: var(--kwg-z-dropdown);
  min-width: 160px;
  overflow: hidden;
  animation: kwg-slide-up 0.12s ease;
}

.kwg-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--kwg-space-2);
  padding: var(--kwg-space-2) var(--kwg-space-3);
  font-size: var(--kwg-text-sm);
  color: var(--kwg-text);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--kwg-transition);
}

.kwg-dropdown__item:hover { background: var(--kwg-border); }
.kwg-dropdown__item--danger { color: var(--kwg-danger); }
.kwg-dropdown__item--danger:hover { background: var(--kwg-danger-bg); }
.kwg-dropdown__divider { border: none; border-top: 1px solid var(--kwg-border); margin: 2px 0; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.kwg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--kwg-space-12) var(--kwg-space-6);
  gap: var(--kwg-space-3);
}

.kwg-empty__icon { font-size: 40px; color: var(--kwg-text-tertiary); }
.kwg-empty__title { font-size: var(--kwg-text-lg); font-weight: 600; color: var(--kwg-text); }
.kwg-empty__desc { font-size: var(--kwg-text-sm); color: var(--kwg-text-secondary); max-width: 320px; }

/* ── Skeleton ──────────────────────────────────────────────────────────── */
.kwg-skeleton {
  background: linear-gradient(90deg, var(--kwg-border) 25%, var(--kwg-border-strong) 50%, var(--kwg-border) 75%);
  background-size: 200% 100%;
  animation: kwg-shimmer 1.5s infinite;
  border-radius: var(--kwg-radius-sm);
}

@keyframes kwg-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Section eyebrow ────────────────────────────────────────────────────
 * In-page section header — small uppercase eyebrow. Sits above grouping
 * blocks (e.g. "RECENT ACTIVITY", "OPEN TICKETS"). Optional decorative
 * hairline drawn after the label to anchor the row. */
.kwg-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font: var(--type-page-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  margin-bottom: var(--s-3);
}

.kwg-eyebrow::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--border-subtle);
}

.kwg-eyebrow--solid::after { display: none; }

/* ── Metric block ───────────────────────────────────────────────────────
 * Headline number with a secondary label below. Used in dashboard
 * signal strips, billing totals, etc. Numbers always tabular. */
.kwg-metric { display: flex; flex-direction: column; gap: 2px; }
.kwg-metric__value {
  font: var(--type-metric-lg);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.kwg-metric__value--xl { font: var(--type-metric-xl); }
.kwg-metric__value--md { font: var(--type-metric-md); }
.kwg-metric__label {
  font: var(--type-page-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
}
.kwg-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--type-label-xs);
  margin-top: var(--s-1);
}
.kwg-metric__delta--up   { color: var(--c-success); }
.kwg-metric__delta--down { color: var(--c-danger); }
.kwg-metric__delta--flat { color: var(--fg-3); }

/* ── KPI strip ──────────────────────────────────────────────────────────
 * Generic stat-card grid used at the top of operational dashboards
 * (helpdesk, RMM, uptime, billing, projects). Each card carries an
 * optional tone (--kpi-tone) that drives the top hairline. The card
 * is a div by default and a button when interactive. Mockup parity
 * with `.kpi-grid > .card`.
 * ─────────────────────────────────────────────────────────────────── */
.kwg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--s-3);
  gap: var(--s-3);
}
.kwg-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  position: relative;
  font-family: inherit;
  color: var(--fg-1);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.kwg-kpi::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--r-12) var(--r-12) 0 0;
  background: var(--kpi-tone, var(--brand-1));
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}
button.kwg-kpi { cursor: pointer; }
button.kwg-kpi:hover { border-color: var(--border-base); transform: translateY(-1px); }
button.kwg-kpi:hover::before { opacity: 1; }
.kwg-kpi--active {
  border-color: var(--kpi-tone, var(--brand-1));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--kpi-tone, var(--brand-1)) 18%, transparent);
}
.kwg-kpi--active::before { opacity: 1; height: 3px; }
.kwg-kpi__label {
  font: var(--type-page-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
}
.kwg-kpi__value {
  font: var(--type-metric-lg);
  letter-spacing: var(--ls-tight);
  color: var(--kpi-tone, var(--fg-1));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.kwg-kpi__value--md { font: var(--type-metric-md); }
.kwg-kpi__hint {
  font: var(--type-body-sm);
  color: var(--fg-3);
  margin-top: 2px;
}
.kwg-kpi--success { --kpi-tone: var(--c-success); }
.kwg-kpi--warning { --kpi-tone: var(--c-warning); }
.kwg-kpi--danger  { --kpi-tone: var(--c-danger); }
.kwg-kpi--info    { --kpi-tone: var(--c-info); }
.kwg-kpi--brand   { --kpi-tone: var(--brand-1); }

/* ── Tag chip — alternative to badge, for filter UIs ────────────────── */
.kwg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 26px;
  padding: 0 var(--s-3);
  border-radius: var(--r-full);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  font: var(--w-500) var(--t-12)/1.2 var(--font-display);
  color: var(--fg-2);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.kwg-chip:hover {
  background: var(--brand-1-soft);
  border-color: color-mix(in oklch, var(--brand-1) 30%, transparent);
  color: var(--brand-1-strong);
}
.kwg-chip--active {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--brand-1-on);
}
.kwg-chip--active:hover {
  background: var(--brand-1-strong);
  border-color: var(--brand-1-strong);
  color: var(--brand-1-on);
}

/* ── Status dot — live indicator that pairs with a label ────────────── */
.kwg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--fg-4);
  flex-shrink: 0;
}
.kwg-dot--success { background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-success) 18%, transparent); }
.kwg-dot--warning { background: var(--c-warning); box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-warning) 18%, transparent); }
.kwg-dot--danger  { background: var(--c-danger);  box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-danger) 18%, transparent); }
.kwg-dot--info    { background: var(--c-info);    box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-info) 18%, transparent); }
.kwg-dot--flat    { background: var(--fg-3);      box-shadow: 0 0 0 3px color-mix(in oklch, var(--fg-3) 14%, transparent); }

@keyframes kwg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 35%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklch, currentColor 0%, transparent); }
}
.kwg-dot--live { animation: kwg-pulse 1.6s ease-in-out infinite; }

/* ── Muted text helpers ─────────────────────────────────────────────────
 * Two tiers of secondary copy used inside cards, table rows, and
 * timelines. `--muted` is body-weight ~ fg-2; `--muted-2` is the smaller,
 * even-quieter caption tier ~ fg-3. */
.kwg-muted   { color: var(--fg-2); }
.kwg-muted-2 { color: var(--fg-3); font: var(--type-body-sm); }

/* ── Timeline ────────────────────────────────────────────────────────────
 * Vertical activity feed. Each row has a tabular timestamp on the left,
 * a connecting rail, and the activity body that describes the event.
 * Used on dashboards and audit-style feeds. */
.kwg-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.kwg-timeline__item {
  display: grid;
  grid-template-columns: 56px 12px 1fr;
  align-items: flex-start;
  grid-gap: var(--s-2);
  gap: var(--s-2);
  font: var(--type-body-sm);
  color: var(--fg-2);
}

.kwg-timeline__when {
  font: var(--type-mono-sm);
  color: var(--fg-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.kwg-timeline__rail {
  position: relative;
  width: 12px;
  align-self: stretch;
}

.kwg-timeline__rail::before {
  /* Vertical rail line */
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: -8px;
  width: 2px;
  background: var(--border-subtle);
}

.kwg-timeline__item:last-child .kwg-timeline__rail::before { display: none; }

.kwg-timeline__rail::after {
  /* Brand-2 dot at the row's baseline */
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 3px var(--surface-elevated);
}

.kwg-timeline__body {
  line-height: 1.45;
  color: var(--fg-2);
}

.kwg-timeline__body a {
  color: var(--fg-1);
  font-weight: var(--w-600);
  text-decoration: none;
}

.kwg-timeline__body a:hover { color: var(--brand-1-strong); text-decoration: underline; }

.kwg-timeline__body em {
  font-style: italic;
  color: var(--fg-1);
  font-weight: var(--w-500);
}

.kwg-timeline__body strong { color: var(--fg-1); font-weight: var(--w-600); }

/* Skeleton row — render shimmer rectangles in place of content while
   the timeline is loading. */
.kwg-timeline__item--skeleton .kwg-timeline__when,
.kwg-timeline__item--skeleton .kwg-timeline__body {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-1) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: kwg-shimmer 1.5s infinite;
  border-radius: var(--r-4);
  height: 14px;
  color: transparent;
}

/* Chat shell — two-column channel/DM list + message pane. Used by
 * /messages (team chat) and /chat (live visitor chat). The shell is a
 * single rounded card with an internal divider; sub-elements own their
 * padding so callers can drop content straight in. */
.kwg-chat {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-12);
  overflow: hidden;
  min-height: 0;
}

.kwg-chat__list {
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  overflow: hidden;
}

.kwg-chat__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}

.kwg-chat__list-head-title {
  font: var(--type-label-sm);
  font-weight: var(--w-600);
  color: var(--fg-1);
}

.kwg-chat__list-section {
  padding: var(--s-3) var(--s-3) var(--s-1);
  font: var(--type-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
}

.kwg-chat__list-body {
  flex: 1 1;
  overflow-y: auto;
  padding-bottom: var(--s-3);
}

.kwg-chat__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  border-left: 3px solid transparent;
  font: var(--type-body-sm);
  color: var(--fg-2);
  transition: background var(--dur-fast) var(--ease-out);
}

.kwg-chat__item:hover { background: var(--hover-bg); }

.kwg-chat__item.is-active {
  background: var(--selected-bg);
  border-left-color: var(--brand-1);
  color: var(--fg-1);
}

.kwg-chat__item--unread { font-weight: var(--w-600); color: var(--fg-1); }

.kwg-chat__item-name {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kwg-chat__item-snip {
  display: block;
  font: var(--type-body-sm);
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kwg-chat__unread-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--c-danger);
  flex-shrink: 0;
}

.kwg-chat__pane {
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  min-height: 0;
}

.kwg-chat__pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}

.kwg-chat__pane-title {
  font: var(--type-body);
  font-weight: var(--w-600);
  color: var(--fg-1);
}

.kwg-chat__msgs {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.kwg-chat__msg {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.kwg-chat__msg--me { justify-content: flex-end; }

.kwg-chat__bubble {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-8);
  padding: var(--s-2) var(--s-3);
  max-width: 480px;
  font: var(--type-body);
  color: var(--fg-1);
  white-space: pre-wrap;
  line-height: 1.5;
}

.kwg-chat__bubble--me {
  background: var(--brand-1-soft);
  color: var(--brand-1-strong);
  border-color: color-mix(in oklch, var(--brand-1) 20%, transparent);
}

.kwg-chat__bubble--bot {
  background: var(--c-warning-soft);
  color: var(--c-warning);
  border-color: color-mix(in oklch, var(--c-warning) 25%, transparent);
}

.kwg-chat__bubble-meta {
  font: var(--type-mono-sm);
  color: var(--fg-3);
  margin-bottom: 2px;
}

.kwg-chat__day {
  align-self: center;
  font: var(--type-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  background: var(--surface-elevated);
  padding: 2px var(--s-3);
  border-radius: var(--r-full);
}

.kwg-chat__compose {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-subtle);
  align-items: flex-end;
}

.kwg-chat__compose .kwg-input,
.kwg-chat__compose .kwg-textarea { flex: 1 1; }

.kwg-chat__empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  padding: var(--s-6);
}
.kwg-timeline__item--skeleton .kwg-timeline__when { height: 12px; }

/* ──────────────────────────────────────────────────────────────────────
 * Softphone — full-screen phone-native UI used by the dedicated
 * `/softphone` route. Designed mobile-first so an installed PWA looks
 * native on phone/tablet. Big tap targets, three sticky regions
 * (status header, scroll body, tab bar).
 * ──────────────────────────────────────────────────────────────────── */

.kwg-softphone {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  color: var(--fg-1);
  /* Tap-friendly type sizing irrespective of the desktop scale. */
  font-size: 16px;
  /* Respect iOS safe-area insets so the dial bar isn't hidden by the
     home indicator and the status bar isn't behind the notch. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.kwg-softphone__status {
  flex: 0 0 auto;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.kwg-softphone__status-label {
  font: var(--type-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
}

.kwg-softphone__status-line {
  font: var(--type-page-title);
  font-size: 22px;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  min-height: 28px;
}

.kwg-softphone__status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  margin-right: 6px;
  vertical-align: middle;
  background: var(--fg-3);
}
.kwg-softphone__status-dot--ready    { background: var(--c-success); }
.kwg-softphone__status-dot--ringing  { background: var(--c-warning); animation: kwg-pulse 1.2s ease-out infinite; }
.kwg-softphone__status-dot--active   { background: var(--c-success); animation: kwg-pulse 1.5s ease-out infinite; }
.kwg-softphone__status-dot--off      { background: var(--c-danger); }

.kwg-softphone__body {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.kwg-softphone__number {
  text-align: center;
  font: var(--type-page-title);
  font-size: clamp(28px, 7vw, 40px);
  letter-spacing: 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--fg-1);
  min-height: 1.2em;
  word-break: break-all;
}

.kwg-softphone__number--placeholder {
  color: var(--fg-3);
  letter-spacing: normal;
}

.kwg-softphone__dialpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--s-3);
  gap: var(--s-3);
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
}

.kwg-softphone__digit {
  height: 64px;
  border-radius: var(--r-full);
  background: var(--surface-elevated);
  border: 1px solid var(--border-base);
  color: var(--fg-1);
  font-size: 26px;
  font-weight: var(--w-600);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  /* iOS Safari: stop the long-press magnifier. */
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.kwg-softphone__digit:active {
  transform: scale(0.96);
  background: var(--hover-bg);
}

.kwg-softphone__digit-sub {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-top: 2px;
}

.kwg-softphone__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-2);
}

.kwg-softphone__call-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.kwg-softphone__call-btn:active { transform: scale(0.94); }
.kwg-softphone__call-btn--call    { background: var(--c-success); }
.kwg-softphone__call-btn--call:hover { background: color-mix(in oklch, var(--c-success) 88%, black); }
.kwg-softphone__call-btn--hangup  { background: var(--c-danger); }
.kwg-softphone__call-btn--hangup:hover { background: color-mix(in oklch, var(--c-danger) 88%, black); }
.kwg-softphone__call-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.kwg-softphone__call-btn--icon {
  width: 44px;
  height: 44px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-base);
  color: var(--fg-1);
}

.kwg-softphone__tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
}

.kwg-softphone__tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: transparent;
  padding: 12px 4px 14px;
  font: var(--type-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.kwg-softphone__tab:active { background: var(--hover-bg); }
.kwg-softphone__tab--active { color: var(--brand-1-strong); }
.kwg-softphone__tab-icon { font-size: 20px; }

.kwg-softphone__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kwg-softphone__list-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  color: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.kwg-softphone__list-item:active { background: var(--hover-bg); }

.kwg-softphone__list-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.kwg-softphone__list-icon--missed { color: var(--c-danger); }

.kwg-softphone__list-main {
  flex: 1 1;
  min-width: 0;
}
.kwg-softphone__list-title {
  font-weight: var(--w-600);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kwg-softphone__list-sub {
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kwg-softphone__incoming {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--brand-1) 0%, color-mix(in oklch, var(--brand-1) 70%, black) 100%);
  color: white;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12vh var(--s-5) 8vh;
  text-align: center;
  padding-top: max(12vh, env(safe-area-inset-top));
  padding-bottom: max(8vh, env(safe-area-inset-bottom));
}

.kwg-softphone__incoming-label {
  font: var(--type-label-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  opacity: 0.7;
}
.kwg-softphone__incoming-num {
  font-size: 32px;
  font-weight: var(--w-600);
  font-family: var(--font-mono);
  letter-spacing: 2px;
  margin-top: var(--s-3);
}

.kwg-softphone__incoming-actions {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.29_@playwright+test@1.59.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!../../packages/design-system/src/styles/index.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/