/* Ralliance Alliance workspace density system.
   Loaded after legacy page styles so Overview, Events, Members, Battle Plan,
   and Prep share one spacing, typography, radius, control, and button contract. */
:root {
  --alliance-page-gutter: clamp(16px, 4vw, 32px);
  --alliance-space-1: 6px;
  --alliance-space-2: 10px;
  --alliance-space-3: 14px;
  --alliance-space-4: 18px;
  --alliance-card-radius: 24px;
  --alliance-inner-radius: 17px;
  --alliance-control-radius: 14px;
  --alliance-control-height: 56px;
  --alliance-body: 14px;
  --alliance-supporting: 13px;
  --alliance-meta: 10.5px;
  --alliance-muted: #b9b2c8;
  --prep-accent: #f96d00;
  --prep-accent-soft: #ffb275;
}

/* 1.08 form-control CSS reapply.
   These selectors intentionally target only the previously unskinned controls. */
body[data-page="alliance"] :is(
  .reminder-select,
  #fightingMode,
  .fighter-picker select,
  select[data-fight-object]
) {
  width: 100%;
  min-height: 56px;
  padding: 12px 46px 12px 14px;
  color: #f7f4ff;
  color-scheme: dark;
  appearance: none;
  background-color: #100d19;
  background-image:
    linear-gradient(45deg, transparent 50%, #b9b2c8 50%),
    linear-gradient(135deg, #b9b2c8 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  border: 1px solid rgb(169 121 255 / 38%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: 700 15px/1.25 "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="alliance"] :is(
  .reminder-select,
  #fightingMode,
  .fighter-picker select,
  select[data-fight-object]
) option {
  padding: 12px 14px;
  color: #f7f4ff;
  color-scheme: dark;
  background: #171321;
  font: 700 15px/1.4 "Segoe UI", system-ui, sans-serif;
}

body[data-page="alliance"] :is(
  .reminder-select,
  #fightingMode,
  .fighter-picker select,
  select[data-fight-object]
):is(:hover, :focus, :focus-visible) {
  color: #fff;
  background-color: #171321;
  border-color: #5ff0c5;
  box-shadow: 0 0 0 3px rgb(95 240 197 / 17%);
  outline: none;
}

body[data-page="alliance"] :is(#fightingMode, select[data-fight-object]) {
  border-color: rgb(246 198 107 / 42%);
}

body[data-page="alliance"] :is(#fightingMode, select[data-fight-object]):focus {
  border-color: #f6c66b;
  box-shadow: 0 0 0 3px rgb(246 198 107 / 16%);
}

body[data-page="alliance"] .reminder-select:disabled {
  color: #81798d;
  background-color: rgb(13 12 21 / 82%);
  border-color: rgb(255 255 255 / 9%);
  opacity: .72;
}

body[data-page="prep"] input[data-prep-deadline] {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  color: #f7f4ff;
  color-scheme: dark;
  accent-color: #f96d00;
  background: #100d19;
  border: 1px solid rgb(249 109 0 / 52%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: 700 15px/1.25 "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="prep"] input[data-prep-deadline]:is(:hover, :focus, :focus-visible) {
  color: #fff;
  background: #171321;
  border-color: #ffb275;
  box-shadow: 0 0 0 3px rgb(249 109 0 / 18%);
  outline: none;
}

body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit {
  color: #f7f4ff;
}

body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-text {
  padding-inline: 3px;
  color: #aaa3ba;
}

body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-year-field,
body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-month-field,
body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-day-field,
body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-hour-field,
body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-minute-field,
body[data-page="prep"] input[data-prep-deadline]::-webkit-datetime-edit-ampm-field {
  color: #f7f4ff;
  background: transparent;
}

body[data-page="prep"] input[data-prep-deadline]::-webkit-calendar-picker-indicator {
  width: 22px;
  height: 22px;
  padding: 7px;
  cursor: pointer;
  background-color: rgb(249 109 0 / 15%);
  border: 1px solid rgb(255 178 117 / 32%);
  border-radius: 9px;
  filter: invert(78%) sepia(64%) saturate(1268%) hue-rotate(324deg) brightness(102%);
}

@media (max-width: 520px) {
  body[data-page="alliance"] :is(
    .reminder-select,
    #fightingMode,
    .fighter-picker select,
    select[data-fight-object]
  ),
  body[data-page="prep"] input[data-prep-deadline] {
    min-height: 54px;
    font-size: 16px;
  }
}

body[data-page="alliance"],
body[data-page="prep"] {
  font-size: var(--alliance-body);
}

body[data-page="alliance"] .lead,
body[data-page="alliance"] .event-note,
body[data-page="alliance"] .switch-copy small,
body[data-page="alliance"] .audit-row span,
body[data-page="alliance"] .notification span,
body[data-page="prep"] :is(.prep-heading, .prep-entry-card, .prep-member-step, .prep-schedule-panel) > p {
  color: var(--alliance-muted);
  font-size: var(--alliance-supporting);
  line-height: 1.45;
}

body[data-page="alliance"] :is(.eyebrow, .panel-kicker, .label, .meta, .role-tag, .status),
body[data-page="prep"] :is(.eyebrow, .panel-kicker, .prep-choice-group legend) {
  font-size: var(--alliance-meta);
  opacity: .84;
}

/* Shared page rhythm and outer surfaces. */
body[data-page="alliance"] main,
body[data-page="prep"] .prep-shell {
  width: min(1120px, calc(100% - (var(--alliance-page-gutter) * 2)));
  padding-top: var(--alliance-space-4);
}

body[data-page="alliance"] .page-head,
body[data-page="prep"] .prep-heading {
  gap: var(--alliance-space-3);
  margin-bottom: var(--alliance-space-4);
}

body[data-page="alliance"] .page-head .page-title,
body[data-page="prep"] .prep-heading h1 {
  font-size: clamp(26px, 6.5vw, 28px);
  line-height: 1.05;
}

body[data-page="alliance"] .grid,
body[data-page="alliance"] .rally-overview .grid,
body[data-page="alliance"] .fighting-grid,
body[data-page="alliance"] .published-plan,
body[data-page="prep"] .prep-entry,
body[data-page="prep"] .prep-organizer {
  gap: var(--alliance-space-3);
}

body[data-page="alliance"] .panel,
body[data-page="alliance"] .brand-card,
body[data-page="alliance"] .brand-card.alt,
body[data-page="alliance"] .rally-surface,
body[data-page="prep"] .panel {
  padding: var(--alliance-space-4);
  border-radius: var(--alliance-card-radius);
}

body[data-page="alliance"] .panel-head,
body[data-page="prep"] .panel-heading {
  gap: var(--alliance-space-2);
  margin-bottom: var(--alliance-space-3);
}

body[data-page="alliance"] .panel .panel-title,
body[data-page="prep"] :is(.panel, .prep-form-header, .prep-organizer-header) h2 {
  font-size: clamp(20px, 5vw, 22px);
  line-height: 1.08;
}

/* Controls and the four-level button hierarchy. */
body[data-page="alliance"] :is(input, select, textarea),
body[data-page="prep"] :is(input, select, textarea) {
  min-height: var(--alliance-control-height);
  padding: 12px 14px;
  border-radius: var(--alliance-control-radius);
  font-size: 15px;
}

body[data-page="alliance"] .btn,
body[data-page="prep"] .button {
  min-height: var(--alliance-control-height);
  padding-inline: 18px;
  border-radius: var(--alliance-control-radius);
  font-size: 15px;
  line-height: 1.2;
}

body[data-page="alliance"] #openEventForm { min-height: 52px; }

body[data-page="alliance"] .btn.small,
body[data-page="prep"] .button.button-ghost {
  min-height: 44px;
  padding-inline: 14px;
  font-size: 14px;
}

body[data-page="alliance"] .btn.primary {
  color: #07110e;
  background: var(--mint);
  border-color: var(--mint);
}

body[data-page="alliance"] .btn.secondary {
  color: var(--text);
  background: rgb(124 58 237 / 10%);
  border-color: var(--line-accent);
}

body[data-page="alliance"] .btn.ghost {
  color: var(--alliance-muted);
  background: transparent;
  border-color: var(--line);
}

body[data-page="alliance"] .btn.danger {
  color: var(--danger);
  background: rgb(255 107 130 / 7%);
  border-color: rgb(255 107 130 / 34%);
}

/* Top tabs: underline leads; the background is deliberately restrained. */
body[data-page="alliance"] .module-nav,
body[data-page="prep"] .prep-module-nav {
  min-height: 48px;
  top: max(var(--app-header-height, 60px), calc(41px + env(safe-area-inset-top)));
}

body[data-page="alliance"] .module-nav .nav-btn,
body[data-page="prep"] .prep-module-nav .nav-btn {
  min-height: 48px;
  padding-inline: 14px;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
}

body[data-page="alliance"] .module-nav .nav-btn.active,
body[data-page="prep"] .prep-module-nav .nav-btn.active {
  background: rgb(95 240 197 / 4%);
}

body[data-page="alliance"] .nav-context {
  margin-top: 0;
  font-size: 9px;
}

/* Overview: passive information uses dividers instead of stacked boxes. */
body[data-page="alliance"] .stat-grid {
  gap: 0;
  overflow: hidden;
  background: rgb(9 7 17 / 34%);
  border-radius: var(--alliance-control-radius);
}

body[data-page="alliance"] .stat {
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
}

body[data-page="alliance"] .stat:last-child { border-right: 0; }
body[data-page="alliance"] .stat strong { margin-top: 5px; }
body[data-page="alliance"] .callout { padding: 14px 16px; border-radius: var(--alliance-control-radius); }
body[data-page="alliance"] .switch-row { padding-block: 10px; }

/* Events: retain the event/reminder structure, with less dead space. */
body[data-page="alliance"] .event-list { gap: 12px; }
body[data-page="alliance"] .event-card {
  gap: var(--alliance-space-3);
  padding: 15px 16px;
  background: rgb(9 7 17 / 30%);
  border-color: rgb(255 255 255 / 6%);
  border-radius: var(--alliance-inner-radius);
  box-shadow: none;
}

body[data-page="alliance"] .event-card:hover {
  border-color: rgb(169 121 255 / 18%);
  transform: none;
}

body[data-page="alliance"] .event-name { gap: 6px 8px; }
body[data-page="alliance"] .event-name h3 { font-size: 17px; line-height: 1.1; }
body[data-page="alliance"] .event-time { margin-top: 6px; font-size: 12px; }
body[data-page="alliance"] .event-note { margin-top: 4px; }
body[data-page="alliance"] .event-actions { justify-content: flex-start; margin-top: 8px; }
body[data-page="alliance"] .reminder-box { padding-left: var(--alliance-space-3); }
body[data-page="alliance"] .reminder-select { margin-top: 8px; }
body[data-page="alliance"] .checkline {
  width: 100%;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
  font-size: 15px;
}
body[data-page="alliance"] .checkline input {
  position: relative;
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  margin: 0;
  padding: 0;
  appearance: none;
  place-items: center;
  background: #0d0c15;
  border: 1.5px solid rgb(169 121 255 / 52%);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
}
body[data-page="alliance"] .checkline input::after {
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #07110e;
  border-left: 2px solid #07110e;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}
body[data-page="alliance"] .checkline input:checked {
  background: var(--mint);
  border-color: var(--mint);
}
body[data-page="alliance"] .checkline input:checked::after { opacity: 1; }
body[data-page="alliance"] .reminder-select { min-height: 52px; }

body[data-page="alliance"] :is(.clock, .icon-btn),
body[data-page="prep"] :is(.clock, .icon-btn) { border-radius: var(--alliance-control-radius); }
body[data-page="alliance"] .clock,
body[data-page="prep"] .clock { border-color: rgb(255 255 255 / 6%); }
body[data-page="alliance"] .module-context-dot,
body[data-page="prep"] .module-context-dot {
  width: 5px;
  height: 5px;
  flex-basis: 5px;
  opacity: .62;
  box-shadow: none;
}

body[data-page="alliance"] .app { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
body[data-page="prep"] .prep-shell { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }

/* Members: compact rows and one disclosure control for management actions. */
body[data-page="alliance"] .member-row {
  gap: 11px;
  min-height: 66px;
  padding-block: 9px;
}

body[data-page="alliance"] .avatar { width: 42px; height: 42px; }
body[data-page="alliance"] .member-info strong { font-size: 17px; line-height: 1.2; }
body[data-page="alliance"] .member-info small { font-size: 11.5px; }
body[data-page="alliance"] .member-info .fid { font-size: 10.5px; }
body[data-page="alliance"] .member-actions { align-items: flex-end; gap: 5px; }
body[data-page="alliance"] .member-manage { position: relative; }
body[data-page="alliance"] .member-manage summary {
  display: grid;
  min-width: 88px;
  min-height: 44px;
  padding: 0 14px;
  place-items: center;
  color: var(--text);
  background: rgb(124 58 237 / 10%);
  border: 1px solid var(--line-accent);
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

body[data-page="alliance"] .member-manage summary::-webkit-details-marker { display: none; }
body[data-page="alliance"] .member-manage[open] summary { border-color: var(--mint); }
body[data-page="alliance"] .member-manage-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 12;
  display: grid;
  width: max-content;
  min-width: 180px;
  gap: 6px;
  padding: 8px;
  background: #171321;
  border: 1px solid var(--line-accent);
  border-radius: var(--alliance-control-radius);
  box-shadow: var(--shadow);
}

body[data-page="alliance"] .member-manage-menu .btn { width: 100%; justify-content: flex-start; }

/* Battle Plan: compact editor blocks and stronger primary action. */
body[data-page="alliance"] .fighting-toolbar { gap: 10px; margin-bottom: 14px; }
body[data-page="alliance"] .fighting-toolbar .button-row { gap: 8px; }
body[data-page="alliance"] #publishFighting { box-shadow: 0 10px 24px rgb(95 240 197 / 14%); }
body[data-page="alliance"] #syncAllianceMembers,
body[data-page="alliance"] #addFightingTable { background: transparent; }
body[data-page="alliance"] .fight-card { border-radius: var(--alliance-card-radius); }
body[data-page="alliance"] .fight-card-head { align-items: end; padding: 12px 14px; }
body[data-page="alliance"] .fight-objective {
  padding: 10px 14px;
  background: transparent;
}
body[data-page="alliance"] .fight-table th,
body[data-page="alliance"] .fight-table td { padding: 8px 12px; }
body[data-page="alliance"] .fight-card-foot { padding: 10px 12px; }
body[data-page="alliance"] .fighter-picker { gap: 7px; }
body[data-page="alliance"] .published-meta { margin-bottom: 10px; }
body[data-page="alliance"] .published-table h3 { padding: 12px 14px; font-size: 18px; }
body[data-page="alliance"] .published-objective { padding: 9px 14px; }
body[data-page="alliance"] .battle-access-panel { margin-block: 12px; padding: 12px 14px; }

/* Prep keeps the product shell but uses orange for its workflow actions. */
body[data-page="prep"] .prep-heading { margin-bottom: 12px; }
body[data-page="prep"] .prep-entry-card {
  min-height: 0;
  padding: clamp(17px, 1.45vw, 25px);
}
body[data-page="prep"] .prep-entry-card p { margin: 0; }
body[data-page="prep"] .prep-entry-card label { margin: 0 0 12px; }
body[data-page="prep"] .prep-entry-card .wide { margin-top: auto; }
body[data-page="prep"] .prep-entry { gap: 14px; }
body[data-page="prep"] .eyebrow { color: var(--prep-accent-soft); }
body[data-page="prep"] .button-primary {
  color: #160900;
  background: var(--prep-accent);
  border-color: var(--prep-accent-soft);
}
body[data-page="prep"] .button-primary:hover { background: #ff8126; }
body[data-page="prep"] .button-secondary {
  color: var(--ink);
  background: rgb(124 58 237 / 10%);
  border-color: var(--line-light);
}
body[data-page="prep"] .prep-form-grid { gap: 12px; margin-block: 14px; }
body[data-page="prep"] .prep-choice-group { padding: 11px; border-radius: var(--alliance-control-radius); }
body[data-page="prep"] .prep-minister-day { padding: 9px; border-radius: var(--alliance-control-radius); }
body[data-page="prep"] .prep-availability,
body[data-page="prep"] .prep-resource-list,
body[data-page="prep"] .prep-assignment-days,
body[data-page="prep"] .prep-responses { gap: 10px; margin-block: 13px; }

@media (max-width: 780px) {
  body[data-page="alliance"] .page-head { align-items: flex-start; }
  body[data-page="alliance"] .stat-grid { grid-template-columns: repeat(3, 1fr); }
  body[data-page="alliance"] .event-card { grid-template-columns: 1fr; }
  body[data-page="alliance"] .reminder-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  body[data-page="alliance"] .reminder-select { margin-top: 0; }
}

@media (max-width: 560px) {
  :root { --alliance-page-gutter: 16px; }

  body[data-page="alliance"] main,
  body[data-page="prep"] .prep-shell { padding-top: 16px; }

  body[data-page="alliance"] .module-nav .nav-btn,
  body[data-page="prep"] .prep-module-nav .nav-btn {
    min-height: 46px;
    padding-inline: 12px;
    font-size: 11px;
  }

  body[data-page="alliance"] .panel,
  body[data-page="alliance"] .brand-card,
  body[data-page="alliance"] .brand-card.alt,
  body[data-page="prep"] .panel { padding: 16px; border-radius: var(--alliance-card-radius); }

  body[data-page="alliance"] .page-head { margin-bottom: 14px; }
  body[data-page="alliance"] .lead { margin-top: 7px; }
  body[data-page="alliance"] .role-box { margin-top: -2px; }
  body[data-page="alliance"] .stat { padding-inline: 10px; }
  body[data-page="alliance"] .stat strong { font-size: 18px; }
  body[data-page="alliance"] .event-card { padding: 14px; }
  body[data-page="alliance"] .event-image { width: 58px; height: 58px; flex-basis: 58px; }

  body[data-page="alliance"] .fighting-toolbar .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-page="alliance"] #publishFighting {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body[data-page="alliance"] #hideFighting { grid-column: 1 / -1; }
  body[data-page="alliance"] .fight-card-head { align-items: stretch; flex-direction: column; }
  body[data-page="alliance"] .fight-card-head > .btn { width: 100%; }
  body[data-page="alliance"] .fighter-picker { grid-template-columns: 1fr; }

  body[data-page="prep"] .prep-entry { grid-template-columns: 1fr; gap: 14px; }
  body[data-page="prep"] .prep-entry-card { padding: 18px; }
  body[data-page="prep"] .prep-entry-card h2 { font-size: 22px; }
}

@media (max-width: 390px) {
  body[data-page="alliance"] .module-nav .nav-btn,
  body[data-page="prep"] .prep-module-nav .nav-btn { padding-inline: 10px; font-size: 10.5px; }
  body[data-page="alliance"] .reminder-box { grid-template-columns: 1fr; gap: 8px; }
  body[data-page="alliance"] .member-row { grid-template-columns: auto minmax(0, 1fr); }
  body[data-page="alliance"] .member-actions {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }
  body[data-page="alliance"] .member-manage-menu { right: auto; left: 0; }
}

/* Keep the targeted skins last in the cascade. */
body[data-page="alliance"] :is(.reminder-select, #fightingMode, .fighter-picker select, select[data-fight-object]) {
  width: 100%;
  min-height: 56px;
  padding: 12px 46px 12px 14px;
  color: #f7f4ff;
  color-scheme: dark;
  appearance: none;
  background-color: #100d19;
  background-image: linear-gradient(45deg, transparent 50%, #b9b2c8 50%), linear-gradient(135deg, #b9b2c8 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  border: 1px solid rgb(169 121 255 / 38%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: 700 15px/1.25 "Segoe UI", system-ui, sans-serif;
}

body[data-page="alliance"] :is(#fightingMode, select[data-fight-object]) {
  border-color: rgb(246 198 107 / 42%);
}

body[data-page="alliance"] :is(.reminder-select, #fightingMode, .fighter-picker select, select[data-fight-object]) option {
  padding: 12px 14px;
  color: #f7f4ff;
  color-scheme: dark;
  background: #171321;
}

body[data-page="prep"] input[data-prep-deadline] {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  color: #f7f4ff;
  color-scheme: dark;
  accent-color: #f96d00;
  background: #100d19;
  border: 1px solid rgb(249 109 0 / 52%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  font: 700 15px/1.25 "Segoe UI", system-ui, sans-serif;
}