/* Dev bar and hub styles. Tokens only. */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin.woff2) format("woff2")}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin-ext.woff2) format("woff2")}
body.has-devbar{padding-bottom:calc(var(--s-8) + var(--s-5))}
.fk-devbar{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  padding:var(--s-2) var(--s-4);background:var(--color-card);border-top:2px solid var(--color-ink);box-shadow:0 -4px 16px rgba(23,50,77,.12);
  font:500 var(--t-sm)/1.3 var(--font-body);color:var(--color-ink)}
.fk-devbar-tag{font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-on-accent);background:var(--color-ink);border-radius:var(--radius-sm);padding:.2rem .55rem}
.fk-devbar-flow{flex:1 1 12rem;min-width:0;color:var(--color-ink);font-weight:600}
.fk-devbar-step{color:var(--color-muted);white-space:nowrap}
.fk-devbar-nav{display:inline-flex;gap:var(--s-2)}
.fk-devbar-btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;padding:0 var(--s-4);border:1.5px solid var(--color-ink);border-radius:var(--radius-sm);
  background:var(--color-card);color:var(--color-ink);font:600 var(--t-sm)/1 var(--font-body);text-decoration:none;cursor:pointer}
.fk-devbar-btn:hover{background:var(--color-ink);color:var(--color-on-accent);text-decoration:none}
.fk-devbar-btn.is-next{background:var(--color-ink);color:var(--color-on-accent)}
.fk-devbar-btn.is-next:hover{background:var(--color-body)}
.fk-devbar-btn.is-off{opacity:.4;cursor:default;border-color:var(--color-line);background:var(--color-card);color:var(--color-muted)}
.fk-devbar-btn.is-off.is-next{background:var(--fk-surface)}
.fk-devbar a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.fk-devbar-btn.is-all{margin-left:auto}
@media (max-width:640px){
  .fk-devbar{gap:var(--s-2);padding:var(--s-2) var(--s-3)}
  .fk-devbar-flow{order:3;flex-basis:100%;font-size:var(--t-xs)}
  .fk-devbar-nav{margin-left:auto}
  .fk-devbar-btn.is-all{margin-left:0}
  body.has-devbar{padding-bottom:calc(var(--s-8) * 2)}
}
/* Hub and flows pages */
.hubpage{background:var(--color-bg);color:var(--color-body);font-family:var(--font-body);margin:0}
.hubpage h1{color:var(--color-ink);font-size:var(--t-2xl);margin:0 0 var(--s-2)}
.hubpage h2{color:var(--color-ink);font-size:var(--t-xl);margin:var(--s-7) 0 var(--s-3)}
.hubpage h3{color:var(--color-ink);font-size:var(--t-base);margin:var(--s-5) 0 var(--s-2)}
.hubpage a{color:var(--color-accent-text)}
.lede{max-width:46rem;margin:0 0 var(--s-4)}
.flowgrid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));margin:var(--s-5) 0 0;padding:0;list-style:none}
.flowcard{display:flex;flex-direction:column;gap:var(--s-2);background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--s-5);height:100%;box-sizing:border-box}
.flowcard h3{margin:0}
.flowcard .who{font-size:var(--t-sm);color:var(--color-muted);font-weight:600}
.flowcard p{margin:0;flex:1}
.flowcard .meta{font-size:var(--t-sm);color:var(--color-muted)}
.screens{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.screens li{display:flex;gap:var(--s-3);align-items:baseline;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--s-2) var(--s-4)}
.screens a{font-weight:600;white-space:nowrap}
.screens span{color:var(--color-body);font-size:var(--t-sm)}
.note{background:var(--color-info-wash);color:var(--color-info-ink);border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin-top:var(--s-7)}
.note p{margin:0 0 var(--s-2)}.note p:last-child{margin:0}
.flowrow{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--s-5);margin-top:var(--s-4)}
.flowrow h2{margin:0 0 var(--s-1);font-size:var(--t-lg)}
.steps{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-3) 0;padding:0;list-style:none}
.steps li a{display:inline-flex;align-items:center;gap:var(--s-2);border:1px solid var(--color-line);border-radius:999px;padding:.3rem .8rem .3rem .35rem;text-decoration:none;font-size:var(--t-sm);font-weight:600;color:var(--color-ink);background:var(--color-bg)}
.steps li a:hover{border-color:var(--color-accent)}
.steps b{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;border-radius:999px;background:var(--color-ink);color:var(--color-on-accent);font-size:var(--t-xs)}
.branch{font-size:var(--t-sm);color:var(--color-muted);margin:0}
.hubpage a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.hubpage a.btn{text-decoration:none}.hubpage a.btn-primary{color:var(--color-on-accent)}.hubpage a.btn-primary:hover{color:var(--color-on-accent)}

/* BMS shell with the dev bar: keep the sidebar foot above the bar; inert nav items look inert. */
body.has-devbar .admin-sidebar{height:calc(100vh - var(--s-8) - var(--s-5))}
@media(max-width:768px){body.has-devbar .admin-sidebar{height:auto}}
.admin-nav a:not([href]){cursor:default}
.admin-nav a:not([href]):hover{background:transparent;color:var(--color-ink)}
.admin-sidebar-foot .who{display:block;font-size:var(--t-sm);font-weight:700;color:var(--color-ink);margin-bottom:var(--s-2)}

/* Round 2 marks */
.newmark{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-style:normal;color:var(--color-accent-text);background:var(--color-bg);border:1px solid var(--color-accent);border-radius:999px;padding:.1rem .55rem;margin-left:var(--s-2);vertical-align:middle;white-space:normal}
.screens li .newmark{margin-left:auto}
.hubpage h3 .newmark{font-size:var(--t-xs)}
@media (max-width:640px){.screens li{flex-wrap:wrap}.screens a{white-space:normal;overflow-wrap:anywhere}}
@media (max-width:640px){.hubpage .wrap{max-width:100%;box-sizing:border-box}.steps li a{max-width:100%;overflow-wrap:anywhere}.flowrow{min-width:0}}
