/* humaniseAI signature portal.
   Selectors are class-based on purpose: the signature preview is real email
   markup and must not inherit anything from this page. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --line: #e3e5e9;
  --text: #12141a;
  --muted: #6b7280;
  --accent: #12141a;
  --brand: #5D36FF;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 18, 24, .05), 0 8px 24px rgba(16, 18, 24, .05);
}

* { box-sizing: border-box; }

/* Reserve the scrollbar's width even on a page too short to scroll. Without it
   the SL list (long, scrolls) and the AU list (short, doesn't) centre their
   container 7.5px apart, and switching tabs visibly jolts the whole page. */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 'Aptos', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* ---------- top bar ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.brand-logo { display: block; height: 30px; width: auto; flex: none; }
.brand span { color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.team-nav { display: flex; gap: 4px; flex: none; padding: 4px; background: #f1edff; border: 1px solid #ddd3ff; border-radius: 11px; }
.team-nav a {
  padding: 7px 16px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  color: #3b2a99; text-decoration: none; border-radius: 8px;
  transition: color .15s, background .15s, box-shadow .15s;
}
.team-nav a:hover { background: var(--surface); color: var(--brand); }
.team-nav a[aria-current="page"] {
  color: #fff; background: var(--brand);
  box-shadow: 0 1px 2px rgba(93, 54, 255, .25), 0 4px 12px rgba(93, 54, 255, .3);
}
.team-nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- list ---------- */
.view { padding-block: 36px 64px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; }
.page-title { margin: 0; font-size: clamp(22px, 3.2vw + 12px, 26px); font-weight: 600; letter-spacing: -.02em; }
.count-label {
  padding: 2px 9px; font-size: 12px; font-weight: 500; white-space: nowrap;
  color: var(--brand); background: #f1edff; border-radius: 99px;
}
.count-label:empty { display: none; }
.page-sub { margin: 0 0 24px; color: var(--muted); }

.search { position: relative; margin-bottom: 26px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: var(--muted); pointer-events: none; }
#search {
  width: 100%; padding: 12px 14px 12px 42px;
  /* 16px, not the page's 15px: anything smaller makes iOS Safari zoom the
     whole page when the field is focused. */
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  outline: none;
}
#search:focus { border-color: #b9bdc6; box-shadow: 0 0 0 3px rgba(18, 20, 26, .06); }

.team-label {
  margin: 26px 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted);
}
.team-label:first-child { margin-top: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.card {
  display: flex; align-items: center; gap: 13px; width: 100%; min-width: 0;
  padding: 14px; text-align: left; text-decoration: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: #c8ccd4; box-shadow: var(--shadow); transform: translateY(-1px); }
.card-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: #e8eaed; }
.card-body { min-width: 0; }
.card-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  display: inline-block; margin-top: 2px; padding: 1px 7px;
  font-size: 11px; color: #8a6d1f; background: #fdf3d7;
  border-radius: 99px;
}
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* ---------- client picker ---------- */
/* auto-fit rather than a fixed 3: the tabs step down 3 -> 2 -> 1 as the panel
   narrows, instead of squeezing until the phone breakpoint. */
.tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; padding: 14px 18px 16px; }
.tab {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 11px 13px; font: inherit; text-align: left; cursor: pointer;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.tab:hover { border-color: #c8ccd4; background: #fbfaff; }
.tab.on {
  border-color: var(--brand); background: #f7f4ff;
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.tab-label { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.tab.on .tab-label { color: var(--brand); }
.tab-blurb { font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* ---------- detail ---------- */
.back { display: inline-block; margin-bottom: 18px; color: var(--muted); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--text); }

.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.detail-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #e8eaed; }
.detail-name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.detail-title { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden;
}
.panel-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: #f7f8fa; border-color: #c8ccd4; }
.btn svg { width: 15px; height: 15px; fill: currentColor; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #2b2f3a; border-color: #2b2f3a; }
.btn-primary.copied { background: #15803d; border-color: #15803d; }

.preview-frame { padding: 18px; background: var(--surface); overflow: hidden; }
/* Always the signature's real 480px: its columns are fixed widths, so even the
   fluid builds cannot reflow narrower and would just be clipped. On a narrow
   screen app.js scales the iframe down to fit instead (transform on this
   element only - nothing inside the frame, or on the clipboard, changes). */
.sig-frame {
  display: block; width: 480px; height: 320px;
  border: 0; background: #fff; overflow: hidden;
  transform-origin: 0 0;
}

.hint { margin: 0; padding: 12px 18px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }

.steps { margin: 0; padding: 18px 18px 22px 38px; overflow-wrap: break-word; }
.steps a { color: var(--text); }
.steps li { margin-bottom: 9px; }
.steps li:last-child { margin-bottom: 0; }
.steps code, .hint code {
  padding: 1px 5px; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f2f3f5; border: 1px solid var(--line); border-radius: 4px;
  overflow-wrap: anywhere;
}

kbd {
  display: inline-block; padding: 1px 5px; font-size: 12px; font-family: inherit;
  background: #f2f3f5; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 8px));
  transform: translate(-50%, 12px);
  max-width: calc(100vw - 32px); width: max-content; text-align: center;
  padding: 11px 18px; font-size: 14px; color: #fff; background: #12141a;
  border-radius: 99px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .topbar-inner { gap: 10px; }
  .brand span { display: none; }
  .team-nav a { padding: 7px 12px; font-size: 13.5px; }
  .view { padding-block: 26px 48px; }
  /* minmax(0, 1fr), not a bare 1fr: 1fr is minmax(auto, 1fr), and "auto" is
     the card's min-content width - which its nowrap job title makes wider than
     the screen, so the whole page overflowed sideways on phones. */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .actions { width: 100%; flex-direction: column; }
  .btn { justify-content: center; }
  .detail-head { gap: 12px; margin-bottom: 20px; }
  .detail-photo { width: 48px; height: 48px; }
  .detail-name { font-size: 19px; }
  .panel-head { padding: 14px; }
  .tabs { padding: 12px 14px 14px; }
  .preview-frame { padding: 12px; }
  .hint { padding: 11px 14px; }
  .steps { padding: 16px 14px 20px 32px; }
}