/**
 * AstroUtah Tools — Stylesheet
 *
 * Uses ONLY the canonical --astroutah-* design tokens defined in
 * foundation.css.  No invented variables, no hardcoded hex colours.
 *
 * @package AstroUtah_Tools
 * @since   1.0.1
 */

/* ============================================================================
   OUTER CONTAINER
   ============================================================================ */

.au-tools-container {
    max-width:   1200px;
    margin:      0 auto;
    padding:     20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color:       var(--astroutah-text-primary);
    background:  var(--astroutah-bg-primary);
}

/* ============================================================================
   TAB CONTENT
   ============================================================================ */

.au-tools-content .tab-content        { display: none; }
.au-tools-content .tab-content.active { display: block; }

/* ============================================================================
   RIG SELECTOR
   ============================================================================ */

.au-tools-rig-selector {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}

.au-select {
    background: var(--astroutah-bg-input);
    color: var(--astroutah-text-primary);
    border: 1px solid var(--astroutah-border-light);
    border-radius: var(--astroutah-radius-md);
    padding: 8px 12px;
    font-size: 0.9rem;
    min-width: 220px;
    cursor: pointer;
    transition: border-color var(--astroutah-transition);
}
.au-select:focus { outline: none; border-color: var(--astroutah-border-focus); }
.au-select option { background: var(--astroutah-bg-tertiary); color: var(--astroutah-text-primary); }

.au-tools-loading {
    display: flex; align-items: center; gap: 8px;
    color: var(--astroutah-text-secondary); font-size: 0.85rem;
}

.au-tools-notice {
    padding: 10px 14px; border-radius: var(--astroutah-radius-md); font-size: 0.875rem;
    background: var(--astroutah-bg-tertiary); border: 1px solid var(--astroutah-border-subtle);
    color: var(--astroutah-text-secondary); margin-top: 10px;
}
.au-tools-notice--warn {
    background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35);
    color: var(--astroutah-accent-gold);
}

/* ============================================================================
   OPTICS GRID
   ============================================================================ */

.au-tools-optics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px; margin-top: 16px;
}

.au-optic-card {
    background: var(--astroutah-bg-card);
    border: 1px solid var(--astroutah-border-subtle);
    border-radius: var(--astroutah-radius-lg);
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
    transition: border-color var(--astroutah-transition), transform 0.15s;
}
.au-optic-card:hover { border-color: var(--astroutah-accent-blue-strong); transform: translateY(-1px); }
.au-optic-card--wide { grid-column: span 2; }
.au-optic-card--inactive { opacity: 0.4; pointer-events: none; }

.au-optic-icon   { font-size: 1.4rem; color: var(--astroutah-accent-blue); font-weight: 700; line-height: 1; }
.au-optic-label  { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--astroutah-text-secondary); }
.au-optic-value  { font-size: 1.55rem; font-weight: 700; color: var(--astroutah-text-heading); line-height: 1.1; font-variant-numeric: tabular-nums; }
.au-optic-value--empty { font-size: 0.9rem; color: var(--astroutah-text-subtle); font-weight: 400; font-style: italic; }
.au-optic-unit   { font-size: 0.75rem; color: var(--astroutah-text-muted); }

.au-optic-tooltip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
    width: 240px; background: var(--astroutah-bg-modal);
    border: 1px solid var(--astroutah-accent-blue-strong);
    border-radius: var(--astroutah-radius-md);
    padding: 10px 12px; font-size: 0.78rem; color: var(--astroutah-text-secondary);
    line-height: 1.5; z-index: 100; pointer-events: none;
    box-shadow: var(--astroutah-shadow-md);
}
.au-optic-card:hover .au-optic-tooltip { display: block; }

/* ============================================================================
   DUST ANALYZER
   ============================================================================ */

.au-tools-frame-toggle  { display: flex; gap: 20px; margin-top: 8px; flex-wrap: wrap; }
.au-toggle-label        { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.9rem; color: var(--astroutah-text-primary); user-select: none; }
.au-toggle-hint         { font-size: 0.75rem; color: var(--astroutah-text-secondary); margin-left: 2px; }

.au-dust-dropzone {
    margin-top: 16px;
    border: 2px dashed var(--astroutah-border-light);
    border-radius: var(--astroutah-radius-lg);
    padding: 40px 20px; text-align: center; cursor: pointer;
    transition: border-color var(--astroutah-transition), background var(--astroutah-transition);
}
.au-dust-dropzone:hover,
.au-dust-dropzone.au-drop-hover {
    border-color: var(--astroutah-accent-blue-strong);
    background: rgba(59,130,246,0.06);
}
.au-dust-upload-icon  { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--astroutah-text-secondary); display: block; }
.au-dust-dropzone p   { color: var(--astroutah-text-secondary); margin: 4px 0; font-size: 0.9rem; }
.au-dust-hint         { font-size: 0.78rem !important; opacity: 0.7; }
.au-link              { color: var(--astroutah-text-link); cursor: pointer; text-decoration: underline; }

.au-dust-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.au-dust-toolbar-left  { display: flex; align-items: center; gap: 12px; }
.au-dust-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.au-dust-filename { font-weight: 600; font-size: 0.9rem; color: var(--astroutah-text-primary); }
.au-dust-dims     { font-size: 0.8rem; color: var(--astroutah-text-secondary); }

.au-dust-canvas-wrap {
    position: relative; display: inline-block; max-width: 100%; overflow: hidden;
    border-radius: var(--astroutah-radius-md); border: 1px solid var(--astroutah-border-subtle);
}
.au-dust-canvas  { display: block; max-width: 100%; }
.au-dust-overlay { position: absolute; top: 0; left: 0; pointer-events: none; }

.au-dust-results-header { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 10px; }
.au-dust-results-header h3 { margin: 0; font-size: 1rem; color: var(--astroutah-text-primary); }

.au-table-wrap { overflow-x: auto; border-radius: var(--astroutah-radius-md); border: 1px solid var(--astroutah-border-subtle); }
.au-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.au-table th {
    background: var(--astroutah-bg-tertiary); color: var(--astroutah-text-secondary);
    padding: 10px 12px; text-align: left; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.73rem;
    border-bottom: 1px solid var(--astroutah-border-subtle);
}
.au-table td { padding: 9px 12px; border-bottom: 1px solid var(--astroutah-border-dark); color: var(--astroutah-text-primary); vertical-align: middle; }
.au-table tbody tr:last-child td { border-bottom: none; }
.au-table tbody tr:hover td { background: var(--astroutah-bg-card-hover); }

.au-severity-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.au-severity-high   { background: rgba(239,68,68,0.18);  color: var(--astroutah-error); }
.au-severity-medium { background: rgba(245,158,11,0.18); color: var(--astroutah-warning); }
.au-severity-low    { background: rgba(96,165,250,0.18); color: var(--astroutah-accent-blue); }
.au-severity-none   { background: rgba(75,85,99,0.20);   color: var(--astroutah-text-muted); }
.au-dust-rec { font-size: 0.8rem; color: var(--astroutah-text-secondary); }

/* ============================================================================
   BUTTONS
   ============================================================================ */

.au-btn {
    padding: 8px 16px; border-radius: var(--astroutah-radius-md);
    font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer;
    transition: background var(--astroutah-transition), opacity var(--astroutah-transition);
    white-space: nowrap; font-family: inherit;
}
.au-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.au-btn-primary  { background: var(--astroutah-accent-blue-strong); color: var(--astroutah-text-heading); }
.au-btn-primary:hover:not(:disabled) { background: var(--astroutah-accent-blue-dark); }
.au-btn-ghost {
    background: transparent; color: var(--astroutah-text-secondary);
    border: 1px solid var(--astroutah-border-light);
}
.au-btn-ghost:hover:not(:disabled) { background: var(--astroutah-bg-hover); color: var(--astroutah-text-primary); }
.au-btn-sm { padding: 5px 11px; font-size: 0.8rem; }

/* ============================================================================
   INPUTS
   ============================================================================ */

.au-input {
    background: var(--astroutah-bg-input); color: var(--astroutah-text-primary);
    border: 1px solid var(--astroutah-border-light);
    border-radius: var(--astroutah-radius-md);
    padding: 8px 12px; font-size: 0.9rem; font-family: inherit;
    transition: border-color var(--astroutah-transition);
}
.au-input::placeholder { color: var(--astroutah-text-placeholder); }
.au-input:focus { outline: none; border-color: var(--astroutah-border-focus); }
.au-input-lg { font-size: 1.1rem; width: 130px; }

/* ============================================================================
   UNIT CONVERTER
   ============================================================================ */

.au-converter { margin-top: 12px; }
.au-converter-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.au-converter-arrow { color: var(--astroutah-text-secondary); font-size: 1.2rem; }

.au-converter-result { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.au-converter-result-value { font-size: 2rem; font-weight: 800; color: var(--astroutah-accent-blue); font-variant-numeric: tabular-nums; }
.au-converter-result-label { font-size: 1rem; color: var(--astroutah-text-secondary); }
.au-converter-context      { margin-top: 6px; font-size: 0.85rem; color: var(--astroutah-text-secondary); font-style: italic; }

.au-converter-all { margin-top: 20px; border: 1px solid var(--astroutah-border-subtle); border-radius: var(--astroutah-radius-md); overflow: hidden; }
.au-converter-all-title {
    margin: 0; padding: 10px 14px; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--astroutah-text-secondary); background: var(--astroutah-bg-tertiary);
    border-bottom: 1px solid var(--astroutah-border-subtle);
}
.au-converter-all-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 14px;
}

/* Unit cards — same visual language as Physical Constants cards */
.au-unit-card {
    background:    var(--astroutah-bg-card);
    border:        1px solid var(--astroutah-border-subtle);
    border-radius: var(--astroutah-radius-md);
    padding:       12px 14px;
    transition:    border-color var(--astroutah-transition);
}
.au-unit-card:hover {
    border-color: var(--astroutah-accent-blue-strong);
}
.au-unit-card--active {
    border-color: var(--astroutah-accent-blue-strong);
    background:   var(--astroutah-bg-selected);
}
.au-unit-card-name {
    font-size:     0.75rem;
    color:         var(--astroutah-text-secondary);
    margin-bottom: 2px;
}
.au-unit-card-sym {
    font-size:     0.85rem;
    font-style:    italic;
    color:         var(--astroutah-text-secondary);
    margin-bottom: 6px;
    font-family:   'Georgia', serif;
}
.au-unit-card-value {
    font-size:             1.0rem;
    font-weight:           700;
    color:                 var(--astroutah-text-primary);
    font-variant-numeric:  tabular-nums;
    word-break:            break-all;
}
.au-unit-card--active .au-unit-card-name,
.au-unit-card--active .au-unit-card-sym {
    color: rgba(255,255,255,0.7);
}
.au-unit-card--active .au-unit-card-value {
    color: var(--astroutah-text-heading);
}

/* ============================================================================
   PHYSICAL CONSTANTS
   ============================================================================ */

.au-constants-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 14px; }
.au-constants-filter-row .au-input { flex: 1; min-width: 160px; }
.au-constants-category-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.au-cat-btn {
    padding: 5px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600;
    border: 1px solid var(--astroutah-border-light); background: transparent;
    color: var(--astroutah-text-secondary); cursor: pointer;
    transition: all var(--astroutah-transition); font-family: inherit;
}
.au-cat-btn:hover { border-color: var(--astroutah-accent-blue-strong); color: var(--astroutah-text-primary); }
.au-cat-btn.active { background: var(--astroutah-accent-blue-strong); border-color: var(--astroutah-accent-blue-strong); color: var(--astroutah-text-heading); }

.au-constants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.au-constant-card { background: var(--astroutah-bg-card); border: 1px solid var(--astroutah-border-subtle); border-radius: var(--astroutah-radius-md); padding: 12px 14px; transition: border-color var(--astroutah-transition); }
.au-constant-card:hover { border-color: var(--astroutah-accent-blue-strong); }
.au-constant-name   { font-size: 0.78rem; color: var(--astroutah-text-secondary); margin-bottom: 4px; }
.au-constant-symbol { font-size: 0.95rem; font-style: italic; color: var(--astroutah-text-secondary); margin-bottom: 6px; font-family: 'Georgia', serif; }
.au-constant-value-btn {
    background: transparent; border: none; padding: 0; cursor: pointer;
    text-align: left; display: block; width: 100%; font-size: 1.0rem;
    font-weight: 700; color: var(--astroutah-text-primary);
    font-variant-numeric: tabular-nums; font-family: inherit;
}
.au-constant-unit { font-size: 0.72rem; color: var(--astroutah-text-muted); display: block; margin-top: 2px; transition: color var(--astroutah-transition); }
.au-constant-value-btn:hover .au-constant-unit { color: var(--astroutah-accent-blue); }

.au-copy-toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--astroutah-accent-blue-strong); color: var(--astroutah-text-heading);
    padding: 10px 18px; border-radius: var(--astroutah-radius-md);
    font-size: 0.9rem; font-weight: 600; z-index: 9999; box-shadow: var(--astroutah-shadow-lg);
}

/* ============================================================================
   LABELS / FORM HELPERS
   ============================================================================ */

.au-label { font-size: 0.78rem; color: var(--astroutah-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.au-label-inline { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--astroutah-text-primary); }
.au-range { -webkit-appearance: none; appearance: none; height: 4px; background: var(--astroutah-border-light); border-radius: 2px; outline: none; width: 80px; }
.au-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--astroutah-accent-blue-strong); cursor: pointer; }
.au-checkbox-label { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.85rem; color: var(--astroutah-text-primary); user-select: none; }

/* ============================================================================
   STAR CHART
   ============================================================================ */

.au-starchart-controls { padding-bottom: 0; }
.au-starchart-controls-inner { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.au-starchart-site-wrap, .au-sc-coord-field { display: flex; flex-direction: column; gap: 4px; }
.au-starchart-latlon { display: flex; gap: 10px; flex-wrap: wrap; }
.au-starchart-options { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.au-sc-mag-wrap { gap: 8px; }
.au-starchart-section { padding-top: 12px; }

/* Outer — position:relative so the tooltip can be fixed to viewport */
.au-starchart-outer {
    position: relative;
    display:  block;
    width:    100%;
}

/* The circular wrap — fills section width, up to 900 px */
.au-starchart-wrap {
    display:       block;
    width:         100%;
    max-width:     900px;
    aspect-ratio:  1 / 1;
    border-radius: 50%;
    overflow:      hidden;
    cursor:        grab;
    box-shadow:    0 0 40px rgba(0,0,40,0.8), 0 0 4px rgba(59,130,246,0.3);
    margin:        0 auto;
}
.au-starchart-wrap:active { cursor: grabbing; }
.au-starchart-canvas      { display: block; width: 100%; height: 100%; }

.au-starchart-tooltip {
    position:       fixed;           /* viewport-relative — never clipped */
    background:     var(--astroutah-bg-modal);
    border:         1px solid var(--astroutah-accent-blue-strong);
    border-radius:  var(--astroutah-radius-md);
    padding:        8px 14px;
    font-size:      0.85rem;
    color:          var(--astroutah-text-primary);
    pointer-events: none;
    z-index:        9999;
    white-space:    nowrap;
    line-height:    1.7;
    box-shadow:     var(--astroutah-shadow-lg);
    min-width:      160px;
}
.au-starchart-hint { margin: 10px 0 6px; font-size: 0.78rem; color: var(--astroutah-text-muted); }
.au-starchart-info-bar { display: flex; gap: 18px; font-size: 0.8rem; color: var(--astroutah-text-secondary); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* ── Planisphere date/time/animate bar ─────────────────────────────────────── */
.au-sc-datetime-bar {
    display:     flex;
    align-items: flex-end;
    gap:         16px;
    flex-wrap:   wrap;
    padding-top: 0;
}
.au-sc-dt-group {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}
.au-sc-dt-group--time { flex: 1; min-width: 180px; }
.au-sc-dt-group--now  { margin-left: auto; }
.au-sc-dt-row {
    display:     flex;
    align-items: center;
    gap:         6px;
}
.au-sc-date-input {
    width:       140px;
    font-size:   0.88rem;
    padding:     5px 8px;
}
.au-sc-time-range {
    width:      100%;
    cursor:     pointer;
}
.au-sc-speed-select {
    font-size:  0.82rem;
    padding:    5px 8px;
    min-width:  140px;
}
/* Keep the day step buttons narrow */
.au-sc-day-btn { padding: 5px 9px; font-size: 0.8rem; }


/* ============================================================================
   SPINNER
   ============================================================================ */

.au-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(59,130,246,0.25);
    border-top-color: var(--astroutah-accent-blue-strong);
    border-radius: 50%; animation: au-spin 0.7s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 600px) {
    .au-tools-optics-grid { grid-template-columns: 1fr 1fr; }
    .au-optic-card--wide  { grid-column: span 2; }
    .au-converter-input-row { flex-direction: column; align-items: stretch; }
    .au-converter-arrow  { transform: rotate(90deg); margin: 0 auto; }
    .au-input-lg         { width: 100%; }
    .au-constants-grid   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
    .au-tools-optics-grid,
    .au-optic-card--wide  { grid-column: span 1; grid-template-columns: 1fr; }
}

/* ============================================================================
   SECTION HEADINGS — replicate settings.css rules that aren't loaded here
   ============================================================================ */

.au-tools-container .settings-section h2,
.au-tools-container .section-title {
    font-size:   24px;
    font-weight: 700;
    color:       var(--astroutah-text-heading) !important;
    margin:      0 0 8px 0;
}

.au-tools-container .section-description {
    color:       var(--astroutah-text-secondary);
    font-size:   14px;
    margin:      0 0 24px 0;
    line-height: 1.6;
}

.au-tools-container .section-header {
    margin-bottom: 4px;
}

.au-tools-container .settings-content {
    background:    var(--astroutah-bg-modal);
    border-radius: 12px;
    border:        1px solid var(--astroutah-border-light);
    min-height:    500px;
}

.au-tools-container .tab-content {
    padding: 30px;
}

.au-tools-container .settings-section {
    margin-bottom: 40px;
}

.au-tools-container .settings-header h1 {
    font-size:   32px;
    font-weight: 700;
    color:       var(--astroutah-text-heading);
    margin:      0;
}

.au-tools-container .settings-header {
    margin-bottom:  30px;
    padding-bottom: 20px;
    border-bottom:  2px solid var(--astroutah-border-light);
}

.au-tools-container .settings-tabs {
    margin-bottom: 30px;
}

.au-tools-container .tab-btn {
    background:    var(--astroutah-bg-modal);
    border:        2px solid var(--astroutah-border-light);
    color:         var(--astroutah-text-secondary);
    border-radius: 10px;
    padding:       12px 20px;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.2s;
    white-space:   nowrap;
    font-family:   inherit;
}

.au-tools-container .tab-btn:hover {
    background:   var(--astroutah-bg-hover);
    border-color: var(--astroutah-text-tertiary);
    color:        var(--astroutah-text-primary);
}

.au-tools-container .tab-btn.active {
    background:   var(--astroutah-accent-blue-strong);
    border-color: var(--astroutah-accent-blue-strong);
    color:        var(--astroutah-text-heading);
}

/* ============================================================================
   WORDPRESS THEME OVERRIDE — force heading and body colours inside the
   Tools container regardless of whatever the active theme sets on h1/h2/p.
   Scoped tightly so nothing outside .au-tools-container is affected.
   ============================================================================ */

.au-tools-container,
.au-tools-container * {
    box-sizing: border-box;
}

/* Page title */
.au-tools-container h1,
.au-tools-container .settings-header h1 {
    color:       var(--astroutah-text-heading) !important;
    font-size:   32px !important;
    font-weight: 700 !important;
    margin:      0 !important;
}

/* Section headings */
.au-tools-container h2,
.au-tools-container .section-title,
.au-tools-container .settings-section h2 {
    color:       var(--astroutah-text-heading) !important;
    font-size:   24px !important;
    font-weight: 700 !important;
    margin:      0 0 8px 0 !important;
}

/* Body / description text */
.au-tools-container p,
.au-tools-container .section-description {
    color:       var(--astroutah-text-secondary);
    font-size:   14px;
    line-height: 1.6;
}

/* Anchor colour — keep in-tool links blue, not theme default */
.au-tools-container a {
    color: var(--astroutah-text-link);
}

/* Ensure the tab bar itself sits on the dark background */
.au-tools-container .settings-tabs {
    background: transparent;
}

/* Inner content card */
.au-tools-container .settings-content {
    background:    var(--astroutah-bg-modal) !important;
    border-radius: 12px !important;
    border:        1px solid var(--astroutah-border-light) !important;
}

/* Section padding inside the card */
.au-tools-container .tab-content {
    padding: 30px !important;
}

/* ============================================================================
   SELECT DROPDOWN — force dark background on native option list.
   Without this, macOS/Windows renders options with the system light theme
   when the page background is dark.
   ============================================================================ */

.au-tools-container select,
.au-tools-container select option,
.au-tools-container .au-select,
.au-tools-container .au-select option {
    background-color: var(--astroutah-bg-tertiary) !important;
    color:            var(--astroutah-text-primary) !important;
}

.au-tools-container select option:checked,
.au-tools-container .au-select option:checked,
.au-tools-container select option:hover,
.au-tools-container .au-select option:hover {
    background-color: var(--astroutah-accent-blue-strong) !important;
    color:            var(--astroutah-text-heading) !important;
}

/* Also fix the closed (collapsed) select element itself */
.au-tools-container select,
.au-tools-container .au-select {
    background-color: var(--astroutah-bg-input) !important;
    color:            var(--astroutah-text-primary) !important;
    border:           1px solid var(--astroutah-border-light) !important;
}

/* ============================================================================
   AU-CUSTOM-SELECT — cross-platform dark dropdown
   Replaces native <select> so macOS renders correctly.
   ============================================================================ */

.au-custom-select {
    position:   relative;
    display:    inline-block;
    min-width:  220px;
    font-size:  0.9rem;
    font-family: inherit;
    user-select: none;
}

/* The visible trigger button */
.au-csel-display {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         8px 12px;
    background:      var(--astroutah-bg-input);
    color:           var(--astroutah-text-primary);
    border:          1px solid var(--astroutah-border-light);
    border-radius:   var(--astroutah-radius-md);
    cursor:          pointer;
    text-align:      left;
    font-size:       inherit;
    font-family:     inherit;
    gap:             8px;
    transition:      border-color var(--astroutah-transition);
    white-space:     nowrap;
    overflow:        hidden;
}

.au-csel-display:hover,
.au-custom-select--open .au-csel-display {
    border-color: var(--astroutah-border-focus);
}

.au-csel-label {
    flex:        1;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.au-csel-chevron {
    flex-shrink:  0;
    width:        16px;
    height:       16px;
    color:        var(--astroutah-text-secondary);
    transition:   transform 0.18s ease;
}

.au-custom-select--open .au-csel-chevron {
    transform: rotate(180deg);
}

/* The dropdown list */
.au-csel-list {
    display:       none;
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    min-width:     100%;
    max-height:    260px;
    overflow-y:    auto;
    background:    var(--astroutah-bg-tertiary);
    border:        1px solid var(--astroutah-border-light);
    border-radius: var(--astroutah-radius-md);
    box-shadow:    var(--astroutah-shadow-lg);
    z-index:       9999;
    margin:        0;
    padding:       4px 0;
    list-style:    none;
}

.au-custom-select--open .au-csel-list {
    display: block;
}

/* Individual options */
.au-csel-option {
    padding:    9px 14px;
    cursor:     pointer;
    color:      var(--astroutah-text-primary);
    font-size:  0.875rem;
    transition: background var(--astroutah-transition);
    white-space: nowrap;
}

.au-csel-option:hover {
    background: var(--astroutah-bg-hover);
    color:      var(--astroutah-text-primary);
}

.au-csel-option--selected {
    background: var(--astroutah-bg-selected);
    color:      var(--astroutah-text-heading);
    font-weight: 600;
}

.au-csel-option--selected:hover {
    background: var(--astroutah-accent-blue-dark);
}

/* Option group headers */
.au-csel-group {
    padding:        6px 14px 4px;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--astroutah-text-muted);
    cursor:         default;
    border-top:     1px solid var(--astroutah-border-dark);
    margin-top:     4px;
}

.au-csel-group:first-child {
    border-top: none;
    margin-top: 0;
}

/* Scrollbar styling for the dropdown list */
.au-csel-list::-webkit-scrollbar       { width: 6px; }
.au-csel-list::-webkit-scrollbar-track { background: var(--astroutah-bg-secondary); }
.au-csel-list::-webkit-scrollbar-thumb {
    background:    var(--astroutah-border-medium);
    border-radius: 3px;
}

/* Remove old native select overrides — no longer needed */
.au-tools-container select,
.au-tools-container select option,
.au-tools-container .au-select,
.au-tools-container .au-select option {
    /* Reset — the real select is now hidden, custom UI handles styling */
}

/* "Convert from" card — amber left-border accent, subtler than the active blue */
.au-unit-card--from {
    border-left:  3px solid var(--astroutah-accent-gold);
    padding-left: 11px; /* compensate for the extra border pixel */
}
.au-unit-card--from .au-unit-card-value {
    color: var(--astroutah-accent-gold);
}

/* ── Converter selector color cues ─────────────────────────────────────────
   Match the card visual language: gold left-border = "from", blue = "to".
   Applied to the custom dropdown wrapper so both the trigger button and the
   open list inherit the context.
   ──────────────────────────────────────────────────────────────────────── */

/* "From" selector — gold left border */
.au-custom-select--from .au-csel-display {
    border-left:  3px solid var(--astroutah-accent-gold) !important;
    padding-left: 10px;
}

/* "To" selector — blue left border matching the active card */
.au-custom-select--to .au-csel-display {
    border-left:  3px solid var(--astroutah-accent-blue-strong) !important;
    padding-left: 10px;
}

/* Small label above each selector to make the role explicit */
.au-converter-select-wrap {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.au-converter-select-label {
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.au-converter-select-label--from {
    color: var(--astroutah-accent-gold);
}

.au-converter-select-label--to {
    color: var(--astroutah-accent-blue);
}


/* Pan mode toggle button — active state */
.au-btn-pan-active {
    background:   var(--astroutah-accent-gold) !important;
    border-color: var(--astroutah-accent-gold) !important;
    color:        #000 !important;
}
/* ============================================================================
   BMAC SUPPORT CARD — shared component (mirrors settings.css .premium-cta)
   Defined here because tools.css is the stylesheet loaded on the tools page;
   settings.css is not available on this page.
   ============================================================================ */

.premium-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--astroutah-bg-selected) 0%, var(--astroutah-accent-blue-strong) 100%);
    border-radius: 12px;
    margin-top: 24px;
    border: 1px solid var(--astroutah-accent-blue);
}

.cta-content {
    flex: 1;
}

.cta-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--astroutah-text-heading);
    margin: 0 0 6px 0;
}

.cta-content p {
    color: var(--astroutah-text-primary);
    margin: 0 0 14px 0;
    font-size: 14px;
}

.buymeacoffee-btn-small {
    display: inline-block;
    padding: 10px 20px;
    background: var(--astroutah-accent-gold);
    color: var(--astroutah-bg-selected);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s, opacity 0.2s;
}

.buymeacoffee-btn-small:hover {
    transform: scale(1.04);
    opacity: 0.92;
    color: var(--astroutah-bg-selected);
}

@media (max-width: 600px) {
    .premium-cta { flex-direction: column; align-items: flex-start; }
}