/*! macos9.css v1.0.0 - Mac OS 9 Platinum Theme
 * Copyright (c) 2025 Cleric d/b/a Agentic, Inc.
 * Released under the MIT License
 *
 * ChiKareGo2 font by Giles Booth (CC BY)
 * https://www.pentacom.jp/pentacom/bitfontmaker2/gallery/?id=3780
 *
 * UI reference: Mac OS 9 UI Kit by Tiago Moreira
 * https://www.figma.com/community/file/966677684754831498
 */

/* ============================================
   FONTS
   ============================================ */
@font-face {
    font-family: "ChiKareGo2";
    src: url("ChiKareGo2.woff2") format("woff2"),
         url("ChiKareGo2.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Desktop - the distinctive teal/cyan from Mac OS 9 */
    --mac9-desktop: #669999;

    /* Window chrome - authentic Platinum gray */
    --mac9-surface: #D8D8D8;
    --mac9-surface-dark: #A6A6A6;
    --mac9-surface-light: #F2F2F2;
    --mac9-surface-darker: #7F7F7F;

    /* Borders and bevels */
    --mac9-border-outer: #000000;
    --mac9-border-light: #FFFFFF;
    --mac9-border-dark: #7D7D7D;
    --mac9-border-medium: #9A9A9A;

    /* Content areas */
    --mac9-content-bg: #FFFFFF;

    /* Text */
    --mac9-text: #000000;
    --mac9-text-disabled: #8E8E8E;

    /* Selection highlight */
    --mac9-selection: #2F5E9B;
    --mac9-selection-text: #FFFFFF;
    --mac9-list-selection: #C8CFFF;
    --mac9-menu-selection: #00007B;
    --mac9-titlebar-stripe-light: #DFDFDF;
    --mac9-titlebar-stripe-dark: #C7C7C7;

    /* Font stacks
       - System font (Chicago): The voice of the System - loud, structural, commanding
         Used for: window titles, buttons, menu bar items
       - UI font (Geneva): The voice of Content - legible, the worker bee
         Used for: labels, list items, body text, instructions
    */
    --mac9-font-system: "ChiKareGo2", "Chicago", "Charcoal", sans-serif;
    --mac9-font-ui: "Geneva", "Verdana", "Lucida Grande", sans-serif;
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    color: var(--mac9-text);
}

/* ============================================
   BUTTONS
   Native <button> element styling - Mac OS 9 Platinum style

   The Platinum interface uses top-left lighting:
   - Raised (outset): Light on top/left, shadow on bottom/right
   - When pressed: Inverted shadows to look "pushed in"

   Reference: radio-buttons-disabled.png, default-button-radio.png
   ============================================ */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    font-family: var(--mac9-font-system);
    font-size: 12px;
    font-weight: normal;
    /* Disable anti-aliasing for crisp pixel font rendering */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    box-sizing: border-box;
    height: 20px;
    line-height: 18px;
    min-width: 60px;
    padding: 0 12px;
    background: #DDDDDD;
    border: 1px solid var(--mac9-border-outer);
    border-radius: 4px;
    cursor: pointer;
    color: var(--mac9-text);
    /* Platinum 3D bevel: white highlight top-left, dark shadow bottom-right */
    box-shadow:
        inset 1px 1px 0 #FFFFFF,
        inset -1px -1px 0 #888888;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Arrow character adjustment for buttons */
.btn-arrow {
    display: inline-block;
    transform: translateY(1px);
}

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    background: #E5E5E5;
}

button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
    /* Inverted shadows to look "pushed in" */
    background: #AAAAAA;
    box-shadow:
        inset 1px 1px 0 #888888,
        inset -1px -1px 0 #FFFFFF;
}

button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
    outline: none;
}

button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled {
    color: var(--mac9-text-disabled);
    cursor: default;
    background: #E2E2E2;
    box-shadow:
        inset 1px 1px 0 #F0F0F0,
        inset -1px -1px 0 #999999;
}

/* Primary/Default button - has a darker/thicker border ring */
button.default,
input[type="submit"].default {
    border: 2px solid var(--mac9-border-outer);
    border-radius: 4px;
    height: 22px;
    box-shadow:
        inset 1px 1px 0 #FFFFFF,
        inset -1px -1px 0 #888888;
}

button.default:active,
input[type="submit"].default:active {
    background: #AAAAAA;
    box-shadow:
        inset 1px 1px 0 #888888,
        inset -1px -1px 0 #FFFFFF;
}

/* ============================================
   TEXT INPUTS
   Native <input type="text"> styling
   Reference: select-dropdowns-checkboxes.png, radio-buttons-disabled.png

   Platinum recessed effect (opposite of raised buttons):
   - Dark shadow on top/left (appears carved in)
   - Light highlight on bottom/right
   ============================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"] {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    box-sizing: border-box;
    height: 20px;
    padding: 2px 4px;
    background: var(--mac9-content-bg);
    border: 1px solid #888888;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Platinum recessed: dark top-left, light bottom-right */
    box-shadow:
        inset 1px 1px 0 #000000,
        inset -1px -1px 0 #FFFFFF;
}

input[type="text"].focus-ring,
input[type="password"].focus-ring,
input[type="email"].focus-ring,
input[type="url"].focus-ring,
input[type="tel"].focus-ring,
input[type="number"].focus-ring,
input[type="search"].focus-ring {
    outline: none;
    box-shadow:
        inset 0 0 0 1px #2F5E9B,
        inset 1px 1px 0 #FFFFFF,
        inset -1px -1px 0 #8A8A8A;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus {
    border-color: #000000;
    box-shadow:
        inset 1px 1px 0 #000000,
        inset -1px -1px 0 #FFFFFF;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled {
    background: var(--mac9-surface);
    color: var(--mac9-text-disabled);
}

/* ============================================
   TEXTAREA
   Native <textarea> styling
   Platinum recessed effect same as text inputs
   ============================================ */
textarea {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    box-sizing: border-box;
    padding: 2px 3px;
    background: var(--mac9-content-bg);
    border: 1px solid #888888;
    border-radius: 0;
    outline: none;
    resize: both;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Platinum recessed: dark top-left, light bottom-right */
    box-shadow:
        inset 1px 1px 0 #000000,
        inset -1px -1px 0 #FFFFFF;
}

textarea:focus {
    border-color: #000000;
    box-shadow:
        inset 1px 1px 0 #000000,
        inset -1px -1px 0 #FFFFFF;
}

textarea:disabled {
    background: var(--mac9-surface);
    color: var(--mac9-text-disabled);
}

/* ============================================
   CHECKBOX
   Native <input type="checkbox"> styling
   Reference: checkboxes-tabs.png, radio-buttons-disabled.png
   ============================================ */
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin: 0;
    background: #F2F2F2;
    border: 1px solid var(--mac9-border-outer);
    border-radius: 0;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    /* 3D recessed effect */
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-dark),
        inset -1px -1px 0 #FFFFFF;
}

input[type="checkbox"]:checked {
    background: var(--mac9-content-bg);
}

/* Checkmark (✓) style like authentic Mac OS 9 */
input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 5px;
    border: solid var(--mac9-text);
    border-width: 0 2px 2px 0;
    top: 1px;
    left: 3px;
    transform: rotate(45deg);
}

input[type="checkbox"]:checked::after {
    content: none;
}

input[type="checkbox"]:active {
    background: var(--mac9-surface);
}

input[type="checkbox"]:disabled {
    background: var(--mac9-surface);
    cursor: default;
}

input[type="checkbox"]:disabled:checked::before {
    border-color: var(--mac9-text-disabled);
}

/* ============================================
   RADIO BUTTON
   Native <input type="radio"> styling
   Reference: radio-buttons-disabled.png, default-button-radio.png
   ============================================ */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin: 0;
    background: #F2F2F2;
    border: 1px solid var(--mac9-border-outer);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    /* 3D recessed circular effect */
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-dark),
        inset -1px -1px 0 #FFFFFF;
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 4px;
    height: 4px;
    background: var(--mac9-text);
    border-radius: 50%;
}

input[type="radio"]:active {
    background: var(--mac9-surface);
}

input[type="radio"]:disabled {
    background: var(--mac9-surface);
    cursor: default;
}

input[type="radio"]:disabled:checked::after {
    background: var(--mac9-text-disabled);
}

/* ============================================
   SELECT / DROPDOWN
   Native <select> styling
   Reference: select-dropdowns-checkboxes.png
   ============================================ */
select {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    box-sizing: border-box;
    height: 18px;
    padding: 0 22px 0 6px;
    background: #E6E6E6;
    border: 1px solid var(--mac9-border-outer);
    border-radius: 0;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow:
        inset 1px 1px 0 #FFFFFF,
        inset -1px -1px 0 #8A8A8A;
    /* Up/down arrows indicator + Separator line */
    background-image: 
        linear-gradient(to right,
            transparent calc(100% - 20px),
            #000000 calc(100% - 20px),
            #000000 calc(100% - 19px),
            #FFFFFF calc(100% - 19px),
            #FFFFFF calc(100% - 18px),
            transparent calc(100% - 18px)
        ),
        url("data:image/svg+xml,%3Csvg width='7' height='14' viewBox='0 0 7 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 1L6 5H1L3.5 1Z' fill='black'/%3E%3Cpath d='M3.5 13L1 9H6L3.5 13Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left top, right 6px center;
}

select:focus {
    outline: none;
}

select:disabled {
    background-color: var(--mac9-surface);
    color: var(--mac9-text-disabled);
    cursor: default;
}

/* ============================================
   LABEL
   Form label styling
   ============================================ */
label {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

/* ============================================
   FIELDSET & LEGEND
   Group box with etched border - Mac OS 9 style groove
   ============================================ */
fieldset {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    margin: 8px 0;
    padding: 12px;
    background: var(--mac9-surface);
    /* Etched/groove border effect - dark outside, light inside */
    border: 1px solid;
    border-color: #888888 #FFFFFF #FFFFFF #888888;
    box-shadow:
        inset 1px 1px 0 #FFFFFF,
        inset -1px -1px 0 #888888;
}

legend {
    font-family: var(--mac9-font-system);
    font-size: 12px;
    padding: 0 6px;
    margin-left: 8px;
    background: var(--mac9-surface);
}

/* ============================================
   WINDOW
   ============================================ */
.window {
    background: var(--mac9-surface);
    border: 1px solid var(--mac9-border-outer);
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-light),
        inset -1px -1px 0 var(--mac9-border-dark),
        2px 2px 0 rgba(0,0,0,0.25);
}

/* ============================================
   TITLE BAR - Authentic Mac OS 9 horizontal pinstripes
   Reference: image-v2.png
   The title bar has:
   - Close box on left
   - Horizontal pinstripes in the middle (height matches control boxes)
   - Title text centered with solid background interrupting stripes
   - Zoom and collapse boxes on right
   ============================================ */
.title-bar {
    height: 20px;
    background: var(--mac9-surface);
    border-bottom: 1px solid var(--mac9-border-dark);
    display: flex;
    align-items: center;
    padding: 0 4px;
    position: relative;
}

/* Pinstripes container - sits between controls, behind title */
.title-bar::before {
    content: "";
    position: absolute;
    left: 21px;  /* After close button (13px + margins + padding) */
    right: 37px; /* Before zoom/collapse buttons */
    top: 4px;
    bottom: 5px;
    /* Etched horizontal pinstripes - alternating light/dark for 3D effect */
    background: repeating-linear-gradient(
        to bottom,
        #FFFFFF 0px,
        #FFFFFF 1px,
        #888888 1px,
        #888888 2px
    );
    z-index: 0;
}

.title-bar-text {
    font-family: var(--mac9-font-system);
    font-size: 12px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
}

/* Title text - centered, solid background interrupts stripes */
.title-bar-text span {
    background: var(--mac9-surface);
    padding: 0 8px;
    display: inline-block;
}

/* ============================================
   TITLE BAR CONTROLS - Close box on left, zoom/collapse on right
   ============================================ */
.title-bar-controls {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 1;
}

/* Control boxes - 13x13px buttons matching SVG reference
   Structure: outer 3D border (white/gray), inner 1px #262626 border, gradient fill
   Reference: Close Box.svg, Zoom Box.svg, Collapse Box.svg */
.title-bar-controls button,
.title-bar-controls-right button {
    min-width: 13px;
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0 1px;
    border-radius: 0;
    /* Gradient fill matching SVG: #9A9A9A (top-left) to #F1F1F1 (bottom-right) */
    background: linear-gradient(135deg, #9A9A9A 0%, #F1F1F1 100%);
    /* Inner border #262626 */
    border: 1px solid #262626;
    /* Outer 3D effect: white bottom/right, #808080 top/left */
    box-shadow:
        /* Inner highlights */
        inset 1px 1px 0 #FFFFFF,
        inset -1px -1px 0 #808080,
        /* Outer 3D border */
        -1px -1px 0 #808080,
        1px 1px 0 #FFFFFF;
    line-height: 13px;
    position: relative;
    box-sizing: border-box;
}

.title-bar-controls button:active,
.title-bar-controls-right button:active {
    background: #C8C8C8;
    box-shadow:
        inset 1px 1px 0 #888888,
        inset -1px -1px 0 #FFFFFF;
}

/* Disabled title bar buttons */
.title-bar-controls button:disabled,
.title-bar-controls-right button:disabled {
    background: #D8D8D8;
    cursor: default;
    box-shadow:
        inset 1px 1px 0 #E8E8E8,
        inset -1px -1px 0 #A8A8A8;
}

/* Zoomed window state - full width, no desktop background */
body.window-zoomed {
    background: var(--mac9-surface) !important;
    padding: 20px 0 0 0 !important;
}

body.window-zoomed .main-window {
    max-width: 100% !important;
    margin: 0 !important;
    min-height: calc(100vh - 20px) !important;
    border-left: none;
    border-right: none;
    box-shadow: none;
}

/* Collapsed window state - only title bar visible */
.window.collapsed .window-body,
.window.collapsed .window-toolbar,
.window.collapsed .detail-meta,
.window.collapsed .detail-content,
.window.collapsed .detail-actions,
.window.collapsed .list-header,
.window.collapsed .list-body,
.window.collapsed .list-footer,
.window.collapsed #promptsGrid,
.window.collapsed #searchResults,
.window.collapsed #emptyState,
.window.collapsed .form-group,
.window.collapsed .form-actions {
    display: none !important;
}

.window.collapsed {
    min-height: auto !important;
    height: auto !important;
}

/* Right-side controls (zoom/collapse boxes) */
.title-bar-controls-right {
    display: flex;
    position: relative;
    z-index: 1;
}

/* Zoom button - 6x6 outlined square in top-left (matching Zoom Box.svg)
   SVG: rect x="1.5" y="1.5" width="6" height="6" stroke="#262626" */
.title-bar-controls-right button[aria-label="Zoom"]::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 6px;
    height: 6px;
    border: 1px solid #262626;
    background: transparent;
    box-sizing: border-box;
}

/* Collapse button - horizontal bar centered (matching Collapse Box.svg)
   SVG: rect x="1.5" y="5.5" width="10" height="2" stroke="#262626" */
.title-bar-controls-right button[aria-label="Collapse"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    height: 4px;
    transform: translateY(-50%);
    border: 1px solid #262626;
    background: transparent;
    box-sizing: border-box;
}

/* ============================================
   WINDOW BODY
   ============================================ */
.window-body {
    padding: 10px;
    background: #DADADA;
}

/* ============================================
   STATUS BAR (bottom of window)
   ============================================ */
.status-bar {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: var(--mac9-surface);
    border-top: 1px solid var(--mac9-border-dark);
}

.status-bar-field {
    font-family: var(--mac9-font-ui);
    font-size: 11px;
    padding: 2px 6px;
    background: var(--mac9-surface);
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-dark),
        inset -1px -1px 0 var(--mac9-border-light);
    flex-grow: 1;
}

/* ============================================
   MENU BAR
   ============================================ */
menu[role="menubar"],
.menu-bar {
    font-family: var(--mac9-font-system);
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    list-style: none;
    display: flex;
    align-items: center;
    height: 20px;
    margin: 0;
    padding: 0 8px;
    background: var(--mac9-surface);
    border-bottom: 1px solid var(--mac9-border-outer);
    box-shadow: inset 0 -1px 0 var(--mac9-border-light);
}

menu[role="menubar"] > li,
.menu-bar-item {
    padding: 2px 10px;
    cursor: default;
    position: relative;
    user-select: none;
    height: 16px;
    display: flex;
    align-items: center;
}

menu[role="menubar"] > li:hover,
.menu-bar-item:hover {
    background: var(--mac9-menu-selection);
    color: var(--mac9-selection-text);
}

menu[role="menubar"] > li:hover > menu[role="menu"] {
    color: var(--mac9-text);
}

menu[role="menubar"] > li:hover > menu[role="menu"] > li {
    color: var(--mac9-text);
    background: transparent;
}

menu[role="menubar"] > li:hover > menu[role="menu"] > li:hover {
    background: var(--mac9-menu-selection);
    color: var(--mac9-selection-text);
}

/* Apple menu icon */
menu[role="menubar"] > li.apple-menu,
.menu-bar-item.apple-menu {
    padding: 2px 6px;
}

/* ============================================
   DROPDOWN MENU
   Reference: menu-dropdown.png
   ============================================ */
menu[role="menu"],
.menu-dropdown {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    list-style: none;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    margin: 0;
    padding: 2px 0;
    color: var(--mac9-text);
    background: #E6E6E6;
    border: 1px solid var(--mac9-border-outer);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    z-index: 100;
}

menu[role="menubar"] > li:hover > menu[role="menu"],
.menu-bar-item:hover > .menu-dropdown,
.menu-bar-item.menu-open > .menu-dropdown {
    display: block;
}

/* Touch device support - highlight open menu */
.menu-bar-item.menu-open {
    background: var(--mac9-menu-selection);
    color: var(--mac9-selection-text);
}

menu[role="menu"] > li,
.menu-dropdown-item {
    padding: 2px 16px 2px 16px;
    cursor: default;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--mac9-text);
}

menu[role="menu"] * {
    color: var(--mac9-text);
}

menu[role="menu"] > li:hover,
.menu-dropdown-item:hover {
    background: var(--mac9-menu-selection);
    color: var(--mac9-selection-text);
}

menu[role="menu"] > li[aria-disabled="true"],
.menu-dropdown-item.disabled {
    color: var(--mac9-text-disabled);
}

menu[role="menu"] > li[aria-disabled="true"]:hover,
.menu-dropdown-item.disabled:hover {
    background: transparent;
    color: var(--mac9-text-disabled);
}

/* Menu separator */
menu[role="menu"] > hr,
.menu-divider {
    height: 1px;
    border: none;
    background: var(--mac9-border-dark);
    margin: 4px 0;
}

/* Keyboard shortcut text */
.menu-shortcut {
    color: inherit;
    margin-left: 12px;
    font-size: 11px;
}

/* ============================================
   LIST VIEW (Finder-style)
   ============================================ */
table {
    font-family: var(--mac9-font-ui);
    font-size: 12px;
    border-collapse: collapse;
    background: var(--mac9-content-bg);
    width: 100%;
}

/* Table header - column headers */
table > thead > tr > th {
    font-weight: bold;
    text-align: left;
    padding: 2px 8px;
    background: linear-gradient(to bottom,
        var(--mac9-surface-light) 0%,
        var(--mac9-surface) 50%,
        var(--mac9-surface-dark) 100%
    );
    border: 1px solid var(--mac9-border-outer);
    border-right-color: var(--mac9-border-dark);
    cursor: pointer;
    user-select: none;
}

table > thead > tr > th:last-child {
    border-right-color: var(--mac9-border-outer);
}

/* Sort indicator */
table > thead > tr > th[aria-sort="ascending"]::after {
    content: " ▲";
    font-size: 8px;
}

table > thead > tr > th[aria-sort="descending"]::after {
    content: " ▼";
    font-size: 8px;
}

/* Table rows */
table > tbody > tr {
    cursor: pointer;
}

table > tbody > tr:nth-child(odd) {
    background: var(--mac9-content-bg);
}

table > tbody > tr:nth-child(even) {
    background: var(--mac9-content-bg);
}

table > tbody > tr:hover {
    background: var(--mac9-selection);
    color: var(--mac9-selection-text);
}

table > tbody > tr.selected {
    background: var(--mac9-selection);
    color: var(--mac9-selection-text);
}

table > tbody > tr > td {
    padding: 1px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--mac9-surface);
}

/* ============================================
   SUNKEN PANEL (scrollable content area)
   ============================================ */
.sunken-panel {
    background: var(--mac9-content-bg);
    border: 1px solid var(--mac9-border-outer);
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-dark),
        inset -1px -1px 0 var(--mac9-surface-light);
    overflow: auto;
}

/* ============================================
   DIALOG / MODAL
   Reference: dialog.png
   ============================================ */
.dialog {
    background: var(--mac9-surface);
    border: 2px solid var(--mac9-border-outer);
    border-radius: 3px;
    padding: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
}

.dialog-body {
    padding: 16px 20px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
}

/* Alert dialog with icon */
.dialog.alert {
    text-align: center;
}

.dialog.alert .dialog-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* ============================================
   SEPARATOR / DIVIDER (Etched line)
   ============================================ */
hr {
    height: 2px;
    border: none;
    background: linear-gradient(
        to bottom,
        var(--mac9-border-dark) 0px,
        var(--mac9-border-dark) 1px,
        var(--mac9-border-light) 1px,
        var(--mac9-border-light) 2px
    );
    margin: 8px 0;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 14px;
    border: 1px solid var(--mac9-border-outer);
    background: var(--mac9-content-bg);
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-dark),
        inset -1px -1px 0 var(--mac9-surface-light);
}

progress::-webkit-progress-bar {
    background: var(--mac9-content-bg);
}

progress::-webkit-progress-value {
    background: repeating-linear-gradient(
        -45deg,
        var(--mac9-selection) 0px,
        var(--mac9-selection) 4px,
        #4477AA 4px,
        #4477AA 8px
    );
}

progress::-moz-progress-bar {
    background: repeating-linear-gradient(
        -45deg,
        var(--mac9-selection) 0px,
        var(--mac9-selection) 4px,
        #4477AA 4px,
        #4477AA 8px
    );
}

/* ============================================
   SCROLLBARS (WebKit only)
   Mac OS 9 Platinum scrollbars with purple/blue thumb
   Reference: scrollbar SVG with #AAAAAA track, #9999FF thumb
   ============================================ */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background: var(--mac9-surface);
}

::-webkit-scrollbar-track {
    /* Solid grey track like Mac OS 9 */
    background: #AAAAAA;
    border: 1px solid #262626;
    box-shadow:
        inset 2px 2px 2px rgba(38, 38, 38, 0.3),
        inset -1px 0 0 rgba(255, 255, 255, 0.5);
}

::-webkit-scrollbar-thumb {
    /* Purple/blue thumb with subtle 3D effect and grip lines */
    background-color: #9999FF;
    /* Horizontal grip lines in center - 4 lines like title bar pinstripes */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent calc(50% - 5px),
        rgba(255, 255, 255, 0.5) calc(50% - 5px),
        rgba(255, 255, 255, 0.5) calc(50% - 4px),
        rgba(76, 76, 153, 0.5) calc(50% - 4px),
        rgba(76, 76, 153, 0.5) calc(50% - 3px),
        rgba(255, 255, 255, 0.5) calc(50% - 3px),
        rgba(255, 255, 255, 0.5) calc(50% - 2px),
        rgba(76, 76, 153, 0.5) calc(50% - 2px),
        rgba(76, 76, 153, 0.5) calc(50% - 1px),
        rgba(255, 255, 255, 0.5) calc(50% - 1px),
        rgba(255, 255, 255, 0.5) calc(50%),
        rgba(76, 76, 153, 0.5) calc(50%),
        rgba(76, 76, 153, 0.5) calc(50% + 1px),
        rgba(255, 255, 255, 0.5) calc(50% + 1px),
        rgba(255, 255, 255, 0.5) calc(50% + 2px),
        rgba(76, 76, 153, 0.5) calc(50% + 2px),
        rgba(76, 76, 153, 0.5) calc(50% + 3px),
        transparent calc(50% + 3px),
        transparent 100%
    );
    background-size: 8px 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #262626;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -1px 0 rgba(76, 76, 153, 0.8);
}

::-webkit-scrollbar-thumb:hover {
    background-color: #AAAAFF;
}

::-webkit-scrollbar-thumb:active {
    background-color: #7777DD;
    box-shadow:
        inset 2px 2px 0 rgba(76, 76, 153, 0.8),
        inset -2px -1px 0 rgba(255, 255, 255, 0.3);
}

::-webkit-scrollbar-button {
    /* Grey buttons with 3D bevel: white top/left, grey bottom/right */
    background: #DDDDDD;
    border: 1px solid #262626;
    height: 16px;
    width: 16px;
    box-shadow:
        inset 1px 1px 0 #FFFFFF,
        inset -1px -1px 0 #808080;
}

::-webkit-scrollbar-button:active {
    background: #BBBBBB;
    box-shadow:
        inset 1px 1px 0 #808080,
        inset -1px -1px 0 #FFFFFF;
}

/* Up arrow - at top of scrollbar */
::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
    background-color: #DDDDDD;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 0L0 4H7L3.5 0Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide the second button at top */
::-webkit-scrollbar-button:vertical:start:increment {
    display: none;
}

/* Down arrow - at bottom of scrollbar */
::-webkit-scrollbar-button:vertical:end:increment {
    display: block;
    background-color: #DDDDDD;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 4L7 0H0L3.5 4Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide the second button at bottom */
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

/* Left arrow */
::-webkit-scrollbar-button:horizontal:start:decrement {
    display: block;
    background-color: #DDDDDD;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='7' viewBox='0 0 4 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3.5L4 0V7L0 3.5Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide the second button at left */
::-webkit-scrollbar-button:horizontal:start:increment {
    display: none;
}

/* Right arrow */
::-webkit-scrollbar-button:horizontal:end:increment {
    display: block;
    background-color: #DDDDDD;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='7' viewBox='0 0 4 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 3.5L0 7V0L4 3.5Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide the second button at right */
::-webkit-scrollbar-button:horizontal:end:decrement {
    display: none;
}

/* ============================================
   FIELD ROW (form layout helper)
   ============================================ */
.field-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-row + .field-row {
    margin-top: 6px;
}

.field-row-stacked {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-row-stacked + .field-row-stacked {
    margin-top: 8px;
}

/* ============================================
   TOOLBAR
   ============================================ */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--mac9-surface);
    border-bottom: 1px solid var(--mac9-border-dark);
}

/* ============================================
   TABS (Folder-style tabs with angled edges like Mac OS 9)
   Reference: checkboxes-tabs.png, buttons-list-view.png
   Mac OS 9 tabs have diagonal edges creating a trapezoid/folder tab shape
   ============================================ */
menu[role="tablist"],
.tabs {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    padding-left: 10px;
    background: var(--mac9-surface);
    border: 1px solid var(--mac9-border-outer);
    border-bottom: none;
    height: 28px;
    align-items: flex-end;
    position: relative;
}

menu[role="tablist"] > li,
.tab {
    font-family: var(--mac9-font-system);
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    height: 22px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 0 16px;
    margin: 0 -4px;
    border: none;
    background: transparent;
}

/* Draw tab shape using pseudo-elements for the borders */
menu[role="tablist"] > li::before,
.tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Inactive tab gradient */
    background: linear-gradient(to bottom, #CCCCCC 0%, #999999 100%);
    border: 1px solid var(--mac9-border-outer);
    border-bottom: none;
    /* Angled sides using skew transforms on left/right borders */
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);
    z-index: -1;
}

/* Tab text needs to be above the background */
menu[role="tablist"] > li,
.tab {
    z-index: 1;
}

menu[role="tablist"] > li:first-child,
.tab:first-child {
    margin-left: 0;
}

menu[role="tablist"] > li[aria-selected="true"],
.tab.active {
    height: 24px;
    line-height: 24px;
    z-index: 3;
    margin-bottom: -1px;
}

menu[role="tablist"] > li[aria-selected="true"]::before,
.tab.active::before {
    /* Active tab matches panel background */
    background: var(--mac9-surface);
    z-index: -1;
}

/* Tab panel */
[role="tabpanel"],
.tab-panel {
    background: var(--mac9-surface);
    border: 1px solid var(--mac9-border-outer);
    border-top: none;
    padding: 12px;
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-light),
        inset -1px -1px 0 var(--mac9-border-dark);
}

/* ============================================
   GROUP BOX (Alternative to fieldset)
   ============================================ */
.group-box {
    background: var(--mac9-surface);
    border: 1px solid var(--mac9-border-outer);
    padding: 12px;
    margin: 8px 0;
    box-shadow:
        inset 1px 1px 0 var(--mac9-border-light),
        inset -1px -1px 0 var(--mac9-border-dark);
}

.group-box-title {
    font-family: var(--mac9-font-system);
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* ============================================
   DESKTOP (optional - for full OS9 look)
   ============================================ */
.desktop {
    background: var(--mac9-desktop);
    min-height: 100vh;
}