its own line. */
#lockLevelBtn {
flex-direction: column;
gap: 1px;
line-height: 1.15;
text-align: center;
}
.level-sep {
height: 1px;
background: rgba(255, 255, 255, 0.14);
margin: 8px 0;
border-radius: 1px;
}
.level-visibility {
display: flex;
flex-direction: column;
gap: 5px;
}
.level-visibility-title {
font-size: 11px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
}
.level-visibility-list {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
}
.level-visibility-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
white-space: nowrap;
}
.level-visibility-item input[type="checkbox"] {
margin: 0;
cursor: pointer;
accent-color: var(--cyan);
}
.level-dim-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.level-dim-toggle {
padding: 4px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(5, 10, 21, 0.6);
color: rgba(255, 255, 255, 0.82);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
}
.level-dim-toggle:hover { border-color: var(--cyan); }
.level-dim-toggle.active {
background: var(--cyan);
color: #04201c;
border-color: var(--cyan);
}
.level-visibility-item.is-locked { opacity: 0.7; cursor: default; }
.level-visibility-item.is-locked input[type="checkbox"] { cursor: default; }
/* View Controls / Playground panels: dark styling — light text, dark toggle track, cyan when active. */
.pg-tool {
width: auto;
padding: 8px 11px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.08);
color: white;
box-shadow: none;
font-size: 0.68rem;
letter-spacing: 0.08em;
}
.pg-tool.active {
background: rgba(0,245,212,0.2);
border-color: rgba(0,245,212,0.65);
color: #cffff8;
}
.pg-tool.danger.active {
background: rgba(247,37,133,0.2);
border-color: rgba(247,37,133,0.65);
color: #ffd3e3;
}
.pg-tool:disabled {
opacity: 0.38;
cursor: not-allowed;
}
/* Red danger glow on destructive actions: Delete Node, Delete Link, Clear Topology, Reset Physical Plane
(.pg-tool.danger + .mini-action.danger). No !important here so the pink ".active" selected state of a
delete tool still wins by specificity. */
.pg-tool.danger,
.mini-action.danger {
border-color: rgba(255,77,87,0.62);
box-shadow: 0 0 18px rgba(255,77,87,0.32);
color: #ffd9dd;
}
.pg-tool.danger:hover,
.mini-action.danger:hover {
background: rgba(255,77,87,0.18);
border-color: rgba(255,77,87,0.92);
box-shadow: 0 0 26px rgba(255,77,87,0.48);
color: #fff;
}
#playgroundHint {
margin-top: 8px;
max-width: 760px;
color: rgba(255,255,255,0.56);
font-size: 0.72rem;
line-height: 1.35;
}
/* RINA v74_2_2_2_2_2: collapsible unboxing panel + link-start highlight */
#animation-panel {
position: relative;
}
#animation-panel.playground-hidden {
display: none !important;
}
#animation-panel.collapsed {
grid-template-columns: auto !important;
grid-template-areas: "toggle" !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
padding: 8px !important;
border-radius: 999px !important;
}
#animation-panel.collapsed #unboxBtn,
#animation-panel.collapsed .unbox-actions,
#animation-panel.collapsed .animation-slider-wrap {
display: none !important;
}
/* RINA v74_2_2_2_2_2: custom in-page notification, not browser alert */
.app-notification {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
background: rgba(0,0,0,0.34);
backdrop-filter: blur(4px);
pointer-events: auto;
}
.app-notification.is-hidden {
display: none !important;
pointer-events: none !important;
}
.notification-card {
position: relative;
width: min(440px, calc(100vw - 36px));
padding: 22px 22px 18px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.16);
background: linear-gradient(135deg, rgba(8,14,28,0.96), rgba(17,24,39,0.94));
color: white;
box-shadow: 0 28px 90px rgba(0,0,0,0.55), 0 0 40px rgba(247,37,133,0.18);
}
.notification-title {
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffb703;
margin-bottom: 8px;
}
.notification-message {
color: rgba(255,255,255,0.82);
font-size: 0.95rem;
line-height: 1.55;
}
.notification-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.notification-actions button {
width: auto;
padding: 10px 18px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.18);
box-shadow: none;
}
.notification-actions .notification-cancel {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.9);
}
.notification-actions .notification-cancel:hover {
background: rgba(255,255,255,0.16);
transform: none;
}
.notification-actions .notification-confirm {
background: var(--cyan);
color: #053b34;
border-color: rgba(0,245,212,0.5);
}
.notification-actions .notification-confirm:hover {
background: #2bd4bf;
transform: none;
}
.notification-close {
position: absolute;
right: 12px;
top: 10px;
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
color: white;
font-size: 1.1rem;
line-height: 1;
padding: 0;
box-shadow: none;
}
/* RINA v74_2_2_2_2_2: persistent attribute manager */
.attribute-manager {
margin-top: 18px;
margin-bottom: 18px;
padding: 18px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.045);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.attribute-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.attribute-header h3 {
margin: 0 0 6px;
font-size: 0.86rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.86);
}
.attribute-header p {
margin: 0;
color: rgba(255,255,255,0.56);
font-size: 0.82rem;
line-height: 1.45;
max-width: 760px;
}
.attribute-form {
display: grid;
grid-template-columns: repeat(6, minmax(130px, 1fr));
gap: 12px;
align-items: end;
}
.attribute-add-action button {
height: 43px;
padding: 0 14px;
white-space: nowrap;
line-height: 1.05;
text-align: center;
}
.attribute-list {
display: grid;
gap: 10px;
margin-top: 16px;
}
.attribute-scope-group {
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.16);
overflow: hidden;
}
.attribute-scope-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: rgba(255,255,255,0.055);
color: rgba(255,255,255,0.76);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* The per-group item count → a small badge (not a bare number). */
.attribute-scope-title > span:last-child {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
background: rgba(0,245,212,0.16);
color: #bff3f7;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
}
.attribute-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 8px;
padding: 10px;
}
.attribute-chip {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
padding: 10px 11px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.055);
}
.attribute-chip strong {
display: block;
color: white;
font-size: 0.82rem;
margin-bottom: 3px;
}
.attribute-chip span {
display: block;
color: rgba(255,255,255,0.56);
font-size: 0.72rem;
line-height: 1.35;
}
.attribute-delete {
width: 30px;
height: 30px;
padding: 0;
border-radius: 999px;
background: rgba(247,37,133,0.12);
border: 1px solid rgba(247,37,133,0.38);
color: #ffd3e3;
box-shadow: none;
}
/* Row action cluster: the +/- "in defaults" toggle sits beside the × delete (same size/shape). */
.attribute-chip-actions {
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
/* "Add to / remove from Reset-to-Defaults set" toggle — a sibling affordance of the × button. */
.attr-default-toggle {
width: 30px;
height: 30px;
padding: 0;
border-radius: 999px;
font-size: 1.05rem;
line-height: 1;
background: rgba(34,211,238,0.10);
border: 1px solid rgba(34,211,238,0.38);
color: #bfeef7;
box-shadow: none;
}
.attr-default-toggle.is-on {
background: rgba(34,211,238,0.30);
border-color: rgba(34,211,238,0.70);
color: #eafdff;
}
.attr-default-toggle:hover {
background: rgba(34,211,238,0.22);
border-color: rgba(34,211,238,0.55);
}
/* "Deleted (restorable)" recycle group + its Restore button. */
.attribute-recycle-group { opacity: 0.95; }
.attr-restore {
height: 30px;
padding: 0 12px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
background: rgba(52,211,153,0.12);
border: 1px solid rgba(52,211,153,0.42);
color: #c7f9e5;
box-shadow: none;
white-space: nowrap;
}
.attr-restore:hover {
background: rgba(52,211,153,0.22);
border-color: rgba(52,211,153,0.6);
}
/* "Delete forever" × in the recycle bin — same look as the row delete (pink). */
.attr-purge {
width: 30px;
height: 30px;
padding: 0;
border-radius: 999px;
background: rgba(247,37,133,0.12);
border: 1px solid rgba(247,37,133,0.38);
color: #ffd3e3;
box-shadow: none;
}
.attr-purge:hover { background: rgba(247,37,133,0.22); border-color: rgba(247,37,133,0.55); } /* "Empty all" header action in the recycle group. */
/* Recycle-bin title actions: count badge + "Empty all" laid out inline (a so the generic
".attribute-scope-title > span:last-child" count-badge rule doesn't swallow the whole group). */
.attribute-scope-title .recycle-bin-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.attribute-scope-title .recycle-bin-count {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
background: rgba(0,245,212,0.16);
color: #bff3f7;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
}
.attr-empty-bin {
height: 24px;
padding: 0 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
background: rgba(247,37,133,0.10);
border: 1px solid rgba(247,37,133,0.34);
color: #ffd3e3;
box-shadow: none;
white-space: nowrap;
}
.attr-empty-bin:hover { background: rgba(247,37,133,0.2); border-color: rgba(247,37,133,0.5); }
/* Edit (pencil) button — neutral sibling of the ×/+ row affordances. */
.attr-edit {
width: 30px;
height: 30px;
padding: 0;
border-radius: 999px;
font-size: 0.92rem;
line-height: 1;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
color: rgba(255,255,255,0.85);
box-shadow: none;
}
.attr-edit:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.38); }
/* "required" tag on structural attribute rows. */
.attr-locked-tag {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 6px;
margin-left: 6px;
border-radius: 999px;
background: rgba(148,163,184,0.18);
color: rgba(226,232,240,0.85);
vertical-align: middle;
}
/* Small info icon (e.g. the Enum "|" hint) — hover/tap shows its title tooltip. Theme-independent. */
.hint-icon {
display: inline-grid;
place-items: center;
width: 16px;
height: 16px;
min-width: 16px;
box-sizing: border-box;
flex: 0 0 auto; /* never grow/shrink inside a flex row */
align-self: center; /* never stretch inside a column-flex label (was rendering as a wide capsule) */
margin-left: 6px;
border-radius: 50%;
border: none;
background: rgba(56,189,248,0.22); /* clear info badge — readable on the dark panel */
color: #bae6fd;
font-family: Georgia, 'Times New Roman', serif; /* a crisp italic serif "i" reads as an info glyph */
font-size: 0.72rem;
font-style: italic;
font-weight: 700;
line-height: 1;
cursor: help;
opacity: 0.9;
vertical-align: middle;
transition: background 150ms ease, color 150ms ease;
}
.hint-icon:hover { opacity: 1; background: rgba(56,189,248,0.4); color: #e0f2fe; }
/* Uniform custom tooltip (js/tooltips.js). One shared, subtle, dark element. pointer-events:none so it can
never block clicks/drag/orbit; z-index above the viz panels (≤13) but below dialogs (≥60). */
#appTooltip {
position: fixed; left: 0; top: 0; z-index: 55; pointer-events: none;
max-width: 240px; padding: 7px 10px; border-radius: 10px;
background: rgba(11,19,43,0.96); border: 1px solid rgba(0,245,212,0.28);
color: rgba(255,255,255,0.88); font-size: 0.72rem; line-height: 1.4; font-weight: 500;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
opacity: 0; transform: translateY(-2px);
transition: opacity 140ms ease, transform 140ms ease;
}
#appTooltip.visible { opacity: 1; transform: translateY(0); }
/* Expanded inline-edit row. */
.attribute-chip-editing { display: block; }
.attribute-edit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.attribute-edit-grid label {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 0.68rem;
color: rgba(255,255,255,0.6);
}
/* Caption + info-icon share one line (the column-flex label would otherwise drop the icon to its own row). */
.attribute-edit-grid label .ae-cap { display: inline-flex; align-items: center; }
.attribute-edit-grid .ae-field {
width: 100%;
padding: 6px 8px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.06);
color: white;
font-size: 0.78rem;
}
.attribute-edit-grid .ae-field:disabled { opacity: 0.55; cursor: not-allowed; }
.attr-edit-note {
margin-top: 7px;
font-size: 0.68rem;
color: rgba(255,255,255,0.5);
}
.attribute-edit-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 9px;
}
.attribute-edit-actions .ae-cancel,
.attribute-edit-actions .ae-save {
height: 28px;
padding: 0 14px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
box-shadow: none;
}
.attribute-edit-actions .ae-cancel {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
color: rgba(255,255,255,0.85);
}
.attribute-edit-actions .ae-save {
background: rgba(34,211,238,0.28);
border: 1px solid rgba(34,211,238,0.6);
color: #eafdff;
}
.attribute-edit-actions .ae-save:hover { background: rgba(34,211,238,0.4); }
/* Virtual-link derivation rule builder (add form host + inline edit). Reuses .attribute-edit-grid/.ae-field. */
.derivation-host { margin: 0 0 12px; }
.derivation-block,
.constraint-block {
margin-top: 10px;
padding: 10px 11px;
border-radius: 14px;
border: 1px solid rgba(34,211,238,0.28);
background: rgba(34,211,238,0.06);
}
/* Machine→process constraint builder bits (reuses the derivation-block shell + grid). */
.constraint-summary { margin-top: 8px; font-size: 0.72rem; font-weight: 600; color: rgba(191,238,247,0.9); }
.constraint-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
/* Min-per-process / Left-out-minimum labels: caption (text + info-icon, kept on one row via .ae-cap) above
the input — same column-flex pattern as the attribute-edit-grid labels. */
.constraint-min, .constraint-leftout { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; font-size: 0.68rem; color: rgba(255,255,255,0.6); }
.constraint-min .ae-cap, .constraint-leftout .ae-cap { display: inline-flex; align-items: center; gap: 4px; }
.constraint-auto-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.constraint-auto-row .hint-icon, .derivation-advanced > summary .hint-icon { margin-left: 0; } .derivation-title {
font-size: 0.72rem;
font-weight: 700;
color: rgba(191,238,247,0.85);
margin-bottom: 8px;
}
/* Read-only (built-in) derivation: muted, signalling it can be inspected but not edited. */
.derivation-block.derivation-readonly {
border-style: dashed;
border-color: rgba(148,163,184,0.4);
background: rgba(148,163,184,0.08);
}
.derivation-block.derivation-readonly .ae-field:disabled,
.derivation-block.derivation-readonly .deriv-check input:disabled {
opacity: 0.7;
cursor: not-allowed;
} .derivation-advanced { margin-top: 8px; }
.derivation-advanced > summary {
cursor: pointer;
font-size: 0.72rem;
color: rgba(255,255,255,0.62);
margin-bottom: 6px;
display: flex; /* keep a trailing info icon inline + centred (was wrapping to its own line) */
align-items: center;
gap: 6px;
list-style: none;
}
.derivation-advanced > summary::-webkit-details-marker { display: none; }
.derivation-advanced > summary::before { /* CSS-drawn disclosure triangle (no glyph) */
content: ""; width: 0; height: 0; flex: 0 0 auto;
border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
transition: transform 150ms ease;
}
.derivation-advanced[open] > summary::before { transform: rotate(90deg); }
.derivation-checks { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.derivation-checks .deriv-check {
display: flex; align-items: center; gap: 6px;
font-size: 0.74rem; color: rgba(255,255,255,0.78);
}
.derivation-checks .deriv-check input { width: auto; } .deriv-formula {
margin-top: 8px;
font-size: 0.76rem;
color: rgba(214,245,251,0.96);
font-weight: 700;
line-height: 1.4;
word-break: break-word;
}
.deriv-preview {
margin-top: 8px;
font-size: 0.74rem;
color: rgba(191,238,247,0.92);
font-weight: 600;
}
.deriv-warn {
margin-top: 6px;
font-size: 0.72rem;
color: #fcd34d;
line-height: 1.4;
}
.attribute-empty {
color: rgba(255,255,255,0.52);
font-size: 0.78rem;
padding: 12px;
border: 1px dashed rgba(255,255,255,0.12);
border-radius: 16px;
}
@media (max-width: 980px) {
.attribute-form {
grid-template-columns: repeat(2, minmax(140px, 1fr));
}
}
@media (max-width: 620px) {
.attribute-header {
flex-direction: column;
}
.attribute-form {
grid-template-columns: 1fr;
}
}
/* RINA v74_2_2_2_2_2: attribute manager collapse + robust controls */
.attribute-manager.collapsed .attribute-form,
.attribute-manager.collapsed .attribute-list {
display: none !important;
}
.attribute-manager.collapsed {
padding-bottom: 14px;
}
/* Profile Management panel: reuses .attribute-manager + .attribute-* classes
for both themes; only the add-form layout and value-input grid are new. */
.profile-form {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr) auto;
gap: 12px;
align-items: end;
}
.profile-add-action button {
height: 43px;
padding: 0 14px;
white-space: nowrap;
}
/* Link SLA Categories: keep Category Name · Metric · Direction · Add Category all on ONE row. */
.link-category-form {
grid-template-columns: minmax(140px, 1.2fr) minmax(180px, 2fr) minmax(140px, 1fr) auto;
}
.profile-value-inputs {
margin-top: 16px;
}
.attribute-manager.collapsed .profile-form,
.attribute-manager.collapsed .profile-value-inputs {
display: none !important;
}
@media (max-width: 980px) {
.profile-form {
grid-template-columns: repeat(2, minmax(140px, 1fr));
}
}
@media (max-width: 620px) {
.profile-form {
grid-template-columns: 1fr;
}
}
.attribute-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.attribute-actions .mini-action {
white-space: nowrap;
}
.attribute-manager.collapsed .attribute-header {
margin-bottom: 0;
}
/* RINA v74_2_2_2_2_2: interactive node/link attribute inspection */
.inspection-panel {
position: fixed;
right: clamp(14px, 2.4vw, 32px);
top: 96px;
z-index: 55;
width: min(440px, calc(100vw - 28px));
max-height: calc(100vh - 132px);
overflow: auto;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(5,10,21,0.90);
backdrop-filter: blur(18px);
box-shadow: 0 28px 90px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.08);
color: white;
padding: 16px;
}
.inspection-panel.is-hidden {
display: none !important;
}
.inspection-header {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
border-bottom: 1px solid rgba(255,255,255,0.10);
padding-bottom: 12px;
margin-bottom: 12px;
}
.inspection-kicker {
color: var(--cyan);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 5px;
}
#inspectionTitle {
margin: 0;
font-size: 1rem;
line-height: 1.25;
}
.inspection-close {
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
color: white;
padding: 0;
box-shadow: none;
flex: 0 0 auto;
}
.inspection-meta {
color: rgba(255,255,255,0.62);
font-size: 0.74rem;
line-height: 1.45;
margin-bottom: 12px;
}
.attribute-table {
display: grid;
gap: 7px;
margin-bottom: 14px;
}
.attribute-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(90px, auto);
gap: 10px;
padding: 9px 10px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.09);
background: rgba(255,255,255,0.055);
}
.attribute-row strong {
font-size: 0.78rem;
color: rgba(255,255,255,0.9);
}
.attribute-row span {
text-align: right;
color: rgba(255,255,255,0.72);
font-size: 0.78rem;
}
.attribute-row small {
grid-column: 1 / -1;
color: rgba(255,255,255,0.48);
font-size: 0.68rem;
}
/* Let the title column shrink so the header actions (Edit + ×) always stay inside the panel. */
.inspection-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.inspection-header > div:first-child #inspectionTitle { overflow-wrap: anywhere; }
/* Capacity Inspector (read-only process-budget diagnostic) */
.ci-scope { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.72rem; }
.ci-mode { display: flex; gap: 14px; }
.ci-mode label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ci-mode-disabled { opacity: 0.45; cursor: not-allowed; }
.ci-pick { margin-bottom: 12px; }
.ci-machine-select { width: 100%; max-width: none; box-sizing: border-box; }
.ci-level-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-band span:last-child, .ci-overonly span:last-child { white-space: nowrap; }
.ci-overview { margin-bottom: 12px; }
.ci-overview-ok { font-size: 0.74rem; opacity: 0.8; }
.ci-overview-title { font-weight: 700; color: #fda4af; font-size: 0.74rem; margin-bottom: 6px; }
.ci-overview-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-overview-item { display: inline-flex; flex-direction: column; gap: 1px; text-align: left; font-size: 0.7rem; font-weight: 700;
padding: 4px 10px; border-radius: 9px; border: 1px solid rgba(248,113,113,0.5); background: rgba(248,113,113,0.12); color: #fecaca; cursor: pointer; }
.ci-overview-item:hover { background: rgba(248,113,113,0.24); }
.ci-overview-detail { font-weight: 400; opacity: 0.85; }
.ci-sortable { cursor: pointer; user-select: none; }
.ci-sortable:hover { opacity: 1; text-decoration: underline; }
.ci-cell-hot { background: rgba(250,204,21,0.13); } .ci-machine { margin: 10px 0 16px; }
.ci-machine-title { font-weight: 700; font-size: 0.82rem; margin-bottom: 6px; }
.ci-over-flag { color: #fda4af; font-size: 0.7rem; font-weight: 700; margin-left: 6px; }
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ci-chip { font-size: 0.68rem; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); }
.ci-chip.ci-over { color: #fecaca; border-color: rgba(248,113,113,0.6); background: rgba(248,113,113,0.16); font-weight: 700; }
.ci-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; table-layout: fixed; }
.ci-table th, .ci-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; overflow-wrap: anywhere; }
.ci-table th { font-weight: 700; opacity: 0.78; white-space: normal; vertical-align: bottom; }
/* Process name column wide; Lvl narrow + centred; numeric value columns right-aligned. */
.ci-table th:first-child, .ci-table td:first-child { width: 38%; }
.ci-table th:nth-child(2), .ci-table td:nth-child(2) { width: 36px; text-align: center; }
.ci-table th:nth-child(n+3), .ci-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.ci-table tbody tr:hover { background: rgba(255,255,255,0.05); }
.ci-empty-row { opacity: 0.6; font-style: italic; text-align: center !important; } /* Per-process drill-down (click a row → per-category allocation vs the machine budget + scene highlight). */
.ci-proc-row { cursor: pointer; }
.ci-row-active > td { background: rgba(20,184,166,0.16); }
.ci-row-active > td:first-child { box-shadow: inset 3px 0 0 rgba(20,184,166,0.85); }
.ci-drill-row > td { padding: 0 6px 8px !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ci-drill { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 2px 2px; }
.ci-drill-card { flex: 1 1 130px; min-width: 0; padding: 6px 9px; border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
.ci-drill-card.ci-over { border-color: rgba(248,113,113,0.6); background: rgba(248,113,113,0.12); }
.ci-drill-cat { font-size: 0.7rem; font-weight: 700; margin-bottom: 4px; overflow-wrap: anywhere; }
.ci-drill-stats { display: flex; flex-direction: column; gap: 1px; font-size: 0.68rem; opacity: 0.9; }
.ci-drill-stats b { font-variant-numeric: tabular-nums; }
.ci-drill-note { flex: 1 1 100%; font-size: 0.66rem; opacity: 0.7; font-style: italic; margin-top: 2px; }
.ci-drill-actions { flex: 1 1 100%; margin-top: 2px; }
/* Resource Inspector actions: GREEN glow on "Edit this process", RED glow on "Close" (both themes). */
.ci-drill-actions .ci-edit-btn {
width: 100%;
border-color: rgba(20,184,166,0.6); background: rgba(20,184,166,0.16); color: #baf5ec;
box-shadow: 0 0 14px rgba(20,184,166,0.34);
}
.ci-drill-actions .ci-edit-btn:hover {
background: rgba(20,184,166,0.3); border-color: rgba(20,184,166,0.9); box-shadow: 0 0 20px rgba(20,184,166,0.5);
}
#ciCloseBtn {
border-color: rgba(255,77,87,0.62); background: rgba(255,77,87,0.12); color: #ffd9dd;
box-shadow: 0 0 14px rgba(255,77,87,0.32);
}
#ciCloseBtn:hover {
background: rgba(255,77,87,0.2); border-color: rgba(255,77,87,0.92); box-shadow: 0 0 22px rgba(255,77,87,0.5);
}
/* "Edit" + "Cancel" buttons at the END of the Show Details panel (below Details). */
.inspection-actions { display: block; margin: 12px 0 2px; }
.inspection-actions.ci-details-actions { display: flex; gap: 8px; align-items: stretch; }
.ci-details-actions .inspection-edit,
.ci-details-actions #detailsCancelBtn { flex: 0 0 auto; width: calc(50% - 4px); min-width: 0; height: 32px; box-sizing: border-box; margin: 0; }
.inspection-edit {
width: 100%; height: 32px; padding: 0 16px; border-radius: 999px;
border: 1px solid rgba(20,184,166,0.55); background: rgba(20,184,166,0.18); color: #baf5ec;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
box-shadow: none; transition: background 150ms ease, border-color 150ms ease;
}
.inspection-edit:hover { background: rgba(20,184,166,0.32); border-color: rgba(20,184,166,0.8); } .inspection-section-title {
color: #ffb703;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 14px 0 8px;
}
.explanation-box {
color: rgba(255,255,255,0.72);
font-size: 0.76rem;
line-height: 1.55;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.18);
border-radius: 16px;
padding: 10px 11px;
white-space: pre-wrap;
}
.inspection-empty {
color: rgba(255,255,255,0.58);
border: 1px dashed rgba(255,255,255,0.13);
border-radius: 16px;
padding: 12px;
font-size: 0.78rem;
}
@media (max-width: 820px) {
.inspection-panel {
left: 14px;
right: 14px;
top: 84px;
width: auto;
}
}
/* RINA v74_2_2_2_2_2: optional bridge split button */
.unbox-actions {
grid-area: unbox !important;
display: flex !important;
gap: 8px !important;
align-items: center !important;
white-space: nowrap !important;
flex-wrap: wrap !important;
}
/* Collapse / Expand reveal row — sits under the 3 unbox buttons, single row, THINNER than them (same
.mini-action styling otherwise). */
.unbox-reveal-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.unbox-reveal-row .mini-action.unbox-thin-btn {
flex: 1 1 0;
min-width: 0;
padding: 5px 12px;
font-size: 0.68rem;
}
#detailsModeBtn:disabled {
opacity: 0.42;
cursor: not-allowed;
}
@media (max-width: 840px) {
.unbox-actions {
justify-content: flex-start !important;
flex-wrap: wrap !important;
}
}
/* Inspect-panel active/hide buttons all share the SAME green glow (Details/Edit/Bulk/Capacity Inspector). */
#detailsModeBtn.details-active,
#bulkEditBtn.edit-active,
#capacityInspectorBtn.edit-active {
border-color: rgba(45,212,191,0.72);
background: rgba(45,212,191,0.16);
color: #cffff8;
}
/* Active "Done Moving" styling — shared by the Unbox-panel button AND the Playground Move Nodes tool.
!important keeps the active state winning over the base .pg-tool / .mini-action button styles. */
#moveNodesBtn.move-active,
#appCommSelectBtn.move-active,
#bulkPickBtn.move-active,
.pg-tool.move-active {
border-color: rgba(0,245,212,0.72);
background: rgba(0,245,212,0.16);
color: #b8fff4;
}
body {
transition: background 260ms ease, color 260ms ease;
} /* Structured Details rendering (replaces the raw pre-wrap blob). */
.explanation-box.details-formatted { white-space: normal; }
.details-formatted .detail-subhead {
font-weight: 700; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase;
opacity: 0.7; margin: 9px 0 3px;
}
.details-formatted .detail-subhead:first-child { margin-top: 0; }
.details-formatted .detail-p { margin: 0 0 6px; }
.details-formatted .detail-p:last-child { margin-bottom: 0; }
.details-formatted .detail-list { margin: 2px 0 7px; padding-left: 16px; }
.details-formatted .detail-list:last-child { margin-bottom: 0; }
.details-formatted .detail-list li { margin: 1.5px 0; }
/* RINA v74_2_2_2_2_2: single-object attribute editor */
#editAttributesBtn.edit-active {
border-color: rgba(45,212,191,0.72);
background: rgba(45,212,191,0.16);
color: #cffff8;
}
#detailsModeBtn:disabled,
#editAttributesBtn:disabled {
opacity: 0.42;
cursor: not-allowed;
}
.attribute-edit-form {
display: grid;
gap: 9px;
margin-bottom: 12px;
}
.attribute-edit-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
gap: 10px;
align-items: center;
padding: 9px 10px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.09);
background: rgba(255,255,255,0.055);
}
.attribute-edit-row.readonly {
opacity: 0.74;
}
.attribute-edit-label strong {
display: block;
font-size: 0.78rem;
color: rgba(255,255,255,0.9);
}
.attribute-edit-label small {
display: block;
margin-top: 3px;
color: rgba(255,255,255,0.48);
font-size: 0.68rem;
line-height: 1.25;
}
.attribute-edit-row input,
.attribute-edit-row select {
width: 100%;
min-width: 0;
padding: 8px 9px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(0,0,0,0.32);
color: white;
outline: none;
}
.attribute-edit-row input:focus,
.attribute-edit-row select:focus {
border-color: rgba(45,212,191,0.62);
box-shadow: 0 0 0 3px rgba(45,212,191,0.10);
}
.attribute-edit-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.attribute-edit-actions .mini-action {
flex: 1 1 130px;
min-width: 120px;
}
.attribute-edit-note {
border: 1px dashed rgba(255,255,255,0.14);
background: rgba(255,255,255,0.045);
color: rgba(255,255,255,0.62);
border-radius: 14px;
padding: 10px 11px;
font-size: 0.74rem;
line-height: 1.45;
margin-bottom: 12px;
}
/* Bulk Edit — live "affects N objects" readout (reuses the inspection drawer + edit-form classes). */
.bulk-affected {
margin: 2px 0 12px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(45,212,191,0.38);
background: rgba(45,212,191,0.11);
color: rgba(255,255,255,0.92);
font-size: 0.8rem;
font-weight: 600;
}
.bulk-affected.bulk-empty {
border-color: rgba(255,255,255,0.14);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.6);
font-weight: 500;
}
/* Bulk Edit — scene-pick controls (Pick in scene / Clear selection). */
.bulk-select-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.bulk-select-row .mini-action {
flex: 1 1 130px;
min-width: 120px;
}
/* Bulk Edit — Fixed/Range value-mode toggle + seed. */
.bulk-mode-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 10px;
font-size: 0.74rem;
color: rgba(255,255,255,0.78);
}
.bulk-mode-row label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.bulk-mode-row input[type="radio"] { accent-color: #2dd4bf; }
/* Range-mode seed: its own row under the Fixed/Random radios — a formatted label ABOVE a full-width input + knob.
Only shown in "Random in range" mode (the [hidden] rule must beat the explicit display:flex below). */
.bulk-seed-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 10px; }
.bulk-seed-row[hidden] { display: none; }
.bulk-seed-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.62); }
.bulk-seed-controls { display: flex; align-items: center; gap: 8px; }
.bulk-seed-controls input { flex: 1 1 auto; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.32); color: white; }
.bulk-seed-controls .seed-knob { flex: 0 0 auto; }
/* Bulk Edit — min/max range inputs (replace the single value control in range mode). */
.bulk-range-inputs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bulk-range-inputs input { width: 100%; min-width: 0; padding: 8px 9px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.32); color: white; outline: none; }
.bulk-range-inputs span { color: rgba(255,255,255,0.5); }
/* Bulk Edit — "Values to apply" form rows (include checkbox + value control). */
.bulk-attr-toggle {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
.bulk-attr-toggle input[type="checkbox"] {
width: 15px;
height: 15px;
flex: 0 0 auto;
accent-color: #2dd4bf;
cursor: pointer;
}
.bulk-attr-row input.is-invalid,
.bulk-attr-row select.is-invalid {
border-color: rgba(248,113,113,0.85);
box-shadow: 0 0 0 3px rgba(248,113,113,0.16);
}
.bulk-validation {
margin-top: 4px;
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
line-height: 1.4;
}
.bulk-validation.bulk-validation-error {
color: #fca5a5;
}
/* Bulk Edit — in-panel apply result (success / over-budget warning), shown where the user is working. */
.bulk-apply-result {
margin-top: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(45,212,191,0.4);
background: rgba(45,212,191,0.12);
color: rgba(255,255,255,0.92);
font-size: 0.76rem;
font-weight: 600;
line-height: 1.4;
}
.bulk-apply-result.bulk-apply-warn {
border-color: rgba(251,191,36,0.6);
background: rgba(251,191,36,0.14);
color: #fcd34d;
}
.attribute-profile-picker {
display: grid;
gap: 6px;
margin-bottom: 12px;
padding: 10px 11px;
border-radius: 14px;
border: 1px solid rgba(45,212,191,0.28);
background: rgba(45,212,191,0.07);
}
.attribute-profile-picker label {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
.attribute-profile-picker select {
width: 100%;
min-width: 0;
padding: 8px 9px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(0,0,0,0.32);
color: white;
outline: none;
}
.attribute-profile-picker select:focus {
border-color: rgba(45,212,191,0.62);
box-shadow: 0 0 0 3px rgba(45,212,191,0.10);
}
.attribute-view-hint {
font-size: 0.72rem;
color: rgba(255,255,255,0.5);
}
.category-body {
padding: 12px;
display: grid;
gap: 12px;
}
.category-meta {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
gap: 10px;
}
.category-meta label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.category-meta label span {
text-transform: none;
letter-spacing: 0;
font-size: 0.8rem;
color: rgba(255,255,255,0.85);
}
.category-meta select,
.band-row input {
width: 100%;
min-width: 0;
padding: 7px 8px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(0,0,0,0.32);
color: white;
outline: none;
}
/* Inline-editable SLA category name (sits in the card title; looks like the title until hover/focus). */
.attribute-scope-title input.category-name {
flex: 1 1 auto;
min-width: 0;
margin-right: 8px;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
background: transparent;
border: 1px solid transparent;
border-radius: 7px;
padding: 3px 6px;
outline: none;
}
.attribute-scope-title input.category-name:hover { border-color: rgba(255,255,255,0.18); }
.attribute-scope-title input.category-name:focus { border-color: rgba(0,245,212,0.55); background: rgba(0,0,0,0.28); }
/* SLA category whose metric attribute was deleted → flag the dropdown amber until a metric is re-picked. */
.category-meta select.category-metric.is-missing {
border-color: rgba(255,183,3,0.55);
color: #ffcf7a;
background: rgba(255,183,3,0.10);
}
.category-meta select:focus,
.band-row input:focus {
border-color: rgba(45,212,191,0.6);
box-shadow: 0 0 0 3px rgba(45,212,191,0.1);
}
.category-bands {
display: grid;
gap: 6px;
}
.category-bands-title {
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.band-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 8px;
align-items: center;
}
.band-row .band-remove {
width: 28px;
height: 28px;
}
.band-add {
align-self: start;
margin-top: 2px;
}
@media (max-width: 620px) {
.category-meta { grid-template-columns: 1fr; }
}
.sla-card {
margin: 12px 0;
padding: 11px 12px;
border-radius: 14px;
border: 1px solid rgba(125,211,252,0.28);
background: rgba(125,211,252,0.07);
}
.sla-card-title {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
margin-bottom: 8px;
}
.sla-table {
width: 100%;
border-collapse: collapse;
font-size: 0.74rem;
color: rgba(255,255,255,0.86);
}
.sla-table th {
text-align: left;
font-size: 0.62rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
padding: 2px 6px 6px;
font-weight: 700;
}
.sla-table td {
padding: 4px 6px;
border-top: 1px solid rgba(255,255,255,0.08);
vertical-align: middle;
}
.sla-table select.sla-target-select {
width: 100%;
min-width: 0;
padding: 4px 6px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(0,0,0,0.32);
color: white;
outline: none;
font-size: 0.72rem;
}
.sla-cell-pass { color: #34d399; font-weight: 700; }
.sla-cell-fail { color: #fb7185; font-weight: 700; }
.sla-cell-none { color: rgba(255,255,255,0.5); }
.sla-range { display: block; margin-top: 1px; color: rgba(255,255,255,0.45); font-size: 0.92em; }
.machine-budget {
margin-bottom: 12px;
padding: 11px 12px;
border-radius: 14px;
border: 1px solid rgba(72,202,228,0.30);
background: rgba(72,202,228,0.08);
}
.machine-budget-title {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
margin-bottom: 8px;
}
.machine-budget-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 4px 10px;
align-items: center;
font-size: 0.78rem;
color: rgba(255,255,255,0.86);
}
.machine-budget-head {
font-size: 0.66rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.machine-budget-label {
color: rgba(255,255,255,0.66);
}
.machine-budget-free {
color: #39ff14;
font-weight: 700;
}
.machine-budget-over {
color: #ff7591;
font-weight: 700;
}
.machine-budget-warn {
margin-top: 8px;
font-size: 0.7rem;
color: #ffb3c1;
}
/* RINA v74_2_2_2_2_2: optional multi-attribute visual overlays */
#attributeViewBtn.attribute-view-active {
border-color: rgba(34,211,238,0.72);
background: rgba(34,211,238,0.16);
color: #d7fbff;
} .plane-color-list {
margin-top: 6px;
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 6px;
}
/* K / N multipath caps row at the top of the Unboxing panel (apply on Build & Unbox). */
.unbox-path-settings {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 8px;
}
/* The line-style block has only two fields (Virtual link line + Strut line) → split the row in half each. */
.unbox-path-settings.unbox-line-styles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.unbox-path-field span { line-height: 1.15; }
/* "Rebuild to apply" reminder shown only when Max routes / level (a build cap) is edited. */
.route-cap-note {
margin: -2px 0 8px;
padding: 6px 9px;
border-radius: 8px;
font-size: 0.68rem;
line-height: 1.3;
color: #ffd9a8;
background: rgba(251, 146, 60, 0.14);
border: 1px solid rgba(251, 146, 60, 0.4);
}
.route-cap-note strong { color: #ffe9cf; } /* Task H — Initialize build controls (Bridge Seed / Density / App Endpoints + Initialize) in the Unbox panel. */
.unbox-build-fields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 8px;
}
.unbox-build-field {
display: grid;
gap: 4px;
margin: 0;
min-width: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.58);
}
.unbox-build-field input[type="number"] {
width: 100%;
padding: 7px 9px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(5, 10, 21, 0.72);
color: white;
font-size: 0.82rem;
}
/* The seed field's re-roll knob overlaps the input's right padding so all three input boxes are the SAME width. */
.unbox-build-field .seed-row { position: relative; display: block; }
.unbox-build-field .seed-row input[type="number"] { width: 100%; padding-right: 26px; }
.unbox-build-field .seed-row .seed-knob {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
width: 18px;
height: 18px;
padding: 0;
line-height: 1;
font-size: 0.7rem;
}
.unbox-init-btn,
#unboxBtn.unbox-twoline { flex-direction: column !important; gap: 0 !important; line-height: 1.08; } .unbox-path-field {
display: grid;
gap: 4px;
margin: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.58);
}
.unbox-path-field input[type="number"],
.unbox-path-field select {
width: 100%;
padding: 7px 9px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(5, 10, 21, 0.72);
color: white;
font-size: 0.82rem;
}
/* Path spread slider (task #4): full-width row below the K/N grid. */
.unbox-spread-field {
display: grid;
gap: 5px;
margin: 0 0 8px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.58);
}
.unbox-spread-field .unbox-spread-label { display: flex; justify-content: space-between; align-items: baseline; }
.unbox-spread-field #pathSpreadValue { color: var(--cyan); font-size: 0.74rem; }
.unbox-spread-field input[type="range"] { width: 100%; accent-color: var(--cyan); } #wireVisibleToggle { white-space: nowrap; flex: 0 0 auto; }
#wireVisibleToggle.wire-hidden-active {
background: rgba(0, 245, 212, 0.16);
border-color: var(--cyan);
color: var(--cyan);
} .plane-color-extra-row {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.plane-color-row {
display: grid;
grid-template-columns: minmax(58px, 1fr) auto 30px;
gap: 8px;
align-items: center;
padding: 7px 8px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.80);
margin: 0;
font-size: 0.70rem;
cursor: pointer;
}
.plane-color-row-wide {
grid-template-columns: minmax(96px, 1fr) auto 30px;
}
.plane-color-name {
font-weight: 800;
color: rgba(255,255,255,0.84);
white-space: nowrap;
}
.plane-color-row .color-code {
margin: 0;
font-size: 0.66rem !important;
}
.plane-color-row input[type="color"] {
width: 28px;
height: 26px;
min-width: 28px;
padding: 0;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.12);
background: transparent;
box-shadow: none;
}
#planeColorBtn.plane-color-active {
border-color: rgba(0,245,212,0.72);
background: rgba(0,245,212,0.10);
color: white;
box-shadow: none;
}
@media (max-width: 720px) {
.plane-color-list,
.plane-color-extra-row {
grid-template-columns: 1fr;
} }
.attribute-view-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.attribute-view-options label {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.07);
color: rgba(255,255,255,0.76);
font-size: 0.70rem;
letter-spacing: 0.04em;
text-transform: none;
margin: 0;
cursor: pointer;
user-select: none;
}
.attribute-view-options input {
width: auto;
accent-color: var(--cyan);
margin: 0;
}
.attribute-view-scale {
margin-top: 10px;
padding: 8px 10px;
border-radius: 12px;
border: 1px dashed rgba(255,255,255,0.14);
background: rgba(255,255,255,0.045);
color: rgba(255,255,255,0.58);
font-size: 0.68rem;
line-height: 1.35;
}
.attribute-view-legend {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px 16px;
color: rgba(255,255,255,0.52);
font-size: 0.68rem;
}
.attribute-view-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.attribute-view-legend i {
width: 9px;
height: 9px;
border-radius: 999px;
display: inline-block;
box-shadow: 0 0 12px currentColor;
}
.attribute-view-legend input.legend-swatch {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
padding: 0;
border: 1px solid rgba(255,255,255,0.32);
border-radius: 5px;
background: none;
cursor: pointer;
}
.attribute-view-legend input.legend-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.attribute-view-legend input.legend-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.attribute-view-legend input.legend-swatch::-moz-color-swatch { border: none; border-radius: 4px; }
.attribute-label-size-control {
margin-top: 10px;
display: grid;
grid-template-columns: auto minmax(120px, 1fr) auto;
gap: 10px;
align-items: center;
color: rgba(255,255,255,0.66);
font-size: 0.70rem;
}
.attribute-label-size-control input[type="range"] {
width: 100%;
margin: 0;
accent-color: var(--cyan);
background: transparent;
box-shadow: none;
border: 0;
}
.attribute-label-size-control strong {
color: rgba(255,255,255,0.82);
font-size: 0.70rem;
min-width: 42px;
text-align: right;
}
/* RINA v74_2_2_2_2_2: compact horizontal Attribute View panel */
/* Overlays panel height cap + vertical scroll inside the body if content is tall.
Width comes from the .viz-group:not(.viz-collapsed) rule; collapsed shrinks to header. */
#attribute-view-panel.viz-group:not(.viz-collapsed) .viz-group-body {
/* No internal height cap / scroll — the panel grows to fit and the outer panel-stack scroll handles overflow. */
overflow: visible;
}
.attribute-view-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
align-items: stretch;
}
/* The Controls section (sliders) needs the full width; let it span all columns. */
.attribute-view-section.label-section {
grid-column: 1 / -1;
}
/* Fixed width only when expanded; collapsed falls back to .viz-group max-content so the
panel shrinks to its "Overlays" header like the other panels. Content wraps within it. */
#attribute-view-panel.viz-group:not(.viz-collapsed) {
width: min(440px, calc(100vw - 24px)) !important;
max-width: min(440px, calc(100vw - 24px)) !important;
}
#plane-color-panel.viz-group:not(.viz-collapsed) {
width: min(420px, calc(100vw - 24px)) !important;
max-width: min(420px, calc(100vw - 24px)) !important;
}
.attribute-view-section {
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.045);
border-radius: 16px;
padding: 9px 10px;
min-width: 0;
/* Stack title + each option row as flex tracks with a gap, so the dynamic checks row and the
badge row below it are always cleanly separated (no touching/overlap when a pill wraps). */
display: flex;
flex-direction: column;
gap: 8px;
}
.attribute-view-section-title {
margin-bottom: 0; /* the section's flex gap provides the spacing now */
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.58);
font-weight: 800;
}
.attribute-view-options.compact {
gap: 6px;
}
.attribute-view-options.compact label {
padding: 6px 9px;
font-size: 0.68rem;
}
.attribute-view-scale {
margin-top: 9px !important;
padding: 7px 9px !important;
}
.attribute-view-legend {
margin-top: 8px !important;
}
#attributeViewBtn:disabled {
opacity: 0.42 !important;
cursor: not-allowed !important;
pointer-events: none;
}
/* RINA v74_2_2_2_2: Attribute View ribbon controls */
.label-section {
min-width: 240px;
}
.label-section .attribute-label-size-control {
margin-top: 7px;
}
.label-section .attribute-label-size-control:first-of-type {
margin-top: 0;
}
/* RINA v74_2_2_2: unboxing panel row layout */
#animation-panel {
display: grid !important;
grid-template-columns: minmax(0, auto) minmax(260px, 420px) !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"actions slider"
"hint hint" !important;
align-items: center !important;
gap: 8px 14px !important;
width: auto !important;
max-width: min(1120px, calc(100vw - 24px)) !important;
padding: 10px 12px !important;
}
#animation-panel .unbox-actions {
grid-area: actions !important;
display: flex !important;
flex-wrap: nowrap !important; /* Initialize · Unbox · Move Nodes stay on ONE row (Task H) */
gap: 8px !important;
align-items: stretch !important;
}
#animation-panel .unbox-actions .mini-action { flex: 1 1 0 !important; min-width: 0 !important; }
#animation-panel .animation-slider-wrap {
grid-area: slider !important;
min-width: 260px !important;
align-self: center !important;
}
#animation-panel .animation-slider-wrap > label:first-child {
margin-bottom: 3px !important;
font-size: 0.66rem !important;
}
@media (max-width: 920px) {
#animation-panel {
grid-template-columns: 1fr !important;
grid-template-areas:
"actions"
"slider"
"hint" !important;
width: min(100%, 620px) !important;
} }
/* RINA v74_2_2: unboxing speed control */
.speed-control-row {
margin-top: 6px;
display: grid;
grid-template-columns: auto minmax(90px, 1fr) auto;
gap: 8px;
align-items: center;
}
#animation-panel .speed-control-row label {
margin: 0 !important;
color: rgba(255,255,255,0.58);
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.speed-control-row input[type="range"] {
width: 100%;
margin: 0;
accent-color: var(--cyan);
background: transparent;
border: 0;
box-shadow: none;
}
.speed-control-row strong {
color: var(--cyan);
font-size: 0.68rem;
min-width: 44px;
text-align: right;
}
.attribute-value-missing {
color: rgba(255, 209, 102, 0.95);
font-weight: 800;
letter-spacing: 0.03em;
}
#visualization-overlay {
position: absolute !important;
top: clamp(18px, 3vw, 34px) !important;
right: clamp(18px, 3vw, 34px) !important;
bottom: clamp(18px, 3vw, 28px) !important;
left: clamp(18px, 3vw, 34px) !important;
width: auto !important;
max-width: none !important;
display: block !important;
pointer-events: none !important;
}
#visualization-controls {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
z-index: 12 !important;
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-end !important;
gap: 10px !important;
width: auto !important;
max-width: calc(100% - 12px) !important;
white-space: normal !important;
pointer-events: auto !important;
}
#visualization-controls .mini-action {
flex: 0 0 auto !important;
}
#visualization-controls .zoom-action {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 !important;
border-radius: 999px !important;
font-size: 1rem !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
#visualization-panel-stack {
position: absolute !important;
/* Top-anchored + height-capped + scrollable so many expanded panels never run off the top of the
scene. The stack must be hit-testable (pointer-events:auto) for the wheel/scrollbar to work, so we
shrink it to fit-content — it hugs the actual panel column (≈ the widest open panel) and leaves the
rest of the scene click-through for camera rotate/pan. Empty cells beside narrower panels sit inside
that column. The camera panel-avoidance already frames scene content to the right of this column. */
/* top anchors the column BELOW the #visualization-header text (h3 + instructions) AND below the
"Controls" tab (pinned at 120px), so neither overlaps the panels. */
top: 176px !important;
bottom: auto !important;
left: 0 !important;
width: fit-content !important;
max-width: calc(100% - 160px) !important;
max-height: calc(100% - 188px) !important;
transition: transform 0.26s ease, opacity 0.26s ease !important;
overflow-y: auto !important;
overflow-x: hidden !important;
/* Reserve the scrollbar's space ALWAYS so the column's right edge (and the 3D viewport boundary that
clears it) is fixed whether or not the scrollbar is currently shown. */
scrollbar-gutter: stable !important;
/* Push the scrollbar right of the panels so the gap to the scrollbar EQUALS the panels' left margin
from the visualization window edge. That left margin = the overlay's left (clamp(18px,3vw,34px))
minus the #visualization-section's ~23px padding, so we mirror it here; the scene-viewport clip
auto-follows stack.right. (Keep in sync with #visualization-overlay's `left` if it changes.) */
padding-right: calc(clamp(18px, 3vw, 34px) - 23px) !important;
display: grid !important;
gap: 18px !important;
justify-items: start !important;
pointer-events: auto !important;
/* Fixed, theme-independent scrollbar (matches the light-theme look in both themes). */
scrollbar-width: thin !important;
scrollbar-color: rgba(165,174,189,0.6) transparent !important;
}
/* Hidden state (toggled by the "Controls" tab): slide the whole column off the left edge. Purely visual —
panel states are untouched, so showing restores everything exactly. */
#visualization-panel-stack.stack-hidden {
transform: translateX(calc(-100% - 28px)) !important;
opacity: 0 !important;
pointer-events: none !important;
}
#visualization-panel-stack::-webkit-scrollbar {
width: 10px;
}
#visualization-panel-stack::-webkit-scrollbar-track {
background: transparent;
}
#visualization-panel-stack::-webkit-scrollbar-thumb {
background: rgba(165,174,189,0.6);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
}
#visualization-panel-stack::-webkit-scrollbar-thumb:hover {
background: rgba(185,193,206,0.85);
background-clip: padding-box;
} /* Opaque panels in both themes (no see-through to the scene behind). Higher specificity than the
individual #panel background rules (e.g. #animation-panel), so it wins. */
#visualization-panel-stack .viz-group {
background: #060b16;
backdrop-filter: none !important;
}
/* Uniform width for every EXPANDED panel (= the Overlays panel width, via --viz-panel-width). The leading
`body` raises specificity above the per-panel width rules (#playground-panel, #attribute-view-panel, …) so
it wins regardless of source order. Collapsed panels are untouched → still shrink to their header. */
body #visualization-panel-stack .viz-group:not(.viz-collapsed) {
/* 440px on normal screens, but never wider than the viewport (minus a small inset) so a panel can't
cause horizontal page scroll on very small screens. */
width: min(var(--viz-panel-width), calc(100vw - 28px)) !important;
max-width: min(var(--viz-panel-width), calc(100vw - 28px)) !important;
}
/* "Controls" tab — always-visible toggle pinned top-left that slides the whole panel column in/out. Lives
OUTSIDE the stack so it stays visible when the panels are hidden. Styled as a full-width panel-header bar
(same 440px width as the panels) so it reads as the cap of the controls column. Dark in both themes. */
.controls-tab {
--panel-accent: var(--cyan); /* same accent family as the panel pills (matches the chevron) */
position: absolute;
top: 120px;
left: 0;
z-index: 13;
box-sizing: border-box;
width: var(--viz-panel-width);
max-width: calc(100vw - 24px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 16px;
background: #060b16;
border: 1px solid rgba(255,255,255,0.24);
border-radius: 16px;
overflow: hidden; /* clip the accent stripe to the rounded corners */
box-shadow: 0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
color: white;
cursor: pointer;
pointer-events: auto;
font: inherit;
text-align: left;
transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
/* Left accent stripe — same as the panel headers' .viz-group-header::before. */
.controls-tab::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--panel-accent, var(--cyan));
}
/* Hover/focus glow — same accent treatment as .viz-group:hover. */
.controls-tab:hover,
.controls-tab:focus-visible {
background: rgba(255,255,255,0.05);
border-color: color-mix(in srgb, var(--panel-accent, var(--cyan)) 75%, transparent);
box-shadow:
0 14px 38px rgba(0,0,0,0.55),
0 0 0 1px color-mix(in srgb, var(--panel-accent, var(--cyan)) 70%, transparent),
0 0 22px -4px color-mix(in srgb, var(--panel-accent, var(--cyan)) 60%, transparent),
inset 0 1px 0 rgba(255,255,255,0.08);
}
.controls-tab-label {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
white-space: nowrap; /* longer "Show/Hide Control Panels" caption must stay on one line */
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.controls-tab-chevron {
flex: none;
font-size: 1.05rem;
line-height: 1;
color: var(--panel-accent, var(--cyan));
}
#animation-panel,
#playground-panel,
#plane-color-panel,
#attribute-view-panel {
pointer-events: auto !important;
align-self: flex-start !important;
margin: 0 !important;
}
@media (max-width: 900px) {
#visualization-overlay {
top: clamp(16px, 3vw, 24px) !important;
right: clamp(16px, 3vw, 24px) !important;
left: clamp(16px, 3vw, 24px) !important;
max-width: none !important;
}
#visualization-panel-stack {
position: absolute !important;
bottom: auto !important;
width: fit-content !important;
max-width: calc(100% - 40px) !important;
max-height: calc(100% - 184px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
margin-top: 0 !important;
/* Match the ≤900px overlay left (clamp(16px,3vw,24px)) so the right gap still equals the left
margin here (it tapers to ~0 on narrow windows, mirroring the panels' own left inset). */
padding-right: calc(clamp(16px, 3vw, 24px) - 23px) !important;
}
}
/* Medium screens (≤1340px, where the long title + full controls would collide): hide the instructions,
shrink the title, and keep the right-side buttons top-right BESIDE the smaller title as a SINGLE row
that condenses (never wraps/grows taller). The "Controls" tab + panel column move up under the shorter
title. Below the burger breakpoint (see ≤620px) the buttons collapse into a ☰ menu instead of colliding. */
@media (max-width: 1340px) {
#visualization-header p { display: none !important; } /* drop the orbit/zoom hint to keep the title compact */
#visualization-header h3 { font-size: clamp(1.05rem, 2.4vw, 1.6rem) !important; }
#visualization-controls {
flex-wrap: nowrap !important; /* one row only — shrink, then burger; never stack */
right: clamp(12px, 2.5vw, 20px) !important;
gap: 7px !important;
}
#visualization-controls .mini-action {
padding: 7px 10px !important;
font-size: 0.7rem !important;
letter-spacing: 0.03em !important;
}
/* Move the Controls pill + panel column up, snug under the now-shorter single-line title. */
#controlsTab { top: 80px !important; }
#visualization-panel-stack { top: 126px !important; max-height: calc(100% - 138px) !important; }
}
/* Small screens (≤1000px): the text buttons can no longer fit beside the title, so collapse them into a
☰ burger that opens a vertical dropdown — no stacking, no overlap with the title or Controls pill. */
@media (max-width: 1000px) {
.viz-burger { display: inline-flex !important; }
#visualization-controls { display: none !important; } /* hidden until the burger opens it */
#visualization-overlay.viz-controls-open #visualization-controls {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
position: absolute !important;
top: clamp(60px, 4vw, 86px) !important; /* just below the burger */
right: clamp(12px, 2.5vw, 20px) !important;
left: auto !important;
width: auto !important;
min-width: 184px !important;
max-width: calc(100vw - 32px) !important;
gap: 6px !important;
padding: 8px !important;
background: #060b16;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 14px !important;
box-shadow: 0 18px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
z-index: 20 !important;
}
#visualization-overlay.viz-controls-open #visualization-controls .mini-action {
width: 100% !important;
justify-content: flex-start !important;
padding: 9px 12px !important;
font-size: 0.74rem !important;
}
}
@media (max-width: 620px) {
#visualization-controls {
gap: 8px !important;
}
#visualization-controls .mini-action {
padding: 9px 12px !important;
font-size: 0.72rem !important;
}
}
/* RINA: grouped collapsible visualization panels (Unboxing / Setup / Inspect & Edit) */
.viz-group {
display: block;
width: max-content;
max-width: min(560px, calc(100vw - 24px));
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.24);
background: #060b16;
/* drop shadow for depth + a 1px inner top highlight so each panel reads as a lit "card". */
box-shadow: 0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
color: white;
overflow: hidden;
pointer-events: auto;
transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
/* #4 — active-panel glow: the panel under the pointer (or the one you're interacting with) glows in its own
accent colour, so the panel in use stands out. Only one glows at a time under the cursor. Accent colours
are explicit, so the glow looks identical in both themes. */
.viz-group:hover,
.viz-group:focus-within {
border-color: color-mix(in srgb, var(--panel-accent, var(--cyan)) 75%, transparent);
box-shadow:
0 14px 38px rgba(0,0,0,0.55),
0 0 0 1px color-mix(in srgb, var(--panel-accent, var(--cyan)) 70%, transparent),
0 0 22px -4px color-mix(in srgb, var(--panel-accent, var(--cyan)) 60%, transparent),
inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Override the legacy #animation-panel grid so the Unboxing group stacks header + body */
#animation-panel.viz-group {
display: block !important;
width: max-content !important;
min-width: 0 !important;
max-width: min(560px, calc(100vw - 24px)) !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
grid-template-rows: none !important;
padding: 0 !important;
border-radius: 18px !important;
}
#animation-panel.viz-group.playground-hidden {
display: none !important;
}
.viz-group-header {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
position: relative;
padding: 10px 15px !important;
margin: 0 !important;
/* Header cap: a faint tint over the panel body so the title bar reads as a distinct cap (works in both
themes — panels are dark in both, this is a white-opacity overlay). */
background: rgba(255,255,255,0.055) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none;
color: white;
cursor: pointer;
font: inherit;
text-align: left;
}
/* Hairline divider under the header — only when expanded (a collapsed panel is header-only, no divider). */
.viz-group:not(.viz-collapsed) .viz-group-header {
border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}
.viz-group-header:hover {
background: rgba(255,255,255,0.10);
}
/* Per-panel accent stripe on the left of each header — gives every panel a distinct identity at a glance.
Drawn as a pseudo-element so the header tint/hover background never covers it; clipped by the panel's
rounded corners (overflow:hidden). Colours are explicit, so they look identical in both themes. */
.viz-group-header::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--panel-accent, var(--cyan));
}
#playground-panel { --panel-accent: #38bdf8; } /* sky blue */
#animation-panel { --panel-accent: #a78bfa; } /* violet */
#inspect-panel { --panel-accent: #fbbf24; } /* amber */
#application-level-panel { --panel-accent: #34d399; } /* emerald */
#slicing-panel { --panel-accent: #f472b6; } /* pink */
#view-controls-panel { --panel-accent: #818cf8; } /* indigo */
#attribute-view-panel { --panel-accent: #fb923c; } /* orange */
#plane-color-panel { --panel-accent: #22d3ee; } /* cyan */
/* The Unboxing panel (#animation-panel) sets its own border-color !important at id-specificity, which beats
the shared .viz-group:hover glow — so it needs its own id-level glow rule to match the other panels. */
#animation-panel:hover,
#animation-panel:focus-within {
border-color: color-mix(in srgb, var(--panel-accent, var(--cyan)) 75%, transparent);
box-shadow:
0 14px 38px rgba(0,0,0,0.55),
0 0 0 1px color-mix(in srgb, var(--panel-accent, var(--cyan)) 70%, transparent),
0 0 22px -4px color-mix(in srgb, var(--panel-accent, var(--cyan)) 60%, transparent),
inset 0 1px 0 rgba(255,255,255,0.08);
}
.viz-group-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
}
.viz-group-chevron {
font-size: 0.95rem;
line-height: 1;
color: var(--cyan);
transition: transform 0.18s ease;
}
.viz-group.viz-collapsed .viz-group-chevron {
transform: rotate(-90deg);
}
.viz-group-body {
display: flex;
flex-direction: column;
gap: 8px;
/* 5px top padding = a consistent gap between the panel title and its first line (button/text/control)
across ALL panels (benchmarked to the Inspect & Edit panel). */
padding: 5px 14px 12px;
}
.viz-group.viz-collapsed .viz-group-body {
display: none !important;
}
.viz-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
/* Inspect & Edit: the two buttons span the 440px panel evenly instead of hugging the left. (Title gap now
comes from the shared .viz-group-body top padding, consistent across all panels.) */
#inspect-panel .viz-actions { flex-wrap: nowrap; }
#inspect-panel .viz-actions .mini-action { flex: 1 1 0; min-width: 0; }
/* --- Match the View Controls slider format (fixed label column · range fills · cyan value at right) for the
Application Level "Label size" slider and the Overlays "Controls" sliders. --- */
#application-level-panel .app-level-label-size,
#attribute-view-panel .attribute-label-size-control {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 0;
grid-template-columns: none !important;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255,255,255,0.58);
}
#application-level-panel .app-level-label-size > span:first-child { flex: 0 0 110px; }
#attribute-view-panel .attribute-label-size-control > span:first-child { flex: 0 0 140px; }
#application-level-panel .app-level-label-size input[type="range"],
#attribute-view-panel .attribute-label-size-control input[type="range"] {
flex: 1 1 auto; width: auto; min-width: 0; accent-color: var(--cyan);
}
#application-level-panel .app-level-label-size strong,
#attribute-view-panel .attribute-label-size-control strong {
flex: 0 0 44px; min-width: 0; text-align: right; color: var(--cyan); font-weight: 800;
}
/* Overlays "Controls" section formatted like the View Controls "Dim Levels" block: plain (no card), a
separator line above, then the slider rows. */
#attribute-view-panel .attribute-view-section.label-section {
border: none !important;
background: none;
border-radius: 0 !important;
padding: 10px 0 0 !important;
margin-top: 4px;
border-top: 1px solid rgba(255,255,255,0.14) !important;
display: flex;
flex-direction: column;
gap: 7px;
}
#attribute-view-panel .attribute-view-section.label-section .attribute-view-section-title {
margin-bottom: 2px;
font-size: 0.66rem;
letter-spacing: 0.12em;
}
/* RINA: Application DIF communication panel (a collapsible viz-group) */
/* Fixed width only when expanded; when collapsed, fall back to base .viz-group
(width: max-content) so the panel shrinks to its "Application DIF" header like the
other collapsed panels. */
#application-level-panel.viz-group:not(.viz-collapsed) {
width: min(430px, calc(100vw - 24px)) !important;
max-width: min(430px, calc(100vw - 24px)) !important;
}
.app-level-body {
display: flex;
flex-direction: column;
gap: 10px;
/* margin-top removed — the shared .viz-group-body top padding provides the consistent title gap. */
}
.app-level-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
/* Keep both buttons of a row on one line, sharing the width evenly. */
.app-level-row .mini-action {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
}
.app-level-readout {
font-size: 0.74rem;
line-height: 1.4;
color: rgba(255,255,255,0.72);
}
.app-level-settings {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 2px;
}
/* Four color swatches aligned in a 2-column grid; Label size sits on its own row below. */
.app-level-color-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 16px;
}
.app-level-color,
.app-level-label-size {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.66);
}
/* Label left, swatch right-aligned so swatches line up per column. */
.app-level-color {
justify-content: space-between;
}
.app-level-color input[type="color"] {
width: 34px;
height: 24px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 6px;
background: transparent;
cursor: pointer;
padding: 0;
}
.app-level-label-size input[type="range"] {
width: 100px;
accent-color: var(--cyan);
cursor: pointer;
}
.app-level-label-size strong {
color: var(--cyan);
font-weight: 800;
}
.app-level-section-title {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-top: 2px;
}
.app-level-requirements {
display: flex;
flex-direction: column;
gap: 6px;
}
.app-level-req-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
font-size: 0.74rem;
}
.app-level-req-row input {
width: 110px;
padding: 5px 8px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.06);
color: white;
font-size: 0.74rem;
}
.app-level-result {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.74rem;
}
.app-level-verdict {
font-weight: 800;
letter-spacing: 0.04em;
padding: 6px 10px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
}
.app-level-verdict.pass,
.app-level-verdict.allpass { color: #052e22; background: #34d399; }
.app-level-verdict.somepass { color: #2a1c02; background: #fbbf24; }
.app-level-verdict.fail { color: #2a0b12; background: #fb7185; }
.app-level-verdict.unknown { color: #06212e; background: #7dd3fc; }
/* Underlying-link list (mirrors the Slicing panel's link list) — passing links green, failing red. */
.app-link-list { display: flex; flex-direction: column; gap: 5px; max-height: 188px; overflow-y: auto; margin-top: 2px; }
.app-link-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 0.72rem; color: rgba(255,255,255,0.88);
border-radius: 7px; padding: 5px 9px; cursor: pointer;
border: 1px solid transparent;
}
.app-link-row .app-link-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-link-row .app-link-badge { flex: 0 0 auto; font-weight: 700; font-size: 0.68rem; opacity: 0.9; }
.app-link-row.pass { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.40); }
.app-link-row.fail { background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.40); }
.app-link-row.pass .app-link-badge { color: #34d399; }
.app-link-row.fail .app-link-badge { color: #fb7185; }
.app-link-row.selected { outline: 2px solid rgba(255,255,255,0.55); outline-offset: -1px; }
.app-link-row:hover { filter: brightness(1.12); }
/* Excluded ("−") app-level link: kept in the list but greyed and not counted/highlighted/exported. */
.app-link-row.excluded { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); opacity: 0.55; }
.app-link-row.excluded .app-link-badge { color: rgba(255,255,255,0.5); }
/* Deselected ("−") slice row in app-import mode: greyed, still listed. */
.slice-list-row.deselected { opacity: 0.5; filter: grayscale(0.7); }
.app-link-remove {
flex: 0 0 auto; width: 18px; height: 18px; padding: 0; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18); background: rgba(5,10,21,0.55); color: white;
font-size: 0.66rem; line-height: 1; cursor: pointer;
}
.app-link-remove:hover { background: rgba(251,113,133,0.4); }
/* Slicing app-import: PASS/FAIL chips per row + the import header / filter toggles. */
.slice-pf-chip { flex: 0 0 auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 999px; }
.slice-pf-chip.pass { color: #052e22; background: #34d399; }
.slice-pf-chip.fail { color: #2a0b12; background: #fb7185; }
.slice-import-head { font-size: 0.7rem; color: rgba(255,255,255,0.82); margin: 2px 0 6px; }
.slice-import-toggles { display: flex; gap: 8px; margin-bottom: 4px; }
.app-link-detail {
display: flex; flex-direction: column; gap: 5px; margin-top: 2px;
padding: 9px; border-radius: 8px;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
}
.app-link-detail-head { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.01em; }
.app-link-detail-head.pass { color: #34d399; }
.app-link-detail-head.fail { color: #fb7185; }
/* Composed value rows: name left (muted), value right (bold), dotted leaders so columns read cleanly. */
.app-link-detail-attrs { display: flex; flex-direction: column; gap: 3px; }
.app-link-attr { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; font-size: 0.66rem; color: rgba(255,255,255,0.62); }
.app-link-attr span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-link-attr span:last-child { font-weight: 700; color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums; }
/* Pass/fail chips (SLA categories + app requirements): name + status on line 1, the comparison detail on
line 2 (muted, smaller). The ✓/✗/— status spans both rows in a fixed right column so they all align. */
.app-level-chip {
display: grid;
grid-template-columns: 1fr 16px;
column-gap: 8px;
row-gap: 1px;
padding: 5px 9px;
border-radius: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
}
.app-level-chip .chip-name { grid-column: 1; grid-row: 1; font-size: 0.67rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.app-level-chip .chip-detail { grid-column: 1; grid-row: 2; font-size: 0.62rem; color: rgba(255,255,255,0.6); line-height: 1.3; font-variant-numeric: tabular-nums; }
.app-level-chip .chip-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; font-weight: 800; font-size: 0.82rem; line-height: 1; }
.app-level-chip.pass { border-color: rgba(52,211,153,0.32); }
.app-level-chip.fail { border-color: rgba(251,113,133,0.32); }
.app-level-chip.pass .chip-status { color: #34d399; }
.app-level-chip.fail .chip-status { color: #fb7185; }
.app-level-chip.skip .chip-status { color: #fbbf24; }
/* RINA: configurator manager panels collapse into a wrapping row of pills */
/* ---- Manager tab bar (Attribute / Link SLA / App Req / Profile) ---- */
.manager-stack {
margin-top: 18px;
margin-bottom: 18px;
display: block;
}
.manager-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
/* Uniform tab buttons — equal height + identical responsive behaviour (no per-panel height drift). */
.manager-tab {
flex: 1 1 150px;
min-width: 0; /* allow shrinking so the label wraps instead of overflowing/overlapping */
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 50px; /* fixed height → identical on every row/width even when a label wraps to 2 lines */
padding: 4px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.82);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.manager-tab:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(0,245,212,0.4);
}
.manager-tab.is-active {
background: rgba(0,245,212,0.14);
border-color: rgba(0,245,212,0.7);
color: #e7fbf7;
box-shadow: 0 0 0 1px rgba(0,245,212,0.35), 0 8px 22px rgba(0,245,212,0.12);
}
/* Let long labels (e.g. "Application Requirements") WRAP inside the button rather than overflow + overlap.
align-items:stretch on .manager-tabs keeps every button the same height even when one wraps to 2 lines. */
.manager-tab-label { white-space: normal; text-align: center; line-height: 1.2; min-width: 0; overflow-wrap: break-word; }
/* Count badge on each tab */
.manager-tab-count {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
color: rgba(255,255,255,0.85);
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
}
.manager-tab.is-active .manager-tab-count {
background: rgba(0,245,212,0.3);
color: #eafffb;
}
/* CSS-drawn chevron (no font glyph) — points down when closed, up when active. */
.manager-tab-chevron {
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.15s ease;
opacity: 0.8;
margin-left: 2px;
}
.manager-tab.is-active .manager-tab-chevron {
transform: rotate(-135deg); /* point up = "click to collapse" */
}
.manager-bodies { margin-top: 12px; }
/* A section is shown only when active; collapsed = hidden (the tab represents it). */
.manager-stack .attribute-manager {
margin: 0;
}
.manager-stack .attribute-manager.collapsed {
display: none;
}
/* In-panel collapse icon (repurposed toggle button) — a small up-chevron pill. */
.manager-collapse-btn {
position: relative;
width: 30px;
min-width: 30px;
height: 30px;
padding: 0;
}
.manager-collapse-chevron {
position: absolute;
inset: 0;
margin: auto;
width: 9px;
height: 9px;
border-left: 2px solid currentColor;
border-top: 2px solid currentColor;
transform: translateY(2px) rotate(45deg); /* up-chevron = collapse */
}
/* Small screens: tighter tabs so labels stay readable (and 2-up rather than cramped/overlapping). */
@media (max-width: 640px) {
.manager-tab {
flex: 1 1 130px;
padding: 4px 10px;
gap: 6px;
font-size: 0.76rem;
}
.manager-tab-chevron { margin-left: 0; }
}
@media (max-width: 380px) {
.manager-tab { flex: 1 1 100%; } /* one per row on very narrow screens */
}
/* ---- Save-visualization (image export) button + dialog ---- */
/* Reuses the .mini-action look of the other visualization buttons; only the position differs.
Fixed to the viewport's bottom-right so it sits in the visualization's lower-right corner and can
never drift off-page; shown only while the 3D view is on screen (toggled via IntersectionObserver). */
/* Save-image button now lives inline in #visualization-controls (top-right row), next to Reset View. */
#exportImageBtn { cursor: pointer; }
.export-dialog {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
background: rgba(2, 6, 16, 0.62);
backdrop-filter: blur(3px);
}
.export-dialog.is-hidden { display: none; }
.export-dialog-card {
position: relative;
width: min(420px, 92vw);
padding: 22px 22px 18px;
border-radius: 18px;
border: 1px solid rgba(0, 245, 212, 0.28);
background: linear-gradient(135deg, rgba(10, 16, 30, 0.98), rgba(18, 26, 42, 0.97));
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
color: #e7fbf7;
}
.export-dialog-close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: #cbd5e1;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.export-dialog-close:hover { border-color: var(--cyan); color: var(--cyan); }
.export-dialog-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.export-dialog-sub { font-size: 0.78rem; color: rgba(231, 251, 247, 0.6); margin-bottom: 16px; }
.export-opt {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 11px;
margin-bottom: 8px;
border-radius: 11px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
font-size: 0.85rem;
cursor: pointer;
}
.export-opt input { margin-top: 2px; accent-color: #00f5d4; }
.export-opt small { display: block; color: rgba(231, 251, 247, 0.5); font-size: 0.72rem; margin-top: 2px; }
.export-opt.is-disabled { opacity: 0.45; cursor: not-allowed; }
/* Config picker list (Export/Import "pick which configs"): scrollable checkbox rows reusing .export-opt. */
.config-select-all { margin-bottom: 6px; font-weight: 700; }
.config-select-list { max-height: 300px; overflow-y: auto; margin-bottom: 6px; }
.config-select-list .export-opt { margin-bottom: 6px; align-items: center; }
.config-select-list .export-opt span small { display: inline; color: rgba(231,251,247,0.5); margin-left: 4px; }
/* Section heading inside the import picker (Global configuration / Architectures). */
.config-select-group-title {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(231,251,247,0.6);
margin: 10px 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.config-select-group-title:first-child { margin-top: 0; }
/* Per-entry conflict sub-list under a global import block (shown only while that block is ticked). */
.config-conflict-block { margin: 2px 0 8px 24px; padding: 6px 8px; border-left: 2px solid rgba(255,183,3,0.5);
background: rgba(255,183,3,0.06); border-radius: 0 8px 8px 0; }
.config-conflict-block.is-hidden { display: none; }
.config-conflict-head { font-size: 0.66rem; font-weight: 700; color: #ffd27d; margin-bottom: 4px; letter-spacing: 0.02em; }
.config-conflict-row { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; color: rgba(231,251,247,0.82); margin: 3px 0; cursor: pointer; }
.config-conflict-row input { width: auto; margin: 0; accent-color: var(--cyan); }
.config-conflict-new { font-size: 0.66rem; color: rgba(120,230,200,0.75); margin-top: 5px; }
.config-conflict-note { color: #ffd27d !important; }
.export-opt-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 11px;
margin-bottom: 16px;
border-radius: 11px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
font-size: 0.85rem;
}
.export-quality-select {
background: rgba(8, 14, 28, 0.9);
color: #e7fbf7;
border: 1px solid rgba(0, 245, 212, 0.3);
border-radius: 8px;
padding: 6px 8px;
font-size: 0.8rem;
}
.export-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }