/* Torvi — see responsive-table.js. Loaded alongside it on any page with a wide table. */

.rt-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  border-radius: var(--radius, 12px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* The panel keeps its own rounded edge, so the table inside must not draw a second one. */
.rt-scroll > .rt-table { border-radius: 0; box-shadow: none; margin: 0; }

/* An edge shadow only while there is something past it: a permanent one is decoration, and
   decoration cannot tell you whether scrolling would do anything. */
.rt-scroll::before,
.rt-scroll::after {
  content: '';
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  width: 26px;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.rt-scroll::before { float: left;  margin-right: -26px; background: linear-gradient(to right, rgba(11,22,66,0.10), transparent); }
.rt-scroll::after  { float: right; margin-left: -26px;  background: linear-gradient(to left,  rgba(11,22,66,0.10), transparent); }
.rt-scroll.rt-overflow:not(.rt-at-start)::before { opacity: 1; }
.rt-scroll.rt-overflow:not(.rt-at-end)::after   { opacity: 1; }

/* Keep the header and the identifying column in place while the rest moves, so a sideways
   scroll never leaves you looking at values whose row and column you can no longer name. */
.rt-table thead th { position: sticky; top: 0; z-index: 2; background: var(--panel, #fff); }
.rt-table th.rt-sticky,
.rt-table td.rt-sticky { position: sticky; left: 0; z-index: 1; background: var(--panel, #fff); }
.rt-table thead th.rt-sticky { z-index: 3; }
.rt-scroll.rt-overflow:not(.rt-at-start) .rt-table .rt-sticky::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: -1px; width: 12px;
  transform: translateX(100%); pointer-events: none;
  background: linear-gradient(to right, rgba(11,22,66,0.07), transparent);
}

.rt-hidden { display: none !important; }

/* The disclosure sits inside the name cell, ahead of the name. */
.rt-toggle {
  border: 1px solid var(--line); background: none; color: var(--text-muted);
  width: 20px; height: 20px; line-height: 1; border-radius: 6px; cursor: pointer;
  font-size: 12px; margin-right: 8px; padding: 0; vertical-align: middle;
  transition: transform 0.15s ease;
}
.rt-toggle:hover { border-color: var(--control-edge); color: var(--heading); }
.rt-toggle.rt-open { transform: rotate(180deg); }

.rt-detail-row > td { background: var(--surface-2); border-bottom: 1px solid var(--surface-2); padding: 12px 18px 14px; }
.rt-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
             gap: 10px 22px; margin: 0; }
.rt-detail-item dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
                     color: var(--text-muted); margin-bottom: 3px; }
.rt-detail-item dd { margin: 0; font-size: 13.5px; }

@media (max-width: 640px) {
  .rt-detail { grid-template-columns: 1fr; }
}