/* Compact public trigger-action presentation.
 * Public state uses the real configured action count only. Sensitive action details stay sealed.
 */

#secretActionSequence.official-actions-shell{
  --directive-blue:#61b9ff;
  --directive-blue-bright:#9bd7ff;
  --directive-red:#ff6673;
  --directive-red-bright:#ff919a;
  position:relative;
  isolation:isolate;
  margin:10px 0 16px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(97,185,255,.28);
  border-radius:16px;
  background:
    radial-gradient(circle at 88% -20%,rgba(97,185,255,.10),transparent 34%),
    radial-gradient(circle at 5% 0,rgba(255,102,115,.045),transparent 25%),
    linear-gradient(180deg,rgba(12,18,26,.99),rgba(6,10,15,.99));
  box-shadow:0 22px 56px rgba(0,0,0,.29),inset 0 1px 0 rgba(255,255,255,.04);
}

#secretActionSequence.official-actions-shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(97,185,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(97,185,255,.014) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg,#000,transparent 90%);
}

#secretActionSequence.official-actions-shell::after{
  content:"";
  position:absolute;
  top:0;
  left:16px;
  right:16px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,102,115,.72),rgba(97,185,255,.82),rgba(97,185,255,.14),transparent);
  box-shadow:0 0 14px rgba(97,185,255,.28);
}

.official-sequence-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:17px 18px 14px;
  border-bottom:1px solid rgba(130,163,197,.11);
}

.official-sequence-title>small{
  display:block;
  color:var(--directive-blue-bright);
  font-size:7px;
  font-weight:900;
  letter-spacing:.17em;
}

.official-sequence-title h2{
  margin:5px 0 4px;
  color:var(--text);
  font-size:22px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.official-sequence-title p{
  max-width:550px;
  margin:0;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

.official-sequence-status{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.official-sequence-count,
.official-integrity{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:27px;
  padding:0 9px;
  border-radius:7px;
  font-size:6px;
  font-weight:900;
  letter-spacing:.11em;
  white-space:nowrap;
}

.official-sequence-count{
  border:1px solid rgba(255,102,115,.31);
  background:linear-gradient(180deg,rgba(255,102,115,.085),rgba(255,102,115,.025));
  color:var(--directive-red-bright);
}
.official-sequence-count b{
  display:grid;
  width:16px;
  height:16px;
  place-items:center;
  border:1px solid rgba(255,102,115,.34);
  border-radius:50%;
  font-size:8px;
}

.official-integrity{min-height:22px;color:#8fa5bb}
.official-integrity i,
.official-directive-status i,
.official-package-footer i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.official-integrity[data-link="live"]{color:#72d9b7}
.official-integrity[data-link="limited"],.official-integrity[data-link="connecting"]{color:#79b8ff}
.official-integrity[data-link="offline"]{color:#ff8b96}

.official-alert-strip{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin:0 14px;
  padding:9px 11px;
  border:1px solid rgba(255,102,115,.20);
  border-left:3px solid rgba(255,102,115,.74);
  border-radius:9px;
  background:linear-gradient(90deg,rgba(255,102,115,.055),rgba(255,102,115,.014) 42%,rgba(97,185,255,.018));
}
.official-alert-symbol{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border:1px solid rgba(255,102,115,.34);
  border-radius:8px;
  background:rgba(255,102,115,.055);
  color:var(--directive-red-bright);
  font-size:15px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.official-alert-strip>span:nth-child(2){display:grid;gap:2px}
.official-alert-strip strong{color:#f2dadd;font-size:8px;font-weight:900;letter-spacing:.09em}
.official-alert-strip small{color:#8d7b80;font-size:7px;line-height:1.35}
.official-alert-strip>b{color:#ff9ca4;font-size:15px;letter-spacing:.06em}

.official-directive-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:8px;
  padding:11px 14px 13px;
}

.official-directive-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(97,185,255,.19);
  border-left:3px solid rgba(255,102,115,.58);
  border-radius:10px;
  background:
    radial-gradient(circle at 100% 0,rgba(97,185,255,.045),transparent 34%),
    linear-gradient(145deg,rgba(15,22,31,.98),rgba(8,13,19,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),0 7px 17px rgba(0,0,0,.14);
  transition:border-color 150ms ease,box-shadow 150ms ease,background 150ms ease;
}
.official-directive-card::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:18px;
  height:18px;
  border-top:1px solid rgba(255,102,115,.64);
  border-right:1px solid rgba(255,102,115,.64);
  pointer-events:none;
}
.official-directive-card:hover,
.official-directive-card:focus-within{
  border-color:rgba(255,102,115,.35);
  border-left-color:rgba(255,102,115,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 2px rgba(255,102,115,.035),0 9px 22px rgba(0,0,0,.18);
}
.official-directive-card.is-expanded{
  border-color:rgba(97,185,255,.28);
  border-left-color:var(--directive-red);
  background:
    radial-gradient(circle at 100% 0,rgba(97,185,255,.06),transparent 34%),
    linear-gradient(145deg,rgba(16,24,34,.99),rgba(8,13,19,.99));
}

.official-directive-toggle{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 22px;
  gap:9px;
  align-items:center;
  width:100%;
  min-height:78px;
  padding:10px 10px 10px 11px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.official-directive-toggle:focus-visible{outline:2px solid rgba(97,185,255,.62);outline-offset:-2px}

.official-alert-mark{
  display:grid;
  width:31px;
  height:31px;
  place-items:center;
  border:1px solid rgba(255,102,115,.34);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,102,115,.075),rgba(255,102,115,.025));
  color:#ff8e98;
  font-size:15px;
  font-weight:900;
  box-shadow:0 0 14px rgba(255,102,115,.055);
}

.official-directive-summary{display:grid;gap:3px;min-width:0}
.official-directive-summary small{color:#71859a;font-size:6px;font-weight:900;letter-spacing:.12em}
.official-directive-summary strong{overflow:hidden;color:#e6f1fa;font-size:10px;font-weight:850;letter-spacing:.035em;text-overflow:ellipsis;white-space:nowrap}
.official-directive-summary em{color:#9a6d74;font-size:6px;font-style:normal;font-weight:850;letter-spacing:.08em}

.official-directive-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  padding:0 8px;
  border:1px solid rgba(97,185,255,.22);
  border-radius:6px;
  background:rgba(97,185,255,.035);
  color:#8fd0ff;
  font-size:6px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.1em;
}

.official-expand-cue{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  color:#7f94a9;
  font-size:16px;
  transform:rotate(0deg);
  transition:transform 150ms ease,color 150ms ease;
}
.official-directive-card.is-expanded .official-expand-cue{color:#a9dbff;transform:rotate(180deg)}

.official-directive-details{
  padding:0 11px 11px;
  border-top:1px solid rgba(130,163,197,.10);
}
.official-directive-details[hidden]{display:none!important}

.official-danger-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0 8px;
}
.official-danger-line>span{display:flex;align-items:center;gap:7px}
.official-danger-line b{
  display:grid;
  width:19px;
  height:19px;
  place-items:center;
  border:1px solid rgba(255,102,115,.3);
  border-radius:50%;
  color:#ff8e98;
  font-size:9px;
}
.official-danger-line strong{color:#d8a0a6;font-size:6px;font-weight:900;letter-spacing:.11em}
.official-danger-line small{color:#73869a;font-size:6px;letter-spacing:.07em}

.official-execution-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:8px 9px;
  border:1px solid rgba(97,185,255,.13);
  border-radius:8px;
  background:linear-gradient(90deg,rgba(97,185,255,.028),rgba(0,0,0,.08));
}
.official-execution-field>div{display:grid;gap:6px;min-width:0;flex:1}
.official-execution-field small{color:#71859a;font-size:6px;font-weight:850;letter-spacing:.11em}
.official-execution-field>span{color:#8fd0ff;font-size:6px;font-weight:900;letter-spacing:.11em;white-space:nowrap}

.official-redaction{
  display:block;
  width:72%;
  max-width:220px;
  height:7px;
  border-radius:2px;
  background:linear-gradient(90deg,#293846 0 14%,#182634 14% 28%,#334758 28% 48%,#1b2a37 48% 68%,#2b3e4e 68% 100%);
  box-shadow:inset 0 0 0 1px rgba(143,208,255,.035);
  opacity:.88;
}
.official-redaction.short{width:58%}
.official-redaction.medium{width:68%}
.official-redaction.long{width:84%}

.official-directive-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-top:6px;
}
.official-directive-fields>span{
  display:grid;
  gap:6px;
  min-width:0;
  min-height:47px;
  padding:8px;
  border:1px solid rgba(130,163,197,.085);
  border-radius:7px;
  background:rgba(255,255,255,.009);
}
.official-directive-fields small{color:#71859a;font-size:5px;font-weight:850;letter-spacing:.1em}

.official-directive-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(130,163,197,.085);
}
.official-directive-foot>span{color:#6f8397;font-size:5px;font-weight:800;letter-spacing:.075em}
.official-directive-foot>b{color:#7eabcf;font-size:5px;font-weight:900;letter-spacing:.08em;white-space:nowrap}

.official-action-pending{
  grid-column:1/-1;
  display:grid;
  place-items:center;
  min-height:110px;
  padding:20px;
  border:1px solid rgba(97,185,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.01);
  text-align:center;
}
.official-action-pending>div{display:grid;gap:6px;justify-items:center}
.official-action-pending i{width:7px;height:7px;border-radius:50%;background:#79b8ff;box-shadow:0 0 13px rgba(121,184,255,.5)}
.official-action-pending strong{font-size:8px;letter-spacing:.11em}
.official-action-pending small{max-width:420px;color:var(--muted);font-size:8px;line-height:1.45}

.official-package-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 14px 12px;
  border-top:1px solid rgba(130,163,197,.11);
  background:linear-gradient(90deg,rgba(97,185,255,.026),transparent 58%);
}
.official-package-footer>span{
  display:grid;
  grid-template-columns:8px 1fr;
  gap:2px 8px;
  align-items:center;
}
.official-package-footer i{grid-row:1/3;color:#79b8ff}
.official-package-footer strong{color:#d9e7f3;font-size:7px;font-weight:900;letter-spacing:.1em}
.official-package-footer small{color:#71859a;font-size:6px;line-height:1.4}
.official-package-footer button{
  min-height:34px;
  padding:0 11px;
  border:1px solid rgba(97,185,255,.3);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(97,185,255,.085),rgba(97,185,255,.025));
  color:#a9dbff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.055em;
  white-space:nowrap;
}
.official-package-footer button:hover,
.official-package-footer button:focus-visible{border-color:rgba(97,185,255,.7);box-shadow:0 0 0 3px rgba(97,185,255,.07);outline:none}

body[data-switch-state="soon"] .official-alert-strip,
body[data-switch-state="grace"] .official-alert-strip{
  border-color:rgba(255,102,115,.31);
  background:linear-gradient(90deg,rgba(255,102,115,.075),rgba(255,102,115,.018) 48%,rgba(97,185,255,.015));
}
body[data-switch-state="triggered"] .official-alert-strip{
  border-color:rgba(255,102,115,.55);
  border-left-color:#ff6673;
  background:linear-gradient(90deg,rgba(255,102,115,.12),rgba(255,102,115,.028) 52%,rgba(97,185,255,.012));
  box-shadow:0 0 20px rgba(255,102,115,.06);
}
body[data-switch-state="triggered"] .official-directive-card{
  border-color:rgba(255,102,115,.35);
  border-left-color:#ff6673;
}
body[data-switch-state="triggered"] .official-directive-status{
  border-color:rgba(255,102,115,.3);
  background:rgba(255,102,115,.055);
  color:#ff939c;
}
body[data-switch-state="triggered"] .official-alert-mark{box-shadow:0 0 18px rgba(255,102,115,.13)}

body.operator-unlocked #secretActionSequence.official-actions-shell{display:none!important}

html[data-theme="light"] #secretActionSequence.official-actions-shell{
  border-color:rgba(53,117,177,.23);
  background:radial-gradient(circle at 86% -12%,rgba(61,133,201,.075),transparent 34%),radial-gradient(circle at 5% 0,rgba(206,65,79,.035),transparent 24%),linear-gradient(180deg,#fff,#f5f9fd);
  box-shadow:0 18px 42px rgba(43,76,108,.10),inset 0 1px 0 #fff;
}
html[data-theme="light"] .official-alert-strip{
  border-color:rgba(190,61,75,.18);
  border-left-color:rgba(190,61,75,.58);
  background:linear-gradient(90deg,rgba(190,61,75,.045),rgba(255,255,255,.45));
}
html[data-theme="light"] .official-alert-strip strong{color:#7c3038}
html[data-theme="light"] .official-alert-strip small{color:#8a6770}
html[data-theme="light"] .official-directive-card{
  border-color:rgba(53,117,177,.18);
  border-left-color:rgba(190,61,75,.48);
  background:radial-gradient(circle at 100% 0,rgba(61,133,201,.045),transparent 32%),linear-gradient(145deg,#fff,#f6f9fc);
  box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(44,76,106,.065);
}
html[data-theme="light"] .official-directive-summary strong,
html[data-theme="light"] .official-sequence-title h2{color:#14283b}
html[data-theme="light"] .official-directive-summary em{color:#a25e67}
html[data-theme="light"] .official-execution-field{background:linear-gradient(90deg,rgba(61,133,201,.035),rgba(244,248,252,.78))}
html[data-theme="light"] .official-directive-fields>span{background:rgba(238,245,251,.58)}
html[data-theme="light"] .official-redaction{background:linear-gradient(90deg,#b8c8d6 0 14%,#d5e0e9 14% 28%,#aabfce 28% 48%,#cbd9e3 48% 68%,#b4c7d4 68% 100%)}
html[data-theme="light"] .official-package-footer strong{color:#263d52}

@media(max-width:820px){
  .official-sequence-head{align-items:stretch;flex-direction:column;gap:9px}
  .official-sequence-status{align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .official-directive-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  #secretActionSequence.official-actions-shell{border-radius:14px}
  .official-sequence-head{padding:14px 12px 11px}
  .official-sequence-title h2{font-size:20px}
  .official-sequence-title p{font-size:8px}
  .official-alert-strip{grid-template-columns:30px minmax(0,1fr) auto;margin:0 9px;padding:8px 9px}
  .official-alert-symbol{width:27px;height:27px;font-size:13px}
  .official-directive-grid{grid-template-columns:1fr;padding:9px 9px 11px}
  .official-directive-toggle{grid-template-columns:32px minmax(0,1fr) auto 20px;min-height:72px;padding:9px 8px 9px 9px}
  .official-alert-mark{width:29px;height:29px;font-size:13px}
  .official-directive-details{padding:0 9px 9px}
  .official-package-footer{align-items:stretch;flex-direction:column;padding:10px 10px 11px}
  .official-package-footer button{width:100%}
}

@media(max-width:420px){
  .official-directive-toggle{grid-template-columns:31px minmax(0,1fr) 20px}
  .official-directive-status{grid-column:2;grid-row:2;width:max-content;margin-top:2px}
  .official-expand-cue{grid-column:3;grid-row:1/3}
  .official-directive-summary strong{font-size:9px}
  .official-directive-fields{grid-template-columns:1fr 1fr}
  .official-danger-line{align-items:flex-start;flex-direction:column;gap:5px}
  .official-directive-foot{align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .official-directive-card,.official-expand-cue{transition:none}
}
