/* Quiet Authority v2 — shared stylesheet for Example Domain clone */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:18px;
  background:#E9ECF0;
  color:#344054;
  font-family:"Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  padding:24px;
}
body.sub{
  align-content:start;
  place-items:center;
}

/* Shared nav */
.site-nav{
  width:100%;
  max-width:600px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:13.5px;
}
.site-nav.wide{max-width:680px}
.brand{
  font-family:"Inter Tight","Inter",-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.01em;
  color:#101828;
  text-decoration:none;
  background:#fff;
  border:1px solid #E2E6EB;
  border-radius:999px;
  padding:6px 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.brand:hover{border-color:#B2C4FF}
.nav-links{
  display:flex;
  gap:4px;
  background:#fff;
  border:1px solid #E2E6EB;
  border-radius:999px;
  padding:4px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
.nav-links a{
  color:#344054;
  text-decoration:none;
  font-weight:500;
  font-size:13.5px;
  padding:6px 12px;
  border-radius:999px;
}
.nav-links a:hover{background:#F2F4F7;color:#101828}
.nav-links a[aria-current="page"]{background:#101828;color:#fff}
.nav-links a:focus-visible,.brand:focus-visible{outline:3px solid #B2C4FF;outline-offset:2px}

/* Card */
.card{
  width:100%;
  max-width:600px;
  background:#fff;
  border:1px solid #E2E6EB;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);
  padding:40px 40px 28px;
  text-align:left;
}
.card.wide{max-width:680px}

/* Pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  background:#F2F4F7;
  border:1px solid #E2E6EB;
  border-radius:999px;
  padding:5px 12px;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#667085;
}
.dot{width:7px;height:7px;border-radius:50%;background:#12B76A;box-shadow:0 0 0 3px rgba(18,183,106,.15)}

/* Type */
h1{
  margin:0 0 12px;
  font-family:"Inter Tight","Inter",-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:30px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-0.02em;
  color:#101828;
}
h2{
  margin:24px 0 8px;
  font-family:"Inter Tight","Inter",sans-serif;
  font-size:17px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#101828;
}
.body-copy{margin:0 0 20px;max-width:54ch;color:#344054}
p{margin:0 0 14px;max-width:60ch}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;
  background:#F2F4F7;
  border:1px solid #E2E6EB;
  border-radius:4px;
  padding:1px 6px;
  white-space:nowrap;
  color:#101828;
}
pre{margin:0;overflow:auto}
pre code{display:block;background:transparent;border:0;padding:11px 13px;white-space:pre;font-size:13.5px;line-height:1.55}

/* Divider + link row */
.divider{height:1px;background:#E2E6EB;margin:20px 0 16px}
.link-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.action-link{
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  color:#2F3D9B;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.action-link:hover{color:#1A256E;text-decoration-thickness:2px}
.action-link:focus-visible{outline:3px solid #B2C4FF;outline-offset:4px;border-radius:2px}
.meta{font-size:13px;font-weight:500;letter-spacing:.04em;color:#667085}
.provenance{
  margin:18px 0 0;
  padding-top:14px;
  border-top:1px solid #F2F4F7;
  font-size:13px;
  line-height:1.5;
  color:#667085;
}
.provenance a{color:#2F3D9B;text-underline-offset:3px}
.provenance a:hover{color:#1A256E}

/* Table */
.table-wrap{overflow-x:auto;border:1px solid #E2E6EB;border-radius:8px;margin:10px 0 4px}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #EAEFF4;vertical-align:top}
thead th{background:#F8FAFC;color:#101828;font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* Snippets */
.snippet{border:1px solid #E2E6EB;border-radius:8px;overflow:hidden;background:#F8FAFC;margin:0 0 12px}
.snippet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 12px;background:#F2F4F7;border-bottom:1px solid #E2E6EB;font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#667085}
.snippet-head button{font:inherit;font-size:12px;letter-spacing:0;text-transform:none;border:1px solid #D0D5DD;background:#fff;color:#2F3D9B;border-radius:6px;padding:4px 10px;cursor:pointer}
.snippet-head button:hover{border-color:#2F3D9B;color:#1A256E}
.snippet-head button:focus-visible{outline:3px solid #B2C4FF;outline-offset:2px}

/* Footer */
.site-footer{font-size:13px;color:#667085;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.site-footer a{color:#667085;text-underline-offset:3px}
.site-footer a:hover{color:#1A256E}
.site-footer a:focus-visible{outline:3px solid #B2C4FF;outline-offset:2px;border-radius:2px}
.sep{opacity:.6}

.skip-link{position:absolute;left:-9999px;top:8px;background:#101828;color:#fff;padding:8px 14px;border-radius:6px;z-index:10}
.skip-link:focus{left:8px}

/* Responsive */
@media (max-width:600px){
  body{padding:16px}
  h1{font-size:26px}
  .body-copy,.action-link{font-size:15px}
  .card{padding:28px 24px 22px;border-radius:10px}
  .site-nav{flex-direction:column;align-items:stretch}
  .brand{align-self:flex-start}
  .nav-links{justify-content:space-between}
  .nav-links a{padding:6px 10px}
  .link-row{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}
