/* Structural layout only — visual design happens later via tokens.css. */
* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 64rem;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-bg);
}

header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
header h1 { font-size: var(--font-size-title); margin: 0; }
header a { color: var(--color-text); text-decoration: none; }
nav { display: flex; gap: var(--space-3); }
nav a { color: var(--color-accent); }

h2 { font-size: var(--font-size-large); }

button, input, select, textarea {
  font: inherit;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: var(--tap-target);
}
button { cursor: pointer; }
button.primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}
button.danger { color: var(--color-danger); border-color: var(--color-danger); }

label { display: block; margin-bottom: var(--space-3); }
label > span { display: block; margin-bottom: var(--space-1); font-size: var(--font-size-small); color: var(--color-text-muted); }
input[type="text"], input[type="url"], textarea, select { width: 100%; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cover-width), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.card { text-decoration: none; color: inherit; }
.card-title { margin-top: var(--space-1); font-size: var(--font-size-small); }
.cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--color-border);
  border-radius: var(--radius);
  display: block;
}
.cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}
.detail-cover { width: var(--cover-width); flex-shrink: 0; align-self: flex-start; }
.detail { align-items: flex-start; gap: var(--space-4); }
.thumb { width: calc(var(--cover-width) / 3); flex-shrink: 0; }
.ol-hit { display: flex; text-align: left; width: 100%; }
.q-option { display: block; width: 100%; text-align: left; padding: var(--space-3); }
.q-option.selected { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.q-nav { margin-top: var(--space-4); }
.q-summary dt { color: var(--color-text-muted); font-size: var(--font-size-small); margin-top: var(--space-2); }
.q-summary dd { margin: 0; }

.muted { color: var(--color-text-muted); font-size: var(--font-size-small); }
.error { color: var(--color-danger); }
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.stack > * + * { margin-top: var(--space-3); }