/* Simply MBBS — v9. The app layer.

   This is the version where the site stops being a site. Two things change
   visually because of that and everything else follows from them:

   The countdown is the loudest thing on the page and is allowed to be. It is
   the first thing seen every morning and it reframes every number under it —
   nine hundred cards means one thing at four hundred days and something else
   at forty.

   Everything else gets quieter to pay for it. The duty card, the marks rail
   and the cockpit panels all sit on the same 18px radius, the same hairline,
   the same shadow, so the page reads as one surface rather than a stack of
   widgets from different versions. That cohesion is what makes a home-screen
   app feel like an app; the alternative is a website in a costume.

   Safe-area insets are handled properly because on an iPhone in standalone
   there is no browser chrome to hide behind — get it wrong and the tab bar
   sits under the home indicator. */

/* ---------- countdown ---------- */

.smcc-cd {
  display: flex; align-items: center; gap: clamp(16px, 4vw, 34px);
  background: var(--smcc-strong); color: #fff;
  border-radius: 20px; padding: clamp(20px, 4vw, 34px) clamp(20px, 4vw, 38px);
  margin: 0 0 14px; position: relative; overflow: hidden;
}
/* One quiet diagonal so the block is not a flat slab. Nothing more. */
.smcc-cd::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 55%, rgba(124,107,240,.30) 100%);
  pointer-events: none;
}
.smcc-cd__main { display: flex; align-items: baseline; gap: 8px; }
.smcc-cd__n {
  font-family: var(--smcc-display);
  font-size: clamp(60px, 17vw, 116px);
  font-weight: 700; line-height: .82; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.smcc-cd__u { font-family: var(--smcc-mono); font-size: 15px; opacity: .7; }
.smcc-cd__side { position: relative; z-index: 1; }
.smcc-cd__k {
  font-family: var(--smcc-mono); font-size: 11px; letter-spacing: .18em;
  margin: 0 0 4px; opacity: .62;
}
.smcc-cd__d { font-family: var(--smcc-display); font-size: clamp(15px, 2.4vw, 19px); margin: 0; font-weight: 600; }
.smcc-cd__w { font-family: var(--smcc-mono); font-size: 12px; opacity: .6; margin: 4px 0 0; }

/* ---------- today's duty ---------- */

.smcc-du__in {
  background: var(--smcc-card); border: 1px solid var(--smcc-line);
  border-radius: 18px; padding: clamp(18px, 3vw, 26px); box-shadow: var(--smcc-shadow);
}
.smcc-du__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.smcc-du__eyebrow {
  font-family: var(--smcc-mono); font-size: 11px; letter-spacing: .13em;
  color: var(--smcc-muted); margin: 0 0 4px;
}
.smcc-du__title { font-family: var(--smcc-display); font-size: clamp(21px, 3.4vw, 27px); margin: 0; line-height: 1.15; }
.smcc-du__change {
  font: inherit; font-size: 13px; cursor: pointer; flex: 0 0 auto;
  background: var(--smcc-chipbg); color: var(--smcc-chiptx);
  border: 0; border-radius: 999px; padding: 7px 15px;
}
.smcc-du__note { font-size: 14px; color: var(--smcc-muted); line-height: 1.55; margin: 8px 0 0; max-width: 66ch; }
.smcc-du__fine { font-size: 13px; color: var(--smcc-muted); margin: 8px 0 0; }

.smcc-du__pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 0; }
.smcc-du__opt {
  font: inherit; cursor: pointer; text-align: left; display: grid; gap: 2px;
  background: var(--smcc-wash); border: 1.5px solid transparent;
  border-radius: 12px; padding: 12px 14px; color: inherit;
}
.smcc-du__opt:hover { border-color: var(--smcc-violet); }
.smcc-du__opt.is-on { background: var(--smcc-chipbg); border-color: var(--smcc-deep); }
.smcc-du__optT { font-weight: 600; font-size: 14px; }
.smcc-du__optM { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); }

.smcc-du__now { border-radius: 14px; padding: 16px 18px; margin: 16px 0 0; border-left: 3px solid var(--smcc-muted); background: var(--smcc-wash); }
.smcc-du__now--deep { border-left-color: var(--smcc-deep); }
.smcc-du__now--cards { border-left-color: var(--smcc-clinical); }
.smcc-du__now--audio { border-left-color: var(--smcc-violet); }
.smcc-du__now--off { border-left-color: var(--smcc-line); }
.smcc-du__nowK { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .14em; color: var(--smcc-muted); margin: 0 0 3px; }
.smcc-du__nowT { font-family: var(--smcc-display); font-size: 19px; margin: 0 0 5px; }
.smcc-du__nowA { font-size: 14px; line-height: 1.55; margin: 0; color: var(--smcc-text); }
.smcc-du__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.smcc-du__strip { display: grid; gap: 1px; background: var(--smcc-line); border: 1px solid var(--smcc-line); border-radius: 12px; overflow: hidden; margin: 16px 0 0; }
.smcc-du__block { background: var(--smcc-card); padding: 11px 14px; display: flex; gap: 14px; align-items: baseline; }
.smcc-du__block.is-live { background: var(--smcc-chipbg); }
.smcc-du__block.is-off { opacity: .6; }
.smcc-du__when { flex: 0 0 66px; display: grid; }
.smcc-du__from { font-family: var(--smcc-mono); font-size: 13px; font-weight: 600; }
.smcc-du__len { font-family: var(--smcc-mono); font-size: 10px; color: var(--smcc-muted); }
.smcc-du__bBody { display: grid; gap: 1px; min-width: 0; }
.smcc-du__bT { font-weight: 600; font-size: 14px; }
.smcc-du__bA { font-size: 12.5px; color: var(--smcc-muted); line-height: 1.45; }

.smcc-du__weekK { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .14em; color: var(--smcc-muted); margin: 18px 0 6px; }
.smcc-du__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.smcc-du__day { background: var(--smcc-wash); border-radius: 10px; padding: 9px 4px; text-align: center; display: grid; gap: 1px; }
.smcc-du__day.is-today { background: var(--smcc-chipbg); box-shadow: inset 0 0 0 1.5px var(--smcc-deep); }
.smcc-du__dayN { font-family: var(--smcc-mono); font-size: 10px; color: var(--smcc-muted); }
.smcc-du__dayL { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smcc-du__dayH { font-family: var(--smcc-mono); font-size: 10px; color: var(--smcc-clinical); }

/* ---------- the ladder ---------- */

.smcc-tg__eyebrow { font-family: var(--smcc-mono); font-size: 11px; letter-spacing: .14em; color: var(--smcc-muted); margin: 0 0 6px; }
.smcc-tg__h2 { font-family: var(--smcc-display); font-size: clamp(20px, 3vw, 26px); margin: 0 0 4px; }
.smcc-tg__lede { font-size: 14px; color: var(--smcc-muted); line-height: 1.6; max-width: 68ch; margin: 0 0 16px; }
.smcc-tg__ranks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.smcc-tg__rank {
  font: inherit; font-family: var(--smcc-mono); font-size: 13px; cursor: pointer;
  background: var(--smcc-wash); border: 1px solid var(--smcc-line);
  border-radius: 999px; padding: 7px 14px; color: var(--smcc-muted);
}
.smcc-tg__rank.is-on { background: var(--smcc-deep); border-color: var(--smcc-deep); color: #fff; }

.smcc-tg__chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
  background: var(--smcc-line); border: 1px solid var(--smcc-line); border-radius: 14px; overflow: hidden; }
.smcc-tg__step { background: var(--smcc-card); padding: 14px; display: grid; gap: 3px; }
.smcc-tg__stepN { font-family: var(--smcc-display); font-size: 22px; font-weight: 700; line-height: 1.05; }
.smcc-tg__stepL { font-size: 11.5px; color: var(--smcc-muted); line-height: 1.35; }

.smcc-tg__verdict { border-radius: 14px; padding: 18px 20px; margin: 14px 0; border-left: 3px solid; }
.smcc-tg__verdict.is-ok { border-left-color: var(--smcc-clinical); background: color-mix(in srgb, var(--smcc-clinical) 7%, transparent); }
.smcc-tg__verdict.is-bad { border-left-color: var(--smcc-alert); background: color-mix(in srgb, var(--smcc-alert) 7%, transparent); }
.smcc-tg__vT { font-family: var(--smcc-display); font-size: 18px; margin: 0 0 6px; }
.smcc-tg__vB { font-size: 15px; line-height: 1.6; margin: 0; }
.smcc-tg__hint, .smcc-tg__now { font-size: 14px; color: var(--smcc-muted); line-height: 1.6; max-width: 70ch; }
.smcc-tg__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- install card ---------- */

.smcc-inst__card {
  position: relative; border: 1.5px dashed var(--smcc-violet);
  border-radius: 16px; padding: 18px 20px; margin: 14px 0;
  background: color-mix(in srgb, var(--smcc-violet) 5%, var(--smcc-card));
}
.smcc-inst__eyebrow { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .16em; color: var(--smcc-deep); margin: 0 0 4px; }
.smcc-inst__h { font-family: var(--smcc-display); font-size: 18px; margin: 0 0 6px; }
.smcc-inst__b { font-size: 14px; line-height: 1.55; color: var(--smcc-muted); margin: 0 0 10px; max-width: 60ch; }
.smcc-inst__steps { margin: 0 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.smcc-inst__fine { font-size: 12.5px; color: var(--smcc-muted); margin: 6px 0 0; }
.smcc-inst__x {
  position: absolute; top: 10px; right: 12px; font: inherit; font-size: 22px; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--smcc-muted); padding: 2px 6px;
}

/* ---------- the flashcard page action bar ---------- */

.smcc-cardbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* ---------- standalone: tab bar + safe areas ---------- */

.smcc-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--smcc-paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--smcc-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.smcc-tabs__i {
  display: grid; justify-items: center; gap: 3px;
  padding: 9px 4px 7px; text-decoration: none;
  color: var(--smcc-muted); font-size: 10px; font-family: var(--smcc-mono);
  letter-spacing: .04em;
}
.smcc-tabs__i svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.smcc-tabs__i.is-on { color: var(--smcc-deep); }
.smcc-tabs__i.is-on svg { stroke-width: 2.1; }

html.smcc-has-tabs body { padding-bottom: 66px; }
html.smcc-standalone .smcc-header { padding-top: env(safe-area-inset-top); }

/* Hide the site chrome that only makes sense in a browser once installed. */
html.smcc-standalone .smcc-footer__legal,
html.smcc-standalone .smcc-inst { display: none; }

/* ---------- offline banner ---------- */

.smcc-off {
  position: fixed; left: 12px; right: 12px; z-index: 70;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  background: var(--smcc-strong); color: #fff;
  font-size: 13px; line-height: 1.45; text-align: center;
  padding: 10px 14px; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
html.smcc-has-tabs .smcc-off { bottom: calc(env(safe-area-inset-bottom) + 74px); }

/* ---------- cohesion pass ----------
   Everything that is a panel gets the same radius, hairline and shadow, so
   four versions of accreted UI read as one surface. */

.smcc-cp__hero, .smcc-cp__now, .smcc-du__in, .smcc-fx__box,
.smcc-nb__item, .smcc-cf__pair, .smcc-td__row, .smcc-lk__row {
  border-radius: 18px;
}
.smcc-cp__pace, .smcc-cp__stakeList, .smcc-pl__weeks, .smcc-tg__chain, .smcc-du__strip {
  border-radius: 16px;
}

@media (max-width: 560px) {
  .smcc-cd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .smcc-cd__n { font-size: 21vw; }
  .smcc-du__week { grid-template-columns: repeat(4, 1fr); }
}

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