:root { --course-accent: #6a5cff; --course-soft: #e3e0ff; --course-dark: #33298b; --orange: #6a5cff; --lime: #c9f45b; --teal: #33298b; --blue: #235ee7; }
.tailnet-editor { margin-block: 1.5rem; padding: clamp(1rem, 3vw, 2rem); border: 3px solid var(--ink, #171713); background: var(--paper, #f5f2e8); box-shadow: 6px 6px 0 var(--ink, #171713); }
.tailnet-editor label, #tailnetControls label { display: block; font-weight: 700; margin-block: 1rem .5rem; }
#tailnetPolicy, #tailnetNotes, #tailnetCard { width: 100%; max-width: 100%; min-width: 0; border: 2px solid #171713; border-radius: 8px; background: #fffdf5; color: #171713; padding: .8rem; font: inherit; }
#tailnetPolicy { min-height: 22rem; font-family: ui-monospace, monospace; font-size: .88rem; line-height: 1.5; resize: vertical; }
#tailnetNotes { resize: vertical; margin-bottom: 1rem; }
#tailnetCard { text-overflow: ellipsis; }
#tailnetInventory dt { font-weight: 800; margin-top: 1rem; overflow-wrap: anywhere; }
#tailnetInventory dd { margin: .25rem 0 0; }
#tailnetEvidence li { margin-bottom: 1rem; }
.tailnet-table { overflow: auto; max-height: 32rem; border: 2px solid #171713; }
.tailnet-table table { width: 100%; min-width: 36rem; border-collapse: collapse; }
.tailnet-table caption { text-align: left; padding: .75rem; font-weight: 700; }
.tailnet-table th, .tailnet-table td { padding: .75rem; border: 1px solid #777; text-align: left; vertical-align: top; }
.tailnet-table thead { background: #e3e0ff; }
.tailnet-table [data-agrees="false"] { background: #ffe0c5; }
#tailnetControls h2, #tailnetControls h3, #tailnetStatus { overflow-wrap: anywhere; }
#tailnetExplanation { border-left: 5px solid #33298b; padding-left: 1rem; margin-top: 1rem; }
@media (max-width: 500px) { .tailnet-editor .experiment-actions { display: grid; gap: .65rem; } .tailnet-editor .btn { width: 100%; } }