/* THE MEMBER CARD'S SKIN - ONE COPY, SAME AS ITS MARKUP.
 *
 * These rules came out of profile-app/web/directory.css on 2026-09-09, verbatim and
 * in their original order, when the card's MARKUP moved to lg-shared/member-card.js
 * so a third surface could use it. Markup in one place and skin in another is not
 * one copy; the room map would have rendered the right HTML with no styling.
 *
 * WARNING - THE CARD'S RULES CAME FROM TWO FILES, not one. directory.css held the
 * skin; edit.css held the core layout (flex, avatar, name, hl-chips) in a DIFFERENT
 * token vocabulary. Moving only the first half is why the highlights first rendered
 * as one run-on line on the room map. Both halves are here, and the tokens with
 * them, so the card does not depend on any host page's private variables.
 *
 * WARNING - ORDER IS PRESERVED. These were interleaved with the directory's own
 * rules; lifting them changes cascade order relative to anything later in that file
 * that targets the same properties. Verified by comparing the computed style of a
 * rendered .dir-card (card, __main, __foot, .dir-links) before and after the move --
 * identical, 48 cards, zero JS errors.
 *
 * Load this BEFORE the page's own stylesheet, so a page may still override.
 */

/* ⚠️ ORDER HERE REPRODUCES THE ORDER THE DIRECTORY USED TO LOAD, and it is not
   cosmetic. The page linked edit.css FIRST and directory.css LATER, so where both
   styled .dir-card the directory's values won: 16px radius, #fff, --lg-line, not
   edit.css's 10px/--panel/--line. Concatenating the two halves the other way round
   silently repainted every card in the members directory -- caught by diffing a
   rendered card's computed style against the pre-extraction baseline, not by eye.
   edit.css's half first, directory.css's half second. Do not sort this file. */

/* ⚠️ THE CARD CARRIES ITS OWN TOKENS, AND THAT IS THE WHOLE POINT OF THIS FILE.
   The rules below came from TWO stylesheets with two different vocabularies:
   directory.css speaks --lg-*, edit.css speaks --accent/--panel/--ink-mute. The
   room page defines neither set fully -- it has its own --accent with a DIFFERENT
   value (#b45309 vs #b9450b) and no --accent-soft at all -- so the card rendered
   there with its highlights unstyled and running together, which is exactly what
   Ian saw. Measured in Chrome on dev2.7, 2026-09-09.
   Defining them ON .dir-card makes the card render the same on any surface while
   still letting a host page override by setting them further up. A shared
   component that depends on its host's private variables is not shared. */
.dir-card {
  --accent: #b9450b;
  --accent-soft: #f4d8c4;
  --ink: #1f1d1a;
  --ink-mute: #8a8478;
  --line: #e6e0d4;
  --panel: #fffdf9;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
}

/* ── from profile-app/web/edit.css, verbatim: the card's core layout ─────────── */
.dir-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);transition:transform .1s, box-shadow .1s}
.dir-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--ink-mute)}
.dir-card .row1{display:flex;align-items:center;gap:10px}
.dir-card .avi-sm{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#c98a3b,#7b3a1a);color:#fff;display:flex;align-items:center;justify-content:center;font:600 16px/1 serif;flex:0 0 42px}
.dir-card .name{font-weight:600;font-size:15px;line-height:1.2}
.dir-card .loc-row{color:var(--ink-mute);font-size:12.5px}
.dir-card .hl-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.dir-card .hl-chips .hl{font-size:11px;padding:2px 7px;background:var(--accent-soft);color:var(--accent);border-radius:999px;font-weight:600}
.dir-card__main{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.dir-card img.avi-sm{object-fit:cover;background:#ece8e1}

/* ── from profile-app/web/directory.css: the skin, and it wins ─────────────── */


.dir-card {
  background: #fff; border: 1px solid var(--lg-line); border-radius: 16px;
  padding: 18px; color: var(--lg-ink);
}
.dir-card:hover { border-color: var(--lg-sage); }
.dir-card .name { font: 700 16px/1.2 var(--lg-font-serif); color: var(--lg-charcoal); }
.dir-card .avi-sm { font-family: var(--lg-font-serif); }
.dir-card .loc-row { color: var(--lg-mute); font-family: var(--lg-font-sans); }
.dir-card .hl-chips .hl {
  background: var(--lg-sage-tint); color: var(--lg-sage-d); font-family: var(--lg-font-sans);
}
.dir-link { border-color: var(--lg-line); color: var(--lg-mute); background: #fff; }
.dir-link:hover { color: var(--lg-sage-d); border-color: var(--lg-sage); }

/* Card link reset (carried here so it survives edit.css caching) + the active-card
 * ring shown while a card is "zoomed to" on the map before a second click opens it. */
.dir-card__main { text-decoration: none; color: inherit; }
.dir-card .name { text-decoration: none; }
.dir-card.is-active { border-color: var(--lg-sage); box-shadow: 0 0 0 2px var(--lg-sage-tint); }


/* Shop banner strip across the top of a member card. Full-bleeds past the card
 * 18px padding and rounds to match the 16px card top corners; the avatar/name row
 * flows below it (text nudged down). Only rendered when the member has a banner. */
.dir-card__banner {
  width: calc(100% + 36px); margin: -18px -18px 12px; height: 72px;
  border-radius: 16px 16px 0 0; overflow: hidden; background: var(--lg-sage-tint);
}
.dir-card__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Availability "status lights" — the same widgets as the /u/ profile header
 * (Block::HEADER_LIGHTS), surfaced read-only on the member card. Tones mirror
 * the profile: go=green / stop=rust / maybe=amber. */
.dir-lights { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dir-light {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lg-cream); border: 1px solid var(--lg-line); border-radius: 999px;
  padding: 4px 10px; font: 600 11.5px/1 var(--lg-font-sans); color: var(--lg-ink);
}
.dir-light__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lg-mute); flex: 0 0 auto; }
.dir-light--go .dir-light__dot    { background: #3fa34d; box-shadow: 0 0 0 3px rgba(63,163,77,.18); }
.dir-light--stop .dir-light__dot  { background: #c0492f; box-shadow: 0 0 0 3px rgba(192,73,47,.16); }
.dir-light--maybe .dir-light__dot { background: var(--lg-amber); box-shadow: 0 0 0 3px rgba(224,168,60,.2); }
/* PRESENCE (2026-08-31). Deliberately NOT reusing --go's green: "accepting work"
   and "here right now" are different claims about a member, and a reader should
   not have to check the label to tell which one a green dot means. Gold reads as
   live; the muted green sits one step back from --go so the availability lights
   keep their emphasis. */
.dir-light--room .dir-light__dot  { background: var(--lg-amber, #e0a83c); box-shadow: 0 0 0 3px rgba(224,168,60,.28); }
.dir-light--site .dir-light__dot  { background: #7f9668; box-shadow: 0 0 0 3px rgba(127,150,104,.20); }

/* Anonymized "join to see" cards (anon viewers, non-public members — Ian 6/12) */
.dir-card--gated { opacity: .92; }
.dir-card--gated .avi-sm--lock { display: flex; align-items: center; justify-content: center;
  background: #efece4; font-size: 15px; }
.dir-card--gated .dir-card__name { color: #8a8478; font-weight: 600; }
.dir-card--gated .dir-card__loc { color: #a9a294; font-size: 12.5px; }
.dir-card__joincta { display: inline-block; margin: 8px 0 2px;
  background: var(--lg-amber, #ecb351); color: #4a3c10; text-decoration: none;
  font: 700 12px/1 var(--lg-font-sans, system-ui, sans-serif);
  padding: 7px 12px; border-radius: 999px; }
.dir-card__joincta:hover { background: #f2c476; }

/* ══════════════════════════════════════════════════════════════════════════
   DARK-MODE BUCKET-C SWEEP — directory owns its dark states (Ian 2026-07-24)
   ---------------------------------------------------------------------------
   app-settings.js dark-themes .dir-card but NOT the view-toggle, the Connect
   button, or the marker clusters. All rules below are inside the dark signal
   (html[data-lguser-theme="dark"]) → LIGHT byte-identical. Ratios WCAG-verified.

   view-toggle: `.dir-viewtoggle button` hardcodes background:#fff (stays white
   in dark → the inactive "Map/Cards" label read 2.33:1) and `button.on` uses
   --lg-sage-d (→ light #b0c693 in dark) + white ink = 1.85:1. Theme the control
   dark and put dark ink on the active sage. ──────────────────────────────── */
html[data-lguser-theme="dark"] .dir-viewtoggle { border-color: #2c312d; } /* 9.7:1 */

/* Connect button (.dir-connect / .dir-msg, injected in directory-members.php):
   sage bg + white ink → 1.85:1 in dark. Dark ink on the sage; the "outline"
   pending/accepted states hardcode background:#fff (invisible sage text in dark)
   → give them a dark chip bg with sage ink. */
html[data-lguser-theme="dark"] .dir-connect,
html[data-lguser-theme="dark"] .dir-msg { color: #15171a !important; }   /* 9.7:1 on #b0c693 */
html[data-lguser-theme="dark"] .dir-connect--pending_out,
html[data-lguser-theme="dark"] .dir-connect--accepted {
  background: #1e2124 !important; color: #b0c693 !important;   /* 8.7:1 */
}