/* The pebblebase PWA on the Riverstone tokens (shared/branding/tokens.css): roles, sizes and radii,
   with no colour literals of its own. Newsreader for headings, the system face for text.
   Its primitives are the classes below, each with when to use it; tests/ui/gallery.html draws them. */
:root{color-scheme:light dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--role-bg);color:var(--role-text);font:var(--font-size-17)/1.5 system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
h1{margin:0;font:400 var(--font-size-26)/1.15 var(--font-display);letter-spacing:-.02em;overflow-wrap:anywhere}
/* A screen's heading takes focus on arrival; the focus ring stays for keyboard focus only. */
h1[tabindex]:focus,.notice[tabindex]:focus{outline:none}
p{margin:0}
a{color:inherit;text-underline-offset:4px}
button,a,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--role-text);outline-offset:3px}
/* Text only a screen reader reads: a screen heading the view draws for itself. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Top bar: the brand and one link, on every screen. */
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;max-width:640px;margin:0 auto;padding:0 20px}
.brand{font:500 var(--font-size-22)/1 var(--font-display);letter-spacing:-.035em}
/* Back link: the first thing on every screen below Home, naming the screen it returns to. */
.bar a,.back{display:inline-flex;align-items:center;min-height:44px;color:var(--role-muted);font-size:var(--font-size-16)}
.back{justify-self:start;overflow-wrap:anywhere}
main{display:grid;gap:24px;max-width:640px;margin:0 auto;padding:8px 20px 40px}
section{display:grid;gap:16px;min-width:0}
.muted{color:var(--role-muted);font-size:var(--font-size-15)}
/* Section heading: names a list on a screen (Views, Forms). */
.section-heading{margin:8px 0 -8px;color:var(--role-muted);font:600 var(--font-size-15)/1.3 system-ui,-apple-system,sans-serif}
/* Notice: a sentence about the screen's state, such as offline or not found. Neutral, never alarming. */
.notice{padding:14px 18px;border:1px solid var(--role-border);border-radius:var(--radius-16);background:var(--role-surface)}
/* Empty state: what an empty list means and where to fill it. */
.empty{color:var(--role-muted)}
/* Primary button: the one main action on a screen. */
.action{display:inline-flex;justify-self:start;justify-content:center;align-items:center;min-height:52px;padding:0 28px;border:0;border-radius:var(--radius-pill);background:var(--role-action);color:var(--role-on-action);font:600 var(--font-size-17)/1.2 var(--font-display);text-decoration:none;cursor:pointer}
.list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
/* Link row: one thing to open (a pebble, a view, a form); the whole row is the target. */
.row{display:flex;align-items:center;min-height:52px;padding:14px 18px;border-radius:var(--radius-16);background:var(--role-surface);font:var(--font-size-19)/1.3 var(--font-display);text-decoration:none;overflow-wrap:anywhere}
/* Card: a group of related settings or facts. */
.card{display:grid;gap:8px;padding:18px;border-radius:var(--radius-20);background:var(--role-surface)}
/* View frame card: the surface a view or form draws on; the frame inside sizes to its content. */
.frame-card{min-width:0;padding:6px;border-radius:var(--radius-20);background:var(--role-surface)}
.frame-card iframe{display:block;width:100%;height:160px;border:0;background:transparent}
.label{font-weight:600}
.zone{font:var(--font-size-15)/1.4 var(--font-mono)}
/* Switch: one on-or-off setting for this phone. */
.switch{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.switch input{width:24px;height:24px;margin:0;accent-color:var(--role-action)}