/* Community Intelligence — the analyst desk.
 *
 * A deliberately different surface from the market board: darker, quieter,
 * and built around the written answer. Green for what is measured, gold for
 * what is judged, clay for a warning. Nothing decorative that does not carry
 * meaning.
 */

.ci {
  --ci-forest: #06251A;
  --ci-forest-2: #0A3A28;
  --ci-green: #0E7A4A;
  --ci-green-soft: #E8F3EA;
  --ci-gold: #C9A24A;
  --ci-gold-soft: #FBF1D9;
  --ci-clay: #B4552E;
  --ci-clay-soft: #FBEAE1;
  --ci-paper: #FBF8F0;
  --ci-ink: #10221A;
  --ci-ink-2: #3B4C42;
  --ci-muted: #6C7C71;
  --ci-line: #E6DFCC;
  --ci-serif: Fraunces, Georgia, 'Times New Roman', serif;
  padding: 0 0 34px;
  max-width: 940px;
  margin: 0 auto;
}

/* ------------------------------------------------------------------- hero */
.ci-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 22px 20px 20px;
  color: #F4FAF2;
  background:
    radial-gradient(120% 90% at 92% -10%, rgba(201, 162, 74, .34), transparent 58%),
    radial-gradient(90% 80% at 6% 0%, rgba(46, 169, 107, .32), transparent 60%),
    linear-gradient(158deg, #0B4A33 0%, #072B1E 58%, #051D15 100%);
  box-shadow: 0 26px 48px -32px rgba(6, 37, 26, .9);
  border: 1px solid rgba(255, 255, 255, .07);
}
.ci-hero:after {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 74, .22);
  box-shadow: 0 0 0 22px rgba(201, 162, 74, .06), 0 0 0 52px rgba(201, 162, 74, .04);
  pointer-events: none;
}
.ci-hero-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.ci-mark {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  font: 700 15px/1 var(--ci-serif, Georgia, serif);
  letter-spacing: .06em;
  color: #06251A;
  background: linear-gradient(150deg, #F4DFA8, #C9A24A 62%, #A9822B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 18px -10px rgba(0, 0, 0, .8);
  flex: 0 0 auto;
}
.ci-hero-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ci-hero-txt b { font: 600 17px/1.2 var(--ci-serif, Georgia, serif); letter-spacing: -.01em; }
.ci-hero-txt span {
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244, 250, 242, .66); margin-top: 3px;
}
.ci-hero h1 {
  position: relative; z-index: 2;
  font: 500 25px/1.24 var(--ci-serif, Georgia, serif);
  letter-spacing: -.02em;
  margin: 20px 0 10px;
  max-width: 15em;
}
.ci-hero p {
  position: relative; z-index: 2;
  margin: 0; font-size: 13.5px; line-height: 1.62;
  color: rgba(244, 250, 242, .82); max-width: 46em;
}
.ci-hero-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.ci-pill {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #F4FAF2;
}
.ci-pill.ghost { background: rgba(255, 255, 255, .05); color: rgba(244, 250, 242, .74); }

/* -------------------------------------------------------------------- ask */
.ci-ask-wrap { margin: 16px 0 4px; }
.ci-ask {
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 18px;
  padding: 7px;
  box-shadow: 0 18px 30px -26px rgba(16, 34, 26, .6);
}
.ci-ask-row { display: flex; align-items: center; gap: 6px; }
.ci-ask input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: 15.5px/1.4 inherit; color: var(--ci-ink);
  padding: 12px 8px 12px 12px;
}
.ci-ask input::placeholder { color: #98A69B; }
.ci-mic {
  width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--ci-green-soft); color: var(--ci-green);
  border: 1px solid #D3E7D7;
}
.ci-mic svg { width: 20px; height: 20px; }
.ci-mic.on { background: var(--ci-clay-soft); color: var(--ci-clay); border-color: #EFD3C5; }

.ci-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 2px; scrollbar-width: none; }
.ci-chips::-webkit-scrollbar { display: none; }
.ci-q {
  flex: 0 0 auto; white-space: nowrap;
  padding: 9px 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ci-line);
  font-size: 12.5px; color: var(--ci-ink-2);
}
.ci-q:active { background: var(--ci-green-soft); border-color: #CFE3D2; }
.ci-hist { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 10px 2px 0; scrollbar-width: none; }
.ci-hist span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-muted); flex: 0 0 auto; }
.ci-h {
  flex: 0 0 auto; font-size: 12px; color: var(--ci-green);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(14, 122, 74, .35);
  background: none; padding: 2px 0;
}

/* ----------------------------------------------------------------- answer */
#ciOut:empty { display: none; }
.ci-answer {
  position: relative;
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 22px;
  padding: 22px 20px 18px;
  box-shadow: 0 26px 50px -38px rgba(16, 34, 26, .65);
  overflow: hidden;
}
.ci-answer:before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--ci-gold), #E8CF92 40%, transparent 92%);
}
.ci-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ci-kicker {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ci-green); font-weight: 600;
}
.ci-conf {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: .03em;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.ci-conf i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ci-conf.strong { color: #0A6A40; background: #E7F4EA; border-color: #CBE3D2; }
.ci-conf.fair { color: #8A6216; background: var(--ci-gold-soft); border-color: #EFDFB8; }
.ci-conf.thin { color: #8C3F1F; background: var(--ci-clay-soft); border-color: #EFD5C7; }

.ci-answer h2 {
  font: 500 23px/1.25 var(--ci-serif, Georgia, serif);
  letter-spacing: -.018em; color: var(--ci-ink);
  margin: 12px 0 10px;
}
.ci-verdict {
  margin: 0 0 18px;
  font-size: 15px; line-height: 1.62; color: var(--ci-ink-2);
}

.ci-facts { border-top: 1px solid var(--ci-line); }
.ci-fact { padding: 12px 0 11px; border-bottom: 1px solid var(--ci-line); }
.ci-fact-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ci-fact-l span { font-size: 13px; color: var(--ci-ink-2); }
.ci-fact-l b {
  font: 600 14.5px/1.2 inherit; color: var(--ci-ink);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.ci-fact p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: var(--ci-muted); }

.ci-method { margin: 14px 0 0; border: 1px solid var(--ci-line); border-radius: 14px; background: #FCFAF4; }
.ci-method summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-size: 12.5px; font-weight: 600; color: var(--ci-ink-2);
}
.ci-method summary::-webkit-details-marker { display: none; }
.ci-method summary i {
  width: 8px; height: 8px; border-right: 1.6px solid var(--ci-muted); border-bottom: 1.6px solid var(--ci-muted);
  transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px;
}
.ci-method[open] summary i { transform: rotate(-135deg); }
.ci-method ol { margin: 0; padding: 0 16px 14px 30px; }
.ci-method li { font-size: 12.5px; line-height: 1.6; color: var(--ci-ink-2); margin-bottom: 7px; }

.ci-risks { margin-top: 16px; padding: 14px 15px; border-radius: 14px; background: var(--ci-clay-soft); border: 1px solid #F0D6C8; }
.ci-risks h4 { margin: 0 0 7px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8C3F1F; }
.ci-risks ul { margin: 0; padding-left: 16px; }
.ci-risks li { font-size: 12.5px; line-height: 1.55; color: #6E3320; margin-bottom: 5px; }

.ci-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ci-btn {
  display: inline-flex; align-items: center;
  padding: 10px 14px; border-radius: 11px;
  background: var(--ci-green); color: #fff;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 10px 18px -14px rgba(14, 122, 74, .9);
}
.ci-btn + .ci-btn { background: #F2F5EF; color: var(--ci-green); box-shadow: none; border: 1px solid #D9E5DB; }

.ci-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.ci-refs > span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-muted); margin-right: 2px; }
.ci-ref {
  font-size: 11.5px; padding: 5px 9px; border-radius: 8px;
  background: #F7F2E4; border: 1px solid #EADFC4; color: #6B5316;
  text-decoration: none;
}

.ci-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--ci-line);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 10.5px; color: var(--ci-muted); line-height: 1.5;
}
.ci-share {
  margin-left: auto; font-size: 11px; color: var(--ci-green);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- loading */
.ci-loading {
  margin-top: 18px; display: flex; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--ci-line); border-radius: 20px;
  padding: 20px;
}
.ci-loading b { display: block; font-size: 13.5px; color: var(--ci-ink); }
.ci-loading span { display: block; font-size: 12px; color: var(--ci-muted); margin-top: 3px; line-height: 1.5; }
.ci-spin {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  border: 2.5px solid #DCE9DE; border-top-color: var(--ci-green);
  animation: ci-spin .7s linear infinite;
}
@keyframes ci-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- sections */
.ci-sec { margin-top: 26px; }
.ci-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.ci-sec-head h3 {
  font: 500 17px/1.25 var(--ci-serif, Georgia, serif);
  letter-spacing: -.01em; color: var(--ci-ink); margin: 0;
}
.ci-note { font-size: 10.5px; color: var(--ci-muted); letter-spacing: .02em; }

/* method */
.ci-method-card {
  background: #fff; border: 1px solid var(--ci-line); border-radius: 20px; padding: 17px 16px;
}
.ci-steps { margin: 0 0 14px; padding-left: 18px; }
.ci-steps li { font-size: 12.5px; line-height: 1.6; color: var(--ci-ink-2); margin-bottom: 9px; }
.ci-sources { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ci-line); }
.ci-sources li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--ci-line); }
.ci-sources b { font-size: 12px; color: var(--ci-ink); }
.ci-sources span { font-size: 11.5px; color: var(--ci-ink-2); font-variant-numeric: tabular-nums; }
.ci-sources i { font-size: 10.5px; color: var(--ci-muted); font-style: normal; margin-left: auto; }
.ci-assume { margin: 11px 0 0; font-size: 11px; line-height: 1.6; color: var(--ci-muted); }

.ci-end {
  margin-top: 26px; text-align: center;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #A9B3A9;
}

@media (min-width: 720px) {
  .ci-hero { padding: 28px 28px 24px; }
  .ci-hero h1 { font-size: 30px; }
  .ci-answer { padding: 26px 26px 20px; }
  .ci-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .ci-fact:nth-last-child(1) { border-bottom: 1px solid var(--ci-line); }
}

.ci-basis {
  margin: -12px 0 16px;
  font-size: 11.5px; line-height: 1.55; color: var(--ci-muted);
  padding-left: 1px;
}

/* ------------------------------------------------------------- thinking */
.ci-think {
  margin-top: 18px; background: #fff;
  border: 1px solid var(--ci-line); border-radius: 22px;
  padding: 20px 20px 16px;
  box-shadow: 0 26px 50px -38px rgba(16, 34, 26, .65);
}
.ci-think-head { display: flex; align-items: center; gap: 12px; }
.ci-think-head b { font: 600 14px/1.2 inherit; color: var(--ci-ink); display: block; }
.ci-think-head span#ciThinkStage { display: block; font-size: 11.5px; color: var(--ci-muted); margin-top: 2px; }
.ci-think-head em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ci-muted); font-variant-numeric: tabular-nums; }
.ci-orbit { position: relative; width: 26px; height: 26px; flex: 0 0 auto; }
.ci-orbit i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--ci-green);
  animation: ci-spin 1s linear infinite;
}
.ci-orbit i:nth-child(2) { inset: 5px; border-top-color: var(--ci-gold); animation-duration: 1.5s; animation-direction: reverse; }
.ci-orbit i:nth-child(3) { inset: 10px; border-top-color: #2FA96B; animation-duration: .7s; }
.ci-think-bar { height: 4px; border-radius: 999px; background: #EEF1EA; margin: 14px 0 12px; overflow: hidden; }
.ci-think-bar i { display: block; height: 100%; width: 6%; border-radius: 999px; background: linear-gradient(90deg, #2FA96B, #0E7A4A); transition: width .25s ease; }
.ci-think-steps { list-style: none; margin: 0 0 12px; padding: 0; }
.ci-think-steps li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: #9AA79C; padding: 5px 0;
  transition: color .2s ease;
}
.ci-think-steps li span {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid #D9E0D8; position: relative;
}
.ci-think-steps li.on { color: var(--ci-ink); font-weight: 600; }
.ci-think-steps li.on span { border-color: var(--ci-green); box-shadow: 0 0 0 4px rgba(14, 122, 74, .1); }
.ci-think-steps li.done { color: var(--ci-ink-2); }
.ci-think-steps li.done span { background: var(--ci-green); border-color: var(--ci-green); }
.ci-think-steps li.done span:after {
  content: ''; position: absolute; left: 3.5px; top: 1px;
  width: 4px; height: 8px; border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(40deg);
}
.ci-think-q { font-size: 12px; color: var(--ci-muted); border-top: 1px dashed var(--ci-line); padding-top: 10px; line-height: 1.5; }

/* sources */
.ci-src { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ci-src > span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-muted); }
.ci-src a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 11px; border-radius: 10px;
  background: #F7FAF6; border: 1px solid #DDE8DC;
  text-decoration: none; color: var(--ci-ink);
}
.ci-src a b { font-size: 12px; font-weight: 600; }
.ci-src a i { font-style: normal; font-size: 10.5px; color: var(--ci-muted); margin-left: auto; }

/* collapsed method card */
.ci-method-card { padding: 0; overflow: hidden; }
.ci-method-card > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 16px; margin: 0;
}
.ci-method-card > summary::-webkit-details-marker { display: none; }
.ci-method-card > summary h3 { margin: 0; }
.ci-method-card > summary i {
  width: 8px; height: 8px; margin-right: 6px;
  border-right: 1.6px solid var(--ci-muted); border-bottom: 1.6px solid var(--ci-muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.ci-method-card[open] > summary i { transform: rotate(-135deg); }
.ci-method-body { padding: 0 16px 16px; }

/* next questions */
.ci-next { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ci-next > span { width: 100%; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-muted); }
.ci-next button {
  font-size: 12px; padding: 8px 11px; border-radius: 999px;
  background: #F4F8F2; border: 1px solid #D9E5D7; color: var(--ci-green-2);
  text-align: left;
}
.ci-next button:active { background: var(--ci-green-soft); }

/* ================================================================= hero v2
   A real Zambian farmer, planning. The photograph carries the page; the flag
   strip and the copper badge place it. Colour is used for meaning: green for
   what is growing, copper for the market, red only where money is at risk. */
.ci-hero { padding: 0; border-radius: 26px; background: #06251A; min-height: 340px; }
.ci-hero-photo { position: absolute; inset: 0; }
.ci-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.ci-hero-photo:after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 26, 18, .55) 0%, rgba(4, 30, 20, .72) 42%, rgba(3, 22, 15, .94) 100%),
    radial-gradient(90% 70% at 90% 10%, rgba(239, 125, 0, .22), transparent 60%);
}
.ci-flag { position: absolute; top: 0; left: 0; right: 0; height: 5px; display: flex; z-index: 3; }
.ci-flag i:nth-child(1) { flex: 0 0 58%; background: #198A00; }
.ci-flag i:nth-child(2) { flex: 0 0 14%; background: #DE2010; }
.ci-flag i:nth-child(3) { flex: 0 0 14%; background: #111; }
.ci-flag i:nth-child(4) { flex: 1 1 auto; background: #EF7D00; }

.ci-hero-in { position: relative; z-index: 2; padding: 26px 20px 22px; }
.ci-hero-top { gap: 10px; }
.ci-logo {
  width: 44px; height: 44px; border-radius: 13px; overflow: hidden; flex: 0 0 auto;
  background: #F7F1DF; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255,255,255,.5);
}
.ci-logo img { width: 100%; height: 100%; object-fit: cover; }
.ci-badge {
  margin-left: auto; flex: 0 0 auto;
  font: 700 11px/1 var(--ci-serif, Georgia, serif); letter-spacing: .08em;
  padding: 7px 9px; border-radius: 9px;
  color: #2A1500; background: linear-gradient(150deg, #FFC061, #EF7D00 70%, #C96400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 16px -10px rgba(0,0,0,.9);
}
.ci-hero h1 {
  font-size: 27px; line-height: 1.18; margin: 20px 0 10px;
  color: #FFFDF6; text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.ci-hero p { color: rgba(248, 252, 246, .9); font-size: 13.5px; line-height: 1.58; max-width: 34em; }
.ci-hero-meta { margin-top: 16px; }
.ci-pill {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.ci-pill.ghost { background: rgba(255, 255, 255, .07); }
.ci-hero:after { display: none; }

.ci-spark { margin: 2px 0 2px; opacity: .9; }

/* ============================================================== type & colour
   Fraunces carries the voice, Inter carries the numbers. Tabular figures
   everywhere a kwacha or a percentage appears, so columns line up and a price
   cannot be misread. Colour follows the flag: green for what grows, copper for
   what it earns, red only for risk. */
.ci {
  --ci-ink: #10201A;
  --ci-ink-2: #35473C;
  --ci-muted: #6E7F73;
  --ci-line: #E4E7DB;
  --zm-green: #198A00;
  --zm-red: #B3261E;
  --zm-copper: #C97B2A;
  --zm-copper-deep: #9A5312;
  --ci-serif: Fraunces, Georgia, serif;
  --ci-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--ci-sans);
  color: var(--ci-ink);
  background:
    radial-gradient(70% 40% at 100% 0%, rgba(201, 123, 42, .07), transparent 70%),
    radial-gradient(60% 40% at 0% 30%, rgba(25, 138, 0, .05), transparent 70%);
}

.ci h1, .ci h2, .ci h3, .ci .ci-verdict, .ci .ci-sec-head h3 {
  font-family: var(--ci-serif);
  font-variation-settings: 'opsz' 28, 'SOFT' 0, 'WONK' 0;
  letter-spacing: -.018em;
}

/* ---------------------------------------------------------------- the brief */
.ci-answer { position: relative; border-radius: 22px; padding: 22px 20px 18px; overflow: hidden; }
.ci-answer:before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--zm-green) 0 46%, var(--zm-copper) 46% 78%, var(--zm-red) 78% 100%);
}
.ci-kicker {
  font: 600 9.5px/1 var(--ci-sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--zm-copper-deep); display: inline-flex; align-items: center; gap: 6px;
}
.ci-kicker:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--zm-copper); }
.ci-answer h2 { font-size: 26px; line-height: 1.16; margin: 10px 0 8px; color: var(--ci-ink); }
.ci-verdict {
  font-family: var(--ci-serif); font-size: 18.5px; line-height: 1.52;
  color: #17332A; margin: 0 0 8px;
}
.ci-basis { font-size: 11.5px; line-height: 1.5; color: var(--ci-muted); margin: 0 0 4px; }

.ci-conf { font: 600 10.5px/1 var(--ci-sans); letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; }
.ci-conf.strong { color: #0A5A38; background: #E4F4E8; border-color: #BFE3CB; }
.ci-conf.fair { color: #7A4D0C; background: #FDF2DA; border-color: #EFD9AC; }
.ci-conf.thin { color: #8A3A22; background: #FBEDE6; border-color: #F0CDBE; }

/* facts and ranked rows */
.ci-fact { padding: 13px 0; border-top: 1px dashed #E1E5D8; }
.ci-fact:first-of-type { border-top: 0; }
.ci-fact-l { display: flex; align-items: baseline; gap: 8px; }
.ci-fact-l span:not(.ci-rank) { font-weight: 600; font-size: 13.5px; color: var(--ci-ink); letter-spacing: -.005em; }
.ci-fact-l b {
  margin-left: auto; font: 600 15px/1.2 var(--ci-sans);
  font-variant-numeric: tabular-nums; color: #0A5A38; white-space: nowrap;
}
.ci-fact p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.62; color: var(--ci-ink-2); }
.ci-fact.ranked { padding: 15px 0 14px; }
.ci-fact.ranked .ci-fact-l { align-items: center; }
.ci-rank {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center; margin-right: 2px;
  font: 600 13px/1 var(--ci-serif); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 12px -8px rgba(0,0,0,.5);
}
.ci-rank.r1 { background: linear-gradient(150deg, #F3C766, #C98A1F); }
.ci-rank.r2 { background: linear-gradient(150deg, #CFD6D2, #8E9A93); }
.ci-rank.r3 { background: linear-gradient(150deg, #E0B08A, #A9683C); }

/* risk note — warm, not alarming */
.ci-risk {
  background: linear-gradient(180deg, #FFF8EA, #FDF3E1);
  border: 1px solid #F0DDBA; border-radius: 14px; padding: 13px 14px; margin-top: 14px;
  color: #5F431A;
}
.ci-risk b { color: #7A4D0C; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.ci-risk p { margin: 0 0 5px; font-size: 12.5px; line-height: 1.55; color: #5F431A; }

/* buttons */
.ci-btn {
  border-radius: 12px; padding: 11px 14px; font: 600 12.5px/1 var(--ci-sans);
  letter-spacing: .01em; border: 1px solid #DCE2D2; background: #FBF8EE; color: #17332A;
  box-shadow: 0 10px 18px -18px rgba(16,32,26,.8);
}
.ci-btn.primary {
  background: linear-gradient(160deg, #15874F, #0A5C38);
  border-color: #0A5C38; color: #FFFDF6;
  box-shadow: 0 14px 22px -14px rgba(10, 92, 56, .75), inset 0 1px 0 rgba(255,255,255,.18);
}
.ci-btn.ghost { background: transparent; border-style: dashed; color: #3C5347; }

/* sources */
.ci-src a {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 13px; background: #fff;
  border: 1px solid var(--ci-line); margin-top: 7px; text-decoration: none;
}
.ci-src a:before {
  content: ''; width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(150deg, #E7F1E4, #CFE4CE);
  box-shadow: inset 0 0 0 1px rgba(25,138,0,.12);
}
.ci-src a:nth-child(2):before { background: linear-gradient(150deg, #FFF0DA, #F3D4A6); }
.ci-src a:nth-child(3):before { background: linear-gradient(150deg, #FDECEA, #F3C9C2); }
.ci-src b { font: 600 12.5px/1.35 var(--ci-sans); color: var(--ci-ink); }
.ci-src i { font-style: normal; font-size: 10.5px; color: var(--ci-muted); text-align: right; }

/* section labels */
.ci-sec-head h3 { font-size: 21px; margin: 0; }
.ci-note { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ci-muted); }
.ci-foot { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #7C8B80; }

/* feedback — one line, never a modal */
.ci-fb { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid #EDF0E6; }
.ci-fb span { font-size: 11px; letter-spacing: .04em; color: #6E7F73; margin-right: auto; }
.ci-fb button {
  font: 600 11px/1 var(--ci-sans); padding: 7px 10px; border-radius: 999px;
  border: 1px solid #DFE5D8; background: #fff; color: #2C4438;
}
.ci-fb button:first-of-type { border-color: #CBE3D2; color: #0A5A38; background: #F4FBF5; }

/* Field-rate answers are a table, because a table is what gets written on a
   bag or read out to the agro-dealer. Scrolls sideways rather than squeezing
   three columns into a phone. */
.ci-table {
  margin: 14px 0 4px;
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.ci-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ci-table th {
  text-align: left; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: 10.5px; color: var(--ci-muted); padding: 10px 12px;
  border-bottom: 1px solid var(--ci-line); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ci-table td {
  padding: 11px 12px; vertical-align: top; border-bottom: 1px solid var(--ci-line);
  line-height: 1.45;
}
.ci-table tr:last-child td { border-bottom: 0; }
.ci-table td:first-child { font-weight: 600; white-space: nowrap; }
.ci-table td:nth-child(3) { color: var(--ci-muted); font-size: 13.5px; }
@media (max-width: 430px) {
  .ci-table table { font-size: 13.5px; }
  .ci-table th, .ci-table td { padding: 9px 10px; }
}

/* ======================================================== ask, and after it
 * One pass over the strip a thumb actually touches: the field, the Ask
 * button, the question chips, the recent line, the ground control, and the
 * answer card that follows them. Everything below is measured in the same
 * 4px rhythm so the screen reads as one surface instead of five boxes.
 */
.ci-ask-wrap { margin: 18px 0 0; }

.ci-ask {
  border-radius: 20px;
  padding: 8px;
  border: 1px solid #E1E7DE;
  box-shadow: 0 20px 34px -30px rgba(16, 34, 26, .55), 0 1px 0 rgba(255,255,255,.7) inset;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ci-ask:focus-within {
  border-color: #BEDCC6;
  box-shadow: 0 0 0 4px rgba(14, 122, 74, .08), 0 20px 34px -30px rgba(16, 34, 26, .55);
}
.ci-ask-row { gap: 8px; }
.ci-ask input {
  font-size: 15.5px;
  padding: 13px 4px 13px 12px;
}
.ci-ask input::placeholder { color: #94A497; }

.ci-mic { width: 44px; height: 44px; border-radius: 14px; transition: background .15s ease, color .15s ease; }
/* question chips: a scrollable rail with a soft edge so it reads as "more" */
.ci-chips {
  gap: 8px;
  padding: 13px 0 3px;
  margin: 0 -1px;
  /* The fade on the right edge says "there is more" without a scrollbar. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.ci-q {
  scroll-snap-align: start;
  padding: 9px 14px;
  font-size: 12.5px;
  border-color: #E3E9E0;
  color: #3E5347;
  box-shadow: 0 8px 16px -18px rgba(16, 34, 26, .8);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ci-q:first-child {
  background: #F5FAF5; border-color: #CDE3D3; color: #0C6E42; font-weight: 600;
}
.ci-q:active { background: var(--ci-green-soft); border-color: #BFDCC6; }

/* recent: a quiet line of pills, not a row of underlines */
.ci-hist {
  padding: 12px 0 0; gap: 6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.ci-hist::-webkit-scrollbar { display: none; height: 0; }
.ci-chips::-webkit-scrollbar { display: none; height: 0; }
.ci-hist span {
  font-size: 9.5px; letter-spacing: .14em; color: #9AA79B; margin-right: 1px;
}
.ci-h {
  font-size: 11.5px; color: #45594B;
  background: #F3F6F1; border: 1px solid #E5EBE2; border-radius: 999px;
  padding: 6px 11px; text-decoration: none;
  max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-h:active { background: #E9F2E9; }

/* the answer that follows them */
.ci-answer {
  margin-top: 16px;
  padding: 20px 18px 16px;
  border-color: #E4E9E1;
  border-radius: 24px;
}
.ci-answer-head { gap: 8px; }
.ci-kicker { font-size: 9.5px; letter-spacing: .19em; }
.ci-conf {
  padding: 6px 10px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.ci-answer h2 {
  font-size: 25px; line-height: 1.2; letter-spacing: -.022em;
  margin: 13px 0 10px;
}
.ci-verdict { font-size: 16px; line-height: 1.6; margin-bottom: 15px; color: #2E4236; }
.ci-basis {
  margin: 0 0 15px; padding-left: 10px;
  border-left: 2px solid #EAE0C6;
  font-size: 11.5px; line-height: 1.55; color: #7C8C80;
}
.ci-fact { padding: 13px 0 12px; }
.ci-fact-l span { font-size: 13px; color: #4B6152; }
.ci-fact-l b { font-size: 15px; }
.ci-fact p { font-size: 12px; color: #7C8C80; }

@media (max-width: 430px) {
  .ci-ask { border-radius: 18px; }
  .ci-answer { padding: 18px 15px 14px; border-radius: 22px; }
  .ci-answer h2 { font-size: 23px; }
  .ci-verdict { font-size: 15.5px; }
}

/* ============================================================== governance
 * The tier is the promise: 5 stars means a person signed it, 3 means the
 * engine wrote it. It sits next to the evidence badge so the two questions —
 * "how much evidence" and "who stands behind it" — are answered together.
 */
.ci-head-right { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ci-tier {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid #EFDFB8; background: #FFF8E6;
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  color: #7A5A12;
}
.ci-tier i { font-style: normal; letter-spacing: 1px; font-size: 9.5px; color: #C39434; }
.ci-tier b { font-weight: 700; }
.ci-tier.s5 { background: #E7F4EA; border-color: #CBE3D2; color: #0A6A40; }
.ci-tier.s5 i { color: #12915A; }
.ci-tier.s1 { background: #F3F1EA; border-color: #E2DED2; color: #6C6753; }
.ci-tier.s1 i { color: #A79C7C; }

/* A draft that touches a chemical or an animal medicine says so, in the flow
   of the answer rather than in small print at the bottom. */
.ci-draft {
  margin: -4px 0 15px; padding: 11px 13px;
  border-left: 3px solid #C99A34; background: #FFFBF0;
  border-radius: 0 10px 10px 0;
  font-size: 12px; line-height: 1.55; color: #6C5520;
}

.ci-btn.quiet {
  background: #fff; color: #0C6E42; box-shadow: none;
  border: 1px solid #CFE0D3; font-weight: 600;
}
.ci-btn.quiet.sent { background: #EFF7F0; border-color: #C4DECB; }

.ci-consent { margin-top: 14px; padding: 12px 13px; border-radius: 12px; background: #F7F9F5; border: 1px solid #E5EAE2; }
.ci-consent label { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: #2E4236; cursor: pointer; }
.ci-consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: #0C6E42; flex: 0 0 auto; }
.ci-consent p { margin: 7px 0 0 25px; font-size: 11px; line-height: 1.55; color: #7C8C80; }


/* ============================================================ your ground
 * One card that finds the region, in the open. It names each source as it
 * tries it, shows what it found and lets the reader change it. Everything
 * here is the reader's data: the position never leaves the request.
 */
.ci-loc {
  margin-top: 16px;
  padding: 15px 15px 14px;
  border-radius: 20px;
  color: #EFF6EE;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(232, 180, 92, .14), transparent 60%),
    linear-gradient(160deg, #0D3F2A 0%, #082A1B 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 22px 34px -30px rgba(5, 26, 17, .95);
}
.ci-loc-head { display: flex; gap: 11px; align-items: flex-start; }
.ci-loc-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid rgba(232, 180, 92, .45);
  background: rgba(232, 180, 92, .1);
  color: #E9B45C;
}
.ci-loc-ic svg { width: 17px; height: 17px; }
.ci-loc h3 {
  margin: 1px 0 5px;
  font-family: var(--ci-serif, Georgia, serif);
  font-size: 16px; line-height: 1.25; font-weight: 600;
  color: #F6FBF4; letter-spacing: -.005em;
}
.ci-loc-head p { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(239, 246, 238, .62); }

/* The button carries the app's own stripes: red, black, green on gold. */
.ci-loc-btn {
  position: relative; width: 100%; height: 52px;
  margin-top: 14px; padding: 0 14px 0 0;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #F3C97C 0%, #DFA03C 100%);
  color: #14301F; text-align: left;
  box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .12s ease, filter .15s ease;
}
.ci-loc-btn b { flex: 1 1 auto; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.ci-loc-btn > span {
  flex: 0 0 auto; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(20, 48, 31, .58);
  white-space: nowrap;
}
.ci-loc-btn:active { transform: translateY(1px); filter: brightness(.98); }
.ci-loc-btn[disabled] { cursor: default; }
.ci-loc-btn[disabled] > span { opacity: .45; }

.ci-stripes { display: flex; align-items: center; gap: 3px; height: 100%; padding: 0 10px 0 12px; }
.ci-stripes u { display: block; width: 3px; height: 58%; border-radius: 2px; background: #C0392B; }
.ci-stripes u:nth-child(2) { background: #1B1B1B; }
.ci-stripes u:nth-child(3) { background: #0C6E42; }

/* which source is being tried, and which answered */
.ci-stages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.ci-stage {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(239, 246, 238, .5);
}
.ci-stage i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.ci-stage.on { color: #F3C97C; border-color: rgba(243, 201, 124, .5); background: rgba(243, 201, 124, .1); }
.ci-stage.on i { background: #F3C97C; animation: ci-blink 1.05s ease-in-out infinite; }
.ci-stage.done { color: #9FD7B1; border-color: rgba(159, 215, 177, .3); }
.ci-stage.done i { background: #5FBF86; }
@keyframes ci-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.ci-res {
  margin-top: 11px; padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(232, 180, 92, .28);
}
.ci-res-src {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(239, 246, 238, .66);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px; padding: 4px 9px;
}
.ci-res-src i { width: 5px; height: 5px; border-radius: 50%; background: #5FBF86; }
.ci-res h4 { margin: 10px 0 6px; font-size: 15px; line-height: 1.35; font-weight: 700; color: #F6FBF4; letter-spacing: -.005em; }
.ci-res p { margin: 0 0 7px; font-size: 12px; line-height: 1.55; color: rgba(239, 246, 238, .74); }
.ci-res p.dim { color: rgba(239, 246, 238, .5); font-size: 11px; }
.ci-res-again {
  margin-top: 4px; height: 34px; padding: 0 12px;
  border-radius: 10px; border: 1px solid rgba(243, 201, 124, .5);
  background: rgba(243, 201, 124, .08); color: #F3C97C;
  font: 700 12px/1 inherit;
}

/* choosing by hand, always available */
.ci-manual { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ci-manual p {
  margin: 0 0 8px; font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(239, 246, 238, .48);
}
.ci-manual-row { display: flex; gap: 8px; }
.ci-sel {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  height: 42px; padding: 0 10px;
  border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
}
.ci-sel select {
  flex: 1 1 auto; min-width: 0; width: 100%;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; outline: 0;
  color: #EFF6EE; font: 600 13px/1.2 inherit;
  text-overflow: ellipsis;
}
.ci-sel .ci-chev { border-color: #9DB3A4; margin-left: 4px; }
.ci-use {
  flex: 0 0 auto; height: 42px; padding: 0 15px;
  border-radius: 11px;
  border: 1px solid rgba(243, 201, 124, .55);
  background: rgba(243, 201, 124, .1);
  color: #F3C97C; font: 700 12.5px/1 inherit;
}
.ci-use:active { background: rgba(243, 201, 124, .2); }

.ci-res-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ci-res-hide {
  height: 34px; padding: 0 10px; border-radius: 10px;
  border: 0; background: none; color: rgba(239, 246, 238, .6);
  font: 650 12px/1 inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(239, 246, 238, .3);
}

/* ======================================================= ask, tightened
 * The field was carrying too much air: a 50px box holding a 44px button made
 * the whole block look like a form. One height, one radius, one rhythm.
 */
.ci-ask-wrap { margin: 16px 0 0; }
.ci-ask {
  border-radius: 18px;
  padding: 10px 7px 7px 0;
  border: 1px solid #E4EAE1;
  box-shadow: 0 14px 26px -24px rgba(16, 34, 26, .7);
}
.ci-ask-row { gap: 6px; align-items: center; }
.ci-ask input {
  height: 44px; padding: 0 4px 0 16px;
  font-size: 15px; letter-spacing: -.005em;
}
.ci-ask input::placeholder { color: #9AA79B; }
.ci-mic {
  width: 40px; height: 40px; border-radius: 12px;
  background: #F1F7F1; color: #2F6A48;
  border: 1px solid #E3EFE4;
}
.ci-mic svg { width: 17px; height: 17px; }

/* chips and recent: smaller type, so two fit whole instead of one and a half */
.ci-chips { padding: 12px 0 2px; gap: 7px; }
.ci-q {
  padding: 8px 13px; font-size: 12px; height: 34px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
}
.ci-hist { padding: 11px 0 0; gap: 6px; }
.ci-h { font-size: 11px; padding: 5px 10px; max-width: 54vw; }
.ci-hist span { font-size: 9px; letter-spacing: .16em; }

/* ============================================================ how it works
 * A quiet drawer, not a hero card. The title is the only thing that needs to
 * be read; the chevron says it opens.
 */
.ci-method {
  margin-top: 22px;
  background: #fff;
  border: 1px solid #E6EBE2;
  border-radius: 16px;
  box-shadow: 0 14px 26px -30px rgba(16, 34, 26, .8);
  overflow: hidden;
}
.ci-method-head {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 14px 15px 13px; cursor: pointer; list-style: none;
}
.ci-method-head::-webkit-details-marker { display: none; }
.ci-method-k {
  grid-column: 1 / -1;
  font-size: 9px; letter-spacing: .17em; text-transform: uppercase;
  color: #9AA79B; margin-bottom: 4px;
}
.ci-method-head h3 {
  margin: 0;
  font-family: var(--ci-serif, Georgia, serif);
  font-size: 19px; line-height: 1.15; font-weight: 600; color: #17281E;
  letter-spacing: -.015em;
}
.ci-method-chev {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #E1E8DE; background: #FAFCF9;
  position: relative; flex: 0 0 auto; grid-row: 1 / span 2; grid-column: 2;
  transition: transform .22s ease, background .15s ease;
}
.ci-method-chev:before {
  content: ''; position: absolute; left: 50%; top: 46%;
  width: 6px; height: 6px; margin: -4px 0 0 -3px;
  border-right: 1.6px solid #52685A; border-bottom: 1.6px solid #52685A;
  transform: rotate(45deg);
}
.ci-method[open] .ci-method-chev { transform: rotate(180deg); background: #F2F7F1; }
.ci-method-body { padding: 2px 15px 15px; border-top: 1px solid #EFF2EC; }

/* sign-off */
.ci-sign {
  margin: 26px 0 8px;
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9FAB9F;
}
.ci-sign i { font-style: normal; opacity: .6; }
.ci-sign-stripes { display: inline-flex; gap: 2px; margin-right: 3px; }
.ci-sign-stripes u { display: block; width: 2px; height: 10px; border-radius: 1px; background: #C0392B; }
.ci-sign-stripes u:nth-child(2) { background: #1B1B1B; }
.ci-sign-stripes u:nth-child(3) { background: #0C6E42; }
.ci-sign-off { display: inline-flex; align-items: center; gap: 4px; }
.ci-sign-off b { width: 4px; height: 4px; border-radius: 50%; background: #12915A; }

/* the drawer's steps: numbered in gold, read as a method rather than a list */
.ci-method-body .ci-steps { list-style: none; padding-left: 0; margin-top: 12px; counter-reset: mstep; }
.ci-method-body .ci-steps li {
  position: relative; padding-left: 27px; counter-increment: mstep; margin-bottom: 11px;
}
.ci-method-body .ci-steps li:before {
  content: counter(mstep);
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FBF3DF; border: 1px solid #F0E0BA; color: #8A6216;
  font: 700 9.5px/18px inherit; text-align: center;
}
.ci-method-body .ci-sources { margin-top: 6px; }
.ci-method-body .ci-sources li:before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #C9D6C7; align-self: center; flex: 0 0 auto;
}
.ci-method-body .ci-sources li { padding-left: 0; }
.ci-method-body .ci-consent { margin-top: 14px; }

.ci-mic {
  width: 40px; height: 40px; border-radius: 12px;
  background: #F2F8F2; border: 1px solid #E2EFE3; color: #2C6B4A;
  transition: background .15s ease, color .15s ease;
}
.ci-mic svg { width: 18px; height: 18px; }
.ci-mic:active { background: #E4F2E5; color: #0C6E42; }
.ci-mic.on { background: #0C6E42; border-color: #0C6E42; color: #fff; }

/* ================================================================== the key
 * The Ask button is the one action on the page, so it is built like a piece of
 * hardware rather than a sweet: a single deep green face, no gloss, no bevel,
 * no metal. White letters, a hard edge and a short shadow, and it sits still
 * until it is pressed. Command comes from restraint, not from shine.
 */
.ci-go {
  position: relative; flex: 0 0 auto;
  height: 40px; min-width: 78px; padding: 0 18px;
  border-radius: 11px;
  border: 1px solid #06371F;
  background: linear-gradient(180deg, #12684A 0%, #0C5C3C 52%, #084A30 100%);
  color: #FFFDF6;
  font-family: var(--font, Inter, system-ui, sans-serif);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 1px 1px rgba(8, 42, 28, .20),
    0 10px 18px -14px rgba(6, 34, 21, .95);
  transition: background .14s ease, transform .08s ease, box-shadow .14s ease;
}
/* one hairline of light along the top edge: enough to read as a raised key,
   not enough to look moulded in plastic */
.ci-go::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, .3) 70%, transparent);
  pointer-events: none;
}
.ci-go span { position: relative; display: block; transform: translateY(-.5px); }
.ci-go:hover { background: linear-gradient(180deg, #14724F 0%, #0E6743 52%, #0A5335 100%); }
.ci-go:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #0B4F35 0%, #08412A 100%);
  box-shadow: inset 0 2px 4px rgba(3, 24, 14, .35), 0 1px 1px rgba(8, 42, 28, .18);
}
.ci-go:focus-visible { outline: 2px solid #DFA03C; outline-offset: 3px; }
.ci-go[disabled] { opacity: .58; box-shadow: none; }
.ci-go.busy span { opacity: .8; }
.ci-go.busy::after {
  content: ''; position: absolute; right: 9px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  border: 1.6px solid rgba(255, 255, 255, .3);
  border-top-color: #FFFDF6; border-radius: 50%;
  animation: ci-spin .7s linear infinite;
}
.ci-go.busy { padding-right: 24px; }
@keyframes ci-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- sections */
.ci-sec { margin-top: 26px; }
.ci-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.ci-sec-head h3 {
  font: 500 17px/1.25 var(--ci-serif, Georgia, serif);
  letter-spacing: -.01em; color: var(--ci-ink); margin: 0;
}
.ci-note { font-size: 10.5px; color: var(--ci-muted); letter-spacing: .02em; }

/* method */
.ci-method-card {
  background: #fff; border: 1px solid var(--ci-line); border-radius: 20px; padding: 17px 16px;
}
.ci-steps { margin: 0 0 14px; padding-left: 18px; }
.ci-steps li { font-size: 12.5px; line-height: 1.6; color: var(--ci-ink-2); margin-bottom: 9px; }
.ci-sources { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ci-line); }
.ci-sources li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--ci-line); }
.ci-sources b { font-size: 12px; color: var(--ci-ink); }
.ci-sources span { font-size: 11.5px; color: var(--ci-ink-2); font-variant-numeric: tabular-nums; }
.ci-sources i { font-size: 10.5px; color: var(--ci-muted); font-style: normal; margin-left: auto; }
.ci-assume { margin: 11px 0 0; font-size: 11px; line-height: 1.6; color: var(--ci-muted); }

.ci-end {
  margin-top: 26px; text-align: center;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #A9B3A9;
}

@media (min-width: 720px) {
  .ci-hero { padding: 28px 28px 24px; }
  .ci-hero h1 { font-size: 30px; }
  .ci-answer { padding: 26px 26px 20px; }
  .ci-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .ci-fact:nth-last-child(1) { border-bottom: 1px solid var(--ci-line); }
}

.ci-basis {
  margin: -12px 0 16px;
  font-size: 11.5px; line-height: 1.55; color: var(--ci-muted);
  padding-left: 1px;
}

/* ------------------------------------------------------------- thinking */
.ci-think {
  margin-top: 18px; background: #fff;
  border: 1px solid var(--ci-line); border-radius: 22px;
  padding: 20px 20px 16px;
  box-shadow: 0 26px 50px -38px rgba(16, 34, 26, .65);
}
.ci-think-head { display: flex; align-items: center; gap: 12px; }
.ci-think-head b { font: 600 14px/1.2 inherit; color: var(--ci-ink); display: block; }
.ci-think-head span#ciThinkStage { display: block; font-size: 11.5px; color: var(--ci-muted); margin-top: 2px; }
.ci-think-head em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ci-muted); font-variant-numeric: tabular-nums; }
.ci-orbit { position: relative; width: 26px; height: 26px; flex: 0 0 auto; }
.ci-orbit i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--ci-green);
  animation: ci-spin 1s linear infinite;
}
.ci-orbit i:nth-child(2) { inset: 5px; border-top-color: var(--ci-gold); animation-duration: 1.5s; animation-direction: reverse; }
.ci-orbit i:nth-child(3) { inset: 10px; border-top-color: #2FA96B; animation-duration: .7s; }
.ci-think-bar { height: 4px; border-radius: 999px; background: #EEF1EA; margin: 14px 0 12px; overflow: hidden; }
.ci-think-bar i { display: block; height: 100%; width: 6%; border-radius: 999px; background: linear-gradient(90deg, #2FA96B, #0E7A4A); transition: width .25s ease; }
.ci-think-steps { list-style: none; margin: 0 0 12px; padding: 0; }
.ci-think-steps li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: #9AA79C; padding: 5px 0;
  transition: color .2s ease;
}
.ci-think-steps li span {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid #D9E0D8; position: relative;
}
.ci-think-steps li.on { color: var(--ci-ink); font-weight: 600; }
.ci-think-steps li.on span { border-color: var(--ci-green); box-shadow: 0 0 0 4px rgba(14, 122, 74, .1); }
.ci-think-steps li.done { color: var(--ci-ink-2); }
.ci-think-steps li.done span { background: var(--ci-green); border-color: var(--ci-green); }
.ci-think-steps li.done span:after {
  content: ''; position: absolute; left: 3.5px; top: 1px;
  width: 4px; height: 8px; border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff;
  transform: rotate(40deg);
}
.ci-think-q { font-size: 12px; color: var(--ci-muted); border-top: 1px dashed var(--ci-line); padding-top: 10px; line-height: 1.5; }

/* sources */
.ci-src { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ci-src > span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-muted); }
.ci-src a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 11px; border-radius: 10px;
  background: #F7FAF6; border: 1px solid #DDE8DC;
  text-decoration: none; color: var(--ci-ink);
}
.ci-src a b { font-size: 12px; font-weight: 600; }
.ci-src a i { font-style: normal; font-size: 10.5px; color: var(--ci-muted); margin-left: auto; }

/* collapsed method card */
.ci-method-card { padding: 0; overflow: hidden; }
.ci-method-card > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 16px; margin: 0;
}
.ci-method-card > summary::-webkit-details-marker { display: none; }
.ci-method-card > summary h3 { margin: 0; }
.ci-method-card > summary i {
  width: 8px; height: 8px; margin-right: 6px;
  border-right: 1.6px solid var(--ci-muted); border-bottom: 1.6px solid var(--ci-muted);
  transform: rotate(45deg); transition: transform .2s ease;
}
.ci-method-card[open] > summary i { transform: rotate(-135deg); }
.ci-method-body { padding: 0 16px 16px; }

/* next questions */
.ci-next { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ci-next > span { width: 100%; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-muted); }
.ci-next button {
  font-size: 12px; padding: 8px 11px; border-radius: 999px;
  background: #F4F8F2; border: 1px solid #D9E5D7; color: var(--ci-green-2);
  text-align: left;
}
.ci-next button:active { background: var(--ci-green-soft); }

/* ================================================================= hero v2
   A real Zambian farmer, planning. The photograph carries the page; the flag
   strip and the copper badge place it. Colour is used for meaning: green for
   what is growing, copper for the market, red only where money is at risk. */
.ci-hero { padding: 0; border-radius: 26px; background: #06251A; min-height: 340px; }
.ci-hero-photo { position: absolute; inset: 0; }
.ci-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.ci-hero-photo:after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 26, 18, .55) 0%, rgba(4, 30, 20, .72) 42%, rgba(3, 22, 15, .94) 100%),
    radial-gradient(90% 70% at 90% 10%, rgba(239, 125, 0, .22), transparent 60%);
}
.ci-flag { position: absolute; top: 0; left: 0; right: 0; height: 5px; display: flex; z-index: 3; }
.ci-flag i:nth-child(1) { flex: 0 0 58%; background: #198A00; }
.ci-flag i:nth-child(2) { flex: 0 0 14%; background: #DE2010; }
.ci-flag i:nth-child(3) { flex: 0 0 14%; background: #111; }
.ci-flag i:nth-child(4) { flex: 1 1 auto; background: #EF7D00; }

.ci-hero-in { position: relative; z-index: 2; padding: 26px 20px 22px; }
.ci-hero-top { gap: 10px; }
.ci-logo {
  width: 44px; height: 44px; border-radius: 13px; overflow: hidden; flex: 0 0 auto;
  background: #F7F1DF; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255,255,255,.5);
}
.ci-logo img { width: 100%; height: 100%; object-fit: cover; }
.ci-badge {
  margin-left: auto; flex: 0 0 auto;
  font: 700 11px/1 var(--ci-serif, Georgia, serif); letter-spacing: .08em;
  padding: 7px 9px; border-radius: 9px;
  color: #2A1500; background: linear-gradient(150deg, #FFC061, #EF7D00 70%, #C96400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 16px -10px rgba(0,0,0,.9);
}
.ci-hero h1 {
  font-size: 27px; line-height: 1.18; margin: 20px 0 10px;
  color: #FFFDF6; text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.ci-hero p { color: rgba(248, 252, 246, .9); font-size: 13.5px; line-height: 1.58; max-width: 34em; }
.ci-hero-meta { margin-top: 16px; }
.ci-pill {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.ci-pill.ghost { background: rgba(255, 255, 255, .07); }
.ci-hero:after { display: none; }

.ci-spark { margin: 2px 0 2px; opacity: .9; }

/* ============================================================== type & colour
   Fraunces carries the voice, Inter carries the numbers. Tabular figures
   everywhere a kwacha or a percentage appears, so columns line up and a price
   cannot be misread. Colour follows the flag: green for what grows, copper for
   what it earns, red only for risk. */
.ci {
  --ci-ink: #10201A;
  --ci-ink-2: #35473C;
  --ci-muted: #6E7F73;
  --ci-line: #E4E7DB;
  --zm-green: #198A00;
  --zm-red: #B3261E;
  --zm-copper: #C97B2A;
  --zm-copper-deep: #9A5312;
  --ci-serif: Fraunces, Georgia, serif;
  --ci-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--ci-sans);
  color: var(--ci-ink);
  background:
    radial-gradient(70% 40% at 100% 0%, rgba(201, 123, 42, .07), transparent 70%),
    radial-gradient(60% 40% at 0% 30%, rgba(25, 138, 0, .05), transparent 70%);
}

.ci h1, .ci h2, .ci h3, .ci .ci-verdict, .ci .ci-sec-head h3 {
  font-family: var(--ci-serif);
  font-variation-settings: 'opsz' 28, 'SOFT' 0, 'WONK' 0;
  letter-spacing: -.018em;
}

/* ---------------------------------------------------------------- the brief */
.ci-answer { position: relative; border-radius: 22px; padding: 22px 20px 18px; overflow: hidden; }
.ci-answer:before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--zm-green) 0 46%, var(--zm-copper) 46% 78%, var(--zm-red) 78% 100%);
}
.ci-kicker {
  font: 600 9.5px/1 var(--ci-sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--zm-copper-deep); display: inline-flex; align-items: center; gap: 6px;
}
.ci-kicker:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--zm-copper); }
.ci-answer h2 { font-size: 26px; line-height: 1.16; margin: 10px 0 8px; color: var(--ci-ink); }
.ci-verdict {
  font-family: var(--ci-serif); font-size: 18.5px; line-height: 1.52;
  color: #17332A; margin: 0 0 8px;
}
.ci-basis { font-size: 11.5px; line-height: 1.5; color: var(--ci-muted); margin: 0 0 4px; }

.ci-conf { font: 600 10.5px/1 var(--ci-sans); letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; }
.ci-conf.strong { color: #0A5A38; background: #E4F4E8; border-color: #BFE3CB; }
.ci-conf.fair { color: #7A4D0C; background: #FDF2DA; border-color: #EFD9AC; }
.ci-conf.thin { color: #8A3A22; background: #FBEDE6; border-color: #F0CDBE; }

/* facts and ranked rows */
.ci-fact { padding: 13px 0; border-top: 1px dashed #E1E5D8; }
.ci-fact:first-of-type { border-top: 0; }
.ci-fact-l { display: flex; align-items: baseline; gap: 8px; }
.ci-fact-l span:not(.ci-rank) { font-weight: 600; font-size: 13.5px; color: var(--ci-ink); letter-spacing: -.005em; }
.ci-fact-l b {
  margin-left: auto; font: 600 15px/1.2 var(--ci-sans);
  font-variant-numeric: tabular-nums; color: #0A5A38; white-space: nowrap;
}
.ci-fact p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.62; color: var(--ci-ink-2); }
.ci-fact.ranked { padding: 15px 0 14px; }
.ci-fact.ranked .ci-fact-l { align-items: center; }
.ci-rank {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center; margin-right: 2px;
  font: 600 13px/1 var(--ci-serif); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 12px -8px rgba(0,0,0,.5);
}
.ci-rank.r1 { background: linear-gradient(150deg, #F3C766, #C98A1F); }
.ci-rank.r2 { background: linear-gradient(150deg, #CFD6D2, #8E9A93); }
.ci-rank.r3 { background: linear-gradient(150deg, #E0B08A, #A9683C); }

/* risk note — warm, not alarming */
.ci-risk {
  background: linear-gradient(180deg, #FFF8EA, #FDF3E1);
  border: 1px solid #F0DDBA; border-radius: 14px; padding: 13px 14px; margin-top: 14px;
  color: #5F431A;
}
.ci-risk b { color: #7A4D0C; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.ci-risk p { margin: 0 0 5px; font-size: 12.5px; line-height: 1.55; color: #5F431A; }

/* buttons */
.ci-btn {
  border-radius: 12px; padding: 11px 14px; font: 600 12.5px/1 var(--ci-sans);
  letter-spacing: .01em; border: 1px solid #DCE2D2; background: #FBF8EE; color: #17332A;
  box-shadow: 0 10px 18px -18px rgba(16,32,26,.8);
}
.ci-btn.primary {
  background: linear-gradient(160deg, #15874F, #0A5C38);
  border-color: #0A5C38; color: #FFFDF6;
  box-shadow: 0 14px 22px -14px rgba(10, 92, 56, .75), inset 0 1px 0 rgba(255,255,255,.18);
}
.ci-btn.ghost { background: transparent; border-style: dashed; color: #3C5347; }

/* sources */
.ci-src a {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 13px; background: #fff;
  border: 1px solid var(--ci-line); margin-top: 7px; text-decoration: none;
}
.ci-src a:before {
  content: ''; width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(150deg, #E7F1E4, #CFE4CE);
  box-shadow: inset 0 0 0 1px rgba(25,138,0,.12);
}
.ci-src a:nth-child(2):before { background: linear-gradient(150deg, #FFF0DA, #F3D4A6); }
.ci-src a:nth-child(3):before { background: linear-gradient(150deg, #FDECEA, #F3C9C2); }
.ci-src b { font: 600 12.5px/1.35 var(--ci-sans); color: var(--ci-ink); }
.ci-src i { font-style: normal; font-size: 10.5px; color: var(--ci-muted); text-align: right; }

/* section labels */
.ci-sec-head h3 { font-size: 21px; margin: 0; }
.ci-note { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ci-muted); }
.ci-foot { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #7C8B80; }

/* feedback — one line, never a modal */
.ci-fb { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid #EDF0E6; }
.ci-fb span { font-size: 11px; letter-spacing: .04em; color: #6E7F73; margin-right: auto; }
.ci-fb button {
  font: 600 11px/1 var(--ci-sans); padding: 7px 10px; border-radius: 999px;
  border: 1px solid #DFE5D8; background: #fff; color: #2C4438;
}
.ci-fb button:first-of-type { border-color: #CBE3D2; color: #0A5A38; background: #F4FBF5; }

/* Field-rate answers are a table, because a table is what gets written on a
   bag or read out to the agro-dealer. Scrolls sideways rather than squeezing
   three columns into a phone. */
.ci-table {
  margin: 14px 0 4px;
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.ci-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ci-table th {
  text-align: left; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: 10.5px; color: var(--ci-muted); padding: 10px 12px;
  border-bottom: 1px solid var(--ci-line); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ci-table td {
  padding: 11px 12px; vertical-align: top; border-bottom: 1px solid var(--ci-line);
  line-height: 1.45;
}
.ci-table tr:last-child td { border-bottom: 0; }
.ci-table td:first-child { font-weight: 600; white-space: nowrap; }
.ci-table td:nth-child(3) { color: var(--ci-muted); font-size: 13.5px; }
@media (max-width: 430px) {
  .ci-table table { font-size: 13.5px; }
  .ci-table th, .ci-table td { padding: 9px 10px; }
}

/* ======================================================== ask, and after it
 * One pass over the strip a thumb actually touches: the field, the Ask
 * button, the question chips, the recent line, the ground control, and the
 * answer card that follows them. Everything below is measured in the same
 * 4px rhythm so the screen reads as one surface instead of five boxes.
 */
.ci-ask-wrap { margin: 18px 0 0; }

.ci-ask {
  border-radius: 20px;
  padding: 8px;
  border: 1px solid #E1E7DE;
  box-shadow: 0 20px 34px -30px rgba(16, 34, 26, .55), 0 1px 0 rgba(255,255,255,.7) inset;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ci-ask:focus-within {
  border-color: #BEDCC6;
  box-shadow: 0 0 0 4px rgba(14, 122, 74, .08), 0 20px 34px -30px rgba(16, 34, 26, .55);
}
.ci-ask-row { gap: 8px; }
.ci-ask input {
  font-size: 15.5px;
  padding: 13px 4px 13px 12px;
}
.ci-ask input::placeholder { color: #94A497; }

.ci-mic { width: 44px; height: 44px; border-radius: 14px; transition: background .15s ease, color .15s ease; }
/* question chips: a scrollable rail with a soft edge so it reads as "more" */
.ci-chips {
  gap: 8px;
  padding: 13px 0 3px;
  margin: 0 -1px;
  /* The fade on the right edge says "there is more" without a scrollbar. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.ci-q {
  scroll-snap-align: start;
  padding: 9px 14px;
  font-size: 12.5px;
  border-color: #E3E9E0;
  color: #3E5347;
  box-shadow: 0 8px 16px -18px rgba(16, 34, 26, .8);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ci-q:first-child {
  background: #F5FAF5; border-color: #CDE3D3; color: #0C6E42; font-weight: 600;
}
.ci-q:active { background: var(--ci-green-soft); border-color: #BFDCC6; }

/* recent: a quiet line of pills, not a row of underlines */
.ci-hist {
  padding: 12px 0 0; gap: 6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.ci-hist::-webkit-scrollbar { display: none; height: 0; }
.ci-chips::-webkit-scrollbar { display: none; height: 0; }
.ci-hist span {
  font-size: 9.5px; letter-spacing: .14em; color: #9AA79B; margin-right: 1px;
}
.ci-h {
  font-size: 11.5px; color: #45594B;
  background: #F3F6F1; border: 1px solid #E5EBE2; border-radius: 999px;
  padding: 6px 11px; text-decoration: none;
  max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci-h:active { background: #E9F2E9; }

/* the answer that follows them */
.ci-answer {
  margin-top: 16px;
  padding: 20px 18px 16px;
  border-color: #E4E9E1;
  border-radius: 24px;
}
.ci-answer-head { gap: 8px; }
.ci-kicker { font-size: 9.5px; letter-spacing: .19em; }
.ci-conf {
  padding: 6px 10px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.ci-answer h2 {
  font-size: 25px; line-height: 1.2; letter-spacing: -.022em;
  margin: 13px 0 10px;
}
.ci-verdict { font-size: 16px; line-height: 1.6; margin-bottom: 15px; color: #2E4236; }
.ci-basis {
  margin: 0 0 15px; padding-left: 10px;
  border-left: 2px solid #EAE0C6;
  font-size: 11.5px; line-height: 1.55; color: #7C8C80;
}
.ci-fact { padding: 13px 0 12px; }
.ci-fact-l span { font-size: 13px; color: #4B6152; }
.ci-fact-l b { font-size: 15px; }
.ci-fact p { font-size: 12px; color: #7C8C80; }

@media (max-width: 430px) {
  .ci-ask { border-radius: 18px; }
  .ci-answer { padding: 18px 15px 14px; border-radius: 22px; }
  .ci-answer h2 { font-size: 23px; }
  .ci-verdict { font-size: 15.5px; }
}

/* ============================================================== governance
 * The tier is the promise: 5 stars means a person signed it, 3 means the
 * engine wrote it. It sits next to the evidence badge so the two questions —
 * "how much evidence" and "who stands behind it" — are answered together.
 */
.ci-head-right { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ci-tier {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid #EFDFB8; background: #FFF8E6;
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  color: #7A5A12;
}
.ci-tier i { font-style: normal; letter-spacing: 1px; font-size: 9.5px; color: #C39434; }
.ci-tier b { font-weight: 700; }
.ci-tier.s5 { background: #E7F4EA; border-color: #CBE3D2; color: #0A6A40; }
.ci-tier.s5 i { color: #12915A; }
.ci-tier.s1 { background: #F3F1EA; border-color: #E2DED2; color: #6C6753; }
.ci-tier.s1 i { color: #A79C7C; }

/* A draft that touches a chemical or an animal medicine says so, in the flow
   of the answer rather than in small print at the bottom. */
.ci-draft {
  margin: -4px 0 15px; padding: 11px 13px;
  border-left: 3px solid #C99A34; background: #FFFBF0;
  border-radius: 0 10px 10px 0;
  font-size: 12px; line-height: 1.55; color: #6C5520;
}

.ci-btn.quiet {
  background: #fff; color: #0C6E42; box-shadow: none;
  border: 1px solid #CFE0D3; font-weight: 600;
}
.ci-btn.quiet.sent { background: #EFF7F0; border-color: #C4DECB; }

.ci-consent { margin-top: 14px; padding: 12px 13px; border-radius: 12px; background: #F7F9F5; border: 1px solid #E5EAE2; }
.ci-consent label { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: #2E4236; cursor: pointer; }
.ci-consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: #0C6E42; flex: 0 0 auto; }
.ci-consent p { margin: 7px 0 0 25px; font-size: 11px; line-height: 1.55; color: #7C8C80; }


/* ============================================================ your ground
 * One card that finds the region, in the open. It names each source as it
 * tries it, shows what it found and lets the reader change it. Everything
 * here is the reader's data: the position never leaves the request.
 */
.ci-loc {
  margin-top: 16px;
  padding: 15px 15px 14px;
  border-radius: 20px;
  color: #EFF6EE;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(232, 180, 92, .14), transparent 60%),
    linear-gradient(160deg, #0D3F2A 0%, #082A1B 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 22px 34px -30px rgba(5, 26, 17, .95);
}
.ci-loc-head { display: flex; gap: 11px; align-items: flex-start; }
.ci-loc-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid rgba(232, 180, 92, .45);
  background: rgba(232, 180, 92, .1);
  color: #E9B45C;
}
.ci-loc-ic svg { width: 17px; height: 17px; }
.ci-loc h3 {
  margin: 1px 0 5px;
  font-family: var(--ci-serif, Georgia, serif);
  font-size: 16px; line-height: 1.25; font-weight: 600;
  color: #F6FBF4; letter-spacing: -.005em;
}
.ci-loc-head p { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(239, 246, 238, .62); }

/* The button carries the app's own stripes: red, black, green on gold. */
.ci-loc-btn {
  position: relative; width: 100%; height: 52px;
  margin-top: 14px; padding: 0 14px 0 0;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #F3C97C 0%, #DFA03C 100%);
  color: #14301F; text-align: left;
  box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .12s ease, filter .15s ease;
}
.ci-loc-btn b { flex: 1 1 auto; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.ci-loc-btn > span {
  flex: 0 0 auto; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(20, 48, 31, .58);
  white-space: nowrap;
}
.ci-loc-btn:active { transform: translateY(1px); filter: brightness(.98); }
.ci-loc-btn[disabled] { cursor: default; }
.ci-loc-btn[disabled] > span { opacity: .45; }

.ci-stripes { display: flex; align-items: center; gap: 3px; height: 100%; padding: 0 10px 0 12px; }
.ci-stripes u { display: block; width: 3px; height: 58%; border-radius: 2px; background: #C0392B; }
.ci-stripes u:nth-child(2) { background: #1B1B1B; }
.ci-stripes u:nth-child(3) { background: #0C6E42; }

/* which source is being tried, and which answered */
.ci-stages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.ci-stage {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(239, 246, 238, .5);
}
.ci-stage i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.ci-stage.on { color: #F3C97C; border-color: rgba(243, 201, 124, .5); background: rgba(243, 201, 124, .1); }
.ci-stage.on i { background: #F3C97C; animation: ci-blink 1.05s ease-in-out infinite; }
.ci-stage.done { color: #9FD7B1; border-color: rgba(159, 215, 177, .3); }
.ci-stage.done i { background: #5FBF86; }
@keyframes ci-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.ci-res {
  margin-top: 11px; padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(232, 180, 92, .28);
}
.ci-res-src {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(239, 246, 238, .66);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px; padding: 4px 9px;
}
.ci-res-src i { width: 5px; height: 5px; border-radius: 50%; background: #5FBF86; }
.ci-res h4 { margin: 10px 0 6px; font-size: 15px; line-height: 1.35; font-weight: 700; color: #F6FBF4; letter-spacing: -.005em; }
.ci-res p { margin: 0 0 7px; font-size: 12px; line-height: 1.55; color: rgba(239, 246, 238, .74); }
.ci-res p.dim { color: rgba(239, 246, 238, .5); font-size: 11px; }
.ci-res-again {
  margin-top: 4px; height: 34px; padding: 0 12px;
  border-radius: 10px; border: 1px solid rgba(243, 201, 124, .5);
  background: rgba(243, 201, 124, .08); color: #F3C97C;
  font: 700 12px/1 inherit;
}

/* choosing by hand, always available */
.ci-manual { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ci-manual p {
  margin: 0 0 8px; font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(239, 246, 238, .48);
}
.ci-manual-row { display: flex; gap: 8px; }
.ci-sel {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  height: 42px; padding: 0 10px;
  border-radius: 11px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
}
.ci-sel select {
  flex: 1 1 auto; min-width: 0; width: 100%;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; outline: 0;
  color: #EFF6EE; font: 600 13px/1.2 inherit;
  text-overflow: ellipsis;
}
.ci-sel .ci-chev { border-color: #9DB3A4; margin-left: 4px; }
.ci-use {
  flex: 0 0 auto; height: 42px; padding: 0 15px;
  border-radius: 11px;
  border: 1px solid rgba(243, 201, 124, .55);
  background: rgba(243, 201, 124, .1);
  color: #F3C97C; font: 700 12.5px/1 inherit;
}
.ci-use:active { background: rgba(243, 201, 124, .2); }

.ci-res-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ci-res-hide {
  height: 34px; padding: 0 10px; border-radius: 10px;
  border: 0; background: none; color: rgba(239, 246, 238, .6);
  font: 650 12px/1 inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(239, 246, 238, .3);
}

/* ======================================================= ask, tightened
 * The field was carrying too much air: a 50px box holding a 44px button made
 * the whole block look like a form. One height, one radius, one rhythm.
 */
.ci-ask-wrap { margin: 16px 0 0; }
.ci-ask {
  border-radius: 18px;
  padding: 10px 7px 7px 0;
  border: 1px solid #E4EAE1;
  box-shadow: 0 14px 26px -24px rgba(16, 34, 26, .7);
}
.ci-ask-row { gap: 6px; align-items: center; }
.ci-ask input {
  height: 44px; padding: 0 4px 0 16px;
  font-size: 15px; letter-spacing: -.005em;
}
.ci-ask input::placeholder { color: #9AA79B; }
.ci-mic {
  width: 40px; height: 40px; border-radius: 12px;
  background: #F1F7F1; color: #2F6A48;
  border: 1px solid #E3EFE4;
}
.ci-mic svg { width: 17px; height: 17px; }

/* chips and recent: smaller type, so two fit whole instead of one and a half */
.ci-chips { padding: 12px 0 2px; gap: 7px; }
.ci-q {
  padding: 8px 13px; font-size: 12px; height: 34px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
}
.ci-hist { padding: 11px 0 0; gap: 6px; }
.ci-h { font-size: 11px; padding: 5px 10px; max-width: 54vw; }
.ci-hist span { font-size: 9px; letter-spacing: .16em; }

/* ============================================================ how it works
 * A quiet drawer, not a hero card. The title is the only thing that needs to
 * be read; the chevron says it opens.
 */
.ci-method {
  margin-top: 22px;
  background: #fff;
  border: 1px solid #E6EBE2;
  border-radius: 16px;
  box-shadow: 0 14px 26px -30px rgba(16, 34, 26, .8);
  overflow: hidden;
}
.ci-method-head {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 14px 15px 13px; cursor: pointer; list-style: none;
}
.ci-method-head::-webkit-details-marker { display: none; }
.ci-method-k {
  grid-column: 1 / -1;
  font-size: 9px; letter-spacing: .17em; text-transform: uppercase;
  color: #9AA79B; margin-bottom: 4px;
}
.ci-method-head h3 {
  margin: 0;
  font-family: var(--ci-serif, Georgia, serif);
  font-size: 19px; line-height: 1.15; font-weight: 600; color: #17281E;
  letter-spacing: -.015em;
}
.ci-method-chev {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #E1E8DE; background: #FAFCF9;
  position: relative; flex: 0 0 auto; grid-row: 1 / span 2; grid-column: 2;
  transition: transform .22s ease, background .15s ease;
}
.ci-method-chev:before {
  content: ''; position: absolute; left: 50%; top: 46%;
  width: 6px; height: 6px; margin: -4px 0 0 -3px;
  border-right: 1.6px solid #52685A; border-bottom: 1.6px solid #52685A;
  transform: rotate(45deg);
}
.ci-method[open] .ci-method-chev { transform: rotate(180deg); background: #F2F7F1; }
.ci-method-body { padding: 2px 15px 15px; border-top: 1px solid #EFF2EC; }

/* sign-off */
.ci-sign {
  margin: 26px 0 8px;
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9FAB9F;
}
.ci-sign i { font-style: normal; opacity: .6; }
.ci-sign-stripes { display: inline-flex; gap: 2px; margin-right: 3px; }
.ci-sign-stripes u { display: block; width: 2px; height: 10px; border-radius: 1px; background: #C0392B; }
.ci-sign-stripes u:nth-child(2) { background: #1B1B1B; }
.ci-sign-stripes u:nth-child(3) { background: #0C6E42; }
.ci-sign-off { display: inline-flex; align-items: center; gap: 4px; }
.ci-sign-off b { width: 4px; height: 4px; border-radius: 50%; background: #12915A; }

/* the drawer's steps: numbered in gold, read as a method rather than a list */
.ci-method-body .ci-steps { list-style: none; padding-left: 0; margin-top: 12px; counter-reset: mstep; }
.ci-method-body .ci-steps li {
  position: relative; padding-left: 27px; counter-increment: mstep; margin-bottom: 11px;
}
.ci-method-body .ci-steps li:before {
  content: counter(mstep);
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FBF3DF; border: 1px solid #F0E0BA; color: #8A6216;
  font: 700 9.5px/18px inherit; text-align: center;
}
.ci-method-body .ci-sources { margin-top: 6px; }
.ci-method-body .ci-sources li:before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #C9D6C7; align-self: center; flex: 0 0 auto;
}
.ci-method-body .ci-sources li { padding-left: 0; }
.ci-method-body .ci-consent { margin-top: 14px; }

.ci-mic {
  width: 40px; height: 40px; border-radius: 12px;
  background: #F2F8F2; border: 1px solid #E2EFE3; color: #2C6B4A;
  transition: background .15s ease, color .15s ease;
}
.ci-mic svg { width: 18px; height: 18px; }
.ci-mic:active { background: #E4F2E5; color: #0C6E42; }
.ci-mic.on { background: #0C6E42; border-color: #0C6E42; color: #fff; }

/* ================================================================== the key
 * The Ask button is the one action on the page, so it is built like a piece of
 * hardware rather than a sweet: a single deep green face, no gloss, no bevel,
 * no metal. White letters, a hard edge and a short shadow, and it sits still
 * until it is pressed.
 */
.ci-go {
  position: relative; flex: 0 0 auto;
  height: 40px; min-width: 78px; padding: 0 18px;
  border-radius: 11px;
  border: 1px solid #06371F;
  background: linear-gradient(180deg, #12684A 0%, #0C5C3C 52%, #084A30 100%);
  color: #FFFDF6;
  font-family: var(--font, Inter, system-ui, sans-serif);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 1px 1px rgba(8, 42, 28, .20),
    0 10px 18px -14px rgba(6, 34, 21, .95);
  transition: background .14s ease, transform .08s ease, box-shadow .14s ease;
}
.ci-go::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3) 30%, rgba(255, 255, 255, .3) 70%, transparent);
  pointer-events: none;
}
.ci-go span { position: relative; display: block; transform: translateY(-.5px); }
.ci-go:hover { background: linear-gradient(180deg, #14724F 0%, #0E6743 52%, #0A5335 100%); }
.ci-go:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #0B4F35 0%, #08412A 100%);
  box-shadow: inset 0 2px 4px rgba(3, 24, 14, .35), 0 1px 1px rgba(8, 42, 28, .18);
}
.ci-go:focus-visible { outline: 2px solid #DFA03C; outline-offset: 3px; }
.ci-go[disabled] { opacity: .58; box-shadow: none; }
.ci-go.busy span { opacity: .8; }
.ci-go.busy::after {
  content: ''; position: absolute; right: 9px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  border: 1.6px solid rgba(255, 255, 255, .3);
  border-top-color: #FFFDF6; border-radius: 50%;
  animation: ci-spin .7s linear infinite;
}
.ci-go.busy { padding-right: 24px; }
@keyframes ci-spin { to { transform: rotate(360deg); } }

/* The flag is clipped to the card edge and runs the full width: green, red,
   black, amber — the ribbon from the app mark, not a painted border. */
.ci-ask { position: relative; overflow: hidden; }
.ci-ask-flag {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    #1E8A3C 0 58%, #D22B2B 58% 75%, #141414 75% 89%, #E8A33D 89% 100%);
}

/* ============================================================ the scan layer
 * The same evidence, arranged so it can be read at arm's length: a margin
 * bar instead of a sentence, a badge instead of a buried warning, one control
 * instead of a paragraph of what-ifs, and a drawn route instead of a number.
 * Everything here is built from the desk's own palette.
 */
.ci-snap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  margin: 0 0 14px; padding: 9px 12px;
  border-radius: 11px; background: #F4F8F3; border: 1px solid #DDE8DC;
  font-size: 12px; line-height: 1.5; color: var(--ci-ink-2);
}
.ci-snap span {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--ci-green);
}

/* Sources: one line at the top that opens into the full list */
.ci-srcwrap { margin: 0 0 16px; border: 1px solid #DDE8DC; border-radius: 12px; background: #F8FBF7; }
.ci-srcwrap > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 12px; font-weight: 600; color: #22543B;
}
.ci-srcwrap > summary::-webkit-details-marker { display: none; }
.ci-srcwrap > summary svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ci-green); }
.ci-srcwrap > summary i {
  margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--ci-green); text-decoration: underline; text-underline-offset: 2px;
}
.ci-srcwrap[open] > summary { border-bottom: 1px solid #E3EDE2; }
.ci-srcwrap .ci-src { margin: 0; padding: 10px 12px 12px; }

/* Crop cards: one bar to scale against the best of them */
.ci-crops { margin: 4px 0 16px; }
.ci-crops-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.ci-crops-head h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ci-ink); }
.ci-crops-head span { font-size: 11px; color: var(--ci-muted); }
.ci-crop {
  padding: 11px 12px 10px; margin-bottom: 8px;
  border: 1px solid var(--ci-line); border-radius: 14px; background: #FDFCF7;
}
.ci-crop:last-child { margin-bottom: 0; }
.ci-crop.top {
  border-color: #CFE0D2;
  background: linear-gradient(180deg, #F7FBF5, #FDFCF7);
  box-shadow: 0 12px 22px -20px rgba(16, 34, 26, .8);
}
.ci-crop-row { display: flex; align-items: center; gap: 9px; }
.ci-crop-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.ci-crop-ic svg { width: 18px; height: 18px; }
.ci-crop-ic.c-grain { background: #FBF1D9; color: #8A5A12; }
.ci-crop-ic.c-legume { background: #E8F3EA; color: #0E7A4A; }
.ci-crop-ic.c-root { background: #FBEAE1; color: #A24A22; }
.ci-crop-ic.c-hort { background: #EAF1EC; color: #2F6A48; }
.ci-crop-ic.c-cash { background: #F2EFE6; color: #6B5316; }
.ci-crop-name {
  min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ci-ink);
}
.ci-crop-name em {
  font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ci-green); background: var(--ci-green-soft);
  padding: 3px 6px; border-radius: 999px; white-space: nowrap;
}
.ci-crop-val {
  margin-left: auto; white-space: nowrap;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ci-ink);
}
.ci-crop-val em { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--ci-muted); margin-left: 1px; }
.ci-crop.neg .ci-crop-val { color: var(--ci-clay); }
.ci-crop-bar { height: 7px; margin: 9px 0 8px; border-radius: 999px; background: #EDF0E6; overflow: hidden; }
.ci-crop-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7FB894, #12915A); }
.ci-crop.neg .ci-crop-bar i { background: var(--ci-clay); }
.ci-crop-meta { display: flex; flex-wrap: wrap; gap: 3px 0; font-size: 11px; color: var(--ci-muted); }
.ci-crop-meta span + span::before { content: '·'; margin: 0 7px; color: #C9D2C4; }

/* Risk badges: the kind of trouble, then the sentence in full */
.ci-riskbox { margin: 18px 0 0; }
.ci-riskbox h4 { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ci-muted); }
.ci-riskbox ul { list-style: none; margin: 0; padding: 0; }
.ci-risk { padding: 10px 12px; margin-bottom: 8px; border: 1px solid; border-radius: 12px; }
.ci-risk:last-child { margin-bottom: 0; }
.ci-risk-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.ci-risk-tag svg { width: 14px; height: 14px; }
.ci-risk p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ci-ink-2); }
.ci-risk.t-red { background: #FBECE6; border-color: #EFD3C5; }
.ci-risk.t-red .ci-risk-tag { color: #A23C18; }
.ci-risk.t-amber { background: #FDF6E4; border-color: #EEDFB8; }
.ci-risk.t-amber .ci-risk-tag { color: #8A6216; }
.ci-risk.t-neutral { background: #F7F7F2; border-color: #E6E3D6; }
.ci-risk.t-neutral .ci-risk-tag { color: #5E6B60; }

/* The what-if control: dark, because it is an instrument, not a paragraph */
.ci-wi {
  margin: 18px auto 0; max-width: 560px; padding: 14px;
  border-radius: 16px; background: #0C2A1E; color: #EAF3E8;
}
.ci-wi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ci-wi-head span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(234, 243, 232, .62); }
.ci-wi-head b { font: 600 22px/1 var(--ci-serif, Georgia, serif); font-variant-numeric: tabular-nums; color: #FFFDF6; }
.ci-wi-head b.neg { color: #F0A98A; }
.ci-wi-sub { margin: 6px 0 13px; font-size: 11.5px; line-height: 1.5; color: rgba(234, 243, 232, .72); }
.ci-wi-sub.neg { color: #F2BFA8; }
.ci-wi-row {
  display: grid; grid-template-columns: 42px 1fr 50px; align-items: center; gap: 10px;
  margin-bottom: 9px; font-size: 11.5px;
}
.ci-wi-row span { color: rgba(234, 243, 232, .78); }
.ci-wi-row i {
  font-style: normal; text-align: right; font-size: 11px;
  color: #E8C173; font-variant-numeric: tabular-nums;
}
.ci-wi-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; margin: 0;
}
.ci-wi-row input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.ci-wi-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: #F3C97C; border: 1.5px solid #6B4B12;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.ci-wi-row input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.ci-wi-row input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #F3C97C; border: 1.5px solid #6B4B12;
}
.ci-wi-row input[type=range]:focus-visible { outline: 2px solid #E8C173; outline-offset: 2px; border-radius: 999px; }
.ci-wi-note { margin: 4px 0 0; font-size: 10.5px; color: rgba(234, 243, 232, .48); }

/* Route sketch: two places, a distance, a needle on the true bearing */
.ci-route { margin: 0 0 16px; border: 1px solid var(--ci-line); border-radius: 16px; background: #FCFBF5; overflow: hidden; }
.ci-route svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.ci-route figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  padding: 9px 12px; border-top: 1px solid #EFEBDE;
  font-size: 11px; color: var(--ci-muted);
}
.ci-route figcaption span:first-child { font-weight: 600; color: var(--ci-ink-2); }
.ci-route figcaption i { font-style: normal; margin-left: auto; font-size: 10px; color: #9AA79B; }

/* Answer into a record */
.ci-save {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 12px; padding: 12px; border-radius: 14px;
  border: 1px dashed #CFDCC9; background: #F8FBF5;
}
.ci-save .ci-btn.solid {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 13px; border: 0; border-radius: 11px;
  background: #0C6E42; color: #fff; cursor: pointer;
  font: 600 12.5px/1 inherit;
  box-shadow: 0 10px 18px -14px rgba(14, 122, 74, .9);
}
.ci-save .ci-btn.solid svg { width: 15px; height: 15px; }
.ci-save > span { font-size: 11px; color: var(--ci-muted); }
.ci-save-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 0; font-size: 12px; color: #1B5A3A; }
.ci-save-ok svg { width: 16px; height: 16px; color: #12915A; flex: 0 0 auto; }
.ci-save-ok b { font-weight: 700; }
.ci-save-ok a { color: var(--ci-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ci-save-no { font-size: 12px; color: var(--ci-clay); }

@media (max-width: 430px) {
  .ci-wi-row { grid-template-columns: 36px 1fr 44px; gap: 8px; }
  .ci-crop-val { font-size: 14px; }
  .ci-crops-head { flex-wrap: wrap; gap: 2px; }
  .ci-route figcaption i { margin-left: 0; }
}

/* a source that is a record rather than a page keeps the same shape */
.ci-srcwrap .ci-src-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 11px; border-radius: 10px;
  background: #F7FAF6; border: 1px solid #DDE8DC;
  font-size: 11.5px; color: var(--ci-ink);
}
.ci-srcwrap .ci-src-row b { font-size: 12px; font-weight: 600; }
.ci-srcwrap .ci-src-row i { font-style: normal; font-size: 10.5px; color: var(--ci-muted); margin-left: auto; text-align: right; }

/* ------------------------------------------------------- the method drawer head
 * The eyebrow, the serif title and the download mark were sharing one row with
 * no agreement about who owns the middle, so the title drifted right and the
 * letter-spaced kicker looked stranded. Left to right, three known widths.
 */
.ci-method-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF8, #FBF6E9);
  border: 1px solid #E7DFC9;
  box-shadow: 0 10px 20px -22px rgba(10, 30, 20, .9);
}
.ci-method-head .ci-method-k {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: #96A096;
  order: 2; justify-self: end;
}
.ci-method-head h3 {
  order: 1;
  font-family: var(--display, Georgia, serif);
  font-size: 17px; letter-spacing: -.015em; color: #16291D;
  margin: 0; text-align: left;
}
.ci-method-chev { order: 3; width: 18px; height: 18px; color: #7C8A81; }
.ci-method[open] .ci-method-head { border-radius: 16px 16px 0 0; }

/* a code answer shows figures, not prose: the table has to fit a phone */
.ci-table--tight th, .ci-table--tight td { padding-left: 9px; padding-right: 9px; }
.ci-table--tight td { font-size: 13.8px; }
.ci-table--tight th, .ci-table--tight td { white-space: normal; }
.ci-table--tight td:first-child { white-space: normal; padding-right: 10px; }
.ci-table--tight th:first-child, .ci-table--tight td:first-child { width: 41%; }
.ci-table--tight th:nth-child(2), .ci-table--tight td:nth-child(2) { width: 15%; }
.ci-table--tight th:nth-child(3), .ci-table--tight td:nth-child(3) { width: 22%; }
.ci-table--tight th:nth-child(4), .ci-table--tight td:nth-child(4) { width: 22%; }
.ci-table--tight table { min-width: 0; table-layout: fixed; width: 100%; }
.ci-table--tight th:first-child, .ci-table--tight td:first-child { padding-left: 12px; }