/* FlamingStatus: maps Status's own pages onto tracker-style.css (the fleet Tracker look).
   Loads AFTER tracker-style.css and mobile-nav.css. Only what the kit doesn't already have. */

:root { --maint: #3b82f6; --maint-muted: rgba(59,130,246,.12); }

/* ---- shell ---- */
/* In-page links (/#services, /#incidents, the More sheet) must land BELOW the fixed 64px visitor header and, in
   user view, the ~34px banner under it. (The old inline CSS had this; it was lost in the Tracker restyle.) */
html { scroll-padding-top: 6.5rem; }
/* Embers are motion: no canvas at all when reduced motion is requested (_embers.html doesn't load the script either). */
@media (prefers-reduced-motion: reduce) { #ember-particles { display: none; } }
/* Phones: no ☰ menu in the visitor header (Phil, 2026-09-27). Everything it held is in the bottom bar or
   its More sheet, so the header is just the brand. */
@media (max-width: 768px) { .lk-burger, .lk-menu { display: none !important; } }
/* The landing kit (2026-09-28) now shows Log in beside the menu button on phones. Status keeps Phil's earlier rule for
   this site: on phones, Log in / Dashboard appears ONCE, as the bottom-bar tab (a visible tab, so it isn't "missing"),
   and the header is just the brand. Delete this rule to take the kit behaviour instead. */
@media (max-width: 768px) { .lk-nav-actions { display: none !important; } }
/* The visitor header is the landing kit's fixed 64px nav; the admin's is Tracker's sticky top nav. */
body.has-lk-nav { padding-top: 64px; }
/* The landing kit's .lk carries page-level rules (100vh, its own background). Status wraps only the
   header and footer in it, so the page-level parts are switched off. */
.lk.lk-shell { min-height: 0; background: none; overflow: visible; }
/* An admin in "user view" sees the visitor header + this banner (fleet ADMIN-VIEW-TOGGLE). */
.view-toggle-form { display: contents; }
.view-banner { position: sticky; top: 64px; z-index: 45; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .2rem .4rem;
  padding: .4rem 1rem; font-size: .78rem; color: var(--text-primary); background: rgba(20,14,10,.92);
  border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.view-banner button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; min-height: 0; min-width: 0; }
.view-banner button:hover { text-decoration: underline; }
.lk-btn.view-toggle-btn { border: 1px solid var(--border-input); }
.more-sheet-btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; }
.ud-viewmode { width: 100%; }

/* ---- status board ---- */
.status-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin: 0 .8rem 0 .3rem; vertical-align: middle;
  position: relative; top: -2px; box-shadow: 0 0 0 4px currentColor; animation: status-pulse 2.4s ease-in-out infinite; }
@keyframes status-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.82); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }

.maint-card { border-color: rgba(59,130,246,.35); margin-bottom: 1.5rem; }
.maint-card .mw + .mw { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-subtle); }
.maint-card .mw-title { font-weight: 600; margin-left: .35rem; }
.maint-card .mw-when { font-size: .8rem; color: var(--text-secondary); margin-top: .3rem; }

/* State pills. Kit verdict colours: green = operational, amber = caution (degraded), grey = no data.
   Two local additions built the same way: red for down, blue for maintenance. */
.verdict { margin-top: 0; }
.verdict-bad { color: #f87171; background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.28); }
.verdict-info { color: #93c5fd; background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.28); }

.section-head { margin-top: .5rem; }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: -.5rem 0 1rem; font-size: .72rem; color: var(--text-tertiary); }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { display: inline-block; width: 8px; height: 12px; border-radius: 1px; }
.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.svc-card { padding: 1.25rem; }
.svc-top { display: flex; align-items: center; gap: .4rem .65rem; flex-wrap: wrap; }
.svc-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.svc-id .nm { font-size: .95rem; font-weight: 600; color: var(--text-primary); text-decoration: none; overflow-wrap: anywhere; }
a.nm:hover { color: var(--accent); }
.svc-id .meta { font-size: .72rem; color: var(--text-muted); font-family: var(--font-mono); }
.svc-id .meta.plain { font-family: var(--font-primary); }
.bars { display: flex; gap: 1px; margin-top: .9rem; height: 32px; overflow: hidden; }
.bars i { flex: 1; border-radius: 1px; min-width: 1px; transition: opacity .1s; }
.bars i:hover { opacity: .6; }
.bars i.up, .legend i.up { background: var(--success); }
.bars i.blip, .legend i.blip { background: var(--warning); }
.bars i.down, .legend i.down { background: var(--danger); }
.bars i.maint, .legend i.maint { background: var(--maint); }
.bars i.none { background: var(--bg-hover); }
.scale { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .65rem; color: var(--text-muted); }
.upt { display: flex; gap: 1.1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-subtle); font-size: .72rem; color: var(--text-tertiary); flex-wrap: wrap; }
.upt b { font-family: var(--font-mono); font-weight: 700; font-size: .78rem; color: var(--text-primary); margin-left: .15rem; }
@media (max-width: 640px) { .svc-list { grid-template-columns: minmax(0, 1fr); } }

/* Incidents: the kit's crystal list rows. Not clickable, so no pointer or hover bar. */
.inc-row { cursor: default; align-items: flex-start; }
.inc-row::before { display: none; }
.inc-row:hover { background: transparent; }
.inc-row .item-title { white-space: normal; margin-bottom: .25rem; }
.inc-row .item-meta { flex-wrap: wrap; }
.inc-body { font-size: .8rem; color: var(--text-secondary); margin-top: .35rem; overflow-wrap: anywhere; }
.inc-err { font-family: var(--font-mono); font-size: .68rem; color: var(--text-tertiary); margin-top: .35rem; overflow-wrap: anywhere; }
.inc-side { text-align: right; flex-shrink: 0; }
@media (max-width: 768px) { .inc-side { text-align: left; padding-left: calc(36px + .5rem); } }

/* ---- admin (scoped like the kit: everything lives under .ash-main) ---- */
.ash-main { max-width: 64rem; margin: 0 auto; }
.ash-main .a-card + .a-card, .ash-main .a-grid-stat + .a-card { margin-top: 1rem; }
.ash-main .a-card { margin-bottom: 1rem; }
.ash-main .a-form { display: grid; gap: .8rem; max-width: 32rem; }
.ash-main .a-form .a-input, .ash-main .a-form .a-select, .ash-main .a-form .a-textarea { width: 100%; }
.ash-main .a-check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #d1d5db; }
.ash-main .a-check input { width: auto; }
.ash-main .a-note { font-size: .85rem; color: #9ca3af; margin-bottom: .75rem; }
.ash-main .a-note code, .ash-main code { font-family: var(--font-mono); font-size: .8em; color: #d1d5db; }
.ash-main .a-lock { color: #6b7280; }
.ash-main details > summary { cursor: pointer; color: #9ca3af; font-size: .85rem; padding: .35rem 0; }
.ash-main details > summary:hover { color: #fff; }
.ash-main .a-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.ash-main .a-inline { display: inline; }
.ash-main .a-list-row { padding: .8rem 0; border-bottom: 1px solid var(--border-subtle); font-size: .875rem; }
.ash-main .a-list-row:last-child { border-bottom: 0; }
.ash-main .a-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .2rem 1rem; margin: .35rem 0; font-size: .85rem; }
.ash-main .a-grid2 .k { color: #6b7280; }
.ash-main .a-flash-ok { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.06); }
.ash-main .a-mono-input { font-family: var(--font-mono); font-size: .78rem; }
.ash-main .a-err { font-size: .8rem; color: #fca5a5; margin-top: .2rem; }
.ash-main .a-dl { display: grid; grid-template-columns: minmax(0,1fr) 13rem 15rem; gap: .35rem 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--border-subtle); font-size: .85rem; }
.ash-main .a-dl:last-child { border-bottom: 0; }
.ash-main .a-dl .r { text-align: right; }
@media (max-width: 760px) { .ash-main .a-dl { grid-template-columns: minmax(0,1fr); } .ash-main .a-dl .r { text-align: left; } }
/* Services table: kit .a-table on desktop; below 640px each service is a stacked card with labels
   (the kit's scroll-in-card is awkward here because each row holds an expanding edit form). */
.ash-main .svc-table td.url { word-break: break-all; color: #9ca3af; }
@media (max-width: 640px) {
  .ash-main .svc-table, .ash-main .svc-table tbody, .ash-main .svc-table tr, .ash-main .svc-table td { display: block; width: 100%; }
  .ash-main .svc-table thead { display: none; }
  .ash-main .svc-table tr { border-bottom: 1px solid var(--border); padding: .75rem 0; }
  .ash-main .svc-table td { border: 0; padding: .15rem 1.25rem; display: flex; gap: .75rem; }
  .ash-main .svc-table td[data-label]::before { content: attr(data-label); flex: 0 0 4.5rem; color: #6b7280; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem; }
  .ash-main .svc-table td.edit { display: block; padding-top: .35rem; }
}
.ash-main .svc-table .v { min-width: 0; overflow-wrap: anywhere; }
.ash-main .hist-table td { padding: .35rem .5rem; font-size: .8rem; }