/* ============================================================
   mobile.css — Production mobile layer
   Loaded last by every page (Summer Perspective / details / terms)
   so it wins the cascade over inline + checkout.css. Tablet
   breakpoint kicks in at 720px; phone-specific tweaks at 480px.
   ============================================================ */


/* ============================================================
   1 · TOPBAR  (shared)
   ============================================================ */
@media (max-width: 720px) {
  .topbar-inner { padding: 10px 14px; gap: 8px; }
  .topbar .nav-link { display: none; }
  .topbar .pill:not(.seat-pill) { display: none; }
  .topbar .avatars { display: none; }
  .topbar .seat-pill {
    font-size: 9.5px; padding: 5px 9px; letter-spacing: 0.06em;
  }
  .topbar .nav-cta {
    padding: 9px 13px; font-size: 10px; letter-spacing: 0.08em;
  }
  .topbar .nav-cta .arr { font-size: 12px; }
}
@media (max-width: 380px) {
  .topbar .seat-pill { display: none; }
}


/* ============================================================
   2 · BOTTOM MOBILE CTA BAR  (shared, fixed)
   ------------------------------------------------------------
   Hidden on desktop; visible on phones + tablets <720. Hides
   automatically when the checkout modal is open. Each page
   embeds a single <div class="m-cta-bar"> just before <footer>.
   ============================================================ */
.m-cta-bar { display: none; }
@media (max-width: 720px) {
  .m-cta-bar {
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px 11px 18px;
    background: #0c0c0c;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5),
                0 4px 12px -4px rgba(0,0,0,0.3);
    /* iOS safe area */
    padding-bottom: max(11px, env(safe-area-inset-bottom, 0));
    margin-bottom: env(safe-area-inset-bottom, 0);
  }
  body.checkout-open .m-cta-bar { display: none; }
}
.m-cta-bar .m-cta-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.m-cta-bar .m-cta-amount {
  font-family: var(--font-display); font-weight: 300;
  font-size: 16px; letter-spacing: -0.02em; line-height: 1;
  color: #fff;
  display: flex; align-items: baseline; gap: 4px;
  white-space: nowrap;
}
.m-cta-bar .m-cta-amount .num { font-size: 18px; }
.m-cta-bar .m-cta-meta {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-cta-bar .m-cta-btn {
  background: #fff; color: #0c0c0c;
  border: none; border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700;
  transition: transform 100ms;
}
.m-cta-bar .m-cta-btn:active { transform: scale(0.97); }
.m-cta-bar .m-cta-btn .arr { font-family: var(--font-mono); font-size: 13px; line-height: 1; font-weight: 400; }


/* ============================================================
   3 · HOME — index.html (bento grid)
   ------------------------------------------------------------
   Single column with a 2-column rhythm for mini-tiles, full
   functionality preserved (hike scrubber, course tiles, schedule
   tabs, audio toggle, flip card all keep working).
   ============================================================ */
@media (max-width: 720px) {
  main.bento {
    padding: 16px 14px 96px;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
    grid-auto-rows: 60px;
  }

  /* Default: every named span goes full-row width */
  .span-hero,
  .span-tall,
  .span-md,
  .span-sm,
  .span-wide,
  .span-wide-sm,
  .span-schedule,
  .span-fullbleed,
  .span-postcard { grid-column: span 2 !important; }

  /* Mini-tiles pair as 2-col (weather / countdown, seats / audio) */
  .span-mini { grid-column: span 1 !important; grid-row: span 4 !important; }

  /* Custom heights tuned for content density at single-col */
  .span-hero      { grid-row: span 8 !important; }
  .span-tall      { grid-row: span 10 !important; }
  .span-md        { grid-row: span 6 !important; }
  .span-sm        { grid-row: span 6 !important; }
  .span-wide      { grid-row: span 8 !important; }
  .span-wide-sm   { grid-row: span 5 !important; }
  .span-schedule  { grid-row: span 9 !important; }
  .span-fullbleed { grid-row: span 4 !important; }
  .span-postcard  { grid-row: span 7 !important; }

  /* Hero typography */
  .hero { padding: 24px 22px; }
  .hero h1 { font-size: clamp(38px, 11vw, 60px); }
  body[data-hero="big20"] .hero h1 { font-size: clamp(34px, 8.5vw, 52px); }
  body[data-hero="big20"] .big20 {
    font-size: clamp(96px, 30vw, 160px);
    margin: -6px 0 -4px;
  }
  .hero-meta { gap: 6px; margin-top: 14px; }
  .hero-meta .chip {
    font-size: 9.5px; padding: 6px 10px; letter-spacing: 0.06em;
  }
  .hero-cta { padding: 12px 18px; font-size: 11px; }

  /* Countdown cells get tighter on a tiny tile */
  .countdown { gap: 5px; }
  .countdown .cell { padding: 8px 4px; border-radius: 10px; }
  .countdown .cell .n { font-size: 18px; }
  .countdown .cell .u { font-size: 8.5px; }

  /* Weather */
  .weather .sun { width: 38px; height: 38px; }
  .weather .temp { font-size: 28px; }

  /* Seats grid keeps 5×3 but tighter */
  .seats-grid { gap: 4px; }

  /* Audio tile */
  .audio-card .display { font-size: 16px !important; }
  .audio-card .speaker-icon { width: 36px; height: 36px; }

  /* Schedule */
  .day-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px 10px;
    padding: 0 16px;
  }
  .day-tabs::-webkit-scrollbar { display: none; }
  .day-tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 10.5px;
  }
  .agenda .row { grid-template-columns: 56px 1fr; gap: 12px; }
  .agenda .t { font-size: 10px; }
  .agenda .d { font-size: 13.5px; }

  /* Workshops */
  .ws-card { padding: 12px; }
  .ws-card .h { font-size: 16px; }
  .crew-strip { aspect-ratio: 16/6 !important; max-height: 96px !important; }

  /* Price */
  .price-display .num { font-size: 56px; }
  .incl div { font-size: 12.5px; }

  /* Hike scrubber — bigger thumb for touch */
  .hike .scrubber { height: 6px; }
  .hike .scrubber::-webkit-slider-thumb {
    width: 22px; height: 22px;
  }
  .hike .scrubber::-moz-range-thumb { width: 22px; height: 22px; }
  .hike .marker { font-size: 9px; letter-spacing: 0.06em; }

  /* Dinner courses (5 across is fine but cap circle size) */
  .courses { gap: 6px; }
  .course-name { font-size: 18px; }
  .course-desc { font-size: 12px; }

  /* Boat tile */
  .boat-card .caption .h { font-size: 18px; }

  /* Marquee — slow it down (no hover to pause on mobile) */
  .marquee .track { animation-duration: 90s; padding: 12px; gap: 10px; }
  .marquee .frame { aspect-ratio: 3/4; }

  /* CTA card — stack columns */
  .cta-card { padding: 24px 22px !important; }
  .cta-card > div { flex-direction: column !important; gap: 20px !important; }
  .cta-card > div > div { min-width: 0 !important; }
  .cta-card > div > div:nth-child(2) {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 18px !important;
  }
  .cta-card .h { font-size: 26px !important; }

  /* Quote tile */
  .card[data-no-focus] .card-body .display { font-size: 17px; }

  /* Footer */
  footer.foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 16px;
  }
}

/* True phone width — drop minis to full width too */
@media (max-width: 480px) {
  main.bento {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 50px;
    gap: 10px;
  }
  .span-mini { grid-column: span 1 !important; grid-row: span 4 !important; }

  /* Hero gets slightly more breathing room when full-width */
  body[data-hero="big20"] .big20 { font-size: clamp(120px, 38vw, 180px); }
  .hero h1 { text-align: left; }

  .ws-card { padding: 11px 14px; }
  .ws-card .h { font-size: 15.5px; }
}

/* Cards on mobile: tap-feedback only (no hover lift, no zoom cursor) */
@media (hover: none) {
  .card { cursor: default !important; }
  .card:hover { box-shadow: none; }
  .card:active { transform: scale(0.995); transition: transform 120ms; }
  .card.no-zoom:active { transform: none; }
  /* hide the custom JS cursor on touch */
  .sp-cursor { display: none !important; }
}


/* ============================================================
   4 · DETAILS — details.html
   ============================================================ */
@media (max-width: 720px) {
  .page { padding: 20px 16px 96px; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin: 0 0 36px !important;
  }
  .hero-text { padding: 0 !important; gap: 18px !important; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 64px); }
  .hero-sub { font-size: 16px; }
  .hero-eyebrow {
    gap: 4px !important;
    flex-direction: column;
    align-items: flex-start;
    font-size: 10px;
  }
  .hero-eyebrow span::before { display: none; }
  .hero-meta { gap: 6px; }
  .hero-meta .chip { font-size: 9.5px; padding: 6px 10px; }
  .hero-video {
    aspect-ratio: 4/3 !important;
    border-radius: 16px;
  }
  .hero-video .caption { font-size: 18px; left: 14px; right: 14px; bottom: 14px; }

  /* Sections */
  section.block { padding: 36px 0 !important; }
  .section-label { font-size: 10px; margin-bottom: 14px; }
  .section-title {
    font-size: clamp(26px, 7vw, 42px) !important;
    margin-bottom: 22px !important;
  }
  .lede { font-size: 16.5px; }
  .body { font-size: 15.5px; line-height: 1.6; }
  .rhythm p { font-size: 16px; }

  /* Stat row — 2 col already at 720, refine */
  .stat-row { margin: 26px 0; }
  .stat-row .stat { padding: 16px 14px; }
  .stat-row .stat .v { font-size: 28px; }

  /* Card strip */
  .card-strip { gap: 12px; margin: 24px 0 0; }
  .strip-card { padding: 18px 18px 20px; border-radius: 14px; }
  .strip-card .t { font-size: 21px; }
  .strip-card .b { font-size: 14px; }

  /* Gallery — keep 2-col but tighter */
  .gallery {
    grid-template-rows: 170px 170px 170px !important;
    gap: 8px !important;
  }

  /* Programme */
  .day { padding: 22px 0 !important; gap: 14px !important; }
  .day-head { position: static !important; }
  .day-name { font-size: 24px; margin: 3px 0 6px; }
  .day-num, .day-date { font-size: 10px; }
  .agenda-grid .row {
    grid-template-columns: 64px 1fr !important;
    gap: 12px !important;
    padding: 10px 0;
  }
  .agenda-grid .t { font-size: 10px; }
  .agenda-grid .d { font-size: 14.5px; }
  .agenda-grid .d.ws .ws-label { font-size: 9px; }

  /* Flights */
  .flight-row {
    grid-template-columns: 36px 1fr !important;
    gap: 10px !important;
    padding: 11px 12px;
  }
  .flight-row .time, .flight-row .route { grid-column: 2 / -1; }
  .flight-row .carrier { font-size: 14px; }
  .flight-row .time { font-size: 12px; }

  /* Included grid */
  .included-grid { grid-template-columns: 1fr !important; margin: 24px 0; }
  .included-grid .item {
    padding: 14px 0 !important;
    border-right: none !important;
  }
  .included-grid .item:nth-child(even) { padding-left: 0 !important; }

  /* Who */
  .who-grid { margin: 24px 0; }
  .who-col { padding: 22px 0 26px !important; }
  .who-col h3 { font-size: 26px; }

  /* CTA */
  .cta-block {
    padding: 32px 22px !important;
    margin-top: 48px !important;
    border-radius: 18px !important;
    gap: 22px !important;
  }
  .cta-block h2 {
    font-size: clamp(28px, 7vw, 44px) !important;
    margin-top: 12px !important;
  }
  .cta-block .seats-pill { font-size: 10px; }
  .cta-btn { padding: 16px 22px; font-size: 11px; }

  footer.foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 16px;
  }
}


/* ============================================================
   5 · TERMS — terms.html
   ============================================================ */
@media (max-width: 720px) {
  .doc-header { padding: 24px 16px 0 !important; }
  .doc-title {
    font-size: clamp(32px, 9vw, 56px) !important;
    margin: 14px 0 12px !important;
    line-height: 1;
  }
  .doc-sub { font-size: 14.5px; }
  .doc-meta {
    gap: 14px !important;
    padding: 14px 0 !important;
    margin-top: 18px !important;
  }
  .doc-meta .item .v { font-size: 13px; }
  .doc-meta .item .k { font-size: 9.5px; }

  .page {
    padding: 24px 16px 96px !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  /* TOC becomes a tidy bordered block */
  .toc {
    position: static !important;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 14px 16px 6px;
    background: #fff;
  }
  .toc-label { margin-bottom: 10px; }
  .toc ol {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .toc li {
    border-top: 1px dashed var(--hairline) !important;
    border-bottom: none !important;
    padding: 0 !important;
  }
  .toc li:first-child { border-top: none !important; }
  .toc li:nth-child(even) { border-left: none !important; padding-left: 0 !important; }
  .toc a { padding: 11px 4px !important; font-size: 13px; }

  .doc { max-width: none; }
  .doc section { padding: 28px 0 !important; }
  .doc h2 { font-size: clamp(22px, 6vw, 32px) !important; margin-bottom: 14px !important; }
  .doc h2 .num { font-size: 10px; }
  .doc h3 { font-size: 17px; }
  .doc p { font-size: 15px; line-height: 1.6; }
  .doc ul li, .doc ol.alpha > li { font-size: 14.5px; }
  .doc ol.alpha > li { padding-left: 32px; }
  .doc ol.roman > li { padding-left: 36px; font-size: 14px; }
  .doc .callout { padding: 16px 18px; font-size: 14px; }

  .acceptance {
    padding: 26px 22px !important;
    margin: 28px 0 0 !important;
    border-radius: 18px !important;
  }
  .acceptance h3 { font-size: 22px; }

  footer.foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 16px;
  }
}


/* ============================================================
   6 · CHECKOUT MOBILE
   ------------------------------------------------------------
   Full-screen takeover. Dark summary collapses to a sticky
   header pill ("£1,100 today · Scale20 Member ▾"). Form fills
   the rest. Step nav becomes a fixed bottom action bar.
   On payment step we skip the iframe and redirect to PayFunnels.
   ============================================================ */

/* m-summary-bar is rendered by checkout.js; hide on desktop */
.m-summary-bar { display: none; }

@media (max-width: 720px) {
  .checkout-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
    background: #0c0c0c;
  }
  .checkout-modal {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    max-width: none !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* === Collapsed summary === */
  .checkout-summary {
    position: sticky;
    top: 0;
    z-index: 6;
    padding: 12px 14px !important;
    gap: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    /* iOS safe area for notch */
    padding-top: max(12px, env(safe-area-inset-top, 0)) !important;
  }
  /* Hide all original summary content by default... */
  .checkout-summary > .eyebrow,
  .checkout-summary > .checkout-thesis,
  .checkout-summary > .summary-meta,
  .checkout-summary > .toggle-stack,
  .checkout-summary > .deposit-block,
  .checkout-summary > .summary-incl,
  .checkout-summary > .summary-signature {
    display: none !important;
  }
  /* ...except for the new compact bar (always visible) */
  .checkout-summary .m-summary-bar {
    display: flex !important;
    width: 100%;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 4px 2px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* When expanded, reveal the original blocks below the bar */
  .checkout-summary.expanded {
    padding-bottom: 18px !important;
  }
  .checkout-summary.expanded > .checkout-thesis { display: block !important; margin: 10px 0 14px; }
  .checkout-summary.expanded > .summary-meta { display: grid !important; }
  .checkout-summary.expanded > .toggle-stack { display: grid !important; margin-top: 14px; }
  .checkout-summary.expanded > .deposit-block { display: grid !important; margin-top: 14px; }
  .checkout-summary.expanded > .summary-incl { display: grid !important; margin-top: 14px; }

  /* Tighten the typography inside the expanded block */
  .checkout-summary.expanded .checkout-thesis { font-size: 22px; }
  .checkout-summary.expanded .summary-price .num { font-size: 44px; }
  .checkout-summary.expanded .payment-breakdown { padding: 12px 14px; }

  /* === Form === */
  .checkout-form-wrap {
    padding: 22px 16px 110px !important;
    max-height: none !important;
    min-height: auto;
    overflow: visible;
  }
  .checkout-progress {
    margin-bottom: 18px;
    padding-bottom: 12px;
    /* keep sticky inside form, sits below summary bar */
    top: 50px;
  }
  .checkout-step .section-title { font-size: 24px !important; }
  .section-sub { font-size: 13.5px; }
  .fields { gap: 12px; }
  .field input,
  .field .combo-input,
  .field textarea { font-size: 16px; padding: 13px 14px; }  /* 16px prevents iOS zoom */

  .terms-row { padding: 14px; }
  .terms-row label { font-size: 13.5px; }

  /* === Fixed bottom step navigation === */
  .step-nav {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    margin: 0 !important;
    padding: 12px 14px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0)) !important;
    background: #fff;
    border-top: 1px solid var(--hairline);
    z-index: 5;
    box-shadow: 0 -8px 24px -10px rgba(0,0,0,0.12);
  }
  .step-nav.no-back .btn-back { display: none !important; }
  .step-nav .btn-back {
    padding: 13px 18px;
    font-size: 10.5px;
  }
  .step-nav .btn-continue {
    padding: 14px 22px;
    font-size: 11.5px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .step-nav.no-back .btn-continue { flex: 1; }

  /* Close button — visible on dark sticky header */
  .checkout-close {
    top: 10px; right: 10px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.22);
  }
  .checkout-close:hover { background: #fff; color: #0c0c0c; }

  /* === Payment step: hide iframe, show redirect card === */
  .payment-step .pay-header {
    grid-template-columns: 1fr !important;
    padding: 16px 18px;
  }
  .payment-step .pay-header .amount {
    flex-direction: row !important;
    align-items: baseline !important;
  }
  .payment-step .payment-frame { display: none !important; }
  .payment-step .pay-fallback {
    background: #faf9f6;
    padding: 18px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-radius: 14px;
  }
  .payment-step .pay-fallback .text { font-size: 14px; }
  .payment-step .pay-fallback a {
    justify-content: center;
    padding: 15px 20px;
    font-size: 11.5px;
    background: #0c0c0c;
    color: #fff;
    border-color: #0c0c0c;
  }
  .payment-step .m-redirect-card {
    display: block;
    background: #0c0c0c;
    color: #fff;
    border-radius: 14px;
    padding: 22px 22px 24px;
    margin: 18px 0 14px;
  }
  .payment-step .m-redirect-card .eyebrow {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
  }
  .payment-step .m-redirect-card .h {
    font-family: var(--font-display); font-weight: 300;
    font-size: 24px; letter-spacing: -0.025em; line-height: 1.1;
    margin: 8px 0 14px;
  }
  .payment-step .m-redirect-card .b {
    font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
    color: rgba(255,255,255,0.78);
    margin: 0 0 16px;
  }
  .payment-step .m-redirect-card .m-redirect-btn {
    display: inline-flex; width: 100%;
    align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: #0c0c0c;
    border: none; border-radius: 999px;
    padding: 15px 22px;
    font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; text-decoration: none;
    transition: opacity 200ms;
  }
  .payment-step .m-redirect-card .m-redirect-btn:active { opacity: 0.85; }
  .payment-step .m-redirect-card .m-redirect-btn .spinner {
    width: 14px; height: 14px; border-radius: 999px;
    border: 2px solid rgba(12,12,12,0.25);
    border-top-color: #0c0c0c;
    animation: mRedirectSpin 800ms linear infinite;
  }
  @keyframes mRedirectSpin { to { transform: rotate(360deg); } }
}

/* Desktop: hide the mobile-only redirect card */
.payment-step .m-redirect-card { display: none; }


/* m-summary-bar internals */
.m-summary-bar .m-sum-text {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
}
.m-summary-bar .m-sum-title {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.m-summary-bar .m-sum-amount {
  font-family: var(--font-sans); font-size: 14px;
  color: #fff;
  display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-summary-bar .m-sum-amount .price {
  font-family: var(--font-display); font-weight: 400;
  font-size: 17px; letter-spacing: -0.02em;
}
.m-summary-bar .m-sum-amount .price-meta {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.m-summary-bar .m-sum-chev {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.65);
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1);
  margin-right: 36px; /* leave room for the absolute-positioned close button */
}
.checkout-summary.expanded .m-summary-bar .m-sum-chev { transform: rotate(180deg); }


/* ============================================================
   7 · TWEAKS PANEL — hide on mobile (not useful on touch)
   ============================================================ */
@media (max-width: 720px) {
  #tweaks-root,
  [data-tweaks-panel],
  .tweaks-toggle { display: none !important; }
}


/* ============================================================
   8 · MOTION / FOCUS
   ============================================================ */
@media (max-width: 720px) {
  /* The focus overlay is still useful (tap a tile to expand) — but
     make it fill the screen properly on phones. */
  .focus-overlay { padding: 0 !important; }
  .focus-frame {
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  .focus-close { top: 12px; right: 12px; }

  /* Larger tap target for the chev / day tab buttons */
  .day-tab { min-height: 36px; }
  .ws-card { min-height: 56px; }
}