/* ============================================================================
   Kronos · mobile.css — legibility and reach on a real phone.

   ADDITIVE. Loaded LAST, after tokens.css and every view stylesheet, so it
   overrides sizes without editing them. It changes no colour, no typeface and
   no layout structure — the locked Ledger design (tokens.css, baseline
   2026-06-02, Aldrin rubric_run 76) is untouched. What it changes is scale.

   WHY THIS FILE EXISTS
   --------------------
   The screens were drawn once, at one size, as a design-review document: a
   390×844 phone mockup sitting on a page with a caption above it. That reads
   correctly on a laptop at 100%. On an actual phone it does not, for four
   separate reasons, all of which this file addresses:

     1. TEXT BELOW THE LEGIBILITY FLOOR. Thirty-two rules across the shell set
        text under 11px — seven of them at 7px and 8px, and several of those on
        BUTTONS (.approve-pair button at 9px, .day-universal button at 10px).
        Apple's Human Interface Guidelines and Google's Material guidance both
        put 11px at the bottom of the legible range for incidental text, and
        neither puts a control's label there at all. Section 2 below raises
        every one of them.

     2. TOUCH TARGETS UNDER 44px. Apple asks for 44×44pt minimum, Google for
        48×48dp. Only one rule in the whole shell honoured that, and only
        behind a pointer:coarse query (.approve-pair button). Section 3 makes
        it the rule rather than the exception.

     3. iOS ZOOMS ON FOCUS. Mobile Safari zooms the whole page in when you tap
        an input whose font-size is under 16px, and does not zoom back out.
        Every input in the shell was under 16px. Section 4 fixes that — it is
        the single most jarring thing about using the app on an iPhone today.

     4. DOCUMENT CHROME EATING THE SCREEN. The page carries a kicker, a caption
        and a "PHONE" frame label above the app, plus page padding around it.
        On a 390px-wide screen that is roughly a fifth of the height spent on
        furniture that only made sense in a design review. Section 5 drops it
        below 700px and lets the app fill the glass.

   HOW THE SIZES WERE CHOSEN
   -------------------------
   Proportionally, not flat — the visual hierarchy the design established is
   preserved, just shifted up off the floor:

        7px → 11px      8px → 11px      9px → 12px
       10px → 12.5px   10.5px → 13px

   The smallest text on the screen is still the smallest text on the screen.
   It is simply now large enough to read.

   WHICH BREAKPOINT, AND WHY NOT JUST WIDTH
   ----------------------------------------
   Sections 1, 2 and 4 fire on `(max-width: 900px), (pointer: coarse)` rather
   than on width alone, because the first version used max-width:700px and
   measurement showed it missing two devices people actually hold:

       iPhone 14 in landscape   844px wide   79 text runs left under 11px
       iPad portrait            768px wide   79 text runs left under 11px

   A phone turned on its side is still a phone, and a tablet is still a
   fingertip. Adding `pointer: coarse` catches both, and any touch device that
   comes later, without touching a desktop mouse pointer at any width.

   Sections 5 and 6 stay width-based on purpose: dropping the page furniture
   and stacking the button rows is about how much room there is, and an iPad
   has plenty.

   WHY THESE CARRY !important
   --------------------------
   Reluctantly, and only in sections 2 and 4. The view stylesheets size this
   text with two- and three-class selectors -- `.sub2-headline .dchip .dd`,
   `.kbr-surface:not(.land) .pane-lbl .lock` -- and a single-class override
   loses to them on specificity no matter what order it lands in. The
   alternative was to restate roughly twenty-five of their selector chains here
   and keep them in step forever, which would break the first time a view is
   restructured.

   These two sections are FLOORS, not preferences: a legibility minimum, and
   the 16px threshold below which mobile Safari zooms the page. "Nothing on a
   phone goes under this" is exactly what !important is for. Sections 3, 5, 6
   and 7 do not use it, and nothing outside the phone media queries does, so
   the desktop layer stays freely overridable.

   SCOPE. Sections 2, 4 and 5 apply below 700px, where legibility is the
   binding constraint. Section 3 (touch targets) keys off pointer:coarse
   instead, so a tablet or a touchscreen laptop gets proper targets at any
   width. Nothing here fires on a desktop mouse pointer above 700px, so the
   desktop layout (desktop.css) is unaffected.
   ============================================================================ */


/* ============================================================================
   1. VIEWPORT AND SAFE AREAS
   ---------------------------------------------------------------------------
   iPhones since the X have a notch at the top and a home indicator at the
   bottom. Content underneath either is unreachable. The fixed bottom nav sat
   directly under the home indicator; the bottom row of buttons was being
   tapped through a system gesture area.
   ============================================================================ */

@media (max-width: 900px), (pointer: coarse) {

  html {
    /* Stop the page sliding sideways when one wide table overflows. */
    overflow-x: hidden;
    /* Don't let iOS inflate text on rotate; we set our own sizes below. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    /* 72px was the reserved strip for the fixed nav. It now also has to clear
       the home indicator, which env(safe-area-inset-bottom) reports as ~34px
       on the phones that have one and 0 on those that don't. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .kronos-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Anything that scrolls sideways does it inside its own box, never by
     dragging the whole page. */
  .ledger,
  .ec-table,
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================================
   2. TYPE FLOOR — every text run the browser measured below 11px
   ---------------------------------------------------------------------------
   This list is not read off the stylesheets. It is what Chromium reported as
   the COMPUTED size of visible text, with all six screens mounted, at 390px
   wide — seventy-nine runs across four screens. Reading the source would have
   missed most of them: several are set by shorthand `font:` declarations, some
   by nested selectors, and the view markup uses class names that do not appear
   in the outer selectors of the stylesheets that size them.

   Raised proportionally, so the hierarchy the design established survives:

        5.5px → 10px      7px → 11px      8px → 11px
        9px   → 12px      9.5px → 12px   10px → 12.5px

   Everything is scoped inside a media query and applies to the shadow roots as
   well, because kronos_mobile.js injects this file into each of them.
   ============================================================================ */

@media (max-width: 900px), (pointer: coarse) {

  /* ---- Submit screen (38 runs) — a vertical list of days and hours. No
          layout risk in raising any of it; it is the screen someone reads
          before committing a week of time, and it was the smallest of the
          six. --------------------------------------------------------------- */
  .sub2-secthead,
  .dh {
    font-size: 12px !important;
  }

  .dd,
  .im,
  .none,
  .held,
  .chk,
  .chk.on {
    font-size: 12.5px !important;
  }

  .or {
    font-size: 11px !important;
  }

  /* ---- Day screen ------------------------------------------------------- */
  .ro-banner {
    font-size: 11px !important;
  }

  .ttl,
  .gauge .glabel .ttl {
    font-size: 12px !important;
  }

  /* ---- Shared chrome, present on several screens ------------------------ */
  /* The two pane headers ("Google - read-only", "Ajera - held - drag") sit
     side by side across the width. Going from 8px to 11px pushed the right one
     hard against the screen edge, so the tracking comes down to buy the room
     back: .12em of letter-spacing on eighteen characters is about 20px, which
     is exactly the margin that was missing. Size wins over tracking here --
     the words matter, the airiness does not. */
  .wk-lbl,
  .pane-lbl,
  .pane-lbl.google,
  .pane-lbl.ajera {
    font-size: 11px !important;
    letter-spacing: .02em !important;
  }

  .pane-lbl .lock {
    letter-spacing: .02em !important;
  }

  .kbr-surface .ph {
    padding-right: 4px;
  }

  .dry-badge,
  .topbar .dry {
    font-size: 12px !important;
  }

  .sync-pill,
  .meta,
  .kd-meta,
  .nudge .nlbl {
    font-size: 12.5px !important;
  }

  /* ---- Bridge / calendar screen (36 runs) -------------------------------
     The dense one, and the only place where raising the text needs a matching
     change to the box around it.

     The hour axis (.hr, 23 of them) sits at 7px in a column 24px wide. Each
     row is 42px TALL, so there is ample vertical room — the binding constraint
     is width: "12p" set at 11px in JetBrains Mono needs roughly 27px and the
     column gives it 24. So the column widens to 36px in the same breath as the
     text grows. Without the width change the labels would clip instead of
     growing.

     .bound-cap ("↑ 4a" / "4a +1 ↓") goes to 10px rather than 11: it is an
     absolutely-positioned overlay caption on the timeline, not body text, and
     11px starts to crowd the blocks underneath it. 5.5px was indefensible;
     10px is small but legible. ------------------------------------------- */
  .kbr-surface .v4-axis,
  .kbr-surface:not(.land) .v4-axis {
    flex: 0 0 36px;
  }

  .kbr-surface .v4-axis .hr,
  .kbr-surface:not(.land) .v4-axis .hr,
  .hr {
    font-size: 11px !important;
    padding-right: 5px;
  }

  .bound-cap,
  .kbr-surface .bound-cap,
  .bound-cap.top,
  .bound-cap.bot {
    font-size: 10px !important;
  }

  .lock,
  .held-word,
  .luca-foot,
  .kbr-surface.land .luca-foot {
    font-size: 12px !important;
  }

  /* Inline emphasis and inline code inherit their parent's size in these
     views, which is how they ended up at 9.5px inside a 9.5px footer. Naming
     them explicitly keeps them level with the text they sit in. */
  .luca-foot b,
  .luca-foot code,
  .sub2-result code,
  .cap-surface .ec-table td.val .pencil,
  .ledger .code-it,
  .ledger td.body .phase,
  .ledger tr.personal-row .psub,
  .ledger tr.personal-row .excl-pill,
  .status-chip,
  .blend-chip,
  .gauge .legend .lk,
  .gauge .legend .lk .num,
  .kd-mic-hint,
  .mic-hint,
  .auth-row label,
  .doc-kicker,
  .frame-label,
  .v4-blk .bn,
  .copy-over .chip,
  .v4-blk.held.contest .bt {
    font-size: 12px !important;
  }

  /* ---- Body copy. 13px reads fine on a laptop and mean on a phone. ------- */
  .bubble {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .doc-sub {
    font-size: 15px !important;
  }

  .topbar .who {
    font-size: 15px !important;
  }
}


/* ============================================================================
   3. TOUCH TARGETS — 44px minimum, on any touch device at any width
   ---------------------------------------------------------------------------
   Keyed to pointer:coarse rather than to width, because the constraint is the
   fingertip, not the screen. A 13" touchscreen laptop needs this as much as a
   phone does; a 390px window driven by a mouse does not.

   44px is Apple's floor (HIG, Controls). Google's is 48. We take 44 and pair
   it with real padding so the label is not crushed against the edge.
   ============================================================================ */

@media (pointer: coarse) {

  button,
  .btn,
  .send,
  [role="button"],
  .chip,
  .kronos-bottom-nav button {
    min-height: 44px;
    /* A 44px-tall button with a 9px label still reads as a mistake. */
    font-size: max(12px, 1em);
  }

  /* The two most-pressed controls in the app. .approve-pair had min-height:30px
     with a 9px label, lifted to 44px by a pointer:coarse rule that set height
     alone and left the text at 9px. .day-universal had neither. */
  .approve-pair button {
    min-height: 44px;
    font-size: 13px;
    padding: 8px 16px;
  }

  .day-universal button {
    min-height: 44px;
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Icon-only controls need width as well as height, or they are a 44px-tall
     sliver a few pixels wide.

     NOT the bottom-nav icons, though. Measured at 390px: forcing 44px onto
     .nav-ico pushed the six-tab bar to 438px wide and drove the "Day" button
     off the right edge of the screen. The nav button is ALREADY the target
     there -- it is flex:1 and 56px tall, so the whole cell is tappable and the
     icon inside it does not need its own minimum. Excluded explicitly. */
  .icon-btn,
  button.icon,
  :not(.kronos-bottom-nav) > button > .nav-ico {
    min-width: 44px;
  }

  /* THE SIX-TAB BAR.
     Six labels share the screen width: Menu, Submit, Capture, Week, Calendar,
     Day. At 390px that is 65px each, and "CALENDAR" set at 12px uppercase with
     0.6px letter-spacing needs about 68 -- so on a phone the labels ran into
     their neighbours and the bar read as one smear of letters. (Pre-existing;
     it showed up the moment the screen was actually looked at rather than
     measured.)

     Fixed by fitting the label to the cell rather than by shortening anyone's
     name: 10px with no letter-spacing puts "CALENDAR" at roughly 51px inside
     57px of usable width, with overflow hidden as a backstop so a longer label
     added later clips instead of colliding.

     10px is DELIBERATELY under this file's own 11px floor, and it is the one
     exception. A tab-bar label is the case Apple's own Human Interface
     Guidelines set at 10px: three to eight uppercase characters, high
     contrast, in a fixed position the user learns once. The tap target is the
     whole 56px-tall cell, not the text. */
  .kronos-bottom-nav {
    max-width: 100%;
  }

  .kronos-bottom-nav button {
    min-width: 0;
    flex: 1 1 0;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    overflow: hidden;
    white-space: nowrap;
  }

  .kronos-bottom-nav .nav-ico {
    min-width: 0;
    flex: 0 0 auto;
  }

  /* Rows in a list are tapped like buttons even when they are not buttons. */
  .sub2-item,
  .ledger tbody tr {
    min-height: 44px;
  }

  /* Space between adjacent targets, so a near-miss hits nothing rather than
     hitting the wrong thing. */
  .approve-pair,
  .day-universal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}


/* ============================================================================
   4. INPUTS — stop iOS zooming the page on focus
   ---------------------------------------------------------------------------
   Mobile Safari zooms in when a focused input's font-size is below 16px, and
   leaves the page zoomed afterwards. The sign-in email field was the first
   thing anyone touched, so the app zoomed itself in before the user had done
   anything at all. 16px is not a style choice here; it is the threshold.
   ============================================================================ */

@media (max-width: 900px), (pointer: coarse) {

  input,
  textarea,
  select,
  .auth-row input {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Kill the inherited iOS input chrome so 16px doesn't come with a rounded
     grey pill that fights the Ledger surfaces. */
  input,
  textarea,
  select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--r, 2px);
  }
}


/* ============================================================================
   5. FILL THE GLASS — drop the design-review furniture on a phone
   ---------------------------------------------------------------------------
   .doc-kicker, .doc-sub and .frame-label are captions from the design-review
   page: they name the screen for a reviewer looking at a mockup. On the phone
   the screen IS the app, so they are explaining it to the person already
   holding it, at the cost of about a fifth of the viewport height.

   The .phone / .stage wrapper simulated a device inside a page. On a device,
   it should be the page.
   ============================================================================ */

@media (max-width: 700px) {

  .doc-kicker,
  .frame-label {
    display: none;
  }

  .stage {
    display: block;
    gap: 0;
  }

  .phone {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .device {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: calc(100vh - 72px - env(safe-area-inset-bottom, 0px));
  }

  /* Reclaim the page padding the document layout added around the mockup. */
  .kronos-tabpanel {
    padding-left: 0;
    padding-right: 0;
  }

  /* The auth gate is full-bleed already; make sure its phone frame is too. */
  .kronos-gate .phone {
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
}


/* ============================================================================
   6. NARROW PHONES — 360px and below (iPhone SE, older Androids)
   ---------------------------------------------------------------------------
   Below 360px the two-across button rows stop fitting side by side. Rather
   than let them shrink under the 44px floor, they stack.
   ============================================================================ */

@media (max-width: 360px) {

  .approve-pair,
  .day-universal {
    flex-direction: column;
    align-items: stretch;
  }

  .approve-pair button,
  .day-universal button {
    width: 100%;
  }

  /* Six tabs across 360px leaves 60px each. Drop the letter-spacing before
     dropping the label. */
  .kronos-bottom-nav button {
    font-size: 11px;
    letter-spacing: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
}


/* ============================================================================
   7. LANDSCAPE ON A PHONE
   ---------------------------------------------------------------------------
   A phone on its side has ~390px of height to work with. A fixed 72px nav plus
   a full-height device frame leaves almost nothing for content, so the nav
   stops being fixed and the frame stops demanding full height.
   ============================================================================ */

@media (max-height: 480px) and (orientation: landscape) {

  body {
    padding-bottom: 0;
  }

  .kronos-bottom-nav {
    position: static;
    box-shadow: none;
  }

  .device {
    min-height: 0;
  }
}


/* ============================================================================
   8. RESPECT THE SYSTEM SETTINGS
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   9. THE SIGN-IN CODE BOXES
   ---------------------------------------------------------------------------
   Measured on the live app at 390px: each of the six boxes rendered 238px wide
   and the row ran out to 1500px. Five of the six sat off the right of the
   screen. Nobody could have typed a code into that.

   kronos_gate.css sets `.code-row input { flex: 1 }`, which looks like it
   divides the row evenly. It does not. A flex item's default `min-width` is
   `auto`, and for an <input> that resolves to its INTRINSIC width -- about
   twenty characters, roughly 238px at this font. flex-shrink cannot take an
   item below its min-width, so every box held its full intrinsic size and the
   row overflowed by nearly four screens.

   `min-width: 0` is what lets flex-basis actually govern. It is needed at
   EVERY width, not only on phones, so this block sits outside the media query.
   The rule was already wrong before tonight; raising the input font to 16px to
   stop iOS zooming made the intrinsic width larger still, which made a broken
   thing slightly more broken without being its cause.
   ============================================================================ */

.kronos-gate .code-row {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 100%;
}

.kronos-gate .code-row input {
  /* The whole fix. Without it flex-basis is ignored and each box keeps its
     twenty-character intrinsic width. */
  min-width: 0;
  width: 0;
  flex: 1 1 0;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

@media (max-width: 900px), (pointer: coarse) {

  .kronos-gate .code-row input {
    /* 16px keeps mobile Safari from zooming the page on focus; 44px tall keeps
       it tappable. Six of these plus gaps fit inside 390px once min-width is
       released above. */
    font-size: 16px !important;
    min-height: 48px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* The gate is a full-screen sheet on a phone, not a card floating in a page. */
  .kronos-gate .phone,
  .kronos-gate .gate-view {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Give the sheet real margins so nothing is jammed against the glass. */
  .kronos-gate .gate-view {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* The email field is the first thing anyone touches. */
  .kronos-gate input[type="email"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
    min-height: 48px;
  }

  /* :not(.visually-hidden) matters. The gate carries a screen-reader-only
     submit button, hidden the standard way -- 1px square, clipped. A plain
     `.kronos-gate button { width:100% }` outranks `.visually-hidden` on
     specificity and un-hides it: measured at 390px wide, sticking 19px off the
     right edge. Hidden means hidden. */
  .kronos-gate button:not(.visually-hidden) {
    width: 100%;
    min-height: 48px;
    font-size: 15px !important;
  }
}

/* The code submit button, made visible 2026-09-08. It sits under the six
   boxes; full width on a phone like every other control in the gate. */
.kronos-gate .code-verify {
  display: block;
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}

@media (max-width: 900px), (pointer: coarse) {
  .kronos-gate .code-verify {
    min-height: 48px;
    font-size: 15px !important;
  }
}


/* ============================================================================
   8. MONITOR — the Week and Calendar grids at desk size (2026-09-11)
   ---------------------------------------------------------------------------
   This file is the one stylesheet that reaches inside the five shadow roots
   (kronos_mobile.js keeps it last in each), so the desktop side of the two
   grids lives here too. Owner's ruling: the words were too small, the hours
   too short, the header too tall; scrolling for early and late hours is
   fine. Fires only on a wide screen with a mouse; a phone is untouched.

   The hour height is ONE number per grid, set on the host and read by the
   grid's JavaScript (week_view.js readPxPerHour, bridge_view.js
   readHostPxPerHr) so blocks, axis and hour lines grow together:
       Week      88px per hour  (was 39)   -> 8a–6p track 880px
       Calendar  80px per hour  (was 42)   -> 4a–4a track 1920px, scrolls
   ============================================================================ */
@media (min-width: 901px) and (pointer: fine) {
  :host(#kronos-week-tab)   { --kwk-px-hr: 88px; }
  :host(#kronos-bridge-tab) { --kbr-px-hr: 80px; }

  /* ---- Week: header compact, grid legible ------------------------------ */
  .kwk-surface .topbar, .kwk-surface .brand-strip { display: none; }   /* the rail carries brand + LIVE */
  .kwk-surface { min-height: 0; }
  .kwk-surface .wk-head { padding: 8px 14px; }
  .kwk-surface .wk-head .wh-left h2 { font-size: 16px; }
  .kwk-surface .wk-head .range { font-size: 12px; margin-top: 4px; }
  .kwk-surface .wk-toggle .lbl { font-size: 11px; }
  .kwk-surface .lead-axis { flex-basis: 48px; }
  .kwk-surface .lead-axis .hr { font-size: 12px; padding-top: 4px; padding-right: 8px; }
  .kwk-surface .lead-axis .ah, .kwk-surface .lead-col .ch { height: 40px; }
  .kwk-surface .lead-col .ch .dow { font-size: 11px; }
  .kwk-surface .lead-col .ch .dnum { font-size: 14px; }
  .kwk-surface .lead-axis .at, .kwk-surface .lead-col .ctot { height: 28px; font-size: 13px; }
  .kwk-surface .lead-blk { padding: 5px 7px; line-height: 1.25; left: 3px; right: 3px; }
  .kwk-surface .lead-blk .bh { font-size: 13px; }
  .kwk-surface .lead-blk .bp { font-size: 12.5px; margin-top: 2px; white-space: normal; }
  .kwk-surface .lead-blk.cal .bsug { font-size: 11px; margin-top: 3px; }
  .kwk-surface .lead-legend .lk { font-size: 12px; }
  .kwk-surface .lead-legend .lk .sw { width: 14px; height: 11px; }
  .kwk-surface .kwk-ro { font-size: 12px; }
  .kwk-surface .kwk-empty { font-size: 14px; }

  /* ---- Calendar: same idea, both rails -----------------------------------
     bridge_view.css carries two layout modes, `.kbr-surface.land` (wide,
     30px/hr) and `.kbr-surface:not(.land)` (narrow, 42px/hr), whose rules
     outrank a plain `.kbr-surface .x`. Measured 2026-09-11: on a 1440px
     desktop the hour rows stayed 30px and the footer 9px. So every rule
     here names both modes. */
  .kbr-surface.land .topbar, .kbr-surface:not(.land) .topbar,
  .kbr-surface.land .brand-strip, .kbr-surface:not(.land) .brand-strip { display: none; }
  .kbr-surface.land, .kbr-surface:not(.land) { min-height: 0; height: auto; }
  .kbr-surface.land .v4-wrap, .kbr-surface:not(.land) .v4-wrap { flex: none; }
  .kbr-surface.land .v4-scroll, .kbr-surface:not(.land) .v4-scroll {
    flex: 1 1 auto; width: 100%; overflow: visible; }                    /* the pane scrolls; rails keep the width */
  .kbr-surface.land .v4-pane, .kbr-surface:not(.land) .v4-pane { flex: 1 1 0; min-width: 0; }
  /* the block title used to run under the Copy chip */
  .kbr-surface.land .v4-blk.gcal .bn, .kbr-surface:not(.land) .v4-blk.gcal .bn { padding-right: 78px; }
  .kbr-surface.land .v4-blk.gcal .bt, .kbr-surface:not(.land) .v4-blk.gcal .bt { padding-right: 24px; }
  .kbr-surface.land .v4-axis .hr, .kbr-surface:not(.land) .v4-axis .hr {
    height: var(--kbr-px-hr, 42px); font-size: 12px; padding-right: 8px; }
  .kbr-surface.land .v4-axis, .kbr-surface:not(.land) .v4-axis { flex: 0 0 52px; }
  .kbr-surface.land .kbr-daybar, .kbr-surface:not(.land) .kbr-daybar { padding: 8px 14px; }
  .kbr-surface.land .kbr-daylabel, .kbr-surface:not(.land) .kbr-daylabel { font-size: 16px; }
  .kbr-surface.land .kbr-daylabel .kbr-today, .kbr-surface:not(.land) .kbr-daylabel .kbr-today { font-size: 11px; }
  .kbr-surface.land .kbr-daynav, .kbr-surface:not(.land) .kbr-daynav { min-height: 40px; font-size: 22px; }
  .kbr-surface.land .pane-lbl, .kbr-surface:not(.land) .pane-lbl { font-size: 12px; letter-spacing: .06em; }
  .kbr-surface.land .pane-lbl .lock, .kbr-surface:not(.land) .pane-lbl .lock { font-size: 11px; }
  .kbr-surface.land .v4-pane .ph, .kbr-surface:not(.land) .v4-pane .ph { height: 34px; padding: 0 12px; }
  .kbr-surface.land .v4-blk, .kbr-surface:not(.land) .v4-blk { padding: 5px 8px; left: 4px; right: 4px; }
  .kbr-surface.land .v4-blk .bt, .kbr-surface:not(.land) .v4-blk .bt { font-size: 12px; }
  .kbr-surface.land .v4-blk .bn, .kbr-surface:not(.land) .v4-blk .bn {
    font-size: 13.5px; margin-top: 2px; line-height: 1.25; white-space: normal; }
  .kbr-surface.land .v4-blk.gcal .ro-lock, .kbr-surface:not(.land) .v4-blk.gcal .ro-lock { font-size: 11px; }
  .kbr-surface.land .v4-blk.gcal .ro-lock svg, .kbr-surface:not(.land) .v4-blk.gcal .ro-lock svg { width: 11px; height: 11px; }
  .kbr-surface.land .copy-over .chip, .kbr-surface:not(.land) .copy-over .chip { font-size: 11px; padding: 4px 8px; }
  .kbr-surface.land .copy-over .chip svg, .kbr-surface:not(.land) .copy-over .chip svg { width: 12px; height: 12px; }
  .kbr-surface.land .v4-blk.held .held-tag, .kbr-surface:not(.land) .v4-blk.held .held-tag { font-size: 11px; }
  .kbr-surface.land .drag-hint, .kbr-surface:not(.land) .drag-hint { font-size: 11px; }
  .kbr-surface.land .bound-cap, .kbr-surface:not(.land) .bound-cap { font-size: 11px; }
  .kbr-surface.land .luca-foot, .kbr-surface:not(.land) .luca-foot,
  .kbr-surface.land .kbr-empty, .kbr-surface:not(.land) .kbr-empty { font-size: 12.5px; line-height: 1.45; }
  /* the Week body must not collapse now the surface has no fixed height */
  .kwk-surface .body { flex: none; overflow: visible; }
  .kwk-surface .wk-toggle .tlbl, .kwk-surface .tlbl { font-size: 11px; }
}
}