/* public/crafting-plan.css: N11 /professions/crafting-plan. Loads after profession-recipes.css and tool.css. Brand tokens only. */

/* Stage: one column by default; tool.css's 75rem two-column rule and its 48–75rem .tool-side split are both replaced below. */
.cp-stage { grid-template-columns: minmax(0, 1fr); }
.cp-stage .tool-side { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.cp-stage .tool-main { display: grid; gap: var(--s-4); }

/* Picker: profession-recipes' frame, our columns. Phones: one column, full-width fields. */
.cp-picker { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.cp-picker > label, .cp-picker > .cp-f-add, .cp-picker > .cp-f-count-out { grid-column: 1 / -1; }
.cp-picker > .cp-f-add { width: 100%; max-width: none; justify-self: stretch; }
.cp-f-count-out { margin: 0; font: 400 .85rem/1.4 var(--font-ui); color: var(--ink-3); }

/* Lists: heading, then dense rows on hairlines; the number input pins right at 5.5rem. */
.cp-lists { display: grid; gap: var(--s-4); }
.cp-list { min-width: 0; }
.cp-h { margin: 0 0 .35rem; font: var(--heading-weight) 1.15rem/1.25 var(--font-heading); color: var(--ink); }
.cp-rows { display: grid; gap: 0; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel); }
.cp-rows > p { margin: 0; padding: 8px 10px; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-3); }
.cp-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; grid-template-areas: "name input" "meta input"; align-items: center; gap: 0 .6rem; min-height: 2.75rem; padding: 4px 10px; border-top: 1px solid var(--hairline); font: 400 .92rem/1.35 var(--font-ui); color: var(--ink); }
.cp-row:first-child { border-top: 0; }
.cp-row-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.cp-row-meta { grid-area: meta; font-size: .78rem; line-height: 1.3; color: var(--ink-3); }
.cp-row input { grid-area: input; width: 100%; min-width: 0; min-height: 2.75rem; padding: .4rem .5rem; border: 1px solid var(--edge-inner); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 1rem/1.2 var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; }
.cp-row input[aria-invalid="true"] { border-color: var(--evidence-reported); }
.cp-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Shopping list: the answer, a flat ledger. */
.cp-output { min-width: 0; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel); }
.cp-output > p { margin: 0; padding: 10px; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-3); }
.cp-ledger { width: 100%; }
.cp-ledger td { text-align: right; }
.cp-ledger thead th:not(:first-child) { text-align: right; }
.cp-ledger td.cp-short { color: var(--classic-yellow); }
.cp-status { margin: .5rem 0 0; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-2); }
.cp-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.cp-actions .wfg-btn { flex: 1 1 10rem; }
.cp-actions .wfg-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--line); }
.cp-feedback { margin: .35rem 0 0; min-height: 1.4em; font: 400 .88rem/1.4 var(--font-ui); color: var(--ink-2); }
.cp-fallback { display: grid; gap: .3rem; margin-top: .5rem; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-2); }
.cp-fallback[hidden] { display: none; }
.cp-fallback textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: .5rem; border: 1px solid var(--line-control); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 .9rem/1.45 var(--font-ui); resize: vertical; }
.cp-stage .pr-coverage { margin: .6rem 0 0; }

/* 820 (page 48rem+): picker fields 2x2, button and count on their own row; the two lists side by side. */
@container page (width >= 48rem) {
  .cp-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .cp-picker > .cp-f-search { grid-column: 1 / -1; }
  .cp-picker > :is(.cp-f-profession, .cp-f-recipe, .cp-f-count) { grid-column: auto; }
  .cp-picker > .cp-f-add { grid-column: auto; width: max-content; justify-self: start; }
  .cp-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-actions .wfg-btn { flex: 0 1 auto; }
}

/* 1440 (page 75rem+): plan on the left, the shopping list in a sticky 26rem rail. */
@container page (width >= 75rem) {
  .cp-stage { grid-template-columns: minmax(0, 1fr) 26rem; gap: var(--s-5); }
  .cp-picker { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) minmax(0, 1.75fr) 5.5rem auto; }
  .cp-picker > :is(.cp-f-search, .cp-f-recipe) { grid-column: auto; }
  .cp-picker > .cp-f-count-out { grid-column: 1 / -1; }
  .cp-stage .tool-side { position: sticky; top: calc(var(--header-h) + .5rem); max-height: calc(100dvh - var(--header-h) - 1rem); overflow-y: auto; }
}

/* Phones under 20rem of page (390 at 200%): the ledger becomes labeled lines. */
@container page (width < 20rem) {
  .cp-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cp-ledger, .cp-ledger tbody, .cp-ledger tr, .cp-ledger th, .cp-ledger td { display: block; text-align: left; }
  .cp-ledger tbody tr { padding: 6px 10px; border-top: 1px solid var(--hairline); }
  .cp-ledger th, .cp-ledger td { padding: 1px 0; border: 0; }
  .cp-ledger td[data-label] { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0 .5rem; }
  .cp-ledger td[data-label]::before { content: attr(data-label); font-size: .7rem; line-height: 1.9; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .cp-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meta" "input"; }
  .cp-row input { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { .cp-stage .tool-side { scroll-behavior: auto; } }
@media (forced-colors: active) { .cp-rows, .cp-output, .cp-row input { border: 1px solid CanvasText; } .cp-ledger td.cp-short { font-weight: 600; } }

/* Narrow pages: the two ghost buttons stack instead of wrapping their labels. */
@container page (width < 28rem) { .cp-actions .wfg-btn { flex-basis: 100%; } }

.cp-stage [hidden] { display: none; }
.cp-ledger tbody th { overflow-wrap: anywhere; }

.cp-lists { scroll-margin-top: calc(var(--header-h) + .5rem); }

@container page (width >= 75rem) {
  .cp-stage .tool-side { overscroll-behavior: contain; scroll-padding-block: .5rem; }
}