/* Page: alerts.html — bulletin board */

.hero--page{
  padding-block:clamp(2rem,5vw,3.5rem) clamp(2rem,4vw,3rem);
}
.page-title{
  font-family:var(--display);
  font-size:clamp(2.4rem, 6vw, 4.8rem);
  line-height:.96;letter-spacing:-.025em;
  font-weight:800;margin:0 0 1.2rem;color:var(--ink);
}
.page-lede{
  font-size:1.12rem;max-width:58ch;
  color:var(--ink-soft);line-height:1.5;margin:0 0 2.5rem;
}

.alerts-summary{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--ink);
  background:var(--white);
}
.sum-card{
  padding:1.1rem 1.2rem;
  border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.3rem;
  position:relative;
}
.sum-card:last-child{border-right:0;background:var(--ink);color:var(--paper)}
.sum-card:last-child .sum-card__k{color:var(--gold)}
.sum-card__k{
  font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--slate);
}
.sum-card__v{
  font-family:var(--display);font-weight:800;
  font-size:2.2rem;line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.sum-card[data-kind="extreme"] .sum-card__v{color:var(--rust-deep)}
.sum-card[data-kind="severe"] .sum-card__v{color:var(--rust)}
.sum-card[data-kind="moderate"] .sum-card__v{color:var(--gold)}
.sum-card[data-kind="minor"] .sum-card__v{color:var(--slate)}

.alerts-board{
  padding-block:clamp(2rem,5vw,4rem);
  background:var(--paper-warm);
  border-top:1px solid var(--rule);
}
.alerts-controls{
  display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;
}
.alerts-controls label{
  display:flex;flex-direction:column;gap:.3rem;
}
.ctrl-label{
  font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);
}
.alerts-controls select{
  font-family:var(--display);font-size:.95rem;
  padding:.55rem .9rem;
  border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);
  border-radius:2px;cursor:pointer;min-width:170px;
}

.alerts-board__list{
  display:flex;flex-direction:column;gap:.8rem;
  margin-top:.5rem;
}
.alerts-board__list details.alert-card{
  display:block;
  padding:0;background:var(--paper);
  border-left:6px solid var(--rust);
  border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transition:transform .15s, box-shadow .15s;
}
.alerts-board__list details.alert-card[open]{
  box-shadow:-3px 4px 0 0 var(--rust);
}
.alerts-board__list details[data-severity="moderate"]{border-left-color:var(--gold)}
.alerts-board__list details[data-severity="moderate"][open]{box-shadow:-3px 4px 0 0 var(--gold)}
.alerts-board__list details[data-severity="minor"]{border-left-color:var(--slate)}
.alerts-board__list details[data-severity="minor"][open]{box-shadow:-3px 4px 0 0 var(--slate)}
.alerts-board__list summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:1.2rem;align-items:center;
  padding:1.2rem 1.5rem;
}
.alerts-board__list summary::-webkit-details-marker{display:none}
.alerts-board__list summary:hover{background:var(--white)}
.alert-card__sev{
  font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--rust);font-weight:700;
  writing-mode:vertical-rl;transform:rotate(180deg);
  padding:.4rem 0;
}
.alerts-board__list details[data-severity="moderate"] .alert-card__sev{color:var(--gold)}
.alerts-board__list details[data-severity="minor"] .alert-card__sev{color:var(--slate)}
.alert-card__body h3{
  font-family:var(--display);font-size:1.2rem;
  font-weight:600;margin:0 0 .25rem;
}
.alert-card__body p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.alert-card__area{
  font-family:var(--mono);font-size:.72rem;
  color:var(--slate);margin-top:.35rem !important;
  text-transform:uppercase;letter-spacing:.1em;
}
.alert-card__time{
  font-family:var(--mono);font-size:.72rem;
  color:var(--slate);text-transform:uppercase;letter-spacing:.1em;
  text-align:right;white-space:nowrap;line-height:1.5;
}
.alert-card__arrow{
  font-family:var(--mono);font-size:1.2rem;color:var(--slate);
  transition:transform .2s var(--ease);
}
.alerts-board__list details[open] .alert-card__arrow{transform:rotate(180deg)}

.alert-card__full{
  padding:0 1.5rem 1.4rem;
  border-top:1px dashed var(--rule);
  margin-top:.2rem;
}
.alert-card__full h4{
  font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--rust);margin:1.2rem 0 .4rem;
}
.alert-card__full p{margin:.3rem 0;font-size:.9rem;line-height:1.5;color:var(--ink)}
.alert-card__full pre{
  font-family:var(--mono);font-size:.8rem;
  white-space:pre-wrap;color:var(--ink-soft);
  margin:.3rem 0;background:var(--paper-warm);
  padding:.8rem;border:1px solid var(--rule);border-radius:2px;
}
.alert-card__meta-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;margin-top:.6rem;
}
.alert-card__meta-grid dt{
  font-family:var(--mono);font-size:.65rem;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--slate);margin:0;
}
.alert-card__meta-grid dd{
  margin:.15rem 0 0;font-size:.9rem;color:var(--ink);
}

.last-updated{
  margin-top:1.5rem;
  font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--slate);
}

.alerts-related{padding-block:clamp(3rem,6vw,5rem)}

@media (max-width:900px){
  .alerts-summary{grid-template-columns:repeat(2,1fr)}
  .sum-card{border-right:0;border-bottom:1px solid var(--rule)}
  .sum-card:last-child{grid-column:span 2}
  .alerts-board__list summary{
    grid-template-columns:auto 1fr auto;
    gap:1rem;padding:1rem 1.2rem;
  }
  .alert-card__time{grid-column:2/-1;text-align:left;font-size:.68rem}
  .alert-card__arrow{display:none}
}