/* kc-app.css — the few rules the Knowledge Center's Design Components cannot
   say inline. Everything else lives in the components (kc/*.dc.html). */

/* kc-auth.js's floating account pill: this build has the profile menu in the
   sidebar, so the pill would be a second, differently-styled way in. */
.kc-auth-btn { display: none !important; }

/* The product wordmark returns to the public landing page, not an app route. */
.kc-home-link { display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;border-radius:6px;color:var(--ink,#24212B);text-decoration:none; }
.kc-home-link:hover { color:var(--ink,#24212B);text-decoration:none; }

/* Every interactive element gets a visible focus ring (WCAG 2.2 AA). */
:focus-visible { outline: 2px solid #7C8CFF; outline-offset: 2px; }

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

/* ---------------------------------------------------------------------------
   PERSONALISE — where the panel's choices reach. kc-personalise.js
   (window.KCPersonal) stamps data-wall / data-accent / data-glass /
   data-stars / data-kc-ground / data-personal-accent on <html> and sets the
   colour tokens inline; these rules carry them to the places a token alone
   cannot reach. This file loads in the head, so they hold for the very
   first paint.
   ------------------------------------------------------------------------- */

/* The first frame, before any component has drawn: the member's ground. */
html { background-color: var(--kc-paint, #F3F1EE); }
:root[data-theme="dark"] { color-scheme: dark; }

/* WALLPAPER and STARS on the screens that paint their own ground. The shell
   hands every screen --pg-bg; Today draws a sky of its own (kc/today.html),
   so a chosen wallpaper — or stars off on a dark ground — replaces it with
   the member's ground (--kc-ground). Today's hero card keeps its sky. */
:root[data-kc-ground] [data-sc-name="Today"] > div:first-child { background: var(--kc-ground) fixed !important; }

/* ACCENT as text. The design's blue (--t-2434DE) and the primary are both a
   white label's background and, here and there, a colour for text. No one
   colour can be both on a dark ground, so text that uses them reads the
   fitted accent ink instead — on dark grounds always, on light ones when the
   member has picked an accent. (A chosen accent does NOT flatten Aurora's
   filled controls to one colour: it re-hues their gradient, --au-grad.) */
:root[data-accent][data-theme="dark"] :is([style^="color: var(--t-2434DE"], [style*="; color: var(--t-2434DE"], [style^="color: var(--primary"], [style*="; color: var(--primary"], [style^="color: var(--t-1A27A6"], [style*="; color: var(--t-1A27A6"]),
:root[data-personal-accent="custom"] :is([style^="color: var(--t-2434DE"], [style*="; color: var(--t-2434DE"], [style^="color: var(--primary"], [style*="; color: var(--primary"], [style^="color: var(--t-1A27A6"], [style*="; color: var(--t-1A27A6"]) {
  color: var(--kc-ink-acc) !important;
}

/* GLASS. Clear: cards let the ground through, blurred behind them. (Aurora's
   cards read --card-fill, which kc-personalise.js sets; Solid makes the
   tokens opaque there, and the block after this one takes the blur away.)
   Aurora draws a card's gradient edge as a
   border-box layer UNDER the fill, so a see-through fill would show the whole
   edge gradient across the card: Clear cards take a plain hairline instead. */
:root[data-look="aurora"][data-glass="clear"] :is(section[style*="--surface"], section[style*="--t-FBF8F4"]) { background: var(--card-fill) !important; border: 1px solid var(--card-edge) !important; }
:root[data-glass="clear"] [style*="background: var(--surface"] { background: color-mix(in srgb, var(--surface, #FAF9F7) 55%, transparent) !important; }
:root[data-glass="clear"] [style*="background: var(--t-FBF8F4"] { background: color-mix(in srgb, var(--t-FBF8F4, #FBF8F4) 55%, transparent) !important; }
:root[data-glass="clear"] [style*="background: var(--t-FFFFFF"] { background: color-mix(in srgb, var(--t-FFFFFF, #FFFFFF) 55%, transparent) !important; }
/* (A backdrop filter makes its box the frame for any position:fixed inside
   it — Health's metric explainer is one — so a card holding an open dialog
   goes without the blur while it is open.) */
:root[data-glass="clear"] :is(section[style*="--surface"], section[style*="--t-FBF8F4"], [style*="background: var(--surface"], [style*="background: var(--t-FBF8F4"], [style*="background: var(--t-FFFFFF"], [style*="background: var(--mk-g"], [style*="background: var(--ta-card"]):not(:has([style*="position: fixed"])) {
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* SOLID is both a choice and the response to an OS accessibility preference
   (kc-personalise.js paints Solid while the OS asks for reduced
   transparency, without changing the stored choice). Background colour under
   any remaining decoration is fully opaque. */
:root[data-glass="solid"] [style*="backdrop-filter"],
:root[data-glass="solid"] [role="dialog"],
:root[data-glass="solid"] .kc-tool-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: var(--surface,#fff) !important;
}
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

#kc-personalise-panel { box-sizing:border-box; }
#kc-personalise-panel [data-personal-group] button { flex-shrink:0; }
.kc-desktop-utilities { display:flex;flex-wrap:wrap;gap:6px;padding:0 6px 12px; }
.kc-desktop-utilities a { flex-basis:100%;padding:6px;color:var(--muted,#5E5A66);font-family:inherit;font-weight:600;font-size:12px;line-height:1.3;text-underline-offset:3px; }
.kc-desktop-utilities button { flex:1;min-width:0;min-height:40px;padding:6px;border:1px solid var(--line,#DCD8D2);border-radius:10px;background:transparent;color:var(--muted,#5E5A66);font-family:inherit;font-size:12px;font-weight:600;line-height:1.3;cursor:pointer; }
.kc-desktop-utilities button:hover { background:var(--soft,#EAE7E3);color:var(--ink,#24212B); }
.kc-tool-scrim { position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:24px;background:rgba(5,8,14,.58);box-sizing:border-box; }
.kc-tool-card { box-sizing:border-box;width:min(100%,410px);max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:1px solid var(--line,#DCD8D2);border-radius:24px;background:var(--surface,#fff);color:var(--ink,#24212B);box-shadow:0 24px 90px rgba(0,0,0,.25);font:400 14px/1.6 "Geist",system-ui,sans-serif; }
.kc-tool-card h2 { margin:0;font:600 23px/1.25 "Geist",system-ui,sans-serif;letter-spacing:-.035em; }
.kc-tool-head { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.kc-tool-card button { min-height:44px;padding:9px 16px;border:1px solid var(--line,#DCD8D2);border-radius:12px;background:transparent;color:inherit;font:600 13px/1.4 "Geist",system-ui,sans-serif;cursor:pointer; }
.kc-tool-card .kc-tool-close { flex:none;width:44px;padding:0;font-size:24px; }
.kc-tool-copy { margin:14px 0 20px;color:var(--muted,#5E5A66); }
.kc-tool-qr { width:190px;max-width:100%;padding:12px;box-sizing:border-box;margin:0 auto 20px;background:#fff;border-radius:12px; }
.kc-tool-qr svg { display:block;width:100%;height:auto; }
.kc-tool-link { box-sizing:border-box;width:100%;min-height:44px;padding:10px;border:1px solid var(--line,#DCD8D2);border-radius:10px;color:var(--ink,#24212B);background:var(--tile,#EEE8E3);font:400 11px/1.4 "Geist Mono",monospace; }
.kc-tool-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:18px; }
.kc-tool-card .kc-tool-primary { margin-left:auto;color:#fff;background:var(--primary,#3350FF);border-color:transparent; }
.kc-tool-status { min-height:1.6em;margin:12px 0 0;color:var(--muted,#5E5A66);font-size:12px; }
.kc-tool-eyebrow { margin:0 0 12px;font:500 10px/1.5 "Geist Mono",monospace;letter-spacing:.14em;color:var(--muted,#5E5A66); }
.kc-tour-scrim { place-items:end;background:rgba(5,8,14,.25); }
.kc-tour-target { outline:3px solid var(--primary,#3350FF)!important;outline-offset:4px!important; }
@media (max-width:767px) {
  #kc-personalise-panel { left:16px !important;right:16px;bottom:16px !important;width:auto !important; }
  .kc-tool-scrim { padding:16px; }
  .kc-tool-card { max-height:calc(100dvh - 32px);padding:20px; }
}