/* ==========================================================================
   WINNERS CIRCLE — "Aqua" desktop homepage
   ========================================================================== */

:root {
  /* Swap the wallpaper here */
  --wallpaper: url("../assets/wallpaper/wallpaper.svg");

  --font-ui: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --menubar-h: 22px;

  /* Dock sizing (JS reads these too) */
  --dock-icon: 56px;       /* resting size */
  --dock-icon-max: 112px;  /* size under the cursor */
  --dock-pad-x: 8px;

  --aqua-blue-top: #6d9cf3;
  --aqua-blue-bot: #2f63d8;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  background: #000;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; }

/* Phones: no double-tap zoom delay, no grey tap flash, and title bars / grips drag instead of scrolling */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.aqua-titlebar, .looker-head, .browser-head, .grip { touch-action: none; }
img { -webkit-user-drag: none; }

/* ==========================================================================
   BOOT SCREEN
   ========================================================================== */

#boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  background: radial-gradient(ellipse at center, #d6d6d6 0%, #bdbdbd 70%, #b3b3b3 100%);
  transition: opacity 0.9s ease;
}

.boot-logo {
  width: 210px;
  height: auto;
  opacity: 0;
  animation: boot-logo-in 0.8s ease 0.3s forwards;
}

.boot-spinner {
  position: relative;
  width: 30px;
  height: 30px;
  opacity: 0;
  animation: fade-in 0.4s ease 1.1s forwards;
}

.boot-spinner i {
  position: absolute;
  left: 13px;
  top: 0;
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: #3a3a3a;
  transform-origin: 2px 15px;
  animation: spinner-tick 1s linear infinite;
}

/* 12 ticks, each rotated 30deg and delayed 1/12s */
.boot-spinner i:nth-child(1)  { transform: rotate(0deg);   animation-delay: -0.916s; }
.boot-spinner i:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.833s; }
.boot-spinner i:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.75s; }
.boot-spinner i:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.666s; }
.boot-spinner i:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.583s; }
.boot-spinner i:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.5s; }
.boot-spinner i:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.416s; }
.boot-spinner i:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.333s; }
.boot-spinner i:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.25s; }
.boot-spinner i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.166s; }
.boot-spinner i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.083s; }
.boot-spinner i:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes spinner-tick {
  from { opacity: 1; }
  to   { opacity: 0.12; }
}

@keyframes boot-logo-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes fade-in { to { opacity: 1; } }

body.boot-fading #boot { opacity: 0; pointer-events: none; }
body.booted #boot { display: none; }

/* ==========================================================================
   DESKTOP
   ========================================================================== */

#desktop {
  position: fixed;
  inset: 0;
  background: #0b2a6b var(--wallpaper) center / cover no-repeat;
  overflow: hidden;
}

/* Wallpaper fades up out of blue-black during the boot handoff */
#desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #06163a;
  opacity: 1;
  transition: opacity 1.4s ease 0.2s;
  pointer-events: none;
  z-index: 0;
}
body.desktop-in #desktop::before { opacity: 0; }

/* ==========================================================================
   MENU BAR
   ========================================================================== */

#menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menubar-h);
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 8px 0 10px;
  color: #000;
  background:
    linear-gradient(to bottom,
      #fdfdfd 0%, #f1f1f1 45%, #e2e2e2 55%, #e9e9e9 100%);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translateY(-100%);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.desktop-in #menubar { transform: translateY(0); }

.menubar-left,
.menubar-right {
  display: flex;
  align-items: stretch;
}

.menubar-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  line-height: var(--menubar-h);
  white-space: nowrap;
  letter-spacing: -0.1px;
}
.menubar-item.bold { font-weight: 700; }

.menubar-logo { padding: 0 11px 0 8px; }
.menubar-logo img { height: 17px; width: auto; display: block; }

.menubar-menu > .menubar-item.open,
.menubar-spotlight:active {
  color: #fff;
  background: linear-gradient(to bottom, var(--aqua-blue-top), var(--aqua-blue-bot));
}
.menubar-menu > .menubar-item.open img { filter: brightness(0) invert(1); }

.menubar-static { font-size: 13.5px; }

.menubar-spotlight { padding: 0 9px; }
.menubar-spotlight:active svg * { stroke: #fff; }

/* Dropdowns */
.menubar-menu { position: relative; display: flex; }

.dropdown {
  position: absolute;
  top: var(--menubar-h);
  left: 0;
  min-width: 210px;
  padding: 4px 0 5px;
  background: rgba(250, 250, 250, 0.96);
  border-radius: 0 0 5px 5px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.14),
    0 8px 22px rgba(0, 0, 0, 0.38);
  display: none;
  z-index: 60;
}
.menubar-item.open + .dropdown { display: block; animation: dropdown-in 0.12s ease; }

@keyframes dropdown-in { from { opacity: 0; } to { opacity: 1; } }

.dropdown-item {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  padding: 2px 20px;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-item .shortcut { color: inherit; opacity: 0.85; }
.dropdown-item.disabled { color: #9a9a9a; }
.dropdown-item:not(.disabled):hover {
  color: #fff;
  background: linear-gradient(to bottom, var(--aqua-blue-top), var(--aqua-blue-bot));
}
.dropdown-sep {
  height: 1px;
  margin: 5px 0;
  background: #d6d6d6;
}

/* ==========================================================================
   DESKTOP ICONS
   ========================================================================== */

#desktop-icons {
  position: absolute;
  top: calc(var(--menubar-h) + 14px);
  right: 16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transition: opacity 0.8s ease 1.1s;
}
body.desktop-in #desktop-icons { opacity: 1; }

.desktop-icon {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  outline: none;
}
.desktop-icon .img-wrap {
  padding: 3px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.desktop-icon img { width: 64px; height: 64px; display: block; }
.desktop-icon span {
  padding: 1px 6px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.desktop-icon.selected .img-wrap {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.35);
}
.desktop-icon.selected span {
  background: #3469d4;
  text-shadow: none;
}

/* ==========================================================================
   DOCK
   ========================================================================== */

#dock-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateY(140%);
  transition: transform 0.8s cubic-bezier(0.18, 0.9, 0.22, 1.08) 0.35s;
}
body.desktop-in #dock-wrap { transform: translateY(0); }

#dock {
  position: relative;
  pointer-events: auto;
  padding: 0 var(--dock-pad-x);
}

/* The translucent glass shelf behind the icons */
.dock-shelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--dock-icon) + 10px);
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.42) 50%,
      rgba(255, 255, 255, 0.34) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 -2px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}

.dock-items {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 0 0 5px;
  list-style: none;
}

.dock-item {
  position: relative;
  width: var(--dock-icon);
  height: var(--dock-icon);
  margin: 0 1px;
  flex: 0 0 auto;
}

/* When the cursor leaves, sizes ease back instead of snapping */
#dock:not(.magnifying) .dock-item {
  transition: width 0.22s ease-out, height 0.22s ease-out;
}

.dock-item button,
.dock-item a {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.dock-item img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  transform-origin: 50% 100%;
}

/* Flat logo icon — no drop shadow */
.dock-item[data-id="looker"] img { filter: none; }
.dock-item[data-id="looker"] button:active img { filter: brightness(0.6); }

/* Pop-in during the startup sequence */
body.dock-loading .dock-item img { transform: scale(0) translateY(20px); opacity: 0; }
.dock-item img.pop-in { animation: dock-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }

@keyframes dock-pop {
  from { transform: scale(0.2) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Click → launch bounce */
.dock-item.bouncing img { animation: dock-bounce 0.62s cubic-bezier(0.3, 0, 0.3, 1) 3; }

@keyframes dock-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-38%); }
  50%  { transform: translateY(-40%); }
  100% { transform: translateY(0); }
}

/* Click feedback — a quick darken, like pressing an icon */
.dock-item button:active img { filter: brightness(0.6) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }

/* Running indicator — the little triangle under an open app */
.dock-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid #111;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.dock-item.running::after { opacity: 0.85; }

/* Tooltip label above the hovered icon */
.dock-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 2px 12px 3px;
  border-radius: 11px;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
.dock-item:hover .dock-label,
.dock-item:focus-within .dock-label { opacity: 1; }

/* Divider between apps and folders/trash */
.dock-divider {
  align-self: stretch;
  width: 1px;
  margin: 8px 9px 0;
  height: calc(var(--dock-icon) - 4px);
  align-self: flex-end;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   SHUT DOWN / SLEEP
   ========================================================================== */

#shutdown {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 40px;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
#shutdown span {
  color: #555;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.6s ease 1.2s;
}
body.shut-down #shutdown { opacity: 1; pointer-events: auto; }
body.shut-down #shutdown span { opacity: 1; }

/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */

@media (max-width: 760px) {
  :root { --dock-icon: 40px; --dock-icon-max: 64px; --dock-pad-x: 4px; }
  .menubar-menu:not(:first-child):not(:nth-child(2)) { display: none; }
  #desktop-icons { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   AQUA WINDOW (used by "About Winners Circle"; reuse for future apps)
   ========================================================================== */

.aqua-window {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: 300px;
  border-radius: 6px 6px 5px 5px;
  overflow: hidden;
  background: #ececec;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 14px 40px rgba(0, 0, 0, 0.55);
  animation: window-open 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.aqua-window.closing { animation: window-close 0.2s ease forwards; }

@keyframes window-open  { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }
@keyframes window-close { to { opacity: 0; scale: 0.9; } }

.aqua-titlebar {
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.35) 0 1px, transparent 1px 2px),
    linear-gradient(to bottom, #e8e8e8, #c9c9c9);
  border-bottom: 1px solid #9c9c9c;
}

.traffic-lights { display: flex; gap: 8px; }

/* Glossy gel buttons: dark rim, bright top reflection, glow pooled at the bottom */
.tl {
  --tl-light: #ff9c85;
  --tl-mid:   #d0311f;
  --tl-dark:  #7a0f06;
  --tl-rim:   #5c0a03;
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 58% 34% at 50% 24%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 108%, var(--tl-light) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(circle at 50% 45%, var(--tl-mid) 0%, var(--tl-mid) 35%, var(--tl-dark) 100%);
  box-shadow:
    inset 0 0 0 1px var(--tl-rim),
    inset 0 1px 1px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.55);
}
.tl-min  { --tl-light: #ffe58a; --tl-mid: #dc9a12; --tl-dark: #7d4e02; --tl-rim: #5e3a00; }
.tl-zoom { --tl-light: #c6f59a; --tl-mid: #4b9d2c; --tl-dark: #1c540a; --tl-rim: #143f06; }

/* Symbols appear when hovering the group */
.tl::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 10px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgba(60, 10, 0, 0.75);
  opacity: 0;
}
.tl-close::after { content: "×"; font-size: 12px; }
.tl-min::after   { content: "–"; color: rgba(90, 50, 0, 0.8); }
.tl-zoom::after  { content: "+"; color: rgba(10, 60, 0, 0.8); }
.traffic-lights:hover .tl::after { opacity: 1; }
.tl:active { filter: brightness(0.8); }

.aqua-body {
  background:
    repeating-linear-gradient(to bottom, #f3f3f3 0 2px, #ebebeb 2px 4px);
}

.about-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 20px 22px;
  text-align: center;
}
.about-body h1 {
  margin: 10px 0 2px;
  font-size: 17px;
  letter-spacing: 1px;
}
.about-body p { margin: 2px 0; font-size: 11px; color: #333; }
.about-sub { font-weight: 700; }
.about-version { color: #666 !important; }
.about-copy { margin-top: 12px !important; color: #777 !important; font-size: 10px !important; }

/* Inactive windows: grey lights and dimmed title, like the real thing */
.aqua-window.inactive .tl {
  --tl-light: #ffffff;
  --tl-mid:   #d2d2d2;
  --tl-dark:  #9a9a9a;
  --tl-rim:   #7c7c7c;
}
.aqua-window.inactive .traffic-lights:hover .tl::after { opacity: 0; }

/* ==========================================================================
   LOOKER — the "Finder" window (brushed metal)
   ========================================================================== */

.looker,
.browser {
  --metal-top: #dadada;
  --metal-bot: #a7a7a7;
  top: 0;
  left: 0;
  transform: none;
  width: 700px;
  height: 440px;
  display: flex;
  flex-direction: column;
  border-radius: 7px 7px 5px 5px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.55 0 0 0 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, var(--metal-top), #c3c3c3 30%, #b6b6b6 70%, var(--metal-bot));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 16px 44px rgba(0, 0, 0, 0.55);
  animation: none;
  min-width: 0;
}
.looker[hidden],
.browser[hidden] { display: none; }
.looker.opening,
.browser.opening { animation: window-open 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.looker.inactive,
.browser.inactive { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 24px rgba(0, 0, 0, 0.35); }
.looker.animating,
.browser.animating { transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease; }

/* --- Title bar + toolbar (one unified metal strip) --- */

.looker-head { flex: 0 0 auto; padding: 0 10px; }

.looker-titlebar {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}
.looker-titlebar .traffic-lights { position: relative; z-index: 1; }

.looker-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.looker-title img { width: 16px; height: 16px; }
.aqua-window.inactive .looker-title { color: #666; }

/* the little oval button that hides the toolbar */
.toolbar-pill {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: 22px;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #fbfbfb, #cfcfcf 55%, #e6e6e6);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.toolbar-pill:active { background: linear-gradient(to bottom, #cfcfcf, #a9a9a9); }

.looker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
}
.looker.compact .looker-toolbar,
.looker.compact .looker-sidebar { display: none; }

.seg {
  display: flex;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.seg button {
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #333;
  background: linear-gradient(to bottom, #fdfdfd 0%, #e9e9e9 48%, #d6d6d6 52%, #eeeeee 100%);
}
.seg button + button { border-left: 1px solid rgba(0, 0, 0, 0.35); }
.seg button svg { width: 12px; height: 12px; }
.seg.views button svg { width: 14px; }
.seg button:active:not(:disabled),
.seg button.active {
  color: #1c2f55;
  background: linear-gradient(to bottom, #b8c4d6 0%, #9eadc4 48%, #8d9db6 52%, #aab8cc 100%);
}
.seg button:disabled { color: #9a9a9a; }
.seg button.active:disabled { color: #1c2f55; }

.toolbar-space { flex: 1; }

.looker-search {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 170px;
  max-width: 34%;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
  color: #6b6b6b;
}
.looker-search svg { width: 12px; height: 12px; flex: 0 0 auto; }
.looker-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: 12px var(--font-ui);
  color: #000;
  -webkit-appearance: none;
  appearance: none;
}
.looker-search input::-webkit-search-decoration { display: none; }

/* --- Sidebar + icon pane --- */

.looker-main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 7px;
  padding: 0 10px;
}

.looker-sidebar {
  flex: 0 0 164px;
  padding: 8px 0;
  overflow-y: auto;
  border-radius: 3px;
  background: #e8ecf2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 3px 12px;
  font-size: 12px;
  text-align: left;
  color: #000;
  white-space: nowrap;
}
.sidebar-item img { width: 18px; height: 18px; flex: 0 0 auto; }
.sidebar-item span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-item.selected {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(to bottom, #7fa2e3, #4b77cf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.looker.inactive .sidebar-item.selected { background: linear-gradient(to bottom, #b8c1cf, #97a3b6); }

.sidebar-sep {
  height: 1px;
  margin: 8px 10px;
  border: 0;
  background: #b9bfc9;
  box-shadow: 0 1px 0 #fff;
}

.looker-pane {
  flex: 1;
  min-width: 0;
  overflow: auto;
  border-radius: 3px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.looker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 104px);
  grid-auto-rows: 112px;
  justify-content: start;
  gap: 4px 6px;
  padding: 16px 14px;
  min-height: 100%;
}
.looker-grid.empty {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
}
.looker-grid.empty::after {
  content: attr(data-empty-text);
  color: #999;
  font-size: 12px;
}

.looker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
  outline: none;
}
.looker-item .icon-wrap {
  padding: 3px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.looker-item img {
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}
.looker-item .name {
  max-width: 100px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 15px;
  color: #000;
  text-align: center;
  overflow-wrap: anywhere;
}
.looker-item.selected .icon-wrap {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.1);
}
.looker-item.selected .name {
  color: #fff;
  background: #3875d7;
}
.looker.inactive .looker-item.selected .name { background: #a8a8a8; }

/* --- Status bar --- */

.looker-status {
  position: relative;
  flex: 0 0 auto;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #262626;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.grip {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  background: linear-gradient(135deg,
    transparent 0 45%, rgba(0,0,0,0.4) 45% 50%, rgba(255,255,255,0.6) 50% 55%,
    transparent 55% 65%, rgba(0,0,0,0.4) 65% 70%, rgba(255,255,255,0.6) 70% 75%,
    transparent 75% 85%, rgba(0,0,0,0.4) 85% 90%, transparent 90%);
}

@media (max-width: 760px) {
  .looker-sidebar { display: none; }
  .looker-search { width: 110px; }
  .looker-grid { grid-template-columns: repeat(auto-fill, 92px); padding: 12px 8px; }
}

/* ==========================================================================
   TEXT WINDOW (TextEdit-style)
   ========================================================================== */

.textedit {
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  transform: none;
  background: #fff;
}
.textedit[hidden] { display: none; }
.textedit.animating { transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease; }

.textedit-titlebar {
  position: relative;
  flex: 0 0 auto;
}
.textedit-titlebar .traffic-lights { position: relative; z-index: 1; }

.textedit-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.textedit-title img { width: 16px; height: 16px; }
.textedit.inactive .textedit-title { color: #777; }

.textedit-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.textedit-doc {
  max-width: 62ch;
  padding: 26px 34px 40px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
}
.textedit-doc p { margin: 0 0 1em; }
.textedit-doc p:last-child { margin-bottom: 0; }
.textedit-error { color: #888; }

.textedit .grip {
  bottom: 2px;
  right: 2px;
}

/* Aqua-style scrollbar for the document */
.textedit-page::-webkit-scrollbar { width: 15px; }
.textedit-page::-webkit-scrollbar-track {
  background: linear-gradient(to right, #d9d9d9, #f4f4f4 40%, #eeeeee);
  box-shadow: inset 1px 0 0 #b8b8b8;
}
.textedit-page::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
  background-color: #5d93e6;
  background-image: linear-gradient(to right, #9cc2f5, #4d86e0 45%, #3c73cf 55%, #86b3f0);
  box-shadow: inset 0 0 0 1px rgba(20, 60, 140, 0.55);
}

/* ==========================================================================
   STORE — brushed-metal web browser window
   ========================================================================== */

/* while dragging/resizing, a see-through cover stops embedded pages from swallowing the mouse.
   (Not pointer-events on the iframes: Chrome stops scrolling an iframe resized that way.) */
#drag-shield { position: fixed; inset: 0; z-index: 100000; }
body.window-dragging { cursor: default; }

.browser-head { flex: 0 0 auto; padding: 0 10px; }

.browser-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
}

.browser-address {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.browser-address img { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.browser-address input {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: 12px var(--font-ui);
  color: #111;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
/* the page-loading bar fills the address field */
.browser-address .progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(to bottom, #cfe1ff, #9fc2fb 50%, #8ab4f8 51%, #b4d0ff);
  opacity: 0;
}

.browser-bookmarks {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 -10px;
  padding: 2px 10px 3px;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: hidden;
  white-space: nowrap;
}
.browser-bookmarks button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: 9px;
  font-size: 11.5px;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.browser-bookmarks button:hover { background: rgba(0, 0, 0, 0.12); }
.browser-bookmarks button:active { background: rgba(0, 0, 0, 0.25); }
.browser-bookmarks .open-tab { margin-left: auto; }
.browser-bookmarks svg { width: 11px; height: 11px; }

.browser-view {
  flex: 1;
  min-height: 0;
  margin: 0 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.browser-view iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.browser-status { justify-content: flex-start; padding-left: 14px; }
.seg .btn-reload svg { width: 13px; height: 13px; }
.seg .open-tab svg { width: 12px; height: 12px; }

@media (max-width: 760px) {
  .browser-bookmarks .open-tab span { display: none; }
}

/* ==========================================================================
   BOOK A CALL — metal window holding the Cal.com calendar
   ========================================================================== */

.bookcall-bar { padding-top: 4px; padding-bottom: 5px; }
.bookcall-heading {
  padding-left: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bookcall .browser-view { overflow: hidden; }
.bookcall-cal {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.bookcall-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  font-size: 13px;
  color: #444;
}
.bookcall-fallback p { margin: 0; }
.bookcall-fallback a { color: #2f63d8; font-weight: 700; }

/* ==========================================================================
   CONTACT — small pop-up with the email address
   ========================================================================== */

.contact-window { width: 340px; }
.contact-window .aqua-titlebar { position: relative; }
.contact-window .traffic-lights { position: relative; z-index: 1; }
.contact-window .tl:disabled { filter: saturate(0) brightness(1.15); }
.contact-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.contact-window.inactive .contact-title { color: #777; }

.contact-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px 20px;
  text-align: center;
}
.contact-body h1 { margin: 6px 0 2px; font-size: 16px; }
.contact-sub { margin: 0 0 10px; font-size: 11px; color: #555; }
.contact-email {
  padding: 5px 10px;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  font-weight: 700;
  color: #2f63d8;
  text-decoration: none;
  user-select: text;
  -webkit-user-select: text;
  overflow-wrap: anywhere;
}
.contact-email:hover { text-decoration: underline; }

.contact-actions { display: flex; gap: 10px; margin-top: 16px; }

/* Glossy Aqua push buttons */
.aqua-button {
  display: inline-block;
  min-width: 96px;
  padding: 3px 14px 4px;
  border-radius: 11px;
  font-size: 12px;
  color: #111;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 45%, #dcdcdc 55%, #f4f4f4 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.aqua-button.primary {
  color: #0b1a3a;
  background: linear-gradient(to bottom, #d4e6ff 0%, #8ab8f5 45%, #5c97ea 55%, #9cc6fa 100%);
  box-shadow: inset 0 0 0 1px rgba(20, 50, 120, 0.6), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.aqua-button:active { filter: brightness(0.85); }