/* =====================================================================================================
   mac.css — the "Andy's computer" kit (PROTOTYPE).
   Values are copied from Andy's design-system artifact "HIG Native" (tokens.json and components/src/*.css,
   macOS 27 kit points; 1 CSS px inside the desktop = 1 pt). Names follow .dev/brief-mac-contract.md.
   Everything is scoped under .mac; appearance follows the nearest [data-theme="light|dark"].
   Owned by the shell agent. The apps agent uses these names and never restyles them.
   No Apple marks or artwork here: glyphs and icons live in the shell and the apps and are original.
   ===================================================================================================== */

/* ---------- Tokens: light (default) ---------- */
.mac,
.mac [data-theme="light"] {
  color-scheme: light;
  /* system colors (tokens.json color.tokens, light) */
  --system-red: #ff383c; --system-orange: #ff8d28; --system-yellow: #ffcc00; --system-green: #34c759;
  --system-mint: #00c8b3; --system-teal: #00c3d0; --system-cyan: #00c0e8; --system-blue: #0088ff;
  --system-indigo: #6155f5; --system-purple: #cb30e0; --system-pink: #ff2d55; --system-brown: #ac7f5e;
  --system-gray: #8e8e93; --system-gray-2: #aeaeb2; --system-gray-3: #c7c7cc; --system-gray-4: #d1d1d6;
  --system-gray-5: #e5e5ea; --system-gray-6: #f2f2f7;
  --white: #ffffff; --black: #000000;
  /* iOS-family labels/fills (used by a few kit rules) */
  --label-primary: #000000; --label-secondary: rgba(60, 60, 67, 0.6); --label-tertiary: rgba(60, 60, 67, 0.3);
  --fill-primary: rgba(120, 120, 120, 0.2); --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(118, 118, 128, 0.12); --fill-quaternary: rgba(116, 116, 128, 0.08);
  /* macOS labels and fills */
  --mac-label-primary: rgba(0, 0, 0, 0.85); --mac-label-secondary: rgba(0, 0, 0, 0.5);
  --mac-label-tertiary: rgba(0, 0, 0, 0.25); --mac-label-quaternary: rgba(0, 0, 0, 0.1); --mac-label-quinary: rgba(0, 0, 0, 0.05);
  --mac-fill-primary: rgba(0, 0, 0, 0.1); --mac-fill-secondary: rgba(0, 0, 0, 0.08);
  --mac-fill-tertiary: rgba(0, 0, 0, 0.05); --mac-fill-quaternary: rgba(0, 0, 0, 0.03); --mac-fill-quinary: rgba(0, 0, 0, 0.02);
  --mac-gray: #8e8e93;
  /* grounds */
  --mac-window-background: #ffffff;
  --mac-material-ultrathick: rgba(236, 236, 236, 0.88); --mac-material-thick: rgba(236, 236, 236, 0.76);
  --mac-material-regular: rgba(236, 236, 236, 0.63); --mac-material-thin: rgba(236, 236, 236, 0.5);
  --mac-material-ultrathin: rgba(236, 236, 236, 0.38);
  --background-primary: #ffffff; --background-secondary: #f2f2f7; --background-tertiary: #ffffff;
  --background-elevated-primary: #ffffff; --background-elevated-secondary: #f2f2f7;
  --grouped-background-primary: #f2f2f7; --grouped-background-secondary: #ffffff;
  /* lines, accent */
  --separator: rgba(0, 0, 0, 0.12); --separator-opaque: #c6c6c8; --mac-separator: rgba(60, 60, 67, 0.29);
  --accent: var(--system-blue); --on-accent: #ffffff; --link: var(--accent); --focus-ring: var(--accent);
  --on-media: #ffffff; --mac-control-knob: #ffffff;
  /* glass and vibrancy */
  --glass-label-primary: #1a1a1a; --glass-label-secondary: #727272; --glass-label-tertiary: #bfbfbf; --glass-label-quaternary: #d9d9d9;
  --glass-regular-tint: rgba(255, 255, 255, 0.7); --glass-regular-shade: rgba(191, 191, 191, 0.1);
  --glass-small-fill: rgba(255, 255, 255, 0.519); --glass-clear-tint: rgba(248, 248, 248, 0.12);
  --glass-dim: rgba(0, 0, 0, 0.35); --glass-inactive: rgba(0, 0, 0, 0.02);
  --vibrant-label-primary: #000000; --vibrant-label-secondary: rgba(0, 0, 0, 0.4); --vibrant-label-tertiary: rgba(0, 0, 0, 0.251);
  --vibrant-fill-secondary: rgba(0, 0, 0, 0.122); --vibrant-fill-tertiary: rgba(0, 0, 0, 0.071); --vibrant-separator: rgba(0, 0, 0, 0.098);
  --pressed-overlay: rgba(0, 0, 0, 0.08); --scrim-alert: rgba(41, 41, 58, 0.23); --scrim-sheet: rgba(0, 0, 0, 0.2);
  /* shadows */
  --shadow-mac-window: 0 36px 100px 0 rgba(0, 0, 0, 0.4), 0 0 1px 0 rgba(0, 0, 0, 0.8);
  --shadow-mac-window-inactive: 0 16px 32px 0 rgba(0, 0, 0, 0.2), 0 0 1px 0 rgba(0, 0, 0, 0.8);
  --shadow-mac-menu: 0 4px 24px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  --shadow-mac-notification: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
  --shadow-glass: 0 18px 46px 0 rgba(0, 0, 0, 0.25);
  --shadow-glass-small: 0 8px 15px 0 rgba(0, 0, 0, 0.02);
  --shadow-glass-highlight: inset 0 2px 0.25px -1.2px rgba(255, 255, 255, 1);
  --shadow-glass-rim: inset 0 -4px 2px -4px #ffffff27, inset 0 4px 8px -4px #ffffff27, inset 0 -1px 1.5px -0.5px #ffffff27, inset 0 1px 1.5px -0.5px #ffffff27;
  --shadow-glass-edge: 0 0 0.3px 0.3px #00000024, -1.25px 0 0 -0.75px #00000040, 1.25px 0 0 -0.75px #00000040;
  --shadow-glass-small-rim: inset -20px 0 20px -30px #00000026, inset 20px 0 20px -30px #00000026, inset 0 -4px 0.5px -4px #ffffff66, inset 0 4px 0.5px -4px #ffffff66, inset 0 -1px 0 0 #ffffff17, inset 0 1px 0 0 #ffffff17, inset 0 40px 30px -40px #00000019, inset 0 -40px 10px -40px #ffffff28, inset 0 40px 10px -40px #ffffff28;
  --shadow-glass-small-edge: 0 0 0 0.5px #00000024, -1.25px 0 0 -0.75px #00000024, 1.25px 0 0 -0.75px #00000024;
  --shadow-glass-tinted-rim: inset 20px 0 20px -30px #00000026, inset -20px 0 20px -30px #00000026, inset 0 -4px 0.5px -4px #ffffff99, inset 0 4px 0.5px -4px #ffffff99, inset 0 -1px 0 0 #ffffff26, inset 0 1px 0 0 #ffffff26, inset 0 -40px 10px -40px #ffffff11, inset 0 40px 10px -40px #ffffff11;
  --shadow-glass-tinted-edge: -1.25px 0 0 -0.75px #00000019, 1.25px 0 0 -0.75px #00000019;
  --shadow-mac-slider-knob: 0 0.5px 6px 0 rgba(0, 0, 0, 0.12);
  --shadow-knob: 0 3px 36px 0 rgba(0, 0, 0, 0.05);
  /* backdrop recipes (_base.css; dark overrides below) */
  --mac-glass-backdrop: blur(var(--blur-glass)) saturate(var(--saturate-glass));
  --mac-glass-small-backdrop: blur(var(--blur-glass-small)) saturate(var(--saturate-glass-small)) brightness(0.936);
  --mac-material-backdrop: blur(var(--blur-mac-material)) saturate(var(--saturate-mac-material));
  --mac-material-thick-backdrop: blur(var(--blur-mac-material)) saturate(2);
  --mac-menu-backdrop: blur(20px) saturate(0.8);
}

/* ---------- Tokens: dark ---------- */
.mac[data-theme="dark"],
.mac [data-theme="dark"] {
  color-scheme: dark;
  --system-red: #ff4245; --system-orange: #ff9230; --system-yellow: #ffd600; --system-green: #30d158;
  --system-mint: #00dac3; --system-teal: #00d2e0; --system-cyan: #3cd3fe; --system-blue: #0091ff;
  --system-indigo: #6d7cff; --system-purple: #db34f2; --system-pink: #ff375f; --system-brown: #b78a66;
  --system-gray: #8e8e93; --system-gray-2: #636366; --system-gray-3: #48484a; --system-gray-4: #3a3a3c;
  --system-gray-5: #2c2c2e; --system-gray-6: #1c1c1e;
  --label-primary: #ffffff; --label-secondary: rgba(235, 235, 245, 0.6); --label-tertiary: rgba(235, 235, 245, 0.3);
  --fill-primary: rgba(120, 120, 128, 0.36); --fill-secondary: rgba(120, 120, 128, 0.32);
  --fill-tertiary: rgba(118, 118, 128, 0.24); --fill-quaternary: rgba(118, 118, 128, 0.18);
  --mac-label-primary: #ffffff; --mac-label-secondary: rgba(255, 255, 255, 0.55);
  --mac-label-tertiary: rgba(255, 255, 255, 0.25); --mac-label-quaternary: rgba(255, 255, 255, 0.1); --mac-label-quinary: rgba(255, 255, 255, 0.05);
  --mac-fill-primary: rgba(255, 255, 255, 0.1); --mac-fill-secondary: rgba(255, 255, 255, 0.08);
  --mac-fill-tertiary: rgba(255, 255, 255, 0.05); --mac-fill-quaternary: rgba(255, 255, 255, 0.03); --mac-fill-quinary: rgba(255, 255, 255, 0.02);
  --mac-gray: #98989d;
  --mac-window-background: #1e1e1e;
  --mac-material-ultrathick: rgba(44, 44, 44, 0.82); --mac-material-thick: rgba(44, 44, 44, 0.71);
  --mac-material-regular: rgba(44, 44, 44, 0.61); --mac-material-thin: rgba(41, 41, 41, 0.49);
  --mac-material-ultrathin: rgba(41, 41, 41, 0.4);
  --background-primary: #000000; --background-secondary: #1c1c1e; --background-tertiary: #2c2c2e;
  --background-elevated-primary: #1c1c1e; --background-elevated-secondary: #2c2c2e;
  --grouped-background-primary: #000000; --grouped-background-secondary: #1c1c1e;
  --separator: rgba(255, 255, 255, 0.12); --separator-opaque: #38383a; --mac-separator: rgba(255, 255, 255, 0.12);
  --accent: var(--system-blue); --on-accent: #ffffff; --link: var(--accent); --focus-ring: var(--accent);
  --white: #ffffff; --black: #000000; --on-media: #ffffff; --mac-control-knob: rgba(255, 255, 255, 0.85);
  --glass-label-primary: #ededed; --glass-label-secondary: #8a8a8a; --glass-label-tertiary: #404040; --glass-label-quaternary: #262626;
  --glass-regular-tint: rgba(26, 26, 26, 0.5); --glass-regular-shade: rgba(26, 26, 26, 0.9);
  --glass-small-fill: rgba(153, 153, 153, 0.17); --glass-inactive: rgba(118, 118, 128, 0.24);
  --vibrant-label-primary: #ffffff; --vibrant-label-secondary: rgba(255, 255, 255, 0.6); --vibrant-label-tertiary: rgba(255, 255, 255, 0.251);
  --vibrant-fill-secondary: rgba(255, 255, 255, 0.122); --vibrant-fill-tertiary: rgba(255, 255, 255, 0.071); --vibrant-separator: rgba(255, 255, 255, 0.102);
  --pressed-overlay: rgba(255, 255, 255, 0.08); --scrim-alert: rgba(18, 18, 18, 0.56); --scrim-sheet: rgba(0, 0, 0, 0.48);
  --shadow-mac-menu: 0 4px 24px 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.8);
  --shadow-glass: 0 18px 48px 0 rgba(0, 0, 0, 0.45);
  --shadow-glass-small: 0 8px 15px 0 rgba(0, 0, 0, 0.04);
  --shadow-glass-highlight: inset 0 2px 0.2px -1.2px rgba(255, 255, 255, 0.2);
  --shadow-glass-rim: inset 0 -4px 8px -4px #ffffff22, inset 0 4px 8px -4px #ffffff22, inset 0 -1px 1.5px -0.5px #ffffff40, inset 0 1px 1.5px -0.5px #ffffff40;
  --shadow-glass-edge: 0 0 0.3px 0.3px #00000080, -1.25px 0 0 -0.75px #00000040, 1.25px 0 0 -0.75px #00000040;
  --shadow-glass-small-rim: inset 20px 0 20px -30px #0000004d, inset -20px 0 20px -30px #0000004d, inset 0 -4px 0.5px -4px #ffffff66, inset 0 4px 0.5px -4px #ffffff66, inset 0 -1px 0 0 #ffffff17, inset 0 1px 0 0 #ffffff17, inset 0 -40px 10px -40px #ffffff1a, inset 0 40px 10px -40px #ffffff1a;
  --shadow-glass-small-edge: 0 0 0 0.5px #00000040, -1.25px 0 0 -0.75px #00000040, 1.25px 0 0 -0.75px #00000040;
  --mac-glass-backdrop: blur(var(--blur-glass)) saturate(1.2);
  --mac-glass-small-backdrop: blur(var(--blur-glass-small)) saturate(1);
  --mac-material-backdrop: blur(var(--blur-mac-material)) saturate(1.9);
  --mac-material-thick-backdrop: blur(var(--blur-mac-material)) saturate(1.9);
  --mac-menu-backdrop: blur(20px) saturate(1.2);
}

/* ---------- Tokens that do not change with appearance ---------- */
.mac {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius-mac-mini: 4px; --radius-mac-small: 5px; --radius-mac-regular: 6px; --radius-mac-large: 7px; --radius-mac-xl: 9px;
  --radius-mac-menu-item: 8px; --radius-mac-menu: 12px; --radius-mac-window: 16px; --radius-mac-popover: 20px; --radius-mac-alert: 26px;
  --radius-capsule: 9999px; --radius-xs: 3px; --radius-sm: 8px; --radius-thumbnail: 10px; --radius-glass: 20px;
  --mac-control-mini: 16px; --mac-control-small: 20px; --mac-control-regular: 24px; --mac-control-large: 28px; --mac-control-xl: 36px;
  --target-mac: 28px; --target-mac-min: 20px;
  --mac-button-padding: 16px; --mac-button-padding-mini: 7px; --button-padding-small: 10px; --button-icon-gap: 4px;
  --blur-mac-material: 60px; --blur-glass: 30px; --blur-glass-small: 6px; --blur-glass-clear: 3px;
  --saturate-glass: 1.4; --saturate-glass-small: 2; --saturate-mac-material: 1.45;

  font-family: var(--font-sans);
  font-size: 13px; line-height: 16px; letter-spacing: -0.08px; /* mac-body */
  color: var(--mac-label-primary);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.mac *, .mac *::before, .mac *::after { box-sizing: border-box; }
.mac :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* kit focus ring */
.mac button { font-family: inherit; }
.mac-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mac .mac-text-secondary { color: var(--mac-label-secondary); }
.mac .mac-text-tertiary { color: var(--mac-label-tertiary); }
/* Overlay-style scrollbars (thin, quiet) */
.mac ::-webkit-scrollbar { width: 11px; height: 11px; }
.mac ::-webkit-scrollbar-track { background: transparent; }
.mac ::-webkit-scrollbar-thumb { background: var(--mac-label-tertiary); border: 3px solid transparent; background-clip: padding-box; border-radius: 9999px; }
.mac ::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Text styles (tokens.json type.groups "macOS" and "macOS emphasized") ---------- */
.mac .mac-large-title { font: 400 26px/32px var(--font-sans); letter-spacing: 0.22px; }
.mac .mac-large-title-emphasized { font: 700 26px/32px var(--font-sans); letter-spacing: 0.22px; }
.mac .mac-title1 { font: 400 22px/26px var(--font-sans); letter-spacing: -0.26px; }
.mac .mac-title1-emphasized { font: 700 22px/26px var(--font-sans); letter-spacing: -0.26px; }
.mac .mac-title2 { font: 400 17px/22px var(--font-sans); letter-spacing: -0.43px; }
.mac .mac-title2-emphasized { font: 700 17px/22px var(--font-sans); letter-spacing: -0.43px; }
.mac .mac-title3 { font: 400 15px/20px var(--font-sans); letter-spacing: -0.23px; }
.mac .mac-title3-emphasized { font: 600 15px/20px var(--font-sans); letter-spacing: -0.23px; }
.mac .mac-headline { font: 700 13px/16px var(--font-sans); letter-spacing: -0.08px; }
.mac .mac-headline-emphasized { font: 800 13px/16px var(--font-sans); letter-spacing: -0.08px; }
.mac .mac-body { font: 400 13px/16px var(--font-sans); letter-spacing: -0.08px; }
.mac .mac-body-emphasized { font: 600 13px/16px var(--font-sans); letter-spacing: -0.08px; }
.mac .mac-callout { font: 400 12px/15px var(--font-sans); letter-spacing: 0; }
.mac .mac-callout-emphasized { font: 600 12px/15px var(--font-sans); letter-spacing: 0; }
.mac .mac-subheadline { font: 400 11px/14px var(--font-sans); letter-spacing: 0.06px; }
.mac .mac-subheadline-emphasized { font: 600 11px/14px var(--font-sans); letter-spacing: 0.06px; }
.mac .mac-footnote { font: 400 10px/13px var(--font-sans); letter-spacing: 0.12px; }
.mac .mac-footnote-emphasized { font: 600 10px/13px var(--font-sans); letter-spacing: 0.12px; }
.mac .mac-caption1 { font: 400 10px/13px var(--font-sans); letter-spacing: 0.12px; }
.mac .mac-caption1-emphasized { font: 500 10px/13px var(--font-sans); letter-spacing: 0.12px; }
.mac .mac-caption2 { font: 500 10px/13px var(--font-sans); letter-spacing: 0.12px; }
.mac .mac-caption2-emphasized { font: 600 10px/13px var(--font-sans); letter-spacing: 0.12px; }

/* ---------- Liquid Glass (functional layer only: bars, sidebars, menus, popovers, floating buttons) ----------
   Kit _base.css draws the fills on ::before and the rim lights on ::after. Here the fills are the element's own
   background and the rims inset box-shadows, which paint in the same order (above the fill, below the content),
   so ::before/::after stay free for the shell and the apps. */
.mac .mac-glass {
  position: relative;
  color: var(--glass-label-primary);
  border-radius: var(--radius-glass);
  background: linear-gradient(var(--glass-regular-shade), var(--glass-regular-shade)), var(--glass-regular-tint);
  -webkit-backdrop-filter: var(--mac-glass-backdrop); backdrop-filter: var(--mac-glass-backdrop);
  box-shadow: var(--shadow-glass), var(--shadow-glass-edge), var(--shadow-glass-rim), var(--shadow-glass-highlight);
}
.mac .mac-glass--small {
  border-radius: var(--radius-capsule);
  background: var(--glass-small-fill);
  -webkit-backdrop-filter: var(--mac-glass-small-backdrop); backdrop-filter: var(--mac-glass-small-backdrop);
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-small-edge), var(--shadow-glass-small-rim);
}
/* Prominent (tinted) glass: the one primary action of a view. */
.mac .mac-glass--tinted {
  color: var(--on-accent);
  background: var(--accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-tinted-edge), var(--shadow-glass-tinted-rim);
}

/* ---------- macOS materials (content layer) ---------- */
.mac .mac-material--ultrathin, .mac .mac-material--thin, .mac .mac-material--regular,
.mac .mac-material--thick, .mac .mac-material--ultrathick {
  -webkit-backdrop-filter: var(--mac-material-backdrop); backdrop-filter: var(--mac-material-backdrop);
}
.mac .mac-material--ultrathin { background: var(--mac-material-ultrathin); }
.mac .mac-material--thin { background: var(--mac-material-thin); }
.mac .mac-material--regular { background: var(--mac-material-regular); }
.mac .mac-material--thick { background: var(--mac-material-thick); -webkit-backdrop-filter: var(--mac-material-thick-backdrop); backdrop-filter: var(--mac-material-thick-backdrop); }
.mac .mac-material--ultrathick { background: var(--mac-material-ultrathick); }

/* ---------- Buttons (kit Button.css, macOS push buttons) ---------- */
.mac .mac-btn {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-icon-gap);
  height: var(--mac-control-regular); padding: 0 var(--mac-button-padding); border-radius: var(--radius-mac-regular);
  font: 500 13px/16px var(--font-sans); letter-spacing: -0.08px; white-space: nowrap; text-decoration: none;
  color: var(--mac-label-primary); background-color: var(--mac-fill-secondary);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.mac .mac-btn:active:not(:disabled):not([aria-disabled="true"]) { background-image: linear-gradient(var(--pressed-overlay), var(--pressed-overlay)); }
.mac .mac-btn svg { flex: none; width: 16px; height: 16px; }
.mac .mac-btn--large { height: var(--mac-control-large); border-radius: var(--radius-capsule); }
.mac .mac-btn--small { height: var(--mac-control-small); padding: 0 var(--button-padding-small); border-radius: var(--radius-mac-small); font-size: 11px; line-height: 13px; letter-spacing: 0.06px; }
/* default (primary) button: accent fill */
.mac .mac-btn--primary { background-color: var(--accent); color: var(--on-accent); }
/* toolbar glass capsule: kit macOS toolbar, 36pt platter with the label 12pt from the edge, small Liquid Glass */
.mac .mac-btn--glass {
  height: var(--mac-control-xl); padding: 0 12px; border-radius: var(--radius-capsule);
  color: var(--glass-label-primary); background-color: var(--glass-small-fill);
  -webkit-backdrop-filter: var(--mac-glass-small-backdrop); backdrop-filter: var(--mac-glass-small-backdrop);
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-small-edge), var(--shadow-glass-small-rim);
}
.mac .mac-btn--glass.mac-btn--primary { background-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-glass-small), var(--shadow-glass-tinted-edge), var(--shadow-glass-tinted-rim); }
/* icon-only (needs an aria-label) */
.mac .mac-btn--icon { padding: 0; width: var(--mac-control-regular); }
.mac .mac-btn--icon.mac-btn--large { width: var(--mac-control-large); }
.mac .mac-btn--icon.mac-btn--glass { width: var(--mac-control-xl); border-radius: 50%; }
.mac .mac-btn:disabled, .mac .mac-btn[aria-disabled="true"] { cursor: default; background-color: var(--mac-fill-quaternary); color: var(--mac-label-tertiary); box-shadow: none; }
.mac .mac-window--inactive .mac-btn--glass { background-color: var(--glass-inactive); box-shadow: 0 0 0 0.5px var(--separator); }

/* ---------- Links and tags ---------- */
.mac .mac-link { color: var(--link); text-decoration: none; border-radius: 3px; cursor: pointer; }
.mac .mac-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.mac .mac-tag {
  display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; vertical-align: middle;
  border-radius: var(--radius-capsule); white-space: nowrap;
  font: 600 11px/14px var(--font-sans); letter-spacing: 0.06px; /* mac-subheadline-emphasized */
  background: var(--mac-fill-secondary); color: var(--mac-label-primary);
}
.mac .mac-tag--accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.mac .mac-tag--muted { background: var(--mac-fill-tertiary); color: var(--mac-label-secondary); font-weight: 500; }

/* ---------- Sidebar (kit Sidebar.css macOS Medium, floating on glass) ---------- */
.mac .mac-sidebar-list { list-style: none; margin: 0; padding: 0 10px 10px; }
.mac .mac-sidebar-list > li { margin: 0; padding: 0; }
.mac .mac-sidebar-heading {
  display: flex; align-items: center; height: 24px; margin: 0; padding: 8px 10px 2px;
  font: 700 11px/14px var(--font-sans); letter-spacing: 0.06px; color: var(--glass-label-secondary);
}
.mac .mac-sidebar-item {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: transparent; cursor: pointer;
  position: relative; display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; height: 32px;
  padding: 0 6px 0 8px; border-radius: var(--radius-mac-menu-item); text-align: start; text-decoration: none;
  font: 400 13px/16px var(--font-sans); letter-spacing: -0.08px; color: var(--mac-label-primary);
  -webkit-tap-highlight-color: transparent;
}
.mac .mac-sidebar-item > :not(.mac-sidebar-item__icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mac .mac-sidebar-item__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--accent); }
.mac .mac-sidebar-item__icon svg { width: 16px; height: 16px; }
.mac .mac-sidebar-item:hover { background: var(--mac-fill-quaternary); }
.mac .mac-sidebar-item[aria-current="page"], .mac .mac-sidebar-item[aria-current="true"] { background: var(--mac-fill-tertiary); } /* kit Items/Level 0 - Selected */
.mac .mac-sidebar-item:active { background: var(--mac-fill-secondary); }
.mac .mac-sidebar-item:focus-visible { outline-offset: -3px; }
.mac .mac-sidebar-item:disabled { opacity: 0.5; cursor: default; }

/* ---------- Grouped content (kit List.css macOS Forms sections) ---------- */
.mac .mac-group__header {
  margin: 0; padding: 0 10px 8px;
  font: 700 13px/16px var(--font-sans); letter-spacing: -0.08px; color: var(--mac-label-primary); /* mac-headline */
}
.mac .mac-group { margin: 0; padding: 0 10px; border-radius: var(--radius-mac-menu); background: var(--mac-fill-quaternary); list-style: none; }
.mac .mac-group + .mac-group__header, .mac .mac-group + .mac-group { margin-top: 20px; }
.mac .mac-row {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 12px 0; margin: 0;
  box-shadow: inset 0 -1px var(--mac-fill-tertiary);
  font: 500 13px/16px var(--font-sans); letter-spacing: -0.08px; color: var(--mac-label-primary);
}
.mac .mac-row:last-child { box-shadow: none; }
.mac .mac-row__value { margin-left: auto; flex: none; max-width: 62%; text-align: end; font-weight: 500; color: var(--mac-label-secondary); }
.mac .mac-row > .mac-btn:last-child, .mac .mac-row > .mac-segmented:last-child, .mac .mac-row__trailing { margin-left: auto; flex: none; }
.mac a.mac-row, .mac button.mac-row { width: 100%; border: 0; background: transparent; text-align: start; text-decoration: none; cursor: pointer; }

/* ---------- Segmented control (kit SegmentedControl.css macOS regular) ---------- */
.mac .mac-segmented {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; vertical-align: middle;
  height: var(--mac-control-regular); border-radius: var(--radius-mac-regular); background: var(--mac-fill-secondary);
  font: 500 13px/16px var(--font-sans); letter-spacing: -0.08px; user-select: none; -webkit-user-select: none;
}
.mac .mac-segmented > button {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 30px; padding: 0 10px;
  border-radius: var(--radius-mac-regular); font: inherit; letter-spacing: inherit; color: var(--mac-label-primary); white-space: nowrap;
}
.mac .mac-segmented > button + button::before {
  content: ""; position: absolute; left: -0.5px; top: 50%; width: 1px; height: 14px; transform: translateY(-50%);
  border-radius: 1px; background: var(--vibrant-separator); pointer-events: none;
}
.mac .mac-segmented > button[aria-pressed="true"]::before,
.mac .mac-segmented > button[aria-pressed="true"] + button::before { opacity: 0; }
.mac .mac-segmented > button[aria-pressed="true"] { background: linear-gradient(var(--mac-fill-quaternary), var(--mac-fill-quaternary)), var(--accent); color: var(--on-accent); }
.mac .mac-segmented > button:active:not(:disabled) { background: var(--mac-fill-secondary); }
.mac .mac-segmented > button[aria-pressed="true"]:active:not(:disabled) { background: linear-gradient(var(--mac-fill-primary), var(--mac-fill-primary)), linear-gradient(var(--mac-fill-tertiary), var(--mac-fill-tertiary)), var(--accent); }
.mac .mac-segmented > button:disabled { color: var(--mac-label-tertiary); cursor: default; }
.mac .mac-segmented > button svg { width: 14px; height: 14px; }

/* ---------- Text field (kit TextField.css macOS regular; .mac-field--large = 28pt) ---------- */
.mac .mac-field {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; outline: none;
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: var(--mac-control-regular); padding: 0 6px;
  border-radius: var(--radius-mac-regular); background: var(--mac-window-background); box-shadow: 0 0 0 1px var(--mac-fill-tertiary);
  font: 500 13px/16px var(--font-sans); letter-spacing: -0.08px; color: var(--mac-label-primary); caret-color: var(--accent);
}
.mac textarea.mac-field { display: block; height: auto; min-height: 64px; padding: 4px 6px; resize: vertical; }
.mac .mac-field--large { height: var(--mac-control-large); padding: 0 8px; border-radius: var(--radius-mac-large); }
.mac .mac-field::placeholder, .mac .mac-field input::placeholder { color: var(--mac-label-tertiary); opacity: 1; }
.mac .mac-field svg { flex: none; width: 14px; height: 14px; color: var(--mac-label-secondary); }
.mac .mac-field input {
  flex: 1 1 auto; min-width: 0; align-self: stretch; margin: 0; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; letter-spacing: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
.mac .mac-field:focus-visible, .mac .mac-field:focus, .mac .mac-field:focus-within {
  outline: none;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--focus-ring) 50%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
}
.mac .mac-field:disabled { background: color-mix(in srgb, var(--mac-window-background) 50%, transparent); box-shadow: 0 0 0 1px var(--mac-fill-quaternary); color: var(--mac-label-tertiary); }

/* ---------- Separator ---------- */
.mac .mac-separator { display: block; height: 1px; margin: 0; border: 0; background: var(--separator); flex: none; }

/* ---------- Menus (kit Menu.css macOS regular). Used by the menu bar; apps may use them for pop-up menus. ---------- */
.mac .mac-menu {
  position: absolute; z-index: 1000; min-width: 180px; width: max-content; margin: 0; padding: 5px 0; list-style: none;
  border-radius: var(--radius-mac-menu); background: var(--mac-material-thick); box-shadow: var(--shadow-mac-menu);
  color: var(--mac-label-primary); outline: none; text-align: left; cursor: default;
  -webkit-backdrop-filter: var(--mac-menu-backdrop); backdrop-filter: var(--mac-menu-backdrop);
  user-select: none; -webkit-user-select: none;
}
.mac .mac-menu[hidden] { display: none; }
.mac .mac-menu__item {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: transparent; cursor: default;
  position: relative; display: flex; align-items: center; width: 100%; height: 24px; padding: 0 16px; outline: none;
  font: 500 13px/16px var(--font-sans); letter-spacing: -0.2px; color: var(--mac-label-primary); text-align: start; white-space: nowrap; text-decoration: none;
}
.mac .mac-menu__item::before { content: ""; position: absolute; inset: 0 5px; border-radius: var(--radius-mac-menu-item); pointer-events: none; }
.mac .mac-menu__item > * { position: relative; }
.mac .mac-menu__label { flex: 1 1 auto; }
.mac .mac-menu__shortcut { flex: none; min-width: 66px; margin-left: 8px; text-align: end; font-weight: 500; letter-spacing: -0.2px; color: var(--mac-label-tertiary); }
.mac .mac-menu__item:focus-visible { outline: none; }
/* one highlighted item at a time: the focused one; hover only while no item has the focus */
.mac .mac-menu:not(:has(.mac-menu__item:focus)) .mac-menu__item:hover::before, .mac .mac-menu__item:focus::before, .mac .mac-menu__item.is-active::before { background: var(--accent); }
.mac .mac-menu:not(:has(.mac-menu__item:focus)) .mac-menu__item:hover, .mac .mac-menu__item:focus, .mac .mac-menu__item.is-active,
.mac .mac-menu:not(:has(.mac-menu__item:focus)) .mac-menu__item:hover .mac-menu__shortcut, .mac .mac-menu__item:focus .mac-menu__shortcut, .mac .mac-menu__item.is-active .mac-menu__shortcut { color: var(--on-accent); }
.mac .mac-menu__item[aria-disabled="true"], .mac .mac-menu__item:disabled { color: var(--mac-label-tertiary); }
.mac .mac-menu__item[aria-disabled="true"]::before, .mac .mac-menu__item:disabled::before { background: transparent !important; }
.mac .mac-menu__item[aria-checked="true"]::after { content: "✓"; position: absolute; left: 4px; font-size: 11px; }
.mac .mac-menu__header { display: flex; align-items: center; height: 24px; padding: 0 16px; font: 700 13px/16px var(--font-sans); letter-spacing: -0.2px; color: var(--mac-label-secondary); white-space: nowrap; }
.mac .mac-menu__separator { display: block; padding: 5px 16px; }
.mac .mac-menu__separator::before { content: ""; display: block; height: 1px; border-radius: 1px; background: var(--mac-fill-secondary); }

/* ---------- Menu bar (kit MenuBar.css macOS) ---------- */
.mac .mac-menubar {
  display: flex; align-items: stretch; height: 24px; padding: 0 10px; color: var(--mac-label-primary);
  font-family: var(--font-sans); user-select: none; -webkit-user-select: none;
}
.mac .mac-menubar__group { display: flex; align-items: stretch; }
.mac .mac-menubar__group--trailing { margin-left: auto; }
.mac .mac-menubar__entry { position: relative; display: flex; }
.mac .mac-menubar__title {
  appearance: none; -webkit-appearance: none; position: relative; isolation: isolate; margin: 0; border: 0; background: transparent;
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  font: 600 13px/16px var(--font-sans); letter-spacing: -0.08px; color: inherit; white-space: nowrap; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.mac .mac-menubar__title--app { padding: 0 9px 0 11px; font-weight: 800; letter-spacing: -0.2px; }
.mac .mac-menubar__title--status { font-weight: 500; }
.mac .mac-menubar__title::before { content: ""; position: absolute; z-index: -1; inset: -1px -4px 0; border-radius: 13px; pointer-events: none; }
.mac .mac-menubar__title[aria-expanded="true"]::before, .mac .mac-menubar__title.is-open::before { background: var(--mac-fill-secondary); }
.mac[data-theme="dark"] .mac-menubar__title[aria-expanded="true"]::before,
.mac[data-theme="dark"] .mac-menubar__title.is-open::before { background: linear-gradient(var(--mac-fill-primary), var(--mac-fill-primary)), var(--mac-fill-primary); }
.mac .mac-menubar__title:focus-visible { outline-offset: -2px; }
.mac .mac-menubar__title svg { flex: none; width: 16px; height: 16px; }
.mac .mac-menubar .mac-menu { top: calc(100% + 3px); left: -5px; }
.mac .mac-menubar__group--trailing .mac-menu { left: auto; right: -5px; }

/* ---------- Window chrome (kit Window.css macOS document window) ---------- */
.mac .mac-window {
  position: absolute; display: flex; overflow: hidden;
  border-radius: var(--radius-mac-window);
  background: var(--mac-window-background); color: var(--mac-label-primary); box-shadow: var(--shadow-mac-window);
  font: 400 13px/16px var(--font-sans); letter-spacing: -0.08px;
}
.mac .mac-window--inactive { box-shadow: var(--shadow-mac-window-inactive); }
/* Dark key windows: a 1pt inside rim of label-primary at 20% */
.mac .mac-window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; }
.mac[data-theme="dark"] .mac-window:not(.mac-window--inactive)::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mac-label-primary) 20%, transparent); }
.mac .mac-window__main { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Unified title bar + toolbar: 52pt, controls at x=18, items 8pt apart and 8pt from the trailing edge. */
.mac .mac-window__titlebar {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 8px 0 18px; user-select: none; -webkit-user-select: none;
}
.mac .mac-window--with-sidebar .mac-window__titlebar { padding-left: 8px; }
.mac .mac-window--titlebar-only .mac-window__titlebar { height: 33px; padding: 0 9px; gap: 16px; }
.mac .mac-window__titlebar > .mac-window__controls { margin-right: 12px; }
.mac .mac-window__heading { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; }
.mac .mac-window__title {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 13px/15px var(--font-sans); letter-spacing: 0; color: var(--mac-label-primary);
}
.mac .mac-window--with-sidebar .mac-window__title { font-size: 15px; letter-spacing: -0.2px; }
.mac .mac-window__subtitle {
  margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 11px/13px var(--font-sans); letter-spacing: 0; color: var(--mac-label-tertiary);
}
.mac .mac-window__subtitle:empty { display: none; }
.mac .mac-window--inactive .mac-window__title { color: var(--mac-label-tertiary); }
.mac .mac-window__toolbar { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mac .mac-window__body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* Window controls: 14pt circles 9pt apart; inactive or unavailable = mac-fill-primary */
.mac .mac-window__controls { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.mac .mac-window__control {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0; padding: 0; border: 0; cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: var(--mac-fill-primary); color: transparent;
}
.mac .mac-window__control::before { content: ""; position: absolute; inset: -4px -4.5px; border-radius: 50%; } /* a 23pt-wide hit area, the controls' pitch */
.mac .mac-window__control svg { width: 8px; height: 8px; opacity: 0; }
.mac .mac-window:not(.mac-window--inactive) .mac-window__control--close { background: var(--system-red); }
.mac .mac-window:not(.mac-window--inactive) .mac-window__control--minimize { background: var(--system-yellow); }
.mac .mac-window:not(.mac-window--inactive) .mac-window__control--zoom { background: var(--system-green); }
.mac .mac-window__control:disabled { background: var(--mac-fill-primary) !important; }
.mac .mac-window__controls:hover .mac-window__control:not(:disabled),
.mac .mac-window__controls:focus-within .mac-window__control:not(:disabled) { color: color-mix(in srgb, var(--black) 55%, transparent); }
.mac .mac-window__controls:hover .mac-window__control:not(:disabled) svg,
.mac .mac-window__controls:focus-within .mac-window__control:not(:disabled) svg { opacity: 1; }
.mac .mac-window__control:active:not(:disabled) { filter: brightness(0.85); }
.mac .mac-window__control:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Sidebar pane: Liquid Glass floating in the leading pane, 240pt wide, inset 8pt, concentric radius */
.mac .mac-window__sidebar {
  flex: none; display: flex; flex-direction: column; min-height: 0;
  width: 240px; margin: 8px; border-radius: calc(var(--radius-mac-window) - 8px);
  color: var(--mac-label-primary);
  /* glass inside a window: the kit's regular glass without the floating drop shadow */
  box-shadow: var(--shadow-glass-small), var(--shadow-glass-edge), var(--shadow-glass-rim), var(--shadow-glass-highlight);
}
.mac .mac-window--inactive .mac-window__sidebar { background: var(--mac-material-ultrathick); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mac .mac-window__sidebar-bar { flex: none; height: 44px; padding: 11px 10px 0; }
.mac .mac-window__sidebar-content { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---------- Reduce Transparency: glass becomes opaque; materials become the window background ---------- */
@media (prefers-reduced-transparency: reduce) {
  .mac .mac-glass, .mac .mac-glass--small, .mac .mac-btn--glass, .mac .mac-window__sidebar {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--background-elevated-secondary);
  }
  .mac .mac-glass--tinted { background: var(--accent); }
  .mac .mac-material--ultrathin, .mac .mac-material--thin, .mac .mac-material--regular,
  .mac .mac-material--thick, .mac .mac-material--ultrathick, .mac .mac-menu {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mac-window-background);
  }
}
.mac[data-transparency="reduced"] :is(.mac-glass, .mac-glass--small, .mac-btn--glass, .mac-window__sidebar) {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--background-elevated-secondary);
}
.mac[data-transparency="reduced"] :is(.mac-material--thin, .mac-material--regular, .mac-material--thick, .mac-menu) {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mac-window-background);
}