/* Loops, routes list polish, and the signals feed. */

.flag{width:16px;height:16px;flex:0 0 auto;margin-top:2px}
.flag-critical{color:var(--bad)}
.flag-warn{color:var(--ember)}
.flag-info{color:#8aa0b8}
.flag-resolved{color:var(--ok)}

.flag-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:0 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.flag-legend span{display:inline-flex;align-items:center;gap:7px;color:var(--mist);font-size:12.5px;white-space:nowrap}
.flag-legend .flag{margin-top:0}

.sig-filters,.loop-filters{margin:0 0 16px;max-width:100%}
.sig-filters .seg,.loop-filters .seg{flex-wrap:wrap;max-width:100%}
.sig-log,.loop-closed{max-width:100%;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#14161c,#0f1116);overflow:hidden}
.sig-log{margin-top:4px}
.sig-day{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:12px;padding:8px 16px;background:#0c0d11;border-bottom:1px solid var(--line);font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sig-day span{letter-spacing:0;text-transform:none}
.sig-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:8px 14px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line)}
.sig-row.fresh{box-shadow:inset 3px 0 0 var(--ember)}
.sig-row.sev-critical{background:rgba(224,122,122,.035)}
.sig-main{min-width:0}
.sig-main>strong,.loop-card h2{font-weight:600;font-size:15px;letter-spacing:-.01em}
.sig-main>strong{display:block;overflow-wrap:anywhere}
.sig-meta{margin:3px 0 0;color:var(--mute);font-size:12.5px;overflow-wrap:anywhere}
.sig-actions,.loop-card-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.sig-actions form,.loop-card-actions form{margin:0}
.sig-ack{color:var(--ok);font-size:12.5px}
.loop-chip{display:inline-flex;align-items:center;margin-top:8px;padding:2px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--mist);font-size:12px}
.loop-chip:hover{text-decoration:none;color:var(--text);border-color:var(--ember)}
.loop-chip.open{color:var(--ember-2);border-color:rgba(230,168,92,.45)}
.loop-chip.closed{color:var(--ok);border-color:rgba(125,206,160,.35)}

.loop-list{display:flex;flex-direction:column;gap:8px}
.loop-row-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;padding:12px 14px;border-left:3px solid var(--line-2)}
.loop-row-card.sev-critical{border-left-color:var(--bad)}
.loop-row-card.sev-warn{border-left-color:var(--ember)}
.loop-row-card.sev-info{border-left-color:#8aa0b8}
.loop-row-card.sev-resolved{border-left-color:var(--ok)}
.loop-row-main{display:flex;align-items:flex-start;gap:10px;min-width:0}
.loop-row-body{min-width:0;flex:1}
.loop-row-body h2{margin:0;font:600 .98rem/1.35 var(--sans)}
.loop-row-body h2 a{color:inherit}
.loop-row-body h2 a:hover{color:var(--ember-2);text-decoration:none}
.loop-row-aside{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;padding:4px 2px 4px 8px}
.loop-status-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.04);flex:none}
.loop-status-icon .flag{margin:0}
.loop-row-main .lx-icon{width:18px;height:18px;opacity:.85;margin-top:4px;flex:none}
.loop-show-head{display:flex;gap:12px;align-items:flex-start}
.loop-show-head .lx-icon{margin-top:6px}

.loop-card{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:0;overflow:hidden;border-left:3px solid var(--line-2)}
.loop-card.sev-critical{border-left-color:var(--bad)}
.loop-card.sev-warn{border-left-color:var(--ember)}
.loop-card.sev-info{border-left-color:#8aa0b8}
.loop-card-main{display:flex;gap:12px;min-width:0;padding:16px}
.loop-card h2{margin:0;font:600 1.05rem/1.3 var(--sans)}
.loop-card h2 a{color:inherit}
.loop-card h2 a:hover{color:var(--ember-2);text-decoration:none}
.loop-card-actions{padding:16px 16px 16px 0}

.loop-row{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--text)}
.loop-row:hover{text-decoration:none;background:rgba(255,255,255,.025)}
.loop-row .t{flex:1;min-width:0}
.loop-row strong{display:block;font-weight:600;overflow-wrap:anywhere}
.loop-row .t span{color:var(--mute);font-size:12.5px}
.loop-row .chev{width:16px;height:16px;margin-top:3px;color:var(--mute);flex:0 0 auto}

.loop-close h2{margin:0 0 6px}
.loop-close .form-foot{margin-top:12px}

.loops-lead{margin:-4px 0 16px;max-width:42rem;color:var(--mist);font-size:14px;line-height:1.45}
.loop-card .story-lede{margin:6px 0 0;color:var(--mist);font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.loop-card-open .loop-card-main{align-items:flex-start}
.panel-head .hint{margin:0;font-weight:400}

.loop-show{min-width:0;max-width:100%}
.loop-show h1,.loop-show .sub,.loop-show .crumbs span:last-child{overflow-wrap:anywhere}
.loop-show .page-actions .btn,
.loop-show .page-actions button,
.loop-show .loop-close .btn,
.loop-show .loop-full>summary{min-height:44px}
.loop-ack{margin:0;display:inline-flex;align-items:center;min-height:44px;color:var(--ok);font-size:13.5px}

.loop-rail{display:flex;align-items:center;gap:0;margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#14161c,#0f1116);min-width:0}
.loop-mark{display:flex;align-items:center;gap:10px;min-width:0}
.loop-mark-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;background:var(--ember);box-shadow:0 0 0 4px var(--ember-soft)}
.loop-show.is-closed .loop-mark:not(.is-closed) .loop-mark-dot{background:#8aa0b8;box-shadow:0 0 0 4px rgba(138,160,184,.16)}
.loop-mark.is-live .loop-mark-dot{background:var(--ember)}
.loop-mark.is-closed .loop-mark-dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.loop-mark-label{display:block;font:600 .68rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.loop-mark time,.loop-mark-sub{display:block;margin-top:3px;color:var(--text);font-size:14px;overflow-wrap:anywhere}
.loop-mark-sub{color:var(--mist);font-size:12.5px}
.loop-rail-line{flex:1 1 2rem;min-width:1.5rem;height:2px;margin:0 14px;border-radius:2px;background:linear-gradient(90deg,var(--ember),rgba(230,168,92,.2))}
.loop-show.is-closed .loop-rail-line{background:linear-gradient(90deg,#8aa0b8,var(--ok))}
.loop-lede{margin:-4px 0 16px;max-width:40rem;color:var(--mist);font-size:14px;line-height:1.45;overflow-wrap:anywhere}

.loop-now{border-color:rgba(224,122,122,.35)}
.loop-now-list{list-style:none;margin:0;padding:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:8px}
.loop-now-list .loop-event{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;min-width:0;margin:0;padding:12px;border-radius:12px;background:rgba(224,122,122,.06);border:1px solid rgba(224,122,122,.28)}
.loop-now-list .loop-event::before{display:none}
.loop-gap,.loop-quiet{margin:0;padding:0 16px 14px;color:var(--mute);font-size:13px}
.loop-quiet{padding-top:14px}

.loop-show .timeline{list-style:none;margin:0;padding:16px 16px 4px}
.loop-show .timeline .loop-event{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding:0 0 18px;min-width:0}
.loop-show .timeline .loop-event::before{content:"";position:absolute;left:13px;top:26px;bottom:0;width:2px;background:var(--line-2)}
.loop-show .timeline .loop-event:last-child::before{display:none}
.loop-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);background:#12141a;position:relative;z-index:1;flex:0 0 auto}
.loop-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#8aa0b8}
.sev-critical .loop-dot{border-color:rgba(224,122,122,.55)}
.sev-critical .loop-dot::after{background:var(--bad)}
.sev-warn .loop-dot{border-color:rgba(230,168,92,.5)}
.sev-warn .loop-dot::after{background:var(--ember)}
.sev-resolved .loop-dot{border-color:rgba(125,206,160,.5)}
.sev-resolved .loop-dot::after{background:var(--ok)}
.loop-event-main{min-width:0}
.loop-event-main strong{display:block;overflow-wrap:anywhere}
.loop-event-body{margin:6px 0 0;color:var(--mist);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.loop-now-list .loop-event-body,.loop-show .timeline .loop-event-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.loop-show .loop-full .loop-event-body{display:block;-webkit-line-clamp:unset;overflow:visible}
.loop-event-link{margin:2px 0 0}
.loop-event-link a{display:inline-flex;align-items:center;min-height:44px}
.loop-sev{color:var(--mist)}

.loop-full{margin:0 0 12px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#14161c,#0f1116)}
.loop-full>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;color:var(--text);font-weight:600}
.loop-full>summary::-webkit-details-marker{display:none}
.loop-full>summary:hover{background:rgba(255,255,255,.03)}
.loop-full[open]>summary{border-bottom:1px solid var(--line)}
.loop-full .hint{font-weight:400}

@media (max-width:60em){
  .sig-day{top:56px}
}
@media (max-width:390px){
  .sig-row,.loop-card{grid-template-columns:16px minmax(0,1fr)}
  .sig-row{display:grid}
  .sig-actions{grid-column:1 / -1;justify-content:flex-start}
  .loop-card{flex-direction:column;gap:0}
  .loop-card-actions{width:100%;padding:0 16px 16px;justify-content:flex-start}
  .sig-filters.toolbar,.loop-filters.toolbar{align-items:stretch}
  .sig-filters .seg,.loop-filters .seg{width:100%}
  .sig-filters select,.loop-filters select,.sig-filters .search,.loop-filters .search{flex:1 1 100%;width:100%;min-width:0;max-width:100%}
  .flag-legend span{white-space:normal}
  .page-actions{width:100%}
  .loop-show .page{align-items:stretch}
  .loop-show .page-actions{flex-direction:column;align-items:stretch}
  .loop-show .page-actions form,.loop-show .page-actions .btn,.loop-show .page-actions button,.loop-show .loop-ack{width:100%}
  .loop-show .loop-rail{flex-direction:column;align-items:flex-start;gap:10px}
  .loop-show .loop-rail-line{width:2px;height:16px;min-width:0;margin:0 0 0 5px;flex:0 0 auto;background:var(--line-2)}
  .loop-show .loop-now-list{grid-template-columns:1fr}
  .loop-show .loop-full>summary{align-items:flex-start;flex-direction:column}
  .loop-show .loop-close .btn{width:100%}
}