/* KUBO R&D page */

/* ---------- my role ---------- */
.role-list {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
}
.role-list ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.role-list li {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--faint); padding: 7px 10px;
}

/* ---------- test rig drawing ---------- */
.rig { margin-top: 40px; border: 1px solid var(--faint); }
.rig-top, .chart-top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--faint);
}
.rig-body { display: grid; grid-template-columns: 1fr 300px; }
.rig-draw { padding: 26px 18px 18px; min-width: 0; display: grid; align-items: center; }
.rig-draw svg { width: 100%; height: auto; display: block; overflow: visible; }
.rig svg .ln { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.rig svg .thin { fill: none; stroke: var(--dim); stroke-width: 1; }
.rig svg .dim-ln { fill: none; stroke: var(--dim); stroke-width: 1; }
.rig svg .fill { fill: var(--surface); }
.rig svg .air { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 4; }
.rig svg text { font-family: var(--mono); font-size: 12px; fill: var(--dim); letter-spacing: .04em; }
.rig svg .meas { stroke: var(--dim); stroke-width: 1; fill: none; transition: stroke .2s; }
.rig svg g.on .meas { stroke: var(--hot); stroke-width: 1.6; }

.rig svg .pt { cursor: pointer; }
.rig svg .pt circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; transition: fill .2s, stroke .2s; }
.rig svg .pt text { fill: var(--ink); font-size: 12px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rig svg .pt:hover circle { stroke: var(--hot); }
.rig svg .pt.on circle { fill: var(--hot); stroke: var(--hot); }
.rig svg .pt.on text { fill: #0e0e0d; }
.rig svg .pt:focus { outline: none; }
.rig svg .pt:focus-visible circle { stroke: var(--hot); stroke-width: 2.5; }

.rig-info { border-left: 1px solid var(--faint); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.rig-info ol { list-style: none; display: grid; gap: 2px; }
.rig-info ol button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline;
  padding: 7px 0; color: var(--dim); font: inherit; font-size: 15px;
}
.rig-info ol button .mono { color: var(--dim); }
.rig-info ol button:hover { color: var(--ink); }
.rig-info ol button[aria-pressed="true"] { color: var(--ink); }
.rig-info ol button[aria-pressed="true"] .mono { color: var(--hot); }
.rig-text { border-top: 1px solid var(--line); padding-top: 14px; }
.rig-text p { color: var(--dim); font-size: 15px; line-height: 1.55; }

/* ---------- pressure chart ---------- */
.chart { margin-top: 12px; border: 1px solid var(--faint); }
.chart .seg button { padding: 8px 10px; }
.chart-body { display: grid; grid-template-columns: 1fr 220px; }
.chart-plot { padding: 18px 18px 10px; min-width: 0; }
.chart-plot svg { width: 100%; height: auto; display: block; }
.chart-plot .grid { stroke: var(--line); stroke-width: 1; }
.chart-plot .axis { font-family: var(--mono); font-size: 11px; fill: var(--dim); }
.chart-plot .series { fill: none; stroke: var(--dim); stroke-opacity: .35; stroke-width: 1.5; cursor: pointer; transition: stroke .2s; }
.chart-plot .hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.chart-plot .hit:hover + .series { stroke-opacity: .8; }
.chart-plot .series.on { stroke: var(--hot); stroke-opacity: 1; stroke-width: 2.4; }
.chart-plot .dot { fill: var(--bg); stroke: var(--hot); stroke-width: 1.6; }
.chart-plot .tag { font-family: var(--mono); font-size: 11px; fill: var(--hot); }
.chart-read { border-left: 1px solid var(--faint); padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.chart-read div { display: flex; flex-direction: column; gap: 6px; }
.chart-read b { font-family: var(--mono); font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.chart-read p { color: var(--dim); font-size: 14px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 14px; }

@media (max-width: 860px) {
  .role-list { grid-template-columns: 1fr; gap: 10px; }
  .rig-body, .chart-body { grid-template-columns: 1fr; }
  .rig-info, .chart-read { border-left: 0; border-top: 1px solid var(--faint); }
  .chart-read { flex-direction: row; flex-wrap: wrap; }
  .chart-read div { flex: 1 1 30%; }
  .chart-read p { flex-basis: 100%; }
  .rig svg .lbl { display: none; }
  .rig svg .pt circle { r: 21px; }
  .rig svg .pt text { font-size: 20px; }
}
@media (max-width: 520px) {
  .chart .seg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .chart .seg button + button { border-left: 1px solid var(--faint); }
  .chart .seg button:nth-child(n+5) { border-top: 1px solid var(--faint); }
  .chart .seg button:nth-child(5) { border-left: 0; }
}