/* Layout and components. Uses only tokens from theme.css (Aucilla Systems).
 *
 * Aucilla patterns: warm Paper/Sand grounds, Kite Slate brand, Red Hat Display
 * headings, Red Hat Text body, JetBrains Mono labels/readings. No shadows —
 * surfaces separate with a 1px line or a tonal shift. Clay is the alert color.
 * Spacing and tap targets are tuned up for one-handed, bright-sun field use. */

* {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  padding-bottom: var(--space-7);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

/* App bar on the brand surface (Kite Slate), light text */
.app-header {
  background: var(--surface-brand);
  color: var(--text-inverse);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.app-header h1 {
  margin: 0;
  font-size: var(--font-size-lg);
}
/* Brand lockup: white Windy Ridge Longleaf logo + the page title, side by side.
 * The logo is the wordmark, so the page title (Silo Check, History, …) sits next
 * to it for context. */
.app-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.brand-logo {
  height: 40px;
  width: auto;
  flex: none;
  display: block;
}
.app-header a {
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--font-size-sm);
}
.app-header a:hover {
  color: var(--chert);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* Text button on the brand bar (Sign out) — matches the header links */
.btn-text {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
}
.btn-text:hover {
  color: var(--chert);
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4);
}

/* Cards: Paper fill, 6px radius, 1px subtle border, no shadow */
.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.card h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
}

.field {
  margin-bottom: var(--space-4);
}
.field > label {
  display: block;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.field .hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  margin-top: var(--space-1);
}

input[type="text"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: var(--tap-target);
  font-size: var(--control-font);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
textarea {
  min-height: calc(var(--tap-target) * 1.4);
  resize: vertical;
  line-height: var(--leading-body);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--kite-slate);
  box-shadow: var(--focus-shadow);
  outline: none;
}
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
}

/* Readings use the mono face (Aucilla: counts/metadata are mono) */
.num-input {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

/* Yes / No fan toggle — big segmented control.
 * Yes = Moss (success), No = Clay (alert): the two status colors. */
.toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.toggle button {
  min-height: var(--tap-target);
  font-family: var(--font-body);
  font-size: var(--control-font);
  font-weight: var(--weight-semibold);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  touch-action: manipulation;
}
.toggle button[aria-pressed="true"][data-value="yes"] {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--sand);
}
.toggle button[aria-pressed="true"][data-value="no"] {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--sand);
}
/* Ceiling toggle — mirrors the fan toggle: Dry = Moss, Droplets = Clay (alert). */
.toggle button[aria-pressed="true"][data-value="dry"] {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--sand);
}
.toggle button[aria-pressed="true"][data-value="droplets"] {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--sand);
}

/* Gentle notice under a silo's ceiling toggle when droplets are seen.
 * Soft Clay tint, nudging (not blocking) a note. */
.ceiling-alert {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-danger-bg);
  color: var(--clay);
  border: var(--border-width) solid var(--clay);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

/* Buttons — Aucilla: primary Kite Slate -> Charcoal on hover, 6px, no shadow,
 * press darkens (never shrinks). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--control-font);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.005em;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  cursor: pointer;
  padding: 0 var(--space-4);
  touch-action: manipulation;
  text-decoration: none;
  transition: background 150ms cubic-bezier(0.2, 0, 0, 1);
}
.btn:hover {
  background: var(--color-primary-hover);
}
.btn:active {
  filter: brightness(0.92);
}
.btn.secondary {
  background: var(--sand);
  color: var(--charcoal);
  border-color: var(--border-subtle);
}
.btn.secondary:hover {
  background: var(--chert);
}
.btn.secondary:active {
  filter: brightness(0.96);
}
.btn:disabled {
  opacity: 0.45;
  filter: none;
  cursor: not-allowed;
}
.btn:disabled:hover {
  background: var(--color-primary);
}
/* Link-style button (Forgot password) — reads as a link, keeps the tap target */
.btn.link {
  background: none;
  border: none;
  color: var(--link);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: var(--space-2);
}
.btn.link:hover {
  background: none;
  color: var(--link-hover);
}
.btn.busy {
  opacity: 0.6;
  pointer-events: none;
}
.btn-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.btn-row .btn {
  width: auto;
  flex: 1 1 auto;
}

.save-bar {
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  padding: var(--space-3) 0 var(--space-1);
}

/* Notices — soft status tint, 1px status border, no shadow */
.banner {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-weight: var(--weight-semibold);
  border: var(--border-width) solid transparent;
}
.banner.success {
  background: var(--color-success-bg);
  color: var(--charcoal);
  border-color: var(--moss);
}
.banner.error {
  background: var(--color-danger-bg);
  color: var(--clay);
  border-color: var(--clay);
}
.field-error {
  color: var(--status-error);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}
input.invalid,
select.invalid {
  border-color: var(--clay);
}
input[readonly] {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
/* Account email on the set-password page: read-only text, not an input box. */
.account-email {
  font-family: var(--font-mono);
  font-size: var(--control-font);
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  word-break: break-all;
}
/* Visually hidden but still in the DOM — e.g. the username field password
 * managers read to associate the saved password with the account. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[hidden] {
  display: none !important;
}

/* History table */
.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: end;
}
.filters .field {
  margin-bottom: 0;
}
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
table.history {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
}
table.history th,
table.history td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: var(--border-width) solid var(--color-border);
  white-space: nowrap;
  vertical-align: top;
}
table.history th {
  background: var(--color-surface-sunken);
  position: sticky;
  top: 0;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
table.history td.num {
  font-family: var(--font-mono);
}
/* Alert rows (fans off, or droplets seen on a ceiling): Clay tint + a left
 * Clay stripe. Clay is the alert color. */
table.history tr.fans-off td,
table.history tr.droplets td {
  background: var(--color-danger-bg);
  color: var(--clay);
  font-weight: var(--weight-medium);
}
table.history tr.fans-off td:first-child,
table.history tr.droplets td:first-child {
  box-shadow: inset 4px 0 0 var(--clay);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--border-width) solid transparent;
}
.pill .pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.pill.yes {
  background: var(--sand);
  color: var(--charcoal);
  border-color: var(--border-subtle);
}
.pill.yes .pill-dot {
  background: var(--moss);
}
.pill.no {
  background: var(--color-danger-bg);
  color: var(--clay);
  border-color: var(--clay);
}
.pill.no .pill-dot {
  background: var(--clay);
}
/* Ceiling pills mirror the fans pills: Dry reads calm, Droplets reads alert. */
.pill.dry {
  background: var(--sand);
  color: var(--charcoal);
  border-color: var(--border-subtle);
}
.pill.dry .pill-dot {
  background: var(--moss);
}
.pill.droplets {
  background: var(--color-danger-bg);
  color: var(--clay);
  border-color: var(--clay);
}
.pill.droplets .pill-dot {
  background: var(--clay);
}
.empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

/* Passcode gate overlay */
.gate {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 10;
}
.gate .card {
  max-width: 420px;
  width: 100%;
  margin: 0;
}

@media (min-width: 620px) {
  .silos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .silos .card {
    margin-bottom: 0;
  }
}