/* Simply MBBS — v8 surfaces.

   Loads after v7.css and reuses its tokens and its component classes where
   the shape is the same (tables, count strips, buttons). Nothing here adds a
   colour: teal still means secured, burnt red still means loss, violet is
   still structure. The forecast leans on that hard — the whole page is one
   comparison between a teal number and a red one, and it only reads at a
   glance because those two colours already mean what they mean everywhere
   else in the site. */

/* ---------- exam-day forecast ---------- */

.smcc-fx__two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin: 20px 0 14px;
}
.smcc-fx__box {
  border-radius: 16px; padding: 20px 22px; display: grid; gap: 4px;
  border: 1px solid var(--smcc-line); background: var(--smcc-card);
}
.smcc-fx__box.is-now { border-color: var(--smcc-clinical); }
.smcc-fx__box.is-then { border-color: var(--smcc-alert); background: color-mix(in srgb, var(--smcc-alert) 6%, var(--smcc-card)); }
.smcc-fx__boxL { font-family: var(--smcc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--smcc-muted); }
.smcc-fx__boxN { font-family: var(--smcc-display); font-size: clamp(38px, 8vw, 58px); font-weight: 700; line-height: 1; }
.smcc-fx__box.is-now .smcc-fx__boxN { color: var(--smcc-clinical); }
.smcc-fx__box.is-then .smcc-fx__boxN { color: var(--smcc-alert); }
.smcc-fx__boxS { font-size: 13px; color: var(--smcc-muted); }

.smcc-fx__verdict {
  margin: 0 0 8px; padding: 14px 16px; border-radius: 12px;
  background: var(--smcc-wash); border-left: 3px solid var(--smcc-alert);
  font-size: 15px; line-height: 1.55;
}
.smcc-fx__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.smcc-fx__chip {
  font-size: 12px; font-family: var(--smcc-mono);
  background: var(--smcc-chipbg); color: var(--smcc-chiptx);
  padding: 5px 11px; border-radius: 999px;
}
.smcc-fx__h3 { font-family: var(--smcc-display); font-size: 17px; margin: 26px 0 6px; }

/* ---------- trend ---------- */

.smcc-tr__svg { width: 100%; height: auto; display: block; margin: 14px 0 8px; }
.smcc-tr__grid { stroke: var(--smcc-line); stroke-width: 1; }
.smcc-tr__axis { fill: var(--smcc-muted); font-family: var(--smcc-mono); font-size: 10px; }
.smcc-tr__line { fill: none; stroke: var(--smcc-violet); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.smcc-tr__dot { fill: var(--smcc-deep); }
.smcc-tr__mock { fill: var(--smcc-alert); }

/* ---------- consistency grid ---------- */

.smcc-cg__grid {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr);
  gap: 3px; overflow-x: auto; padding: 14px 0 8px;
}
.smcc-cg__cell {
  width: 11px; height: 11px; border-radius: 2px;
  background: var(--smcc-chipbg); display: block;
}
.smcc-cg__cell.lvl-0 { background: var(--smcc-wash); box-shadow: inset 0 0 0 1px var(--smcc-line); }
.smcc-cg__cell.lvl-1 { background: color-mix(in srgb, var(--smcc-clinical) 28%, transparent); }
.smcc-cg__cell.lvl-2 { background: color-mix(in srgb, var(--smcc-clinical) 52%, transparent); }
.smcc-cg__cell.lvl-3 { background: color-mix(in srgb, var(--smcc-clinical) 76%, transparent); }
.smcc-cg__cell.lvl-4 { background: var(--smcc-clinical); }
.smcc-cg__sum { font-family: var(--smcc-mono); font-size: 12px; color: var(--smcc-muted); margin: 4px 0 0; }

/* ---------- leech clinic ---------- */

.smcc-lk__row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--smcc-card); border: 1px solid var(--smcc-line);
  border-left: 3px solid var(--smcc-alert);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
}
.smcc-lk__main { flex: 1 1 240px; min-width: 0; }
.smcc-lk__q { font-weight: 600; font-size: 15px; margin: 0 0 3px; line-height: 1.4; }
.smcc-lk__a { font-size: 14px; color: var(--smcc-clinical); margin: 0 0 4px; }
.smcc-lk__m { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); margin: 0; }
.smcc-lk__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- the plan ---------- */

.smcc-pl__over {
  background: color-mix(in srgb, var(--smcc-alert) 9%, transparent);
  border-left: 3px solid var(--smcc-alert);
  padding: 14px 16px; border-radius: 10px; font-size: 15px; line-height: 1.55; margin: 14px 0;
}
.smcc-pl__weeks {
  display: grid; gap: 1px; background: var(--smcc-line);
  border: 1px solid var(--smcc-line); border-radius: 14px; overflow: hidden; margin-top: 16px;
}
.smcc-pl__week {
  background: var(--smcc-card); padding: 12px 16px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.smcc-pl__week.is-close { background: var(--smcc-wash); }
.smcc-pl__when { flex: 0 0 68px; display: grid; gap: 1px; }
.smcc-pl__wn { font-family: var(--smcc-display); font-weight: 700; font-size: 16px; }
.smcc-pl__wd { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); }
.smcc-pl__body { flex: 1 1 220px; min-width: 0; }
.smcc-pl__post {
  font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--smcc-chipbg); color: var(--smcc-chiptx);
  padding: 3px 8px; border-radius: 999px; display: inline-block; margin-bottom: 5px;
}
.smcc-pl__what { font-size: 14px; line-height: 1.5; margin: 0; }
.smcc-pl__tag {
  display: inline-block; margin-top: 5px;
  font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--smcc-clinical);
}
.smcc-pl__side { margin-left: auto; }

/* ---------- today ---------- */

.smcc-td__list { display: grid; gap: 8px; margin: 16px 0; }
.smcc-td__row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--smcc-card); border: 1px solid var(--smcc-line);
  border-radius: 12px; padding: 14px 16px;
}
.smcc-td__n {
  font-family: var(--smcc-display); font-size: 26px; font-weight: 700;
  line-height: 1; color: var(--smcc-deep); flex: 0 0 auto; min-width: 44px;
}
.smcc-td__w { flex: 1 1 160px; font-size: 15px; }

/* ---------- backup ---------- */

.smcc-sync__acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; align-items: center; }
.smcc-sync__file { display: none; }
.smcc-sync__msg { font-family: var(--smcc-mono); font-size: 13px; min-height: 1.2em; margin: 4px 0 18px; color: var(--smcc-muted); }
.smcc-sync__msg.is-ok { color: var(--smcc-clinical); }
.smcc-sync__msg.is-bad { color: var(--smcc-alert); }

/* ---------- spotters + flagging ---------- */

.smcc-ex__fig {
  margin: 0 0 16px; border-radius: 12px; overflow: hidden;
  background: var(--smcc-wash); border: 1px solid var(--smcc-line);
  display: flex; justify-content: center;
}
.smcc-ex__img { max-height: 46vh; width: auto; max-width: 100%; object-fit: contain; display: block; }

.smcc-ex__ansFoot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.smcc-ex__flag {
  font: inherit; font-size: 12px; cursor: pointer;
  background: none; border: 1px solid var(--smcc-line); border-radius: 999px;
  padding: 4px 12px; color: var(--smcc-muted);
}
.smcc-ex__flag:hover { border-color: var(--smcc-alert); color: var(--smcc-alert); }
.smcc-ex__flagged { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-alert); }

/* ---------- weightage editor (admin) ---------- */

.smcc-wt table { border-collapse: collapse; }
.smcc-wt td { padding: 4px 10px 4px 0; }
.smcc-wt input[type="number"] { width: 70px; }

@media (prefers-reduced-motion: reduce) {
  .smcc-tr__line, .smcc-cg__cell { transition: none; }
}