/* =========================================================================
   RotLab — visual identity: "orchid on slate", great-circle arcs
   (siblings: BeamLab cyan, FrameLab teal, ShaftLab bronze, GearLab green,
    BearingLab amber, BoltLab indigo, MotionLab pink, DriveLab gold)

   Layout and components come from /projekty/lab/kit/kit.css, loaded first.
   The three axis colours are NOT theme colours — x red, y green, z blue is
   universal, and changing it to match a palette would make every figure in
   the textbook lie. They are fixed in :root and used as-is.
   ========================================================================= */
:root {
  --bp-bg: #101014;
  --bp-bg2: #16161c;
  --bp-panel: #1c1c24;
  --bp-panel2: #26262f;
  --bp-line: #343442;
  --bp-line2: #4a4a5c;
  --bp-ink: #eae8ee;
  --bp-ink-dim: #a09aad;
  --bp-cyan: #e599f7;          /* primary accent: orchid */
  --bp-blue: #58c6f5;
  --bp-amber: #ffd43b;
  --bp-mark: #ffd43b;
  --bp-red: #ff6f8b;
  --bp-green: #7dd3a0;
  --bp-violet: #b197fc;
  --bp-pink: #f472b6;
  --bp-steel: #b8bec9;

  /* the universal frame-axis colours */
  --ax-x: #ff6f8b;
  --ax-y: #7dd3a0;
  --ax-z: #58c6f5;

  --page-max: 1480px;
  --calc-col: 430px;
  --learn-col: 300px;
}

/* Great-circle arcs — a sphere seen from outside. */
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23e599f7' stroke-opacity='0.05'%3E%3Ccircle cx='75' cy='75' r='48'/%3E%3Cellipse cx='75' cy='75' rx='48' ry='17'/%3E%3Cellipse cx='75' cy='75' rx='17' ry='48'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(229, 153, 247, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 153, 247, 0.024) 1px, transparent 1px);
  background-size: 150px 150px, 150px 150px, 150px 150px;
}

/* ------------------------------- RotLab only ---------------------------- */
#rotView {
  background: rgba(16, 16, 20, 0.55);
  border: 1px solid var(--bp-line);
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}
#rotView.dragging { cursor: grabbing; }

.seg-row.big button .jt-sub { display: block; font-size: 0.68rem; opacity: 0.72; }

/* Only the fields of the chosen input representation are shown. */
.rep-only { display: none; }
.rep-only.on { display: block; }

/* Every representation of the current orientation, side by side. This table
   IS the point of the tool, so it gets the most careful typography. */
.rep-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.76rem; }
.rep-table td { padding: 0.3rem 0.45rem; border-top: 1px solid var(--bp-line); vertical-align: top; }
.rep-table td:first-child { color: var(--bp-ink-dim); white-space: nowrap; width: 8.5rem; }
.rep-table td:last-child { color: var(--bp-ink); }
.rep-table tr.warn td { background: rgba(255, 111, 139, 0.09); }
.rep-table tr.warn td:last-child { color: var(--bp-red); }

/* The 3×3 matrix, monospaced and aligned. */
.mat3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.15rem 0.7rem;
  font-family: var(--mono); font-size: 0.78rem; text-align: right;
  padding: 0.5rem 0.7rem; border: 1px solid var(--bp-line); border-radius: 7px;
  background: var(--bp-panel2);
}
.mat3 span:nth-child(3n+1) { color: var(--ax-x); }
.mat3 span:nth-child(3n+2) { color: var(--ax-y); }
.mat3 span:nth-child(3n+3) { color: var(--ax-z); }

/* All twelve Euler sequences at once — the "24 ways" point made concrete. */
.seq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.4rem;
  font-family: var(--mono); font-size: 0.72rem;
}
.seq-cell {
  padding: 0.35rem 0.5rem; border: 1px solid var(--bp-line); border-radius: 6px;
  background: var(--bp-panel2);
}
.seq-cell b { color: var(--bp-cyan); font-weight: 600; }
.seq-cell.locked { border-color: var(--bp-red); background: rgba(255, 111, 139, 0.1); }
.seq-cell.locked b { color: var(--bp-red); }
.seq-cell small { display: block; opacity: 0.7; margin-top: 0.1rem; }

/* The gimbal margin bar. */
.margin-bar {
  height: 9px; border-radius: 5px; margin-top: 0.4rem; overflow: hidden;
  background: var(--bp-bg); border: 1px solid var(--bp-line);
}
.margin-fill { height: 100%; border-radius: 4px; transition: width 0.25s, background 0.25s; }

.drag-hint {
  font-size: 0.72rem; color: var(--bp-ink-dim); text-align: right;
  margin-top: 0.35rem; opacity: 0.75;
}