@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&display=swap');

:root{
  --safe-top-raw: env(safe-area-inset-top);
  --safe-top: max(0px, calc(var(--safe-top-raw) - 14px)); /* reduced safe top */
  --safe-bottom: env(safe-area-inset-bottom);

  --bd:#e5e7eb;
  --ink:#0f172a;
  --ink-sub:#334155;
  --hairline: rgba(15,23,42,.08);
  --bg:#ffffff;
  --muted:#9aa1ad;
  --blue:#3a78e0;
  --danger:#e25050;
  --star:#f59e0b;
}

/* Base reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.app{background:#fff;color:var(--ink);font:500 16px -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Arial}
.material-icons{font-size:24px}

/* Screens */
.screen{padding:0 10px}
.hidden{display:none}

/* List (same layout as Accounts) */
.list{list-style:none;margin:2px 0 64px;padding:0}
.li{
  display:grid;
  grid-template-columns:auto 1fr auto; /* avatar | info | chevron */
  gap:10px;align-items:center;padding:14px 8px;border-bottom:1px solid var(--bd)
}
.avatar{
  width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;
  background:#f8fafc;color:var(--muted);
  font-family:'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing:.3px;
}
.avatar .txt-icon{
  font-size:13px;
  font-weight:600;
  line-height:1;
}
.li .name{font-weight:500;font-size:15px;color:var(--ink)}
.li .role{font-size:14px;color:var(--ink-sub)}
.chev{color:var(--ink-sub)}
.chev .material-icons{font-size:16px}

/* Segmented filter (bottom) */
.segmented{
  padding-bottom: var(--safe-bottom);

  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #f3f4f6;
  border-top: 1px solid var(--bd);
  margin: 0;
  padding: 0;
  gap: 0;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented .seg{
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  padding: 8px 14px;
  font-weight: 400;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-right: 1px solid var(--bd);
  border-radius: 0;
}
.segmented .seg.on{ background:#1d4ed8; color:#fff; }
.segmented .seg:last-child{ border-right:none }

/* Form (reuse Contacts/Accounts chips layout) */
.form{padding:10px 10px 120px}
.chips-grid{background:#fff}

.chip.editable{
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:center;
  gap:6px;
  padding:6px 10px 8px;
  border:none;
  border-bottom:1px solid var(--bd);
  background:#fff;
  border-radius:0;
  cursor:text;
}
.chip.editable::before{
  content: attr(data-ic);
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size:18px;
  line-height:1;
  color: var(--ink-sub);
}
.chip.editable .chip-label{ display:none }
.chip.editable .chip-field{
  min-height:28px;
  padding:2px 0 3px;
  outline:none;
}
.chip.editable .chip-field:empty:before{
  content: attr(data-placeholder);
  color: var(--ink-sub);
  opacity:.25;
}
.chip.editable.block .chip-field{ min-height:72px; white-space:pre-wrap; }

.chip.picker{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border-bottom:1px solid var(--bd);
}
.chip.picker .chip-label{
  display:block;
  margin-bottom:6px;
  font-weight:500;
}
.chip.tiny{
  border-radius:999px;
  border:1px solid var(--bd);
  padding:4px 10px;
  font-size:12px;
  background:#fff;
  cursor:pointer;
}
.chip.tiny.on{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 4px 0;
  font-size:12px;
  color:var(--ink-sub);
}
.meta-pill{
  padding:3px 8px;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
}

/* Search */
.search-wrap{margin:8px 2px 6px;position:relative}
.search-wrap input{
  width:100%;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--bd);
  border-radius:10px;
  padding:8px 10px 8px 32px;
  font-size:15px;
  outline:none;
}
.search-wrap input:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}
.search-ic{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink-sub);
  font-size:19px;
}

/* Top App Bar (same as Accounts) */
.appbar{
  padding-top: var(--safe-top);

  background:#f3f4f6;
  border-bottom:1px solid var(--bd);
  position:sticky;
  top:0;
  z-index:10;
}
.status{display:none}
.toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:6px 12px;
}
.toolbar h1{
  margin:0;
  justify-self:center;
  font-size:16px;
  font-weight:600;
  color:var(--ink-sub);
}
.icon{
  border:0;
  background:#fff;
  color:var(--ink);
  cursor:pointer;
  border-radius:10px;
  padding:4px;
  border:1px solid var(--bd);
}
.icon.round{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
}
.icon.primary{
  background:#3b82f6;
  color:#fff;
  border-color:#3b82f6;
}

/* Edit header / subbar (same pattern as Accounts) */
.subbar{
  padding-top: var(--safe-top);

  position:sticky;
  top:0;
  z-index:9;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:6px;
  align-items:center;
  padding:6px;
  background:#fff;
  border-bottom:1px solid var(--bd);
}
.subbar .title-lg{
  font-weight:600;
  font-size:15px;
}
.subbar .subtitle{
  font-size:13px;
  color:var(--ink-sub);
}
.subbar .icon{
  background:#fff;
  border:0;
  border-radius:8px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:var(--ink);
  cursor:pointer;
  padding:0;
}
.subbar .icon .material-icons{
  font-size:20px;
  line-height:1;
}
.subbar .icon:hover{
  background:#f3f4f6;
}
.subbar .icon#backBtn{ margin-right:4px; }

.header-actions{
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid var(--bd);
  border-radius:6px;
  background:#f3f4f6;
  padding:1px;
}
.header-actions .hbtn{
  appearance:none;
  border:0;
  background:#f3f4f6;
  color:var(--ink);
  font:600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  height:22px;
  padding:2px 7px;
  border-radius:6px;
  cursor:pointer;
  position:relative;
}
.header-actions .hbtn:hover{ background:#e9ecef; }
.header-actions .hbtn + .hbtn::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:.9em;
  background:var(--bd);
}
.header-actions .save-btn{ color:#040404; }
.header-actions .archive-btn{ color:#4b5563; }
.header-actions .delete-btn{ color:#dc2626; }

/* Typography normalization */
body, .toolbar h1, .subbar .title-lg, .subbar .subtitle,
#search, .li .name, .li .role, .chip,
.meta-pill, .segmented .seg, .header-actions .hbtn {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Simple empty-state */
.empty{
  padding:16px 8px;
  font-size:14px;
  color:var(--ink-sub);
}


/* Icon & Color styles (orgs) */
.preview-wrap{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 0;
}
.avatar.big{
  width:56px;
  height:56px;
  aspect-ratio:1/1;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#f8fafc;
  color:#0b1220;
}
.avatar.big .txt-icon{
  font-family:'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing:.3px;
  font-size:20px;
  line-height:1;
}
.color-rows{
  display:flex;
  flex-direction:column;
  gap:6px;
}
/* 14–16 color palettes, 7–8 per line */
.color-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  max-width:240px; /* fits 8 swatches per line */
}
.color-row .swatch{
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid var(--bd);
  cursor:pointer;
}
.color-row .swatch.selected{
  outline:2px solid rgba(59,130,246,.3);
}
/* Randomize button styled like a swatch */
.swatch.randomize{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid var(--bd);
  background:#000000;
  cursor:pointer;
}
.swatch.randomize .material-icons{
  font-size:18px;
  line-height:1;
  color:#fff;
}
/* ---------------------------------------------------
   MEMBERS SECTION — clean, minimal, BW, on-brand
--------------------------------------------------- */

.detail-section {
  margin-top: 18px;
  padding: 4px 2px 12px;
  border-top: 1px solid var(--hairline);
}

.detail-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 8px;
}

.detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section-icon {
  font-family: 'Material Icons';
  font-size: 20px;
  background: #f3f4f6;      /* light neutral */
  color: #111;               /* BW icon */
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-section-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.pill-soft {
  padding: 4px 10px;
  font-size: 13px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid var(--bd);
  color: var(--ink-sub);
}

.detail-section-divider {
  height: 1px;
  background: var(--hairline);
  margin: 4px 0 10px;
}

/* ------------------ Members list ------------------ */

.members-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f3f4f6;
  border: 1px solid var(--bd);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.member-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.member-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-sub);
}

.members-empty {
  font-size: 14px;
  color: var(--ink-sub);
  padding: 6px 2px;
}