/* Chores · module styles on the Workshop Shadow Board system (tokens only, no hard-coded colors).
   Kid side: the bench + the wall, photos clipped up with label tape. Parent side: quiet office rows. */

/* ------------------------------------------------------------------ kid: wall page */
.chores-sum { color: var(--ink-2); }
.chores-sum .num { font-family: var(--font-mono); font-size: .95em; color: var(--ink); }

@media (min-width: 700px) {
  .chores-bench { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .chores-bench-go { min-width: 190px; }
}
@media (max-width: 699.98px) { .chores-bench-go { width: 100%; } }
.chores-bench .bench-top p { margin-top: 2px; }
.chores-vise-done { background: var(--paint); color: var(--paint-ink); }

/* dimension-line rules instead of boxes */
.chores-later { list-style: none; margin: 0; padding: 0; }
.chores-later li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px dashed var(--line); }
.chores-later li:last-child { border-bottom: 1px dashed var(--line); }
.chores-later .tag { justify-content: center; }

/* ------------------------------------------------------------------ kid: one job */
.chores-back { align-self: flex-start; margin-left: -10px; }
.chores-job-title { font: 800 clamp(1.9rem, 1.4rem + 2vw, 2.6rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.chores-spec { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink); }
.chores-spec .icon, .chores-challenge .icon { margin-top: 3px; color: var(--ink-2); }
.chores-challenge { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--paint-soft); color: var(--ink); }

.chores-steps { list-style: none; margin: 0; padding: 0; }
.chores-steps .step { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 8px 12px; gap: 10px; }
.chores-steps .dot { width: 28px; height: 28px; }
.chores-steps .dot .icon { width: 15px; height: 15px; }
.chores-step-meta { font: 500 .8rem var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* capture: the label is the camera button; the real input stays focusable for keyboards */
.chores-capture { position: relative; display: flex; flex-direction: column; gap: 10px; }
.chores-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chores-file:focus-visible + .chores-shoot { outline: 2px solid var(--focus); outline-offset: 2px; }
.chores-shoot { cursor: pointer; user-select: none; }
.chores-capture.is-enhanced:not(.has-photo) .chores-send { display: none; }
.chores-capture.has-photo .chores-shoot { min-height: 44px; padding: 10px 18px; font-size: 1rem; background: var(--surface); color: var(--ink); border-color: var(--line); }
.chores-capture.has-photo .chores-shoot:hover { border-color: var(--ink-3); filter: none; }
.chores-preview { display: block; width: 100%; max-height: min(52vh, 420px); object-fit: contain; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.chores-preview[hidden] { display: none; }
.chores-capture .chores-send .htmx-indicator { font-family: var(--font-mono); font-size: .95rem; }
.htmx-request .chores-send .btn-label { display: none; }
.chores-error[hidden] { display: none; }
.chores-capture.htmx-request .chores-shoot { opacity: .45; pointer-events: none; }

/* photos clipped to the wall, captioned with label tape */
.chores-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-hung); }
.chores-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chores-photo figcaption { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.chores-photo-missing { display: none; }
.chores-photo.is-missing img { visibility: hidden; }
.chores-photo.is-missing .chores-photo-missing { display: grid; place-items: center; position: absolute; inset: 0; color: var(--ink-3); font-size: .85rem; }
.chores-photo.is-small { width: 132px; }
.chores-before-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; }

/* photo beside the words, small on phones so the next action stays above the fold */
.chores-result { display: grid; gap: 14px; grid-template-columns: 116px minmax(0, 1fr); align-items: start; }
.chores-result .chores-photo { width: 100%; }
.chores-result-body { min-width: 0; }
.chores-result-body .forging { justify-items: start; text-align: left; padding: 0; gap: 10px; }
.chores-result-body .forging .spark { width: 44px; height: 44px; }
@media (min-width: 600px) { .chores-result { grid-template-columns: 240px minmax(0, 1fr); gap: 18px; } }

/* the hung-up moment: one slot on a scrap of pegboard, paint sweeps in */
.chores-hung { display: grid; gap: 18px; align-items: center; }
@media (min-width: 520px) { .chores-hung { grid-template-columns: 196px minmax(0, 1fr); } }
.chores-hook { padding: 16px; display: grid; place-items: center; }
.chores-hook .slot { min-height: 0; width: 100%; padding-bottom: 8px; }
.chores-hung-title { font: 700 var(--step-3)/1.1 var(--font-body); }
.chores-paid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ parent: the office */
.chores-rows, .chores-history, .chores-pp-list { list-style: none; margin: 0; padding: 0; }
.chores-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.chores-row:first-child { border-top: 0; padding-top: 2px; }
.chores-row-icon, .chores-pp-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); flex: none; }
.chores-row-main { display: grid; gap: 2px; }
.chores-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.chores-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; color: var(--ink-2); font-size: .9rem; }
.chores-row-meta .num { font-family: var(--font-mono); font-size: .85rem; }
.chores-row-today, .chores-row-actions { grid-column: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chores-row-actions form { display: contents; }
@media (min-width: 820px) {
  .chores-row { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
  .chores-row-today, .chores-row-actions { grid-column: auto; justify-content: flex-end; }
  .chores-row-today { min-width: 150px; }
}

.chores-thumb { display: block; width: 40px; height: 40px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); flex: none; }
.chores-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chores-thumb.is-missing img { visibility: hidden; }
.chores-thumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.chores-recent { border-top: 1px solid var(--line); padding-top: 10px; }
.chores-recent summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.chores-recent summary:hover { color: var(--blue); }
.chores-history li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.chores-history li:first-child { border-top: 0; }
.chores-history .chores-thumb, .chores-history .chores-pp-icon { width: 48px; height: 48px; }
.chores-history p { margin-top: 2px; }

/* needs a look */
.chores-look { display: grid; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.chores-look:first-child { border-top: 0; padding-top: 0; }
.chores-look:last-child { padding-bottom: 0; }
.chores-look.is-decided { color: var(--ink-2); }
.chores-look.is-decided .icon { color: var(--good); }
.chores-look-actions { display: grid; gap: 10px; }
/* "All N spot-checks look fine": one quiet row above the pile (disputes and trades are never cleared by it) */
.chores-looks-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.chores-looks-bulk p { margin: 0; flex: 1 1 220px; min-width: 0; }
@media (max-width: 520px) { .chores-looks-bulk .btn { width: 100%; } }
@media (min-width: 820px) { .chores-look-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* approval renderer (also shown inside the parent module's queue) */
.chores-appr { display: grid; gap: 14px; }
@media (min-width: 820px) { .chores-appr { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; } }
.chores-appr-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 8px; }
.chores-appr-photos .chores-photo { box-shadow: none; }
.chores-appr-body { display: grid; gap: 10px; min-width: 0; }
.chores-facts { display: grid; gap: 6px; margin: 0; }
.chores-facts > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 2px 12px; }
.chores-facts dt { font-weight: 700; color: var(--ink-2); font-size: .9rem; }
.chores-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .chores-facts > div { grid-template-columns: minmax(0, 1fr); } }

/* parent dashboard panel body */
.chores-pp { display: grid; gap: 12px; }
.chores-pp-name { font-size: var(--step-0); }
.chores-pp-sum { color: var(--ink-2); }
.chores-pp-sum .num { font-family: var(--font-mono); color: var(--ink); }
.chores-pp-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.chores-pp-title { overflow-wrap: anywhere; }
.chores-pp-manage { justify-self: start; }

/* ------------------------------------------------------------------ parent: chore form */
.chores-form fieldset > legend { margin-bottom: 8px; }
.chores-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; }
.chores-icon-opt { position: relative; display: grid; place-items: center; height: 48px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.chores-icon-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chores-icon-opt .icon { width: 24px; height: 24px; }
.chores-icon-opt:hover { border-color: var(--ink-3); color: var(--ink); }
.chores-icon-opt:has(input:checked) { background: var(--blue); border-color: transparent; color: var(--blue-ink); }
.chores .chip:has(input:focus-visible), .chores-icon-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chores-form-pair { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: start; }
.chores-form .check { align-items: flex-start; }
.chores-form .check input { flex: none; margin: 1px 0 0; }
.chores-check-hint { display: block; font-weight: 400; margin-top: 2px; }
.chores-days, .chores-once { margin-top: 10px; }
.chores-once { max-width: 280px; }
.chores-photo-set { display: grid; gap: 10px; }
.chores-photo-opts { padding-left: 32px; gap: 12px; }
.chores-form [aria-invalid="true"] { border-color: var(--bad); }
.chores-form-actions { padding-top: 4px; }
.chores-archive { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
@media (max-width: 480px) { .chores-photo-opts { padding-left: 0; } }

/* ------------------------------------------------------------------ shared chores: trades (kid side)
   A trade is a work-order ticket clipped near the bench: perforated edge, ticket icon, two plain actions.
   The quiet "offer" sits under the job's own button and never competes with it. */
.chores-trades { margin: 0; }
.chores-trade { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 1px dashed var(--ink-3); border-radius: var(--r); background: var(--surface); color: var(--ink); scroll-margin-top: 80px; }
.chores-trade-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); background: var(--blue-soft); color: var(--blue); }
.chores-trade-icon .icon { width: 22px; height: 22px; }
.chores-trade.is-ask { border-style: solid; border-color: var(--blue); box-shadow: var(--shadow-hung); }
.chores-trade.is-quiet { padding: 12px 0 0; border: 0; border-top: 1px dashed var(--line); border-radius: 0; background: transparent; }
.chores-trade.is-quiet .chores-trade-icon { background: var(--surface-2); color: var(--ink-2); }
.chores-trade-body { display: grid; gap: 10px; min-width: 0; }
.chores-trade-line { margin: 0; overflow-wrap: anywhere; }
.chores-trade-line strong { display: block; margin-bottom: 2px; }
.chores-trade.is-quiet .chores-trade-line strong { display: inline; margin: 0; }
.chores-trade-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chores-trade-actions form { margin: 0; }
.chores-trade:target { outline: 2px solid var(--focus); outline-offset: 3px; }
.chores-trade-error { margin: 0; }
.chores-later-trade { color: var(--ink-3); font-size: var(--step--1); }

/* ------------------------------------------------------------------ shared chores: the office */
.chores-turns { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; font-weight: 700; color: var(--ink); }
.chores-turns-sep { width: 14px; height: 14px; color: var(--ink-3); }
.chores-shared-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.chores-pp-turn { display: block; font-family: var(--font-mono); font-size: .78rem; }

/* fairness: a dense parent-only tally, numbers in mono, one slim bar for minutes */
.chores-fair { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.chores-fair-range { font-weight: 400; margin-left: 6px; }
.chores-fair-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.chores-fair-table th, .chores-fair-table td { padding: 8px 4px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.chores-fair-table thead th { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.chores-fair-table tbody th { font-weight: 700; }
.chores-fair-table tbody tr:last-child > * { border-bottom: 0; }
.chores-fair-table .chores-fair-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chores-fair-table .num { font-family: var(--font-mono); }
.chores-fair-mins { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.chores-fair-bar { flex: none; width: min(96px, 22vw); height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--blue) calc(var(--pct, 0) * 1%), var(--surface-3) 0); }
.chores-fair-mins .num { min-width: 3ch; text-align: right; }

/* the trade approval renderer */
.chores-appr.chores-appr-swap { grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
.chores-swap-art { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); }
.chores-swap-art .icon { width: 26px; height: 26px; }

/* chore form: Shared by (pick order = turn order) */
.chores-share { display: grid; gap: 10px; }
.chores-share-kid { position: relative; }
.chores-turn-no { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--paint); color: var(--paint-ink); font: 700 .8rem var(--font-mono); }
.chores-share-more { padding: 10px 0 0; border-top: 1px dashed var(--line); }
.chores-share-order { margin: 0; font-weight: 700; }