/* css/guilds.css — guilds.html's own rules (js/guilds.js draws the markup).
   No inline style anywhere: the pages' CSP refuses it (style-src 'self'), so
   an emblem is two class names off fixed lists, a shape and a colour. */

/* ── the emblem ─────────────────────────────────────────────────────────── */
.gd-em {
  flex: 0 0 40px; width: 40px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gd-c, var(--g-live)); color: #0a0c0a;
  font-family: var(--sg); font-weight: 700; font-size: .62rem; letter-spacing: .02em;
}
.gd-em b { padding: 0 2px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.gd-em.gd-big { flex-basis: 84px; width: 84px; height: 92px; font-size: 1.15rem; }
.gd-shield { clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.gd-shield b { margin-bottom: 18%; }
.gd-round { border-radius: 50%; height: 40px; }
.gd-round.gd-big { height: 84px; }
.gd-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-size: .54rem; }
.gd-diamond.gd-big { font-size: .95rem; }
.gd-banner { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.gd-banner b { margin-bottom: 16%; }
.gd-hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); height: 40px; }
.gd-hex.gd-big { height: 84px; }
.gd-lime { --gd-c: #7ddc1f; }
.gd-ember { --gd-c: #ff7a45; }
.gd-sky { --gd-c: #5cb8ff; }
.gd-violet { --gd-c: #b48cff; }
.gd-gold { --gd-c: #e2b93b; }
.gd-rose { --gd-c: #ff7fa8; }
.gd-slate { --gd-c: #9aa8b6; }
.gd-teal { --gd-c: #3fd0c0; }

/* ── a person in a list: the friends list's row (css/profile.css .pfr-*),
   copied, because a page loads its own sheet and the store's only ───────── */
.pfr-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.pfr-face {
  position: relative; flex: 0 0 32px; width: 32px; height: 32px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--store-line); border-radius: var(--r);
  background: var(--store-panel-2); color: var(--g-live); font-family: var(--sg); font-weight: 700;
}
.pfr-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfr-name { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.pfr-st { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; }

/* ── rows: a guild in a list, a server on now ───────────────────────────── */
.gd-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.gd-row-main { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; color: var(--store-ink); }
/* store.css underlines every link in a .listrow; a whole row that is one
   link, and a button, read as underlined text there */
.listrow a.gd-row-main, .gd-row a.btn { text-decoration: none; }
.listrow a.gd-row-main:hover b { text-decoration: underline; }
.gd-row-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.gd-row-line { font-size: .82rem; }
.gd-row-meta { font-size: .8rem; color: var(--store-muted); }
.gd-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
p.gd-acts { margin-left: 0; margin-top: 10px; }
.gd-sub {
  font-family: var(--sg); font-weight: 600; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--store-muted); margin: 14px 0 6px;
}
.gd-sub:first-child { margin-top: 0; }

/* ── one guild's head ───────────────────────────────────────────────────── */
.gd-head { display: flex; align-items: center; gap: 18px; padding: 26px 0 8px; flex-wrap: wrap; }
.gd-head-who { flex: 1 1 280px; min-width: 0; }
.gd-head-who h1 {
  font-family: var(--sg); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.2rem);
  line-height: 1.1; overflow-wrap: anywhere;
}
.gd-head-meta { margin-top: 8px; font-size: .86rem; color: var(--store-muted); }
.gd-notice { border-left: 3px solid var(--store-gold); margin-top: 12px; }
#gd-you { margin-top: 18px; }
#gd-officer .gp-h { margin-top: 26px; }
#gd-officer .gp-h:first-child { margin-top: 0; }
.gd-foot { margin-top: 30px; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.gd-form + .gd-form, .gd-form + .listrows, .listrows + .gp-h { margin-top: 12px; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; align-items: end; }
.gd-grid label { display: flex; flex-direction: column; min-width: 0; }
.gd-form input, .gd-form select {
  width: 100%; min-height: 40px; padding: 0 10px;
  background: var(--store-pit); color: var(--store-ink);
  border: 1px solid var(--store-line); border-radius: var(--r); font: .86rem var(--body);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}
.gd-form input:focus, .gd-form select:focus { border-color: var(--g-live); outline: none; }
.gd-form .pf-lookline input { flex: 1 1 240px; width: auto; }
.gd-maker { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.gd-maker .gd-grid { flex: 1 1 420px; }
.gd-maker .say { flex-basis: 100%; }
.gd-maker-em { flex: 0 0 84px; }
.gd-find { margin: 0 0 10px; }
.gd-find input {
  flex: 1 1 240px; min-height: 40px; padding: 0 10px;
  background: var(--store-pit); color: var(--store-ink);
  border: 1px solid var(--store-line); border-radius: var(--r); font: .86rem var(--body);
}

@media (max-width: 640px) {
  .gd-form input, .gd-form select, .gd-find input { min-height: 44px; }
  .gd-acts { margin-left: 0; }
}

/* ── an invite link, shown once after it is made ────────────────────────── */
.gd-made { margin-top: 12px; border-left: 3px solid var(--g-live); }
.gd-made input {
  flex: 1 1 240px; min-height: 40px; padding: 0 10px;
  background: var(--store-pit); color: var(--store-ink);
  border: 1px solid var(--store-line); border-radius: var(--r); font: .82rem var(--mono);
}