/* BioStudio AI — Block.
   Neo-brutalist and unmistakable: 3px outlines, hard offset shadows, flat
   saturated colour, heavy type. The bar is a chunky labelled toolbar across
   the top (a big APPS button, app chips that visibly press), the focused
   window wears a yellow title bar, and the apps view is a poster grid.
   Every control reads as a control — good for touch, projectors and demos. */

/* --- Palette ---------------------------------------------------------------- */
html:not(.shell-mobile) #os.theme-block[data-color-theme],
html:not(.shell-mobile) body.theme-block[data-color-theme] {
  --ct-desktop: #fff4d6;
  --ct-bg: #fffaf0;
  --ct-surface: #ffffff;
  --ct-surface-2: #ffffff;
  --ct-surface-3: #fff1c2;
  --ct-titlebar: #ffffff;
  --ct-flyout: #ffffff;
  --ct-input: #ffffff;
  --ct-text: #111111;
  --ct-muted: #3a3a3a;
  --ct-faint: #6b6b6b;
  --ct-line: rgba(17, 17, 17, 0.22);
  --ct-line-strong: #111111;
  --ct-hover: rgba(17, 17, 17, 0.06);
  --ct-taskbar: #fffaf0;
  --ct-shadow: 6px 6px 0 #111111;
  --nv-ink-solid: #111111;
  --nv-yellow: #ffd23f;
  --nv-pink: #ff5c8a;
  --nv-blue: #2b59ff;
  --nv-green: #16c47f;
}

html:not(.shell-mobile) #os.theme-block:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]),
html:not(.shell-mobile) body.theme-block:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  --ct-desktop: #161616;
  --ct-bg: #141414;
  --ct-surface: #1e1e1e;
  --ct-surface-2: #1e1e1e;
  --ct-surface-3: #2a2a2a;
  --ct-titlebar: #1e1e1e;
  --ct-flyout: #1e1e1e;
  --ct-input: #121212;
  --ct-text: #f5f5f0;
  --ct-muted: #cfcfc8;
  --ct-faint: #9a9a93;
  --ct-line: rgba(245, 245, 240, 0.25);
  --ct-line-strong: #f5f5f0;
  --ct-hover: rgba(245, 245, 240, 0.08);
  --ct-taskbar: #141414;
  --ct-shadow: 6px 6px 0 #f5f5f0;
  --nv-ink-solid: #f5f5f0;
}

html:not(.shell-mobile) #os.theme-block,
html:not(.shell-mobile) body.theme-block {
  --nv-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "BS Inter", "Helvetica Neue", Arial, sans-serif;
  --nv-font-title: var(--nv-font);
  --nv-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --nv-ink: var(--ct-text);
  --nv-ink-2: var(--ct-muted);
  --nv-ink-3: var(--ct-faint);
  --nv-line: var(--nv-ink-solid);
  --nv-surface: var(--ct-surface);
  --nv-surface-3: var(--ct-surface-3);
  --nv-accent: #2b59ff;
  --nv-on-accent: #ffffff;
  --nv-radius: 14px;
  --nv-radius-menu: 14px;
  --nv-radius-item: 8px;
  --nv-win-border: 3px solid var(--nv-ink-solid);
  --nv-shadow: 9px 9px 0 var(--nv-ink-solid);
  --nv-shadow-idle: 5px 5px 0 var(--nv-ink-solid);
  --nv-titlebar: var(--ct-surface);
  --nv-titlebar-rule: 3px solid var(--nv-ink-solid);
  --nv-titlebar-h: 42px;
  --nv-title-size: 14px;
  --nv-title-weight: 800;
  --nv-title-tracking: 0.03em;
  --nv-ctl-w: 30px;
  --nv-ctl-h: 26px;
  --nv-ctl-radius: 8px;
  --nv-ctl-gap: 6px;
  --nv-ctl-pad: 8px;
  --nv-ctl-glyph: 12px;
  --nv-hover: var(--ct-hover);
  --nv-close-hover: #ff5c8a;
  --nv-close-ink: #111111;
  --nv-menu: var(--ct-surface);
  --nv-menu-border: 3px solid var(--nv-ink-solid);
  --nv-menu-shadow: 6px 6px 0 var(--nv-ink-solid);
  --nv-menu-pad: 6px;
  --nv-menu-hover: #ffd23f;
  --nv-menu-hover-ink: #111111;
  --nv-item-h: 32px;
  --nv-item-size: 13.5px;
  --nv-item-weight: 700;
  --nv-scrim: rgba(17, 17, 17, 0.2);
  --nv-desk-ink: #111111;
  --nv-desk-shadow: none;
  --nv-desk-hover: transparent;
  --nv-desk-selected: transparent;
  --nv-desk-weight: 800;
  --nv-scroll: var(--nv-ink-solid);
  --nv-scroll-radius: 6px;
  --taskbar-h: 64px;
  --taskbar-clearance: 0px;
}

html:not(.shell-mobile) #os.theme-block.wp-block[data-os-theme] {
  background: url("../assets/wallpapers/block-light.svg") center / cover no-repeat, var(--ct-desktop);
}

html:not(.shell-mobile) #os.theme-block.wp-block[data-os-theme]:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  background: url("../assets/wallpapers/block-dark.svg") center / cover no-repeat, var(--ct-desktop);
}

.tk-block {
  background: url("../assets/wallpapers/block-light.svg") 70% center / cover no-repeat, #fff4d6;
}

html:not(.shell-mobile) #os.theme-block .wallpaper-logo-layer,
html:not(.shell-mobile) #os.theme-block .wallpaper-wordmark {
  display: none !important;
}

html:not(.shell-mobile) #os.theme-block .desktop-surface {
  inset: 64px 0 0 0;
}

/* --- Windows ------------------------------------------------------------------ */
html:not(.shell-mobile) #os.theme-block .window.focused,
html:not(.shell-mobile) #os.theme-block .window[data-app-color-theme].focused {
  --nv-win-titlebar: #ffd23f;
  --nv-win-ink: #111111;
}

html:not(.shell-mobile) #os.theme-block .window.focused :is(.window-title-text, .win-btn:not(.close)) {
  color: #111111 !important;
}

html:not(.shell-mobile) #os.theme-block .window .window-title-text {
  text-transform: uppercase;
}

html:not(.shell-mobile) #os.theme-block .window .win-btn {
  border: 2px solid var(--nv-ink-solid);
  box-shadow: 2px 2px 0 var(--nv-ink-solid);
  background: var(--ct-surface) !important;
}

html:not(.shell-mobile) #os.theme-block .window .win-btn.min { background: #ffffff !important; }
html:not(.shell-mobile) #os.theme-block .window .win-btn.max { background: #16c47f !important; color: #111111 !important; }
html:not(.shell-mobile) #os.theme-block .window .win-btn.close { background: #ff5c8a !important; color: #111111 !important; }

html:not(.shell-mobile) #os.theme-block .window .win-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

html:not(.shell-mobile) #os.theme-block .window :is(.win-btn.skills, .win-btn.notes, .win-btn.newtab, .win-btn.mergeback, .win-btn.pin) {
  border-width: 0;
  box-shadow: none;
  background: transparent !important;
}

/* --- Toolbar ------------------------------------------------------------------ */
html:not(.shell-mobile) #os.theme-block .taskbar {
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-bottom: 3px solid var(--nv-ink-solid);
  border-radius: 0;
  background: var(--ct-taskbar);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
  font-family: var(--nv-font);
}

html:not(.shell-mobile) #os.theme-block .taskbar-left {
  display: none;
}

html:not(.shell-mobile) #os.theme-block .taskbar-center {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  gap: 10px;
}

html:not(.shell-mobile) #os.theme-block .taskbar-center > :is(.taskbar-apps-launcher, .tb-desktop-pill, .dock-divider, .dock-stack),
html:not(.shell-mobile) #os.theme-block .taskbar-center > .tb-icon-btn[title^="Task"] {
  display: none !important;
}

/* Chips: white slabs with an outline and a hard shadow that press in. */
html:not(.shell-mobile) #os.theme-block :is(.tb-icon-btn, .task-btn) {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  gap: 8px;
  border: 3px solid var(--nv-ink-solid);
  border-radius: 12px;
  background: var(--ct-surface);
  box-shadow: 3px 3px 0 var(--nv-ink-solid);
  color: var(--ct-text);
  font-family: var(--nv-font);
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.1s ease;
}

html:not(.shell-mobile) #os.theme-block :is(.tb-icon-btn, .task-btn):hover {
  background: var(--ct-surface-3);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--nv-ink-solid);
}

html:not(.shell-mobile) #os.theme-block :is(.tb-icon-btn, .task-btn):active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--nv-ink-solid);
}

html:not(.shell-mobile) #os.theme-block :is(.task-btn-icon, .task-btn-icon .icon, .tb-icon-btn > .icon) {
  width: 24px;
  height: 24px;
}

html:not(.shell-mobile) #os.theme-block .taskbar-start {
  order: 0;
  padding: 0 18px 0 12px;
  background: #ffd23f;
  color: #111111;
  font-size: 15px;
  letter-spacing: 0.06em;
}

html:not(.shell-mobile) #os.theme-block .taskbar-start:hover {
  background: #ffdc5e;
}

html:not(.shell-mobile) #os.theme-block .taskbar-start .tb-start-label {
  display: inline;
  text-transform: uppercase;
}

html:not(.shell-mobile) #os.theme-block .taskbar-center > .tb-search {
  order: 1;
  padding: 0 14px 0 12px;
}

html:not(.shell-mobile) #os.theme-block .tb-search .tb-search-label {
  display: inline;
  min-width: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
}

html:not(.shell-mobile) #os.theme-block .taskbar-apps {
  order: 2;
  gap: 10px;
  min-width: 0;
  padding: 0 6px 6px 2px;
  margin-bottom: -6px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

html:not(.shell-mobile) #os.theme-block .task-btn.running .task-btn-label {
  display: inline;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:not(.shell-mobile) #os.theme-block .task-btn.active {
  background: #2b59ff;
  color: #ffffff;
}

html:not(.shell-mobile) #os.theme-block .task-btn-indicator {
  left: auto;
  right: 6px;
  top: 6px;
  bottom: auto;
  width: 8px !important;
  height: 8px;
  border: 2px solid var(--nv-ink-solid);
  border-radius: 50%;
  background: #16c47f !important;
  transform: none;
}

html:not(.shell-mobile) #os.theme-block .task-btn.running .task-btn-indicator {
  opacity: 1;
}

html:not(.shell-mobile) #os.theme-block .task-btn.running:not(.active) .task-btn-indicator {
  width: 8px !important;
}

html:not(.shell-mobile) #os.theme-block .task-btn.active .task-btn-indicator {
  display: none;
}

html:not(.shell-mobile) #os.theme-block .task-btn-notif-badge {
  border: 2px solid var(--nv-ink-solid);
  background: #ff5c8a;
  color: #111111;
}

/* Tray: one outlined slab. */
html:not(.shell-mobile) #os.theme-block .taskbar-right {
  height: 44px;
}

html:not(.shell-mobile) #os.theme-block .taskbar-tray {
  height: 44px;
  gap: 2px;
  padding: 0 6px;
  border: 3px solid var(--nv-ink-solid);
  border-radius: 12px;
  background: var(--ct-surface);
  box-shadow: 3px 3px 0 var(--nv-ink-solid);
}

html:not(.shell-mobile) #os.theme-block :is(.tray-chevron, .tray-cluster, .tray-clock, .tray-notif-btn, .tb-style-toggle) {
  height: 34px;
  border-radius: 8px;
  background: transparent;
  color: var(--ct-text);
  font-family: var(--nv-font);
  font-weight: 800;
}

html:not(.shell-mobile) #os.theme-block :is(.tray-chevron, .tray-cluster, .tray-clock, .tray-notif-btn, .tb-style-toggle):hover {
  background: #ffd23f;
  color: #111111;
}

html:not(.shell-mobile) #os.theme-block .tray-clock .clock-time {
  font-size: 15px;
  font-weight: 900;
}

html:not(.shell-mobile) #os.theme-block .tray-clock .clock-date {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html:not(.shell-mobile) #os.theme-block .tb-style-toggle {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html:not(.shell-mobile) #os.theme-block .tb-show-desktop {
  display: none;
}

/* --- Apps view: a poster ------------------------------------------------------ */
html:not(.shell-mobile) #os.theme-block .launchpad-overlay {
  top: 64px;
}

html:not(.shell-mobile) #os.theme-block .launchpad-backdrop {
  background: var(--ct-desktop);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html:not(.shell-mobile) #os.theme-block .launchpad-glow {
  display: none;
}

html:not(.shell-mobile) #os.theme-block .launchpad-stage::before {
  content: "APPS";
  display: block;
  margin: 4px 0 18px;
  color: var(--ct-text);
  font-family: var(--nv-font);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

html:not(.shell-mobile) #os.theme-block .launchpad-searchbar {
  width: min(520px, calc(100vw - 48px));
  height: 48px;
  padding: 0 16px;
  border: 3px solid var(--nv-ink-solid);
  border-radius: 14px;
  background: var(--ct-surface);
  box-shadow: 5px 5px 0 var(--nv-ink-solid);
}

html:not(.shell-mobile) #os.theme-block .launchpad-search {
  color: var(--ct-text);
  font-family: var(--nv-font);
  font-size: 16px;
  font-weight: 700;
}

html:not(.shell-mobile) #os.theme-block .launchpad-search::placeholder,
html:not(.shell-mobile) #os.theme-block .launchpad-searchbar .icon {
  color: var(--ct-muted);
}

html:not(.shell-mobile) #os.theme-block .launchpad-section-title {
  display: inline-block;
  padding: 4px 10px;
  border: 3px solid var(--nv-ink-solid);
  border-radius: 8px;
  background: var(--ct-surface);
  color: var(--ct-text);
  font-family: var(--nv-font);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html:not(.shell-mobile) #os.theme-block .launchpad-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px;
}

html:not(.shell-mobile) #os.theme-block .launchpad-icon {
  padding: 16px 8px 12px;
  border: 3px solid #111111;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 5px 5px 0 #111111;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

html:not(.shell-mobile) #os.theme-block .launchpad-grid > .launchpad-icon:nth-child(4n + 1) { background: #ffd23f; }
html:not(.shell-mobile) #os.theme-block .launchpad-grid > .launchpad-icon:nth-child(4n + 2) { background: #ffffff; }
html:not(.shell-mobile) #os.theme-block .launchpad-grid > .launchpad-icon:nth-child(4n + 3) { background: #ff9fbd; }
html:not(.shell-mobile) #os.theme-block .launchpad-grid > .launchpad-icon:nth-child(4n + 4) { background: #8fe3c0; }

html:not(.shell-mobile) #os.theme-block .launchpad-icon:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #111111;
}

html:not(.shell-mobile) #os.theme-block .launchpad-icon:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #111111;
}

html:not(.shell-mobile) #os.theme-block .launchpad-label {
  color: #111111;
  font-family: var(--nv-font);
  font-size: 12.5px;
  font-weight: 800;
  text-shadow: none;
}

/* --- Desktop: sticker labels -------------------------------------------------- */
html:not(.shell-mobile) #os.theme-block .desktop-icon-label {
  padding: 1px 6px;
  border: 2px solid #111111;
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  font-size: 11.5px;
}

html:not(.shell-mobile) #os.theme-block .desktop-icon.selected .desktop-icon-label {
  background: #ffd23f;
}

html:not(.shell-mobile) #os.theme-block .desktop-icon.selected .desktop-icon-glyph {
  outline: 3px solid #111111;
  outline-offset: 2px;
  border-radius: 12px;
}

/* Flyouts, toasts, dialogs pick up the outline + hard shadow. */
html:not(.shell-mobile) body.theme-block .platform-dialog-title {
  text-transform: uppercase;
}

html:not(.shell-mobile) body.theme-block .platform-dialog :is(.platform-dialog-foot button, .platform-dialog-foot .btn) {
  border: 3px solid var(--nv-ink-solid);
  box-shadow: 3px 3px 0 var(--nv-ink-solid);
  font-weight: 800;
}

html:not(.shell-mobile) #os.theme-block .toast-layer {
  top: 76px;
  bottom: auto;
}