/* Layout primitives shared by pages. Component-specific rules live in
   .razor.css files next to the component. */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--content-width));
  margin-inline: auto;
}

.section { padding-block: var(--space-6); }
.section + .section { border-top: var(--hairline); }
@media (min-width: 60rem) { .section { padding-block: var(--space-7); } }

/* Asymmetric two-column: content decides which side the headline sits on. */
.split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 5fr 7fr; }
  .split.flip > :first-child { order: 2; }
}

.stack > * + * { margin-block-start: var(--space-3); }
.stack-s > * + * { margin-block-start: var(--space-2); }
.stack-l > * + * { margin-block-start: var(--space-5); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.eyebrow { font-family: var(--font-mono); font-size: var(--text-s); color: var(--ink-2); }
.lead { font-size: var(--text-l); color: var(--ink-2); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--text-s); }

.panel {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--space-4);
}

/* Forms */
.field { display: grid; gap: var(--space-1); }
.field > label { font-weight: 500; font-size: var(--text-s); color: var(--ink-2); }
.input, .form-control {
  width: 100%;
  padding: .6rem .8rem;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus, .form-control:focus { border-color: var(--ink-2); outline: none; }
.input::placeholder { color: var(--muted); }
.error { color: var(--danger); font-size: var(--text-s); }

/* Status line used by upload/processing states; aria-live is set in markup. */
.status { display: flex; gap: var(--space-2); align-items: center; color: var(--ink-2); font-size: var(--text-s); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: .6rem .5rem; text-align: left; border-bottom: var(--hairline); }
.table th { font-weight: 500; color: var(--ink-2); font-size: var(--text-s); }

/* Blazor's unhandled-error strip: quiet, bottom, dismissible. */
#blazor-error-ui {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1000;
  padding: var(--space-3) var(--gutter);
  background: var(--surface); color: var(--ink);
  border-top: 2px solid var(--danger);
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* Show the icon for the action, not the state (used by the theme toggle). */
.only-dark { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
:root[data-theme="dark"] .only-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-dark { display: block; }
  :root:not([data-theme="light"]) .only-light { display: none; }
}