/* roicp-nature.css v1.0.1 (2026-10-22; 1.0.1 = 44px demo-banner links) - ONE shared theme for ROICP site, STI dash, STI apps, ROICP apps.
   Chicago nature, premium + calm (feng shui: one focal point, clear path, natural palette).
   Dependency-free. No web fonts, no images, no JS. Opt-in: add class="rn" to <html> or <body>.
   Tokens are global (--rn-*); element/component styles only apply under .rn so including the file never breaks a page.
   Motion rule: nothing jiggles/sways/bobs/rotates. Hover = colour/shadow only, never transform. */
:root{
  /* palette: water (lake), wood (moss/fern), earth (oak/paper), fire (gold), metal (steel) */
  --rn-ink:#14201a; --rn-ink-2:#3a4a42; --rn-mut:#56645c;      /* text: 15.9:1 / 9.6:1 / 6.2:1 on paper */
  --rn-paper:#fbf8f1; --rn-surface:#ffffff; --rn-mist:#f1efe6; --rn-line:rgba(47,93,70,.18);
  --rn-moss:#2f5d46; --rn-moss-2:#3d7556; --rn-fern:#4f8a5b; --rn-lake:#1f6f8b; --rn-lake-2:#2a86a6;
  --rn-gold:#b8893b; --rn-gold-ink:#7a5718; --rn-oak:#8a6a46; --rn-steel:#5b6b78; --rn-night:#12302a;
  /* semantic (trading/app states; AA on white) */
  --rn-ok:#166534; --rn-ok-soft:#e5f7ec; --rn-warn:#92400e; --rn-warn-soft:#fef3e2;
  --rn-bad:#b91c1c; --rn-bad-soft:#fdecec; --rn-info:var(--rn-lake); --rn-info-soft:#e6f1f5;
  /* type: serif display (no paid fonts) + system sans; ~1.25 scale */
  --rn-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --rn-sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --rn-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rn-fs-xs:.75rem; --rn-fs-sm:.875rem; --rn-fs-md:1rem; --rn-fs-lg:1.125rem;
  --rn-fs-h3:1.25rem; --rn-fs-h2:clamp(1.5rem,2.6vw,2.2rem); --rn-fs-h1:clamp(1.9rem,4vw,3.2rem);
  --rn-lh:1.6; --rn-measure:68ch;
  /* 8px spacing scale */
  --rn-s1:4px; --rn-s2:8px; --rn-s3:16px; --rn-s4:24px; --rn-s5:32px; --rn-s6:48px; --rn-s7:64px;
  --rn-max:1180px; --rn-tap:44px;
  --rn-r-sm:8px; --rn-r-md:12px; --rn-r-lg:18px; --rn-r-xl:26px; --rn-r-pill:999px;
  --rn-sh-1:0 1px 0 rgba(255,255,255,.7) inset,0 6px 16px -10px rgba(20,32,26,.35);
  --rn-sh-2:0 1px 0 #fff inset,0 18px 36px -24px rgba(20,32,26,.45);
  --rn-sh-3:0 40px 80px -40px rgba(20,32,26,.7);
  --rn-hairline:linear-gradient(90deg,var(--rn-fern),var(--rn-lake),var(--rn-gold));
  --rn-focus:0 0 0 3px var(--rn-paper),0 0 0 6px var(--rn-lake);
  /* motion: short, calm, opacity/colour/shadow only */
  --rn-ease:cubic-bezier(.2,.7,.2,1); --rn-t-fast:120ms; --rn-t:200ms; --rn-t-slow:600ms;
}
/* ---- base (opt-in) ---- */
.rn{color-scheme:light}
.rn body,body.rn{margin:0;background:var(--rn-paper);color:var(--rn-ink);font:400 var(--rn-fs-md)/var(--rn-lh) var(--rn-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.rn h1,.rn h2,.rn h3{font-family:var(--rn-serif);font-weight:600;letter-spacing:-.01em;color:var(--rn-ink);text-shadow:none}
.rn h1{font-size:var(--rn-fs-h1);line-height:1.08}
.rn h2{font-size:var(--rn-fs-h2);line-height:1.15}
.rn h3{font-size:var(--rn-fs-h3);line-height:1.25}
.rn a{color:var(--rn-lake);text-underline-offset:3px;text-decoration-thickness:1px}
.rn a:hover{color:var(--rn-moss)}
.rn :focus-visible{outline:none;box-shadow:var(--rn-focus);border-radius:var(--rn-r-sm)}
.rn ::selection{background:rgba(79,138,91,.22)}
.rn-skip{position:absolute;left:8px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--rn-r-md);background:var(--rn-ink);color:#fff!important}
.rn-skip:focus{top:8px}
.rn-wrap{max-width:var(--rn-max);margin:0 auto;padding:0 var(--rn-s4)}
.rn-eyebrow{font:700 var(--rn-fs-xs)/1 var(--rn-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--rn-moss)}
.rn-lead{font-size:var(--rn-fs-lg);color:var(--rn-ink-2);max-width:var(--rn-measure)}
.rn-note{font-size:var(--rn-fs-sm);color:var(--rn-mut)}
.rn-rule{height:2px;width:56px;margin:14px auto 0;border:0;background:linear-gradient(90deg,transparent,var(--rn-gold),transparent)}
/* ---- nav: sticky glass bar ---- */
.rn-nav{position:sticky;top:8px;z-index:50;display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:var(--rn-max);margin:8px auto 18px;padding:10px 16px;border-radius:var(--rn-r-lg);background:rgba(251,248,241,.88);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid var(--rn-line);box-shadow:var(--rn-sh-1)}
.rn-nav .rn-brand{margin-right:auto;font:700 1.15rem/1 var(--rn-serif);color:var(--rn-ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.rn-nav .rn-brand i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fd3a8,var(--rn-moss) 70%);box-shadow:0 0 0 3px rgba(184,137,59,.25)}
.rn-nav a:not(.rn-brand):not(.rn-btn){display:inline-flex;align-items:center;min-height:var(--rn-tap);padding:0 12px;border-radius:10px;font:600 .93rem/1 var(--rn-sans);color:var(--rn-ink);text-decoration:none}
.rn-nav a:not(.rn-brand):not(.rn-btn):hover,.rn-nav a[aria-current=page]{background:rgba(79,138,91,.12)}
@media(max-width:820px){.rn-nav{position:relative;top:0}.rn-nav .rn-brand{width:100%}}
/* ---- buttons ---- */
.rn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--rn-tap);padding:0 20px;border-radius:var(--rn-r-md);border:1px solid rgba(20,32,26,.25);background:linear-gradient(180deg,var(--rn-moss-2),var(--rn-moss));color:#fff;font:650 var(--rn-fs-md)/1 var(--rn-sans);text-decoration:none;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 22px -12px rgba(47,93,70,.9);transition:box-shadow var(--rn-t) var(--rn-ease),background-color var(--rn-t) var(--rn-ease),filter var(--rn-t) var(--rn-ease)}
.rn-btn:hover{filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 28px -12px rgba(47,93,70,.95);color:#fff}
.rn-btn.alt{background:transparent;color:var(--rn-moss);border-color:rgba(47,93,70,.45);box-shadow:none}
.rn-btn.alt:hover{background:rgba(79,138,91,.08);color:var(--rn-moss)}
.rn-btn.gold{background:linear-gradient(180deg,#e6c27a,var(--rn-gold));color:var(--rn-ink)}
.rn-btn:disabled,.rn-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;filter:none}
/* ---- cards ---- */
.rn-card{position:relative;overflow:hidden;padding:var(--rn-s4);border-radius:var(--rn-r-lg);background:linear-gradient(180deg,var(--rn-surface),var(--rn-paper));border:1px solid var(--rn-line);box-shadow:var(--rn-sh-2)}
.rn-card.hl::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--rn-hairline)}
.rn-grid{display:grid;gap:var(--rn-s4);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.rn-band{padding:var(--rn-s6) var(--rn-s5);border-radius:var(--rn-r-xl);background:radial-gradient(120% 140% at 15% 0%,#3f7a5a 0%,#1f4a3a 55%,var(--rn-night) 100%);color:var(--rn-paper);box-shadow:var(--rn-sh-3)}
.rn-band h2,.rn-band h3{color:var(--rn-paper)}
.rn-band a:not(.rn-btn){color:var(--rn-paper)}
/* ---- badges (never colour-only: always carry text) ---- */
.rn-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--rn-r-pill);border:1px solid rgba(47,93,70,.25);background:rgba(79,138,91,.12);color:var(--rn-moss);font:700 .7rem/1 var(--rn-sans);letter-spacing:.12em;text-transform:uppercase}
.rn-badge.ok{background:var(--rn-ok-soft);color:var(--rn-ok);border-color:rgba(21,128,61,.3)}
.rn-badge.warn,.rn-badge.soon{background:var(--rn-warn-soft);color:var(--rn-warn);border-color:rgba(146,64,14,.3)}
.rn-badge.bad{background:var(--rn-bad-soft);color:var(--rn-bad);border-color:rgba(185,28,28,.3)}
.rn-badge.info,.rn-badge.paper{background:var(--rn-info-soft);color:var(--rn-lake);border-color:rgba(31,111,139,.3)}
/* ---- forms ---- */
.rn label{font-weight:600;font-size:.95rem;color:var(--rn-ink)}
.rn input:not([type=checkbox]):not([type=radio]):not([type=file]),.rn select,.rn textarea{width:100%;min-height:var(--rn-tap);box-sizing:border-box;font:inherit;padding:10px 12px;border-radius:var(--rn-r-md);border:1px solid rgba(20,32,26,.28);background:var(--rn-surface);color:var(--rn-ink);transition:border-color var(--rn-t) var(--rn-ease),box-shadow var(--rn-t) var(--rn-ease)}
.rn input:focus-visible,.rn select:focus-visible,.rn textarea:focus-visible{border-color:var(--rn-lake);box-shadow:0 0 0 3px rgba(31,111,139,.25)}
.rn [aria-invalid=true]{border-color:var(--rn-bad)!important}
.rn table{border-collapse:collapse;width:100%;font-size:var(--rn-fs-sm)}
.rn th{font:700 var(--rn-fs-xs)/1.2 var(--rn-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rn-mut)}
.rn th,.rn td{padding:8px 10px;border-bottom:1px solid var(--rn-line);text-align:left;vertical-align:top}
/* ---- demo mode / sample data banner (see /workspace/unify/SANDBOX_SPEC.md) ---- */
.rn-demo{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:2px 16px;background:repeating-linear-gradient(135deg,#fef3e2 0 14px,#fbecd2 14px 28px);color:var(--rn-warn);border-bottom:1px solid rgba(146,64,14,.3);font:600 var(--rn-fs-sm)/1.4 var(--rn-sans);text-align:center}
.rn-demo strong{letter-spacing:.08em;text-transform:uppercase}
.rn-demo a,.rn-demo button{display:inline-flex;align-items:center;min-height:var(--rn-tap);padding:0 8px;color:var(--rn-warn);font:inherit;text-decoration:underline;background:none;border:0;cursor:pointer}
.rn-demo a:hover,.rn-demo button:hover{color:var(--rn-ink)}
/* ---- paper grain texture (subtle, static, decorative) ---- */
.rn-grain{position:relative;isolation:isolate}
.rn-grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---- allowed motion only: .rn-drift (clouds/gulls translateX), .rn-shim (water opacity), .rn-fade (opacity in) ---- */
@keyframes rn-drift{from{transform:translateX(-6%)}to{transform:translateX(106%)}}
@keyframes rn-shim{0%,100%{opacity:.55}50%{opacity:.85}}
@keyframes rn-fade{from{opacity:0}to{opacity:1}}
.rn-drift{animation:rn-drift var(--d,90s) linear infinite}
.rn-shim{animation:rn-shim var(--d,6s) ease-in-out infinite}
.rn-fade{animation:rn-fade var(--rn-t-slow) var(--rn-ease) both}
.rn a:hover,.rn button:hover,.rn .rn-card:hover,.rn .rn-btn:hover{transform:none}
@media(prefers-reduced-motion:reduce){.rn *,.rn *::before,.rn *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.rn-wrap{padding:0 var(--rn-s3)}.rn-band{padding:var(--rn-s5) var(--rn-s4)}.rn-btn{width:100%}}
@media print{.rn-nav,.rn-demo{display:none!important}.rn-card{box-shadow:none}}