/* ════════════════════════════════════════════════════════════════════
   Toolbox token bridge (v8.1)
   The desk engine and its stylesheet (assets/css/tools.css) were ported
   from another theme and expect that theme's variable names. Without
   these the desk drew unstyled windows and giant black icons — the tools
   were "there but inaccessible". This maps every name onto the Ghatan
   palette, for the dark (default / "evening") and light ("daylight") themes.
   ════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="evening"],
[data-theme="dark"] {
  --text:        var(--text-1, #E8DEC8);
  --muted:       var(--text-2, rgba(232,222,200,.74));
  --line:        rgba(232, 222, 200, 0.12);
  --line-strong: rgba(232, 222, 200, 0.22);
  --btn-line:    rgba(232, 222, 200, 0.22);
  --surface:     #0F1B29;
  --surface-2:   #13212F;
  --panel:       #0C1622;
  --card:        #0F1B29;
  --card-line:   rgba(232, 222, 200, 0.10);
  --brass:       var(--gold, #B8973A);
  --gold-hi:     var(--gold-light, #D4AE54);
  --on-gold:     #0E1C2F;
  --on-brass:    #0E1C2F;
  --verdigris:   #5FA79A;
  --focus:       0 0 0 3px rgba(212, 174, 84, 0.45);
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: var(--ff-display, 'Archivo', Arial, sans-serif);
  --font-text:   var(--ff-body, 'Inter', system-ui, sans-serif);
  /* tools.css sizes ~180 elements with `font: … var(--sans)`. Undefined, those rules were
     dropped: that is why the Controls pill and labels came out oversized and letter-spaced. */
  --sans:        var(--ff-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --serif:       var(--ff-display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  --mono:        var(--ff-mono, 'IBM Plex Mono', ui-monospace, monospace);
  --radius-s:    6px;
  --radius-m:    10px;
  --radius-l:    16px;
  --header-h:    0px;
  --spot-edge:   rgba(212, 174, 84, 0.55);
  --spot-fill:   rgba(212, 174, 84, 0.10);
  --spot-glass:  rgba(8, 14, 23, 0.72);
  --spot-ink:    #E8DEC8;
  --spot-line:   rgba(212, 174, 84, 0.35);
  --spot-glow:   rgba(212, 174, 84, 0.25);
  --spot-gap:    6px;
  color-scheme: dark;
}
[data-theme="daylight"],
[data-theme="light"] {
  --text:        var(--text-1, #0E1C2F);
  --muted:       rgba(14, 28, 47, 0.68);
  --line:        rgba(14, 28, 47, 0.12);
  --line-strong: rgba(14, 28, 47, 0.24);
  --btn-line:    rgba(14, 28, 47, 0.22);
  --surface:     #FFFFFF;
  --surface-2:   #F4F5F7;
  --panel:       #FFFFFF;
  --card:        #FFFFFF;
  --card-line:   rgba(14, 28, 47, 0.10);
  --brass:       #96761E;
  --gold-hi:     #7E6216;
  --on-gold:     #FFFFFF;
  --on-brass:    #FFFFFF;
  --verdigris:   #2F7D70;
  --spot-glass:  rgba(255, 255, 255, 0.8);
  --spot-ink:    #0E1C2F;
  color-scheme: light;
}


/* ════════════════════════════════════════════════════════════════════
   Desk refinements (v8.1.1)
   Pieces the desk engine expects from the original theme's base CSS.
   ════════════════════════════════════════════════════════════════════ */

/* Tool picker ("Add a tool" / the Toolbox tray): compact app tiles with line icons
   (they rendered as big filled black shapes). */
.tapp__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 0.35rem; }
.desk-pick .tapp__a, .tapp__a {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.45rem;
  width: 100%; padding: 0.65rem 0.35rem 0.55rem; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--text); text-align: center; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.tapp__a:hover:not([disabled]), .tapp__a:focus-visible { background: color-mix(in srgb, var(--gold) 9%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); outline: none; }
.tapp__a:active:not([disabled]) { transform: scale(.97); }
.tapp__a[disabled] { opacity: .4; cursor: default; }
.tapp__a[aria-current="true"] { opacity: .55; }
.tapp__ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 11px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--gold-hi, var(--gold));
}
.tapp__ico svg, .desk-dragtool svg, .recall__card svg {
  width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.desk-pick.is-tray .tapp__ico { width: 2.5rem; height: 2.5rem; }
.desk-pick .tapp__t, .tapp__t { display: block; font: 500 0.75rem/1.25 var(--sans); color: var(--text); letter-spacing: 0; }
.tapp__cap { margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--line); font: 400 0.8125rem/1.45 var(--sans); color: var(--muted); }
.desk-pick.is-tray .tapp__cap { font-size: .8125rem; max-width: 18rem; }
.desk-pick__h { margin: 0 0 .5rem; font: 500 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi, var(--gold)); }
.desk-pick.is-tray .desk-pick__h { font: 500 .62rem/1 var(--mono); letter-spacing: .2em; }
.tapp__lh { margin: .9rem 0 .4rem; font: 500 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.desk-pick__lays, .tapp__lays { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.desk-pick__lays button, .tapp__lay { display: flex !important; align-items: center; gap: .6rem; padding: .5rem .7rem !important; font: 500 .8125rem/1.3 var(--sans); }
.desk-pick { padding: 1rem 1.1rem; }

/* Controls pill + "Add a tool" bubble: smaller, quieter, in brand type. */
.ctl-pill { padding: .45rem .8rem .45rem .7rem !important; gap: .4rem !important; font: 600 .8125rem/1 var(--sans) !important; letter-spacing: .01em !important; text-transform: none !important; bottom: 4.9rem; }
.ctl-pill svg { width: .95rem !important; height: .95rem !important; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ctl-pill circle { fill: var(--panel, #0C1622); }
.desk-bub, .desk-fab { font-family: var(--sans) !important; }
.desk-bub span, .desk-fab span { letter-spacing: 0 !important; text-transform: none !important; }
.desk__k { font: 500 .72rem/1 var(--mono) !important; letter-spacing: .16em !important; color: var(--muted) !important; }
.desk__bar button { font-family: var(--sans); }

/* Arrange-the-tools map: outline tiles, not solid black blocks. */
.win-map__t { background: color-mix(in srgb, var(--gold) 6%, var(--surface)) !important; border: 1px solid var(--line-strong) !important; color: var(--text); }
.win-map__t.is-me, .win-map__t.is-sel { border-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 16%, var(--surface)) !important; }

/* v8.2 · one size for the three floating buttons: "Add a tool", Auxiliary and the desk controls */
.desk-bub, .desk__fpill, .ctl-pill { min-height: 44px; }
.desk__fpill { padding: 0 .35rem 0 .85rem !important; gap: .45rem !important; align-items: center; border-radius: 999px; }
.desk__fpill-o { display: inline-flex; align-items: center; gap: .45rem; font: 600 .8125rem/1 var(--sans) !important; letter-spacing: .01em !important; text-transform: none !important; }
.desk__fpill-o svg { width: 1rem !important; height: 1rem !important; }
.desk__fpill-x { width: 28px !important; height: 28px !important; }
.desk-bub { font: 600 .8125rem/1 var(--sans) !important; }

/* v8.3 · Auxiliary › Settings in three separate groups */
.aux__set { display: grid; gap: 0; }
.aux__grp { display: grid; gap: .7rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.aux__grp:first-child { border-top: 0; padding-top: .25rem; }
.aux__grp .aux__stk { margin: 0; }
.aux__grp .aux__stadd { justify-self: start; background: transparent; color: var(--text); border-color: var(--line-strong); }
.aux__grp .aux__stadd:hover { border-color: var(--gold); }
.aux__grp--desk { background: color-mix(in srgb, var(--gold) 6%, transparent); margin: .25rem 0; padding: .9rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); }
.aux__grp--desk + .aux__grp { border-top: 0; }
.aux__deskrow { display: grid; grid-template-columns: 36px 1fr auto; gap: .75rem; align-items: center; }
.aux__deski { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.aux__deski svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; }
.aux__deskrow strong { display: block; font: 600 .875rem/1.3 var(--sans); color: var(--text); }
.aux__deskrow em { display: block; margin-top: .15rem; font: 400 .75rem/1.4 var(--sans); font-style: normal; color: var(--muted); }
.aux__deskbtn { height: 34px; padding: 0 .95rem; border-radius: 999px; border: 1px solid var(--gold); background: var(--gold); color: var(--on-gold, #0E1C2F); font: 600 .78rem/1 var(--sans); cursor: pointer; }

/* ── Brand scrollbars (v8.4): a slim gold-tinted thumb on a clear track, in every scrolling area ── */
html { scrollbar-color: rgba(150, 118, 30, .55) transparent; }
:root[data-theme="dark"], :root[data-theme="evening"] { scrollbar-color: rgba(201, 164, 92, .45) transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(150, 118, 30, .45) transparent; }
[data-theme="dark"] *, [data-theme="evening"] * { scrollbar-color: rgba(201, 164, 92, .38) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(150, 118, 30, .42); border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(150, 118, 30, .7); }
[data-theme="dark"] ::-webkit-scrollbar-thumb, [data-theme="evening"] ::-webkit-scrollbar-thumb { background-color: rgba(201, 164, 92, .36); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover, [data-theme="evening"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(201, 164, 92, .65); }
::-webkit-scrollbar-corner { background: transparent; }