/*
 * Physique hosting pages. Colors, type, spacing and radii come from tokens.css (mirrors the iOS design system);
 * link tokens.css before this file. No build step, no inline styles (strict CSP).
 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--measure-background);
  color: var(--measure-text-primary);
  font: var(--measure-type-body-weight) var(--measure-type-body-size)/1.5 var(--measure-font-system);
}
[hidden] { display: none !important; }

.page { max-width: 44rem; margin: 0 auto; padding: 24px 16px 48px; }
.page.narrow { max-width: 30rem; }

/* Header: app icon + wordmark, identical on every page. */
.brand { margin: 0 0 24px; }
.brand-link {
  display: inline-flex; align-items: center; gap: var(--measure-spacing-md);
  min-height: var(--measure-spacing-touch-target);
  color: var(--measure-text-primary); text-decoration: none;
  font-size: 18px; font-weight: 700; letter-spacing: 0.01em;
}
.brand-icon { width: 32px; height: 32px; border-radius: 22.4%; flex: none; display: block; }

h1 {
  font-size: var(--measure-type-screen-title-size); font-weight: var(--measure-type-screen-title-weight);
  line-height: 1.25; margin: 0 0 var(--measure-spacing-md); overflow-wrap: anywhere;
}
h2 {
  font-size: var(--measure-type-modal-title-size); font-weight: var(--measure-type-modal-title-weight);
  margin: 0 0 var(--measure-spacing-sm);
}
@media (min-width: 480px) {
  h1 { font-size: var(--measure-type-detail-title-size); font-weight: var(--measure-type-detail-title-weight); }
}
p { margin: 0 0 var(--measure-spacing-md); }
.muted { color: var(--measure-text-secondary); }
.small { font-size: var(--measure-type-screen-subtitle-size); }
a { color: var(--measure-accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Focus: lime ring, visible on every dark surface. */
:focus-visible { outline: 2px solid var(--measure-accent); outline-offset: 2px; border-radius: var(--measure-radius-chip); }

.card, .block {
  background: var(--measure-surface);
  border: 1px solid var(--measure-border-default);
  border-radius: var(--measure-radius-card);
  padding: 20px 16px;
  margin: 0 0 16px;
}
.card { border-radius: var(--measure-radius-hero); }
section.block > :last-child, .card > :last-child { margin-bottom: 0; }

/* Buttons: lime primary with dark text, coral for destructive. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--measure-spacing-touch-target); padding: 10px 16px;
  font: inherit; font-size: var(--measure-type-body-size); font-weight: var(--measure-type-action-emphasis-weight);
  text-decoration: none; text-align: center;
  color: var(--measure-text-primary); background: var(--measure-surface-3);
  border: 1px solid var(--measure-border-emphasis); border-radius: var(--measure-radius-icon-button); cursor: pointer;
}
.btn:hover { background: var(--measure-surface-2); border-color: var(--measure-text-secondary); }
.btn.primary { background: var(--measure-accent); color: var(--measure-on-accent-primary); border-color: var(--measure-accent); }
.btn.primary:hover { background: var(--measure-accent); filter: brightness(1.08); }
.btn.danger { color: var(--measure-coral); background: var(--measure-delta-negative-background); }
.btn.danger:hover { background: var(--measure-delta-negative-background); border-color: var(--measure-coral); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: var(--measure-type-action-size); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { filter: none; }
.btn-row { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.btn-row .btn { width: 100%; }
.btn-row + p { margin-top: var(--measure-spacing-md); }
@media (min-width: 480px) {
  .btn-row.inline { flex-direction: row; flex-wrap: wrap; }
  .btn-row.inline .btn { width: auto; }
}

/* Identity and notices */
.identity { margin: 0 0 var(--measure-spacing-md); overflow-wrap: anywhere; }
.badge {
  display: inline-block; padding: 2px 8px; margin-left: 6px;
  font-size: var(--measure-type-row-label-size); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--measure-coral); background: var(--measure-delta-negative-background); border-radius: 999px; vertical-align: middle;
}
.badge:first-child { margin-left: 0; }
.badge.ok { color: var(--measure-accent); background: var(--measure-delta-positive-background); }
.notice {
  padding: 10px var(--measure-spacing-md); border-radius: var(--measure-radius-sm); margin: var(--measure-spacing-md) 0;
  background: var(--measure-accent-tint-012); color: var(--measure-text-primary); overflow-wrap: anywhere;
}
.notice.error { background: var(--measure-delta-negative-background); color: var(--measure-coral); }
.notice.warn { background: var(--measure-surface-3); border: 1px solid var(--measure-border-emphasis); }

.scopes { list-style: none; margin: 0 0 var(--measure-spacing-md); padding: 0; }
.scopes li { padding: var(--measure-spacing-sm) 0; border-top: 1px solid var(--measure-border-default); }
.scopes li:first-child { border-top: 0; }
.scopes strong { display: block; }
.label {
  margin: 16px 0 var(--measure-spacing-xxs);
  font-size: var(--measure-type-row-label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--measure-text-secondary);
}
.signed-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--measure-spacing-xxs) var(--measure-spacing-md); margin: 16px 0 var(--measure-spacing-md); overflow-wrap: anywhere; }
.linklike { padding: 0; font: inherit; color: var(--measure-accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* Code, URLs, commands, timestamps: DM Mono. */
.copy-box { display: flex; flex-direction: column; gap: var(--measure-spacing-sm); margin: var(--measure-spacing-sm) 0 var(--measure-spacing-md); }
pre, code, .mono {
  font-family: var(--measure-font-mono);
  font-size: var(--measure-type-mono-body-size); font-weight: var(--measure-type-mono-body-weight);
}
pre {
  margin: 0; padding: var(--measure-spacing-md); overflow-x: auto;
  background: var(--measure-background); border: 1px solid var(--measure-border-emphasis); border-radius: var(--measure-radius-sm);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
:not(pre) > code { padding: 1px 5px; background: var(--measure-surface-3); border-radius: var(--measure-radius-chip); overflow-wrap: anywhere; }
@media (min-width: 480px) {
  .copy-box { flex-direction: row; align-items: flex-start; }
  .copy-box pre { flex: 1; min-width: 0; }
}

/* Connections list */
.conn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--measure-spacing-md); }
.conn-list li { background: var(--measure-surface); border: 1px solid var(--measure-border-default); border-radius: var(--measure-radius-card); padding: 16px; }
.conn-list h2 { margin: 0 0 var(--measure-spacing-xxs); overflow-wrap: anywhere; }
.facts { margin: var(--measure-spacing-sm) 0 var(--measure-spacing-md); display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--measure-spacing-md); font-size: var(--measure-type-action-size); }
.facts dt { color: var(--measure-text-secondary); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Landing page */
.lede { font-size: 17px; color: var(--measure-text-secondary); }
.steps { padding-left: 1.25rem; margin: 0 0 var(--measure-spacing-md); }
.steps li { margin-bottom: var(--measure-spacing-xxs); }
.footer { margin-top: 32px; font-size: var(--measure-type-screen-subtitle-size); color: var(--measure-text-secondary); }