/*
  App looks — structure and the picker. The palettes are generated at runtime
  by js/platform/app-looks.js into the same @layer (app-looks). Layered
  !important outranks the window colour layer's unlayered !important, so
  everything a look changes is declared !important inside the layer.

  Rules here only touch chrome (ribbon strips, header chips), type, corners
  and shadows — colour comes from the palette tokens. The protocol film
  (.adf) is footage with its own palette and is never touched.
*/

@font-face { font-family: "AppLookGeist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist/files/geist-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "AppLookPlex"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans/files/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "AppLookInstrumentSerif"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "AppLookFigtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree/files/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "AppLookInterTight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight/files/inter-tight-latin-wght-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------ The picker */

.app-look-picker { display: flex; align-items: center; height: 100%; padding: 0 2px 0 6px; flex: none; }
#os.theme-macos .app-look-picker { order: 5; height: auto; padding: 0; margin-left: 6px; }
.app-look-trigger {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 16px; height: 16px; padding: 0; flex: none; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .28); border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
  transition: transform .12s ease, box-shadow .12s ease;
}
#os.theme-macos .app-look-trigger { width: 14px; height: 14px; }
#os.theme-macos .window:not(.focused) .app-look-trigger { opacity: .55; }
.window[data-app-color-tone="dark"] .app-look-trigger { border-color: rgba(255, 255, 255, .42); }
.app-look-trigger:hover { transform: scale(1.12); }
.app-look-trigger:focus-visible { outline: 2px solid var(--accent, #3d5a80); outline-offset: 2px; }
.app-look-trigger[aria-expanded="true"] { box-shadow: 0 0 0 1.5px var(--titlebar-bg, #fff), 0 0 0 2.5px var(--ink, #1c232c); }

/* Emblems: a tiny version of each look. */
.app-look-trigger[data-look="studio"] { background: radial-gradient(circle, #ffffff 0 30%, transparent 33%), conic-gradient(from 200deg, #3d5a80, #8ea8c8, #d7dee8, #3d5a80); }
.app-look-trigger[data-look="classic"] { background: conic-gradient(from 210deg, #22d3ee, #3b82f6, #42c7b9, #22d3ee); }
.app-look-trigger[data-look="hairline"] { background: radial-gradient(circle, transparent 0 42%, #0a0a0a 45% 52%, transparent 55%), #ffffff; }
.app-look-trigger[data-look="hairline-dark"] { background: radial-gradient(circle, transparent 0 42%, #ededed 45% 52%, transparent 55%), #0a0a0a; }
.app-look-trigger[data-look="linen"] { background: radial-gradient(circle, #2383e2 0 26%, transparent 29%), #fbfbfa; }
.app-look-trigger[data-look="ledger"] { background: radial-gradient(circle, #635bff 0 34%, transparent 37%), #f6f8fb; }
.app-look-trigger[data-look="sage"] { background: radial-gradient(circle, #3f6f5a 0 34%, transparent 37%), #eef2ef; }
.app-look-trigger[data-look="graphite"] { background: radial-gradient(circle at 50% 30%, #a3aaea 0 12%, #5e67b8 44%, #121316 80%); }
.app-look-trigger[data-look="editorial"] { background: linear-gradient(135deg, #f4f1ea 0 50%, #9c4a26 50%); }
.app-look-trigger[data-look="engineered"] { background: linear-gradient(#0f62fe, #0f62fe) 0 45% / 100% 2px no-repeat, linear-gradient(#161616 0 45%, #f4f4f4 45%); }

.win-theme-panel.app-look-panel {
  display: block; width: 560px; max-width: calc(100vw - 16px);
  max-height: min(640px, calc(100vh - 16px)); overflow: auto; padding: 10px;
}
.app-look-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 6px 10px; }
.app-look-head strong { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.app-look-head span { font-size: 12px; opacity: .6; }
.app-look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.app-look-option {
  appearance: none; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px;
  width: 100%; padding: 6px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.app-look-option:hover { background: var(--win-hover-bg, var(--hover, rgba(15, 23, 42, .06))); }
.app-look-option.is-on { border-color: color-mix(in srgb, var(--accent, #3d5a80) 55%, transparent); background: var(--accent-soft, rgba(61, 90, 128, .1)); }
.app-look-option:focus-visible { outline: 2px solid var(--accent, #3d5a80); outline-offset: 1px; }
.app-look-copy { display: grid; gap: 2px; min-width: 0; }
.app-look-copy strong { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.app-look-copy small { font-size: 11px; line-height: 1.3; opacity: .68; }
.app-look-foot { display: flex; justify-content: flex-end; padding: 10px 4px 2px; margin-top: 6px; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.app-look-all {
  appearance: none; height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line, rgba(0,0,0,.14)); background: var(--surface, #fff); color: var(--ink, #1c232c);
}
.app-look-all:hover { background: var(--surface-2, #f3f5f8); }

/* Previews: a header bar, a side column, two cards and a button. */
.app-look-preview { position: relative; display: block; width: 92px; height: 58px; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.app-look-preview i { position: absolute; display: block; }
.app-look-preview .pv-bar { left: 0; right: 0; top: 0; height: 13px; }
.app-look-preview .pv-tab { top: 5px; height: 3px; width: 16%; border-radius: 2px; }
.app-look-preview .pv-tab.a { left: 8%; }
.app-look-preview .pv-tab.b { left: 28%; opacity: .5; }
.app-look-preview .pv-side { left: 0; top: 13px; bottom: 0; width: 26%; }
.app-look-preview .pv-card { left: 32%; right: 6%; height: 13px; border-radius: 3px; }
.app-look-preview .pv-card.c1 { top: 19px; }
.app-look-preview .pv-card.c2 { top: 36px; right: 36%; }
.app-look-preview .pv-btn { right: 6%; top: 38px; width: 22%; height: 9px; border-radius: 3px; }

.app-look-preview[data-look="studio"] { background: #f4f5f7; }
.app-look-preview[data-look="studio"] .pv-bar { background: #fff; box-shadow: inset 0 -1px 0 #e1e5ea; }
.app-look-preview[data-look="studio"] .pv-tab { background: #3d5a80; }
.app-look-preview[data-look="studio"] .pv-side { background: #fff; box-shadow: inset -1px 0 0 #e1e5ea; }
.app-look-preview[data-look="studio"] .pv-card { background: #fff; box-shadow: inset 0 0 0 1px #e1e5ea; }
.app-look-preview[data-look="studio"] .pv-btn { background: #3d5a80; }

.app-look-preview[data-look="classic"] { background: #0b1220; }
.app-look-preview[data-look="classic"] .pv-bar { background: linear-gradient(90deg, #22d3ee, #3b82f6); }
.app-look-preview[data-look="classic"] .pv-tab { background: #fff; }
.app-look-preview[data-look="classic"] .pv-side { background: #121c2c; }
.app-look-preview[data-look="classic"] .pv-card { background: #182538; }
.app-look-preview[data-look="classic"] .pv-btn { background: #42c7b9; }

.app-look-preview[data-look="hairline"] { background: #fafafa; }
.app-look-preview[data-look="hairline"] .pv-bar { background: #fff; box-shadow: inset 0 -1px 0 #eaeaea; }
.app-look-preview[data-look="hairline"] .pv-tab { background: #0a0a0a; }
.app-look-preview[data-look="hairline"] .pv-side { background: #fff; box-shadow: inset -1px 0 0 #eaeaea; }
.app-look-preview[data-look="hairline"] .pv-card { background: #fff; box-shadow: inset 0 0 0 1px #eaeaea; }
.app-look-preview[data-look="hairline"] .pv-btn { background: #0a0a0a; }

.app-look-preview[data-look="hairline-dark"] { background: #000; }
.app-look-preview[data-look="hairline-dark"] .pv-bar { background: #0a0a0a; box-shadow: inset 0 -1px 0 #242424; }
.app-look-preview[data-look="hairline-dark"] .pv-tab { background: #ededed; }
.app-look-preview[data-look="hairline-dark"] .pv-side { background: #0a0a0a; box-shadow: inset -1px 0 0 #242424; }
.app-look-preview[data-look="hairline-dark"] .pv-card { background: #0a0a0a; box-shadow: inset 0 0 0 1px #2e2e2e; }
.app-look-preview[data-look="hairline-dark"] .pv-btn { background: #ededed; }

.app-look-preview[data-look="linen"] { background: #fbfbfa; }
.app-look-preview[data-look="linen"] .pv-bar { background: #f7f7f5; box-shadow: inset 0 -1px 0 #ececea; }
.app-look-preview[data-look="linen"] .pv-tab { background: #37352f; }
.app-look-preview[data-look="linen"] .pv-side { background: #f7f7f5; }
.app-look-preview[data-look="linen"] .pv-card { background: #fff; box-shadow: inset 0 0 0 1px #ececea; }
.app-look-preview[data-look="linen"] .pv-btn { background: #2383e2; }

.app-look-preview[data-look="ledger"] { background: #f6f8fb; }
.app-look-preview[data-look="ledger"] .pv-bar { background: #fff; box-shadow: inset 0 -1px 0 #e3e8ee; }
.app-look-preview[data-look="ledger"] .pv-tab { background: #635bff; }
.app-look-preview[data-look="ledger"] .pv-side { background: #fff; box-shadow: inset -1px 0 0 #e3e8ee; }
.app-look-preview[data-look="ledger"] .pv-card { background: #fff; box-shadow: 0 1px 2px rgba(60,66,87,.12), inset 0 0 0 1px #e3e8ee; }
.app-look-preview[data-look="ledger"] .pv-btn { background: #635bff; }

.app-look-preview[data-look="sage"] { background: #f3f5f3; }
.app-look-preview[data-look="sage"] .pv-bar { background: #fff; box-shadow: inset 0 -1px 0 #dfe6e1; }
.app-look-preview[data-look="sage"] .pv-tab { background: #3f6f5a; }
.app-look-preview[data-look="sage"] .pv-side { background: #eef2ef; }
.app-look-preview[data-look="sage"] .pv-card { background: #fff; box-shadow: inset 0 0 0 1px #dfe6e1; }
.app-look-preview[data-look="sage"] .pv-btn { background: #3f6f5a; }

.app-look-preview[data-look="graphite"] { background: #0f1012; }
.app-look-preview[data-look="graphite"] .pv-bar { background: #141518; box-shadow: inset 0 -1px 0 #26282d; }
.app-look-preview[data-look="graphite"] .pv-tab { background: #8a93e0; }
.app-look-preview[data-look="graphite"] .pv-side { background: #141518; }
.app-look-preview[data-look="graphite"] .pv-card { background: #1a1b1f; box-shadow: inset 0 0 0 1px #26282d; }
.app-look-preview[data-look="graphite"] .pv-btn { background: #8a93e0; }

.app-look-preview[data-look="editorial"] { background: #f4f1ea; }
.app-look-preview[data-look="editorial"] .pv-bar { background: #f4f1ea; box-shadow: inset 0 -1px 0 #e3ded3; }
.app-look-preview[data-look="editorial"] .pv-tab { background: #1f1d1a; }
.app-look-preview[data-look="editorial"] .pv-side { background: #efebe2; }
.app-look-preview[data-look="editorial"] .pv-card { background: #fbf9f4; border-radius: 6px; box-shadow: inset 0 0 0 1px #e3ded3; }
.app-look-preview[data-look="editorial"] .pv-btn { background: #9c4a26; border-radius: 99px; }

.app-look-preview[data-look="engineered"] { background: #f4f4f4; }
.app-look-preview[data-look="engineered"] .pv-bar { background: #161616; }
.app-look-preview[data-look="engineered"] .pv-tab { background: #f4f4f4; border-radius: 0; }
.app-look-preview[data-look="engineered"] .pv-side { background: #fff; box-shadow: inset -1px 0 0 #e0e0e0; }
.app-look-preview[data-look="engineered"] .pv-card { background: #fff; border-radius: 0; box-shadow: inset 0 0 0 1px #e0e0e0; }
.app-look-preview[data-look="engineered"] .pv-btn { background: #0f62fe; border-radius: 0; }

/* ------------------------------------------------------------- Structure */

@layer app-looks {
  /* Every look but Classic: the saturated gradient ribbon strips become calm
     chrome in the look's own surface and ink. */
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-strip, .pkpd-ribbon-strip, .ds-ribbon-strip, .inv-ribbon-strip, .ps-ribbon-strip, .graph-studio-ribbon-strip):not(.ad-header-bar) {
    background: var(--surface) !important;
    background-image: none !important;
    color: var(--ink) !important;
    box-shadow: inset 0 -1px 0 var(--line) !important;
    border-color: var(--line) !important;
  }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-brand, .pkpd-ribbon-brand, .ds-ribbon-brand, .inv-ribbon-brand, .graph-studio-ribbon-brand):not(.ad-brand) { color: var(--ink) !important; }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-mark, .pkpd-ribbon-mark, .ds-ribbon-mark, .inv-ribbon-mark, .graph-studio-ribbon-mark) { color: var(--accent) !important; }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-tab, .pkpd-ribbon-tab, .ds-ribbon-tab, .inv-ribbon-tab, .ps-ribbon-tab, .graph-studio-ribbon-tab) {
    color: var(--ink-soft) !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-tab, .pkpd-ribbon-tab, .ds-ribbon-tab, .inv-ribbon-tab, .ps-ribbon-tab, .graph-studio-ribbon-tab):hover {
    color: var(--ink) !important;
    background: var(--win-hover-bg, var(--hover)) !important;
  }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-tab, .pkpd-ribbon-tab, .ds-ribbon-tab, .inv-ribbon-tab, .ps-ribbon-tab, .graph-studio-ribbon-tab).active {
    color: var(--ink) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
  }
  /* Chips in those strips (RUO, AI, usage, mode) were white glass on blue. */
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-strip, .pkpd-ribbon-strip, .ds-ribbon-strip, .inv-ribbon-strip, .graph-studio-ribbon-strip):not(.ad-header-bar) :is([class*="ribbon-ruo"], [class*="ribbon-aitoggle"], [class*="usage-btn"], [class*="-status-chip"], [class*="simple"], [class*="-badge"]) {
    background: var(--surface-2) !important;
    color: var(--ink-soft) !important;
    border: 1px solid var(--line) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-strip, .pkpd-ribbon-strip, .ds-ribbon-strip, .inv-ribbon-strip, .graph-studio-ribbon-strip):not(.ad-header-bar) [class*="ribbon-aitoggle"] {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
  }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-strip, .pkpd-ribbon-strip, .ds-ribbon-strip, .inv-ribbon-strip, .graph-studio-ribbon-strip):not(.ad-header-bar) [class*="fnsearch-field"] {
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-soft) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-strip, .pkpd-ribbon-strip, .ds-ribbon-strip, .inv-ribbon-strip, .graph-studio-ribbon-strip):not(.ad-header-bar) [class*="fnsearch-field"] :is(input, [class*="fnsearch-input"]) {
    color: var(--ink) !important;
    background: transparent !important;
  }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-strip, .pkpd-ribbon-strip, .ds-ribbon-strip, .inv-ribbon-strip, .graph-studio-ribbon-strip):not(.ad-header-bar) [class*="fnsearch-field"] input::placeholder { color: var(--ink-soft) !important; }
  .window[data-app-look]:not([data-app-look="classic"]) :is(.gsd-ribbon-strip, .pkpd-ribbon-strip, .ds-ribbon-strip, .inv-ribbon-strip, .graph-studio-ribbon-strip):not(.ad-header-bar) :is([class*="strip-right"] span, [class*="strip-right"] button):not([class*="fnsearch"]) { color: var(--ink-soft) !important; }

  /* The floating assistant buttons follow the look's accent instead of neon. */
  .window[data-app-look]:not([data-app-look="classic"]) :is([class*="assistant-fab"], [class*="-fab"]):not(.adf *) {
    background: var(--accent) !important;
    background-image: none !important;
    color: var(--on-primary) !important;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent) !important;
  }

  /* ---- Type ---- */
  .window[data-app-look="hairline"] .window-body,
  .window[data-app-look="hairline-dark"] .window-body { --look-font: "AppLookGeist", "Inter", system-ui, sans-serif; }
  .window[data-app-look="ledger"] .window-body { --look-font: "AppLookInterTight", "Inter", system-ui, sans-serif; }
  .window[data-app-look="editorial"] .window-body { --look-font: "AppLookFigtree", "Inter", system-ui, sans-serif; --look-head: "AppLookInstrumentSerif", Georgia, serif; }
  .window[data-app-look="engineered"] .window-body { --look-font: "AppLookPlex", "IBM Plex Sans", system-ui, sans-serif; }
  .window[data-app-look="studio"] .window-body,
  .window[data-app-look="linen"] .window-body,
  .window[data-app-look="sage"] .window-body,
  .window[data-app-look="graphite"] .window-body { --look-font: "Inter", "Segoe UI", system-ui, sans-serif; }
  .window[data-app-look]:not([data-app-look="classic"]) .window-body :is(div, span, p, label, button, input, select, textarea, a, li, td, th, summary, strong, b, small, em, h1, h2, h3, h4, h5, h6):not(.adf):not(.adf *):not(code):not(pre):not(kbd):not([class*="mono"]):not([class*="lcd"]) {
    font-family: var(--look-font, inherit) !important;
  }
  .window[data-app-look="editorial"] .window-body :is(h1, h2, .ad-step-title, .ad-doc-name):not(.adf *) {
    font-family: var(--look-head) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  /* ---- Corners and depth ---- */
  .window[data-app-look="engineered"] .window-body :is(button, input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), select, textarea, details, [class*="-card"], [class*="-panel"], [class*="-tile"], [class*="-section"], [class*="-cmd"], [class*="stepview"], [class*="-views"], [class*="modeswitch"]):not(.adf *):not([class*="dot"]):not([class*="swatch"]):not([class*="num"]) {
    border-radius: 2px !important;
  }
  .window[data-app-look="engineered"] .window-body :is([class*="-card"], [class*="-panel"], details, [class*="-tile"]):not(.adf *) { box-shadow: none !important; }
  .window[data-app-look="hairline"] .window-body :is([class*="-card"], [class*="-panel"], details, [class*="-tile"], [class*="-section"]):not(.adf *),
  .window[data-app-look="hairline-dark"] .window-body :is([class*="-card"], [class*="-panel"], details, [class*="-tile"], [class*="-section"]):not(.adf *) {
    box-shadow: none !important;
  }
  .window[data-app-look="hairline"] .window-body :is(button, input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), select, textarea):not(.adf *):not([class*="dot"]):not([class*="num"]),
  .window[data-app-look="hairline-dark"] .window-body :is(button, input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), select, textarea):not(.adf *):not([class*="dot"]):not([class*="num"]) {
    border-radius: 6px !important;
  }
  .window[data-app-look="editorial"] .window-body :is([class*="-card"], [class*="-panel"], details, [class*="-tile"]):not(.adf *) {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 10px 24px -18px color-mix(in srgb, var(--ink) 30%, transparent) !important;
  }
  .window[data-app-look="ledger"] .window-body :is([class*="-card"], [class*="-panel"], details, [class*="-tile"]):not(.adf *) {
    box-shadow: 0 1px 2px rgba(60, 66, 87, .08), 0 2px 6px rgba(60, 66, 87, .06) !important;
  }
}