/* ==========================================================================
   AURA — content-page components
   --------------------------------------------------------------------------
   The machinery the download, developer and legal pages are built from:
   numbered steps, accordions, data tables, code blocks, prose. Split out of
   components.css so neither file outgrows a single reading.

   Depends on aura.css for tokens and components.css for shared surfaces.
   Load third.
   ========================================================================== */


/* --------------------------------------------------------------------------
   10. Steps (download page)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1px;
  background: var(--outline);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  overflow: hidden;
  counter-reset: step;
}

.step {
  background: var(--canvas-high);
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.step__n {
  counter-increment: step;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px solid var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.step__n::before {
  content: counter(step);
}

/* --- checkable steps (added by script; absent without JS) ---------------- */

.step__check {
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The checkbox is hidden but still focusable and still the thing that gets
   toggled — the numbered box beside it is only its visual. */
.step__box {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.step__check:hover .step__n {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.step__box:focus-visible + .step__n {
  outline: 2px solid var(--blood);
  outline-offset: 3px;
}

.step.is-done .step__n {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--canvas-high);
}

/* The number is replaced by a tick, not covered by one: once a step is done
   its position matters less than its state. */
.step.is-done .step__n::before {
  content: "✓";
  font-size: 0.9375rem;
}

.step.is-done .step__t {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  color: var(--text-secondary);
}

.step.is-done > div:last-child {
  opacity: 0.55;
}

.steps__progress {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.steps__progress b {
  color: var(--text-primary);
  font-weight: 600;
}

.steps__hint {
  font-size: 0.8125rem;
}

.steps__reset {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--outline);
  padding: 0 0 1px;
  cursor: pointer;
  margin-left: auto;
}

.steps__reset:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.step__t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

/* Capped at a comfortable measure. The step column is wide so the number and
   the copy align, but 100+ character lines are hard to track back from. */
.step > div {
  max-width: 74ch;
}

.step__d {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.step__d + .step__d,
.step__d + .note,
.step__d + .path {
  margin-top: 0.9rem;
}

@media (max-width: 560px) {
  .step {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* A literal settings path, formatted as one. */
.path {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  color: var(--text-primary);
}

.path b {
  font-weight: 600;
}

.path i {
  font-style: normal;
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   10a. Desktop → phone handoff
   --------------------------------------------------------------------------
   A visitor on a laptop can't install an APK on it. Rather than let them click
   a download button that produces a useless file, say so and hand them the
   address to open on the phone.

   Hidden on Android by an attribute set in <head>, not by the deferred script,
   so an Android visitor never sees it flash before it disappears.
   -------------------------------------------------------------------------- */

:root[data-android] [data-platform-note] {
  display: none !important;
}

.handoff {
  margin-top: 1.5rem;
  border: 1px solid var(--outline);
  border-radius: var(--r-card-sm);
  background: var(--canvas-high);
  padding: 1.15rem 1.35rem;
  max-width: 46ch;
}

.handoff__k {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.7rem;
}

.handoff__k svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.handoff p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 0.9rem;
}

.handoff__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.handoff__url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.handoff__copy {
  flex: none;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 0.95rem;
  border-radius: var(--r-chip);
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.handoff__copy:hover {
  border-color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   10b. Brand picker
   --------------------------------------------------------------------------
   Seven accordion rows is a scan; seven chips is a glance. The picker is built
   from the accordion itself at runtime and stays hidden without JavaScript, so
   the accordion remains the accessible baseline rather than being replaced by
   something that needs scripting to work.
   -------------------------------------------------------------------------- */

.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
  align-items: center;
}

.picker[hidden] {
  display: none;
}

.picker__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-right: 0.35rem;
}

.picker__chip {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.55rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--outline);
  background: var(--canvas-high);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.picker__chip:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.picker__chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-on-ink);
}

:root[data-theme="dark"] .picker__chip[aria-pressed="true"] {
  background: var(--text-on-ink);
  border-color: var(--text-on-ink);
  color: var(--ink);
}

/* The detected device. Deliberately NOT red — a guess about your phone is not
   an alert, and red here would compete with the restricted-settings warning
   that genuinely needs it. */
.picker__chip[data-detected]::after {
  content: "your phone";
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 0.5rem;
  opacity: 0.65;
}

.picker__note {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.35rem 0 0;
}

/* --------------------------------------------------------------------------
   11. Accordion (per-device instructions, FAQ)
   -------------------------------------------------------------------------- */

.acc {
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--canvas-high);
}

.acc details + details {
  border-top: 1px solid var(--outline);
}

.acc summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem clamp(1.15rem, 1rem + 0.7vw, 1.75rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.012em;
  transition: background var(--t-fast) var(--ease);
}

.acc summary::-webkit-details-marker {
  display: none;
}

.acc summary:hover {
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.acc__hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  font-weight: 400;
  text-align: right;
}

.acc__chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--text-secondary);
  transition: transform var(--t-normal) var(--ease);
}

.acc details[open] .acc__chev {
  transform: rotate(180deg);
}

.acc__body {
  padding: 0 clamp(1.15rem, 1rem + 0.7vw, 1.75rem) 1.5rem;
  max-width: 78ch;
}

.acc__body ol,
.acc__body ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.acc__body li::marker {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.8em;
}

.acc__body b {
  color: var(--text-primary);
  font-weight: 600;
}

.acc__body > p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.acc__body > p:not(:last-child) {
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  background: var(--canvas-high);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 520px;
}

table.data th,
table.data td {
  text-align: left;
  padding: 1rem 1.25rem;
  vertical-align: top;
  line-height: 1.55;
}

table.data thead th {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
  border-bottom: 1px solid var(--outline);
  white-space: nowrap;
}

table.data tbody tr + tr td {
  border-top: 1px solid var(--outline);
}

table.data td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

table.data td.desc {
  color: var(--text-secondary);
  font-weight: 400;
  white-space: normal;
}

.tier {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--outline);
  color: var(--text-secondary);
  white-space: nowrap;
}

.tier--req {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* On ink the canvas-world colours vanish into the background. "Required" has to
   be the loudest thing in its column, so it inverts to a filled chip rather
   than merely swapping its ink for canvas. */
.ink .tier {
  border-color: var(--outline-on-ink);
  color: var(--text-on-ink-dim);
}

.ink .tier--req {
  background: var(--text-on-ink);
  border-color: var(--text-on-ink);
  color: var(--ink);
  font-weight: 700;
}

/* The table on ink needs its own separators and text colours too. */
.ink .tablewrap {
  background: var(--ink-soft);
  border-color: var(--outline-on-ink);
}

.ink table.data thead th {
  color: var(--text-on-ink-dim);
  border-bottom-color: var(--outline-on-ink);
}

.ink table.data tbody tr + tr td {
  border-top-color: var(--outline-on-ink);
}

.ink table.data td:first-child {
  color: var(--text-on-ink);
}

.ink table.data td.desc {
  color: var(--text-on-ink-dim);
}

/* --------------------------------------------------------------------------
   13. Code blocks
   -------------------------------------------------------------------------- */

.code {
  position: relative;
  background: var(--ink);
  color: var(--text-on-ink);
  border-radius: var(--r-card-sm);
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  border: 1px solid var(--outline-on-ink);
}

.code pre {
  margin: 0;
  font: inherit;
}

.code .c {
  color: var(--text-on-ink-dim);
}

.code .p {
  color: var(--text-on-ink-dim);
  user-select: none;
}

.copy {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid var(--outline-on-ink);
  background: var(--ink-soft);
  color: var(--text-on-ink-dim);
  border-radius: 7px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.copy:hover {
  color: var(--text-on-ink);
  border-color: var(--text-on-ink-dim);
}

.hash {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  word-break: break-all;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* A 64-character string is miserable to select by hand on a phone. */
.hashrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.85rem 1rem;
  border-radius: var(--r-chip);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.hashrow .handoff__copy {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  background: var(--canvas-high);
}

/* --------------------------------------------------------------------------
   14. Download hero
   -------------------------------------------------------------------------- */

.dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.dl__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--outline);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  overflow: hidden;
}

.fact {
  background: var(--canvas-high);
  padding: 1.15rem 1.3rem;
}

.fact__k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.fact__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.fact__v small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0;
  font-family: var(--font-body);
  margin-left: 0.35em;
}

@media (max-width: 860px) {
  .dl {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.band {
  text-align: center;
  padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem);
}

.band .t-section {
  max-width: 18ch;
  margin-inline: auto;
}

.band .t-lead {
  max-width: 46ch;
  margin: 1.5rem auto 0;
}

.band__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   16. Prose (privacy / terms)
   -------------------------------------------------------------------------- */

.prose {
  max-width: 68ch;
}

.prose h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.prose h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.prose p,
.prose li {
  color: var(--text-secondary);
  line-height: 1.75;
}

.prose ul {
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.prose a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--outline);
}

.prose a:hover {
  text-decoration-color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   17. Video slot — used only where a recording adds something a drawing can't
   -------------------------------------------------------------------------- */

.slot {
  position: relative;
  border-radius: var(--r-card-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px dashed var(--outline);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
}

.slot video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Set once the file answers. Until then the dashed frame and its caption are
   the whole content of the slot, which is the point: a missing recording has
   to read as a labelled gap, never as a broken player. */
.slot.has-video {
  border-style: solid;
  border-color: var(--outline);
}

.slot__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--text-secondary);
}

.slot__label b {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   17a. Demo reel
   --------------------------------------------------------------------------
   Recordings are intentionally additive. The copy and tool names remain useful
   before a video exists, while a loaded file takes over the same reserved frame.
   -------------------------------------------------------------------------- */

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.demo-card {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: 1rem;
  transition: border-color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}

.demo-card--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
  align-items: center;
}

.demo-card:hover {
  border-color: color-mix(in srgb, var(--text-primary) 34%, transparent);
  transform: translateY(-2px);
}

.demo-slot {
  aspect-ratio: 1080 / 2414;
  padding: 0;
}

.demo-slot video {
  display: none;
  object-fit: contain;
  background: #0b0b0b;
}

.demo-slot--feature {
  aspect-ratio: 16 / 9;
  padding: 0;
  background: #0b0b0b;
}

.demo-slot--feature video {
  object-fit: contain;
}

@media (max-width: 760px) {
  .demo-card--feature {
    grid-template-columns: 1fr;
  }
}

.demo-card__copy {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0 0.35rem 0.35rem;
  flex: 1;
  min-height: 0;
}

.demo-card__copy .tools {
  margin-top: auto;
  padding-top: 0.25rem;
}

@media (max-width: 920px) {
  .demo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }

  .demo-card:last-child {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   17aa. Working traces — the portrait demo cards
   A card's log block is filled from assets/data/traces.json (built by
   site/scripts/build-traces.py pulling session logs off a phone over adb).
   The card shows the top of the log; the button opens the complete working
   trace in the modal below. Red appears only when a step failed.
   -------------------------------------------------------------------------- */

.demo-card__trace {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.1rem;
  padding: 0.85rem;
  border: 1px solid var(--outline);
  border-radius: var(--r-card-sm);
  background: color-mix(in srgb, var(--text-primary) 2.5%, transparent);
}

.trace__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trace__chip {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  border: 1px solid var(--outline);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trace__chip b {
  color: var(--text-primary);
  font-weight: 600;
}

.trace__line {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.trace__line b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.trace__btn {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.trace__btn svg {
  width: 14px;
  height: 14px;
}

/* --- the full-trace modal ------------------------------------------------ */

.trace-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  animation: trace-fade var(--t-normal) var(--ease);
}

.trace-modal[hidden] {
  display: none;
}

@keyframes trace-fade {
  from {
    opacity: 0;
  }
}

.trace-panel {
  width: min(760px, 100%);
  max-height: min(84vh, 960px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--canvas-high);
  border: 1px solid var(--outline);
  border-radius: var(--r-card);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 40px 90px -30px rgba(0, 0, 0, 0.55);
  animation: trace-rise var(--t-normal) var(--ease-out-expo);
}

@keyframes trace-rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

.trace-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.5rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--outline);
}

.trace-panel__head > div {
  min-width: 0;
}

.trace-panel__title {
  margin: 0.2rem 0 0.45rem;
}

.trace-panel__cmd {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.trace-panel__close {
  flex: none;
  margin-left: auto;
}

.trace-panel__result {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--outline);
  background: color-mix(in srgb, var(--text-primary) 2%, transparent);
}

.trace-panel__result .trace__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.trace-panel__result-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.trace-panel__steps {
  padding: 0.25rem 1.5rem 0.75rem;
}

.trace-step {
  padding: 0.9rem 0;
  border-top: 1px solid var(--outline);
}

.trace-step:first-child {
  border-top: none;
}

.trace-step__head {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.trace-step__time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  flex: none;
}

.trace-step__tool {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
}

.trace-step__ms {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-left: auto;
}

.trace-step__badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blood-on-container);
  background: var(--blood-container);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

.trace-step.is-fail .trace-step__tool {
  color: var(--blood);
}

.trace-step__args,
.trace-step__out {
  margin: 0.4rem 0 0 1.65rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.trace-step__args {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.trace-step__out {
  color: var(--text-primary);
}

.trace-panel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  padding: 0.9rem 1.5rem 1.25rem;
  border-top: 1px solid var(--outline);
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .trace-panel__head,
  .trace-panel__result,
  .trace-panel__steps {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .trace-step__args,
  .trace-step__out {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trace-modal,
  .trace-panel {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   17b. ADB developer bridge
   -------------------------------------------------------------------------- */

.adb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}

.adb-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.adb-card .code {
  margin-top: auto !important;
}

.adb-slot {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.adb-slot video {
  display: none;
  object-fit: contain;
  background: #0b0b0b;
}

@media (max-width: 760px) {
  .adb-slot {
    aspect-ratio: 16 / 10;
  }
}