/* The council meets in a chapter house by candlelight: stone courses under a vault of pointed
   arches, warm light from above that breathes like candle flame, each brother in an arched
   stall, and every sealed ballot marked in red wax. All of it is static CSS except the light,
   which only changes opacity. */
.meeting-dialog {
  isolation:isolate;
  border-color:#8a7650;
  background:
    radial-gradient(90% 190px at 50% 0, #d99c4e24, transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 35px, #ffffff06 35px 36px),
    linear-gradient(#1d2521, #151b18 70%);
}
.meeting-dialog::before, .meeting-dialog::after {
  content:""; position:absolute; inset:0 0 auto; pointer-events:none; z-index:-1;
}
.meeting-dialog::before {
  height:150px; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Cg fill='none' stroke='%23b89d6a'%3E%3Cpath stroke-width='2.5' stroke-opacity='.45' d='M1 150V70Q2 18 60 3Q118 18 119 70V150'/%3E%3Cpath stroke-width='1.2' stroke-opacity='.25' d='M11 150V74Q13 30 60 17Q107 30 109 74V150'/%3E%3Cpath stroke-width='1' stroke-opacity='.2' d='M60 3V40M1 70H119'/%3E%3C/g%3E%3C/svg%3E") 50% 0 / 120px 150px repeat-x;
  -webkit-mask-image:linear-gradient(#000, transparent);
  mask-image:linear-gradient(#000, transparent);
}
.meeting-dialog::after {
  height:230px;
  background:radial-gradient(70% 170px at 50% 0, #f0b25e1f, transparent 75%);
  animation:chamber-light 3.4s ease-in-out infinite alternate;
}
@keyframes chamber-light { 0% { opacity:.65; } 45% { opacity:1; } 60% { opacity:.8; } 100% { opacity:.95; } }

/* Stalls: carved seats with a warm edge of light along the arch. */
.meeting-dialog .vote-card {
  border-radius:22px 22px 7px 7px;
  background:linear-gradient(#303b32, #262f29);
  box-shadow:inset 0 12px 16px -12px #e6b46a4d;
}
.meeting-dialog .vote-card.selected {
  background:linear-gradient(#6d5737, #4f402a);
  box-shadow:inset 0 12px 16px -10px #f3cd8a66, 0 0 16px #e7c48240;
}
.meeting-dialog .vote-card.fallen { background:linear-gradient(#26302b, #202824); box-shadow:none; }

/* A ballot, once sealed, shows as red wax on the voter's stall. Whom they chose stays secret. */
.vote-card .wax-seal {
  display:none; position:absolute; right:5px; bottom:5px; width:20px; height:20px;
  border-radius:52% 48% 50% 46% / 48% 52% 47% 53%;
  background:radial-gradient(circle at 36% 30%, #db6254, #a02e26 55%, #701c17);
  box-shadow:0 1px 2px #000a, inset 0 0 0 2px #b93b31;
}
.vote-card .wax-seal::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(#f4c3a3b0, #f4c3a3b0) 50% 50% / 2px 10px no-repeat, linear-gradient(#f4c3a3b0, #f4c3a3b0) 50% 40% / 8px 2px no-repeat;
}
.vote-card.sealed .wax-seal { display:block; animation:seal-press .38s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes seal-press { from { transform:scale(1.9) rotate(-25deg); opacity:0; } to { transform:none; opacity:1; } }

.council-ballot #seal-vote { display:flex; align-items:center; justify-content:center; gap:8px; }
.council-ballot #seal-vote { min-width:0; white-space:nowrap; }
.council-ballot #seal-vote .seal-name { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.council-ballot #seal-vote::before {
  content:""; width:18px; height:18px; flex:none; border-radius:52% 48% 50% 46% / 48% 52% 47% 53%;
  background:radial-gradient(circle at 36% 30%, #db6254, #a02e26 55%, #701c17); box-shadow:0 1px 2px #0009;
}
.council-ballot #seal-vote:disabled::before { filter:saturate(.35); opacity:.7; }

/* On a phone the eight stalls stand in two rows of four, portraits large, so more of the
   screen is left for the discussion. */
@media(max-width:600px) {
  .meeting-dialog::before { height:120px; background-size:96px 120px; }
  .meeting-dialog .vote-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:auto; gap:6px; }
  .meeting-dialog .vote-card { flex-direction:column; justify-content:flex-start; gap:1px; padding:8px 2px 5px; text-align:center; font-size:12px; border-radius:34px 34px 8px 8px / 26px 26px 8px 8px; }
  .meeting-dialog .vote-card.selected { padding:7px 1px 4px; }
  .meeting-dialog .vote-card .monk-badge { width:44px; height:57px; }
  .meeting-dialog .vote-card>span:not(.ballot-mark,.wax-seal) { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .meeting-dialog .vote-card small { font-size:8.5px; margin-top:1px; }
  .vote-card .wax-seal { right:3px; bottom:auto; top:38px; width:17px; height:17px; }
  /* Smaller stalls, and no controls with nothing to do, so the chat shows several statements. */
  .meeting-dialog .vote-card { padding:5px 2px 3px; font-size:11.5px; }
  .meeting-dialog .vote-card.selected { padding:4px 1px 2px; }
  .meeting-dialog .vote-card .monk-badge { width:33px; height:43px; }
  .meeting-dialog .vote-card small { font-size:8px; margin-top:0; }
  .vote-card .wax-seal { top:28px; width:15px; height:15px; }
  #ballot-hint, #share-online-evidence.nothing-to-share { display:none; }
  .chat-pane .quick-chat { -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); padding-right:28px; }
}
@media(max-height:500px) and (min-width:600px) {
  .meeting-dialog .vote-card { border-radius:26px 26px 7px 7px / 20px 20px 7px 7px; }
  .vote-card .wax-seal { width:15px; height:15px; right:3px; bottom:3px; }
}

/* The last ten seconds of a ballot you have not sealed. */
.meeting-clock.urgent{color:#ef8f70;font-weight:bold}
.chat-message.ghost{color:#aebdc4;font-style:italic}.chat-message.ghost strong{color:#9fb6c2}