/* Geogram component library — v1 (canonical, served by Geogram.Web).
   Mirror of ui/design-system/components.css + G5 identity additions.
   Depends on tokens.css. Class prefix: gg- */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: var(--lh-tight); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-4); }
a  { color: var(--color-link); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.gg-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.gg-container--narrow { max-width: var(--container-narrow); }
.gg-muted { color: var(--color-text-muted); }
.gg-faint { color: var(--color-text-faint); font-size: var(--fs-sm); }
.gg-mono  {
  font-family: var(--font-mono);
  font-size: 0.9em;
  word-break: break-word;
  overflow-wrap: anywhere;
}
pre.gg-mono {
  max-width: 100%;
  white-space: pre-wrap;
}
.gg-shell-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.gg-main-pad {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
}
.gg-section-note {
  margin-top: var(--sp-4);
}

/* ---- skip link (a11y bar) ---- */
.gg-skip {
  position: absolute; left: var(--sp-3); top: -3rem;
  background: var(--color-brand); color: var(--white);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
  z-index: 10; transition: top var(--dur-fast) var(--ease-out);
}
.gg-skip:focus { top: var(--sp-3); }

/* ---- buttons (min touch target 44px) ---- */
.gg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: 0 var(--sp-5);
  font: inherit; font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.gg-btn--primary { background: var(--color-brand); color: var(--white); }
.gg-btn--primary:hover { background: var(--color-brand-strong); }
.gg-btn--secondary {
  background: var(--color-surface); color: var(--color-brand);
  border-color: var(--color-border-strong);
}
.gg-btn--secondary:hover { border-color: var(--color-brand); }
.gg-btn--danger { background: var(--verdict-stop-strong); color: var(--white); }
.gg-btn--block { width: 100%; }
.gg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.gg-btn.is-busy { opacity: 0.7; cursor: progress; }

/* ---- forms ---- */
.gg-field { margin-bottom: var(--sp-4); }
.gg-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: var(--sp-1); }
.gg-input, .gg-select, .gg-textarea {
  width: 100%; min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  font: inherit; color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.gg-input:focus, .gg-select:focus, .gg-textarea:focus { border-color: var(--color-focus); }
.gg-input[aria-invalid="true"] { border-color: var(--verdict-stop-strong); }
.gg-help { font-size: var(--fs-sm); color: var(--color-text-faint); margin-top: var(--sp-1); }
.gg-fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.gg-field--inline { flex: 1 1 18rem; margin-bottom: 0; }
.gg-checks { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
/* Full-row hit target ≥44px so the whole label is tappable, not just the box. */
.gg-check {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch-min);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.gg-check:hover { border-color: var(--color-brand); }
.gg-check:has(input:checked) { border-color: var(--color-brand); background: var(--navy-100); }
.gg-check:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.gg-check input { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---- cards & surfaces ---- */
.gg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.gg-card--flat { box-shadow: none; }
.gg-card__body { padding: var(--sp-5); }
.gg-card__row {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--sp-3);
}
.gg-card__row:last-child { border-bottom: 0; }
.gg-timeline-row {
  min-width: 0;
}
.gg-timeline-row > * {
  max-width: 100%;
  min-width: 0;
}
.gg-timeline-row p {
  overflow-wrap: anywhere;
}

/* ---- pills & badges ---- */
.gg-pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--bg-100); color: var(--ink-700);
}
.gg-pill--ok   { background: var(--verdict-ok-bg);   color: var(--verdict-ok-fg); }
.gg-pill--stop { background: var(--verdict-stop-bg); color: var(--verdict-stop-fg); }
.gg-pill--warn { background: var(--verdict-warn-bg); color: var(--verdict-warn-fg); }
.gg-pill--brand{ background: var(--navy-100);        color: var(--navy-700); }

/* ---- alert / status (G5: never colour-only — icon + text + ARIA role) ---- */
.gg-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-sm);
}
.gg-alert__icon { font-size: var(--fs-md); line-height: 1; margin-top: 1px; flex: none; }
.gg-alert--ok   { background: var(--verdict-ok-bg);   color: var(--verdict-ok-fg);   border-color: var(--verdict-ok-strong); }
.gg-alert--stop { background: var(--verdict-stop-bg); color: var(--verdict-stop-fg); border-color: var(--verdict-stop-strong); }
.gg-alert--warn { background: var(--verdict-warn-bg); color: var(--verdict-warn-fg); border-color: var(--verdict-warn-strong); }
.gg-alert[hidden] { display: none; }

/* ---- avatar ---- */
.gg-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-100); color: var(--navy-700);
  font-weight: var(--fw-medium); font-size: var(--fs-sm);
  flex: none;
}

/* ---- members table ---- */
.gg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gg-table caption { text-align: left; font-weight: var(--fw-semibold); padding: 0 0 var(--sp-3); font-size: var(--fs-base); }
.gg-table th, .gg-table td { text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.gg-table th { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.gg-table tr:last-child td { border-bottom: 0; }
.gg-table td { overflow-wrap: anywhere; }

.gg-details {
  display: grid;
  gap: var(--sp-2);
}
.gg-details > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
  gap: var(--sp-3);
}
.gg-details dt {
  color: var(--color-text-muted);
}
.gg-details dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.gg-qr {
  align-self: start;
  display: inline-flex;
  max-width: 100%;
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.gg-qr svg {
  width: min(100%, 16rem);
  height: auto;
}
.gg-rolewrap { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

/* ---- nav ---- */
.gg-nav { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) 0; }
.gg-nav__brand { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: inherit; text-decoration: none; }
.gg-nav__links { display: flex; gap: var(--sp-4); margin-left: auto; align-items: center; }
.gg-nav__links a, .gg-nav__links .gg-faint { text-decoration: none; color: var(--color-text-muted); font-size: var(--fs-sm); }
.gg-nav__links a:hover { color: var(--color-text); }

@media (max-width: 48rem) {
  .gg-container { padding: 0 var(--sp-4); }
  .gg-card__body { padding: var(--sp-4); }
  .gg-nav {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .gg-nav__links {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
  }
  .gg-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .gg-table--responsive thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .gg-table--responsive,
  .gg-table--responsive tbody,
  .gg-table--responsive tr,
  .gg-table--responsive td {
    display: block;
    width: 100%;
  }
  .gg-table--responsive tr {
    padding: var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .gg-table--responsive tr + tr {
    margin-top: var(--sp-3);
  }
  .gg-table--responsive td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
  }
  .gg-table--responsive td::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
  }
  .gg-table--responsive td:last-child {
    border-bottom: 0;
  }
  .gg-timeline-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sp-1);
  }
  .gg-timeline-row p {
    margin-bottom: 0;
  }
  .gg-details > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-1);
  }
}

/* ---- auth layout ---- */
.gg-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); }
.gg-auth__card { width: 100%; max-width: 26rem; }
.gg-brandmark { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--color-brand); display: inline-flex; gap: var(--sp-2); align-items: center; }
.gg-steps { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.gg-steps li { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--line-200); }
.gg-steps li.is-active { background: var(--color-brand); }
.gg-steps li.is-done { background: var(--verdict-ok-strong); }

/* ---- G6 proofing: fixture qualifier ---- */
/* Sandbox/fixture provenance banner. Load-bearing trust honesty: it must be
   impossible to mistake fixture proofing for production KYB. */
.gg-fixture {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--verdict-warn-strong);
  background: var(--verdict-warn-bg); color: var(--verdict-warn-fg);
  border-radius: var(--radius-md); font-size: var(--fs-sm);
}
.gg-fixture__icon { flex: none; font-weight: var(--fw-semibold); }
.gg-fixture strong { color: var(--amber-900); }
.gg-fixture__tag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--amber-900); color: var(--white);
  padding: 0 var(--sp-2); border-radius: var(--radius-sm); margin-left: var(--sp-1);
}

/* ---- G6 proofing: evidence badges ---- */
.gg-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gg-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
  background: var(--navy-100); color: var(--navy-700);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  border: 1px solid var(--navy-200);
}
.gg-badge::before { content: "✓"; font-weight: var(--fw-semibold); }

/* ---- G6 proofing: pipeline stepper ---- */
.gg-pipeline { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; list-style: none; }
.gg-pipe-step {
  flex: 1 1 7rem; min-width: 7rem; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--fs-xs); color: var(--color-text-faint); background: var(--bg-50);
}
.gg-pipe-step b { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); font-weight: var(--fw-medium); }
.gg-pipe-step.is-done { border-color: var(--verdict-ok-strong); background: var(--verdict-ok-bg); color: var(--verdict-ok-fg); }
.gg-pipe-step.is-done b { color: var(--verdict-ok-fg); }
.gg-pipe-step.is-active { border-color: var(--color-brand); background: var(--navy-100); color: var(--navy-700); }
.gg-pipe-step.is-active b { color: var(--navy-900); }
.gg-pipe-step.is-stop { border-color: var(--verdict-stop-strong); background: var(--verdict-stop-bg); color: var(--verdict-stop-fg); }

/* ---- G6 proofing: verified-sender card ---- */
.gg-sender-card {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-card);
  overflow: hidden; max-width: 30rem;
}
.gg-sender-card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-bottom: 1px solid var(--color-border);
  background: var(--navy-100);
}
.gg-sender-card__seal { font-size: var(--fs-xl); color: var(--color-brand); flex: none; }
.gg-sender-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--navy-900); }
.gg-sender-card__body { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.gg-sender-card__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.gg-sender-card__row dt { color: var(--color-text-faint); margin: 0; }
.gg-sender-card__row dd { margin: 0; color: var(--color-text); text-align: right; }

/* ---- utility ---- */
.gg-stack > * + * { margin-top: var(--sp-4); }
.gg-stack--tight > * + * { margin-top: var(--sp-2); }
.gg-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.gg-row--end { justify-content: flex-end; }
.gg-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.gg-form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.gg-field--span { grid-column: 1 / -1; }
.gg-form-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.gg-divider { height: 1px; background: var(--color-border); margin: var(--sp-5) 0; border: 0; }
.gg-danger-panel {
  border-left: 3px solid var(--verdict-stop-strong);
  padding-left: var(--sp-3);
}
.gg-danger-zone {
  border: 1px solid var(--verdict-stop-strong);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--verdict-stop-strong) 8%, var(--white));
}
.gg-danger-zone h3 {
  margin-bottom: 0;
}
.gg-sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[hidden] { display: none !important; }