/* whomet console design system — paper/ink/emerald brand.
   Tokens + components match the whomet identity (see login spec):
   Space Grotesk headings · Manrope body · Space Mono eyebrows/code,
   pill buttons, 12px-radius inputs with emerald focus, 24px-radius cards. */
:root {
  --ink: #0C1A15;
  --ink-2: #0E2019;
  --ink-3: #13241d;
  --paper: #F6F6F2;
  --paper-2: #EFEFEA;
  --white: #ffffff;
  --emerald: #0BB28A;
  --emerald-deep: #07916E;
  --emerald-bright: #2FCBA1;
  --emerald-soft: #E4F4EE;
  --coral: #FF6F4D;          /* logo node only — never UI chrome */
  --coral-deep: #F4582F;     /* needs-review / error STATUS chrome only */
  --coral-soft: #FFE9E2;
  --line: #DDE1DA;
  --line-dk: #23362E;
  --muted: #6A746D;
  --muted-dk: #9FB3AB;
  --danger: #C84B4B;
  --danger-soft: #FBEFEC;
  --warn: #9A6212;
  --warn-soft: #FAF3E3;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 24px 60px rgba(12, 26, 21, .08);
  --shadow-sm: 0 2px 10px rgba(12, 26, 21, .05);
  --font: 'Manrope', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-display: 'Space Grotesk', var(--font);
  --font-mono: 'Space Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
/* The `hidden` attribute must always win — component rules like
   `.field { display: flex }` otherwise override the UA `[hidden]{display:none}`
   (equal specificity) and the element stays visible. */
[hidden] { display: none !important; }
html, body {
  margin: 0;
  background: var(--paper);
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--emerald-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 22px 18px 70px; }

/* ---- Brand lockup (ripple mark + wordmark) ---- */
.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup svg { flex: 0 0 auto; }
.wm {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -.02em; line-height: 1; color: var(--ink);
}
.wm em { font-style: normal; color: var(--emerald); }
.eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--emerald-deep);
}

/* ---- Header ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.topbar__brand { display: flex; align-items: center; gap: 14px; }
.topbar__title { display: flex; flex-direction: column; gap: 3px; }
.topbar__title small {
  color: var(--muted); font-weight: 600; font-size: .78rem; letter-spacing: .02em;
}

/* ---- Hero ---- */
.hero {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-lg); padding: 30px 32px; margin-bottom: 22px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.hero .eyebrow { color: var(--emerald-bright); margin-bottom: 8px; }
.hero h1 { margin: 0 0 6px; font-size: 1.7rem; }
.hero p { margin: 0; color: var(--muted-dk); max-width: 560px; }
.hero__mark {
  position: absolute; right: -50px; top: -60px; width: 280px; height: 280px;
  opacity: .12; pointer-events: none;
}
.hero__mark circle { stroke: var(--emerald-bright); fill: none; }
.hero__mark .node { fill: var(--coral); stroke: none; }

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; }
.stat {
  background: rgba(47, 203, 161, .10); border: 1px solid var(--line-dk);
  border-radius: 14px; padding: 10px 18px;
}
.stat b { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.stat span {
  font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted-dk);
}

/* ---- Panels ---- */
.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 26px; margin-bottom: 18px;
}
.panel > h2 { margin: 0 0 16px; font-size: 1.15rem; }
.section-title { display: flex; align-items: center; justify-content: space-between;
  margin: 28px 2px 12px; }
.section-title h2 { margin: 0; font-size: 1.2rem; }
.cap-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end; }

/* ---- Card grid ---- */
.cardgrid { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ucard {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.ucard__head { display: flex; gap: 12px; align-items: center; }
.ucard__avatar {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--line); background: var(--paper-2); flex: 0 0 auto;
}
.ucard__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.ucard__title { color: var(--emerald-deep); font-size: .85rem; font-weight: 700; }
.ucard__meta { color: var(--muted); font-size: .8rem; word-break: break-all; }

.ucard__counts { display: flex; gap: 16px; }
.count b { font-family: var(--font-display); font-size: 1.15rem; }
.count span { color: var(--muted); font-family: var(--font-mono); font-size: .6rem;
  display: block; text-transform: uppercase; letter-spacing: .12em; }

.linkrow {
  display: flex; align-items: center; gap: 8px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px;
}
.linkrow code { font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* ---- Buttons (brand pills) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font: inherit; font-weight: 700; font-size: .86rem;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink);
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
  text-decoration: none;
}
.btn:hover { background: var(--paper); border-color: #cfd4cc; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(11,178,138,.4); outline-offset: 2px; }
.btn--primary {
  background: var(--emerald); border-color: transparent; color: #fff; font-weight: 800;
}
.btn--primary:hover { background: var(--emerald-deep); border-color: transparent; }
.btn--ghost { background: transparent; }
.btn--danger { color: var(--danger); border-color: #ECD2CC; background: var(--danger-soft); }
.btn--danger:hover { background: #F6E2DC; border-color: #E3C0B8; }
.btn--sm { padding: 7px 13px; font-size: .8rem; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---- Section tabs ---- */
.tabs {
  display: flex; gap: 4px; margin: 4px 0 20px;
  border-bottom: 1px solid var(--line);
}
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--muted);
  padding: 10px 16px 12px; position: relative; transition: color .12s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); }
.tab.is-on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2.5px; border-radius: 2px; background: var(--emerald);
}
.tab__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); margin-left: 6px; vertical-align: 1px;
}
.tabpane { display: none; }
.tabpane.is-on { display: block; }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Full-width labelled separator between form sections (e.g. before the photo). */
.form-subhead {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  margin: 10px 0 -2px; font-family: var(--font-mono); font-size: .62rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.form-subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; color: var(--ink); font-weight: 700; letter-spacing: .01em; }
.field input, .field select, .field textarea, .toolbar input {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: .95rem; background: #FCFCFA; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus {
  outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(11,178,138,.16); background: var(--white);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .7; }
.field .hint { font-size: .74rem; color: var(--muted); line-height: 1.45; }
.field .hint code, .kbd {
  font-family: var(--font-mono); font-size: .72rem; background: var(--emerald-soft);
  color: var(--emerald-deep); border-radius: 6px; padding: 1px 6px;
}
.switch { display: flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--ink); padding: 9px 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--emerald); }
.preview { white-space: pre-wrap; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; font: inherit; font-size: .88rem;
  color: var(--muted); margin: 8px 0 0; }
details summary { cursor: pointer; color: var(--emerald-deep); font-size: .85rem;
  font-weight: 700; }
/* Replace the browser's blue focus box on <summary> with the theme ring,
   keyboard-only (clicks don't leave a lingering outline). */
summary:focus { outline: none; }
summary:focus-visible { outline: 3px solid rgba(11, 178, 138, .4);
  outline-offset: 2px; border-radius: 8px; }

/* Modern file input: hidden native control + pill trigger + filename. */
.filein { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filein input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.filein__btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 700; font-size: .84rem; padding: 10px 16px;
  border-radius: 999px; border: 1px dashed var(--emerald);
  background: var(--emerald-soft); color: var(--emerald-deep);
  transition: background .12s ease;
}
.filein__btn:hover { background: #d6eee5; }
.filein input:focus-visible + .filein__btn { outline: 3px solid rgba(11,178,138,.4); outline-offset: 2px; }
.filein__name { font-size: .8rem; color: var(--muted); }
.filein__name.has-file { color: var(--ink); font-weight: 600; }

/* Logo picker: thumbnail + pill trigger side by side; the thumb live-previews
   the picked file (data-preview) before the form is saved. */
.logoedit { display: flex; align-items: center; gap: 12px; }
.logoedit__thumb { width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 4px; }

/* Repeater rows (custom fields / phone numbers) */
.row-grid { display: grid; gap: 8px; margin-bottom: 8px; align-items: center; }
.cf-row { grid-template-columns: 1fr 130px 110px 40px; }
.ph-row { grid-template-columns: 160px 1fr 40px; }
.row-grid input, .row-grid select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: .9rem; background: #FCFCFA;
}
.row-grid input:focus, .row-grid select:focus {
  outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(11,178,138,.16); background: var(--white);
}
.row-grid .btn { padding: 8px 0; width: 40px; }

/* ---- Notices ---- */
.notice {
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
  border: 1px solid; box-shadow: var(--shadow-sm); font-size: .92rem;
}
.notice--ok { background: var(--emerald-soft); border-color: #bfe5d8; color: #07604A; }
.notice--err { background: var(--danger-soft); border-color: #ECD2CC; color: #8C3232; }
.secret {
  font-family: var(--font-mono); font-weight: 700; font-size: .85rem;
  background: var(--white); border: 1px dashed var(--emerald); color: var(--ink);
  padding: 4px 10px; border-radius: 8px; display: inline-block;
}

/* ---- Tables / badges ---- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 10px; border-top: 1px solid var(--line);
  vertical-align: top; }
th { color: var(--muted); font-family: var(--font-mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .12em; }
.badge { display: inline-block; background: var(--emerald-soft); color: var(--emerald-deep);
  border-radius: 999px; padding: 2px 10px; font-size: .7rem; font-weight: 700; }
.badge--mute { background: var(--paper-2); color: var(--muted); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ---- Records (owner) ---- */
.rec { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; background: var(--white);
  box-shadow: var(--shadow-sm); }
.rec__head { display: flex; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; align-items: baseline; }
.rec__tok { font-family: var(--font-mono); color: var(--emerald-deep);
  font-size: .76rem; word-break: break-all; }
.rec__when { color: var(--muted); font-size: .78rem; }
.rec__meta { color: #36433C; font-size: .88rem; margin: 8px 0; }
.rec__meta .lbl { color: var(--muted); font-family: var(--font-mono);
  text-transform: uppercase; font-size: .6rem; letter-spacing: .12em; margin-right: 6px; }
.scans { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.scan { margin: 0; width: 180px; }
.scan img { width: 180px; height: 120px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line); }
.scan__ocr { font-size: .8rem; color: #36433C; margin-top: 6px;
  display: flex; flex-direction: column; gap: 1px; }
.scan__ocr b { color: var(--ink); }
.scan__ocr.empty { color: var(--muted); font-style: italic; }
.empty { color: var(--muted); font-style: italic; }

/* ---- Capture list ---- */
.muted-count { color: var(--muted); font-size: .82rem; }
.toolbar { margin: 0 0 12px; }
.toolbar input { width: 100%; background: var(--white); box-shadow: var(--shadow-sm); }

.cap { background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 8px; box-shadow: var(--shadow-sm);
  overflow: hidden; }
.cap__head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  text-align: left; padding: 13px 15px;
}
.cap__head:hover { background: var(--paper); }
.cap__avatar { font-size: 1.1rem; width: 26px; text-align: center; flex: 0 0 auto; }
.cap__main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cap__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap__sub { color: var(--muted); font-size: .82rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cap__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cap__when { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.cap__chev { color: var(--muted); transition: transform .15s ease; }
.cap__chev.open { transform: rotate(90deg); }
.cap__body { padding: 4px 16px 16px 52px; border-top: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 0; }
.kv dt { color: var(--muted); font-family: var(--font-mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em; }
.kv dd { margin: 0; font-size: .92rem; }
.kv dt.kv__extra { text-transform: none; color: var(--emerald-deep); }
.kv__extra-note { margin-top: 6px; font-size: .72rem; color: var(--muted); font-style: italic; }
/* Extra (non-standard) fields lifted off the card by OCR — boxed + labelled so
   it's clear these came from the scan and aren't the standard contact columns. */
.extra-block { margin-top: 12px; border: 1px solid var(--emerald-soft);
  border-radius: 12px; background: var(--emerald-soft); padding: 9px 12px 11px; }
.extra-block__head { display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--emerald-deep); }
.extra-block__head .cico { color: var(--emerald-deep); }
.kv--extra { margin-top: 7px; }
.kv--extra dt { text-transform: none; color: var(--emerald-deep); letter-spacing: 0;
  font-family: inherit; font-size: .72rem; }
.cap__scan { display: block; margin-top: 12px; max-width: 240px; width: 100%;
  border-radius: 12px; border: 1px solid var(--line); }
.cap__foot { margin-top: 10px; font-size: .78rem; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px; }
.pager span { color: var(--muted); font-size: .85rem; }

/* ---- SVG icons in console chrome (replacing the old emoji) ---- */
h2 .cico, .section-title h2 .cico { vertical-align: -3px; color: var(--muted); }
.cap__avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; flex: 0 0 auto; color: var(--muted); }
.cap__avatar--sm { width: 20px; }
.cap__chev .cico { display: block; }
.btn .cico { vertical-align: -3px; }
.toolbar { position: relative; }
.toolbar__ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: inline-flex; }
.toolbar input { padding-left: 38px; }

/* ---- Follow-up panel ---- */
.subpanel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.badge--ok { background: var(--emerald-soft); color: var(--emerald-deep); }
.badge--dupe { background: var(--warn-soft); color: var(--warn); margin-left: 6px;
  font-size: .62rem; }
.rec--bar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; }
.rec--quiet { padding: 11px 16px; background: var(--paper); box-shadow: none; }
.fu-group { display: flex; align-items: center; gap: 7px; margin: 16px 0 8px;
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--emerald-deep); }
.fu-group .cico { color: var(--emerald-deep); }
.fu-preview { border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.fu-preview__subj { padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--paper); font-weight: 700; }
.fu-preview__subj:empty::before { content: '(subject)'; color: var(--muted); font-weight: 400; }
.fu-preview__body { margin: 0; padding: 14px; white-space: pre-wrap; word-break: break-word;
  font: inherit; color: var(--ink); }
.fu-pick { display: flex; align-items: center; gap: 9px; cursor: pointer; min-width: 0; }
.fu-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fu-field { display: block; margin-top: 10px; font-size: .68rem; color: var(--muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.fu-field input, .fu-field textarea { display: block; width: 100%; margin-top: 5px;
  font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; }
.dupe-list { margin-top: 12px; }
.dupe-row { display: flex; align-items: center; gap: 9px; font-size: .82rem;
  color: var(--muted); padding: 6px 0; border-top: 1px dashed var(--line); }
.dupe-row a { margin-left: auto; }

/* ---- Verify & Send gate (Owner View redesign, Phase 1) ---- */
.summary-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.tag { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 5px 13px; font-size: .8rem; font-weight: 700; }
.tag-good { background: var(--emerald-soft); color: var(--emerald-deep); }
.tag-bad { background: var(--coral-soft); color: var(--coral-deep); }
.statuslbl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.statuslbl.review { color: var(--coral-deep); }
.statuslbl.ready { color: var(--emerald-deep); }
.dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.dot-good { background: var(--emerald); }
.dot-bad { background: var(--coral-deep); }

.verify { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 12px; background: var(--white); box-shadow: var(--shadow-sm); }
.verify--review { border-color: var(--coral-soft); box-shadow: 0 0 0 1px var(--coral-soft) inset; }
.verify__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.verify__meta { color: var(--muted); font-size: .76rem; margin-top: 3px; }
.verify__meta .corrected { color: var(--emerald-deep); font-weight: 700; }
.verify__grid { display: grid; grid-template-columns: 88px 1fr; gap: 14px; margin-top: 12px; }
.verify__grid:not(:has(.verify__card)) { grid-template-columns: 1fr; }
.verify__card img { width: 88px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.verify__main { min-width: 0; }
.verify__edit summary { cursor: pointer; font-family: var(--font-mono); font-size: .64rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--emerald-deep); }
.verify__form { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.fieldrow { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.fieldrow .flabel { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); }
.fieldrow input { font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; width: 100%; }
.fieldrow.flag input { border-color: var(--coral-deep); background: var(--coral-soft); }
.fieldrow .flagnote { grid-column: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .74rem; color: var(--coral-deep); }
.fixbtn { font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--coral-deep); color: var(--coral-deep); background: var(--white);
  border-radius: 999px; padding: 3px 10px; }
.fixbtn:hover { background: var(--coral-soft); }

.draft { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); overflow: hidden; }
.draft__hd { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .8rem;
  color: var(--muted); display: flex; align-items: center; gap: 6px; }
.draft__hd .draft-to { color: var(--ink); }
.verify--bademail .draft__hd .draft-to { color: var(--coral-deep); }
.draft__subj { padding: 8px 12px 0; font-weight: 700; }
.draft__body { margin: 0; padding: 8px 12px 12px; white-space: pre-wrap; word-break: break-word;
  font: inherit; font-size: .9rem; color: var(--ink); }
.verify__dismiss { margin-top: 10px; }

/* Records-list (Contacts & scans) needs-review state + inline verify/edit */
.badge--review { background: var(--coral-soft); color: var(--coral-deep); margin-left: 6px; }
.cap--review { border-left: 3px solid var(--coral-deep); }
.cap-verify { margin: 0 0 12px; border: 1px solid var(--line); background: var(--paper);
  border-radius: 12px; padding: 10px 12px; }
.cap-verify--review { border-color: var(--coral-soft); background: var(--coral-soft); }
.cap-verify__hd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); }
.cap-verify--review .cap-verify__hd { color: var(--coral-deep); }
.cap-verify__hd .cico { color: inherit; }
.cap-verify .verify__form { background: var(--white); border-radius: 10px; padding: 10px; }
.cap-verify__sub { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px;
  font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--emerald-deep); }
.cap-verify__sub .cico { color: var(--emerald-deep); }

/* ---- Mobile overflow hardening: a long unbroken string (a scanned address,
   URL, etc.) must never widen the page and trap vertical scrolling. ---- */
html, body { overflow-x: hidden; }
.kv dd, .draft__body, .fu-preview__body, .flagnote,
.draft__hd { overflow-wrap: anywhere; word-break: normal; }
.fieldrow input, .verify__main, .verify__grid, .kv { min-width: 0; }

/* ---- Inline setup guide (Settings → Microsoft 365) ---- */
.guide { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper-2); }
.guide summary { padding: 12px 16px; font-weight: 700; font-size: .88rem;
  color: var(--emerald-deep); cursor: pointer; }
.guide[open] summary { border-bottom: 1px solid var(--line); }
.guide__body { padding: 14px 18px 16px; font-size: .87rem; line-height: 1.6; }
.guide__body ol { margin: 10px 0; padding-left: 20px; display: flex;
  flex-direction: column; gap: 10px; }
.guide__body ul { margin: 6px 0 0; padding-left: 18px; }
.guide__body code { background: var(--white); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px; font-family: var(--font-mono); font-size: .78rem; }
.guide__copy { cursor: pointer; }
.guide__copy:hover { border-color: var(--emerald); }
.guide__body a { color: var(--emerald-deep); }

/* ---- Platform: search + per-company plan ---- */
.searchbar { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; }
.searchbar input { flex: 1; max-width: 420px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  font: inherit; }
.searchbar input:focus { outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-soft); }
.ucard__plan { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.plan-edit { margin: 10px 0 4px; }
.plan-edit summary { color: var(--emerald-deep); font-size: .82rem; font-weight: 600; }
/* Inside a (narrow) company card, stack the edit forms one field per row —
   two columns truncate inputs at this width. */
.plan-edit .form-grid { grid-template-columns: 1fr; gap: 12px; }

/* ---- Card design picker ---- */
.subhead { margin: 22px 0 10px; font-size: .95rem; }
.designgrid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.design { display: grid; grid-template-columns: 28px 1fr; grid-auto-rows: min-content;
  gap: 2px 10px; align-items: center; cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--white);
  transition: border-color .12s ease, box-shadow .12s ease; }
.design:hover { border-color: var(--emerald-bright); }
.design.is-on { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(11,178,138,.16); }
.design input { display: none; }
.design__sw { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid var(--line); }
.design__name { font-weight: 700; font-size: .9rem; }
.design__name small { color: var(--muted); font-family: var(--font-mono);
  font-weight: 400; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; }
.design__desc { grid-column: 2; color: var(--muted); font-size: .76rem; }
/* swatches (a hint of each theme's bg+accent) */
/* Design swatches (two-tone = surface 60% / accent 40%), matching card-themes.css */
.sw-emerald { background: linear-gradient(135deg,#ffffff 60%,#0BB28A 60%); }
.sw-navy { background: linear-gradient(135deg,#132945 60%,#D9A441 60%); }
.sw-espresso { background: linear-gradient(135deg,#ffffff 60%,#B9602F 60%); }
.sw-slate { background: linear-gradient(135deg,#ffffff 60%,#0284C7 60%); }
.sw-plum { background: linear-gradient(135deg,#3D2349 60%,#C9A6E0 60%); }
.sw-forest { background: linear-gradient(135deg,#ffffff 60%,#3E7A4E 60%); }
.sw-graphite { background: linear-gradient(135deg,#212329 60%,#F5A623 60%); }
.sw-coral { background: linear-gradient(135deg,#ffffff 60%,#E85D43 60%); }
.sw-indigo { background: linear-gradient(135deg,#ffffff 60%,#4F51D8 60%); }
.sw-sand { background: linear-gradient(135deg,#26261F 60%,#D8C9A3 60%); }
.sw-atlas { background: linear-gradient(135deg,#F2EFE7 60%,#9C7C3C 60%); }

/* Field-visibility chips */
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.chk {
  display: inline-flex; align-items: center; gap: 7px; font-size: .84rem;
  font-weight: 600; text-transform: capitalize; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  background: var(--white); cursor: pointer; transition: all .12s ease;
}
.chk:has(input:checked) {
  background: var(--emerald-soft); border-color: var(--emerald);
  color: var(--emerald-deep);
}

/* ---- Live preview ---- */
.design-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .design-layout { grid-template-columns: 1fr; } }
.pv-col { position: sticky; top: 16px; }
.pv-label { color: var(--muted); font-family: var(--font-mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
.pv-frame { width: 100%; height: 580px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--ink); box-shadow: var(--shadow-sm); }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 999px;
  font-size: .85rem; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: .97; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
  .hero { padding: 24px 22px; }
}