/* The notch: DynamicNotchKit's shape and motion, and NotchFlow's Live Tiles world (Theme.swift).
   Values mirror the SwiftUI source: Metro colours, type sizes, 8 pt gaps, flat rectangles. */

:root {
  --ground: #000;
  --ink: #fff;
  --dim: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.34);
  --rule: rgba(255, 255, 255, 0.14);
  --accent: #1BA1E2;
  --alert: #E51400;
  --alert-text: #FF6A5C;
  --gap: 8px;
  --f-skill: #0050EF; --f-instructions: #A4C400; --f-agent: #D80073; --f-prompt: #F0A30A;
  --f-mcp: #008A00; --f-settings: #6A00FF; --f-plugin: #A20025; --f-package: #825A2C;
  --nf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Inter", "Helvetica Neue", sans-serif;
}

/* ---------- The notch body (shape is a clip-path path driven by a spring in notch-shell.js) ---------- */
.notch {
  position: absolute; top: 0; left: 50%; z-index: 55; color: var(--ink); font-family: var(--nf);
  -webkit-font-smoothing: antialiased; will-change: clip-path, width, height;
}
.notch-bg { position: absolute; inset: 0; background: #000; }
.notch.shadowed { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55)); }
.notch.hovering { filter: drop-shadow(0 8px 26px rgba(0,0,0,0.75)); }

/* Compact wings */
.compact { position: absolute; top: 0; display: flex; align-items: center; height: 100%; white-space: nowrap; }
.compact .wing { display: flex; align-items: center; gap: 6px; padding: 4px 5px 8px; height: 100%; cursor: pointer; }
.compact .wing.lead { padding-left: 13px; }
.compact .wing.trail { padding-right: 13px; }
.compact .mark { display: grid; grid-template-columns: 5px 5px; gap: 1.5px; }
.compact .mark i { width: 5px; height: 5px; display: block; }
.compact .word { font-size: 12px; font-weight: 300; letter-spacing: -0.2px; }
.compact .count { font-size: 12px; font-weight: 300; font-variant-numeric: tabular-nums; }
.compact .sq { width: 5px; height: 5px; background: var(--accent); }
.compact .attention { min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; background: var(--alert); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.compact .wing-in { animation: wing-in 0.4s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes wing-in { from { opacity: 0; filter: blur(6px); transform: scaleX(0.2); } }

/* Expanded panel */
.expanded { position: absolute; left: 0; top: 0; transform-origin: top center; }
.expanded.enter { animation: panel-in 0.42s cubic-bezier(.25,1.2,.4,1) both; }
.expanded.leave { animation: panel-out 0.28s ease-in both; }
@keyframes panel-in { from { opacity: 0; filter: blur(10px); transform: scaleY(0.6); } }
@keyframes panel-out { to { opacity: 0; filter: blur(10px); transform: scaleY(0.6); } }
@media (prefers-reduced-motion: reduce) {
  .expanded.enter, .expanded.leave, .compact .wing-in { animation-duration: 0.01s; }
}

.cv { display: flex; flex-direction: column; background: var(--ground); color: var(--ink); overflow: hidden; }
.cv * { box-sizing: border-box; }
.cv button { font-family: var(--nf); }

/* ---------- Type (Metro.display / body / label) ---------- */
.d { font-weight: 300; letter-spacing: -0.01em; }
.b { font-weight: 400; }
.l { font-weight: 500; }
.mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.acc { color: var(--accent); }
.alert-t { color: var(--alert-text); }
.nums { font-variant-numeric: tabular-nums; }
.clip1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clip2, .clip3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clip2 { -webkit-line-clamp: 2; }
.clip3 { -webkit-line-clamp: 3; }
.crop { white-space: nowrap; overflow: hidden; }

/* ---------- Header: pivots and controls ---------- */
.hdr { display: flex; align-items: baseline; padding: 10px 18px 12px 28px; flex: none; }
.pivots { flex: 1; display: flex; gap: 26px; align-items: baseline; overflow: hidden; min-width: 0; }
.pivot {
  border: 0; background: none; padding: 0; color: var(--faint); font-size: 38px; font-weight: 300; line-height: 1.12;
  white-space: nowrap; cursor: pointer; position: relative; transition: color 0.25s;
}
.pivot.on { color: var(--ink); }
.pivot:hover:not(.on) { color: rgba(255,255,255,0.5); }
.pivot .attn { position: absolute; top: 6px; right: -10px; width: 8px; height: 8px; background: var(--alert); }
.pivots.slide { animation: pivots-in 0.34s cubic-bezier(.3,1,.4,1); }
@keyframes pivots-in { from { transform: translateX(var(--from, 40px)); opacity: 0.4; } }
.back { border: 0; background: none; color: var(--ink); display: flex; align-items: baseline; gap: 10px; padding: 0; cursor: pointer; flex: 1; min-width: 0; }
.back svg { width: 20px; height: 20px; align-self: center; }
.back span { font-size: 38px; font-weight: 300; line-height: 1.12; white-space: nowrap; }
.controls { display: flex; gap: 4px; padding-left: 12px; align-self: center; }
.ib { width: 30px; height: 30px; border: 0; background: none; color: var(--dim); display: grid; place-items: center; cursor: pointer; }
.ib svg { width: 15px; height: 15px; }
.ib:hover { color: var(--ink); }
.ib.on { color: var(--accent); }
.spinner { width: 14px; height: 14px; border: 1.5px solid rgba(27,161,226,0.25); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.search { margin: 0 28px 10px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1.5px solid rgba(255,255,255,0.7); flex: none; }
.search.focus { border-color: var(--accent); }
.search input { flex: 1; background: none; border: 0; outline: none; color: var(--ink); font: 400 15px var(--nf); }
.search input::placeholder { color: var(--faint); }

/* ---------- Body / panes ---------- */
.body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.pane { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pane.push-trailing { animation: push-t 0.36s cubic-bezier(.3,1,.4,1); }
.pane.push-leading { animation: push-l 0.36s cubic-bezier(.3,1,.4,1); }
@keyframes push-t { from { transform: translateX(60px); opacity: 0; } }
@keyframes push-l { from { transform: translateX(-60px); opacity: 0; } }
.px { padding-left: 28px; padding-right: 28px; }
.scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.cols { display: flex; gap: 28px; align-items: flex-start; flex: 1; min-height: 0; }
.cols > .scroll { max-height: 100%; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row.base { align-items: baseline; }
.spacer { flex: 1; }
.rule { height: 1px; background: var(--rule); }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g14 { gap: 14px; } .g18 { gap: 18px; } .g26 { gap: 26px; }

/* ---------- Footer ---------- */
.ftr { height: 30px; flex: none; position: relative; display: flex; align-items: center; gap: 14px; padding: 0 28px; font-size: 11px; font-weight: 500; color: var(--dim); }
.ftr .watch { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; padding: 0; cursor: pointer; font: inherit; }
.ftr .watch i { width: 6px; height: 6px; display: block; background: var(--faint); }
.ftr .watch.on i { background: var(--accent); }
.ftr .handle { position: absolute; left: 50%; top: 50%; width: 52px; height: 19px; margin: -9.5px 0 0 -26px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.ftr .handle i { width: 36px; height: 3px; background: rgba(255,255,255,0.25); display: block; }
.ftr .handle:hover i { background: rgba(255,255,255,0.5); }
.banner { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 28px; font-size: 13px; font-weight: 400; animation: banner-in 0.25s ease-out; }
.banner.notice { background: var(--accent); color: #000; }
.banner.error { background: var(--alert); color: #fff; }
.banner button { border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.banner svg { width: 12px; height: 12px; }
@keyframes banner-in { from { opacity: 0; } }

/* ---------- Section heading ---------- */
.sh { display: flex; align-items: baseline; gap: 10px; }
.sh .t { font-size: 24px; font-weight: 300; color: var(--ink); }
.sh .c { font-size: 18px; font-weight: 300; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- Buttons (MetroButton) ---------- */
.mb {
  min-height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(255,255,255,0.8);
  background: transparent; color: #fff; font: 400 14px var(--nf); cursor: pointer; white-space: nowrap; user-select: none;
}
.mb:active:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mb.primary { background: var(--accent); color: #000; border-color: transparent; font-weight: 500; }
.mb.primary:active:not(:disabled) { background: #fff; color: #000; }
.mb.quiet { border-color: transparent; padding: 0 4px; color: var(--dim); }
.mb.quiet:hover:not(:disabled) { color: var(--ink); }
.mb.quiet:active:not(:disabled) { color: var(--accent); }
.mb.destructive { border-color: var(--alert-text); color: var(--alert-text); }
.mb.destructive:active:not(:disabled) { background: var(--alert); border-color: var(--alert); color: #fff; }
.mb:disabled { opacity: 0.38; cursor: default; }
.mb svg { width: 9px; height: 9px; }
.mb.alert-q { color: var(--alert-text); }

/* Chips */
.chip {
  height: 26px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.6);
  background: transparent; color: #fff; font: 400 12px var(--nf); cursor: pointer; white-space: nowrap;
}
.chip.on { background: var(--accent); color: #000; border-color: transparent; }
.chip.sm { height: 22px; padding: 0 8px; font-size: 11px; }
.chip.rule { border-color: var(--rule); color: var(--dim); }
.chip.rule.on { color: #000; border-color: transparent; }
.tag { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid var(--rule); font-size: 11px; font-weight: 500; white-space: nowrap; }
.tag.new { background: var(--accent); color: #000; border-color: transparent; }
.flow { display: flex; flex-wrap: wrap; gap: 6px; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,0.4); }
.seg button { height: 22px; padding: 0 9px; border: 0; background: none; color: var(--dim); font: 400 11px var(--nf); cursor: pointer; }
.seg button.on { background: var(--accent); color: #000; }

/* Text fields */
.field { height: 30px; padding: 0 8px; background: none; border: 1px solid rgba(255,255,255,0.6); color: #fff; font: 400 14px var(--nf); outline: none; width: 100%; }
.field:focus { border-color: var(--accent); }
.field::placeholder { color: var(--faint); }
.field.sm { height: 26px; font-size: 12px; }

/* Checkbox and switch */
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); cursor: pointer; }
.check input { appearance: none; width: 13px; height: 13px; border: 1px solid rgba(255,255,255,0.45); border-radius: 3px; margin: 0; display: grid; place-items: center; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 6px; height: 3px; border: 1.5px solid #000; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; cursor: pointer; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.22); position: relative; margin: 0; transition: background 0.2s; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }

/* Popup menu (SwiftUI Menu) */
.popover { position: absolute; z-index: 20; min-width: 160px; padding: 4px; background: rgba(36,36,40,0.96); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.popover button { display: block; width: 100%; text-align: left; padding: 4px 10px; border: 0; background: none; color: #fff; font: 400 13px var(--nf); border-radius: 5px; cursor: pointer; white-space: nowrap; }
.popover button:hover { background: #0a63e8; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); font: 400 11px var(--nf); cursor: pointer; }

/* ---------- Tiles ---------- */
.tile {
  position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; border: 0; padding: 10px;
  cursor: pointer; overflow: hidden; color: #fff; background: #1d1d1d; font-family: var(--nf);
  transition: transform 0.22s cubic-bezier(.3,1.5,.5,1); transform-style: preserve-3d;
}
.tile:active { transform: perspective(600px) scale(0.965) rotate3d(1, -0.6, 0, 7deg); }
.tile .top { display: flex; align-items: flex-start; gap: 6px; }
.tile .grow { flex: 1; min-height: 0; }
.tile svg { width: 14px; height: 14px; flex: none; }
.state-badge { display: inline-flex; align-items: center; gap: 3px; height: 15px; padding: 0 5px; border: 1px solid currentColor; font-size: 9px; font-weight: 500; white-space: nowrap; }
.state-badge.soft { border-color: color-mix(in srgb, currentColor 50%, transparent); }
.state-badge svg { width: 8px; height: 8px; }
.badge-box { height: 16px; padding: 0 5px; display: inline-flex; align-items: center; font-size: 10px; font-weight: 500; border: 1px solid color-mix(in srgb, currentColor 60%, transparent); }
.app-badge { display: grid; place-items: center; flex: none; color: #fff; font-weight: 600; }
.excl { width: 18px; height: 18px; display: grid; place-items: center; background: var(--alert); color: #fff; font-size: 12px; font-weight: 700; }
.tile-new { height: 15px; padding: 0 5px; display: inline-flex; align-items: center; font-size: 9px; font-weight: 500; background: var(--accent); color: #000; }

/* Tile wall: dense packing of square units (Theme.swift TileWall) */
.wall { position: relative; }
.wall > * { position: absolute; }

/* Glide in from the trailing edge, type first, short stagger */
.glide { animation: glide 0.42s ease-out both; }
@keyframes glide { from { opacity: 0; transform: translateX(36px); } }
@media (prefers-reduced-motion: reduce) { .glide { animation: none; } .tile:active { transform: scale(0.98); } }

/* Session grid (Today) */
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.sgrid .tile { height: 124px; }

/* Cards with a rule border */
.card { padding: 14px; border: 1.5px solid var(--rule); }
.card.accent { border-color: var(--accent); }
.card.thin { border-width: 1px; padding: 12px; }

/* Live screens */
.screen { background: #05121A; color: #D8F5FF; padding: 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.screen .ln { font: 400 8.5px/1.25 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; overflow: hidden; text-overflow: clip; }
.screen.big .ln { font-size: 10px; }
.screen-tile { width: 270px; height: 118px; flex: none; display: flex; flex-direction: column; border: 1.5px solid var(--rule); background: none; padding: 0; cursor: pointer; color: #fff; text-align: left; }
.screen-tile.live { border-color: var(--accent); }
.screen-tile .screen { flex: 1; }
.screen-tile .cap { height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 11px; }
.dotsq { width: 6px; height: 6px; display: inline-block; flex: none; background: var(--faint); }
.dotsq.on { background: var(--accent); }
.dotsq.alert { background: var(--alert); }

/* Bars and meters */
.bar { height: 6px; background: var(--rule); position: relative; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: width 0.6s ease; }
.bar.hot > i { background: var(--alert); }
.bar.thin { height: 4px; }
.weekbars { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.weekbars .wk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.weekbars .wk i { width: 100%; display: block; background: var(--accent); }
.weekbars .wk i.zero { background: var(--rule); }
.weekbars .wk span { font-size: 9px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Rows used by lists */
.lrow { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border: 0; background: none; color: inherit; width: 100%; text-align: left; cursor: pointer; font-family: var(--nf); }
.lrow:hover .hov { color: var(--ink); }
.lrow:disabled { cursor: default; }