/* ==========================================================================
   Application Form (Module F) — shared styles for the collection screens.
   Tokens lifted verbatim from design-system.md; no new colours introduced.
   Shell block matches crm-setup.css so the two modules sit flush together.
   ========================================================================== */

/* ---- App-style fixed layout: only the content scrolls ---- */
html, body { height: 100%; margin: 0; overflow: hidden; }
body { display: flex; flex-direction: column; background: #F5F7FA; }
.demo-banner { flex-shrink: 0; }
.app-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px 1fr; }
.app-grid > * { min-height: 0; min-width: 0; overflow: hidden; }
.app-grid .app-sidebar { position: relative; top: auto; height: 100%; }
.page-main { display: flex; flex-direction: column; background: #FFFFFF; height: 100%; }
.page-topbar { flex-shrink: 0; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.page-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: #64748B; }
.page-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0F172A; line-height: 1.15; }
.page-sub { font-size: 12.5px; color: #64748B; margin-top: 2px; }
.page-scroll { flex: 1; overflow-y: auto; padding: 18px 28px 48px; background: #F5F7FA; }

.btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #15B5C7, #0E9DAE); box-shadow: 0 6px 16px -6px rgba(14,157,174,0.6); border: 0; cursor: pointer; transition: transform .15s ease; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; font-size: 12px; font-weight: 600; color: #1E293B; background: #fff; border: 1px solid #E2E8F0; cursor: pointer; }
.btn-ghost:hover { background: #F0F4F8; }
.btn-navy { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #fff; background: #0B1F35; border: 0; cursor: pointer; }
.btn-navy:hover { background: #15324F; }

.owner-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #F0F4F8; border: 1px solid #E2E8F0; color: #475569; font-size: 11px; font-weight: 700; }
.owner-pill i { color: #0E9DAE; }

.mono, .k { font-family: 'JetBrains Mono', monospace; }
.k { font-size: 0.9em; background: #F0F4F8; color: #15324F; padding: 1px 5px; border-radius: 4px; border: 1px solid #E2E8F0; }

.card-head-t { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #0F172A; }
.row-link { font-size: 11.5px; font-weight: 700; color: #0E9DAE; cursor: pointer; }
.row-link:hover { color: #15B5C7; }

/* ==========================================================================
   Shared: status badges, progress bars, checklist items
   ========================================================================== */
.f-badge { font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; white-space: nowrap; display: inline-block; }
.f-badge.grey  { background: #F0F4F8; color: #475569; }
.f-badge.cyan  { background: #ECFDFD; color: #0E9DAE; border: 1px solid #B6EAEF; }
.f-badge.amber { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
.f-badge.green { background: #F0FDF4; color: #047857; border: 1px solid #BBF7D0; }
.f-badge.red   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.f-badge.navy  { background: #0B1F35; color: #fff; }

.bar { height: 6px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: #15B5C7; transition: width .35s cubic-bezier(0.32,0.72,0,1); }
.bar.amber > i { background: #F59E0B; }
.bar.green > i { background: #22C55E; }
/* neutral fill: for a bar that describes a form's shape rather than judging
   it, so a short form never reads as a deficient one */
.bar.grey > i { background: #94A3B8; }
.bar.sm { height: 5px; }

.ci { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; font-size: 12.5px; color: #475569; }
.ci-ic { width: 15px; flex: none; margin-top: 1px; }
.ci.done .ci-ic { color: #22C55E; }
.ci.recv .ci-ic { color: #F59E0B; }
.ci.miss .ci-ic { color: #CBD5E1; }
.ci.miss span { color: #94A3B8; }

.f-th { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.f-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; }
.f-avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; flex: none; }

/* ==========================================================================
   Screen 1 — new form, start with AI
   ========================================================================== */
.ai-stage {
  background:
    radial-gradient(90% 70% at 50% 0%, #ECFDFD 0%, rgba(236,253,253,0) 62%),
    linear-gradient(to bottom, #FFFFFF 0%, #F7FAFC 100%);
  position: relative; border-radius: 16px; border: 1px solid #E2E8F0; overflow: hidden;
}
.ai-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11,31,53,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,31,53,0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
}
.ai-stage > * { position: relative; }
.mascot-glow { filter: drop-shadow(0 10px 22px rgba(21,181,199,0.28)) drop-shadow(0 2px 6px rgba(11,31,53,0.06)); }
.ai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #FFFFFF; border: 1px solid #E2E8F0;
  color: #334155; font-size: 11px; font-weight: 700;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04); transition: all .15s ease;
}
.ai-chip:hover { border-color: #15B5C7; background: #ECFDFD; color: #0E9DAE; transform: translateY(-1px); }
.ai-input {
  background: #FFFFFF; border: 1px solid #E2E8F0;
  border-radius: 13px; padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 10px 26px -14px rgba(11,31,53,0.16);
}
.ai-input input { flex: 1; border: 0; outline: 0; font-size: 12.5px; color: #0F172A; font-family: inherit; background: transparent; }
.ai-input input::placeholder { color: #94A3B8; }
.ai-send { width: 27px; height: 27px; border-radius: 9px; background: #15B5C7; display: grid; place-items: center; flex: none; cursor: pointer; border: 0; }
.ai-send:hover { background: #0E9DAE; }

.form-tile { display: block; background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; padding: 15px; text-decoration: none; color: inherit; transition: all .12s ease; }
.form-tile:hover { border-color: #15B5C7; box-shadow: 0 6px 18px -10px rgba(11,31,53,.28); transform: translateY(-1px); }

/* ==========================================================================
   Screen 2 — the builder
   ========================================================================== */
.bld-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px 1fr; gap: 0; }
.bld-wrap > * { min-height: 0; min-width: 0; }

.bld-palette { border-right: 1px solid #E2E8F0; background: #fff; overflow-y: auto; padding: 14px 14px 40px; }
.bld-canvas  { background: #F5F7FA; overflow-y: auto; padding: 20px 26px 80px; }
/* Fills the column on a laptop; the cap only bites on very wide monitors,
   where an unbounded form row would get uncomfortably long to scan. */
.bld-canvas > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
/* properties now live in #props-modal, not a third column */

/* palette element */
.el-grid { display: grid; grid-template-columns: 1fr; gap: 5px; }
/* uniform tile height so a two-line label does not make the row look broken */
.el-grid .el {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid #E2E8F0; border-radius: 9px; background: #fff;
  cursor: grab; user-select: none; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 600; color: #1E293B; line-height: 1.3;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.el:hover { border-color: #15B5C7; box-shadow: 0 2px 8px -4px rgba(11,31,53,.25); }
.el:active { cursor: grabbing; }
.el i { font-size: 14px; color: #0E9DAE; flex: none; }
.el:hover { border-color: #15B5C7; background: #ECFDFD; color: #0E9DAE; }
.el:active { cursor: grabbing; }
.el.dragging { opacity: .4; }
.el.file { border-color: #B6EAEF; background: #ECFDFD; }

/* page tab strip */
.page-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.page-tab {
  font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 8px;
  background: #F0F4F8; color: #475569; border: 1px solid #E2E8F0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: all .12s ease;
}
.page-tab:hover { border-color: #15B5C7; color: #0E9DAE; }
.page-tab.on { background: #0B1F35; color: #fff; border-color: #0B1F35; }
.page-tab.on:hover { color: #fff; }
.page-tab.on i { color: #15B5C7; }
.page-tab.add { border-style: dashed; background: #fff; color: #94A3B8; }

/* canvas field card */
.fld {
  border: 1px solid #E2E8F0; border-radius: 11px; background: #fff; padding: 11px 12px;
  margin-bottom: 9px; cursor: pointer; transition: all .12s ease; position: relative;
}
.fld:hover { border-color: #CBD5E1; box-shadow: 0 4px 14px -8px rgba(11,31,53,.25); }
.fld.on { border-color: #15B5C7; box-shadow: 0 0 0 3px rgba(21,181,199,.12); }
.fld.dragging { opacity: .4; }
.fld.drop-before { box-shadow: inset 0 3px 0 0 #15B5C7; }
.fld.drop-after  { box-shadow: inset 0 -3px 0 0 #15B5C7; }
.fld-lbl { font-size: 11.5px; font-weight: 800; color: #1E293B; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.fld-grip { color: #CBD5E1; font-size: 12px; cursor: grab; flex: none; }
.fld-in { border: 1px solid #E2E8F0; border-radius: 7px; background: #F8FAFC; height: 28px; }
.fld-in.ta { height: 50px; }
.fld-up { border: 1.5px dashed #CBD5E1; border-radius: 8px; background: #FAFCFD; padding: 11px; text-align: center; font-size: 10.5px; color: #94A3B8; font-weight: 700; }
.fld-help { font-size: 10.5px; color: #94A3B8; margin-bottom: 6px; }
.req { color: #EF4444; font-size: 10px; }
.bind { font-size: 8.5px; font-weight: 800; letter-spacing: .04em; background: #ECFDFD; color: #0E9DAE; border: 1px solid #B6EAEF; padding: 2px 6px; border-radius: 4px; margin-left: auto; white-space: nowrap; }
.bind.none { background: #F1F5F9; color: #94A3B8; border-color: #E2E8F0; }
.fld-del { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 6px; display: none; place-items: center; color: #94A3B8; background: #fff; border: 1px solid #E2E8F0; cursor: pointer; font-size: 11px; }
.fld:hover .fld-del { display: grid; }
.fld-del:hover { color: #B91C1C; border-color: #FECACA; background: #FEF2F2; }

.dropzone { border: 1.5px dashed #CBD5E1; border-radius: 10px; background: #FAFCFD; padding: 14px; text-align: center; transition: all .12s ease; }
.dropzone.over { border-color: #15B5C7; background: #ECFDFD; }

/* properties panel */
.prop-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94A3B8; margin-bottom: 5px; }
.prop-in { width: 100%; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; padding: 6px 9px; font-size: 11.5px; color: #0F172A; font-family: inherit; outline: 0; }
.prop-in:focus { border-color: #15B5C7; box-shadow: 0 0 0 3px rgba(21,181,199,.12); }
.prop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.prop-row span { font-size: 11.5px; font-weight: 700; color: #0F172A; }

.toggle { width: 32px; height: 18px; border-radius: 999px; background: #CBD5E1; position: relative; flex: none; cursor: pointer; transition: background .18s ease; border: 0; padding: 0; }
.toggle.on { background: #15B5C7; }
.toggle::after { content:''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; transition: left .18s cubic-bezier(0.32,0.72,0,1); }
.toggle.on::after { left: 16px; }

.cov-card { border: 1px solid #FDE68A; background: #FFFBEB; border-radius: 11px; padding: 12px; }
.cov-card.clear { border-color: #BBF7D0; background: #F0FDF4; }

/* ---- the record template's own fields, at the top of the palette ---- */
.crm-sec { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
           color: #94A3B8; margin: 9px 0 5px; }
.el.crm { border-color: #B6EAEF; background: #F7FEFF; position: relative; padding-right: 34px; }
.el.crm i { color: #0E9DAE; }
.el.crm:hover { border-color: #15B5C7; background: #ECFDFD; }
/* asking for the same field twice is allowed, but you should see that you are */
.el.crm .used-tag { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
                    font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
                    color: #94A3B8; background: #F0F4F8; border-radius: 4px; padding: 1px 5px; }
.el.crm.is-used { opacity: .72; }
.el.crm.is-used .used-tag { display: inline-block; }

/* ==========================================================================
   Screen 3 — the public client form
   ========================================================================== */
.cf-body { flex: 1; overflow-y: auto; background: #F5F7FA; }
.cf-sheet { max-width: 660px; margin: 0 auto; padding: 26px 22px 60px; }
.cf-head { background: #fff; border-bottom: 1px solid #E2E8F0; padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.step { display: flex; align-items: center; gap: 7px; }
.step-dot { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; background: #E2E8F0; color: #94A3B8; transition: all .25s ease; }
.step-dot.on { background: #15B5C7; color: #fff; }
.step-dot.done { background: #22C55E; color: #fff; }
.step-line { height: 2px; flex: 1; background: #E2E8F0; border-radius: 2px; transition: background .25s ease; }
.step-line.done { background: #22C55E; }

.cf-q { background: #fff; border: 1px solid #E2E8F0; border-radius: 13px; padding: 16px; margin-bottom: 11px; }
.cf-q.ok    { background: #F0FDF4; border-color: #BBF7D0; }
.cf-q.query { background: #FEF2F2; border-color: #FECACA; border-width: 2px; }
.cf-q-lbl { font-size: 13px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
.cf-q-help { font-size: 11.5px; color: #64748B; margin-bottom: 10px; line-height: 1.55; }
.cf-in { width: 100%; border: 1px solid #E2E8F0; border-radius: 9px; background: #fff; padding: 9px 11px; font-size: 13px; color: #0F172A; font-family: inherit; outline: 0; }
.cf-in:focus { border-color: #15B5C7; box-shadow: 0 0 0 3px rgba(21,181,199,.12); }
.cf-in.ta { min-height: 74px; resize: vertical; }
.cf-up { border: 1.5px dashed #CBD5E1; border-radius: 10px; background: #FAFCFD; padding: 16px; text-align: center; font-size: 12px; color: #64748B; font-weight: 700; cursor: pointer; transition: all .12s ease; }
.cf-up:hover { border-color: #15B5C7; background: #ECFDFD; color: #0E9DAE; }
.cf-foot { background: #fff; border-top: 1px solid #E2E8F0; padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.lang-chip { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px; background: #F0F4F8; color: #1E293B; border: 1px solid #E2E8F0; cursor: pointer; }
.lang-chip.off { opacity: .45; }

/* the phone rendering of the same page */
.phone-frame { border-radius: 32px; background: linear-gradient(145deg, #0B1F35, #061525); padding: 9px; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset; }
.phone-screen { border-radius: 25px; overflow: hidden; background: #fff; }

/* ==========================================================================
   Screens 4 & 5 — record panel and tracking
   ========================================================================== */
.f-tabs { display: flex; gap: 18px; border-bottom: 1px solid #E2E8F0; margin-bottom: 16px; flex-wrap: wrap; }
.f-tab { font-size: 12.5px; font-weight: 700; color: #64748B; padding: 9px 2px; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.f-tab:hover { color: #0F172A; }
.f-tab.on { color: #0F172A; border-bottom-color: #15B5C7; }

.f-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #EDF1F5; text-decoration: none; color: inherit; }
.f-row:last-child { border-bottom: 0; }
.f-row.head { background: #FAFCFD; padding-top: 9px; padding-bottom: 9px; }
.f-row.link { cursor: pointer; }
.f-row.link:hover { background: #F8FAFC; }

.stat-tile { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 13px 15px; }
.stat-tile .n { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #0F172A; line-height: 1; margin-top: 5px; }

/* staff verify cards */
.vf { border: 1px solid #E2E8F0; border-radius: 12px; padding: 13px; margin-bottom: 10px; background: #fff; }
.vf.ok    { background: #F0FDF4; border-color: #BBF7D0; }
.vf.query { background: #FEF2F2; border-color: #FECACA; }

@media (max-width: 1360px) {
  .bld-wrap { grid-template-columns: 212px 1fr; }
}

/* Below the desktop breakpoint the palette becomes a sheet you open, because
   dragging from a rail is not a gesture that works on touch. */
@media (max-width: 1024px) {
  html, body { overflow: auto; height: auto; }
  .app-grid { display: block; }
  .page-main { height: auto; }
  .bld-wrap { display: block; }
  .bld-palette { display: none; }
  .bld-canvas { padding: 16px 14px 96px; overflow: visible; }
  .bld-canvas > * { max-width: none; }
  .page-tabs { flex-wrap: wrap; gap: 6px; }
  .page-tab { flex: none; }
  .modal-card { max-height: 88vh; overflow-y: auto; }
}
/* Same metrics as the CRM builder's .fab-add */
.add-fab {
  display: none; position: fixed; right: 16px; bottom: 16px; z-index: 90;
  align-items: center; gap: 7px; padding: 12px 16px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #15B5C7, #0E9DAE); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(14,157,174,.75);
}
@media (max-width: 1024px) { .add-fab { display: inline-flex; } }

/* ---- properties + element pickers, as modals ---- */
.props-body { display: flex; flex-direction: column; gap: 9px; }
.el-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.el-pick-grid .el { margin-bottom: 0; cursor: pointer; }

/* ==========================================================================
   Restored: palette groups, validation config, gate, consent, AI extract,
   repeating groups and the pickers.
   ========================================================================== */
.el-group { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800;
            letter-spacing: 0.1em; text-transform: uppercase; color: #94A3B8; margin: 16px 0 8px; }
.el-n { background: #F0F4F8; color: #475569; border-radius: 999px; padding: 1px 6px; font-size: 9px; }
.el-search { display: flex; align-items: center; gap: 7px; border: 1px solid #E2E8F0;
             border-radius: 9px; padding: 7px 10px; margin-bottom: 14px; }
.el-search i { color: #94A3B8; font-size: 12px; }
.el-search input { border: 0; outline: 0; font-size: 11.5px; width: 100%; background: transparent;
                   color: #0F172A; font-family: inherit; }
.el-empty { font-size: 11px; color: #94A3B8; padding: 10px 2px; }
.el-group:first-of-type { margin-top: 0; }
.el.sm { padding: 8px 10px; font-size: 11.5px; }

.opt-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.opt-row .prop-in { flex: 1; }
.opt-row i { color: #94A3B8; cursor: pointer; font-size: 12px; flex: none; }
.opt-row i:hover { color: #B91C1C; }

.inherit-note { font-size: 10px; line-height: 1.55; color: #0E9DAE; background: #ECFDFD; border: 1px solid #B6EAEF; border-radius: 7px; padding: 6px 8px; margin-top: 6px; }

.page-tab.drop-target { background: #ECFDFD; border-color: #15B5C7; color: #0E9DAE; box-shadow: 0 0 0 3px rgba(21,181,199,.15); }
.page-tab.tab-dragging { opacity: .4; }

/* client form: passcode gate */
.gate-wrap { flex: 1; display: grid; place-items: center; padding: 40px 20px; background: #F5F7FA; }
.gate { width: 100%; max-width: 380px; background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 28px 26px; box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 20px 50px -20px rgba(11,31,53,0.18); text-align: center; }
.gate-in { width: 100%; border: 1px solid #E2E8F0; border-radius: 10px; padding: 11px 13px; font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; letter-spacing: .18em; text-align: center; color: #0F172A; outline: 0; text-transform: uppercase; }
.gate-in:focus { border-color: #15B5C7; box-shadow: 0 0 0 3px rgba(21,181,199,.12); }
.gate-in.bad { border-color: #FECACA; background: #FEF2F2; }
.gate-err { font-size: 11.5px; color: #B91C1C; font-weight: 600; margin-top: 9px; min-height: 16px; }

/* client form: required-field errors */
.cf-q.invalid { border-color: #FECACA; box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
.cf-err { font-size: 11px; font-weight: 700; color: #B91C1C; margin-top: 7px; display: flex; align-items: center; gap: 5px; }

/* client form: consent */
.consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #CBD5E1; flex: none; margin-top: 1px; display: grid; place-items: center; background: #fff; transition: all .12s ease; }
.cbox i { font-size: 11px; color: #fff; opacity: 0; }
.cbox.on { background: #15B5C7; border-color: #15B5C7; }
.cbox.on i { opacity: 1; }

.resume-bar { display: flex; align-items: center; gap: 9px; background: #ECFDFD; border: 1px solid #B6EAEF; border-radius: 11px; padding: 10px 13px; margin-bottom: 16px; font-size: 12px; color: #0E9DAE; font-weight: 600; }

/* AI extraction proposal */
.ai-extract { border: 1.5px solid #B6EAEF; background: #F7FEFF; border-radius: 12px; padding: 13px; margin-top: 10px; }
.ai-extract-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: #0E9DAE; margin-bottom: 9px; }
.ai-kv { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #E2E8F0; font-size: 12px; }
.ai-kv:first-of-type { border-top: 0; }
.ai-kv .kk { color: #64748B; width: 128px; flex: none; }
.ai-kv .vv { font-weight: 700; color: #0F172A; flex: 1; min-width: 0; }

/* repeating group children */
.rep { border: 1px solid #B6EAEF; border-radius: 10px; background: #F7FEFF; padding: 10px; }
.rep-head { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0E9DAE; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.rep-child { background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; padding: 8px 9px; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: #1E293B; display: flex; align-items: center; gap: 6px; }
.rep-child i { color: #0E9DAE; font-size: 11px; }
.rep-note { font-size: 10px; line-height: 1.55; color: #0E9DAE; margin-top: 4px; }

/* where a repetition's answer lands, shown on the block itself so the mapping
   is visible without opening the field */
.rep-map { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0E9DAE; background: #ECFEFF; border: 1px solid #B6EAEF; border-radius: 999px; padding: 2px 7px 2px 5px; }
.rep-map i { font-size: 9.5px; }

/* one child of a repeating group: what it asks on the first line, where the
   answer goes on the second */
.rep-kid { border: 1px solid #EDF1F5; border-radius: 10px; background: #FBFDFE; padding: 7px 8px 6px; margin-bottom: 6px; }
.rep-kid .opt-row { margin-bottom: 0; }
.rep-kid .rb-type { flex: none; max-width: 128px; }
.rep-bind { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.rep-bind .rb-lbl { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #94A3B8; }
.rep-bind select { flex: 1; }
.rep-bind.off { opacity: .5; }
.rep-bind.off select { cursor: not-allowed; }

/* On a phone the row used to split the width evenly, leaving the name box too
   narrow to read while the type dropdown stayed fully legible — which made the
   type look like the field's name. Give each control its own line instead. */
@media (max-width: 560px) {
  .props-card .opt-row { flex-wrap: wrap; }
  .props-card .opt-row .rb-type { flex: 1 1 100%; max-width: none; }
  .props-card .opt-row input.prop-in { flex: 1 1 calc(100% - 24px); }
}

/* keep the hover delete button clear of the binding badge */
.fld-lbl { padding-right: 22px; }
.fld-del { top: 9px; right: 9px; }

/* client picker */
.pick-list { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #E2E8F0;
            border-radius: 10px; cursor: pointer; background: #fff; transition: all .12s ease; }
.pick-row:hover { border-color: #15B5C7; background: #F7FEFF; }
.pick-row.on { border-color: #15B5C7; background: #ECFDFD; }
/* a template that cannot be issued yet: shown so you know it exists, but the
   row is inert and says why rather than silently vanishing from the list */
.pick-row.is-off { opacity: .6; cursor: not-allowed; background: #FAFCFD; }
.pick-row.is-off:hover { border-color: #E2E8F0; background: #FAFCFD; }
.pick-row input { accent-color: #15B5C7; flex: none; }
.btn-primary[disabled], .btn-ghost[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primary[disabled]:hover { transform: none; }

/* dragging is not a touch gesture — hide the hints where the FAB takes over */
@media (max-width: 1024px) { .drag-hint { display: none; } }

/* ---- properties modal: header and actions pinned, only the form scrolls ---- */
.props-card { max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; }
.props-card > .props-head { flex: none; }
.props-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.props-foot { flex: none; display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid #EDF1F5; background: #fff; border-radius: 0 0 16px 16px; }
.prop-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ==========================================================================
   Phone: the element picker is a bottom sheet, not a centred dialog - the
   same pattern (and the same metrics) as the CRM template editor.
   ========================================================================== */
.sheet-scrim { position: fixed; inset: 0; background: rgba(6,21,37,.45); z-index: 130;
               opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.sheet-scrim.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 131;
  background: #fff; border-radius: 18px 18px 0 0; max-height: 82vh;
  display: flex; flex-direction: column; transform: translateY(100%);
  transition: transform .22s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -12px 40px -12px rgba(11,31,53,.35);
}
.sheet.show { transform: translateY(0); }
.sheet-grab { width: 38px; height: 4px; border-radius: 999px; background: #CBD5E1; margin: 9px auto 4px; flex: none; }
.sheet-head { display: flex; align-items: baseline; gap: 8px; padding: 6px 16px 10px; border-bottom: 1px solid #EDF1F5; flex: none; }
.sheet-title { font-size: 14px; font-weight: 800; color: #0F172A; }
.sheet-sub { font-size: 11.5px; color: #64748B; }
.sheet-body { overflow-y: auto; padding: 14px 16px 22px; }
/* The sheet reuses the palette's own markup, so there is one source of truth
   for what an element is and how it looks. */
.sheet-body .el-group { margin: 0 0 8px; }
.sheet-body .el-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 15px; }
.sheet-body .el { cursor: pointer; padding: 11px 12px; margin-bottom: 0; }
.sheet-body .el-search, .sheet-body .el-empty { display: none; }
@media (max-width: 340px) { .sheet-body .el-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Tap-to-place, as in the CRM template editor: the first tap arms an element,
   the second says where it goes. Drag still works on a mouse.
   ========================================================================== */
.el.armed { border-color: #15B5C7; background: #ECFDFD; box-shadow: 0 0 0 3px rgba(21,181,199,.18); }
body.is-arming .dropzone { border-color: #15B5C7; color: #0E9DAE; background: #ECFDFD; }
body.is-arming .fld { outline: 1.5px dashed #B6EAEF; outline-offset: 3px; }
body.is-arming .fld:hover { outline-color: #15B5C7; }
body.is-arming .page-tab:not(.on) { outline: 1.5px dashed #B6EAEF; outline-offset: 2px; }

.arm-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(240%);
  z-index: 120; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 12px; background: #0B1F35; color: #fff;
  box-shadow: 0 18px 40px -14px rgba(11,31,53,.6); font-size: 12.5px; font-weight: 600;
  max-width: calc(100vw - 32px); transition: transform .18s cubic-bezier(.32,.72,0,1);
  /* Not hit-testable while hidden, or it eats the mouse-up ending a drag. */
  pointer-events: none;
}
.arm-bar.show { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.arm-bar > i { color: #15B5C7; font-size: 15px; }
.arm-hint { color: #94A3B8; font-weight: 500; }
.arm-bar button {
  margin-left: 4px; padding: 5px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.arm-bar button:hover { background: rgba(255,255,255,.1); }
@media (max-width: 767px) {
  .arm-bar { left: 12px; right: 12px; bottom: 12px; transform: translateY(240%); max-width: none; }
  .arm-bar.show { transform: translateY(0); }
  .arm-hint { display: none; }
}

/* ==========================================================================
   Screen 5b — form tracking: the filter bar and the richer row
   Every count on that page derives from the row data, so the tiles double as
   filters and cannot disagree with the list underneath them.
   ========================================================================== */
.filt-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 11px; }
.filt-search { display: flex; align-items: center; gap: 7px; border: 1px solid #E2E8F0; border-radius: 9px; padding: 7px 11px; background: #fff; flex: 1; min-width: 190px; }
.filt-search i { color: #94A3B8; font-size: 13px; flex: none; }
.filt-search input { border: 0; outline: 0; font-size: 12px; width: 100%; background: transparent; color: #0F172A; font-family: inherit; }
.filt-search input::placeholder { color: #94A3B8; }

.sel-wrap { position: relative; display: inline-flex; }
.sel-wrap > i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 11px; color: #94A3B8; }
.filt-sel { appearance: none; -webkit-appearance: none; border: 1px solid #E2E8F0; border-radius: 9px; background: #fff; padding: 7px 25px 7px 11px; font-size: 12px; font-weight: 600; color: #1E293B; font-family: inherit; cursor: pointer; outline: 0; }
.filt-sel:hover { border-color: #15B5C7; }
/* a filter that is actually doing something should look different from one
   sitting at "All" — otherwise a narrowed list looks like an empty one */
.filt-sel.on { border-color: #15B5C7; background: #ECFDFD; color: #0E9DAE; }
.sel-wrap .filt-sel.on + i { color: #0E9DAE; }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 11px; font-size: 11px; color: #64748B; }
.fchip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; background: #ECFDFD; color: #0E9DAE; border: 1px solid #B6EAEF; border-radius: 999px; padding: 3px 4px 3px 9px; }
.fchip i { cursor: pointer; font-size: 12px; opacity: .7; }
.fchip i:hover { opacity: 1; color: #B91C1C; }

.tr-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 14px; }
.tr-av.client     { background: #ECFDFD; color: #0E9DAE; }
.tr-av.introducer { background: #F0F4F8; color: #475569; }
.tr-av.supplier   { background: #FFFBEB; color: #B45309; }

.own-av { width: 24px; height: 24px; border-radius: 999px; background: #0B1F35; color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 800; flex: none; }

.stat-tile.click { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.stat-tile.click:hover { border-color: #15B5C7; }
.stat-tile.sel { border-color: #15B5C7; box-shadow: 0 0 0 3px rgba(21,181,199,.12); }

/* per-row actions: a form can be edited or its submission read, and the row
   should not have to guess which you meant */
.row-acts { display: flex; gap: 5px; flex: none; }
.ic-btn { width: 27px; height: 27px; border-radius: 7px; border: 1px solid #E2E8F0; background: #fff;
          display: grid; place-items: center; cursor: pointer; color: #475569; font-size: 13px; flex: none;
          transition: border-color .12s ease, color .12s ease, background .12s ease; }
.ic-btn:hover { border-color: #15B5C7; color: #0E9DAE; background: #ECFDFD; }

.tk-empty { text-align: center; padding: 44px 20px; color: #94A3B8; font-size: 12.5px; }
.tk-empty i { font-size: 26px; color: #CBD5E1; display: block; margin-bottom: 9px; }

/* On a phone the search takes its own row, then the selects pair up two to a
   row. Letting all five share one row squeezed the selects to a bare caret. */
@media (max-width: 640px) {
  .filt-search { flex: 1 0 100%; }
  .filt-bar > .sel-wrap { flex: 1 1 calc(50% - 4px); }
  .filt-bar > .sel-wrap .filt-sel { width: 100%; }
}

/* ==========================================================================
   Screen 6 — the submission detail
   One submission, read end to end: the answers as the client gave them, the
   documents as files you can open, and this submission's slice of the audit
   log. Completeness lives here now, not on the client record.
   ========================================================================== */

/* ---- summary strip ---- */
.sum-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.sum-tile { border: 1px solid #E2E8F0; border-radius: 11px; background: #fff; padding: 10px 12px; }
.sum-tile .lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
.sum-tile .val { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: #0F172A; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 5px; }
.sum-tile .val small { font-size: 11.5px; font-weight: 700; color: #64748B; letter-spacing: 0; }
.sum-tile.warn { border-color: #FDE68A; background: #FFFBEB; }
.sum-tile.warn .val { color: #B45309; }
.sum-tile.bad  { border-color: #FECACA; background: #FEF2F2; }
.sum-tile.bad .val { color: #B91C1C; }
/* Received is not verified, and an unsubmitted form has no submitted-at —
   both facts belong on the face of the page, not in a tooltip. */
.sum-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #64748B; margin-top: 11px; padding-top: 11px; border-top: 1px solid #EDF1F5; }
.sum-meta b { color: #0F172A; font-weight: 700; }
.sum-meta .sep { color: #CBD5E1; }
@media (max-width: 900px) { .sum-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sum-strip { grid-template-columns: 1fr; } }

/* ---- a page of answers ---- */
.ans-page { border-top: 1px solid #EDF1F5; padding-top: 12px; margin-top: 14px; }
.ans-page:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.ans-page-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.ans-page-n { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 800; background: #E2E8F0; color: #64748B; }
.ans-page-n.done { background: #22C55E; color: #fff; }
.ans-page-n.part { background: #F59E0B; color: #fff; }
.ans-page-t { font-size: 13px; font-weight: 800; color: #0F172A; }
.ans-page-st { font-size: 10.5px; font-weight: 700; color: #94A3B8; margin-left: auto; }
.ans-page-st.done { color: #047857; }
.ans-page-st.part { color: #B45309; }

/* ---- one answer ---- */
.ans { border: 1px solid #E2E8F0; border-radius: 11px; background: #fff; padding: 11px 13px; margin-bottom: 8px; }
.ans.received { border-color: #FDE68A; background: #FFFBEB; }
.ans.queried  { border-color: #FECACA; background: #FEF2F2; }
.ans.open     { border-style: dashed; border-color: #E2E8F0; background: #FAFCFD; }
.ans-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ans-lbl { font-size: 11px; font-weight: 700; color: #64748B; margin-bottom: 3px; }
/* The value is the point of this page — it outweighs its own label. */
.ans-val { font-size: 13.5px; font-weight: 700; color: #0F172A; line-height: 1.45; word-break: break-word; }
.ans-val.none { font-weight: 600; color: #94A3B8; font-style: italic; }
.ans-val.long { font-weight: 500; font-size: 12.5px; color: #1E293B; border-left: 2px solid #E2E8F0; padding-left: 10px; margin-top: 2px; }
.ans-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E2E8F0; background: #fff; border-radius: 8px; padding: 5px 9px; margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; color: #15324F; cursor: pointer; }
.ans-file:hover { border-color: #15B5C7; color: #0E9DAE; }
.ans-file i { font-size: 13px; color: #0E9DAE; }
.ans-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 10.5px; color: #94A3B8; margin-top: 7px; }
.ans-acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.ans-acts .btn-ghost, .ans-acts .btn-primary { padding: 5px 10px; font-size: 11px; }

/* Where an answer came from. A typed answer and a machine-read one carry
   different weight when you are the one signing off on the file. */
.prov { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.prov i { font-size: 10px; }
.prov.client { background: #F0F4F8; color: #475569; }
.prov.ai     { background: #ECFDFD; color: #0E9DAE; border: 1px solid #B6EAEF; }
.prov.record { background: #F8FAFC; color: #64748B; border: 1px solid #E2E8F0; }
.prov.staff  { background: #0B1F35; color: #fff; }

.q-note { border-left: 2px solid #FCA5A5; padding: 2px 0 2px 10px; margin-top: 9px; font-size: 11.5px; line-height: 1.6; color: #7F1D1D; }
.q-note b { font-weight: 800; }
.q-box { margin-top: 9px; }
.q-box textarea { width: 100%; border: 1px solid #E2E8F0; border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 12px; color: #0F172A; outline: 0; min-height: 60px; resize: vertical; background: #fff; }
.q-box textarea:focus { border-color: #15B5C7; box-shadow: 0 0 0 3px rgba(21,181,199,.12); }

/* ---- repeating group, expanded ---- */
.rep-block { border: 1px solid #B6EAEF; border-radius: 12px; background: #F7FEFF; padding: 11px; margin-bottom: 9px; }
.rep-block > .rep-head { justify-content: flex-start; }
.rep-block .ans { border-color: #E2E8F0; }
.rep-block .ans:last-child { margin-bottom: 0; }

/* ---- documents ---- */
.doc { display: flex; align-items: flex-start; gap: 11px; border: 1px solid #E2E8F0; border-radius: 11px; background: #fff; padding: 11px 13px; margin-bottom: 8px; }
.doc.queried { border-color: #FECACA; background: #FEF2F2; }
.doc.out { border-style: dashed; background: #FAFCFD; }
.doc-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: #F0F4F8; color: #475569; font-size: 15px; }
.doc-ic.pdf { background: #FEF2F2; color: #B91C1C; }
.doc-ic.img { background: #ECFDFD; color: #0E9DAE; }
.doc-ic.out { background: #F8FAFC; color: #CBD5E1; }
.doc-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; color: #0F172A; word-break: break-all; }
.doc-for { font-size: 11px; color: #64748B; margin-top: 1px; }
.doc-meta { font-size: 10.5px; color: #94A3B8; margin-top: 5px; }
.ai-state { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; border-radius: 7px; padding: 4px 8px; margin-top: 7px; background: #ECFDFD; color: #0E9DAE; border: 1px solid #B6EAEF; }
.ai-state.partial { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.ai-state.plain   { background: #F8FAFC; color: #64748B; border-color: #E2E8F0; }
.doc-acts { display: flex; flex-direction: column; gap: 5px; flex: none; }
.doc-acts .btn-ghost { padding: 5px 10px; font-size: 11px; justify-content: center; }
@media (max-width: 560px) {
  .doc { flex-wrap: wrap; }
  .doc-acts { flex-direction: row; width: 100%; }
  .doc-acts .btn-ghost { flex: 1; }
}

/* the stand-in preview behind View — enough to prove the file opens */
.doc-view { background: #F5F7FA; border: 1px solid #E2E8F0; border-radius: 11px; height: 260px; display: grid; place-items: center; text-align: center; padding: 20px; }
.doc-view i { font-size: 34px; color: #CBD5E1; }

/* ---- activity timeline ---- */
.tl { position: relative; padding-left: 21px; }
/* the spine sits under the dot centres: dots are 16px wide from x=0, so a
   2px line belongs at x=7 — 5px left it visibly clipped their left edge */
.tl::before { content: ''; position: absolute; left: 7px; top: 5px; bottom: 5px; width: 2px; background: #E2E8F0; border-radius: 2px; }
.tl-i { position: relative; padding: 0 0 15px; }
.tl-i:last-child { padding-bottom: 0; }
.tl-i::before { content: ''; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 2px solid #CBD5E1; }
.tl-i.client::before { border-color: #15B5C7; }
.tl-i.staff::before  { border-color: #0B1F35; }
.tl-i.ai::before     { border-color: #0E9DAE; background: #ECFDFD; }
.tl-t { font-size: 12.5px; color: #1E293B; line-height: 1.5; }
.tl-t b { font-weight: 700; color: #0F172A; }
.tl-m { font-size: 10.5px; color: #94A3B8; margin-top: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ---- outstanding, in the rail ---- */
.out-i { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid #EDF1F5; font-size: 11.5px; color: #1E293B; line-height: 1.45; }
.out-i:first-of-type { border-top: 0; }
.out-i i { font-size: 13px; flex: none; margin-top: 1px; color: #F59E0B; }
.out-i.q i { color: #EF4444; }
.out-i .w { font-size: 10.5px; color: #94A3B8; display: block; margin-top: 1px; }

/* The field editor was set at palette scale, which is right for a rail of
   draggable chips and wrong for a form you actually type into. */
.props-card .prop-lbl { font-size: 10.5px; letter-spacing: .05em; }
.props-card .prop-in { font-size: 13px; padding: 8px 11px; }
.props-card .prop-row span { font-size: 13px; }
.props-card .row-link { font-size: 12.5px; }
.props-card .inherit-note { font-size: 11.5px; line-height: 1.6; }
.props-card .opt-row i { font-size: 15px; }
.props-card .props-head .font-extrabold { font-size: 15px; }
.props-card .props-head .text-muted-light { font-size: 12px; }

/* ---- properties modal: tighter rhythm, and it uses the phone's width ---- */
.props-body .prop-lbl { margin-bottom: 3px; }
.props-body .prop-row { padding: 4px 0; }
.props-body .inherit-note { margin-top: 4px; }
.props-body > div > .prop-lbl:first-child { margin-top: 0; }
/* the EN / 中文 pair stays side by side on a phone - stacking it wasted a whole row */
@media (max-width: 380px) { .prop-pair { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .props-card { max-width: none; width: calc(100% - 20px); max-height: 90vh; }
  .props-scroll { padding: 14px 14px; }
  .props-foot { padding: 11px 14px; }
}