/* ============================================================
   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)}