/* Tab prototype · desktop: tokens, screen, wallpaper, menu bar, Dock, window chrome.
   Native macOS 26 look: system font, fills over strokes, concentric radii. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
  --ink: #1d1d1f;
  --ink2: rgba(60, 60, 67, .64);
  --ink3: rgba(60, 60, 67, .34);
  --ink4: rgba(60, 60, 67, .2);
  --fill: rgba(118, 118, 128, .12);
  --fill2: rgba(118, 118, 128, .08);
  --fill3: rgba(118, 118, 128, .05);
  --sep: rgba(60, 60, 67, .11);
  --accent: #007aff;
  --accent-d: #0a84ff;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --spring: cubic-bezier(.32, 1.28, .52, 1);
  --soft: cubic-bezier(.2, .8, .2, 1);
}

.screen *, .screen *::before, .screen *::after { box-sizing: border-box; }
.screen {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px;
  transform-origin: 0 0; overflow: hidden; isolation: isolate;
  font: 13px/1.4 var(--font); color: var(--ink); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; user-select: none; cursor: default;
  font-variant-numeric: tabular-nums;
}
.screen svg.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.screen b { font-weight: 600; }

/* seeking / still frames: no transitions; keep infinite loops calm */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }
.still *, .still *::before, .still *::after { animation-play-state: paused !important; }
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }

.wall { position: absolute; inset: 0; background: #e8ecf5 url(../img/wallpaper.svg) center / cover no-repeat; }
.veil { position: absolute; inset: 0; z-index: 400; background: #e8ecf5 url(../img/wallpaper.svg) center / cover no-repeat; opacity: 0; visibility: hidden; pointer-events: none; }
.desk { position: absolute; inset: 0; z-index: 1; }

/* ---------------------------------------------------------------- menu bar (Tahoe: no bar background) */
.menubar {
  position: absolute; left: 0; right: 0; top: 0; height: 24px; z-index: 500;
  display: flex; justify-content: space-between; align-items: center; padding: 0 12px 0 16px;
  font-size: 13px; color: rgba(0, 0, 0, .86);
}
.mb-l, .mb-r { display: flex; align-items: center; gap: 0; height: 100%; }
.mb-l > * { padding: 0 9px; }
.mb-l b { font-weight: 700; padding-left: 4px; }
.mb-glyph { width: 0; padding: 0 !important; }
.mb-r > span { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 7px; border-radius: 6px; }
.mb-r svg.ic { width: 15px; height: 15px; stroke-width: 1.7; }
.mb-time { font-size: 13px; padding-left: 9px !important; }
.mb-bat i { display: block; width: 22px; height: 11px; border-radius: 3.5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .42); position: relative; }
.mb-bat i::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 15px; border-radius: 1.5px; background: rgba(0, 0, 0, .82); }
.mb-bat i::after { content: ""; position: absolute; right: -2.5px; top: 3.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(0, 0, 0, .4); }
.mb-tab { position: relative; }
.mb-tab svg.ic { stroke-width: 2; }
.mb-tab.glow { background: rgba(0, 122, 255, .16); color: var(--accent); }
.mb-tab.glow::after { content: ""; position: absolute; inset: -3px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(0, 122, 255, .35); animation: tabGlow 1.6s ease-out infinite; }
.mb-tab.badge::before { content: ""; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
@keyframes tabGlow { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }

/* ---------------------------------------------------------------- Dock */
.dock { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 450; display: flex; justify-content: center; pointer-events: none; }
.dock-in {
  display: flex; align-items: center; gap: 4px; height: 66px; padding: 0 8px; border-radius: 24px;
  background: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .8), inset 0 0 0 .5px rgba(255, 255, 255, .45), 0 0 0 .5px rgba(0, 0, 0, .08), 0 10px 30px -8px rgba(30, 50, 110, .35);
}
.dock-app { position: relative; width: 52px; height: 52px; }
.dock-app .appic { width: 52px; height: 52px; display: block; filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .16)); }
.dock-app .dot { position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0, 0, 0, .62); opacity: 0; }
.dock-app.run .dot { opacity: 1; }
.dock-app.bounce { animation: dockBounce .9s var(--soft); }
@keyframes dockBounce { 0%, 100% { transform: none; } 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } 75% { transform: translateY(-6px); } }
.dock-sep { width: 1px; height: 46px; margin: 0 5px; background: rgba(0, 0, 0, .14); }
.chrome-0 .menubar, .chrome-0 .dock { display: none; }
.dock { transition: transform .45s var(--spring), opacity .3s; }
.clip-open .dock { transform: translateY(96px); opacity: 0; }

/* ---------------------------------------------------------------- windows */
.win {
  position: absolute; overflow: hidden; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .06), 0 30px 70px -14px rgba(20, 30, 60, .36), 0 10px 26px -10px rgba(20, 30, 60, .2);
  transition: opacity .4s var(--soft), transform .5s var(--soft), box-shadow .3s, filter .3s;
}
.win.bg { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 18px 44px -14px rgba(20, 30, 60, .26); }
.win.in { animation: winIn .5s var(--soft) both; }
@keyframes winIn { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.win.away { opacity: 0; transform: scale(.96) translateY(14px); pointer-events: none; }
.tl { display: flex; gap: 8px; flex: none; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.tl i:nth-child(2) { background: #febc2e; }
.tl i:nth-child(3) { background: #28c840; }
.win.bg .tl i { background: #d6d6da; }

/* standard toolbar */
.tb { position: relative; display: flex; align-items: center; height: 52px; padding: 0 14px 0 20px; gap: 14px; flex: none; }
.tb-title { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tb-title small { display: block; font-size: 11px; font-weight: 400; color: var(--ink2); margin-top: 1px; }
.tb-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tbb { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 34px; padding: 0 8px; border-radius: 15px; color: rgba(0, 0, 0, .66); }
.tbb.glassy { background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .08); }
.tbb svg.ic { width: 17px; height: 17px; }
.win.bg .tb-title { color: rgba(0, 0, 0, .45); }

/* desktop widgets (glass) */
.widget {
  position: absolute; border-radius: 22px; padding: 14px 16px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .85), 0 0 0 .5px rgba(0, 0, 0, .06), 0 12px 30px -10px rgba(30, 50, 110, .3);
}

/* avatars */
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 6px; color: #fff; font-weight: 600; background: var(--av); }
.av.rd { border-radius: 50%; }

/* file icons */
svg.fi { display: block; flex: none; filter: drop-shadow(0 .5px 1px rgba(0, 0, 0, .16)); }