/* kb shell - menu, logo, topbar, profile/theme menu, content surface, card and page head.
   Mockups: docs/redesign/mockups/10-baggrund.html (menu M2+M3 variant 1, topbar, cards)
   and 13-logo-b-animeret.html (logo B1).

   Markup: Views/masterTemplate.cshtml, Views/Partials/_Nav.cshtml, Views/Partials/_AppBar.cshtml.
   html.kb-shell   = the menu and topbar frame the page (member signed in, view does not hide them)

   !important in this file is a guard, not a habit: unlayered CSS (a widget bundle's CSS, a page file
   loaded without a layer) beats every layer, so a rule such as `button {…}`, `a {…}` or `header {…}`
   would restyle the shell.
   Important declarations in a layer beat unlayered ones, so the box and paint properties of shell
   elements (background, colour, border, padding, margin, font, size) are pinned. display and
   visibility are never pinned: pages may hide the shell (LoginPage, print CSS).

   Everything that moves is inside @media (prefers-reduced-motion: no-preference), so reduced
   motion gets plain state changes. */
@layer kb.shell {

  /* ---------- shell variables ---------- */
  :root {
    --kb-menu-w: 250px;
    --aside-width: var(--kb-menu-w); /* legacy name, still read by old CSS */
    --kb-menu-box-w: var(--kb-menu-w);
    --kb-shell-scheme: light;

    /* The menu is navy in both themes; its own palette. */
    --kb-menu-ink: #b9c6e4;
    --kb-menu-ink-strong: #ffffff;
    --kb-menu-icon: #a9b8da;
    --kb-menu-muted: #7d90b8;
    --kb-menu-field: rgba(255, 255, 255, .06);
    --kb-menu-line: rgba(255, 255, 255, .08);
    --kb-menu-focus: #8aa6ff;
    --kb-menu-active: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --kb-menu-glow: 0 4px 12px rgba(29, 78, 216, .45);
    --kb-menu-surface: linear-gradient(90deg, rgba(96, 165, 250, .28), rgba(96, 165, 250, .06) 70%, transparent);

    /* frosted controls on the page background (topbar) */
    --kb-frost: color-mix(in srgb, var(--kb-card) 80%, transparent);
    --kb-frost-shadow: 0 1px 0 var(--kb-line), 0 2px 10px rgba(10, 30, 70, .05);
  }

  :root[data-theme="dark"] {
    --kb-shell-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --kb-shell-scheme: dark;
    }
  }

  @media (min-width: 769px) {
    html.nav-collapsed {
      --kb-menu-w: 80px;
    }
  }

  @media (max-width: 768px) {
    html.kb-shell {
      --kb-menu-w: 0px;
      --kb-menu-box-w: min(272px, 85vw);
    }
  }

  /* ---------- page frame ---------- */
  html.kb-shell body {
    display: grid;
    grid-template-columns: var(--kb-menu-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "aside header"
      "aside main";
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
  }

  /* The page background (kb.base) starts where the menu ends. */
  html.kb-shell::before {
    left: var(--kb-menu-w);
  }

  html.kb-shell .kb-main {
    grid-area: main;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    /* right padding makes room for the docked detail panel (components/panel.css sets --kb-panel-inset) */
    padding: 4px calc(24px + var(--kb-panel-inset, 0px)) 32px 24px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ---------- content surface ---------- */
  .kb-surface {
    display: flow-root;
    min-width: 0;
  }

  /* ---------- menu ---------- */
  .kb-menu {
    grid-area: aside;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: var(--kb-menu-box-w) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 10px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, var(--kb-menu-from) 0%, var(--kb-menu-to) 100%) !important;
    color: var(--kb-menu-ink) !important;
    color-scheme: dark;
    box-shadow: none;
    transform: none;
    transition: none;
    font-family: var(--kb-font) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .kb-menu__nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100% !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .kb-menu :focus-visible {
    outline: 2px solid var(--kb-menu-focus) !important;
    outline-offset: -2px !important;
  }

  /* ---------- logo (B1) ---------- */
  .kb-logo {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 64px;
    margin: 0 0 6px !important;
    padding: 2px 8px 14px !important;
    border: 0 !important;
    border-radius: var(--kb-radius) !important;
    background: transparent !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 400 !important;
  }

  .kb-logo__mark {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
  }

  .kb-logo__company {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .24em !important;
    color: var(--kb-menu-muted) !important;
  }

  .kb-logo__stripe {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    overflow: hidden;
  }

  .kb-logo__stripe i {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #60a5fa, rgba(96, 165, 250, 0));
    transform: skewX(var(--kb-skew));
  }

  .kb-logo__word {
    font-size: 21px !important;
    font-weight: 300 !important;
    letter-spacing: .28em !important;
    color: #fff !important;
  }

  .kb-logo__word b {
    display: inline-block;
    font-weight: inherit !important;
  }

  .kb-logo__word b:nth-child(1) { --kb-i: 0; }
  .kb-logo__word b:nth-child(2) { --kb-i: 1; }
  .kb-logo__word b:nth-child(3) { --kb-i: 2; }
  .kb-logo__word b:nth-child(4) { --kb-i: 3; }
  .kb-logo__word b:nth-child(5) { --kb-i: 4; }
  .kb-logo__word b:nth-child(6) { --kb-i: 5; }
  .kb-logo__word b:nth-child(7) { --kb-i: 6; }
  .kb-logo__word b:nth-child(8) { --kb-i: 7; }

  /* compact mark for the collapsed menu */
  .kb-logo__mini {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    line-height: 1;
  }

  .kb-logo__mini .kb-logo__word {
    letter-spacing: .14em !important;
    margin-right: -.14em;
  }

  /* Entrance: the company name fades in, the stripe slides in from the left with momentum, then the
     letters of INTRANET slide in one by one. Only while html.kb-logo-enter is set (first page of
     the session, see masterTemplate and shell.js). */
  @media (prefers-reduced-motion: no-preference) {
    html.kb-logo-enter .kb-logo__company {
      opacity: 0;
      transform: translateX(-6px);
      animation: kb-logo-in .5s var(--kb-ease-out) .05s forwards;
    }

    html.kb-logo-enter .kb-logo__stripe i {
      transform: translateX(-105%) skewX(var(--kb-skew));
      animation: kb-logo-stripe .75s var(--kb-ease-momentum) .25s forwards;
    }

    html.kb-logo-enter .kb-logo__mark .kb-logo__word b {
      opacity: 0;
      transform: translateX(-8px);
      animation: kb-logo-in .45s var(--kb-ease-out) forwards;
      animation-delay: calc(var(--kb-i) * 45ms + .55s);
    }

    html.kb-logo-enter .kb-logo__mini .kb-logo__word {
      opacity: 0;
      transform: translateX(-8px);
      animation: kb-logo-in .45s var(--kb-ease-out) .55s forwards;
    }
  }

  @keyframes kb-logo-in {
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes kb-logo-stripe {
    to {
      transform: translateX(0) skewX(var(--kb-skew));
    }
  }

  /* ---------- menu items (M2+M3 variant 1) ---------- */
  .kb-menu__list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    list-style: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
  }

  .kb-menu__list li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    list-style: none !important;
  }

  /* menu items, the help button and the collapse toggle */
  .kb-menu__item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: var(--kb-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-menu-ink) !important;
    opacity: 1;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-align: left;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
  }

  .kb-menu__item:hover,
  .kb-menu__item:focus {
    color: var(--kb-menu-ink-strong) !important;
  }

  /* the skewed light surface; parked off to the left */
  .kb-menu__item::before {
    content: "";
    position: absolute;
    inset: 0 -20px;
    z-index: -1;
    background: var(--kb-menu-surface);
    transform: translateX(-105%) skewX(var(--kb-skew));
  }

  /* hover: a faint preview of the surface */
  .kb-menu__item:hover::before {
    transform: translateX(-62%) skewX(var(--kb-skew));
  }

  .kb-menu__item.is-current {
    color: var(--kb-menu-ink-strong) !important;
    font-weight: 600 !important;
  }

  .kb-menu__item.is-current::before {
    transform: translateX(-14px) skewX(var(--kb-skew));
  }

  .kb-menu__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--kb-radius);
    background: var(--kb-menu-field);
    color: var(--kb-menu-icon);
  }

  .kb-menu__icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .kb-menu__item:hover .kb-menu__icon {
    color: var(--kb-menu-ink-strong);
  }

  .kb-menu__item.is-current .kb-menu__icon {
    background: var(--kb-menu-active);
    color: #fff;
    box-shadow: var(--kb-menu-glow);
  }

  .kb-menu__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    .kb-menu__item {
      transition: color .2s;
    }

    .kb-menu__item::before {
      transition: transform .4s var(--kb-ease-out);
    }

    .kb-menu__icon {
      transition: background .3s, color .3s, box-shadow .3s;
    }

    /* the current page's surface slides in from the left when the page opens */
    .kb-menu__item.is-current::before {
      animation: kb-menu-surface-in .5s var(--kb-ease-out) both;
    }

    .kb-menu__item.is-current .kb-menu__icon {
      animation: kb-menu-icon-in .5s var(--kb-ease-out) .1s both;
    }
  }

  @keyframes kb-menu-surface-in {
    from {
      transform: translateX(-105%) skewX(var(--kb-skew));
    }
  }

  @keyframes kb-menu-icon-in {
    from {
      box-shadow: 0 0 0 rgba(29, 78, 216, 0);
    }
  }

  /* ---------- menu footer: help, collapse ---------- */
  .kb-menu__footer {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--kb-menu-line);
  }
  .kb-menu__tools {
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-top: 0;
    border-bottom: 1px solid var(--kb-menu-line);
  }

  @media (prefers-reduced-motion: no-preference) {
    .kb-menu__collapse .kb-icon {
      transition: transform .3s var(--kb-ease-out);
    }
  }

  /* ---------- profile chip (topbar, top right): initials, first name, profile menu ---------- */
  .kb-profile {
    position: relative;
    flex: none;
  }

  .kb-profile__button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 10px 0 5px !important;
    border: 0 !important;
    border-radius: var(--kb-radius) !important;
    /* no surface of its own: just the round initials and the name; a faint wash on hover / while open */
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-text) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: left;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
  }

  .kb-profile__button:hover,
  .kb-profile__button[aria-expanded="true"] {
    background: var(--kb-hover) !important;
  }

  /* profile pictures are round */
  .kb-profile__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kb-menu-active);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .kb-profile__name {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kb-profile__chevron {
    flex: none;
    width: 16px !important;
    height: 16px !important;
    color: var(--kb-text-muted);
  }

  .kb-profile__button[aria-expanded="true"] .kb-profile__chevron {
    transform: rotate(180deg);
  }

  /* The dropdown follows the page theme (tokens), not the navy menu. */
  .kb-profile__menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1300;
    width: 252px;
    padding: 6px;
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-card);
    background: var(--kb-card);
    color: var(--kb-text);
    color-scheme: var(--kb-shell-scheme);
    box-shadow: var(--kb-shadow-pop);
    font-size: 14px;
    line-height: 1.35;
  }

  .kb-profile__menu.show {
    display: block;
  }

  .kb-profile__menu :focus-visible {
    outline: 2px solid var(--kb-focus-ring) !important;
    outline-offset: -2px !important;
  }

  .kb-profile__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 10px;
  }

  .kb-profile__head strong {
    font-weight: 600;
    color: var(--kb-text);
  }

  .kb-profile__head span {
    font-size: 13px;
    color: var(--kb-text-muted);
    overflow-wrap: anywhere;
  }

  .kb-profile__menu form {
    margin: 0 !important;
    padding: 4px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--kb-line) !important;
    background: none !important;
  }

  .kb-profile__action,
  .kb-theme__option {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: var(--kb-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-align: left;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
  }

  .kb-profile__action:hover,
  .kb-theme__option:hover {
    background: var(--kb-hover) !important;
  }

  .kb-profile__action .kb-icon,
  .kb-theme__option .kb-icon {
    flex: none;
    width: 16px !important;
    height: 16px !important;
    color: var(--kb-text-muted);
  }

  .kb-profile__section {
    margin: 4px 0;
    padding: 6px 0;
    border-top: 1px solid var(--kb-line);
  }

  .kb-profile__label {
    display: block;
    padding: 2px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kb-text-muted);
  }

  .kb-theme {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* chosen theme: the skewed surface, in the page's blue */
  .kb-theme__option::before {
    content: "";
    position: absolute;
    inset: 0 -20px;
    z-index: -1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--kb-primary) 18%, transparent), color-mix(in srgb, var(--kb-primary) 4%, transparent) 75%, transparent);
    transform: translateX(-105%) skewX(var(--kb-skew));
  }

  .kb-theme__option[aria-checked="true"] {
    font-weight: 600 !important;
  }

  .kb-theme__option[aria-checked="true"]::before {
    transform: translateX(-14px) skewX(var(--kb-skew));
  }

  .kb-theme__option[aria-checked="true"] .kb-icon {
    color: var(--kb-primary);
  }

  .kb-theme__option .kb-theme__check {
    margin-left: auto;
    opacity: 0;
    transform: scale(.4);
  }

  .kb-theme__option[aria-checked="true"] .kb-theme__check {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .kb-profile__menu.show {
      animation: kb-pop-down .18s var(--kb-ease-out);
    }

    .kb-profile__chevron {
      transition: transform .25s var(--kb-ease-out);
    }

    .kb-theme__option::before {
      transition: transform .4s var(--kb-ease-out);
    }

    .kb-theme__option .kb-theme__check {
      transition: opacity .15s, transform .35s var(--kb-ease-spring);
    }
  }

  @keyframes kb-pop-down {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  /* ---------- collapsed menu (80 px) ----------
     The icons keep their place: collapsed, the item's left padding grows so the 26 px icon sits in the
     middle of the 80 px menu (10 + 17 + 13 = 40). Labels and the long logo fade instead of disappearing,
     so the fold can animate (shell.js adds .kb-nav-anim to <html> only while the user folds). */
  @media (min-width: 769px) {
    .kb-logo {
      position: relative;
      overflow: hidden;
    }

    /* always laid out on wide screens (a fade cannot start from display: none) */
    .kb-logo__mini {
      position: absolute;
      inset: 0 auto 12px 50%;
      display: flex;
      justify-content: center;
      opacity: 0;
      transform: translateX(-50%);
      pointer-events: none;
    }

    html.nav-collapsed .kb-menu__label,
    html.nav-collapsed .kb-logo__mark {
      opacity: 0;
    }

    html.nav-collapsed .kb-logo__mini {
      opacity: 1;
    }

    html.nav-collapsed .kb-menu__item {
      padding-left: 17px !important;
    }

    html.nav-collapsed .kb-menu__collapse .kb-icon {
      transform: rotate(180deg);
    }
  }

  @media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    html.kb-nav-anim.kb-shell body {
      transition: grid-template-columns .34s var(--kb-ease-out);
    }

    html.kb-nav-anim .kb-menu {
      transition: width .34s var(--kb-ease-out);
    }

    html.kb-nav-anim.kb-shell::before {
      transition: left .34s var(--kb-ease-out);
    }

    html.kb-nav-anim .kb-menu__item {
      transition: color .2s, padding-left .34s var(--kb-ease-out);
    }

    /* unfolding: the long logo and the labels fade in once there is room */
    html.kb-nav-anim .kb-menu__label,
    html.kb-nav-anim .kb-logo__mark {
      transition: opacity .2s ease .16s;
    }

    html.kb-nav-anim .kb-logo__mini {
      transition: opacity .12s;
    }

    /* folding: they leave first, then the compact mark fades in */
    html.kb-nav-anim.nav-collapsed .kb-menu__label,
    html.kb-nav-anim.nav-collapsed .kb-logo__mark {
      transition: opacity .12s;
    }

    html.kb-nav-anim.nav-collapsed .kb-logo__mini {
      transition: opacity .2s ease .16s;
    }
  }

  /* ---------- topbar ---------- */
  .kb-topbar {
    grid-area: header;
    position: relative;
    z-index: 50;
    display: block;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 24px 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--kb-text) !important;
    color-scheme: var(--kb-shell-scheme);
    box-shadow: none !important;
    font-family: var(--kb-font) !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .kb-topbar :focus-visible {
    outline: 2px solid var(--kb-focus-ring) !important;
    outline-offset: 2px !important;
  }

  .kb-topbar__bar {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .kb-topbar__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  /* search: frosted field with the Ctrl K hint (behaviour: the Vue app in _AppBar) */
  .kb-search {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
  }

  /* keep the field's place while Vue mounts, so the topbar does not jump */
  .kb-search[v-cloak] {
    display: block;
    visibility: hidden;
  }

  .kb-search__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 5px 0 12px;
    border-radius: var(--kb-radius);
    background: var(--kb-frost);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--kb-frost-shadow);
    color: var(--kb-text-muted);
  }

  .kb-search__field:focus-within {
    background: var(--kb-card);
    box-shadow: inset 0 0 0 1px var(--kb-primary), 0 0 0 3px color-mix(in srgb, var(--kb-primary) 18%, transparent);
  }

  .kb-search__icon {
    flex: none;
    width: 16px !important;
    height: 16px !important;
  }

  .kb-search .kb-search__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-text) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: normal !important;
    outline: none !important;
    transition: none;
  }

  .kb-search .kb-search__input::placeholder {
    color: var(--kb-text-muted);
    opacity: 1;
  }

  .kb-search__kbd {
    flex: none;
    padding: 3px 7px;
    border: 1px solid var(--kb-line);
    border-radius: 3px;
    background: transparent;
    color: var(--kb-text-muted);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .kb-search__field:focus-within .kb-search__kbd {
    display: none;
  }

  /* icon buttons: search, notifications, phone menu toggle */
  .kb-search__go,
  .kb-topbar .notification-center__trigger,
  .kb-topbar__menu-toggle {
    position: relative;
    flex: none;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--kb-radius) !important;
    color: var(--kb-text) !important;
    font-size: 1rem !important;
    line-height: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
  }

  .kb-search__go {
    display: grid;
    width: 30px !important;
    height: 30px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-text-muted) !important;
  }

  .kb-topbar .notification-center__trigger,
  .kb-topbar__menu-toggle {
    display: grid;
    /* the icon's track is centred too: legacy buttons.css gives every button justify-content: space-between */
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    background: var(--kb-frost) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--kb-frost-shadow) !important;
  }

  /* the bell is round, like the app-switcher next to it */
  .kb-topbar .notification-center__trigger {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
  }

  .kb-search__go:hover {
    background: var(--kb-hover) !important;
    color: var(--kb-primary) !important;
  }

  .kb-topbar .notification-center__trigger:hover,
  .kb-topbar__menu-toggle:hover {
    background: var(--kb-card) !important;
    color: var(--kb-primary) !important;
  }

  .kb-search__go svg {
    width: 16px !important;
    height: 16px !important;
  }

  .kb-topbar .notification-center__trigger > svg,
  .kb-topbar__menu-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }

  .kb-topbar__menu-toggle {
    display: none;
  }

  /* search results */
  .kb-search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: min(500px, calc(100vh - 90px));
    margin: 0;
    padding: 6px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-card);
    background: var(--kb-card);
    color: var(--kb-text);
    box-shadow: var(--kb-shadow-pop);
  }

  .kb-search__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 2px !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: var(--kb-radius) !important;
    background: transparent !important;
    color: var(--kb-text) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    scroll-margin: 6px;
  }

  .kb-search__result:hover,
  .kb-search__result:focus {
    background: var(--kb-hover) !important;
  }

  .kb-search__result.is-active,
  .kb-search__more.is-active {
    background: color-mix(in srgb, var(--kb-primary) 10%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--kb-primary) !important;
    outline: none;
  }

  .kb-search__result strong {
    font-weight: 600;
  }

  .kb-search__result div div {
    font-family: var(--kb-font-mono);
    font-size: 13px;
    color: var(--kb-text-muted);
  }

  .kb-search__source {
    flex: none;
    margin: 0;
    font-size: 12px;
    color: var(--kb-text-muted);
    white-space: nowrap;
  }

  .kb-search__more {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 6px 0 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--kb-line) !important;
    border-radius: var(--kb-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-status-new-ink) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    scroll-margin: 6px;
  }

  .kb-search__more:hover {
    background: var(--kb-hover) !important;
  }

  /* app-switcher trigger (its own component; these are its documented colour hooks) */
  .kb-topbar kb-app-switcher {
    --kb-app-switcher-color: var(--kb-text);
    --kb-app-switcher-bg: var(--kb-frost);
    --kb-app-switcher-bg-hover: var(--kb-card);
    --kb-app-switcher-color-hover: var(--kb-primary);
    --kb-app-switcher-shadow: var(--kb-frost-shadow);
    margin: 0;
  }

  /* ---------- notification centre on tokens ---------- */
  .kb-topbar .notification-center {
    position: relative;
    margin: 0;
  }

  .kb-topbar .notification-center__badge {
    border-color: var(--kb-page);
    background: var(--kb-danger);
    color: var(--kb-danger-ink);
    line-height: 14px;
  }

  .kb-topbar .notification-center__panel {
    top: calc(100% + 10px);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius-card);
    background: var(--kb-card);
    color: var(--kb-text);
    box-shadow: var(--kb-shadow-pop);
    font-family: var(--kb-font);
    line-height: 1.4;
  }
  @media (prefers-reduced-motion: no-preference) {
    .kb-topbar .notification-center__panel:not([hidden]) { animation: kb-pop-down .18s var(--kb-ease-out); }
    .kb-topbar .notification-center__trigger { transition: background .2s, color .2s; }
  }

  /* the panel head is a <header>: pinned against page rules for header */
  .kb-topbar .notification-center__header {
    position: static;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--kb-line) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-text) !important;
  }

  .kb-topbar .notification-center__header span,
  .kb-topbar .notification-center__state,
  .kb-topbar .notification-section__label,
  .kb-topbar .notification-section__empty,
  .kb-topbar .notification-item__content span,
  .kb-topbar .notification-item__content time {
    color: var(--kb-text-muted);
  }

  .kb-topbar .notification-center__header button,
  .kb-topbar .notification-center__footer button,
  .kb-topbar .notification-item__read,
  .kb-topbar .notification-center__load-more {
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--kb-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kb-status-new-ink) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  .kb-topbar .notification-center__header button,
  .kb-topbar .notification-center__footer button {
    padding: 0 !important;
  }

  .kb-topbar .notification-item__read {
    padding: 5px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  .kb-topbar .notification-item__read:hover {
    background: var(--kb-chip) !important;
  }

  .kb-topbar .notification-center__load-more {
    width: calc(100% - 32px) !important;
    margin: 12px 16px !important;
    padding: 8px !important;
    border: 1px solid var(--kb-line) !important;
  }

  .kb-topbar .notification-center__load-more:hover {
    background: var(--kb-hover) !important;
  }

  .kb-topbar .notification-center__state--error {
    color: var(--kb-status-err-ink);
  }

  .kb-topbar .notification-section__label {
    border-bottom-color: var(--kb-line);
    background: color-mix(in srgb, var(--kb-page) 70%, var(--kb-card));
  }

  .kb-topbar .notification-section__empty,
  .kb-topbar .notification-item {
    border-bottom-color: var(--kb-line);
  }

  .kb-topbar .notification-item:hover {
    background: var(--kb-hover);
  }

  .kb-topbar .notification-item.is-unread {
    background: color-mix(in srgb, var(--kb-primary) 8%, transparent);
  }

  .kb-topbar .notification-item.is-unread .notification-item__dot {
    background: var(--kb-primary);
  }

  .kb-topbar .notification-item__link {
    color: inherit !important;
    text-decoration: none !important;
  }

  .kb-topbar .notification-center__footer {
    border-top: 1px solid var(--kb-line);
    background: transparent;
  }

  /* ---------- card ---------- */
  /* White and solid in light; frosted glass in dark (spec 4.3). Add .kb-card--flush for a card
     that holds a table edge to edge. */
  .kb-card {
    padding: 16px 18px;
    border-radius: var(--kb-radius-card);
    background: var(--kb-card-glass, var(--kb-card));
    box-shadow: var(--kb-shadow);
    color: var(--kb-text);
  }

  .kb-card--flush {
    padding: 0;
    overflow: clip;
  }

  :root[data-theme="dark"] .kb-card {
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 28px rgba(0, 0, 0, .35);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .kb-card {
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      backdrop-filter: blur(18px) saturate(150%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 28px rgba(0, 0, 0, .35);
    }
  }

  /* inside a subtree forced light (data-theme="light": a widget host, Proforma's own switch) a card is plain
     white again */
  :root [data-theme="light"] .kb-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--kb-shadow);
  }

  /* ---------- page head ---------- */
  /* <div class="kb-page-head">
       <div class="kb-page-head__text">
         <h1 class="kb-page-head__title">…</h1>
         <p class="kb-page-head__subtitle">…</p>        (optional)
       </div>
       <div class="kb-page-head__actions">…</div>     (optional)
     </div> */
  .kb-page-head {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 24px;
    height: auto;
    margin: 0 0 20px;
    padding: 0;
    background: none;
    box-shadow: none;
    color: inherit;
  }

  .kb-page-head__text {
    flex: 1 1 320px;
    min-width: 0;
  }

  .kb-page-head__title {
    margin: 0;
    font-family: var(--kb-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--kb-text);
  }

  .kb-page-head__subtitle {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--kb-text-muted);
  }

  .kb-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  /* ---------- phone and small tablet ---------- */
  @media (max-width: 768px) {
    html.kb-shell body {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "header"
        "main";
    }

    /* the menu becomes a drawer, opened by #menu-toggle (adds .open) */
    .kb-menu {
      z-index: 1000;
      visibility: hidden;
      transform: translateX(-100%);
    }

    .kb-menu.open {
      visibility: visible;
      transform: none;
      box-shadow: var(--kb-shadow-pop);
    }

    /* collapsing only exists on wider screens (as before) */
    .kb-menu__collapse {
      display: none;
    }

    .kb-topbar {
      padding: 10px 12px !important;
    }

    .kb-topbar__bar,
    .kb-topbar__actions {
      gap: 8px;
    }

    .kb-topbar__menu-toggle {
      display: grid;
    }

    .kb-search__kbd {
      display: none;
    }

    /* on a phone the profile chip is just the initials */
    .kb-profile__button {
      padding: 0 5px !important;
    }

    .kb-profile__name,
    .kb-profile__chevron {
      display: none;
    }

    html.kb-shell .kb-main {
      padding: 2px 12px 24px !important;
    }
  }

  @media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .kb-menu {
      transition: transform .3s var(--kb-ease-out), visibility 0s linear .3s;
    }

    .kb-menu.open {
      transition: transform .3s var(--kb-ease-out), visibility 0s;
    }
  }

  /* ---------- print: only the page content ---------- */
  @media print {
    html.kb-shell::before {
      display: none;
    }

    html.kb-shell body {
      display: block;
    }

    html.kb-shell .kb-menu,
    html.kb-shell .kb-topbar {
      display: none;
    }

    html.kb-shell .kb-main {
      padding: 0 !important;
    }

    /* Some page print CSS hides everything in <main> but its own root (e.g. TradeInDetails:
       main > :not(.trade-in-details)); the content sits one level down, inside the surface. */
    .kb-surface {
      display: block !important;
    }
  }
}