/* Rack & Topology Designer — an editor first, a page second.
 *
 * The rack elevations, faceplates and the topology are figures, drawn on
 * white with fixed equipment colours: they go into a runbook, onto a label
 * and in front of a contractor, and have to read the same on screen, in dark
 * mode and on paper. Everything around them (fields, buttons, inspector)
 * takes the site preset's tokens.
 */

.product[data-product="rack-designer"] {
  --rk-line: color-mix(in srgb, var(--text) 18%, transparent);
  --rk-focus: #2563eb;
  --rk-problem: #c2410c;
  --rk-gap: #d4a106;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rk-pane { display: grid; gap: .8rem; min-width: 0; }
.rk-h3 { margin: .5rem 0 0; font-size: 1.02rem; }
.rk-subhead { margin: .3rem 0 0; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rk-sub { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.rk-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rk-muted { color: var(--muted); }
.rk-empty { margin: 0; color: var(--muted); font-size: .92rem; }
.rk-clear { margin: 0; color: var(--muted); }
.rk-field { display: grid; gap: .25rem; min-width: 0; align-content: start; }
.rk-field .field-help { margin: 0; }
.product[data-product="rack-designer"] .rk-field .input,
.product[data-product="rack-designer"] .rk-inspector .input,
.product[data-product="rack-designer"] .rk-port-inspector .input { width: 100%; max-width: 100%; box-sizing: border-box; }
.rk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; align-items: end; }
.rk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .7rem; align-items: end; }
.rk-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; }
.rk-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); flex: none; }
.rk-inline { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; }
.rk-inline .input { width: auto; }
.rk-keys { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .92rem; }
.rk-swatch {
  display: inline-block;
  flex: none;
  width: .95rem; height: .75rem;
  border-radius: 2px;
  background: var(--fill);
  border: 1.5px solid var(--stroke);
  vertical-align: -.05rem;
}
.rk-vlan-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .25); vertical-align: -.05rem; }

/* ── Project bar and toolbars ───────────────────────────────────────── */

.rk-projectbar {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.6fr) auto;
  gap: .6rem 1rem;
  align-items: end;
}
.rk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  padding: .35rem .45rem;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}
.rk-toolgroup { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.rk-zoom { margin-left: auto; }
.rk-segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; }

/* ── Racks: library, elevations, shelf, inspector ───────────────────── */

.rk-rackspace {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr) 20rem;
  gap: 1rem;
  align-items: start;
}
.rk-palette { display: grid; gap: .5rem; min-width: 0; align-content: start; }
.rk-library {
  list-style: none;
  margin: 0; padding: .25rem;
  display: grid;
  gap: .25rem;
  max-height: clamp(18rem, 55vh, 34rem);
  overflow: auto;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.rk-library-empty { padding: .5rem; color: var(--muted); font-size: .9rem; }
.rk-library-note { margin: 0; }
.product[data-product="rack-designer"] .rk-pane button.rk-libitem,
.product[data-product="rack-designer"] .rk-pane button.rk-card {
  width: 100%;
  justify-content: flex-start;
  gap: .55rem;
  text-align: left;
  padding: .35rem .5rem;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.rk-libitem-text, .rk-card-text { display: grid; min-width: 0; }
.rk-libitem-model, .rk-card-name { font-weight: 600; font-size: .88rem; line-height: 1.25; overflow-wrap: anywhere; }
.rk-libitem-meta, .rk-card-meta { font-size: .78rem; color: var(--muted); line-height: 1.25; }
.rk-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; }
.rk-custom .rk-field:first-child { grid-column: 1 / -1; }
.rk-custom .rk-row { grid-column: 1 / -1; }

.rk-racks-column { display: grid; gap: .6rem; min-width: 0; align-content: start; }
.rk-racks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-start;
  padding: .6rem;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  overflow-x: auto;
}
.rk-rack { margin: 0; display: grid; gap: .35rem; min-width: 0; }
.rk-rack-faces { display: flex; gap: .7rem; }
.rk-face-wrap { display: grid; gap: .2rem; justify-items: start; }
.rk-face-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
svg.rk-face { display: block; max-width: 100%; height: auto; }
svg.rk-face:focus { outline: none; }
svg.rk-face:focus-visible { outline: 3px solid var(--rk-focus); outline-offset: 2px; }
.rk-device { cursor: grab; touch-action: none; }
.rk-device:focus { outline: none; }
.rk-device:focus-visible .rk-device-box { stroke: #1d4ed8; stroke-width: 3; }
.rk-device.is-selected .rk-device-box { stroke: #1d4ed8; }
.rk-device.is-back { opacity: .8; }
.rk-device.is-dragging { opacity: .35; }
.rk-drop { pointer-events: none; }
.rk-drop.is-good { fill: rgba(22, 163, 74, .18); stroke: #15803d; stroke-width: 2; stroke-dasharray: 5 3; }
.rk-drop.is-bad { fill: rgba(194, 65, 12, .16); stroke: #c2410c; stroke-width: 2; stroke-dasharray: 5 3; }
.product[data-product="rack-designer"] .rk-pane button.rk-rack-head {
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  padding: .3rem .55rem;
  text-align: left;
}
.rk-rack-name { font-weight: 700; }
.rk-rack-meta { font-size: .8rem; opacity: .85; }
.rk-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 1000;
  width: 120px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 .8rem/1.1 Helvetica, Arial, sans-serif;
  color: #18212b;
  border: 2px solid #2f64b3;
  border-radius: 3px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
  pointer-events: none;
}
.rk-ghost[data-state="good"] { outline: 2px solid #15803d; outline-offset: 2px; }
.rk-ghost[data-state="bad"] { outline: 2px solid #c2410c; outline-offset: 2px; opacity: .85; }

.rk-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .4rem;
  padding: .5rem;
  min-height: 3rem;
  border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: var(--radius);
}
.rk-shelf.is-drop { border-color: #15803d; background: rgba(22, 163, 74, .08); }

.rk-inspector {
  display: grid;
  gap: .65rem;
  align-content: start;
  padding: .85rem;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius);
  background: var(--surface);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  position: sticky;
  top: 1rem;
  min-width: 0;
}
.rk-inspector > * { min-width: 0; }
.rk-inspector-title { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .2rem; }
.rk-model { margin: -.3rem 0 0; color: var(--muted); font-size: .88rem; }
.rk-source { font-size: .78rem; overflow-wrap: anywhere; }
.rk-inspector textarea.input { resize: vertical; }
.rk-inspector-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .4rem; border-top: 1px solid var(--rk-line); }
.rk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; }
.rk-stats div { padding: .45rem; border-radius: calc(var(--radius) / 1.5); background: color-mix(in srgb, var(--text) 5%, transparent); min-width: 0; }
.rk-stats dt { font-size: .75rem; color: var(--muted); }
.rk-stats dd { margin: 0; font-size: 1.05rem; font-weight: 700; }
.rk-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rk-finding {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .2rem .5rem;
  align-items: start;
  padding: .45rem .5rem;
  border-left: 3px solid var(--rk-gap);
  border-radius: 3px;
  background: color-mix(in srgb, var(--rk-gap) 10%, transparent);
  font-size: .88rem;
}
.rk-finding.tone-problem { border-left-color: var(--rk-problem); background: color-mix(in srgb, var(--rk-problem) 9%, transparent); }
.rk-finding-level { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding-top: .15rem; }
.product[data-product="rack-designer"] .rk-pane button.rk-show,
.product[data-product="rack-designer"] .rk-pane button.rk-link { min-height: 1.9rem; padding: .15rem .55rem; font-size: .8rem; }
.product[data-product="rack-designer"] .rk-pane button.rk-link {
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  padding: .1rem .2rem;
  white-space: nowrap;
}

/* ── Ports and cables ───────────────────────────────────────────────── */

.rk-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.rk-plate-col { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.rk-plate {
  display: grid;
  gap: .35rem;
  align-content: start;
  padding: .7rem;
  min-height: 6rem;
  border-radius: var(--radius);
  background: #2b3139;
  color: #e5e7eb;
  overflow-x: auto;
}
.rk-plate .rk-empty { color: #aab1bb; }
.rk-plate .rk-muted { color: #aab1bb; font-size: .85rem; }
.rk-plate-title { margin: 0 0 .2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.rk-bank-label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #aab1bb; margin-top: .2rem; }
.rk-bank { display: flex; flex-wrap: wrap; gap: .3rem; }
.rk-bank.is-two-row {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 2.35rem;
  justify-content: start;
}
.product[data-product="rack-designer"] .rk-cabling button.rk-port {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  min-height: 0;
  padding: 0;
  font: 600 .72rem/1 Helvetica, Arial, sans-serif;
  color: #e5e7eb;
  background: #11161c;
  border: 1.5px solid #5b6470;
  border-left: 4px solid var(--vlan, #5b6470);
  border-radius: 3px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.product[data-product="rack-designer"] .rk-cabling button.rk-port.is-cage { width: 3rem; border-radius: 2px; background: #1c232b; }
.rk-bank.is-two-row .rk-port.is-cage { width: 2.35rem; }
.product[data-product="rack-designer"] .rk-cabling button.rk-port.is-cabled { background: #0b0f14; box-shadow: inset 0 -5px 0 var(--cable, #2563eb); }
.product[data-product="rack-designer"] .rk-cabling button.rk-port.is-pse::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #facc15;
}
.product[data-product="rack-designer"] .rk-cabling button.rk-port.is-lit { border-color: #60a5fa; box-shadow: 0 0 0 2px #60a5fa, inset 0 -5px 0 var(--cable, transparent); }
.product[data-product="rack-designer"] .rk-cabling button.rk-port.is-selected {
  color: #0b0f14;
  background: #fde68a;
  border-color: #facc15;
}
.product[data-product="rack-designer"] .rk-cabling button.rk-port.is-target { outline: 3px dashed #60a5fa; outline-offset: 2px; }
.product[data-product="rack-designer"] .rk-cabling button.rk-port:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.rk-port-num { pointer-events: none; }
.rk-wire {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
}

.rk-port-inspector {
  padding: .85rem;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.rk-port-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rk-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rk-trace-hop { display: flex; }
.product[data-product="rack-designer"] .rk-pane button.rk-trace-port {
  justify-content: flex-start;
  width: 100%;
  min-height: 2rem;
  padding: .2rem .5rem;
  text-align: left;
  font-size: .85rem;
}
.product[data-product="rack-designer"] .rk-pane button.rk-trace-port.is-here { font-weight: 700; border-color: var(--accent); }
.rk-trace-link {
  margin-left: 1rem;
  padding: .3rem 0 .3rem .8rem;
  border-left: 3px solid #2563eb;
  font-size: .8rem;
  color: var(--muted);
}
.rk-trace-link.is-through { border-left-style: dotted; }
.rk-tags { display: grid; gap: .3rem; margin: 0; padding: .4rem .5rem; border: 1px solid var(--rk-line); border-radius: calc(var(--radius) / 1.5); }
.rk-tags legend { padding: 0 .2rem; }

.rk-table-wrap { overflow-x: auto; max-width: 100%; }
.rk-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rk-table th, .rk-table td { padding: .3rem .4rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rk-line); }
.rk-table thead th { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-bottom-width: 2px; white-space: nowrap; }
.rk-table td .input { min-width: 7rem; }
.rk-colour { width: 2.2rem; height: 1.9rem; padding: 0; border: 1px solid var(--rk-line); border-radius: 4px; background: none; cursor: pointer; }

/* ── Topology ───────────────────────────────────────────────────────── */

.rk-topo-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1rem;
  align-items: start;
}
.rk-stage {
  position: relative;
  min-width: 0;
  height: clamp(24rem, 66vh, 44rem);
  border: 1px solid var(--rk-line);
  border-radius: var(--radius);
  background: #ffffff;
  overflow: hidden;
}
.rk-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .85rem; }

/* diagram.js draws these; the rules are the diagram's, scoped to this product. */
.product[data-product="rack-designer"] .dg-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.product[data-product="rack-designer"] .dg-canvas:active { cursor: grabbing; }
.product[data-product="rack-designer"] .dg-canvas:focus { outline: none; }
.product[data-product="rack-designer"] .dg-canvas:focus-visible { outline: 3px solid var(--rk-focus); outline-offset: -3px; }
.product[data-product="rack-designer"] .dg-node { cursor: pointer; }
.product[data-product="rack-designer"] .dg-node:focus { outline: none; }
.product[data-product="rack-designer"] .dg-node:focus-visible .dg-box,
.product[data-product="rack-designer"] .dg-node.is-selected .dg-box { stroke: #1d4ed8; stroke-width: 2.5; }
.product[data-product="rack-designer"] .dg-node.is-candidate .dg-box { stroke: #1d4ed8; stroke-width: 2.5; stroke-dasharray: 5 3; }
.product[data-product="rack-designer"] .dg-node.is-dragging { opacity: .85; cursor: grabbing; }
.product[data-product="rack-designer"] .dg-node.is-dragging .dg-box { filter: drop-shadow(0 6px 10px rgba(15, 23, 42, .25)); }
.product[data-product="rack-designer"] .dg-edge { cursor: pointer; }
.product[data-product="rack-designer"] .dg-handle { cursor: crosshair; }
.dg-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 1000;
  padding: .45rem .7rem;
  font: 600 .85rem/1.2 Helvetica, Arial, sans-serif;
  color: #18212b;
  background: #ffffff;
  border: 2px solid #2f64b3;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
  pointer-events: none;
}

/* ── VLANs and export ───────────────────────────────────────────────── */

.rk-plan-import { display: grid; gap: .45rem; }
.rk-plan-import .input { width: auto; max-width: 100%; }
.rk-vlans { display: grid; gap: .7rem; min-width: 0; }
.rk-export { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.rk-export-item {
  display: grid;
  gap: .45rem;
  align-content: start;
  padding: .85rem;
  border: 1px solid var(--rk-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.rk-export-item .rk-h3 { margin: 0; }
.rk-export-item .field-help { margin: 0; }
.rk-export > .field-help { grid-column: 1 / -1; }

/* ── Buttons ────────────────────────────────────────────────────────── */

/* A bare <button> is the browser's grey default. An editor needs real
   secondary buttons with a pressed state, drawn on the preset's tokens;
   `.btn` stays the platform's primary action. */
.product[data-product="rack-designer"] .rk-pane button:not(.btn),
.product[data-product="rack-designer"] .rk-export button:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: .35rem .75rem;
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: calc(var(--radius) / 1.5);
  cursor: pointer;
}
.product[data-product="rack-designer"] button:not(.btn):not(.rk-port):hover { border-color: var(--accent); }
.product[data-product="rack-designer"] button:focus-visible,
.product[data-product="rack-designer"] .input:focus-visible,
.product[data-product="rack-designer"] input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--rk-focus);
  outline-offset: 2px;
}
.product[data-product="rack-designer"] button:not(.btn):disabled { opacity: .45; cursor: not-allowed; }
.product[data-product="rack-designer"] button:not(.btn):not(.rk-port)[aria-pressed="true"] {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}
.product[data-product="rack-designer"] button:not(.btn).tone-bad {
  color: var(--rk-problem);
  border-color: color-mix(in srgb, var(--rk-problem) 55%, transparent);
}

/* ── Narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 80rem) {
  .rk-rackspace { grid-template-columns: 15rem minmax(0, 1fr); }
  .rk-rackspace > .rk-inspector { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 64rem) {
  .rk-topo-workspace { grid-template-columns: minmax(0, 1fr); }
  .rk-topo-inspector { position: static; max-height: none; }
  .rk-port-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rk-port-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  .rk-rackspace { grid-template-columns: minmax(0, 1fr); }
  .rk-library { max-height: 16rem; }
  .rk-projectbar { grid-template-columns: minmax(0, 1fr); }
  .rk-plates { grid-template-columns: minmax(0, 1fr); }
  .rk-port-grid { grid-template-columns: minmax(0, 1fr); }
  .rk-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rk-stage { height: 62vh; min-height: 20rem; }
  .rk-zoom { margin-left: 0; }
  .rk-rack-faces { flex-wrap: wrap; }
}

/* ── Room to work ───────────────────────────────────────────────────── */

/* Library, two rack faces and an inspector side by side need more than the
   site's reading column, so on a wide screen the editors take the window's
   width while the rest of the page keeps its measure. */
@media (min-width: 72rem) {
  .product[data-product="rack-designer"] .rk-rackspace,
  .product[data-product="rack-designer"] .rk-topo-workspace,
  .product[data-product="rack-designer"] .rk-plates {
    --rk-wide: min(calc(100vw - 5rem), 1760px);
    width: var(--rk-wide);
    margin-left: calc(50% - var(--rk-wide) / 2);
  }
}

/* ── Print: the rack book and the label sheet ───────────────────────── */

.rk-report, .rk-labels { display: none; }

@media print {
  /* Both print sheets live at the end of <body>. While one prints, the rest
     of the page is taken out of the flow entirely rather than only hidden,
     so the sheet starts on page one and a long editor does not print as
     blank pages behind it. */
  body[data-printing-scope]:has(> .rk-report[data-printing]) > :not(.rk-report),
  body[data-printing-scope]:has(> .rk-labels[data-printing]) > :not(.rk-labels) { display: none !important; }
  body[data-printing-scope] .rk-report[data-printing],
  body[data-printing-scope] .rk-labels[data-printing] { display: block; position: static; color: #000; background: #fff; }

  .rk-report { font: 10pt/1.35 Helvetica, Arial, sans-serif; }
  .rk-report h1 { font-size: 18pt; margin: 0 0 4pt; }
  .rk-report h2 { font-size: 13pt; margin: 14pt 0 6pt; break-after: avoid; }
  .rk-report h3 { font-size: 11pt; margin: 10pt 0 4pt; break-after: avoid; }
  .rk-print-faces { display: flex; gap: 18pt; break-inside: avoid; }
  .rk-print-faces figure { margin: 0; }
  .rk-print-faces figcaption { font-size: 9pt; font-weight: 700; margin-top: 3pt; }
  .rk-print-faces svg { width: 2.6in; height: auto; max-height: 8.5in; }
  .rk-print-topology { margin: 0; break-inside: avoid; }
  .rk-print-topology img { width: 100%; height: auto; max-height: 8.5in; object-fit: contain; }
  .rk-print-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; margin: 4pt 0 8pt; }
  .rk-print-table th, .rk-print-table td { border: .5pt solid #999; padding: 2pt 3pt; vertical-align: top; text-align: left; }
  .rk-print-table thead { display: table-header-group; }
  .rk-print-table tr { break-inside: avoid; }

  /* 1 x 2-5/8 in labels, 3 across and 10 down on US Letter (Avery 5160 and
     compatible): 1/2 in top margin, 3/16 in side margins, 1/8 in between
     columns. The page margin has to be zero for those to land on the die
     cuts, and a named page keeps that away from the rack book. */
  .rk-labels[data-printing] { page: rk-labels; }
  .rk-label-sheet {
    box-sizing: border-box;
    width: 8.5in;
    height: 11in;
    padding: .5in .1875in 0;
    display: grid;
    grid-template-columns: repeat(3, 2.625in);
    grid-auto-rows: 1in;
    column-gap: .125in;
    align-content: start;
    break-after: page;
    overflow: hidden;
  }
  .rk-label-sheet:last-child { break-after: auto; }
  .rk-label {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .07in;
    padding: .06in .1in;
    overflow: hidden;
    font: 7pt/1.2 Helvetica, Arial, sans-serif;
    color: #000;
  }
  .rk-label-qr { flex: none; width: .82in; height: .82in; }
  .rk-label-qr svg { display: block; width: 100%; height: 100%; }
  .rk-label-text { display: grid; min-width: 0; }
  .rk-label-text strong { font-size: 10pt; line-height: 1.1; }
  .rk-label-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@page rk-labels { size: letter; margin: 0; }