/* Axion Radar — protocols_public.php styles (moved out of the page's inline <style> block). */

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
    background:#ffffff; color:#1a1f26;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    padding:20px;
}
.wrap { max-width:1080px; margin:0 auto; }
.layout { display:flex; gap:24px; align-items:flex-start; }

/* ── Left: search + A-Z brand list ── */
.sidebar { width:230px; flex-shrink:0; }
.search-row { position:relative; margin-bottom:14px; }
#search {
    width:100%; padding:12px 14px 12px 40px; font-size:15px;
    border:1px solid #d7dce1; border-radius:8px; outline:none; color:#1a1f26;
}
#search:focus { border-color:#E60005; box-shadow:0 0 0 3px rgba(230,0,5,0.12); }
.search-row svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:0.4; }
.brand-list { list-style:none; margin:0; padding:0; max-height:560px; overflow-y:auto; }
.brand-list li { margin-bottom:2px; }
.brand-btn {
    display:flex; justify-content:space-between; align-items:center; width:100%;
    background:none; border:none; text-align:left; padding:8px 10px; border-radius:6px;
    font-size:14px; color:#1a1f26; cursor:pointer; font-family:inherit;
}
.brand-btn:hover { background:#fafbfc; }
.brand-btn.active { background:#fdeaea; color:#E60005; font-weight:600; }
.brand-btn .n { color:#9aa2ac; font-size:12px; }
.brand-btn.active .n { color:#E60005; opacity:0.7; }
.brand-btn.all-brands { border-bottom:1px solid #eceff2; margin-bottom:6px; padding-bottom:10px; font-weight:600; }
.request-btn {
    display:block; width:100%; margin-top:14px; padding:11px 14px; text-align:center;
    background:#fff; color:#E60005; border:1px solid #E60005; border-radius:8px;
    font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
}
.request-btn:hover { background:#fdeaea; }
.request-btn.inline { width:auto; display:inline-block; margin-top:10px; padding:9px 16px; }

/* ── Request-a-protocol modal ── */
.modal-overlay {
    position:fixed; inset:0; background:rgba(20,22,26,0.5);
    align-items:center; justify-content:center; padding:20px; z-index:100;
}
/* An explicit `display` in an author rule always wins over the browser's built-in
   [hidden]{display:none}, regardless of selector specificity — so display:flex has to be scoped
   to the non-hidden state, or the modal shows on page load instead of only after opening it. */
.modal-overlay:not([hidden]) { display:flex; }
.modal-card { background:#fff; border-radius:10px; padding:26px; width:100%; max-width:420px; box-shadow:0 20px 50px rgba(0,0,0,0.25); }
.modal-card h3 { margin:0 0 6px; font-size:17px; color:#1a1f26; }
.modal-card .modal-sub { font-size:13px; color:#6b7280; margin:0 0 18px; }
.modal-card label { display:block; font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px; }
.modal-field { margin-bottom:14px; }
.modal-field input, .modal-field textarea {
    width:100%; padding:10px 12px; border:1px solid #d7dce1; border-radius:6px; font-size:14px;
    font-family:inherit; color:#1a1f26; box-sizing:border-box;
}
.modal-field input:focus, .modal-field textarea:focus { outline:none; border-color:#E60005; box-shadow:0 0 0 3px rgba(230,0,5,0.12); }
.modal-field textarea { resize:vertical; min-height:60px; }
.modal-actions { display:flex; gap:10px; margin-top:18px; }
.modal-actions button { flex:1; padding:11px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; border:none; }
.modal-cancel { background:#f0f2f4; color:#4b5563; }
.modal-cancel:hover { background:#e5e8eb; }
.modal-submit { background:#E60005; color:#fff; }
.modal-submit:hover { background:#c40004; }
.modal-submit:disabled { opacity:0.6; cursor:not-allowed; }
.modal-msg { font-size:13px; margin-top:12px; display:none; }
.modal-msg.error { color:#E60005; }
.modal-msg.success { color:#1a7f4b; }
.modal-success-panel { text-align:center; padding:10px 0; }
.modal-success-panel .icon { font-size:34px; margin-bottom:8px; }

/* ── Right: results table ── */
.results { flex:1; min-width:0; }
.count { font-size:13px; color:#6b7280; margin-bottom:10px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
thead th {
    text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em;
    color:#6b7280; border-bottom:2px solid #eceff2; padding:8px 10px;
}
tbody td { padding:10px; border-bottom:1px solid #f0f2f4; vertical-align:top; }
tbody tr:hover { background:#fafbfc; }
.brand-cell { font-weight:600; }
.muted { color:#9aa2ac; }
/* Signals confidence in a protocol's command list — Alpha/Beta means it hasn't been fully
   verified against real hardware yet (e.g. built from a manufacturer's reference doc);
   Certified is the opposite end, meaning Axion has physically verified it. Same distinction
   as the dashboard's maturity badge, shown here too since a prospect deciding "is this
   supported?" should know. */
.badge-maturity {
    display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; padding:2px 7px; border-radius:20px; vertical-align:1px;
}
.name-cell { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-start; }
.badge-alpha     { background:#f3e8ff; color:#9333ea; }
.badge-beta      { background:#dbeafe; color:#2563eb; }
.badge-certified { background:#dcfce7; color:#16a34a; }
.empty, .no-results { text-align:center; color:#9aa2ac; padding:40px 10px; font-size:14px; }
.software-integrations { margin-top:32px; padding-top:24px; border-top:1px solid #eceff2; }
.si-heading { font-size:16px; margin:0 0 4px; color:#1a1f26; }
.si-sub { font-size:13px; color:#6b7280; margin:0 0 14px; }
.footer { text-align:center; color:#b2b8c0; font-size:11px; margin-top:20px; }
.footer a { color:#9aa2ac; }

@media (max-width: 640px) {
    .layout { flex-direction:column; }
    .sidebar { width:100%; }
    .brand-list { max-height:220px; }
}