/* shared.css — common UI for the harmonic suite (Player, Prioritizer, Generator, Admin).
   Single source of truth for the cross-page nav and the base button/card/input styling.
   MUST sit in the same directory as the HTML files on Netlify (like semantic-rules.js).
   Page-specific stylesheets load AFTER this file, so a page can still override any rule. */

/* ---- Cross-page tab nav (identical on all four pages) ---- */
.xnav { display:flex; gap:0; border-bottom:2px solid #007bff; margin:16px 0 8px 0; align-items:flex-end; flex-wrap:wrap; }
.xnav a, .xnav span { padding:10px 18px; border-radius:6px 6px 0 0; font-size:15px; text-decoration:none; }
.xnav a { background:#f8f9fa; color:#495057; border:2px solid #dee2e6; border-bottom:2px solid transparent; margin-left:4px; }
.xnav a:first-child { margin-left:0; }
.xnav .active { background:#fff; color:#007bff; font-weight:700; border:2px solid #007bff; border-bottom:2px solid #fff; margin-bottom:-2px; margin-left:4px; }

/* ---- Buttons (blue theme) ---- */
button { padding:10px 18px; border:none; border-radius:6px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; background:#007bff; color:#fff; transition:background .12s; }
button:hover:not(:disabled){ background:#0056b3; }
button:active:not(:disabled){ transform:translateY(1px); }
button:disabled { background:#adb5bd; cursor:not-allowed; }
button.secondary { background:#fff; color:#007bff; border:1px solid #007bff; }
button.secondary:hover:not(:disabled){ background:#eef5ff; }
button.tiny { padding:4px 10px; font-size:12px; }

/* ---- Cards ---- */
.card { background:#fff; border:1px solid #e3e6ea; border-radius:10px; padding:22px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card h2 { font-size:16px; margin:0 0 16px; display:flex; align-items:center; gap:9px; font-weight:700; }

/* ---- Form inputs ---- */
label { display:block; font-size:12px; font-weight:600; color:#495057; margin:0 0 5px; }
input[type=text], select, textarea { width:100%; padding:9px 11px; border:1px solid #ced4da; border-radius:6px; font-family:inherit; font-size:14px; background:#fff; transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#007bff; box-shadow:0 0 0 3px rgba(0,123,255,.15); }

/* ---- Misc shared ---- */
.muted { color:#6c757d; font-size:12px; }
.row { display:grid; gap:14px; }
.row.two { grid-template-columns:1fr 1fr; }
@media(max-width:680px){ .row.two{ grid-template-columns:1fr; } }