/* Ortobro v0.1 alpha – shared styles */
:root{
  --navy:#0F2A44; --navy-2:#16375A; --teal:#0E7C70; --teal-light:#5FD3C4;
  --mint:#E8F4F2; --coral:#F07A5A; --ink:#1B2B3A; --muted:#4A5C6B;
  --bg:#F7FAFA; --border:#DDEAE8; --border-2:#D5E6E3; --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh;
  font-family:"Avenir Next","Segoe UI",Inter,"Helvetica Neue",Arial,system-ui,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--navy)}
img{max-width:100%; height:auto}
.site-header{
  background:var(--white); border-bottom:1px solid var(--border);
  padding:14px clamp(16px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  position:sticky; top:0; z-index:40;
  box-shadow:0 1px 0 rgba(15,42,68,.04);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand img{height:40px; width:auto; display:block}
.alpha-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy); background:var(--mint); border:1px solid var(--border-2);
  padding:4px 10px; border-radius:999px;
}
.alpha-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.nav{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center}
.nav a{
  color:var(--navy); text-decoration:none; font-size:.92rem; font-weight:600;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--teal); color:var(--teal)}
.site-main{flex:1; padding:28px clamp(16px,4vw,48px) 48px; max-width:1100px; width:100%; margin:0 auto}
.site-footer{
  padding:20px clamp(16px,4vw,48px); color:var(--muted); font-size:.85rem;
  border-top:1px solid var(--border); background:var(--white);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;
}
h1{font-size:clamp(1.7rem,3.5vw,2.4rem); line-height:1.15; letter-spacing:-.02em; color:var(--navy); margin:0 0 12px; font-weight:700}
h2{font-size:1.25rem; color:var(--navy); margin:1.6em 0 .55em; font-weight:700}
h3{font-size:1.05rem; color:var(--navy); margin:1.2em 0 .4em; font-weight:700}
.lead{font-size:1.08rem; color:var(--muted); max-width:42em; margin:0 0 1.4em}
.note,.warn,.draft{
  border-radius:12px; padding:14px 16px; margin:0 0 1.4em; font-size:.95rem;
}
.note{background:var(--mint); border:1px solid var(--border-2); color:var(--navy)}
.warn{background:#FFF4F0; border:1px solid #F5C4B4; color:#6B2E1E}
.draft{background:#FFF8E8; border:1px solid #F0D48A; color:#5C4810; font-weight:600}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:8px}
.card{
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:20px 20px 18px; text-decoration:none; color:inherit;
  box-shadow:0 10px 28px -18px rgba(15,42,68,.28);
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; gap:6px;
}
a.card:hover{transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(15,42,68,.35); border-color:var(--teal-light)}
.card .kicker{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); font-weight:700}
.card strong{color:var(--navy); font-size:1.05rem}
.card span{color:var(--muted); font-size:.92rem; line-height:1.45}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600;
  color:var(--navy); background:var(--white); border:1px solid var(--border-2);
  padding:7px 14px 7px 12px; border-radius:999px; margin-bottom:18px;
  box-shadow:0 1px 2px rgba(15,42,68,.05);
}
.hero-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--coral)}
.toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 18px}
.toolbar input[type="search"]{
  flex:1; min-width:200px; font:inherit; padding:10px 14px; border-radius:10px;
  border:1px solid var(--border-2); background:var(--white); color:var(--ink);
}
.toolbar input:focus{outline:2px solid var(--teal-light); border-color:var(--teal)}
.count{font-size:.9rem; color:var(--muted)}
details.region{
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  margin:0 0 10px; overflow:hidden;
}
details.region>summary{
  cursor:pointer; list-style:none; padding:12px 16px; font-weight:700; color:var(--navy);
  display:flex; gap:10px; align-items:center;
  background:linear-gradient(180deg,#fff, #F9FCFC);
}
details.region>summary::-webkit-details-marker{display:none}
details.region>summary .region-name{flex:1}
details.region>summary .count{margin-left:auto; font-weight:600}
details.region>summary::after{content:"+"; color:var(--teal); font-size:1.2rem; font-weight:600; margin-left:8px}
details.region[open]>summary::after{content:"−"}
details.region ul{list-style:none; margin:0; padding:0 0 8px}
details.region li{
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
  padding:8px 16px; border-top:1px solid #EDF3F2; font-size:.95rem;
}
details.region li .typ{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--teal); background:var(--mint); padding:2px 7px; border-radius:999px;
}
details.region li .src{font-size:.82rem; white-space:nowrap}
details.region li.hidden, details.region.hidden, .group.hidden{display:none}
.group-title{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); font-weight:700; margin:1.4em 0 .6em}
.prose table{border-collapse:collapse; width:100%; margin:1em 0; font-size:.92rem; overflow-x:auto; display:block}
.prose th,.prose td{border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top}
.prose th{background:var(--mint); color:var(--navy)}
.prose blockquote{
  margin:1em 0; padding:10px 16px; border-left:4px solid var(--teal);
  background:var(--mint); color:var(--navy); border-radius:0 10px 10px 0;
}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; background:#EEF3F2; padding:1px 5px; border-radius:4px}
.prose pre{background:#0F2A44; color:#E8F4F2; padding:14px 16px; border-radius:10px; overflow:auto; font-size:.85rem}
.prose pre code{background:none; color:inherit; padding:0}
.prose hr{border:0; border-top:1px solid var(--border); margin:2em 0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.25em 0}
.quick{
  background:var(--white); border:2px solid var(--teal); border-radius:16px;
  padding:18px 20px; margin:0 0 1.6em;
  box-shadow:0 12px 30px -20px rgba(14,124,112,.45);
}
.quick h2{margin-top:0; color:var(--teal); font-size:1rem; text-transform:uppercase; letter-spacing:.08em}
.quick ul{margin:.4em 0 0; padding-left:1.2em}
.section{margin:0 0 1.8em}
.section h2{
  border-bottom:2px solid var(--mint); padding-bottom:6px;
}
.meta{font-size:.88rem; color:var(--muted); margin:0 0 1.2em}
.icd{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--navy); color:#fff; padding:4px 10px; border-radius:8px; font-weight:700; letter-spacing:.02em}
@media (max-width:640px){
  .site-header{padding:12px 14px; gap:10px}
  .brand img{height:34px}
  .nav{width:100%; gap:2px 10px}
  .nav a{font-size:.82rem; padding:4px 0}
  .site-main{padding-top:18px; padding-left:14px; padding-right:14px}
  .quick{padding:14px 14px}
  .cards{grid-template-columns:1fr}
}