/* ============================================================
   CTIO Research Hub — shared shell styles
   Built on emovis-tokens.css
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink-900);
  background:var(--mist);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
::selection{background:var(--cerise-600);color:#fff}
a{color:inherit}

/* ---------- Top bar ---------- */
.hub-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--grey-200);
}
.hub-topbar .bar-in{
  max-width:1080px;margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hub-topbar .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.hub-topbar img{height:26px;display:block}
.hub-topbar .brand .sep{width:1px;height:20px;background:var(--grey-200)}
.hub-topbar .brand .unit{font-size:13px;font-weight:var(--fw-semibold);letter-spacing:.04em;color:var(--ink-500)}
.hub-nav{display:flex;gap:6px;align-items:center}
.hub-nav a{
  font-size:13px;font-weight:var(--fw-medium);color:var(--ink-500);
  text-decoration:none;padding:8px 14px;border-radius:var(--r-pill);
  transition:.15s;
}
.hub-nav a:hover{color:var(--cerise-600);background:var(--cerise-050)}
.hub-nav a.active{color:var(--cerise-600);background:var(--cerise-050)}
.hub-nav a.home{display:flex;align-items:center;gap:7px}
.hub-nav a.home svg{width:15px;height:15px;stroke-width:2}
.hub-nav a.proto{
  display:flex;align-items:center;gap:7px;margin-left:6px;
  background:var(--cerise-600);color:#fff;font-weight:var(--fw-semibold);
  box-shadow:var(--shadow-cerise);
}
.hub-nav a.proto:hover{background:var(--cerise-700);color:#fff}
.hub-nav a.proto svg{width:14px;height:14px;stroke-width:2.2}

/* ---------- Page shell ---------- */
.hub-main{max-width:1080px;margin:0 auto;padding:56px 40px 96px}
.hub-doc{max-width:840px;margin:0 auto;padding:56px 40px 96px}

/* breadcrumb */
.crumb{
  display:flex;align-items:center;gap:9px;font-size:13px;
  color:var(--ink-500);margin-bottom:26px;font-weight:var(--fw-medium);
}
.crumb a{color:var(--ink-500);text-decoration:none}
.crumb a:hover{color:var(--cerise-600)}
.crumb .car{color:var(--grey-300)}
.crumb .here{color:var(--ink-900)}

/* eyebrow + headings */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:var(--fw-semibold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cerise-600);margin-bottom:16px;
}
.eyebrow .bar{width:22px;height:2px;background:var(--cerise-600);border-radius:2px}
h1.page-title{font-size:40px;font-weight:var(--fw-extrabold);letter-spacing:-.025em;line-height:1.05}
.page-lede{font-size:17px;color:var(--ink-700);max-width:62ch;line-height:1.6;margin-top:14px}

/* doc content typography */
.doc-body h2{font-size:23px;font-weight:var(--fw-bold);letter-spacing:-.01em;margin:46px 0 16px;padding-top:30px;border-top:1px solid var(--grey-200)}
.doc-body h2:first-child{border-top:none;padding-top:0;margin-top:32px}
.doc-body h3{font-size:15px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-500);margin:30px 0 12px}
.doc-body p{font-size:15.5px;color:var(--ink-700);margin:12px 0;line-height:1.66}
.doc-body ul,.doc-body ol{margin:12px 0 12px 4px;padding-left:22px}
.doc-body li{font-size:15.5px;color:var(--ink-700);margin:7px 0;line-height:1.6}
.doc-body b,.doc-body strong{color:var(--ink-900);font-weight:var(--fw-semibold)}
.doc-body a{color:var(--cerise-600);text-decoration:none;border-bottom:1px solid var(--cerise-200)}
.doc-body a:hover{border-bottom-color:var(--cerise-600)}
/* buttons inside content must keep their button styling, not the link styling above */
.doc-body a.btn{border-bottom:none}
.doc-body a.btn-primary{color:#fff}
.doc-body a.btn-ghost{color:var(--ink-700)}
.doc-body a.btn-ghost:hover{color:var(--cerise-600)}
.doc-body a.proto{color:#fff}

.note{
  background:var(--cerise-050);border:1px solid var(--cerise-100);
  border-radius:var(--r-md);padding:18px 22px;margin:22px 0;
  font-size:14.5px;color:var(--ink-700);line-height:1.6;
}
.note b{color:var(--cerise-700)}

.callout{
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--grey-200);border-left:3px solid var(--cerise-600);
  border-radius:var(--r-md);padding:18px 22px;margin:22px 0;
}
.callout svg{width:22px;height:22px;color:var(--cerise-600);flex:none;margin-top:1px;stroke-width:1.8}
.callout p{margin:0;font-size:14.5px}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:18px 0;background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-md);overflow:hidden}
.tbl th{
  text-align:left;font-size:11.5px;font-weight:var(--fw-semibold);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-500);background:var(--cloud);
  padding:13px 16px;border-bottom:1px solid var(--grey-200);
}
.tbl td{padding:13px 16px;font-size:14px;color:var(--ink-700);border-bottom:1px solid var(--grey-200);vertical-align:top;line-height:1.5}
.tbl tr:last-child td{border-bottom:none}
.tbl td b{color:var(--ink-900)}
.tbl .mono{font-family:'Poppins';font-size:12.5px;color:var(--ink-500)}

/* fields table (key/value) */
.kv{width:100%;border-collapse:collapse;margin:18px 0;background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-md);overflow:hidden}
.kv td{padding:13px 18px;border-bottom:1px solid var(--grey-200);font-size:14.5px}
.kv tr:last-child td{border-bottom:none}
.kv td:first-child{width:230px;font-weight:var(--fw-semibold);color:var(--ink-900);background:var(--cloud);border-right:1px solid var(--grey-200)}
.kv td:last-child{color:var(--ink-500)}

/* status badge */
.badge{font-size:11.5px;font-weight:var(--fw-semibold);padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-done{background:#E6F4EF;color:#2E8B6B}
.b-open{background:#FCF1DF;color:#B07C1E}
.b-prog{background:var(--steel-100);color:var(--steel-600)}

/* buttons */
.btn{
  font-family:var(--font);font-size:14.5px;font-weight:var(--fw-semibold);
  border:none;border-radius:var(--r-pill);padding:12px 24px;cursor:pointer;
  transition:.16s;letter-spacing:.01em;text-decoration:none;display:inline-flex;
  align-items:center;gap:9px;
}
.btn-primary{background:var(--cerise-600);color:#fff;box-shadow:var(--shadow-cerise)}
.btn-primary:hover{background:var(--cerise-700)}
.btn-primary:disabled{background:var(--grey-300);color:#fff;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--ink-700);border:1.5px solid var(--grey-200)}
.btn-ghost:hover{border-color:var(--cerise-200);color:var(--cerise-600)}

/* footer */
.hub-footer{
  max-width:1080px;margin:0 auto;padding:28px 40px 48px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12.5px;color:var(--grey-400);border-top:1px solid var(--grey-200);
}
.hub-footer b{color:var(--ink-700);font-weight:var(--fw-semibold)}
.hub-footer .build-tag{font-size:12px;font-weight:var(--fw-semibold);color:var(--ink-500);padding:3px 10px;border:1px solid var(--grey-200);border-radius:var(--r-pill);background:var(--cloud);margin-left:auto}

@media(max-width:720px){
  .hub-topbar .bar-in,.hub-main,.hub-doc,.hub-footer{padding-left:22px;padding-right:22px}
  .hub-nav{display:none}
  h1.page-title{font-size:30px}
  .kv td:first-child{width:140px}
}