/* India statutory books — review console.
   ------------------------------------------------------------
   Built on the estate's design tokens (web/tokens/, copied from the same
   source every other app uses): Sand page, Moss header, white panels, Neon as
   the signature accent, Bagoss Standard for headings and Outfit for body. No
   app-specific palette: this console sits beside the launcher and the UAT
   runner and should look like the same product.

   The one deliberate exception is the state colours. "verified", "no lock" and
   "not fenced" have to be told apart at a glance and the brand greens sit close
   together, so those come from the sub-brand hues (Rowan, Orange, Sage) rather
   than from --accent. */

@import url('tokens/colors.css');
@import url('tokens/fonts.css');
@import url('tokens/spacing.css');
@import url('tokens/typography.css');

:root {
  --v-ok: #1b7f3b;
  --v-ok-bg: var(--color-sage);
  --v-bad: #b3261e;
  --v-bad-bg: #fbe9e7;
  --v-warn: #8a4b00;
  --v-warn-bg: #fdefd7;
}

/* [hidden] must outrank any later display rule, or an element the app hides by
   attribute stays on screen. The gate is position:fixed and inset:0, so when
   that happens the page sits on "Signing in…" for ever with the app rendered
   underneath and nothing in the console to say why. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
}

/* ------------------------------------------------------------------ header */
.bar {
  background: var(--surface-moss);
  color: var(--text-on-dark);
  position: sticky;
  top: 0;
  z-index: 2;
}
.bar-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-height: 60px;
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.mark { width: var(--stroke-heavy); height: 34px; background: var(--accent); display: block; flex: none; }
.bar h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-h3);
  margin: 0;
  min-width: 0;
}
.bar p { margin: 0; font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.72); word-break: break-all; }
.who { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.85); }
.tier {
  border: var(--stroke-thin) solid var(--border-on-dark);
  border-radius: var(--radius-capsule);
  padding: 2px var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  color: var(--accent);
}

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

/* ------------------------------------------------------------------ panels */
.panel {
  background: var(--surface-card);
  border: var(--stroke-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.panel h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}
p.lede { margin: 0 0 var(--space-4); color: var(--text-secondary); max-width: 78ch; }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------- facts */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.fact dt {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  font-weight: var(--weight-semibold);
}
.fact dd { margin: var(--space-1) 0 0; font-size: var(--fs-body); font-variant-numeric: tabular-nums; word-break: break-word; }

/* ------------------------------------------------------------------ inputs */
label { font-size: var(--fs-caption); color: var(--text-secondary); }
input[type="date"] {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--stroke-thin) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
}
.check { display: flex; align-items: center; gap: var(--space-2); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Capsule CTAs, per the brand's pill UI. */
button.btn {
  font: inherit;
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-capsule);
  border: var(--stroke-thin) solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}
button.btn:hover:not(:disabled) { background: var(--color-sand); }
button.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
button.btn.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
button.btn:disabled { opacity: 0.45; cursor: default; }
button.btn.small { padding: var(--space-1) var(--space-3); font-size: var(--fs-caption); }
.who button.btn { background: transparent; border-color: var(--border-on-dark); color: var(--text-on-dark); }
.who button.btn:hover { background: rgba(255, 255, 255, 0.1); }
button.linkish { background: none; border: none; color: var(--color-teal); cursor: pointer; padding: 0; font: inherit; font-size: var(--fs-caption); text-decoration: underline; }

.status { font-size: var(--fs-caption); color: var(--text-secondary); }

/* ------------------------------------------------------------------ tables */
.table-scroll { overflow-x: auto; border-radius: inherit; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-3); border-bottom: var(--stroke-thin) solid var(--border-subtle); vertical-align: top; }
th {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  white-space: nowrap;
}
thead th { position: sticky; top: 0; background: var(--surface-card); z-index: 1; }
tbody tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.selected td, tr.clickable:hover td { background: var(--color-sand); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-caption); white-space: nowrap; }

/* ------------------------------------------------------------------- chips */
.chip {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: var(--radius-capsule);
  background: var(--color-heather);
  color: var(--text-secondary);
}
.chip.good { background: var(--v-ok-bg); color: var(--v-ok); }
.chip.warn { background: var(--v-warn-bg); color: var(--v-warn); }
.chip.bad { background: var(--v-bad-bg); color: var(--v-bad); }

.verdict {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-medium);
}
.verdict.ok { background: var(--v-ok-bg); color: var(--v-ok); }
.verdict.bad { background: var(--v-bad-bg); color: var(--v-bad); }
.verdict.pending { background: var(--color-heather); color: var(--text-secondary); }

details { margin-top: var(--space-4); }
summary { cursor: pointer; font-size: var(--fs-caption); color: var(--text-secondary); }
pre {
  background: var(--color-sand);
  border: var(--stroke-thin) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-caption);
  line-height: 1.5;
  max-height: 420px;
}
.empty { padding: var(--space-5); color: var(--text-muted); }

.detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.detail-actions { display: flex; gap: var(--space-2); }

/* -------------------------------------------------------------------- gate */
.gate { position: fixed; inset: 0; background: var(--surface-page); display: grid; place-items: center; z-index: 10; padding: var(--space-5); }
.gate-card {
  background: var(--surface-card);
  border: var(--stroke-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  max-width: 480px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.gate-card h2 { font-family: var(--font-display); font-weight: var(--weight-medium); margin: 0 0 var(--space-2); font-size: var(--fs-h4); }
.gate-card p { color: var(--text-secondary); margin: 0 0 var(--space-4); white-space: pre-wrap; text-align: left; }

@media (max-width: 640px) {
  main { padding: var(--space-4) var(--space-3); }
  .panel { padding: var(--space-4); }
}