:root{

    --bg:#0f172a;
    --bg-elevated:#1e293b;
    --bg-inset:#0f172a;
    --border:rgba(255,255,255,0.1);
    --text:#e2e8f0;
    --text-muted:#94a3b8;
    --accent:#6366f1;
    --accent-2:#8b5cf6;
    --accent-3:#ec4899;
    --gradient:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 50%,var(--accent-3) 100%);
    --radius:16px;
    --radius-sm:8px;

    /* Night (the default) and day: see the day overrides below. */
    color-scheme:dark;
    --header-bg:rgba(15,23,42,0.95);
    --footer-bg:rgba(15,23,42,0.8);
    --chip-bg:rgba(255,255,255,0.08);
    --hover-bg:rgba(255,255,255,0.05);
    --input-border:rgba(255,255,255,0.15);
    --ok:#4ade80;
    --ok-border:rgba(74,222,128,0.4);
    --danger:#f87171;
    --warn:#fbbf24;
    --logo-filter:none;
    /* The track designer's floating tools and plan (designer.css). */
    --panel-bg:rgba(30,41,59,0.94);
    --panel-bg-strong:rgba(30,41,59,0.98);
    --side-bg:rgba(15,23,42,0.6);
    --panel-shadow:0 4px 18px rgba(0,0,0,0.35);
    --popup-shadow:0 8px 28px rgba(0,0,0,0.5);
    --kbd-border:rgba(255,255,255,0.25);
    --swatch-border:rgba(255,255,255,0.4);
    --grid-minor:rgba(255,255,255,0.05);
    --grid-major:rgba(255,255,255,0.13);
    --plan-ink:#e2e8f0;
    --plan-ink-2:#cbd5e1;
    --badge-ring:rgba(255,255,255,0.5);
    --door:#facc15;
    --window:#7dd3fc;
    --window-selected:#e0f2fe;
    --ruler-bg:rgba(15,23,42,0.88);
    --ruler-corner:rgba(30,41,59,0.98);
    --ruler-line:rgba(255,255,255,0.18);
    --ruler-tick:rgba(226,232,240,0.8);

}

/* Day: the AART day colours (as on the requirements site), switched by theme.js. */
:root[data-theme="day"]{

    color-scheme:light;
    --bg:#f8fafc;
    --bg-elevated:#ffffff;
    --bg-inset:#f1f5f9;
    --border:#e2e8f0;
    --text:#0f172a;
    --text-muted:#475569;
    --accent:#4f46e5;
    --accent-2:#7c3aed;
    --accent-3:#db2777;
    --header-bg:rgba(255,255,255,0.92);
    --footer-bg:rgba(255,255,255,0.85);
    --chip-bg:rgba(15,23,42,0.05);
    --hover-bg:rgba(15,23,42,0.05);
    --input-border:#cbd5e1;
    --ok:#15803d;
    --ok-border:rgba(21,128,61,0.4);
    --danger:#be123c;
    --warn:#b45309;
    --logo-filter:invert(1);
    --panel-bg:rgba(255,255,255,0.96);
    --panel-bg-strong:#ffffff;
    --side-bg:rgba(241,245,249,0.85);
    --panel-shadow:0 4px 18px rgba(15,23,42,0.15);
    --popup-shadow:0 8px 28px rgba(15,23,42,0.25);
    --kbd-border:#94a3b8;
    --swatch-border:rgba(15,23,42,0.35);
    --grid-minor:rgba(15,23,42,0.05);
    --grid-major:rgba(15,23,42,0.13);
    --plan-ink:#334155;
    --plan-ink-2:#64748b;
    --badge-ring:rgba(15,23,42,0.4);
    --door:#ca8a04;
    --window:#0284c7;
    --window-selected:#0c4a6e;
    --ruler-bg:rgba(255,255,255,0.92);
    --ruler-corner:#f1f5f9;
    --ruler-line:rgba(15,23,42,0.2);
    --ruler-tick:rgba(51,65,85,0.8);

}

/* The day/night switch (theme.js): a round button showing what it switches to. */
.theme-toggle{

    width:32px;

    height:32px;

    padding:0;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:1rem;

    line-height:1;

    color:var(--text-muted);

    background:var(--chip-bg);

    border:1px solid var(--border);

    border-radius:999px;

    cursor:pointer;

}

.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }

body{

    margin:0;

    font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;

    background:var(--bg);

    color:var(--text);

}

h1, h2, h3, h4{

    font-family:"Space Grotesk",Inter,sans-serif;

}

a{

    color:var(--accent-2);

}

header{

    background:var(--header-bg);

    border-bottom:1px solid var(--border);

    padding:14px 20px;

    position:sticky;

    top:0;

    z-index:10;

}

.header-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.brand{

    display:flex;

    align-items:center;

    gap:12px;

}

.brand img{

    height:36px;

    width:auto;

    display:block;

    /* The logo is drawn in white: dark by day. */
    filter:var(--logo-filter);

}

.brand h1{

    margin:0;

    font-size:1.3em;

}

.brand .powered-by{

    margin:0;

    font-size:0.75em;

    color:var(--text-muted);

}

#status{

    font-size:0.85em;

    padding:4px 12px;

    border-radius:12px;

    background:var(--chip-bg);

    border:1px solid var(--border);

}

.header-status{

    display:flex;

    align-items:center;

    gap:10px;

}

.auth-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    border-radius:50%;

    background:var(--chip-bg);

    border:1px solid var(--border);

    color:var(--text-muted);

}

.auth-status:hover{

    border-color:var(--accent);

}

.auth-status.can-edit{

    color:var(--ok);

    border-color:var(--ok-border);

}

.admin-bell{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    border-radius:50%;

    background:var(--chip-bg);

    border:1px solid var(--border);

    color:var(--text-muted);

}

.admin-bell:hover{

    border-color:var(--accent);

}

.admin-bell .bell-count{

    position:absolute;

    top:-4px;

    right:-4px;

    min-width:16px;

    height:16px;

    padding:0 3px;

    border-radius:8px;

    background:#f87171;

    color:#1a1a1a;

    font-size:0.7em;

    font-weight:700;

    line-height:16px;

    text-align:center;

}

.admin-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:6px 0;

    border-bottom:1px solid var(--border);

}

.admin-row .admin-row-info{

    display:flex;

    flex-direction:column;

}

.admin-row .admin-row-actions{

    display:flex;

    gap:8px;

    flex-shrink:0;

}

.admin-row .status-tag{

    font-size:0.8em;

    color:var(--text-muted);

}

main{

    padding:20px;

    max-width:1000px;

    margin:0 auto;

}

.intro{

    background:var(--bg-elevated);

    border:1px solid var(--border);

    border-left:4px solid var(--accent);

    border-radius:var(--radius-sm);

    padding:18px 22px;

    margin-bottom:20px;

}

.intro p{

    margin:0 0 10px;

    line-height:1.55;

}

.intro p:last-child{

    margin-bottom:0;

}

.intro strong{

    color:var(--text);

    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-3) 100%);

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

}

.view-nav{

    display:flex;

    gap:8px;

    margin-top:12px;

    flex-wrap:wrap;

}

.view-tab{

    padding:8px 18px;

    border:1px solid var(--border);

    background:var(--bg-elevated);

    color:var(--text);

    border-radius:50px;

    cursor:pointer;

    font-size:0.95em;

    font-family:inherit;

    text-decoration:none;

    display:inline-block;

}

.view-tab.active{

    background:var(--gradient);

    border-color:transparent;

    color:white;

    font-weight:600;

}

.track-row{

    background:var(--bg-elevated);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:14px 16px;

    margin-bottom:10px;

    cursor:pointer;

}

.track-row:hover{

    border-color:var(--accent);

}

.track-row-name{

    margin:0 0 4px;

    color:var(--text);

}

.track-row-desc{

    margin:0 0 4px;

    color:var(--text-muted);

}

.track-row-loc{

    margin:0;

    font-size:0.85em;

    color:var(--text-muted);

}

.track-row.has-thumb{

    display:flex;

    align-items:center;

    gap:14px;

}

.track-row-thumb{

    width:56px;

    height:56px;

    flex-shrink:0;

    object-fit:contain;

    background:#fff;

    border-radius:6px;

    padding:4px;

}

.track-row-text{

    min-width:0;

    flex:1;

}

.track-diagram{

    max-width:320px;

}

.svg-picker-preview{

    max-width:200px;

    margin-bottom:8px;

}

.roadmap-item{

    margin-bottom:18px;

}

.roadmap-item h3{

    margin:0 0 4px;

    color:var(--accent-2);

    font-size:1.05em;

}

.roadmap-item p{

    margin:0;

    line-height:1.5;

}

.roadmap-item p.note{

    margin-top:8px;

}

.diagram-frame{

    display:inline-block;

    background:#fff;

    padding:10px;

    border-radius:var(--radius-sm);

    border:1px solid var(--border);

    margin:12px 0;

    max-width:100%;

}

.diagram-frame img{

    display:block;

    max-width:100%;

    height:auto;

}

#view-api pre, #view-account pre{

    background:#020617;

    color:#e2e8f0;

    padding:12px 14px;

    border-radius:var(--radius-sm);

    overflow-x:auto;

    font-size:0.88em;

    line-height:1.4;

    border:1px solid var(--border);

}

#view-api code, #view-account code{

    font-family:"SFMono-Regular",Consolas,Menlo,monospace;

}

#view-api p code{

    background:var(--chip-bg);

    padding:1px 5px;

    border-radius:3px;

    color:var(--accent-2);

}

.curl-builder{

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:10px 16px;

    margin:8px 0 20px;

    background:var(--bg-inset);

}

.curl-builder summary{

    cursor:pointer;

    color:var(--accent-2);

    font-weight:600;

    font-size:0.9em;

}

.curl-builder[open] summary{

    margin-bottom:12px;

}

.curl-builder .field-row{

    display:flex;

    flex-wrap:wrap;

    gap:12px 16px;

    margin-top:4px;

}

.curl-builder .field{

    display:flex;

    flex-direction:column;

    gap:4px;

    font-size:0.85em;

    color:var(--text-muted);

}

.curl-builder .field input, .curl-builder .field select{

    min-width:180px;

}

.curl-builder .field textarea.lanes-json{

    width:100%;

    min-width:320px;

    min-height:110px;

    font-family:"SFMono-Regular",Consolas,Menlo,monospace;

    font-size:0.85em;

}

.curl-builder .curl-actions{

    margin-top:10px;

}

.curl-builder .curl-error{

    color:var(--danger);

    margin:8px 0 0;

}

section{

    margin-top:20px;

    padding:20px;

    background:var(--bg-elevated);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

}

section h2{

    margin-top:0;

}

section ul{

    margin:0;

    padding-left:20px;

}

#upload-status{

    margin-top:10px;

    color:var(--accent-2);

}

.note{

    color:var(--text-muted);

    font-style:italic;

}

ul.location-links{

    font-size:0.9em;

    color:var(--text-muted);

    margin-top:4px;

}

.track-card{

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:16px;

}

.track-card h3{

    margin:0 0 4px;

}

.copy-link-btn{

    display:inline-flex;

    align-items:center;

    margin-left:8px;

    padding:3px;

    border:none;

    border-radius:4px;

    background:none;

    color:var(--text-muted);

    cursor:pointer;

    vertical-align:middle;

    opacity:0.7;

}

.copy-link-btn:hover,
.copy-link-btn:focus-visible{

    opacity:1;

    background:var(--bg-inset);

}

.track-actions{

    margin:8px 0;

}

.discuss-link{

    margin-left:12px;

}

.usage{

    background:var(--bg-inset);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:10px 12px;

    margin-top:10px;

}

.config-meta{

    color:var(--text-muted);

    font-size:0.9em;

}

.usage-type{

    display:inline-block;

    font-size:0.75em;

    text-transform:uppercase;

    color:#fff;

    background:var(--gradient);

    border-radius:3px;

    padding:1px 6px;

    margin-right:4px;

}

dl.identity{

    display:grid;

    grid-template-columns:max-content 1fr;

    gap:2px 12px;

    margin:8px 0;

    font-size:0.92em;

}

dl.identity dt{

    color:var(--text-muted);

}

dl.identity dd{

    margin:0;

}

table.lanes-table{

    border-collapse:collapse;

    margin:8px 0;

    font-size:0.9em;

}

table.lanes-table th, table.lanes-table td{

    border:1px solid var(--border);

    padding:3px 8px;

    text-align:left;

}

.mapped-badge{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:0.9em;

    color:var(--text-muted);

    margin:4px 0;

}

h4{

    margin:14px 0 4px;

    font-size:1em;

    color:var(--accent-2);

}

.edit-btn{

    margin-top:8px;

    font-size:0.85em;

}

.config-edit{

    background:var(--bg-inset);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:12px 14px;

    margin-top:10px;

}

.config-edit label{

    display:block;

    margin-bottom:6px;

}

.link-row{

    display:flex;

    gap:6px;

    margin-bottom:6px;

    flex-wrap:wrap;

}

.link-row select, .link-row input{

    padding:4px;

}

.config-edit textarea{

    display:block;

    width:100%;

    max-width:400px;

    min-height:50px;

    margin-top:4px;

    padding:4px;

}

.form-actions{

    margin-top:8px;

    display:flex;

    gap:8px;

}

/* Lane name left-aligned, voltage/current/power-supply columns lined up as a table -
   used for the track's own lane voltage/power rows and the event's per-lane voltage
   override rows. */
table.lane-edit-table{

    border-collapse:collapse;

    margin:8px 0;

}

table.lane-edit-table th, table.lane-edit-table td{

    padding:3px 8px;

    text-align:left;

}

table.lane-edit-table input{

    padding:4px;

    width:80px;

}

table.lane-edit-table input[type="text"]{

    width:110px;

}

.pictures-grid{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin:6px 0;

}

figure.picture{

    margin:0;

    text-align:center;

}

figure.picture .thumb{

    max-width:120px;

    max-height:120px;

    display:block;

    border-radius:4px;

    border:1px solid var(--border);

}

figure.picture figcaption{

    font-size:0.8em;

    color:var(--text-muted);

    max-width:120px;

}

/* Form controls: browser defaults are light-themed and unreadable on the dark
   AART palette, so every input/select/textarea/button gets themed here rather
   than per-component. */
input, select, textarea{

    font-family:inherit;

    background:var(--bg-inset);

    color:var(--text);

    border:1px solid var(--input-border);

    border-radius:6px;

    padding:6px 8px;

}

input:focus, select:focus, textarea:focus{

    outline:none;

    border-color:var(--accent);

}

input[type="checkbox"]{

    padding:0;

}

button{

    font-family:inherit;

    background:var(--bg-elevated);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:7px 14px;

    cursor:pointer;

}

button:hover{

    border-color:var(--accent);

}

button[type="submit"]{

    background:var(--gradient);

    border:none;

    color:white;

    font-weight:600;

    border-radius:50px;

    padding:8px 22px;

}

a.edit-btn, button.edit-btn{

    display:inline-block;

}

footer{

    background:var(--footer-bg);

    border-top:1px solid var(--border);

    color:var(--text-muted);

    text-align:center;

    padding:18px 20px;

    margin-top:20px;

}

footer a{

    color:var(--text-muted);

    text-decoration:underline;

}

footer p{

    margin:0;

    font-size:0.85em;

}

.version-badge{

    display:inline-block;

    margin-left:8px;

    opacity:0.6;

}

.version-badge:not(:empty)::before{

    content:"· ";

}

.password-field, .token-reveal{

    display:flex;

    align-items:center;

    gap:6px;

}

.password-field input{

    flex:1;

}

.token-reveal pre{

    flex:1;

    margin:0;

}

.icon-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    padding:0;

    flex-shrink:0;

}

.lane-swatch{

    display:inline-block;

    width:0.9em;

    height:0.9em;

    margin-right:6px;

    vertical-align:-0.1em;

    border:1px solid var(--border);

    border-radius:2px;

}

/* `hidden` always wins: rules like .view-tab{display:inline-block} otherwise override
   the browser's own [hidden]{display:none}, which left the Admin tab showing to everyone. */

[hidden]{

    display:none !important;

}