/* Night Compact v213 — visual hierarchy and compact equipment correction.
   Layout only: no controls, state, costs, or game rules are changed here. */

/* -------------------------------------------------------------------------
   Equipment identity
   ------------------------------------------------------------------------- */

/* Equipment pickers keep the readable V212 identity, but no picker tile is
   allowed to impose the old 132px minimum on the row that contains it. */
.equipment-slot-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}

.equipment-slot-grid .equipment-slot.equipment-tile {
  min-height: 108px !important;
  padding: 8px !important;
}

.equipment-slot-grid .equipment-identity {
  grid-template-rows: auto auto minmax(44px, 1fr);
  gap: 3px;
}

.equipment-slot-grid .equipment-name {
  min-height: 0;
  font-size: 12px;
  line-height: 1.18;
}

.equipment-slot-grid .equipment-picture {
  width: 48px;
  height: 48px;
  margin-top: 2px;
}

.equipment-slot-grid .equipment-picture svg {
  width: 31px;
  height: 31px;
}

/* Watcher-Born, Wicker, Warlock, and Human Hybrid. The class accent on the
   operative workspace gives this correction a stable boundary and leaves the
   two Nightbound sheets on their existing compact template. */
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-line:not(.nightbound-quick-loadout) {
  grid-template-areas: "weapon armour inventory crystal";
  grid-template-columns:
    minmax(322px, 1.25fr)
    minmax(118px, .5fr)
    minmax(275px, 1.5fr)
    minmax(135px, .65fr) !important;
  align-items: stretch !important;
  gap: 7px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-line .tile-weapon {
  grid-area: weapon;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-line .tile-armour {
  grid-area: armour;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-line .tile-inventory {
  grid-area: inventory;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-line .tile-crystal {
  grid-area: crystal;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-line .quick-tile-frame,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-line .quick-tile-frame > * {
  min-height: 108px !important;
  height: 108px;
}

/* Weapon is explicitly three parts: identity, variant/ammunition, and USE.
   This prevents the action from ever becoming an implicit second-row cell. */
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-slot.has-action {
  grid-template-columns: minmax(145px, 1fr) minmax(108px, .68fr) 68px !important;
  grid-template-rows: 108px;
  min-height: 108px !important;
  overflow: hidden;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-slot:not(.has-action) {
  grid-template-columns: minmax(145px, 1fr) minmax(108px, .68fr) !important;
  grid-template-rows: 108px;
  min-height: 108px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-main,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-slot.equipment-tile {
  min-height: 0 !important;
  height: 108px;
  padding: 8px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-main .equipment-identity,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-slot .equipment-identity {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(26px, auto) minmax(44px, 1fr);
  align-content: start;
  gap: 3px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-main .equipment-name,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-slot .equipment-name {
  min-height: 0;
  font-size: 12px;
  line-height: 1.15;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-main .equipment-picture,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-slot .equipment-picture {
  width: 48px;
  height: 48px;
  margin-top: 0;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-main .equipment-picture svg,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-loadout-slot .equipment-picture svg {
  width: 32px;
  height: 32px;
}

/* Variant and ammunition share the same fixed-height weapon row. Their icon
   and text are compact, but neither name is ellipsised into illegibility. */
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 108px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details > button.equipment-tile {
  min-height: 0 !important;
  height: auto;
  padding: 5px 6px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details .equipment-identity {
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 6px;
  row-gap: 1px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details .equipment-picture {
  grid-area: 1 / 1 / 3 / 2;
  width: 27px;
  height: 27px;
  margin: 0;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details .equipment-picture svg {
  width: 18px;
  height: 18px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details .equipment-kicker,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details .equipment-name {
  grid-column: 2;
  min-height: 0;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-details .equipment-name {
  font-size: 9px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-use {
  grid-column: 3;
  align-self: stretch;
  min-width: 0;
  min-height: 108px;
  padding: 7px 5px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-weapon-use > span {
  max-width: 62px;
  color: #f5f2e9;
  font-size: 8px;
  line-height: 1.2;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-inventory-slot {
  min-height: 108px;
  height: 108px;
  padding: 7px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-inventory-slot > div {
  gap: 3px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-inventory-slot button {
  height: 38px;
  min-height: 38px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-inventory-slot svg {
  width: 22px !important;
  height: 22px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .character-sheet-panel .quick-awe-combine-trigger {
  grid-column: 4;
}

/* -------------------------------------------------------------------------
   Field Link equipment boundary
   ------------------------------------------------------------------------- */

/* Field Link owns its own measurements. Full-sheet tile minimums can no
   longer leak into this panel through the shared equipment component. */
.mini-phone-sheet.field-link-panel {
  container-name: field-link-v213;
  container-type: inline-size;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-phone-loadout,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-phone-loadout.with-activation {
  grid-template-columns:
    minmax(292px, 2fr)
    minmax(105px, .72fr)
    minmax(105px, .72fr)
    minmax(96px, .58fr) !important;
  align-items: stretch;
  gap: 5px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-phone-loadout.no-crystal-slot.has-ritual,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-phone-loadout.no-ritual.has-crystal-slot {
  grid-template-columns: minmax(292px, 2fr) minmax(108px, .72fr) minmax(96px, .58fr) !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-phone-loadout.no-crystal-slot.no-ritual {
  grid-template-columns: minmax(292px, 1fr) minmax(96px, .3fr) !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-phone-loadout:not(.with-activation) {
  grid-template-columns: minmax(292px, 2fr) minmax(108px, .72fr) minmax(108px, .72fr) !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-phone-loadout.no-crystal-slot.no-ritual:not(.with-activation) {
  grid-template-columns: minmax(0, 1fr) !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-slot.has-action {
  grid-template-columns: minmax(145px, 1fr) minmax(88px, .58fr) 58px !important;
  grid-template-rows: 88px;
  min-height: 88px !important;
  height: 88px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-slot:not(.has-action) {
  grid-template-columns: minmax(145px, 1fr) minmax(88px, .58fr) !important;
  grid-template-rows: 88px;
  min-height: 88px !important;
  height: 88px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-main {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 88px;
  padding: 6px 7px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-main .equipment-identity {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(22px, auto) minmax(36px, 1fr);
  align-content: start;
  gap: 2px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-main .equipment-name {
  min-height: 0;
  font-size: 11px !important;
  line-height: 1.08 !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-main .equipment-picture {
  width: 38px;
  height: 38px;
  margin: 0;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-main .equipment-picture svg {
  width: 27px;
  height: 27px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 88px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details > button.equipment-tile {
  min-height: 0 !important;
  height: auto;
  padding: 4px 5px !important;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details .equipment-identity {
  grid-template-columns: 23px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 4px;
  row-gap: 0;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details .equipment-picture {
  grid-area: 1 / 1 / 3 / 2;
  width: 22px;
  height: 22px;
  margin: 0;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details .equipment-picture svg {
  width: 14px;
  height: 14px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details .equipment-kicker,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details .equipment-name {
  grid-column: 2;
  min-height: 0;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-details .equipment-name {
  font-size: 8px !important;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-use {
  grid-column: 3;
  align-self: stretch;
  min-height: 88px;
  padding: 5px 3px;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .quick-weapon-use > span {
  color: #f5f2e9;
  font-size: 7px;
  line-height: 1.15;
}

:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-crystal,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-ritual-quick,
:where(
  .workspace[data-accent="cyan"],
  .workspace[data-accent="amber"],
  .workspace[data-accent="orange"],
  .workspace[data-accent="violet"]
) .mini-phone-sheet .mini-end-activation {
  min-height: 88px !important;
  height: 88px;
}

@container field-link-v213 (max-width: 620px) {
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .mini-phone-loadout,
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .mini-phone-loadout.with-activation,
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .mini-phone-loadout:not(.with-activation) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .mini-phone-loadout > .quick-weapon-slot {
    grid-column: 1 / -1;
  }
}

@container field-link-v213 (max-width: 430px) {
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .mini-phone-loadout,
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .mini-phone-loadout.with-activation,
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .mini-phone-loadout:not(.with-activation) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* On narrow phones the weapon remains one readable control: identity above
   details, with USE kept in a fixed right-hand rail. Nothing is clipped. */
@container field-link-v213 (max-width: 350px) {
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .quick-weapon-slot.has-action {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    grid-template-rows: 88px 64px !important;
    min-height: 152px !important;
    height: 152px;
  }

  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .quick-weapon-slot.has-action .quick-weapon-main {
    grid-column: 1;
    grid-row: 1;
  }

  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .quick-weapon-slot.has-action .quick-weapon-details {
    grid-column: 1;
    grid-row: 2;
    height: 64px;
  }

  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .mini-phone-sheet .quick-weapon-slot.has-action .quick-weapon-use {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 152px;
  }
}

/* -------------------------------------------------------------------------
   Safe House optional preparation
   ------------------------------------------------------------------------- */

.optional-preparation-toggle-v213 {
  width: 100%;
  min-height: 58px;
  color: #f1e8f8;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(90deg, #25172f, #0c1113 72%);
  border: 1px solid #795b92;
  border-left: 3px solid #c49ae9;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0 7px;
  padding: 9px 12px;
  display: grid;
}

.optional-preparation-toggle-v213 > svg {
  width: 30px;
  height: 30px;
  color: #d3adf2;
}

.optional-preparation-toggle-v213 > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.optional-preparation-toggle-v213 strong {
  color: #f7f0f9;
  font: 16px/1.1 Georgia, "Times New Roman", serif;
}

.optional-preparation-toggle-v213 small,
.optional-preparation-toggle-v213 > b {
  color: #c1b5c8;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 900;
}

.optional-preparation-toggle-v213:hover,
.optional-preparation-toggle-v213:focus-visible,
.optional-preparation-toggle-v213[aria-expanded="true"] {
  color: #fff;
  background: linear-gradient(90deg, #392047, #11171a 72%);
  border-color: #d3adf2;
}

.optional-preparation-panel-v213 {
  background: linear-gradient(145deg, #17101e, #090d0f 48%);
  border: 1px solid #4e3c5d;
  margin: 0 0 12px;
  padding: 10px;
}

.optional-preparation-panel-v213[hidden] {
  display: none !important;
}

.night-ready-panel > footer .optional-preparation-toggle-v213 {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  display: inline-flex;
  justify-content: center;
}

.optional-preparation-panel-v213 > .safe-house-heading,
.optional-preparation-panel-v213 > .campaign-phase-track,
.optional-preparation-panel-v213 > .safe-house-stat-strip,
.optional-preparation-panel-v213 > .safe-house-ledger-guide {
  display: none !important;
}

.optional-preparation-panel-v213 .optional-preparation-heading {
  border: 0;
  margin: 0 0 7px;
  padding: 0;
}

/* The overview remains visible; deeper instructions open only when needed. */
.rules-task-guides-v213 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.rules-task-guides-v213 details {
  min-width: 0;
  color: #e9f7f8;
  background: linear-gradient(145deg, #0c181b, #090d0f 72%);
  border: 1px solid #36545a;
  border-top: 2px solid #4fd9e8;
}

.rules-task-guides-v213 details[open] {
  background: linear-gradient(145deg, #102328, #090d0f 78%);
  border-color: #6debf7;
  box-shadow: inset 0 0 20px #42d7e80c;
}

.rules-task-guides-v213 summary {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  display: grid;
}

.rules-task-guides-v213 summary::-webkit-details-marker {
  display: none;
}

.rules-task-guides-v213 summary > i {
  width: 28px;
  height: 28px;
  color: #8df3fc;
  background: #09191d;
  border: 1px solid #3da9b5;
  place-items: center;
  font: normal 700 14px/1 Georgia, "Times New Roman", serif;
  display: grid;
}

.rules-task-guides-v213 summary > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.rules-task-guides-v213 summary b {
  color: #f5f1e8;
  font: 500 14px/1.15 Georgia, "Times New Roman", serif;
}

.rules-task-guides-v213 summary small {
  color: #aab9bc;
  font-size: 8px;
  line-height: 1.3;
}

.rules-task-guides-v213 ol {
  counter-reset: rule-step;
  display: grid;
  gap: 6px;
  padding: 0 12px 12px 48px;
}

.rules-task-guides-v213 li {
  counter-increment: rule-step;
  color: #cbd7d9;
  font-size: 10px;
  line-height: 1.45;
}

.rules-task-guides-v213 li::before {
  content: counter(rule-step) ".";
  color: #62e6f2;
  margin-left: -20px;
  margin-right: 7px;
  font-weight: 900;
}

.safe-house-dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px 8px !important;
  margin: 4px 0 8px !important;
}

.safe-house-dashboard > button {
  min-height: 52px !important;
  color: #e5ddec;
  background: #0d1214 !important;
  border: 0 !important;
  border-left: 2px solid #5b476a !important;
  border-bottom: 1px solid #332b39 !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 3px 9px !important;
  padding: 7px 9px !important;
  box-shadow: none !important;
}

.safe-house-dashboard > button > svg {
  grid-row: 1 / 3;
  width: 30px !important;
  height: 30px !important;
  color: #c9a5e8;
}

.safe-house-dashboard > button > span {
  color: #f0e8f4;
  font-size: 11px !important;
  line-height: 1.12 !important;
}

.safe-house-dashboard > button > b {
  color: #aaa0b0;
  text-align: right;
  font-size: 7px !important;
}

.safe-house-dashboard > button:not(:disabled):not(.unavailable):hover,
.safe-house-dashboard > button:not(:disabled):not(.unavailable):focus-visible,
.safe-house-dashboard > button.active {
  color: #fff;
  background: #1a1220 !important;
  border-left-color: #d3adf2 !important;
  border-bottom-color: #80649a !important;
}

.safe-house-dashboard > button.unavailable,
.safe-house-dashboard > button:disabled {
  opacity: .36;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   DM hierarchy
   ------------------------------------------------------------------------- */

.dm-master-page .dm-command-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  background: #0c1113;
  border: 1px solid #44384d;
  border-top: 2px solid #9b72c4;
  margin: 10px 0;
}

.dm-master-page .dm-command-strip article {
  min-width: 0;
  min-height: 48px;
  background: transparent;
  border: 0;
  border-right: 1px solid #332c38;
  padding: 7px 10px;
}

.dm-master-page .dm-command-strip article:last-child {
  border-right: 0;
}

.dm-master-page .dm-command-strip span {
  color: #aaa0b0;
  font-size: 7px;
}

.dm-master-page .dm-command-strip strong {
  color: #f0e9f3;
  margin-top: 3px;
  font-size: 16px;
  line-height: 1;
}

.dm-master-page .dm-command-strip article.burning {
  background: linear-gradient(90deg, #751c3138, transparent);
}

.dm-master-page .dm-control-deck {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  margin: 10px 0;
}

@supports selector(:has(*)) {
  .dm-master-page .dm-control-deck:has(> [data-control="downloads"]) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.dm-master-page .dm-control-deck > button {
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 7px 8px;
}

.dm-master-page .dm-control-deck > button > svg {
  width: 28px;
  height: 28px;
  padding: 5px;
}

.dm-master-page .dm-control-deck > button > span small {
  color: #aaa1b0;
}

.dm-master-page .dm-control-deck > button > span strong {
  color: #f1eaf4;
  font-size: 12px;
}

.dm-master-page .dm-control-deck > button[data-control="field"] {
  min-height: 68px;
  color: #dffcff;
  background: linear-gradient(135deg, #0c2a31, #0c1113 70%);
  border-color: #4bcddd;
  border-top-color: #81f1ff;
  grid-column: span 2;
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.dm-master-page .dm-control-deck > button[data-control="field"] > svg {
  width: 36px;
  height: 36px;
  color: #78ebf8;
  background: #0a1c20;
  border-color: #4bcddd;
}

.dm-master-page .dm-control-deck > button[data-control="field"] > span strong {
  color: #edfeff;
  font-size: 16px;
}

.dm-master-page .dm-control-deck > button[data-control="field"] > b {
  color: #8af4ff;
}

.dm-master-page .dm-control-deck > button[data-tier="private"] {
  min-height: 52px;
  background: #100d13;
  border-top-width: 1px;
}

.dm-master-page .dm-initiative-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 7px;
}

.dm-master-page .dm-initiative-actions button {
  min-height: 40px;
  color: #ecfbfd;
  background: #102127;
  border-color: #4fabb7;
  font-size: 8px;
}

.dm-master-page .dm-phase-mini-grid > section {
  min-height: 0;
  padding: 7px;
}

.dm-master-page .dm-phase-mini-grid > section > small {
  color: #879396;
  margin-top: 7px;
}

/* Phase lanes are combat information. Between combats the Field controls are
   the task, so empty Early/Middle/Late columns consume no space. */
.dm-master-page.field-active-v213 .dm-phase-mini-grid {
  display: none;
}

@supports selector(:has(*)) {
  .dm-master-page .dm-phase-mini-grid > section:has(> small:last-child) {
    min-height: 58px;
  }
}

/* -------------------------------------------------------------------------
   Active-state contrast
   ------------------------------------------------------------------------- */

.quick-loadout-line button:not(:disabled) .equipment-kicker,
.equipment-slot-grid button:not(:disabled) .equipment-kicker,
.mini-phone-sheet button:not(:disabled) > span,
.dm-master-page button:not(:disabled) > span small {
  color: #b7c1c3;
}

.quick-loadout-line button:not(:disabled) .equipment-name,
.equipment-slot-grid button:not(:disabled) .equipment-name {
  color: #f5f1e8;
}

.quick-loadout-line .quick-loadout-slot.empty:not(:disabled),
.quick-loadout-line .quick-weapon-slot.empty,
.equipment-slot-grid .equipment-slot.empty:not(:disabled) {
  opacity: 1;
}

.quick-loadout-line button:disabled,
.equipment-slot-grid button:disabled,
.dm-master-page button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.safe-house-page button:not(:disabled),
.dm-master-page button:not(:disabled),
.equipment-tile:not(.empty) {
  opacity: 1;
}

.equipment-tile:not(.empty) {
  color: #f5f1e8;
}

.safe-house-page button:not(:disabled),
.dm-master-page button:not(:disabled) {
  color: #f1eef0;
}

/* -------------------------------------------------------------------------
   Responsive correction
   ------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .character-sheet-panel .quick-loadout-line:not(.nightbound-quick-loadout) {
    grid-template-areas:
      "weapon weapon"
      "armour crystal"
      "inventory inventory";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .character-sheet-panel .quick-awe-combine-trigger {
    grid-column: 2;
  }

  .dm-master-page .dm-control-deck,
  .dm-master-page .dm-control-deck:has(> [data-control="downloads"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .rules-task-guides-v213 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .safe-house-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dm-master-page .dm-command-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dm-master-page .dm-command-strip article:nth-child(3n) {
    border-right: 0;
  }
}

@media (max-width: 620px) {
  .rules-task-guides-v213 {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .character-sheet-panel .quick-loadout-line:not(.nightbound-quick-loadout) {
    grid-template-areas:
      "weapon"
      "armour"
      "inventory"
      "crystal";
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(
    .workspace[data-accent="cyan"],
    .workspace[data-accent="amber"],
    .workspace[data-accent="orange"],
    .workspace[data-accent="violet"]
  ) .character-sheet-panel .quick-awe-combine-trigger {
    grid-column: 1;
  }

  .safe-house-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dm-master-page .dm-control-deck,
  .dm-master-page .dm-control-deck:has(> [data-control="downloads"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dm-master-page .dm-control-deck > button[data-control="field"] {
    grid-column: 1 / -1;
  }
}