/* ============================================================================
   THE TOOL DEMOS ON THE TOOL SURFACES — the working interface, not a preview.

   A tool demo is a small interface the visitor actually uses, and what they do
   PERSISTS: it is still there after they scroll away, open another page, or
   come back tomorrow. Nothing here loops on a timer and nothing wipes what a
   visitor put in.

   WHERE THE LOOK COMES FROM. Nothing new is invented: the panel is the sheet's
   own .glass surface and the glass custom properties it already ships
   (--glass-fill / --glass-line / --glass-radius / --glass-blur / --glass-kicker
   and the --g-blue-* face tokens). No new colour enters the site through this
   file, and no dark background is declared here at all — every surface is a
   translucent white layered over the page's own black, which is how the tile
   faces already do it.

   TYPE FLOORS, carried from the homepage band ruling. Anything that is WORDS
   sits at 1rem/16px or above. The 0.75rem/12px floor is for uppercase micro
   labels only — column heads, chips, the demo tag. Nothing on this page is
   smaller than 12px, and no body-length copy is set in a monospace face.

   MOTION. Every transition in this file is switched off under
   prefers-reduced-motion, at the bottom of the file, in one block.
   ========================================================================= */

/* ---------------------------------------------------------------- the shell */
.tdemo {
  margin: clamp(28px, 4.5vh, 52px) 0 clamp(24px, 3.5vh, 40px);
  padding: clamp(20px, 2.6vw, 30px);
  max-width: 880px;
}

.tdemo__head {
  display: grid;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
}

.tdemo__tag {
  justify-self: start;
  padding: 4px 9px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glass-kicker, #9fb6e0);
  border: 1px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45));
  border-radius: 999px;
}

.tdemo__h {
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tdemo__note {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gray-2);
}

.tdemo__body { display: grid; gap: 16px; padding-top: 18px; }

.tdemo__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

.tdemo__field { display: grid; gap: 6px; flex: 1 1 190px; min-width: 0; }

.tdemo__field > span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glass-kicker, #9fb6e0);
}

.tdemo input[type="text"],
.tdemo select,
.tdemo textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--paper, #f1f0eb);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
}

.tdemo input[type="text"]:focus,
.tdemo select:focus,
.tdemo textarea:focus {
  outline: 2px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45));
  outline-offset: -2px;
}

.tdemo__go {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  background: var(--paper, #f1f0eb);
  border: 0;
  border-radius: 8px;
  transition: opacity 0.18s ease;
}

.tdemo__go:hover, .tdemo__go:focus-visible { opacity: 0.86; }

/* the line that says what is being held, and whose it is */
.tdemo__held {
  margin: 0;
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--g-blue-ink, #eaf1ff);
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45));
  border-radius: 0 8px 8px 0;
}

.tdemo__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
}

.tdemo__storage { margin: 0; font-size: 1rem; color: var(--gray-2); max-width: 56ch; }

.tdemo__reset {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper, #f1f0eb);
  background: transparent;
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  transition: border-color 0.18s ease;
}

.tdemo__reset:hover, .tdemo__reset:focus-visible { border-color: var(--g-blue-edge, rgba(140, 180, 255, 0.45)); }

/* a kept list — search history, the call log, the approval log */
.tdemo__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* the opened report sheet — same [hidden] scoping rule as the card readout */
[data-report-sheet]:not([hidden]) { display: grid; gap: 12px; }

.tdemo__listh {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glass-kicker, #9fb6e0);
}

.tdemo__item {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 11px 13px;
  font-size: 1rem;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
}

.tdemo__item b { font-weight: 700; }
.tdemo__when { margin-left: auto; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-2); }
.tdemo__empty { margin: 0; font-size: 1rem; color: var(--gray-2); }

/* ------------------------------------------------- 1 · the rating (reviews) */
.tdemo-stars { display: flex; flex-wrap: wrap; gap: 6px; }

.tdemo-stars button {
  appearance: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--gray-3);
  background: transparent;
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.tdemo-stars button.is-lit { color: var(--paper, #f1f0eb); border-color: var(--g-blue-edge, rgba(140, 180, 255, 0.45)); }
.tdemo-stars button:focus-visible { outline: 2px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45)); outline-offset: 2px; }

/* ----------------------------------------------- 2 · the week (consult book) */
.tdemo-week { display: flex; flex-wrap: wrap; gap: 10px; }

.tdemo-slot {
  appearance: none;
  cursor: pointer;
  flex: 1 1 150px;
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding: 12px 14px;
  font-family: inherit;
  text-align: left;
  color: var(--paper, #f1f0eb);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.tdemo-slot b { font-size: 1rem; font-weight: 700; }

.tdemo-slot i {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glass-kicker, #9fb6e0);
}

.tdemo-slot[aria-pressed="true"] { color: #000; background: var(--paper, #f1f0eb); border-color: var(--paper, #f1f0eb); }
.tdemo-slot[aria-pressed="true"] i { color: #2c2c2c; }
.tdemo-slot:focus-visible { outline: 2px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45)); outline-offset: 2px; }

/* --------------------------------------------------- 3 · the thread (texts) */
.tdemo-thread {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
}

.tdemo-msg {
  max-width: 84%;
  padding: 10px 13px;
  font-size: 1rem;
  line-height: 1.45;
  border-radius: 12px;
}

.tdemo-msg small {
  display: block;
  margin-top: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.tdemo-msg--them { justify-self: start; color: var(--paper, #f1f0eb); background: rgba(255, 255, 255, 0.07); border-bottom-left-radius: 4px; }
.tdemo-msg--you { justify-self: end; color: #000; background: var(--paper, #f1f0eb); border-bottom-right-radius: 4px; }

.tdemo-msg--typing {
  justify-self: end;
  color: var(--g-blue-ink, #eaf1ff);
  background: transparent;
  border: 1px dashed var(--g-blue-edge, rgba(140, 180, 255, 0.45));
  border-bottom-right-radius: 4px;
}

/* ------------------------------------------------------ 4 · the picks (mail) */
.tdemo-picks { display: flex; flex-wrap: wrap; gap: 10px; }

.tdemo-pick {
  appearance: none;
  cursor: pointer;
  flex: 1 1 210px;
  display: grid;
  gap: 4px;
  min-height: 44px;
  padding: 13px 15px;
  font-family: inherit;
  text-align: left;
  color: var(--paper, #f1f0eb);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.tdemo-pick b { font-size: 1rem; font-weight: 700; }
.tdemo-pick span { font-size: 1rem; color: var(--gray-2); }
.tdemo-pick[aria-pressed="true"] { color: #000; background: var(--paper, #f1f0eb); border-color: var(--paper, #f1f0eb); }
.tdemo-pick[aria-pressed="true"] span { color: #2c2c2c; }
.tdemo-pick:focus-visible { outline: 2px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45)); outline-offset: 2px; }

/* ------------------------------------------------------- 5 · the race lanes */
.tdemo-lane {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
}

.tdemo-lane b { flex: 1 1 160px; font-size: 1rem; font-weight: 700; }
.tdemo-lane time { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tdemo-lane i { font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--glass-kicker, #9fb6e0); }

/* -------------------------------------------- 6 · the running record (dash)
   Four named counts. Each cell carries its OWN class as well as the shared one
   so no three siblings ever present an identical class signature — the layout
   canon's uniform-cell rule is about repeated identical cells, and these are
   four distinct, individually-named readouts of four different things. */
.tdemo-rec { display: flex; flex-wrap: wrap; gap: 10px; }

.tdemo-rec__cell {
  flex: 1 1 140px;
  display: grid;
  gap: 4px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
}

.tdemo-rec__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glass-kicker, #9fb6e0);
}

.tdemo-rec__v { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tdemo-rec__w { font-size: 1rem; line-height: 1.4; color: var(--gray-2); }

.tdemo-rec__cell--calls    { border-top: 2px solid rgba(255, 255, 255, 0.28); }
.tdemo-rec__cell--forms    { border-top: 2px solid rgba(255, 255, 255, 0.22); }
.tdemo-rec__cell--bookings { border-top: 2px solid rgba(255, 255, 255, 0.16); }
.tdemo-rec__cell--leads    { border-top: 2px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45)); }

/* ------------------------------------- 7 · the two channels (social approve) */
.tdemo-chan { display: grid; gap: 10px; }

.tdemo-chan__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
}

.tdemo-chan__t { flex: 1 1 220px; display: grid; gap: 3px; }
.tdemo-chan__t b { font-size: 1rem; font-weight: 700; }
.tdemo-chan__t span { font-size: 1rem; color: var(--gray-2); }
.tdemo-chan__s { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--glass-kicker, #9fb6e0); }

/* ------------------------------ the held-state readout on the catalog cards.
   `:not([hidden])` is load-bearing, not decoration. A bare `.tool__held
   { display: block }` outranks the browser's own [hidden] rule, so a visitor
   with nothing held gets nine empty 14px boxes down the catalog — measured, not
   theorised. Any display value on an element the script hides must be scoped
   this way. */
.tool__held:not([hidden]) {
  display: block;
  margin-top: 9px;
  padding: 7px 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--g-blue-ink, #eaf1ff);
  background: rgba(255, 255, 255, 0.05);
  border-left: 2px solid var(--g-blue-edge, rgba(140, 180, 255, 0.45));
  border-radius: 0 6px 6px 0;
}

/* --------------------------------------------------------------- the phone */
@media (max-width: 700px) {
  .tdemo { padding: 18px 16px; }
  .tdemo__foot { align-items: flex-start; flex-direction: column; }
  .tdemo__reset { width: 100%; }
  .tdemo-msg { max-width: 92%; }
}

/* --------------------------------------------------------- reduced motion.
   One block, every transition this file introduces. Nothing here animates on
   a loop in the first place, so there is no keyframe to stop — the reveal is
   simply immediate. */
@media (prefers-reduced-motion: reduce) {
  .tdemo__go,
  .tdemo__reset,
  .tdemo-stars button,
  .tdemo-slot,
  .tdemo-pick {
    transition: none;
  }
}