/* ==========================================================================
   Checkora demo — a 1:1 HTML replica of the macOS app (dark appearance).
   Everything is scoped under .mac so it never leaks into the marketing site.
   Values are sampled from real screenshots of the SwiftUI app.
   Motion rule: no transition or animation shorter than 300ms.
   ========================================================================== */

.mac {
  /* system (dark appearance) */
  --label: rgba(255, 255, 255, 0.86);
  --label-2: rgba(255, 255, 255, 0.55);
  --label-3: rgba(255, 255, 255, 0.28);
  --label-4: rgba(255, 255, 255, 0.12);
  --fill-1: rgba(255, 255, 255, 0.08);   /* Color.primary.opacity(0.08) */
  --fill-2: rgba(255, 255, 255, 0.06);
  --stroke: rgba(255, 255, 255, 0.06);   /* Card stroke: primary.opacity(0.06) */
  --separator: rgba(255, 255, 255, 0.1);

  --win-bg: #313235;       /* windowBackgroundColor (sampled) */
  --sidebar-bg: #2d2e33;   /* sidebar vibrancy (sampled) */
  --card-bg: #282828;      /* controlBackgroundColor (sampled) */
  --edge: #101012;         /* split-view divider (sampled) */
  --selection: #1a6fcc;    /* sidebar selection (sampled #1670cc) */
  --accent: #0a84ff;
  --link: #419cff;

  --green: #30d158;
  --orange: #ff9f0a;
  --red: #ff453a;
  --yellow: #ffd60a;
  --blue: #0a84ff;
  --purple: #bf5af2;
  --pink: #ff375f;
  --teal: #40c8e0;
  --indigo: #5e5ce6;
  --mint: #63e6e2;
  --gray: #98989d;

  /* Palette (Core/Format.swift) */
  --p-cpu: rgb(92, 140, 255);
  --p-memory: rgb(184, 107, 250);
  --p-network: rgb(41, 199, 184);
  --p-upload: rgb(255, 140, 66);
  --p-disk: rgb(255, 189, 51);
  --p-battery: rgb(77, 209, 102);
  --p-ssd: rgb(242, 97, 128);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;

  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --t: 320ms var(--ease);
  --t-slow: 600ms var(--ease);

  position: relative;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.3;
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  text-align: left;
  letter-spacing: -0.003em;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}
.mac *, .mac *::before, .mac *::after { box-sizing: border-box; }
.mac button { font: inherit; color: inherit; }
.mac .num { font-variant-numeric: tabular-nums; }
.mac .rnd { font-family: var(--rounded); }
.mac .sec { color: var(--label-2); }
.mac .ter { color: var(--label-3); }
.mac .mono { font-family: var(--mono); }
.mac .link { color: var(--link); cursor: pointer; transition: opacity var(--t); }
.mac .link:hover { opacity: 0.8; }

/* ---------- macOS menu bar ---------------------------------------------- */
.mac-menubar {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 12px 0 16px;
  background: rgba(22, 22, 24, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  z-index: 30;
}
.mac-menubar .mb-apple { width: 14px; height: 16px; display: grid; place-items: center; }
.mac-menubar .mb-app { font-weight: 700; }
.mac-menubar .mb-spacer { flex: 1; }
.mac-menubar .mb-right { display: flex; align-items: center; gap: 14px; font-size: 12.5px; }
.mac-menubar .mb-sys { display: flex; align-items: center; opacity: 0.92; }
.mb-status {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color var(--t);
}
.mb-status:hover, .mb-status.open { background: rgba(255, 255, 255, 0.16); }
.mb-stack { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.mb-stack b { font-size: 7px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 1px; }
.mb-stack span { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mb-net { display: flex; flex-direction: column; align-items: flex-end; font-size: 9px; font-weight: 600; line-height: 1; gap: 1px; font-variant-numeric: tabular-nums; width: 44px; }
.mb-compact { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-bars {
  display: flex; align-items: flex-end; gap: 1px;
  height: 18px; padding: 1px;
  border: 0.7px solid rgba(255, 255, 255, 0.55);
  border-radius: 2px;
}
.mb-bars i { display: block; width: 2px; background: currentColor; transition: height var(--t); }

/* ---------- desktop + window ------------------------------------------- */
.mac-desktop { position: relative; }
.mac-window {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: 12px;
  background: var(--win-bg);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

/* sidebar */
.mac-sidebar {
  width: 238px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--edge);
  position: relative;
}
.mac-sidebar-top {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 0 0 20px;
  gap: 8px;
}
.traffic { display: flex; gap: 8px; }
.traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.traffic i:nth-child(1) { background: #ff5f57; }
.traffic i:nth-child(2) { background: #febc2e; }
.traffic i:nth-child(3) { background: #28c840; }
.mac-sidebar-toggle { margin-left: 30px; color: var(--label-2); display: grid; place-items: center; }

.mac-sidebar-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px 14px;
  scrollbar-width: none;
}
.mac-sidebar-list::-webkit-scrollbar { display: none; }
.sb-group { font-size: 11px; font-weight: 600; color: var(--label-3); padding: 12px 8px 6px; }
.sb-group:first-child { padding-top: 6px; }
.sb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--label);
  cursor: default;
  transition: background-color var(--t), color var(--t);
}
.sb-item:hover { background: rgba(255, 255, 255, 0.05); }
.sb-item .sb-ic { width: 18px; display: grid; place-items: center; color: var(--accent); transition: color var(--t); }
.sb-item .sb-ic svg { width: 15px; height: 15px; }
.sb-item .sb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item .sb-badge { font-size: 10.5px; color: var(--label-2); font-variant-numeric: tabular-nums; transition: color var(--t); }
.sb-item.on { background: var(--selection); color: #fff; }
.sb-item.on .sb-ic, .sb-item.on .sb-badge { color: #fff !important; }
.sb-item.on .sb-badge * { color: #fff !important; }

/* detail column */
.mac-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.mac-toolbar {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.mac-main.scrolled .mac-toolbar { border-bottom-color: rgba(0, 0, 0, 0.5); }
.mac-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.mac-content::-webkit-scrollbar { width: 11px; }
.mac-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.mac-screen { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.mac-screen.fade { animation: macScreenIn 380ms var(--ease) both; }
@keyframes macScreenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- SwiftUI components ------------------------------------------ */

/* PageHeader */
.page-header { display: flex; flex-direction: column; gap: 2px; }
.page-header h1 { margin: 0; font-family: var(--rounded); font-size: 26px; font-weight: 700; color: var(--label); line-height: 1.15; letter-spacing: -0.01em; }
.page-header p { margin: 0; color: var(--label-2); font-size: 13px; }

/* Card */
.card {
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--stroke);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  transition: box-shadow var(--t), background-color var(--t), transform var(--t);
}
.card.tap { cursor: pointer; }
.card.tap:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.card-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.01em; }
.card-title .ic svg { width: 13px; height: 13px; stroke-width: 2.4; }
.card-title .grow { flex: 1; }

/* grids that mimic LazyVGrid(.adaptive(minimum:)) */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(var(--min, 250px), 1fr)); }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.base { align-items: baseline; }
.row.top { align-items: flex-start; }
.col { display: flex; flex-direction: column; min-width: 0; }
.spacer { flex: 1; min-width: 0; }
.divider { height: 1px; background: var(--separator); flex: none; }

/* big value: .system(size: 30, weight: .bold, design: .rounded) */
.big { font-family: var(--rounded); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }

/* Metric */
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric .m-l { font-size: 11px; color: var(--label-2); }
.metric .m-v { font-family: var(--rounded); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* KeyValueRow */
.kv { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.kv .k { color: var(--label-2); }
.kv .v { margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; user-select: text; }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 99px;
  white-space: nowrap;
  transition: background-color var(--t), color var(--t);
}

/* LegendDot */
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.legend .l { color: var(--label-2); }
.legend .v { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }

/* UsageBar */
.usage { display: flex; gap: 1.5px; overflow: hidden; background: var(--fill-1); width: 100%; }
.usage i { display: block; height: 100%; flex: none; transition: width var(--t-slow); }

/* ProgressView (linear) */
.progress { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; width: 100%; }
.progress i { display: block; height: 100%; border-radius: 3px; transition: width var(--t-slow); }
.progress.indeterminate i { width: 30%; animation: macIndet 1200ms var(--ease) infinite; }
@keyframes macIndet { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* ProgressView (circular spinner, .controlSize(.small)) */
.spinner { width: 14px; height: 14px; flex: none; display: inline-block; animation: macSpin 900ms steps(8) infinite; }
.spinner svg { width: 100%; height: 100%; display: block; }
@keyframes macSpin { to { transform: rotate(360deg); } }

/* RingGauge */
.ring { position: relative; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring .ring-arc { transition: stroke-dashoffset var(--t-slow), stroke var(--t); }
.ring .ring-label { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ring .ring-label b { font-family: var(--rounded); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ring .ring-label span { color: var(--label-2); }

/* Sparkline (drawn every frame by core.js) */
.spark { display: block; width: 100%; overflow: hidden; }

/* Buttons — .bordered / .borderedProminent / .plain, controlSize regular + small */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 22px; padding: 0 9px;
  font-size: 13px; line-height: 1;
  border: 0; border-radius: 6px;
  background: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--t), opacity var(--t), filter var(--t);
}
.btn:hover { background: rgba(255, 255, 255, 0.3); }
.btn:active { filter: brightness(1.25); }
.btn svg { width: 13px; height: 13px; }
.btn.sm { height: 19px; font-size: 11.5px; padding: 0 7px; border-radius: 5px; gap: 4px; }
.btn.sm svg { width: 11px; height: 11px; }
.btn.lg { height: 28px; font-size: 13px; padding: 0 14px; border-radius: 7px; }
.btn.prominent { background: var(--accent); color: #fff; }
.btn.prominent:hover { background: #2b95ff; }
.btn.tinted { background: color-mix(in srgb, var(--tint) 22%, transparent); color: var(--tint); }
.btn.tinted.prominent { background: var(--tint); color: #fff; }
.btn.plain { background: transparent; box-shadow: none; padding: 0; height: auto; color: var(--link); }
.btn.plain:hover { opacity: 0.8; }
.btn.borderless { background: transparent; box-shadow: none; padding: 0 4px; color: var(--label-2); }
.btn.borderless:hover { color: var(--label); }
.btn[disabled], .btn.disabled { opacity: 0.4; pointer-events: none; }

/* Toggle (.switch) */
.toggle {
  width: 32px; height: 19px; border-radius: 10px; flex: none;
  background: rgba(255, 255, 255, 0.16);
  position: relative; cursor: pointer;
  transition: background-color var(--t);
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #e8e8e8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform var(--t);
}
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(13px); background: #fff; }
.toggle.sm { width: 26px; height: 15px; }
.toggle.sm::after { width: 11px; height: 11px; }
.toggle.sm.on::after { transform: translateX(11px); }

/* Checkbox (Toggle .checkbox) */
.check {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--t);
}
.check svg { width: 10px; height: 10px; opacity: 0; transform: scale(0.6); transition: opacity var(--t), transform var(--t); color: #fff; }
.check.on { background: var(--accent); box-shadow: none; }
.check.on svg { opacity: 1; transform: none; }

/* Picker(.segmented) */
.seg {
  display: inline-flex; padding: 2px; gap: 0; border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  position: relative;
}
.seg button {
  border: 0; background: transparent; height: 20px; padding: 0 10px;
  font-size: 12px; border-radius: 5px; color: var(--label);
  white-space: nowrap;
  transition: background-color var(--t), box-shadow var(--t);
}
.seg button.on { background: rgba(255, 255, 255, 0.22); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.35); }
.seg button:not(.on):hover { background: rgba(255, 255, 255, 0.06); }

/* Picker(.menu) / popup button */
.popup {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 6px 0 9px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1), 0 0.5px 1px rgba(0, 0, 0, 0.3);
  font-size: 13px; white-space: nowrap;
  transition: background-color var(--t);
}
.popup:hover { background: rgba(255, 255, 255, 0.2); }
.popup .chev { width: 16px; height: 16px; border-radius: 4px; background: var(--accent); display: grid; place-items: center; }
.popup .chev svg { width: 10px; height: 10px; color: #fff; }

/* TextField / SearchField */
.field {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 7px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  font-size: 13px; color: var(--label);
  transition: box-shadow var(--t);
}
.field input {
  all: unset; flex: 1; min-width: 0; font: inherit; color: inherit; user-select: text; -webkit-user-select: text; cursor: text;
}
.field input::placeholder { color: var(--label-3); }
.field:focus-within { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.5), inset 0 0 0 0.5px rgba(10, 132, 255, 0.9); }
.field svg { width: 12px; height: 12px; color: var(--label-2); flex: none; }
.field.search { border-radius: 7px; }

/* Slider */
.slider { position: relative; height: 18px; display: flex; align-items: center; flex: 1; }
.slider .track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); width: 100%; position: relative; }
.slider .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); transition: width var(--t); }
.slider .knob { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #d9d9d9; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: left var(--t); }

/* Lists / rows inside cards */
.list-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.list-row .t { font-size: 13px; }
.list-row .s { font-size: 11.5px; color: var(--label-2); }
.list-row + .list-row { margin-top: 0; }
.rows > * + * { border-top: 1px solid var(--separator); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* SF-symbol-like icon wrapper */
.ic { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.ic svg { width: 1em; height: 1em; }

/* App icons (stand-ins for NSWorkspace icons) */
.appicon {
  flex: none; display: grid; place-items: center;
  border-radius: 23%;
  color: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 1px 1.5px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.appicon svg { width: 62%; height: 62%; }

/* Table (SwiftUI Table in dark mode) */
.mtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.mtable th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 400; color: var(--label-2); font-size: 12px;
  padding: 5px 8px; background: var(--win-bg);
  border-bottom: 1px solid var(--separator);
  white-space: nowrap;
}
.mtable th + th { box-shadow: inset 1px 0 0 var(--separator); }
.mtable th.sorted { color: var(--label); font-weight: 600; }
.mtable td { padding: 4px 8px; height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mtable tbody tr { transition: background-color var(--t); }
.mtable tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
.mtable tbody tr:hover { background: rgba(255, 255, 255, 0.07); }
.mtable tbody tr.sel { background: var(--selection); color: #fff; }
.mtable tbody tr.sel td { color: #fff !important; }
.mtable td.r, .mtable th.r { text-align: right; }

/* Treemap / sunburst helpers used by storage screens */
.tm { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.tm .tile {
  position: absolute; overflow: hidden; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  font-size: 11px; color: rgba(255, 255, 255, 0.92); padding: 4px 5px;
  transition: filter var(--t), transform var(--t);
}
.tm .tile:hover { filter: brightness(1.18); }

/* Sheet (modal over window) */
.mac-sheet-backdrop {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, 0.3);
  display: flex; justify-content: center; align-items: flex-start;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t);
}
.mac-sheet-backdrop.show { opacity: 1; pointer-events: auto; }
.mac-sheet {
  margin-top: 52px;
  background: #2b2b2d; border-radius: 12px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(-14px); transition: transform var(--t);
}
.mac-sheet-backdrop.show .mac-sheet { transform: none; }

/* NSPopover from the status item */
.mac-popover {
  position: absolute; z-index: 40; top: 34px;
  width: 340px;
  background: rgba(40, 40, 42, 0.97);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border-radius: 12px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.9), inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 22px 60px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top center;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.mac-popover.show { opacity: 1; transform: none; pointer-events: auto; }
.mac-popover::before {
  content: ""; position: absolute; top: -7px; left: var(--arrow, 50%);
  width: 14px; height: 14px; margin-left: -7px;
  background: rgb(40, 40, 42);
  transform: rotate(45deg); border-radius: 3px 0 0 0;
  box-shadow: inset 0.5px 0.5px 0 rgba(255, 255, 255, 0.18);
}
.pop { padding: 14px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.pop-row { display: flex; flex-direction: column; gap: 4px; cursor: pointer; border-radius: 6px; transition: opacity var(--t); }
.pop-row:hover { opacity: 0.8; }
.pop-row .h { display: flex; align-items: center; gap: 8px; }
.pop-row .h .dot { width: 7px; height: 7px; border-radius: 50%; }
.pop-row .h b { font-size: 12px; font-weight: 600; }
.pop-row .h > span:last-child { margin-left: auto; font-size: 11.5px; color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Menu (NSMenu look) */
.mac-menu {
  position: absolute; z-index: 50; min-width: 180px; padding: 5px;
  background: rgba(38, 38, 40, 0.98);
  border-radius: 8px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.9), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 12px 32px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  opacity: 0; transform: scale(0.98); pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.mac-menu.show { opacity: 1; transform: none; pointer-events: auto; }
.mac-menu div { padding: 3px 10px; border-radius: 4px; transition: background-color var(--t); white-space: nowrap; }
.mac-menu div:hover { background: var(--accent); color: #fff; }
.mac-menu hr { border: 0; height: 1px; background: rgba(255, 255, 255, 0.1); margin: 5px 6px; }

/* Toast used when a demo action would touch the real system */
.mac-toast {
  position: absolute; left: 50%; bottom: 18px; z-index: 60;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: rgba(30, 30, 32, 0.96);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.8), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.45);
  border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--label);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: opacity var(--t), transform var(--t);
}
.mac-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* SwiftUI Text in an HStack keeps to one line and truncates rather than wrapping */
.row.base > *, .card-title > span { white-space: nowrap; }
.row.base > .sec { overflow: hidden; text-overflow: ellipsis; min-width: 0; }