/* Roam kit — the site's shared look.
 *
 * Tokens are prefixed --rk- so they never collide with a tool's own styles.
 * Page styling only applies under <html class="rk">; tools that haven't adopted
 * the kit just get the Roam panel and are otherwise left exactly as they are.
 *
 * Looks are set by roam-kit.js as attributes on <html>:
 *   data-rk-theme   night | dusk | daylight | contrast
 *   data-rk-accent  sky | gold | violet | moss
 *   data-rk-shape   cut | round | square
 *   data-rk-texture on | off
 *   data-rk-size    std | large
 *   data-rk-motion  full | reduced
 */

/* ---------- type, served from this site ---------- */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-hyperlegible-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Mono';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/atkinson-hyperlegible-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens: Roam's own palette ---------- */
:root{
  --rk-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --rk-body:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rk-mono:'Atkinson Hyperlegible Mono',ui-monospace,Menlo,Consolas,monospace;

  /* night — the Roam you already know */
  --rk-bg:#08090e; --rk-panel:#101219; --rk-panel2:#161922; --rk-rail:#222634;
  --rk-txt:#e8eaf2; --rk-dim:#8b93a5; --rk-faint:#5a6274;
  --rk-sky:#7dd3fc; --rk-gold:#d4af37; --rk-violet:#c4b5fd; --rk-moss:#86efac;
  --rk-ok:#86efac; --rk-warn:#d4af37; --rk-bad:#fca5a5;
  --rk-acc:var(--rk-sky); --rk-acc-ink:#061018;
  --rk-texture:.13;

  --rk-cut:12px; --rk-radius:0px;
  --rk-ease:cubic-bezier(.2,.8,.2,1);
  --rk-t:.18s;
}
html[data-rk-theme="dusk"]{
  --rk-bg:#0c0a15; --rk-panel:#141024; --rk-panel2:#1b162f; --rk-rail:#2d2647;
  --rk-txt:#eee9f8; --rk-dim:#9d95b5; --rk-faint:#675f85; --rk-texture:.15;
}
html[data-rk-theme="daylight"]{
  --rk-bg:#e9ebe6; --rk-panel:#f7f7f4; --rk-panel2:#ffffff; --rk-rail:#c7cbc2;
  --rk-txt:#15171b; --rk-dim:#4f555e; --rk-faint:#767c85;
  --rk-sky:#0369a1; --rk-gold:#8a6a0e; --rk-violet:#6d28d9; --rk-moss:#15803d;
  --rk-ok:#15803d; --rk-warn:#8a6a0e; --rk-bad:#b91c1c;
  --rk-acc-ink:#ffffff; --rk-texture:.2;
}
html[data-rk-theme="contrast"]{
  --rk-bg:#000; --rk-panel:#0a0a0a; --rk-panel2:#141414; --rk-rail:#9a9a9a;
  --rk-txt:#fff; --rk-dim:#e0e0e0; --rk-faint:#bdbdbd; --rk-texture:0;
  --rk-sky:#8fdcff; --rk-gold:#ffd84d; --rk-violet:#d9ccff; --rk-moss:#9dffbf;
}
html[data-rk-accent="gold"]{--rk-acc:var(--rk-gold)}
html[data-rk-accent="violet"]{--rk-acc:var(--rk-violet)}
html[data-rk-accent="moss"]{--rk-acc:var(--rk-moss)}
html[data-rk-shape="round"]{--rk-cut:0px; --rk-radius:14px}
html[data-rk-shape="square"]{--rk-cut:0px; --rk-radius:0px}
html[data-rk-texture="off"]{--rk-texture:0}
html[data-rk-size="large"].rk{font-size:112.5%}
html[data-rk-motion="reduced"]{--rk-t:0s}
@media (prefers-reduced-motion: reduce){ html:not([data-rk-motion="full"]){--rk-t:0s} }

/* ================================================================
 * Page styling — only for pages that opt in with <html class="rk">
 * ================================================================ */
html.rk{background:var(--rk-bg); color-scheme:dark}
html.rk[data-rk-theme="daylight"]{color-scheme:light}
html.rk body{
  margin:0; background:transparent; color:var(--rk-txt);
  font-family:var(--rk-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* the survey map: contour lines of hill country, drawn in the accent color */
html.rk body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--rk-acc); opacity:var(--rk-texture);
  -webkit-mask:url(/contours.svg) 0 0/900px 900px repeat;
          mask:url(/contours.svg) 0 0/900px 900px repeat;
}
html.rk ::selection{background:var(--rk-acc); color:var(--rk-acc-ink)}
html.rk :focus-visible{outline:2px solid var(--rk-acc); outline-offset:3px}

/* ---------- the cut: one chamfered corner language for everything ---------- */
.rk .rk-cut{
  clip-path:polygon(var(--rk-cut) 0,100% 0,100% calc(100% - var(--rk-cut)),calc(100% - var(--rk-cut)) 100%,0 100%,0 var(--rk-cut));
  border-radius:var(--rk-radius);
}

/* ---------- buttons: a sweep of ink, not a soft pill ---------- */
.rk .rk-btn{
  --c:calc(var(--rk-cut) * .75);
  position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:.5em;
  font:600 .78rem/1 var(--rk-display); letter-spacing:.03em;
  padding:.95em 1.35em; color:var(--rk-txt); background:none; border:0; cursor:pointer;
  text-decoration:none;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  border-radius:var(--rk-radius);
  transition:color var(--rk-t) var(--rk-ease);
}
.rk .rk-btn::before{content:""; position:absolute; inset:0; z-index:-2; background:var(--rk-rail); border-radius:inherit}
.rk .rk-btn::after{
  content:""; position:absolute; inset:1px; z-index:-1; border-radius:calc(var(--rk-radius) - 1px);
  clip-path:inherit;
  background:linear-gradient(var(--rk-acc),var(--rk-acc)) left/0% 100% no-repeat, var(--rk-panel2);
  transition:background-size calc(var(--rk-t) * 1.6) var(--rk-ease);
}
.rk .rk-btn:hover{color:var(--rk-acc-ink)}
.rk .rk-btn:hover::after{background-size:100% 100%, auto}
.rk .rk-btn:hover::before{background:var(--rk-acc)}
.rk .rk-btn.primary{color:var(--rk-acc-ink)}
.rk .rk-btn.primary::after{background:var(--rk-acc)}
.rk .rk-btn.primary:hover{color:var(--rk-txt)}
.rk .rk-btn.primary:hover::after{background:linear-gradient(var(--rk-panel2),var(--rk-panel2)) left/100% 100% no-repeat}
.rk .rk-btn:disabled{opacity:.45; cursor:default}
.rk .rk-btn:disabled:hover{color:var(--rk-txt)}
.rk .rk-btn:disabled:hover::after{background-size:0% 100%, auto}
.rk .rk-btn.small{font-size:.66rem; padding:.8em 1.1em}

/* ---------- panels: a sheet with a cut corner and a hairline edge ---------- */
.rk .rk-sheet{
  position:relative; isolation:isolate; padding:1.4rem 1.5rem;
  clip-path:polygon(0 0,calc(100% - calc(var(--rk-cut) * 2)) 0,100% calc(var(--rk-cut) * 2),100% 100%,0 100%);
  border-radius:var(--rk-radius);
}
.rk .rk-sheet::before{content:""; position:absolute; inset:0; z-index:-2; background:var(--rk-rail); border-radius:inherit}
.rk .rk-sheet::after{content:""; position:absolute; inset:1px; z-index:-1; background:var(--rk-panel); clip-path:inherit; border-radius:calc(var(--rk-radius) - 1px)}

/* ---------- small type ---------- */
.rk .rk-label{font:500 .72rem/1.3 var(--rk-mono); color:var(--rk-faint); letter-spacing:.02em}
.rk .rk-stamp{
  display:inline-block; font:600 .72rem/1 var(--rk-mono); letter-spacing:.04em;
  padding:.45em .7em; color:var(--rk-ok); border:1px solid color-mix(in srgb, var(--rk-ok) 55%, transparent);
  transform:rotate(-1.2deg);
}
.rk .rk-stamp:nth-child(even){transform:rotate(1deg)}