/* Components of the admin interface. Values come from tokens.css only (a test
   enforces it); docs/design-system.md describes each component and
   /admin/design-system shows them all. */

/* Base */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-root); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); }
a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-text-muted); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--color-ink); }
:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-offset); }
h1 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); margin-top: var(--space-8); }
code { font-family: var(--font-mono); }
.muted { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.error { color: var(--color-danger); font-weight: var(--weight-semibold); }
.alt { margin-top: var(--space-6); }

/* Page frame */
.bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.wordmark { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.mark { height: 1.75rem; width: auto; }
.mark .mark-line { fill: none; stroke: var(--color-ink); stroke-width: 2.4; stroke-linecap: round; }
.mark .mark-on { fill: var(--color-on-mark); stroke: var(--color-on-mark); stroke-width: 2; stroke-linejoin: round; }
.mark .mark-off { fill: none; stroke: var(--color-on-mark); stroke-width: 2; stroke-linejoin: round; }
.mark.small .mark-line { stroke-width: 2.6; }
.mark.small .mark-on, .mark.small .mark-off { stroke-width: 2.2; }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-right: auto; }
.nav a { text-decoration: none; font-weight: var(--weight-medium); }
.nav a:hover { text-decoration: underline; }
main { margin: var(--space-8) auto; padding: 0 var(--space-4); }
main.narrow { max-width: var(--width-narrow); }
main.wide { max-width: var(--width-wide); }

/* Buttons */
button, .button { font: inherit; padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-on-ink); font-weight: var(--weight-semibold); cursor: pointer; text-decoration: none; display: inline-block; }
.secondary { background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid var(--color-border); font-weight: var(--weight-medium); }
.secondary:hover { border-color: var(--color-ink); }
.small { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }

/* Forms */
form { display: grid; gap: var(--space-3); }
form.logout { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.row-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
label { display: grid; gap: var(--space-1); font-weight: var(--weight-semibold); }
label.check { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-regular); }
label.inline { display: inline-flex; gap: var(--space-1); align-items: center; font-weight: var(--weight-regular); }
label.inline input { width: 5rem; }
input, textarea, select { font: inherit; padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
textarea, select { width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-ink); }
fieldset { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); }
fieldset.plain { border: 0; padding: 0; display: grid; gap: var(--space-3); }
.row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }

/* Containers */
.card { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-4) var(--space-4); margin-bottom: var(--space-4); }
.created { border-color: var(--color-ink); }
.scroll { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; background: var(--color-surface); }
table.list th, table.list td { text-align: left; padding: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); vertical-align: top; }
.actions form { margin-bottom: var(--space-1); }

/* Small pieces */
.tag { display: inline-block; padding: 0 var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--text-sm); }
.token { display: inline-block; padding: var(--space-2); background: var(--color-bg); border-radius: var(--radius-sm); word-break: break-all; }
.secret, .codes code { font-family: var(--font-mono); word-break: break-all; }
.codes { columns: 2; padding-left: var(--space-5); }
.qr { display: block; background: var(--color-fixed-qr-bg); padding: var(--space-2); border-radius: var(--radius-sm); }

/* Flag cell (matrix) */
.matrix td { min-width: 9rem; }
.cell { display: grid; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.state { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--weight-semibold); }
.state.on, .cell.on .state { color: var(--color-on); }
.state.off, .cell.off .state { color: var(--color-text-muted); }
.pennant { width: 0.7em; height: 0.85em; flex: none; }
.pennant.on path { fill: var(--color-on); stroke: var(--color-on); stroke-width: 1.5; stroke-linejoin: round; }
.pennant.off path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.cell .state { font-weight: var(--weight-bold); }
.cell .summary { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Rules editor */
fieldset.rule { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); background: var(--color-surface); }
.condition textarea { width: 16rem; }
.split { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Audit diff */
.diff { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.diff dd { margin: 0; display: grid; gap: var(--space-half); word-break: break-all; }
.diff del { color: var(--color-danger); }
.diff ins { color: var(--color-text); text-decoration: none; }

/* Design system page */
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-4); }
.swatch { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.chip { height: 3rem; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); }
.chip-bg { background: var(--color-bg); }
.chip-surface { background: var(--color-surface); }
.chip-text { background: var(--color-text); }
.chip-text-muted { background: var(--color-text-muted); }
.chip-border { background: var(--color-border); }
.chip-ink { background: var(--color-ink); }
.chip-on-ink { background: var(--color-on-ink); }
.chip-danger { background: var(--color-danger); }
.chip.on { background: var(--color-on); }
.chip.mark-on { background: var(--color-on-mark); }
.ruler { height: var(--space-2); background: var(--color-ink); }
.ruler-half { width: var(--space-half); }
.ruler-1 { width: var(--space-1); }
.ruler-2 { width: var(--space-2); }
.ruler-3 { width: var(--space-3); }
.ruler-4 { width: var(--space-4); }
.ruler-5 { width: var(--space-5); }
.ruler-6 { width: var(--space-6); }
.ruler-8 { width: var(--space-8); }
.corner { height: 3rem; border: var(--border-width) solid var(--color-ink); }
.corner-sm { border-radius: var(--radius-sm); }
.corner-md { border-radius: var(--radius-md); }
.corner-pill { border-radius: var(--radius-pill); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

@media (max-width: 40rem) {
  .row { flex-wrap: wrap; }
  .condition textarea { width: 100%; }
}
.langs { display: flex; gap: var(--space-2); font-size: var(--text-sm); }
.langs a[aria-current] { font-weight: var(--weight-bold); text-decoration: none; color: var(--color-text); }

/* Design system: brand */
.ds-brand { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-4); }
.ds-specimen { margin: 0; display: grid; gap: var(--space-2); }
.ds-stage { display: grid; place-items: center; min-height: 8rem; padding: var(--space-4); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.ds-stage > .mark { height: 4rem; }
.ds-stage > .mark.small { height: 2rem; }
.ds-stage.inverse { background: var(--color-fixed-inverse-bg); border-color: var(--color-fixed-inverse-bg); }
.ds-stage.inverse .brand { color: var(--color-fixed-inverse-text); }
.ds-stage.inverse .mark .mark-line { stroke: var(--color-fixed-inverse-text); }
.ds-stage.inverse .mark .mark-on { fill: var(--color-fixed-inverse-mark); stroke: var(--color-fixed-inverse-mark); }
.ds-stage.inverse .mark .mark-off { stroke: var(--color-fixed-inverse-mark); }
.ds-rule { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }