/* ============================================================
   Pikt — What is reality capture worth at placement?
   Scoped to the placement-value page. Built entirely on the design
   system tokens in tokens/*.css; nothing here defines a colour or
   a font of its own.

   The page argues rather than only measures, so the reading blocks
   are prose and only the calculating parts keep instrument
   discipline: mono labels, tabular figures, hairline rules.
   ============================================================ */

.dsu { max-width: 880px; }

/* ---------- shared micro-label ----------
   .eyebrow is retired site-wide (display:none in site.css), so this
   page carries its own mono label role. */
.dsu__lab {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-tertiary);
}

.dsu__card {
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface-card); box-shadow: var(--shadow-xs);
  padding: clamp(20px, 2.4vw, 28px);
}
/* one spacing rule for the stack — no per-block margins to collide */
.dsu > * + * { margin-top: 18px; }

/* ---------- inputs ---------- */
.dsu__inputs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface-card); box-shadow: var(--shadow-xs);
  padding: clamp(18px, 2.2vw, 24px);
}
@media (min-width: 700px) { .dsu__inputs { grid-template-columns: repeat(3, 1fr); } }
.dsu__inputs .field { margin-bottom: 0; }
.dsu__inputs .field input {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  padding: 11px 12px; width: 100%;
}
.dsu__inputs .field input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.dsu__inputs .field input[type=number]::-webkit-outer-spin-button,
.dsu__inputs .field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dsu__unit { display: flex; max-width: 240px; margin-top: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.dsu__unit button {
  flex: 1; border: 0; background: var(--surface-card); cursor: pointer;
  padding: 10px 12px; color: var(--text-tertiary);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.dsu__unit button + button { border-left: 1px solid var(--border); }
.dsu__unit button:hover { color: var(--text-primary); }
.dsu__unit button[aria-pressed="true"] { background: var(--ink-900); color: var(--text-on-ink); }

/* ---------- the offset ---------- */
.dsu__askTop {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px; margin-top: 14px;
}
/* the prompt takes the row's remaining width so it sets on one line;
   the figure block sizes to its content and never shrinks */
.dsu__askTop p {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 15.5px; line-height: 1.5; color: var(--text-primary);
}
.dsu__askTop > div { flex: 0 0 auto; }
.dsu__figure {
  display: block; text-align: right; white-space: nowrap;
  font-family: var(--font-mono); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 5vw, 42px); line-height: 1; letter-spacing: -0.03em;
  color: var(--text-primary);
}
.dsu__sub {
  display: block; text-align: right; margin-top: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary);
}

/* one cell per day of the waiting period */
.dsu__strip {
  display: grid; grid-template-columns: repeat(var(--n, 45), 1fr);
  gap: 2px; height: 52px; margin-top: 22px;
}
.dsu__strip.is-dense { gap: 1px; }
@media (max-width: 620px) { .dsu__strip { gap: 1px; } }
.dsu__strip i {
  background: var(--paper-300); border-radius: 1px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
/* Recovered days are the good outcome, so they take the token set the
   design system already reserves for that (--risk-low). The repaying
   days are green-family-but-unfilled, so they read against the plain
   held days rather than merging into them. */
.dsu__strip i.be {
  background: var(--green-100);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-500) 60%, transparent);
}
.dsu__strip i.rec { background: var(--green-500); }

.dsu__key {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
}
.dsu__key span { display: inline-flex; align-items: center; gap: 8px; }
.dsu__sw {
  width: 11px; height: 11px; border-radius: 2px; flex: none;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.dsu__sw--be   { background: var(--green-100); border: 1px solid var(--green-500); }
.dsu__sw--rec  { background: var(--green-500); }
.dsu__sw--held { background: var(--paper-300); }

/* slider — sized for touch, not for a pointer */
.dsu__sliderwrap { margin-top: 24px; }
.dsu__slider {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.dsu__slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.dsu__slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--border); }
.dsu__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -11px; border-radius: 50%;
  background: var(--green-500); border: 2px solid var(--surface-card);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.dsu__slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border); }
.dsu__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-500); border: 2px solid var(--surface-card);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.dsu__tgtLabel {
  display: block; text-align: center; margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums;
  letter-spacing: .06em; color: var(--text-primary);
}
.dsu__scen {
  margin-top: 16px; font-size: 15.5px; line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- the punch: days against premium ---------- */
.dsu__punch {
  background: var(--surface-ink); color: var(--text-on-ink);
  border-radius: var(--radius-md); overflow: hidden; position: relative;
  padding: clamp(24px, 3vw, 36px);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.dsu__punch .dsu__lab { color: var(--text-on-ink-dim); position: relative; z-index: 1; }
.dsu__punch .big {
  position: relative; z-index: 1; margin-top: 12px;
  font-size: clamp(22px, 3.2vw, 34px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.16;
  /* not text-wrap:balance — balancing deliberately shortens both lines,
     which is what left the void on the right of the ink block */
  color: var(--text-on-ink); text-wrap: pretty;
}
.dsu__punch p {
  position: relative; z-index: 1; margin-top: 18px;
  font-size: 16px; line-height: 1.6; color: var(--text-on-ink-dim);
}

/* ---------- prose ---------- */
.dsu__prose p {
  margin-top: 14px; font-size: 16.5px; line-height: 1.65;
  color: var(--text-secondary);
}

/* ---------- three audiences ---------- */
.dsu__three {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface-card); box-shadow: var(--shadow-xs); overflow: hidden;
}
@media (min-width: 760px) { .dsu__three { grid-template-columns: repeat(3, 1fr); } }
.dsu__third { padding: clamp(20px, 2.4vw, 28px); }
.dsu__third + .dsu__third { border-top: 1px solid var(--border-soft); }
@media (min-width: 760px) {
  .dsu__third + .dsu__third { border-top: 0; border-left: 1px solid var(--border-soft); }
}
.dsu__third p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--text-secondary); }
/* the column label is the site's own .panel__tag (mono + accent pip),
   not a pill — pills are reserved here for status and filters */
.dsu__third .panel__tag { margin-bottom: 14px; }

/* ---------- actions & footnote ---------- */
.dsu__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dsu__actions .msg {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--text-tertiary);
}
.dsu__foot { padding-top: 20px; border-top: 1px solid var(--border-soft); }
.dsu__foot p { font-size: 13px; line-height: 1.65; color: var(--text-tertiary); }

/* ---------- narrow ---------- */
@media (max-width: 560px) {
  .dsu__inputs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dsu__askTop { gap: 10px; }
  .dsu__askTop p { flex: 1 1 100%; font-size: 15px; }
  .dsu__figure, .dsu__sub { text-align: left; }
}

/* ============================================================
   PRINT — a worked example for a slip pack.
   The slider and the buttons are controls, not findings.
   ============================================================ */
@media print {
  .nav, .foot, .grid-bg, .dsu__slider, .dsu__actions { display: none !important; }

  html, body { background: #fff; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* the ink header band would print as a solid black slab */
  .pagehead { background: #fff; color: var(--ink-900); }
  .pagehead__in { padding: 0 0 20px; }
  .pagehead h1 { color: var(--ink-900); font-size: 26pt; }
  .pagehead .lead { color: var(--ink-700); }

  .wrap { max-width: none; padding: 0; }
  .sec { padding: 0 0 12pt; }
  .dsu { max-width: none; }

  .dsu__card, .dsu__inputs, .dsu__three, .dsu__punch {
    box-shadow: none; border-color: var(--ink-200);
    break-inside: avoid; page-break-inside: avoid;
  }
  .dsu__three { grid-template-columns: repeat(3, 1fr); }
  .dsu__sliderwrap { margin-top: 12pt; }
  a[href]::after { content: none !important; }
}

/* ============================================================
   EMAIL THE WORKED EXAMPLE
   The one place on this page where anything leaves the browser,
   and only when the reader asks for it.
   ============================================================ */
.dsu__sendgrid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  margin-top: 18px; align-items: start;
}
@media (min-width: 760px) {
  .dsu__sendgrid { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
}
.dsu__send h3 {
  font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.25; color: var(--text-primary); max-width: 22ch;
}
.dsu__send h3 + p {
  margin-top: 12px; font-size: 14.5px; line-height: 1.62; color: var(--text-secondary);
}
/* the form column carries its own rhythm — one gap rule, no stacked margins */
.dsu__sendform { display: grid; gap: 16px; }
.dsu__sendform .field { margin-bottom: 0; gap: 8px; }
.dsu__sendform .field input { font-family: var(--font-sans); }

.dsu__consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary);
  cursor: pointer;
}
.dsu__consent input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.dsu__consent a { color: var(--accent); border-bottom: 1px solid rgba(223,35,33,.32); }
.dsu__consent a:hover { border-bottom-color: var(--accent); }

.dsu__sendrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 2px; }
.dsu__sendmsg { font-size: 13px; line-height: 1.45; color: var(--text-tertiary); }
.dsu__sendmsg.is-ok { color: var(--risk-low); }
.dsu__sendmsg.is-bad { color: var(--accent); }

/* honeypot — off-screen rather than display:none, which some bots skip */
#sendCompany { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.dsu__sendnote {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-soft);
  font-size: 12.5px; line-height: 1.6; color: var(--text-tertiary);
}
/* belt and braces: the honeypot is also hidden inline on the element, so a
   stale or missing stylesheet can never leave a mystery empty box on the form */

@media print { .dsu__send { display: none !important; } }