/* ============================================================
   URTH — LAYOUT (one responsive system for every page)

   WHY THIS FILE EXISTS
   Every page in the hub sized itself by hand. index.html, the page the
   installed app actually opens, capped its whole content at 580px and had no
   grid at all: on a laptop or a TV it was one narrow column of cards in a sea
   of green. home.html did have a grid but capped at 960px, so a 1920-wide
   screen used half its width. Across the 76 served pages there were 30
   different hand-picked max-width values and 25 different
   grid-template-columns declarations.

   WHAT THIS FILE DOES
   It holds the WIDTHS and the GRIDS for the whole hub in one place, as tokens.
   Pages stopped naming a number and now name a token, so every page widens and
   every card grid re-columns together, from one file.

       max-width:var(--u-w-read)   a page of text, a form, a document
       max-width:var(--u-w-page)   a report: text with panels beside it
       max-width:var(--u-w-wide)   a board or a wall of cards
       max-width:var(--u-w-form)   one narrow, single-purpose card

   And the card grid:

       display:grid;
       grid-template-columns:repeat(auto-fill,minmax(var(--u-card-min),1fr));
       gap:var(--u-gap);

   HOW MANY CARDS ACROSS. Measured in a real browser on a page that uses only the
   container and the grid below, at sixteen widths. The run is recorded in
   deliverables/20260922/layout/checks.json, outside this repository.
       360  small phone   1
       390  phone         1
       768  tablet        2
       1024 small laptop  3
       1440 laptop        4
       1600 desktop       5
       1920 large display 6
       2200 TV            5   <- past 2200px the cards and the type step UP for
       2560 TV wall       6      10-foot viewing, so the cards get bigger rather
       3840 wall          7      than more numerous. The 5 is honest but narrow:
                                 it holds only between 2200 and about 2290px, and
                                 no real display sits in that band. From 2300 up
                                 it is 6 again.

   ALAN'S RULES, KEPT
   - One background tone per page. This file sets no page background, no second
     green and no gold left edge. It declares exactly one colour value, and only
     for the focus ring: rgba(205,162,74,.85), the existing gold accent, drawn as
     an outline. Everything else here is widths, spacing, grids and touch.
   - No gold left-edge highlight anywhere.
   - One spacing scale and one type scale, both from the existing tokens.

   LOAD ORDER
   Linked last in <head>, after the page's own <style>, so the guards below
   (safe areas, focus rings, touch targets, overflow) win. The widths do not
   need to win anything: the pages ask for the token by name.

   WHO LINKS IT
   75 of the 76 top-level pages, plus two documents served from files/.
   brain.html is the one that does not, on purpose: it belongs to the 3D
   session's open PRs #5-#7 and is not this lane's to edit.

   ROLLBACK
   Delete the <link> from the pages and restore the literal pixel values that
   the same commit replaced. Nothing else in this file changes behaviour.
   ============================================================ */

/* ------------------------------------------------------------
   1 · THE SCALE
   Four container widths and one card width, re-declared at each size of
   screen. Everything else in the hub follows from these.
   ------------------------------------------------------------ */
:root{
  /* page gutter — the space between content and the edge of the glass */
  --u-gut:16px;
  --u-gap:12px;

  /* container widths */
  --u-w-form:560px;    /* one narrow card: a login, a single form, a receipt */
  --u-w-read:760px;    /* prose and forms: a comfortable line length */
  --u-w-page:1080px;   /* a report: text plus panels */
  --u-w-wide:1440px;   /* boards and card walls: as wide as is still readable */

  /* the card grid */
  --u-card-min:260px;

  /* 10-foot scaling hooks — 1 everywhere except a very large screen */
  --u-tv-touch:44px;
}

/* tablet */
@media (min-width:600px){
  :root{ --u-gut:20px; --u-gap:14px; }
}

/* laptop — the first size where a card wall makes sense */
@media (min-width:1024px){
  :root{
    --u-gut:24px; --u-gap:16px;
    --u-w-read:820px; --u-w-page:1240px; --u-w-wide:1680px;
    --u-card-min:300px;
  }
}

/* large desktop */
@media (min-width:1600px){
  :root{
    --u-w-read:880px; --u-w-page:1400px; --u-w-wide:2000px;
    --u-card-min:280px;
  }
}

/* TV and 10-foot viewing.
   A 2560 or 3840 screen is not a bigger laptop — it is the same picture seen
   from across a room. So the cards get BIGGER, not more numerous, the type
   goes up, and every target grows past the 44px thumb rule to a 56px
   across-the-room rule. */
@media (min-width:2200px){
  :root{
    --u-gut:32px; --u-gap:20px;
    --u-w-read:1000px; --u-w-page:1600px; --u-w-wide:2560px;
    --u-card-min:360px;
    --u-tv-touch:56px;

    /* design-system type scale, one step up */
    --urth-fs-display:38px; --urth-fs-h1:29px; --urth-fs-h2:23px; --urth-fs-h3:20px;
    --urth-fs-body:19px;    --urth-fs-small:17px; --urth-fs-micro:15px;
    --urth-touch-min:56px;
    --urth-s-1:5px; --urth-s-2:10px; --urth-s-3:15px; --urth-s-4:20px;
    --urth-s-5:26px; --urth-s-6:31px; --urth-s-8:41px; --urth-s-10:52px; --urth-s-12:62px;
  }
}
@media (min-width:3200px){
  :root{
    --u-w-read:1180px; --u-w-page:2000px; --u-w-wide:3400px;
    --u-card-min:440px; --u-tv-touch:64px;
    --urth-fs-display:48px; --urth-fs-h1:36px; --urth-fs-h2:29px; --urth-fs-h3:25px;
    --urth-fs-body:24px;    --urth-fs-small:21px; --urth-fs-micro:18px;
    --urth-touch-min:64px;
  }
}

/* ------------------------------------------------------------
   2 · THE CONTAINERS AND THE GRID, as classes
   Pages that had no container of their own can use these directly.
   ------------------------------------------------------------ */
.u-wrap,.u-wrap-read,.u-wrap-page,.u-wrap-wide,.u-wrap-form{
  width:100%;
  margin-left:auto;margin-right:auto;
  box-sizing:border-box;
  padding-left:var(--u-gut);
  padding-right:var(--u-gut);
}
.u-wrap-form{max-width:calc(var(--u-w-form) + var(--u-gut) * 2)}
.u-wrap-read,.u-wrap{max-width:calc(var(--u-w-read) + var(--u-gut) * 2)}
.u-wrap-page{max-width:calc(var(--u-w-page) + var(--u-gut) * 2)}
.u-wrap-wide{max-width:calc(var(--u-w-wide) + var(--u-gut) * 2)}

/* the one card grid */
.u-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--u-card-min),1fr));
  gap:var(--u-gap);
}
/* a denser variant for small tiles (icons, chips, thumbnails) */
.u-cards-sm{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(calc(var(--u-card-min) * .62),1fr));
  gap:var(--u-gap);
}
/* grid and flex children must be allowed to shrink, or long words and wide
   tables push the whole page sideways */
.u-cards > *,.u-cards-sm > *{min-width:0}

/* ------------------------------------------------------------
   3 · SAFE AREAS — the notch, the rounded corners, the home indicator
   env() only reports real numbers when the viewport meta says
   viewport-fit=cover, which the same commit added to every page.
   ------------------------------------------------------------ */
@supports (padding:max(0px)){
  /* The inset goes on <html>, NOT on <body>. Three pages set their own body
     padding — card.html 20px, rev.html 22px, handoff.html 48px at the bottom —
     and longhands here would beat their shorthand and zero it, which measured as
     the client card running edge to edge with its shadow clipped. No page in the
     hub styles html's padding, so this compensates for the notch without taking
     anything away. It also keeps full-bleed green bands reaching the glass. */
  html{
    box-sizing:border-box;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* There is deliberately NO generic body padding-top here. The first attempt at
     one had exactly the fault this file already fixed on the other three edges:
     a longhand padding-top beats a page's own `padding:20px` shorthand and
     silently zeroes its top inset. Measured: card.html went from 20px above the
     client card to 0. Pages whose own header sits at the top of the document are
     given the inset ON THAT HEADER, by name, below in section 3b. */
  /* the sticky top bar has to grow UNDER the notch, not start below it */
  .u-topbar{
    height:auto;
    min-height:calc(54px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  /* box-sizing matters here: .ds-topbar is content-box in design/urth-ds.css and
     those pages load no universal reset, so without this the notch is counted
     twice and the header measured 155px of an 844px phone. */
  .ds-topbar{
    box-sizing:border-box;
    min-height:calc(60px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  /* the floating escape nav must clear the notch and the rounded corner */
  .u-fab{
    top:calc(10px + env(safe-area-inset-top));
    right:calc(10px + env(safe-area-inset-right));
  }
  /* the app-switcher panel hangs off the top bar, so it moves with it */
  .u-apps-panel{
    top:calc(56px + env(safe-area-inset-top));
    right:calc(10px + env(safe-area-inset-right));
    max-height:calc(100vh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  /* anything pinned to the bottom clears the home indicator */
  .u-safe-b{padding-bottom:calc(var(--u-gut) + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------
   3b · THE PAGES WHOSE OWN HEADER SITS AT THE TOP OF THE DOCUMENT
   viewport-fit=cover moves the origin to the top of the glass, so a page that
   draws its own header at y=0 and has none of the shared bars now starts under
   the status bar. Each of these is named rather than caught by a blanket rule,
   because a blanket rule on body would wipe the padding the page already has.
   Measured at 390px with a 47px inset: without these, plan.html's only title and
   ingest.html's property address sit entirely behind the clock, and the crumb row
   that carries the escape link on the four design-system documents loses its top
   15px.
   ------------------------------------------------------------ */
@supports (padding:max(0px)){
  .u-topinset{padding-top:env(safe-area-inset-top,0px)}
}

/* ------------------------------------------------------------
   4 · NO SIDEWAYS SCROLL, EVER
   A phone that scrolls sideways feels broken, and on the installed app there
   is no address bar to tell you that you have drifted off the page.
   ------------------------------------------------------------ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* NOT canvas: a canvas is a tool's own drawing surface, and capping it upscaled
   the sun map and squashed the 3-D view. Tools size their own canvas. */
img,svg,video,iframe,embed,object{max-width:100%}
/* wide things scroll inside their own box instead of dragging the page.
   A table is the awkward case: overflow does not apply to display:table, so on a
   narrow screen the table becomes a block that CAN scroll. Its rows and cells
   still lay out as a table inside that block, so nothing about the table breaks.
   Measured: wiring-map.html dragged the whole page 8px sideways at 390px before
   this, because .ds-table is width:100% with a column that will not shrink. */
pre,.u-scroll-x{max-width:100%;overflow-x:auto}
table{max-width:100%}
@media (max-width:700px){
  /* Scoped to the design-system table. A bare width:100% table becomes
     shrink-to-fit the moment it is display:block, which cut the right-hand
     columns off tables that were fitting perfectly well. .ds-table is the one
     that actually overflowed (wiring-map at 390px), and it sets its own width. */
  .ds-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
}
/* a long unbroken URL or folio number is the usual culprit */
/* break-word, not anywhere: "anywhere" splits ordinary words at any letter the
   moment a line is tight, which turned a narrow table cell into a column of
   single characters. break-word only breaks a word that cannot fit on a line of
   its own, which is the case this is for: a long URL or a folio number.
   .u-break keeps the harder rule for the places that really need it. */
td,th,p,li,dd{overflow-wrap:break-word}
.u-break{overflow-wrap:anywhere}

/* A LINE OF TEXT HAS A COMFORTABLE LENGTH, whatever its container is doing.
   Several documents were retargeted onto the page or the wide token, which is
   right for their panels and wrong for their paragraphs: measured at 1920 they
   ran 156 to 276 characters a line, where comfortable is 45 to 90. A container
   can be as wide as the screen; a paragraph inside it cannot. This caps only
   what is already wider than the reading measure, so nothing narrower moves. */
p,li,dd,blockquote{max-width:var(--u-w-read)}

/* ------------------------------------------------------------
   5 · TOUCH AND FOCUS
   theme.css already carries the 44px rule and the gold focus ring for its own
   components. 44 of the 76 pages link theme.css and 9 link the design system;
   23 linked neither, so those had no touch rule and no focus ring at all. The
   rules below repeat both, so they reach every page.
   ------------------------------------------------------------ */
button,select,summary,
input[type=button],input[type=submit],input[type=reset],
.ds-btn,.ds-row,.ds-side-link,.ds-input,.ds-select,.ds-textarea{
  min-height:var(--u-tv-touch);
  box-sizing:border-box;
}
.ds-bottombar a{min-height:var(--u-tv-touch)}

/* controls that measured under 44px on the live pages, fixed here once.
   Measured at 390px on 22 Sep before this change:
     the centred logo link in the standard top bar   45 x 30
     a bare checkbox on today.html                   20 x 20
   An inline link inside a sentence ("open the registry") is NOT made 44px:
   growing it would break the line of text. Those stay as they are, and the
   decision is on the record in deliverables/20260922/layout/RESULT.md, outside
   this repository. */
.u-bar-center{min-height:var(--u-tv-touch)}
.u-bar-center a{display:flex;align-items:center;min-height:var(--u-tv-touch)}
input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}
/* the row that wraps a checkbox is the real target, so the row gets the 44px,
   not the box. No display change: today.html already lays its row out as a flex
   row and forcing inline-flex here would shrink it to its contents. */
label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:var(--u-tv-touch)}

/* ESCAPE LINKS. Navigation v2 (22 Sep) gave every page a visible way out, and
   its own report flagged that on some pages that way out is "only a tiny text
   link". A 12px text link is about 18px tall: it is a way out you cannot hit.
   This is the shared shape for one, at the thumb minimum, without changing what
   it says or where it goes. Applied by name on the pages that had the small
   version, never blanket-applied to every home link, because the front-door
   tiles are also links home and they are already large. */
.u-escape{display:inline-flex;align-items:center;gap:6px;min-height:var(--u-tv-touch);
  padding:0 10px;border-radius:10px;text-decoration:none}

/* The escape controls that already exist on the pages, measured at 390px in the
   installed-app display mode and found under the thumb minimum:
     #u-wayhome, the fixed "Urth apps" pill the navigation repair added   31px tall
     .u-topbar-logo, the logo link in the standard top bar                29px tall
     .u-fab a, the floating nav buttons                                   41px
   #u-wayhome carries an inline style, so its position needs !important to gain the
   safe-area inset. This file uses !important six times in all: here, four times in
   the reduced-motion block and once in the print block. This is the only one that
   exists to beat a page; the other five beat nothing and are the conventional form
   of those two rules. */
#u-wayhome{min-height:var(--u-tv-touch);display:inline-flex;align-items:center;
  top:calc(10px + env(safe-area-inset-top,0px))!important;
  right:calc(10px + env(safe-area-inset-right,0px))!important}
.u-topbar-logo{min-height:var(--u-tv-touch)}
.u-fab a{width:var(--u-tv-touch);height:var(--u-tv-touch)}
a.logo[href="home.html"]{min-height:var(--u-tv-touch);display:inline-flex;align-items:center}

/* a visible focus ring on every page, including the 28 without theme.css.
   Gold, because that is the existing accent — and a ring, never a left edge. */
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,
.ds-btn:focus-visible,.ds-row:focus-visible,.ds-side-link:focus-visible{
  outline:3px solid rgba(205,162,74,.85);
  outline-offset:2px;
}

/* Nothing may depend on hover: a remote control and a Tab key must reach the
   same affordance a mouse does. The ring above already does that on every
   element. An earlier version of this rule also painted a gold background, which
   turned the front-door tiles into dark-on-gold and was a colour this file has no
   business setting. The ring alone is the affordance. */

/* ------------------------------------------------------------
   6 · THE DESIGN-SYSTEM SHELL, made fluid
   .ds-content was pinned at 1080px inside design/urth-ds.css, which is why
   properties, today, new-lead and procurement used 1080 of a 2560 screen.
   It now follows the page token like everything else.
   ------------------------------------------------------------ */
.ds-content{max-width:var(--u-w-page)}
/* page-spec.js appends .uspec into whatever container it finds at runtime. Where
   that container has since become a card grid, the panel became one stray card in
   the row. It always spans. */
.uspec{grid-column:1/-1}
/* a page that is a wall of cards or rows asks for the wide token instead */
.ds-content.ds-content--wide{max-width:var(--u-w-wide)}
/* a page that is only prose asks for the reading token */
.ds-content.ds-content--read{max-width:var(--u-w-read)}

/* the sidebar grows with the screen rather than staying a 232px sliver */
@media (min-width:1600px){ .ds-shell{grid-template-columns:264px 1fr} }
@media (min-width:2200px){ .ds-shell{grid-template-columns:320px 1fr} }

/* ------------------------------------------------------------
   7 · 10-FOOT VIEWING
   The shared chrome is sized in hard pixels inside theme.css. On a TV those
   pixels are too small to read from a sofa, so they are restated here, once,
   at TV widths. Page-local text that hard-codes its own pixel size does NOT
   follow, and most of the hub's text does exactly that: the step-up reaches
   about a sixth of the pages. That limit is recorded in
   deliverables/20260922/layout/RESULT.md, outside this repository.
   ------------------------------------------------------------ */
@media (min-width:2200px){
  .u-body,.ds-workspace,.ds-document{font-size:19px;line-height:1.6}
  .u-topbar{min-height:calc(74px + env(safe-area-inset-top))}
  .u-topbar-logo img{height:38px}
  .u-bar-center img{height:40px}
  .u-icon{width:var(--u-tv-touch);height:var(--u-tv-touch)}
  .u-icon svg{width:30px;height:30px}
  .u-home img{width:34px;height:34px}
  .u-fab a{width:56px;height:56px}
  .u-fab a svg{width:28px;height:28px}
  .u-apps-panel{width:380px;padding:14px}
  .u-apps-item img{width:36px;height:36px}
  .u-apps-item .ti{font-size:14px}
  .ubtn{font-size:18px;padding-left:24px;padding-right:24px}
  .uactbar .uact{font-size:17px}
  .u-chip,.ds-chip{font-size:15px;padding:5px 15px}
  a.tile .t{font-size:22px}
  a.tile .d{font-size:16px}
  a.tile .ico,a.tile .ico img,a.tile .ico svg{width:38px;height:38px}
  .u-input{font-size:19px;padding:15px 17px}
}
@media (min-width:3200px){
  .u-body,.ds-workspace,.ds-document{font-size:24px}
  .u-topbar{min-height:calc(92px + env(safe-area-inset-top))}
  .u-topbar-logo img{height:48px}
  .u-bar-center img{height:50px}
  .u-icon svg{width:38px;height:38px}
  a.tile .t{font-size:28px}
  a.tile .d{font-size:20px}
  a.tile .ico,a.tile .ico img,a.tile .ico svg{width:48px;height:48px}
}

/* ------------------------------------------------------------
   8 · MOTION
   theme.css honours prefers-reduced-motion; the 23 pages that link neither
   shared stylesheet did not.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ------------------------------------------------------------
   9 · PRINT
   A report printed from a 2560 screen should not print at 2560.
   ------------------------------------------------------------ */
@media print{
  :root{--u-w-read:100%;--u-w-page:100%;--u-w-wide:100%;--u-w-form:100%;--u-gut:0px}
  .u-fab,.u-apps-ov,.u-topbar,.ds-topbar,.ds-sidebar,.ds-bottombar{display:none!important}
}