/* community-map.css — A Girl & Her Futures™
 * The community map (AGHF Social and the Dayli Desk), the Friends tab and the
 * place picker, in the AGHF Signature style. The globe itself is drawn by
 * shared/community-globe.js and looks the same in every look. */

/* ── the globe ─────────────────────────────────────────────────────────── */
.cm-stage{position:relative;aspect-ratio:1/1;width:100%;margin:0 auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.cm-stage:active{cursor:grabbing}
.cm-stage canvas{width:100%;height:100%;display:block}
.cm-zoom{position:absolute;right:4px;top:4px;display:flex;flex-direction:column;gap:6px}
.cm-zoom button{width:38px;height:38px;border-radius:50%;border:1px solid var(--ln-f1e7e1,#F1E7E1);background:var(--bg-ffffff,#FFFFFF);font:700 19px var(--font-body);color:var(--fg-2c1810,#2C1810);cursor:pointer;box-shadow:0 6px 14px rgba(44,24,16,.08)}
.cm-hint{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);background:rgb(var(--glass-rgb,255 255 255) / .92);border:1px solid var(--ln-f1e7e1,#F1E7E1);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--fg-7a5c50,#7A5C50);white-space:nowrap;pointer-events:none}
.cm-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-7a5c50,#7A5C50);font-size:14px}

/* ── AGHF Social: tabs ─────────────────────────────────────────────────── */
.cm-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cm-tab{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--ln-f1e7e1,#F1E7E1);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:9px 16px;font:700 13.5px var(--font-body);color:var(--fg-3d2b20,#3D2B20);cursor:pointer;text-decoration:none}
.cm-tab.on{background:var(--bg-2c1810,#2C1810);border-color:var(--ln-2c1810,#2C1810);color:var(--fg-fffbf9,#FFFBF9)}
.cm-badge{min-width:20px;height:20px;border-radius:999px;background:var(--bg-f4829a,#F4829A);color:var(--fg-ffffff,#FFFFFF);font-size:11px;font-weight:700;display:inline-grid;place-items:center;padding:0 6px}
.cm-panel[hidden]{display:none}

/* ── AGHF Social: the map card (centred and symmetrical) ───────────────── */
.cm-map{background:linear-gradient(135deg,var(--bg-ffffff,#FFFFFF),var(--bg-fff6f1,#FFF6F1) 55%,var(--bg-fde8ed,#FDE8ED));border-radius:28px;border:1px solid var(--ln-f1e7e1,#F1E7E1);box-shadow:0 14px 40px rgba(44,24,16,.07);padding:22px}
.cm-segwrap{display:flex;justify-content:center;margin-bottom:8px}
.cm-seg{display:inline-flex;background:var(--bg-fdf8f5,#FDF8F5);border:1px solid var(--ln-f1e7e1,#F1E7E1);border-radius:999px;padding:4px;gap:4px}
.cm-seg button{border:0;background:none;border-radius:999px;padding:8px 14px;font:700 13px var(--font-body);color:var(--fg-7a5c50,#7A5C50);cursor:pointer;white-space:nowrap}
.cm-seg button.on{background:var(--bg-2c1810,#2C1810);color:var(--fg-ffffff,#FFFFFF)}
.cm-grid{display:grid;grid-template-columns:150px minmax(0,560px) 150px;grid-template-areas:'l g r';justify-content:center;align-items:center;gap:28px}
.cm-grid .cm-sl{grid-area:l}.cm-grid .cm-sr{grid-area:r}.cm-grid .cm-stage{grid-area:g;max-width:560px}
.cm-statcol{display:grid;gap:14px}
.cm-stat{background:var(--bg-ffffff,#FFFFFF);border:1px solid var(--ln-f1e7e1,#F1E7E1);border-radius:16px;padding:16px 12px;text-align:center;position:relative;overflow:hidden;min-width:0}
.cm-stat:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c)}
.cm-stat b{display:block;font:900 30px/1.1 var(--font-display);color:var(--fg-2c1810,#2C1810)}
.cm-stat small{color:var(--fg-7a5c50,#7A5C50);font-size:12px}
.cm-below{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px;align-items:stretch}
.cm-card{background:var(--bg-ffffff,#FFFFFF);border:1px solid var(--ln-f1e7e1,#F1E7E1);border-radius:22px;padding:18px;display:flex;flex-direction:column;min-width:0}
.cm-pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;border:1.5px solid var(--ln-f7c2ce,#F7C2CE);color:var(--fg-e0607c,#E0607C);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-pill.from{border-color:var(--ln-bfe6e1,#BFE6E1);color:var(--fg-2f8a7f,#2F8A7F)}
.cm-place-h{font:900 26px/1.15 var(--font-display);margin:8px 0 2px;color:var(--fg-2c1810,#2C1810)}
.cm-place-h em{color:var(--fg-f4829a,#F4829A);font-style:italic}
.cm-place-h em.from{color:var(--fg-3e9e93,#3E9E93)}
.cm-muted{color:var(--fg-7a5c50,#7A5C50);font-size:14px;line-height:1.5;margin:0}
.cm-who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.cm-faces{display:flex}
.cm-faces .ci-av,.cm-faces .cm-av{margin-left:-10px}
.cm-faces>:first-child{margin-left:0}
.cm-sub{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-7a5c50,#7A5C50);margin:0 0 8px}
.cm-chips{display:flex;flex-wrap:wrap;gap:8px}
.cm-chip{border:1.5px solid var(--ln-f1e7e1,#F1E7E1);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:6px 12px;font:700 12.5px var(--font-body);cursor:pointer;color:var(--fg-2c1810,#2C1810)}
.cm-chip b{color:var(--fg-f4829a,#F4829A)}
.cm-chip.on{border-color:var(--ln-f4829a,#F4829A);background:var(--bg-fde8ed,#FDE8ED)}
.cm-join{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--bg-fef3e4,#FEF3E4);border:1px solid var(--ln-f9ce9c,#F9CE9C);border-radius:18px;padding:12px 16px;margin-bottom:14px}
.cm-join p{margin:0;font-size:14px;color:var(--fg-3d2b20,#3D2B20)}

/* people lists (place panel and Friends tab) */
.cm-people{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;max-height:340px;overflow:auto}
.cm-person{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--bg-fdf8f5,#FDF8F5);min-width:0}
.cm-person .cm-n{flex:1;min-width:0}
.cm-person .cm-n a,.cm-person .cm-n b{display:block;font-weight:700;font-size:14px;color:var(--fg-2c1810,#2C1810);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-person .cm-n small{display:block;color:var(--fg-7a5c50,#7A5C50);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-person .cm-acts{display:flex;gap:6px;flex:none}
.cm-tag{font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 8px;background:var(--bg-e8f8f6,#E8F8F6);color:var(--fg-2f8a7f,#2F8A7F);white-space:nowrap}
.cm-tag.gold{background:var(--bg-fbf5e8,#FBF5E8);color:var(--fg-a87a1e,#A87A1E)}
.cm-done{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:7px 12px;font:700 12.5px var(--font-body);background:var(--bg-e8f8f6,#E8F8F6);color:var(--fg-2f8a7f,#2F8A7F);white-space:nowrap}

/* Friends tab */
.cm-fr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.cm-empty{background:var(--bg-fdf8f5,#FDF8F5);border-radius:16px;padding:14px;color:var(--fg-7a5c50,#7A5C50);font-size:14px;line-height:1.5}

/* ── the Dayli Desk card ───────────────────────────────────────────────── */
.cm-desk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:linear-gradient(135deg,var(--bg-ffffff,#FFFFFF),var(--bg-fff6f1,#FFF6F1) 55%,var(--bg-e8f8f6,#E8F8F6));border:1px solid var(--ln-f1e7e1,#F1E7E1);border-radius:26px;padding:22px 24px 26px;box-shadow:0 14px 40px rgba(44,24,16,.07);margin:0 0 26px}
.cm-desk .cm-stage{max-width:400px}
.cm-drag{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--fg-7a5c50,#7A5C50);margin:-4px 0 10px}
.cm-desk .cm-eyebrow{display:inline-flex;border:1.5px solid var(--ln-f7c2ce,#F7C2CE);color:var(--fg-e0607c,#E0607C);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cm-desk h2{font:900 clamp(1.6rem,3.4vw,2rem)/1.1 var(--font-display);margin:8px 0 0;color:var(--fg-2c1810,#2C1810)}
.cm-desk h2 em{color:var(--fg-f4829a,#F4829A);font-style:italic}
.cm-desk .cm-line{color:var(--fg-7a5c50,#7A5C50);font-size:14.5px;margin:0}
.cm-desk .cm-line b{color:var(--fg-2c1810,#2C1810)}
.cm-desk .cm-new{color:var(--fg-2f8a7f,#2F8A7F);font-weight:700}
.cm-desk .cm-chips{justify-content:center;margin:12px 0}
.cm-desk .cm-chip{cursor:default}
.cm-acts-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;padding:11px 20px;font:700 14px var(--font-body);color:var(--fg-ffffff,#FFFFFF);background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857));box-shadow:0 10px 22px rgb(var(--pink-rgb,244 130 154) / .28);cursor:pointer;text-decoration:none;white-space:nowrap}
.cm-btn.ghost{background:var(--bg-ffffff,#FFFFFF);border:1.5px solid var(--ln-f1e7e1,#F1E7E1);color:var(--fg-2c1810,#2C1810);box-shadow:none}
.cm-btn.sm{padding:7px 13px;font-size:12.5px;box-shadow:none}
.cm-btn[disabled]{opacity:.55;cursor:not-allowed}

/* ── place picker and dialog ───────────────────────────────────────────── */
.pp-set{border:0;margin:0 0 14px;padding:0;min-width:0}
.pp-set legend{font-weight:700;font-size:14.5px;color:var(--fg-2c1810,#2C1810);margin-bottom:8px;padding:0}
.pp-set legend small{font-weight:400;color:var(--fg-7a5c50,#7A5C50)}
.pp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.pp-region:empty{display:none}
.pp-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--fg-7a5c50,#7A5C50);min-width:0}
.pp-select{width:100%;min-width:0;border:1.5px solid var(--ln-f1e7e1,#F1E7E1);border-radius:14px;padding:11px 12px;font:500 14.5px var(--font-body);color:var(--fg-2c1810,#2C1810);background:var(--bg-ffffff,#FFFFFF)}
.pp-select:focus{outline:2px solid var(--ln-f4829a,#F4829A);outline-offset:1px}
.pp-label{font-weight:700;font-size:14.5px;color:var(--fg-2c1810,#2C1810);margin:4px 0 8px}
.pp-vis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pp-vis-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1.5px solid var(--ln-f1e7e1,#F1E7E1);background:var(--bg-ffffff,#FFFFFF);border-radius:16px;padding:11px 12px;cursor:pointer;font:inherit;color:var(--fg-2c1810,#2C1810);min-width:0}
.pp-vis-opt.on{border-color:var(--ln-f4829a,#F4829A);background:var(--bg-fff5f7,#FFF5F7);box-shadow:0 0 0 3px var(--ln-fde8ed,#FDE8ED)}
.pp-vis-opt i{font-style:normal;font-size:18px;line-height:1.2}
.pp-vis-opt b{display:block;font-size:13.5px}
.pp-vis-opt small{display:block;font-size:12px;color:var(--fg-7a5c50,#7A5C50);line-height:1.35;margin-top:2px}
.pp-dialog{position:fixed;inset:0;margin:auto;height:fit-content;border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px)}
.pp-dialog::backdrop{background:rgb(var(--ink-rgb,44 24 16) / .45)}
.pp-sheet{position:relative;background:var(--bg-fffbf9,#FFFBF9);border-radius:26px;padding:26px 24px 22px;box-shadow:0 24px 60px rgba(44,24,16,.25);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}
.pp-x{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--bg-f6eee8,#F6EEE8);font-size:22px;color:var(--fg-3d2b20,#3D2B20);cursor:pointer}
.pp-eyebrow{display:inline-flex;border:1.5px solid var(--ln-f7c2ce,#F7C2CE);color:var(--fg-e0607c,#E0607C);background:var(--bg-ffffff,#FFFFFF);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.pp-h{font:900 28px/1.1 var(--font-display);margin:10px 0 6px;color:var(--fg-2c1810,#2C1810);padding-right:30px}
.pp-h em{color:var(--fg-f4829a,#F4829A);font-style:italic}
.pp-m{color:var(--fg-7a5c50,#7A5C50);font-size:14.5px;line-height:1.55;margin:0 0 16px}
.pp-err{color:var(--fg-c2475f,#C2475F);font-size:13.5px;min-height:1em;margin:10px 0 0}
.pp-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.pp-btn{border:0;border-radius:999px;padding:11px 20px;font:700 14px var(--font-body);color:var(--fg-ffffff,#FFFFFF);background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857));cursor:pointer}
.pp-btn.ghost{background:var(--bg-ffffff,#FFFFFF);border:1.5px solid var(--ln-f1e7e1,#F1E7E1);color:var(--fg-2c1810,#2C1810)}
.pp-btn[disabled]{opacity:.55}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .cm-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'l r' 'g g';gap:12px}
  .cm-statcol{gap:10px}.cm-stat{padding:10px 8px}.cm-stat b{font-size:22px}
  .cm-below,.cm-fr-grid{grid-template-columns:1fr}
  .cm-desk .cm-stage{max-width:330px}
}
@media (max-width:520px){
  .cm-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
  .cm-tab{padding:8px 12px;font-size:13px;flex:none}
  .cm-person .cm-n small{white-space:normal}
  .cm-map{padding:16px 14px;border-radius:24px}
  .cm-seg button{padding:8px 11px;font-size:12.5px}
  .cm-place-h{font-size:23px}
  .pp-row,.pp-vis{grid-template-columns:1fr}
  .pp-sheet{padding:22px 18px 18px}
  .cm-person.has-two{flex-wrap:wrap}
  .cm-person.has-two .cm-n{flex:1 1 calc(100% - 60px)}
  .cm-person.has-two .cm-acts{margin-left:52px}
  .cm-desk{padding:18px 14px 22px}
}