/* 20-council.css — v41.64 Pirate Council board */

#screen-council { padding-bottom: 18px; }

.council-title { align-items:flex-start; gap:12px; }
.council-title > div:first-child { min-width:0; }
.council-subtitle { margin-top:2px; color:#dcc8a1; font-size:.8rem; line-height:1.35; }

.council-summary {
  display:flex; align-items:center; gap:7px; overflow-x:auto; scrollbar-width:none;
  margin:0 0 10px; padding:0 1px 2px; color:#d4bf96; font-size:.74rem;
}
.council-summary::-webkit-scrollbar { display:none; }
.council-summary > span {
  flex:0 0 auto; display:inline-flex; align-items:baseline; gap:4px;
  border:1px solid rgba(214,184,110,.34); border-radius:999px; background:rgba(250,241,220,.07);
  padding:5px 9px; white-space:nowrap;
}
.council-summary b { color:#fff3d2; font-size:.84rem; }
.council-summary .is-against { border-color:rgba(182,78,66,.62); background:rgba(132,43,37,.18); }
.council-summary .is-with { border-color:rgba(78,131,182,.62); background:rgba(47,81,131,.18); }
.council-summary .council-summary-head { border-color:rgba(226,189,107,.55); background:rgba(120,86,28,.22); color:#f0d59c; font-weight:700; }

.council-chamber-wrap {
  position:relative;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; overscroll-behavior-y:none; scrollbar-width:thin;
  border:1px solid rgba(182,145,84,.7); border-radius:18px;
  /* v41.64: the chamber is only as wide as its seating, so the against/with
     tint and the focal glow live on the wrapper — otherwise they stop short of
     the frame on a wide screen and read as a rendering fault. */
  background:
    radial-gradient(ellipse at 50% 96%, rgba(213,180,113,.1) 0 14%, transparent 46%),
    linear-gradient(90deg, rgba(117,35,31,.16), transparent 42%, transparent 58%, rgba(42,76,119,.16)),
    linear-gradient(180deg, rgba(66,43,26,.985), rgba(38,25,16,.995));
  box-shadow:inset 0 1px rgba(255,244,216,.09), 0 10px 28px rgba(0,0,0,.22);
}
.council-chamber-wrap::before {
  content:"AGAINST"; position:absolute; left:22px; top:15px; z-index:0;
  color:rgba(246,176,160,.88); font-size:.67rem; font-weight:800; letter-spacing:.14em;
}
.council-chamber-wrap::after {
  content:"WITH US"; position:absolute; right:22px; top:15px; z-index:0;
  color:rgba(173,210,245,.9); font-size:.67rem; font-weight:800; letter-spacing:.14em;
}
/* v41.64: width/height come from Council.layout() as inline styles. The chamber
   is a positioning surface, not a grid — its height is bounded by the outermost
   arc, so adding members can no longer make it grow downward without limit. */
.council-chamber { position:relative; isolation:isolate; margin:0 auto; }
/* Guide arcs are drawn on the same radii the seats are placed on, so the
   decoration can never drift away from the seating as the council grows. */
.council-guides { position:absolute; inset:0; z-index:0; pointer-events:none; }
.council-guides path { fill:none; stroke:rgba(229,205,150,.13); stroke-width:1; }

.council-seat-layer { position:absolute; inset:0; z-index:1; }

/* Seats are placed by left/top only. Transform is left free for press and
   focus effects so a tap can never displace a seat. */
/* v41.64: every size here comes from Council.seatVars() on the chamber, so a
   40-lord council shrinks its seats without the maths and the stylesheet
   disagreeing. The fallbacks are the full-size tier. */
.council-seat {
  position:absolute; width:var(--seat-w, 78px); height:var(--seat-h, 74px);
  border:1px solid rgba(238,216,167,.26); border-radius:14px;
  background:rgba(247,235,204,.075); color:#fff3d3; padding:4px 3px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.04); transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.council-seat:active { transform:scale(.96); }
.council-seat:focus-visible { z-index:3; }
@media (hover:hover) { .council-seat:hover { background:rgba(247,235,204,.13); border-color:rgba(238,216,167,.48); z-index:2; } }
.council-seat.is-dead { filter:grayscale(.85); opacity:.72; }

.council-seat.is-head {
  width:var(--seat-head-w, 96px); height:var(--seat-head-h, 92px); z-index:2;
  border-color:rgba(232,196,116,.72); background:rgba(70,50,22,.5);
  box-shadow:inset 0 1px rgba(255,238,196,.14), 0 6px 18px rgba(0,0,0,.35);
}
.council-seat.is-head .council-portrait { width:var(--seat-head-portrait, 52px); height:var(--seat-head-portrait, 52px); }
.council-seat-role {
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#e9c877; font-size:var(--seat-role, .53rem); font-weight:850; letter-spacing:.07em; text-transform:uppercase;
}
.council-head-crest {
  position:absolute; right:-6px; bottom:-3px; display:grid; place-items:center;
  width:var(--seat-crest, 22px); height:var(--seat-crest, 22px); border-radius:50%; background:#2b1b11; border:1px solid #e2bd6b;
  color:#f7d98a; font-size:calc(var(--seat-crest, 22px) * .55); line-height:1; box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.council-seat-name {
  display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--seat-name, .66rem); font-weight:760; text-align:center; line-height:1.15;
}
.council-seat-portrait { position:relative; display:block; }
.council-seat .council-portrait {
  width:var(--seat-portrait, 42px); height:var(--seat-portrait, 42px);
  border-width:var(--seat-ring, 3px);
}
.council-portrait {
  width:42px; height:42px; display:grid; place-items:center; overflow:hidden; border-radius:50%;
  border:3px solid var(--council-accent, #9b8a68); background:#1f1711; color:#f7e9c8;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.32);
  font-family:Georgia, "Times New Roman", serif; font-weight:800;
}
.council-portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.council-portrait.is-large { width:66px; height:66px; flex:0 0 auto; }
.council-secret-badge {
  position:absolute; left:-5px; top:-2px; display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:#2b1b11; border:1px solid #9b6cab; color:#d8a8ea;
  font-size:.55rem; line-height:1; box-shadow:0 2px 5px rgba(0,0,0,.35);
}

.allegiance-hostile { --council-accent:#a64036; }
.allegiance-opposed { --council-accent:#b76a3e; }
.allegiance-undecided { --council-accent:#9b937f; }
.allegiance-supportive { --council-accent:#3f8f83; }
.allegiance-allied { --council-accent:#3d6fa6; }
.council-seat.allegiance-hostile { background:rgba(133,42,36,.2); }
.council-seat.allegiance-opposed { background:rgba(154,80,42,.17); }
.council-seat.allegiance-undecided { background:rgba(139,130,107,.14); }
.council-seat.allegiance-supportive { background:rgba(44,111,99,.17); }
.council-seat.allegiance-allied { background:rgba(44,82,130,.2); }

.council-centre-mark {
  position:absolute; left:50%; bottom:15px; z-index:1; transform:translateX(-50%);
  width:112px; height:47px; display:grid; place-items:center; border-radius:50% 50% 12px 12px;
  border:1px solid rgba(219,192,133,.36); background:rgba(20,13,9,.78); color:#cdb789;
  font-size:.58rem; font-weight:850; letter-spacing:.11em;
}

.council-legend {
  display:flex; justify-content:center; gap:8px 12px; flex-wrap:wrap; padding:10px 8px 0;
  color:#ccb78d; font-size:.69rem;
}
.council-legend-item { display:inline-flex; align-items:center; gap:5px; }
.council-legend-item i { width:9px; height:9px; border-radius:3px; background:var(--council-accent); box-shadow:0 0 0 1px rgba(0,0,0,.22); }
.council-legend-item b { min-width:17px; padding:1px 5px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(250,241,220,.07); color:#fff3d2; font-size:.64rem; text-align:center; }

.council-empty {
  min-height:310px; border:1px dashed rgba(196,160,101,.38); border-radius:18px; padding:36px 22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(180deg, rgba(255,245,221,.045), rgba(255,245,221,.02)), radial-gradient(ellipse at 50% 110%, rgba(213,180,113,.1), transparent 52%);
}
.council-empty-mark { font-size:2rem; opacity:.9; color:#d8be84; }
.council-empty h3 { margin:9px 0 3px; color:#f4e2b9; }
.council-empty p { max-width:400px; margin:0 0 15px; color:#cfbb93; font-size:.84rem; line-height:1.45; }

.council-npc-fields {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px;
  padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025);
}
.council-npc-fields[hidden] { display:none !important; }
.council-membership-check span, .council-lord-check span, .council-member-lord span, .council-head-check span { display:flex; flex-direction:column; gap:1px; }
.council-membership-check small, .council-lord-check small, .council-member-lord small, .council-head-check small { color:#bca47b; font-weight:400; }

.council-member-sheet { display:grid; gap:14px; }
.council-member-summary { display:flex; align-items:center; gap:12px; min-width:0; }
.council-member-name { color:var(--text); font:800 1.08rem Georgia, "Times New Roman", serif; }
.council-member-meta { color:#c8b084; font-size:.76rem; margin-top:2px; }
.council-member-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.council-lord-chip { border-color:rgba(214,184,110,.55); color:#ead59a; }
.council-allegiance-fieldset { border:0; padding:0; margin:0; min-width:0; }
.council-allegiance-fieldset legend { margin:0 0 7px; color:#d8c39d; font-size:.73rem; font-weight:750; }
.council-allegiance-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.council-allegiance-choice { min-width:0; cursor:pointer; }
.council-allegiance-choice input { position:absolute; opacity:0; pointer-events:none; }
/* v41.64: the board is colour-coded and the picker was not, so choosing an
   allegiance meant translating five words into five colours from memory. */
.council-allegiance-choice span {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-height:44px; padding:6px 3px; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.05); color:#d4bf95; font-size:.66rem; font-weight:780; text-align:center;
}
.council-allegiance-choice span i {
  width:10px; height:10px; border-radius:50%; background:var(--council-accent);
  box-shadow:0 0 0 1px rgba(0,0,0,.3); flex:0 0 auto;
}
.council-allegiance-choice input:checked + span {
  border-color:var(--council-accent); color:#fff4d8; background:color-mix(in srgb, var(--council-accent) 27%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--council-accent) 48%, transparent);
}
.council-allegiance-choice input:focus-visible + span { outline:3px solid #fff0a8; outline-offset:2px; }
.council-member-actions { flex-wrap:wrap; }
/* v41.64: Remove was the widest and loudest control on a sheet that is mostly
   for editing. Scoped to this sheet — the app's danger button is unchanged. */
.modal .council-member-actions .button.danger { background:transparent; flex:0 1 auto; }

@media (max-width:700px) {
  .council-allegiance-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:480px) {
  .council-title .button { flex:0 0 auto; }
  .council-summary { margin-inline:-2px; }
  .council-chamber-wrap { margin-inline:-2px; border-radius:15px; }
  .council-npc-fields { grid-template-columns:1fr; }
  .council-member-summary .council-portrait.is-large { width:58px; height:58px; }
}
@media (prefers-reduced-motion:reduce) { .council-seat { transition:none; } }


/* v41.41 — Council modal contrast pass */
.modal .council-member-name { color:#24170d; }
/* v41.64: 4.36:1 on the sheet's parchment — a pre-existing AA failure that
   only surfaced once the Council sheet was added to the contrast sweep. */
.modal .council-member-meta { color:#745d3b; font-size:.78rem; }
.modal .council-member-chips .chip {
  background:#efe2bc;
  border-color:#d5b46b;
  color:#6d5222;
}
.modal .council-lord-chip {
  background:#f1e1b4;
  border-color:#caa04a;
  color:#6a4e18;
  font-weight:800;
}
.modal .council-allegiance-fieldset legend { color:#7a6240; }
.modal .council-allegiance-choice span {
  background:#f6ecd2;
  border-color:#cfbe99;
  color:#6b5639;
}
.modal .council-allegiance-choice input:checked + span {
  color:#183631;
  background:color-mix(in srgb, var(--council-accent) 26%, #fff7e6);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--council-accent) 60%, transparent);
}
.modal .council-member-lord {
  border-color:color-mix(in srgb, var(--lagoon) 35%, var(--line-strong));
  background:color-mix(in srgb, var(--lagoon) 9%, #fffaf0);
}
.modal .council-member-lord span b, .modal .council-head-check span b { color:#24170d; }
.modal .council-head-chip { background:#f3e3b6; border-color:#c9a04c; color:#66491a; font-weight:800; }
/* The global checked style is lagoon, which is right for ordinary toggles and
   wrong for this one: leadership is brass everywhere else on the screen — the
   crest, the chip, the ring on the head's seat. Matched specificity, because
   .modal .check-row:has(input:checked) in 08-forms.css outranks a plain class. */
.modal .council-head-check {
  border-color:color-mix(in srgb, var(--brass) 40%, var(--line-strong));
  background:color-mix(in srgb, var(--brass) 9%, #fffaf0);
}
.modal .council-head-check:has(input:checked) {
  border-color:color-mix(in srgb, var(--brass) 62%, var(--line));
  background:color-mix(in srgb, var(--brass) 15%, #fffaec);
}
.modal .council-head-check input[type="checkbox"] { accent-color:var(--brass); }
.modal .council-member-summary { align-items:center; }
.modal .council-member-meta { font-size:.8rem; }
.modal .council-head-check small,
.modal .council-member-lord small,
.modal .council-membership-check small,
.modal .council-lord-check small { color:#755e3f; }


/* v41.42 — Pirate Lord designation for player characters */
.modal .roster-pirate-lord span { display:flex; flex-direction:column; gap:1px; }
.modal .roster-pirate-lord small { color:#755e3f; font-weight:400; }
.char-lord-mark { color:#d5a945; font-size:.78em; vertical-align:.08em; }