/* Craft and Progression screens. Shared pieces (colors, type, buttons, tables, tabs,
 * chips, tooltips, toasts) come from kit/; this file holds the recipe cards, the
 * balancing layout and the small craft progress bar, written with kit tokens only. */

/* ---------------------------------------------------------------- recipe states */

/* Pill names come from recipeState() in app.js. */
.pill.ready   { --status: var(--success); --i: var(--icon-check); }
.pill.missing { --status: var(--warning); --i: var(--icon-warning); }
.pill.locked  { --status: var(--neutral); --i: var(--icon-lock); }

/* ---------------------------------------------------------------- crafting menu */

.menu-body { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.menu-body aside { position: sticky; top: 0; }
.hint { color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-4) 0 0; }

.skill + .skill { margin-top: var(--sp-4); }
.skill-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.skill-name { font-weight: 650; }
.skill-level { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.skill .track { height: .5714rem; margin: var(--sp-2) 0 var(--sp-1); background: var(--data-track); border-radius: var(--radius); overflow: hidden; }
.skill .fill { height: 100%; background: var(--data-in); border-radius: var(--radius);
               transform-origin: left; animation: grow-x var(--dur-slow) var(--ease-out); }
.skill small { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--sp-3); align-items: stretch; }
.recipe { display: flex; flex-direction: column; gap: var(--sp-3); }
.recipe.locked { background: var(--bg); border-style: dashed; border-color: var(--line-strong); }
.recipe-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.recipe-name { display: block; font-size: var(--fs-md); font-weight: 650; }
.recipe-out { display: block; color: var(--muted); font-size: var(--fs-sm); }
.meta { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.inputs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.inputs li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; }
.inputs li + li { border-top: var(--border) solid var(--line); }
.inputs .tool { color: var(--muted); font-size: var(--fs-sm); margin-left: var(--sp-2); }
.inputs .count { display: inline-flex; align-items: center; gap: var(--sp-1); font-variant-numeric: tabular-nums; white-space: nowrap; }

.actions { display: flex; gap: var(--sp-2); align-items: center; margin-top: auto; }
.actions .btn { flex: 1; }
.actions .why { flex: 1; color: var(--muted); font-size: var(--fs-sm); }
.qty { display: inline-flex; gap: var(--sp-2); align-items: center; font-variant-numeric: tabular-nums; }
.qty button {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
    border-radius: var(--radius); border: var(--border) solid var(--line-strong);
    background: var(--surface-2); color: var(--ink); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.qty button:hover { background: var(--surface-3); }
.qty button:active { transform: translateY(1px); }
.qty button:disabled { opacity: .45; cursor: not-allowed; }
.qty .i { width: .85rem; height: .85rem; }
.qty span { min-width: 1.5rem; text-align: center; }
.recipes > .empty { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- admin balancing */

.pace { display: grid; grid-template-columns: 11rem 11rem auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: end; margin-bottom: var(--sp-3); }
.pace .field { margin: 0; }
.pace p { margin: 0; align-self: center; font-size: var(--fs-sm); max-width: 60ch; }
.headline { font-size: var(--fs-md); color: var(--ink-2); margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4);
            background: var(--surface-1); border: var(--border) solid var(--line); border-radius: var(--radius); }
.headline strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.side { display: flex; flex-direction: column; gap: var(--sp-3); }
.curve { color: var(--ink-2); }
.curve .chip { margin-right: var(--sp-1); }
.curve p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }

.chart-wrap { position: relative; margin-bottom: var(--sp-4); }
#balance tr.milestone td { font-weight: 650; color: var(--ink); }
#balance .chip { margin-left: var(--sp-2); }
#top td:nth-child(2), #skill-recipes td:first-child { font-weight: 600; }

/* ---------------------------------------------------------------- craft progress (in world, no shell) */

.progress {
    position: fixed; left: 50%; bottom: 9vh; transform: translateX(-50%); width: 26rem;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-1); border: var(--border) solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}
.progress-label { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); font-weight: 600; }
.progress-label span:last-child { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.progress-track { height: .5714rem; background: var(--data-track); border-radius: var(--radius); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--data-in); border-radius: var(--radius); }

@media (max-width: 1100px) {
    .menu-body, .admin-grid { grid-template-columns: minmax(0, 1fr); }
    .menu-body aside { position: static; }
    .pace { grid-template-columns: 1fr 1fr; }
}