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