/* Class Ability Planner (www /tools/abilities). Every selector lives under .cap-app so nothing
   leaks into the site chrome or the other tools. The tool-local custom properties are all
   --cap-* and are defined in terms of the site tokens from market.css, so the planner reads
   as part of the dark site. Class names that also exist in market.css (btn, field, toast) are
   prefixed cap- so none of the market's rules can reach the tool. */

.cap-app {
    --cap-ink: var(--text);
    --cap-ink-soft: var(--text-2);
    --cap-accent: var(--gold);
    --cap-accent-border: var(--gold-border);
    --cap-accent-tint: var(--gold-tint-3);
    --cap-raised: var(--input);
    --cap-ground: var(--ground);
    --cap-panel: var(--panel);
    --cap-rule: var(--hairline);
    --cap-rule-soft: var(--rule);
    --cap-input: var(--input);
    --cap-input-border: var(--input-border);
    --cap-muted: var(--muted);
    --cap-good: var(--ok);
    --cap-bad: var(--err);
    --cap-bad-tint: color-mix(in srgb, var(--err) 14%, transparent);
    --cap-lock: var(--warn);
    --cap-lock-tint: color-mix(in srgb, var(--warn) 12%, transparent);
    --cap-pip: var(--faint);
    --cap-serif: var(--head);
    --cap-sans: var(--body);
    --cap-num: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --cap-gap: 20px;
    /* The site header is sticky at every width (market.css .site-header); the sticky columns sit below
       it. --site-header-h is market.css's token for its height (61px one row, taller when collapsed). */
    --cap-header: var(--site-header-h);

    color-scheme: dark;
    color: var(--cap-ink);
    font: 15px/1.55 var(--cap-sans);
    min-height: 0;
    padding-bottom: 8px;
}

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

/* The tool's wider working column. */
.tools-body main:has(.cap-app) { max-width: 1472px; }

.tool-page .cap-links {
    margin: -12px 0 20px;
    font-size: 13px;
    color: var(--muted);
}
.tool-page .cap-links a { margin-right: 14px; }

.cap-app a { color: var(--cap-accent); }

.cap-app :where(button, a, input, [tabindex]):focus-visible {
    outline: 2px solid var(--cap-accent-border);
    outline-offset: 2px;
    border-radius: 2px;
}


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

/* ------------------------------------------------------------------ layout */
.cap-app .shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr) 320px;
    gap: var(--cap-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. */
.cap-app .panel {
    background: var(--cap-panel);
    border: 1px solid var(--cap-rule);
    border-radius: 3px;
    min-width: 0;
}
.cap-app .ability, .cap-app .ability-name, .cap-app .class-head { min-width: 0; }
.cap-app .ability-effect, .cap-app .build-item, .cap-app .banner { overflow-wrap: break-word; }
.cap-app .panel > h2 {
    margin: 0;
    padding: 11px 14px 9px;
    font: 600 17px/1.2 var(--cap-serif);
    color: var(--cap-ink);
    border-bottom: 2px solid var(--cap-accent-border);
    letter-spacing: .01em;
}
.cap-app .panel-body { padding: 14px; }

.cap-app .col-points, .cap-app .col-build { position: sticky; top: calc(var(--cap-header) + var(--cap-gap)); }

/* ------------------------------------------------------------- points panel
   The ledger is the signature of the left column: sources are line items with
   a right-aligned tabular figure, ruled and totalled like a receipt, because
   "where did my points come from" is the question this column answers. */
.cap-app .cap-field { display: block; margin-bottom: 14px; }
.cap-app .cap-field > label,
.cap-app .cap-field > .cap-field-label {
    display: block;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cap-muted);
    margin-bottom: 5px;
}
.cap-app .cap-field input[type="number"] {
    width: 100%;
    padding: 6px 8px;
    font: 15px/1.3 var(--cap-num);
    color: var(--cap-ink);
    background: var(--cap-input);
    border: 1px solid var(--cap-input-border);
    border-radius: 2px;
}

.cap-app .stepper { display: flex; align-items: stretch; gap: 0; }
.cap-app .stepper input { border-radius: 0 !important; text-align: center; }
.cap-app .stepper button {
    width: 30px;
    flex: none;
    border: 1px solid var(--cap-input-border);
    background: var(--cap-raised);
    color: var(--cap-ink);
    font: 16px/1 var(--cap-sans);
    cursor: pointer;
}
.cap-app .stepper button:first-child { border-radius: 2px 0 0 2px; border-right: 0; }
.cap-app .stepper button:last-child  { border-radius: 0 2px 2px 0; border-left: 0; }
.cap-app .stepper button:hover:not(:disabled) { background: var(--cap-accent-tint); }
.cap-app .stepper button:disabled { opacity: .4; cursor: default; }

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

.cap-app .quests { list-style: none; margin: 0; padding: 0; }
.cap-app .quests li { margin: 0 0 7px; }
.cap-app .quests label {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: 8px;
    align-items: start;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}
.cap-app .quests input { margin: 3px 0 0; }
.cap-app .quests .cap {
    font-family: var(--cap-num);
    font-size: 12px;
    color: var(--cap-muted);
}

.cap-app .ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cap-app .ledger th, .cap-app .ledger td { padding: 3px 0; text-align: left; font-weight: 400; }
/* market.css styles bare th, tbody tr and tr:hover for its own tables; undo what reaches the ledger. */
.cap-app .ledger th { font-size: inherit; letter-spacing: 0; text-transform: none; color: inherit; border-bottom: 0; }
.cap-app .ledger tr { border-bottom: 0; }
.cap-app .ledger tr:hover { background: none; }
.cap-app .ledger td.n {
    text-align: right;
    font-family: var(--cap-num);
    font-variant-numeric: tabular-nums;
}
.cap-app .ledger tr.rule td { border-top: 1px solid var(--cap-rule); padding-top: 0; height: 6px; }
.cap-app .ledger tr.total th { font: 700 13px/1.3 var(--cap-sans); }
.cap-app .ledger tr.total td { font-weight: 700; }
.cap-app .ledger tr.dim th, .cap-app .ledger tr.dim td { color: var(--cap-muted); }

/* The earned half of each tier threshold. It is global, not per class, so it
   belongs here next to the earned total rather than repeated on every class. */
.cap-app .gates { list-style: none; margin: 8px 0 0; padding: 0; }
.cap-app .gates li {
    display: flex;
    gap: 7px;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--cap-muted);
    line-height: 1.5;
}
.cap-app .gates .tick { color: var(--cap-pip); font-size: 12px; line-height: 1; }
.cap-app .gates li.met { color: var(--cap-good); }
.cap-app .gates li.met .tick { color: var(--cap-good); }

.cap-app .remaining {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--cap-rule);
    background: var(--cap-raised);
    border-radius: 2px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.cap-app .remaining .label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cap-muted);
}
.cap-app .remaining .value {
    font: 700 26px/1 var(--cap-num);
    font-variant-numeric: tabular-nums;
    color: var(--cap-ink);
}
.cap-app .remaining.over { border-color: var(--cap-bad); background: var(--cap-bad-tint); }
.cap-app .remaining.over .value { color: var(--cap-bad); }

/* ------------------------------------------------------------ catalog panel */
.cap-app .catalog-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cap-rule-soft);
    flex-wrap: wrap;
}
.cap-app .catalog-tools input[type="search"] {
    flex: 1 1 180px;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--cap-input-border);
    border-radius: 2px;
    background: var(--cap-input);
    color: var(--cap-ink);
    font: 13px var(--cap-sans);
}
.cap-app .toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--cap-muted);
    cursor: pointer;
    white-space: nowrap;
}

.cap-app .class-block { border-bottom: 1px solid var(--cap-rule-soft); }
.cap-app .class-block:last-child { border-bottom: 0; }

.cap-app .class-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 10px;
    flex-wrap: wrap;
}
.cap-app .class-head h3 {
    margin: 0;
    font: 600 19px/1.2 var(--cap-serif);
    color: var(--cap-ink);
}
.cap-app .class-spent {
    font-size: 12px;
    color: var(--cap-muted);
}
.cap-app .class-spent b {
    font: 700 12px var(--cap-num);
    font-variant-numeric: tabular-nums;
    color: var(--cap-ink-soft);
}

/* Threshold meters: the two requirements that actually gate a tier, shown as
   two bars because they advance independently and players need to see which
   one is short. Nothing is spent to unlock a tier - these are thresholds. */
.cap-app .meters { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.cap-app .meter { min-width: 118px; }
.cap-app .meter-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cap-muted);
    margin-bottom: 3px;
}
.cap-app .meter-label .n { font-family: var(--cap-num); letter-spacing: 0; }
.cap-app .meter-bars { display: flex; gap: 3px; }
.cap-app .bar {
    position: relative;
    height: 5px;
    flex: 1;
    background: var(--cap-rule);
    border-radius: 3px;
    overflow: hidden;
}
.cap-app .bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--cap-accent-border);
    border-radius: 3px;
}
.cap-app .bar.done > i { background: var(--cap-good); }
.cap-app .meter.open .meter-label { color: var(--cap-good); }

.cap-app .tier-group { padding: 0 14px 4px; }
.cap-app .tier-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0 6px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cap-muted);
}
.cap-app .tier-head .lockmsg {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    color: var(--cap-lock);
}
.cap-app .tier-head .openmsg {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    color: var(--cap-good);
}

.cap-app .ability {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
    padding: 9px 0;
    border-top: 1px solid var(--cap-rule-soft);
    align-items: start;
}
.cap-app .tier-group .ability:first-of-type { border-top: 0; }
.cap-app .ability.locked { opacity: .55; }
.cap-app .ability.owned { background: linear-gradient(90deg, var(--gold-tint-2), transparent 60%); }

.cap-app .ability-name {
    font: 600 14px/1.3 var(--cap-sans);
    color: var(--cap-ink);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.cap-app .affinity {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--cap-input-border);
    border-radius: 9px;
    background: var(--cap-raised);
    color: var(--cap-ink-soft);
    font: 11px/1.5 var(--cap-sans);
    white-space: nowrap;
}
.cap-app .ability-effect {
    grid-column: 1;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cap-ink-soft);
    margin: 0;
}
.cap-app .ability-effect b { color: var(--cap-ink); font-weight: 600; }

.cap-app .ability-buy {
    grid-row: span 2;
    display: flex;
    align-items: center;
    gap: 9px;
}
.cap-app .cost-ladder {
    font: 12px var(--cap-num);
    color: var(--cap-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cap-app .cost-ladder b { color: var(--cap-ink); font-weight: 700; }

/* Rank pips echo the woven-portal diamond in the DreamWeave mark. */
.cap-app .pips { display: flex; gap: 4px; }
.cap-app .pip {
    width: 17px;
    height: 17px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.cap-app .pip:disabled { cursor: not-allowed; }
.cap-app .pip i {
    display: block;
    width: 11px;
    height: 11px;
    transform: rotate(45deg);
    border: 1.5px solid var(--cap-muted);
    border-radius: 2px;
    background: transparent;
    transition: background-color .12s ease, border-color .12s ease;
}
.cap-app .pip.on i { background: var(--cap-accent); border-color: var(--cap-accent); }
.cap-app .pip:hover:not(:disabled) i { border-color: var(--cap-accent); }
.cap-app .pip.unaffordable:not(.on) i { border-color: var(--cap-pip); }
.cap-app .pip:disabled i { border-color: var(--cap-rule); }

/* -------------------------------------------------------------- build panel */
.cap-app .build-empty {
    margin: 0;
    color: var(--cap-muted);
    font-size: 13px;
    line-height: 1.5;
}
.cap-app .unreachable {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--cap-lock);
    background: var(--cap-lock-tint);
    border-radius: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cap-lock);
}
.cap-app .unreachable strong { color: var(--cap-ink); }

.cap-app .build-class {
    margin: 0 0 4px;
    padding-top: 10px;
    font: 600 16px/1.2 var(--cap-serif);
    color: var(--cap-accent);
    border-top: 1px solid var(--cap-rule-soft);
}
.cap-app .build-class:first-child { padding-top: 0; border-top: 0; }
.cap-app .build-item { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; }
.cap-app .build-item .nm { font-weight: 600; color: var(--cap-ink); }
.cap-app .build-item .rk {
    font-family: var(--cap-num);
    font-size: 11px;
    color: var(--cap-ground);
    background: var(--cap-accent);
    border-radius: 8px;
    padding: 0 6px;
    margin-left: 4px;
}
.cap-app .build-item .ef { display: block; color: var(--cap-ink-soft); }
.cap-app .build-item .af { color: var(--cap-muted); font-size: 11.5px; }

.cap-app .train {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid var(--cap-accent-border);
}
.cap-app .train h3 {
    margin: 0 0 3px;
    font: 600 16px/1.2 var(--cap-serif);
}
.cap-app .train p.why {
    margin: 0 0 9px;
    font-size: 11.5px;
    color: var(--cap-muted);
    line-height: 1.45;
}
.cap-app .train ul { list-style: none; margin: 0; padding: 0; }
.cap-app .train li { margin-bottom: 7px; font-size: 12.5px; line-height: 1.4; }
.cap-app .train .skill { font-weight: 600; color: var(--cap-ink); }
.cap-app .train .feeds { color: var(--cap-muted); font-size: 11.5px; }

.cap-app .actions {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--cap-rule-soft);
    flex-wrap: wrap;
}
.cap-app .cap-btn {
    display: inline-block;
    flex: 1 1 auto;
    padding: 8px 12px;
    font: 13px/1.2 var(--cap-sans);
    border-radius: 2px;
    border: 1px solid var(--cap-accent-border);
    background: var(--cap-accent-border);
    color: var(--cap-ground);
    cursor: pointer;
}
.cap-app .cap-btn:hover { background: var(--cap-accent); }
.cap-app .cap-btn.ghost {
    background: transparent;
    color: var(--cap-accent);
}
.cap-app .cap-btn.ghost:hover { background: var(--cap-accent-tint); }

/* -------------------------------------------------------------- export box */
.cap-app dialog.export {
    width: min(660px, calc(100vw - 32px));
    border: 1px solid var(--cap-rule);
    border-top: 3px solid var(--cap-accent-border);
    border-radius: 3px;
    padding: 0;
    color: var(--cap-ink);
    background: var(--modal);
}
.cap-app dialog.export::backdrop { background: rgba(0, 0, 0, .6); }
.cap-app dialog.export h2 {
    margin: 0;
    padding: 12px 16px;
    font: 600 19px/1.2 var(--cap-serif);
    border-bottom: 1px solid var(--cap-rule-soft);
}
.cap-app dialog.export .dlg-body { padding: 14px 16px; }
.cap-app dialog.export textarea {
    width: 100%;
    height: 190px;
    font: 12px/1.5 var(--cap-num);
    padding: 9px;
    border: 1px solid var(--cap-input-border);
    border-radius: 2px;
    resize: vertical;
    background: var(--cap-input);
    color: var(--cap-ink);
}
.cap-app dialog.export .dlg-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 14px;
    flex-wrap: wrap;
}
.cap-app .cap-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(12px);
    background: var(--modal);
    border: 1px solid var(--cap-accent-border);
    color: var(--cap-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;
}
.cap-app .cap-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.cap-app .footnote {
    margin: 0;
    padding: 14px 0 0;
    font-size: 11.5px;
    color: var(--cap-muted);
    line-height: 1.55;
}
.cap-app .footnote code { font-family: var(--cap-num); font-size: 11px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
    .cap-app .shell { grid-template-columns: 250px minmax(0, 1fr); }
    .cap-app .col-build { grid-column: 1 / -1; position: static; }
    .cap-app .build-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
}
@media (max-width: 760px) {
    .cap-app .shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cap-app .col-points { position: static; }
    .cap-app .build-cols { grid-template-columns: 1fr; }
    .cap-app .meters { margin-left: 0; width: 100%; }
    .cap-app .ability { grid-template-columns: 1fr; }
    .cap-app .ability-buy { grid-row: auto; justify-content: space-between; }
    /* A persistent remaining-points bar, so the number stays visible while
       scrolling a long catalog on a phone. */
    .cap-app .mobile-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 14px;
        background: var(--modal);
        border-top: 1px solid var(--cap-accent-border);
        color: var(--cap-ink);
        font-size: 13px;
        z-index: 40;
    }
    .cap-app .mobile-bar .v { font: 700 17px var(--cap-num); }
    .cap-app .mobile-bar.over .v { color: var(--cap-bad); }
    .tools-body:has(.cap-app) { padding-bottom: 54px; }
}
@media (min-width: 761px) { .cap-app .mobile-bar { display: none; } }

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

@media print {
    .cap-app .col-points, .cap-app .catalog-tools, .cap-app .actions, .cap-app .mobile-bar { display: none; }
    .cap-app .shell { display: block; }
}