/* =========================================================
   V-SCANNER Relationship Manager
   Its own product. Shares the house design language with the
   data room, shares no code and no login with it.
   ========================================================= */

:root{
  --accent:#2E6BE0; --accent-dark:#2559c0; --accent-soft:#E8F0FD;
  --warm:#E0662A;
  --bg:#F5F5F7; --card:#fff; --surface:#FBFBFD;
  --line:rgba(0,0,0,.07); --line-mid:rgba(0,0,0,.12);
  --ink:#1D1D1F; --muted:#6E6E73; --faint:#86868B;
  --ok-bg:#EAF7EE; --ok-fg:#1E7A3D;
  --off-bg:#FDECEA; --off-fg:#B3261E;
  --warn-bg:#FFF6E5; --warn-fg:#B36B00;
  --violet-bg:#F1EBFB; --violet-fg:#7A4FD3;
  --radius:14px; --radius-sm:9px;
  --shadow-sm:0 1px 3px rgba(20,45,90,.05);
  --shadow:0 6px 24px rgba(20,45,90,.07), 0 2px 6px rgba(20,45,90,.04);
  --sidebar:216px; --topbar:58px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);font-size:.9375rem;line-height:1.5;color:var(--ink);background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
a{color:var(--accent);text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Sign in ---------- */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#F5F7FB 0%,#EDF1F9 100%)}
.gate-card{background:#fff;border:1px solid var(--line);border-radius:18px;max-width:400px;width:100%;
  padding:34px 30px;box-shadow:0 18px 50px rgba(14,26,43,.10)}
.gate-logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(145deg,var(--accent),var(--warm));
  margin:0 auto 18px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px}
.gate h1{font-size:1.2rem;text-align:center;letter-spacing:-.01em;margin-bottom:4px}
.gate p.lede{color:var(--muted);font-size:.88rem;text-align:center;margin-bottom:22px}
.gate label{display:block;font-size:.76rem;font-weight:700;color:var(--muted);margin:0 0 5px}
.gate input{width:100%;padding:11px 13px;border:1px solid var(--line-mid);border-radius:10px;font-size:.95rem;margin-bottom:14px}
.gate input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,107,224,.15)}
.gate button{width:100%;padding:12px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700}
.gate button:hover{background:var(--accent-dark)}
.gate .err{background:var(--off-bg);color:var(--off-fg);border-radius:8px;padding:9px 12px;font-size:.83rem;margin-bottom:14px}
.gate .ok-note{background:var(--ok-bg);color:var(--ok-fg);border-radius:8px;padding:9px 12px;font-size:.83rem;margin-bottom:14px}
.gate .foot{margin-top:18px;text-align:center;font-size:11px;color:#8A97AC;letter-spacing:.05em;text-transform:uppercase}
.gate .alt{margin-top:14px;text-align:center;font-size:.82rem}
.gate .gbtn{display:flex;justify-content:center;min-height:44px;margin-bottom:4px}
.gate .or{display:flex;align-items:center;gap:12px;margin:14px 0 16px;color:var(--faint);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.08em}
.gate .or::before,.gate .or::after{content:"";flex:1;height:1px;background:var(--line-mid)}

/* ---------- Shell ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:40}
.brand{height:var(--topbar);display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid var(--line)}
.brand-mark{width:28px;height:28px;border-radius:8px;flex:none;background:linear-gradient(145deg,var(--accent),var(--warm));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.brand-name{font-size:.82rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.brand-sub{font-size:.68rem;color:var(--faint)}
.nav{flex:1;padding:14px 8px;overflow-y:auto}
.nav-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);font-weight:700;padding:12px 10px 6px}
.nav-i{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;
  font-size:.85rem;color:var(--muted);text-align:left}
.nav-i:hover{background:var(--bg);color:var(--ink)}
.nav-i.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.nav-i .n{margin-left:auto;font-size:.7rem;color:var(--faint);background:var(--bg);border-radius:20px;padding:1px 7px}
.nav-i.on .n{background:#fff;color:var(--accent)}
.nav-i .n.alert{background:var(--off-fg);color:#fff;font-weight:700}
.rolepick{padding:5px 9px;border:1px solid var(--line-mid);border-radius:8px;font-size:.8rem;background:#fff}
.side-foot{border-top:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.side-foot .who{flex:1;min-width:0}
.side-foot .nm{display:block;font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .rl{display:block;font-size:.68rem;color:var(--muted);text-transform:capitalize}

.top{position:fixed;top:0;left:var(--sidebar);right:0;height:var(--topbar);background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 22px;z-index:30}
.top h1{font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
.top .sp{flex:1}
.search{position:relative}
.search input{width:270px;padding:8px 12px 8px 30px;background:var(--bg);border:1px solid transparent;
  border-radius:9px;font-size:.85rem}
.search input:focus{outline:none;border-color:var(--accent);background:#fff}
.search .mag{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:12px}
.search input{width:270px}
.search input:focus{width:340px}

/* Results hang under the field. Wider than the field, because a note snippet
   needs room and the field is sized for typing, not for reading. */
.sres{position:absolute;top:calc(100% + 7px);right:0;width:420px;max-width:calc(100vw - 32px);
  max-height:min(70vh,520px);overflow-y:auto;background:#fff;border:1px solid var(--line-mid);
  border-radius:14px;box-shadow:0 18px 50px rgba(14,26,43,.16);padding:6px;z-index:60}
.sr-head{display:flex;align-items:center;gap:8px;padding:9px 12px 5px;font-size:.66rem;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.sr-head span{margin-left:auto;font-weight:700;letter-spacing:0;text-transform:none;
  background:var(--bg);border-radius:20px;padding:1px 7px;font-size:.68rem}
.sr-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;cursor:pointer}
.sr-item:hover,.sr-item.cursor{background:var(--accent-soft)}
.sr-txt{min-width:0}
.sr-name{display:block;font-size:.87rem;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{display:block;font-size:.75rem;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres mark{background:rgba(224,102,42,.18);color:inherit;border-radius:3px;padding:0 1px}
.sr-none{padding:16px 14px;font-size:.85rem;color:var(--muted)}
@media (max-width:820px){ .sres{width:calc(100vw - 32px)} .search input:focus{width:150px} }

main{margin:var(--topbar) 0 0 var(--sidebar);padding:22px;min-height:calc(100vh - var(--topbar))}
.burger{display:none;padding:6px 11px}
@media (max-width:820px){
  .side{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .side.open{transform:none}
  .top{left:0}
  main{margin-left:0;padding:16px}
  .burger{display:block}
  .search input{width:150px}
}

/* ---------- Bits ---------- */
.av{border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;background:var(--accent);overflow:hidden;width:26px;height:26px;font-size:10px}
.av img{width:100%;height:100%;object-fit:cover}
.av.sq{border-radius:9px}
.av.lg{width:56px;height:56px;font-size:18px}
.av.xl{width:76px;height:76px;font-size:24px}

.tag{font-size:10px;font-weight:800;letter-spacing:.03em;padding:2px 7px;border-radius:5px;text-transform:uppercase;
  display:inline-block}
.t-cold{background:#E8F1FA;color:#3D7FB0}
.t-na{background:#EFEFF2;color:var(--faint)}
.t-warm{background:var(--warn-bg);color:var(--warn-fg)}
.t-hot{background:var(--off-bg);color:var(--off-fg)}
.t-good{background:var(--ok-bg);color:var(--ok-fg)}
.t-blue{background:var(--accent-soft);color:var(--accent)}
.t-violet{background:var(--violet-bg);color:var(--violet-fg)}
/* Tags somebody typed. Outlined rather than filled, and not shouted in caps,
   so they never read as one of the system's own labels. */
.t-own{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-mid);
  text-transform:none;font-weight:600;letter-spacing:0}
/* What somebody is to us: a white pin, its own colour per type, with a person
   on it. Different shape from the status chips beside it, because it is an
   identity rather than a state. */
.ptpin{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:20px;
  background:#fff;color:var(--pt);box-shadow:inset 0 0 0 1.5px var(--pt);
  font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.ptico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* A chip you can change where you read it. */
.chipsel{position:relative;display:inline-flex}
.chipbtn{display:inline-flex;align-items:center;gap:4px;padding:0;background:none;border:0;cursor:pointer}
.chipcar{width:9px;height:6px;fill:none;stroke:var(--faint);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .14s}
.chipsel.open .chipcar{transform:rotate(180deg)}
.chipmenu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:70;min-width:172px;
  background:#fff;border:1px solid var(--line-mid);border-radius:12px;padding:5px;
  box-shadow:0 16px 40px rgba(14,26,43,.16)}
.chipsel.open .chipmenu{display:block}
.chipopt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:8px;
  font-size:.84rem;text-align:left;color:var(--ink);background:none;border:0;cursor:pointer}
.chipopt:hover{background:var(--bg)}
.chipopt.on{font-weight:700}
.chipopt.on::after{content:'✓';margin-left:auto;color:var(--accent);font-size:.8rem}
.chipdot{width:9px;height:9px;border-radius:50%;flex:none}

.quiet{color:var(--off-fg);font-weight:700}
.sub{font-size:.74rem;color:var(--faint)}

.btn{padding:8px 15px;border-radius:9px;background:var(--accent);color:#fff;font-size:.83rem;font-weight:700}
.btn:hover{background:var(--accent-dark)}
.btn.q{background:#fff;color:var(--ink);border:1px solid var(--line-mid);font-weight:500}
.btn.q:hover{background:var(--bg)}
.btn.sm{padding:5px 11px;font-size:.78rem}
.btn.danger{background:var(--off-fg)}
.btn:disabled{opacity:.5;cursor:default}

.bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.bar .sp{flex:1}
.seg{display:inline-flex;background:#EDEDF0;border-radius:9px;padding:2px}
.seg button{padding:6px 14px;border-radius:7px;font-size:.82rem;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm)}
.chip{font-size:.78rem;padding:5px 12px;border:1px solid var(--line-mid);border-radius:20px;background:#fff;color:var(--muted)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px}
.ph{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.ph h3{font-size:.85rem;font-weight:800}
.ph .sp{flex:1}
.pb{padding:18px}
.pb.tight{padding:4px 0}
.empty{text-align:center;padding:34px 20px;color:var(--muted);font-size:.86rem}
.err{background:var(--off-bg);color:var(--off-fg);border:1px solid rgba(179,38,30,.18);border-radius:9px;
  padding:10px 14px;font-size:.83rem;margin-bottom:14px}
.note{font-size:.74rem;color:var(--faint);padding:4px 2px 22px}

/* ---------- Table ---------- */
.grid{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.grid th{text-align:left;font-size:.69rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
  padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line);white-space:nowrap}
.grid td{padding:10px 14px;font-size:.84rem;border-bottom:1px solid var(--line);vertical-align:middle}
.grid tbody tr:last-child td{border-bottom:0}
.grid tbody tr{cursor:pointer}
.grid tbody tr:hover{background:var(--surface)}
.cell-name{display:flex;align-items:center;gap:9px}

/* ---------- The raise header ----------
   How much of the round is real, who has gone quiet, who is reading. */
.raise{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 22px;margin-bottom:16px}
.raise-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px}
.raise-num .k{font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.raise-num .v{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.raise-num[data-act]:hover .v{color:var(--accent)}
.raise-bar{position:relative;height:9px;border-radius:5px;background:#EDEDF0;margin:16px 0 7px;overflow:hidden}
.raise-bar span{position:absolute;left:0;top:0;bottom:0;background:var(--ok-fg);border-radius:5px}
.raise-bar i{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,
  rgba(30,122,61,.45) 0 5px, rgba(30,122,61,.18) 5px 10px);border-radius:5px}
.raise-bar span+i{left:0;transform:translateX(0)}
.raise-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:4px}
@media (max-width:900px){.raise-cols{grid-template-columns:1fr}}

/* Borrowed from the data room's own Overview card so the same information
   looks the same in both places. */
/* Four now: the fourth is which copy of the room they are actually being
   served, which is the one number nobody thinks to ask about until it is
   wrong. auto-fit keeps it readable in the narrow right-hand column. */
.subcard-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;margin-bottom:16px}
.subcard-meta .k{display:block;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.subcard-meta .v{font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.subcard-pages-lab{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.subcard-pages ol{margin:0;padding:0;list-style:none;counter-reset:pg}
.subcard-pages li{counter-increment:pg;display:flex;align-items:baseline;gap:8px;padding:4px 0;
  border-bottom:1px solid var(--line);font-size:.82rem}
.subcard-pages li:last-child{border-bottom:0}
.subcard-pages li::before{content:counter(pg);flex:none;width:16px;font-size:.72rem;font-weight:800;color:var(--faint)}
.subcard-pages .pg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subcard-pages .t{flex:none;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

.passcode{display:flex;align-items:center;gap:12px}
.passcode code{flex:1;font-size:1.4rem;font-weight:700;letter-spacing:.14em;text-align:center;
  background:var(--bg);border:1px solid var(--line-mid);border-radius:11px;padding:14px}

/* ---------- Board ---------- */
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:24px}
.col{flex:0 0 256px;background:#EFEFF2;border-radius:var(--radius);padding:11px;transition:background .15s}
.col.over{background:#DEE9FB}
.colh{display:flex;align-items:center;gap:7px;padding:2px 5px 11px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.colt{font-size:.81rem;font-weight:800}
.colc{font-size:.71rem;color:var(--faint)}
.cols{margin-left:auto;font-size:.71rem;color:var(--faint);font-variant-numeric:tabular-nums}
.card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:8px;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.card.dragging{opacity:.4}
.cardtop{display:flex;gap:9px;align-items:flex-start}
.cardname{font-size:.85rem;font-weight:700;line-height:1.3}
.cardsub{font-size:.74rem;color:var(--muted);margin-top:1px}
.cardmeta{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:.72rem;color:var(--faint)}
.cardmeta b{color:var(--ink);font-variant-numeric:tabular-nums}
.cardfoot{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.cardfoot .sp{flex:1}

/* ---------- Profile ---------- */
.back{font-size:.83rem;color:var(--muted);margin-bottom:13px;display:inline-flex;gap:6px;align-items:center}
.back:hover{color:var(--accent)}
.phead{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:16px}
.ptop{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.avwrap{position:relative;flex:none}
.avwrap .edit{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;background:#fff;
  border:1px solid var(--line-mid);display:grid;place-items:center;font-size:11px;box-shadow:var(--shadow-sm)}
.ptitle{font-size:1.45rem;font-weight:800;letter-spacing:-.02em}
.psub{font-size:.86rem;color:var(--muted);margin-top:2px}
.pstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line)}
.k{font-size:.69rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.v{font-size:1rem;font-weight:700;margin-top:2px}
/* A stat you can change. Looks like the others until you go near it, because
   it is a fact first and a control second. */
.v.pick{display:block;text-align:left;padding:0;border-bottom:1px dashed transparent}
.v.pick:hover{color:var(--accent);border-bottom-color:currentColor}
.v.pick::after{content:" ⌄";font-size:.8em;color:var(--faint)}
.tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{padding:10px 14px;font-size:.84rem;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
/* Present but switched off: the tab stays visible so it is clear the feature
   exists and this person simply has nothing behind it. */
.tabs button.off{color:var(--faint);opacity:.55;cursor:default}
.two{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
@media (max-width:980px){.two{grid-template-columns:1fr}}
.biogroup+.biogroup{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.biogroup h4{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);margin:0 0 8px}
.biogroup .kv dt{width:140px}
/* The full width of its panel. It had a 70ch reading measure, which is the
   right call for a column of body text and the wrong one here: the panel is
   already the width somebody chose to give it. */
.bioprose{font-size:.88rem;line-height:1.65;white-space:pre-wrap}
.biogroup .kv dd{white-space:pre-wrap}
.biohead{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);
  padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.form .biohead:first-child{border-top:0;padding-top:0;margin-top:0}

.kv{display:flex;gap:14px;padding:6px 0;font-size:.85rem}
.kv dt{width:92px;flex:none;color:var(--faint)}
.kv dd{min-width:0;word-break:break-word}

/* ---------- Timeline ---------- */
.tl{display:flex;gap:11px;padding:13px 18px}
.tl+.tl{border-top:1px solid var(--line)}
.tlico{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:12px;
  background:#EFEFF2;color:var(--muted)}
.tlico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tlico.call,.tlico.video{background:var(--ok-bg);color:var(--ok-fg)}
.tlico.email{background:var(--accent-soft);color:var(--accent)}
.tlico.meeting{background:var(--violet-bg);color:var(--violet-fg)}
.tlico.text{background:var(--warn-bg);color:var(--warn-fg)}
/* Their move, not ours. Warm, so it reads differently at a glance from the
   things we did. */
.tlico.room{background:#FDEFE6;color:var(--warm)}
.tlico.stage,.tlico.event{background:var(--accent-soft);color:var(--accent)}
/* Somebody new in the book. Green because it is a gain, and distinct from the
   blue of things we did and the warm of things they did. */
.tlico.intro,.tlico.added{background:var(--ok-bg);color:var(--ok-fg)}
/* Housekeeping, not a gain and not a conversation. Grey, so a run of edits
   reads as background against the calls and meetings around it. */
.tlico.edit{background:#EFEFF2;color:var(--muted)}
.tlico.merge{background:var(--accent-soft);color:var(--accent)}
/* A document arriving. Violet, so it reads apart from both the calls and the
   grey of housekeeping. */
.tlico.file{background:var(--violet-bg);color:var(--violet-fg)}

/* Marks the person as newly added, right where their name is. Quiet enough to
   scan past once it stops being news. */
.tag.t-new{background:var(--ok-bg);color:var(--ok-fg);margin-left:7px;vertical-align:2px}
/* Who logged it, parked at the end of the row and out of the sentence. Aligned
   to the first line so it reads against the headline, not the note. */
.byav{flex:none;align-self:flex-start;margin-top:1px;opacity:.85}
.byav:hover{opacity:1}
.byav .av{width:22px;height:22px;font-size:9px}

/* Leading the row: the person, with the kind of entry as a badge on their
   shoulder. One unit, the same 32px the plain kind tile occupies, so rows with
   an author and rows without still line up down the column. */
.whofirst{position:relative;flex:none;align-self:flex-start;display:block;width:32px;height:32px}
.whofirst .av{width:32px;height:32px;font-size:11px}
.kindbadge{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;background:#EFEFF2;color:var(--muted);
  box-shadow:0 0 0 2px #fff}
.kindbadge svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.kindbadge.call,.kindbadge.video{background:var(--ok-bg);color:var(--ok-fg)}
.kindbadge.email{background:var(--accent-soft);color:var(--accent)}
.kindbadge.meeting{background:var(--violet-bg);color:var(--violet-fg)}
.kindbadge.text{background:var(--warn-bg);color:var(--warn-fg)}
.kindbadge.intro,.kindbadge.added{background:var(--ok-bg);color:var(--ok-fg)}
.kindbadge.stage,.kindbadge.event{background:var(--accent-soft);color:var(--accent)}
.kindbadge.edit{background:#EFEFF2;color:var(--muted)}
.kindbadge.file{background:var(--violet-bg);color:var(--violet-fg)}

/* Filter pins under a panel heading. Sits between the header and the list so
   it reads as belonging to the panel rather than floating above it. */
.pfilters{padding:10px 18px 2px;border-bottom:1px solid var(--line)}
.pfilters .pin-row{flex-wrap:wrap;gap:7px;background:none;padding:0}
.pfilters .actby{display:inline-flex}
/* The third pin is a list, so it is a select wearing the same clothes. The
   shared .pin rule only dresses buttons, so the pill has to be restated here
   rather than inherited. */
.pfilters select.pin{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  flex:none;padding:7px 28px 7px 15px;border-radius:20px;font-size:.8rem;font-weight:700;
  font-family:inherit;color:var(--pin);
  background-color:color-mix(in srgb, var(--pin) 13%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pin) 26%, #fff);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 53%,calc(100% - 11px) 53%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
  transition:background-color .14s,color .14s,box-shadow .14s}
.pfilters select.pin:hover{background-color:color-mix(in srgb, var(--pin) 22%, #fff)}
.pfilters select.pin.on{background-color:var(--pin);color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb, var(--pin) 45%, transparent)}
.pfilters select.pin:focus{outline:none;box-shadow:0 0 0 3px rgba(46,107,224,.18)}
/* The options themselves are drawn by the OS, so they need readable colours. */
.pfilters select.pin option{color:var(--ink);background:#fff;font-weight:500}

.stream .task .tt a{color:var(--accent);font-weight:600}
.stream .task .tt a:hover{text-decoration:underline}
/* A name on the second line stays the colour of that line until you go near
   it, so the feed still reads as sentences rather than a wall of blue. */
.stream .task .sub a,.shared .task .tt a{color:inherit}
.stream .task .sub a:hover,.shared .task .tt a:hover{color:var(--accent);text-decoration:underline}
.tlm{flex:1;min-width:0}
.tlt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tltitle{font-size:.85rem;font-weight:700}
.tlwhen{font-size:.72rem;color:var(--faint);margin-left:auto;white-space:nowrap}
.tlbody{font-size:.84rem;color:var(--muted);margin-top:3px;white-space:pre-wrap}
.tlwho{font-size:.72rem;color:var(--faint);margin-top:4px}

/* ---------- Heat ---------- */
/* ---------- Today ----------
   The home screen adds four classes and no new colours. The round is the
   largest thing on the page; everything under it is deliberately quiet. */
.raise.hero{padding:22px 26px}
.raise-num.lead{grid-column:1/-1;margin-bottom:2px}
.raise.hero .raise-num.lead .v{font-size:2.4rem;line-height:1.1;letter-spacing:-.02em}
.raise.hero .raise-num.lead .v .of{font-size:1.1rem;font-weight:600;color:var(--muted);letter-spacing:0}
.raise.hero .raise-num.lead .k{font-size:.72rem}
/* Grid cells stretch to the tallest, so pinning the number to the bottom of
   its cell keeps the row of figures level even when a label wraps to two
   lines ("Signed, not funded"). Guessing a min-height in em gets this wrong
   the moment the font metrics change. */
.raise.hero .raise-num{display:flex;flex-direction:column;justify-content:flex-end}
@media (max-width:640px){.raise.hero .raise-num.lead .v{font-size:1.8rem}}

/* Heat rows in a narrow column: the label flexes instead of holding 178px. */
.heat.compact .heatn{width:auto;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A capped list needs an honest way to say there are more of these. */
.pmore{display:block;width:100%;padding:10px 18px;border-top:1px solid var(--line);
  font-size:.79rem;font-weight:700;color:var(--accent);text-align:center}
.pmore:hover{background:var(--surface)}

/* Which slice of the list you are on, and the way out of it. */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;
  padding:9px 18px;border-top:1px solid var(--line)}
.pbtn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line-mid);background:#fff;
  color:var(--ink);font-size:.95rem;line-height:1;display:grid;place-items:center}
.pbtn:hover:not(:disabled){background:var(--surface);border-color:var(--faint)}
.pbtn:disabled{opacity:.35;cursor:default}

/* Paging, for the rare card with more than thirty rows in it. */
.pgr{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0 2px}
.pgr button[disabled]{opacity:.38;pointer-events:none}

.heat{display:flex;align-items:center;gap:11px;padding:5px 0}
/* Wide enough for the room's real section titles, which are what these rows
   now carry: "Regulatory & Compliance", not "Regulatory". */
.heatn{width:178px;flex:none;font-size:.83rem;line-height:1.3}
.heatb{flex:1;height:10px;background:#EFEFF2;border-radius:5px;overflow:hidden}
/* display:block matters: a span is inline, and an inline box ignores both
   height and a percentage width, so every bar rendered empty. */
.heatf{display:block;height:100%;min-width:3px;border-radius:5px;
  background:linear-gradient(90deg,var(--accent),var(--warm))}
.heatt{width:62px;text-align:right;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Tasks ---------- */
.task{display:flex;align-items:center;gap:11px;padding:11px 18px}
/* A name that opens a profile still reads as a name until you go near it. */
.task .tt a{color:inherit}
.task .tt a:hover{color:var(--accent)}
.task+.task{border-top:1px solid var(--line)}
.check{width:18px;height:18px;border-radius:50%;flex:none;border:1.5px solid var(--line-mid);background:#fff;
  display:grid;place-items:center;color:#fff;font-size:10px}
.check.done{background:var(--ok-fg);border-color:var(--ok-fg)}
.task.done .tt{color:var(--faint);text-decoration:line-through}
/* A title line is one line. Long ones end in an ellipsis rather than running
   off the edge or under the author avatar on the right, which is what a
   144-character filename did. The full text is on hover. */
.tt{font-size:.85rem}
.task .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.due{font-size:.73rem;white-space:nowrap}
.due.over{color:var(--off-fg);font-weight:700}
.due.today{color:var(--warn-fg);font-weight:700}

/* ---------- Files ---------- */
/* .filerow, not .file: a bare .file collided with the file event-kind modifier
   on .kindbadge and .tlico, which are also written .something.file. Same
   specificity, this rule later in the sheet, so it won the display and added a
   padding those badges never asked for. The file badge came out 36x24 with its
   icon shrunk to nothing. */
.filerow{display:flex;align-items:center;gap:11px;padding:12px 18px}
/* A filename is somebody else's writing and can be very long with nothing to
   break on. One line, cut with an ellipsis, so it can never push the buttons
   off the row or run underneath them. The full name is in the tooltip. */
.filerow .fname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filerow .btn,.filerow > .btn{flex:none}
.filerow+.filerow{border-top:1px solid var(--line)}
/* Its own column rather than a third clause in the meta line: a date is what
   you scan down to find something, and it only works if it lines up. */
.fdate{flex:none;width:96px;text-align:right;font-size:.76rem;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fdate-none{opacity:.45}
/* The two dates as a pair with room between them, so they read as two columns
   rather than one long number. */
/* One row: what it is for, a divider, what it is, then the search. Wraps on a
   narrow panel rather than pushing the search off the edge. */
.filterbar{padding-bottom:0;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.chip-div{width:1px;height:20px;background:var(--line-mid);margin:0 4px;flex:none}
/* A type pin carries the same colour as the icon on the row it filters to. */
.chip-fam .chip-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--fc,var(--muted));margin-right:6px;vertical-align:middle}
.chip-fam.on .chip-dot{background:#fff}
.fsearch{position:relative;flex:none}
.fsearch input{width:190px;padding:6px 26px 6px 11px;border:1px solid var(--line-mid);
  border-radius:999px;font-size:.8rem;font-family:inherit;background:#fff;color:var(--ink)}
.fsearch input:focus{outline:none;border-color:var(--accent)}
.fsearch-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;line-height:1}
.fsearch-x:hover{background:var(--bg);color:var(--ink)}
.fdates{flex:none;display:flex;align-items:center;gap:20px}
.fhead .fdates .sortable,.fhead .fhead-name{cursor:pointer;user-select:none}
.fhead .sortable:hover{color:var(--ink)}
.fhead .sorted{color:var(--ink)}
/* A picture in the timeline shows itself rather than a type icon. */
.fico-shot{padding:0;border:1px solid var(--line-mid);background:#fff}
.fico-shot img{width:100%;height:100%;object-fit:cover;border-radius:8px}
/* Sortable column headings. The arrow only appears on the column doing the
   sorting; a row of arrows on every heading is noise. */
.grid th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.grid th.sortable:hover{color:var(--ink)}
.grid th.sorted{color:var(--ink)}
.sortk{display:inline-block;width:11px;margin-left:2px;font-size:.72rem}
/* The column titles. Same widths as the rows below, so the two line up. */
.fhead{padding-top:8px;padding-bottom:8px;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.fhead .fhead-name{flex:1;min-width:0}
.fhead .fdate{font-size:.7rem;font-weight:700;letter-spacing:.05em}

@media (max-width:860px){ .fhead{display:none} }
/* A row still showing the upload date rather than the document own date is
   marked, so a column of mixed sources never reads as one thing. */
.fdate-up{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;opacity:.55;margin-left:3px}
.facts{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:2px;width:126px}
.iconb{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer}
.iconb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.iconb:hover{background:var(--bg);border-color:var(--line-mid);color:var(--ink)}
.iconb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.iconb.on{color:var(--warn-fg);background:var(--warn-bg);border-color:var(--warn-fg)}
.iconb.danger:hover{color:var(--off-fg);border-color:var(--off-fg);background:var(--off-bg)}
/* On a phone the date drops out before the filename does. */
@media (max-width:860px){ .fdate{display:none} }
/* The family colour rides in on --fc, so one rule paints every format and a
   new family is one line of JS rather than a new class here. The tint is the
   same colour at low alpha via color-mix, which keeps the two in step. */
.fico{width:44px;height:44px;border-radius:8px;flex:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;overflow:hidden;
  color:var(--fc,var(--muted));
  background:#F4F4F6;                                    /* if color-mix is missing */
  background:color-mix(in srgb, var(--fc,#6E6E73) 11%, #fff);
  border:1px solid #E8E8EC;
  border-color:color-mix(in srgb, var(--fc,#6E6E73) 18%, #fff)}
.fico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.fico-x{font-size:8px;font-weight:800;letter-spacing:.02em;line-height:1;opacity:.85}
/* Timeline size. Matches .tlico so a column of mixed rows still lines up, and
   drops the extension label: the row names the file two inches to the right. */
.fico-sm{width:32px;height:32px;border-radius:9px;gap:0}
.fico-sm svg{width:17px;height:17px}
.fico-sm .fico-x{display:none}
.fthumb{width:44px;height:44px;border-radius:8px;flex:none;overflow:hidden;display:block;background:#EFEFF2;
  border:1px solid var(--line)}
.fthumb img{width:100%;height:100%;object-fit:cover}
.fthumb:hover{border-color:var(--accent)}
.btn.q.on{background:var(--warn-bg);border-color:var(--warn-fg);color:var(--warn-fg);font-weight:700}
.drop{border:1.5px dashed var(--line-mid);border-radius:11px;padding:20px;text-align:center;color:var(--muted);
  font-size:.84rem;margin:14px 18px}
.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* ---------- Modal + forms ----------
   Wide, sectioned, and scrolls in the middle so the title and the buttons
   never leave the screen. */
.back-drop{position:fixed;inset:0;background:rgba(20,28,44,.42);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}
.modal{background:#fff;border-radius:18px;max-width:980px;width:100%;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.30);overflow:hidden}
/* A question, not a form. Narrow, no scrolling body, and the explanation
   reads at normal size instead of in the small print. */
.modal.ask{max-width:430px}
.modal.ask .modal-head{border-bottom:0;padding:24px 26px 6px}
.modal.ask .modal-head p{font-size:.88rem;color:var(--muted);line-height:1.5;margin-top:8px}
.modal.ask .acts{border-top:0;padding:18px 26px 22px}

.modal-head{padding:20px 26px 16px;border-bottom:1px solid var(--line);flex:none}
.modal-head h3{font-size:1.15rem;font-weight:700;letter-spacing:-.015em;margin:0}
.modal-head p{font-size:.8rem;color:var(--faint);margin:3px 0 0}
.modal-body{padding:6px 26px 22px;overflow-y:auto;flex:1}
.acts{padding:14px 26px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;
  flex:none;background:var(--surface)}
@media (max-width:640px){
  .back-drop{padding:0}
  .modal{max-height:100vh;border-radius:0}
  .modal-head,.modal-body,.acts{padding-left:18px;padding-right:18px}
}

/* Twelve columns so a field can be the width it deserves: a salutation box
   does not need the same room as an address. */
.form{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 18px;align-items:start}
.form > div{grid-column:span 6}
.form.page > div{grid-column:span 4}
/* Full-width things have to out-rank the two defaults above, so they are
   written at the same specificity and placed after them. */
.form > div.wide, .form.page > div.wide,
.form > div.fsec, .form.page > div.fsec,
.form > div.chan-ins, .form.page > div.chan-ins{grid-column:1/-1}
@media (min-width:1180px){
  .form.page > div.sp2{grid-column:span 2}
  .form.page > div.sp3{grid-column:span 3}
  .form.page > div.sp4{grid-column:span 4}
  .form.page > div.sp5{grid-column:span 5}
  .form.page > div.sp6{grid-column:span 6}
}
@media (max-width:1179px){ .form.page > div{grid-column:span 6} }
/* A dialog is narrow enough that only one split is worth having: a title
   sitting in front of a name. Scoped to the modal so the profile page keeps
   its own responsive spans above, and no width query, because a dialog is the
   same width whatever the window is doing. */
.modal .form > div.sp3{grid-column:span 3}
.modal .form > div.sp9{grid-column:span 9}
.form label{display:block;font-size:.74rem;font-weight:700;color:var(--muted);margin-bottom:5px}
.form input,.form select,.form textarea{width:100%;padding:9px 12px;border:1px solid var(--line-mid);
  border-radius:10px;font-size:.88rem;background:#fff;transition:border-color .12s,box-shadow .12s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(46,107,224,.14)}
.form textarea{min-height:78px;resize:vertical;line-height:1.5}
.form .hint{font-size:.72rem;color:var(--faint);margin-top:4px}
@media (max-width:700px){ .form > div, .form.page > div{grid-column:span 12} }

/* ---------- Full-page editor ----------
   A person has too many fields for a dialog. Three columns where there is
   room, and the Save button repeated at the bottom so a long form does not
   send you back up to find it. */
.editor{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);max-width:1240px}
.editor-head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;
  gap:16px;flex-wrap:wrap;position:sticky;top:var(--topbar);background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);z-index:10;border-radius:var(--radius) var(--radius) 0 0}
.editor-head h2{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin:0}
.editor-head p{font-size:.8rem;color:var(--faint);margin:3px 0 0}
.editor-acts{margin-left:auto;display:flex;gap:9px}
.av-pick{padding:0;background:none;border:0;position:relative;flex:none}
.av-pick .av{border:2px dashed var(--line-mid);font-size:26px;font-weight:400}
.av-pick .av:has(img){border-style:solid;border-color:var(--line)}
.av-pick:hover .av{border-color:var(--accent);color:var(--accent)}
.av-pick .edit{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:#fff;
  border:1px solid var(--line-mid);display:grid;place-items:center;font-size:12px;box-shadow:var(--shadow-sm)}
.editor .form.page{padding:8px 26px 26px}
.editor-foot{padding:16px 26px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;
  gap:9px;background:var(--surface);border-radius:0 0 var(--radius) var(--radius)}
@media (min-width:1180px){ .form.page .chan-ins{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){
  .editor{border-radius:0;border-left:0;border-right:0;margin:-16px}
  .editor-head,.editor .form.page,.editor-foot{padding-left:16px;padding-right:16px}
  .editor-acts{width:100%}.editor-acts .btn{flex:1}
}

/* Section divider inside a form */
.fsec{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin:14px 0 -2px}
.fsec:first-child{margin-top:2px}
.fsec span{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--accent)}
.fsec i{flex:1;height:1px;background:var(--line);font-style:normal}

/* Required */
.req::after{content:"Required";float:right;font-size:.64rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint)}
.form .missing input,.form .missing select,.form .missing textarea{border-color:var(--off-fg);
  box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.form .missing label{color:var(--off-fg)}
.form .missing .req::after{content:"Needed";color:var(--off-fg)}
@keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
.form .missing{animation:nudge .28s ease}

/* Segmented control */
.seg-ctl{display:flex;background:#EDEDF0;border-radius:11px;padding:3px;gap:2px}
.seg-ctl button{flex:1;padding:8px 6px;border-radius:8px;font-size:.8rem;font-weight:600;color:var(--muted);
  white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.seg-ctl button:hover{color:var(--ink)}
.seg-ctl button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,45,90,.13)}
.seg-ctl button.on[data-tone=cold]{color:var(--faint)}
.seg-ctl button.on[data-tone=warm]{color:var(--warn-fg)}
.seg-ctl button.on[data-tone=hot]{color:var(--off-fg)}
.seg-ctl button.on[data-tone=good]{color:var(--ok-fg)}
.seg-ctl.tight button{padding:7px 4px;font-size:.76rem}
/* Sits inside a panel header where it is a pair of tabs rather than a form
   control, so it stays only as wide as its labels. */
.seg-ctl.seg-sm{flex:none;padding:2px;border-radius:9px}
.seg-ctl.seg-sm button{flex:none;padding:5px 12px;font-size:.76rem;border-radius:7px}
@media (max-width:640px){.seg-ctl{flex-wrap:wrap}.seg-ctl button{flex:1 1 30%}}

/* Temperature as coloured pins. Same height as a segmented control so the two
   sit level when they share a row. */
/* Temperature as labelled chips, the way skills read on a profile. Tinted
   when idle, solid in their own colour when chosen. Written as
   .seg-ctl button.pin so these beat the generic segmented-control rules
   above, which would otherwise paint the chosen one white. */
.seg-ctl.pin-row{background:none;padding:0;gap:7px;align-items:center;min-height:41px;flex-wrap:wrap}
.seg-ctl button.pin{flex:none;padding:7px 15px;border-radius:20px;font-size:.8rem;font-weight:700;
  color:var(--pin);background:color-mix(in srgb, var(--pin) 13%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pin) 26%, #fff);
  transition:background .14s,color .14s,box-shadow .14s,transform .14s}
.seg-ctl button.pin:hover{background:color-mix(in srgb, var(--pin) 22%, #fff);transform:translateY(-1px)}
.seg-ctl button.pin.on{background:var(--pin);color:#fff;box-shadow:0 2px 8px color-mix(in srgb, var(--pin) 45%, transparent)}

/* Lookup: type to search, pick from the list, or clear it */
.lookup{position:relative}
/* Styled here rather than relying on ".form input", because the picker is also
   used outside a form (the composer on Home) where that rule never applied and
   the box fell back to the browser's own square border. */
.lookup .lk-in{width:100%;padding:9px 32px 9px 12px;border:1px solid var(--line-mid);
  border-radius:var(--radius-sm);font-size:.9rem;background:#fff}
.lookup .lk-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,107,224,.15)}

/* ---------- More than one person in one field ---------- */
/* The border moves off the input and onto the wrapper, so tokens and the
   cursor sit inside one box that grows as names are added. */
.lookup.multi .lk-toks{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  min-height:41px;padding:5px 8px;border:1px solid var(--line-mid);border-radius:var(--radius-sm);
  background:#fff;cursor:text}
.lookup.multi:focus-within .lk-toks{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,107,224,.15)}
.lookup.multi .lk-in{flex:1 1 90px;min-width:90px;width:auto;border:0;padding:2px 2px;
  background:transparent;box-shadow:none}
.lookup.multi .lk-in:focus{border:0;box-shadow:none}

.lk-tok{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:3px 4px 3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);
  font-size:.8rem;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-tokx{width:16px;height:16px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:13px;line-height:1;color:var(--accent);opacity:.55}
.lk-tokx:hover{opacity:1;background:rgba(46,107,224,.16)}
.lookup .lk-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  border-radius:50%;background:#E3E3E8;color:var(--muted);font-size:13px;line-height:1;display:none;
  align-items:center;justify-content:center}
.lookup.has .lk-clear{display:flex}
.lookup .lk-clear:hover{background:#D3D3DA;color:var(--ink)}
/* The picker. Two lines to a row, because a name and where they work are
   different facts and setting them side by side makes the name wrap before
   the company does. Roomy rows, a hairline between them that stops short of
   the edge, and one soft highlight that follows both the mouse and the
   keyboard, so there is only ever one thing selected. */
/* Wider than the field it hangs off, because the field is sized for a name
   and the row carries a name and a company. Never wider than the screen. */
.lookup .lk-list{position:absolute;left:0;right:auto;min-width:100%;width:max-content;
  max-width:min(360px,calc(100vw - 32px));top:calc(100% + 6px);z-index:20;background:#fff;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(20,45,90,.18),0 2px 8px rgba(20,45,90,.07);
  max-height:302px;overflow-y:auto;overscroll-behavior:contain;display:none;padding:6px}
.lookup .lk-list.open{display:block}

.lookup .lk-item{position:relative;padding:8px 10px;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;gap:10px}
/* Hairline between rows, inset past the avatar, and never under the last one. */
.lookup .lk-item+.lk-item::before{content:"";position:absolute;left:46px;right:10px;top:-1px;
  height:1px;background:var(--line)}
.lookup .lk-item:hover,.lookup .lk-item.cursor{background:var(--accent-soft)}
.lookup .lk-item:hover::before,.lookup .lk-item.cursor::before,
.lookup .lk-item:hover+.lk-item::before,.lookup .lk-item.cursor+.lk-item::before{opacity:0}
.lookup .lk-item .av{width:30px;height:30px;font-size:11px}

.lookup .lk-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.lookup .lk-name{font-size:.87rem;font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lookup .lk-sub{font-size:.75rem;color:var(--faint);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Adding somebody sits with the results, not off in a corner of the page. */
.lookup .lk-sep{height:1px;background:var(--line);margin:5px 10px}
.lookup .lk-item.lk-new .lk-name{color:var(--accent)}
.lookup .lk-plus{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:16px;font-weight:700;line-height:1}
.lookup .lk-none{padding:12px 10px;font-size:.82rem;color:var(--faint);text-align:center}
.lk-with-btn{display:flex;gap:8px;align-items:flex-start}
.lk-with-btn .lookup{flex:1;min-width:0}
.lk-with-btn .btn{flex:none;white-space:nowrap;padding:9px 13px}

/* Messaging channels: pick the apps, then fill in the handle */
/* Month, day, and a year only if it is known. The year box is narrower than
   the rest because it is the optional one. */
/* The quiet actions, folded behind one button so the loud one stands alone. */
.menu-wrap{position:relative}
/* An icon button has to be exactly as tall as the text button beside it, and a
   glyph does not agree with text about how tall a line is: a gear rendered
   1.4px taller than "Add contact". The height is stated in the same terms .btn
   derives its own from, 1.5em of line box plus its 8px of padding, so the two
   cannot drift apart. */
.btn.ico{display:inline-flex;align-items:center;justify-content:center;
  height:calc(1.5em + 16px);padding:0 13px;line-height:1;font-weight:800;letter-spacing:.08em}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:196px;z-index:20;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:5px;
  box-shadow:0 12px 32px rgba(20,45,90,.14),0 2px 6px rgba(20,45,90,.06);display:none}
.menu-wrap.open .menu{display:block}
.menu button{display:block;width:100%;text-align:left;padding:8px 11px;border-radius:7px;
  font-size:.85rem;color:var(--ink)}
.menu button:hover{background:var(--bg)}
.menu button.bad{color:var(--off-fg)}
.menu button.bad:hover{background:var(--off-bg)}
.menu button.off{color:var(--faint);opacity:.6;cursor:default}
.menu button.off:hover{background:none}
.menu-sep{height:1px;background:var(--line);margin:5px 4px}

/* One address per row, with a + underneath to add another. */
.mails{display:flex;flex-direction:column;gap:7px}
.mail-row{display:flex;gap:7px;align-items:center}
.mail-row input{flex:1;min-width:0}
.mail-x{width:32px;height:38px;flex:none;border-radius:8px;color:var(--faint);font-size:17px;line-height:1}
.mail-x:hover{background:var(--off-bg);color:var(--off-fg)}
.mail-add{align-self:flex-start;font-size:.78rem;font-weight:600;color:var(--accent);padding:3px 0}
.mail-add:hover{text-decoration:underline}

.bday{display:flex;gap:8px}
.bday .bd-m{flex:1.6;min-width:0}
.bday .bd-d{flex:.9;min-width:0}
.bday .bd-y{flex:1.3;min-width:0}

.chan-row{display:flex;gap:10px;align-items:center;min-height:41px;flex-wrap:wrap}
.chan{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:#EDEDF0;color:var(--faint);transition:background .14s,color .14s,transform .14s;position:relative}
.chan svg{width:20px;height:20px;display:block}
.chan:hover{transform:scale(1.07);color:var(--muted)}
.chan.on{color:#fff;transform:scale(1.07)}
.chan.on[data-ch=telegram]{background:#229ED9}
.chan.on[data-ch=whatsapp]{background:#25D366}
.chan.on[data-ch=viber]{background:#7360F2}
.chan.on[data-ch=facebook]{background:#1877F2}
.chan-ins{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.chan-in{display:none}
.chan-in.show{display:block}
@media (max-width:640px){.chan-ins{grid-template-columns:1fr}}

/* The same marks, read-only, on a profile */
.chan-links{display:flex;gap:9px;flex-wrap:wrap;padding:2px 0}
.chan-links a{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff}
.chan-links a svg{width:17px;height:17px}
.chan-links a[data-ch=telegram]{background:#229ED9}
.chan-links a[data-ch=whatsapp]{background:#25D366}
.chan-links a[data-ch=viber]{background:#7360F2}
.chan-links a[data-ch=facebook]{background:#1877F2}
.chan-links a:hover{opacity:.85}

/* Switch */
.sw-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line-mid);border-radius:10px}
/* Both are spans, so without display:block the title and its hint render as
   one run of text: "Pin to the topKeeps it above everything else". */
.sw-row .sw-text{flex:1;min-width:0}
.sw-row .sw-title{display:block;font-size:.85rem;font-weight:600;line-height:1.35}
.sw-row .sw-sub{display:block;font-size:.72rem;color:var(--muted);line-height:1.35;margin-top:2px}
.sw{position:relative;width:48px;height:29px;flex:none}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.sw span{position:absolute;inset:0;background:#E3E3E8;border-radius:15px;transition:background .18s}
.sw span::after{content:"";position:absolute;top:2.5px;left:2.5px;width:24px;height:24px;background:#fff;
  border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .18s}
.sw input:checked+span{background:var(--ok-fg)}
.sw input:checked+span::after{transform:translateX(19px)}
.sw input:focus-visible+span{box-shadow:0 0 0 3px rgba(46,107,224,.25)}

/* ---------- Home ----------
   Three additions, matching the prototype. Everything else on the page is
   existing furniture. */

/* The composer. Always open, because logging is the thing that stops
   happening the moment it costs a click to start. */
.logbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 18px;margin-bottom:16px}
.logbar .lb-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logbar > .seg-ctl{margin-bottom:12px}
.logbar .seg-ctl{flex:none}
.logbar .sp4{width:210px;flex:none}
/* Look only. How much room each field takes is decided by the per-kind
   classes below, so this no longer claims a width of its own: it was forcing
   a 220px minimum onto the date box and pushing the button off the row. */
.logbar .lb-in{padding:9px 12px;border:1px solid var(--line-mid);
  border-radius:var(--radius-sm);font-size:.9rem}
.logbar .lb-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,107,224,.15)}
.logbar .lb-hint{font-size:.74rem;color:var(--faint);margin-top:9px}

/* The strip is redrawn per kind, so the fields present are the fields that
   kind needs. These only say how they share the row. */
.logbar .lb-grow{flex:1 1 170px;min-width:130px}
.logbar .lb-grow2{flex:2 1 220px;min-width:150px}
/* A date input carries its own internal box and comes out taller than a text
   input on the same padding, so the row would sit unevenly. Matched to the
   others rather than guessed at. */
.logbar .lb-date{flex:0 0 150px;width:150px;height:41px;padding-top:0;padding-bottom:0}
/* Sits in front of the name and reads as part of it, so it takes only the room
   a title needs rather than a share of the row. */
.logbar .lb-pre{flex:0 0 88px;width:88px;height:41px;padding:0 8px;background:#fff;
  color:var(--muted);cursor:pointer}
.logbar .lb-dir{flex:none}
/* Ends the line it sits on, so the groups of fields stay together instead of
   breaking wherever the window happens to run out. */
.logbar .lb-break{flex:0 0 100%;height:0;margin:0;padding:0;border:0}

/* The follow-up line: what it is, the date itself, and the four answers people
   give out loud. */
.logbar .lb-when{display:flex;align-items:center;gap:10px;flex:1 1 auto;flex-wrap:wrap}
.logbar .lb-lab{font-size:.78rem;color:var(--faint);font-weight:600;letter-spacing:.02em;flex:none}
.logbar .lb-quick{display:flex;gap:6px;flex-wrap:wrap}
.logbar .lb-quick button{border:1px solid var(--line-mid);background:#fff;color:var(--muted);
  border-radius:999px;padding:5px 11px;font-size:.76rem;font-family:inherit;cursor:pointer;
  white-space:nowrap;transition:border-color .12s,background .12s,color .12s}
.logbar .lb-quick button:hover{border-color:var(--faint);background:var(--surface);color:var(--ink)}
.logbar .lb-quick button.on{border-color:var(--accent);background:rgba(46,107,224,.08);
  color:var(--accent);font-weight:600}
.logbar .lb-top > .btn{flex:none}
@media (max-width:820px){
  .logbar .lb-grow,.logbar .lb-grow2,.logbar .lb-date{flex:1 1 100%;width:100%;min-width:0}
}
@media (max-width:820px){.logbar .sp4,.logbar .lb-in{width:100%;flex:1 1 100%;min-width:0}}

/* Headings inside a list: the day in the feed, the band in the Action List.
   Read once per group instead of once per row. */
.stream .day,.actions .day{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);padding:14px 18px 6px}
.stream .pb.tight > .day:first-child,.actions .pb.tight > .day:first-child{padding-top:4px}
/* A heading already separates the groups, so the first row under one does not
   need a line above it as well. */
.actions .day + .task{border-top:0}

/* Feed rows carry two lines and the first one wraps, so the icon lines up with
   the title rather than floating in the middle of the row, and the two lines
   are given room to read as two lines. */
.stream .task{align-items:flex-start;padding:13px 18px;gap:12px}
.stream .task .tt{font-size:.86rem;line-height:1.4}
.stream .task .sub{margin-top:3px;line-height:1.35}
.stream .task .tlico{margin-top:1px}

/* A contact plus the sentence describing what was promised. */
.nextrow{display:flex;align-items:flex-start;gap:11px;padding:11px 18px}
.nextrow+.nextrow{border-top:1px solid var(--line)}
.nextrow .ns{flex:1;min-width:0}
.nextrow .ns .who{font-size:.85rem;font-weight:600}
.nextrow .ns .who a{color:inherit}
.nextrow .ns .who a:hover{color:var(--accent)}
.nextrow .ns .what{font-size:.83rem;color:var(--muted);margin-top:2px}

/* ---------- secured profiles ----------
   The padlock rides on the corner of the face, because the face is the one
   piece of a contact that gets drawn everywhere. White ring so it reads on a
   photo as well as on a flat initials tile. */
.av-w{position:relative;display:inline-flex;vertical-align:middle}
.av-lock{position:absolute;top:-2px;left:-2px;width:12px;height:12px;border-radius:50%;
  background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1.5px var(--card)}
.av-lock svg{width:7px;height:7px}
.av-w .av.lg + .av-lock,
.av-w .av.xl + .av-lock{width:20px;height:20px;top:-1px;left:-1px;box-shadow:0 0 0 2px var(--card)}
.av-w .av.lg + .av-lock svg,
.av-w .av.xl + .av-lock svg{width:12px;height:12px}

.tag.t-lock{background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:4px}
.tag.t-lock svg{margin-top:-1px}
.tag.act{cursor:pointer}
.tag.act:hover{opacity:.85}

/* The padlock on the composer strip. Same height as the boxes beside it so the
   row does not grow a second line just to hold a toggle. */
.lb-lock{flex:none;padding:9px 13px;font-size:.9rem;border:1px solid var(--line-mid);
  background:var(--card);border-radius:var(--radius-sm);color:var(--faint);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.lb-lock:hover{color:var(--ink);border-color:var(--ink)}
.lb-lock.on{background:var(--ink);border-color:var(--ink);color:#fff}
.lb-lock svg{width:15px;height:15px;display:block;margin:3px 0}

/* The owner's gear, on its own line above the avatar row rather than beside
   it. Settings is about the account; the row underneath is about who is signed
   in, and the two are not the same question. */
/* Its own row, so the click target stays the size of the icon rather than the
   width of the sidebar. */
.side-foot .foot-top{order:-1;flex:0 0 100%;display:flex;margin-bottom:2px}
.side-foot .gear{width:28px;height:28px;border:0;background:transparent;
  color:var(--faint);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer}
.side-foot .gear:hover{background:var(--bg);color:var(--ink)}
.side-foot .gear.on{background:var(--accent-soft);color:var(--accent)}

/* The grant list in the sharing dialog. */
.who-list{display:flex;flex-direction:column;gap:2px}
.who-row{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:9px;cursor:pointer}
.who-row:hover{background:var(--bg)}
.who-row input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.who-nm{font-size:.88rem;font-weight:600;display:flex;flex-direction:column}
.who-rl{font-size:.68rem;font-weight:500;color:var(--muted)}

/* The privacy pin on a form. Off is the common answer and takes one small
   button; everything else only exists once it is on. */
.sec-f .sec-pin{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border:1px solid var(--line-mid);background:var(--card);border-radius:999px;
  font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer}
.sec-f .sec-pin:hover{border-color:var(--ink);color:var(--ink)}
.sec-f .sec-pin.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sec-f .sec-who{display:none}
.sec-f .sec-who.show{display:block;margin-top:10px}
.sec-f .sec-note{font-size:.8rem;color:var(--muted);margin:0 0 9px}
/* The search box sits flush under the note: it is the same field as the
   composer's "With whom?", so it needs no styling of its own beyond losing
   the gap a labelled field would leave. */
.sec-f .sec-who > div{margin:0}

/* ---------- forwarded mail ----------
   One card per message, each one a small form. The thread it came from is a
   click away rather than on the page: you want it when the summary looks off,
   and never otherwise. */
.inbox-c .ph h3{margin-right:9px}
.inbox-why{background:var(--warn-bg);color:var(--warn-fg);border-radius:9px;
  padding:8px 12px;font-size:.82rem;font-weight:600;margin-bottom:14px}
.inbox-raw{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.inbox-raw summary{font-size:.8rem;color:var(--muted);cursor:pointer;font-weight:600}
.inbox-raw summary:hover{color:var(--ink)}
.inbox-raw pre{margin:10px 0 0;padding:12px 14px;background:var(--bg);border-radius:9px;
  font-size:.78rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow:auto;color:var(--muted)}
.inbox-acts{display:flex;gap:9px;margin-top:16px}

/* ---------- account settings ---------- */
.set-note{font-size:.85rem;color:var(--muted);margin:0 0 14px;max-width:62ch}
.set-have{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;
  color:var(--muted);background:var(--bg);border-radius:9px;padding:9px 13px;margin-bottom:14px}
.set-have code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.set-have .btn{margin-left:auto}

/* ---------- device list in the limit dialog ---------- */
.dev-list{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:4px 0 14px}
.dev-row{display:flex;align-items:center;gap:12px;padding:9px 13px;font-size:.85rem;
  border-bottom:1px solid var(--line)}
.dev-row:last-child{border-bottom:0}
.dev-row > :last-child{margin-left:auto;white-space:nowrap}

/* ---------- upload document ----------
   The drop zone stays the same height whether it is empty or holding files, so
   the dialog does not jump under the cursor as things are added. */
.seg-ctl .seg-div{width:1px;align-self:stretch;margin:5px 6px;background:var(--line-mid);flex:none}
.seg-ctl button.alt{color:var(--muted)}
.seg-ctl button.alt:hover{color:var(--ink)}

#dropZone{border-radius:var(--radius-sm);background:var(--surface);
  padding:18px;cursor:pointer;transition:border-color .12s,background .12s;margin:0}
#dropZone:hover,#dropZone:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}
/* The profile's zone is a caption telling you where to drop, not something to
   press. It keeps the plain look it always had. */
.drop.plain{cursor:default}
.drop-idle{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted)}
.drop-idle strong{font-size:.9rem;color:var(--ink)}
.drop-idle .sub{font-size:.78rem}
#dropZone.has .drop-idle{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.drop-list{display:flex;flex-direction:column;gap:6px}
.drop-list:empty{display:none}
.drop-f{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:7px;padding:6px 8px 6px 11px;text-align:left}
.drop-n{flex:1;min-width:0;font-size:.83rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.drop-x{border:0;background:transparent;color:var(--faint);font-size:17px;line-height:1;
  cursor:pointer;padding:0 4px}
.drop-x:hover{color:var(--off-fg)}

/* A bar under the row while a big file goes up in parts. Zero height until it
   starts, so a list of files waiting to be sent does not look busy. */
.drop-f{position:relative;overflow:hidden}
.drop-bar{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--line)}
.drop-f.going .drop-bar{height:3px}
.drop-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

/* ---- Files: the whole library, one row per document ----
   A grid rather than the flex .filerow used on a contact: seven columns that
   have to line up down the page, which flex will not do. Scoped under .gfrow
   so none of it reaches the contact tab, which keeps its own layout. */
.gfrow{display:grid;grid-template-columns:minmax(210px,2.2fr) 104px minmax(120px,1.1fr)
  minmax(96px,1fr) minmax(120px,1.4fr) 128px 66px;
  gap:12px;align-items:center;padding:10px 18px}
.gfrow+.gfrow{border-top:1px solid var(--line)}
.gfrow:not(.gfhead):hover{background:var(--bg)}
.gfhead{padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--line-mid)}
.gfhead .gf-c4,.gfhead .gf-c5,.gfhead .gf-c7{font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.gf-h{font:inherit;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.gf-h:hover{color:var(--ink)}
.gf-h.on{color:var(--accent)}
.gf-arw{opacity:.35;font-size:8px;margin-left:3px}
.gf-h.on .gf-arw{opacity:1}

.gf-c1{display:flex;align-items:center;gap:10px;min-width:0}
.gf-nm{display:flex;flex-direction:column;min-width:0}
.gf-nm a{font-weight:600;font-size:13px;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-nm a:hover{color:var(--accent);text-decoration:underline}
.gf-nm .sub{font-size:11px}
.gf-th{width:30px;height:30px;flex:none;border-radius:6px;overflow:hidden;display:block}
.gf-th img{width:100%;height:100%;object-fit:cover;display:block}

.gf-c3 .gf-link{font:inherit;font-size:12.5px;color:var(--accent);background:none;border:0;
  padding:0;cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%}
.gf-c3 .gf-link:hover{text-decoration:underline}
.gf-c4,.gf-c5{font-size:12px;color:var(--muted);min-width:0;overflow:hidden}
.gf-c5 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* An empty cell reads as a bug; "none" reads as a fact. */
.gf-none{color:var(--faint);font-style:italic;font-size:11.5px}
.ftag{display:inline-block;background:var(--bg);border:1px solid var(--line-mid);border-radius:5px;
  padding:0 6px;font-size:11px;color:var(--muted);margin:1px 3px 1px 0;white-space:nowrap}
.gf-two{display:flex;flex-direction:column;min-width:0}
.gf-two b{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-two .sub{font-size:11px}
.gf-c7{text-align:right;font-size:12px;white-space:nowrap}

@media (max-width:1100px){
  /* Tags and Description are the first to go: they are the two most often
     empty, and the name and contact are what you scan for. */
  .gfrow{grid-template-columns:minmax(180px,2.2fr) 96px minmax(110px,1.1fr) 120px 62px}
  .gf-c4,.gf-c5{display:none}
}


/* ---------- merging two cards ----------
   Two cards facing each other, then only the rows where they disagree. Each
   value is a button, and the chosen one is the one that looks filled in. */
.modal.mg{width:min(760px,calc(100vw - 32px))}
.mg-top{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-bottom:16px}
.mg-card{border:1px solid var(--line-mid);border-radius:var(--radius-sm);padding:12px 14px;min-width:0}
.mg-card.keep{border-color:var(--accent);background:var(--accent-soft)}
.mg-card.gone{background:var(--surface)}
.mg-role{display:block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.mg-card.keep .mg-role{color:var(--accent)}
.mg-who{display:flex;gap:11px;align-items:center;min-width:0}
.mg-who > div{min-width:0}
.mg-who strong{display:block;font-size:.95rem}
.mg-who .sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-swap{align-self:center}
.mg-h{font-size:.8rem;font-weight:700;margin:6px 0 9px}
.mg-h .sub{font-weight:500;margin-left:6px}
.mg-grid{display:grid;grid-template-columns:minmax(90px,.55fr) 1fr 1fr;gap:6px 8px;align-items:stretch}
.mg-label{font-size:.78rem;color:var(--muted);align-self:center}
.mg-val{text-align:left;border:1px solid var(--line-mid);background:var(--card);border-radius:8px;
  padding:7px 10px;font-size:.83rem;color:var(--muted);cursor:pointer;overflow-wrap:anywhere}
.mg-val:hover{border-color:var(--ink);color:var(--ink)}
.mg-val.on{border-color:var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:600}
.mg-notes{margin:14px 0 0;padding-left:18px;font-size:.82rem;color:var(--muted);line-height:1.55}
.mg-lock{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:9px 12px;border-radius:9px;
  background:#EFEFF2;font-size:.82rem;color:var(--ink)}
.mg-lock svg{flex:none;margin-top:3px}
@media (max-width:640px){
  .mg-top{grid-template-columns:1fr}
  .mg-grid{grid-template-columns:1fr 1fr}
  .mg-label{grid-column:1 / -1}
}

.dupes .dp-row{display:flex;align-items:center;gap:10px;padding:10px 18px;flex-wrap:wrap}
.dupes .dp-row + .dp-row{border-top:1px solid var(--line)}
.dp-c{display:inline-flex;align-items:center;gap:8px;min-width:0}
.dp-c strong{display:block;font-size:.85rem}
.dp-c .sub{display:block;font-size:.74rem}
.dp-and{color:var(--faint);font-size:.8rem}