/**
 * Gated Document Signing — shared UI system (visitor + admin)
 * Tokens → typography → layout → forms → buttons → surfaces → states → responsive
 */

/* -------------------------------------------------------------------------- */
/* Fonts */
/* -------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* fallback when system UI is unavailable */

/* -------------------------------------------------------------------------- */
/* Design tokens */
/* -------------------------------------------------------------------------- */

:root {
  --gds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gds-text: #1d1d1f;
  --gds-text-secondary: #424245;
  --gds-muted: #6e6e73;
  --gds-muted-quiet: #86868b;

  --gds-page: #f5f5f7;
  --gds-surface: #ffffff;
  --gds-surface-raised: #ffffff;
  --gds-surface-subtle: #fafafa;
  --gds-surface-inset: #fbfbfd;

  --gds-border: #d2d2d7;
  --gds-border-strong: #b0b0b5;
  --gds-border-focus: #6e6e73;

  /* Primary actions: charcoal (Apple-style) instead of saturated blue */
  --gds-accent: #1d1d1f;
  --gds-accent-hover: #000000;
  --gds-accent-muted: rgba(0, 0, 0, 0.06);
  --gds-accent-ring: rgba(0, 0, 0, 0.16);
  --gds-accent-border: rgba(0, 0, 0, 0.22);
  --gds-file-icon-border: rgba(0, 0, 0, 0.1);

  --gds-success: #047857;
  --gds-success-bg: #ecfdf5;
  --gds-success-border: #a7f3d0;

  --gds-danger: #b91c1c;
  --gds-danger-bg: #fef2f2;
  --gds-danger-border: #fecaca;

  --gds-warning-text: #92400e;
  --gds-warning-bg: #fffbeb;
  --gds-warning-border: #fde68a;

  --gds-radius-sm: 6px;
  --gds-radius-md: 10px;
  --gds-radius-lg: 14px;
  --gds-radius-full: 999px;

  --gds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --gds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --gds-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);

  --gds-space-1: 4px;
  --gds-space-2: 8px;
  --gds-space-3: 12px;
  --gds-space-4: 16px;
  --gds-space-5: 20px;
  --gds-space-6: 24px;
  --gds-space-8: 32px;

  --gds-text-xs: 0.75rem;
  --gds-text-sm: 0.8125rem;
  --gds-text-base: 0.9375rem;
  --gds-text-lg: 1.0625rem;
  --gds-text-xl: 1.25rem;

  --gds-leading-tight: 1.25;
  --gds-leading-snug: 1.4;
  --gds-leading-normal: 1.5;

  --gds-wrap-max: 960px;
  --gds-touch-min: 44px;

  /* Aliases — used by inline styles in PHP (viewer, admin) */
  --border: var(--gds-border);
  --text: var(--gds-text);
  --muted: var(--gds-muted);
  --accent: var(--gds-accent);
  --danger: var(--gds-danger);
  --ok: var(--gds-success);
  --dangerSoft: var(--gds-danger-bg);
  --okSoft: var(--gds-success-bg);
  --shadow: var(--gds-shadow-card);
  --panel: var(--gds-surface);
}

body.gds-app--admin {
  --gds-wrap-max: 1180px;
}

/* -------------------------------------------------------------------------- */
/* Reset & base */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.gds-app {
  margin: 0;
  font-family: var(--gds-font);
  font-size: var(--gds-text-base);
  line-height: var(--gds-leading-normal);
  color: var(--gds-text);
  background: var(--gds-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------- */
/* Layout */
/* -------------------------------------------------------------------------- */

.gds-wrap {
  max-width: var(--gds-wrap-max);
  margin: 0 auto;
  padding: var(--gds-space-6) var(--gds-space-4) var(--gds-space-8);
}

@media (min-width: 640px) {
  .gds-wrap {
    padding-inline: var(--gds-space-6);
  }
}

.gds-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gds-space-4);
  margin-bottom: var(--gds-space-5);
  padding-bottom: var(--gds-space-4);
  border-bottom: 1px solid var(--gds-border);
}

.gds-brand {
  display: flex;
  gap: var(--gds-space-3);
  align-items: flex-start;
  min-width: 0;
}

.gds-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--gds-radius-md);
  flex-shrink: 0;
  background: linear-gradient(145deg, #2d2d2d 0%, #52525b 100%);
  box-shadow: var(--gds-shadow-sm);
}

/* Uploaded logo: transparent, unboxed (PNG/SVG with alpha look correct) */
.gds-logo-img {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  width: auto;
  height: auto;
  max-height: 40px;
  max-width: 40px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gds-logo-img--square {
  max-height: 40px;
  max-width: 40px;
}

/* Horizontal / wordmark — extra width in the bar so it stays legible */
.gds-logo-img--wide {
  max-height: 44px;
  max-width: min(150px, 58vw);
}

@media (min-width: 720px) {
  .gds-logo-img--wide {
    max-height: 48px;
    max-width: 150px;
  }
}

/* Portrait / stacked mark */
.gds-logo-img--portrait {
  max-height: 56px;
  max-width: 80px;
}

.gds-topbar--logo-wide,
.gds-topbar--logo-portrait,
.gds-topbar--logo-square {
  align-items: center;
}

.gds-topbar--logo-wide .gds-brand,
.gds-topbar--logo-portrait .gds-brand {
  align-items: center;
}

.gds-topbar--logo-wide {
  padding-bottom: var(--gds-space-5);
}

.gds-topbar--logo-wide .gds-brand {
  gap: var(--gds-space-3);
}

.gds-product-name {
  font-size: var(--gds-text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gds-text);
  line-height: var(--gds-leading-tight);
}

.gds-product-tag {
  font-size: var(--gds-text-xs);
  color: var(--gds-muted);
  margin-top: 2px;
  line-height: var(--gds-leading-snug);
}

.gds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gds-space-2);
  padding: var(--gds-space-1) var(--gds-space-3);
  border-radius: var(--gds-radius-full);
  border: 1px solid var(--gds-border);
  background: var(--gds-surface);
  color: var(--gds-muted);
  font-size: var(--gds-text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.gds-pill--success {
  color: #047857;
  border-color: rgba(4, 120, 87, 0.4);
  background: rgba(16, 185, 129, 0.12);
}

.gds-pill--info {
  color: #1d4ed8;
  border-color: rgba(29, 78, 216, 0.4);
  background: rgba(59, 130, 246, 0.12);
}

.gds-pill--warn {
  color: #92400e;
  border-color: rgba(146, 64, 14, 0.4);
  background: rgba(245, 158, 11, 0.14);
}

.gds-pill--muted {
  color: var(--gds-muted);
  border-color: var(--gds-border);
  background: var(--gds-surface-subtle);
}

.gds-admin-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gds-space-2) var(--gds-space-3);
  font-size: var(--gds-text-sm);
}

.gds-admin-nav a {
  color: var(--gds-text-secondary);
  text-decoration: none;
  padding: var(--gds-space-1) var(--gds-space-2);
  border-radius: var(--gds-radius-sm);
}

.gds-admin-nav a:hover {
  color: var(--gds-accent);
  background: var(--gds-surface-subtle);
  text-decoration: none;
}

.gds-admin-nav a.is-active {
  color: var(--gds-accent);
  font-weight: 600;
  background: var(--gds-accent-muted);
}

/* -------------------------------------------------------------------------- */
/* Typography */
/* -------------------------------------------------------------------------- */

.gds-page-title {
  margin: 0 0 var(--gds-space-2);
  font-size: var(--gds-text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gds-text);
  line-height: var(--gds-leading-tight);
}

.gds-section-title {
  margin: 0 0 var(--gds-space-3);
  font-size: var(--gds-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gds-muted);
}

.gds-lead {
  margin: 0 0 var(--gds-space-4);
  font-size: var(--gds-text-sm);
  color: var(--gds-muted);
  line-height: var(--gds-leading-snug);
}

.gds-muted {
  color: var(--gds-muted);
  font-size: var(--gds-text-sm);
}

.gds-help {
  display: block;
  margin-top: var(--gds-space-1);
  font-size: var(--gds-text-xs);
  color: var(--gds-muted-quiet);
  line-height: var(--gds-leading-snug);
}

/* -------------------------------------------------------------------------- */
/* Cards & surfaces */
/* -------------------------------------------------------------------------- */

.gds-card {
  background: var(--gds-surface-raised);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-lg);
  padding: var(--gds-space-5);
  box-shadow: var(--gds-shadow-card);
}

.gds-card--tight {
  padding: var(--gds-space-4);
}

.gds-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gds-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--gds-space-4);
}

.gds-divider {
  height: 1px;
  background: var(--gds-border);
  margin: var(--gds-space-4) 0;
  border: 0;
}

/* Legacy .card — keep behavior, map to system */
.card {
  background: var(--gds-surface-raised);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-lg);
  padding: var(--gds-space-5);
  box-shadow: var(--gds-shadow-card);
}

/* -------------------------------------------------------------------------- */
/* Grid / rows */
/* -------------------------------------------------------------------------- */

.row {
  display: flex;
  gap: var(--gds-space-4);
  flex-wrap: wrap;
}

.row > * {
  flex: 1;
  min-width: 0;
}

@media (max-width: 560px) {
  .row {
    flex-direction: column;
    /* Several forms use inline align-items:flex-end to baseline a submit
       button with the adjacent input on desktop. When the row turns into
       a column, "flex-end" becomes the horizontal end (right) and content
       gets right-aligned with empty space on the left. Stretch beats both. */
    align-items: stretch !important;
  }
  .row > * {
    /* In column mode flex:1 stretches children VERTICALLY; cancel that
       and instead make them all take the full row width so the form looks
       balanced. */
    flex: 0 0 auto !important;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Forms */
/* -------------------------------------------------------------------------- */

.gds-field {
  margin-bottom: var(--gds-space-4);
}

.gds-field:last-child {
  margin-bottom: 0;
}

/* Visitor signing — step 1 detail form (NDA + investment commitment) */
.gds-sign-detail-form {
  margin-top: var(--gds-space-4);
}

.gds-sign-detail-form .gds-form-section {
  margin-bottom: var(--gds-space-5);
  padding-bottom: var(--gds-space-5);
  border-bottom: 1px solid var(--gds-border);
}

.gds-sign-detail-form .gds-form-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.gds-sign-detail-form .gds-form-section > .gds-section-title {
  margin-bottom: var(--gds-space-3);
}

.gds-label,
label.gds-label {
  display: block;
  font-size: var(--gds-text-xs);
  font-weight: 600;
  color: var(--gds-text-secondary);
  margin-bottom: var(--gds-space-2);
  letter-spacing: 0.02em;
}

label.muted {
  font-size: var(--gds-text-xs);
  font-weight: 600;
  color: var(--gds-text-secondary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  min-height: var(--gds-touch-min);
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--gds-text-sm);
  line-height: var(--gds-leading-snug);
  color: var(--gds-text);
  background: var(--gds-surface);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-md);
  box-shadow: var(--gds-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--gds-muted-quiet);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--gds-border-strong);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gds-border-focus);
  box-shadow: 0 0 0 3px var(--gds-accent-ring);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--gds-surface-inset);
}

/* -------------------------------------------------------------------------- */
/* Buttons */
/* -------------------------------------------------------------------------- */

button,
[role="button"] {
  font-family: inherit;
}

button {
  min-height: var(--gds-touch-min);
  padding: 10px 18px;
  font-size: var(--gds-text-sm);
  font-weight: 600;
  border-radius: var(--gds-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Default button = primary (legal CTA). Excludes anything with "btn" in the class
   name (so .btn-primary / .btn-secondary / etc. keep their own styling), .dzBtn (the
   dropzone "Choose file" trigger), and .gds-admin-tab (the project tab buttons own
   their own active/inactive styling further down in this file — without this opt-out
   every tab inherits the charcoal CTA look and the active tab gets overridden by it). */
button:not([class*="btn"]):not(.dzBtn):not(.gds-admin-tab) {
  background: var(--gds-accent);
  color: #fff;
  border-color: var(--gds-accent-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

button:not([class*="btn"]):not(.dzBtn):not(.gds-admin-tab):hover:not(:disabled) {
  background: var(--gds-accent-hover);
}

button:not([class*="btn"]):not(.dzBtn):not(.gds-admin-tab):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gds-accent-ring);
}

button:not([class*="btn"]):not(.dzBtn):not(.gds-admin-tab):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gds-space-2);
  min-height: var(--gds-touch-min);
  padding: 10px 18px;
  font-size: var(--gds-text-sm);
  font-weight: 600;
  border-radius: var(--gds-radius-md);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  /* Keep labels intact when a button is squeezed by a flex parent.
     Mobile/full-width buttons (.gds-actions .btn at <=640px) override
     this via stretch behaviour and don't need to wrap mid-word. */
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gds-accent-ring);
}

.btn-primary {
  background: var(--gds-accent);
  color: #fff;
  border-color: var(--gds-accent-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-primary:hover:not(:disabled) {
  background: var(--gds-accent-hover);
}

.btn-secondary {
  background: var(--gds-surface);
  color: var(--gds-text);
  border-color: var(--gds-border-strong);
  box-shadow: var(--gds-shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gds-surface-subtle);
  border-color: var(--gds-border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--gds-text-secondary);
  border-color: var(--gds-border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gds-surface-subtle);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

a.btn.gds-btn--compact,
button.gds-btn--compact {
  min-height: 36px;
  padding: 8px 14px;
  font-size: var(--gds-text-xs);
}

.gds-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gds-space-3);
  flex-wrap: wrap;
  margin-top: var(--gds-space-5);
}

.gds-actions--split {
  justify-content: space-between;
  align-items: center;
}

.gds-actions--funding {
  justify-content: flex-start;
  margin-top: var(--gds-space-3);
}

/* Signed NDA + contract downloads grouped below funding / files intro */
.gds-signed-docs {
  margin-top: var(--gds-space-4);
  padding-top: var(--gds-space-4);
  border-top: 1px solid var(--gds-border);
}
.gds-signed-docs__label {
  font-size: var(--gds-text-xs);
  color: var(--gds-muted, #6b7280);
  margin-bottom: var(--gds-space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gds-signed-docs__actions {
  justify-content: flex-start;
  gap: var(--gds-space-2);
  margin-top: 0;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------- */
/* Alerts & states */
/* -------------------------------------------------------------------------- */

.err {
  background: var(--gds-danger-bg);
  border: 1px solid var(--gds-danger-border);
  color: var(--gds-danger);
  padding: var(--gds-space-3) var(--gds-space-4);
  border-radius: var(--gds-radius-md);
  font-size: var(--gds-text-sm);
  line-height: var(--gds-leading-snug);
}

.err strong {
  font-weight: 600;
}

.ok {
  background: var(--gds-success-bg);
  border: 1px solid var(--gds-success-border);
  color: var(--gds-success);
  padding: var(--gds-space-3) var(--gds-space-4);
  border-radius: var(--gds-radius-md);
  font-size: var(--gds-text-sm);
}

.list {
  margin: var(--gds-space-2) 0 0;
  padding-left: var(--gds-space-5);
}

.list li {
  margin-bottom: var(--gds-space-1);
}

/* -------------------------------------------------------------------------- */
/* Tables */
/* -------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--gds-text-sm);
}

th,
td {
  padding: var(--gds-space-3) var(--gds-space-3);
  border-bottom: 1px solid var(--gds-border);
  text-align: left;
  vertical-align: middle;
}

th {
  font-size: var(--gds-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gds-muted);
  background: var(--gds-surface-inset);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: var(--gds-surface-subtle);
}

.gds-table-wrap {
  margin-top: var(--gds-space-3);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-md);
  overflow: hidden;
  background: var(--gds-surface);
}

.gds-table-wrap table {
  margin: 0;
}

.gds-table-wrap th:first-child,
.gds-table-wrap td:first-child {
  padding-left: var(--gds-space-4);
}

.gds-table-wrap th:last-child,
.gds-table-wrap td:last-child {
  padding-right: var(--gds-space-4);
}

td.gds-table-actions {
  text-align: right;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* File list */
/* -------------------------------------------------------------------------- */

.fileName {
  display: flex;
  align-items: center;
  gap: var(--gds-space-3);
  min-width: 0;
}

.fileIcon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}

.fileName a {
  font-weight: 500;
  color: var(--gds-accent);
  text-decoration: none;
  word-break: break-word;
}

.fileName a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Stepper */
/* -------------------------------------------------------------------------- */

.stepper {
  display: flex;
  gap: var(--gds-space-2);
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 var(--gds-space-5);
  padding: var(--gds-space-2);
  background: var(--gds-surface-inset);
  border-radius: var(--gds-radius-md);
  border: 1px solid var(--gds-border);
}

.step {
  display: inline-flex;
  align-items: center;
  gap: var(--gds-space-2);
  padding: var(--gds-space-2) var(--gds-space-3);
  border-radius: var(--gds-radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gds-muted);
  font-size: var(--gds-text-sm);
  font-weight: 500;
}

.step.active {
  color: var(--gds-text);
  border-color: var(--gds-border);
  background: var(--gds-surface);
  box-shadow: var(--gds-shadow-sm);
  font-weight: 600;
}

.step .num {
  width: 22px;
  height: 22px;
  border-radius: var(--gds-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gds-surface-subtle);
  color: var(--gds-text-secondary);
  font-size: var(--gds-text-xs);
  font-weight: 700;
}

.step.active .num {
  background: var(--gds-accent);
  color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Toggle / agreement */
/* -------------------------------------------------------------------------- */

.toggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gds-space-4);
  padding: var(--gds-space-4);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-md);
  background: var(--gds-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.toggleRow:hover {
  border-color: var(--gds-border-strong);
}

.toggleRow .label {
  min-width: 0;
}

.toggleRow .label strong {
  display: block;
  font-weight: 600;
  font-size: var(--gds-text-sm);
  color: var(--gds-text);
}

.toggleRow .label .muted {
  margin-top: var(--gds-space-1);
  font-size: var(--gds-text-xs);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gds-space-3);
}

.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch {
  width: 48px;
  height: 28px;
  border-radius: var(--gds-radius-full);
  background: #d1d1d6;
  border: 1px solid var(--gds-border-strong);
  position: relative;
  flex: 0 0 auto;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: var(--gds-radius-full);
  background: #fff;
  box-shadow: var(--gds-shadow-sm);
  transition: transform 0.18s ease;
}

.toggle input:checked + .switch {
  background: #059669;
  border-color: rgba(5, 150, 105, 0.45);
}

.toggle input:checked + .switch::after {
  transform: translateX(20px);
}

.toggle input:focus-visible + .switch {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
}

/* -------------------------------------------------------------------------- */
/* Signing — preview panel & signature */
/* -------------------------------------------------------------------------- */

.gds-sign-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gds-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--gds-space-4);
}

.gds-nda-preview {
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-lg);
  overflow: hidden;
  background: var(--gds-surface-inset);
  box-shadow: var(--gds-shadow-sm);
}

.gds-nda-preview-toolbar {
  padding: var(--gds-space-3) var(--gds-space-4);
  border-bottom: 1px solid var(--gds-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gds-space-3);
  flex-wrap: wrap;
  background: var(--gds-surface);
  font-size: var(--gds-text-sm);
}

.gds-nda-preview-toolbar .gds-nda-nav {
  display: flex;
  gap: var(--gds-space-2);
  align-items: center;
}

.gds-nda-preview-toolbar button {
  min-height: 36px;
  padding: 8px 14px;
  font-size: var(--gds-text-xs);
  font-weight: 600;
}

.gds-nda-canvas-wrap {
  position: relative;
  background: var(--gds-surface-subtle);
}

.gds-nda-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Signature widget — all styling is inline in the PHP templates */

/* -------------------------------------------------------------------------- */
/* Links */
/* -------------------------------------------------------------------------- */

a {
  color: var(--gds-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Admin: dropzone, grid (from admin bootstrap) */
/* -------------------------------------------------------------------------- */

.dropzone {
  border: 1px dashed var(--gds-border-strong);
  border-radius: var(--gds-radius-lg);
  background: var(--gds-surface-inset);
  padding: var(--gds-space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gds-space-3);
  min-height: 72px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.dropzone .dzText { flex: 1 1 240px; min-width: 0; }
.dropzone .dzActions { flex: 0 0 auto; }

.dropzone .dzTitle {
  font-weight: 600;
  font-size: var(--gds-text-sm);
}

.dropzone .dzSub {
  margin-top: 2px;
  font-size: var(--gds-text-xs);
  color: var(--gds-muted);
}

.dropzone .dzBtn {
  padding: 9px 12px;
  border-radius: var(--gds-radius-md);
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--gds-border);
  background: var(--gds-surface);
  color: var(--gds-text);
  cursor: pointer;
  font-size: var(--gds-text-sm);
  font-weight: 500;
  min-height: auto;
}

.dropzone .dzBtn:hover {
  background: var(--gds-surface-subtle);
}

.dropzone.isOver {
  border-color: var(--gds-accent);
  background: var(--gds-accent-muted);
  box-shadow: 0 0 0 3px var(--gds-accent-ring);
}

.dropzone.isBusy {
  opacity: 0.7;
}

.grid2 {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: var(--gds-space-4);
  align-items: start;
}

@media (max-width: 980px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}

.cardTitle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gds-space-3);
  margin: 0 0 var(--gds-space-3);
}

.cardTitle h3 {
  margin: 0;
  font-size: var(--gds-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gds-muted);
  font-weight: 700;
}

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

.kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--gds-space-2) var(--gds-space-3);
  align-items: center;
  font-size: var(--gds-text-sm);
}

@media (max-width: 560px) {
  .kv {
    grid-template-columns: 1fr;
  }
}

.btnGhost {
  padding: 9px 12px;
  border-radius: var(--gds-radius-md);
  border: 1px solid var(--gds-border);
  background: var(--gds-surface);
  color: var(--gds-text);
  cursor: pointer;
  font-size: var(--gds-text-sm);
  font-weight: 500;
  min-height: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--gds-space-2);
}

.btnGhost:hover {
  background: var(--gds-surface-subtle);
  text-decoration: none;
}

.btnPrimary {
  padding: 10px 16px;
  border-radius: var(--gds-radius-md);
  border: 1px solid var(--gds-accent-border);
  background: var(--gds-accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--gds-space-2);
  font-size: var(--gds-text-sm);
  font-weight: 600;
  min-height: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btnPrimary:hover {
  background: var(--gds-accent-hover);
  filter: none;
  text-decoration: none;
}

.subCard {
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-md);
  background: var(--gds-surface-inset);
  padding: var(--gds-space-3);
}

/* -------------------------------------------------------------------------- */
/* Admin console — shared layout */
/* -------------------------------------------------------------------------- */

.gds-flash {
  margin-bottom: var(--gds-space-4);
}

.gds-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gds-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--gds-space-4);
}

.gds-page-header .gds-page-title {
  margin: 0 0 var(--gds-space-1);
}

.gds-page-header .gds-toolbar {
  display: flex;
  gap: var(--gds-space-3);
  align-items: center;
  flex-wrap: wrap;
}

.gds-link-back {
  font-size: var(--gds-text-sm);
  color: var(--gds-muted);
  white-space: nowrap;
}

.gds-link-back:hover {
  color: var(--gds-accent);
}

.gds-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gds-space-4);
  margin-bottom: var(--gds-space-4);
}

.gds-stat-card {
  padding: var(--gds-space-4);
  border-radius: var(--gds-radius-lg);
  border: 1px solid var(--gds-border);
  background: var(--gds-surface-inset);
  box-shadow: var(--gds-shadow-sm);
}

.gds-stat-label {
  font-size: var(--gds-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gds-muted);
  margin-bottom: var(--gds-space-1);
}

.gds-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gds-text);
}

.gds-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gds-space-4);
  margin-bottom: var(--gds-space-4);
}

@media (max-width: 900px) {
  .gds-chart-grid {
    grid-template-columns: 1fr;
  }
}

.gds-analytics-filters {
  margin-bottom: var(--gds-space-4);
}

.gds-analytics-filters .gds-filter-actions {
  flex: 0 0 auto;
  align-self: end;
}

.gds-chart-card h3 {
  margin: 0 0 var(--gds-space-3);
  font-size: var(--gds-text-sm);
  font-weight: 600;
  color: var(--gds-text-secondary);
}

/* Project page — visitor link band (inside tab card) */
.gds-share-banner {
  padding: var(--gds-space-4) var(--gds-space-5);
  background: var(--gds-surface-inset);
  border-bottom: 1px solid var(--gds-border);
}

.gds-share-banner .gds-section-title {
  margin-bottom: var(--gds-space-1);
}

.gds-share-banner__hint {
  margin: 0 0 var(--gds-space-3);
  font-size: var(--gds-text-xs);
  line-height: var(--gds-leading-snug);
  color: var(--gds-muted);
  max-width: 52ch;
}

.gds-share-row {
  display: flex;
  gap: var(--gds-space-2);
  align-items: stretch;
  flex-wrap: wrap;
}

.gds-share-row input[type="text"],
.gds-share-row input.gds-share-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--gds-text-xs);
  letter-spacing: -0.02em;
  background: var(--gds-surface);
}

.gds-share-row .btn {
  flex-shrink: 0;
  align-self: stretch;
}

.gds-share-status {
  margin: var(--gds-space-2) 0 0;
  font-size: var(--gds-text-xs);
  min-height: 1.25em;
}

.gds-admin-tabbar {
  display: flex;
  gap: 4px;
  padding: var(--gds-space-3) var(--gds-space-4) 0;
  background: var(--gds-surface-subtle);
  border-bottom: 1px solid var(--gds-border);
  flex-wrap: wrap;
}

/* Inactive tabs sit flush with the grey tabbar with no chrome — they read as "other
   options" rather than current state. Lighter weight + muted text leaves a clear
   visual ceiling for the active tab to break through. */
.gds-admin-tab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 9px 18px 10px;
  cursor: pointer;
  font: inherit;
  font-size: var(--gds-text-sm);
  font-weight: 500;
  color: var(--gds-muted);
  border-radius: var(--gds-radius-md) var(--gds-radius-md) 0 0;
  margin-bottom: -1px;
  position: relative;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Icon + label structure inside each tab. On desktop both are visible; the icon also
   doubles as a fast visual scan (the contrasting glyph is easier to find than reading
   text labels). On narrow viewports the label collapses to .gds-sr-only via the
   media query below, leaving an icon-only pill — the title= attribute on the button
   surfaces the same label on hover/long-press. */
.gds-admin-tab-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: currentColor;
}
.gds-admin-tab-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.gds-admin-tab-label {
  display: inline-block;
}

.gds-admin-tab:hover {
  color: var(--gds-text);
  background: rgba(15, 23, 42, 0.04);
}

/* Active tab: literal white card with pure black text + bold weight, lifted off the
   grey bar with a real border + drop shadow. The ::after pseudo paints over the
   bottom border so the tab visually merges into the white panel below. No accent
   top bar — this app's --gds-accent is charcoal, not blue, so adding one would draw
   a dark sliver on top of the white card that's already doing the highlighting. */
.gds-admin-tab[aria-selected="true"] {
  color: #000000;
  font-weight: 700;
  background: #ffffff;
  border-color: var(--gds-border);
  box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.08);
}

.gds-admin-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: #ffffff;
  pointer-events: none;
}

.gds-admin-tab:focus-visible {
  outline: 2px solid var(--gds-accent-ring);
  outline-offset: 2px;
}

.gds-admin-tab-panel {
  padding: var(--gds-space-4) var(--gds-space-5);
  background: var(--gds-surface);
}

.gds-logo-preview {
  display: block;
  max-height: 56px;
  max-width: min(360px, 100%);
  object-fit: contain;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.gds-nda-field-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gds-space-5);
}

.gds-nda-field-sidebar {
  flex: 0 0 260px;
}

.gds-nda-field-main {
  flex: 1 1 520px;
  min-width: min(100%, 520px);
}

.gds-field-palette {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-2);
}

.gds-field-palette .fieldBtn {
  text-align: left;
  background: var(--gds-surface);
  color: var(--gds-text);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-md);
  padding: 10px 12px;
  font-size: var(--gds-text-sm);
  font-weight: 500;
  cursor: grab;
  min-height: auto;
  box-shadow: var(--gds-shadow-sm);
}

.gds-field-palette .fieldBtn:hover {
  border-color: var(--gds-border-strong);
  background: var(--gds-surface-subtle);
}

.btn.btn-danger {
  background: var(--gds-surface);
  color: var(--gds-danger);
  border-color: var(--gds-danger-border);
  box-shadow: var(--gds-shadow-sm);
}

.btn.btn-danger:hover:not(:disabled) {
  background: var(--gds-danger-bg);
}

/* -------------------------------------------------------------------------- */
/* Viewer page (public/viewer.php) */
/* -------------------------------------------------------------------------- */

.gds-viewer-card {
  padding: 0;
  overflow: hidden;
}

.gds-viewer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gds-space-3);
  padding: var(--gds-space-3) var(--gds-space-4);
  border-bottom: 1px solid var(--gds-border);
  background: var(--gds-surface);
  flex-wrap: wrap;
}

.gds-viewer-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--gds-space-3);
  min-width: 0;
  flex: 1;
}

.gds-viewer-title {
  font-weight: 600;
  font-size: var(--gds-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(520px, 70vw);
}

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

.gds-viewer-actions button {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--gds-text-xs);
  font-weight: 600;
}

.gds-viewer-pane {
  background: var(--gds-surface-subtle);
  padding: var(--gds-space-5);
}

#gdsSheetHost table.gds-sheet-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

#gdsSheetHost table.gds-sheet-table td {
  border: 1px solid var(--gds-border-strong);
  padding: 2px 6px;
  vertical-align: bottom;
  box-sizing: border-box;
}

#gdsSheetHost .gds-sheet-note {
  padding: var(--gds-space-3) var(--gds-space-4);
  margin: 0;
  color: var(--gds-muted);
  font-size: var(--gds-text-sm);
  border-top: 1px solid var(--gds-border);
  background: var(--gds-surface-inset);
}

/* Word — docx-preview: avoid app CSS that overrides document colors/borders */
.gds-docx-host {
  font-size: 11pt;
  line-height: 1.5;
}

.gds-docx-host .gds-docx-wrapper {
  background: transparent !important;
  padding: var(--gds-space-2) 0 var(--gds-space-4) !important;
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: stretch !important;
}

.gds-docx-host section.gds-docx {
  box-shadow: none !important;
  margin-bottom: var(--gds-space-4) !important;
  width: 100%;
  max-width: 100%;
}

.gds-docx-host section.gds-docx:last-of-type {
  margin-bottom: 0 !important;
}

.gds-docx-host .gds-docx table {
  border-collapse: collapse;
}

/* -------------------------------------------------------------------------- */
/* Utilities */
/* -------------------------------------------------------------------------- */

.gds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Empty state */
.gds-empty {
  text-align: center;
  padding: var(--gds-space-6);
  color: var(--gds-muted);
  font-size: var(--gds-text-sm);
}

/* -------------------------------------------------------------------------- */
/* Welcome modal overlay                                                        */
/* -------------------------------------------------------------------------- */

.gds-welcome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.gds-welcome-backdrop.gds-welcome-out {
  opacity: 0;
  pointer-events: none;
}

.gds-welcome-modal {
  position: relative;
  background: var(--gds-surface);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-lg);
  box-shadow: var(--gds-shadow-card), 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: var(--gds-space-8);
  max-width: 480px;
  width: calc(100% - var(--gds-space-8));
  max-height: calc(100dvh - var(--gds-space-8));
  overflow-y: auto;
  animation: gds-welcome-slide-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gds-welcome-slide-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gds-welcome-backdrop.gds-welcome-out .gds-welcome-modal {
  animation: none;
}

.gds-welcome-close {
  position: absolute;
  top: var(--gds-space-4);
  right: var(--gds-space-4);
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--gds-radius-sm);
  background: var(--gds-accent-muted);
  color: var(--gds-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.gds-welcome-close:hover {
  background: var(--gds-accent-ring);
  color: var(--gds-text);
}

.gds-welcome-close:focus-visible {
  outline: 2px solid var(--gds-border-focus);
  outline-offset: 2px;
}

.gds-welcome-body {
  margin-top: var(--gds-space-4);
  color: var(--gds-text-secondary);
  font-size: var(--gds-text-base);
  line-height: var(--gds-leading-normal);
}

.gds-welcome-body br {
  display: block;
  margin-bottom: 0.4em;
  content: "";
}

/* ─── Media Player ────────────────────────────────────────────────────────── */
.gds-media-player {
  width: 100%;
  max-width: 860px;
  background: var(--gds-surface);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-lg);
  box-shadow: var(--gds-shadow-card);
  overflow: hidden;
}

.gds-media-player--audio {
  max-width: 520px;
  padding: 24px 20px 20px;
}

.gds-media-player--video video {
  display: block;
  width: 100%;
  max-height: 60vh;
  background: #000;
  border-radius: var(--gds-radius-lg) var(--gds-radius-lg) 0 0;
}

.gds-audio-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  color: var(--gds-text-secondary);
}

.gds-audio-title {
  font-size: var(--gds-text-sm);
  font-weight: 500;
  color: var(--gds-text-secondary);
  text-align: center;
  word-break: break-word;
}

.gds-media-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--gds-surface);
  flex-wrap: nowrap;
}

.gds-media-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gds-text);
  cursor: pointer;
  padding: 0;
  transition: background 0.13s;
}

.gds-media-btn:hover {
  background: var(--gds-accent-ring);
}

.gds-media-btn:focus-visible {
  outline: 2px solid var(--gds-border-focus);
  outline-offset: 2px;
}

.gds-media-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.gds-media-time {
  font-size: var(--gds-text-sm);
  color: var(--gds-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}

.gds-media-dur {
  text-align: right;
}

.gds-media-progress {
  position: relative;
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.gds-media-progress-bg {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--gds-border);
}

.gds-media-progress-fill {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--gds-accent, #4f7cff);
  pointer-events: none;
  transition: width 0.1s linear;
}

.gds-media-progress-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gds-accent, #4f7cff);
  transform: translateX(-50%);
  pointer-events: none;
  transition: left 0.1s linear;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.gds-media-progress:hover .gds-media-progress-thumb,
.gds-media-progress:focus .gds-media-progress-thumb {
  box-shadow: 0 0 0 4px var(--gds-accent-ring, rgba(79,124,255,.2));
}

.gds-media-vol-wrap {
  display: flex;
  align-items: center;
  width: 76px;
  flex-shrink: 0;
}

.gds-media-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--gds-border);
  outline: none;
  cursor: pointer;
  accent-color: var(--gds-accent, #4f7cff);
}

.gds-media-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gds-accent, #4f7cff);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.gds-media-vol::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: var(--gds-accent, #4f7cff);
  cursor: pointer;
}

@media (max-width: 500px) {
  .gds-media-vol-wrap { display: none; }
  .gds-media-dur { display: none; }
}

/* ── Viewer pre-loader overlay ───────────────────────────────────── */
.gds-viewer-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--gds-surface, #fff);
  border-radius: var(--gds-radius-lg, 14px);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.gds-viewer-loader--done {
  opacity: 0;
}
.gds-viewer-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--gds-border, #e5e7eb);
  border-top-color: var(--gds-accent, #4f7cff);
  border-radius: 50%;
  animation: gds-spin 0.75s linear infinite;
}
@keyframes gds-spin {
  to { transform: rotate(360deg); }
}
.gds-viewer-loader-label {
  font-size: var(--gds-text-sm, 0.875rem);
  color: var(--gds-muted, #6e6e73);
}

/* The card needs relative positioning so the absolute loader is clipped to it */
.gds-viewer-card { position: relative; }

/* ── Admin inline rename ──────────────────────────────────────────── */
.gds-file-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.gds-file-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}
.gds-file-rename-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gds-muted, #6e6e73);
  padding: 2px 4px;
  border-radius: 5px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
tr:hover .gds-file-rename-btn,
.gds-file-name-cell:focus-within .gds-file-rename-btn {
  opacity: 1;
}
.gds-file-rename-btn:hover {
  color: var(--gds-text, #1d1d1f);
  background: var(--gds-border, #e5e7eb);
}

/* Version badge: small pill next to the filename when the file has been replaced at
   least once. Click target is the badge itself; the prior-versions list lives in the
   <details> element below the name. */
.gds-file-version-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gds-text-secondary, #6b7280);
  background: var(--gds-surface-subtle, #f3f4f6);
  border: 1px solid var(--gds-border, #e5e7eb);
  border-radius: 999px;
  padding: 1px 8px;
  line-height: 1.4;
  cursor: help;
}

/* Version history disclosure: small <details> that lives below the filename. Closed
   state shows just the summary text ("3 prior versions"); open state lists each
   archived version with its size + archive timestamp. */
.gds-file-history {
  margin-top: 4px;
  font-size: var(--gds-text-xs, 0.75rem);
}
.gds-file-history > summary {
  cursor: pointer;
  display: inline-block;
  color: var(--gds-text-secondary, #6b7280);
  user-select: none;
}
.gds-file-history > summary:hover {
  color: var(--gds-text, #1d1d1f);
}
.gds-file-history-list {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 6px 10px;
  background: var(--gds-surface-subtle, #f9fafb);
  border: 1px solid var(--gds-border, #e5e7eb);
  border-radius: 6px;
}
.gds-file-history-list li + li {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--gds-border, #e5e7eb);
}
.gds-file-history-version {
  font-weight: 600;
  color: var(--gds-text-secondary, #6b7280);
  display: inline-block;
  min-width: 24px;
}
.gds-file-history-name {
  color: var(--gds-text, #1d1d1f);
  word-break: break-word;
}

/* Template (NDA + Contract) header card — wraps the existing .gds-flash success card
   so the filename, format pill, version badge, and quick download links sit on the
   same line at typical widths but wrap gracefully on narrow viewports. */
.gds-template-card {
  margin-bottom: var(--gds-space-2, 8px);
}
.gds-template-card-head {
  display: flex;
  align-items: center;
  gap: var(--gds-space-2, 8px);
  flex-wrap: wrap;
}
.gds-template-card-title {
  flex: 1 1 auto;
  min-width: 220px;
  word-break: break-word;
}
.gds-template-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.gds-template-card-actions {
  margin-top: 6px;
  font-size: var(--gds-text-xs, 0.75rem);
  color: var(--gds-text-secondary, #6b7280);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.gds-template-card-actions .gds-link {
  color: var(--gds-accent, #4f7cff);
}
.gds-template-card-actions .gds-link:hover {
  text-decoration: underline;
}
/* Format pill: "PDF" or "DOCX → PDF". The base pill is neutral grey; the
   --converted modifier shifts to an accent tone so admins can tell at a glance
   that the displayed file isn't the original. */
.gds-template-format-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gds-text-secondary, #6b7280);
  background: var(--gds-surface-subtle, #f3f4f6);
  border: 1px solid var(--gds-border, #e5e7eb);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.5;
  cursor: help;
}
.gds-template-format-pill--converted {
  color: var(--gds-accent-strong, #1d4ed8);
  background: var(--gds-accent-soft, #eef2ff);
  border-color: var(--gds-accent-border, #c7d2fe);
}

/* Info tooltip icon — small ⓘ glyph that hosts a native title= tooltip. Used inline
   next to labels that need a "this is an estimate" caveat. On desktop the tooltip
   appears on hover; on touch devices it surfaces via long-press. Screen readers see
   the icon's aria-label. Kept subtle so it doesn't draw attention away from the value
   it qualifies — the cursor change is the primary affordance. */
.gds-info-tip {
  display: inline-block;
  margin-left: 2px;
  font-size: 0.95em;
  line-height: 1;
  color: var(--gds-text-secondary, #6b7280);
  cursor: help;
  vertical-align: -0.05em;
  font-weight: normal;
}
.gds-info-tip:hover {
  color: var(--gds-accent-strong, #1d4ed8);
}
.gds-inline-rename-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gds-inline-rename-input {
  border: 1.5px solid var(--gds-accent, #4f7cff);
  border-radius: 7px;
  padding: 3px 8px;
  font-size: var(--gds-text-sm, 0.875rem);
  outline: none;
  min-width: 0;
  flex: 1;
  max-width: 22rem;
  background: var(--gds-surface, #fff);
  color: var(--gds-text, #1d1d1f);
}

/* ── Investment module (visitor files page) ─────────────────────────────── */
.gds-investment-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--gds-border, #e5e7eb);
  overflow: hidden;
  max-width: 28rem;
}
.gds-investment-bar__fill {
  height: 100%;
  border-radius: 999px;
  /* Inline `background` from white-label funding bar color overrides this when set. */
  background: linear-gradient(90deg, #2563eb, #4f7cff);
  transition: width 0.35s ease;
}

.gds-investment-bar--complete .gds-investment-bar__fill {
  background: linear-gradient(90deg, #059669, #34d399);
  animation: gds-funded-shimmer 2.4s ease-in-out infinite;
}

@keyframes gds-funded-shimmer {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}

.gds-funded-goal {
  display: flex;
  align-items: flex-start;
  gap: var(--gds-space-3, 12px);
  padding: var(--gds-space-4, 16px);
  border-radius: var(--gds-radius-lg, 12px);
  border: 1px solid var(--gds-border, #e5e7eb);
  background: var(--gds-surface-raised, #fafafa);
  max-width: 32rem;
}

.gds-funded-goal__icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.gds-req {
  color: #dc2626;
  font-weight: 700;
  margin-left: 2px;
}

.gds-equity-pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gds-space-4);
  align-items: center;
  margin-top: var(--gds-space-4);
  padding: var(--gds-space-4);
  background: var(--gds-surface-subtle, #f8fafc);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-md, 12px);
}

.gds-equity-pie__chart {
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
}

.gds-equity-pie__body {
  flex: 1 1 240px;
  min-width: 220px;
}

.gds-equity-pie__legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: var(--gds-space-3);
  row-gap: var(--gds-space-2);
  align-items: center;
}

.gds-equity-pie__row {
  display: contents;
}

.gds-equity-pie__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.gds-equity-pie__label {
  font-size: var(--gds-text-sm, 0.875rem);
  color: var(--gds-text);
}

.gds-equity-pie__pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--gds-text-sm, 0.875rem);
  text-align: right;
  color: var(--gds-text);
}

.gds-equity-pie__amt {
  grid-column: 2 / 4;
  font-size: 11px;
  color: var(--gds-text-muted, #6b7280);
  margin-top: -2px;
  margin-bottom: 2px;
  text-align: right;
}

.gds-equity-pie__note {
  margin: var(--gds-space-3) 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.gds-equity-pie__cat {
  font-size: 11px;
  margin-left: 4px;
}

.gds-alloc-list {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-2);
  margin-top: var(--gds-space-2);
}

.gds-alloc-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 2fr) 90px auto;
  gap: var(--gds-space-2);
  align-items: center;
}

.gds-alloc-row select,
.gds-alloc-row input {
  width: 100%;
}

@media (max-width: 640px) {
  .gds-alloc-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .gds-alloc-row .gds-alloc-remove {
    grid-column: 2 / 3;
    justify-self: end;
  }
}

.gds-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gds-space-4, 16px);
  box-sizing: border-box;
}

.gds-modal[hidden] {
  display: none !important;
}

.gds-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.gds-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(92vh, 720px);
  overflow: auto;
  background: var(--gds-surface-raised, #fff);
  border-radius: var(--gds-radius-lg, 12px);
  box-shadow: var(--gds-shadow-card, 0 12px 40px rgba(0, 0, 0, 0.18));
  padding: var(--gds-space-5, 20px);
  border: 1px solid var(--gds-border, #e5e7eb);
}

.gds-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gds-space-3, 12px);
  margin-bottom: var(--gds-space-3, 12px);
}

.gds-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.gds-modal__close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--gds-text-secondary, #6b7280);
  padding: 0 4px;
  border-radius: var(--gds-radius-md, 8px);
}

.gds-modal__close:hover {
  color: var(--gds-text, #111827);
  background: var(--gds-surface-inset, #f3f4f6);
}

/* ── Admin visitor profiles ─────────────────────────────────────────────── */
/* Bento / masonry layout: cards have very different heights (some have an address +
   activity rollup, some only an email + status pill), so a rigid grid leaves big empty
   gaps under the short ones. CSS multi-column lets shorter cards flow up into those
   gaps without changing any markup. Cards must opt out of column splitting. */
.gds-visitor-grid {
  column-count: 2;
  column-gap: var(--gds-space-3, 12px);
}

@media (min-width: 1280px) {
  .gds-visitor-grid {
    column-count: 3;
  }
}

@media (max-width: 820px) {
  .gds-visitor-grid {
    column-count: 1;
  }
}

.gds-visitor-grid > .gds-visitor-profile {
  /* Bottom margin replaces grid `gap` for vertical spacing inside each column. */
  margin: 0 0 var(--gds-space-3, 12px) 0;
  /* `inline-block` + `width: 100%` is the well-known Safari/WebKit workaround so
     `break-inside: avoid` actually keeps the card from being split across two columns. */
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.gds-visitor-profile {
  text-align: left;
}
.gds-visitor-profile__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gds-space-3, 12px);
  flex-wrap: wrap;
}
.gds-visitor-profile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gds-space-3, 12px);
  margin-top: var(--gds-space-3, 12px);
}

.gds-visitor-profile__addr {
  margin-top: var(--gds-space-3, 12px);
  padding: var(--gds-space-3, 12px);
  background: var(--gds-surface-subtle);
  border: 1px solid var(--gds-border);
  border-radius: var(--gds-radius-md);
}

.gds-visitor-profile__addr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gds-space-3, 12px);
  margin-bottom: var(--gds-space-2, 8px);
}

.gds-visitor-profile__addr-title {
  font-weight: 600;
  font-size: var(--gds-text-sm);
  color: var(--gds-text);
}

.gds-visitor-profile__addr-body {
  font-style: normal;
  font-size: var(--gds-text-sm);
  color: var(--gds-text);
  line-height: 1.45;
  white-space: pre-wrap;
  margin: 0;
}

/* Admin-only controls (test-user checkbox + delete button) at the bottom of each card. */
.gds-visitor-profile__admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gds-space-3, 12px);
  flex-wrap: wrap;
  margin-top: var(--gds-space-3, 12px);
  padding-top: var(--gds-space-3, 12px);
  border-top: 1px dashed var(--gds-border);
}

.gds-visitor-profile__test-form {
  margin: 0;
}

.gds-visitor-profile__test-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--gds-text-sm);
  color: var(--gds-text);
  cursor: pointer;
  user-select: none;
}

.gds-visitor-profile__test-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--gds-primary, #111827);
}

.gds-visitor-profile__delete-form {
  margin: 0;
}

.gds-visitor-profile__delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--gds-radius-sm, 6px);
  color: #b91c1c;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.gds-visitor-profile__delete-btn:hover,
.gds-visitor-profile__delete-btn:focus-visible {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
  outline: none;
}

.gds-visitor-profile__delete-btn:active {
  background: #fee2e2;
}

/* Test-user card treatment: muted background so it's obvious at a glance that this card
   does not contribute to analytics aggregates. */
.gds-visitor-profile--test {
  background: var(--gds-surface-subtle, #f9fafb);
  border-style: dashed;
}

.gds-visitor-profile--test .gds-visitor-profile__head strong,
.gds-visitor-profile--test .gds-visitor-profile__addr-body {
  opacity: 0.85;
}

/* =============================================================================
   MOBILE / RESPONSIVE  — appended 2026-05
   --------------------------------------------------------------------------
   Goals:
   1. Prevent iOS Safari from auto-zooming on form focus (requires ≥16px)
   2. Make every admin/visitor wide table horizontally scrollable on phones
   3. Provide a hamburger pattern for admin navigation under 760px
   4. Make signing flow forms/buttons/stepper touch-first under 640px
   5. Keep documents pinch-zoomable (handled in JS in viewer.php) and the in-card
      preview canvases usable on small screens.
   ========================================================================= */

/* 1) Prevent iOS focus-zoom — text inputs need to be ≥16px CSS font-size to
   suppress Safari's "zoom into the input on focus" behaviour. We only apply this
   to inputs that the visitor interacts with directly; admin tables stay compact. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
textarea,
select {
  font-size: 16px;
}
/* Restore the compact font size for admin tables and inline edit controls so
   dense data screens still fit nicely on desktop. */
.gds-table-wrap input,
.gds-table-wrap textarea,
.gds-table-wrap select,
.gds-inline-rename-input,
.gds-share-input {
  font-size: var(--gds-text-sm);
}

/* 2) Horizontal scroll for ALL table-wraps. The old rule was `overflow:hidden`
   which clipped any wide table on phones. We keep the outer border/radius and
   add a smooth-scrolling, momentum-friendly horizontal scroll instead.
   We also paint a soft "scroll shadow" on the left/right edges so users get
   an immediate visual cue that there's more content off-screen. The trick
   uses two gradient layers: the white "covers" stay fixed (background-
   attachment:local) and hide the shadow when scrolled all the way to that
   edge; the shadow gradients are scroll-relative and reveal as you pan. */
.gds-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    /* Left and right "covers" hide the shadows when fully scrolled */
    linear-gradient(to right, var(--gds-surface, #fff) 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, var(--gds-surface, #fff) 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
    /* Edge shadows that stay put as the table scrolls */
    radial-gradient(8px at 0 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(8px at 100% 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 100% 0 / 14px 100% no-repeat scroll,
    var(--gds-surface, #fff);
}
/* Subtle hint label below the table; PHP can append this via .gds-scroll-hint */
.gds-scroll-hint {
  display: none;
  font-size: var(--gds-text-xs, 0.75rem);
  color: var(--gds-muted, #6b7280);
  margin-top: 4px;
  text-align: center;
}
@media (max-width: 720px) {
  .gds-scroll-hint {
    display: block;
  }
}

/* Opt-in: stack table rows into cards on narrow viewports.
   Each row becomes a vertical card; column headers vanish; the original
   <th> label is rendered to the LEFT of each cell value via a data-label
   attribute. Apply by adding .gds-table-stack to .gds-table-wrap AND adding
   data-label="..." to every <td>. */
.gds-table-stack {
  /* Stacking doesn't need the scroll-shadow background fanciness since
     content always fits the viewport width. */
  background: var(--gds-surface, #fff) !important;
}
@media (max-width: 720px) {
  .gds-table-stack {
    border: none;
    background: transparent !important;
    overflow: visible;
    padding: 0;
  }
  .gds-table-stack table,
  .gds-table-stack thead,
  .gds-table-stack tbody,
  .gds-table-stack tr,
  .gds-table-stack td,
  .gds-table-stack th {
    display: block;
    width: 100%;
  }
  .gds-table-stack thead {
    /* Hide the column header row — labels live next to each value instead */
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .gds-table-stack tr {
    background: var(--gds-surface, #fff);
    border: 1px solid var(--gds-border, #e5e7eb);
    border-radius: var(--gds-radius-md, 10px);
    padding: 12px 14px;
    margin-bottom: var(--gds-space-2, 8px);
    box-shadow: var(--gds-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  }
  .gds-table-stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: none !important;
    text-align: right;
    word-break: break-word;
  }
  /* Empty action cells get their own row beneath rather than wedged inline */
  .gds-table-stack td:empty { display: none; }
  /* Label injected from data-label="Visitor" etc. */
  .gds-table-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    font-size: var(--gds-text-xs, 0.75rem);
    color: var(--gds-text-secondary, #6b7280);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    margin-right: 8px;
  }
  /* If a cell has no data-label, suppress the empty pseudo content */
  .gds-table-stack td:not([data-label])::before {
    content: none;
  }
  /* "Primary identity" cell — gets a card-title treatment.
     Apply by setting class="gds-stack-title" on the td that should act as
     the heading. If no cell is explicitly marked, the first <td> is used. */
  .gds-table-stack tr td.gds-stack-title,
  .gds-table-stack tr:not(:has(td.gds-stack-title)) td:first-child {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-top: 0;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--gds-border, #e5e7eb) !important;
    font-weight: 600;
    color: var(--gds-text, #111827);
    word-break: break-word;
    /* Slightly larger so the row's "title" (project name, visitor name, etc.) is the
       visual anchor of each stacked card on phones. */
    font-size: 1.0625rem;
    line-height: 1.35;
  }
  .gds-table-stack tr td.gds-stack-title::before,
  .gds-table-stack tr:not(:has(td.gds-stack-title)) td:first-child::before {
    margin-bottom: 4px;
  }
  /* Action cells (links/buttons) right-align nicely and take the full width
     under the labelled rows. */
  .gds-table-stack td.gds-stack-action {
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--gds-border, #e5e7eb) !important;
  }
  .gds-table-stack td.gds-stack-action::before {
    display: none;
  }
  /* Per-cell opt-outs:
     - .gds-stack-hide — drop the cell entirely on phones (useful for noisy values
       like a numeric ID that adds no signal to the stacked card).
     - .gds-stack-no-label — keep the cell visible but hide its data-label pseudo
       (useful when the value is self-explanatory, e.g. a project name acting as
       the card title). */
  .gds-table-stack td.gds-stack-hide {
    display: none !important;
  }
  .gds-table-stack td.gds-stack-no-label::before {
    display: none !important;
  }
}

/* 3) Visitor topbar — let brand and "Protected link" pill wrap onto two rows
   on very narrow screens instead of overflowing. */
.gds-topbar {
  flex-wrap: wrap;
  gap: var(--gds-space-2, 8px);
}

/* 4) Admin hamburger toggle — hidden by default, revealed at ≤760px */
.gds-admin-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--gds-surface, #fff);
  border: 1px solid var(--gds-border, #e5e7eb);
  border-radius: var(--gds-radius-sm, 6px);
  padding: 8px 10px;
  min-height: 40px;
  min-width: 44px;
  cursor: pointer;
  color: var(--gds-text, #111827);
  box-shadow: none;
}
.gds-admin-nav-toggle:hover { background: var(--gds-surface-subtle, #f9fafb); }
.gds-admin-nav-toggle svg { display: block; }

@media (max-width: 760px) {
  /* Show the hamburger; the .gds-admin-nav becomes a vertical menu when open */
  .gds-admin-nav-toggle {
    display: inline-flex;
  }
  .gds-admin-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: var(--gds-space-3, 12px);
    padding: 6px;
    background: var(--gds-surface, #fff);
    border: 1px solid var(--gds-border, #e5e7eb);
    border-radius: var(--gds-radius-md, 10px);
    box-shadow: var(--gds-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
  }
  .gds-admin-nav.is-open {
    display: flex;
  }
  .gds-admin-nav a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--gds-radius-sm, 6px);
    font-size: var(--gds-text-base, 0.9375rem);
    color: var(--gds-text, #111827);
    text-decoration: none;
  }
  .gds-admin-nav a:hover {
    background: var(--gds-surface-subtle, #f9fafb);
  }
  .gds-admin-nav a.is-active {
    background: var(--gds-accent, #111827);
    color: #fff;
  }
}

/* 5) Admin project tabs — once labels start crowding the bar, collapse to icon-only
   pills. Icons get larger to compensate (no text means more touch target), padding
   gets squarer, and tabs are evenly distributed across the bar so every tab is one
   tap away. Horizontal scroll stays as a safety net for very small phones with all
   five tabs visible at the same time. */
@media (max-width: 720px) {
  .gds-admin-tabbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    gap: 2px;
  }
  .gds-admin-tab {
    flex: 1 1 0;
    min-width: 44px;
    justify-content: center;
    padding: 10px 10px 11px;
    gap: 0;
  }
  /* Visually hide the text label but keep it in the DOM so screen readers + automated
     tools still hear "NDA" / "Contract" / etc. Uses the same screen-reader-safe pattern
     as .gds-sr-only — we duplicate the rule here instead of adding the class server-side
     so the breakpoint can switch on/off naturally. */
  .gds-admin-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .gds-admin-tab-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* 6) Phone-sized layout polish (≤640px) */
@media (max-width: 640px) {
  /* Card chrome a bit tighter on phones */
  .card,
  .gds-card {
    padding: var(--gds-space-4, 16px);
  }
  .gds-page-title {
    font-size: var(--gds-text-lg, 1.0625rem);
    line-height: var(--gds-leading-snug, 1.4);
  }
  .gds-lead {
    font-size: var(--gds-text-sm, 0.8125rem);
  }

  /* Action button rows — full-width primary CTAs that are easy to thumb */
  .gds-actions {
    flex-direction: column-reverse;  /* primary CTA on top under phone width */
    align-items: stretch;
    gap: var(--gds-space-2, 8px);
  }
  .gds-actions .btn,
  .gds-actions button {
    width: 100%;
    justify-content: center;
  }
  /* Keep split-action rows side-by-side though */
  .gds-actions.gds-actions--split {
    flex-direction: row;
  }
  .gds-actions.gds-actions--split .btn {
    flex: 1;
  }

  /* Sign-flow back/title toolbar stacks */
  .gds-sign-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gds-space-2, 8px);
  }

  /* Stepper: keep visible on one row with horizontal scroll, smaller labels */
  .stepper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .stepper .step {
    flex: 0 0 auto;
    font-size: var(--gds-text-sm, 0.8125rem);
  }

  /* Section titles inside step forms */
  .gds-section-title {
    font-size: var(--gds-text-base, 0.9375rem);
  }

  /* Funding bar / signed docs row stacks naturally; just add some breathing room */
  .gds-funded-goal,
  .gds-signed-docs {
    flex-direction: column;
    align-items: stretch;
  }
  .gds-signed-docs__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .gds-signed-docs__actions .btn {
    width: 100%;
  }

  /* Signature pad taller for easier finger drawing */
  #ndaSigCanvas,
  #invSigCanvas {
    height: 220px !important;
  }
}

/* 7) PDF viewer — stack toolbar and let it wrap on phones */
@media (max-width: 720px) {
  .gds-viewer-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gds-space-2, 8px);
  }
  .gds-viewer-bar-inner {
    flex-wrap: wrap;
  }
  .gds-viewer-title {
    max-width: 100% !important;
    width: 100%;
  }
  .gds-viewer-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .gds-viewer-pane {
    max-height: calc(100dvh - 200px) !important;
  }
  #pdfToolbarExtras,
  #sheetToolbarExtras {
    flex-wrap: wrap;
  }
}

/* 8) Accordion-style collapsible — opt-in component using <details>/<summary>.
   Use this on admin sections that benefit from being collapsed on small screens. */
.gds-accordion {
  border: 1px solid var(--gds-border, #e5e7eb);
  border-radius: var(--gds-radius-md, 10px);
  background: var(--gds-surface, #fff);
  margin-top: var(--gds-space-3, 12px);
  overflow: hidden;
}
.gds-accordion > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  color: var(--gds-text, #111827);
  user-select: none;
}
.gds-accordion > summary::-webkit-details-marker { display: none; }
.gds-accordion > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gds-muted, #6b7280);
  border-bottom: 2px solid var(--gds-muted, #6b7280);
  transform: rotate(45deg);
  transition: transform 150ms ease;
  margin-right: 4px;
}
.gds-accordion[open] > summary::after {
  transform: rotate(-135deg);
}
.gds-accordion > summary:hover {
  background: var(--gds-surface-subtle, #f9fafb);
}
.gds-accordion-body {
  padding: 0 16px 16px;
}

/* 9) Pinch-zoom + pan support for canvas wrappers.
   The class is applied to a wrapper around a PDF canvas by viewer.php / signing
   flows. JS handles the actual gesture; this just gives the wrap the right
   default touch behaviour so single-finger scrolling still works. */
.gds-pinchable {
  touch-action: pan-x pan-y;
  transform-origin: 0 0;
  will-change: transform;
}

/* 10) Larger tap targets on visitor file list rows */
@media (max-width: 640px) {
  .fileName {
    padding: 12px 0;
  }
  .gds-pill {
    font-size: var(--gds-text-xs, 0.75rem);
  }
}

/* 11) Contract-gate affordances
   Admin Documents tab: a compact toggle on each file row that flips
   project_files.requires_contract via JSON. Visitor files page: gated rows are
   shown greyed-out with a "Available after contract is signed" hint instead of
   being hidden, so the visitor can see what they will unlock by committing. */
.gds-file-gate-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--gds-text-sm, 0.875rem);
  color: var(--gds-text-secondary);
  user-select: none;
}
.gds-file-gate-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.gds-file-gate-toggle__label {
  white-space: nowrap;
}

.gds-file-locked-row td {
  opacity: 0.65;
}
.gds-file-locked-row .fileName a {
  color: var(--gds-muted);
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.gds-file-locked-row .fileName svg.fileIcon {
  filter: grayscale(1);
  opacity: 0.7;
}
.gds-file-lock-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--gds-radius-full, 999px);
  background: var(--gds-accent-muted);
  color: var(--gds-muted);
  font-size: var(--gds-text-xs, 0.75rem);
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   DocuSign-style continuous document review.

   Used by the NDA and Investment-Contract Step 2 previews. Replaces the old
   prev/next page pager with a single scrollable container that stacks every
   PDF page vertically. Empty free-text fields get a yellow "FILL HERE" tag
   that floats to the left of the box and points at it; a floating Next button
   on the right side jumps the scroller to the next unfilled field and opens
   the click-to-edit popup. Once everything is filled in the Next button hides
   itself so the regular Continue CTA at the bottom is the obvious next step.
   ────────────────────────────────────────────────────────────────────────── */
.gds-doc-scroll {
  position: relative;
  height: 70vh;
  min-height: 360px;
  max-height: 820px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--gds-surface-2, #f5f5f7);
  border: 1px solid var(--gds-border, #e5e5ea);
  border-radius: 12px;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.gds-doc-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gds-doc-page {
  position: relative;
  width: 100%;
  max-width: 920px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  overflow: visible;
}
.gds-doc-page canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.gds-doc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gds-doc-page-num {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 7px;
  background: rgba(15, 15, 17, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* "FILL HERE" tag attached to each unfilled free-text field. Floats to the
   left of the field by default so it doesn't get clipped by the right edge
   of the page. The CSS triangle on the right points at the field. */
.gds-doc-flag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  margin-right: 8px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 3px;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  z-index: 5;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
.gds-doc-flag::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #f59e0b;
}
.gds-doc-flag.is-current {
  background: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
  animation: gds-doc-flag-pulse 1.4s ease-in-out infinite;
}
.gds-doc-flag.is-current::after { border-left-color: #ef4444; }
@keyframes gds-doc-flag-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.07); }
}
/* On very small / narrow pages, free-text boxes near the left edge wouldn't
   have room for the leftward-floating tag. The .is-right-side variant flips
   the tag to the right of the field. */
.gds-doc-flag.is-right-side {
  right: auto;
  left: 100%;
  margin-right: 0;
  margin-left: 8px;
  border-radius: 3px;
}
.gds-doc-flag.is-right-side::after {
  left: auto;
  right: 100%;
  border-left-color: transparent;
  border-right-color: #f59e0b;
}
.gds-doc-flag.is-right-side.is-current::after { border-right-color: #ef4444; }

/* Floating "Next field" CTA, fixed to the viewport so it stays accessible
   while the visitor scrolls through the document. */
.gds-doc-fab {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 1100;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #ef4444;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gds-doc-fab.is-visible { display: inline-flex; }
.gds-doc-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(239, 68, 68, 0.5);
}
.gds-doc-fab.is-complete {
  background: #16a34a;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.4);
}
.gds-doc-fab.is-complete:hover { box-shadow: 0 14px 28px rgba(22, 163, 74, 0.5); }
.gds-doc-fab .gds-doc-fab__arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

/* Header bar above the scroller — shows progress (X of Y filled) so the
   visitor always knows how many fields are left. */
.gds-doc-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--gds-surface-1, #fff);
  border: 1px solid var(--gds-border, #e5e5ea);
  border-radius: 8px;
  font-size: 13px;
  color: var(--gds-muted);
}
.gds-doc-progress strong { color: var(--gds-text, #1d1d1f); }

@media (max-width: 640px) {
  .gds-doc-scroll { height: 62vh; padding: 10px; }
  .gds-doc-flag { font-size: 9px; height: 16px; padding: 0 6px; }
  .gds-doc-fab { right: 12px; bottom: 14px; padding: 10px 14px; font-size: 13px; }
}


/* --- admin shell --- */
/* Admin console — layout polish (loaded after gds-ui.css via stylesheet.php) */

body.gds-app--admin main {
  min-width: 0;
}

body.gds-app--admin .gds-topbar {
  align-items: center;
}

body.gds-app--admin .gds-brand {
  align-items: center;
}

body.gds-app--admin .gds-admin-nav {
  font-size: var(--gds-text-sm);
}

body.gds-app--admin .gds-admin-nav a {
  padding: var(--gds-space-2) var(--gds-space-3);
  border-radius: var(--gds-radius-md);
  font-weight: 500;
}

body.gds-app--admin table {
  font-size: var(--gds-text-sm);
}

body.gds-app--admin .card {
  margin-bottom: var(--gds-space-5);
}

body.gds-app--admin .card:last-child {
  margin-bottom: 0;
}

body.gds-app--admin .gds-page-title + .gds-lead {
  margin-top: calc(-1 * var(--gds-space-2));
}

/* ── Admin login screen ───────────────────────────────────────── */
body.gds-app--admin-bare .gds-topbar {
  justify-content: center;
  border-bottom: none;
}

body.gds-app--admin-bare .gds-brand {
  justify-content: center;
}

body.gds-app--admin-bare main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 180px);
  padding: var(--gds-space-5) var(--gds-space-4);
}

.gds-login-shell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gds-login-card {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

body.gds-app--admin-bare .gds-login-card {
  margin-bottom: 0;
}

/* ── Analytics: user timeline ──────────────────────────────────── */
.gds-ua-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--gds-space-5);
  align-items: start;
}

@media (max-width: 980px) {
  .gds-ua-grid {
    grid-template-columns: 1fr;
  }
}

.gds-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-3);
}

.gds-timeline-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--gds-space-3);
  align-items: center;
}

@media (max-width: 720px) {
  .gds-timeline-row {
    grid-template-columns: 1fr;
  }
}

.gds-timeline-meta__top {
  font-size: var(--gds-text-sm);
}

.gds-timeline-meta__sub {
  font-size: 12px;
  line-height: 1.2;
}

.gds-timeline-bar {
  width: min(100%, var(--w));
  height: 42px;
  display: flex;
  border-radius: var(--gds-radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.gds-timeline-seg {
  min-width: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(17, 24, 39, 0.92);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gds-timeline-seg span {
  pointer-events: none;
}

.gds-timeline-seg.is-pdf {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.30), rgba(59, 130, 246, 0.20));
}

.gds-timeline-seg.is-sheet {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.30), rgba(16, 185, 129, 0.20));
}

.gds-timeline-seg.is-other {
  background: linear-gradient(180deg, rgba(107, 114, 128, 0.24), rgba(107, 114, 128, 0.18));
}

.gds-timeline-seg:hover {
  filter: saturate(1.1) brightness(1.03);
}

/* v2 session + document tracks */
.gds-session-list {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-4);
}

.gds-session-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--gds-radius-lg);
  background: var(--gds-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
  padding: var(--gds-space-4);
}

.gds-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gds-space-3);
  margin-bottom: var(--gds-space-3);
}

.gds-session-title {
  font-size: var(--gds-text-sm);
}

.gds-session-sub {
  font-size: 12px;
  margin-top: 2px;
}

.gds-session-badge {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  background: rgba(0,0,0,0.03);
}

.gds-session-track {
  position: relative;
  height: 34px;
  border-radius: var(--gds-radius-md);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: var(--gds-space-3);
  display: flex;
  gap: 2px;
  padding: 4px;
}

.gds-session-seg {
  position: relative;
  height: 100%;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.28);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  min-width: 4px;
}

.gds-session-seg:hover {
  filter: saturate(1.12) brightness(1.03);
  outline: 2px solid rgba(17, 24, 39, 0.18);
}

.gds-doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--gds-space-3);
}

.gds-doc-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--gds-space-3);
  align-items: center;
}

@media (max-width: 980px) {
  .gds-doc-row {
    grid-template-columns: 1fr;
  }
}

.gds-doc-name {
  font-size: var(--gds-text-sm);
  font-weight: 600;
  color: var(--gds-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gds-doc-track {
  position: relative;
  height: 40px;
  border-radius: var(--gds-radius-md);
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
}

.gds-doc-seg {
  position: relative;
  top: auto;
  bottom: auto;
  margin: 6px 0;
  height: calc(100% - 12px);
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.28);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
  cursor: pointer;
  min-width: 4px;
}

.gds-doc-seg[data-viewer-kind="sheet"] {
  background: rgba(16, 185, 129, 0.28);
}

.gds-doc-seg[data-viewer-kind="image"] {
  background: rgba(139, 92, 246, 0.28);
}

.gds-doc-seg:hover {
  filter: saturate(1.15) brightness(1.03);
  outline: 2px solid rgba(17, 24, 39, 0.22);
}

.gds-empty {
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: var(--gds-radius-lg);
  padding: var(--gds-space-4);
  background: rgba(0,0,0,0.02);
}

.gds-empty__title {
  font-weight: 650;
  margin-bottom: 4px;
}

.gds-empty__sub {
  font-size: var(--gds-text-sm);
}

/* Hover tooltip */
.gds-tip {
  position: fixed;
  z-index: 11000;
  width: 260px;
  max-width: min(320px, 90vw);
  background: var(--gds-surface);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--gds-radius-lg);
  box-shadow: 0 18px 60px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.08);
  padding: 12px 12px 10px;
  transform: translate3d(0,0,0);
  pointer-events: none;
}

.gds-tip__title {
  font-size: var(--gds-text-sm);
  font-weight: 700;
  color: var(--gds-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gds-tip__sub {
  font-size: 12px;
  margin-top: 2px;
}

.gds-tip__thumb {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

.gds-tip__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.gds-tip__ph {
  padding: 22px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--gds-muted);
}

/* ── Toast notification ── */
.gds-toast {
  position: fixed;
  bottom: var(--gds-space-6);
  right: var(--gds-space-6);
  z-index: 9900;
  display: flex;
  align-items: center;
  gap: var(--gds-space-2);
  padding: 10px var(--gds-space-4);
  background: var(--gds-surface);
  border: 1px solid var(--gds-success-border);
  border-radius: var(--gds-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  font-size: var(--gds-text-sm);
  font-weight: 500;
  color: var(--gds-success);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  will-change: opacity, transform;
}

.gds-toast.is-hidden {
  opacity: 0;
  transform: translateY(8px);
}

.gds-toast__icon {
  flex-shrink: 0;
  color: var(--gds-success);
}

/* ── File-preview lightbox ─────────────────────────────────────── */
.gds-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.gds-lightbox--open {
  opacity: 1;
  pointer-events: auto;
}

.gds-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.gds-lightbox-modal {
  position: relative;
  width: 90vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--gds-radius-md, 8px);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.gds-lightbox-modal iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  display: block;
}

.gds-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.gds-lightbox-close:hover,
.gds-lightbox-close:focus-visible {
  background: #333;
  transform: scale(1.1);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Sortable project files (Documents tab) */
.gds-sortable-file-row {
  cursor: grab;
}

.gds-sortable-file-row:active {
  cursor: grabbing;
}

.gds-sortable-file-row.gds-file-dragging {
  opacity: 0.55;
}

.gds-td-drag {
  width: 32px;
  text-align: center;
  vertical-align: middle;
  color: var(--gds-muted, #888);
  user-select: none;
}

.gds-file-drag-icon {
  display: inline-block;
  font-size: 14px;
  letter-spacing: -2px;
  line-height: 1;
}