/* ================================================================
   PHASOR DIAGRAM — Site Header / Nav CSS
   Source: phasor_diagram.html <style> block 2 (lines 794–848)
   Originally injected at runtime by header.js; duplicated here
   for standalone/local use. Linked before header.js runs.
   ================================================================ */

/* Header container as fixed overlay */
.header-container {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #2c3e50, #3498db);
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.header-left { flex: 0 1 auto; }
.header-container h1 {
    font-size: 14px; margin: 0; color: #fff;
    font-weight: 500; letter-spacing: 0.2px;
}
.header-container h1 a {
    color: #ecf0f1; text-decoration: none; transition: color 0.3s ease;
}
.header-container h1 a:hover { color: #f1c40f; text-decoration: underline; }
.toolkit-title {
    flex: 1; font-size: 18px; font-weight: bold;
    color: #f1c40f; text-align: center; margin: 0 auto;
    padding: 0 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    position: absolute; left: 0; right: 0; width: 60%; max-width: 600px;
}
.header-right {
    flex: 0 0 auto; display: flex; justify-content: flex-end;
    align-items: center; position: absolute; right: 20px;
    top: 50%; transform: translateY(-50%);
}
#backToMenu {
    padding: 8px 16px; font-size: 14px; cursor: pointer;
    color: white; border: none; border-radius: 5px;
    text-decoration: none; font-weight: bold;
    background-color: #e74c3c; transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); white-space: nowrap;
}
#backToMenu:hover {
    background-color: #c0392b; transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
body { padding-top: 45px; }
@media (max-width: 768px) {
    .header-container { flex-direction: column; padding: 8px 15px; position: relative; }
    .header-left { margin: 3px 0; width: 100%; }
    .toolkit-title { margin: 10px 0; position: relative; width: 90%; max-width: none; }
    .header-right { position: relative; right: auto; top: auto; transform: none; margin: 5px 0; width: 100%; justify-content: center; }
    body { padding-top: 120px; }
}