/* Round 1, rule 3: compact controls. Outline is the default; one solid primary
   per view; tiny dashed ghosts for row-level actions. */

.field,
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="number"], input[type="password"], input[type="date"], select, textarea {
  font: inherit;
  font-size: var(--fs-body);
  padding: .18rem .4rem;
  border: 1px solid #c8cdd4;
  border-radius: .25rem;
  background: #fff;
  color: var(--text);
  min-height: 0;
}
.field:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
textarea.field { padding: .3rem .45rem; }

/* Buttons keep the brand's plum. They are smaller and tighter than the
   marketing site's, because a working screen has many of them, but a button
   that does something is filled and a button that does something quieter is
   outlined in the same colour. The first pass made every one of them white,
   which is not a hierarchy, it is an absence of one (owner, 2026-09-23). */
.btn {
  font-size: var(--fs-body);
  font-weight: 600;
  padding: .26rem .7rem;
  min-height: 0;
  line-height: 1.25;
  border-radius: .25rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: none;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* The quieter ones: same colour, drawn rather than filled. */
.btn-secondary, .btn-outline, .btn-ghost {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--brand-line);
}
.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover {
  background: var(--brand-wash);
  color: var(--accent-deep);
  border-color: var(--brand-soft);
}

.btn-lg { font-size: .9rem; padding: .4rem .9rem; }
.btn-sm { font-size: .72rem; padding: .12rem .5rem; }

/* Row-level actions inside tables and lists stay light, so a table of twenty
   rows is not twenty purple blocks. */
td .btn, td .btn-sm, .row-menu-item, .dense-log .btn {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--brand-line);
  font-weight: 600;
}
td .btn:hover, td .btn-sm:hover, .dense-log .btn:hover { background: var(--brand-wash); border-color: var(--brand-soft); }

.btn-danger { background: #fff; color: var(--bad-fg); border-color: #e3b5b5; }
.btn-danger:hover { background: #fdf2f2; color: var(--bad-fg); }

label { font-size: var(--fs-body); }
.stack-form { display: grid; gap: .5rem; }
.console-row { gap: .4rem; }