/* Dominion — the learning loop (Fred, 2026-08-08): teaching buttons, review queue, report cards.
   Loaded after dominion-ui.css so the .act opacity lift below wins over the cinematic base. */

/* ---- the buttons under every answer -------------------------------------------------------
   Fred, 2026-08-08: "The current buttons are too transparent, lets increase opacity by 20%."

   Three things made them faint, not one, so all three lift together: the element's own opacity
   (.9), a border at 16% alpha that all but disappeared against the background, and a muted text
   colour. Raising only the opacity property would have moved almost nothing — .9 to 1 is a tenth.
   The numbers below are +20 percentage points of alpha, clamped where that would exceed solid,
   which is the reading that produces a visible change rather than an arithmetic one. */
.act {
  opacity: 1;
  border-color: rgba(132, 197, 235, .36);
  background: rgba(1, 9, 15, .7);
  color: #b3c6d4;
}
.act:hover { color: #e8f7ff; border-color: rgba(123, 236, 255, .55); }
.act:disabled { opacity: .55; cursor: default; }

/* The teaching row sits directly under the reviewer row for the owner, and is the only row a
   guest sees. Slightly inset so the two read as one group rather than two unrelated toolbars. */
.acts-teach { padding-top: 2px; gap: 6px; }
.acts-teach .act { font-size: 11px; letter-spacing: .04em; }
.teachnote {
  display: inline-flex; align-items: center;
  padding: 2px 8px; font-size: 10px; letter-spacing: .03em; color: #8fa6b6;
}
.teachnote-ok { color: #9fe6b0; }
.teachnote-warn { color: #ffb4a8; }

/* ---- the adversarial report card ---------------------------------------------------------- */
.crwhy { display: block; margin-top: 3px; font-size: 10.5px; color: #8fa6b6; font-style: italic; }

/* ---- the review queue that opens when Fred arrives ---------------------------------------- */
.fbmodal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(2, 8, 13, .78); backdrop-filter: blur(3px);
}
.fbbox {
  width: min(680px, 100%); max-height: 86dvh; display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(9, 22, 31, .98), rgba(4, 12, 18, .99));
  border: 1px solid rgba(126, 255, 140, .3);
  box-shadow: 0 0 40px rgba(60, 200, 120, .12), 0 18px 50px rgba(0, 0, 0, .55);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.fbhead { padding: 16px 18px 10px; border-bottom: 1px solid rgba(139, 204, 241, .12); }
.fbkick { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #7ce08c; }
.fbtitle { margin: 4px 0 6px; font-size: 17px; color: #eaf6ff; font-weight: 700; }
.fbnote { margin: 0; font-size: 11px; line-height: 1.5; color: #90a6b6; }

.fblist { overflow-y: auto; padding: 10px 18px; display: grid; gap: 10px; }
.fbitem {
  padding: 11px 12px; border: 1px solid rgba(132, 197, 235, .18);
  background: rgba(3, 12, 18, .6);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.fbdone { opacity: .5; }
.fbtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.fbtag {
  padding: 2px 7px; font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: #9db6c6; border: 1px solid rgba(132, 197, 235, .22); background: rgba(1, 9, 15, .5);
}
/* A lesson that would reach every guest is the one to read twice before approving. */
.fbtag-global { color: #ffd79a; border-color: rgba(255, 190, 110, .45); }
.fblesson { font-size: 13px; line-height: 1.5; color: #e4f2fb; }
.fbwhy { margin-top: 4px; font-size: 11px; line-height: 1.45; color: #8fa6b6; }
.fbbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.fbfoot {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 11px 18px; border-top: 1px solid rgba(139, 204, 241, .12);
}
.fbfoot .act { text-decoration: none; }

@media (max-width: 620px) {
  .fbbox { max-height: 92dvh; }
  .fbhead, .fblist, .fbfoot { padding-left: 12px; padding-right: 12px; }
}

/* ---- "Install Dominion AI as an app" (Fred, 2026-08-08) -------------------------------------
   Sits directly above the Setup door and borrows its shape so the rail reads as one column of
   doors. Deliberately calmer than Setup: blue rather than green, and no pulse. Setup is the thing
   a new account MUST visit; this is an offer, and two competing pulses would make neither urgent. */
.sb-install {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 10px 12px 0;
  padding: 11px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  background: linear-gradient(160deg, rgba(80, 190, 255, .10), rgba(6, 20, 30, .7));
  border: 1px solid rgba(110, 200, 255, .42); color: #cfe9ff;
  font: inherit; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
  box-shadow: 0 0 12px rgba(90, 190, 255, .16), inset 0 0 10px rgba(90, 190, 255, .07);
}
.sb-install:hover { filter: brightness(1.18); }
.sb-install-core {
  width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; background: #6ec8ff;
  box-shadow: 0 0 12px #6ec8ff, 0 0 22px rgba(110, 200, 255, .7);
}