/* Aniimo status pages. Sits on top of shared.css, which supplies the page
   background, the header/footer and the type. Only what these two pages need. */

.an-wrap { max-width: 1060px; margin: 0 auto; padding: 2rem 1rem 3rem; }

.an-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.an-title { font-size: 2rem; margin: 0 0 .35rem; letter-spacing: .5px; }
.an-sub { margin: 0; color: var(--text-muted, #9aa0a6); font-size: .92rem; max-width: 62ch; line-height: 1.5; }
.an-updates-link { color: #e23b3f; text-decoration: none; font-weight: 600; white-space: nowrap; padding-top: .4rem; }
.an-updates-link:hover { text-decoration: underline; }

/* The one-line verdict */
.an-banner { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-radius: 12px; font-weight: 600;
             border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); margin-bottom: 1.25rem; }
.an-banner-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; flex: none; }
.an-banner.ok      { border-color: rgba(34,197,94,.35);  background: rgba(34,197,94,.08); }
.an-banner.ok .an-banner-dot { background: #22c55e; }
.an-banner.warn    { border-color: rgba(255,165,0,.35);  background: rgba(255,165,0,.08); }
.an-banner.warn .an-banner-dot { background: #ffa500; }
.an-banner.loading .an-banner-dot { animation: an-pulse 1.4s ease-in-out infinite; }
@keyframes an-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Maintenance notice */
.an-maint { border: 1px solid rgba(255,165,0,.35); background: rgba(255,165,0,.07); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.an-maint-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.an-maint-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #ffa500;
                border: 1px solid rgba(255,165,0,.4); border-radius: 999px; padding: .15rem .55rem; }
.an-maint-title { color: inherit; font-weight: 600; text-decoration: none; }
.an-maint-title:hover { text-decoration: underline; }
.an-maint-when { margin: .5rem 0 0; color: var(--text-muted, #9aa0a6); font-size: .88rem; }

.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }

.an-card { border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); border-radius: 12px; padding: 1.1rem; margin-bottom: 1rem; }
.an-card-title { font-size: 1rem; margin: 0 0 .5rem; }
.an-note { color: var(--text-muted, #9aa0a6); font-size: .82rem; line-height: 1.5; margin: .35rem 0 0; }

.an-big { font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.an-chart { margin: .9rem 0 .4rem; }
.an-chart svg { width: 100%; height: 140px; display: block; }
.an-stats { display: flex; gap: 1.25rem; font-size: .85rem; color: var(--text-muted, #9aa0a6); }
.an-stats b { color: inherit; filter: brightness(1.6); }

/* Reporting */
.an-report-box { margin: .75rem 0 1rem; }
.an-label { display: block; font-size: .85rem; margin-bottom: .4rem; }
.an-report-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.an-select { flex: 1 1 160px; background: rgba(0,0,0,.35); color: inherit; border: 1px solid rgba(255,255,255,.12);
             border-radius: 8px; padding: .55rem .6rem; font: inherit; }
.an-btn { background: #a50f12; color: #fff; border: 0; border-radius: 8px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.an-btn:hover { background: #c21418; }
.an-btn:disabled { opacity: .55; cursor: default; }
.an-report-msg { margin: .5rem 0 0; font-size: .85rem; color: #22c55e; min-height: 1.1em; }

.an-region { display: grid; grid-template-columns: 8rem 1fr 2.5rem; align-items: center; gap: .6rem; margin: .35rem 0; font-size: .85rem; }
.an-region-name { color: var(--text-muted, #9aa0a6); }
.an-region-bar { background: rgba(255,255,255,.07); border-radius: 999px; height: 8px; overflow: hidden; }
.an-region-bar i { display: block; height: 100%; background: #e23b3f; }
.an-region-n { text-align: right; font-variant-numeric: tabular-nums; }

/* Their services */
.an-hosts { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.an-host { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.an-host-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.an-host-dot.ok { background: #22c55e; }
.an-host-dot.bad { background: #ed4245; }
.an-host-name { flex: 1; }
.an-host-meta { color: var(--text-muted, #9aa0a6); font-variant-numeric: tabular-nums; }

/* Latest update block */
.an-update-title { display: block; font-weight: 600; color: inherit; text-decoration: none; margin-top: .2rem; }
.an-update-title:hover { text-decoration: underline; }
.an-update-date { color: var(--text-muted, #9aa0a6); font-size: .8rem; margin: .25rem 0 .6rem; }
.an-update-body { font-size: .9rem; line-height: 1.6; margin: 0 0 .7rem; white-space: pre-wrap; }
.an-more { color: #e23b3f; text-decoration: none; font-weight: 600; font-size: .88rem; }
.an-more:hover { text-decoration: underline; }

/* Updates page */
.an-filters { display: flex; gap: .5rem; margin-bottom: 1rem; }
.an-filter { background: rgba(255,255,255,.04); color: inherit; border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
             padding: .4rem .9rem; font: inherit; font-size: .85rem; cursor: pointer; }
.an-filter.active { background: rgba(165,15,18,.25); border-color: rgba(165,15,18,.5); }
.an-list { display: flex; flex-direction: column; gap: .75rem; }
.an-post { border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); border-radius: 12px; padding: 1rem 1.1rem; }
.an-post.maint { border-color: rgba(255,165,0,.3); }
.an-post-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.an-post-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-radius: 999px;
               padding: .12rem .5rem; border: 1px solid rgba(34,197,94,.4); color: #22c55e; }
.an-post-tag.maint { border-color: rgba(255,165,0,.45); color: #ffa500; }
.an-post-tag.other { border-color: rgba(255,255,255,.18); color: var(--text-muted, #9aa0a6); }
.an-post-date { color: var(--text-muted, #9aa0a6); font-size: .8rem; margin-left: auto; }
.an-post-title { display: block; font-weight: 600; color: inherit; text-decoration: none; margin-bottom: .3rem; }
.an-post-title:hover { text-decoration: underline; }
.an-post-window { color: #ffa500; font-size: .82rem; margin: .1rem 0 .45rem; }
.an-post-body { font-size: .88rem; line-height: 1.6; margin: 0; color: var(--text-muted, #c9ced4); white-space: pre-wrap; }

.an-foot { color: var(--text-muted, #9aa0a6); font-size: .78rem; margin-top: 1.25rem; text-align: center; }

@media (max-width: 640px) {
    .an-wrap { padding: 1.25rem .75rem 2rem; }
    .an-title { font-size: 1.5rem; }
    .an-big { font-size: 2rem; }
    .an-region { grid-template-columns: 6.5rem 1fr 2rem; }
    .an-post-date { margin-left: 0; width: 100%; }
}