/* The members' dashboard (#55). Rules: research/2026-10-26-dashboard-design-research.md (one radius scale shared
   with the site: 8 controls, 14 containers, 18 floating panels; lists as one rounded container; status as a dot and
   a word; red only for "asked for you") and research/2026-10-26-dashboard-round-2.md (16 px on phones, 44 px taps). */
@font-face { font-family: "LF"; src: url(/fonts/libre-franklin-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --ground: #fff; --ink: #161616; --ink-2: #4a4a48; --ink-3: #6f6f6b; --concrete: #efefec; --stone: #e4e3de;
  --rule: #d9d9d4; --hover: #f6f6f3; --asphalt: #232527; --red: #bf0a30; --red-dark: #960826; --red-tint: #fbeff1;
  --red-line: #ebc3cc; --green: #1f6b3a; --amber: #c9a227; --amber-ink: #6b5f14;
  --r-s: 8px; --r-m: 14px; --r-l: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "LF", "Libre Franklin", Arial, sans-serif; color: var(--ink); background: var(--ground);
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 24px;
  background: #fff; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; text-decoration: none; }
.mark { width: 30px; height: 16px; fill: var(--red); flex: none; }
.terr { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r-s); font-weight: 700; white-space: nowrap; }
.terr small { color: var(--ink-3); font-weight: 500; font-size: 13px; }
nav.main { display: flex; gap: 4px; }
nav.main a { padding: 9px 13px; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-weight: 700; }
nav.main a.on { background: var(--concrete); color: var(--ink); }
.who { margin-left: auto; position: relative; display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--asphalt); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px; border: 0; }
.menu { position: absolute; right: 0; top: 44px; min-width: 220px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-m);
  box-shadow: 0 12px 32px rgba(0,0,0,.10); padding: 6px; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-s); border: 0; background: none;
  text-decoration: none; font-weight: 600; }
.menu a:hover, .menu button:hover { background: var(--hover); }
.menu .meta { padding: 8px 12px 10px; color: var(--ink-3); font-size: 13.5px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }

/* buttons, chips, segments */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 15px; border-radius: var(--r-s);
  font-weight: 700; font-size: 14px; border: 1px solid var(--asphalt); background: var(--asphalt); color: #fff; text-decoration: none; white-space: nowrap; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-s); overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 8px 13px; font-weight: 700; color: var(--ink-2); min-height: 38px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button.on { background: var(--asphalt); color: #fff; }
.chip { border: 1px solid var(--rule); background: #fff; padding: 7px 12px; border-radius: var(--r-s); font-weight: 700; color: var(--ink-2); min-height: 38px; }
.chip.on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.link { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; font-weight: 600; }

/* status: a dot and a word */
.st { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid #b5b4ad; flex: none; }
.st.Contacted { color: var(--ink); } .st.Contacted::before { background: #7a7a76; border-color: #7a7a76; }
.st.Visited, .st.Won { color: var(--green); } .st.Visited::before, .st.Won::before { background: var(--green); border-color: var(--green); }
.st.Quote { color: var(--amber-ink); } .st.Quote::before { background: var(--amber); border-color: var(--amber); }
.st.Has, .st.Not { color: var(--ink-3); } .st.Has::before, .st.Not::before { background: var(--stone); border-color: #b5b4ad; }

/* the home: an aside and the list */
.home { display: grid; grid-template-columns: 390px 1fr; min-height: calc(100vh - 60px); }
aside.side { background: var(--concrete); padding: 24px 22px 40px; border-right: 1px solid var(--rule); }
main.list { padding: 22px 28px 60px; min-width: 0; }
h1 { font-size: 27px; letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.15; }
.lede { margin: 0 0 18px; color: var(--ink-2); }
.free { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 20px; }
.free b { display: block; font-size: 15.5px; }
.free p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.setup { margin-top: 12px; }
.setup summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
.setup-in { display: grid; gap: 10px; margin-top: 8px; }
.setup label { font-weight: 700; font-size: 14px; display: block; margin-bottom: 4px; }
.setup .row { display: flex; gap: 8px; }
.setup input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--rule); border-radius: var(--r-s); padding: 0 11px; background: #fff; }
.setup .kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.setup .done { color: var(--green); font-weight: 700; font-size: 14px; }
.setup .err { color: var(--red-dark); font-size: 13.5px; }
.sec { margin-top: 22px; }
.sec h2 { font-size: 15.5px; margin: 0 0 8px; }
.group { background: #fff; border-radius: var(--r-m); padding: 2px 14px; }
.group .li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); }
.group .li:first-child { border-top: 0; }
.group button.li { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; padding: 11px 0; }
.group small { color: var(--ink-3); white-space: nowrap; font-size: 13.5px; }
.group .empty { padding: 12px 0; color: var(--ink-3); font-size: 14px; }
.rq { background: #fff; border: 1px solid var(--red-line); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 10px; }
.ribbon { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 800; font-size: 13px; }
.ribbon::before { content: ""; width: 14px; height: 8px; background: var(--red); clip-path: polygon(0 0,100% 0,82% 50%,100% 100%,0 100%); }

.tools { display: flex; align-items: center; gap: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.tools .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.count { color: var(--ink-3); margin-left: auto; font-size: 14px; white-space: nowrap; }
.tbl { border: 1px solid var(--rule); border-radius: var(--r-m); overflow: clip; background: #fff; }  /* clip, not hidden: the header can stick */
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 60px; z-index: 2; text-align: left; font-size: 13px; color: var(--ink-3); font-weight: 700; padding: 10px 12px;
  background: #f7f7f5; border-bottom: 1px solid var(--rule); }
td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover td, tbody tr.sel td { background: var(--hover); }
tbody tr:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
td.mi, th.mi { text-align: right; font-variant-numeric: tabular-nums; width: 70px; }
td.mi { font-weight: 800; font-size: 16px; }
.nm { font-weight: 700; font-size: 15.5px; }
.ad { color: var(--ink-2); font-size: 14px; }
.why { color: var(--ink-3); font-size: 13.5px; margin-top: 3px; }
.why b { color: var(--ink-2); font-weight: 600; }
.reach { color: var(--ink-3); font-size: 14px; }
.reach b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.tag { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--concrete); border-radius: 6px; padding: 1px 7px; margin-top: 4px; }
.state { padding: 34px 20px; text-align: center; color: var(--ink-2); }
.state b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.skel td div { height: 12px; border-radius: 6px; background: var(--concrete); margin: 6px 0; }

/* one place: a panel beside the list (non-modal), a full page on phones */
.panel { position: fixed; z-index: 30; top: 68px; right: 8px; bottom: 8px; width: 580px; background: #fff; border: 1px solid var(--rule);
  border-radius: var(--r-l); box-shadow: 0 12px 32px rgba(0,0,0,.10); display: flex; flex-direction: column; overflow: hidden; }
.ph { padding: 18px 22px 14px; border-bottom: 1px solid var(--rule); }
.ph .x { float: right; width: 40px; height: 40px; margin: -8px -10px 0 0; border: 0; background: none; font-size: 24px; color: var(--ink-3); border-radius: var(--r-s); }
.ph .x:hover { background: var(--hover); }
.ph h2 { margin: 0; font-size: 23px; letter-spacing: -.01em; }
.ph .sub { color: var(--ink-2); margin-top: 3px; }
.acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pb { padding: 4px 22px 28px; overflow-y: auto; }
.blk { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.blk:last-child { border-bottom: 0; }
.blk h3 { font-size: 13px; margin: 0 0 9px; color: var(--ink-3); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.choices + .choices { margin-top: 8px; }
.choices small { color: var(--ink-3); font-weight: 700; margin-right: 2px; font-size: 13px; }
.choices button { padding: 8px 11px; border-radius: var(--r-s); border: 1px solid var(--rule); background: #fff; font-weight: 700; color: var(--ink-2); min-height: 40px; }
.choices button.on { background: var(--asphalt); border-color: var(--asphalt); color: #fff; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.quick small { color: var(--ink-3); font-weight: 700; font-size: 13px; margin-right: 2px; }
.quick button { border: 1px dashed #b5b4ad; background: #fff; border-radius: var(--r-s); padding: 8px 11px; font-weight: 700; color: var(--ink-2); min-height: 40px; }
.quick button:hover { border-style: solid; }
.notebox { width: 100%; min-height: 84px; border: 1.5px solid var(--ink); border-radius: var(--r-s); padding: 10px 12px; resize: vertical; }
.row2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.row2 input[type=date] { height: 40px; border: 1px solid var(--rule); border-radius: var(--r-s); padding: 0 10px; background: #fff; }
.rem { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: var(--hover);
  border-radius: var(--r-s); margin-top: 8px; font-size: 14.5px; }
.tl { display: flex; } .tl div { flex: 1; position: relative; padding-top: 16px; font-size: 13.5px; color: var(--ink-2); }
.tl div::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 3px; background: var(--stone); }
.tl div::after { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.tl div.next::after { background: #fff; border: 2px solid var(--ink); width: 9px; height: 9px; }
.tl b { display: block; color: var(--ink); }
.say { background: var(--concrete); border-radius: var(--r-s); padding: 11px 13px; font-size: 15px; }
.facts { margin: 0; padding: 0; list-style: none; }
.facts li { padding: 4px 0; color: var(--ink-2); }
.hist p { margin: 0 0 10px; } .hist small { color: var(--ink-3); display: block; font-size: 13px; }

/* map */
.mapwrap { display: grid; grid-template-columns: 390px 1fr; height: calc(100vh - 60px); }
.maplist { border-right: 1px solid var(--rule); overflow-y: auto; padding: 18px 16px 30px; background: var(--concrete); }
.mapbox { position: relative; background: #f4f3ef; }
.mapbox .ml { position: absolute; inset: 0; }
.plan { background: #fff; border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 16px; }
.plan h2 { margin: 0 0 4px; font-size: 16px; } .plan p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.legend { position: absolute; left: 14px; bottom: 30px; background: #fff; border-radius: var(--r-s); padding: 9px 12px; font-size: 13px;
  display: grid; gap: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #fff; box-shadow: 0 0 0 1px #b5b4ad; }
.pin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); background: #8b897f; cursor: pointer; }
.pin.soon { background: var(--asphalt); } .pin.done { background: var(--green); } .pin.closed { background: #c9c8c1; }

/* won */
.won { max-width: 860px; margin: 0 auto; padding: 26px 24px 60px; }

/* toast with undo */
.toast { position: fixed; z-index: 50; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--asphalt); color: #fff;
  border-radius: var(--r-m); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.2);
  font-weight: 600; max-width: calc(100vw - 32px); }
.toast button { background: #fff; color: var(--ink); border: 0; border-radius: var(--r-s); padding: 8px 12px; font-weight: 800; min-height: 36px; }

.tabbar, .narrow { display: none; }

/* phones: one column, inset rounded groups, 16 px text, a tab bar */
@media (max-width: 860px) {
  body { font-size: 16px; background: var(--concrete); }
  .top { padding: 0 14px; gap: 10px; height: 56px; }
  .brand span, nav.main, .who .co, .terr small { display: none; }
  .home, .mapwrap { display: block; height: auto; }
  aside.side { border: 0; padding: 18px 16px 4px; }
  main.list { padding: 8px 16px 100px; }
  h1 { font-size: 24px; }
  .tools { gap: 8px; }
  .tools .chips { overflow-x: auto; flex-wrap: nowrap; width: 100%; scrollbar-width: none; }
  .tools .chips::-webkit-scrollbar { display: none; }
  .seg .wide, .side .sec.soon { display: none; }
  .seg .narrow { display: inline; }
  .chip { white-space: nowrap; }
  .count { margin-left: 0; }
  .tbl { border: 0; border-radius: var(--r-m); }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tbody tr { display: grid; grid-template-columns: 46px 1fr auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); min-height: 56px; }
  tbody tr:last-child { border-bottom: 0; }
  td { padding: 0; border: 0; }
  td.mi { grid-row: 1 / 3; text-align: left; width: auto; }
  td.kd, td.wh, td.rc { display: none; }
  td.ps { grid-column: 3; grid-row: 1; }
  .panel { inset: 0; top: 0; border-radius: 0; width: auto; border: 0; z-index: 40; }
  .ph { padding: 14px 16px 12px; }
  .pb { padding: 4px 16px 40px; }
  .acts .btn { flex: 1 1 40%; }
  /* no chip alone on a line: working 2×2, closed 3 across, one-tap 2 across */
  .choices, .quick { display: grid; grid-template-columns: 1fr 1fr; }
  .choices.closed { grid-template-columns: 1fr 1fr 1fr; }
  .choices small, .quick small { grid-column: 1 / -1; }
  .choices button, .quick button { padding: 8px 4px; white-space: nowrap; font-size: 15px; }
  .maplist { border: 0; }
  .mapbox { height: 62vh; }
  .tabbar { display: grid; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: 64px; background: #fff; border-top: 1px solid var(--rule);
    grid-template-columns: repeat(3, 1fr); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--ink-3); text-decoration: none; }
  .tabbar a.on { color: var(--ink); }
  .toast { bottom: 78px; }
}
.won .group { border: 1px solid var(--rule); }