:root{
  --paper:#eceff2;
  --card:#f9fafb;
  --ink:#141c24;
  --soft:#5b6976;
  --rule:#d3d9df;
  --chrome:#0f5a6b;
  --ok:#157a5c;
  --fail:#b8342a;
  --wait:#8f6300;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--chrome)}
:focus-visible{outline:2px solid var(--chrome);outline-offset:2px;border-radius:2px}

/* ---------- chrome ---------- */
.fm-bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 22px;border-bottom:1px solid var(--rule);background:var(--card);
}
.fm-logo{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.fm-logo span{color:var(--chrome)}
.fm-who{font-size:11px;color:var(--soft);display:flex;gap:14px;align-items:center}

.fm-wrap{max-width:820px;margin:0 auto;padding:26px 22px 70px}

.fm-eyebrow{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
}

/* ---------- summary line ---------- */
.fm-summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:18px;
}
.fm-summary p{margin:4px 0 0;font-size:15px}
.fm-summary strong{font-weight:600}
.fm-attention{color:var(--fail)}
.fm-allclear{color:var(--ok)}

/* ---------- signal path glyph (the signature) ---------- */
.fm-path{flex:none;display:block}
.fm-path .trk{stroke:var(--rule);stroke-width:2}
.fm-path .trk.live{stroke:var(--ok)}
.fm-path .trk.dash{stroke:var(--wait);stroke-dasharray:3 3}
.fm-path .nd{fill:var(--card);stroke-width:2}
.fm-path .nd.on{fill:var(--ok);stroke:var(--ok)}
.fm-path .nd.off{fill:var(--card);stroke:var(--fail)}
.fm-path .nd.idle{fill:var(--card);stroke:var(--rule)}
.fm-path .nd.hold{fill:var(--card);stroke:var(--wait)}
.fm-path .xm{stroke:var(--fail);stroke-width:1.6;stroke-linecap:round}

@media (prefers-reduced-motion:no-preference){
  .fm-path .trk.dash{animation:crawl .9s linear infinite}
  @keyframes crawl{to{stroke-dashoffset:-6}}
}

/* ---------- monitor rows ---------- */
.fm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.fm-row{
  background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:12px 14px;display:flex;gap:14px;align-items:center;
}
.fm-row a.nm{
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;
}
.fm-row a.nm:hover{color:var(--chrome)}
.fm-row .meta{margin-left:auto;color:var(--soft);font-size:11px;text-align:right;flex:none}

/* failing monitor takes the space; healthy ones stay quiet */
.fm-row.bad{
  display:block;border-color:var(--fail);border-left-width:3px;background:#fdf7f6;
  padding:16px 18px;
}
.fm-bad-top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.fm-bad-top .nm{font-size:16px}
.fm-tag{
  margin-left:auto;flex:none;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fail);border:1px solid var(--fail);border-radius:3px;padding:3px 7px;
}
.fm-elapsed{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.fm-elapsed .n{
  font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--fail);
}
.fm-elapsed .u{font-size:12px;color:var(--soft);max-width:210px}
.fm-diag{
  font-family:var(--sans);font-size:13px;color:var(--ink);
  border-top:1px solid #e6d5d3;padding-top:12px;margin:0 0 14px;
}
.fm-diag b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fail);margin-bottom:5px;font-weight:600}

/* ---------- buttons ---------- */
.fm-btn{
  font:inherit;font-size:12px;cursor:pointer;border-radius:4px;padding:7px 13px;
  border:1px solid var(--chrome);background:var(--chrome);color:#fff;
}
.fm-btn:hover{background:#0c4a58}
.fm-btn.ghost{background:none;color:var(--chrome)}
.fm-btn.ghost:hover{background:rgba(15,90,107,.07)}
.fm-btn[disabled]{opacity:.5;cursor:default}
.fm-acts{display:flex;gap:8px;flex-wrap:wrap}

/* button that looks like an inline link (used for POST-only actions like sign out) */
.fm-inline-form{display:inline;margin:0}
.fm-linkbtn{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--chrome);
}
.fm-linkbtn:hover{text-decoration:underline}

/* ---------- detail ---------- */
.fm-back{font-size:11px;color:var(--soft);text-decoration:none;display:inline-block;margin-bottom:14px}
.fm-back:hover{color:var(--chrome)}
.fm-head{
  background:var(--card);border:1px solid var(--rule);border-radius:5px;
  padding:18px;margin-bottom:8px;
}
.fm-head h1{margin:0;font-size:18px;letter-spacing:-.01em}
.fm-head .url{
  color:var(--soft);font-size:11px;margin:5px 0 16px;word-break:break-all;
}
.fm-head .strip{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.fm-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:5px;
  overflow:hidden;margin-bottom:8px;
}
.fm-facts div{background:var(--card);padding:12px 14px}
.fm-facts dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.fm-facts dd{margin:4px 0 0;font-size:13px}

.fm-panel{
  background:var(--card);border:1px solid var(--rule);border-radius:5px;overflow:hidden;
}
.fm-panel > h2{
  margin:0;padding:11px 14px;border-bottom:1px solid var(--rule);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);font-weight:600;
}
.fm-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px}
th{
  text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);font-weight:400;padding:9px 14px;border-bottom:1px solid var(--rule);
}
td{padding:9px 14px;border-bottom:1px solid #e7ebee;font-size:12px}
tr:last-child td{border-bottom:0}
.st{font-weight:600}
.st.ok{color:var(--ok)}
.st.bad{color:var(--fail)}
.st.wait{color:var(--wait)}
.dim{color:var(--soft)}

/* ---------- forms ---------- */
.fm-field{margin-bottom:15px}
.fm-field label{display:block;font-size:11px;letter-spacing:.06em;margin-bottom:5px}
.fm-field .hint{color:var(--soft);font-size:11px;margin-top:5px;font-family:var(--sans)}
input,textarea,select{
  font:inherit;width:100%;background:#fff;color:var(--ink);
  border:1px solid var(--rule);border-radius:4px;padding:9px 11px;
}
input:focus,textarea:focus,select:focus{border-color:var(--chrome);outline:none;box-shadow:0 0 0 3px rgba(15,90,107,.13)}
textarea{resize:vertical;min-height:110px;line-height:1.6}

.fm-err{
  color:var(--fail);font-size:12px;margin:6px 0 0;padding:6px 10px;
  background:#fdf7f6;border:1px solid #eecfcc;border-radius:4px;
}

/* padded panel variant used for forms and empty states */
.fm-panel.pad{padding:22px}
.fm-panel.pad > p{margin:0 0 12px}
.fm-panel.pad > p:last-child{margin-bottom:0}

/* logo can link home without losing its look */
.fm-logo a{color:inherit;text-decoration:none}
.fm-logo a:hover{color:var(--chrome)}

/* checkbox rows override the width:100% default on inputs */
.fm-check input{width:auto;margin-right:8px}
.fm-check label{display:flex;align-items:center;letter-spacing:0;text-transform:none;font-size:13px}

/* <details> disclosure widgets used for Advanced and Delete */
.fm-details{margin-top:14px}
.fm-details > summary{
  cursor:pointer;padding:10px 14px;list-style:none;
  background:var(--card);border:1px solid var(--rule);border-radius:5px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);font-weight:600;
}
.fm-details > summary::-webkit-details-marker{display:none}
.fm-details[open] > summary{border-radius:5px 5px 0 0}
.fm-details-body{
  background:var(--card);border:1px solid var(--rule);border-top:0;
  padding:14px 14px 4px;border-radius:0 0 5px 5px;
}
.fm-details-body > *:last-child{margin-bottom:0}
.fm-danger > summary{color:var(--fail)}
.fm-btn-danger{border-color:var(--fail);background:var(--fail);color:#fff}
.fm-btn-danger:hover{background:#94271e}

/* empty state block inside .fm-panel */
.fm-empty{padding:18px;color:var(--soft);font-family:var(--sans)}
.fm-empty p{margin:0}

/* ---------- login ---------- */
.fm-login{max-width:330px;margin:0 auto;padding:70px 22px}
.fm-login .mark{text-align:center;margin-bottom:28px}
.fm-login .mark p{margin:10px 0 0;color:var(--soft);font-size:11px}
.fm-login .fm-btn{width:100%;padding:10px;justify-content:center}

/* ---------- toast ---------- */
.fm-toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12px;padding:10px 16px;border-radius:4px;
  display:flex;gap:9px;align-items:center;opacity:0;pointer-events:none;
  transition:opacity .18s ease;z-index:50;
}
.fm-toast.show{opacity:1}
.fm-toast i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

[hidden]{display:none !important}

@media (max-width:620px){
  .fm-row{flex-wrap:wrap}
  .fm-row .meta{margin-left:0;text-align:left;width:100%}
  .fm-elapsed .n{font-size:34px}
}