/* ============================================================
   SSI Alloy Selector - restyled to "Cold Precision"
   Everything is scoped under .asel so nothing leaks into the site.
   Class names that clash with ssi.css were renamed in the tool:
   rail > as-rail, layout > as-layout, chip > as-chip, btn > as-btn,
   td.wrap > td.twrap.
   Loaded on /capability/alloy-selector only.
   ============================================================ */

.asel {
    /* the tool's own variable names, mapped to the site tokens */
    --bg: var(--ink-0);
    --surface: var(--ink-1);
    --ink: var(--text);
    --line: rgba(150, 190, 225, 0.14);
    --band: rgba(var(--ice-rgb), 0.035);
    --head: var(--ink-3);
    --head-ink: var(--frost);
    --accent: var(--ice);
    --accent-ink: var(--ink-0);
    --best: rgba(80, 180, 120, 0.18);
    --best-ink: #A7E3BD;
    --warn: rgba(230, 180, 60, 0.07);
    --warn-ink: #F3D48F;
    --focus: var(--ice);
    --c-zn: #9CCBE6;
    --c-al: #F0A35B;
    --c-mg: #6FD39C;
    --c-tp: #C79CF0;
    --c-th: #E6C04A;
    --c-el: #5FD3D3;
    --f-data: var(--f-mono);

    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink);
    padding-top: 40px;
    padding-bottom: 96px;
}

.asel .app { display: flex; flex-direction: column; gap: 20px; }
.asel h2 { font: 700 1.35rem/1.15 var(--f-display); color: var(--frost); letter-spacing: 0.01em; margin: 0 0 6px; }
.asel h3 { font: 600 1rem/1.2 var(--f-display); color: var(--frost); letter-spacing: 0.03em; margin: 0 0 4px; }
.asel .asel-sub { color: var(--muted); margin: 0; max-width: 78ch; font-size: 0.95rem; }

.asel .as-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .asel .as-layout { grid-template-columns: minmax(0, 1fr); } }

/* machined plates */
.asel .as-rail, .asel .panel {
    position: relative;
    min-width: 0;
    padding: 18px;
    background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
    border: 1px solid var(--line);
    border-radius: var(--r-plate);
    box-shadow: var(--edge), var(--shadow);
}
.asel .as-rail::before, .asel .panel::before {
    content: "";
    position: absolute;
    top: 8px; left: 8px;
    width: 10px; height: 10px;
    border: solid var(--line-2);
    border-width: 1px 0 0 1px;
    pointer-events: none;
}
.asel .as-rail { display: flex; flex-direction: column; gap: 16px; }
.asel .rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

.asel .label {
    font: 500 0.7rem/1.3 var(--f-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
}
.asel .rail-head .label::before { content: "// "; color: var(--steel); }

.asel .link-btn {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    color: var(--accent); font: inherit; font-size: 0.85rem;
    text-decoration: underline; text-decoration-color: rgba(var(--ice-rgb), 0.35); text-underline-offset: 3px;
}
.asel .link-btn:hover { color: var(--frost); text-decoration-color: currentColor; }

/* units toggle */
.asel .units { display: flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; padding: 3px; gap: 3px; }
.asel .units button {
    flex: 1; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
    font: 600 0.78rem/1.2 var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 10px;
}
.asel .units button[aria-pressed="true"] { background: rgba(var(--ice-rgb), 0.14); color: var(--frost); box-shadow: inset 0 0 0 1px rgba(var(--ice-rgb), 0.35); }

/* chips */
.asel .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.asel .as-chip {
    border: 1px solid var(--line-2); background: rgba(var(--ice-rgb), 0.03); color: var(--text);
    border-radius: var(--r-chip); padding: 6px 11px; cursor: pointer;
    font: 500 0.72rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.asel .as-chip:hover { border-color: rgba(var(--ice-rgb), 0.5); color: var(--frost); }
.asel .as-chip[aria-pressed="true"] { background: rgba(var(--ice-rgb), 0.14); color: var(--frost); border-color: rgba(var(--ice-rgb), 0.55); }

/* inputs */
.asel select, .asel input[type="text"], .asel input[type="number"], .asel input[type="email"], .asel textarea {
    width: 100%; font: inherit; font-size: 0.875rem; color: var(--frost);
    background: var(--ink-0); border: 1px solid var(--line-2); border-radius: var(--r-input); padding: 8px 10px;
}
.asel select { color-scheme: dark; }
.asel textarea { min-height: 80px; resize: vertical; }
.asel input::placeholder, .asel textarea::placeholder { color: var(--dim); }
.asel input[type="checkbox"] { accent-color: var(--ice); width: 16px; height: 16px; }
.asel :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.asel .slider { display: flex; flex-direction: column; gap: 4px; }
.asel .slider-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--text); }
.asel .slider-top output { font-family: var(--f-mono); font-size: 0.75rem; color: var(--accent); white-space: nowrap; }
.asel input[type="range"] { width: 100%; accent-color: var(--ice); }

.asel .count { font: 500 0.78rem/1.4 var(--f-mono); color: var(--accent); letter-spacing: 0.04em; }

/* tabs */
.asel .tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line-2); margin: -4px 0 16px; scrollbar-width: thin; }
.asel .tab {
    position: relative; background: transparent; border: 0; color: var(--muted); cursor: pointer; white-space: nowrap;
    font: 600 0.8rem/1.2 var(--f-display); letter-spacing: 0.07em; text-transform: uppercase; padding: 12px 11px;
}
.asel .tab:hover { color: var(--frost); }
.asel .tab[aria-selected="true"] { color: var(--frost); }
.asel .tab[aria-selected="true"]::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
    background: var(--ice); box-shadow: 0 0 10px rgba(var(--ice-rgb), 0.6);
}

/* tables */
.asel .scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--ink-0); }
.asel table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.asel th, .asel td { padding: 9px 11px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.asel th {
    background: var(--head); color: var(--head-ink); position: sticky; top: 0;
    font: 600 0.74rem/1.25 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase;
}
.asel th small { display: block; font: 400 0.68rem/1.3 var(--f-mono); letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.asel th:first-child, .asel td:first-child { text-align: left; }
.asel td.l, .asel th.l { text-align: left; }
.asel td { font-family: var(--f-mono); color: var(--text); }
.asel td.name, .asel td.l { font-family: var(--f-body); }
.asel td.name { color: var(--frost); text-align: left; }
.asel tbody tr:nth-child(even) { background: var(--band); }
.asel tbody tr:hover { background: rgba(var(--ice-rgb), 0.06); }
.asel th button { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.asel th button:hover { color: var(--ice); }
.asel td.twrap { white-space: normal; min-width: 200px; max-width: 420px; font-size: 0.78rem; }

.asel .src { font: 400 0.7rem/1.4 var(--f-mono); color: var(--muted); }
.asel .src a, .asel .fid a, .asel a[data-src] { color: var(--accent); text-decoration: none; }
.asel a[data-src]:hover { color: var(--frost); }
.asel .fid { font: 500 0.7rem/1 var(--f-mono); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 5px; color: var(--accent); text-decoration: none; }

/* NADCA ratings, 1 most desirable to 5 least */
.asel .rt { display: inline-block; min-width: 26px; text-align: center; border-radius: 4px; padding: 2px 6px; font-family: var(--f-mono); font-weight: 500; }
.asel .r1 { background: #1D6E41; color: #E9FFF1; }
.asel .r2 { background: #4F8A3A; color: #F2FFE9; }
.asel .r3 { background: #C9A227; color: #1E1700; }
.asel .r4 { background: #C4682C; color: #FFF3EA; }
.asel .r5 { background: #A3302A; color: #FFEDEB; }

.asel .note { color: var(--muted); font-size: 0.8rem; margin: 12px 0 0; max-width: 110ch; }
.asel .warn { background: var(--warn); color: var(--warn-ink); border: 1px solid rgba(230, 180, 60, 0.25); border-radius: var(--r-card); padding: 11px 13px; font-size: 0.82rem; }
.asel .cite { font-size: 0.76rem; color: var(--muted); margin-top: 8px; }
.asel .cite strong { color: var(--text); }
.asel .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.asel .as-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px;
    border-radius: 999px; border: 1px solid var(--line-2); background: rgba(var(--ice-rgb), 0.04); color: var(--frost);
    font: 600 0.95rem/1.2 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.asel .as-btn:hover { border-color: rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.08); }
.asel .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.asel .bar { height: 6px; background: var(--line); border-radius: 3px; min-width: 90px; overflow: hidden; }
.asel .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--steel), var(--ice)); border-radius: 3px; }
.asel .formula { border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; margin-bottom: 12px; background: var(--ink-1); }
.asel .formula code { font: 400 0.78rem/1.55 var(--f-mono); color: var(--text); display: block; margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.asel .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 0.82rem; }
.asel .kv dt { color: var(--muted); }
.asel .kv dd { margin: 0; font-family: var(--f-mono); color: var(--text); }
.asel label.f { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--text); }
.asel svg text { font-family: var(--f-mono); fill: var(--muted); }
.asel pre { color: var(--text); }
.asel details summary { padding: 4px 0; color: var(--frost); }
/* !important: #polyrail carries an inline display:flex, which otherwise beats .hide */
.asel .hide { display: none !important; }

.asel .toast {
    position: fixed; z-index: 90; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--ink-3); color: var(--frost); border: 1px solid var(--line-2); border-radius: 999px;
    padding: 8px 16px; font: 500 0.78rem/1.3 var(--f-mono); box-shadow: var(--shadow);
}
.asel .toast.hide { display: none; }

@media (max-width: 560px) {
    .asel .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .asel .kv dd { margin-bottom: 8px; }
    .asel .as-rail, .asel .panel { padding: 14px; }
}
.asel .note + .grid2 { margin-top: 12px; }