/* The family hub's own parts, on the house tokens (tokens.css). Phone first. */
html.web body { max-width: 680px; }
html.web h1 { font: var(--jit-display-weight) 32px/1.15 var(--jit-display); margin: 4px 0 6px; }
html.web h2 { font: 500 12px var(--jit-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--jit-mute); margin: 30px 0 10px; }
.list { display: grid; gap: 10px; }
a.item { display: block; background: var(--jit-surface); border: 1px solid var(--jit-line);
  border-radius: var(--jit-r-l); padding: 14px 16px; color: var(--jit-ink); text-decoration: none; }
a.item:active { background: var(--jit-tint); }
a.item .k { display: block; font-weight: 600; font-size: 17px; line-height: 1.3; }
a.item .m { display: block; color: var(--jit-mute); font-size: 14px; margin-top: 4px; }
a.item.shelf { border-style: dashed; }
.back { margin: 0 0 14px; font-size: 15px; }
.back a, html.web .doc a { color: var(--jit-accent); }
html.web .doc { overflow-wrap: anywhere; font-size: 16px; line-height: 1.55; }
html.web .doc h1 { font: var(--jit-display-weight) 28px/1.2 var(--jit-display); margin: 0 0 12px; }
html.web .doc h2 { font: 600 19px/1.3 var(--jit-body); margin: 26px 0 8px; text-transform: none;
  letter-spacing: 0; color: var(--jit-ink); }
html.web .doc h3 { font-size: 16px; margin: 18px 0 6px; }
html.web .doc p, html.web .doc ul, html.web .doc ol { margin: 0 0 12px; }
html.web .doc ul, html.web .doc ol { padding-left: 22px; }
html.web .doc table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 14px; font-size: 14px; }
html.web .doc th, html.web .doc td { border-top: 1px solid var(--jit-line); padding: 6px 8px;
  text-align: left; vertical-align: top; }
html.web .doc code { font: 13px var(--jit-mono); background: var(--jit-tint); padding: 1px 4px; border-radius: 4px; }
form.pin { display: flex; flex-direction: column; gap: 14px; align-items: center; margin: 22vh auto 0;
  max-width: 300px; text-align: center; }
form.pin input { font: 28px var(--jit-mono); letter-spacing: .4em; text-align: center; width: 100%;
  padding: 10px; border: 1px solid var(--jit-line); border-radius: var(--jit-r-l);
  background: var(--jit-surface); color: var(--jit-ink); }
form.pin button { font: 600 16px var(--jit-body); padding: 10px 34px; border: 0;
  border-radius: var(--jit-r-l); background: var(--jit-accent); color: var(--jit-on-accent); }
.err { color: var(--jit-warn); font-weight: 600; }