/*
  Craft Calculators. Loaded after the PDF tools' stylesheet (../pdf_tools/app.css),
  whose cards, steps, segmented switch and checkbox rows these pages share.
  Plain CSS, not built by Tailwind; colours come from the site's theme tokens
  so dark mode just works. Buttons and form controls are DaisyUI's.
*/

.craft {
  /* The PDF tools' switch and checkbox styles read these, which .pdft defines on its pages. */
  --pdft-line: var(--color-base-300);
  --pdft-accent: var(--color-primary);
  --craft-line: var(--color-base-300);
  --craft-radius: 0.875rem;
  --craft-accent: var(--t-emerald);
  /* Granny square preview: the main colour and the seams between squares. */
  --craft-main: color-mix(in oklab, var(--color-base-content) 24%, var(--color-base-100));
  --craft-seam: var(--color-base-100);
}
.craft [hidden] { display: none !important; }
.craft-loading { padding: 3rem 1rem; text-align: center; color: var(--muted); }

/* ---- Layout ---- */

.craft-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) {
  .craft-layout { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); gap: 1.25rem; }
  /* Stays in view while the form scrolls; a results panel taller than the form just scrolls with the page. */
  .craft-results { position: sticky; top: 5.5rem; }
}
.craft-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--craft-line);
  border-radius: var(--craft-radius);
  background: var(--color-base-100);
}
@media (min-width: 40rem) { .craft-panel { padding: 1.25rem; } }
.craft-form { display: flex; flex-direction: column; gap: 1.25rem; }

.craft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.craft-head .craft-seg { flex: 0 1 auto; }
.craft-reset { margin-left: auto; }
.craft-currency { width: auto; }
.craft-seg span { padding-inline: 0.75rem; }

.craft-section { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; margin: 0; padding: 1.1rem 0 0; border: 0; border-top: 1px solid var(--craft-line); }
.craft-section-title { float: left; width: 100%; padding: 0; font-size: 1rem; font-weight: 650; }
.craft-section-title + * { clear: both; }
.craft-fields { display: grid; gap: 0.85rem 1rem; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }

/* ---- Fields ---- */

.craft-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.craft-field-check { justify-content: flex-end; }
.craft-label { font-size: 0.875rem; font-weight: 600; }
.craft-hint { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.craft-check { align-items: center; font-size: 0.875rem; }
.craft-check input { margin-top: 0; }

.craft-input { display: flex; align-items: center; gap: 0.4rem; width: 100%; }
.craft-num-input { flex: 1; min-width: 0; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.craft-affix { flex: none; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.craft-affix:empty { display: none; }
.craft-input:has([aria-invalid="true"]), .craft .select[aria-invalid="true"], .craft .input[aria-invalid="true"] { border-color: var(--color-error); }
.craft-input:focus-within { outline: 2px solid var(--color-base-content); outline-offset: 2px; }

/* ---- Materials list ---- */

.craft-mats { display: flex; flex-direction: column; gap: 0.75rem; }
.craft-mat {
  display: grid;
  gap: 0.6rem 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--craft-line);
  border-radius: 0.625rem;
  background: var(--color-base-200);
}
.craft-mat > :first-child { grid-column: 1 / -1; }
.craft-mat-remove { justify-self: start; }
@media (min-width: 44rem) {
  .craft-mat { grid-template-columns: minmax(8rem, 1.6fr) repeat(3, minmax(6rem, 1fr)) auto; }
  .craft-mat > :first-child { grid-column: auto; }
}

/* ---- Results ---- */

.craft-results { border-top: 3px solid var(--craft-accent); }
.craft-results-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.craft-results-title { font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.craft-copy { min-width: 6.5rem; }
.craft-error { margin-top: 0.75rem; color: var(--color-error); font-size: 0.9375rem; }
.craft-result-body { display: flex; flex-direction: column; }
.craft-result-label { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--muted); }
.craft-result-value {
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.craft-result-sub { margin-top: 0.35rem; line-height: 1.45; }

.craft-rows { margin: 1rem 0 0; }
.craft-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.1rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--craft-line);
  font-size: 0.9375rem;
}
.craft-row dt { color: var(--muted); }
.craft-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.craft-row.is-total dt, .craft-row.is-total dd { color: var(--color-base-content); font-weight: 650; }
.craft-row-note { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }

.craft-extra { display: flex; flex-direction: column; gap: 1rem; }
.craft-extra:not(:empty) { margin-top: 1rem; }
.craft-notes { display: flex; flex-direction: column; gap: 0.5rem; }
.craft-notes:not(:empty) { margin-top: 1rem; }
.craft-note { font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.craft-note.is-ok { color: color-mix(in oklab, var(--color-success) 75%, var(--color-base-content)); }
.craft-note.is-warn { color: color-mix(in oklab, var(--color-warning) 55%, var(--color-base-content)); }
.craft-next { align-self: flex-start; }

.craft-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.craft-table th, .craft-table td { padding: 0.45rem 0.4rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--craft-line); }
.craft-table th:last-child, .craft-table td:last-child { text-align: right; }
.craft-table thead th { font-weight: 600; color: var(--muted); }
.craft-table td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.craft-table tr.is-current td { font-weight: 650; }
.craft-dot { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: -0.05rem; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-base-content) 25%, transparent); }

.craft-more summary { cursor: pointer; font-size: 0.9375rem; font-weight: 600; }
.craft-more .craft-table { margin-top: 0.5rem; }

.craft-preview { margin: 0; }
.craft-preview-art { display: block; width: 100%; height: auto; max-height: 22rem; }
.craft-preview figcaption { margin-top: 0.4rem; }