/* Simply MBBS — v10. The home screen, rebuilt.

   DESIGN NOTE, because it explains every choice below.

   Versions 5 to 9 each bolted a panel onto the front page and it read like a
   changelog: four headings, four cards, four things claiming to be first.
   This version spends all of its boldness in ONE place — a dark card that
   owns the whole first screen — and makes everything else quiet enough to
   pay for it. That is the entire brief.

   The card is dark because of when it gets opened: half six in the morning
   and between patients on a ward. A bright slab is wrong at both.

   The runway rail is the signature. One hairline object, segmented by the
   thirteen rotation blocks, filled to where today sits. It answers "how long
   have I got", "where am I posted" and "what is coming" in a strip four
   pixels tall. No new colour was introduced to draw it — teal for done,
   violet for now, and the same hairline as everything else. */

/* ================= the day card ================= */

.smcc-hm__in { display: grid; gap: 16px; }

.smcc-hm__card {
  position: relative;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(124,107,240,.34) 0%, transparent 62%),
    var(--smcc-strong);
  color: #fff;
  border-radius: 24px;
  padding: 0 clamp(20px, 4.5vw, 38px) clamp(20px, 4vw, 30px);
  overflow: hidden;
  isolation: isolate;
}
.smcc-hm__card--boot { padding-top: 28px; }

/* ---- runway rail ---- */

.smcc-hm__rail {
  position: relative;
  display: flex; gap: 2px; height: 5px;
  margin: 0 clamp(-20px, -4.5vw, -38px) 20px;
  padding: 0 clamp(20px, 4.5vw, 38px);
  padding-top: 22px;
}
.smcc-hm__seg {
  flex: 1 1 auto; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.13);
}
.smcc-hm__seg.is-past { background: rgba(14,155,132,.75); }
.smcc-hm__seg.is-live { background: var(--smcc-violet); box-shadow: 0 0 14px rgba(124,107,240,.85); }
.smcc-hm__marker {
  position: absolute; top: 16px; width: 2px; height: 17px;
  background: #fff; border-radius: 2px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(25,22,52,.55);
}

.smcc-hm__rail.is-small { padding: 0; margin: 14px 0 20px; height: 6px; }
.smcc-hm__rail.is-small .smcc-hm__seg { height: 6px; background: var(--smcc-chipbg); }
.smcc-hm__rail.is-small .smcc-hm__seg.is-past { background: var(--smcc-clinical); }
.smcc-hm__rail.is-small .smcc-hm__marker { top: -5px; background: var(--smcc-strong); box-shadow: none; }

/* ---- the number ---- */

.smcc-hm__top {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--smcc-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.52);
}
.smcc-hm__days { display: flex; align-items: baseline; gap: clamp(12px, 3vw, 22px); margin: 6px 0 0; }
.smcc-hm__n {
  font-family: var(--smcc-display);
  font-size: clamp(66px, 20vw, 128px);
  font-weight: 700; line-height: .8; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.smcc-hm__dside { display: grid; gap: 1px; padding-bottom: 4px; }
.smcc-hm__u { font-size: 14px; font-weight: 600; }
.smcc-hm__date { font-family: var(--smcc-mono); font-size: 12px; color: rgba(255,255,255,.6); }
.smcc-hm__clock { font-family: var(--smcc-mono); font-size: 11px; color: rgba(255,255,255,.38); }

/* ---- duty ---- */

.smcc-hm__duty {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.smcc-hm__dutyT { font-size: 14px; font-weight: 600; }
.smcc-hm__swap {
  font: inherit; font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; margin-left: auto;
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: 999px; padding: 5px 12px;
}
.smcc-hm__pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.smcc-hm__pickI {
  font: inherit; font-size: 12.5px; cursor: pointer;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.86);
  border: 1px solid transparent; border-radius: 999px; padding: 7px 13px;
}
.smcc-hm__pickI.is-on { background: #fff; color: var(--smcc-strong); font-weight: 600; }

/* ---- THE action. Deliberately the biggest tap target on the page. ---- */

.smcc-hm__cta {
  display: grid; gap: 3px; margin: 16px 0 0;
  background: #fff; color: var(--smcc-strong);
  border-radius: 16px; padding: 16px 18px;
  text-decoration: none; position: relative;
  transition: transform .15s ease;
}
.smcc-hm__cta:not(.is-off)::after {
  content: "→"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); font-size: 22px; color: var(--smcc-deep);
}
.smcc-hm__cta:active { transform: scale(.985); }
.smcc-hm__cta.is-off { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.smcc-hm__ctaK { font-family: var(--smcc-mono); font-size: 9.5px; letter-spacing: .18em; color: var(--smcc-violet); }
.smcc-hm__cta.is-off .smcc-hm__ctaK { color: rgba(255,255,255,.45); }
.smcc-hm__ctaT { font-family: var(--smcc-display); font-size: clamp(18px, 3.4vw, 22px); font-weight: 700; padding-right: 28px; line-height: 1.2; }
.smcc-hm__ctaS { font-size: 13px; color: var(--smcc-muted); line-height: 1.45; padding-right: 28px; }
.smcc-hm__cta.is-off .smcc-hm__ctaS { color: rgba(255,255,255,.55); }

/* ================= vitals ================= */

.smcc-hm__vitals {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--smcc-line); border: 1px solid var(--smcc-line);
  border-radius: 16px; overflow: hidden;
}
.smcc-hm__vital {
  background: var(--smcc-card); padding: 14px 10px; text-align: center;
  display: grid; gap: 2px; text-decoration: none; color: inherit;
}
.smcc-hm__vital:hover { background: var(--smcc-wash); }
.smcc-hm__vN { font-family: var(--smcc-display); font-size: clamp(19px, 4.4vw, 26px); font-weight: 700; line-height: 1; }
.smcc-hm__vL { font-family: var(--smcc-mono); font-size: 10px; color: var(--smcc-muted); letter-spacing: .04em; }

/* ================= marks ================= */

.smcc-hm__k { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .16em; color: var(--smcc-muted); margin: 0 0 10px; }
.smcc-hm__stake {
  background: var(--smcc-card); border: 1px solid var(--smcc-line);
  border-radius: 18px; padding: 18px;
}
.smcc-hm__marks { display: flex; gap: 2px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--smcc-wash); }
.smcc-hm__mseg { position: relative; min-width: 3px; background: var(--smcc-chipbg); display: flex; align-items: flex-end; }
.smcc-hm__mfill { width: 100%; background: var(--smcc-clinical); transition: height .5s ease; }
.smcc-hm__mseg.is-dead { background: repeating-linear-gradient(45deg, var(--smcc-chipbg), var(--smcc-chipbg) 4px, transparent 4px, transparent 8px); }

.smcc-hm__top3 { display: grid; gap: 1px; margin-top: 14px; background: var(--smcc-line); border-radius: 12px; overflow: hidden; }
.smcc-hm__t3 {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  background: var(--smcc-card); padding: 11px 14px;
}
.smcc-hm__t3:hover { background: var(--smcc-wash); }
.smcc-hm__t3n { font-weight: 600; font-size: 14px; flex: 1 1 auto; }
.smcc-hm__t3s { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); }
.smcc-hm__t3m { font-family: var(--smcc-display); font-weight: 700; font-size: 16px; color: var(--smcc-alert); min-width: 44px; text-align: right; }

/* ================= tile grid ================= */

.smcc-hm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.smcc-hm__tile {
  display: grid; justify-items: center; gap: 7px; text-decoration: none;
  background: var(--smcc-card); border: 1px solid var(--smcc-line);
  border-radius: 14px; padding: 15px 8px;
  color: var(--smcc-text); font-size: 11.5px; text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.smcc-hm__tile:hover { border-color: var(--smcc-violet); transform: translateY(-2px); }
.smcc-hm__tile svg { width: 22px; height: 22px; fill: none; stroke: var(--smcc-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ================= oracle ================= */

.smcc-oq__skel { font-family: var(--smcc-mono); font-size: 12px; color: var(--smcc-muted); padding: 18px; }
.smcc-oq__card {
  display: grid; gap: 4px; text-decoration: none; color: inherit;
  background: var(--smcc-card); border: 1px solid var(--smcc-line);
  border-left: 3px solid var(--smcc-violet);
  border-radius: 18px; padding: 18px 20px;
}
.smcc-oq__card:hover { border-color: var(--smcc-violet); }
.smcc-oq__k { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .15em; color: var(--smcc-muted); margin: 0; }
.smcc-oq__line { display: flex; align-items: baseline; gap: 7px; }
.smcc-oq__n { font-family: var(--smcc-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--smcc-deep); }
.smcc-oq__d { font-family: var(--smcc-mono); font-size: 13px; color: var(--smcc-muted); }
.smcc-oq__b { font-size: 14px; line-height: 1.5; margin: 0; }
.smcc-oq__t { font-size: 12.5px; color: var(--smcc-muted); margin: 4px 0 0; }

.smcc-or__loading { font-family: var(--smcc-mono); color: var(--smcc-muted); padding: 50px 0; text-align: center; }
.smcc-or__eyebrow { font-family: var(--smcc-mono); font-size: 11px; letter-spacing: .14em; color: var(--smcc-muted); margin: 0 0 6px; }
.smcc-or__h2 { font-family: var(--smcc-display); font-size: clamp(21px, 3.2vw, 28px); margin: 0 0 6px; line-height: 1.2; }
.smcc-or__h3 { font-family: var(--smcc-display); font-size: 18px; margin: 30px 0 6px; }
.smcc-or__lede { font-size: 14.5px; line-height: 1.62; color: var(--smcc-muted); max-width: 70ch; margin: 0 0 14px; }

.smcc-or__chart { margin: 20px 0 10px; }
.smcc-or__bar { position: relative; height: 46px; background: var(--smcc-wash); border-radius: 10px; overflow: visible; }
.smcc-or__fill {
  position: absolute; top: 0; bottom: 0; border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--smcc-violet) 55%, transparent), var(--smcc-violet));
}
.smcc-or__mid { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--smcc-strong); border-radius: 3px; }
.smcc-or__goal { position: absolute; top: -10px; bottom: -10px; width: 2px; background: var(--smcc-alert); }
.smcc-or__goal::after {
  content: "target"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-family: var(--smcc-mono); font-size: 9px; color: var(--smcc-alert); white-space: nowrap;
}
.smcc-or__ticks { display: flex; justify-content: space-between; font-family: var(--smcc-mono); font-size: 10px; color: var(--smcc-muted); margin-top: 6px; }

.smcc-or__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin: 18px 0; }
.smcc-or__num { display: grid; gap: 2px; }
.smcc-or__numN { font-family: var(--smcc-display); font-size: 28px; font-weight: 700; line-height: 1; }
.smcc-or__numL { font-size: 12px; color: var(--smcc-muted); }
.smcc-or__rank { font-size: 15px; line-height: 1.6; max-width: 70ch; }
.smcc-or__odds { font-size: 15px; line-height: 1.6; padding: 14px 16px; border-radius: 12px; border-left: 3px solid; max-width: 74ch; }
.smcc-or__odds.is-ok { border-left-color: var(--smcc-clinical); background: color-mix(in srgb, var(--smcc-clinical) 7%, transparent); }
.smcc-or__odds.is-warn { border-left-color: var(--smcc-violet); background: var(--smcc-wash); }
.smcc-or__odds.is-bad { border-left-color: var(--smcc-alert); background: color-mix(in srgb, var(--smcc-alert) 7%, transparent); }

.smcc-or__working { font-family: var(--smcc-mono); font-size: 12px; color: var(--smcc-muted); }
.smcc-or__sensRows { display: grid; gap: 8px; margin: 10px 0 14px; }
.smcc-or__sensRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.smcc-or__sensM { font-family: var(--smcc-mono); font-size: 12px; min-width: 92px; }
.smcc-or__sensBar { flex: 1 1 120px; height: 10px; background: var(--smcc-wash); border-radius: 999px; overflow: hidden; }
.smcc-or__sensFill { height: 100%; background: var(--smcc-clinical); border-radius: 999px; }
.smcc-or__sensG { font-family: var(--smcc-display); font-weight: 700; font-size: 15px; color: var(--smcc-clinical); min-width: 78px; }
.smcc-or__sensR { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); }

.smcc-or__queue { display: grid; gap: 1px; background: var(--smcc-line); border: 1px solid var(--smcc-line); border-radius: 14px; overflow: hidden; margin-top: 12px; }
.smcc-or__qRow { background: var(--smcc-card); padding: 11px 14px; display: flex; gap: 12px; align-items: center; }
.smcc-or__qN { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); min-width: 20px; }
.smcc-or__qMain { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.smcc-or__qQ { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.smcc-or__qM { font-family: var(--smcc-mono); font-size: 10.5px; color: var(--smcc-muted); }
.smcc-or__qV { font-family: var(--smcc-display); font-weight: 700; font-size: 14px; color: var(--smcc-clinical); }
.smcc-or__acts { grid-column: 1 / -1; background: var(--smcc-card); padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ================= posting calendar ================= */

.smcc-cal__h2 { font-family: var(--smcc-display); font-size: clamp(21px, 3.2vw, 28px); margin: 0 0 6px; }
.smcc-cal__lede { font-size: 14.5px; line-height: 1.62; color: var(--smcc-muted); max-width: 72ch; margin: 0 0 12px; }
.smcc-cal__list { display: grid; gap: 1px; background: var(--smcc-line); border: 1px solid var(--smcc-line); border-radius: 16px; overflow: hidden; }
.smcc-cal__row { background: var(--smcc-card); padding: 14px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.smcc-cal__row.is-past { opacity: .5; }
.smcc-cal__row.is-live { background: var(--smcc-chipbg); }
.smcc-cal__when { flex: 0 0 96px; display: grid; gap: 1px; }
.smcc-cal__num { font-family: var(--smcc-display); font-size: 18px; font-weight: 700; }
.smcc-cal__dates { font-family: var(--smcc-mono); font-size: 10.5px; color: var(--smcc-muted); }
.smcc-cal__body { flex: 1 1 220px; display: grid; gap: 3px; min-width: 0; }
.smcc-cal__label { font-weight: 600; font-size: 15px; }
.smcc-cal__subs { font-size: 13px; color: var(--smcc-deep); }
.smcc-cal__meta { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); }
.smcc-cal__side { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.smcc-cal__now { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .12em; background: var(--smcc-deep); color: #fff; padding: 4px 9px; border-radius: 999px; }

/* ================= responsive ================= */

@media (max-width: 520px) {
  .smcc-hm__days { flex-direction: column; align-items: flex-start; gap: 2px; }
  .smcc-hm__n { font-size: 25vw; }
  .smcc-hm__vitals { grid-template-columns: repeat(2, 1fr); }
  .smcc-hm__grid { grid-template-columns: repeat(3, 1fr); }
  .smcc-cal__when { flex: 0 0 100%; display: flex; gap: 10px; align-items: baseline; }
}

@media (prefers-reduced-motion: reduce) {
  .smcc-hm__cta, .smcc-hm__tile, .smcc-hm__mfill { transition: none; }
}