spb/search-box Public

1/*2 * Search-box.ai3 * Author: Simon-Pierre Boucher4 * Contact: contact@spboucher.ai5 * File: apps/web/app/globals.css6 * Description: Global styles — commercial-grade light theme, mobile-first, token-derived.7 */89@import "../styles/tokens.css";1011* {12  box-sizing: border-box;13  margin: 0;14  padding: 0;15}1617html {18  -webkit-text-size-adjust: 100%;19  scroll-behavior: smooth;20}2122body {23  background:24    radial-gradient(1200px 500px at 80% -10%, rgba(200, 67, 26, 0.045), transparent 60%),25    radial-gradient(900px 420px at 8% 0%, rgba(21, 112, 104, 0.04), transparent 55%),26    var(--paper);27  color: var(--ink);28  font-family: var(--font-body);29  font-size: var(--fs-md);30  line-height: 1.55;31  min-height: 100dvh;32  display: flex;33  flex-direction: column;34}3536::selection {37  background: var(--accent-soft);38  color: var(--accent-deep);39}4041a {42  color: inherit;43}4445button {46  font: inherit;47  cursor: pointer;48}4950:focus-visible {51  outline: 2px solid var(--accent);52  outline-offset: 2px;53  border-radius: 4px;54}5556/* ------------------------------- shell ---------------------------------- */5758.shell {59  width: 100%;60  max-width: 1320px;61  margin: 0 auto;62  padding: 0 var(--sp-4);63  flex: 1;64  display: flex;65  flex-direction: column;66}6768.topbar {69  display: flex;70  align-items: center;71  gap: var(--sp-3);72  padding: var(--sp-4) 0;73  border-bottom: 1px solid var(--hairline);74}7576.wordmark {77  display: inline-flex;78  align-items: center;79  gap: 10px;80  font-family: var(--font-display);81  font-weight: 600;82  font-size: 1.15rem;83  letter-spacing: -0.01em;84  text-decoration: none;85}8687.wordmark em {88  color: var(--accent);89  font-style: italic;90}9192.topbar .tagline {93  margin-left: auto;94  font-family: var(--font-mono);95  font-size: var(--fs-2xs);96  letter-spacing: 0.04em;97  color: var(--ink-faint);98  display: none;99}100101@media (min-width: 768px) {102  .topbar .tagline {103    display: block;104  }105}106107.footer {108  margin-top: var(--sp-16);109  padding: var(--sp-6) 0;110  border-top: 1px solid var(--hairline);111  font-family: var(--font-mono);112  font-size: var(--fs-2xs);113  color: var(--ink-faint);114  display: flex;115  justify-content: space-between;116  gap: var(--sp-4);117  flex-wrap: wrap;118}119120/* ------------------------------ pastilles -------------------------------- */121122.pastille {123  display: inline-grid;124  place-items: center;125  width: 30px;126  height: 30px;127  min-width: 30px;128  border-radius: 10px;129  border: 1px solid transparent;130  position: relative;131  transition: transform var(--t-fast) var(--ease-out);132}133134.pastille.ps-sm {135  width: 22px;136  height: 22px;137  min-width: 22px;138  border-radius: 7px;139}140141.pk-plan          { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }142.pk-search        { color: var(--ink); background: var(--paper-deep); border-color: var(--hairline-strong); }143.pk-fetch         { color: var(--ink); background: var(--paper-deep); border-color: var(--hairline-strong); }144.pk-read          { color: var(--ink); background: var(--paper-deep); border-color: var(--hairline-strong); }145.pk-claim         { color: var(--accent-deep); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }146.pk-belief        { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }147.pk-evidence      { color: var(--teal); background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 25%, transparent); }148.pk-contradiction { color: #fff; background: var(--accent); border-color: var(--accent-deep); box-shadow: 0 2px 8px rgba(200, 67, 26, 0.35); }149.pk-thought       { color: var(--ink-soft); background: var(--surface); border-color: var(--hairline); }150.pk-synthesis     { color: var(--plum); background: var(--plum-soft); border-color: color-mix(in srgb, var(--plum) 25%, transparent); }151.pk-done          { color: var(--teal); background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 25%, transparent); }152.pk-failed        { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 25%, transparent); }153.pk-source        { color: var(--ink); background: var(--paper-deep); border-color: var(--hairline-strong); }154.pk-confidence    { color: var(--ink-soft); background: var(--paper-deep); border-color: var(--hairline-strong); }155156.pastille.spinning::after {157  content: "";158  position: absolute;159  inset: -4px;160  border-radius: 13px;161  border: 1.5px solid transparent;162  border-top-color: currentColor;163  animation: spin 0.9s linear infinite;164  opacity: 0.7;165}166167@keyframes spin {168  to { transform: rotate(360deg); }169}170171/* -------------------------------- buttons -------------------------------- */172173.btn {174  display: inline-flex;175  align-items: center;176  justify-content: center;177  gap: var(--sp-2);178  min-height: 46px;179  padding: 0 var(--sp-6);180  border-radius: var(--r-md);181  border: 1px solid var(--ink);182  background: var(--ink);183  color: var(--paper);184  font-weight: 600;185  letter-spacing: 0.01em;186  transition:187    background var(--t-fast) var(--ease-out),188    border-color var(--t-fast) var(--ease-out),189    transform var(--t-fast) var(--ease-out);190}191192.btn:hover:not(:disabled) {193  background: var(--accent);194  border-color: var(--accent);195}196197.btn:active:not(:disabled) {198  transform: translateY(1px);199}200201.btn:disabled {202  opacity: 0.45;203  cursor: not-allowed;204}205206.btn-ghost {207  display: inline-flex;208  align-items: center;209  gap: var(--sp-1);210  min-height: 32px;211  padding: 0 var(--sp-3);212  border-radius: var(--r-sm);213  border: 1px solid var(--hairline-strong);214  background: var(--surface);215  color: var(--ink-soft);216  font-family: var(--font-mono);217  font-size: var(--fs-2xs);218  transition: all var(--t-fast) var(--ease-out);219}220221.btn-ghost:hover {222  border-color: var(--ink);223  color: var(--ink);224}225226/* -------------------------------- home ---------------------------------- */227228.hero {229  display: grid;230  grid-template-columns: 1fr;231  gap: var(--sp-8);232  padding: var(--sp-12) 0 var(--sp-8);233  align-items: center;234}235236@media (min-width: 1024px) {237  .hero {238    grid-template-columns: 7fr 5fr;239    padding: var(--sp-16) 0 var(--sp-12);240  }241}242243.hero h1 {244  font-family: var(--font-display);245  font-size: var(--fs-hero);246  font-weight: 560;247  line-height: 1.06;248  letter-spacing: -0.022em;249}250251.hero h1 em {252  font-style: italic;253  color: var(--accent);254}255256.hero .sub {257  margin-top: var(--sp-5);258  color: var(--ink-soft);259  font-size: var(--fs-lg);260  max-width: 32em;261  text-wrap: pretty;262}263264.hero-art {265  display: none;266  justify-self: center;267}268269@media (min-width: 1024px) {270  .hero-art {271    display: block;272  }273}274275.ask {276  margin-top: var(--sp-8);277  display: flex;278  flex-direction: column;279  gap: var(--sp-3);280}281282.ask .box {283  position: relative;284  border: 1.5px solid var(--hairline-strong);285  border-radius: var(--r-xl);286  background: var(--surface);287  box-shadow: var(--e-2);288  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);289}290291.ask .box:focus-within {292  border-color: var(--ink);293  box-shadow: var(--e-3);294}295296.ask textarea {297  display: block;298  width: 100%;299  min-height: 108px;300  padding: var(--sp-5) var(--sp-5) var(--sp-2);301  font-family: var(--font-body);302  font-size: var(--fs-md);303  line-height: 1.6;304  color: var(--ink);305  background: transparent;306  border: none;307  resize: vertical;308  outline: none;309}310311.ask textarea::placeholder {312  color: var(--ink-faint);313}314315.ask .box-foot {316  display: flex;317  align-items: center;318  justify-content: space-between;319  gap: var(--sp-3);320  padding: var(--sp-2) var(--sp-3) var(--sp-3);321}322323.ask .hint {324  font-family: var(--font-mono);325  font-size: var(--fs-2xs);326  color: var(--ink-faint);327  padding-left: var(--sp-2);328}329330.chips {331  display: flex;332  flex-wrap: wrap;333  gap: var(--sp-2);334  margin-top: var(--sp-2);335}336337.chip {338  min-height: 36px;339  padding: var(--sp-1) var(--sp-4);340  border-radius: 999px;341  border: 1px solid var(--hairline-strong);342  background: transparent;343  color: var(--ink-soft);344  font-size: var(--fs-sm);345  text-align: left;346  transition: all var(--t-fast) var(--ease-out);347}348349.chip:hover {350  border-color: var(--accent);351  color: var(--accent-deep);352  background: var(--accent-soft);353}354355/* recent sessions */356357.recent {358  margin: var(--sp-8) 0;359}360361.recent h2,362.pane h2,363.board h2 {364  display: flex;365  align-items: center;366  gap: var(--sp-2);367  font-family: var(--font-mono);368  font-size: var(--fs-2xs);369  font-weight: 500;370  text-transform: uppercase;371  letter-spacing: 0.14em;372  color: var(--ink-faint);373  margin-bottom: var(--sp-4);374}375376.recent ul {377  list-style: none;378  border: 1px solid var(--hairline);379  border-radius: var(--r-lg);380  background: var(--surface);381  overflow: hidden;382}383384.recent li + li {385  border-top: 1px solid var(--hairline);386}387388.recent li a {389  display: flex;390  gap: var(--sp-4);391  align-items: center;392  padding: var(--sp-4) var(--sp-5);393  text-decoration: none;394  transition: background var(--t-fast) var(--ease-out);395}396397.recent li a:hover {398  background: var(--paper-deep);399}400401.recent .q {402  flex: 1;403  overflow: hidden;404  text-overflow: ellipsis;405  white-space: nowrap;406  font-size: var(--fs-sm);407}408409.recent .arrow {410  color: var(--ink-faint);411  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);412}413414.recent li a:hover .arrow {415  transform: translateX(3px);416  color: var(--accent);417}418419.badge {420  font-family: var(--font-mono);421  font-size: var(--fs-2xs);422  padding: 3px 10px;423  border-radius: 999px;424  border: 1px solid var(--hairline-strong);425  color: var(--ink-soft);426  white-space: nowrap;427  background: var(--surface);428}429430.badge.running,431.badge.synthesizing,432.badge.pending {433  color: var(--accent-deep);434  border-color: color-mix(in srgb, var(--accent) 40%, transparent);435  background: var(--accent-soft);436}437438.badge.completed {439  color: var(--teal);440  border-color: color-mix(in srgb, var(--teal) 40%, transparent);441  background: var(--teal-soft);442}443444.badge.failed {445  color: var(--red);446  border-color: color-mix(in srgb, var(--red) 35%, transparent);447  background: var(--red-soft);448}449450/* ----------------------------- session page ------------------------------ */451452.question-head {453  padding: var(--sp-6) 0 var(--sp-5);454}455456.question-head .kicker {457  font-family: var(--font-mono);458  font-size: var(--fs-2xs);459  text-transform: uppercase;460  letter-spacing: 0.14em;461  color: var(--accent);462  margin-bottom: var(--sp-2);463}464465.question-head h1 {466  font-family: var(--font-display);467  font-size: clamp(1.35rem, 3.6vw, 2.1rem);468  font-weight: 560;469  line-height: 1.18;470  letter-spacing: -0.015em;471  max-width: 30em;472  text-wrap: balance;473}474475/* stats bar */476477.statsbar {478  position: sticky;479  top: 0;480  z-index: 20;481  display: flex;482  gap: var(--sp-2);483  align-items: center;484  padding: var(--sp-2) 0;485  margin: 0 calc(-1 * var(--sp-4));486  padding-left: var(--sp-4);487  padding-right: var(--sp-4);488  background: color-mix(in srgb, var(--paper) 88%, transparent);489  backdrop-filter: blur(10px);490  border-bottom: 1px solid var(--hairline);491  overflow-x: auto;492  scrollbar-width: none;493}494495.statsbar::-webkit-scrollbar {496  display: none;497}498499.stat-seg {500  display: inline-flex;501  align-items: center;502  gap: var(--sp-2);503  padding: 5px 12px 5px 6px;504  border: 1px solid var(--hairline);505  border-radius: 999px;506  background: var(--surface);507  font-family: var(--font-mono);508  font-size: var(--fs-2xs);509  color: var(--ink-soft);510  white-space: nowrap;511}512513.stat-seg b {514  color: var(--ink);515  font-weight: 600;516  font-variant-numeric: tabular-nums;517}518519.stat-seg.phase {520  padding-left: 12px;521  border-color: color-mix(in srgb, var(--accent) 35%, transparent);522  background: var(--accent-soft);523  color: var(--accent-deep);524}525526.stat-seg.phase.done {527  border-color: color-mix(in srgb, var(--teal) 35%, transparent);528  background: var(--teal-soft);529  color: var(--teal);530}531532.stat-seg.phase.dead {533  border-color: color-mix(in srgb, var(--red) 30%, transparent);534  background: var(--red-soft);535  color: var(--red);536}537538.pulse {539  width: 8px;540  height: 8px;541  min-width: 8px;542  border-radius: 50%;543  background: currentColor;544  animation: pulse 1.4s ease-in-out infinite;545}546547.pulse.still {548  animation: none;549}550551@keyframes pulse {552  0%, 100% { opacity: 1; transform: scale(1); }553  50% { opacity: 0.35; transform: scale(0.72); }554}555556/* research graph (the bloom) */557558.bloom-wrap {559  margin-top: var(--sp-5);560  border: 1px solid var(--hairline);561  border-radius: var(--r-lg);562  background:563    radial-gradient(600px 200px at 12% 50%, rgba(200, 67, 26, 0.05), transparent 65%),564    var(--surface);565  box-shadow: var(--e-1);566  overflow: hidden;567}568569.bloom-wrap svg {570  display: block;571  width: 100%;572  height: auto;573}574575.rg-branch {576  fill: none;577  stroke: var(--hairline-strong);578  stroke-width: 1.5;579  stroke-dasharray: 900;580  stroke-dashoffset: 900;581  animation: grow 1.1s var(--ease-out) forwards;582}583584.rg-twig {585  fill: none;586  stroke: var(--hairline-strong);587  stroke-width: 1.2;588  stroke-dasharray: 500;589  stroke-dashoffset: 500;590  animation: grow 0.9s var(--ease-out) forwards;591}592593@keyframes grow {594  to { stroke-dashoffset: 0; }595}596597.rg-node {598  animation: pop 0.5s var(--ease-out) both;599  transform-box: fill-box;600  transform-origin: center;601}602603@keyframes pop {604  from { transform: scale(0); opacity: 0; }605  to { transform: scale(1); opacity: 1; }606}607608.rg-label {609  font-family: var(--font-mono);610  font-size: 10.5px;611  fill: var(--ink-soft);612}613614.rg-label.strong {615  fill: var(--ink);616  font-weight: 600;617}618619.rg-qring {620  fill: none;621  stroke: var(--accent);622  stroke-width: 1.2;623  opacity: 0.5;624}625626.rg-qring.live {627  animation: ripple 2.2s ease-out infinite;628  transform-box: fill-box;629  transform-origin: center;630}631632@keyframes ripple {633  0% { transform: scale(0.6); opacity: 0.7; }634  100% { transform: scale(1.8); opacity: 0; }635}636637/* tabs (mobile) / panes (desktop) */638639.tabbar {640  display: flex;641  gap: var(--sp-2);642  padding: var(--sp-4) 0 var(--sp-2);643}644645.tabbar button {646  flex: 1;647  min-height: 44px;648  display: inline-flex;649  align-items: center;650  justify-content: center;651  gap: var(--sp-2);652  border: 1px solid var(--hairline-strong);653  background: var(--surface);654  border-radius: var(--r-md);655  font-family: var(--font-mono);656  font-size: var(--fs-2xs);657  text-transform: uppercase;658  letter-spacing: 0.08em;659  color: var(--ink-soft);660  transition: all var(--t-fast) var(--ease-out);661}662663.tabbar button.active {664  border-color: var(--ink);665  background: var(--ink);666  color: var(--paper);667}668669.panes {670  display: grid;671  grid-template-columns: 1fr;672  gap: var(--sp-6);673  padding: var(--sp-4) 0 var(--sp-8);674}675676.pane {677  min-width: 0;678}679680@media (max-width: 1023px) {681  .pane { display: none; }682  .pane.visible { display: block; }683}684685@media (min-width: 1024px) {686  .tabbar { display: none; }687  .panes {688    grid-template-columns: minmax(360px, 5fr) 7fr;689    align-items: start;690  }691  .pane.evidence-pane { grid-column: 1 / -1; }692}693694/* ------------------------------- timeline -------------------------------- */695696.tl {697  position: relative;698  display: flex;699  flex-direction: column;700  gap: var(--sp-3);701}702703.tl::before {704  content: "";705  position: absolute;706  left: 14.5px;707  top: 10px;708  bottom: 10px;709  width: 1.5px;710  background: linear-gradient(to bottom, var(--accent), var(--hairline) 30%, var(--hairline));711}712713.tl-row {714  position: relative;715  display: flex;716  gap: var(--sp-3);717  align-items: flex-start;718  animation: rise 0.45s var(--ease-out) both;719}720721@keyframes rise {722  from { opacity: 0; transform: translateY(7px); }723  to { opacity: 1; transform: translateY(0); }724}725726.tl-row .pastille {727  z-index: 1;728}729730.tl-card {731  flex: 1;732  min-width: 0;733  background: var(--surface);734  border: 1px solid var(--hairline);735  border-radius: var(--r-md);736  padding: var(--sp-3) var(--sp-4);737  box-shadow: var(--e-1);738  transition: border-color var(--t-fast) var(--ease-out);739}740741.tl-row:hover .tl-card {742  border-color: var(--hairline-strong);743}744745.tl-row.is-contradiction .tl-card {746  border-color: color-mix(in srgb, var(--accent) 45%, transparent);747  background: linear-gradient(0deg, var(--accent-soft), var(--surface) 55%);748}749750.tl-head {751  display: flex;752  align-items: center;753  gap: var(--sp-2);754  flex-wrap: wrap;755  font-family: var(--font-mono);756  font-size: var(--fs-2xs);757  text-transform: uppercase;758  letter-spacing: 0.1em;759  color: var(--ink-faint);760}761762.tl-body {763  margin-top: 3px;764  font-size: var(--fs-sm);765  overflow-wrap: anywhere;766}767768.tl-body .mono {769  font-family: var(--font-mono);770  font-size: var(--fs-2xs);771  color: var(--ink-faint);772}773774.tl-quote {775  margin-top: var(--sp-2);776  padding: var(--sp-2) var(--sp-3);777  background: var(--teal-soft);778  border-left: 3px solid var(--teal);779  border-radius: var(--r-sm);780  font-size: var(--fs-sm);781  font-style: italic;782  color: color-mix(in srgb, var(--teal) 70%, var(--ink));783}784785.tl-quote.contradicts {786  background: var(--accent-soft);787  border-left-color: var(--accent);788  color: var(--accent-deep);789}790791.tl-objectives {792  margin: var(--sp-2) 0 0;793  padding-left: var(--sp-5);794  font-size: var(--fs-sm);795  color: var(--ink-soft);796}797798.tl-objectives li {799  margin-bottom: 2px;800}801802.tl-empty {803  display: flex;804  align-items: center;805  gap: var(--sp-3);806  padding: var(--sp-5);807  border: 1px dashed var(--hairline-strong);808  border-radius: var(--r-md);809  color: var(--ink-faint);810  font-family: var(--font-mono);811  font-size: var(--fs-xs);812}813814.status-chip {815  font-family: var(--font-mono);816  font-size: var(--fs-2xs);817  padding: 1px 8px;818  border-radius: 999px;819  text-transform: none;820  letter-spacing: 0;821}822823.status-chip.supported { background: var(--teal-soft); color: var(--teal); }824.status-chip.contradicted { background: var(--accent-soft); color: var(--accent-deep); }825.status-chip.uncertain { background: var(--amber-soft); color: var(--amber); }826.status-chip.exploring { background: var(--paper-deep); color: var(--ink-soft); }827828/* -------------------------------- answer --------------------------------- */829830.answer-panel {831  background: var(--surface);832  border: 1px solid var(--hairline);833  border-radius: var(--r-lg);834  box-shadow: var(--e-2);835  overflow: hidden;836}837838.answer-head {839  display: flex;840  align-items: center;841  gap: var(--sp-2);842  padding: var(--sp-3) var(--sp-4);843  border-bottom: 1px solid var(--hairline);844  background: var(--paper-deep);845}846847.answer-head .lbl {848  font-family: var(--font-mono);849  font-size: var(--fs-2xs);850  text-transform: uppercase;851  letter-spacing: 0.12em;852  color: var(--ink-soft);853}854855.answer-head .btn-ghost {856  margin-left: auto;857}858859.answer-body {860  padding: var(--sp-6);861}862863.answer-waiting {864  display: flex;865  flex-direction: column;866  gap: var(--sp-3);867}868869.answer-waiting p {870  color: var(--ink-faint);871  font-family: var(--font-mono);872  font-size: var(--fs-xs);873}874875.skel {876  height: 12px;877  border-radius: 6px;878  background: linear-gradient(90deg, var(--paper-deep) 25%, var(--hairline) 50%, var(--paper-deep) 75%);879  background-size: 200% 100%;880  animation: shimmer 1.6s linear infinite;881}882883@keyframes shimmer {884  to { background-position: -200% 0; }885}886887.answer-md {888  font-size: var(--fs-md);889  line-height: 1.68;890}891892.answer-md h1,893.answer-md h2,894.answer-md h3 {895  font-family: var(--font-display);896  font-weight: 600;897  letter-spacing: -0.012em;898  margin: var(--sp-6) 0 var(--sp-3);899  line-height: 1.22;900}901902.answer-md h1 { font-size: var(--fs-xl); margin-top: 0; }903.answer-md h2 { font-size: var(--fs-lg); }904.answer-md h3 { font-size: var(--fs-md); }905906.answer-md p,907.answer-md ul,908.answer-md ol {909  margin-bottom: var(--sp-3);910}911912.answer-md ul,913.answer-md ol {914  padding-left: var(--sp-6);915}916917.answer-md strong {918  font-weight: 650;919}920921.answer-md table {922  border-collapse: collapse;923  width: 100%;924  margin: var(--sp-4) 0;925  font-size: var(--fs-sm);926}927928.answer-md th,929.answer-md td {930  border: 1px solid var(--hairline);931  padding: var(--sp-2) var(--sp-3);932  text-align: left;933}934935.answer-md th {936  font-family: var(--font-mono);937  font-size: var(--fs-2xs);938  text-transform: uppercase;939  letter-spacing: 0.06em;940  background: var(--paper-deep);941}942943.answer-md code {944  font-family: var(--font-mono);945  font-size: 0.88em;946  background: var(--paper-deep);947  border: 1px solid var(--hairline);948  padding: 1px 5px;949  border-radius: 5px;950}951952.answer-md blockquote {953  border-left: 3px solid var(--hairline-strong);954  padding-left: var(--sp-4);955  color: var(--ink-soft);956  margin-bottom: var(--sp-3);957}958959.answer-md sup.cite a {960  font-family: var(--font-mono);961  font-size: 0.72em;962  color: var(--accent);963  font-weight: 700;964  text-decoration: none;965  padding: 0 2px;966  border-radius: 4px;967}968969.answer-md sup.cite a:hover {970  background: var(--accent-soft);971}972973.caret {974  display: inline-block;975  width: 8px;976  height: 1.05em;977  background: var(--accent);978  border-radius: 2px;979  vertical-align: text-bottom;980  margin-left: 2px;981  animation: pulse 1s ease-in-out infinite;982}983984/* --------------------------- claims & sources ---------------------------- */985986.board {987  margin-top: var(--sp-2);988}989990.claims-grid {991  display: grid;992  grid-template-columns: 1fr;993  gap: var(--sp-3);994  margin-bottom: var(--sp-6);995}996997@media (min-width: 768px) {998  .claims-grid { grid-template-columns: 1fr 1fr; }999}10001001@media (min-width: 1280px) {1002  .claims-grid { grid-template-columns: 1fr 1fr 1fr; }1003}10041005.claim-card {1006  background: var(--surface);1007  border: 1px solid var(--hairline);1008  border-radius: var(--r-md);1009  padding: var(--sp-4);1010  box-shadow: var(--e-1);1011  display: flex;1012  flex-direction: column;1013  gap: var(--sp-2);1014}10151016.claim-card .txt {1017  font-size: var(--fs-sm);1018  line-height: 1.45;1019  flex: 1;1020}10211022.claim-card .why {1023  font-size: var(--fs-xs);1024  color: var(--ink-faint);1025}10261027.meter {1028  display: flex;1029  align-items: center;1030  gap: var(--sp-2);1031}10321033.meter .bar {1034  flex: 1;1035  height: 6px;1036  border-radius: 999px;1037  background: var(--paper-deep);1038  overflow: hidden;1039}10401041.meter .fill {1042  display: block;1043  height: 100%;1044  border-radius: 999px;1045  background: var(--teal);1046  transition: width 0.6s var(--ease-out);1047}10481049.meter.contradicted .fill { background: var(--accent); }1050.meter.uncertain .fill { background: var(--amber); }1051.meter.exploring .fill { background: var(--ink-faint); }10521053.meter .pct {1054  font-family: var(--font-mono);1055  font-size: var(--fs-2xs);1056  color: var(--ink-soft);1057  font-variant-numeric: tabular-nums;1058  min-width: 34px;1059  text-align: right;1060}10611062.source-list {1063  list-style: none;1064  display: grid;1065  grid-template-columns: 1fr;1066  gap: var(--sp-2);1067}10681069@media (min-width: 768px) {1070  .source-list { grid-template-columns: 1fr 1fr; }1071}10721073@media (min-width: 1280px) {1074  .source-list { grid-template-columns: 1fr 1fr 1fr; }1075}10761077.source-card {1078  display: flex;1079  gap: var(--sp-3);1080  padding: var(--sp-3);1081  background: var(--surface);1082  border: 1px solid var(--hairline);1083  border-radius: var(--r-md);1084  text-decoration: none;1085  min-height: 56px;1086  align-items: center;1087  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);1088}10891090.source-card:hover {1091  border-color: var(--ink);1092  transform: translateY(-1px);1093}10941095.tile {1096  width: 34px;1097  height: 34px;1098  min-width: 34px;1099  border-radius: 9px;1100  display: grid;1101  place-items: center;1102  color: #fff;1103  font-family: var(--font-mono);1104  font-weight: 700;1105  font-size: var(--fs-sm);1106  text-transform: uppercase;1107}11081109.source-card .meta {1110  min-width: 0;1111  flex: 1;1112}11131114.source-card .title {1115  font-size: var(--fs-sm);1116  overflow: hidden;1117  text-overflow: ellipsis;1118  display: -webkit-box;1119  -webkit-line-clamp: 1;1120  -webkit-box-orient: vertical;1121}11221123.source-card .domain {1124  font-family: var(--font-mono);1125  font-size: var(--fs-2xs);1126  color: var(--ink-faint);1127}11281129.source-card .cite-idx {1130  font-family: var(--font-mono);1131  font-size: var(--fs-2xs);1132  font-weight: 700;1133  color: var(--accent);1134  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);1135  background: var(--accent-soft);1136  border-radius: 7px;1137  padding: 2px 7px;1138}11391140.error-box {1141  display: flex;1142  gap: var(--sp-3);1143  align-items: center;1144  margin: var(--sp-4) 0;1145  padding: var(--sp-4);1146  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);1147  border-radius: var(--r-md);1148  background: var(--red-soft);1149  color: var(--red);1150  font-family: var(--font-mono);1151  font-size: var(--fs-xs);1152}11531154/* ------------------------------ reduced motion --------------------------- */11551156@media (prefers-reduced-motion: reduce) {1157  .tl-row,1158  .rg-branch,1159  .rg-twig,1160  .rg-node,1161  .skel {1162    animation: none !important;1163  }1164  .rg-branch,1165  .rg-twig {1166    stroke-dashoffset: 0 !important;1167  }1168  .pulse,1169  .caret,1170  .rg-qring.live,1171  .pastille.spinning::after {1172    animation: none !important;1173  }1174  html {1175    scroll-behavior: auto;1176  }1177}11781179/* graph labels collapse on small screens */1180.rg-sm { display: none; }1181@media (min-width: 768px) { .rg-sm { display: block; } }1182