/* Bridge's screen rules, from the F-01 screen (docs/03_features/F-01_write_hot_version.html).
   Design-system tokens only (theme.css loads first); the product hue is the only override. */
:root { --product-hue: 195; }

body { margin: 0; background: var(--color-background); color: var(--color-foreground); }
.page { max-width: 1200px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.bar > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); color: var(--color-product); }
.bar > span + span { font-size: var(--text-small); color: var(--color-muted-foreground); }
.body { padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.body h1 { font-size: var(--text-display-md); margin: 0; }
.btn { display: block; width: 100%; box-sizing: border-box; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 0; background: var(--color-primary); color: var(--color-primary-foreground); font: inherit; font-weight: 700; text-align: center; text-decoration: none; }
.btn-quiet { padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); background: transparent; color: var(--color-primary); border: 1px solid var(--color-border-strong); text-decoration: none; }
.private { font-size: var(--text-small); color: var(--color-muted-foreground); margin: 0; }
label { font-weight: 700; }
textarea { width: 100%; box-sizing: border-box; min-height: 300px; padding: var(--space-3); border: 1px solid var(--color-input); border-radius: var(--radius-md); background: var(--color-card); color: var(--color-foreground); font: inherit; line-height: 1.6; resize: vertical; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-small); border: 1px solid transparent; }
.chip:empty { display: none; }
.chip-ok { background: var(--color-success-soft); color: var(--color-success-on-soft); border-color: var(--color-success-soft-border); }
.chip-wait { background: var(--color-warning-soft); color: var(--color-warning-on-soft); border-color: var(--color-warning-soft-border); }