/* Assay's styles — every value from the tokens (tokens.css, copied from Anvil). Ken's tool: tablet and up,
   touch-friendly targets (44px). */
html, body { margin:0; min-height:100%; background:var(--color-bg-default); color:var(--color-fg-default);
  font-family:var(--font-family-sans, system-ui, -apple-system, "Segoe UI", sans-serif); font-size:var(--font-size-md, 14px); }
button, input { font:inherit; color:inherit; }
.muted { color:var(--color-fg-muted); }
.pad { padding:var(--spacing-lg, 24px); }
.grow { flex:1; }
.brand { font-weight:700; letter-spacing:.02em; }
h1, h2 { margin:0 0 var(--spacing-md, 16px); }
h2 { font-size:var(--font-size-lg, 16px); }

/* Sign in / setup */
.card { box-sizing:border-box; background:var(--color-bg-subtle); border:1px solid var(--color-border-default); border-radius:var(--radius-lg, 8px); padding:var(--spacing-xl, 32px); }
.narrow { width:min(440px, calc(100% - 2 * var(--spacing-md, 16px))); margin:10vh auto 0; }
.card h1.brand { font-size:var(--font-size-lg, 16px); color:var(--color-fg-muted); margin-bottom:var(--spacing-sm, 8px); }
form { display:flex; flex-direction:column; gap:var(--spacing-md, 16px); }
label { display:flex; flex-direction:column; gap:var(--spacing-xs, 4px); color:var(--color-fg-muted); font-size:var(--font-size-sm, 12px); }
input { min-height:44px; box-sizing:border-box; padding:0 var(--spacing-md, 16px); border:1px solid var(--color-border-default); border-radius:var(--radius-md, 6px);
  background:var(--color-bg-default); color:var(--color-fg-default); font-size:var(--font-size-md, 14px); }
input:focus { outline:2px solid var(--color-accent-emphasis); outline-offset:1px; }
button.primary, button.secondary { min-height:44px; padding:0 var(--spacing-lg, 24px); border-radius:var(--radius-md, 6px); cursor:pointer; font-weight:600; }
button.primary { background:var(--color-accent-emphasis); border:1px solid var(--color-accent-emphasis); color:var(--color-fg-on-emphasis); }
button.secondary { background:var(--color-bg-default); border:1px solid var(--color-border-default); }
button.link { min-height:44px; background:none; border:none; color:var(--color-accent-fg); cursor:pointer; padding:0 var(--spacing-sm, 8px); }
button:disabled { opacity:.55; cursor:default; }
.error { margin:0; color:var(--color-danger-fg); }
.qr { display:block; width:200px; height:200px; margin:var(--spacing-md, 16px) auto; background:#fff; padding:var(--spacing-sm, 8px); border-radius:var(--radius-md, 6px); }
.key { display:block; margin-top:var(--spacing-sm, 8px); font-size:var(--font-size-lg, 16px); letter-spacing:.08em; word-break:break-all; }
details { color:var(--color-fg-muted); margin-bottom:var(--spacing-md, 16px); }
summary { cursor:pointer; min-height:32px; }

/* Home */
.bar { display:flex; align-items:center; gap:var(--spacing-sm, 8px); min-height:56px; padding:0 var(--spacing-lg, 24px); border-bottom:1px solid var(--color-border-default); background:var(--color-bg-subtle); }
.home { max-width:960px; margin:0 auto; padding:var(--spacing-lg, 24px); display:flex; flex-direction:column; gap:var(--spacing-xl, 32px); }
.block-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-border-default); margin-bottom:var(--spacing-sm, 8px); }
.block-head h2 { margin:var(--spacing-sm, 8px) 0; }
.none { color:var(--color-fg-muted); margin:var(--spacing-sm, 8px) 0; }
.rows { list-style:none; margin:0; padding:0; }
.row { display:flex; align-items:center; gap:var(--spacing-md, 16px); min-height:52px; padding:0 var(--spacing-md, 16px); border:1px solid var(--color-border-default); border-radius:var(--radius-md, 6px); margin-bottom:var(--spacing-xs, 4px); }
.row-name { font-weight:600; }
.ok { color:var(--color-success-fg); }
.warn { color:var(--color-warning-fg); }