/* Teach the Machine — lab-specific styles. Label colours come from the subject:
   mango gold for Ripe, leaf green for Not ripe. */
:root {
  --ripe: #F0A21B; --ripe-ink: #8A5600; --ripe-soft: #FFEFC9;
  --unripe: #2E9455; --unripe-ink: #1D6B3B; --unripe-soft: #DDF2E4;
}

/* map classes used by the shared feature map */
.lbl-ripe { fill: var(--ripe); }
.lbl-unripe { fill: var(--unripe); }
.reg-ripe { fill: var(--ripe-soft); }
.reg-unripe { fill: var(--unripe-soft); }
.lg.lbl-ripe { background: var(--ripe); }
.lg.lbl-unripe { background: var(--unripe); }
.lg.reg-ripe { background: var(--ripe-soft); }
.lg.reg-unripe { background: var(--unripe-soft); }
.probe-ripe .probe-dot { fill: var(--ripe); }
.probe-unripe .probe-dot { fill: var(--unripe); }

/* badges and tags */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge-ripe { background: var(--ripe-soft); color: var(--ripe-ink); }
.badge-unripe { background: var(--unripe-soft); color: var(--unripe-ink); }
.badge-pre { font-weight: 500; }
.tag { display: inline-flex; padding: .12rem .5rem; border-radius: 6px; font-size: .72rem; font-weight: 600; white-space: nowrap; letter-spacing: .01em; }
.tag-ratnagiri { background: #FFF4DE; color: #8A5600; }
.tag-varanasi { background: #E7F3E1; color: #2E6B1F; }

/* readouts */
.readout { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(3rem, 1fr) auto; align-items: center; gap: .55rem; font-size: .82rem; width: 100%; }
.ro-name { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-2); white-space: nowrap; }
.ro-name .ic { width: 1rem; height: 1rem; color: var(--ink-3); }
.ro-track { position: relative; height: .55rem; border-radius: 99px; background: var(--surface-2); }
.ro-colour .ro-track { background: linear-gradient(90deg, #3F8F2A, #8DB531 40%, #F2C12E 70%, #F28C1C); }
.ro-softness .ro-track { background: linear-gradient(90deg, #DCE3EF, #9C86E6); }
.ro-mark { position: absolute; top: 50%; width: .95rem; height: .95rem; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); transform: translate(-50%, -50%); }
.ro-val { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: right; }
.readout.is-machine { padding: .55rem .7rem; border-radius: var(--r-sm); background: var(--machine-soft); }
.readout.is-machine .ro-name { color: var(--machine); font-weight: 600; }
.ro-placeholder { display: flex; align-items: center; gap: .4rem; color: var(--ink-3); font-style: italic; min-height: 1.3rem; }

/* mango cards */
.mango-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: .75rem; }
.mango-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .9rem .8rem;
  border-radius: var(--r-md); background: var(--surface); border: 2px solid var(--line); text-align: center; min-width: 0; font: inherit; color: inherit;
}
button.mango-card { cursor: pointer; transition: border-color .15s, transform .1s, background-color .15s; }
button.mango-card:hover { border-color: var(--line-2); }
button.mango-card:active { transform: scale(.98); }
.mc-art { display: flex; justify-content: center; }
.mango-art { display: block; max-width: 100%; height: auto; }
.mc-meta { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; }
.mc-id { font-family: var(--f-mono); font-weight: 600; font-size: .8rem; color: var(--ink-2); }
.mc-readouts { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.mc-check { position: absolute; top: .5rem; right: .5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; background: var(--surface); }
.mc-check .ic { width: .95rem; height: .95rem; }
.mango-card.is-selected { border-color: var(--machine); background: var(--machine-soft); }
.mango-card.is-selected .mc-check { background: var(--machine); border-color: var(--machine); color: #fff; }
.mc-result { position: absolute; top: .45rem; right: .45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.mc-result .ic { width: .95rem; height: .95rem; }
.res-ok .mc-result { background: var(--good); }
.res-bad { border-color: #F2B6B1; background: #FFF7F6; }
.res-bad .mc-result { background: var(--bad); }
.mango-card.is-compact { padding: .6rem .5rem; gap: .35rem; }
.mc-said { font-size: .75rem; color: var(--ink-3); display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.mc-said .badge { font-size: .7rem; }
.obs-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.obs-card { gap: .65rem; }
.obs-card.is-pressed { border-color: #CFC4F6; }
.press-btn { align-self: stretch; }
.train-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.4rem), 1fr)); gap: .55rem; }
.result-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.6rem), 1fr)); gap: .55rem; }

/* pattern stage */
.rule-panel { gap: 1rem; }
.rule-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 500; }
.rule-val { font-family: var(--f-mono); font-weight: 600; font-size: 1.15rem; padding: .15rem .55rem; border-radius: 8px; background: var(--ink); color: #fff; min-width: 3.4rem; text-align: center; }
.rule-result { display: flex; flex-direction: column; gap: .5rem; }
.rule-score { font-size: 1.05rem; }
.rule-score strong { font-family: var(--f-display); font-size: 2rem; font-weight: 800; line-height: 1; margin-right: .2rem; }
.sdots { display: flex; gap: .3rem; flex-wrap: wrap; }
.sdot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--line); transition: background-color .2s; }
.sdot.is-ok { background: var(--good); }
.sdot.is-bad { background: var(--bad); }

/* train stage */
.split-train { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
@media (max-width: 920px) { .split-train { grid-template-columns: minmax(0, 1fr); } }
.machine-card { background: var(--ink); color: #E8EBF5; border-radius: var(--r-md); padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.machine-card .eyebrow { color: #9AA4C4; }
.machine-card .muted { color: #A9B2CF; }
.machine-head { display: flex; gap: .8rem; align-items: center; }
.machine-icon { width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center; background: var(--machine); color: #fff; flex: none; }
.machine-icon .ic { width: 1.6rem; height: 1.6rem; }
.machine-name { color: #fff; font-size: 1.6rem; font-weight: 800; }
.sensors { display: flex; flex-direction: column; gap: .5rem; }
.sensor { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.sensor > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sensor .small { color: #A9B2CF; }
.sensor > .ic { width: 1.4rem; height: 1.4rem; }
.sensor.is-on > .ic { color: #8FB3FF; }
.sensor.is-off { opacity: .6; }
.sensor-state { display: inline-flex; gap: .3rem; align-items: center; font-size: .74rem; font-family: var(--f-mono); padding: .15rem .5rem; border-radius: 99px; background: rgba(255, 255, 255, .1); white-space: nowrap; }
.sensor.is-on .sensor-state { background: #1F7A47; color: #fff; }
.train-count { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .92rem; }
.train-count strong { font-family: var(--f-display); font-size: 1.4rem; }
.train-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding-top: .4rem; }
.how-steps { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .45rem; }

/* predict stage */
.predict { display: flex; flex-direction: column; gap: 1.2rem; }
.predict-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.progress-dots { display: flex; gap: .35rem; flex-wrap: wrap; }
.pdot { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line-2); }
.pdot.is-current { border-color: var(--brand); background: var(--brand-soft); }
.pdot.is-ok { background: var(--good); border-color: var(--good); }
.pdot.is-bad { background: var(--bad); border-color: var(--bad); }
.scoreboard { display: flex; gap: .5rem; flex-wrap: wrap; }
.sb-item { display: flex; flex-direction: column; align-items: center; padding: .35rem .85rem; border-radius: 12px; background: var(--surface-2); min-width: 5.5rem; }
.sb-num { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sb-num.ok { color: var(--good); } .sb-num.bad { color: var(--bad); }
.sb-lbl { font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.predict-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.1rem; align-items: start; }
@media (max-width: 1240px) { .predict-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .predict-map { grid-column: 1 / -1; } }
@media (max-width: 760px) { .predict-grid { grid-template-columns: minmax(0, 1fr); } }
.specimen { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-radius: var(--r-md); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); min-width: 0; }
.spec-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.spec-art { display: flex; justify-content: center; padding: .25rem 0; }
.spec-art .mango-art { width: min(190px, 60vw); }
.spec-art.is-cut .mango-art { animation: rise .35s ease; }
.predict-steps { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.pstep { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); animation: rise .3s ease; }
.pstep.is-done { background: var(--surface-2); border-color: transparent; }
.pstep.is-active { border-color: var(--line-2); box-shadow: var(--shadow); }
.pstep-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.pstep-n { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--f-mono); font-size: .76rem; flex: none; }
.pstep-answer { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.big-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.choice-btn { min-height: 4rem; border-radius: var(--r-md); border: 2.5px solid transparent; font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.choice-btn:active { transform: translateY(3px); }
.choice-ripe { background: var(--ripe-soft); color: var(--ripe-ink); border-color: #F5CF83; box-shadow: 0 4px 0 #F5CF83; }
.choice-unripe { background: var(--unripe-soft); color: var(--unripe-ink); border-color: #A9DBBC; box-shadow: 0 4px 0 #A9DBBC; }
.choice-btn:active { box-shadow: none; }
.verdict-mark { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; padding: .15rem .55rem; border-radius: 99px; }
.verdict-mark.is-ok { background: var(--good-soft); color: var(--good); }
.verdict-mark.is-bad { background: var(--bad-soft); color: var(--bad); }
.thinking { display: flex; align-items: center; gap: .6rem; color: var(--machine); font-weight: 500; }
.scan { width: 3rem; height: .5rem; border-radius: 99px; background: linear-gradient(90deg, var(--machine-soft) 0%, var(--machine) 50%, var(--machine-soft) 100%); background-size: 200% 100%; animation: scan .8s linear infinite; }
@keyframes scan { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ff-row { display: flex; justify-content: flex-end; }

/* results stage */
.results-top { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 1.25rem; align-items: center; }
@media (max-width: 820px) { .results-top { grid-template-columns: minmax(0, 1fr); } }
.acc-card { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.2rem; border-radius: var(--r-md); background: var(--surface-2); }
.acc-big { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; line-height: 1.1; }
.formula { font-family: var(--f-mono); font-size: .9rem; color: var(--ink-2); margin-top: .2rem; }
.acc-inline { background: var(--surface); border: 1px solid var(--line); }
.confusion { width: 100%; border-collapse: separate; border-spacing: .35rem; min-width: 26rem; }
.confusion caption { text-align: left; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 0 .35rem .2rem; }
.confusion th { font-size: .8rem; font-weight: 600; color: var(--ink-2); text-align: left; padding: .3rem .45rem; }
.confusion td { border-radius: 12px; padding: .55rem .75rem; vertical-align: top; }
.cell-ok { background: var(--good-soft); }
.cell-bad { background: var(--bad-soft); }
.cnum { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cnote { display: block; font-size: .76rem; color: var(--ink-2); }

/* investigate stage */
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.pick-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem .4rem .45rem; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 500; font-size: .88rem; min-height: 2.5rem; }
.pick-chip.is-on { border-color: var(--brand); background: var(--brand-soft); }
.swatch { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2); }
.explain { display: flex; flex-direction: column; gap: .9rem; padding: 1rem; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; animation: rise .3s ease; }
.explain-head { display: flex; gap: .9rem; align-items: flex-start; }
.explain-subject { flex: none; background: var(--surface); border-radius: 14px; padding: .25rem; }
.explain-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 500; margin: .3rem 0; }
.neighbours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .5rem; }
.neighbour { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 12px; background: var(--surface); min-width: 0; }
.nb-rank { font-family: var(--f-mono); font-size: .74rem; font-weight: 600; color: var(--ink-3); }
.neighbour .mango-art { width: 48px; height: 48px; }
.nb-body { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
.nb-id { font-family: var(--f-mono); font-size: .76rem; font-weight: 600; }
.nb-dist { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.votes { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-weight: 500; }
.votes-lbl { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.vote { font-family: var(--f-mono); font-size: .82rem; padding: .15rem .5rem; border-radius: 8px; background: var(--surface); }

/* improve stage */
.split-improve { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); }
@media (max-width: 980px) { .split-improve { grid-template-columns: minmax(0, 1fr); } }
.improve-controls { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 4.6rem); }
@media (max-width: 980px) { .improve-controls { position: static; } }
.control-group { display: flex; flex-direction: column; gap: .5rem; }
.cg-title { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
.cg-title .q-tag { font-size: .62rem; }
.guess-row { display: flex; align-items: center; gap: .75rem; }
.guess-val { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; min-width: 3.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.improve-output { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.versions { display: flex; flex-direction: column; gap: .45rem; }
.version { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(4rem, 8rem) auto; align-items: center; gap: .3rem .75rem; padding: .6rem .8rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; }
.version.is-on { border-color: var(--machine); background: var(--machine-soft); }
.version-name { font-weight: 600; white-space: nowrap; }
.version-desc { font-size: .8rem; color: var(--ink-3); min-width: 0; }
.version-bar { height: .6rem; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.version-bar i { display: block; height: 100%; border-radius: 99px; background: var(--machine); transition: width .6s ease; }
.version-bar i.is-good { background: var(--good); }
.version-bar i.is-mid { background: #E0A400; }
.version-bar i.is-low { background: var(--bad); }
.version-val { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.8rem; text-align: right; }
@media (max-width: 560px) {
  .version { grid-template-columns: minmax(0, 1fr) auto; }
  .version-desc { grid-column: 1 / -1; grid-row: 2; }
  .version-bar { grid-column: 1 / -1; grid-row: 3; }
}