/* ================================================================
   tiger.css — Starbee Labs Shared Tiger Aqua Stylesheet

   Colors and dimensions derived from Apple Tiger (10.4) resources:
   - clut 2000: Aqua blue gradient ramp #4d83d2 - #aef5ff
   - pxm# pixel sampling: traffic lights, buttons, titlebars
   - tmet: Theme metrics (scrollbar 15px, titlebar 22px, controls 13px)
   - layo 128: Window layout coordinates
   - frme 560: Focus ring outset = 3px

   All values traced to source. No Apple bitmaps used.
   ================================================================ */

/* ── Color Tokens ── */
:root {
    /* Window / content backgrounds */
    --window-bg: #ededed;
    --tab-pane-bg: #f0f0f0;
    --surface-bg: #adadad;

    /* Focus ring (frme 560, FocusRectOutset=3) */
    --focus-ring: rgba(68, 140, 220, 0.5);

    /* Text (sampled from pxm# titlebar, button labels) */
    --text-primary: #333;
    --text-title: #2a2a2a;
    --text-secondary: #666;
    --text-label: #444;
    --text-faint: #6a6a6a;

    /* Sidebar (iTunes source list gradient sampled from Tiger Finder) */
    --sidebar-start: #dce2ea;
    --sidebar-mid: #d2d8e2;
    --sidebar-end: #cdd4de;

    /* Links */
    --link: #06c;

    /* Brushed metal (pxm# 4461: 512×1 horizontal gradient, #adadad edges → #dddddd center) */
    --metal-edge: #adadad;
    --metal-center: #dddddd;
}


/* ── Base Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--surface-bg);
}

body {
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ── Aqua Scrollbar ──
   Thumb gradient mapped from clut 2000 blue range.
   Track from pxm# scrollbar background (neutral gray). */
/* Scrollbar — exact pxm# 2032 track + pxm# 2036 thumb (all 15 rows each) */
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track {
    background: linear-gradient(90deg,
        rgb(184,184,184) 0%, rgb(192,192,192) 7%, rgb(200,200,200) 14%,
        rgb(211,211,211) 21%, rgb(219,219,219) 29%, rgb(228,228,228) 36%,
        rgb(235,235,235) 43%, rgb(241,241,241) 50%, rgb(246,246,246) 57%,
        rgb(250,250,250) 64%, rgb(251,251,251) 71%, rgb(252,252,252) 79%,
        rgb(249,249,249) 86%, rgb(244,244,244) 93%, rgb(239,239,239) 100%);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.07) 0%, rgb(0,57,179) 7%, rgb(118,165,222) 14%,
        rgb(151,191,233) 21%, rgb(147,188,234) 29%, rgb(139,184,234) 36%,
        rgb(80,147,227) 43%, rgb(99,165,239) 50%, rgb(117,181,254) 57%,
        rgb(136,200,255) 64%, rgb(150,217,255) 71%, rgb(162,228,255) 79%,
        rgb(154,218,255) 86%, rgba(0,0,0,0.62) 93%, rgba(0,0,0,0.28) 100%);
    border-radius: 7.5px;
    min-height: 26px;
}
::-webkit-scrollbar-button { display: none; height: 0; }


/* ── Brushed Metal Texture ──
   Two-layer per RULE 20: noise overlay (pxm# 4460, 128×128, α=23 ~9% opacity,
   dark noise RGB 6-19) over horizontal gradient base (pxm# 4461, 512×1,
   #adadad at edges → #dddddd at center).
   Noise approximated with SVG feTurbulence (no Apple bitmaps in production). */
.metal {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E") repeat,
        linear-gradient(to right, var(--metal-edge) 0%, #c0c0c0 15%, #d4d4d4 35%, var(--metal-center) 50%, #d4d4d4 65%, #c0c0c0 85%, var(--metal-edge) 100%);
    background-size: 128px 128px, 100% 1px;
}

/* Lighter metal variant (content surfaces) */
.metal-light {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") repeat,
        linear-gradient(to right, #b8b8b8 0%, #c8c8c8 15%, #d8d8d8 35%, #e0e0e0 50%, #d8d8d8 65%, #c8c8c8 85%, #b8b8b8 100%);
    background-size: 128px 128px, 100% 1px;
}


/* ── Window Chrome ──
   Title bar: 22px (pxm# 2004 bitmap height).
   Gradient sampled from pxm# 2005 active stretch. */
.window-chrome {
    margin: 0;
    overflow: hidden;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Titlebar — exact pxm# 2005 stretch f0 (all 22 rows) + noise overlay */
.title-bar {
    height: 22px;
    background:
        linear-gradient(180deg,
            rgb(249,249,249) 0%, rgb(239,239,239) 5%, rgb(232,232,232) 10%,
            rgb(230,230,230) 14%, rgb(230,230,230) 24%, rgb(227,227,227) 33%,
            rgb(224,224,224) 43%, rgb(221,221,221) 52%, rgb(217,217,217) 62%,
            rgb(214,214,214) 71%, rgb(209,209,209) 81%, rgb(204,204,204) 90%,
            rgb(202,202,202) 95%, rgb(140,140,140) 100%);
    display: flex;
    align-items: center;
    padding: 0 8px;
    position: relative;
    flex-shrink: 0;
    -webkit-app-region: drag;
}

.title-text {
    position: absolute; left: 0; right: 0; text-align: center;
    font-size: 11px; font-weight: 700;
    color: #2a2a2a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    pointer-events: none;
}


/* ── Traffic Lights ──
   Positions from layo 128: close x=6, min x=28, zoom x=50 (gap=3px).
   Orb body 13px (tmet TitleBarControlsHeight=13).
   Colors sampled from pxm# 200/210/220 center pixels. */
/* Traffic lights — pxm# 200/210/220: 19×19 bitmap, 13px visible orb body (tmet=13)
   layo 128 gap derivation: close→min→zoom at x=6,28,50, bitmap width=19, gap=3px
   CSS: 13px orbs with 9px gap matches the 3px bitmap gap + 6px combined transparent overshoot */
.traffic-lights {
    display: flex;
    gap: 9px;
    align-items: center;
    z-index: 1;
}
/* Two-layer pixel-sampled from pxm# 200/210/220 f0: specular at top, bottom-heavy body */
.tl-dot {
    width: 13px; height: 13px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.tl-close { background:
    radial-gradient(circle at 45% 22%, rgb(243,230,230) 0%, rgba(243,230,230,0) 18%),
    radial-gradient(ellipse at 50% 58%, rgb(255,184,171) 0%, rgb(254,155,142) 22%, rgb(228,114,100) 38%, rgb(208,87,75) 48%, rgb(196,85,74) 55%, rgb(200,66,52) 70%, rgb(77,2,2) 100%);
    border: 0.5px solid rgba(77,2,2,0.85); }
.tl-min { background:
    radial-gradient(circle at 45% 22%, rgb(246,235,230) 0%, rgba(246,235,230,0) 18%),
    radial-gradient(ellipse at 50% 58%, rgb(255,255,146) 0%, rgb(254,233,117) 22%, rgb(248,191,77) 38%, rgb(240,170,52) 48%, rgb(225,160,52) 55%, rgb(234,156,43) 70%, rgb(106,41,2) 100%);
    border: 0.5px solid rgba(106,41,2,0.85); }
.tl-zoom { background:
    radial-gradient(circle at 45% 22%, rgb(230,238,230) 0%, rgba(230,238,230,0) 18%),
    radial-gradient(ellipse at 50% 58%, rgb(214,255,151) 0%, rgb(184,246,123) 22%, rgb(141,205,82) 38%, rgb(116,184,56) 48%, rgb(111,174,58) 55%, rgb(99,173,43) 70%, rgb(2,54,2) 100%);
    border: 0.5px solid rgba(2,54,2,0.85); }


/* ── Toolbar — pxm# 2203 Window Header Fill: 2px rgb(240)/rgb(236) stripe ── */
.toolbar {
    background: repeating-linear-gradient(180deg,
        rgb(240,240,240) 0px, rgb(240,240,240) 2px,
        rgb(236,236,236) 2px, rgb(236,236,236) 4px);
    border-top: 1px solid rgb(140,140,140);
    border-bottom: 1px solid rgb(140,140,140);
    display: flex;
    align-items: center;
    padding: 4px 14px;
    gap: 6px;
    user-select: none; -webkit-user-select: none;
    cursor: default;
}

/* Toolbar button group — pxm# 13242 SegmentFill f0 gradient */
.tb-group {
    display: inline-flex;
    border: 1px solid rgb(119,119,119);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    background: linear-gradient(180deg,
        rgb(253,253,253) 0%, rgb(248,248,248) 5%, rgb(243,243,243) 11%,
        rgb(241,241,241) 16%, rgb(239,239,239) 21%, rgb(238,238,238) 26%,
        rgb(237,237,237) 32%, rgb(238,238,238) 37%, rgb(222,222,222) 42%,
        rgb(229,229,229) 47%, rgb(232,232,232) 53%, rgb(238,238,238) 58%,
        rgb(241,241,241) 63%, rgb(246,246,246) 68%, rgb(249,249,249) 74%,
        rgb(254,254,254) 79%, rgb(255,255,255) 84%, rgb(255,255,255) 100%);
    height: 19px;
}
.tb-group .tb-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 100%; cursor: default;
    border: none; background: none; padding: 0;
    border-right: 1px solid rgb(119,119,119);
    position: relative; text-decoration: none;
}
.tb-group .tb-icon:last-child { border-right: none; }
.tb-group .tb-icon::after {
    content: '';
    position: absolute; right: 0; top: 2px; bottom: 2px;
    width: 1px; background: rgba(255,255,255,0.3);
}
.tb-group .tb-icon:last-child::after { display: none; }
.tb-group .tb-icon svg { width: 12px; height: 12px; fill: var(--text-label); margin-top: -1px; }
.tb-group .tb-icon:hover { background: rgba(255,255,255,0.2); text-decoration: none; }
.tb-group .tb-icon:active {
    background: rgba(0,0,0,0.08);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
.tb-group .tb-icon.active {
    background: linear-gradient(180deg,
        rgb(228,228,228) 0%, rgb(219,219,219) 11%, rgb(216,216,216) 22%,
        rgb(214,214,214) 33%, rgb(200,200,200) 44%, rgb(206,206,206) 50%,
        rgb(209,209,209) 56%, rgb(215,215,215) 68%, rgb(222,222,222) 84%,
        rgb(222,222,222) 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.tb-group .tb-icon.active svg { fill: #222; }
.tb-group .tb-icon:disabled,
.tb-group .tb-icon.disabled { opacity: 0.35; pointer-events: none; }
.tb-group .tb-icon.wide { width: auto; padding: 0 8px; gap: 3px; }
.tb-group .tb-icon .tb-label {
    font-family: 'Lucida Grande', sans-serif;
    font-size: 9px; font-weight: 600;
    color: var(--text-label);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.tb-group .tb-icon.active .tb-label { color: #222; }

.tb-sep {
    width: 1px; height: 15px;
    background: rgb(140,140,140);
    box-shadow: 1px 0 0 rgba(255,255,255,0.5);
}
.tb-spacer { flex: 1; }
.toolbar-user {
    font-size: 10px; color: var(--text-secondary);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Divider between toolbar rows: etched line (1px dark + 1px light highlight) */
.header-divider {
    height: 0; margin: 0;
    border-top: 1px solid rgb(140,140,140);
    border-bottom: 1px solid rgb(255,255,255);
}


/* ── Header Band (continuous brushed-metal toolbar container) ── */
.header-band {
    flex-shrink: 0;
    position: relative; z-index: 10;
    border-bottom: 1px solid rgb(140,140,140);
}


/* ── Push Buttons ──
   Normal: gray gradient (pxm# 2448 f0 center pixel 216,216,216).
   Text: #222 in all states (RULE 3).
   Border: pxm# caps x=6 rgba(4,4,4,0.565), fill y=4 rgba(56,56,56,0.835).
   Shadow: fill y=24-26 α=0.247→0.063→0.008 (3px soft fade). */

/* Standard Tiger gray button — exact pxm# 2452 f0 (body rows y5-y22) */
.tiger-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px 2px;
    height: 17px;
    background: linear-gradient(180deg,
        rgb(249,249,249) 0%, rgb(244,244,244) 6%, rgb(241,241,241) 12%,
        rgb(238,238,238) 18%, rgb(236,236,236) 24%, rgb(236,236,236) 35%,
        rgb(237,237,237) 41%, rgb(218,218,218) 47%, rgb(227,227,227) 53%,
        rgb(231,231,231) 59%, rgb(235,235,235) 65%, rgb(240,240,240) 71%,
        rgb(243,243,243) 76%, rgb(249,249,249) 82%, rgb(255,255,255) 100%);
    color: #222;
    border: 1px solid rgba(0,0,0,0.45);
    border-radius: 4px;
    font-size: 10px; font-weight: 700;
    cursor: default;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
    font-family: inherit;
}
.tiger-btn:hover {
    background: linear-gradient(180deg,
        rgb(255,255,255) 0%, rgb(250,250,250) 12%, rgb(246,246,246) 24%,
        rgb(244,244,244) 35%, rgb(245,245,245) 41%, rgb(228,228,228) 47%,
        rgb(237,237,237) 53%, rgb(241,241,241) 65%, rgb(249,249,249) 82%,
        rgb(255,255,255) 100%);
}
.tiger-btn:active {
    background: linear-gradient(180deg,
        rgb(187,187,187) 0%, rgb(183,183,183) 16%, rgb(179,179,179) 32%,
        rgb(178,178,178) 42%, rgb(164,164,164) 47%, rgb(170,170,170) 58%,
        rgb(177,177,177) 68%, rgb(184,184,184) 79%, rgb(192,192,192) 95%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

/* ── Lucida Grande optical centering ──
   Lucida Grande's ascender-to-descender ratio places the cap-height visual
   center ABOVE the mathematical center of the em square. Flexbox
   align-items:center centers the em square, so text appears ~1.5px low.
   Fix: asymmetric padding (padding-bottom > padding-top) shifts the flex
   content area upward. With border-box, the available content area shrinks
   by the padding, and the text is flex-centered within the smaller, higher
   area. Every interactive text control must use this same technique:
     display: inline-flex; align-items: center; justify-content: center;
     padding-top: 0; padding-bottom: <calculated>;
   Confirmed values:
     21px box / 13px font → padding-bottom: 4px
     17-19px box / 9-11px font → padding-bottom: 2px
*/

/* Compact push button (.btn) — exact pxm# 2452 f0 (body rows y5-y22) */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 14px 4px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 13px; font-weight: normal;
    cursor: default;
    white-space: nowrap;
    height: 21px;
    border: 1px solid rgba(0,0,0,0.45);
    background: linear-gradient(180deg,
        rgb(249,249,249) 0%, rgb(244,244,244) 6%, rgb(241,241,241) 12%,
        rgb(238,238,238) 18%, rgb(236,236,236) 24%, rgb(236,236,236) 35%,
        rgb(237,237,237) 41%, rgb(218,218,218) 47%, rgb(227,227,227) 53%,
        rgb(231,231,231) 59%, rgb(235,235,235) 65%, rgb(240,240,240) 71%,
        rgb(243,243,243) 76%, rgb(249,249,249) 82%, rgb(255,255,255) 100%);
    color: #222;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.btn:hover {
    background: linear-gradient(180deg,
        rgb(255,255,255) 0%, rgb(250,250,250) 12%, rgb(246,246,246) 24%,
        rgb(244,244,244) 35%, rgb(245,245,245) 41%, rgb(228,228,228) 47%,
        rgb(237,237,237) 53%, rgb(241,241,241) 65%, rgb(249,249,249) 82%,
        rgb(255,255,255) 100%);
}
.btn:active {
    background: linear-gradient(180deg,
        rgb(187,187,187) 0%, rgb(183,183,183) 16%, rgb(179,179,179) 32%,
        rgb(178,178,178) 42%, rgb(164,164,164) 47%, rgb(170,170,170) 58%,
        rgb(177,177,177) 68%, rgb(184,184,184) 79%, rgb(192,192,192) 95%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
.btn:disabled { opacity: 0.5; pointer-events: none; }
/* Small push button — pxm# 10411 (17px visual body, y4-y20) */
.btn-sm {
    height: 17px; font-size: 11px; padding: 0 10px 2px;
    border-radius: 4px;
    background: linear-gradient(180deg,
        rgb(247,247,247) 0%, rgb(243,243,243) 6%, rgb(239,239,239) 12%,
        rgb(236,236,236) 18%, rgb(235,235,235) 24%, rgb(235,235,235) 35%,
        rgb(217,217,217) 41%, rgb(225,225,225) 47%, rgb(232,232,232) 53%,
        rgb(235,235,235) 59%, rgb(240,240,240) 65%, rgb(244,244,244) 71%,
        rgb(251,251,251) 76%, rgb(255,255,255) 82%, rgb(255,255,255) 100%);
}
/* Mini push button — pxm# 13198 (15px visual body) */
.btn-xs { height: 17px; font-size: 9px; padding: 0 6px 2px; border-radius: 3px; }

/* Blue push button — exact pxm# 2452 f1 (Aqua blue default state)
   Border: caps x=6 rgba(0,0,11,0.565) — nearly black, not blue */
.btn.blue {
    border: 1px solid rgba(0,0,11,0.45);
    background: linear-gradient(180deg,
        rgb(200,213,237) 0%, rgb(187,210,236) 6%, rgb(176,205,234) 12%,
        rgb(166,199,232) 18%, rgb(159,195,232) 24%, rgb(154,193,233) 29%,
        rgb(152,193,236) 35%, rgb(151,194,238) 41%, rgb(110,173,238) 47%,
        rgb(127,188,250) 53%, rgb(136,197,255) 59%, rgb(143,204,255) 65%,
        rgb(149,210,255) 71%, rgb(156,217,255) 76%, rgb(159,223,255) 82%,
        rgb(166,230,255) 88%, rgb(172,239,255) 94%, rgb(175,249,255) 100%);
    color: #222;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.btn.blue:hover {
    background: linear-gradient(180deg,
        rgb(210,223,247) 0%, rgb(197,220,246) 12%, rgb(169,205,242) 24%,
        rgb(162,203,246) 35%, rgb(161,204,248) 41%, rgb(120,183,248) 47%,
        rgb(137,198,255) 53%, rgb(153,214,255) 65%, rgb(169,233,255) 82%,
        rgb(185,255,255) 100%);
}
.btn.blue:active {
    background: linear-gradient(180deg,
        rgb(140,153,177) 0%, rgb(126,145,174) 16%, rgb(112,137,171) 32%,
        rgb(108,135,173) 42%, rgb(83,120,173) 47%, rgb(91,131,183) 58%,
        rgb(99,142,193) 68%, rgb(107,151,200) 79%, rgb(115,161,205) 95%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* Green push button */
.btn.green {
    border: 1px solid #2a6a2a;
    background: linear-gradient(180deg, #a8e8a8 0%, #6cc06c 40%, #40a040 50%, #58b058 52%, #80d080 100%);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    box-shadow: 0 1px 1px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn.green:hover {
    background: linear-gradient(180deg, #b8f0b8 0%, #7ccc7c 40%, #50b050 50%, #68c068 52%, #90d890 100%);
}


/* ── Aqua Button (primary CTA) ──
   Gradient derived from clut 2000 blue range, with
   center-band darkening matching pxm# 2448 f1 (active blue). */
.aqua-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px 2px;
    height: 17px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,11,0.45);
    background: linear-gradient(180deg,
        rgb(200,213,237) 0%, rgb(187,210,236) 6%, rgb(176,205,234) 12%,
        rgb(166,199,232) 18%, rgb(159,195,232) 24%, rgb(154,193,233) 29%,
        rgb(152,193,236) 35%, rgb(151,194,238) 41%, rgb(110,173,238) 47%,
        rgb(127,188,250) 53%, rgb(136,197,255) 59%, rgb(143,204,255) 65%,
        rgb(149,210,255) 71%, rgb(156,217,255) 76%, rgb(159,223,255) 82%,
        rgb(166,230,255) 88%, rgb(172,239,255) 94%, rgb(175,249,255) 100%);
    color: #222;
    font-family: inherit;
    font-size: 11px; font-weight: normal;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    text-decoration: none;
    cursor: default;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.aqua-btn:hover {
    background: linear-gradient(180deg,
        rgb(210,223,247) 0%, rgb(197,220,246) 12%, rgb(169,205,242) 24%,
        rgb(162,203,246) 35%, rgb(161,204,248) 41%, rgb(120,183,248) 47%,
        rgb(137,198,255) 53%, rgb(153,214,255) 65%, rgb(169,233,255) 82%,
        rgb(185,255,255) 100%);
    text-decoration: none;
}
.aqua-btn:active {
    background: linear-gradient(180deg,
        rgb(140,153,177) 0%, rgb(126,145,174) 16%, rgb(112,137,171) 32%,
        rgb(108,135,173) 42%, rgb(83,120,173) 47%, rgb(91,131,183) 58%,
        rgb(99,142,193) 68%, rgb(107,151,200) 79%, rgb(115,161,205) 95%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* Aqua Graphite variant — exact pxm# 2452 f0 gray push button (same as normal) */
.aqua-btn-graphite {
    border: 1px solid rgba(0,0,0,0.35);
    background: linear-gradient(180deg,
        rgb(249,249,249) 0%, rgb(244,244,244) 6%, rgb(241,241,241) 12%,
        rgb(238,238,238) 18%, rgb(236,236,236) 24%, rgb(236,236,236) 35%,
        rgb(237,237,237) 41%, rgb(218,218,218) 47%, rgb(227,227,227) 53%,
        rgb(231,231,231) 59%, rgb(235,235,235) 65%, rgb(240,240,240) 71%,
        rgb(243,243,243) 76%, rgb(249,249,249) 82%, rgb(255,255,255) 100%);
    color: #222;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.aqua-btn-graphite:hover {
    background: linear-gradient(180deg,
        rgb(255,255,255) 0%, rgb(250,250,250) 12%, rgb(246,246,246) 24%,
        rgb(244,244,244) 35%, rgb(245,245,245) 41%, rgb(228,228,228) 47%,
        rgb(237,237,237) 53%, rgb(241,241,241) 65%, rgb(249,249,249) 82%,
        rgb(255,255,255) 100%);
}

/* Aqua Silver variant — same as graphite (pxm# 2452 f0 gray push button) */
.aqua-btn-silver {
    border: 1px solid rgba(0,0,0,0.35);
    background: linear-gradient(180deg,
        rgb(249,249,249) 0%, rgb(244,244,244) 6%, rgb(241,241,241) 12%,
        rgb(238,238,238) 18%, rgb(236,236,236) 24%, rgb(236,236,236) 35%,
        rgb(237,237,237) 41%, rgb(218,218,218) 47%, rgb(227,227,227) 53%,
        rgb(231,231,231) 59%, rgb(235,235,235) 65%, rgb(240,240,240) 71%,
        rgb(243,243,243) 76%, rgb(249,249,249) 82%, rgb(255,255,255) 100%);
    color: #222;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.aqua-btn-silver:hover {
    background: linear-gradient(180deg,
        rgb(255,255,255) 0%, rgb(250,250,250) 12%, rgb(246,246,246) 24%,
        rgb(244,244,244) 35%, rgb(245,245,245) 41%, rgb(228,228,228) 47%,
        rgb(237,237,237) 53%, rgb(241,241,241) 65%, rgb(249,249,249) 82%,
        rgb(255,255,255) 100%);
}

/* Aqua Danger variant (alert red, from plut accent red #ff0800) */
.aqua-btn-danger {
    border: 1px solid #8a2020;
    background: linear-gradient(180deg,
        #e88888 0%, #d04040 45%, #b83030 50%, #d04040 100%);
}
.aqua-btn-danger:hover {
    background: linear-gradient(180deg,
        #f09898 0%, #e05050 45%, #c84040 50%, #e05050 100%);
}


/* ── Sidebar (iTunes Source List) ──
   Background gradient sampled from Tiger Finder sidebar. */
.sidebar {
    width: 200px;
    background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-mid) 50%, var(--sidebar-end));
    border-right: 1px solid rgb(140,140,140);
    display: flex;
    flex-direction: column;
}
.sidebar h2 {
    padding: 8px 12px 3px;
    font: bold 9px 'Lucida Grande', sans-serif;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-faint);
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.sidebar-list { flex: 1; overflow-y: auto; }
.sidebar-item {
    padding: 5px 12px;
    cursor: default;
    display: flex; align-items: center; gap: 6px;
    font: bold 11px 'Lucida Grande', sans-serif;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    user-select: none; -webkit-user-select: none;
}
.sidebar-item:hover { background: rgba(0,0,0,0.06); }
/* Selection — pxm# 2063: alternating 2px stripes rgb(42,104,200) / rgb(43,107,206) */
.sidebar-item.active {
    background: repeating-linear-gradient(180deg,
        rgb(42,104,200) 0px, rgb(42,104,200) 2px,
        rgb(43,107,206) 2px, rgb(43,107,206) 4px);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
.sidebar-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
    border: 0.5px solid rgba(0,0,0,0.25);
    box-shadow: 0 0.5px 1px rgba(0,0,0,0.1);
}
.sidebar-item.active .sidebar-dot { border-color: rgba(255,255,255,0.4); }


/* ── Footer Bar (bot-bar) ──
   Brushed metal strip at window bottom. */
.bot-bar {
    height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0 12px 2px;
    border-top: 1px solid rgb(140,140,140);
    user-select: none; -webkit-user-select: none;
    cursor: default;
    position: relative;
}
.bot-bar span {
    font-size: 9px; color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}


/* ── Sheet / Alert Dialog (NSAlert) ─�� */
.sheet-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.sheet-overlay.open { display: flex; }
.sheet {
    width: 420px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #666;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    background: #ededed;
    padding: 18px 20px 14px;
    animation: sheetPop 0.1s ease-out;
}
@keyframes sheetPop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.sheet::before { display: none; }
.sheet-content { display: flex; gap: 14px; align-items: flex-start; }
.sheet-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #777;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    background: #1a1a2e;
}
.sheet-text { flex: 1; min-width: 0; padding-top: 1px; }
.sheet-title {
    font-size: 13px; font-weight: bold;
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    text-align: left;
    margin-bottom: 4px;
}
.sheet-body {
    font-size: 11px; color: var(--text-secondary);
    line-height: 1.45;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.sheet-buttons {
    display: flex; justify-content: flex-end;
    gap: 0; margin-top: 14px;
}


/* ── Text Input (RULE 16) ──
   Border from pxm# 2367 edittext corners.
   Focus ring: FocusRectOutset=3 (frme 560). */
/* Text input — pxm# 2367 edittext_corners: 2px border, top rows darker (105-124),
   bottom rows lighter (185-254), inner padding per tmet EditTextWhitespace=2 */
.aqua-input {
    height: 22px;
    font: 13px 'Lucida Grande', sans-serif;
    border: 2px solid rgb(154,154,154);
    border-top-color: rgb(124,124,124);
    border-left-color: rgb(140,140,140);
    border-bottom-color: rgb(195,195,195);
    border-radius: 0;
    padding: 1px 6px;
    background: #fff;
    outline: none;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.08);
    color: var(--text-primary);
}
.aqua-input:focus {
    border-color: rgba(68, 140, 220, 0.6);
    box-shadow: 0 0 3px 1px var(--focus-ring), inset 0 1px 2px rgba(0,0,0,0.1);
}


/* ── Focus Ring (universal) ── */
:focus-visible {
    outline: none;
    box-shadow: 0 0 3px 1px var(--focus-ring);
}


/* ── Progress Bar ──
   Track: 20px (pxm# 2800, 4px shadow below).
   Indicator: 16px Aqua blue (pxm# 2820).
   Stripe animation matched to Starbee splash. */
/* Progress track — pxm# 2810: 16px visible track + 4px shadow below.
   CSS: 16px track with border + inset shadow to simulate the bitmap. */
.progress-track {
    width: 200px; height: 16px;
    border-radius: 8px;
    background: linear-gradient(180deg,
        rgb(210,210,210) 0%, rgb(227,227,227) 12%,
        rgb(231,231,231) 25%, rgb(222,222,222) 37%,
        rgb(227,227,227) 50%, rgb(240,240,240) 62%,
        rgb(246,246,246) 75%, rgb(248,248,248) 100%);
    border: 1px solid rgb(163,163,163);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    overflow: hidden;
    position: relative;
}
/* Progress indicator — pxm# 2820 Aqua blue gradient + stripe overlay */
.progress-fill {
    height: 100%; width: 0%;
    border-radius: 7px;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 15%,
            transparent 40%, transparent 60%,
            rgba(255,255,255,0.04) 85%, rgba(255,255,255,0.11) 100%),
        linear-gradient(180deg,
            rgb(95,129,203) 0%, rgb(131,165,220) 12%,
            rgb(130,178,225) 25%, rgb(92,153,220) 37%,
            rgb(61,134,218) 50%, rgb(60,141,233) 62%,
            rgb(82,164,254) 75%, rgb(103,191,255) 87%,
            rgb(107,191,255) 100%);
    transition: width 0.3s ease;
    overflow: hidden;
    position: relative;
}
.progress-stripes {
    position: absolute;
    top: 0; bottom: 0;
    left: -22.6px; right: 0;
    width: calc(100% + 22.6px);
    background: repeating-linear-gradient(-45deg,
        rgba(255,255,255,0.22) 0px,
        rgba(255,255,255,0.22) 4px,
        transparent 4px,
        transparent 8px);
    background-size: 11.3px 11.3px;
    animation: stripe-slide 0.4s linear infinite;
    will-change: transform;
}
@keyframes stripe-slide {
    from { transform: translateX(0); }
    to { transform: translateX(11.3px); }
}


/* ── Splash Screen (matched to Starbee Tools native app) ��─ */
.splash {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E") repeat,
        linear-gradient(to right, var(--metal-edge) 0%, #c0c0c0 15%, #d4d4d4 35%, var(--metal-center) 50%, #d4d4d4 65%, #c0c0c0 85%, var(--metal-edge) 100%);
    background-size: 128px 128px, 100% 1px;
}
.splash-box {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
}
/* Splash icon — Tiger image well treatment (pxm# 2047-2050) */
.splash-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgb(255,255,255);
    outline: 1px solid rgb(229,229,229);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.28),
        inset 0 0 2px rgba(0,0,0,0.12),
        0 1px 3px rgba(0,0,0,0.18);
}
.splash-title {
    font-size: 13px; font-weight: bold;
    color: var(--text-title);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.splash-status {
    font-size: 11px; color: var(--text-secondary);
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    min-height: 14px;
}
.splash.done {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.app-content { display: none; }
.app-content.ready { display: contents; }


/* ── Login Modal ── */
.login-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}
.login-backdrop.open { display: block; }


/* ── Nav (G5 Etched Header for landing page) ── */
.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 8px;
    border-bottom: 1px solid rgb(140,140,140);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}
.nav-inner {
    width: 980px;
    max-width: calc(100% - 40px);
    display: flex; flex-direction: column;
    align-items: flex-start;
}
.nav-brand {
    font-size: 18px; font-weight: bold;
    color: #2a2a2a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    letter-spacing: -0.3px;
    margin-bottom: 2px;
}
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a {
    font-size: 10px;
    color: #555;
    text-transform: lowercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    text-decoration: none;
    letter-spacing: 0.3px;
}
.nav-links a:hover { color: #111; text-decoration: none; }


/* ── Embed Mode (for iframe loading) ── */
body.embed .title-bar,
body.embed .toolbar,
body.embed .header-band { display: none !important; }

/* Nav frames container */
.nav-frames { flex: 1; display: none; overflow: hidden; }
.nav-frames iframe { width: 100%; height: 100%; border: none; }


/* ── App Layout ── */
.app { display: flex; flex: 1; overflow: hidden; }


/* ── Voice Grid (landing page) ── */
.voices {
    display: flex;
    gap: 36px;
    margin-bottom: 36px;
}
.voice-col {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}
/* Hover: deepen the image well inset — like pressing slightly into metal */
.voice-col:hover .isis-badge {
    outline-color: rgb(200,200,200);
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.35),
        inset 0 0 3px rgba(0,0,0,0.15),
        0 1px 2px rgba(0,0,0,0.14);
}
.voice-col:hover .voice-label {
    color: rgb(60,60,60);
}
/* Playing: well pressed deeper, outer bevel darkens — active depression */
.voice-col.playing .isis-badge {
    outline-color: rgb(184,184,184);
    box-shadow:
        inset 0 3px 7px rgba(0,0,0,0.40),
        inset 0 0 4px rgba(0,0,0,0.18),
        0 1px 1px rgba(0,0,0,0.10);
}
.voice-col.playing .voice-label { color: rgb(50,50,50); }
/* Voice badge — styled as Tiger image well (pxm# 2047-2050):
   outer bevel rgb(229), 2px white band, inset ring rgb(118) top / rgb(184) sides */
.isis-badge {
    width: 130px; height: 130px;
    border-radius: 50%;
    background: rgb(243, 243, 243);
    border: 2px solid rgb(255,255,255);
    outline: 1px solid rgb(229,229,229);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.28),
        inset 0 0 2px rgba(0,0,0,0.12),
        0 1px 3px rgba(0,0,0,0.18);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.isis-badge img {
    width: 110%; height: auto;
    display: block; pointer-events: none;
}
.voice-label {
    font-size: 9px; font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-faint);
    text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}