/* ============================================================
   URTH — LOCKED THEME (single source of truth for every page/app)
   Mirrors Design/urth-theme.css + urth-design-tokens.json.
   RULE: every URTH page must <link> this file and use the --u- tokens.
   Never hardcode hex. Change a value HERE and it updates everywhere.
   Palette: beige page + cream cards, ONE green (#2F5F48 / #1D4331),
   gold accent (#CDA24A), text is green, no white, no black, no ALL-CAPS.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Mada:wght@300;400;500;600&display=swap');

:root{
  --u-beige:#F5F0E7;        /* page background (default surface) */
  --u-cream:#FFFDF7;        /* raised cards / panels / fields */
  --u-green:#2F5F48;        /* primary brand green */
  --u-green-deep:#1D4331;   /* deep green: headers, hovers, strong text */
  --u-text:#2F5F48;         /* body text = green */
  --u-text-strong:#1D4331;  /* headings */
  --u-on-green:#FFFDF7;     /* text on green = cream (never white) */
  --u-line:#E2D9C8;         /* hairline borders */
  --u-gold:#CDA24A;         /* the poppy accent — active states, highlights */
  --u-head:'Fraunces',Georgia,serif;
  --u-body:'Mada',system-ui,-apple-system,Arial,sans-serif;
  --u-r-sm:8px; --u-r-md:12px; --u-r-lg:18px; --u-pill:999px;
  --u-shadow:0 2px 10px rgba(29,67,49,.08);
}

/* base */
.u-body{margin:0;background:var(--u-green);color:var(--u-on-green);font-family:var(--u-body);line-height:1.6}
.u-head{font-family:var(--u-head);color:var(--u-text-strong);font-weight:600;text-transform:none;line-height:1.15}
.u-eyebrow{font-family:var(--u-head);font-style:italic;color:var(--u-green);font-size:15px}

/* green band (header / hero / footer) — text on it is cream */
.u-band{background:var(--u-green-deep);color:var(--u-on-green)}
.u-band .u-head{color:var(--u-on-green)}

/* card / panel */
.u-card{background:var(--u-cream);border:1px solid var(--u-line);border-radius:var(--u-r-lg);box-shadow:var(--u-shadow)}

/* buttons */
.u-btn{display:inline-block;font-family:var(--u-body);font-weight:600;background:var(--u-green);color:var(--u-on-green);padding:13px 26px;border:none;border-radius:var(--u-pill);text-decoration:none;cursor:pointer;transition:.15s}
.u-btn:hover{background:var(--u-green-deep)}
.u-btn-outline{display:inline-block;font-family:var(--u-body);font-weight:600;background:transparent;color:var(--u-green);padding:12px 25px;border:1.5px solid var(--u-green);border-radius:var(--u-pill);text-decoration:none;cursor:pointer}

/* fields */
.u-label{color:var(--u-green);font-size:13px;font-weight:500}
.u-input{background:var(--u-cream);border:1px solid var(--u-line);border-radius:var(--u-r-sm);padding:11px 13px;font-family:var(--u-body);color:var(--u-text);width:100%}

.u-rule{border:none;border-top:1px solid var(--u-line)}
.u-chip{display:inline-block;background:var(--u-beige);border:1px solid var(--u-line);color:var(--u-green);border-radius:var(--u-pill);padding:3px 11px;font-size:12px;font-weight:600}

/* ============================================================
   STANDARD TOP BAR — identical on every page. One home button.
   Markup:
   <header class="u-topbar">
     <a class="u-topbar-logo" href="index.html"><img src="logo-cream.png" alt="URTH"></a>
     <span class="u-topbar-title">Page name</span>
     <a class="u-home" href="index.html" aria-label="Apps home" title="Apps home"><img src="icons/apps-cream.png" alt="Apps"></a>
   </header>
   ============================================================ */
.u-topbar{position:sticky;top:0;z-index:100;background:var(--u-green);color:var(--u-on-green);height:54px;display:flex;align-items:center;gap:12px;padding:0 14px;box-sizing:border-box}
.u-topbar-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.u-topbar-logo img{height:29px;width:auto;display:block}
.u-topbar-title{flex:1;text-align:center;font-family:var(--u-head);font-weight:600;font-size:16px;color:var(--u-on-green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.u-back{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--u-on-green);text-decoration:none;font-size:23px;line-height:1;margin-right:2px;cursor:pointer}
.u-back:active{opacity:.55}
.u-share{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--u-on-green);text-decoration:none;font-size:19px;line-height:1;cursor:pointer}
.u-share:active{opacity:.55}
.u-home{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;text-decoration:none;cursor:pointer}
.u-home img{width:26px;height:26px;display:block}
.u-home:active{opacity:.6}

/* ============================================================
   APP SWITCHER — apps icon opens this overlay (jump to any app
   without leaving the page). Built/!wired by apps.js.
   ============================================================ */
/* mini app switcher — compact icon menu anchored under the apps icon */
.u-apps-ov{position:fixed;inset:0;z-index:200;background:rgba(29,67,49,.22);display:none}
.u-apps-ov.on{display:block}
.u-apps-panel{position:absolute;top:56px;right:10px;width:252px;background:var(--u-cream);border:1px solid var(--u-line);border-top:3px solid var(--u-gold);border-radius:14px;box-shadow:0 14px 42px rgba(29,67,49,.32);padding:10px}
.u-apps-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.u-apps-item{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;border-radius:11px;padding:11px 4px;transition:.12s ease}
.u-apps-item:hover{background:var(--u-beige)}
.u-apps-item img{width:27px;height:27px;display:block}
.u-apps-item .ti{font-family:var(--u-body);font-weight:600;color:var(--u-text-strong);font-size:10px;line-height:1.15;text-align:center}
.u-apps-item .de{display:none}

/* --- SPRINT2: floating nav for pages without a .u-topbar + home-to-registry button --- */
.u-nav-home{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--u-on-green);text-decoration:none;font-size:19px;line-height:1;cursor:pointer}
.u-nav-home:active{opacity:.55}
.u-fab{position:fixed;top:10px;right:10px;z-index:150;display:flex;gap:7px}
.u-fab a{width:39px;height:39px;border-radius:50%;background:var(--u-green);color:var(--u-on-green);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;line-height:1;box-shadow:0 3px 12px rgba(29,67,49,.32);border:1px solid rgba(255,253,247,.18)}
.u-fab a:active{opacity:.7}

/* ============================================================
   SPRINT3 — standardized top bar (built by apps.js) + brand fonts everywhere
   Layout: [ back  home ]   ·   [ logo -> marketing, centered ]   ·   [ app switcher ]
   ============================================================ */
h1,h2,h3,h4,h5,h6{font-family:var(--u-head)}
.u-topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
.u-bar-left{display:flex;align-items:center;gap:2px;justify-self:start}
.u-bar-right{display:flex;align-items:center;gap:2px;justify-self:end}
.u-bar-center{justify-self:center;display:flex;align-items:center}
.u-bar-center img{height:30px;width:auto;display:block}
.u-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--u-on-green);text-decoration:none;cursor:pointer;border-radius:9px}
.u-icon:hover{background:rgba(255,253,247,.10)}
.u-icon:active{opacity:.6}
.u-icon svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;background:none!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;border-radius:0}
.u-topbar-title{display:none}   /* the centered logo replaces the typed page name */
/* floating nav (pages without a top bar) — SVG icons, not glyphs */
.u-fab a svg{width:20px;height:20px;stroke:currentColor;fill:none;background:none!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* inline icon (replaces emoji glyphs) — inherits text color via currentColor */
.i{width:1em;height:1em;vertical-align:-.14em;display:inline-block;fill:none;stroke:currentColor;background:none!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   SPRINT4 — palette + one button system + contrast safety
   ============================================================ */
:root{
  --u-blue:#7FA8C9; --u-yellow:#E6C670; --u-softgreen:#6BA88A; --u-coral:#C97A6D; --u-teal:#5B9AA8;
  --u-ink:#1D4331;           /* body/label text on cream — always high contrast */
  --u-mut:#4A5A4E;           /* muted text — darkened so it's never faint on cream */
}
/* one button component, one color per action type (dark text on pastels for contrast) */
.ubtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--u-body);font-weight:600;font-size:13.5px;padding:9px 16px;border:none;border-radius:var(--u-pill);text-decoration:none;cursor:pointer;transition:.14s;line-height:1.12;white-space:nowrap}
.ubtn:hover{filter:brightness(.96)}
.ubtn-green{background:var(--u-green);color:#FFFDF7}
.ubtn-gold{background:var(--u-gold);color:var(--u-green-deep)}
.ubtn-blue{background:var(--u-blue);color:#0f2c3b}
.ubtn-yellow{background:var(--u-yellow);color:#4a3a10}
.ubtn-softgreen{background:var(--u-softgreen);color:#0e2c20}
.ubtn-coral{background:var(--u-coral);color:#3a120c}
/* shared property action bar — same buttons everywhere a property/pin appears (additive standard) */
.uactbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.uactbar .uact{display:inline-flex;align-items:center;gap:5px;text-decoration:none;border-radius:var(--u-pill);padding:9px 15px;font-family:var(--u-body);font-size:13px;font-weight:700;line-height:1;white-space:nowrap}
.uactbar .uact-dir{background:#4C6EA8;color:#fff}
.uactbar .uact-call{background:var(--u-green);color:var(--u-on-green)}
.uactbar .uact-rep{background:var(--u-gold);color:var(--u-green-deep)}
.uactbar .uact-reg{background:#4E8C8A;color:#fff}
.uactbar .uact-file,.uactbar .uact-design{background:var(--u-beige);color:var(--u-green-deep);border:1px solid var(--u-line)}
.ubtn-teal{background:var(--u-teal);color:#0b2d34}
.ubtn-ghost{background:transparent;color:var(--u-green);border:1.5px solid var(--u-green)}
.ubtn.off,.ubtn[disabled]{background:var(--u-beige);color:#9aa89b;cursor:default;pointer-events:none}
.ubtn .i{width:1em;height:1em}
/* contrast safety — muted text INSIDE cream cards is always dark enough to read */
.u-card .hint,.u-card .sub,.u-card .d,.u-card .muted{color:var(--u-mut)}

/* ============================================================
   SPRINT5 — COHERENCE LAYER (2026-08-06, URTH-FRONT-002)
   One hand across the tool pages. Append-only: every rule below is
   additive, so deleting this block restores the previous look exactly.
   Reaches every page that links theme.css — no page internals touched.
   Aligns the legacy --u-* surface with the Design System (design/tokens.css):
   forest/cream/gold, Fraunces + Mada, 44px touch, gold focus.
   ============================================================ */

/* 1 · TOUCH TARGETS — the Design System's 44px law.
   .ubtn rendered ~35px tall (9px padding + 13.5px/1.12 text): fine with a
   mouse, thumb-hostile in the field, which is where these pages get used. */
.ubtn,.uactbar .uact,.u-btn,.u-btn-outline{min-height:44px;box-sizing:border-box}
.ubtn,.uactbar .uact{padding-top:0;padding-bottom:0}
.u-icon,.u-home,.u-back,.u-share,.u-nav-home{min-width:44px;min-height:44px}
.u-apps-item{min-height:44px}

/* 2 · FOCUS — there was NO visible focus state anywhere on the legacy pages.
   Keyboard and switch users got no signal at all. Gold ring, matching the DS. */
.ubtn:focus-visible,.u-btn:focus-visible,.u-btn-outline:focus-visible,
.uactbar .uact:focus-visible,.u-icon:focus-visible,.u-home:focus-visible,
.u-apps-item:focus-visible,.u-input:focus-visible,a:focus-visible,button:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(205,162,74,.55);border-radius:var(--u-r-sm)}
.u-input:focus-visible{border-color:var(--u-gold)}

/* 3 · SURFACE RADIUS — legacy cards sat at 18px while every new page (home,
   today, properties, procurement, the blueprint) uses the DS 12px. Side by
   side they read as two different products; one value fixes it. */
.u-card{border-radius:var(--u-r-md)}

/* 4 · TAP FEEL — kill the grey flash on iOS so taps feel like the app's own. */
a,button,.ubtn,.uact,.u-icon,.u-home,.u-apps-item{-webkit-tap-highlight-color:rgba(205,162,74,.18)}

/* 5 · MOTION — respect the system setting; several tools animate heavily. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* 6 · TYPE — headings already use Fraunces (SPRINT3). This pins the display
   face on the two elements that kept slipping to the browser default. */
.u-topbar-title,.u-eyebrow{font-family:var(--u-head)}

/* ============================================================
   CLIENT GATE — nothing staff-only survives into a shared link.
   ?view=client (or ?internal=0) puts `client-view` on <body>.

   The report's tab bar is a staff instrument end to end: Combined CAD,
   Photos, Measure, Canopy, Drainage, Sun, Plan — and "Show the client",
   which is the staff's own preview switch. The page hid the seven tabs
   one by one with inline display:none but left the toggle standing, so a
   client opening the link met a single stray button offering to "show the
   client". That is the leak this closes.

   The BAR is hidden rather than the one button, because with every tab
   already hidden the bar would otherwise sit there as an empty strip.
   Scoped to body.client-view — the normal staff view is untouched.
   ============================================================ */
body.client-view #tabbar{display:none!important}
