/* KiQHub command deck (core/deck.js) — our own toolbar layout and a touch of 3D glass, in every design.
   Layout  All tools: a File menu button, the tabs in one segmented capsule (the open tab is a raised thumb),
           each group on its own glass tile with its title top-left and a round options button in the corner,
           big commands on 3D "keycaps" that lift on hover and press in; small commands stay quiet.
           Simple: one row of captioned keycaps and small clusters, "More" when the window is narrow.
   Material  tokens below: glass = light frosted, soft = calm solid, studio (and Dark theme) = graphite glass.
   Everything is keyed on html[data-deck], which deck.js sets: this file alone changes nothing. */

/* ── material tokens ─────────────────────────────────────────────────────────────────────────────────────────── */
html[data-deck] {
  --dk-blur: saturate(1.7) blur(22px);
  --dk-deck: rgba(249, 250, 253, .80);
  --dk-solid: #f8f9fc;                                  /* where blur cannot help (a peeked deck over the page) */
  --dk-rim: rgba(255, 255, 255, .92);
  --dk-edge: rgba(15, 23, 42, .075);
  --dk-deck-shadow: 0 12px 30px -10px rgba(30, 41, 59, .18), 0 2px 6px rgba(30, 41, 59, .06);
  --dk-spec: inset 0 1px 0 rgba(255, 255, 255, .95);     /* the specular top edge of every raised surface */
  --dk-sheen: linear-gradient(180deg, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .14) 22%, rgba(255, 255, 255, 0) 48%);
  --dk-tile: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .72));
  --dk-tile-shadow: 0 0 0 1px var(--dk-edge), 0 1px 2px rgba(15, 23, 42, .05), 0 5px 12px -6px rgba(15, 23, 42, .14), inset 0 1px 0 #fff;
  --dk-track: rgba(15, 23, 42, .055);
  --dk-track-edge: inset 0 1px 1.5px rgba(15, 23, 42, .10), inset 0 -1px 0 rgba(255, 255, 255, .8);
  --dk-track-seg: inset 0 1px 0 rgba(15, 23, 42, .075), inset 0 2px 0 rgba(15, 23, 42, .03), inset 0 -1px 0 rgba(255, 255, 255, .8);   /* no blur: tab segments meet without seams */
  --dk-thumb: linear-gradient(180deg, #fff, #f2f4f8);
  --dk-thumb-shadow: 0 0 0 .5px rgba(15, 23, 42, .12), 0 1px 2px rgba(15, 23, 42, .14), 0 3px 8px -3px rgba(15, 23, 42, .16), inset 0 1px 0 #fff;
  --dk-thumb-hover: rgba(255, 255, 255, .62);
  --dk-cap: linear-gradient(180deg, #fff 0%, #eef1f6 100%);
  --dk-cap-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 1px 1px rgba(15, 23, 42, .06), 0 3px 6px -2px rgba(15, 23, 42, .14), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(15, 23, 42, .045);
  --dk-cap-hover: 0 0 0 1px rgba(15, 23, 42, .10), 0 2px 3px rgba(15, 23, 42, .07), 0 8px 16px -6px rgba(15, 23, 42, .26), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(15, 23, 42, .045);
  --dk-cap-press: 0 0 0 1px rgba(15, 23, 42, .12), inset 0 1px 3px rgba(15, 23, 42, .18);
  --dk-cap-on: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, #fff), color-mix(in srgb, var(--accent) 19%, #fff));
  --dk-cap-on-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), inset 0 1px 3px color-mix(in srgb, var(--accent) 24%, transparent);
  --dk-hover: rgba(255, 255, 255, .94);
  --dk-hover-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .09), inset 0 1px 0 #fff;
  --dk-on: color-mix(in srgb, var(--accent) 13%, #fff);
  --dk-on-ink: color-mix(in srgb, var(--accent) 78%, #000);
  --dk-on-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent), inset 0 1px 2px color-mix(in srgb, var(--accent) 18%, transparent);
  --dk-field: rgba(255, 255, 255, .9);
  --dk-field-edge: rgba(15, 23, 42, .14);
  --dk-field-inset: inset 0 1px 2px rgba(15, 23, 42, .07);
  --dk-well: rgba(255, 255, 255, .5);
  --dk-ink: var(--text);
  --dk-ink-2: var(--text-2);
  --dk-title: #58606c;                                  /* tile titles: ≥ 4.5:1 on every tile colour */
  --dk-menu: rgba(255, 255, 255, .95);                  /* menus, dialogs, tooltips: ≥ .94 so busy pages stay readable */
  --dk-panel: rgba(252, 253, 255, .92);
  --dk-nav: rgba(249, 250, 253, .95);                   /* the File screen covers the deck: keep it calm */
  --dk-pop-shadow: 0 0 0 1px rgba(15, 23, 42, .07), 0 20px 44px -14px rgba(15, 23, 42, .32), 0 4px 12px -4px rgba(15, 23, 42, .12);
}
html[data-deck][data-skin=soft] {
  --dk-blur: none;
  --dk-deck: #f8f5f0;
  --dk-solid: #f8f5f0;
  --dk-rim: var(--border);
  --dk-edge: rgba(60, 45, 20, .11);
  --dk-deck-shadow: 0 10px 26px -12px rgba(60, 45, 20, .22), 0 1px 3px rgba(60, 45, 20, .07);
  --dk-spec: inset 0 1px 0 #fff;
  --dk-sheen: none;
  --dk-tile: linear-gradient(180deg, #fffefc, #fbf8f3);
  --dk-tile-shadow: 0 0 0 1px var(--dk-edge), 0 1px 2px rgba(60, 45, 20, .07), inset 0 1px 0 #fff;
  --dk-track: #ece6dc;
  --dk-track-edge: inset 0 1px 1.5px rgba(60, 45, 20, .12), inset 0 -1px 0 rgba(255, 255, 255, .85);
  --dk-track-seg: inset 0 1px 0 rgba(60, 45, 20, .09), inset 0 2px 0 rgba(60, 45, 20, .035), inset 0 -1px 0 rgba(255, 255, 255, .85);
  --dk-thumb: linear-gradient(180deg, #fffefb, #faf6ef);
  --dk-thumb-shadow: 0 0 0 .5px rgba(60, 45, 20, .16), 0 1px 3px rgba(60, 45, 20, .18), inset 0 1px 0 #fff;
  --dk-thumb-hover: rgba(255, 253, 250, .7);
  --dk-cap: linear-gradient(180deg, #fffefb, #f3eee6);
  --dk-cap-shadow: 0 0 0 1px rgba(60, 45, 20, .11), 0 1px 2px rgba(60, 45, 20, .09), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(60, 45, 20, .05);
  --dk-cap-hover: 0 0 0 1px rgba(60, 45, 20, .13), 0 6px 12px -6px rgba(60, 45, 20, .3), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(60, 45, 20, .05);
  --dk-cap-press: 0 0 0 1px rgba(60, 45, 20, .15), inset 0 1px 3px rgba(60, 45, 20, .18);
  --dk-cap-on: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, #fffdfa), color-mix(in srgb, var(--accent) 17%, #fffdfa));
  --dk-hover: #fffdfa;
  --dk-hover-shadow: 0 0 0 1px rgba(60, 45, 20, .11), 0 1px 2px rgba(60, 45, 20, .09);
  --dk-on: color-mix(in srgb, var(--accent) 12%, #fffdfa);
  --dk-field: #fffdfa;
  --dk-field-edge: var(--border-strong);
  --dk-field-inset: inset 0 1px 2px rgba(60, 45, 20, .07);
  --dk-well: #fffdfa;
  --dk-title: #6a6257;
  --dk-menu: var(--surface);
  --dk-panel: var(--surface);
  --dk-nav: #f6f2ec;
  --dk-pop-shadow: 0 0 0 1px rgba(60, 45, 20, .10), 0 18px 40px -14px rgba(60, 45, 20, .30), 0 4px 10px -4px rgba(60, 45, 20, .12);
}
html[data-deck][data-skin=studio], html[data-deck][data-skin=glass][data-theme=dark] {
  --dk-blur: saturate(1.5) blur(22px);
  --dk-deck: rgba(29, 32, 40, .86);
  --dk-solid: #1f2229;
  --dk-rim: rgba(255, 255, 255, .08);
  --dk-edge: rgba(255, 255, 255, .075);
  --dk-deck-shadow: 0 14px 36px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --dk-spec: inset 0 1px 0 rgba(255, 255, 255, .07);
  --dk-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 40%);
  --dk-tile: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03));
  --dk-tile-shadow: 0 0 0 1px var(--dk-edge), 0 1px 2px rgba(0, 0, 0, .35), 0 6px 14px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
  --dk-track: rgba(0, 0, 0, .3);
  --dk-track-edge: inset 0 1px 2px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .05);
  --dk-track-seg: inset 0 1px 0 rgba(0, 0, 0, .4), inset 0 2px 0 rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(255, 255, 255, .05);
  --dk-thumb: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .10));
  --dk-thumb-shadow: 0 0 0 .5px rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .16);
  --dk-thumb-hover: rgba(255, 255, 255, .07);
  --dk-cap: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045));
  --dk-cap-shadow: 0 0 0 1px rgba(255, 255, 255, .085), 0 1px 2px rgba(0, 0, 0, .45), 0 3px 8px -3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .13);
  --dk-cap-hover: 0 0 0 1px rgba(255, 255, 255, .13), 0 2px 4px rgba(0, 0, 0, .5), 0 9px 18px -6px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .17);
  --dk-cap-press: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 4px rgba(0, 0, 0, .55);
  --dk-cap-on: linear-gradient(180deg, color-mix(in srgb, var(--accent) 36%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
  --dk-cap-on-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 58%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 26%, transparent);
  --dk-hover: rgba(255, 255, 255, .085);
  --dk-hover-shadow: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  --dk-on: color-mix(in srgb, var(--accent) 28%, transparent);
  --dk-on-ink: #fff;
  --dk-on-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 52%, transparent);
  --dk-field: rgba(0, 0, 0, .22);
  --dk-field-edge: rgba(255, 255, 255, .13);
  --dk-field-inset: inset 0 1px 2px rgba(0, 0, 0, .35);
  --dk-well: rgba(0, 0, 0, .16);
  --dk-ink: #eceef2;
  --dk-ink-2: #c3c8d1;
  --dk-title: #a5acb7;
  --dk-menu: rgba(32, 35, 43, .96);
  --dk-panel: rgba(28, 31, 38, .93);
  --dk-nav: rgba(24, 27, 33, .95);
  --dk-pop-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 48px -14px rgba(0, 0, 0, .7), 0 4px 12px -4px rgba(0, 0, 0, .4);
}

/* ── the deck ────────────────────────────────────────────────────────────────────────────────────────────────── */
html[data-deck] .rb.deck {
  margin: 8px 10px 0; padding: 0; border-radius: 18px; position: relative; z-index: 4;
  background: var(--dk-deck); -webkit-backdrop-filter: var(--dk-blur); backdrop-filter: var(--dk-blur);
  border: 1px solid var(--dk-rim); box-shadow: var(--dk-deck-shadow), var(--dk-spec);
}
/* the soft top sheen sits behind the content (the deck is its own stacking context) */
html[data-deck] .rb.deck::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--dk-sheen);
}

/* head row: File · tab capsule · contextual capsule · … · switch · collapse */
html[data-deck] .rb.deck .rb-tabs { height: 44px; padding: 6px 8px 4px; gap: 0; align-items: center; }
html[data-deck] .rb.deck .rb-file {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; margin: 0 10px 0 0; flex: none;
  border-radius: 11px; background: var(--dk-cap); box-shadow: var(--dk-cap-shadow); color: var(--dk-ink); font-weight: 600; font-size: 13px;
  transition: transform .14s ease, box-shadow .14s ease;
}
html[data-deck] .rb.deck .rb-file:hover { background: var(--dk-cap); box-shadow: var(--dk-cap-hover); transform: translateY(-1px); filter: none; }
html[data-deck] .rb.deck .rb-file:active { box-shadow: var(--dk-cap-press); transform: translateY(.5px); }
html[data-deck] .rb.deck .rb-file .ico { filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .18)); }
html[data-deck] .rb.deck .rb-file .ico .ic-d { opacity: .9; }

/* tabs: one recessed capsule; each tab paints its piece of the track, the open tab a raised thumb */
html[data-deck] .rb.deck .rb-tab:not(.rb-file) {
  height: 32px; padding: 0 12px; margin: 0; border-radius: 0; isolation: isolate; flex: none;
  background: var(--dk-track); box-shadow: var(--dk-track-seg); color: var(--dk-ink-2); font-size: 13px; font-weight: 500;
}
html[data-deck] .rb.deck .dk-start + .rb-tab { border-radius: 999px 0 0 999px; padding-left: 14px; }
html[data-deck] .rb.deck .rb-tab:not(.rb-file):not(.ctx):has(+ .rb-tabs-fill, + .rb-ctx) { border-radius: 0 999px 999px 0; padding-right: 14px; }
html[data-deck] .rb.deck .rb-tab::after { display: none; }
html[data-deck] .rb.deck .rb-tab:not(.rb-file)::before {
  content: ""; display: block; position: absolute; inset: 3px 1px; border-radius: 999px; z-index: -1; opacity: 0;
  background: var(--dk-thumb-hover); box-shadow: none; transition: opacity .12s ease;
}
html[data-deck] .rb.deck .rb-tab:not(.rb-file):hover { color: var(--dk-ink); background: var(--dk-track); }
html[data-deck] .rb.deck .rb-tab:not(.rb-file):hover::before { opacity: 1; }
html[data-deck] .rb.deck .rb-tab.on:not(.rb-file) { color: var(--dk-ink); font-weight: 600; background-image: none; }
html[data-deck] .rb.deck .rb-tab.on:not(.rb-file)::before { opacity: 1; background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); }
html[data-deck] .rb.deck .dk-start + .rb-tab::before { left: 3px; }
/* contextual tabs (Table, Picture, Chart…): their own capsule in the object's colour, with its name */
html[data-deck] .rb.deck .rb-ctx {
  display: flex; align-items: center; height: 32px; margin-left: 8px; padding: 0 3px 0 11px; gap: 0; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--ctx) 12%, var(--dk-track)); box-shadow: var(--dk-track-edge), inset 0 0 0 1px color-mix(in srgb, var(--ctx) 26%, transparent);
}
html[data-deck] .rb.deck .rb-ctx-label {
  display: inline; margin-right: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: color-mix(in srgb, var(--ctx) 72%, var(--dk-ink));
}
html[data-deck] .rb.deck .rb-ctx .rb-tab.ctx { background: transparent; box-shadow: none; border-radius: 999px; height: 26px; padding: 0 11px; color: color-mix(in srgb, var(--ctx) 60%, var(--dk-ink)); }
html[data-deck] .rb.deck .rb-ctx .rb-tab.ctx::before { inset: 0; }
html[data-deck] .rb.deck .rb-ctx .rb-tab.ctx.on { color: var(--dk-ink); }
html[data-deck] .rb.deck .rb-ctx .rb-tab.ctx.on::before { box-shadow: var(--dk-thumb-shadow), inset 0 -2px 0 color-mix(in srgb, var(--ctx) 70%, transparent); }
html[data-deck] .rb.deck :is(.dk-start, .dk-end) { display: flex; align-items: center; flex: none; }
html[data-deck] .rb.deck .dk-end { margin-left: auto; padding-left: 8px; }
/* narrow window: the tab capsule scrolls under File and the switch */
html[data-deck] .rb.deck.dk-scroll .rb-tabs { padding-left: 0; padding-right: 0; }
html[data-deck] .rb.deck.dk-scroll .dk-start { position: sticky; left: 0; z-index: 2; padding: 0 12px 0 8px; background: linear-gradient(90deg, var(--dk-solid) calc(100% - 12px), transparent); }
html[data-deck] .rb.deck.dk-scroll .dk-end { position: sticky; right: 0; z-index: 2; padding: 0 8px 0 14px; background: linear-gradient(90deg, transparent, var(--dk-solid) 12px); }
html[data-deck] .rb.deck .rb-collapse {
  width: 30px; height: 30px; margin-left: 6px; border-radius: 50%; color: var(--dk-ink-2); flex: none;
  background: transparent; transition: background-color .12s ease;
}
html[data-deck] .rb.deck .rb-collapse:hover { background: var(--dk-hover); box-shadow: var(--dk-hover-shadow); }

/* Simple ↔ All tools switch (both modes) */
html[data-deck] .dk-switch {
  display: inline-flex; align-items: center; flex: none; height: 32px; padding: 3px; gap: 2px; margin-left: 8px; border-radius: 999px;
  background: var(--dk-track); box-shadow: var(--dk-track-edge);
}
html[data-deck] .dk-seg {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--dk-ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
html[data-deck] .dk-seg:hover:not(.on) { color: var(--dk-ink); background: var(--dk-thumb-hover); }
html[data-deck] .dk-seg.on { background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); color: var(--dk-ink); font-weight: 600; cursor: default; }
html[data-deck] .dk-seg .ico { opacity: .9; }

/* ── All tools body: groups on separate glass tiles ─────────────────────────────────────────────────────────── */
html[data-deck] .rb.deck .rb-body { height: 100px; padding: 2px 6px 7px; gap: 4px; align-items: stretch; }
html[data-deck] .rb.deck .rb-group {
  flex-direction: column; padding: 3px 4px; border-radius: 14px; flex: none;
  background: var(--dk-tile); box-shadow: var(--dk-tile-shadow);
}
html[data-deck] .rb.deck .rb-group + .rb-group::before { display: none; }
html[data-deck] .rb.deck .rb-group-label {
  order: -1; position: static; height: 15px; flex: none; justify-content: flex-start; padding: 0 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .015em; color: var(--dk-title);
}
html[data-deck] .rb.deck .rb-group-label:has(.rb-launcher) { padding-right: 24px; }
html[data-deck] .rb.deck .rb-group-label span:empty { visibility: hidden; }
html[data-deck] .rb.deck .rb-launcher {
  position: absolute; top: 3px; right: 3px; bottom: auto; width: 19px; height: 19px; border-radius: 50%; padding: 0;
  background: var(--dk-cap); box-shadow: var(--dk-cap-shadow); color: var(--dk-ink-2); transition: transform .12s ease, box-shadow .12s ease;
}
html[data-deck] .rb.deck .rb-launcher:hover { background: var(--dk-cap); box-shadow: var(--dk-cap-hover); color: var(--dk-ink); transform: translateY(-.5px); }
html[data-deck] .rb.deck .rb-launcher .ico { width: 11px; height: 11px; }
html[data-deck] .rb.deck .rb-group-items { padding-top: 1px; gap: 2px; align-items: flex-start; }
html[data-deck] .rb.deck .rb-stack { align-self: center; gap: 4px; }
/* three rows (Formulas › Function Library) only fit the tile tighter, starting right under its title */
html[data-deck] .rb.deck .rb-stack:has(> .rb-row:nth-child(3)) { align-self: flex-start; gap: 1px; padding-top: 0; margin-top: -1px; }
html[data-deck] .rb.deck .rb-stack:has(> .rb-row:nth-child(3)) .rb-btn.small { height: 22px; }
/* a group folded into one button (narrow window): the tile is just that keycap */
html[data-deck] .rb.deck .rb-group.rb-collapsed { justify-content: center; padding: 3px 1px; }
html[data-deck] .rb.deck .rb-group-btn { min-width: 54px; padding: 2px 2px 0; }
html[data-deck] .rb.deck .rb-group.rb-collapsed .rb-group-label { display: none; }

/* collapsed deck: only the head row; a tab click shows its tools as a card below */
html[data-deck] .rb.deck.collapsed .rb-tabs { padding-bottom: 6px; height: 46px; }
html[data-deck] .rb.deck.collapsed.peek .rb-body {
  top: calc(100% + 6px); left: -1px; right: -1px; height: 100px; padding: 7px 8px; border-radius: 18px;
  background: var(--dk-solid); border: 1px solid var(--dk-rim); box-shadow: var(--dk-deck-shadow), var(--dk-spec);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── controls (in the deck, in a folded group's popover and in Simple's "More") ─────────────────────────────── */
/* large commands: 3D icon on a glass keycap */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large {
  height: 70px; min-width: 52px; padding: 2px 5px 0; gap: 3px; border-radius: 12px; background: transparent; box-shadow: none; color: var(--dk-ink);
}
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-ico {
  width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border-radius: 11px; color: var(--dk-ink);
  background: var(--dk-cap); box-shadow: var(--dk-cap-shadow); transition: transform .14s ease, box-shadow .14s ease;
}
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-ico > .ico { width: 27px; height: 27px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-label { font-size: 11.5px; line-height: 1.12; color: var(--dk-ink); max-width: 80px; }
/* the menu caret follows the last word instead of taking a third line */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-label { display: block; text-align: center; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-label .ico { display: inline-block; vertical-align: 1px; margin-left: 2px; opacity: .7; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large:hover:not(:disabled) { background: transparent; box-shadow: none; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large:hover:not(:disabled) .rb-ico { transform: translateY(-1px); box-shadow: var(--dk-cap-hover); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large:active:not(:disabled) .rb-ico { transform: translateY(.5px); box-shadow: var(--dk-cap-press); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large.on { background: transparent; box-shadow: none; color: var(--dk-ink); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large.on .rb-ico { background: var(--dk-cap-on); box-shadow: var(--dk-cap-on-shadow); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large:disabled .rb-ico { box-shadow: 0 0 0 1px var(--dk-edge); background: transparent; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large:disabled .rb-label { opacity: .55; }
/* colour keycaps: the chosen colour is a bar under the glyph */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-color-ico { flex-direction: column; gap: 1px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-color-ico > .ico { width: 22px; height: 22px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-colorbar { width: 22px; height: 4px; margin-top: 0; border-radius: 2px; }
/* split keycaps: the options arrow is a small round badge on the keycap's corner */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split.large { position: relative; flex-direction: column; border-radius: 12px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split.large:hover { box-shadow: none; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split.large .rb-btn { height: 70px; border-radius: 12px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split.large .rb-split-arrow {
  position: absolute; z-index: 1; top: 27px; left: calc(50% + 11px); width: 18px; height: 18px; padding: 0; border-radius: 50%;
  background: var(--dk-cap); box-shadow: var(--dk-cap-shadow); color: var(--dk-ink-2); transition: transform .12s ease, box-shadow .12s ease;
}
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split.large .rb-split-arrow:hover:not(:disabled) { background: var(--dk-cap); box-shadow: var(--dk-cap-hover); color: var(--dk-ink); transform: translateY(-.5px); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split.large .rb-split-arrow .ico { width: 9px; height: 9px; }
/* small commands: quiet until hovered */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) :is(.rb-btn.small, .rb-btn.icon) { border-radius: 8px; color: var(--dk-ink); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.small { height: 23px; padding: 0 5px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.icon { width: 26px; height: 25px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) :is(.rb-btn.small, .rb-btn.icon, .rb-split-arrow:not(.large)):hover:not(:disabled) { background: var(--dk-hover); box-shadow: var(--dk-hover-shadow); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) :is(.rb-btn.small, .rb-btn.icon).on { background: var(--dk-on); color: var(--dk-on-ink); box-shadow: var(--dk-on-shadow); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split:not(.large) { border-radius: 8px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split:not(.large):hover { box-shadow: var(--dk-hover-shadow); background: var(--dk-hover); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split:not(.large):hover :is(.rb-btn, .rb-split-arrow):hover:not(:disabled) { box-shadow: none; background: color-mix(in srgb, var(--dk-ink) 6%, transparent); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split:not(.large) .rb-btn { border-radius: 8px 0 0 8px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split:not(.large) .rb-split-arrow { border-radius: 0 8px 8px 0; color: var(--dk-ink-2); }
/* fields and galleries sit in shallow recessed wells */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) :is(.rb-select, .rb-num) {
  border-radius: 8px; border: 1px solid var(--dk-field-edge); background: var(--dk-field); box-shadow: var(--dk-field-inset); color: var(--dk-ink);
}
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-select:hover { border-color: color-mix(in srgb, var(--dk-ink) 30%, transparent); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-select:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-select-arrow { color: var(--dk-ink-2); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery {
  border-radius: 11px; border: 1px solid var(--dk-field-edge); background: var(--dk-well); box-shadow: var(--dk-field-inset); margin-top: 0;
}
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery-items { padding: 2px; gap: 3px 2px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery-item { border-radius: 8px; border-color: transparent; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery-item:hover { background: var(--dk-hover); box-shadow: var(--dk-hover-shadow); border-color: transparent; }
/* the selected item: an inside outline, drawn over previews that paint their own background */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery-item.on { border-color: transparent; background: var(--dk-hover); box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-deck] :is(.rb-gallery-popover, .dk-gallery) .rb-gallery-item { border-radius: 9px; }
html[data-deck] :is(.rb-gallery-popover, .dk-gallery) .rb-gallery-item.on { border-color: transparent; box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery-side { border-left: 0; padding: 3px 3px 3px 0; gap: 2px; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery-nav { width: 18px; border-radius: 6px; color: var(--dk-ink-2); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-gallery-nav:hover { background: var(--dk-hover); box-shadow: var(--dk-hover-shadow); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-check:hover { background: var(--dk-hover); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) :is(.rb-numwrap, .rb-check, .rb-text) { color: var(--dk-ink-2); }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-sep { background: var(--dk-edge); }

/* ── Simple: one row ─────────────────────────────────────────────────────────────────────────────────────────── */
html[data-deck] .rb.deck.deck-simple .rb-tabs { display: none; }
html[data-deck] .rb.deck.deck-simple .rb-body,
html[data-deck] .rb.deck.deck-simple.collapsed .rb-body {
  display: flex; position: static; height: auto; min-height: 0; padding: 7px 10px 6px 8px; gap: 5px; align-items: flex-start;
  overflow: hidden; background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .rb-btn.large { height: auto; min-width: 50px; padding: 0 3px; gap: 3px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .rb-split.large .rb-btn { height: auto; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .rb-btn.large .rb-ico > .ico { width: 25px; height: 25px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .rb-btn.large .rb-label { white-space: nowrap; max-width: none; line-height: 14px; font-size: 11.5px; flex-direction: row; gap: 2px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .rb-split.large .rb-split-arrow { top: 25px; }
html[data-deck] .rb.deck.deck-simple .dk-file { margin-right: 7px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-caption { font-size: 11.5px; line-height: 14px; color: var(--dk-ink); white-space: nowrap; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-item > :first-child { margin: 2px 0; }
/* a cluster: small toggles in one recessed capsule, the pressed ones raised */
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster {
  display: flex; align-items: center; height: 34px; padding: 3px; gap: 1px; border-radius: 11px;
  background: var(--dk-track); box-shadow: var(--dk-track-edge);
}
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-btn.icon { width: 30px; height: 28px; border-radius: 8px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-btn.icon.has-menu { width: 38px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster :is(.rb-btn.icon, .rb-split-arrow):hover:not(:disabled) { background: var(--dk-thumb-hover); box-shadow: none; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-btn.icon.on { background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); color: var(--dk-on-ink); }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-split { height: 28px; border-radius: 8px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-split:hover { background: var(--dk-thumb-hover); box-shadow: none; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-split .rb-btn.icon { width: 28px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-split-arrow { width: 13px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-colorbar { width: 16px; height: 3px; margin-top: -2px; }
/* a "pill": a gallery shown as its current choice (Style: Heading 1) */
html[data-deck] .dk-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; min-width: 128px; max-width: 170px; padding: 0 10px 0 12px;
  border: 1px solid var(--dk-field-edge); border-radius: 10px; background: var(--dk-field); box-shadow: var(--dk-field-inset); color: var(--dk-ink); font-size: 13px; cursor: pointer;
}
html[data-deck] .dk-pill:hover { border-color: color-mix(in srgb, var(--dk-ink) 30%, transparent); }
html[data-deck] .dk-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-deck] .dk-pill .ico { color: var(--dk-ink-2); }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-item > .rb-select { height: 34px; border-radius: 10px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-item > .rb-select .rb-select-input { height: 32px; font-size: 13px; padding-left: 11px; }
html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-item > .rb-select .rb-select-arrow { height: 32px; width: 24px; }
/* KiQ AI keycap keeps the AI colours */
html[data-deck] :is(.rb.deck, .dk-pop) .dk-ai .rb-ico { background: linear-gradient(180deg, #fbf8ff, #efe7ff); }
html[data-deck][data-skin=studio] :is(.rb.deck, .dk-pop) .dk-ai .rb-ico, html[data-deck][data-theme=dark] :is(.rb.deck, .dk-pop) .dk-ai .rb-ico { background: linear-gradient(180deg, rgba(167, 139, 250, .30), rgba(124, 58, 237, .16)); }
/* the right end: object chips, More, the switch */
html[data-deck] .rb.deck.deck-simple .dk-fill { flex: 1 1 0; min-width: 0; }
html[data-deck] .rb.deck.deck-simple .dk-ctx { display: flex; gap: 6px; margin-top: 4px; flex: none; }
html[data-deck] .rb.deck.deck-simple .dk-ctx:empty { display: none; }
html[data-deck] .dk-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px 0 8px; border: 0; border-radius: 999px; flex: none; cursor: pointer;
  background: color-mix(in srgb, var(--ctx) 12%, var(--dk-hover)); color: color-mix(in srgb, var(--ctx) 62%, var(--dk-ink)); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ctx) 32%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--ctx) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .12s ease, box-shadow .12s ease;
}
html[data-deck] .dk-chip:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ctx) 45%, transparent), 0 6px 12px -5px color-mix(in srgb, var(--ctx) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); }
html[data-deck] .dk-chip > .ico:last-child { opacity: .7; }
html[data-deck] .rb.deck.deck-simple .dk-switch { margin: 3px 0 0 6px; }
html[data-deck] .rb.deck.deck-simple .rb-body > .dk-over { display: none; }
html[data-deck] .dk-more-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 4px; max-width: min(440px, 92vw); }

/* ── focus rings (keyboard only) ──────────────────────────────────────────────────────────────────────────────── */
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) :is(button, .rb-check):focus-visible, html[data-deck] :is(.dk-pill, .dk-seg, .dk-chip):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large:focus-visible { outline: 0; }
html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large:focus-visible .rb-ico { box-shadow: 0 0 0 2px var(--accent), var(--dk-cap-hover); }
html[data-deck] .rb.deck .rb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── narrow windows, phones, touch ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html[data-deck] .rb.deck .rb-tab:not(.rb-file) { padding: 0 9px; font-size: 12.5px; }
  html[data-deck] .rb.deck .dk-start + .rb-tab { padding-left: 11px; }
  html[data-deck] .rb.deck .rb-tabs .dk-seg span { display: none; }
  html[data-deck] .rb.deck .rb-tabs .dk-seg { padding: 0 8px; }
}
@media (max-width: 760px) {
  html[data-deck] .rb.deck { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
  html[data-deck] .rb.deck .dk-seg span { display: none; }
  html[data-deck] .rb.deck .dk-seg { padding: 0 8px; }
  html[data-deck] .rb.deck .rb-body { overflow-x: auto; }
  html[data-deck] .rb.deck.deck-simple .rb-body { overflow: hidden; padding-left: 6px; padding-right: 6px; }
  html[data-deck] .rb.deck .rb-ctx-label { display: none; }
}
@media (pointer: coarse) {
  html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.small { height: 32px; }
  html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.icon { width: 34px; height: 32px; }
  html[data-deck] .rb.deck .rb-tab:not(.rb-file), html[data-deck] .rb.deck .rb-file { height: 36px; }
  html[data-deck] .rb.deck .rb-launcher { width: 26px; height: 26px; }
  html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-split.large .rb-split-arrow { width: 24px; height: 24px; top: 24px; }
  /* clusters keep the keycaps' height so every caption stays on one line */
  html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster { height: 38px; padding: 2px; }
  html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-item > .dk-cluster { margin: 0; }
  html[data-deck] :is(.rb.deck.deck-simple, .dk-pop) .dk-cluster .rb-btn.icon { width: 36px; height: 34px; }
  html[data-deck] .rb.deck .rb-body { scrollbar-width: none; }
  html[data-deck] .rb.deck .rb-body::-webkit-scrollbar { display: none; }
  html[data-deck] .dk-seg { height: 32px; }
  html[data-deck] .dk-switch { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) *, html[data-deck] :is(.dk-chip, .rb-file) { transition: none !important; }
  html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) .rb-btn.large .rb-ico, html[data-deck] :is(.dk-chip, .rb-file, .rb-launcher, .rb-split-arrow) { transform: none !important; }
}
@media (forced-colors: active) {
  html[data-deck] :is(.rb.deck, .rb-pop, .dk-pop) :is(.rb-group, .rb-ico, .dk-cluster, .dk-switch, .dk-pill, .dk-chip) { border: 1px solid CanvasText; }
  html[data-deck] :is(.rb.deck, .dk-pop) :is(.rb-btn.on, .dk-seg.on, .rb-tab.on) { outline: 2px solid Highlight; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-deck] .rb.deck { background: var(--dk-solid); }
}

/* ── the rest of the chrome in the same material ─────────────────────────────────────────────────────────────── */
/* the home screen keeps the design's own top bar (office.css paints it navy, which hid the designs' dark text) */
html[data-deck][data-skin=glass] .app[data-view=home] .topbar, html[data-deck][data-skin=studio] .app[data-view=home] .topbar { background: var(--glass); }
html[data-deck][data-skin=soft] .app[data-view=home] .topbar { background: var(--surface); }
/* app switcher: the same capsule as the tabs */
html[data-deck] .apptabs { background: var(--dk-track); box-shadow: var(--dk-track-edge); border-radius: 13px; padding: 3px; gap: 2px; }
html[data-deck] .apptab { border-radius: 10px; color: var(--dk-ink-2); }
html[data-deck] .apptab:hover { background: var(--dk-thumb-hover); color: var(--dk-ink); }
/* the app colour, deepened so the label keeps 4.5:1 on the light thumb (green and orange are too light as text) */
html[data-deck] .apptab.on { background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); color: color-mix(in srgb, var(--tab-color) 72%, #000); font-weight: 600; }
html[data-deck][data-skin=studio] .apptab.on, html[data-deck][data-skin=glass][data-theme=dark] .apptab.on {
  color: #fff; box-shadow: var(--dk-thumb-shadow), 0 0 16px color-mix(in srgb, var(--tab-color) 32%, transparent);
}
/* top-bar buttons: glossy, with the specular edge */
html[data-deck] .tb-btn { border-radius: 10px; }
html[data-deck] .tb-btn:not(.solid):not(.ai) { background: var(--dk-cap); border-color: transparent; box-shadow: var(--dk-cap-shadow); color: var(--dk-ink); }
html[data-deck] .tb-btn:not(.solid):not(.ai):hover { box-shadow: var(--dk-cap-hover); }
/* white on the app colour needs a deeper tone for 4.5:1 (Spreadsheets green, Presentations orange) */
html[data-deck] .tb-btn.solid {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #000), color-mix(in srgb, var(--accent) 66%, #000)); border-color: transparent; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 4px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}
html[data-deck] .tb-btn.solid:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, #000), color-mix(in srgb, var(--accent) 62%, #000)); }
html[data-deck] .tb-btn.ai { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .1), 0 4px 12px -4px rgba(124, 58, 237, .6); }
html[data-deck] .tb-search input { background: var(--dk-field); box-shadow: var(--dk-field-inset), inset 0 0 0 1px var(--dk-field-edge); border-radius: 11px; color: var(--dk-ink); }
html[data-deck] .tb-search input:focus { background: var(--dk-field); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 0 0 1px var(--accent); }
html[data-deck] .tb-search input::placeholder, html[data-deck] .tb-search .ico { color: var(--dk-title); }   /* --muted is under 4.5:1 on the light fields */
html[data-deck] .tb-brand small { color: var(--dk-title); opacity: 1; }
/* status bar */
html[data-deck][data-skin] .statusbar { box-shadow: var(--dk-spec); border-top: 1px solid var(--dk-edge); color: var(--dk-ink-2); }
html[data-deck] .sb-btn { border-radius: 7px; }
html[data-deck] .sb-btn:hover { background: var(--dk-hover); box-shadow: var(--dk-hover-shadow); }
html[data-deck] .sb-btn.on { background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); color: var(--dk-ink); }
/* menus, popovers and tooltips */
html[data-deck] .k-menu {
  border-radius: 14px; padding: 5px; border: 1px solid var(--dk-rim); background: var(--dk-menu); color: var(--dk-ink);
  -webkit-backdrop-filter: saturate(1.8) blur(26px); backdrop-filter: saturate(1.8) blur(26px); box-shadow: var(--dk-pop-shadow), var(--dk-spec);
}
html[data-deck] .k-menu.k-popover { padding: 8px; }
html[data-deck] .k-menu-item { border-radius: 9px; }
html[data-deck] .k-menu-item.active, html[data-deck] .k-menu-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
html[data-deck] .k-menu-header { font-size: 11px; letter-spacing: .02em; color: var(--dk-title); }
html[data-deck] .k-menu-sep { background: var(--dk-edge); margin: 4px 8px; }
html[data-deck] .k-tip {
  border-radius: 10px; border: 1px solid var(--dk-rim); background: var(--dk-menu); color: var(--dk-ink); padding: 7px 11px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--dk-pop-shadow);
}
html[data-deck] .k-tip p { color: var(--dk-ink-2); }
/* dialogs */
html[data-deck] .k-modal {
  border-radius: 20px; border: 1px solid var(--dk-rim); background: var(--dk-menu); color: var(--dk-ink);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: var(--dk-pop-shadow), 0 40px 80px -30px rgba(15, 23, 42, .35), var(--dk-spec);
}
html[data-deck] .k-modal-head h2 { font-size: 16.5px; letter-spacing: -.01em; }
/* buttons, fields and segmented controls everywhere: keycaps, recessed wells, capsules */
html[data-deck] .k-btn { border-radius: 10px; }
html[data-deck] .k-btn:not(.primary):not(.danger):not(.ghost) { border-color: transparent; background: var(--dk-cap); box-shadow: var(--dk-cap-shadow); color: var(--dk-ink); }
html[data-deck] .k-btn:not(.primary):not(.danger):not(.ghost):hover:not(:disabled) { background: var(--dk-cap); box-shadow: var(--dk-cap-hover); }
html[data-deck] .k-btn:not(.ghost):active:not(:disabled) { box-shadow: var(--dk-cap-press); }
html[data-deck] .k-btn.primary {
  border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #000), color-mix(in srgb, var(--accent) 66%, #000)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 4px 12px -4px color-mix(in srgb, var(--accent) 65%, transparent);
}
html[data-deck] .k-btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, #000), color-mix(in srgb, var(--accent) 62%, #000)); }
html[data-deck] .k-btn.danger { border-color: transparent; background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 82%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px -4px color-mix(in srgb, var(--danger) 60%, transparent); }
html[data-deck] .k-input { border-radius: 10px; border-color: var(--dk-field-edge); background: var(--dk-field); box-shadow: var(--dk-field-inset); color: var(--dk-ink); }
html[data-deck] .k-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-deck] .k-seg { background: var(--dk-track); box-shadow: var(--dk-track-edge); border-radius: 11px; padding: 3px; }
html[data-deck] .k-seg button { border-radius: 8px; }
html[data-deck] .k-seg button.on { background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); color: var(--dk-ink); }
/* side panel (KiQ AI, comments, format panes): a floating glass card like the deck */
html[data-deck] .sidepanel { background: var(--dk-panel); -webkit-backdrop-filter: var(--dk-blur); backdrop-filter: var(--dk-blur); border-left: 1px solid var(--dk-edge); }
@media (min-width: 761px) {
  html[data-deck] .sidepanel { margin: 8px 10px 8px 0; border-radius: 18px; border: 1px solid var(--dk-rim); box-shadow: var(--dk-deck-shadow), var(--dk-spec); overflow: hidden; }
}
html[data-deck] .sp-head { border-bottom-color: var(--dk-edge); }
html[data-deck] .sp-tab.on { background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); color: var(--dk-ink); }
html[data-deck] :is(.ai-sugg button, .cm-thread) { border: 0; border-radius: 12px; background: var(--dk-tile); box-shadow: var(--dk-tile-shadow); }
html[data-deck] .ai-sugg button:hover { box-shadow: var(--dk-tile-shadow), 0 0 0 1.5px color-mix(in srgb, #8b5cf6 55%, transparent); background: var(--dk-tile); }
html[data-deck] .cm-thread.on { box-shadow: var(--dk-tile-shadow), 0 0 0 2px var(--accent); }
html[data-deck] .ai-input textarea { border-radius: 12px; background: var(--dk-field); border-color: var(--dk-field-edge); box-shadow: var(--dk-field-inset); }
/* File screen: a glass navigation column instead of a solid coloured one */
html[data-deck] .backstage .bs-nav {
  background: var(--dk-nav) !important;                 /* backstage.js paints the app colour inline */
  -webkit-backdrop-filter: var(--dk-blur); backdrop-filter: var(--dk-blur);
  color: var(--dk-ink); border-right: 1px solid var(--dk-edge); padding: 12px 10px; gap: 2px; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .4);
}
html[data-deck] .backstage .bs-nav button { color: var(--dk-ink-2); height: 38px; padding: 0 12px; border-radius: 11px; font-size: 13.5px; flex: none; }
html[data-deck] .backstage .bs-nav button:hover { background: var(--dk-hover); box-shadow: var(--dk-hover-shadow); color: var(--dk-ink); }
html[data-deck] .backstage .bs-nav button.on { background: var(--dk-thumb); box-shadow: var(--dk-thumb-shadow); color: var(--dk-ink); font-weight: 600; }
html[data-deck] .backstage .bs-nav .bs-back { height: 40px; margin-bottom: 6px; color: var(--dk-ink); font-weight: 600; }
html[data-deck][data-skin=glass] .bs-main { background: color-mix(in srgb, var(--surface) 97%, transparent); }
html[data-deck] .backstage .bs-nav hr { border-top-color: var(--dk-edge); margin: 6px 8px; }
/* the icons get their colour back (icons.css keeps them monochrome on the old coloured column) */
html[data-deck] .backstage .bs-nav .ico .ic-d { fill: var(--ic-tone); opacity: calc(var(--ic-tint) + .08); }
html[data-deck] .backstage .bs-nav .ico .ic-o { fill: currentColor; }
html[data-deck] .backstage .bs-nav button.on .ico { color: var(--accent); }
/* KeyTips: small glossy chips */
html[data-deck] .kt { border-radius: 6px; background: linear-gradient(180deg, #474d59, #262a32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(0, 0, 0, .35); }
html[data-deck][data-theme=dark] .kt { background: linear-gradient(180deg, #fff, #e3e6ec); color: #111; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .5); }
html[data-deck] .k-toast { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 32px -10px rgba(0, 0, 0, .45); }
/* notes above the deck float with it in every design */
html[data-deck][data-skin=soft] .save-bar { margin: 8px 10px 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
html[data-deck][data-skin=soft] .note-bar { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-deck][data-skin] .save-bar { box-shadow: var(--dk-spec); }

/* Glass with the Dark theme: the glass tokens in skins.css are light, so give it the graphite material */
html[data-deck][data-skin=glass][data-theme=dark] {
  --bg: #121419; --glass: rgba(26, 29, 36, .72); --glass-strong: rgba(30, 33, 41, .84); --glass-rim: rgba(255, 255, 255, .08); --glass-edge: rgba(255, 255, 255, .07);
}
html[data-deck][data-skin=glass][data-theme=dark] .app {
  background: radial-gradient(1000px 520px at 0% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(168, 85, 247, .13), transparent 58%), linear-gradient(180deg, #15171c, #0f1115);
}
html[data-deck][data-skin=glass][data-theme=dark] :is(.topbar .k-icon-btn, .tb-brand, .tb-status):hover { background: rgba(255, 255, 255, .08); }
html[data-deck][data-skin=glass][data-theme=dark] .tb-title:focus { background: var(--surface-3); color: var(--text); }
html[data-deck][data-skin=glass][data-theme=dark] .home-nav { background: rgba(26, 29, 36, .6); border-right-color: rgba(255, 255, 255, .06); }
html[data-deck][data-skin=glass][data-theme=dark] .home-nav button.on, html[data-deck][data-skin=studio] .home-nav button.on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
html[data-deck][data-skin=glass][data-theme=dark] :is(.new-card, .file-card, .bs-tile):hover { background: rgba(255, 255, 255, .08); }
html[data-deck][data-skin=glass][data-theme=dark] .k-menu::before, html[data-deck][data-skin=glass][data-theme=dark] .k-modal::before { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%); }