/* THE THINGS THAT MAKE IT AN APP AND NOT A PAGE.
   ============================================================================
   Ritu, 2026-09-12: "And to be honest, it still does not feel like an app, but
   a web page."

   He is right, and the reasons are specific rather than atmospheric. Measured
   on the six desks before this file existed: no status-bar colour, so the strip
   above the masthead was the browser's grey and not the masthead's cream. No
   safe-area handling, so nothing could run under a notch or clear a home
   indicator. Chrome's pull-to-refresh live on every page, which is a gesture no
   app has. Rubber-band overscroll showing the page's own ends. A white flash on
   every move between desks, because each desk is a fresh document. Text sizes
   jumping on rotate. A long press on the masthead offering to copy the chrome.

   Every one of those is a browser behaviour showing through. This file turns
   them off, or answers them, for the app's surfaces only. It is loaded by the
   eight app surfaces and by nothing else: the marketing pages are web pages and
   should behave like web pages.

   It deliberately holds NO colour of its own. Every value here comes from the
   sheet the surface already loads, because a colour written twice is a colour
   that drifts. */

/* ---------------------------------------------------------------------------
   1. NO PULL-TO-REFRESH, NO RUBBER BAND.
   A downward drag at the top of a native app's screen does nothing, or it
   scrolls. It does not reload the screen and it does not bounce to show the
   reader the edge of a document. `none` stops both; `contain` would keep the
   bounce. Inner scrollers that want to keep their own containment already
   declare it themselves and are not affected. */
html {
  overscroll-behavior: none;
  /* A rotated phone must not resize the type under the reader. Chrome and
     Safari both do this by default to help ordinary web pages; a tool with a
     fixed layout does not want the help. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------------
   2. NO WHITE FLASH BETWEEN DESKS.
   Each desk is its own document, so moving from one to another paints the
   browser's default white for a frame before the new page's body ground
   arrives. On the night theme that is a white strobe between two dark screens.
   The root element carries the ground, so there is nothing white to show. */
html { background: var(--paper); }

/* ---------------------------------------------------------------------------
   3. THE MOVE BETWEEN DESKS IS A TRANSITION, NOT A RELOAD.
   Cross-document view transitions need this declared in BOTH documents, which
   is why it lives in the one sheet every app surface loads rather than on the
   pages that link. Chrome on Android is the target and supports it; a browser
   that does not simply navigates the way it always did, with the flash already
   removed by the rule above. */
@view-transition { navigation: auto; }

/* ---------------------------------------------------------------------------
   4. THE CHROME IS NOT A DOCUMENT.
   A long press on a native app's title bar does nothing. In a WebView it
   offers to select and copy the masthead, and a tap leaves a grey highlight
   box behind on the control.

   SCOPED TIGHTLY AND ON PURPOSE: the masthead, the footer and the controls.
   Never the output, never an input, never the story. He has to be able to
   press and hold a rewritten paragraph and copy it, and a blanket rule on body
   is how that gets taken away without anyone noticing. */
.tool-masthead,
.door-head,
.masthead,
.tool-foot,
.foot,
.door-foot,
.place-switch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.tool-masthead a, .door-head a, .masthead a, .place-switch button,
.tool-foot a, .foot a, .door-foot a,
button, .btn {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   5. THE NOTCH AND THE HOME INDICATOR.
   With viewport-fit=cover in the viewport meta, the page runs edge to edge and
   env() reports what the hardware covers. Without these rules the masthead sits
   under the clock and the footer sits under the home bar.

   PHONE WIDTHS ONLY, AND THAT IS NOT CAUTION, IT IS A MEASURED CORRECTION. The
   first version of this rule was unscoped and it clobbered the padding it was
   supposed to add to. Measured at 1440 straight after writing it: every tool
   masthead read 4px of padding at the top against 19.8px at the bottom, because
   `padding-top: calc(var(--s-1) + env(...))` REPLACES the declared value rather
   than adding to it, and --s-1 is the phone's step, not the desktop's. A
   desktop browser has no safe area to inset for, so the rule has no business
   being there at all.

   At phone widths all three of these mastheads are measured at 4px, which is
   var(--s-1), so restating it here restates what is already true. The social
   surfaces' own rule is more specific than a bare .masthead and is matched
   rather than fought.

   On a phone with no cutout every env() resolves to zero and nothing moves,
   which is why they are safe to declare unconditionally within the breakpoint. */
@media (max-width: 699.98px) {
  .tool-masthead, .door-head, .masthead,
  .masthead:has(.suite-mark-name) {
    padding-top: calc(var(--s-1) + env(safe-area-inset-top, 0px));
  }
  .tool-foot, .foot, .door-foot {
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  }
  /* The side insets go on the scrolling root rather than on body, which
     carries designed padding of its own on several of these surfaces. In
     portrait, which is the only orientation the manifest allows, both of these
     are zero. */
  html {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ---------------------------------------------------------------------------
   6. A READER WHO ASKED FOR NO MOTION GETS NO TRANSITION.
   The flash-free ground above stays: it is a colour, not a movement. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}