/* Components shared by the style guide and the console prototypes. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--size-14)/var(--lh-body) var(--font-body); color: var(--text); background: var(--surface); }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 300; line-height: var(--lh-tight); margin: 0; letter-spacing: var(--ls-minus-1); }
h1 { font-size: var(--size-32); letter-spacing: var(--ls-minus-2); }
h2 { font-size: var(--size-24); }
h3 { font-size: var(--size-18); }
p { margin: 0; max-width: 70ch; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.secondary { color: var(--text-secondary); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Uppercase label: Enter's eyebrow, with the small square bullet from its navigation */
.eyebrow { font-size: var(--size-12); letter-spacing: var(--ls-plus-2); text-transform: uppercase; }
.eyebrow.dot::before, .nav-cell.dot::after { content: ""; display: inline-block; width: 3px; height: 3px; background: currentColor; vertical-align: middle; }
.eyebrow.dot::before { margin-right: var(--space-2); }
.nav-cell.dot::after { margin-left: var(--space-4); }
/* Navigation: a hairline grid of cells, as on getenter.ai, shorter because this is a working tool */
.nav { display: flex; align-items: stretch; min-height: 4rem; border-bottom: 1px solid var(--stroke); background: var(--surface); }
.nav-logo { display: flex; align-items: center; padding: 0 var(--space-8); }
.nav-logo img { display: block; height: 1rem; }
.nav-links { display: flex; flex: 1; min-width: 0; }
.nav-cell { display: flex; align-items: center; padding: 0 var(--space-5); font-size: var(--size-14); letter-spacing: var(--ls-plus-2); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav-cell:hover { background: var(--hover); }
.nav-cell[aria-current] { box-shadow: inset 0 -1px 0 var(--black); }
.nav-end { border-left: 1px solid var(--stroke); }
/* Buttons: the app login's 40 px control with the site's uppercase label */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-12); font: 500 var(--size-14)/1.24 var(--font-body); text-transform: uppercase; text-decoration: none; color: var(--text); background: none; cursor: pointer; }
.btn-primary { background: var(--orange); color: var(--black); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--orange-hover); }
.btn-secondary { background: var(--surface); border-color: var(--stroke-control); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--surface-muted); }
.btn-ghost:hover { background: var(--hover); }
.btn:active { box-shadow: inset 0 0 0 99px var(--pressed); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-small { min-height: 2rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-8); font-size: var(--size-12); }
/* Forms */
.field { display: grid; gap: var(--space-2); }
.field label, .label { font-weight: 500; }
.input { width: 100%; min-height: var(--control-height); padding: var(--space-3); border: 1px solid var(--stroke-control); border-radius: var(--radius-12); font: inherit; color: inherit; background: var(--surface); }
.input::placeholder { color: var(--text-secondary); }
.input.has-error { border-color: var(--error); }
.field-error { font-size: var(--size-12); color: var(--error-fg); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; }
.check input { margin: .2rem 0 0; accent-color: var(--panel-dark); }
/* Status chip: the square keeps the state readable without colour */
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-4); font-size: var(--size-12); white-space: nowrap; background: var(--surface-muted); }
.chip::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.chip-ok { background: var(--success-light); color: var(--success-fg); }
.chip-warn { background: var(--warning-light); color: var(--warning-fg); }
.chip-error { background: var(--error-light); color: var(--error-fg); }
.chip-info { background: var(--info-light); color: var(--info-fg); }
/* Table: hairlines only. Under 720 px each row stacks, using data-label as its caption */
.table { width: 100%; border-collapse: collapse; }
.table th { padding: var(--space-2) var(--space-4); font-size: var(--size-12); font-weight: 400; letter-spacing: var(--ls-plus-2); text-transform: uppercase; text-align: left; color: var(--text-secondary); border-bottom: 1px solid var(--stroke-strong); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--stroke); vertical-align: top; }
.table tbody tr:hover { background: var(--surface-muted); }
.table .right { text-align: right; }
.table a { text-decoration: none; font-weight: 500; }
.table a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--stroke); }
  .table td { padding: var(--space-1) 0; border: 0; }
  .table td.right { text-align: left; }
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-secondary); }
}
/* Notice: tinted block, never a coloured side stripe */
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-8); background: var(--surface-muted); }
.notice-error { background: var(--error-light); color: var(--error-fg); }
.notice-warn { background: var(--warning-light); color: var(--warning-fg); }
.notice-ok { background: var(--success-light); color: var(--success-fg); }
/* Prototype marks: every illustrative number carries the hatch, so none can pass as final */
.proto-bar { padding: var(--space-1) var(--space-4); font-size: var(--size-12); letter-spacing: var(--ls-plus-2); text-align: center; background: var(--black); color: var(--white); }
.ilu { padding: 0 .12em; background: repeating-linear-gradient(135deg, #ffae3540 0 3px, #ffae3599 3px 5px); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.proto-bar .ilu { color: var(--black); background-color: var(--white); }
/* Page frame */
.page-wrap { padding: var(--space-8); max-width: 80rem; margin: 0 auto; }
@media (max-width: 720px) {
  .page-wrap { padding: var(--space-5) var(--space-4); }
  .nav { flex-wrap: wrap; }
  .nav-logo { padding: var(--space-4); flex: 1; }
  .nav-links { order: 3; flex-basis: 100%; overflow-x: auto; border-top: 1px solid var(--stroke); }
  .nav-cell { padding: var(--space-3) var(--space-4); }
}