/* Simply MBBS — v15. The visual pass.

   Three faults he reported, all real, all mine.

   1. NO SIDE SPACING. .smcc-page--full carries `padding: 0`. It was written
      when the home page was full-bleed hero sections that each had their own
      internal gutter. Since v12 the home page is one shortcode with no hero
      wrapper, so every panel sat hard against both edges of the phone.

   2. THE HEADER STUCK, WITH A GAP ABOVE IT. Both handled in v13.css.

   3. THE COUNTDOWN WAS DARK IN LIGHT MODE. It was a deliberate slab of navy,
      and on a white page it read as a foreign object rather than the top of
      the page. It now follows the theme: a light violet-tinted card in day
      mode, the dark one at night, where it belongs. */

/* ---------- 1. gutters ---------- */

.smcc-page--full {
  padding: clamp(14px, 3.5vw, 26px) calc( var(--smcc-gut) + var(--smcc-safe-l) )
           clamp(28px, 5vw, 48px) calc( var(--smcc-gut) + var(--smcc-safe-r) );
  max-width: var(--smcc-page);
  margin-inline: auto;
}

/* The gutter itself was tuned for prose at desktop width. On a phone
   clamp(16px, 3.4vw, 44px) bottoms out at 16px, which is tight against a
   curved edge — the panel corners end up touching the bezel. */
@media (max-width: 640px) {
  :root { --smcc-gut: 15px; }
  .smcc-page--full { padding-top: 12px; }
}

/* ---------- 2. the countdown follows the theme ---------- */

.smcc-dh__clock {
  background:
    radial-gradient(130% 130% at 88% 0%, color-mix(in srgb, var(--smcc-violet) 22%, transparent) 0%, transparent 62%),
    var(--smcc-card);
  color: var(--smcc-text);
  border: 1px solid var(--smcc-line);
  box-shadow: var(--smcc-shadow);
}
.smcc-dh__uN { color: var(--smcc-deep); }
.smcc-dh__unit.is-small .smcc-dh__uN { color: var(--smcc-text); opacity: .78; }
.smcc-dh__uL { color: var(--smcc-muted); opacity: 1; }
.smcc-dh__sub { color: var(--smcc-muted); }

/* Night mode keeps the dark slab — there it IS the page. */
html[data-smcc-theme="night"] .smcc-dh__clock {
  background:
    radial-gradient(130% 130% at 88% 0%, rgba(124,107,240,.30) 0%, transparent 62%),
    var(--smcc-card);
}

/* The rail sits inside a light card now, so its unfilled segments need to
   read against paper rather than against navy. */
.smcc-dh__clock .smcc-hm__seg { background: var(--smcc-chipbg); }
.smcc-dh__clock .smcc-hm__seg.is-past { background: var(--smcc-clinical); }
.smcc-dh__clock .smcc-hm__seg.is-live { background: var(--smcc-violet); box-shadow: none; }
.smcc-dh__clock .smcc-hm__marker { background: var(--smcc-strong); box-shadow: 0 0 0 3px var(--smcc-card); }

.smcc-dh__clock .smcc-hm__duty {
  background: var(--smcc-chipbg); color: var(--smcc-chiptx);
}
.smcc-dh__clock .smcc-hm__pickI {
  background: var(--smcc-wash); color: var(--smcc-muted);
  border: 1px solid var(--smcc-line);
}
.smcc-dh__clock .smcc-hm__pickI.is-on {
  background: var(--smcc-deep); color: #fff; border-color: var(--smcc-deep);
}

/* Actions, restyled for a light card. The primary one keeps the weight. */
.smcc-dh__act {
  background: var(--smcc-wash); color: var(--smcc-text);
  border: 1px solid var(--smcc-line);
}
.smcc-dh__act.is-primary {
  background: var(--smcc-strong); color: #fff; border-color: var(--smcc-strong);
}
.smcc-dh__act.is-primary .smcc-dh__actS { color: rgba(255,255,255,.7); }
.smcc-dh__actN { color: var(--smcc-deep); }
.smcc-dh__act.is-primary .smcc-dh__actN { color: #fff; }
.smcc-dh__actS { color: var(--smcc-muted); }
.smcc-dh__act::after { opacity: .4; }

/* ---------- 3. breathing room between and inside the panels ---------- */

.smcc-dh { gap: clamp(10px, 2.5vw, 16px); }
.smcc-dh__clock { padding: 0 clamp(15px, 4vw, 26px) clamp(16px, 3.5vw, 22px); }
.smcc-dh__panel { padding: clamp(15px, 4vw, 20px); }

/* The clock's rail is inset with the card, not bled to its edges. */
.smcc-dh__clock .smcc-hm__rail {
  margin: 0 0 14px; padding: 15px 0 0;
}

@media (max-width: 400px) {
  .smcc-dh__units { flex-wrap: wrap; gap: 8px 14px; }
  .smcc-dh__unit.is-small .smcc-dh__uN { font-size: 22px; }
}

/* ---------- 4. odds and ends ---------- */

/* Long subject names were colliding with the percentage on a narrow phone. */
.smcc-dh__stop { flex-wrap: wrap; row-gap: 2px; }
.smcc-dh__sname { flex: 1 1 100%; }
.smcc-dh__spct { flex: 1 1 auto; }

/* Tap targets. Anything you press on a ward round is at least 44px. */
.smcc-dh__act, .smcc-hm__tile, .smcc-hm__duty, .smcc-md__b { min-height: 44px; }
.smcc-hm__tile { padding: 13px 6px; }

/* The tile grid was three ragged columns on some widths. */
@media (max-width: 640px) {
  .smcc-hm__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .smcc-hm__tile { font-size: 10px; padding: 11px 3px; }
  .smcc-hm__tile svg { width: 19px; height: 19px; }
}

/* Nothing may push the page sideways. A single overflowing table has been
   the cause of every "why is it scrolling horizontally" report. */
.smcc-dh, .smcc-dh__panel, .smcc-dh__clock { max-width: 100%; overflow-wrap: anywhere; }
.smcc-page--full { overflow-x: clip; }

/* ---------- 5. things that were plainly wrong on inspection ---------- */

/* The "never opened" swatch is transparent by design in the stacked bar —
   it is the empty part of the track. As a LEGEND dot that made it invisible,
   so a quarter of the legend read as a floating number. */
.smcc-dh__legend .smcc-dh__sl.is-new {
  background: var(--smcc-wash);
  box-shadow: inset 0 0 0 1px var(--smcc-line);
}
.smcc-dh__dot { flex: 0 0 auto; }

/* The duty control is its own row under the clock, so it needs a rule above
   it rather than sitting flush against the sub-line. */
.smcc-dh__clock .smcc-hm__rgt {
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--smcc-line);
  width: 100%;
}
.smcc-dh__clock .smcc-hm__pick { margin-top: 10px; }

/* The seconds digit changes ten times a second's worth of layout if the
   glyphs are proportional. Tabular figures stop the row twitching. */
.smcc-dh__uN, .smcc-dh__nN, .smcc-hm__vN, .smcc-rl__lv { font-variant-numeric: tabular-nums; }

/* A panel heading directly above a number grid was reading as part of the
   first number. */
.smcc-dh__panel .smcc-dh__k { padding-bottom: 10px; border-bottom: 1px solid var(--smcc-line); }

/* Focus rings were being clipped by the panels' overflow. */
.smcc-dh__panel, .smcc-dh__clock { overflow: visible; }
.smcc-dh__stack { overflow: hidden; }

/* Install card sat flush against the panel above it. */
.smcc-inst { display: block; margin-top: 14px; }

/* Night mode: the light-card rules above must not bleed into it. */
html[data-smcc-theme="night"] .smcc-dh__act { background: rgba(255,255,255,.06); }
html[data-smcc-theme="night"] .smcc-dh__act.is-primary { background: #fff; color: var(--smcc-strong); }
html[data-smcc-theme="night"] .smcc-dh__act.is-primary .smcc-dh__actN { color: var(--smcc-strong); }
html[data-smcc-theme="night"] .smcc-dh__act.is-primary .smcc-dh__actS { color: var(--smcc-muted); }

/* Landscape on a curved phone: the tab bar and the page both need the
   horizontal insets, and the tab labels get cramped. */
@media (orientation: landscape) and (max-height: 480px) {
  .smcc-tabs__i { font-size: 9px; padding: 6px 2px 4px; }
  .smcc-tabs__i svg { width: 18px; height: 18px; }
  :root { --smcc-tabh: 48px; }
}

/* Print: the app chrome is meaningless on paper. */
@media print {
  .smcc-tabs, .smcc-off, .smcc-inst, .smcc-hm__grid { display: none !important; }
  .smcc-dh__clock { background: none !important; color: #000 !important; border: 1px solid #999; }
}