/* Simply MBBS — v13. ================= 1. THE CURVED SCREEN ================= Everything below was written in v9 and did nothing, because env(safe-area-inset-*) reports ZERO unless the viewport meta carries viewport-fit=cover — and it did not. That meta is fixed now, so these rules finally apply. On an installed iPhone app there is no browser chrome to hide behind: the page owns the whole screen, including the rounded corners, the notch and the home indicator. Content has to be pushed off all four of them explicitly. The bottom was the visible failure — the tab bar sat over the stats strip and the home indicator sat over the tab bar. */ :root { --smcc-safe-t: env(safe-area-inset-top, 0px); --smcc-safe-b: env(safe-area-inset-bottom, 0px); --smcc-safe-l: env(safe-area-inset-left, 0px); --smcc-safe-r: env(safe-area-inset-right, 0px); --smcc-tabh: 60px; } /* Side insets. Matters in landscape and on the curved edges of the larger phones; the gutter has to clear the curve, not the rectangle. */ .smcc-shell { padding-left: calc(var(--smcc-gut) + var(--smcc-safe-l)); padding-right: calc(var(--smcc-gut) + var(--smcc-safe-r)); } /* Bottom. The old rule was a flat 66px, which is exactly the height of the bar and none of the home indicator underneath it — so the last panel on every page was cut in half. */ html.smcc-has-tabs body { padding-bottom: calc( var(--smcc-tabh) + var(--smcc-safe-b) + 14px ); } .smcc-tabs { padding-bottom: var(--smcc-safe-b); padding-left: var(--smcc-safe-l); padding-right: var(--smcc-safe-r); min-height: calc( var(--smcc-tabh) + var(--smcc-safe-b) ); } /* Top. black-translucent means the status bar overlays the page, so the status-bar strip has to be filled by the header itself. v13.0 got this wrong by compensating TWICE — padding-top on AND a top offset on the header. Either alone is correct; both together leave exactly one notch-height of blank page above the header, which is the gap he reported. The padding now lives INSIDE the header, so the strip behind the clock is the header's own background rather than empty page. */ html.smcc-standalone .smcc-header { padding-top: var(--smcc-safe-t); } /* And the header does not stick in the installed app. A sticky header is right on a website, where the browser chrome is already scrolling away and you want the nav to stay reachable. In a home-screen app there is no browser chrome, the bottom tab bar already provides navigation, and a bar welded to the top of a full-screen page just eats a fifth of a phone screen permanently. It scrolls with the page. */ html.smcc-standalone .smcc-header, html.smcc-standalone .smcc-header.is-sticky { position: relative; top: auto; box-shadow: none; } html.smcc-has-tabs .smcc-off { bottom: calc( var(--smcc-tabh) + var(--smcc-safe-b) + 14px ); } .smcc-off { left: calc( 12px + var(--smcc-safe-l) ); right: calc( 12px + var(--smcc-safe-r) ); } /* Anything fixed or sticky the plugin owns gets the same treatment. */ html.smcc-standalone .smcc-nav__sheet { padding-bottom: calc( var(--smcc-safe-b) + 20px ); } /* ================= 2. RETRIEVAL MODES ================= */ .smcc-md { display: flex; gap: 4px; flex-wrap: wrap; background: var(--smcc-wash); border-radius: 999px; padding: 4px; margin-bottom: 14px; } .smcc-md__b { flex: 1 1 auto; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 0; border-radius: 999px; padding: 8px 10px; background: transparent; color: var(--smcc-muted); white-space: nowrap; } .smcc-md__b.is-on { background: var(--smcc-card); color: var(--smcc-deep); box-shadow: 0 1px 3px rgba(25,22,52,.12); } .smcc-md__b[disabled] { opacity: .35; cursor: default; } .smcc-rv__cloze { font-size: clamp(16px, 3vw, 20px); line-height: 1.5; margin: 0; } .smcc-rv__blank { display: inline-block; min-width: 96px; border-bottom: 2px dashed var(--smcc-violet); color: transparent; user-select: none; } .smcc-rv__blank.is-shown { color: var(--smcc-clinical); font-weight: 700; border-bottom-style: solid; } .smcc-rv__type { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1.5px solid var(--smcc-line); border-radius: 12px; background: var(--smcc-paper); color: var(--smcc-text); margin-top: 12px; } .smcc-rv__type:focus { outline: 2px solid var(--smcc-violet); outline-offset: 1px; } .smcc-rv__verdict { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 11px 13px; border-radius: 11px; font-size: 14px; } .smcc-rv__verdict.is-hit { background: color-mix(in srgb, var(--smcc-clinical) 12%, transparent); color: var(--smcc-clinical); } .smcc-rv__verdict.is-near { background: color-mix(in srgb, var(--smcc-violet) 14%, transparent); color: var(--smcc-deep); } .smcc-rv__verdict.is-miss { background: color-mix(in srgb, var(--smcc-alert) 11%, transparent); color: var(--smcc-alert); } .smcc-rv__score { font-family: var(--smcc-mono); font-size: 11px; opacity: .75; margin-left: auto; } /* ================= 3. THE DATA HOME ================= */ .smcc-dh { display: grid; gap: 14px; } .smcc-dh__clock { background: radial-gradient(130% 130% at 88% 0%, rgba(124,107,240,.32) 0%, transparent 62%), var(--smcc-strong); color: #fff; border-radius: 22px; overflow: hidden; padding: 0 clamp(16px, 4vw, 28px) clamp(18px, 3.5vw, 24px); } .smcc-dh__units { display: flex; gap: clamp(8px, 3vw, 20px); align-items: flex-end; margin: 4px 0 0; } .smcc-dh__unit { display: grid; gap: 2px; } .smcc-dh__uN { font-family: var(--smcc-display); font-weight: 700; line-height: .85; letter-spacing: -.04em; font-variant-numeric: tabular-nums; font-size: clamp(38px, 12vw, 74px); } .smcc-dh__unit.is-small .smcc-dh__uN { font-size: clamp(20px, 6vw, 34px); opacity: .82; } .smcc-dh__uL { font-family: var(--smcc-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; } .smcc-dh__sub { font-size: 13px; color: rgba(255,255,255,.7); margin: 14px 0 0; line-height: 1.5; } .smcc-dh__acts { display: grid; gap: 8px; margin-top: 16px; } .smcc-dh__act { display: flex; align-items: center; gap: 12px; text-decoration: none; background: rgba(255,255,255,.1); border-radius: 14px; padding: 13px 15px; color: #fff; } .smcc-dh__act.is-primary { background: #fff; color: var(--smcc-strong); } .smcc-dh__actN { font-family: var(--smcc-display); font-weight: 700; font-size: 19px; min-width: 44px; } .smcc-dh__actT { flex: 1 1 auto; font-size: 14px; font-weight: 600; } .smcc-dh__actS { font-size: 12px; opacity: .65; display: block; font-weight: 400; } .smcc-dh__act::after { content: "→"; font-size: 17px; opacity: .55; } .smcc-dh__panel { background: var(--smcc-card); border: 1px solid var(--smcc-line); border-radius: 18px; padding: 18px; } .smcc-dh__k { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .16em; color: var(--smcc-muted); margin: 0 0 12px; } .smcc-dh__stack { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: var(--smcc-wash); } .smcc-dh__sl { height: 100%; } .smcc-dh__sl.is-sec { background: var(--smcc-clinical); } .smcc-dh__sl.is-lrn { background: var(--smcc-violet); } .smcc-dh__sl.is-seen { background: var(--smcc-chipbg); } .smcc-dh__sl.is-new { background: transparent; } .smcc-dh__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--smcc-muted); } .smcc-dh__lg { display: inline-flex; align-items: center; gap: 6px; } .smcc-dh__dot { width: 9px; height: 9px; border-radius: 3px; } .smcc-dh__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 14px; } .smcc-dh__num { display: grid; gap: 2px; } .smcc-dh__nN { font-family: var(--smcc-display); font-size: clamp(19px, 4.6vw, 26px); font-weight: 700; line-height: 1; } .smcc-dh__nL { font-size: 11px; color: var(--smcc-muted); line-height: 1.3; } .smcc-dh__subj { display: grid; gap: 1px; background: var(--smcc-line); border-radius: 12px; overflow: hidden; } .smcc-dh__srow { background: var(--smcc-card); padding: 10px 13px; display: grid; gap: 5px; } .smcc-dh__stop { display: flex; align-items: baseline; gap: 8px; } .smcc-dh__sname { font-size: 13.5px; font-weight: 600; flex: 1 1 auto; } .smcc-dh__spct { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-muted); } .smcc-dh__smk { font-family: var(--smcc-mono); font-size: 11px; color: var(--smcc-alert); min-width: 34px; text-align: right; } .smcc-dh__sbar { height: 5px; border-radius: 999px; background: var(--smcc-chipbg); overflow: hidden; } .smcc-dh__sfill { height: 100%; background: var(--smcc-clinical); } .smcc-dh__srow.is-dead .smcc-dh__sbar { background: repeating-linear-gradient(45deg, var(--smcc-chipbg), var(--smcc-chipbg) 4px, transparent 4px, transparent 8px); } /* ================= 4. RIVAL ================= */ .smcc-rl__head { display: grid; gap: 4px; margin-bottom: 16px; } .smcc-rl__lanes { display: grid; gap: 10px; } .smcc-rl__lane { background: var(--smcc-card); border: 1px solid var(--smcc-line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; } .smcc-rl__lane.is-you { border-left: 3px solid var(--smcc-deep); } .smcc-rl__lane.is-past { border-left: 3px solid var(--smcc-muted); } .smcc-rl__lane.is-need { border-left: 3px solid var(--smcc-alert); } .smcc-rl__lt { display: flex; align-items: baseline; gap: 10px; } .smcc-rl__ln { font-weight: 600; font-size: 14px; flex: 1 1 auto; } .smcc-rl__lv { font-family: var(--smcc-display); font-size: 22px; font-weight: 700; } .smcc-rl__track { height: 10px; border-radius: 999px; background: var(--smcc-wash); overflow: hidden; } .smcc-rl__fill { height: 100%; border-radius: 999px; } .smcc-rl__lane.is-you .smcc-rl__fill { background: var(--smcc-deep); } .smcc-rl__lane.is-past .smcc-rl__fill { background: var(--smcc-muted); } .smcc-rl__lane.is-need .smcc-rl__fill { background: var(--smcc-alert); } .smcc-rl__note { font-size: 12px; color: var(--smcc-muted); } .smcc-rl__verdict { margin: 16px 0; padding: 16px 18px; border-radius: 14px; font-size: 15px; line-height: 1.6; border-left: 3px solid; } .smcc-rl__verdict.is-up { border-left-color: var(--smcc-clinical); background: color-mix(in srgb, var(--smcc-clinical) 7%, transparent); } .smcc-rl__verdict.is-down { border-left-color: var(--smcc-alert); background: color-mix(in srgb, var(--smcc-alert) 7%, transparent); } .smcc-rl__verdict.is-flat { border-left-color: var(--smcc-violet); background: var(--smcc-wash); } .smcc-rl__weeks { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 14px 0 6px; } .smcc-rl__wk { flex: 1 1 auto; background: var(--smcc-chipbg); border-radius: 3px 3px 0 0; min-height: 2px; } .smcc-rl__wk.is-now { background: var(--smcc-deep); } .smcc-rl__wkL { display: flex; justify-content: space-between; font-family: var(--smcc-mono); font-size: 10px; color: var(--smcc-muted); } @media (max-width: 520px) { .smcc-dh__units { gap: 10px; } .smcc-md__b { font-size: 11px; padding: 8px 6px; } } .smcc-dh__ver { font-family: var(--smcc-mono); font-size: 10px; letter-spacing: .08em; color: var(--smcc-muted); text-align: center; margin: 6px 0 0; opacity: .7; }