/* ms-federation.css — extras for federation.html / profile.html. Load AFTER /ms-pages.css.
   Only adds .fed-* / .pf-* classes and wide-layout overrides; does not modify ms-pages.css. */

body.ms-page.fed-page{align-items:flex-start; padding:24px 14px 44px}
.ms-shell.fed-wide{width:min(100%,1120px)}
.ms-shell.pf-shell{width:min(100%,780px)}
.fed-page .ms-body{padding:30px 32px 34px}

/* headings */
.fed-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 24px; margin:0 0 22px}
.fed-head-text{flex:1 1 320px; min-width:0}
.fed-eyebrow{margin:0 0 6px; font:600 .72rem/1 ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--ms-accent)}
.fed-h1{margin:0 0 8px; font-size:clamp(1.7rem,5vw,2.3rem); line-height:1.15; color:#fff; font-weight:800; letter-spacing:.01em}
.fed-sub{margin:0; color:var(--ms-dim); max-width:62ch; font-size:.98rem}
.fed-sub b{color:var(--ms-text); font-weight:600}

/* LEDs by peer state */
.fed-led{display:inline-block; flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:#6c7086; box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.fed-led.s0{background:#585b70; box-shadow:0 0 0 1px rgba(166,173,200,.35)}
.fed-led.s1{background:#5b7bd0; box-shadow:0 0 7px rgba(91,123,208,.7)}
.fed-led.s2{background:#74c7ec; box-shadow:0 0 9px rgba(116,199,236,.85)}
.fed-led.s3{background:var(--ms-ok); box-shadow:0 0 10px var(--ms-ok)}
.fed-led.s4{background:#fab387; background:#f9b44a; box-shadow:0 0 10px #f9b44a}
.fed-led.s5{background:var(--ms-bad); box-shadow:0 0 10px var(--ms-bad)}
.fed-led.s6{background:transparent; border:2px solid #ff8a8a; box-shadow:0 0 8px rgba(255,102,102,.6)}
.fed-led.s7{background:#d1264d; box-shadow:0 0 0 2px rgba(209,38,77,.35),0 0 12px #d1264d}
@media (prefers-reduced-motion:no-preference){
  .fed-led.s2{animation:fed-blink 1.4s ease-in-out infinite}
  .fed-led.s3{animation:fed-breathe 3s ease-in-out infinite}
}
@keyframes fed-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fed-breathe{0%,100%{box-shadow:0 0 6px var(--ms-ok)}50%{box-shadow:0 0 13px var(--ms-ok)}}

/* state chip (LED + word) */
.fed-state{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; white-space:nowrap}
.fed-state.s0{color:#9399b2}.fed-state.s1{color:#8fa9f0}.fed-state.s2{color:#74c7ec}
.fed-state.s3{color:var(--ms-ok)}.fed-state.s4{color:#f9b44a}
.fed-state.s5,.fed-state.s6{color:#ff8a8a}.fed-state.s7{color:#ff6b8b}

/* summary strip */
.fed-stats{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 18px}
.fed-stat{
  appearance:none; -webkit-appearance:none; text-align:left; cursor:pointer; color:inherit; font:inherit;
  background:var(--ms-panel2); border:1px solid rgba(137,180,250,.25); border-radius:12px; padding:14px 16px;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.fed-stat:hover{border-color:rgba(137,180,250,.6); transform:translateY(-1px)}
.fed-stat:focus-visible{outline:2px solid #fff; outline-offset:2px}
.fed-stat[aria-pressed="true"]{border-color:var(--ms-accent); box-shadow:0 0 16px rgba(137,180,250,.4)}
.fed-stat-n{display:block; font:800 1.9rem/1.1 ui-monospace,"Courier New",monospace; color:#fff}
.fed-stat-l{display:flex; align-items:center; gap:8px; margin-top:6px; font:600 .72rem/1 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--ms-dim)}
.fed-stat.k-online .fed-stat-n{color:var(--ms-ok)}
.fed-stat.k-degraded .fed-stat-n{color:#f9b44a}
.fed-stat.k-offline .fed-stat-n{color:#ff8a8a}
.fed-stat.k-connecting .fed-stat-n{color:#8fb8f5}

/* toolbar */
.fed-bar2{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 14px; margin:0 0 14px}
.fed-field{display:flex; flex-direction:column; min-width:0}
.fed-field .ms-select{padding:9px 34px 9px 12px; min-height:40px; font-size:.92rem; width:auto; min-width:170px}
.fed-sortsel-wrap{display:none}
.fed-live{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.fed-live-text{font:600 .78rem/1.3 ui-monospace,monospace; color:var(--ms-dim); text-align:right}
.fed-live-text b{color:var(--ms-text); font-weight:600}
.fed-pulse{position:relative; width:12px; height:12px; border-radius:50%; background:var(--ms-accent); box-shadow:0 0 9px var(--ms-accent); flex:0 0 auto}
.fed-pulse.ok{background:var(--ms-ok); box-shadow:0 0 9px var(--ms-ok)}
.fed-pulse.bad{background:var(--ms-bad); box-shadow:0 0 9px var(--ms-bad)}
.fed-pulse.paused{background:#6c7086; box-shadow:none}
.fed-pulse::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:0; color:var(--ms-accent)}
.fed-pulse.ok::after{color:var(--ms-ok)}
.fed-pulse.bad::after{color:var(--ms-bad)}
@media (prefers-reduced-motion:no-preference){
  .fed-pulse.beat::after{animation:fed-ring .9s ease-out 1}
}
@keyframes fed-ring{0%{opacity:.9; transform:scale(1)}100%{opacity:0; transform:scale(3.2)}}
.fed-btn{min-height:44px; padding:7px 16px; font-size:.85rem}
.fed-countdown{height:3px; border-radius:3px; background:rgba(137,180,250,.14); overflow:hidden; margin:0 0 14px}
.fed-countdown i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--ms-edge),var(--ms-accent)); transition:width 1s linear}
.fed-countdown.paused i{background:#6c7086}
.fed-countdown.busy i{transition:none}

/* table */
.fed-tablewrap{overflow-x:auto; border-radius:10px}
.fed-table{min-width:0}
.fed-table th{padding:0; white-space:nowrap}
.fed-th{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:6px; width:100%; padding:11px 12px; cursor:pointer;
  font:700 .85rem/1.2 system-ui,sans-serif; letter-spacing:.03em; color:#fff;
}
.fed-th:hover{background:rgba(137,180,250,.14)}
.fed-th:focus-visible{outline:2px solid #fff; outline-offset:-2px}
.fed-th::after{content:"\2195"; font-size:.8em; opacity:.35}
th[aria-sort="ascending"] .fed-th::after{content:"\25B2"; opacity:1; color:var(--ms-accent)}
th[aria-sort="descending"] .fed-th::after{content:"\25BC"; opacity:1; color:var(--ms-accent)}
.fed-table td{vertical-align:middle}
.fed-node{font:600 .95rem/1.2 ui-monospace,"Courier New",monospace; color:#fff; letter-spacing:.02em}
.fed-node small{display:block; margin-top:2px; font:400 .72rem/1.2 ui-monospace,monospace; color:var(--ms-dim)}
.fed-num{font:600 .92rem/1 ui-monospace,monospace}
.fed-dim{color:var(--ms-dim)}

/* flag badges */
.fed-flags{display:flex; flex-wrap:wrap; gap:5px}
.fed-flag{display:inline-block; padding:3px 8px; border-radius:9999px; font:700 .68rem/1.2 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ms-accent); background:rgba(137,180,250,.1); border:1px solid rgba(137,180,250,.35)}
.fed-flag.f-trusted{color:#f9e2af; background:rgba(249,226,175,.1); border-color:rgba(249,226,175,.4)}
.fed-flag.f-webid{color:var(--ms-ok); background:rgba(0,255,136,.08); border-color:rgba(0,255,136,.35)}
.fed-flag.f-pinned{color:#cba6f7; background:rgba(203,166,247,.1); border-color:rgba(203,166,247,.4)}
.fed-flag.f-in,.fed-flag.f-out{color:#94e2d5; background:rgba(148,226,213,.08); border-color:rgba(148,226,213,.35)}
.fed-flag.none{color:var(--ms-dim); background:none; border-color:transparent; padding-left:0}

/* load bar */
.fed-load{display:flex; align-items:center; gap:9px; min-width:110px}
.fed-bar{flex:1 1 auto; height:8px; min-width:56px; border-radius:6px; background:rgba(137,180,250,.14); overflow:hidden}
.fed-bar i{display:block; height:100%; border-radius:6px; background:var(--ms-ok)}
.fed-bar i.mid{background:#f9b44a}
.fed-bar i.hi{background:var(--ms-bad)}
.fed-load span{flex:0 0 38px; text-align:right}

/* empty / error panel */
.fed-empty{display:flex; align-items:center; gap:30px; background:var(--ms-panel2); border:1px dashed rgba(137,180,250,.4); border-radius:14px; padding:30px 32px}
.fed-empty .ms-orbit{flex:0 0 120px; width:120px; height:120px}
.fed-empty .ms-orbit::before{left:-14px; right:-14px; height:36px; margin-top:-18px}
.fed-empty .ms-planet{inset:14px}
.fed-empty .ms-planet::after{left:-16px; right:-16px; height:36px; margin-top:-18px}
.fed-empty-text{flex:1 1 auto; min-width:0}
.fed-empty h2{margin:0 0 8px; color:#fff; font-size:1.45rem; line-height:1.2}
.fed-empty p{margin:0 0 18px; color:var(--ms-text); max-width:52ch}
.fed-loading{padding:34px 8px; text-align:center; color:var(--ms-dim); font:600 .85rem/1.4 ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase}
.fed-legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 0 0; font-size:.78rem; color:var(--ms-dim)}
.fed-legend span{display:inline-flex; align-items:center; gap:7px}
.fed-nomatch{padding:26px; text-align:center; color:var(--ms-dim)}

/* ---------- profile card ---------- */
.pf-top{display:flex; align-items:center; gap:24px; margin:0 0 24px}
.pf-avatar{
  flex:0 0 96px; width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:800 2.6rem/1 system-ui,sans-serif; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45);
  background:radial-gradient(circle at 30% 25%,hsl(var(--pf-h,220) 80% 72%),hsl(var(--pf-h,220) 60% 42%) 55%,hsl(var(--pf-h,220) 55% 16%));
  border:2px solid rgba(205,214,244,.55); box-shadow:0 0 26px rgba(137,180,250,.45), inset -8px -8px 18px rgba(0,0,0,.35);
  user-select:none;
}
.pf-id{min-width:0; flex:1 1 auto}
.pf-name{margin:0 0 8px; font-size:clamp(1.5rem,5vw,2.1rem); line-height:1.15; color:#fff; font-weight:800; overflow-wrap:anywhere}
.pf-badges{display:flex; flex-wrap:wrap; gap:7px}
.fed-badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:9999px; font:700 .76rem/1.1 system-ui,sans-serif; letter-spacing:.03em;
  color:var(--ms-accent); background:rgba(137,180,250,.1); border:1px solid rgba(137,180,250,.4)}
.fed-badge.ok{color:var(--ms-ok); background:rgba(0,255,136,.09); border-color:rgba(0,255,136,.45)}
.fed-badge.warn{color:var(--ms-warn); background:rgba(249,226,175,.09); border-color:rgba(249,226,175,.45)}
.fed-badge.pin{color:#cba6f7; background:rgba(203,166,247,.1); border-color:rgba(203,166,247,.45)}
.pf-sec{margin:0 0 22px}
.pf-label{margin:0 0 8px; font:600 .72rem/1 ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--ms-dim)}
.pf-uri-row{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap}
.pf-uri{flex:1 1 280px; min-width:0; margin:0; padding:12px 14px; background:#11111b; border:1px solid var(--ms-edge); border-radius:10px;
  font:.88rem/1.45 ui-monospace,"Courier New",monospace; color:var(--ms-text); overflow-wrap:anywhere; word-break:break-all; user-select:all}
.pf-uri-btns{display:flex; gap:8px; flex-wrap:wrap}
.pf-uri-btns .ms-btn{min-height:44px}
.pf-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 24px}
.pf-meta .ms-card{margin:0; padding:12px 14px}
.pf-meta dt{font:600 .68rem/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ms-dim); margin:0 0 6px}
.pf-meta dd{margin:0; font:600 1rem/1.3 ui-monospace,monospace; color:#fff; overflow-wrap:anywhere}
.pf-links-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 10px}
.pf-links-head h2{margin:0; font-size:1.15rem; color:#fff}
.pf-links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.pf-link{display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--ms-panel2); border:1px solid rgba(137,180,250,.22); border-radius:10px}
.pf-link-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.pf-link a.fed-node{text-decoration:none}
.pf-link a.fed-node:hover{text-decoration:underline; color:var(--ms-accent)}
.pf-lookup{display:flex; gap:10px; flex-wrap:wrap}
.pf-lookup .ms-input{flex:1 1 220px; width:auto}
.fed-note-demo{margin:0 0 18px; font-size:.9rem}
.fed-credit{color:var(--ms-text)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .fed-stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .fed-sortsel-wrap{display:flex}
  .fed-tablewrap{overflow:visible}
  .fed-table,.fed-table tbody,.fed-table tr,.fed-table td{display:block}
  .fed-table{background:none; border:0; border-radius:0}
  .fed-table thead{display:none}
  .fed-table tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; padding:14px 16px; margin:0 0 10px;
    background:var(--ms-panel2); border:1px solid rgba(137,180,250,.25); border-radius:12px;
  }
  .fed-table td{padding:0; border:0 !important; min-width:0}
  .fed-table tbody tr:hover td{background:none}
  .fed-table td::before{content:attr(data-label); display:block; margin:0 0 4px; font:600 .64rem/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ms-dim)}
  .fed-table td.c-node::before,.fed-table td.c-state::before{display:none}
  .fed-table td.c-state{text-align:right; justify-self:end}
  .fed-table td.c-flags{grid-column:1 / -1}
  .fed-live{margin-left:0; width:100%; justify-content:space-between}
  .fed-live-text{text-align:left}
}
@media (max-width:560px){
  body.ms-page.fed-page{padding:12px 8px 32px}
  .fed-page .ms-body{padding:22px 14px 26px}
  .fed-stats{grid-template-columns:1fr 1fr; gap:10px}
  .fed-stat:first-child{grid-column:1 / -1}
  .fed-stat{padding:12px 14px}
  .fed-stat-n{font-size:1.6rem}
  .fed-field{flex:1 1 100%}
  .fed-field .ms-select{width:100%}
  .fed-bar2{gap:10px}
  .fed-empty{flex-direction:column-reverse; align-items:flex-start; gap:16px; padding:22px 18px}
  .fed-empty .ms-orbit{margin-left:12px}
  .pf-top{flex-direction:column; align-items:flex-start; gap:14px}
  .pf-avatar{flex-basis:84px; width:84px; height:84px; font-size:2.3rem}
  .pf-uri-btns{width:100%}
  .pf-uri-btns .ms-btn{flex:1 1 0}
  .pf-links{grid-template-columns:1fr}
  .fed-page .ms-foot{flex-direction:column; gap:6px}
  .fed-page .ms-foot .ms-spacer{display:none}
}

/* ---------- tabs + workloads (demo) ---------- */
.fed-tabs{display:flex; gap:6px; margin:0 0 18px; border-bottom:1px solid rgba(137,180,250,.22)}
.fed-tab{appearance:none; -webkit-appearance:none; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; padding:10px 18px; cursor:pointer;
  color:var(--ms-dim); font:700 .92rem/1 system-ui,sans-serif; letter-spacing:.03em; min-height:44px}
.fed-tab:hover{color:#fff}
.fed-tab[aria-selected="true"]{color:#fff; border-bottom-color:var(--ms-accent)}
.fed-tab:focus-visible{outline:2px solid #fff; outline-offset:-2px; border-radius:6px}
.wl-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:14px}
.wl-card{margin:0; padding:16px 18px}
.wl-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 12px}
.wl-live{font:700 .8rem/1 ui-monospace,monospace; color:var(--ms-dim)}
.wl-res{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 12px}
.wl-res div{min-width:0}
.wl-res dt{font:600 .62rem/1 ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ms-dim); margin:0 0 5px}
.wl-res dd{margin:0; font:600 .92rem/1.2 ui-monospace,monospace; color:#fff}
.wl-reps{list-style:none; margin:12px 0 0; padding:10px 0 0; border-top:1px solid rgba(137,180,250,.14); display:grid; gap:8px}
.wl-rep{display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; font-size:.86rem}
.wl-rep .fed-dim{font-size:.78rem}
@media (max-width:560px){
  .wl-list{grid-template-columns:1fr}
  .wl-res{grid-template-columns:1fr 1fr}
  .fed-tab{flex:1 1 0; padding:10px 8px}
}

/* 64-bit ids (16 hex digits): keep workload cards inside the viewport on phones */
.wl-card{min-width:0}
.wl-rep > *{min-width:0}
.wl-rep .fed-node{overflow-wrap:anywhere}
@media (max-width:560px){
  .wl-list{grid-template-columns:minmax(0,1fr)}
  .wl-rep{grid-template-columns:auto 1fr; }
  .wl-rep .fed-dim{grid-column:1 / -1}
}