/* ---------------------------------------------------------------------------
   The staff messages on the Home dashboard — a thread, not a list. He writes,
   the line types itself out, you answer. In the room (room.css) it is a
   retro dialogue box: his portrait on the left, his name on a gold plate,
   the line, and your answers as choices with the gold cursor. The people
   still waiting are rows under it; everything past five is one bar of faces.
   Solid colour only, faces everywhere: the owner wants people.
--------------------------------------------------------------------------- */

.adv > .rm-wb { display: grid; gap: 8px; }
.count-pill.calm { background: var(--gold); color: var(--ink); }

/* --- the messages: solid cards, one open at a time ---------------------------
   The owner (2026-09-26): no navy on navy, fewer words, a picture of what it
   is about. Every message is a white card on the navy window with an ink
   frame and a gap between them; the picture sits on a tile in the kind's
   colour (Needs you red, A word gold, Getting started the club's), the
   open one carries that colour across its header, and the answers are real
   buttons. */
.adv-list { display: grid; gap: 10px; }
.adv-m { position: relative; min-width: 0; margin: 3px; background: #fff; color: var(--ink); box-shadow: var(--frame), 0 5px 0 0 var(--ink); }

/* the picture: 16 x 16 art pixels at a whole-number scale on a solid tile */
.adv-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 2px;
  background: var(--gold); box-shadow: var(--frame-2); }
.adv-ic svg { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.adv-ic.big { width: 76px; height: 76px; box-shadow: var(--frame); margin: 3px; }
.adv-ic.big svg { width: 64px; height: 64px; }
.adv-ic.warning { background: var(--red); }
.adv-ic.suggestion { background: var(--gold); }
.adv-ic.walkthrough { background: var(--tm); }

/* the kind, as a solid badge */
.adv-kind.warning, .rm-bd.warning { background: var(--red); color: #fff; }
.adv-kind.suggestion, .rm-bd.suggestion { background: var(--gold); color: var(--ink); }
.adv-kind.walkthrough, .rm-bd.walkthrough { background: #fff; color: var(--ink); }
.adv-tag.warning { background: var(--red); color: #fff; }
.adv-tag.suggestion { background: var(--gold); color: var(--ink); }
.adv-tag.walkthrough { background: #fff; color: var(--ink); }

/* the words beside the picture: the badge, the headline, who said it */
.adv-rt { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 4px; }
.adv-hl { max-width: 100%; font: 900 16px/1.25 var(--sans); overflow-wrap: anywhere; }
.adv-tri { flex: none; width: 0; height: 0; margin: 0 4px 0 2px;
  border-left: 9px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }

/* a closed one: a single row — tap it to open, or press its one button */
.adv-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 6px); padding: 6px 8px 6px 6px;
  text-decoration: none; }
.adv-rowb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; cursor: pointer;
  background: none; color: inherit; text-align: left; font: inherit; }
.adv-row .adv-rt { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.adv-row .adv-hl { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-row:hover { background: var(--gold); }
.adv-row:hover .adv-ic.suggestion { background: #fff; }
.adv-row:hover .adv-q.gold { background: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--steel); }
.adv-rowb:focus-visible, .adv-mh:focus-visible, a.adv-row:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.adv-q { flex: none; margin: 3px 3px 7px; }
a.adv-row .adv-q { pointer-events: none; }
/* a player who wants a word: his face on the club colour, what it is about, Talk */
.adv-talk .rm-fc { margin: 2px; box-shadow: var(--frame-2); }
.adv-tk { display: inline-flex; line-height: 0; }
.adv-tk .rm-bd { margin: 2px; }
.adv-pn { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
/* more than eight rows: the list scrolls inside the window */
.adv-list.scroll { max-height: 660px; overflow-y: auto; padding: 3px 4px 6px 0; scrollbar-color: var(--gold) var(--ink); }

/* the open one: its header in the kind's colour, then his line and the buttons */
.adv-mh { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border: 0; cursor: pointer;
  text-align: left; font: inherit; background: var(--gold); color: var(--ink); border-bottom: 3px solid var(--ink); }
.adv-th.warning .adv-mh { background: var(--red); color: #fff; }
.adv-th.walkthrough .adv-mh { background: var(--tm); color: var(--on-tm); }
.adv-th.warning .adv-kind.warning { background: #fff; color: var(--red); }
.adv-mh .adv-hl { font-size: 20px; line-height: 1.2; }
.adv-mh .adv-tri { transform: rotate(90deg); }
.adv-from { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-top: 2px; }
.adv-from .rm-fc { margin: 2px; background: var(--ink); }
.adv-from-t { display: grid; gap: 2px; min-width: 0; }
.adv-from-t b { font: 900 12.5px/1.1 var(--sans); overflow-wrap: anywhere; }
.adv-from-t small { font: 900 10px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.adv-mb { padding: 10px 12px 8px; }

/* --- what has been said ------------------------------------------------------- */
.adv-log {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 200px; overflow-y: auto; scrollbar-color: var(--rule) #fff;
}
.adv-log:empty { display: none; }
.adv-say { display: flex; }
.adv-say.waiting { display: none; }
.adv-say .bub { position: relative; max-width: 100%; min-height: 20px; font: 800 15px/1.4 var(--sans); }
.adv-say.him .bub { color: var(--ink); }
/* his line types into a space already the size of the whole line: the
   hidden copy sizes it, the typed words sit on top (advisors_view.js bub) */
.bub-sz { visibility: hidden; font: inherit; font-style: normal; }
.bub-tx { position: absolute; inset: 0; padding: inherit; font: inherit; }
/* what you said back: a gold plate on the right */
.adv-say.you { justify-content: flex-end; }
.adv-say.you .bub { margin: 3px; padding: 5px 10px 4px; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2);
  font: 400 20px/1.1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }

/* --- what you say back: real buttons ------------------------------------------ */
.adv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-top: 10px; }
.adv-acts:empty { display: none; }
.adv-opt.rm-btn { font-size: 20px; padding: 8px 14px 7px; }

/* --- what the staff have taken off your hands -------------------------------- */
.adv-deleg {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 3px;
  padding: 8px 10px; background: var(--ink); color: #fff; box-shadow: var(--frame);
  font: 900 11px var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.adv-back {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px; padding: 4px 8px; cursor: pointer; border: 0;
  background: #fff; color: var(--ink); box-shadow: var(--frame-2); font: 900 11px var(--sans); letter-spacing: .04em; text-transform: uppercase;
}
.adv-back:hover { background: var(--gold); }

/* --- the ledger: what already happened at your club --------------------------- */
.adv-ledger { margin: 3px; box-shadow: var(--frame); background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.adv-led-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--ink); color: #fff; }
.adv-led-head .rm-fc { background: var(--tm); }
.adv-led-head b { font: 900 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.adv-led-head span { font: 800 11px var(--sans); color: var(--soft); }
.adv-led-row {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 9px;
  border-top: 2px solid var(--rule); font-size: 12.5px; font-weight: 800;
  line-height: 1.3; color: #fff; text-decoration: none;
}
a.adv-led-row:hover { background: var(--card-hov); color: var(--card-ink); }
.adv-led-row > span:nth-child(2) { flex: 1; }
.adv-led-tag {
  flex: none; padding: 2px 6px; box-shadow: 0 0 0 2px var(--ink);
  font: 900 10px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--tm); color: var(--on-tm);
}
.adv-led-when { flex: none; font: 900 10px var(--sans); color: var(--soft); }

/* --- the quiet league feed (everything not about your club) ------------------- */
.lg-card { display: grid; gap: 6px; }
.lg-card h3.disp { font-size: 25px; text-transform: uppercase; }
.lg-list { display: grid; gap: 3px; max-height: 250px; overflow-y: auto; }
.lg-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 7px; font-size: 12.5px; font-weight: 800; line-height: 1.3;
  border-bottom: 2px solid var(--rule);
}
.lg-row:last-child { border-bottom: 0; }
.lg-when { flex: none; font: 900 10px var(--sans); color: var(--soft); min-width: 34px; }
.lg-tag {
  flex: none; padding: 2px 6px; box-shadow: 0 0 0 2px var(--ink);
  font: 900 10px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: #fff;
}

/* --- phone ------------------------------------------------------------------- */
@media (max-width: 760px) {
  .adv-ic.big { width: 56px; height: 56px; }
  .adv-ic.big svg { width: 48px; height: 48px; }          /* three to an art pixel: still whole */
  .adv-mh { gap: 10px; padding: 8px 10px 8px 8px; }
  .adv-mh .adv-hl { font-size: 17px; }
  .adv-row, .adv-rowb { gap: 8px; }
  .adv-row .adv-rt { grid-template-columns: minmax(0, 1fr); }
  .adv-q.rm-btn.xs { font-size: 15px; padding: 5px 7px 4px; }
  .adv-list.scroll { max-height: 70vh; }
  .adv-row .adv-hl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .adv-say .bub { font-size: 14px; }
  .adv-acts .adv-opt.rm-btn { flex: 1 1 auto; font-size: 19px; }
}

/* a player who wants a word: one row each on Home (owner, 2026-09-26) */
.adv-mail { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 3px 0; background: var(--card); color: var(--card-ink); text-decoration: none; box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.adv-mail:hover { background: var(--tm); color: var(--on-tm); }
.adv-mail .adv-face { width: 36px; height: 36px; }
.adv-mail-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.adv-mail-t b { font: 400 17px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.adv-mail-t span { font: 800 12px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }