/* ==========================================================================
   DINKOMART — HELP CENTRE, LIVE EXAMPLES
   docs/demo.css — the frame around each live example.

   ---------------------------------------------------------------------------
   WHY THIS FILE IS SHORT

   An earlier version of it was 600 lines, because it REBUILT the shop's
   components — a `.demo-card` that looked like a `.pcard`, a `.demo-chip`
   that looked like a filter chip — from the same design tokens. It looked
   right and it was still a drawing of the thing rather than the thing.

   Every example is now an <iframe> onto a real page of the shop in
   docs/live/, which loads the shop's own stylesheets and runs the shop's own
   code. So there is nothing left for this file to style except the frame
   around the example, and one diagram that has no component behind it.

   That also removes the problem the old approach had: none of the shop's CSS
   is loaded into this document, so it cannot fight guide.css for control of
   h3, table or .note. The iframe is the isolation.
   ========================================================================== */

/* ==========================================================================
   1. THE FRAME
   ========================================================================== */
.demo {
  margin: 2rem 0;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}

.demo-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* The badge that says "this one is real". Deliberately loud: the whole point
   of the block is that it is not another screenshot. */
.demo-tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--brand-fg);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}
.demo-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: demo-pulse 2.4s ease-in-out infinite;
}
@keyframes demo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .demo-tag::before { animation: none; } }

/* ==========================================================================
   2. THE EMBEDDED FRAGMENT

   Height is set by JS from the fragment's own postMessage. The value in the
   markup is a first guess that stops the page jumping while it loads.
   ========================================================================== */
.demo-live { display: block; }

.demo-frame {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  /* the fragment reports its own height; this transition stops a filter
     change from snapping the page under the reader's finger */
  transition: height var(--dur-2) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .demo-frame { transition: none; } }

/* Before the observer builds the frame, the slot holds its guessed height so
   the surrounding text does not reflow when it arrives. */
.demo-live:not([data-built]) {
  display: block;
  min-height: 120px;
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 8px,
      color-mix(in srgb, var(--fg-faint) 8%, transparent) 8px 9px);
}

.demo-stage { padding: 1.25rem; }

.demo-foot {
  padding: .7rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  font-size: var(--t-xs);
  color: var(--fg-subtle);
  line-height: 1.5;
}
.demo-foot b { color: var(--fg-muted); }

.demo-fallback {
  margin: 0;
  padding: 1.25rem;
  font-size: var(--t-sm);
  color: var(--fg-subtle);
}

/* ==========================================================================
   3. THE ORDER NUMBER — the one example with no component behind it.

   It is a diagram of a string format, not something the shop renders, so
   there is nothing real to embed and it is drawn here.
   ========================================================================== */
.demo-ref {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-family: var(--font-mono);
}
.demo-ref-part {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface);
}
.demo-ref-part b {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--fg);
}
.demo-ref-part span {
  font-size: var(--t-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* --fg-faint measured 4.16:1 here at 11px, under the 4.5 needed */
  color: var(--fg-subtle);
  text-align: center;
}
.demo-ref-part.is-key { border-color: var(--accent); background: var(--accent-soft); }
.demo-ref-part.is-key b { color: var(--accent-ink); }

.demo-ref-note {
  margin: .9rem 0 0;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.55;
}

/* ==========================================================================
   4. THE TOOLS ON THE HELP HOME PAGE

   docs/index.php carries three things that are NOT shop components, so there
   is nothing to embed and they are built here: a question box that looks
   words up in the catalogue, a "what is good now" strip, and a delivery-cost
   calculator.

   These were briefly broken. When the live examples moved to iframes this
   file was rewritten and the styling for them went with it, leaving an
   unstyled input and two empty boxes on the first page of the help centre.
   ========================================================================== */

/* --- the question box -------------------------------------------------- */
.ask {
  margin: 1.75rem 0 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.ask-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .1rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.ask-top > .ico { flex: none; width: 19px; height: 19px; color: var(--fg-faint); }
.ask-top input {
  flex: 1;
  min-width: 0;
  padding: .95rem 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-md);
}
.ask-top input::placeholder { color: var(--fg-faint); }
.ask-top input::-webkit-search-cancel-button { appearance: none; }

.ask-clear {
  flex: none;
  width: 34px; height: 34px;
  display: none;                 /* only once there is something to clear */
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--fg-subtle);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ask-clear:hover { background: var(--surface-sunk); color: var(--fg); }
.ask.has-q .ask-clear { display: grid; }

.ask-body { padding: 1rem .9rem; }

/* the suggested questions, shown until something is typed */
.ask-seeds { display: flex; flex-wrap: wrap; gap: .4rem; }
.ask.has-q .ask-seeds { display: none; }
.ask-seed {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ask-seed:hover { border-color: var(--brand); color: var(--brand-ink); }
/* Keyed to the pointer, not the width: a narrow desktop window is still a
   mouse, and a 44px chip row under a mouse looks clumsy. */
@media (pointer: coarse) {
  .ask-seed { min-height: 44px; }
  .now-crop { min-height: 44px; }
  .ask-top input { padding-block: 1.1rem; }
}

/* an answer */
.ask-hit {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}
.ask-hit:last-child { border-bottom: 0; }
.ask-hit > .ico { flex: none; margin-top: 2px; color: var(--brand); }
.ask-hit b { display: block; font-size: var(--t-sm); color: var(--fg); }
.ask-hit span { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }
.ask-hit .go {
  margin-left: auto;
  flex: none;
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  white-space: nowrap;
}
.ask-price {
  margin-left: auto;
  flex: none;
  align-self: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.ask-none {
  padding: .5rem 0;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.55;
}

.ask-foot {
  margin: 0;
  padding: .7rem .9rem;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  font-size: var(--t-xs);
  color: var(--fg-subtle);
  line-height: 1.55;
}

/* --- "what is good right now" ------------------------------------------ */
.now-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 1rem;
}
.now-head {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: .7rem;
}
.now-crops { display: flex; flex-wrap: wrap; gap: .4rem; }
.now-crop {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.now-crop:hover { border-color: var(--brand); color: var(--fg); }
.now-crop .ico { width: 14px; height: 14px; color: var(--brand); }
.now-crop .p { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--fg-subtle); }
.now-note { margin: .8rem 0 0; font-size: var(--t-sm); color: var(--fg-muted); line-height: 1.55; }

/* --- the delivery calculator ------------------------------------------- */
.calc {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 1.1rem;
}
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc-basket {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.calc-state {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--accent-ink);
}
.calc.is-free .calc-state { color: var(--success); }

.calc input[type=range] {
  width: 100%;
  margin: 1rem 0 .4rem;
  accent-color: var(--brand);
  height: 26px;
}
.calc-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-faint);
}

.calc-out {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.calc-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.calc-line span { color: var(--fg-muted); }
.calc-line b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.calc-line.is-total { padding-top: .5rem; border-top: 1px solid var(--border); font-size: var(--t-md); }
.calc-line.is-free b { color: var(--success); }

/* ==========================================================================
   5. THE VERIFICATION HATCH

   The storefront gets this from refine.css; this page does not load
   refine.css, so without it `data-flat` does nothing here.

   That mattered: an audit run against this page once reported 37 dark-theme
   contrast failures, every one of them a phantom read off a component still
   mid-transition after a theme flip. With transitions killed first the real
   number is zero. Set it BEFORE flipping data-theme, never after.
   ========================================================================== */
[data-flat] *,
[data-flat] *::before,
[data-flat] *::after {
  transition: none !important;
  animation: none !important;
}