/* Keel prototype — shared app shell styles, built on ERCI design tokens.
   Source: reports/copilot-default/03-design/attempt-2/mockups/assets/tokens.css
   (copied unmodified from baseline/workspace/documentation/brand-kit/ERCI/tokens/tokens.css). */
@import url("tokens.css");

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--surface-canvas);
}
a { color: var(--primary); }
h1, h2, h3 { font-family: var(--font-display); color: var(--text-primary); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--text-h1); font-weight: 600; margin: 0; }
h2 { font-size: var(--text-h2); font-weight: 600; margin: 0 0 var(--space-4); }
h3 { font-size: var(--text-h3); font-weight: 500; margin: 0 0 var(--space-2); }
.numeric { font-variant-numeric: var(--numeric-figures); }

/* Chrome / top bar */
.app-chrome {
  background: var(--surface-chrome);
  color: var(--text-ondark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
}
.app-chrome .brand { display: flex; align-items: center; gap: var(--space-3); }
.app-chrome .brand img { height: 28px; }
.app-chrome .brand-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); }
.app-chrome .subtitle { color: var(--text-ondark-muted); font-size: var(--text-small); }
.app-chrome nav { display: flex; gap: var(--space-4); }
.app-chrome nav a { color: var(--text-ondark-muted); text-decoration: none; font-size: var(--text-small); }
.app-chrome nav a:hover, .app-chrome nav a.active { color: var(--text-ondark); }
.app-chrome .session { font-size: var(--text-small); color: var(--text-ondark-muted); }

/* Privileged/confidential banner — evidenced on every source screen */
.confidential-banner {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--spark-200);
  color: var(--status-danger);
  font-size: var(--text-small);
  padding: var(--space-2) var(--space-6);
  text-align: center;
}

/* Page shell */
.page { max-width: 1180px; margin: 0 auto; padding: var(--space-6); }
.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.card + .card { margin-top: var(--space-4); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-small);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-raised); color: var(--primary); border-color: var(--border-control); }
.btn-danger { background: var(--status-danger-bg); color: var(--status-danger); border-color: var(--spark-200); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Forms */
label { display: block; font-size: var(--text-micro); color: var(--text-muted); margin-bottom: var(--space-1); font-weight: 500; }
input, select, textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--surface-raised);
  color: var(--text-body);
}
.field { margin-bottom: var(--space-4); }
.field.invalid input { border-color: var(--status-danger); }
.field .error { color: var(--status-danger); font-size: var(--text-small); margin-top: var(--space-1); }
.field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.field-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-row input { width: auto; }

/* Site details window chrome */
.site-header {
  background: var(--surface-hero);
  color: var(--text-ondark);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header .site-name { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; }
.site-header .map-it { color: var(--text-ondark-accent); font-size: var(--text-small); }
.site-header .flags { display: flex; gap: var(--space-4); font-size: var(--text-small); color: var(--text-ondark-muted); }

/* Tab strip */
.tabs {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface-sunken);
  border-bottom: 2px solid var(--border-strong);
}
.tabs a {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tabs a.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--surface-raised); }
.tab-panel { background: var(--surface-raised); border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: var(--space-6); border: 1px solid var(--border-default); border-top: none; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
th { text-align: left; font-size: var(--text-micro); color: var(--text-muted); font-weight: 600; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); }
td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); }
td.numeric, th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 600; border-top: 2px solid var(--border-strong); border-bottom: none; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }

/* Badges */
.badge { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-micro); font-weight: 600; }
.badge-danger { background: var(--status-danger-bg); color: var(--status-danger); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning); }
.badge-success { background: var(--status-success-bg); color: var(--status-success); }
.badge-info { background: var(--status-info-bg); color: var(--status-info); }

/* Empty / validation states */
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); color: var(--text-muted); }
.empty-state .icon { font-size: 32px; margin-bottom: var(--space-2); }
.helptext { font-size: var(--text-small); color: var(--text-muted); }

/* Search filter grid */
.filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }

/* Screen-state disclosure widgets (native <details>, no JS) — used to demonstrate
   empty/validation/error/loading states inline within a static mockup, per
   design-review requirement to show, not just describe, relevant states. */
.state-toggle { margin: var(--space-4) 0; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.state-toggle summary {
  cursor: pointer; font-weight: 600; color: var(--primary); padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken); list-style: none; font-size: var(--text-small);
}
.state-toggle summary::-webkit-details-marker { display: none; }
.state-toggle summary::before { content: "▸ "; }
.state-toggle[open] summary::before { content: "▾ "; }
.state-panel { padding: var(--space-4); border-top: 1px solid var(--border-default); background: var(--surface-raised); }
.state-na { color: var(--text-muted); font-style: italic; font-size: var(--text-small); padding: var(--space-3) var(--space-4); }
.field.invalid label { color: var(--status-danger); }

/* Footer / mockup nav strip — NOT part of the product, aids review navigation only */
.mockup-nav {
  background: var(--neutral-900);
  color: var(--text-ondark-muted);
  font-size: var(--text-micro);
  padding: var(--space-2) var(--space-6);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mockup-nav a { color: var(--navy-300); }
.mockup-nav .label { color: var(--text-ondark-muted); }