/* Calibration Log — a bench notebook, not a dashboard.
 *
 * The subject is a machine that is currently wrong and a person holding
 * calipers, so the working surface reads as ruled paper with the measured
 * value set in a monospace face at a size you can read from a metre away. The
 * violet is the theme's filament colour rather than a second brand accent. */

.product[data-product="calibration-log"] {
  --product-ink: #1f1633;
  --product-paper: #faf9ff;
  --product-signal: #6d28d9;
}

/* ── Rows: printers, spools, tests ─────────────────────────────────── */

.calibration-rows {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.calibration-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: .8rem .95rem;
  border: 1px solid var(--border);
  border-left: .25rem solid var(--border);
  border-radius: .5rem;
  background: var(--surface);
}

.calibration-row > div:first-child { min-width: 0; }
.calibration-row .field-help { margin: .2rem 0 0; }
.calibration-row .tool-actions { margin: 0; flex: 0 0 auto; }

/* The row currently in force is the one a reader is looking for, so it is
   marked rather than merely ordered first — the log is sorted by date, and
   the newest row is not always the current one for a given test. */
.calibration-row--current {
  border-left-color: var(--product-signal);
  background: color-mix(in srgb, var(--surface) 82%, var(--product-signal));
}

.calibration-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin: 0;
  font-weight: 650;
}

.calibration-row-value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  color: var(--product-signal);
}

.calibration-badge {
  padding: .1rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--product-signal) 16%, transparent);
  color: color-mix(in srgb, var(--product-signal) 80%, var(--text));
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.calibration-badge--old {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

/* ── The profile ───────────────────────────────────────────────────── */

.calibration-profile-table { margin: 1rem 0; }
.calibration-profile-table .calibration-value {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.1rem;
  font-weight: 650;
  white-space: nowrap;
}
.calibration-profile-table .calibration-where {
  color: var(--muted);
  font-size: .85rem;
}

.calibration-takeaway {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.calibration-takeaway h3 { margin: 1.25rem 0 .35rem; }
.calibration-takeaway h3:first-child { margin-top: 0; }

/* A command block is copied and pasted, so it must never soft-wrap: a wrapped
   G-code line pasted into a terminal is two commands, and the second one is
   usually nonsense. It scrolls inside its own box instead. */
.calibration-gcode {
  margin: .6rem 0 0;
  padding: .85rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--product-ink);
  color: #ede9fe;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre;
  tab-size: 4;
}

.field-inline {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
}
.field-inline .field-label { margin: 0; }

/* ── The spool label ───────────────────────────────────────────────────
 *
 * Sized for a spool, not a page. The QR is 3.6 cm — smaller than the
 * fermenter label because a spool side is flatter and the phone gets closer,
 * but still well above the point where a camera at arm's length gives up. The
 * whole label is about 9 x 5 cm, which fits the flat face of a standard 1 kg
 * spool and survives being wrapped slightly. */

.spool-label-preview { margin: .85rem 0; }

.spool-label {
  display: flex;
  gap: .75rem;
  align-items: center;
  width: 9cm;
  max-width: 100%;
  padding: .5cm;
  border: 1px dashed var(--border);
  border-radius: .35rem;
  background: #fff;
  color: #111;
}

.spool-label-copy { min-width: 0; flex: 1 1 auto; }
.spool-label-title {
  margin: 0;
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.15;
}
.spool-label-meta {
  margin: .1rem 0 0;
  color: #444;
  font-size: 7.5pt;
  line-height: 1.3;
}

.spool-label-values {
  margin: .28cm 0 .2cm;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .04cm .3cm;
}
.spool-label-values li {
  display: flex;
  gap: .25rem;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: .5px solid #ddd;
  font-size: 7.5pt;
}
.spool-label-name { color: #555; }
.spool-label-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  white-space: nowrap;
}

.spool-label-qr { width: 3.6cm; flex: 0 0 3.6cm; }
.spool-label-qr svg { display: block; width: 100%; height: auto; }

@media (max-width: 44rem) {
  .calibration-row { flex-direction: column; }
  .calibration-row .tool-actions { align-self: flex-end; }
  .spool-label { width: 100%; }
}

@media print {
  /* True size on paper. The screen preview may have been scaled down to fit a
     phone; a label printed at 80% no longer fits the spool and the QR loses
     the module size a camera needs. */
  .spool-label {
    width: 9cm;
    border-style: solid;
    border-color: #999;
    break-inside: avoid;
  }
  .spool-label-preview { margin: 0; }
}

/* ── The scanned profile page ──────────────────────────────────────── */

.calibration-shared { max-width: 46rem; }
.calibration-shared .hero-title { margin-bottom: .25rem; }
.calibration-shared .hero-excerpt { margin-top: 0; color: var(--muted); }
.calibration-shared .section-title { margin-top: 2rem; }