* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif; color: #1e293b;
  background: #f8fafc; height: 100vh; display: flex; flex-direction: column;
}
header {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: #0f172a; color: #e2e8f0; position: relative;
}
header h1 { font-size: 18px; margin: 0 10px 0 0; letter-spacing: 1px; }
header input {
  width: 320px; padding: 5px 9px; border-radius: 6px; border: none;
  font-family: ui-monospace, monospace; font-size: 13px;
}
header .spacer { flex: 1; }
/* a non-production server ([server] label): impossible to miss */
.srv-label { background: #f59e0b; color: #111827; font-weight: 800;
  font-size: 12px; letter-spacing: 1px; padding: 2px 8px; border-radius: 4px;
  margin-left: -6px; white-space: nowrap; }
header .user { opacity: .7; font-size: 13px; white-space: nowrap; }
/* on narrower screens the search box gives way, labels never wrap */
header input { flex: 0 1 320px; min-width: 140px; }
header button { white-space: nowrap; flex: 0 0 auto; }
button {
  padding: 5px 12px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #fff; cursor: pointer; font-size: 13px;
}
button:hover { background: #f1f5f9; }
button.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
button.primary:hover { background: #1d4ed8; }
button.danger { border-color: #fca5a5; color: #b91c1c; }
button.danger:hover { background: #fef2f2; }
.legend button { padding: 2px 10px; font-size: 12px; }
header button { background: #1e293b; color: #e2e8f0; border-color: #334155; }
header button:hover { background: #334155; }
#review-count:not(:empty) {
  background: #f97316; color: #fff; border-radius: 9px; padding: 1px 7px;
  font-size: 11px; margin-left: 4px;
}

main { flex: 1; display: flex; min-height: 0; }
main.legal-page { display: block; }   /* the privacy/terms/manual pages flow */
#graph-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* the graph stack: hull canvas (behind) / cytoscape (transparent) / labels */
#graph-wrap { flex: 1; min-height: 0; position: relative;
              overflow: hidden; background: #fdfdfd; }
#graph-wrap.grouping { cursor: crosshair; touch-action: none; }
#graph { position: absolute; inset: 0; background: transparent; }
/* canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   300x150, so the size has to be stated explicitly */
#hull { position: absolute; inset: 0; width: 100%; height: 100%; }
#hull-labels { position: absolute; inset: 0; pointer-events: none; }
.hull-label {
  position: absolute; pointer-events: auto; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #4338ca;
  background: rgba(255, 255, 255, 0.88); border: 1px solid #a5b4fc;
  border-radius: 5px; padding: 1px 7px; white-space: nowrap;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.hull-label:hover { background: #eef2ff; border-color: #6366f1; }
.hull-label .hl-hidden { font-weight: 400; color: #6b7280; }
/* chips stacked above a folded block, one per group with a member inside */
.hull-label.fold-label { max-width: 220px; }
/* a FAILED group: its name reads struck through wherever it is shown */
.hull-label .hl-failed { text-decoration: line-through;
                         text-decoration-thickness: 2px; }
#panel h2.grp-failed-name { text-decoration: line-through;
                            text-decoration-thickness: 2px; }
.grp-failed-box { display: inline-flex; align-items: center; gap: 4px;
                  font-size: 12px; font-weight: 600; color: #b91c1c;
                  cursor: pointer; }
.dark .grp-failed-box { color: #f87171; }
#marquee {
  position: absolute; pointer-events: none; z-index: 5;
  border: 1.5px dashed #4f46e5; background: rgba(99, 102, 241, 0.10);
  border-radius: 3px;
}
.grp-members { list-style: none; padding: 0; margin: 0; }
.grp-members li {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid #eef2f7;
}
.grp-members i {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid #94a3b8; flex: none;
}
.grp-members a { cursor: pointer; color: #1d4ed8; text-decoration: none; }
.grp-members a:hover { text-decoration: underline; }
.grp-members .gm-missing { color: #b91c1c; font-style: italic; }
.grp-members .gm-del { margin-left: auto; }
#ng-members { max-height: 220px; overflow: auto; margin: 8px 0; }
/* a group's name as an inline chip, in the group's own colour */
.grp-chip {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  border: 1px solid; border-radius: 4px; padding: 0 5px; margin-left: 6px;
  background: rgba(255, 255, 255, 0.65); cursor: pointer;
  vertical-align: 1px; max-width: 170px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.grp-chip:hover { filter: brightness(0.88); }
.grp-chip.failed { text-decoration: line-through; }
.dark .grp-chip { background: rgba(15, 23, 42, 0.6); }
.grp-chips { margin: 3px 0 6px; font-size: 11px; color: #64748b; }
.dark .grp-chips { color: #94a3b8; }

.res-facets select {
  font-size: 11px; padding: 1px 4px; border: 1px solid #cbd5e1;
  border-radius: 4px; background: #fff; color: #334155; max-width: 190px;
}
.dark .res-facets select {
  background: #1e293b; border-color: #475569; color: #e2e8f0;
}

.grp-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
/* the swatch's own colour is an inline style, which beats the generic
   button rules without needing !important */
.grp-swatches .swatch {
  width: 26px; height: 26px; border-radius: 6px; padding: 0;
  border: 2px solid transparent; cursor: pointer;
}
.grp-swatches .swatch:hover { border-color: #94a3b8; }
.grp-swatches .swatch.on { border-color: #0f172a; }
.dark .grp-swatches .swatch.on { border-color: #f1f5f9; }
.grp-add { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.grp-add input { flex: 1 1 130px; min-width: 0; }
.legend {
  display: flex; gap: 16px; align-items: center; padding: 6px 14px;
  font-size: 12px; color: #475569; border-top: 1px solid #e2e8f0;
  background: #fff; flex-wrap: wrap;
}
.legend i {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid #94a3b8; margin-right: 5px; vertical-align: -2px;
}
.legend i.dot { border-radius: 50%; background: #a855f7; border: none; }
.legend .hint { opacity: .7; }

#panel {
  width: 430px; max-width: 45vw; overflow-y: auto; background: #fff;
  border-left: 1px solid #e2e8f0; padding: 14px 16px;
}
#panel.hidden { display: none; }
#panel h2 { margin: 0 0 2px; font-size: 16px; word-break: break-all; }
#panel .sub { color: #64748b; font-size: 12px; margin-bottom: 10px; }
#panel label { display: block; margin: 8px 0; font-size: 13px; color: #334155; }
#panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
#panel td { padding: 4px 4px; border-bottom: 1px solid #f1f5f9; }
#panel td.fname { color: #475569; white-space: nowrap; vertical-align: top; }
.date-row {
  display: flex; gap: 6px; align-items: center; font-size: 13px;
  color: #475569; margin: 6px 0;
}
.date-row input {
  flex: 1; padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 5px;
  font-size: 13px; font-family: ui-monospace, monospace;
}
.date-row button { padding: 3px 10px; }
#panel select {
  padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 5px;
  font-size: 13px; background: #fff;
}
#panel input[type=text], #panel textarea {
  width: 100%; padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 5px;
  font-size: 13px; font-family: inherit;
}
.flag { font-size: 10px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.flag.confirmed { background: #dcfce7; color: #166534; }
.flag.good { background: #dbeafe; color: #1e40af; }
.flag.uncertain { background: #fef3c7; color: #92400e; }
.flag.blank { background: #f1f5f9; color: #64748b; }
#panel .row-actions { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
#panel .files li { font-size: 12px; font-family: ui-monospace, monospace; }
#panel .section { margin-top: 14px; }
#panel .section h3 { font-size: 13px; margin: 0 0 6px; color: #334155; }
.histrow { font-size: 12px; padding: 3px 0; border-bottom: 1px solid #f1f5f9; }
.histrow a { cursor: pointer; color: #2563eb; }
.proposal {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px;
  margin-bottom: 14px; background: #fafafa;
}
.proposal .phead { font-size: 13px; margin-bottom: 6px; }
.psummary {
  font-size: 12px; background: #f1f5f9; border-radius: 6px; padding: 6px 8px;
  white-space: pre-wrap; margin: 4px 0;
}
.pstep {
  border-left: 3px solid #cbd5e1; padding: 6px 8px; margin: 8px 0;
  font-size: 13px; background: #fff; border-radius: 0 6px 6px 0;
}
.pstep.approved { border-left-color: #22c55e; opacity: .75; }
.pstep.rejected { border-left-color: #94a3b8; opacity: .55; }
.pstep.failed { border-left-color: #ef4444; }
.pstep .excerpt { color: #64748b; font-style: italic; font-size: 12px; margin: 3px 0; }
/* a proposal's source text (transcript, notes), collapsed by default */
details.ptx { margin: 4px 0 8px; font-size: 12px; }
details.ptx summary { cursor: pointer; color: #64748b; }
details.ptx pre.transcript {
  white-space: pre-wrap; max-height: 260px; overflow: auto; margin: 4px 0 0;
  padding: 6px 8px; background: #f8fafc; border-radius: 4px; font-size: 12px;
}
/* agent API dialog */
#dlg-agent-api { max-width: 560px; }
#dlg-agent-api code { font-size: 12px; overflow-wrap: anywhere; }
.api-steps { padding-left: 20px; line-height: 1.5; }
.api-steps li { margin-bottom: 8px; }
.api-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.api-row code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; }
.pstep .sub { color: #64748b; font-size: 12px; }
textarea.pargs {
  width: 100%; font-family: ui-monospace, monospace; font-size: 11.5px;
  border: 1px solid #cbd5e1; border-radius: 5px; margin-top: 5px; padding: 5px;
}
#pending-count:not(:empty) {
  background: #eab308; color: #fff; border-radius: 9px; padding: 1px 7px;
  font-size: 11px; margin-left: 4px;
}

.review-item {
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px; font-size: 13px;
}
.review-item b { cursor: pointer; color: #2563eb; }

dialog {
  border: none; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: 18px 20px; width: 430px;
}
dialog h2 { margin-top: 0; font-size: 16px; }

/* image preview popup: sized to the image, not the usual dialog box */
#dlg-image {
  width: auto; max-width: 92vw; padding: 0; border: none; background: none;
  box-shadow: none; overflow: visible;
}
#dlg-image::backdrop { background: rgba(0,0,0,.75); }
#dlg-image img {
  display: block; max-width: 92vw; max-height: 90vh; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
#dlg-image-close {
  position: absolute; top: -14px; right: -14px; width: 30px; height: 30px;
  border-radius: 50%; padding: 0; background: #1e293b; color: #e2e8f0;
  border: 1px solid #475569; font-size: 14px; line-height: 1;
}
#dlg-image-close:hover { background: #334155; }
dialog label { display: block; margin: 8px 0; font-size: 13px; color: #334155; }
dialog input, dialog select, dialog textarea {
  width: 100%; padding: 5px 8px; margin-top: 3px;
  border: 1px solid #cbd5e1; border-radius: 5px; font-size: 13px;
}
dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 12px 0 0; }
.hidden { display: none; }
svg .node:hover rect, svg .edge:hover rect { filter: brightness(.93); }

.timeline { border-left: 2px solid #e2e8f0; margin-left: 6px; }
.tl-row {
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
  padding: 6px 4px 6px 10px; position: relative;
}
.tl-row:hover { background: #f8fafc; }
.tl-row::before {
  content: ""; position: absolute; left: -5px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1;
}
.tl-chip {
  color: #fff; font-size: 10px; font-weight: 700; border-radius: 4px;
  padding: 2px 7px; min-width: 38px; text-align: center; margin-top: 1px;
}
.tl-body { font-size: 13px; min-width: 0; }
.tl-date { color: #94a3b8; font-size: 11px; margin-left: 6px; }
.tl-sub { color: #64748b; font-size: 12px; word-break: break-word; }
.tl-note { color: #8b7355; font-size: 12px; font-style: italic;
           word-break: break-word; }
/* process endpoints: one node per line, outputs arrowed + indented */
.endpoints { font-size: 12px; color: #475569; margin: 2px 0 4px;
             word-break: break-word; }
.ep-in { font-weight: 550; }
.ep-out { padding-left: 1.4em; }
.ep-note { color: #94a3b8; font-style: italic; }
.tl-grip { color: #cbd5e1; cursor: grab; width: 12px; font-size: 11px; margin-top: 3px; }
.tl-row.draggable:hover .tl-grip { color: #64748b; }
.tl-row.dragging { opacity: 0.4; background: #eff6ff; }

#tl-savebar {
  margin-top: 8px; padding: 7px 10px; background: #eff6ff; border-radius: 6px;
  font-size: 13px; color: #1e40af; display: flex; gap: 8px; align-items: center;
}
#tl-savebar.hidden { display: none; }
.tl-move { display: flex; flex-direction: column; gap: 1px; }
.tl-move button {
  padding: 0 4px; font-size: 8px; line-height: 1.4; border: 1px solid #e2e8f0;
  color: #94a3b8; background: #fff;
}
.tl-move button:hover { color: #2563eb; border-color: #93c5fd; }

#panel-close {
  position: sticky; top: 0; float: right; z-index: 10;
  padding: 1px 9px; font-size: 13px; margin: -4px -6px 4px 8px;
}
#panel-back {
  padding: 2px 10px; font-size: 12.5px; margin-bottom: 8px;
  color: #2563eb; border-color: #bfdbfe; background: #eff6ff;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-back:hover { background: #dbeafe; }
#dlg-restore { width: 640px; max-width: 92vw; }
#restore-list { max-height: 55vh; overflow-y: auto; margin-top: 8px; }
.commit-row {
  padding: 6px 8px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
  font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: baseline;
}
.commit-row:hover { background: #eff6ff; }
.commit-row.current { cursor: default; background: #f8fafc; }
.commit-row .csha { font-family: ui-monospace, monospace; color: #2563eb; }
.commit-row .cdate { color: #64748b; }
.commit-row .cauthor { color: #94a3b8; }
.commit-row .csub { flex-basis: 100%; color: #1e293b; }

/* google drive dialog */
#dlg-drive { width: 460px; max-width: 92vw; }
.drive-body p { font-size: 13px; color: #334155; margin: 8px 0; }
.drive-code {
  font-size: 30px; font-weight: 700; letter-spacing: 5px; text-align: center;
  padding: 12px; margin: 10px 0; background: #f1f5f9; border-radius: 8px;
  font-family: ui-monospace, monospace; user-select: all;
}
.drive-err { color: #b91c1c; font-size: 13px; }

/* drive sync status dot on the header button */
.ddot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-left: 3px; vertical-align: 1px;
}
.ddot.off { background: #cbd5e1; }
.ddot.ok  { background: #22c55e; }
.ddot.err { background: #ef4444; }
.ddot.run { background: #f59e0b; animation: ddot-pulse 1.2s ease-in-out infinite; }
@keyframes ddot-pulse { 50% { opacity: 0.25; } }

/* image attachment thumbnails in the entry files list */
ul.files { list-style: none; padding-left: 0; margin: 4px 0; }
ul.files li {
  display: flex; align-items: center; gap: 8px; margin: 4px 0;
  font-size: 12px; font-family: ui-monospace, monospace; word-break: break-all;
}
li.filethumb img {
  width: 54px; height: 54px; object-fit: cover; border-radius: 6px;
  border: 1px solid #e2e8f0; background: #f8fafc; flex: none;
}
li.filethumb img.thumb-open { cursor: pointer; }
ul.files li span, ul.files li > a:not(.file-dl) { flex: 1; overflow-wrap: anywhere; }
.file-dl { flex: none; text-decoration: none; opacity: .55; padding: 0 4px; font-size: 16px; }
.file-dl:hover { opacity: 1; }
.file-del {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 13px; opacity: .45; padding: 0 2px; flex: none;
}
.file-del:hover { opacity: 1; }

/* collapsed dice/cleave group dropdown */
#group-menu {
  position: fixed; z-index: 50; display: none; min-width: 170px;
  max-height: 320px; overflow-y: auto; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: 13px; padding: 4px;
}
#group-menu.open { display: block; }
#group-menu .gm-head {
  font-size: 11px; color: #94a3b8; padding: 4px 8px 2px; text-transform: none;
}
#group-menu .gm-exp {
  padding: 6px 8px; color: #2563eb; cursor: pointer; border-radius: 5px;
  font-weight: 600;
}
#group-menu .gm-row {
  padding: 5px 8px; cursor: pointer; border-radius: 5px;
  font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all;
}
#group-menu .gm-exp:hover, #group-menu .gm-row:hover { background: #f1f5f9; }

/* ---------- pending-users badge ---------- */
#users-count:not(:empty), #pending-count:not(:empty) {
  background: #f97316; color: #fff; border-radius: 9px; padding: 1px 7px;
  font-size: 11px; margin-left: 4px;
}

/* ---------- gate (sign-in) overlay ---------- */
#gate {
  position: fixed; inset: 0; z-index: 1000;
  background: #0f172a; color: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
}
#gate.hidden { display: none; }
.gate-card {
  background: #1e293b; border: 1px solid #334155; border-radius: 12px;
  padding: 28px 30px; width: 340px; max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.gate-card h1 { margin: 0; font-size: 26px; letter-spacing: 2px; }
.gate-sub { color: #94a3b8; font-size: 13px; margin: 4px 0 18px; }
.gate-card label {
  display: block; font-size: 12px; color: #cbd5e1; margin-bottom: 12px;
}
.gate-card input {
  display: block; width: 100%; margin-top: 5px; padding: 8px 10px;
  border-radius: 6px; border: 1px solid #475569; background: #0f172a;
  color: #e2e8f0; font-family: ui-monospace, monospace; font-size: 13px;
}
.gate-card .primary { width: 100%; padding: 9px; font-size: 14px; }
.gate-alt { font-size: 12px; color: #94a3b8; margin: 14px 0 0; }
.gate-alt a { color: #60a5fa; }
.gate-err { color: #fca5a5; font-size: 12px; min-height: 16px; margin: 8px 0 0; }
.gate-token {
  font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all;
  background: #0f172a; border: 1px solid #475569; border-radius: 6px;
  padding: 10px; margin: 8px 0;
}
.gate-pending-msg { font-size: 15px; }

/* ---------- admin users table ---------- */
#dlg-users { min-width: 620px; max-width: 92vw; }
.utable { border-collapse: collapse; width: 100%; font-size: 13px; }
.utable th, .utable td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}
.utable th { color: #64748b; font-weight: 600; font-size: 11px; text-transform: uppercase; }
.urow.st-pending { background: #fff7ed; }
.urow.st-disabled { opacity: .55; }
.uacts { white-space: normal; text-align: right; }
.uacts button { padding: 3px 9px; font-size: 12px; margin: 2px 0 2px 4px; }

/* ---------- edge endpoint search editor + dice auto-split ---------- */
.split-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ep-editor { margin: 8px 0; font-size: 13px; }
.ep-editor summary { cursor: pointer; color: #2563eb; font-size: 12px; }
.ep-side { margin: 8px 0; }
.ep-side b { display: inline-block; min-width: 54px; color: #64748b;
  font-size: 11px; text-transform: uppercase; }
.ep-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ep-chip { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px;
  padding: 1px 4px 1px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 2px; }
.ep-chip button { border: none; background: none; color: #64748b; padding: 0 3px;
  font-size: 13px; cursor: pointer; border-radius: 8px; }
.ep-chip button:hover { background: #e0e7ff; color: #b91c1c; }
.ep-add { margin-top: 4px; width: 100%; padding: 4px 8px; border-radius: 6px;
  border: 1px solid #cbd5e1; font-size: 12px; }

/* ---------- feature request / bug report queue ---------- */
#feedback-count:not(:empty) {
  background: #6366f1; color: #fff; border-radius: 9px; padding: 1px 7px;
  font-size: 11px; margin-left: 4px;
}
#dlg-feedback { width: 460px; max-width: 92vw; }
#feedback-list { max-height: 46vh; overflow-y: auto; margin-bottom: 10px; }
.fb-item { display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 4px; border-bottom: 1px solid #f1f5f9; }
.fb-kind { font-size: 10px; font-weight: 700; text-transform: uppercase;
  border-radius: 4px; padding: 1px 6px; margin-top: 2px; white-space: nowrap; }
.fb-request { background: #e0e7ff; color: #3730a3; }
.fb-bug { background: #fee2e2; color: #b91c1c; }
.fb-body { flex: 1; min-width: 0; }
.fb-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.fb-item > button { padding: 2px 9px; font-size: 12px; border-color: #fca5a5; color: #b91c1c; }
.fb-new { display: flex; gap: 6px; align-items: flex-start; }
.fb-new select { width: auto; }
.fb-new textarea { flex: 1; }
.fb-new button { white-space: nowrap; }

/* ---------- locations & tools: pick boxes and the list ---------- */
.pick { position: relative; display: block; }
.pick-list {
  position: absolute; z-index: 70; left: 0; right: 0; top: 100%;
  max-height: 220px; overflow-y: auto; margin-top: 2px; padding: 3px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18); font-size: 13px;
}
.pick-list.hidden { display: none; }
.pick-opt { padding: 4px 8px; border-radius: 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-opt:hover, .pick-opt.on { background: #e0e7ff; }
.pick-more { padding: 4px 8px; color: #64748b; font-size: 12px; }
.dark .pick-list { background: #1e293b; border-color: #475569; }
.dark .pick-opt:hover, .dark .pick-opt.on { background: #334155; }
.dark .pick-more { color: #94a3b8; }
#dlg-catalog { width: 460px; max-width: 92vw; }
#cat-list { max-height: 46vh; overflow-y: auto; margin-bottom: 10px; }
.cat-item { display: flex; gap: 8px; align-items: center;
  padding: 4px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.dark .cat-item { border-bottom-color: #334155; }
.cat-item > span { flex: 1; min-width: 0; word-break: break-word; }
.cat-item > button { padding: 2px 9px; font-size: 12px; border-color: #fca5a5; color: #b91c1c; }
.cat-new { display: flex; gap: 6px; margin-bottom: 4px; }
.cat-new input { flex: 1; }
#dlg-move { width: 420px; max-width: 92vw; }
#dlg-templates { width: 560px; max-width: 92vw; }
#dlg-templates label { display: block; margin: 8px 0; }
#dlg-templates label input:not([type=checkbox]), #dlg-templates select { width: 100%; box-sizing: border-box; }
#dlg-templates .tpl-check { display: flex; gap: 6px; align-items: flex-start; }
#dlg-templates .tpl-check input { width: auto; flex: 0 0 auto; margin: 2px 0 0; }
#dlg-templates p.fmeta { font-size: 12px; line-height: 1.45; }
#tpl-list { max-height: 56vh; overflow-y: auto; margin-bottom: 10px; }
.tpl-kind { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b; }
.tpl-item { display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 4px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.dark .tpl-item { border-bottom-color: #334155; }
.tpl-item > div { flex: 1; min-width: 0; }
.tpl-item > button { padding: 2px 9px; font-size: 12px; }
.tpl-name b { margin-right: 6px; }
.tpl-name code, .tpl-key, #tpl-key-fixed { font-size: 12px; color: #64748b; }
.tpl-key { width: 16em; padding: 1px 4px; }
.tpl-flds { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.tpl-fld { padding: 0 6px; border-radius: 4px; background: #f1f5f9; font-size: 12px; }
.dark .tpl-fld { background: #334155; }
.tpl-fld.locked { background: #e0e7ff; }
.dark .tpl-fld.locked { background: #312e81; }
.tpl-h3 { font-size: 14px; margin: 12px 0 4px; }
#tpl-fields { max-height: 34vh; overflow-y: auto; margin-bottom: 6px; }
.tpl-row { display: flex; gap: 6px; align-items: center; padding: 3px 4px;
  border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.dark .tpl-row { border-bottom-color: #334155; }
.tpl-row > span { flex: 1; min-width: 0; word-break: break-word; }
.tpl-row button { padding: 1px 7px; font-size: 12px; }
.tpl-row .tpl-rm { border-color: #fca5a5; color: #b91c1c; }
.tpl-row .tpl-note { flex: 0 0 auto; font-size: 11px; color: #64748b; }
body:not(.is-admin) .tpl-admin-only, body.is-admin .tpl-viewer-only { display: none; }

/* ---------- header: CPU load and disk use bars ---------- */
#sysload { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#sysload.hidden { display: none; }
.sl { display: flex; align-items: center; gap: 4px; font-size: 11px;
  color: #94a3b8; cursor: default; }
.sl-bar { width: 44px; height: 8px; border-radius: 4px; background: #334155;
  overflow: hidden; }
.sl-fill { display: block; height: 100%; width: 0; background: #22c55e;
  transition: width .4s; }
.sl.warn .sl-fill { background: #f59e0b; }
.sl.high .sl-fill { background: #ef4444; }
.sl.high .sl-name { color: #fca5a5; font-weight: 700; }
#sl-warn { background: #b91c1c; color: #fff; border-radius: 9px;
  padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
#sl-warn.hidden { display: none; }

/* ---------- phones (<=700px) ------------------------------------------
   Everything below is additive: desktop and tablet (>700px) keep the
   exact rendering defined above. */
@media (max-width: 700px) {
  /* header: one horizontally swipeable toolbar row instead of stretching
     the whole page wider than the screen */
  header {
    gap: 6px; padding: 8px 10px;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header::-webkit-scrollbar { display: none; }
  header input { width: 150px; flex: 0 0 auto; }
  header .spacer { flex: 0 0 2px; }
  header button { flex: 0 0 auto; white-space: nowrap; }
  header .user { display: none; }

  /* detail panel: full-screen sheet over the graph (its own sticky X
     closes it) instead of a squeezed side column */
  #panel {
    position: fixed; inset: 0; width: 100%; max-width: 100%;
    z-index: 40; border-left: none; padding: 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  /* dialogs fit the screen */
  dialog, #dlg-restore {
    width: calc(100vw - 20px); max-width: calc(100vw - 20px);
    padding: 14px;
  }

  /* legend bar: tighter, drop the long usage hint (mouse-centric anyway) —
     but never #connect-hint, which guides the two-tap connect mode */
  .legend { gap: 10px; padding: 5px 10px; }
  .legend .hint:not(#connect-hint) { display: none; }

  /* comfortable touch targets */
  button { padding: 7px 12px; }
  .legend button { padding: 4px 10px; }
}

/* ---------- dark mode (toggle in the header; class lives on <html>) ----
   Additive only: every rule above stays untouched for light mode, this
   section overrides just the light-assuming backgrounds/text. Small
   saturated accents (flags, badges, status colors) are left alone —
   they read fine on either background. #gate, #busy-pop and the header
   are already dark-styled regardless of theme, so they're untouched too. */
.dark body { color: #e2e8f0; background: #0f172a; color-scheme: dark; }
.dark button:not(.primary) { background: #1e293b; border-color: #475569; color: #e2e8f0; }
.dark button:hover:not(.primary) { background: #334155; }
.dark button.danger { border-color: #7f1d1d; color: #f87171; }
.dark button.danger:hover { background: #450a0a; }
.dark #graph-wrap { background: #0b1220; }
.dark .hull-label {
  color: #c7d2fe; background: rgba(15, 23, 42, 0.85); border-color: #4338ca;
}
.dark .hull-label:hover { background: #1e1b4b; border-color: #818cf8; }
.dark .hull-label .hl-hidden { color: #94a3b8; }
.dark .upload-warn { color: #fbbf24; }
.dark .grp-members li { border-bottom-color: #334155; }
.dark .grp-members a { color: #93c5fd; }
.dark .legend { background: #1e293b; border-top-color: #334155; color: #94a3b8; }
.dark #panel { background: #1e293b; border-left-color: #334155; }
.dark #panel td { border-bottom-color: #334155; }
.dark #panel .section h3 { color: #cbd5e1; }
.dark .histrow { border-bottom-color: #334155; }
.dark .date-row input,
.dark #panel select,
.dark #panel input[type=text],
.dark #panel textarea,
.dark textarea.pargs,
.dark dialog input,
.dark dialog select,
.dark dialog textarea,
.dark .ep-add {
  background: #0f172a; color: #e2e8f0; border-color: #475569;
}
.dark .flag.confirmed { background: #052e16; color: #4ade80; }
.dark .flag.good { background: #0c1e3d; color: #60a5fa; }
.dark .flag.uncertain { background: #451a03; color: #fbbf24; }
.dark .flag.blank { background: #334155; color: #94a3b8; }
.dark .proposal { background: #0f1c33; border-color: #334155; }
.dark .psummary { background: #0f172a; }
.dark .pstep { background: #1e293b; border-left-color: #475569; }
.dark details.ptx pre.transcript, .dark .api-row code { background: #0f172a; }

.dark .review-item { background: #422006; border-color: #78350f; }
.dark dialog { background: #1e293b; color: #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.dark dialog label { color: #cbd5e1; }
.dark #panel label { color: #cbd5e1; }

.dark .timeline { border-left-color: #334155; }
.dark .tl-row:hover { background: #1e293b; }
.dark .tl-row.dragging { background: #1e3a5f; }

.dark #tl-savebar { background: #1e3a5f; color: #93c5fd; }
.dark .tl-move button { background: #0f172a; border-color: #334155; color: #64748b; }
.dark #panel-back { background: #1e3a5f; border-color: #1d4ed8; color: #93c5fd; }
.dark #panel-back:hover { background: #254a75; }
.dark .commit-row:hover { background: #1e293b; }
.dark .commit-row.current { background: #0f172a; }
.dark .commit-row .csub { color: #e2e8f0; }

.dark .drive-body p { color: #cbd5e1; }
.dark .drive-code { background: #0f172a; }
.dark .drive-err { color: #f87171; }

.dark li.filethumb img { border-color: #334155; background: #0f172a; }
.dark #group-menu {
  background: #1e293b; border-color: #475569; box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.dark #group-menu .gm-exp:hover, .dark #group-menu .gm-row:hover { background: #334155; }
.dark .utable th, .dark .utable td { border-bottom-color: #334155; }
.dark .urow.st-pending { background: #451a03; }
.dark .ep-chip { background: #1e1b4b; border-color: #4338ca; }
.dark .ep-chip button:hover { background: #312e81; color: #f87171; }
.dark .fb-request { background: #1e1b4b; color: #a5b4fc; }
.dark .fb-bug { background: #450a0a; color: #f87171; }
.dark .fb-item { border-bottom-color: #334155; }
.dark .histrow a,
.dark .review-item b,
.dark .commit-row .csha,
.dark #group-menu .gm-exp,
.dark .ep-editor summary {
  color: #60a5fa;
}

/* ---------- left-hand search results panel ---------- */
#results {
  width: 340px; max-width: 34vw; overflow-y: auto; background: #fff;
  border-right: 1px solid #e2e8f0; display: flex; flex-direction: column;
}
#results.hidden { display: none; }
/* the drag handles: flex siblings of the sidebars rather than children, so
   they cannot scroll away inside the panels' own overflow */
.pane-grip {
  flex: 0 0 6px; cursor: col-resize; touch-action: none;
  background: transparent; position: relative; z-index: 4;
}
.pane-grip.hidden { display: none; }
.pane-grip::after {
  content: ""; position: absolute; inset: 0 2px;
  background: transparent; transition: background 0.12s;
}
.pane-grip:hover::after, .pane-grip.dragging::after { background: #6366f1; }
/* a 6px target is fine for a mouse, not for a finger on the iPad */
@media (pointer: coarse) { .pane-grip { flex-basis: 15px; } }
body.pane-resizing { cursor: col-resize; user-select: none; }
.res-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px;
  border-bottom: 1px solid #f1f5f9;
}
.res-head b { font-size: 13px; letter-spacing: .3px; }
.res-q {
  flex: 1; font-family: ui-monospace, monospace; font-size: 12px;
  color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.res-facets { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; }
.facet-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; }
.facet-row + .facet-row { margin-top: 8px; }
/* full width forces the checkboxes onto their own line: at this panel width
   an inline label + 4 options wraps mid-group and reads as a mess */
.facet-label {
  width: 100%; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: #94a3b8; margin-bottom: 1px;
}
.res-facets label {
  font-size: 12px; color: #334155; display: inline-flex; align-items: center;
  gap: 4px; cursor: pointer; margin: 0;
}
.res-facets input[type=checkbox] { margin: 0; cursor: pointer; }
#res-body { padding: 6px 0 14px; }
.res-group-hd {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: #94a3b8; padding: 10px 12px 4px;
}
/* node result row: mirrors the graph box (type colour swatch + name) */
.res-node {
  display: flex; align-items: center; gap: 7px; padding: 5px 12px;
  cursor: pointer; font-size: 13px;
}
.res-node:hover { background: #f1f5f9; }
.res-node i {
  width: 10px; height: 10px; border: 1px solid #94a3b8; flex: none;
  border-radius: 50%;
}
.res-node.placeholder { color: #64748b; }
.res-node.placeholder i { border-style: dashed; }
/* a node heading that owns matching steps, then the steps themselves in the
   same .tl-row markup the node timeline uses */
.res-owner {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px 2px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.res-owner:hover { text-decoration: underline; }
.res-owner i {
  width: 10px; height: 10px; border: 1px solid #94a3b8; flex: none;
  border-radius: 50%;
}
#res-body .timeline { margin: 0 12px 4px 18px; }
.res-empty { padding: 14px 12px; color: #94a3b8; font-size: 13px; }
.res-more { padding: 6px 12px; color: #94a3b8; font-size: 11.5px; font-style: italic; }

.dark #results { background: #0b1220; border-right-color: #1e293b; }
.dark .res-head, .dark .res-facets { border-bottom-color: #1e293b; }
.dark .res-facets label { color: #cbd5e1; }
.dark .res-node:hover { background: #1e293b; }
.dark .res-node.placeholder { color: #94a3b8; }

/* ---------- header / panel dropdown menus ---------- */
.menu { position: relative; display: inline-block; }
.menu-list {
  position: fixed; z-index: 60; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
.menu-list.hidden { display: none; }
.menu-list button, header .menu-list button {
  text-align: left; background: none; border: none; color: #1e293b;
  padding: 6px 10px; white-space: nowrap;
}
.menu-list button:hover, header .menu-list button:hover { background: #f1f5f9; }
.menu-list button.danger { color: #b91c1c; }
.menu-list .menu-row {
  display: flex !important; align-items: center; gap: 6px;
  margin: 2px 4px 4px !important; font-size: 13px;
}
.menu-list .menu-row select { flex: 1; }
.menu-count:not(:empty), #pending-count:not(:empty), #feedback-count:not(:empty),
#users-count:not(:empty) {
  background: #f97316; color: #fff; border-radius: 9px; padding: 1px 7px;
  font-size: 11px;
}
.menu-btn.warn { box-shadow: inset 0 -2px 0 #ef4444; }
.dark .menu-list { background: #1e293b; border-color: #475569; }
.dark .menu-list button:not(.primary), .dark header .menu-list button {
  background: none; color: #e2e8f0;
}
.dark .menu-list button:hover:not(.primary) { background: #334155; }
.dark .menu-list button.danger { color: #f87171; }

/* ---------- entry panel ---------- */
#panel .panel-actions {
  position: sticky; top: -14px; z-index: 5; margin: 6px -16px 10px;
  padding: 8px 16px; background: #fff; border-bottom: 1px solid #f1f5f9;
  align-items: center;
}
.dark #panel .panel-actions { background: #1e293b; border-bottom-color: #334155; }
#save-entry:disabled { opacity: .55; cursor: default; }
button.mini { padding: 1px 8px; font-size: 11px; margin-left: 4px; }
.char-on { margin-top: 4px; color: #334155; font-size: 13px; }
.dark .char-on { color: #cbd5e1; }
.ep-tools { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.ep-tools .ep-add { margin-top: 0; flex: 1; min-width: 0; }
.ep-tools button { padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.ep-editor { border-left: 3px solid #e2e8f0; padding-left: 8px; }
.dark .ep-editor { border-left-color: #334155; }

/* date: picker + shortcuts */
.date-ctl { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.date-ctl input[type=datetime-local] {
  padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 6px;
  font: inherit; font-size: 13px;
}
.date-ctl button { padding: 2px 8px; font-size: 12px; }
.dark .date-ctl input[type=datetime-local] {
  background: #0f172a; color: #e2e8f0; border-color: #475569;
}

/* copy to… */
.copy-row { border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.copy-row-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px; font-size: 13px; }
.copy-row-head button { padding: 0 7px; }
.copy-add-row { display: flex; gap: 6px; margin: 8px 0; }
.copy-add-row input { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px;
  border: 1px solid #cbd5e1; }
#panel label.cb { display: flex; gap: 6px; align-items: baseline; }
.dark .copy-row { border-color: #334155; }
.dark .copy-add-row input { background: #0f172a; color: #e2e8f0; border-color: #475569; }

/* search filters collapse to one line */
details.res-facets > summary { cursor: pointer; font-size: 12px; color: #64748b; }
details.res-facets[open] > summary { margin-bottom: 8px; }
.help-btn { padding: 2px 8px !important; border-radius: 50% !important; }

/* header "+ …" create buttons: one visual cluster, set off from the tabs */
.hdr-add { display: flex; gap: 6px; padding-right: 10px; margin-right: 2px;
           border-right: 1px solid #334155; }
@media (max-width: 700px) { .hdr-add { flex: 0 0 auto; } }

/* new-process form: "select nodes" toggle beside the inputs/outputs labels */
.side-row { display: flex; align-items: center; justify-content: space-between;
            gap: 8px; margin: 8px 0 3px; font-size: 13px; color: #334155; }
.dark .side-row { color: #cbd5e1; }
.side-row button { padding: 2px 10px; font-size: 12px; flex: 0 0 auto; }

/* ---------- projects: header menu, chips, warnings ---------- */
#btn-project { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
#btn-project.proj-none, header #btn-project.proj-none {
  background: #dc2626; border-color: #b91c1c; color: #fff; font-weight: 600;
}
#btn-project.proj-none:hover { background: #b91c1c; }
#project-list { min-width: 260px; max-height: 70vh; overflow-y: auto; }
#project-list .pm-hd { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: #64748b; padding: 2px 6px 4px; }
#project-list .pm-row { display: flex; align-items: center; gap: 4px; }
#project-list .pm-row label { flex: 1; display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: 13px; }
#project-list .pm-row label:hover { background: #f1f5f9; }
#project-list .pm-row button { padding: 2px 6px; opacity: .55; }
#project-list .pm-row button:hover { opacity: 1; }
#project-list .pm-empty { padding: 4px 6px; }
#project-list .pm-new { display: flex; gap: 4px; padding: 6px 2px 2px;
  border-top: 1px solid #e2e8f0; margin-top: 4px; }
#project-list .pm-new input { flex: 1; min-width: 0; padding: 4px 6px; font-size: 13px;
  border: 1px solid #cbd5e1; border-radius: 5px; }
#project-list .pm-new button { background: #2563eb; color: #fff; border-radius: 5px;
  text-align: center; }
.proj-line { font-size: 12px; margin: -4px 0 8px; color: #475569; }
.proj-warn { color: #dc2626; font-weight: 600; }
.proj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: 12px; margin: 4px 0 8px; }
.proj-lbl { color: #64748b; }
.proj-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px;
  border-radius: 10px; background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.proj-chip .proj-x { border: none; background: none; padding: 0 3px; font-size: 10px;
  cursor: pointer; opacity: .6; color: inherit; }
.proj-chip .proj-x:hover { opacity: 1; }
.proj-row select { font-size: 12px; padding: 1px 4px; max-width: 150px; }
.proj-fam { color: #64748b; display: inline-flex; align-items: center; gap: 3px; }
.proj-fam button.mini, .proj-row button.mini { padding: 1px 7px; font-size: 11px; }

/* ---------- the filter sidebar (left) ---------- */
#filters {
  width: 280px; max-width: 30vw; overflow-y: auto; background: #fff;
  border-right: 1px solid #e2e8f0; display: flex; flex-direction: column;
  padding-bottom: 12px;
}
#filters.hidden { display: none; }
#filters .flt-intro { margin: 6px 12px 2px; }
#filters .flt-sec { padding: 8px 12px; border-top: 1px solid #f1f5f9; }
#filters .flt-hd { display: flex; align-items: baseline; gap: 6px; font-size: 13px;
  margin-bottom: 4px; flex-wrap: wrap; }
#filters .flt-hd label { margin-left: auto; font-size: 12px; color: #475569;
  display: flex; gap: 4px; align-items: center; cursor: pointer; }
#filters .flt-list { max-height: 30vh; overflow-y: auto; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 4px; }
#filters .flt-list label { display: flex; gap: 6px; align-items: center; padding: 3px 4px;
  font-size: 13px; border-radius: 4px; cursor: pointer; overflow-wrap: anywhere; }
#filters .flt-list label:hover { background: #f8fafc; }
#filters .flt-date { display: flex; gap: 6px; align-items: center; }
#filters .flt-date input { padding: 3px 6px; font-size: 13px; }
#filters .row-actions { padding: 6px 12px; }
#btn-filter.flt-on { background: #eef2ff; border-color: #6366f1; color: #3730a3; font-weight: 600; }
#filter-dot { color: #6366f1; }

.dark #filters { background: #0b1220; border-right-color: #1e293b; }
.dark #filters .flt-sec { border-top-color: #1e293b; }
.dark #filters .flt-list { border-color: #334155; }
.dark #filters .flt-list label:hover, .dark #project-list .pm-row label:hover { background: #1e293b; }
.dark #filters .flt-hd label, .dark .proj-line { color: #cbd5e1; }
.dark .proj-chip { background: #064e3b; border-color: #047857; color: #d1fae5; }
.dark #project-list .pm-new { border-top-color: #334155; }
.dark #project-list .pm-new input { background: #0f172a; color: #e2e8f0; border-color: #475569; }
.dark #btn-filter.flt-on { background: #312e81; border-color: #818cf8; color: #e0e7ff; }
.dark .proj-warn { color: #f87171; }

@media (max-width: 700px) {
  #filters { position: fixed; inset: 0; width: 100%; max-width: 100%; z-index: 40; }
}
/* the header's search-box rules must not reach the menu's own controls */
#project-list { color: #1e293b; }
#project-list input[type=checkbox] { width: auto; min-width: 0; flex: none; margin: 0; }
#project-list .pm-new input { width: auto; min-width: 0; flex: 1; font-family: inherit; }
#project-list .pm-row label span:first-of-type { flex: 1; }
.dark #project-list { color: #e2e8f0; }
#filters .flt-intro, #filters .flt-sec p.fmeta { font-size: 12px; line-height: 1.4; }
#filter-summary { flex: 1; font-size: 12px; }

/* ---------- Google sign-in, backups, accounts ---------- */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #fff; color: #1e293b; font-size: 14px; font-weight: 600;
  text-decoration: none; margin-top: 8px;
}
.google-btn:hover { background: #f1f5f9; }
.gate-note { margin-top: 12px; }
.bk-time { font-size: 11px; color: #64748b; margin-left: 2px; }
#users-body h3 { font-size: 13px; margin: 14px 0 6px; }
.ureq { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; }
.ureq-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ureq-acts label { display: flex; gap: 4px; align-items: center; font-size: 12px; }
.ureq-acts input { width: 130px; padding: 3px 6px; }
.tok-new { display: flex; gap: 6px; margin: 10px 0; }
.tok-new { flex-wrap: wrap; align-items: center; }
.tok-new input[type=text] { flex: 1; min-width: 160px; padding: 5px 8px; }
#dlg-tokens { width: min(720px, 96vw); }
#tokens-body { overflow-x: auto; }
.tok-opt select, .tok-opt input { width: auto; margin: 0; }
.field-by { white-space: nowrap; font-size: 11px; }
.tok-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.tok-expired { color: #b91c1c; }
.dark .tok-expired { color: #f87171; }
.review-others { margin: 18px 0 2px; font-size: 14px; }
.review-item.not-mine { opacity: 0.75; }
#tok-out { margin: 8px 0; }
.dark .google-btn { background: #1e293b; color: #e2e8f0; border-color: #475569; }
.dark .google-btn:hover { background: #334155; }
.dark .ureq { background: #422006; border-color: #a16207; }
.dark .bk-time { color: #94a3b8; }
#dlg-users { width: min(920px, 96vw); max-width: 96vw; }
#dlg-users > p.fmeta { font-size: 12px; line-height: 1.45; }
#dlg-users .uacts { white-space: nowrap; }
#dlg-users .uacts button { padding: 3px 9px; font-size: 12px; }
.ureq-acts select { width: auto; max-width: 260px; padding: 3px 6px; }
.ureq-acts button { padding: 3px 10px; font-size: 12px; }

/* ---------- groups list sidebar + group picking ---------- */
#grouplist {
  width: 300px; max-width: 32vw; overflow-y: auto; background: #fff;
  border-right: 1px solid #e2e8f0; display: flex; flex-direction: column;
}
#grouplist.hidden { display: none; }
.gl-row { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.gl-row:hover { background: #f8fafc; }
.gl-row.on { background: #eef2ff; }
.gl-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.gl-name i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gl-name span:first-of-type { flex: 1; overflow-wrap: anywhere; }
.gl-head { font-size: 12px; color: #64748b; margin: 3px 0 0 16px; line-height: 1.35; }
#flt-group-pick { padding: 1px 8px; font-size: 11px; }
.hull-label.gpicked { outline: 3px solid #6366f1; outline-offset: 1px; background: #eef2ff; }
.dark #grouplist { background: #0b1220; border-right-color: #1e293b; }
.dark .gl-row { border-bottom-color: #1e293b; }
.dark .gl-row:hover { background: #111827; }
.dark .gl-row.on { background: #1e1b4b; }
.dark .gl-head { color: #94a3b8; }
.dark .hull-label.gpicked { background: #1e1b4b; }
@media (max-width: 700px) {
  #grouplist { position: fixed; inset: 0; width: 100%; max-width: 100%; z-index: 40; }
}
.upload-warn { font-size: 12px; line-height: 1.4; margin: 4px 0 0; color: #b45309; }

/* ---------- public pages: /privacy, /tos ---------- */
body.legal { display: block; height: auto; min-height: 100vh; }
.legal-page {
  max-width: 44em; margin: 0 auto; padding: 24px 16px 48px;
  font-size: 15px; line-height: 1.6; overflow-wrap: break-word;
}
.legal-page h1 { font-size: 26px; margin: 8px 0 0; }
.legal-page h2 { font-size: 17px; margin: 26px 0 6px; }
.legal-page ul { padding-left: 1.3em; }
.legal-page li { margin: 4px 0; }
.legal-page code { font-size: 13px; background: #e2e8f0; padding: 1px 4px;
  border-radius: 4px; }
.legal-page a { color: #2563eb; }
.legal-top, .legal-date, .legal-foot { color: #64748b; font-size: 13px; }
.legal-top a { font-weight: 700; color: inherit; text-decoration: none; }
.legal-foot { margin-top: 36px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.dark .legal-page code { background: #1e293b; }
.dark .legal-page a { color: #60a5fa; }
.dark .legal-top, .dark .legal-date, .dark .legal-foot { color: #94a3b8; }
.dark .legal-foot { border-top-color: #334155; }
.dark .legal-top a { color: inherit; }
/* links under the sign-in card and in the ⋯ menu */
.gate-legal { font-size: 11px; color: #64748b; margin: 18px 0 0; text-align: center; }
.gate-legal a { color: #94a3b8; }
.menu-list .menu-legal { font-size: 11px; padding: 6px 10px 2px; color: #64748b;
  border-top: 1px solid #e2e8f0; margin-top: 4px; }
.menu-list .menu-legal a { color: inherit; }
.dark .menu-list .menu-legal { border-top-color: #334155; color: #94a3b8; }

/* ---------- read-only accounts: every control that changes the database
   is hidden (the server refuses those writes anyway); viewing, searching
   and exporting are untouched ---------- */
body.read-only .hdr-add,
body.read-only #menu-project,
body.read-only #panel #save-entry,
body.read-only #panel #confirm-entry,
body.read-only #panel button[data-confirm],
body.read-only #panel #btn-real,
body.read-only #panel #btn-copy-to,
body.read-only #panel #btn-copy,
body.read-only #panel #btn-reassign-node,
body.read-only #panel #menu-entry .menu-row,
body.read-only #panel #btn-rename,
body.read-only #panel #btn-move,
body.read-only #panel #btn-delete,
body.read-only #panel .file-del,
body.read-only #panel #attach-path,
body.read-only #panel #attach-file-btn,
body.read-only #panel .upload-warn,
body.read-only #panel .ep-tools,
body.read-only #panel .ep-chip button[data-rm],
body.read-only #panel .date-ctl button,
body.read-only #panel #tl-savebar,
body.read-only #panel .proj-x,
body.read-only #panel #proj-add,
body.read-only #panel .proj-fam,
body.read-only .cat-new,
body.read-only #cat-err,
body.read-only #cat-list button[data-cat] { display: none; }
/* values shown as text, not as boxes waiting to be typed in */
body.read-only #panel-body input[readonly],
body.read-only #panel-body textarea[readonly] {
  background: transparent; border-color: transparent; box-shadow: none;
  outline: none; cursor: text;
}
body.read-only #panel-body input:disabled { opacity: 1; }
pre.pargs-ro {
  white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 11.5px;
  margin: 5px 0 0; padding: 5px; background: #f8fafc; border-radius: 5px;
}
.dark pre.pargs-ro { background: #0f172a; }
.utable .num { text-align: right; font-variant-numeric: tabular-nums; }
/* a node's picture under its header (own, or from a step on it) */
.node-pic { margin: 8px 0 4px; }
.node-pic img { display: block; max-width: 100%; max-height: 240px; border-radius: 6px;
  border: 1px solid #e2e8f0; cursor: zoom-in; background: #f8fafc; }
.dark .node-pic img { border-color: #334155; background: #0f172a; }
.node-pic figcaption { font-size: 12px; color: #64748b; margin-top: 3px; }
/* a folded family's hover card */
#comp-tip { position: fixed; z-index: 50; display: none; max-width: 460px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 10px;
  font-size: 12px; line-height: 1.5; color: #334155; box-shadow: 0 6px 20px rgba(15,23,42,.15);
  pointer-events: none; }
#comp-tip.open { display: block; }
.dark #comp-tip { background: #0f172a; border-color: #334155; color: #cbd5e1; }
/* the date axis, pinned to the top of the graph (drawDateAxis) */
#date-axis { position: absolute; left: 0; right: 0; top: 0; height: 40px;
  pointer-events: none; overflow: hidden; z-index: 2;
  background: linear-gradient(rgba(255,255,255,.95) 70%, rgba(255,255,255,0)); }
#date-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
#date-axis .da-month { top: 2px; font-size: 14px; font-weight: 700; color: #1e293b; }
#date-axis .da-day { top: 20px; font-size: 13px; font-weight: 600; color: #475569;
  font-variant-numeric: tabular-nums; }
#date-axis .da-first { color: #1e293b; }
.dark #date-axis { background: linear-gradient(rgba(15,23,42,.95) 70%, rgba(15,23,42,0)); }
.dark #date-axis .da-month, .dark #date-axis .da-first { color: #e2e8f0; }
.dark #date-axis .da-day { color: #94a3b8; }