/* Salvage Simulator (www.acdreamweave.com/tools/salvage). Every selector lives under .ss-app so
   nothing here can reach the site chrome, and every tool-local colour is a --ss-* property defined
   from the site tokens in market.css, so the tool follows the site's dark theme. */

/* The three-column layout needs more room than the 960px tools column. */
.tools-body main:has(.ss-app) { max-width: 1440px; }

.ss-app {
    --ss-ink: var(--text);
    --ss-ink-soft: var(--text-2);
    --ss-accent: var(--gold);
    --ss-accent-border: var(--gold-border);
    --ss-accent-tint: var(--gold-tint-2);
    --ss-panel: var(--panel);
    --ss-panel-deep: var(--appraisal-fill);
    --ss-input: var(--input);
    --ss-input-border: var(--input-border);
    --ss-rule: var(--hairline);
    --ss-rule-soft: var(--rule);
    --ss-muted: var(--muted);
    --ss-good: var(--ok);
    --ss-bad: var(--err);
    --ss-lock: var(--warn);
    --ss-serif: var(--head);
    --ss-sans: var(--body);
    --ss-num: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --ss-gap: 20px;
    --ss-header: var(--site-header-h);

    color-scheme: dark;
    color: var(--ss-ink);
    font: 15px/1.55 var(--ss-sans);
}

.ss-app, .ss-app * { box-sizing: border-box; }

.ss-app a { color: var(--ss-accent); }
.ss-app a:hover { color: var(--ss-accent); filter: brightness(1.2); }

.tool-page > .ss-links {
    margin: 0 0 14px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
}

/* ------------------------------------------------------------------ banner */
.ss-app .banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--ss-bad);
    background: rgba(217, 122, 106, 0.12);
    color: var(--ss-bad);
    font-size: 13px;
    border-radius: 3px;
}
.ss-app .banner[hidden] { display: none; }

/* ------------------------------------------------------------------ layout */
.ss-app .shell {
    display: grid;
    grid-template-columns: 274px minmax(0, 1fr) 344px;
    gap: var(--ss-gap);
    align-items: start;
}

/* min-width:0 everywhere a flex or grid child holds long text: the default
   min-content floor is what makes a layout scroll sideways on a phone. */
.ss-app .panel {
    background: var(--ss-panel);
    border: 1px solid var(--ss-rule);
    border-radius: 3px;
    min-width: 0;
    margin-bottom: var(--ss-gap);
}
.ss-app .panel:last-child { margin-bottom: 0; }
.ss-app .banner, .ss-app .logline, .ss-app .note { overflow-wrap: break-word; }
.ss-app .panel > h2 {
    margin: 0;
    padding: 11px 14px 9px;
    font: 600 17px/1.2 var(--ss-serif);
    color: var(--ss-ink);
    border-bottom: 2px solid var(--ss-accent-border);
    letter-spacing: .01em;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.ss-app .panel > h2 .sub {
    font: 11px/1.4 var(--ss-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ss-muted);
}
.ss-app .panel-body { padding: 14px; }
/* The site header is sticky at every width (market.css .site-header), so the sticky column parks
   below it. --ss-header is market.css's --site-header-h; the column is static at 780px
   and below (media query at the end), where it no longer sticks at all. */
.ss-app .col-setup { position: sticky; top: calc(var(--ss-header) + var(--ss-gap)); }

.ss-app .ss-h3 {
    margin: 18px 0 8px;
    font: 600 15px var(--ss-serif);
    color: var(--ss-ink);
}
.ss-app .ss-h3.ss-h3-first { margin-top: 0; }

/* ------------------------------------------------------------------ fields */
.ss-app .ss-field { margin-bottom: 14px; }
.ss-app .ss-field:last-child { margin-bottom: 0; }
.ss-app .ss-field > label, .ss-app .ss-field > .field-label {
    display: block;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ss-muted);
    margin-bottom: 5px;
}
.ss-app .ss-field input[type="number"],
.ss-app .ss-field input[type="text"],
.ss-app .ss-field select {
    width: 100%;
    padding: 6px 8px;
    font: 14px/1.3 var(--ss-sans);
    color: var(--ss-ink);
    background: var(--ss-input);
    border: 1px solid var(--ss-input-border);
    border-radius: 2px;
}
.ss-app .ss-field input[type="number"], .ss-app .ss-field input[type="text"] { font-family: var(--ss-num); }
.ss-app .ss-field input:disabled, .ss-app .ss-field select:disabled { background: var(--ss-panel-deep); color: var(--ss-muted); }

.ss-app .hint {
    margin: 5px 0 0;
    font-size: 11.5px;
    color: var(--ss-muted);
    line-height: 1.4;
}
.ss-app .hint.warn { color: var(--ss-lock); }
.ss-app .fig { font-family: var(--ss-num); font-variant-numeric: tabular-nums; }

.ss-app .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ss-app .row2:last-child { margin-bottom: 0; }
/* Two fields side by side in a narrow column: one label wraps to two lines and
   the other does not, which would leave the two inputs on different baselines.
   Both cells stretch to the taller one, so pinning the content to the bottom of
   the cell puts the inputs back on one line - but only once the row owns the
   spacing below it, because a per-field bottom margin shortens that field's box
   by exactly its own margin and reintroduces the offset. */
.ss-app .row2 .ss-field { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 0; }

/* ----------------------------------------------------------------- buttons */
.ss-app .actions {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--ss-rule-soft);
    flex-wrap: wrap;
}
.ss-app .ss-btn {
    flex: 1 1 auto;
    padding: 8px 12px;
    font: 13px/1.2 var(--ss-sans);
    border-radius: 2px;
    border: 1px solid var(--ss-accent-border);
    background: var(--ss-accent-tint);
    color: var(--ss-accent);
    cursor: pointer;
}
/* An action row placed at the top of a panel, directly under the heading rule.
   It carries its divider below instead of above, so the heading's own rule is
   not doubled. Its height must not depend on anything below it - that is what
   keeps the roll buttons still while the item state under them grows. */
.ss-app .actions.top {
    border-top: 0;
    border-bottom: 1px solid var(--ss-rule-soft);
}
.ss-app .ss-btn:hover:not(:disabled) { background: var(--gold-tint-3); }
.ss-app .ss-btn:disabled { opacity: .45; cursor: not-allowed; }
.ss-app .ss-btn.ghost { background: transparent; border-color: var(--ss-input-border); color: var(--ss-ink-soft); }
.ss-app .ss-btn.ghost:hover:not(:disabled) { background: var(--ss-accent-tint); color: var(--ss-accent); }

/* -------------------------------------------------------------- provenance
   Every figure on this page is either computed in closed form or measured
   over trials. The two are never blended, so each one carries its own tag. */
.ss-app .tag {
    display: inline-block;
    padding: 0 6px;
    border-radius: 9px;
    font: 10.5px/1.7 var(--ss-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1px;
}
.ss-app .tag.exact { background: rgba(143, 191, 138, 0.12); color: var(--ss-good); border: 1px solid rgba(143, 191, 138, 0.35); }
.ss-app .tag.est   { background: var(--gold-tint-2); color: var(--ss-lock); border: 1px solid var(--ss-accent-border); }

/* ------------------------------------------------------------ reachability
   The signature block of the page: what this item can and cannot ever be,
   stated before any odds are quoted. */
.ss-app .reach-hero {
    padding: 14px;
    background: linear-gradient(100deg, var(--gold-tint-3), var(--gold-tint) 70%, transparent);
    border-bottom: 1px solid var(--ss-rule-soft);
}
.ss-app .reach-hero .lead {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ss-muted);
    margin: 0 0 4px;
}
.ss-app .reach-hero .verdict {
    margin: 0;
    font: 600 28px/1.15 var(--ss-serif);
    color: var(--ss-ink);
}
.ss-app .reach-hero .verdict.none { color: var(--ss-lock); }
.ss-app .reach-hero .because { margin: 7px 0 0; font-size: 12.5px; color: var(--ss-ink-soft); }

.ss-app .tierlist { list-style: none; margin: 0; padding: 0; }
.ss-app .tierlist li {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 4px 10px;
    padding: 9px 0;
    border-top: 1px solid var(--ss-rule-soft);
    align-items: baseline;
}
.ss-app .tierlist li:first-child { border-top: 0; }
.ss-app .tierlist .mark { font-size: 14px; line-height: 1; }
.ss-app .tierlist .yes .mark { color: var(--ss-good); }
.ss-app .tierlist .no  .mark { color: var(--ss-bad); }
.ss-app .tierlist .tname { font: 600 14px var(--ss-sans); }
.ss-app .tierlist .thr { font-family: var(--ss-num); color: var(--ss-muted); font-size: 12px; }
.ss-app .tierlist .why { grid-column: 2 / -1; margin: 0; font-size: 12px; color: var(--ss-ink-soft); }
.ss-app .tierlist .no .tname { color: var(--ss-lock); }

/* ------------------------------------------------------------------ tables
   The site stylesheet styles bare th, td and tr; every property it sets is restated here. */
.ss-app .tablewrap { overflow-x: auto; }
.ss-app table.data {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 12.5px;
}
.ss-app table.data thead tr { background: transparent; }
.ss-app table.data tbody tr { border-bottom: 0; }
/* market.css highlights any bare "tbody tr:hover"; these are read-only tables. */
.ss-app table.data tbody tr:hover { background: transparent; }
.ss-app table.data th, .ss-app table.data td {
    text-align: left;
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--ss-rule-soft);
    vertical-align: top;
    color: var(--ss-ink);
}
.ss-app table.data th {
    font: 600 11px/1.4 var(--ss-sans);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ss-muted);
    border-bottom: 1px solid var(--ss-rule);
    white-space: nowrap;
}
.ss-app table.data td.n, .ss-app table.data th.n {
    text-align: right;
    font-family: var(--ss-num);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ss-app table.data th.n { font-family: var(--ss-sans); }
.ss-app table.data tr:last-child td { border-bottom: 0; }
.ss-app table.data .dim { color: var(--ss-muted); }
.ss-app table.data td.dim { color: var(--ss-muted); }
.ss-app table.data td.ss-barcell { width: 40%; }
.ss-app .pill {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--ss-accent-border);
    border-radius: 9px;
    background: var(--ss-accent-tint);
    color: var(--ss-accent);
    font: 10.5px/1.6 var(--ss-sans);
    white-space: nowrap;
}

.ss-app .bar {
    display: block;
    height: 7px;
    background: var(--ss-rule);
    border-radius: 4px;
    overflow: hidden;
    min-width: 54px;
}
.ss-app .bar i { display: block; height: 100%; background: var(--ss-accent-border); }
.ss-app .bar i.est { background: var(--ss-accent); }

/* --------------------------------------------------------------- the item */
.ss-app .holding { list-style: none; margin: 0; padding: 0; }
.ss-app .holding li {
    padding: 8px 0;
    border-top: 1px solid var(--ss-rule-soft);
}
.ss-app .holding li:first-child { border-top: 0; }
.ss-app .holding .hname { font: 600 13.5px var(--ss-sans); }
.ss-app .holding .hval { font-size: 12.5px; color: var(--ss-ink-soft); }
.ss-app .holding .hint-pct { float: right; font: 12px var(--ss-num); color: var(--ss-muted); }
.ss-app .empty { margin: 0; font-size: 12.5px; color: var(--ss-muted); font-style: italic; }

.ss-app .totals {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 10px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--ss-rule);
}
.ss-app .totals .big { font: 700 24px/1 var(--ss-num); }
.ss-app .totals .lab { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ss-muted); }
.ss-app .totals .tier { font: 600 20px/1 var(--ss-serif); color: var(--ss-accent); }
.ss-app .totals .tier.none { color: var(--ss-muted); }

.ss-app .log {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    font-size: 12px;
}
.ss-app .log li { padding: 7px 0; border-top: 1px solid var(--ss-rule-soft); }
.ss-app .log li:first-child { border-top: 0; }
.ss-app .log .stamp {
    font: 10.5px var(--ss-num);
    color: var(--ss-muted);
    letter-spacing: .03em;
}
.ss-app .log .logline { margin: 2px 0 0; color: var(--ss-ink-soft); }
.ss-app .log .logline b { color: var(--ss-ink); }
.ss-app .log .up { color: var(--ss-good); font-weight: 600; }
.ss-app .log .down { color: var(--ss-bad); font-weight: 600; }

.ss-app .note {
    margin: 10px 0 0;
    padding: 9px 11px;
    background: var(--ss-panel-deep);
    border-left: 3px solid var(--ss-accent-border);
    font-size: 12px;
    color: var(--ss-ink-soft);
    line-height: 1.5;
}
.ss-app .note b { color: var(--ss-ink); }

/* Goal seek reports exactly three figures. The floor is set low enough that all
   three sit on one line inside the roll column rather than leaving a two-then-one
   row with a hole in it. */
.ss-app .result {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
/* One label wraps to two lines and the next to three, so the figures are pinned
   to the bottom of a stretched tile. Otherwise the three numbers sit on three
   different baselines and the row reads as a mistake. */
.ss-app .result div {
    border: 1px solid var(--ss-rule);
    border-radius: 3px;
    padding: 9px 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ss-app .result .lab {
    display: block;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ss-muted);
    margin-bottom: 3px;
}
.ss-app .result .v { font: 700 19px/1.15 var(--ss-num); overflow-wrap: break-word; margin-top: auto; }
.ss-app .result .v.small { font-size: 15px; }

.ss-app .footnote {
    margin: 20px 0 0;
    font-size: 11.5px;
    color: var(--ss-muted);
    line-height: 1.55;
}

.ss-app .ss-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(12px);
    background: var(--modal);
    border: 1px solid var(--ss-accent-border);
    color: var(--ss-ink);
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 50;
}
.ss-app .ss-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.ss-app .sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
    .ss-app .shell { grid-template-columns: 250px minmax(0, 1fr); }
    .ss-app .col-roll { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
    .ss-app .shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ss-app .col-setup { position: static; }
    .ss-app .row2 { grid-template-columns: 1fr; }
    .ss-app .reach-hero .verdict { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-app, .ss-app * { transition: none !important; animation: none !important; }
}

@media print {
    .ss-app .actions, .tool-page > .ss-links { display: none; }
    .ss-app .shell { display: block; }
}