/* ===================================================================
PearGRN — shared design system for the Network Tools pages
(Network Creation / Network Comparison)
=================================================================== */
:root {
--nt-ink: #23303d;
--nt-body: #4a5762;
--nt-muted: #6b7a8c;
--nt-line: #e4e9ef;
--nt-soft: #f7f9fb;
--nt-accent: #2E6F9E;
--nt-accent-soft: #eef5fa;
--nt-green: #2f7a4e;
--nt-green-soft: #eef7f1;
--nt-amber: #b4652a;
--nt-amber-soft: #fdf1e8;
--nt-purple: #6b4ec2;
--nt-purple-soft: #f1eefb;
}
body.my-body { background: var(--nt-soft); }
.nt-page { max-width: 1060px; padding: 34px 16px 56px; }
.nt-page-wide { max-width: 1340px; padding: 26px 16px 56px; }
/* ---------------- page heading ---------------- */
.nt-eyebrow {
font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
font-weight: 700; color: var(--nt-green); margin-bottom: 8px;
}
.nt-title {
font-size: 2rem; font-weight: 800; letter-spacing: -.02em;
color: var(--nt-ink); margin: 0; line-height: 1.15;
}
.nt-title .thin { font-weight: 500; color: var(--nt-muted); }
.nt-lede {
font-size: .92rem; color: var(--nt-muted); line-height: 1.7;
margin: 10px 0 24px;
}
/* ---------------- cards ---------------- */
.nt-card {
background: #fff;
border: 1px solid var(--nt-line);
border-radius: 14px;
padding: 22px 24px 20px;
box-shadow: 0 1px 3px rgba(30, 45, 60, .05);
margin-bottom: 20px;
}
.nt-card-head {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap; margin-bottom: 16px;
}
.nt-card-title {
font-size: 1.05rem; font-weight: 700; color: var(--nt-ink);
margin: 0; letter-spacing: -.01em;
}
.nt-card-sub { font-size: .82rem; color: var(--nt-muted); }
.nt-spacer { flex: 1 1 auto; }
/* ---------------- form controls ---------------- */
.nt-label {
display: block;
font-size: .72rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--nt-muted);
margin-bottom: 8px;
}
.nt-label .hint {
font-weight: 500; letter-spacing: 0; text-transform: none;
color: #98a4b0; font-size: .74rem; margin-left: 6px;
}
.nt-select,
.nt-textarea {
width: 100%;
border: 1px solid var(--nt-line);
border-radius: 10px;
padding: 10px 13px;
font-size: .88rem;
color: var(--nt-ink);
background: #fcfdfe;
transition: border-color .18s ease, box-shadow .18s ease;
}
.nt-textarea {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .84rem; line-height: 1.7;
min-height: 132px; resize: vertical;
}
.nt-textarea.short { min-height: 84px; }
.nt-select:focus,
.nt-textarea:focus {
outline: none;
border-color: #a9c9e0; background: #fff;
box-shadow: 0 0 0 3px rgba(46, 111, 158, .12);
}
.nt-textarea::placeholder { color: #a9b4c0; }
/* single-line ID field (TF Regulation & friends) */
.nt-input {
width: 100%;
border: 1px solid var(--nt-line);
border-radius: 10px;
padding: 12px 14px;
font-size: .95rem;
color: var(--nt-ink);
background: #fcfdfe;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
transition: border-color .18s ease, box-shadow .18s ease;
}
.nt-input:focus {
outline: none;
border-color: #a9c9e0; background: #fff;
box-shadow: 0 0 0 3px rgba(46, 111, 158, .12);
}
.nt-input::placeholder { color: #a9b4c0; }
/* the ID currently being queried, shown inside headings */
.nt-q {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .84rem; font-weight: 700; color: var(--nt-accent);
background: var(--nt-accent-soft); border: 1px solid #cfe2f0;
border-radius: 7px; padding: 1px 8px;
}
/* amber notice strip (truncated result sets etc.) */
.nt-note {
font-size: .78rem; line-height: 1.65; color: var(--nt-amber);
background: var(--nt-amber-soft); border: 1px solid #f2d9c4;
border-radius: 10px; padding: 9px 13px; margin-bottom: 14px;
}
.nt-note .btn-link {
color: var(--nt-amber); font-weight: 700; font-size: .78rem;
text-decoration: underline; padding: 0; vertical-align: baseline;
}
.nt-inline-form { display: inline; }
.nt-row { display: grid; gap: 18px; }
.nt-row.two { grid-template-columns: 1fr 1fr; }
.nt-row.main { grid-template-columns: 1fr 300px; }
@media (max-width: 860px) {
.nt-row.two, .nt-row.main { grid-template-columns: 1fr; }
}
.nt-hint { font-size: .78rem; color: #93a0ad; margin-top: 8px; line-height: 1.6; }
/* group accent (comparison) */
.nt-group { border-top: 3px solid var(--nt-line); padding-top: 14px; }
.nt-group.g1 { border-top-color: #7fb2d6; }
.nt-group.g2 { border-top-color: #e0b184; }
.nt-group .dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 7px; vertical-align: middle;
}
.nt-group.g1 .dot { background: #7fb2d6; }
.nt-group.g2 .dot { background: #e0b184; }
/* ---------------- buttons ---------------- */
.nt-actions {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; margin-top: 20px;
}
.nt-actions .spacer { flex: 1 1 auto; }
.nt-actions .btn {
border-radius: 10px; font-weight: 600; font-size: .9rem;
padding: 9px 20px;
}
.nt-actions .btn-success { padding: 9px 26px; }
.nt-actions .btn-outline-secondary,
.nt-actions .btn-outline-success { border-color: var(--nt-line); color: var(--nt-body); }
.nt-actions .btn-outline-success { color: var(--nt-green); border-color: #cfe7d8; }
.nt-actions .btn-outline-success:hover { background: var(--nt-green-soft); color: var(--nt-green); border-color: #b8dcc6; }
/* ---------------- example chips ---------------- */
.nt-examples {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nt-line);
}
.nt-examples .lead-in {
font-size: .72rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--nt-muted); margin-right: 4px;
}
.nt-chip {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .78rem; padding: 4px 11px; border-radius: 999px;
border: 1px solid var(--nt-line); background: #fff; color: var(--nt-body);
cursor: pointer; transition: all .16s ease;
}
.nt-chip:hover { border-color: #c3d6e5; background: var(--nt-accent-soft); color: var(--nt-accent); }
.nt-chip .cnt { margin-left: 6px; font-size: .7rem; color: #98a4b0; }
.nt-chip:hover .cnt { color: inherit; opacity: .75; }
.nt-chip.lnc:hover { border-color: #ded4f5; background: var(--nt-purple-soft); color: var(--nt-purple); }
.nt-chip.circ:hover { border-color: #f2d9c4; background: var(--nt-amber-soft); color: var(--nt-amber); }
.nt-chip.mi:hover { border-color: #cfe7d8; background: var(--nt-green-soft); color: var(--nt-green); }
.nt-fill {
font-size: .78rem; padding: 4px 11px; border-radius: 999px;
border: 1px dashed #c3d6e5; background: #fff; color: var(--nt-accent);
cursor: pointer; transition: all .16s ease;
}
.nt-fill:hover { background: var(--nt-accent-soft); border-style: solid; }
/* live counter pills */
.nt-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; min-height: 22px; }
.nt-count .tot { font-size: .78rem; color: var(--nt-muted); margin-right: 2px; }
.nt-pill {
font-size: .72rem; font-weight: 600; padding: 2px 9px;
border-radius: 999px; border: 1px solid transparent;
/* The margin reset is load-bearing, not tidiness. Bootstrap ships an
`.alert` rule of its own (`margin-bottom: var(--bs-alert-margin-bottom)`,
i.e. 1rem), and `.nt-pill.alert` is matched by it. Padding and
border-radius survive that collision because `.nt-pill` declares both
and nettools.css loads after bootstrap.min.css — but margin had no
competitor, so the pill's margin box came out 16px taller than the
others. `align-items: center` then centred the remaining pills inside
that taller line box while the alert pill sat at the top, which is the
8px vertical stagger you could see in the counter strip. Stating the
reset here fixes every variant at once, including any name a future
framework happens to share. */
margin: 0;
}
.nt-pill.gene { background: #eef5fa; color: #2E6F9E; border-color: #cfe2f0; }
.nt-pill.lnc { background: #f1eefb; color: #6b4ec2; border-color: #ded4f5; }
.nt-pill.circ { background: #fdf1e8; color: #b4652a; border-color: #f2d9c4; }
.nt-pill.mi { background: #eef7f1; color: #2f7a4e; border-color: #cfe7d8; }
.nt-pill.alert { background: #fdecec; color: #a83232; border-color: #f2b8b8; }
/* ---------------- stat strip ---------------- */
.nt-stats {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.nt-stat {
background: #fff; border: 1px solid var(--nt-line);
border-radius: 12px; padding: 12px 18px; min-width: 132px;
box-shadow: 0 1px 3px rgba(30, 45, 60, .04);
}
.nt-stat .k {
font-size: .68rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--nt-muted); margin-bottom: 4px;
}
.nt-stat .v {
font-size: 1.32rem; font-weight: 800; color: var(--nt-ink);
line-height: 1.1; letter-spacing: -.02em;
}
.nt-stat .v .unit { font-size: .78rem; font-weight: 600; color: var(--nt-muted); margin-left: 3px; }
.nt-stat.is-accent { border-color: #cfe2f0; background: linear-gradient(180deg, #fff, var(--nt-accent-soft)); }
.nt-stat.is-green { border-color: #cfe7d8; background: linear-gradient(180deg, #fff, var(--nt-green-soft)); }
.nt-stat.is-amber { border-color: #f2d9c4; background: linear-gradient(180deg, #fff, var(--nt-amber-soft)); }
/* ---------------- network canvas ---------------- */
.nt-canvas-wrap {
position: relative;
border: 1px solid var(--nt-line);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
#cy { width: 100%; height: 520px; display: block; }
@media (max-width: 768px) { #cy { height: 360px; } }
/* ---------------- graph toolbar & canvas overlays ---------------- */
.nt-graph-tools {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 0 0 12px; font-size: .78rem; color: var(--nt-muted);
}
.nt-tool { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.nt-tool > span {
font-size: .68rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--nt-muted);
}
.nt-select.nt-select-sm {
width: auto; padding: 6px 30px 6px 11px;
font-size: .8rem; border-radius: 8px;
}
.nt-tool-check { font-size: .78rem; color: var(--nt-body); }
.nt-tool-check input { margin: 0; cursor: pointer; accent-color: var(--nt-green); }
.nt-label-status {
font-size: .72rem; color: var(--nt-muted); letter-spacing: .01em;
line-height: 1.2;
}
.nt-label-status:empty { display: none; }
.nt-graph-hint { margin-left: auto; font-size: .74rem; color: var(--nt-muted); }
@media (max-width: 900px) { .nt-graph-hint { display: none; } }
.nt-canvas-loading {
position: absolute; inset: 0; z-index: 6;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .78);
font-size: .82rem; color: var(--nt-body); letter-spacing: .02em;
}
.nt-cy-tip {
position: absolute; left: 0; top: 0; z-index: 7;
pointer-events: none; opacity: 0; transition: opacity .12s ease;
background: rgba(28, 38, 48, .92); color: #fff;
font-size: .72rem; line-height: 1.35; padding: 5px 9px;
border-radius: 6px; white-space: nowrap;
}
.nt-legend {
position: absolute; top: 12px; right: 12px;
background: rgba(255, 255, 255, .94);
border: 1px solid var(--nt-line); border-radius: 10px;
padding: 10px 14px; font-size: .78rem; color: var(--nt-body);
box-shadow: 0 4px 14px rgba(30, 45, 60, .08);
line-height: 1.9;
}
.nt-legend span.sw {
display: inline-block; width: 11px; height: 11px; border-radius: 3px;
margin-right: 7px; vertical-align: middle;
}
/* ---------------- tables ---------------- */
.nt-table-wrap { overflow-x: auto; }
table.nt-table {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: .82rem; color: var(--nt-body);
}
table.nt-table thead th {
background: #f4f7f9;
font-size: .68rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--nt-muted);
padding: 11px 12px; border-bottom: 1px solid var(--nt-line);
white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.nt-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid #eef1f4;
vertical-align: top;
}
/* background-color, not the `background` shorthand: the shorthand resets
background-image/-size/-position, which would wipe out the score bar on
whichever row the pointer happens to be over. */
table.nt-table tbody tr:hover td { background-color: #fafcfd; }
table.nt-table tbody tr:last-child td { border-bottom: 0; }
/* ID links, coloured by molecule type */
.nt-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .8rem; font-weight: 600; color: var(--nt-accent);
text-decoration: none; white-space: nowrap;
}
.nt-id:hover { text-decoration: underline; }
.nt-id.lnc { color: var(--nt-purple); }
.nt-id.circ { color: var(--nt-amber); }
.nt-id.mi { color: var(--nt-green); }
.nt-id.edge { font-weight: 500; color: #96a2ae; }
.nt-id.edge:hover { color: var(--nt-accent); }
.nt-w {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .8rem; color: var(--nt-ink); font-weight: 600;
}
.nt-tag {
display: inline-block; font-size: .7rem; font-weight: 600;
padding: 2px 9px; border-radius: 999px;
background: var(--nt-accent-soft); color: var(--nt-accent);
border: 1px solid #cfe2f0; white-space: nowrap;
}
.nt-truncate {
max-width: 200px; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; cursor: pointer;
}
.nt-truncate.expanded { white-space: normal; word-break: break-word; }
/* ---------------- DataTables polish ---------------- */
.dataTables_wrapper { font-size: .82rem; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input {
border: 1px solid var(--nt-line); border-radius: 8px;
padding: 5px 10px; margin-left: 6px; outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus {
border-color: #a9c9e0; box-shadow: 0 0 0 3px rgba(46, 111, 158, .12);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dataTables_wrapper .pagination .page-link {
border: 1px solid var(--nt-line); color: var(--nt-body);
border-radius: 8px; margin: 0 2px; font-size: .8rem;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
background: var(--nt-green); border-color: var(--nt-green); color: #fff;
}
table.dataTable thead th { position: relative; }
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-image: none !important; }
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
content: ""; position: absolute; right: 10px; top: 50%;
width: 12px; height: 12px; margin-top: -6px;
background-repeat: no-repeat; background-position: center;
background-size: 12px 12px; opacity: .35;
}
table.dataTable thead .sorting::after {
background-image: url("data:image/svg+xml;utf8,");
}
table.dataTable thead .sorting_asc::after {
background-image: url("data:image/svg+xml;utf8,");
opacity: .9;
}
table.dataTable thead .sorting_desc::after {
background-image: url("data:image/svg+xml;utf8,");
opacity: .9;
}
/* empty state */
.nt-empty {
text-align: center; padding: 46px 20px; color: var(--nt-muted);
font-size: .9rem;
}
.nt-empty .big { font-size: 1.6rem; margin-bottom: 8px; }
/* ---------------- segmented radio group ----------------
A radio set that reads as connected buttons, for choices that are mutually
exclusive and where the label alone should carry the meaning. The native
radio stays in the DOM (hidden visually, not with display:none) so the form
still submits without JS and the group stays keyboard-navigable. Colouring
goes through the adjacent-sibling selector instead of :has(), so no browser
support surprises. */
.nt-seg { display: flex; flex-wrap: wrap; gap: 9px;
/* `col` on this element is our own modifier name (see `.nt-seg.col` below),
but Bootstrap owns `.col` too and gives it `flex: 1 0 0%`. Measured in the
browser: the picker really does compute `flex: 1 0 0%` today, and it is
only inert because its parent is a plain