/* ══════════════════════════════════════════════════════════════════════════
   ZeroCam design system — shared by home.html and the clipping workspace.
   Light neo-brutalist: warm paper, 2px black rules, hard offset shadows,
   lime for action and orange for emphasis.
   Mirrors zerocam_funnel_v1/src/admin/admin.css so both apps read as one suite.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --zc-bg: #f2f0e9;
  --zc-surface: #ffffff;
  --zc-surface-hover: #faf9f5;
  --zc-surface-sunken: #ece9e0;

  /* Ink */
  --zc-text: #000000;
  --zc-text-muted: rgba(0, 0, 0, 0.55);
  --zc-text-faint: rgba(0, 0, 0, 0.35);

  /* Rules */
  --zc-border: #000000;
  --zc-border-soft: rgba(0, 0, 0, 0.14);

  /* Brand */
  --zc-primary: #cfff04;
  --zc-primary-hover: #b8e603;
  --zc-accent: #ff4d00;

  /* Status */
  --zc-success: #059669;
  --zc-warning: #d97706;
  --zc-danger: #dc2626;
  --zc-info: #2563eb;

  /* Hard offset shadows — never soft blur */
  --zc-shadow-sm: 2px 2px 0 0 #000000;
  --zc-shadow: 4px 4px 0 0 #000000;
  --zc-shadow-lg: 6px 6px 0 0 #000000;

  /* Metrics */
  --zc-btn-height: 40px;
  --zc-radius: 12px;
  --zc-page-inset: 16px;

  /* Type */
  --zc-font-serif: ui-serif, Georgia, 'Times New Roman', serif;
  --zc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --zc-font-meta: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

/* Several components below set display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }

.zc-body {
  margin: 0;
  background: var(--zc-bg);
  color: var(--zc-text);
  font-family: var(--zc-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Wordmark ─────────────────────────────────────────────────────────── */

.zc-logo {
  font-family: 'Archivo Black', var(--zc-font-sans);
  font-size: 17px;
  letter-spacing: -0.02em;
  color: #030303;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.zc-logo::after {
  content: '.';
  color: var(--zc-accent);
  font-size: 0.75em;
}

/* ── Top bar ──────────────────────────────────────────────────────────── */

.zc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  padding: 0 var(--zc-page-inset);
  background: var(--zc-surface);
  border-bottom: 2px solid var(--zc-border);
  box-shadow: 0 2px 0 0 var(--zc-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.zc-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zc-topbar-right { display: flex; align-items: center; gap: 8px; }

/* ── Meta label (mono, uppercase, tracked) ────────────────────────────── */

.zc-meta {
  font-family: var(--zc-font-meta);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--zc-text-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.zc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--zc-btn-height);
  padding: 0 14px;
  background: var(--zc-surface);
  color: var(--zc-text);
  border: 2px solid var(--zc-border);
  border-radius: 0;
  box-shadow: var(--zc-shadow-sm);
  font-family: var(--zc-font-meta);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.zc-btn:hover { background: var(--zc-surface-hover); }
.zc-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.zc-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.zc-btn--primary { background: var(--zc-primary); }
.zc-btn--primary:hover { background: var(--zc-primary-hover); }
.zc-btn--danger { background: var(--zc-accent); color: #fff; }
.zc-btn--ghost { box-shadow: none; border-color: var(--zc-border-soft); }
.zc-btn--ghost:hover { border-color: var(--zc-border); }
.zc-btn--sm { min-height: 32px; padding: 0 10px; font-size: 10px; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.zc-card {
  background: var(--zc-surface);
  border: 2px solid var(--zc-border);
  border-radius: 0;
  box-shadow: var(--zc-shadow);
  padding: 20px;
}

/* ── Inputs ───────────────────────────────────────────────────────────── */

.zc-field { display: flex; flex-direction: column; gap: 6px; }
.zc-label {
  font-family: var(--zc-font-meta);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--zc-text-muted);
}
.zc-input {
  width: 100%;
  min-height: var(--zc-btn-height);
  padding: 9px 12px;
  background: var(--zc-bg);
  color: var(--zc-text);
  border: 2px solid var(--zc-border);
  border-radius: 0;
  font-family: var(--zc-font-sans);
  font-size: 13px;
  outline: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.zc-input::placeholder { color: var(--zc-text-faint); }
.zc-input:focus { background: var(--zc-surface); box-shadow: var(--zc-shadow-sm); }

/* Pill search — softer, matches the ZeroCam clients toolbar */
.zc-search {
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--zc-border-soft);
  border-radius: 999px;
  background: var(--zc-surface);
  font-family: var(--zc-font-sans);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.zc-search:focus { border-color: var(--zc-border); }

/* ── Badges ───────────────────────────────────────────────────────────── */

.zc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--zc-surface);
  border: 2px solid var(--zc-border);
  font-family: var(--zc-font-meta);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.zc-badge--live { background: rgba(207, 255, 4, 0.55); }
.zc-badge--muted { border-color: var(--zc-border-soft); color: var(--zc-text-muted); }

/* ── Modal ────────────────────────────────────────────────────────────── */

.zc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.zc-modal {
  width: 100%;
  max-width: 460px;
  background: var(--zc-surface);
  border: 2px solid var(--zc-border);
  box-shadow: var(--zc-shadow-lg);
  max-height: 90vh;
  overflow: auto;
}
.zc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--zc-primary);
  border-bottom: 2px solid var(--zc-border);
}
.zc-modal-title {
  font-family: var(--zc-font-meta);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.zc-modal-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.zc-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 16px 16px;
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.zc-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 18px;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 var(--zc-primary);
  font-family: var(--zc-font-meta);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 200;
}
.zc-toast--err { background: var(--zc-accent); box-shadow: 4px 4px 0 #000; }

/* ── Touch and small screens ──────────────────────────────────────────────
   The components above were sized for a pointer. Three things break on a
   phone and are fixed here once, rather than in each page that uses them. */

/* Safari zooms the whole page in when a focused field is set below 16px, and
   never zooms back out, so every form here left the member stranded at 1.3x
   with the layout cropped. 16px is the threshold, not a preference. */
@media (max-width: 520px) {
  .zc-input, .zc-search { font-size: 16px; }
}

/* 32px is a comfortable click and a poor thumb. Only the small variant needs
   raising; the default 40px button is already at the edge of usable. */
@media (pointer: coarse) {
  .zc-btn--sm { min-height: 40px; padding: 0 12px; }
}

/* A centred dialog on a short screen puts its actions in the middle of the
   glass, above the fold of the keyboard. Docked to the bottom it opens where
   the thumb already is, and the keyboard pushes it rather than covering it. */
@media (max-width: 520px) {
  .zc-modal-backdrop { align-items: flex-end; padding: 0; }
  .zc-modal {
    max-width: none;
    max-height: 88dvh;
    border-width: 2px 0 0;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Sticky so the head stays a handle to close by while the form scrolls. */
  .zc-modal-head { position: sticky; top: 0; z-index: 1; }
  .zc-modal-foot { padding-bottom: 20px; }
}

/* ── Scrollbar ────────────────────────────────────────────────────────── */

.zc-body ::-webkit-scrollbar { width: 10px; height: 10px; }
.zc-body ::-webkit-scrollbar-track { background: var(--zc-bg); }
.zc-body ::-webkit-scrollbar-thumb {
  background: var(--zc-surface);
  border: 1.5px solid var(--zc-border);
}
.zc-body ::-webkit-scrollbar-thumb:hover { background: var(--zc-primary); }