/* static/css/moderation.css - the Report, Block and Terms sheets (static/js/moderation.js).

   Branch chat/report-block, part 2 (.planning/chat/DESIGN.md 1, 9 step 2.1).
   The v3 look: tokens.css only (no new colours), the kit's 2 px corners, 44 px
   touch targets, a bottom sheet on a phone and a centred card on a wider screen.

   UNLAYERED ON PURPOSE. foundation.css is layer(components) and theme.css is
   layer(legacy); game.css is loaded on the game page and carries many priority
   overrides. Every rule here is scoped to a `mod-` class nothing else uses, so
   an unlayered class rule wins over the legacy element rules (`body, button,
   input {background}` in theme.css) without shouting.

   A <dialog> opened with showModal() renders in the top layer, so no z-index
   is needed to sit above the phone chat sheet or the game's dock. */

/* ── the sheet ──────────────────────────────────────────────────────────── */
dialog.mod-sheet {
  margin: auto;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: 86vh;
  max-height: 86dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pnl);
  color: var(--fg);
  border: 1px solid var(--line2);
  border-radius: var(--radius-modal);
  box-shadow: var(--elev-dialog);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}
dialog.mod-sheet::backdrop { background: rgba(0, 0, 0, .6); }

.mod-card { display: flex; flex-direction: column; min-width: 0; }

.mod-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--line2);
  background: var(--pnl2);
}
.mod-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;      /* a right-to-left name cannot flip the sheet */
}
.mod-body { padding: var(--sp-3); min-width: 0; }

/* A phone: the sheet docks at the bottom, at the thumb, full width. */
@media (max-width: 600px) {
  dialog.mod-sheet {
    margin: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    max-height: 94dvh;
    border-bottom: 0;
    border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    box-shadow: var(--elev-sheet);
  }
  .mod-body { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.mod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  margin: 0;
  border: 1px solid var(--line2);
  border-radius: var(--radius-control);
  background: var(--pnl2);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard);
}
.mod-btn:hover { background: var(--line2); }
.mod-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mod-btn.mod-pri { background: var(--acc); border-color: var(--acc); color: var(--on-acc); font-weight: 600; }
.mod-btn.mod-pri:hover { background: var(--acc-hover); border-color: var(--acc-hover); }
.mod-btn.mod-gho { background: none; color: var(--dim); }
.mod-btn.mod-gho:hover { background: var(--pnl2); color: var(--fg); }
.mod-btn.mod-danger { background: none; border-color: rgba(248, 113, 113, .4); color: var(--neg); }
.mod-btn.mod-danger:hover { background: var(--neg-dim); border-color: var(--neg); }
.mod-btn.mod-danger-solid { background: var(--neg); border-color: var(--neg); color: var(--on-acc); font-weight: 600; }
.mod-btn.mod-danger-solid:hover { background: var(--neg); border-color: var(--fg); }
.mod-btn.mod-wide { width: 100%; }
.mod-btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.mod-btn.is-busy { opacity: .7; }
.mod-btn[hidden] { display: none; }

.mod-stack { display: grid; gap: var(--sp-2); }
.mod-acts { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.mod-acts > .mod-btn { flex: 1 1 0; min-width: 0; }
.mod-acts > .mod-pri, .mod-acts > .mod-danger-solid { flex-grow: 1.4; }

/* ── text ───────────────────────────────────────────────────────────────── */
.mod-text { margin: 0 0 var(--sp-2); font-size: 13px; line-height: 1.5; color: var(--fg); }
.mod-sub { margin: 0 0 var(--sp-3); font-size: 12px; line-height: 1.45; color: var(--dim); }
.mod-sub[hidden] { display: none; }
.mod-label {
  display: block;
  margin: var(--sp-3) 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.mod-body > .mod-label:first-child { margin-top: 0; }
.mod-error { margin: var(--sp-2) 0 0; font-size: 12.5px; line-height: 1.45; color: var(--neg); }
.mod-error[hidden] { display: none; }

/* The quoted message on the line sheet: three lines at most, then "…". */
.mod-quote {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) 10px;
  border-left: 2px solid var(--line2);
  background: var(--pnl2);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
/* The message a report is about, on one line. */
.mod-from {
  margin: 0 0 var(--sp-3);
  font-size: 12.5px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.mod-from b { color: var(--fg); font-weight: 600; }

/* ── the report sheet ───────────────────────────────────────────────────── */
/* Two columns of 44 px choices, so the whole sheet fits a 390 x 844 phone and
   the 344 x 882 fold screen with no scrolling (DESIGN 1.1). */
.mod-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mod-reason {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  min-width: 0;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-control);
  background: none;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.mod-reason:hover { background: var(--pnl2); }
.mod-reason:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.mod-reason.is-on { background: var(--acc-dim); border-color: var(--acc-line); color: var(--acc); font-weight: 600; }

.mod-note,
.mod-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--sp-2) 9px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}
.mod-note { min-height: 52px; resize: none; }
.mod-input { min-height: var(--tap); }
.mod-note::placeholder, .mod-input::placeholder { color: var(--dim); opacity: 1; }
.mod-note:focus, .mod-input:focus { border-color: var(--acc-line); outline: none; }
.mod-input.bad { border-color: var(--neg); }

/* "Also block <name>": the whole 44 px row is the switch's target. */
.mod-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  margin-top: var(--sp-1);
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}
.mod-switch-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.mod-sw {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: var(--pnl2);
  cursor: pointer;
  transition: background var(--dur-toggle) var(--ease-standard);
}
.mod-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dim);
  transition: transform var(--dur-toggle) var(--ease-standard);
}
.mod-sw:checked { background: var(--neg-dim); border-color: rgba(248, 113, 113, .5); }
.mod-sw:checked::after { transform: translateX(16px); background: var(--neg); }
.mod-sw:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── the blocked list ───────────────────────────────────────────────────── */
.mod-list { display: flex; flex-direction: column; }
.mod-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  border-bottom: 1px solid var(--line);
}
.mod-row-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mod-row-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.mod-row-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--dim); }
.mod-empty { margin: var(--sp-2) 0; }

/* ── the Terms step ─────────────────────────────────────────────────────── */
.mod-terms { margin: 0 0 var(--sp-2); padding-left: 18px; }
.mod-terms li { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--fg); }
.mod-terms li::marker { color: var(--acc); }
.mod-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--acc);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mod-link:hover { color: var(--acc-hover); }
@media (max-width: 600px) { .mod-link { min-height: var(--tap); } }

/* ── the banned screen: the whole screen, no way past it ───────────────── */
dialog.mod-sheet.mod-full {
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
dialog.mod-sheet.mod-full:not([open]) { display: none; }
dialog.mod-sheet.mod-full .mod-card {
  width: calc(100% - 32px);
  max-width: 420px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-modal);
  background: var(--pnl);
}

/* ── the `⋯` on lines and rows ─────────────────────────────────────────── */
/* Drawn small so no line or row grows; the hit area reaches past the drawn
   box (::before), so a thumb still finds it. */
.mod-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--dim);
  line-height: 1;
  cursor: pointer;
}
.mod-more::before { content: ''; position: absolute; inset: -10px -4px; }
.mod-more:hover { color: var(--fg); background: var(--pnl2); }
.mod-more:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.mod-more svg { display: block; pointer-events: none; }

/* In-game chat (chat.js): at the end of the line's top row, name · time · ⋯. */
.chat-message.mod-actionable { cursor: pointer; }
.chat-message__meta > .mod-more { margin-left: auto; height: 16px; align-self: center; }

/* The pre-lobby chat (_prelobby_script.html): at the right end of the line. */
.pv2-msg.mod-actionable { position: relative; padding-right: 28px; cursor: pointer; }
.pv2-msg > .mod-more { position: absolute; top: 0; right: 0; height: 19px; }
.pv2-msg-spec {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 1px 4px;
  border: 1px solid rgba(127, 182, 217, .4);
  border-radius: var(--radius-control);
  color: var(--info);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.2;
  vertical-align: 1px;
}

/* The in-game Players row (game.js renderPlayers). It sits over the right end
   of the name's cell on the first line, so the row keeps its height and the
   cash column stays where it is; the name gives up the button's width. The
   row's own click (show their properties on the board) is unchanged. */
.b3-rt .player-item > .mod-row-more { grid-column: 2; grid-row: 1; justify-self: end; z-index: 1; }
/* Every row of a list that has one gives up the same width, so the seat
   symbols and chips still line up down the column (your row and the bots'
   have no `⋯`). */
.b3-rt #players-list:has(.mod-row-more) .player-item .player-name { padding-right: 28px; }
@media (max-width: 960px) {
  /* The phone row is 44 px tall with no padding: the hit area is the row's height. */
  .b3-rt .player-item > .mod-row-more { width: 32px; }
  .b3-rt .player-item > .mod-row-more::before { inset: -13px -2px; }
  .b3-rt #players-list:has(.mod-row-more) .player-item .player-name { padding-right: 36px; }
}
/* The legacy board's flex row. */
.player-item > .mod-row-more { margin-left: 4px; }

/* The rebuilt board: the player ticket (v2-trade-entry.js) is the in-game
   player card, and its last line is Report and Block, two labelled buttons,
   apart from the trade, stock and lend buttons above them. */
.v2t-ticket .v2t-tk-mod {
  display: flex;
  gap: var(--sp-2);
  margin-top: 2px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line2);
}
.v2t-ticket .v2t-tk-mod > .v2t-tk-modbtn.dsf-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  height: auto;
  background: none;
  color: var(--fg);
}
.v2t-ticket .v2t-tk-mod > .v2t-tk-block.dsf-btn { color: var(--neg); border-color: rgba(248, 113, 113, .4); }
@media (min-width: 961px) {
  .v2t-ticket .v2t-tk-mod > .v2t-tk-modbtn.dsf-btn { min-height: 32px; }
}

/* Social > In Game (social-rows.js): a 44 px control like the row's others. */
.s11-acts > .mod-more.mod-more--act { width: var(--tap); height: var(--tap); }
.s11-acts > .mod-more.mod-more--act::before { display: none; }

/* The invite toast's second row: Report and Block, small and labelled. */
.toast > .s11-invite-body .s11-invite-mod {
  display: flex;
  gap: var(--sp-1);
  margin-top: 6px;
}
.s11-invite-mod .s11-act { min-width: 0; padding: 0 var(--sp-2); font-size: 11.5px; }

/* The Social player popup (base.html showPlayerPopup): Report and Block, apart
   from the friend actions above them. */
.popup-actions .popup-mod-sep { height: 1px; margin: 4px 0; background: var(--line2); }

/* ── the composer notices: muted, cookies refused, banned ──────────────── */
.mod-chat-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.4;
}
/* The game's chat panel: where its "Players only" notice sits, drawn alike. */
.dsf-chat .mod-chat-notice { min-height: 0; padding: 10px; background: var(--pnl); border-top-color: var(--line2); font-size: 12px; }
/* The pre-lobby: inside the send row, in the input's place. */
.pv2-chat-send > .mod-chat-notice { flex: 1; min-height: 32px; padding: 0; border-top: 0; }