/* case-deep-research.html only: styles for this case study's own screens and sections.
   Shared patterns live in case-study.css (page) and case-ui.css (product UI).
   Everything product-side is prefixed dr- and scoped under .ui, so it reads the
   same tokens as the shared kit and follows the page's colour mode with it. */

/* --------------------------------------------------------------------------
   Tokens: the product's own indigo, taken from its logo, in place of the
   kit's default blue.
   -------------------------------------------------------------------------- */

.ui { --ui-accent: #4a5bea; }
.page-wrap:not(.light-mode) .ui { --ui-accent: #8a99ff; }

/* --------------------------------------------------------------------------
   App shell. A screen is a whole app view: it stretches to whatever height
   its frame gives it (the laptop in the Work cards asks for ~700px), and the
   rail and aside run to the bottom instead of stopping under their content.
   -------------------------------------------------------------------------- */

.ui .ui-win.dr-app { display: flex; flex-direction: column; }
.ui .dr-app > .ui-body { flex: 1; }
.ui .dr-app .ui-bar { gap: 18px; padding: 10px 16px; }
.ui .dr-app .ui-rail { padding: 16px 10px 12px; }
.ui .dr-app .ui-main { padding: 20px 22px 22px; }
.ui .dr-app .ui-aside { padding: 16px 14px; }
.ui .dr-app .ui-foot { margin: 16px -22px -22px; padding: 11px 22px; }

.ui .dr-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 240px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-panel);
  color: var(--ui-ink-3);
  font-size: 10.5px;
  white-space: nowrap;
}

.ui .dr-search .i { width: 11px; height: 11px; }
.ui .dr-search > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui .dr-search + .ui-user { margin-left: 0; }

.ui .dr-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: var(--ui-ink-2);
}

.ui .dr-bell .i { width: 13px; height: 13px; }

.ui .dr-bell i {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-bad);
  box-shadow: 0 0 0 1.5px var(--ui-bg);
}

/* Rail: navigation with icons and counts, then context for the current view. */
.ui .dr-app .ui-rail .ui-rail-label:not(:first-child) { margin-top: 16px; }
.ui .dr-app .ui-nav { align-items: center; }
.ui .dr-app .ui-nav .ui-dot { margin-top: 0; }
.ui .dr-app .ui-nav > .i { width: 12px; height: 12px; color: var(--ui-ink-3); }
.ui .dr-app .ui-nav.is-on > .i { color: var(--ui-accent); }

.ui .dr-count {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-sunken);
  color: var(--ui-ink-3);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  line-height: 15px;
}

.ui .dr-count.is-warn {
  background: color-mix(in srgb, var(--ui-warn) var(--ui-tint), transparent);
  color: color-mix(in srgb, var(--ui-warn) 70%, var(--ui-ink));
}

.ui .dr-client {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--ui-radius-sm);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ui-ink);
  min-width: 0;
}

.ui .dr-client > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .dr-client small { display: block; font-size: 9px; font-weight: 500; color: var(--ui-ink-3); }

/* Client monograms: colour tells clients apart at a glance in lists. */
.ui .dr-mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #4f7bff, #5b3fd6);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .02em;
}

.ui .dr-mono.is-b { background: linear-gradient(135deg, #14b8a6, #0e7490); }
.ui .dr-mono.is-c { background: linear-gradient(135deg, #f59e0b, #c2410c); }
.ui .dr-mono.is-d { background: linear-gradient(135deg, #64748b, #334155); }

.ui .dr-spacer { flex: 1; min-height: 16px; }

.ui .dr-railcard {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ui-warn) 35%, var(--ui-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ui-warn) 7%, var(--ui-bg));
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--ui-ink-2);
}

.ui .dr-railcard.is-info {
  border-color: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-bg));
}

.ui .dr-railcard b {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  font-size: 10.5px;
  color: var(--ui-ink);
}

.ui .dr-railcard b .i { width: 11px; height: 11px; color: color-mix(in srgb, var(--ui-warn) 80%, var(--ui-ink)); }
.ui .dr-railcard.is-info b .i { color: var(--ui-accent); }
.ui .dr-railcard .ui-linkish { display: block; margin-top: 6px; font-size: 10px; }

.ui .dr-outline {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 10.5px;
  color: var(--ui-ink-2);
  min-width: 0;
}

.ui .dr-outline.is-on { background: var(--ui-sunken); color: var(--ui-ink); font-weight: 600; }

.ui .dr-outline .grip {
  width: 6px;
  height: 10px;
  flex: none;
  background: radial-gradient(circle, var(--ui-ink-3) 1px, transparent 1.3px) 0 0 / 3px 3.3px;
  opacity: .7;
}

.ui .dr-rail-link { display: flex; align-items: center; gap: 5px; margin: 6px 8px 0; }
.ui .dr-rail-link .i { width: 10px; height: 10px; }

/* Key and value rows, for the summary of a briefing or a run. */
.ui .dr-kv { display: grid; margin-bottom: 14px; }

.ui .dr-kv > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ui-line-soft);
  font-size: 10px;
  color: var(--ui-ink-3);
}

.ui .dr-kv b { min-width: 0; font-weight: 600; color: var(--ui-ink); text-align: right; }
.ui .dr-kv b.ui-when { justify-items: end; }
.ui .dr-kv.is-rail { margin: 0 8px; }
.ui .dr-kv.is-rail > div { flex-direction: column; gap: 1px; padding: 6px 0; }
.ui .dr-kv.is-rail b { text-align: left; font-size: 10.5px; }

.ui .dr-acts { display: flex; gap: 6px; flex: none; }
.ui .dr-req { color: var(--ui-bad); }

/* --------------------------------------------------------------------------
   01 Start
   -------------------------------------------------------------------------- */

.ui .dr-app .ui-ucs { gap: 10px; }
.ui .dr-app .ui-uc { padding: 13px 14px; }
.ui .dr-app .ui-uc .ui-linkish { margin: 0; }

.ui .dr-k { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ui .dr-k .i { width: 11px; height: 11px; }

.ui .dr-prev-t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ui-ink);
}

.ui .dr-prev-t span { font-size: 9.5px; font-weight: 500; color: var(--ui-ink-3); }
.ui .dr-preview .ui-sec { background: var(--ui-bg); }

.ui .dr-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 8px;
}

.ui .dr-sechead.is-first { margin-top: 2px; }
.ui .dr-sechead .ui-linkish { margin: 0; }

.ui .dr-tablewrap {
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ui-bg);
}

.ui .dr-table th { background: var(--ui-panel); padding: 7px 12px; }
.ui .dr-table td { padding: 8px 12px; white-space: nowrap; }
.ui .dr-table td:first-child { width: 38%; }
.ui .dr-table .ui-file .dr-mono { width: 22px; height: 22px; }
.ui .dr-muted { color: var(--ui-ink-3); }

.ui .dr-who { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-ink); }

/* --------------------------------------------------------------------------
   02 Briefing
   -------------------------------------------------------------------------- */

.ui .dr-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.ui .dr-input { display: flex; align-items: center; gap: 7px; color: var(--ui-ink); white-space: nowrap; overflow: hidden; }
.ui .dr-input .i { width: 11px; height: 11px; color: var(--ui-ink-3); }
.ui .dr-input .dr-mono { width: 16px; height: 16px; border-radius: 4px; font-size: 6.5px; }
.ui .dr-input .dr-caret { margin-left: auto; }
.ui .dr-app .ui-tag .i { width: 10px; height: 10px; }
.ui .dr-app .ui-tag[data-at]:not(.is-on) { opacity: .45; }
.ui .dr-app .ui-tag.is-on { background: var(--ui-sunken); border-color: var(--ui-line); color: var(--ui-ink); }

.ui .dr-note-sm { align-items: flex-start; margin: 0; }

/* --------------------------------------------------------------------------
   03 Running: the agent, and a log of what it has read so far
   -------------------------------------------------------------------------- */

.ui .dr-app .ui-stage { padding: 10px 12px; }

.ui .dr-agent {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--ui-line);
}

.ui .dr-agent .ui-graph { margin-top: 8px; padding-top: 0; border-top: 0; }
.ui .dr-agent .ui-graph .ui-node { margin-right: 12px; }
.ui .dr-agent .ui-graph .ui-node:not(:last-child)::after { right: -10px; width: 8px; }
.ui .dr-agent .ui-node .i { width: 10px; height: 10px; margin-right: 3px; vertical-align: -1px; }

.ui .dr-log { list-style: none; margin: 0; padding: 0; }

.ui .dr-log li {
  --tone: var(--ui-accent);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0 0 13px;
  font-size: 9.5px;
  color: var(--ui-ink-3);
  transition: opacity .45s ease;
}

.ui .dr-log li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 25px;
  bottom: 3px;
  width: 1px;
  background: var(--ui-line);
}

.ui .dr-log li:last-child::before { display: none; }
.ui .dr-log li > span:last-child { min-width: 0; }

.ui .dr-log-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  background: var(--ui-sunken);
  color: var(--ui-ink-2);
  transition: background .4s ease, color .4s ease, box-shadow .4s ease;
}

.ui .dr-log-ico .i { width: 11px; height: 11px; }
.ui .dr-log b { display: block; font-size: 10.5px; font-weight: 600; color: var(--ui-ink); }
.ui .dr-log small { display: block; font-size: 9.5px; }

.ui .dr-log li.is-now .dr-log-ico {
  background: color-mix(in srgb, var(--tone) var(--ui-tint), transparent);
  color: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 12%, transparent);
}

.ui .dr-log li.is-attn { --tone: var(--ui-warn); }
.ui .dr-log li.is-attn .dr-log-ico { background: color-mix(in srgb, var(--ui-warn) var(--ui-tint), transparent); color: color-mix(in srgb, var(--ui-warn) 80%, var(--ui-ink)); }

.ui .dr-log-act {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--ui-warn) 40%, var(--ui-line));
  background: var(--ui-bg);
  color: color-mix(in srgb, var(--ui-warn) 72%, var(--ui-ink));
  font-size: 9.5px;
  font-weight: 600;
}

/* While the run is live, entries it hasn't reached wait faintly in place, so
   the log never reflows. With JS off every entry shows. */
[data-flow-index] .dr-log li[data-at]:not(.is-on) { opacity: .26; }

/* --------------------------------------------------------------------------
   04 Report
   -------------------------------------------------------------------------- */

.ui .dr-app .ui-doc-body { padding: 20px 24px 22px; }

.ui .dr-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-line);
}

.ui .dr-doc-head .ui-doc-t { font-size: 14.5px; }
.ui .dr-icon-btn { padding: 5px 8px; }
.ui .dr-doc-head .ui-doc-m { margin: 0; }

.ui .dr-sec { margin-top: 14px; }
.ui .dr-sec .ui-k { margin-bottom: 5px; }

.ui .dr-p,
.ui .dr-ul li {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ui-ink-2);
}

.ui .dr-p .ui-cite,
.ui .dr-ul .ui-cite { margin-left: 3px; vertical-align: 1px; }

.ui .dr-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ui .dr-ul li { position: relative; padding-left: 14px; }

.ui .dr-ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-accent) 70%, transparent);
}

.ui .dr-gap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 7px;
  border-radius: 5px;
  border: 1px dashed color-mix(in srgb, var(--ui-warn) 60%, transparent);
  background: color-mix(in srgb, var(--ui-warn) var(--ui-tint), transparent);
  color: color-mix(in srgb, var(--ui-warn) 75%, var(--ui-ink));
  font-size: 9px;
  font-weight: 700;
  vertical-align: 1px;
}

.ui .dr-gap .i { width: 9px; height: 9px; }
.ui .dr-note-end { margin: 16px 0 0; }

.ui .dr-cover {
  padding: 10px 11px;
  margin-bottom: 16px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-bg);
}

.ui .dr-cover-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; font-size: 9.5px; color: var(--ui-ink-3); }
.ui .dr-cover-top b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ui-ink); }
.ui .dr-cover .ui-track { height: 5px; }

.ui .dr-app .ui-src > span:nth-child(2) { flex: 1; min-width: 0; }

.ui .dr-src-n {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--ui-sunken);
  color: var(--ui-ink-3);
  font-size: 8.5px;
  font-weight: 700;
  transition: background .35s ease, color .35s ease;
}

.ui .ui-src.is-on .dr-src-n {
  background: color-mix(in srgb, var(--ui-accent) var(--ui-tint-strong), transparent);
  color: color-mix(in srgb, var(--ui-accent) 62%, var(--ui-ink));
}

/* --------------------------------------------------------------------------
   05 Sources
   -------------------------------------------------------------------------- */

.ui .dr-feed .ui-card-head { margin-bottom: 0; }
.ui .dr-feed .ui-state { margin: 0; justify-items: start; }

.ui .dr-feed-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--ui-line-soft);
  font-size: 9.5px;
  color: var(--ui-ink-3);
}

.ui .dr-feed.is-fails[data-state="done"] {
  border-color: color-mix(in srgb, var(--ui-bad) 45%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-bad) 4%, var(--ui-bg));
}

.ui .dr-feed-note { margin-top: 12px; }
.ui .dr-feed-note .ui-note { margin: 0; }

/* --------------------------------------------------------------------------
   06 One system: two dialogs, two phones
   -------------------------------------------------------------------------- */

.ui .dr-system {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.ui .dr-twins { display: grid; gap: 16px; min-width: 0; }

.ui .dr-dialog { gap: 10px; padding: 16px 18px; }
.ui .dr-dialog .ui-field { margin: 0; }
.ui .dr-dialog .ui-input { color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui .dr-dialog .ui-dialog-foot { align-items: center; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ui-line-soft); }
.ui .dr-dialog .ui-dialog-foot .ui-ghost { margin-right: auto; }

.ui .dr-dlg-head { display: flex; align-items: center; gap: 8px; }
.ui .dr-dlg-head .ui-lang { margin: 0; align-self: center; }

.ui .dr-x {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--ui-ink-3);
}

.ui .dr-x .i { width: 12px; height: 12px; }

.ui .dr-phones { display: flex; gap: 18px; }

/* The phone: status bar, header, content, tab bar. Two states of Live Prep. */
.ui .dr-phone { min-height: 512px; }
.ui .dr-phone .vt-body { display: flex; flex-direction: column; padding: 4px 12px 10px; }
.ui .dr-phone .vt-tabbar .is-on { color: var(--ui-accent); }

.ui .dr-ph-top { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.ui .dr-ph-top > div { min-width: 0; }
.ui .dr-ph-top .ui-ava { margin-left: auto; width: 24px; height: 24px; font-size: 8.5px; }
.ui .dr-ph-t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ui-ink); }
.ui .dr-ph-d { font-size: 9px; color: var(--ui-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ui .dr-ph-card {
  margin-bottom: 9px;
  padding: 9px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-accent) 9%, var(--ui-bg)), var(--ui-bg));
}

.ui .dr-ph-card .ui-meter { margin: 7px 0; }
.ui .dr-ph-row { display: flex; justify-content: space-between; gap: 6px; font-size: 8.5px; color: var(--ui-ink-3); }
.ui .dr-ph-k { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--ui-ink); }
.ui .dr-ph-k .i { width: 10px; height: 10px; color: var(--ui-accent); }

.ui .dr-phone .ui-stage { gap: 7px; padding: 6px 8px; margin-bottom: 5px; border-radius: 9px; }
.ui .dr-phone .ui-stage .ui-st-t { font-size: 10px; }
.ui .dr-phone .ui-stage .ui-st-d { font-size: 8.5px; }
.ui .dr-phone .ui-ico { width: 16px; height: 16px; }
.ui .dr-phone .ui-ico .s-run { width: 9px; height: 9px; }
.ui .dr-phone .ui-ico .s-done { width: 9px; height: 9px; stroke-width: 3; }
.ui .dr-phone .ui-note { margin: 4px 0 0; }

.ui .dr-ph-ready {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ui-ok) 35%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-ok) 8%, var(--ui-bg));
}

.ui .dr-ph-ready b { display: block; font-size: 11px; color: var(--ui-ink); }
.ui .dr-ph-ready span:not(.dr-ph-ok) { display: block; font-size: 8.5px; color: var(--ui-ink-3); }

.ui .dr-ph-ok {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ui-ok);
  color: #fff;
}

.ui .dr-ph-ok .i { width: 13px; height: 13px; stroke-width: 3; }
.ui .dr-ph-label { margin: 13px 0 6px; }

.ui .dr-ph-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; counter-reset: pt; }

.ui .dr-ph-points li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ui-ink);
  counter-increment: pt;
}

.ui .dr-ph-points li::before {
  content: counter(pt);
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ui-accent) var(--ui-tint), transparent);
  color: var(--ui-accent);
  font-size: 8px;
  font-weight: 700;
}

.ui .dr-ph-points li > span:first-child { flex: 1; min-width: 0; }
.ui .dr-ph-btns { display: flex; gap: 6px; margin-top: 10px; }
.ui .dr-ph-btns .ui-btn { justify-content: center; padding: 7px 10px; border-radius: 10px; }
.ui .dr-ph-btns .ui-btn.is-primary { flex: 1; }
.ui .dr-phone .dr-ph-btns { margin-top: auto; }
.ui .dr-phone .ui-note + .dr-ph-btns { margin-top: 10px; }
.ui .dr-phone .ui-note.is-warn { margin: 8px 0 0; }

/* --------------------------------------------------------------------------
   Smaller screens. The shared kit already drops the rail, the aside and the
   tabs under 768px; what is left here is the search field and the layout of
   the dialogs and phones.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
  .ui .dr-search { width: 180px; }
}

@media screen and (max-width: 991px) {
  .ui .dr-search { display: none; }
  .ui .dr-system { grid-template-columns: minmax(0, 1fr); }
  .ui .dr-twins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui .dr-phones { justify-content: center; }
}

@media screen and (max-width: 767px) {
  .ui .dr-app .ui-main,
  .ui .dr-app .ui-doc-body { padding: 14px; }
  .ui .dr-app .ui-foot { margin: 14px -14px -14px; padding: 11px 14px; }
  .ui .dr-twins { grid-template-columns: minmax(0, 1fr); }
  .ui .dr-row2 { grid-template-columns: minmax(0, 1fr); }
  .ui .dr-dialog .dr-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .ui .dr-doc-head { flex-direction: column; }

  .ui .dr-phones {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -10px;
    padding: 6px 10px 18px;
    scrollbar-width: none;
  }

  .ui .dr-phones::-webkit-scrollbar { display: none; }
  .ui .dr-phones > .vt-phone { scroll-snap-align: center; }
  .ui .ui-scroll > .dr-app { min-width: 600px; }
}

@media screen and (max-width: 479px) {
  .ui .dr-phones { margin: 0 -8px; padding: 6px 8px 18px; }
  .ui .ui-scroll > .dr-app { min-width: 560px; }
}


/* ------------------------------------------------------------------
   05 · Briefing: the exported one-page briefing (.dr-brief). A page,
   not an app: dark headings, hairlines, colour only where it means
   something (source numbers, the gap).
------------------------------------------------------------------ */
.ui .dr-brief-wrap { display: flex; justify-content: center; }
.ui .dr-brief {
  width: 720px;
  flex: none;
  box-sizing: border-box;
  padding: 38px 48px 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 18, 30, .06), 0 18px 40px -18px rgba(15, 18, 30, .22), 0 0 0 1px rgba(15, 18, 30, .06);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ui-ink);
}
.ui .dr-brief h4, .ui .dr-brief h5, .ui .dr-brief p, .ui .dr-brief ol, .ui .dr-brief ul, .ui .dr-brief li { margin: 0; padding: 0; max-width: none; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.ui .dr-b-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--ui-line); font-size: 11px; color: var(--ui-ink-3); }
.ui .dr-b-brand { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ui-ink); }
.ui .dr-b-brand svg { width: 16px; height: 16px; border: 0; border-radius: 4px; }
.ui .dr-b-sec { padding: 16px 0 0; }
.ui .dr-b-title { padding-top: 22px; }
.ui .dr-brief h4 { font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -.4px; }
.ui .dr-b-title p { margin-top: 4px; font-size: 13.5px; color: var(--ui-ink-2); }
.ui .dr-b-title .dr-b-meta { margin-top: 10px; font-size: 11.5px; color: var(--ui-ink-3); }
.ui .dr-brief .is-gap { color: #9a6412; }
.ui .dr-b-glance { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; padding: 0; border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); }
.ui .dr-b-glance > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 13px; }
.ui .dr-b-glance > div + div { border-left: 1px solid var(--ui-line); }
.ui .dr-b-glance > div:first-child { padding-left: 0; }
.ui .dr-b-glance span { font-size: 11px; color: var(--ui-ink-3); }
.ui .dr-b-glance b { font-size: 15px; font-weight: 700; color: var(--ui-ink); }
.ui .dr-b-glance em { font-style: normal; font-size: 11.5px; color: var(--ui-ink-2); }
.ui .dr-brief h5 { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ui-ink); }
.ui .dr-b-c { margin-left: 2px; font-size: 9px; font-weight: 700; line-height: 0; color: var(--ui-accent); vertical-align: super; }
.ui .dr-b-points { list-style: none; counter-reset: p; }
.ui .dr-b-points li { counter-increment: p; position: relative; padding: 6px 0 6px 24px; border-top: 1px solid var(--ui-line-soft); }
.ui .dr-b-points li:first-child { border-top: 0; padding-top: 0; }
.ui .dr-b-points li:first-child::before { top: 0; }
.ui .dr-b-points li::before { content: counter(p); position: absolute; left: 0; color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }
.ui .dr-b-items { list-style: none; }
.ui .dr-b-items li { position: relative; padding: 3px 0 3px 14px; }
.ui .dr-b-items li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 1px; background: var(--ui-ink-3); }
.ui .dr-b-items li.is-gap { margin-top: 6px; padding: 6px 0 6px 12px; border-left: 2px solid #e6b45a; color: var(--ui-ink); }
.ui .dr-b-items li.is-gap::before { display: none; }
.ui .dr-b-items li.is-gap span { display: block; font-size: 11.5px; color: var(--ui-ink-2); }
.ui .dr-b-sources ol { list-style: none; counter-reset: s; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 24px; font-size: 11.5px; color: var(--ui-ink-3); }
.ui .dr-b-sources li { counter-increment: s; }
.ui .dr-b-sources li::before { content: counter(s); display: inline-block; width: 14px; font-weight: 700; color: var(--ui-accent); }
.ui .dr-b-sources b { font-weight: 600; color: var(--ui-ink); margin-right: 4px; }
.ui .dr-b-foot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--ui-line); font-size: 10.5px; color: var(--ui-ink-3); }
@media screen and (max-width: 767px) {
  .ui .dr-brief-wrap { justify-content: flex-start; }
}