/* V5 operation directives: rotating conditions, unlock tiers, and risk loadouts. */
.operation-layout {
  grid-template-areas:
    "maps summary"
    "leader summary"
    "risk summary"
    "directives summary";
}

.operation-directives { grid-area: directives; }

.operation-daily-condition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  margin-bottom: 9px;
  padding: 9px 11px;
  color: #a9b6b3;
  background: linear-gradient(100deg, rgba(190, 91, 67, .14), #091317 62%);
  border: 1px solid #46565a;
  border-left: 3px solid var(--daily-tone, #d8785d);
}

.operation-daily-condition > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #f6d67c;
  border: 1px solid #8a7445;
  background: #191b17;
  font: 900 1rem ui-monospace, monospace;
  font-style: normal;
}

.operation-daily-condition strong,
.operation-daily-condition small { display: block; }
.operation-daily-condition strong { color: #f0eee4; font: 900 .7rem ui-monospace, monospace; letter-spacing: .07em; }
.operation-daily-condition small { margin-top: 4px; color: #899a97; font: 650 .66rem/1.3 "Segoe UI", sans-serif; }
.operation-daily-condition > span:last-child { color: #d5b762; font: 900 .58rem/1.25 ui-monospace, monospace; text-align: right; letter-spacing: .07em; }

.operation-directive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 8px;
}

.operation-directive-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.operation-directive-tabs button {
  min-width: 45px;
  min-height: 39px;
  padding: 7px 10px;
  color: #839491;
  background: #0b1519;
  border: 1px solid #35454a;
  font: 900 .59rem ui-monospace, monospace;
  letter-spacing: .06em;
  white-space: nowrap;
}

.operation-directive-tabs button[aria-selected="true"] {
  color: #f6d77c;
  background: #222017;
  border-color: #a78645;
  box-shadow: inset 0 -2px #e0b555;
}

.operation-directive-slots {
  flex: 0 0 auto;
  padding: 7px 9px;
  color: #c4d0cb;
  background: #0a1317;
  border: 1px solid #3d4e53;
  font: 900 .6rem ui-monospace, monospace;
  letter-spacing: .07em;
}

.operation-directive-slots b { color: #f2c962; }

.operation-directive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.operation-directive-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 91px;
  padding: 9px;
  text-align: left;
  text-transform: none;
  color: #cad3cf;
  background: linear-gradient(145deg, #111d21, #091115 78%);
  border: 1px solid #3b4c51;
  border-top: 2px solid var(--directive, #6b827e);
}

.operation-directive-card:hover { transform: translateY(-1px); border-color: var(--directive, #788f8a); }
.operation-directive-card[aria-pressed="true"] {
  color: #f4f0e4;
  background: linear-gradient(145deg, color-mix(in srgb, var(--directive, #d4aa53) 19%, #11191d), #0a1114 80%);
  border-color: var(--directive, #d4aa53);
  box-shadow: inset 0 -3px var(--directive, #d4aa53), 0 0 18px color-mix(in srgb, var(--directive, #d4aa53) 16%, transparent);
}

.operation-directive-card.locked { opacity: .55; filter: saturate(.35); }
.operation-directive-card.locked:hover { transform: none; }
.operation-directive-card.featured:after {
  content: "DAILY";
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 2px 4px;
  color: #171710;
  background: #d8b253;
  font: 900 .47rem ui-monospace, monospace;
  letter-spacing: .05em;
}

.directive-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  color: #f7f2df;
  background: color-mix(in srgb, var(--directive, #617b78) 42%, #11191d);
  border: 1px solid var(--directive, #617b78);
  font: 900 .72rem ui-monospace, monospace;
}

.directive-copy { min-width: 0; }
.directive-copy strong { display: block; padding-right: 30px; color: #edf0ea; font: 900 .63rem/1.2 ui-monospace, monospace; letter-spacing: .035em; }
.directive-copy small { display: block; margin-top: 4px; color: #859592; font: 650 .59rem/1.3 "Segoe UI", sans-serif; }
.directive-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.directive-meta span { padding: 2px 4px; color: #b9c5c1; background: #10191d; border: 1px solid #344449; font: 850 .48rem ui-monospace, monospace; }
.directive-meta .risk { color: #f0c56b; }
.directive-empty { grid-column: 1 / -1; padding: 18px; color: #849390; border: 1px dashed #3d4d51; text-align: center; font: 750 .66rem ui-monospace, monospace; }

.operation-directive-note {
  min-height: 18px;
  margin: 7px 0 0;
  color: #899895;
  font: 650 .62rem/1.35 "Segoe UI", sans-serif;
}
.operation-directive-note.bad { color: #ed8a79; }

.operation-modifier-chip.daily { border-color: #816f44; color: #f0cf73; }
.operation-modifier-chip.selected { border-color: #a2694f; color: #f0b196; }

.operation-risk-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px;
  background: #091216;
  border: 1px solid #34454a;
}
.operation-risk-meter span { color: #7f918d; font: 850 .54rem ui-monospace, monospace; letter-spacing: .08em; }
.operation-risk-meter strong { color: var(--risk-color, #d5b45c); font: 900 .62rem ui-monospace, monospace; }
.operation-risk-meter i { grid-column: 1 / -1; display: block; height: 4px; background: #1a282c; overflow: hidden; }
.operation-risk-meter i:after { content: ""; display: block; width: var(--risk-pct, 0%); height: 100%; background: var(--risk-color, #d5b45c); }

@media (max-width: 1050px) {
  .operation-directive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .operation-layout { display: block; }
  .operation-directive-card { min-height: 88px; }
}

@media (max-width: 560px) {
  .operation-directive-toolbar { align-items: stretch; flex-direction: column; }
  .operation-directive-tabs button { min-height: 44px; }
  .operation-directive-slots { align-self: flex-start; }
  .operation-directive-grid { grid-template-columns: 1fr; }
  .operation-directive-card { min-height: 84px; }
  .operation-daily-condition { grid-template-columns: 38px 1fr; }
  .operation-daily-condition > span:last-child { grid-column: 2; text-align: left; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .operation-directive-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .operation-directive-card { min-height: 78px; }
}