/* Pitboard Studio 0.6: layers, signature instruments and editable typography. */

.workspace {
  --pbs-layers-width: 220px;
  grid-template-columns: 278px var(--pbs-layers-width) minmax(400px, 1fr) 322px !important;
}

.workspace.layers-collapsed {
  --pbs-layers-width: 42px;
}

.layers-sidebar {
  min-width: 0;
  border-right: 1px solid #2b3540;
  background: linear-gradient(180deg, #17191c, #101215);
  overflow: hidden;
}

.layers-sidebar-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid #303943;
  color: #e6edf3;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .11em;
}

.layers-sidebar-header button {
  width: 29px;
  min-width: 29px;
  height: 29px;
  min-height: 29px;
  padding: 0;
  border: 1px solid #46515d;
  border-radius: 5px;
  background: #25292e;
  font-size: 21px;
  line-height: 1;
}

.layers-list {
  height: calc(100% - 64px);
  overflow: auto;
  padding: 9px 8px 14px;
  scrollbar-color: #46525f #111418;
}

.layers-empty {
  padding: 14px 9px;
  color: #7f8d9b;
  font-size: 11px;
  line-height: 1.45;
}

.layer-row {
  min-height: 36px;
  margin-bottom: 5px;
  display: grid;
  grid-template-columns: 24px 29px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 4px 7px 4px 4px;
  border: 1px solid #3b424a;
  border-radius: 5px;
  background: linear-gradient(180deg, #2b2d30, #242629);
  color: #edf3f8;
  cursor: pointer;
  user-select: none;
}

.layer-row:hover {
  border-color: #65727f;
  background: linear-gradient(180deg, #33363a, #282b2f);
}

.layer-row.selected {
  border-color: #38a9ff;
  box-shadow: inset 3px 0 #38a9ff, 0 0 0 1px rgba(56,169,255,.22);
}

.layer-row.hidden-layer {
  opacity: .48;
}

.layer-row.dragging {
  opacity: .34;
}

.layer-row.drag-target {
  border-color: #ff9b35;
  box-shadow: inset 0 -3px #ff9b35;
}

.layer-visibility {
  width: 24px;
  min-width: 24px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dbe7f0;
  font-size: 13px;
}

.layer-visibility:hover {
  border: 0 !important;
  background: #1a222a !important;
  color: #fff;
}

.layer-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #46525d;
  border-radius: 4px;
  background: #101317;
  color: #ff9a35;
  font-size: 8px;
  font-weight: 900;
}

.layer-name {
  min-width: 0;
  overflow: hidden;
  color: #eef3f7;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layers-sidebar.collapsed .layers-sidebar-header {
  justify-content: center;
  padding: 10px 5px;
}

.layers-sidebar.collapsed .layers-sidebar-header > span,
.layers-sidebar.collapsed .layers-list {
  display: none;
}

.dashboard-widget :is(
  .premium-digital-label,
  .premium-led-header strong,
  .premium-graph-header strong,
  .status-copy strong,
  .dtc-header strong,
  .logger-widget strong,
  .motion-status-copy strong,
  .motion-live-header strong,
  .gg-readout strong,
  .attitude-readout strong,
  .dynamics-title,
  .launch-header strong,
  .score-copy > strong,
  .performance-header strong,
  .performance-controls-widget strong,
  .lap-header strong,
  .inclinometer-title
) {
  color: var(--pbs-label-color) !important;
  font-size: var(--pbs-label-font-size) !important;
}

.dashboard-widget :is(
  .premium-digital-reading,
  .performance-time,
  .lap-current,
  .dynamics-main,
  .launch-metrics strong,
  .score-ring strong,
  .motion-value-grid strong,
  .compass-digital-cardinal,
  .motorsport-digital-time
) {
  color: var(--pbs-value-color) !important;
  font-size: var(--pbs-value-font-size) !important;
}

.dashboard-widget :is(
  .performance-header span,
  .lap-header span,
  .status-copy span,
  .motion-status-copy span,
  .motion-live-header span,
  .logger-widget span,
  .score-copy span,
  .compass-digital-degrees,
  .motorsport-digital-date
) {
  color: var(--pbs-secondary-color) !important;
  font-size: var(--pbs-secondary-font-size) !important;
}

.dashboard-widget :is(
  .premium-digital-footer,
  .premium-graph-footer,
  .performance-footer,
  .lap-footer,
  .dynamics-foot,
  .logger-meta,
  .dtc-footer,
  .motion-status-copy small
) {
  color: var(--pbs-footer-color) !important;
  font-size: var(--pbs-footer-font-size) !important;
}

.dashboard-widget :is(
  .premium-digital-reading small,
  .performance-time small,
  .dynamics-main small,
  .launch-metrics span,
  .motion-value-grid span
) {
  color: var(--pbs-unit-color) !important;
  font-size: var(--pbs-unit-font-size) !important;
}

.signature-clock,
.signature-compass {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  filter: drop-shadow(0 16px 25px rgba(0,0,0,.64));
}

.signature-clock svg,
.signature-compass svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.signature-instrument-case {
  fill: #07090b;
  stroke: #0e1012;
  stroke-width: 2.6;
}

.signature-instrument-bezel {
  fill: #050608;
  stroke: #899198;
  stroke-width: 1.15;
}

.signature-instrument-face {
  fill: #050608;
  stroke: #252a2f;
  stroke-width: .8;
}

.signature-clock-major,
.signature-compass-major {
  stroke: #fff;
  stroke-width: 1.35;
}

.signature-clock-minor,
.signature-compass-minor {
  stroke: #d8dbde;
  stroke-width: .46;
}

.signature-compass-medium {
  stroke: #f4f4f1;
  stroke-width: .82;
}

.signature-clock-number,
.signature-compass-degree {
  fill: #f5f5f2;
  font-size: 3.4px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: middle;
}

.signature-clock-number.top {
  fill: #ff273c;
}

.signature-clock-red-index {
  stroke: #ff2f43;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.signature-face-title {
  text-anchor: middle;
  font-weight: 700;
  letter-spacing: .75px;
}

.signature-vehicle-outline,
.signature-vehicle-glass {
  fill: none;
  stroke: #8f9498;
  stroke-width: .75;
}

.signature-vehicle-wheel {
  fill: #090b0d;
  stroke: #8f9498;
  stroke-width: .6;
}

.signature-script {
  text-anchor: middle;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .45px;
}

.signature-hour-hand,
.signature-minute-hand,
.signature-second-hand {
  transform-origin: 50px 50px;
  stroke-linecap: round;
}

.signature-hour-hand {
  stroke-width: 4.3;
}

.signature-minute-hand {
  stroke-width: 2.7;
}

.signature-second-hand {
  stroke-width: .6;
}

.signature-centre-outer {
  fill: #2a2c2e;
  stroke: #050607;
  stroke-width: 1.4;
}

.signature-centre-inner {
  fill: #6c6f71;
  stroke: #141617;
  stroke-width: .7;
}

.signature-compass-inner-ring {
  fill: #07090b;
  stroke: #8a8c8e;
  stroke-width: 4.1;
}

.signature-compass-centre-disc {
  fill: #020304;
  stroke: #0c0d0f;
  stroke-width: .8;
}

.signature-compass-cardinal,
.signature-compass-intercardinal {
  text-anchor: middle;
  dominant-baseline: middle;
  font-weight: 800;
}

.signature-compass-cardinal {
  font-size: 6.2px;
}

.signature-compass-intercardinal {
  font-size: 3.1px;
}

.signature-compass-red-pointer {
  filter: drop-shadow(0 0 2px rgba(255,47,67,.65));
}

.signature-compass-white-pointer {
  fill: #f2f2ef;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.8));
}

.signature-compass-heading,
.signature-compass-direction {
  text-anchor: middle;
  font-weight: 500;
}

@media (max-width: 1360px) {
  .workspace {
    --pbs-layers-width: 190px;
    grid-template-columns: 238px var(--pbs-layers-width) minmax(350px, 1fr) 286px !important;
  }
}


/* Real tablet layout. Keep the editor at native browser scale rather than shrinking a desktop-width grid. */
@media (max-width: 1100px) {
  .workspace,
  .workspace.layers-collapsed {
    --pbs-layers-width: clamp(100px, 13vw, 140px);
    grid-template-columns:
      clamp(160px, 20vw, 205px)
      var(--pbs-layers-width)
      minmax(0, 1fr)
      clamp(200px, 25vw, 250px) !important;
    width: 100%;
    min-width: 0 !important;
    overflow: hidden;
  }

  .toolbox,
  .layers-sidebar,
  .designer,
  .inspector {
    min-width: 0 !important;
  }

  .layers-sidebar-header {
    min-height: 52px;
    padding: 7px 7px 7px 9px;
    font-size: 10px;
  }

  .layers-list {
    height: calc(100% - 52px);
    padding: 6px 5px 10px;
  }

  .layer-row {
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 32px;
    padding: 3px 5px;
  }

  .layer-icon {
    display: none;
  }

  .layer-visibility {
    width: 20px;
    min-width: 20px;
  }
}

@media (max-width: 760px) {
  .workspace,
  .workspace.layers-collapsed {
    --pbs-layers-width: 0px;
    grid-template-columns:
      clamp(145px, 22vw, 175px)
      minmax(0, 1fr)
      clamp(185px, 28vw, 220px) !important;
  }

  .layers-sidebar {
    display: none !important;
  }
}


/* Touch-tablet layout, including Firefox Android desktop-like viewport reports. */
html.pbs-tablet-ui .workspace,
html.pbs-tablet-ui .workspace.layers-collapsed{
  --pbs-layers-width:clamp(88px,11vw,125px);
  grid-template-columns:
    clamp(150px,18vw,195px)
    var(--pbs-layers-width)
    minmax(0,1fr)
    clamp(185px,23vw,240px)!important;
  width:100%!important;
  min-width:0!important;
}

html.pbs-tablet-ui .toolbox,
html.pbs-tablet-ui .layers-sidebar,
html.pbs-tablet-ui .designer,
html.pbs-tablet-ui .inspector{
  min-width:0!important;
}

html.pbs-tablet-ui .layers-sidebar-header{
  min-height:48px;
  padding:6px;
  font-size:9px;
}

html.pbs-tablet-ui .layers-list{
  height:calc(100% - 48px);
  padding:5px;
}

html.pbs-tablet-ui .layer-row{
  grid-template-columns:18px minmax(0,1fr);
  min-height:30px;
  padding:3px 4px;
}

html.pbs-tablet-ui .layer-icon{
  display:none!important;
}

html.pbs-tablet-ui .layer-visibility{
  width:18px;
  min-width:18px;
}

@media (orientation:portrait){
  html.pbs-tablet-ui .workspace,
  html.pbs-tablet-ui .workspace.layers-collapsed{
    --pbs-layers-width:0px;
    grid-template-columns:
      clamp(135px,22vw,170px)
      minmax(0,1fr)
      clamp(170px,28vw,215px)!important;
  }

  html.pbs-tablet-ui .layers-sidebar{
    display:none!important;
  }
}