/* OpenURC Archive — Fira Sans + Fira Code, Teal/Dark */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0d9488;--teal-dark:#0f766e;--teal-light:#14b8a6;
  --dark:#1e293b;--darker:#0f172a;--slate:#475569;--slate-light:#94a3b8;
  --bg:#f8fafc;--white:#fff;--border:#e2e8f0;
  --font:"Fira Sans",system-ui,sans-serif;--mono:"Fira Code","Fira Mono",monospace;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--dark);background:var(--bg);line-height:1.7}

/* Layout */
.spec-wrap{max-width:960px;margin:0 auto;padding:0 1.25rem}
.spec-header{background:var(--darker);color:var(--white);padding:1rem 0;border-bottom:3px solid var(--teal)}
.spec-header .spec-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.spec-logo{font-size:1.35rem;font-weight:700;color:var(--white);text-decoration:none;letter-spacing:-.5px}
.spec-logo span{color:var(--teal-light)}
.spec-nav{display:flex;flex-wrap:wrap;gap:.15rem}
.spec-nav a{color:var(--slate-light);text-decoration:none;font-size:.85rem;padding:.3rem .6rem;border-radius:4px;transition:color .2s,background .2s}
.spec-nav a:hover,.spec-nav a.spec-active{color:var(--white);background:rgba(255,255,255,.08)}

/* Breadcrumb */
.spec-crumb{font-size:.8rem;color:var(--slate);padding:.75rem 0;border-bottom:1px solid var(--border)}
.spec-crumb a{color:var(--teal);text-decoration:none}
.spec-crumb a:hover{text-decoration:underline}

/* Main */
.spec-main{padding:2rem 0 3rem}
.spec-main h1{font-size:1.85rem;color:var(--darker);margin-bottom:.5rem;line-height:1.25}
.spec-main h2{font-size:1.35rem;color:var(--dark);margin:2rem 0 .75rem;padding-bottom:.4rem;border-bottom:2px solid var(--teal)}
.spec-main h3{font-size:1.1rem;color:var(--teal-dark);margin:1.5rem 0 .5rem}
.spec-main p{margin-bottom:1rem;color:var(--dark)}
.spec-main ul,.spec-main ol{margin:0 0 1rem 1.5rem}
.spec-main li{margin-bottom:.35rem}
.spec-main a{color:var(--teal);text-decoration:none}
.spec-main a:hover{text-decoration:underline;color:var(--teal-dark)}

/* Subtitle / lead */
.spec-lead{font-size:1.05rem;color:var(--slate);margin-bottom:1.5rem;line-height:1.6}

/* Status badge */
.spec-badge{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:.2rem .55rem;border-radius:3px;vertical-align:middle}
.spec-badge-approved{background:#dcfce7;color:#166534}
.spec-badge-draft{background:#fef9c3;color:#854d0e}
.spec-badge-active{background:#dbeafe;color:#1e40af}

/* Spec meta box */
.spec-meta{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--teal);padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 6px 6px 0}
.spec-meta dt{font-weight:600;color:var(--dark);font-size:.85rem;margin-top:.5rem}
.spec-meta dt:first-child{margin-top:0}
.spec-meta dd{color:var(--slate);font-size:.9rem;margin-left:0}

/* Code / mono */
code,.spec-mono{font-family:var(--mono);font-size:.88em;background:#f1f5f9;padding:.15em .35em;border-radius:3px}

/* Cards */
.spec-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;margin:1.5rem 0}
.spec-card{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:1.25rem;transition:border-color .2s}
.spec-card:hover{border-color:var(--teal)}
.spec-card h3{margin:0 0 .5rem;font-size:1rem;color:var(--dark)}
.spec-card p{font-size:.9rem;color:var(--slate);margin:0}
.spec-card a{text-decoration:none;color:inherit}
.spec-card a:hover{text-decoration:none}

/* Timeline */
.spec-timeline{border-left:3px solid var(--teal);margin:1.5rem 0 1.5rem .75rem;padding-left:1.5rem}
.spec-timeline-item{position:relative;margin-bottom:1.25rem}
.spec-timeline-item::before{content:"";position:absolute;left:-1.85rem;top:.45rem;width:10px;height:10px;background:var(--teal);border-radius:50%}
.spec-timeline-year{font-weight:700;color:var(--teal-dark);font-size:.9rem}
.spec-timeline-text{color:var(--dark);font-size:.92rem}

/* Table */
.spec-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.9rem}
.spec-table th{background:var(--darker);color:var(--white);text-align:left;padding:.55rem .75rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.3px}
.spec-table td{padding:.5rem .75rem;border-bottom:1px solid var(--border)}
.spec-table tr:hover td{background:#f1f5f9}

/* See also box */
.spec-related{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:1.25rem;margin:2rem 0}
.spec-related h3{margin:0 0 .75rem;font-size:.95rem;color:var(--slate);text-transform:uppercase;letter-spacing:.5px}
.spec-related ul{margin:0;padding:0;list-style:none}
.spec-related li{padding:.3rem 0}
.spec-related li::before{content:"\2192";color:var(--teal);margin-right:.5rem}

/* Footer */
.spec-footer{background:var(--darker);color:var(--slate-light);padding:1.5rem 0;font-size:.82rem;border-top:3px solid var(--teal)}
.spec-footer .spec-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.spec-footer a{color:var(--teal-light);text-decoration:none}
.spec-footer a:hover{text-decoration:underline}
.spec-footer-nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem}

/* Archive notice */
.spec-archive{background:#fffbeb;border:1px solid #fbbf24;border-radius:6px;padding:.75rem 1rem;margin-bottom:1.5rem;font-size:.88rem;color:#92400e}

/* Responsive */
@media(max-width:640px){
  .spec-header .spec-wrap{flex-direction:column;align-items:flex-start}
  .spec-main h1{font-size:1.45rem}
  .spec-cards{grid-template-columns:1fr}
  .spec-footer .spec-wrap{flex-direction:column}
}
