/* Shared page furniture: the topbar breadcrumb, the centred stage, the
   button/pill/kbd vocabulary and the footer. Both tools and the index
   are built out of these, so a tool page's own <style> block only has
   to carry what is genuinely unique to that tool. */

/* ---------- topbar ---------- */

.topbar{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:32px 40px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* breadcrumb: HEY5 TOOLS / <this tool> */
.crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.wordmark{
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:inherit;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:color 200ms;
}
.wordmark:hover{color:rgba(255,255,255,.85)}
.crumb-sep{opacity:.35}
.crumb-current{color:rgba(255,255,255,.78)}

.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}
.label-r{white-space:nowrap}

/* ---------- stage ---------- */

.stage{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 24px 24px;
}

/* ---------- buttons ---------- */

.btn{
  cursor:pointer;
  display:inline-block;
  text-align:center;
  text-decoration:none;   /* an <a> can wear .btn — the install CTAs do */
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  border:none;
  border-radius:999px;
  padding:11px 20px;
  background:var(--surface-2);
  color:var(--ink);
  transition:background 160ms, opacity 200ms, transform 140ms var(--ease);
}
.btn:hover{background:#26262a}
.btn:active{transition:none;transform:scale(.94)}
.btn:disabled{opacity:.35;cursor:default}

.btn-primary{
  background:rgba(255,255,255,.94);
  color:var(--page);
  text-transform:uppercase;
}
.btn-primary:hover{background:#fff;opacity:.9}
.btn-primary:active{background:rgba(255,255,255,.75)}
.btn-primary:disabled{opacity:.35}

.btn-ghost{
  background:transparent;
  border:1px solid var(--line-strong);
  text-transform:uppercase;
}
.btn-ghost:hover{background:transparent;border-color:rgba(255,255,255,.4)}

.btn-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ---------- segmented toggle ---------- */

.segs{
  display:flex;
  gap:4px;
  max-width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
}
.segs button{
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  white-space:nowrap;
  border:none;
  border-radius:999px;
  padding:8px 14px;
  background:transparent;
  color:rgba(255,255,255,.55);
  transition:background 220ms, color 220ms, transform 140ms var(--ease);
}
.segs button:hover{color:rgba(255,255,255,.85)}
.segs button:active{transition:none;transform:scale(.94)}
.segs button[aria-pressed="true"]{
  background:rgba(255,255,255,.92);
  color:var(--page);
}
.segs button:disabled{opacity:.32;cursor:not-allowed}

/* ---------- pills ---------- */

.pill{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:8px 14px;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color 140ms var(--ease), background 140ms var(--ease);
}
.pill:hover{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.05);
}
.pill:active{transform:translateY(1px)}
.pill.copied{
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.08);
}

/* ---------- keyboard hint ---------- */

.hint{
  margin-top:34px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
}
.hint kbd{
  font-family:inherit;
  font-size:inherit;
  padding:2px 6px;
  border-radius:5px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05);
  color:var(--muted);
}

/* ---------- footer ---------- */

.footer{
  position:relative;
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:28px 24px 32px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted);
  text-align:center;
}
.footer a{
  color:rgba(255,255,255,.52);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:color 200ms, border-color 200ms;
}
.footer a:hover{
  color:rgba(255,255,255,.85);
  border-bottom-color:rgba(255,255,255,.4);
}
.footer .dot{opacity:.5}

/* ---------- responsive ---------- */

@media (max-width:600px){
  .topbar{padding:24px 20px;font-size:11px}
  .crumbs{gap:8px}
  /* the right-hand tag is decorative — drop it before it crowds the crumbs */
  .label-r{display:none}
  .stage{padding:0 16px 24px}
  .footer{
    flex-direction:column;
    gap:14px;
    font-size:11px;
    line-height:1.5;
    padding:24px 20px 30px;
  }
  .footer .dot{display:none}
  .footer a{display:inline;border-bottom-width:1px}
}

@media (max-width:380px){
  .topbar{letter-spacing:.12em}
}