/* society.css — THE SECRET SOCIETY / THE LODGE. Wave 39a.
   Loaded always, active only under body.society (the theme contract's law 1:
   the base OS is whole without us — every rule here is scoped).
   The look: a club room after hours — dark wood, velvet shadow, brass and
   candlelight. Warm where Highfell is cold. */

/* ---- wallpaper: lamplit velvet ----
   #wallpaper is a procedurally-drawn <canvas>, never a user photo, so a bold
   warm grade is safe (same reasoning as dragons.css / arcana.css). */
body.society #wallpaper {
  filter: saturate(.55) brightness(.42) sepia(.45) hue-rotate(-12deg) contrast(1.1);
}
body.society #desktop {
  background-image:
    radial-gradient(90% 60% at 50% 108%, rgba(214,164,74,.16), transparent 60%),
    radial-gradient(130% 80% at 50% -20%, rgba(8,5,3,.6), transparent 65%);
}

/* ---- menubar / dock: dark wood and brass ---- */
body.society #menubar {
  background: linear-gradient(180deg, rgba(38,26,14,.9), rgba(24,16,9,.84));
  border-bottom: 1px solid rgba(214,164,74,.22);
}
body.society #menubar .mb-item:hover { background: rgba(214,164,74,.14); }
body.society #dock {
  background: rgba(30,20,11,.6);
  border: 1px solid rgba(214,164,74,.18);
}
body.society .window {
  border: 1px solid rgba(214,164,74,.2);
}

/* ---- the lamplight ----
   mode.js's always-on signature: div.soc-lampline > i * 7, each with --i and
   --breathe. A thin warm band low on the desktop — candlelight under a door.
   Costs no JS loop; the breathing is pure CSS and reduced-motion turns it off. */
body.society .soc-lampline {
  position: fixed;
  left: 8vw; right: 8vw;
  bottom: calc(var(--chrome-b, 0px) + 84px);
  height: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  z-index: 3;
}
body.society .soc-lampline > i {
  width: 40px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(232,192,118,.5), rgba(214,164,74,.16) 55%, transparent 75%);
  filter: blur(1px);
  animation: socBreathe var(--breathe, 7s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes socBreathe {
  0%, 100% { opacity: .45; transform: scaleX(1); }
  50% { opacity: .95; transform: scaleX(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  body.society .soc-lampline > i { animation: none; opacity: .6; }
}
body.mobile.society .soc-lampline { bottom: calc(var(--chrome-b, 0px) + 40px); height: 10px; }

/* ---- the menubar hub popover ---- */
.soc-hub-pop {
  min-width: 230px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--glass-strong, rgba(30,22,12,.92));
  border: 1px solid rgba(214,164,74,.28);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  font-size: 12.5px;
  color: var(--text);
}
.soc-hub-head { font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.soc-hub-standing { color: var(--text-dim); margin-bottom: 8px; }
.soc-hub-standing b { color: #d6a44a; }
.soc-hub-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 2.5px 6px; border-radius: 6px; color: var(--text-dim);
}
.soc-hub-row.held { color: var(--text); }
.soc-hub-row.now { background: rgba(214,164,74,.16); color: var(--text); font-weight: 700; }
.soc-hub-at { opacity: .7; font-variant-numeric: tabular-nums; }
.soc-hub-links { display: flex; gap: 12px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(214,164,74,.18); }
.soc-hub-links a { color: #d6a44a; text-decoration: none; font-weight: 600; font-size: 12px; }
.soc-hub-links a:hover { text-decoration: underline; }

/* ---- the Lodge app ---- */
.lodge {
  height: 100%; overflow-y: auto;
  padding: 18px 20px 20px;
  background:
    radial-gradient(120% 50% at 50% -10%, rgba(214,164,74,.1), transparent 60%),
    linear-gradient(180deg, #241708, #17100a 70%, #120c07);
  color: #efe4cd;
}
.lodge .lg-head { text-align: center; }
.lodge .lg-crest { font-size: 40px; filter: drop-shadow(0 0 14px rgba(214,164,74,.45)); }
.lodge h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: .04em; }
.lodge .lg-line { margin: 4px 0 0; font-style: italic; color: #c9b489; font-size: 12.5px; }
.lodge .lg-sect {
  margin: 20px 2px 8px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: #a08a5c;
}
.lodge .lg-standing {
  background: rgba(255,255,255,.045); border: 1px solid rgba(214,164,74,.2);
  border-radius: 12px; padding: 12px 14px;
}
.lodge .lg-rank { display: flex; justify-content: space-between; align-items: baseline; }
.lodge .lg-rank b { font-size: 16px; color: #e8c076; }
.lodge .lg-rank span { font-size: 12px; color: #c9b489; }
.lodge .lg-bar {
  height: 6px; border-radius: 4px; margin-top: 9px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.lodge .lg-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #a06e28, #e8c076);
  border-radius: 4px;
}
.lodge .lg-next { margin-top: 6px; font-size: 11.5px; color: #c9b489; }
.lodge .lg-note { margin-top: 8px; font-size: 11px; line-height: 1.5; color: #a08a5c; }
.lodge .lg-note a { color: #d6a44a; text-decoration: none; font-weight: 600; }
.lodge .lg-note a:hover { text-decoration: underline; }
.lodge .lg-center { text-align: center; }
.lodge .lg-seals {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
}
.lodge .lg-seal {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 11px; text-align: center;
  background: rgba(255,255,255,.035); border: 1px dashed rgba(214,164,74,.22);
  opacity: .65;
}
.lodge .lg-seal.held { border-style: solid; opacity: 1; background: rgba(214,164,74,.1); }
.lodge .lg-seal-e { font-size: 22px; line-height: 1; }
.lodge .lg-seal-n { font-size: 10.5px; color: #c9b489; line-height: 1.25; }
.lodge .lg-links { display: flex; flex-wrap: wrap; gap: 10px; }
.lodge .lg-links a {
  flex: 1 1 150px; text-align: center;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(214,164,74,.12); border: 1px solid rgba(214,164,74,.26);
  color: #e8c076; text-decoration: none; font-weight: 700; font-size: 12.5px;
}
.lodge .lg-links a:hover { background: rgba(214,164,74,.2); }

/* ---- W39b: the Lodge's tabs, the room roster, and the Board ---- */
.lodge .lg-tabs { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.lodge .lg-tabs button {
  appearance: none; cursor: pointer;
  border: 1px solid rgba(214,164,74,.26); border-radius: 8px;
  background: rgba(255,255,255,.04); color: #c9b489;
  padding: 6px 14px; font-size: 12.5px; font-weight: 700;
}
.lodge .lg-tabs button.on { background: rgba(214,164,74,.18); color: #e8c076; }
.lodge .lg-here {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(214,164,74,.2);
  font-size: 12px; color: #c9b489;
}
.lodge .lg-here-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.25);
}
.lodge .lg-here-dot.on { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.lodge .lg-compose { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.lodge .lg-compose-txt {
  flex: 1; resize: none; border-radius: 10px; padding: 8px 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(214,164,74,.22);
  color: #efe4cd; font: inherit; font-size: 12.5px;
}
.lodge .lg-compose-txt::placeholder { color: #a08a5c; }
.lodge .lg-compose-go {
  appearance: none; cursor: pointer; border: none; border-radius: 10px;
  padding: 0 16px; font-size: 12.5px; font-weight: 800;
  background: linear-gradient(180deg, #e8c076, #a06e28); color: #241408;
}
.lodge .lg-compose-go:disabled { opacity: .5; cursor: default; }
.lodge .lg-marks { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.lodge .lg-mark {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(214,164,74,.16);
}
.lodge .lg-mark .soc-mark { font-size: 15px; opacity: .8; }
.lodge .lg-mark-body b { font-size: 12.5px; color: #e8c076; }
.lodge .lg-mark-body p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: #efe4cd; }
.lodge .lg-mark-body span { display: block; margin-top: 4px; font-size: 10.5px; color: #a08a5c; }

/* ---- W39c: errands, the wave, the member chips ---- */
.lodge .lg-errands { display: flex; flex-direction: column; gap: 8px; }
.lodge .lg-errand {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(214,164,74,.18);
}
.lodge .lg-errand.done { border-style: solid; border-color: rgba(74,222,128,.35); opacity: .85; }
.lodge .lg-errand-tick { width: 18px; text-align: center; color: #4ade80; font-weight: 800; }
.lodge .lg-errand-label { flex: 1; font-size: 12.5px; color: #efe4cd; }
.lodge .lg-errand-prog { font-size: 11px; color: #c9b489; font-variant-numeric: tabular-nums; }
.lodge .lg-member { white-space: nowrap; }
.lodge .lg-wave {
  appearance: none; cursor: pointer; border: none; border-radius: 6px;
  background: rgba(214,164,74,.16); padding: 1px 5px; font-size: 12px;
}
.lodge .lg-wave:hover { background: rgba(214,164,74,.3); }
.lodge .lg-wave:disabled { opacity: .5; cursor: default; }