/* BioStudio AI — Folio.
   Every window is a tab. The bar is a browser-style tab strip across the
   top: pinned apps are compact tabs, open apps are full tabs with a close
   button, and "+" opens a New-tab page of apps. Windows open full size
   (js/core/style-behaviors.js). Paper surfaces, ink text, serif titles and a
   single terracotta accent. */

/* --- Palette ---------------------------------------------------------------- */
html:not(.shell-mobile) #os.theme-folio[data-color-theme],
html:not(.shell-mobile) body.theme-folio[data-color-theme] {
  --ct-desktop: #efe9dc;
  --ct-bg: #f7f3ea;
  --ct-surface: #fcfaf5;
  --ct-surface-2: #f2ede2;
  --ct-surface-3: #e9e2d3;
  --ct-titlebar: #f2ede2;
  --ct-flyout: #fcfaf5;
  --ct-input: #fffdf8;
  --ct-text: #1f1c17;
  --ct-muted: #6b6457;
  --ct-faint: #9a917f;
  --ct-line: rgba(60, 48, 28, 0.13);
  --ct-line-strong: rgba(60, 48, 28, 0.24);
  --ct-hover: rgba(60, 48, 28, 0.06);
  --ct-taskbar: #e7e0d0;
  --ct-shadow: 0 18px 50px rgba(60, 44, 20, 0.14);
}

html:not(.shell-mobile) #os.theme-folio:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]),
html:not(.shell-mobile) body.theme-folio:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  --ct-desktop: #161412;
  --ct-bg: #1b1916;
  --ct-surface: #24211c;
  --ct-surface-2: #1f1c18;
  --ct-surface-3: #2c2822;
  --ct-titlebar: #1f1c18;
  --ct-flyout: #26231d;
  --ct-input: #1a1815;
  --ct-text: #efe8da;
  --ct-muted: #b3a994;
  --ct-faint: #7f7665;
  --ct-line: rgba(239, 232, 218, 0.11);
  --ct-line-strong: rgba(239, 232, 218, 0.2);
  --ct-hover: rgba(239, 232, 218, 0.07);
  --ct-taskbar: #12110e;
  --ct-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

html:not(.shell-mobile) #os.theme-folio,
html:not(.shell-mobile) body.theme-folio {
  --nv-font: ui-sans-serif, -apple-system, "Segoe UI", "BS Inter", "Helvetica Neue", sans-serif;
  --nv-font-title: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, serif;
  --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(--ct-line);
  --nv-surface: var(--ct-surface);
  --nv-surface-3: var(--ct-surface-3);
  --nv-accent: #b4532a;
  --nv-on-accent: #fffaf2;
  --nv-radius: 8px;
  --nv-radius-menu: 10px;
  --nv-radius-item: 6px;
  --nv-win-border: 1px solid var(--ct-line-strong);
  --nv-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 18px 48px rgba(60, 44, 20, 0.18);
  --nv-shadow-idle: 0 10px 28px rgba(60, 44, 20, 0.1);
  --nv-titlebar: var(--ct-surface-2);
  --nv-titlebar-rule: 1px solid var(--ct-line);
  --nv-titlebar-h: 34px;
  --nv-title-size: 14.5px;
  --nv-title-weight: 600;
  --nv-ctl-w: 32px;
  --nv-ctl-h: 26px;
  --nv-ctl-radius: 6px;
  --nv-ctl-gap: 2px;
  --nv-ctl-pad: 6px;
  --nv-ctl-glyph: 13px;
  --nv-hover: var(--ct-hover);
  --nv-close-hover: #b4532a;
  --nv-menu: var(--ct-surface);
  --nv-menu-border: 1px solid var(--ct-line-strong);
  --nv-menu-shadow: 0 14px 36px rgba(60, 44, 20, 0.16);
  --nv-menu-hover: color-mix(in srgb, #b4532a 12%, transparent);
  --nv-menu-hover-ink: var(--ct-text);
  --nv-item-h: 28px;
  --nv-scrim: rgba(40, 30, 16, 0.28);
  --nv-desk-ink: var(--ct-text);
  --nv-desk-shadow: none;
  --nv-desk-hover: var(--ct-hover);
  --nv-desk-selected: color-mix(in srgb, #b4532a 14%, transparent);
  --nv-desk-selected-line: color-mix(in srgb, #b4532a 40%, transparent);
  --nv-scroll: color-mix(in srgb, var(--ct-text) 28%, transparent);
  --taskbar-h: 42px;
  --taskbar-clearance: 0px;
}

html:not(.shell-mobile) #os.theme-folio:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]),
html:not(.shell-mobile) body.theme-folio:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  --nv-accent: #e0835a;
  --nv-on-accent: #1b1916;
  --nv-close-hover: #c2552b;
  --nv-menu-hover: color-mix(in srgb, #e0835a 16%, transparent);
  --nv-menu-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  --nv-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  --nv-shadow-idle: 0 10px 28px rgba(0, 0, 0, 0.4);
  --nv-desk-selected: color-mix(in srgb, #e0835a 18%, transparent);
}

/* Paper with a faint dot grid. */
html:not(.shell-mobile) #os.theme-folio.wp-folio[data-os-theme] {
  background:
    radial-gradient(circle at 1px 1px, rgba(60, 48, 28, 0.14) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--ct-desktop);
}

html:not(.shell-mobile) #os.theme-folio.wp-folio[data-os-theme]:is([data-color-theme="black"], [data-color-theme="ocean"], [data-color-theme="orchid"]) {
  background:
    radial-gradient(circle at 1px 1px, rgba(239, 232, 218, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--ct-desktop);
}

.tk-folio {
  background: radial-gradient(circle at 1px 1px, rgba(60, 48, 28, 0.25) 1px, transparent 1.5px) 0 0 / 8px 8px, #efe9dc;
}

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

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

/* --- Tab strip --------------------------------------------------------------- */
html:not(.shell-mobile) #os.theme-folio .taskbar {
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  height: 42px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 6px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--ct-line-strong);
  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-folio .taskbar-left {
  display: none;
}

html:not(.shell-mobile) #os.theme-folio .taskbar-center {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
}

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

html:not(.shell-mobile) #os.theme-folio .taskbar-apps {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow: hidden;
}

/* Pinned apps that are not open: compact icon tabs. */
html:not(.shell-mobile) #os.theme-folio .task-btn {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--ct-muted);
  transition: background-color 0.12s ease;
}

html:not(.shell-mobile) #os.theme-folio .task-btn:hover {
  background: color-mix(in srgb, var(--ct-surface-2) 70%, transparent);
}

html:not(.shell-mobile) #os.theme-folio .task-btn:active {
  transform: none;
}

html:not(.shell-mobile) #os.theme-folio :is(.task-btn-icon, .task-btn-icon .icon) {
  width: 18px;
  height: 18px;
}

/* Open apps: full tabs with a label and a close button. */
html:not(.shell-mobile) #os.theme-folio .task-btn.running {
  flex: 0 1 210px;
  width: auto;
  min-width: 118px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 6px 0 12px;
  color: var(--ct-text);
}

html:not(.shell-mobile) #os.theme-folio .task-btn.running::after {
  content: "";
  position: absolute;
  right: 0;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: var(--ct-line-strong);
}

html:not(.shell-mobile) #os.theme-folio .task-btn.running .task-btn-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:not(.shell-mobile) #os.theme-folio .task-btn.running .task-btn-close {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--ct-muted);
  font-size: 15px;
  line-height: 1;
  opacity: 0;
}

html:not(.shell-mobile) #os.theme-folio .task-btn.running:is(:hover, .active) .task-btn-close {
  opacity: 1;
}

html:not(.shell-mobile) #os.theme-folio .task-btn-close:hover {
  background: var(--ct-hover);
  color: var(--ct-text);
}

/* The active tab joins the window below it. */
html:not(.shell-mobile) #os.theme-folio .task-btn.active {
  z-index: 1;
  background: var(--nv-titlebar);
  box-shadow: 1px 0 0 var(--ct-line-strong), -1px 0 0 var(--ct-line-strong), 0 -1px 0 var(--ct-line-strong);
}

html:not(.shell-mobile) #os.theme-folio .task-btn.active::after,
html:not(.shell-mobile) #os.theme-folio .task-btn.running:has(+ .task-btn.active)::after {
  display: none;
}

html:not(.shell-mobile) #os.theme-folio .task-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--nv-titlebar);
}

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

/* "+" opens the New-tab page. */
html:not(.shell-mobile) #os.theme-folio .taskbar-start {
  order: 2;
  align-self: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin: 2px 0 0 4px;
  border-radius: 50%;
  background: transparent;
  color: var(--ct-muted);
}

html:not(.shell-mobile) #os.theme-folio .taskbar-start:hover {
  background: var(--ct-hover);
  color: var(--ct-text);
}

html:not(.shell-mobile) #os.theme-folio .taskbar-start > .icon {
  width: 16px;
  height: 16px;
  color: inherit;
}

/* Search sits at the end of the strip, beside the tray. */
html:not(.shell-mobile) #os.theme-folio .taskbar-center > .tb-search {
  order: 3;
  align-self: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--ct-muted);
}

html:not(.shell-mobile) #os.theme-folio .taskbar-center > .tb-search .icon {
  width: 16px;
  height: 16px;
}

/* Tray: quiet text and glyphs. */
html:not(.shell-mobile) #os.theme-folio .taskbar-right {
  align-self: center;
  height: 32px;
}

html:not(.shell-mobile) #os.theme-folio .taskbar-tray {
  height: 32px;
  gap: 0;
  padding: 0;
}

html:not(.shell-mobile) #os.theme-folio :is(.tray-chevron, .tray-cluster, .tray-clock, .tray-notif-btn, .tb-style-toggle) {
  height: 30px;
  border-radius: 6px;
  background: transparent;
  color: var(--ct-muted);
}

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

html:not(.shell-mobile) #os.theme-folio .tray-clock {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

html:not(.shell-mobile) #os.theme-folio .tray-clock .clock-date {
  order: -1;
  font-size: 12px;
  color: var(--ct-faint);
}

html:not(.shell-mobile) #os.theme-folio .tb-style-toggle {
  font-family: var(--nv-font-title);
  font-style: italic;
  font-weight: 600;
}

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

/* --- Windows: document pages ------------------------------------------------ */
html:not(.shell-mobile) #os.theme-folio .window .window-title-text {
  font-style: normal;
}

html:not(.shell-mobile) #os.theme-folio .window .window-title-icon {
  opacity: 0.85;
}

/* --- New-tab page (the apps view) ------------------------------------------ */
html:not(.shell-mobile) #os.theme-folio .launchpad-backdrop {
  background: var(--ct-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

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

html:not(.shell-mobile) #os.theme-folio .launchpad-overlay {
  top: 42px;
}

html:not(.shell-mobile) #os.theme-folio .launchpad-stage::before {
  content: "New tab";
  display: block;
  margin: 8px 0 18px;
  color: var(--ct-text);
  font-family: var(--nv-font-title);
  font-size: 34px;
  font-weight: 600;
  text-align: center;
}

html:not(.shell-mobile) #os.theme-folio .launchpad-searchbar {
  width: min(560px, calc(100vw - 48px));
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px solid var(--ct-line-strong);
  background: var(--ct-surface);
  box-shadow: 0 6px 18px rgba(60, 44, 20, 0.08);
}

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

html:not(.shell-mobile) #os.theme-folio .launchpad-search::placeholder {
  color: var(--ct-faint);
}

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

html:not(.shell-mobile) #os.theme-folio .launchpad-section-title {
  color: var(--ct-muted);
  font-family: var(--nv-font-title);
  font-size: 15px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

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

html:not(.shell-mobile) #os.theme-folio .launchpad-icon {
  padding: 16px 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ct-line);
  background: var(--ct-surface);
  transition: border-color 0.12s ease, transform 0.12s ease;
}

html:not(.shell-mobile) #os.theme-folio .launchpad-icon:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--nv-accent) 55%, transparent);
}

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

/* --- Start / menus / desktop ------------------------------------------------ */
html:not(.shell-mobile) #os.theme-folio .desktop-icon-label {
  font-weight: 500;
}

html:not(.shell-mobile) body.theme-folio .ctx-menu .ctx-header {
  font-family: var(--nv-font-title);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}