/* components.css — buttons, truth chips, cards, chips, page sections. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 26px;border-radius:var(--r-pill);
  text-decoration:none;color:var(--text-0);font-size:var(--fs-md);font-weight:400;border:1.5px solid var(--line-glass);background:rgba(10,24,44,.55);
  transition:box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast),transform var(--dur-fast),background var(--dur-fast)}
.btn img{width:20px;height:20px}
.btn:hover{border-color:var(--line-strong);box-shadow:var(--glow-normal);color:#fff;background:rgba(18,40,66,.7)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-glow{border:0;position:relative;background:linear-gradient(rgba(8,16,34,.92),rgba(8,16,34,.92)) padding-box,linear-gradient(90deg,#a98bff,#7fe9f5) border-box;border:1.6px solid transparent;
  box-shadow:0 0 14px rgba(150,140,255,.35),0 0 18px rgba(110,230,240,.25)}
.btn-glow:hover{box-shadow:0 0 18px rgba(170,150,255,.6),0 0 26px rgba(120,240,250,.45)}
.btn-primary{background:linear-gradient(90deg,rgba(120,100,240,.35),rgba(80,200,220,.3));border-color:var(--line-strong)}
.btn-ghost{background:transparent;border-color:var(--line-soft)}
.state-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--r-pill);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  border:1px solid currentColor;line-height:1.3;white-space:nowrap;vertical-align:middle}
.state-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.state-chip-sm{font-size:.64rem;padding:1px 8px 1px 6px}
.state-proven{color:var(--state-proven);background:rgba(95,227,161,.08)}
.state-dev{color:var(--state-dev);background:rgba(255,201,107,.08)}
.state-concept{color:var(--state-concept);background:rgba(194,176,255,.08)}
.state-badge{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--text-2)}
.page-hero{position:relative;padding:var(--s-5) 0 var(--s-6);border-bottom:1px solid var(--line-soft);margin-bottom:var(--s-6)}
.page-hero h1{margin:var(--s-2) 0 var(--s-3)}
.page-icon{width:54px;height:54px;padding:12px;border-radius:50%;border:1px solid var(--line-glass);background:rgba(10,30,50,.6);box-shadow:var(--glow-normal);margin-bottom:var(--s-4)}
.page-tagline{font-size:var(--fs-sm);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-2)}
.page-lead{font-size:var(--fs-lg);color:var(--text-1);margin-top:var(--s-4)}
.page-section{margin-bottom:var(--s-7)}
.page-section h2{margin-bottom:var(--s-4)}
.page-section p+p{margin-top:var(--s-3)}
.page-section ul:not([class]){padding-left:1.2em;display:grid;gap:6px;max-width:var(--measure)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4)}
.card{padding:var(--s-5);border-radius:var(--r-md);border:1px solid var(--line-soft);background:var(--surface-card)}
.card h3{font-size:var(--fs-md);margin-bottom:var(--s-2)}
.card p{font-size:var(--fs-sm)}
a.card{display:block;text-decoration:none;color:inherit;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)}
a.card:hover{border-color:var(--line-glass);box-shadow:var(--glow-normal);transform:translateY(-2px)}
.notice{padding:var(--s-4) var(--s-5);border-radius:var(--r-md);border:1px dashed var(--line-glass);background:rgba(10,26,44,.55);font-size:var(--fs-sm)}
.chip-list{display:flex;flex-wrap:wrap;gap:var(--s-3);list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border-radius:var(--r-pill);border:1px solid var(--line-soft);background:rgba(10,24,44,.6);text-decoration:none;color:var(--text-0);font-size:var(--fs-sm)}
a.chip:hover,button.chip:hover{border-color:var(--line-glass);box-shadow:var(--glow-subtle)}
.page-actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line-soft);font-size:var(--fs-xs);color:var(--text-2);letter-spacing:.06em}
.motion-toggle img{width:18px;height:18px;opacity:.85}
.motion-toggle:hover{color:#fff;border-color:var(--line-glass)}
.motion-toggle[aria-pressed="false"] img{opacity:.4}
.status-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.status-table th,.status-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.status-table th{color:var(--text-2);font-weight:500;font-size:var(--fs-xs);letter-spacing:var(--track-caps);text-transform:uppercase}
.status-table a{color:var(--text-0)}
.search-box{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5)}
.search-box input{flex:1 1 280px;min-height:52px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line-glass);background:rgba(6,16,30,.75);color:#fff;font-size:var(--fs-md)}
.search-results{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.search-results a{display:block;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);border:1px solid var(--line-soft);background:var(--surface-card);text-decoration:none;color:var(--text-1)}
.search-results a:hover{border-color:var(--line-glass);box-shadow:var(--glow-subtle)}
.search-results .sr-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#fff;font-size:var(--fs-lg)}
.search-results .sr-summary{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--text-2)}
.guide-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-4);list-style:none;margin:0;padding:0}
.guide-chips a{display:flex;flex-direction:column;gap:6px;min-height:88px;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);border:1px solid var(--line-glass);background:var(--surface-card);text-decoration:none;color:#fff;font-size:var(--fs-lg)}
.guide-chips a span{font-size:var(--fs-sm);color:var(--text-2)}
.guide-chips a:hover{box-shadow:var(--glow-normal);border-color:var(--line-strong)}
@media (max-width:640px){
  .status-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .status-table,.status-table tbody,.status-table tr,.status-table td{display:block;width:100%}
  .status-table tr{padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .status-table td{border:0;padding:3px 0}
}