/* ============================================================================
   THE APP ARTIFACT — reproduced from the real dashboard, not invented.

   Tokens lifted verbatim from dejury_dashboard/src/app/globals.css:
     --sidebar            #0A222B      --sidebar-foreground  #ECF3F4
     --sidebar-muted      #8FAFB8      --sidebar-accent      #133843  (active row)
     --sidebar-border     #16404C      --sidebar-primary     #D18A63  (copper)
     --background         #FBFAF8      --card                #FFFFFF
     --border             #E2E0DA      --muted               #F2F1ED
     --muted-foreground   #453F39      --foreground          #1A1815
     --radius             0.625rem     --brass               #96522F

   Geometry from the real components: rail is w-64 (256px) with an h-16 brand
   row; the top bar is h-14 (56px); rail rows are rounded-lg px-3 py-2 text-sm
   with a size-4 icon and gap-3; the active row carries an inset ring.
   ========================================================================= */

.app {
  --sb: #0a222b;
  --sb-fg: #ecf3f4;
  --sb-muted: #8fafb8;
  --sb-accent: #133843;
  --sb-border: #16404c;
  --sb-copper: #d18a63;
  --bg: #fbfaf8;
  --card: #ffffff;
  --bd: #e2e0da;
  --mut: #f2f1ed;
  --mut-fg: #453f39;
  --fg: #1a1815;
  --rad: .625rem;

  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--bd);
  box-shadow: 0 40px 90px -40px rgba(23, 21, 15, .45), 0 2px 8px rgba(23, 21, 15, .06);
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- the rail ----------------------------------------------------------- */

.app__rail { background: var(--sb); color: var(--sb-fg); display: flex; flex-direction: column; min-width: 0; }
.app__brand { height: 64px; display: flex; align-items: center; justify-content: space-between; padding-inline: 16px; }
.app__brandname { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: #fff; }
.app__nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.app__grp { padding: 16px 12px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--sb-muted); }
.app__row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--rad);
  font-size: 13.5px; font-weight: 500; color: rgba(236, 243, 244, .85);
}
.app__row svg { width: 16px; height: 16px; flex: none; }
.app__row--on {
  background: var(--sb-accent); color: #fff;
  box-shadow: inset 0 0 0 1px var(--sb-border), 0 1px 2px rgba(0, 0, 0, .2);
}
.app__row--verity { color: var(--sb-copper); }

/* ---- top bar and content ------------------------------------------------ */

.app__main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.app__top { height: 56px; display: flex; align-items: center; gap: 10px; padding-inline: 22px; }
.app__search {
  display: flex; align-items: center; gap: 8px; width: 300px; max-width: 44%;
  border: 1px solid var(--bd); background: var(--card); border-radius: var(--rad);
  padding: 6px 10px; font-size: 13px; color: var(--mut-fg);
}
.app__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__search b { color: var(--fg); font-weight: 500; }
.app__kbd {
  margin-left: auto; border: 1px solid var(--bd); background: var(--mut); border-radius: 4px;
  padding: 1px 6px; font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--mut-fg);
}
.app__topright { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--mut-fg); }
.app__rule { width: 1px; height: 20px; background: var(--bd); }
.app__avatar {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bd); background: var(--mut);
  display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #14586a;
}

.app__body { padding: 4px 22px 24px; display: grid; gap: 14px; min-width: 0; }
.app__h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--fg); }
.app__sub { font-size: 13px; color: var(--mut-fg); }

.app__card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--rad); overflow: hidden; }
.app__thead, .app__tr {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.1fr) auto;
  gap: 14px; align-items: center; padding: 11px 16px;
}
.app__thead { background: var(--mut); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--mut-fg); }
.app__tr { border-top: 1px solid var(--bd); }
.app__mt { font-weight: 600; color: var(--fg); font-size: 13.5px; }
.app__ref { font-family: var(--mono); font-size: 11.5px; color: var(--mut-fg); }
.app__cell { font-size: 13px; color: var(--mut-fg); }
.app__pill {
  font-family: var(--mono); font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--bd); color: var(--mut-fg); white-space: nowrap; justify-self: end;
}
.app__pill--due { border-color: #14586a; background: #eef5f7; color: #14586a; }
.app__pill--brass { border-color: #d7b49c; background: #fbf2ec; color: #96522f; }

/* ---- the section that holds it ------------------------------------------ */

.showcase { padding-block: clamp(56px, 7vw, 104px); }
.showcase__head { display: grid; gap: 16px; max-width: 44ch; margin-bottom: clamp(28px, 3.5vw, 44px); }
.showcase__head h2 { font-size: clamp(1.85rem, 3.3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05; }
.showcase__note { margin-top: 20px; font-size: .95rem; color: var(--ink-3); max-width: 70ch; }

/* ---- close-ups of three more real screens ------------------------------- */

.closeups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(44px, 5vw, 72px); }
/* A stretched 1fr row still varies with caption length, so the frame gets a
   fixed height: three identical windows, captions starting on one line. */
.closeup { display: grid; gap: 14px; align-content: start; }
.closeup__frame {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fbfaf8;
  box-shadow: 0 18px 40px -26px rgba(23, 21, 15, .38);
  height: 316px; display: flex; flex-direction: column;
}
.closeup__frame .mini { flex: 1; align-content: start; }
.closeup h3 { font-size: 1.06rem; letter-spacing: -.02em; }
.closeup p { font-size: .95rem; color: var(--ink-2); }

.mini { padding: 13px; display: grid; gap: 9px; }
.mini__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 13px; background: #f2f1ed; border-bottom: 1px solid #e2e0da;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #453f39;
}
.mini__row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: #fff; border: 1px solid #e2e0da; border-radius: 8px; }
.mini__t { font-weight: 600; color: #1a1815; font-size: 12.5px; line-height: 1.35; }
.mini__s { font-family: var(--mono); font-size: 10.5px; color: #453f39; }
.mini__dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600; background: #14586a; color: #fff; flex: none;
}
.mini__dot--idle { background: #e2e0da; color: #453f39; }
.mini__amt { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: #1a1815; }
.mini__p { font-size: 12.5px; color: #1a1815; line-height: 1.6; }
.mini__cite {
  font-family: var(--mono); font-size: 9.5px; color: #96522f; background: #fbf2ec;
  border: 1px solid #ecd9cb; border-radius: 4px; padding: 0 4px; vertical-align: 1px;
}

/* ---- fees, stated quietly ----------------------------------------------- */

.price { padding-block: clamp(56px, 7vw, 104px); }
.price__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.price h2 { font-size: clamp(1.85rem, 3.3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05; }
.price__lines { display: grid; }
.price__line { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid var(--line); }
.price__line:first-child { border-top: 1px solid var(--line); }
.price__n { font-size: 1.12rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.price__w { grid-column: 1; font-size: .93rem; color: var(--ink-3); }
.price__a {
  grid-row: 1 / span 2; grid-column: 2; font-family: var(--mono); font-size: 1.02rem; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.price__a small { display: block; font-family: var(--sans); font-size: .78rem; color: var(--ink-3); margin-top: 3px; }

/* ---- answers ------------------------------------------------------------ */

.ans { padding-block: clamp(52px, 6.5vw, 96px); }
.ans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 50px) clamp(28px, 5vw, 72px); }
.ans__q { font-size: 1.03rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em; margin-bottom: 8px; }
.ans__a { font-size: .98rem; color: var(--ink-2); }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .app__rail { display: none; }
  .closeups { grid-template-columns: 1fr; }
  .price__grid, .ans__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .app__thead, .app__tr { grid-template-columns: 1fr auto; }
  .app__cell { display: none; }
  .app__search { max-width: none; }
}

/* ============================================================================
   VERITY — the real content and treatment from the live home page, in this
   site's language. Copper #96522F is Verity's colour throughout (--brass), and
   the mark is the real VerityMark: sources converging on one verified node.
   ========================================================================= */

.verity { padding-block: clamp(56px, 7vw, 104px); }
.verity__head { display: grid; gap: 16px; max-width: 46ch; }
.verity__head h2 { font-size: clamp(1.85rem, 3.3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05; }
.kicker--brass { color: #96522f; }

.vcaps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.vcap {
  font-size: .88rem; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--paper);
}

.vgrid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 72px); align-items: start; margin-top: clamp(34px, 4vw, 52px); }
.vpoints { display: grid; gap: 22px; }
.vpoint { display: grid; gap: 6px; padding-left: 18px; border-left: 2px solid #e7d7cb; }
.vpoint b { color: var(--ink); font-size: 1.02rem; letter-spacing: -.015em; }
.vpoint span { color: var(--ink-2); font-size: .97rem; }

/* the chat */
.vchat {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px -34px rgba(23, 21, 15, .40), 0 2px 8px rgba(23, 21, 15, .05);
  display: flex; flex-direction: column;
}
.vchat__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid #e2e0da; background: #fbfaf8;
}
.vorb {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #0a222b; color: #d18a63;
}
.vorb svg { width: 15px; height: 15px; }
.vchat__head b { font-size: .95rem; color: #1a1815; letter-spacing: -.01em; }
.vst {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: #14663f; background: #eaf4ee; border: 1px solid #cfe4d7; border-radius: 999px; padding: 2px 8px;
}
.vchat__body { padding: 16px; display: grid; gap: 12px; align-content: start; min-height: 248px; }

.vb { max-width: 88%; font-size: 13.5px; line-height: 1.6; border-radius: 12px; padding: 10px 13px; }
.vb--q { justify-self: end; background: #0f3540; color: #fbfaf8; border-bottom-right-radius: 4px; }
.vb--a { justify-self: start; background: #f2f1ed; color: #1a1815; border: 1px solid #e2e0da; border-bottom-left-radius: 4px; }
.vb--a b { font-weight: 600; }
.vcite {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-family: var(--mono); font-size: 10px; color: #96522f;
  background: #fbf2ec; border: 1px solid #ecd9cb; border-radius: 5px; padding: 2px 7px;
}
.vcite svg { width: 10px; height: 10px; }

/* caret while the question types itself */
.vcaret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: vblink 1s steps(1) infinite; }
@keyframes vblink { 50% { opacity: 0 } }

/* Verity thinking */
.vthink { justify-self: start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #f2f1ed; border: 1px solid #e2e0da; border-radius: 12px; border-bottom-left-radius: 4px; }
.vthink i { width: 6px; height: 6px; border-radius: 50%; background: #96522f; opacity: .35; animation: vdot 1.2s infinite; }
.vthink i:nth-child(2) { animation-delay: .18s }
.vthink i:nth-child(3) { animation-delay: .36s }
@keyframes vdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

.vsugg { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.vsugg span { font-size: 12px; color: #0f3540; background: #fff; border: 1px solid #cfe0e5; border-radius: 999px; padding: 5px 11px; }
.vinput {
  display: flex; align-items: center; gap: 9px; margin: 0 16px 16px;
  border: 1px solid #e2e0da; border-radius: 10px; background: #fbfaf8;
  padding: 9px 12px; font-size: 12.5px; color: #453f39;
}
.vinput .vsend { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; background: #0f3540; color: #fff; display: grid; place-items: center; }
.vinput .vsend svg { width: 11px; height: 11px; }

@media (max-width: 1000px) { .vgrid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vcaret, .vthink i { animation: none } }

/* ---- Verity, part two: the chips drive it, the left column is evidence ---- */

.vcap {
  font: inherit; font-size: .88rem; color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: var(--paper);
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.vcap:hover { border-color: #d7b49c; color: var(--ink); }
.vcap[aria-selected="true"] { background: #96522f; border-color: #96522f; color: #fff; }
.vcap__i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.vcap[aria-selected="true"] .vcap__i { opacity: 1; }

/* the evidence panel */
.vsrc {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  overflow: hidden; box-shadow: 0 12px 30px -22px rgba(23,21,15,.35);
}
.vsrc__bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: #fbfaf8; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.vsrc__n { margin-left: auto; color: #96522f; }
.vsrc__list { padding: 10px; display: grid; gap: 7px; min-height: 188px; align-content: start; }
.vsrc__row {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  opacity: 0; transform: translateY(4px);
  animation: vsIn .35s var(--ease) forwards;
}
.vsrc__row svg { width: 14px; height: 14px; color: #96522f; }
.vsrc__t { font-size: .9rem; color: var(--ink); font-weight: 500; }
.vsrc__m { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
@keyframes vsIn { to { opacity: 1; transform: none } }

.vtrust { display: grid; gap: 10px; margin-top: 18px; }
.vtrust li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: .93rem; color: var(--ink-2); }
.vtrust svg { margin-top: 5px; color: #96522f; }
.vtrust b { color: var(--ink); font-weight: 600; }

.vmeta {
  display: flex; align-items: center; gap: 7px; padding: 0 16px 12px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
}
.vmeta b { color: #14663f; font-weight: 500; }

@media (prefers-reduced-motion: reduce) { .vsrc__row { opacity: 1; transform: none; animation: none } }

/* `display:flex` beats the UA's `[hidden]{display:none}`, so the timing line
   stayed on screen from the previous answer while the next one was still
   thinking. Needs an explicit rule. */
.vmeta[hidden] { display: none; }