/* =====================================================================================
   Thermist Psychrometric Chart Studio (static/css/psychro.css)
   Page layout for the psychrometric calculator page plus the chart studio UI.
   Every studio rule is scoped under #ps-studio so calculator.css globals cannot leak in.
   ===================================================================================== */

/* ---------- page layout (card + studio) ---------- */
.psy-page {
  flex-wrap: wrap;
  align-items: flex-start;
}

@media (min-width: 1000px) {
  .psy-page > #calculation-container {
    position: sticky;
    top: calc(var(--expanded-header-height) + 12px);
  }
  .psy-page > #ps-studio {
    flex: 1 1 560px;
    min-width: 0;
    margin: calc(var(--offset-distance) + var(--expanded-header-height)) var(--offset-distance) 32px 0;
  }
}

@media (max-width: 999.98px) {
  .psy-page > #ps-studio {
    flex: 1 1 100%;
    min-width: 0;
    max-width: calc(100% - 16px);
    margin: 16px 8px 32px;
  }
}

/* Psych Chart page (/psych_chart): the studio alone, with the card's gutter on its left too. */
@media (min-width: 1000px) {
  .psy-chart-page > #ps-studio {
    margin-left: var(--offset-distance);
  }
}

/* Below 1000px the studio is the page's first block (on the calculator page the card sat above it
   and cleared the header), so it clears the fixed site header itself; otherwise the title row sits
   behind the header at scrollY 0 and a phone user can never scroll back up to it. */
@media (max-width: 999.98px) {
  .psy-page.psy-chart-page > #ps-studio {
    margin-top: calc(var(--expanded-header-height) + 14px);
  }
}

.psy-chart-page > #ps-studio {
  scroll-margin-top: calc(var(--expanded-header-height) + 8px);
}

/* "By using the Psych Chart you agree to the Terms of Use": one quiet line under the studio, on its
   own row of the wrapping page flex, tucked into the studio's bottom margin. */
.psy-terms-note {
  flex: 1 1 100%;
  margin: -24px var(--offset-distance) 24px;
  font-size: 12px;
  color: #6b7a89;
  text-align: right;
}
.psy-terms-note a {
  color: inherit;
  text-decoration: underline;
}
@media (max-width: 999.98px) {
  .psy-terms-note {
    margin: -22px 12px 20px;
    text-align: center;
  }
}

html.ps-scroll-lock {
  overflow: hidden;
}

/* The chart's height follows the page width (it keeps the print box shape). With classic scrollbars
   (Windows) a page whose height sits at the scrollbar threshold would loop: the scrollbar appears,
   the page narrows, the chart shrinks, the page gets short, the scrollbar goes, the page widens...
   Reserving the gutter keeps the width constant whether or not the page scrolls. */
html.ps-page {
  scrollbar-gutter: stable;
}

/* Quick taps on the studio's controls (steppers, toggles, tabs) never turn into a double tap page
   zoom; pinch zoom still works everywhere. */
#ps-studio button,
#ps-studio input,
#ps-studio select,
#ps-studio label,
#ps-studio [role="button"],
#ps-studio [role="tab"] {
  touch-action: manipulation;
}

/* Calculator card: the top icon buttons never grow past their square, even before the icon font loads
   (the ligature name would otherwise render as a long word and spill out of the card). */
.psy-page .container-top-button .material-icons {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

/* ---------- studio tokens and resets ---------- */
#ps-studio {
  --ps-border: #dde3e8;
  --ps-border-soft: #eef1f4;
  --ps-muted: #6b7a89;
  --ps-panel: #fff;
  --ps-radius: 10px;
  --ps-focus: 0 0 0 2px rgba(10, 135, 237, .35);
  --ps-blue: var(--thermist-blue, #0a87ed);
  --ps-blue-dark: var(--thermist-blue-dark, #0969bc);
  --ps-blue-soft: rgba(10, 135, 237, .07);
  --ps-blue-soft2: rgba(10, 135, 237, .13);
  --ps-hover: #f2f5f8;
  --ps-danger: #d93a3a;
  --ps-bad: #c62828;
  --ps-bad-bg: #fdeeee;
  --ps-ink: var(--primary-color, #2a3d51);
  --ps-ink-2: #4a5b6c;
  --ps-faint: #9aa6b2;
  --ps-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --ps-shadow-md: 0 6px 18px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .06);
  --ps-shadow-lg: 0 18px 44px rgba(16, 24, 40, .18), 0 3px 10px rgba(16, 24, 40, .08);
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--ps-ink);
  background: var(--neutral-color, #f7f7f7);
  border-radius: var(--ps-radius);
  box-shadow: 2px 3px 8px var(--shadow-color, #798180);
  outline: none;
}

#ps-studio *,
#ps-studio *::before,
#ps-studio *::after {
  box-sizing: border-box;
}

#ps-studio [hidden] {
  display: none !important;
}

#ps-studio h2,
#ps-studio h3,
#ps-studio h4,
#ps-studio p {
  margin: 0;
  text-align: left;
  color: inherit;
}

#ps-studio input,
#ps-studio select,
#ps-studio textarea {
  width: auto;
  height: auto;
  margin: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  text-align-last: auto;
  vertical-align: middle;
  display: inline-block;
  border: 1px solid var(--ps-border);
  border-radius: 6px;
  background: #fff;
  color: var(--primary-color, #2a3d51);
  appearance: auto;
  -webkit-appearance: auto;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

#ps-studio table {
  table-layout: auto;
}

#ps-studio td,
#ps-studio th {
  width: auto;
  text-align: left;
  padding: 4px 6px;
}

#ps-studio button {
  font: inherit;
  letter-spacing: normal;
  margin: 0;
}

#ps-studio .ps-input,
#ps-studio select {
  height: 30px;
}

#ps-studio .ps-input::placeholder,
#ps-studio textarea::placeholder {
  color: #a8b3be;
}

#ps-studio .ps-input:hover,
#ps-studio select:hover,
#ps-studio textarea:hover {
  border-color: #c9d2da;
}

#ps-studio input:focus,
#ps-studio select:focus,
#ps-studio textarea:focus {
  outline: none;
  border-color: var(--ps-blue);
  box-shadow: 0 0 0 3px rgba(10, 135, 237, .16);
}

#ps-studio .ps-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#ps-studio input.ps-invalid,
#ps-studio input.ps-invalid:focus {
  border-color: #e05252;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, .14);
}

#ps-studio select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7a89' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ps-studio :focus-visible {
  outline: none;
}

#ps-studio button:focus-visible,
#ps-studio a:focus-visible {
  box-shadow: var(--ps-focus);
}

#ps-studio .ps-ic {
  font-size: 18px;
  line-height: 1;
  width: 1em;
  height: 1em;
  overflow: hidden;
  display: inline-block;
  flex: 0 0 auto;
  user-select: none;
}

#ps-studio .ps-muted {
  color: var(--ps-muted);
}

#ps-studio .ps-sr,
#ps-studio .ps-clip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#ps-studio .ps-load-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  color: var(--ps-bad);
}

/* ---------- shell and title ---------- */
#ps-studio .ps-shell {
  padding: 14px 16px 16px;
}

/* The title group is the toolbar's first item. Its flex basis is the title alone (so a row that cannot
   fit it wraps, which fitToolbar sees and tightens); it then grows to its content, so the chart's name
   gets the room left over and is clipped before anything else moves. */
#ps-studio .ps-head-titles {
  flex: 1 1 112px;
  max-width: max-content;
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px 4px;
  min-width: 0;
  padding-left: 6px;
}

#ps-studio .ps-head-titles .ps-brand {
  flex: 0 0 auto;
}

#ps-studio .ps-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: center;
}

#ps-studio .ps-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #26a0ff 0%, #0a87ed 45%, #0969bc 100%);
  box-shadow: 0 2px 6px rgba(10, 135, 237, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

#ps-studio .ps-brand-mark .ps-ic {
  font-size: 18px;
}

#ps-studio .ps-studio-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.2;
  white-space: nowrap;
}

/* the save status pill: the first right-hand item of the toolbar */
#ps-studio .ps-save {
  margin-left: auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  color: var(--ps-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

#ps-studio .ps-save .ps-ic {
  font-size: 15px;
  color: #2e9d62;
}

#ps-studio .ps-save-local-off .ps-ic {
  color: #c08a1a;
}

/* ---------- saved charts (account) ---------- */
#ps-studio .ps-save-cloud-saving .ps-ic {
  color: var(--ps-faint);
  animation: ps-spin 1s linear infinite;
}

#ps-studio .ps-save-cloud-saved .ps-ic {
  color: var(--ps-blue);
}

#ps-studio .ps-save-cloud-off .ps-ic,
#ps-studio .ps-save-cloud-hold .ps-ic,
#ps-studio .ps-save-cloud-changed .ps-ic {
  color: #c08a1a;
}

/* signed out (the pill asks for a sign-in), a blank chart signed in, and before the sign-in state is known */
#ps-studio .ps-save-anon .ps-ic,
#ps-studio .ps-save-blank .ps-ic,
#ps-studio .ps-save-wait .ps-ic {
  color: var(--ps-faint);
}

#ps-studio .ps-save-action {
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--ps-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ps-ink);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

#ps-studio .ps-save-action:hover {
  background: var(--ps-hover);
}

#ps-studio .ps-save-action[hidden] {
  display: none;
}

/* the saved chart's name after the brand; a click renames it */
#ps-studio .ps-doc-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 360px;
  height: 28px;
  padding: 0 8px 0 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ps-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#ps-studio .ps-doc-name[hidden] {
  display: none;
}

#ps-studio .ps-doc-name:hover {
  background: var(--ps-hover);
}

#ps-studio .ps-doc-sep {
  color: var(--ps-faint);
  font-weight: 400;
}

#ps-studio .ps-doc-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ps-studio .ps-doc-edit {
  font-size: 15px;
  color: var(--ps-faint);
  opacity: 0;
  transition: opacity .15s;
}

#ps-studio .ps-doc-name:hover .ps-doc-edit,
#ps-studio .ps-doc-name:focus-visible .ps-doc-edit {
  opacity: 1;
}

#ps-studio [data-ps-key="tb-charts"].ps-on .ps-ic {
  color: var(--ps-blue);
}

#ps-studio .ps-menu-label {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#ps-studio .ps-dialog-body {
  padding: 16px 20px 18px;
}

#ps-studio .ps-dialog-foot-stack {
  flex-direction: column;
  align-items: stretch;
}

#ps-studio .ps-dialog-foot-stack .ps-btn {
  justify-content: flex-start;
}

/* the welcome-back card: over the chart, which dims behind it until it is dismissed */
#ps-studio .ps-chart-card.ps-start-open .ps-chart-wrap {
  opacity: .55;
}

#ps-studio .ps-start-card {
  position: absolute;
  z-index: 16;
  left: 50%;
  top: 50%;
  width: min(360px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  padding: 16px 18px 16px;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  box-shadow: var(--ps-shadow-lg);
  animation: ps-fade-in .2s ease;
}

#ps-studio .ps-start-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ps-ink);
}

#ps-studio .ps-start-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -6px 12px;
}

#ps-studio .ps-start-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ps-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

#ps-studio .ps-start-item:hover,
#ps-studio .ps-start-item:focus-visible {
  background: #f0f4f8;
}

#ps-studio .ps-start-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

#ps-studio .ps-start-meta {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--ps-muted);
}

#ps-studio .ps-start-cur .ps-start-name {
  color: var(--ps-blue-dark);
}

/* the buttons wrap rather than run past the card's edge */
#ps-studio .ps-start-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

#ps-studio .ps-start-foot .ps-btn {
  min-width: 0;
}

/* phones and split layouts: the plot is short, so the card sits above it in the flow */
#ps-studio.ps-narrow .ps-start-card {
  position: static;
  width: auto;
  transform: none;
  margin: 10px 10px 0;
  padding: 12px 12px 12px;
  box-shadow: none;
}

#ps-studio.ps-narrow .ps-chart-card.ps-start-open .ps-chart-wrap {
  opacity: 1;
}

#ps-studio.ps-tiny .ps-start-foot .ps-btn {
  flex: 1 1 auto;
}

#ps-studio.ps-narrow .ps-doc-name {
  max-width: 40vw;
}

/* ---------- toolbar ---------- */
#ps-studio .ps-toolbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  box-shadow: var(--ps-shadow-sm);
}

#ps-studio .ps-tb-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

#ps-studio .ps-units {
  background: #eff2f5;
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

#ps-studio .ps-tb-btn {
  position: relative;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3b4d5f;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

#ps-studio .ps-tb-btn .ps-ic {
  font-size: 19px;
  color: #53667a;
}

#ps-studio .ps-tb-btn:hover:not(:disabled) {
  background: var(--ps-hover);
  color: var(--ps-ink);
}

#ps-studio .ps-tb-btn:hover:not(:disabled) .ps-ic {
  color: var(--ps-ink);
}

#ps-studio .ps-tb-btn:disabled {
  opacity: .38;
  cursor: default;
}

#ps-studio .ps-unit-btn {
  height: 28px;
  min-width: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6b7a89;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  position: relative;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

#ps-studio .ps-unit-btn.ps-on {
  background: #fff;
  color: var(--ps-blue);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .14), 0 0 0 1px rgba(16, 24, 40, .04);
}

#ps-studio .ps-tb-sep {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--ps-border);
}

#ps-studio .ps-tb-spacer {
  flex: 1 1 auto;
}

#ps-studio .ps-tb-view {
  gap: 2px;
}

#ps-studio .ps-tb-toggle.ps-on .ps-ic,
#ps-studio .ps-tb-toggle.ps-on:hover:not(:disabled) .ps-ic {
  color: var(--ps-blue);
}

#ps-studio:not(.ps-wide) .ps-tb-view {
  display: none;
}

#ps-studio .ps-export-btn {
  height: 32px;
  padding: 0 13px 0 11px;
  border-radius: 8px;
}

/* tooltips */
#ps-studio [data-ps-tip] {
  position: relative;
}

@media (hover: hover) {
  #ps-studio [data-ps-tip]:hover::after {
    content: attr(data-ps-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: 5px 8px;
    border-radius: 6px;
    background: #1f2d3a;
    color: #fff;
    font: 400 11.5px/1.25 Roboto, Arial, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--ps-shadow-md);
    animation: ps-fade-in .12s ease .45s both;
  }
  #ps-studio [data-ps-key="tb-more"][data-ps-tip]:hover::after {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* ---------- body grid ---------- */
#ps-studio .ps-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

/* The side panel is wide enough for the property grid's longest row ("Humidity ratio gr/lb")
   on one line even when the pane scrolls (a classic scrollbar takes ~17px). */
#ps-studio.ps-wide .ps-body {
  grid-template-columns: minmax(0, 1fr) 340px;
}

#ps-studio.ps-wide.ps-panel-off .ps-body {
  grid-template-columns: minmax(0, 1fr);
}

#ps-studio.ps-wide.ps-panel-off .ps-side {
  display: none;
}

#ps-studio.ps-wide .ps-side {
  animation: ps-fade-in .18s ease;
}

#ps-studio .ps-main {
  min-width: 0;
}

/* ---------- chart card ---------- */
#ps-studio .ps-chart-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  box-shadow: var(--ps-shadow-sm);
  overflow: hidden;
}

#ps-studio .ps-chart-wrap {
  position: relative;
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  transition: opacity .2s ease;
  user-select: none;
  -webkit-user-select: none;
  /* One finger scrolls the page and the browser pinch zooms it; a double tap is the chart's (studio.js).
     No pinch-zoom exclusion here: once the page is zoomed the chart can fill the screen, and the user must
     still be able to pinch back out and pan over it. The chart's own two finger pinch (range zoom on)
     cancels the browser's in its touch handlers, which stand down while the page is zoomed. */
  touch-action: manipulation;
}

#ps-studio .ps-svg {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  overflow: hidden;
}

#ps-studio .ps-svg:focus-visible {
  outline: 2px solid rgba(10, 135, 237, .45);
  outline-offset: -2px;
}

#ps-studio .ps-mode-line .ps-svg {
  cursor: crosshair;
}

#ps-studio .ps-svg [data-ps-kind] {
  cursor: pointer;
}

/* Labels are drag handles (points themselves are not dragged; edit their inputs instead). */
#ps-studio .ps-mode-select .ps-svg [data-ps-kind="label"] {
  cursor: grab;
}

#ps-studio .ps-dragging .ps-svg,
#ps-studio .ps-dragging .ps-svg * {
  cursor: grabbing !important;
}

/* The info card's title, project and date: a double click edits them in place (a blank one is a faint
   placeholder); so does a double click on any label. */
#ps-studio .ps-mode-select .ps-svg .ps-info-edit {
  cursor: text;
}

#ps-studio .ps-svg .ps-info-ph {
  font-style: italic;
  opacity: .7;
}

/* The in-place editor: an input laid over the text it edits (studio.js placeTextEdit sets its box, font
   size, weight and color). */
#ps-studio input.ps-chart-edit {
  position: absolute;
  z-index: 30;
  box-sizing: border-box;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--ps-blue);
  border-radius: 6px;
  background: #fff;
  color: var(--ps-ink);
  line-height: normal;
  box-shadow: var(--ps-shadow-md), var(--ps-focus);
}

#ps-studio input.ps-chart-edit:focus {
  outline: none;
  border-color: var(--ps-blue);
}

/* The chart is drawn at the printed chart size and scaled to fit; studio.js sets the box. */
#ps-studio .ps-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: 0 0;
}

/* The chart is narrower (or shorter) than the card: show the sheet's edge. */
#ps-studio .ps-chart-wrap.ps-letterbox {
  background: #eef1f4;
}

#ps-studio .ps-letterbox .ps-stage {
  box-shadow: 0 0 0 1px #d5dce3, 0 2px 8px rgba(42, 61, 81, .08);
}

#ps-studio .ps-svg {
  /* The chart redraws every frame while zooming: keep its layout and paint from touching the page. */
  contain: strict;
}

/* UI layer drawn by the studio */
#ps-studio .ps-layer-ui,
#ps-studio .ps-layer-ui * {
  pointer-events: none;
}

/* UI marks keep their screen size at any chart scale (--ps-u = 1 / scale). */
#ps-studio .ps-layer-ui * {
  vector-effect: non-scaling-stroke;
}

#ps-studio .ps-cross {
  stroke: #9aa6b2;
  stroke-width: .8;
  stroke-dasharray: 3 3;
  fill: none;
}

#ps-studio .ps-guide {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#ps-studio .ps-guide-rh {
  stroke: #0a87ed;
  stroke-width: 1.8;
  opacity: .62;
}

#ps-studio .ps-guide-wb {
  stroke: #3d5468;
  stroke-width: 1.3;
  stroke-dasharray: 5 3;
  opacity: .55;
}

#ps-studio .ps-cross-dot {
  fill: #2a3d51;
  stroke: #fff;
  stroke-width: 1;
}

#ps-studio .ps-pill {
  fill: #2a3d51;
}

#ps-studio .ps-pill-text {
  fill: #fff;
  font: 500 calc(10px * var(--ps-u, 1)) Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

#ps-studio .ps-ghost-ring {
  fill: rgba(10, 135, 237, .08);
  stroke: #0a87ed;
  stroke-width: 1.6;
  stroke-dasharray: 3 2.4;
  animation: ps-march 1.6s linear infinite;
}

#ps-studio .ps-ghost-dot {
  fill: #0a87ed;
}

#ps-studio .ps-ghost-label {
  fill: #0969bc;
  font: 500 calc(10.5px * var(--ps-u, 1)) Roboto, Arial, sans-serif;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

#ps-studio .ps-rubber {
  stroke: #0a87ed;
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  fill: none;
  animation: ps-march 1s linear infinite;
}

#ps-studio .ps-add-ghost {
  fill: rgba(255, 255, 255, .6);
  stroke-width: 1.5;
  stroke-dasharray: 2.5 2;
}

#ps-studio .ps-add-ghost-label {
  font: 700 calc(11px * var(--ps-u, 1)) Roboto, Arial, sans-serif;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: .85;
}

/* hover tip */
#ps-studio .ps-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  min-width: 150px;
  padding: 8px 10px 9px;
  border-radius: 9px;
  background: rgba(27, 39, 51, .94);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 8px 22px rgba(16, 24, 40, .28);
  pointer-events: none;
  will-change: transform;
}

#ps-studio .ps-tip-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-weight: 500;
}

#ps-studio .ps-tip-title.ps-muted {
  color: #9fb0c1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#ps-studio .ps-tip .ps-glyph {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .7));
}

#ps-studio .ps-tip-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 1px 8px;
  font-variant-numeric: tabular-nums;
}

#ps-studio .ps-tip-k,
#ps-studio .ps-tip-u {
  color: #9fb0c1;
}

#ps-studio .ps-tip-v {
  text-align: right;
  font-weight: 500;
}

#ps-studio .ps-tip-note {
  color: #ffd28a;
}

#ps-studio .ps-tip-bad {
  color: #ff9f9f;
}

#ps-studio .ps-tip .ps-tag {
  color: #e7cdf3;
  background: rgba(255, 255, 255, .12);
}

/* ghost chip, mode hint */
#ps-studio .ps-ghost-chip {
  position: absolute;
  z-index: 15;
  height: 22px;
  padding: 0 9px 0 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  border-radius: 11px;
  background: var(--ps-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(10, 135, 237, .45);
  animation: ps-fade-in .2s ease;
  transition: background-color .15s, transform .15s;
}

#ps-studio .ps-ghost-chip:hover {
  background: var(--ps-blue-dark);
  transform: translateY(-1px);
}

#ps-studio .ps-ghost-chip .ps-ic {
  font-size: 15px;
}

#ps-studio .ps-mode-hint {
  position: absolute;
  z-index: 10;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(27, 39, 51, .86);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: var(--ps-shadow-md);
  animation: ps-fade-in .2s ease;
}

#ps-studio .ps-empty-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ps-ink);
}

#ps-studio .ps-empty-text {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ps-muted);
  line-height: 1.45;
}

#ps-studio .ps-chart-card {
  position: relative;
}

/* point popover */
#ps-studio .ps-popover,
#ps-studio .ps-item-sheet {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  width: 296px;
  max-width: calc(100% - 12px);
  padding: 10px;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  box-shadow: var(--ps-shadow-lg);
  animation: ps-fade-in .14s ease;
  user-select: text;
  -webkit-user-select: text;
}

#ps-studio .ps-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 8px 2px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ps-border-soft);
}

#ps-studio .ps-pop-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-pop-x {
  margin: -4px -4px -4px 0;
}

#ps-studio .ps-pop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

#ps-studio .ps-pop-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #f5f7f9;
}

#ps-studio .ps-pop-cell.ps-def {
  background: var(--ps-blue-soft2);
}

#ps-studio .ps-pop-k {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--ps-muted);
}

#ps-studio .ps-pop-dot {
  color: var(--ps-blue);
  font-size: 8px;
}

#ps-studio .ps-pop-v {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#ps-studio .ps-pop-cell.ps-def .ps-pop-v {
  font-weight: 700;
  color: var(--ps-ink);
}

#ps-studio .ps-pop-note {
  margin-top: 8px;
  font-size: 11.5px;
  color: #7e5b9a;
}

#ps-studio .ps-pop-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}

#ps-studio .ps-pop-actions .ps-icon-btn:first-of-type {
  margin-left: auto;
}

#ps-studio .ps-sheet-grab {
  display: none;
}

/* phones: the point popover is a bottom sheet so the chart stays visible */
#ps-studio .ps-popover.ps-sheet,
#ps-studio .ps-item-sheet {
  position: fixed;
  top: auto;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1045;
  width: auto;
  max-width: 560px;
  max-height: min(60vh, 420px);
  margin: 0 auto;
  padding: 6px 12px 12px;
  overflow-y: auto;
  border-radius: 18px;
  transform: none;
  box-shadow: 0 -6px 30px rgba(16, 24, 40, .2), 0 2px 8px rgba(16, 24, 40, .08);
  animation: ps-sheet-in .26s cubic-bezier(.2, .8, .3, 1);
}

#ps-studio .ps-popover.ps-sheet .ps-sheet-grab,
#ps-studio .ps-item-sheet .ps-sheet-grab {
  display: block;
  width: 36px;
  height: 4px;
  margin: 2px auto 8px;
  border-radius: 2px;
  background: #d5dce2;
}

#ps-studio .ps-popover.ps-sheet .ps-pop-head,
#ps-studio .ps-item-sheet .ps-pop-head {
  padding-bottom: 6px;
  margin-bottom: 8px;
}

#ps-studio .ps-popover.ps-sheet .ps-pop-grid,
#ps-studio .ps-item-sheet .ps-pop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#ps-studio .ps-popover.ps-sheet .ps-pop-cell,
#ps-studio .ps-item-sheet .ps-pop-cell {
  padding: 5px 7px;
}

#ps-studio .ps-popover.ps-sheet .ps-pop-k,
#ps-studio .ps-item-sheet .ps-pop-k {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-popover.ps-sheet .ps-pop-actions,
#ps-studio .ps-item-sheet .ps-pop-actions {
  margin-top: 10px;
}

/* ---------- side panel ---------- */
#ps-studio .ps-side {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  box-shadow: var(--ps-shadow-sm);
}

#ps-studio .ps-side-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#ps-studio.ps-wide .ps-side {
  position: relative;
  min-height: 400px;
}

#ps-studio.ps-wide .ps-side-inner {
  position: absolute;
  inset: 0;
}

#ps-studio .ps-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  /* The rule is an inset shadow the active tab's underline paints over, not a border the tabs overlap
     with a -1px margin: that 1px of vertical overflow made the strip (overflow-x: auto) a vertical
     scroller, and on iOS a swipe starting on it scrolled the strip instead of the page. */
  box-shadow: inset 0 -1px 0 var(--ps-border);
  overflow-x: auto;
  scrollbar-width: none;
}

#ps-studio .ps-tabs::-webkit-scrollbar {
  display: none;
}

#ps-studio .ps-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--ps-muted);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}

#ps-studio .ps-tab:hover {
  color: var(--ps-ink);
  background: #f6f8fa;
}

#ps-studio .ps-tab.ps-on {
  color: var(--ps-blue);
  border-bottom-color: var(--ps-blue);
}

#ps-studio .ps-tab-ic {
  font-size: 16px;
}

#ps-studio.ps-wide .ps-tab-ic,
#ps-studio.ps-tiny .ps-tab-ic {
  display: none;
}

#ps-studio .ps-tab-count {
  min-width: 17px;
  flex: 0 0 auto; /* never squeezed below its digits (e.g. "15") */
  height: 17px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #eef1f4;
  color: #5b6b7b;
  font-size: 10.5px;
  font-weight: 700;
}

#ps-studio .ps-tab.ps-on .ps-tab-count {
  background: var(--ps-blue-soft2);
  color: var(--ps-blue);
}

#ps-studio .ps-pane-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #cfd7de transparent;
}

#ps-studio .ps-pane {
  padding: 12px;
}

#ps-studio .ps-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 28px;
}

#ps-studio .ps-pane-title {
  display: flex;
  align-items: center;
  gap: 7px;
}

#ps-studio .ps-pane-title h3 {
  font-size: 14px;
  font-weight: 500;
}

#ps-studio .ps-count {
  min-width: 20px;
  flex: 0 0 auto;
  height: 18px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #eef1f4;
  color: #5b6b7b;
  font-size: 11px;
  font-weight: 700;
}

/* Count badges: centre the digits on their cap height, not on the font's line box (Roboto's line box
   sits the digits about 1.5px high in a 17px pill). Trimmed to cap height, equal padding centres them. */
@supports (text-box: trim-both cap alphabetic) {
  #ps-studio .ps-tab-count,
  #ps-studio .ps-count {
    display: inline-block;
    height: auto;
    line-height: 1;
    text-align: center;
    text-box: trim-both cap alphabetic;
  }
  #ps-studio .ps-tab-count {
    padding-top: calc((17px - 0.711em) / 2);
    padding-bottom: calc((17px - 0.711em) / 2);
  }
  #ps-studio .ps-count {
    padding-top: calc((18px - 0.711em) / 2);
    padding-bottom: calc((18px - 0.711em) / 2);
  }
}

/* ---------- buttons ---------- */
#ps-studio .ps-btn {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ps-ink);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ps-shadow-sm);
  transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s, transform .08s;
}

#ps-studio .ps-btn .ps-ic {
  font-size: 17px;
}

#ps-studio .ps-btn:hover {
  background: #f6f8fa;
  border-color: #cdd5dc;
}

#ps-studio .ps-btn:active {
  transform: translateY(.5px);
}

#ps-studio .ps-btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  gap: 5px;
}

#ps-studio .ps-btn-sm .ps-ic {
  font-size: 16px;
}

/* A toggle button (Scroll + pan): pressed = on */
#ps-studio .ps-btn-toggle[aria-pressed="true"],
#ps-studio .ps-btn-toggle[aria-pressed="true"]:hover {
  background: var(--ps-blue-soft2);
  border-color: var(--ps-blue);
  color: var(--ps-blue-dark);
}

#ps-studio .ps-btn-primary {
  background: var(--ps-blue);
  border-color: var(--ps-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 135, 237, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
}

#ps-studio .ps-btn-primary:hover {
  background: var(--ps-blue-dark);
  border-color: var(--ps-blue-dark);
}

#ps-studio .ps-btn-primary .ps-ic {
  color: #fff;
}

#ps-studio .ps-btn-accent {
  color: var(--ps-blue);
  border-color: rgba(10, 135, 237, .32);
  background: var(--ps-blue-soft);
  box-shadow: none;
}

#ps-studio .ps-btn-accent:hover {
  background: var(--ps-blue-soft2);
  border-color: rgba(10, 135, 237, .45);
}

#ps-studio .ps-btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#ps-studio .ps-btn-ghost:hover {
  background: #eef2f5;
  border-color: transparent;
}

#ps-studio .ps-btn-danger {
  color: var(--ps-danger);
}

#ps-studio .ps-btn-danger:hover {
  background: #fdf1f1;
  border-color: #f1c6c6;
}

#ps-studio .ps-btn-danger-solid {
  background: var(--ps-danger);
  border-color: var(--ps-danger);
  color: #fff;
}

#ps-studio .ps-btn-danger-solid:hover {
  background: #bf2f2f;
  border-color: #bf2f2f;
}

#ps-studio .ps-btn.ps-busy {
  opacity: .7;
}

#ps-studio .ps-btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

#ps-studio .ps-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #758595;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

#ps-studio .ps-icon-btn:hover {
  background: #eef2f5;
  color: var(--ps-ink);
}

#ps-studio .ps-icon-btn.ps-on {
  color: var(--ps-blue);
  background: var(--ps-blue-soft2);
}

#ps-studio .ps-icon-btn.ps-danger:hover {
  color: var(--ps-danger);
  background: #fdf1f1;
}

#ps-studio .ps-eye[aria-pressed="false"] {
  color: #b7c1cb;
}

/* ---------- list rows ---------- */
#ps-studio .ps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#ps-studio .ps-item {
  background: #fff;
  border: 1px solid var(--ps-border-soft);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

#ps-studio .ps-item:hover {
  border-color: var(--ps-border);
}

#ps-studio .ps-item.ps-sel {
  border-color: rgba(10, 135, 237, .5);
  box-shadow: 0 0 0 3px rgba(10, 135, 237, .09);
}

#ps-studio .ps-row-chev {
  flex: 0 0 auto;
  font-size: 18px;
  color: #aab5c0;
}

#ps-studio .ps-row-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

#ps-studio .ps-tag {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(142, 68, 173, .1);
  color: #8e44ad;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#ps-studio .ps-bad-text {
  color: var(--ps-bad);
}

#ps-studio .ps-warn-text {
  color: #9a6200;
}

#ps-studio .ps-glyph {
  display: block;
  overflow: visible;
}

/* ---------- inspector ---------- */
#ps-studio .ps-inspector {
  padding: 2px 12px 12px;
  border-top: 1px solid var(--ps-border-soft);
  background: linear-gradient(#fbfcfd, #fff 60px);
  border-radius: 0 0 10px 10px;
  animation: ps-expand .18s ease;
}

#ps-studio .ps-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8190a0;
}

#ps-studio .ps-mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#ps-studio .ps-mini-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 46px;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 2px 10px;
  border-radius: 7px;
  transition: background-color .2s;
}

#ps-studio .ps-mini-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background-color .2s;
}

#ps-studio .ps-mini-row.ps-def {
  background: var(--ps-blue-soft);
}

#ps-studio .ps-mini-row.ps-def::before {
  background: var(--ps-blue);
}

#ps-studio .ps-mini-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ps-ink-2);
  white-space: nowrap;
}

#ps-studio .ps-mini-row.ps-def .ps-mini-label {
  color: var(--ps-ink);
  font-weight: 500;
}

#ps-studio .ps-def-dot {
  display: none;
}

#ps-studio .ps-mini .ps-input {
  width: 100%;
  height: 29px;
}

#ps-studio .ps-mini-row.ps-def .ps-input {
  border-color: rgba(10, 135, 237, .35);
}

#ps-studio .ps-mini-unit {
  font-size: 11.5px;
  color: var(--ps-muted);
  white-space: nowrap;
}

#ps-studio .ps-derived {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

/* =====================================================================================
   Point cards: inputs and outputs
   The input cells (typed in place) of the point cards, the mix card and the add point form
   (studio.js: pointInputs, mixEditor, pointFormEl).
   ===================================================================================== */
#ps-studio .ps-io-headacts {
  display: flex;
  align-items: center;
  gap: 4px;
}

#ps-studio .ps-io-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#ps-studio .ps-io-k {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ps-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-io-u {
  flex: 0 0 auto;
  margin-left: 3px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ps-muted);
  white-space: nowrap;
}

/* input cells: tinted, bordered, typed in place */
#ps-studio .ps-io-incell {
  padding: 3px 8px 2px;
  border: 1px solid rgba(10, 135, 237, .3);
  border-radius: 8px;
  background: rgba(10, 135, 237, .05);
  cursor: text;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

#ps-studio .ps-io-incell:hover {
  border-color: rgba(10, 135, 237, .55);
}

#ps-studio .ps-io-incell .ps-io-k {
  color: var(--ps-blue-dark);
  font-weight: 500;
}

#ps-studio .ps-io-field {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

#ps-studio input.ps-io-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--ps-ink);
}

#ps-studio input.ps-io-input:hover,
#ps-studio input.ps-io-input:focus {
  border: 0;
  box-shadow: none;
}

#ps-studio .ps-io-incell:focus-within {
  border-color: var(--ps-blue);
  border-style: solid;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 135, 237, .16);
}

#ps-studio .ps-io-cell:has(input.ps-invalid) {
  border-color: #e05252;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, .14);
}

/* invalid / fog points: the reason replaces the outputs */
#ps-studio .ps-io-status {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--ps-bad-bg);
  color: var(--ps-bad);
  font-size: 11.5px;
  line-height: 1.35;
}

#ps-studio .ps-io-status .ps-ic {
  flex: 0 0 auto;
  font-size: 15px;
}

#ps-studio .ps-io-status.ps-io-fog {
  background: #fff6e5;
  color: #86560a;
}

/* point editor (selected card) */
#ps-studio .ps-io-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

#ps-studio .ps-io-edit-row > select {
  width: 100%;
  min-width: 0;
  height: 34px;
  font-weight: 500;
}

#ps-studio .ps-io-inline {
  justify-content: center;
  height: 34px;
  padding: 0 9px;
}

#ps-studio .ps-io-inline input.ps-io-input {
  font-size: 14px;
}

/* add point form */
#ps-studio .ps-io-form > .ps-subhead {
  margin: 2px 0 -4px;
}

#ps-studio .ps-io-form > .ps-subhead:first-child {
  margin-top: 0;
}

#ps-studio .ps-io-form > .ps-io-edit-row {
  margin-bottom: 0;
}

#ps-studio .ps-io-note {
  font-size: 11.5px;
  color: var(--ps-muted);
}

/* ---------- form controls ---------- */
#ps-studio .ps-form-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#ps-studio .ps-field {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 30px;
}

#ps-studio .ps-field-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

/* a stacked segmented control (Label position) spans the row, buttons sharing it evenly */
#ps-studio .ps-field-stack > .ps-field-ctl > .ps-seg {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

#ps-studio .ps-field-stack > .ps-field-ctl > .ps-seg > .ps-seg-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 6px;
}

#ps-studio .ps-field-label {
  font-size: 12px;
  color: #5b6b7b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-field-ctl {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#ps-studio .ps-field-ctl > .ps-input,
#ps-studio .ps-field-ctl > select {
  width: 100%;
  min-width: 0;
}

#ps-studio .ps-field-hint {
  font-size: 11.5px;
  color: var(--ps-muted);
}

#ps-studio .ps-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#ps-studio .ps-inline .ps-input {
  width: 108px;
  min-width: 0;
}

#ps-studio .ps-unit {
  font-size: 12px;
  color: var(--ps-muted);
  white-space: nowrap;
}

#ps-studio .ps-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--ps-bad-bg);
  color: var(--ps-bad);
  font-size: 12px;
  line-height: 1.35;
  animation: ps-fade-in .15s ease;
}

#ps-studio .ps-field-error .ps-ic,
#ps-studio .ps-banner .ps-ic {
  font-size: 16px;
  margin-top: -1px;
}

#ps-studio .ps-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}

#ps-studio .ps-banner-bad {
  background: var(--ps-bad-bg);
  color: var(--ps-bad);
}

#ps-studio .ps-banner-warn {
  background: #fff6e5;
  border: 1px solid #f4dba6;
  color: #86560a;
}

#ps-studio .ps-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: #eff2f5;
  max-width: 100%;
}

#ps-studio .ps-seg-btn {
  height: 26px;
  min-width: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #5b6b7b;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

#ps-studio .ps-seg-btn:hover {
  color: var(--ps-ink);
}

#ps-studio .ps-seg-btn.ps-on {
  background: #fff;
  color: var(--ps-blue);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .14);
}

#ps-studio .ps-seg-icons .ps-seg-btn {
  padding: 0 6px;
}

#ps-studio .ps-seg-btn .ps-line-sample {
  width: 26px;
}

#ps-studio .ps-seg-btn .ps-glyph * {
  transition: fill .15s, stroke .15s;
}

#ps-studio .ps-seg-btn.ps-on .ps-glyph circle,
#ps-studio .ps-seg-btn.ps-on .ps-glyph rect,
#ps-studio .ps-seg-btn.ps-on .ps-glyph polygon,
#ps-studio .ps-seg-btn.ps-on .ps-line-sample polygon {
  fill: var(--ps-blue);
}

#ps-studio .ps-seg-btn.ps-on .ps-glyph path,
#ps-studio .ps-seg-btn.ps-on .ps-line-sample line {
  stroke: var(--ps-blue);
}

#ps-studio .ps-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 2px;
}

#ps-studio .ps-swatch {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  transition: transform .12s, box-shadow .12s;
}

#ps-studio .ps-swatch:hover {
  transform: scale(1.12);
}

#ps-studio .ps-swatch.ps-on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw);
}

#ps-studio .ps-swatch-custom {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: conic-gradient(#e4572e, #d98c1f, #f2d13b, #2e7d32, #17a398, #0a87ed, #8e44ad, #d81b60, #e4572e);
}

#ps-studio .ps-swatch-custom.ps-on {
  background: var(--sw);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw);
}

#ps-studio .ps-swatch-custom .ps-ic {
  font-size: 12px;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, .6);
  pointer-events: none;
}

#ps-studio input.ps-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

#ps-studio .ps-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  min-height: 24px;
}

#ps-studio input.ps-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

#ps-studio .ps-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: #cfd7de;
  transition: background-color .18s;
}

#ps-studio .ps-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .18s cubic-bezier(.3, .7, .4, 1);
}

#ps-studio .ps-switch-input:checked + .ps-switch-track {
  background: var(--ps-blue);
}

#ps-studio .ps-switch-input:checked + .ps-switch-track .ps-switch-thumb {
  transform: translateX(12px);
}

#ps-studio .ps-switch-input:focus-visible + .ps-switch-track {
  box-shadow: var(--ps-focus);
}

#ps-studio .ps-switch-input:disabled + .ps-switch-track {
  opacity: .5;
}

#ps-studio .ps-switch-label {
  font-size: 12.5px;
  color: var(--ps-ink-2);
}

#ps-studio .ps-range-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#ps-studio input.ps-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ps-blue) var(--pct, 50%), #dde3e8 var(--pct, 50%));
  cursor: pointer;
}

#ps-studio input.ps-range:focus {
  box-shadow: none;
}

#ps-studio input.ps-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ps-blue);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .12s;
}

#ps-studio input.ps-range:active::-webkit-slider-thumb,
#ps-studio input.ps-range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(10, 135, 237, .18);
}

#ps-studio input.ps-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ps-blue);
}

#ps-studio .ps-range-val {
  min-width: 38px;
  font-size: 12px;
  color: var(--ps-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#ps-studio .ps-actions,
#ps-studio .ps-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#ps-studio .ps-actions {
  margin-top: 12px;
}

#ps-studio .ps-form-actions {
  justify-content: flex-end;
}

/* forms (add point / new line / mix / coil) */
#ps-studio .ps-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(10, 135, 237, .24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 135, 237, .055), rgba(10, 135, 237, .012));
  animation: ps-expand .18s ease;
}

#ps-studio .ps-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 46px;
  align-items: center;
  gap: 6px;
}

#ps-studio .ps-pair > select,
#ps-studio .ps-pair > .ps-input {
  width: 100%;
  min-width: 0;
}

#ps-studio .ps-pair-sm {
  grid-template-columns: minmax(0, 1fr) auto;
}

#ps-studio .ps-pair-sm > select {
  grid-column: 1 / -1;
}

#ps-studio .ps-fromto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  margin-top: 8px;
}

#ps-studio .ps-fromto-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#ps-studio .ps-fromto-col select {
  width: 100%;
}

#ps-studio .ps-swap {
  margin-bottom: 1px;
}

#ps-studio .ps-stream {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 82px auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

#ps-studio .ps-stream > select,
#ps-studio .ps-stream > .ps-input {
  width: 100%;
  min-width: 0;
}

/* New mix: the two stream pickers alone */
#ps-studio .ps-stream-plain {
  grid-template-columns: minmax(0, 1fr);
}

/* mix card: a dot in the stream's color beside its picker (no A / B) */
#ps-studio .ps-stream-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sw, #9aa6b2);
}

/* mix editor: stream A and B side by side, merging (bands sized by airflow share) into the total */
#ps-studio .ps-mix-streams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#ps-studio .ps-mix-stream {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#ps-studio .ps-mix-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#ps-studio .ps-mix-pick > .ps-stream-badge {
  flex: 0 0 auto;
}

#ps-studio .ps-mix-pick > select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

#ps-studio .ps-mix-nums {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 6px;
}

#ps-studio .ps-mix-share input.ps-io-input {
  font-size: 15px;
  font-weight: 700;
}

#ps-studio .ps-mix-share .ps-io-u {
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-ink-2);
}

#ps-studio .ps-mix-merge {
  display: block;
  width: 100%;
  height: 50px;
  margin: 6px 0 4px;
}

#ps-studio .ps-mix-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#ps-studio .ps-mix-to {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 50%;
  font-weight: 600;
}

#ps-studio .ps-mix-gl {
  display: inline-flex;
  flex: 0 0 auto;
}

#ps-studio .ps-mix-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#ps-studio .ps-mix-total {
  flex: 0 1 132px;
  min-width: 104px;
}

#ps-studio .ps-mix-total input.ps-io-input {
  font-size: 15px;
  font-weight: 700;
}

#ps-studio .ps-mix-edit > .ps-field-error {
  margin-top: 8px;
}

/* the flow basis, a section's gap under the total */
#ps-studio .ps-mix-opts {
  gap: 10px;
  margin-top: 14px;
}

#ps-studio .ps-mix-mass {
  margin: 8px 0 2px;
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* collapsed mix card: the airflow split as one bar, then the total, under the card header */
#ps-studio .ps-card-mixsum {
  padding: 0 10px 8px 40px;
}

#ps-studio .ps-mix-sum {
  display: flex;
  align-items: center;
  gap: 8px;
}

#ps-studio .ps-mix-bar {
  flex: 1 1 auto;
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: #eef1f4;
}

#ps-studio .ps-mix-bar span {
  height: 100%;
  transition: width .3s ease;
}

#ps-studio .ps-mix-bar-total {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--ps-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- lines: output, cooling coil, new-state fields ---------- */
#ps-studio .ps-metrics-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

#ps-studio .ps-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  line-height: 1;
  background: #eef1f4;
  color: #3b4d5f;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

#ps-studio .ps-chip-type {
  background: var(--ps-blue-soft2);
  color: var(--ps-blue-dark);
}

#ps-studio .ps-chip-cool {
  background: rgba(23, 163, 152, .13);
  color: #0e746c;
}

#ps-studio .ps-chip-heat {
  background: rgba(228, 87, 46, .13);
  color: #b3421f;
}

#ps-studio .ps-chip-bad {
  background: var(--ps-bad-bg);
  color: var(--ps-bad);
}

#ps-studio .ps-metrics-note {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ps-muted);
}

/* OUTPUT and the process chip on one centred row, ruled off from the inputs above */
#ps-studio .ps-ln-output > .ps-metrics-head {
  justify-content: space-between;
  margin: 4px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ps-border-soft);
}

#ps-studio .ps-ln-output > .ps-metrics-head .ps-subhead {
  margin: 0;
  line-height: 1;
}

#ps-studio.ps-split .ps-ln-output > .ps-metrics-head {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* line card body and the New line form: one column on an even 10px rhythm (hidden error
   boxes drop out of the flow, so no doubled gaps) */
#ps-studio .ps-insp-cols {
  padding-top: 10px;
}

#ps-studio .ps-insp-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#ps-studio .ps-insp-col > .ps-form-grid,
#ps-studio .ps-form > .ps-form-grid {
  gap: 10px;
}

#ps-studio .ps-insp-col > .ps-fromto,
#ps-studio .ps-insp-col > .ps-check,
#ps-studio .ps-insp-col > .ps-field-error,
#ps-studio .ps-form > .ps-check {
  margin: 0;
}

#ps-studio .ps-ln-output > .ps-banner {
  margin-top: 8px;
}

#ps-studio .ps-out-key .ps-out-v {
  font-weight: 700;
}

#ps-studio .ps-ln-output .ps-out-k {
  flex: 0 0 auto;
}

#ps-studio .ps-ln-output .ps-out-v {
  flex: 0 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: right;
}

#ps-studio .ps-check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 10px 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ps-ink);
  cursor: pointer;
}

#ps-studio .ps-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ps-blue);
  cursor: pointer;
}

#ps-studio .ps-check-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ps-muted);
}

#ps-studio .ps-new-state {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 5px;
}

#ps-studio .ps-form > .ps-new-state {
  margin: 0 0 6px 28px;
}

#ps-studio .ps-fromto-new {
  align-items: start;
  margin-top: 0;
}

#ps-studio .ps-fromto-new > .ps-swap {
  margin-top: 21px;
}

/* ---------- chart tab ---------- */
#ps-studio .ps-section {
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ps-border-soft);
}

#ps-studio .ps-section:last-child {
  padding-bottom: 2px;
  margin-bottom: 0;
  border-bottom: 0;
}

#ps-studio .ps-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f7f8f;
}

#ps-studio .ps-section-title .ps-ic {
  font-size: 16px;
  color: #a3afbb;
}

#ps-studio .ps-section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#ps-studio .ps-range-grid {
  display: grid;
  gap: 8px;
}

/* [min] to [max] unit; the unit column is fixed so the DB and W inputs line up */
#ps-studio .ps-range-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#ps-studio .ps-range-pair .ps-input {
  width: 100%;
  min-width: 0;
}

#ps-studio .ps-range-to {
  font-size: 12px;
  color: var(--ps-muted);
}

#ps-studio .ps-fam {
  display: grid;
  grid-template-columns: auto 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

/* The family's color square on its row. */
#ps-studio .ps-fam-color {
  display: grid;
  place-items: center;
  width: 18px;
  height: 22px;
}

#ps-studio .ps-fam-color .ps-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

#ps-studio .ps-fam-name {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-fam-note {
  font-size: 11.5px;
  color: var(--ps-muted);
}

#ps-studio .ps-fam.ps-off .ps-fam-name,
#ps-studio .ps-fam.ps-off .ps-fam-color,
#ps-studio .ps-fam.ps-off .ps-step {
  opacity: .45;
}

#ps-studio .ps-step .ps-input,
#ps-studio input.ps-num-step {
  width: 64px;
}

#ps-studio .ps-step .ps-unit {
  min-width: 38px;
}

/* Settings > Other colors: background, saturation curve, axes and text as a swatch and its name, two columns */
#ps-studio .ps-color-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
}

#ps-studio .ps-color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 2px 6px 2px 2px;
  border-radius: 6px;
  cursor: pointer;
}

#ps-studio .ps-color-item:hover {
  background: var(--ps-hover);
}

/* A color swatch: a solid square in the color, with the native <input type=color> invisible on top of it
   so a click still opens the browser's picker. */
#ps-studio .ps-swatch {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  cursor: pointer;
}

#ps-studio .ps-swatch-fill {
  position: absolute;
  inset: 0;
}

#ps-studio input.ps-color-swatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

#ps-studio .ps-swatch:focus-within {
  box-shadow: var(--ps-focus);
}

#ps-studio .ps-color-name {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a color changed from the built-in style */
#ps-studio .ps-color-custom .ps-color-name {
  font-weight: 600;
}

/* ---------- empty notes ---------- */
#ps-studio .ps-empty-note {
  padding: 22px 14px;
  text-align: center;
  border: 1px dashed #d3dbe2;
  border-radius: 12px;
  background: #fbfcfd;
}

#ps-studio .ps-empty-ic {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef3f8;
  color: #7a90a5;
}

#ps-studio .ps-empty-ic .ps-ic {
  font-size: 22px;
}

/* =====================================================================================
   Item cards (Points, Lines, Mix and Coils; studio.js: pointCard, lineCard, coilCard and the
   card helpers). Header: style swatch (opens a flyout), inline label, eye, expand arrows, "..."
   menu. Body: INPUT and OUTPUT (points, mixes), end points, results and airflow (lines, coils).
   ===================================================================================== */
#ps-studio .ps-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 5px 4px 5px 6px;
  border-radius: 10px;
  cursor: pointer;
}

#ps-studio .ps-card-head:hover {
  background: #f9fbfc;
}

#ps-studio .ps-card-swatch {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f3f5f8;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}

#ps-studio .ps-card-swatch:hover,
#ps-studio .ps-card-swatch[aria-expanded="true"] {
  background: #fff;
  border-color: #cdd5dc;
  box-shadow: var(--ps-shadow-sm);
}

#ps-studio .ps-card-swatch:focus-visible {
  box-shadow: var(--ps-focus);
}

#ps-studio .ps-card-swatch-wide {
  width: 44px;
}

#ps-studio .ps-card-swatch-wide .ps-line-sample {
  width: 34px;
}

#ps-studio .ps-card-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

#ps-studio .ps-inline-label {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 72%;
  display: flex;
}

#ps-studio .ps-inline-label-btn {
  min-width: 0;
  max-width: 100%;
  height: 26px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ps-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}

#ps-studio .ps-inline-label-btn:hover {
  border-color: var(--ps-border);
  background: #fff;
}

#ps-studio .ps-inline-label-empty {
  color: var(--ps-muted);
  font-weight: 400;
}

#ps-studio input.ps-inline-label-input {
  width: 170px;
  max-width: 100%;
  height: 26px;
  padding: 0 5px;
  font-size: 13px;
  font-weight: 500;
}

#ps-studio .ps-card-sum {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--ps-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-card-sum.ps-bad-text {
  color: var(--ps-bad);
}

#ps-studio .ps-card-sum.ps-warn-text {
  color: #9a6200;
}

#ps-studio .ps-item.ps-hidden > .ps-card-head .ps-card-title,
#ps-studio .ps-item.ps-hidden > .ps-card-head .ps-card-swatch {
  opacity: .5;
}

#ps-studio .ps-card-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--ps-border-soft);
  background: linear-gradient(#fbfcfd, #fff 60px);
  border-radius: 0 0 10px 10px;
  animation: ps-expand .18s ease;
}

#ps-studio .ps-card > .ps-inspector {
  border-top-color: var(--ps-border-soft);
}

#ps-studio .ps-card-body .ps-io-edit-row,
#ps-studio .ps-io-form > .ps-io-edit-row {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

#ps-studio .ps-card-body .ps-io-edit-row {
  margin-bottom: 6px;
}

#ps-studio .ps-card-body .ps-io-status {
  margin-bottom: 4px;
}

/* OUTPUT: one property per row, fixed order, inputs marked */
#ps-studio .ps-out {
  display: flex;
  flex-direction: column;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f5f7f9;
}

#ps-studio .ps-out-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 12.5px;
  line-height: 1.35;
}

#ps-studio .ps-out-row + .ps-out-row {
  border-top: 1px solid #e9edf1;
}

#ps-studio .ps-out-k {
  min-width: 0;
  color: var(--ps-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-out-v {
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--ps-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#ps-studio .ps-out-in .ps-out-k {
  color: var(--ps-blue-dark);
  font-weight: 500;
}

#ps-studio .ps-out-in .ps-out-v {
  color: var(--ps-blue-dark);
  font-weight: 600;
}

#ps-studio .ps-io-form > .ps-out {
  background: rgba(255, 255, 255, .75);
}

/* Calculator grid (studio.js calcGrid): label | input | output per property, like the
   Psychrometric Calculator. The two rows in use are .ps-calc-on; typed rows that are not used
   (Add point, more than two typed) are .ps-calc-ignored; the four extra rows hide behind the
   More info toggle. */
#ps-studio .ps-calc {
  display: flex;
  flex-direction: column;
  padding: 2px 8px 4px;
  border-radius: 8px;
  background: #f5f7f9;
}

#ps-studio .ps-io-form > .ps-calc {
  background: rgba(255, 255, 255, .75);
}

#ps-studio .ps-calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  align-items: center;
  justify-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 2px 0;
  font-size: 12.5px;
  line-height: 1.3;
}

#ps-studio .ps-calc-row[hidden] {
  display: none;
}

#ps-studio .ps-calc-row + .ps-calc-row {
  border-top: 1px solid #e9edf1;
}

#ps-studio .ps-calc-headrow {
  min-height: 0;
  padding: 4px 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8190a0;
}

#ps-studio .ps-calc-headrow > span {
  text-align: center;
}

/* Name and unit on one line, centred in the column; the name is always spelled out (never
   clipped) and the unit drops under it when the column is too narrow for both. */
#ps-studio .ps-calc-k {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 4px;
  row-gap: 0;
  min-width: 0;
  max-width: 100%;
  color: var(--ps-ink-2);
  text-align: center;
  white-space: nowrap;
  cursor: default;
}

#ps-studio .ps-calc-name {
  min-width: 0;
}

#ps-studio label.ps-calc-k {
  cursor: text;
}

#ps-studio .ps-calc-u {
  flex: none;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ps-muted);
}

#ps-studio .ps-calc-cell {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

#ps-studio input.ps-calc-input {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 4px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ps-ink);
}

#ps-studio input.ps-calc-input:hover {
  border-color: rgba(10, 135, 237, .55);
}

#ps-studio input.ps-calc-input:focus {
  border-color: var(--ps-blue);
  box-shadow: 0 0 0 3px rgba(10, 135, 237, .16);
  outline: none;
}

#ps-studio input.ps-calc-input.ps-invalid {
  border-color: #e05252;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, .14);
}

#ps-studio .ps-calc-on .ps-calc-k {
  color: var(--ps-blue-dark);
  font-weight: 600;
}

#ps-studio .ps-calc-on input.ps-calc-input {
  border-color: rgba(10, 135, 237, .55);
  background: #fff;
  color: var(--ps-blue-dark);
  font-weight: 600;
}

#ps-studio .ps-calc-ignored input.ps-calc-input {
  color: var(--ps-faint);
  text-decoration: line-through;
}

/* Output: gray box, same size as the input, like the duct calculator's output cells. */
#ps-studio .ps-calc-v {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 26px;
  padding: 0 4px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background: #ede9e9;
  font-size: 13px;
  font-weight: 500;
  color: #020905;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ps-studio .ps-calc-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  margin: 4px 0 0 -4px;
  padding: 3px 6px 3px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-blue-dark);
  cursor: pointer;
}

#ps-studio .ps-calc-more:hover {
  background: var(--ps-blue-soft);
}

#ps-studio .ps-calc-more:focus-visible {
  outline: none;
  box-shadow: var(--ps-focus);
}

#ps-studio .ps-calc-more .ps-ic {
  font-size: 18px;
}

#ps-studio .ps-calc-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--ps-blue-soft);
  color: var(--ps-blue-dark);
  font-size: 11.5px;
  line-height: 1.35;
}

#ps-studio .ps-calc-note[hidden] {
  display: none;
}

#ps-studio .ps-calc-note .ps-ic {
  flex: 0 0 auto;
  font-size: 15px;
}

#ps-studio .ps-card-body > .ps-calc + .ps-field-error {
  margin-top: 6px;
}

/* Add point: the cue in the card and on the chart while the next click places the point */
#ps-studio .ps-place-cue {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(10, 135, 237, .08);
  color: var(--ps-blue-dark);
  font-size: 12px;
  line-height: 1.35;
}

#ps-studio .ps-place-cue .ps-ic {
  flex: 0 0 auto;
  font-size: 17px;
}

#ps-studio .ps-chart-wrap.ps-placing .ps-svg,
#ps-studio .ps-chart-wrap.ps-placing .ps-svg [data-ps-kind] {
  cursor: crosshair;
}

#ps-studio .ps-chart-wrap.ps-placing {
  outline: 2px solid rgba(10, 135, 237, .35);
  outline-offset: -2px;
}

/* Flyout: a small popover anchored to a card control (the style swatch) */
#ps-studio .ps-flyout {
  position: fixed;
  z-index: 1150;
  width: 292px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 11px;
  box-shadow: var(--ps-shadow-lg);
  animation: ps-menu-in .12s ease;
}

#ps-studio .ps-flyout .ps-field {
  grid-template-columns: 70px minmax(0, 1fr);
}

#ps-studio .ps-flyout .ps-field-stack {
  grid-template-columns: minmax(0, 1fr);
}

#ps-studio .ps-flyout .ps-select {
  width: 100%;
}

/* ---------- menus ---------- */
#ps-studio .ps-menu {
  position: fixed;
  z-index: 1150;
  min-width: 210px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 11px;
  box-shadow: var(--ps-shadow-lg);
  animation: ps-menu-in .12s ease;
}

#ps-studio .ps-menu-item {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ps-ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

#ps-studio .ps-menu-item .ps-ic {
  font-size: 18px;
  color: #7b8a99;
}

#ps-studio .ps-menu-item:hover:not(:disabled),
#ps-studio .ps-menu-item:focus-visible {
  background: #f0f4f8;
  box-shadow: none;
}

#ps-studio .ps-menu-item:disabled {
  opacity: .4;
  cursor: default;
}

#ps-studio .ps-menu-item.ps-danger,
#ps-studio .ps-menu-item.ps-danger .ps-ic {
  color: var(--ps-danger);
}

#ps-studio .ps-menu-item.ps-danger:hover:not(:disabled) {
  background: #fdf1f1;
}

#ps-studio .ps-menu-label {
  flex: 1 1 auto;
}

#ps-studio .ps-menu-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--ps-border-soft);
}

/* ---------- toasts ---------- */
#ps-studio .ps-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--ps-sheet-h, 0px));
  z-index: 1200;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

#ps-studio .ps-toast {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 11px;
  background: #1f2d3a;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .3);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}

#ps-studio .ps-toast.ps-in {
  opacity: 1;
  transform: none;
}

#ps-studio .ps-toast.ps-out {
  opacity: 0;
  transform: translateY(6px);
}

#ps-studio .ps-toast-ic {
  font-size: 18px;
  color: #7cc4ff;
}

#ps-studio .ps-toast-success .ps-toast-ic {
  color: #63d69d;
}

#ps-studio .ps-toast-error .ps-toast-ic {
  color: #ff8f8f;
}

#ps-studio .ps-toast-msg {
  min-width: 0;
}

#ps-studio .ps-toast-action {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7cc4ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

#ps-studio .ps-toast-action:hover {
  background: rgba(255, 255, 255, .08);
}

#ps-studio .ps-toast-x {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9fb0c1;
  cursor: pointer;
}

#ps-studio .ps-toast-x:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

#ps-studio .ps-toast-x .ps-ic {
  font-size: 16px;
}

/* ---------- dialogs ---------- */
#ps-studio .ps-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 24, 34, .5);
  opacity: 0;
  transition: opacity .18s ease;
}

#ps-studio .ps-backdrop.ps-in {
  opacity: 1;
}

#ps-studio .ps-dialog {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
  transform: translateY(10px) scale(.985);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}

#ps-studio .ps-backdrop.ps-in .ps-dialog {
  transform: none;
}

#ps-studio .ps-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--ps-border-soft);
}

#ps-studio .ps-dialog-title {
  font-size: 16px;
  font-weight: 500;
}

#ps-studio .ps-dialog-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ps-muted);
}

#ps-studio .ps-dialog-x {
  margin: -2px -2px 0 0;
}

#ps-studio .ps-dialog-text {
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.55;
  color: #3b4d5f;
}

#ps-studio .ps-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 12px 20px;
  border-top: 1px solid var(--ps-border-soft);
  background: #fafbfc;
}

/* export dialog */
#ps-studio .ps-dialog-export {
  max-width: 1180px;
  height: calc(100vh - 48px);
  max-height: 880px;
}

#ps-studio .ps-ex-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
}

#ps-studio .ps-ex-terms {
  margin: auto 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ps-muted);
}
#ps-studio .ps-ex-terms a {
  color: inherit;
  text-decoration: underline;
}
#ps-studio .ps-ex-form {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px 20px 20px;
  border-right: 1px solid var(--ps-border-soft);
}

#ps-studio .ps-ex-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#ps-studio .ps-ex-field .ps-input {
  width: 100%;
  height: 34px;
}

/* iOS draws a native date control that ignores height; drop its chrome so it matches the text inputs. */
#ps-studio .ps-ex-field input[type="date"].ps-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-height: 34px;
  line-height: 32px;
  text-align: left;
}

#ps-studio .ps-ex-field input[type="date"].ps-input::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

#ps-studio .ps-ex-field textarea.ps-input {
  height: auto;
  min-height: 92px;
  padding-bottom: 18px;
  resize: vertical;
  line-height: 1.45;
}

#ps-studio .ps-counter {
  position: absolute;
  right: 9px;
  bottom: 6px;
  font-size: 10.5px;
  color: #7b8a99;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

#ps-studio .ps-ex-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#ps-studio .ps-paper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#ps-studio .ps-paper {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--ps-border);
  border-radius: 9px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

#ps-studio .ps-paper:hover {
  border-color: #c9d2da;
}

#ps-studio .ps-paper.ps-on {
  border-color: var(--ps-blue);
  background: var(--ps-blue-soft);
  box-shadow: 0 0 0 3px rgba(10, 135, 237, .12);
}

#ps-studio .ps-paper-ic {
  grid-row: 1 / 3;
  justify-self: center;
  width: 24px;
  height: 18px;
  border: 1.5px solid #9aa6b2;
  border-radius: 2px;
  background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(0deg, transparent 0 4px, #e5e9ee 4px 5px);
}

#ps-studio .ps-paper-ic-letter { width: 22px; height: 17px; }
#ps-studio .ps-paper-ic-a4 { width: 23px; height: 16px; }
#ps-studio .ps-paper-ic-tabloid { width: 28px; height: 18px; }
#ps-studio .ps-paper-ic-a3 { width: 28px; height: 20px; }

#ps-studio .ps-paper.ps-on .ps-paper-ic {
  border-color: var(--ps-blue);
}

#ps-studio .ps-paper-name {
  font-size: 12.5px;
  font-weight: 500;
}

#ps-studio .ps-paper-size {
  font-size: 11px;
  color: var(--ps-muted);
}

#ps-studio .ps-ex-preview {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #eceff3;
}

#ps-studio .ps-ex-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 18px;
  font-size: 12px;
}

#ps-studio .ps-subhead-inline {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7b8a99;
}

#ps-studio .ps-pdf-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  margin: 0 18px 18px;
  overflow: hidden;
  border-radius: 10px;
  background: #dde3e9;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

#ps-studio .ps-pdf-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

#ps-studio .ps-pdf-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8391a0;
  font-size: 12.5px;
}

#ps-studio .ps-pdf-empty .ps-ic {
  font-size: 44px;
  color: #b4c0cb;
}

#ps-studio .ps-pdf-spin {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(236, 239, 243, .74);
  color: var(--ps-ink-2);
  font-size: 12.5px;
  animation: ps-fade-in .15s ease;
}

#ps-studio .ps-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(10, 135, 237, .18);
  border-top-color: var(--ps-blue);
  animation: ps-spin .8s linear infinite;
}

#ps-studio .ps-pdf-err {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  background: #fff;
  border: 1px solid #f2c5c5;
  border-radius: 10px;
  color: var(--ps-bad);
  font-size: 12.5px;
  box-shadow: var(--ps-shadow-md);
}

#ps-studio .ps-pdf-err > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#ps-studio .ps-pdf-err span {
  color: #6d3b3b;
}

#ps-studio .ps-ex-foot {
  flex-wrap: wrap;
}

#ps-studio .ps-ex-file {
  font-size: 12px;
  color: var(--ps-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* phones and tablets: the PDF's pages as images (PDF.js), a tap opens the file full screen */
#ps-studio .ps-ex-preview.ps-ex-paged {
  overflow: auto;
}

#ps-studio .ps-ex-paged .ps-pdf-stage {
  flex: 0 0 auto;
  min-height: 200px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

#ps-studio .ps-pdf-pages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#ps-studio .ps-pdf-page {
  position: relative;
  display: block;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 14px rgba(27, 39, 51, .10);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#ps-studio .ps-pdf-page:active {
  box-shadow: 0 0 0 3px rgba(10, 135, 237, .35);
}

#ps-studio .ps-pdf-page-img {
  display: block;
  width: 100%;
  height: auto;
}

#ps-studio .ps-pdf-page-no {
  margin: -6px 0 4px;
  font-size: 11px;
  color: var(--ps-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#ps-studio .ps-pdf-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  color: var(--ps-ink-2);
  font-size: 12.5px;
  text-align: center;
  text-decoration: none;
}

#ps-studio .ps-pdf-fallback .ps-ic {
  font-size: 40px;
  color: var(--ps-blue);
}

#ps-studio .ps-pdf-fallback span {
  color: var(--ps-muted);
}

#ps-studio .ps-ex-tap {
  margin: -4px 18px 10px;
  font-size: 11.5px;
  color: var(--ps-muted);
}

/* ---------- responsive ---------- */
#ps-studio.ps-split .ps-insp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
}

#ps-studio.ps-split .ps-pane[data-ps-tab="chart"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
}

#ps-studio.ps-split .ps-pane[data-ps-tab="chart"] .ps-section:nth-last-child(2) {
  border-bottom: 0;
  margin-bottom: 0;
}

/* toolbar text drops in priority order (set by fitToolbar) */
#ps-studio.ps-tb-c1 .ps-save .ps-save-text,
#ps-studio.ps-tb-c3 .ps-tb-actions .ps-tb-text,
#ps-studio.ps-tb-c5 .ps-tb-sep,
#ps-studio.ps-tb-c6 .ps-brand,
#ps-studio.ps-tb-c6 .ps-doc-sep,
#ps-studio.ps-tb-c7 .ps-export-btn .ps-tb-text {
  display: none;
}

/* no title: the group is the chart's name alone (if any), which takes what the row has left */
#ps-studio.ps-tb-c6 .ps-head-titles {
  flex-basis: 0;
  padding-left: 0;
}

#ps-studio.ps-tb-c7 .ps-export-btn {
  padding: 0 9px;
}

#ps-studio .ps-tb-break {
  display: none;
}

#ps-studio.ps-tb-2row .ps-tb-break {
  display: block;
  flex-basis: 100%;
  height: 0;
}

#ps-studio.ps-tb-c5 .ps-toolbar {
  gap: 4px;
}

#ps-studio.ps-narrow .ps-shell {
  padding: 12px;
}

#ps-studio.ps-tiny .ps-tb-actions .ps-tb-text {
  display: none;
}

#ps-studio.ps-narrow .ps-save .ps-save-text {
  display: none;
}

/* phones: the signed out pill is its icon alone (a tap on it signs in) */
#ps-studio.ps-tiny .ps-save-anon .ps-save-action {
  display: none;
}

#ps-studio.ps-tiny .ps-shell {
  padding: 10px;
}

#ps-studio.ps-tiny .ps-toolbar {
  gap: 4px;
}

#ps-studio.ps-tiny .ps-tb-sep {
  display: none;
}

#ps-studio.ps-tiny .ps-pane {
  padding: 10px;
}

#ps-studio.ps-tiny .ps-field {
  grid-template-columns: 76px minmax(0, 1fr);
}

#ps-studio.ps-tiny .ps-field-stack {
  grid-template-columns: minmax(0, 1fr);
}

#ps-studio.ps-tiny .ps-mode-hint {
  top: 6px;
  font-size: 11px;
}

@media (max-width: 760px) {
  #ps-studio .ps-backdrop {
    padding: 0;
    align-items: stretch;
  }
  #ps-studio .ps-dialog {
    max-height: 100%;
  }
  #ps-studio .ps-dialog-sm,
  #ps-studio .ps-dialog-keys {
    margin: auto 12px;
    max-height: calc(100% - 24px);
  }
  #ps-studio .ps-dialog-export {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  #ps-studio .ps-ex-body {
    display: block;
    overflow: auto;
  }
  #ps-studio .ps-ex-form {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--ps-border-soft);
  }
  #ps-studio .ps-ex-preview {
    height: 70vh;
    min-height: 360px;
  }
  /* phone: preview first and only as tall as its pages, fields below, one row of actions */
  #ps-studio .ps-ex-body-paged {
    display: flex;
    flex-direction: column;
  }
  #ps-studio .ps-ex-body-paged .ps-ex-form {
    flex: 0 0 auto;
    order: 2;
    border-bottom: 0;
    border-top: 1px solid var(--ps-border-soft);
  }
  #ps-studio .ps-ex-preview.ps-ex-paged {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
  }
  #ps-studio .ps-ex-paged .ps-ex-preview-head {
    padding: 10px 16px;
  }
  #ps-studio .ps-ex-paged .ps-pdf-stage {
    margin: 0 16px 16px;
  }
  #ps-studio .ps-ex-paged .ps-ex-tap {
    margin: -4px 16px 10px;
  }
  #ps-studio .ps-dialog-export .ps-dialog-sub {
    display: none;
  }
  #ps-studio .ps-ex-file {
    flex: 1 1 100%;
  }
  #ps-studio .ps-ex-foot .ps-tb-spacer {
    display: none;
  }
  #ps-studio .ps-ex-foot .ps-ex-cancel {
    display: none;
  }
  #ps-studio .ps-ex-foot {
    gap: 6px 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  #ps-studio .ps-ex-foot .ps-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
  }
  #ps-studio .ps-ex-foot .ps-btn-primary {
    flex-grow: 1.4;
  }
}

/* ---------- touch: direct manipulation on the chart ---------- */
/* while a zoom / pan gesture redraws the chart every frame, hide what is positioned over it */
#ps-studio .ps-gesturing .ps-popover:not(.ps-sheet),
#ps-studio .ps-gesturing .ps-tip,
#ps-studio .ps-gesturing .ps-ghost-chip,
#ps-studio .ps-gesturing .ps-mode-hint {
  visibility: hidden;
}

#ps-studio .ps-gesturing .ps-svg {
  cursor: grabbing;
}

/* frames between redraws only move the last drawing: keep that on the compositor */
#ps-studio .ps-gesturing .ps-stage {
  will-change: transform;
}

/* value pill that rides above the finger while dragging a point or reading values */
#ps-studio .ps-finger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 11px 7px;
  border-radius: 12px;
  background: rgba(27, 39, 51, .92);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--ps-shadow-md);
}

#ps-studio .ps-finger-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #dfe7ee;
}

#ps-studio .ps-finger-vals {
  display: flex;
  gap: 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

#ps-studio .ps-finger-k {
  margin-right: 3px;
  font-size: 11px;
  font-weight: 500;
  color: #9fb3c6;
}

#ps-studio .ps-finger-in {
  font-weight: 700;
}

/* halo around a lifted / dragged point (the finger hides the marker) */
#ps-studio .ps-lift-halo {
  fill: rgba(10, 135, 237, .13);
  stroke: rgba(10, 135, 237, .6);
  stroke-width: 1.5;
  animation: ps-fade-in .12s ease;
}

/* pending start point of a line */
#ps-studio .ps-line-start-ring {
  fill: rgba(10, 135, 237, .1);
  stroke: var(--ps-blue);
  stroke-width: 2;
  animation: ps-ring-pulse 1.1s ease-in-out infinite;
}

@keyframes ps-ring-pulse {
  0%, 100% { stroke-opacity: .95; stroke-width: 2.5; }
  50% { stroke-opacity: .3; stroke-width: 1; }
}

/* zoom chip (pinch / double tap / ctrl+wheel zoom) */
#ps-studio .ps-zoom-chip {
  position: absolute;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px 0 8px;
  border: 1px solid var(--ps-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--ps-ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--ps-shadow-md);
}

#ps-studio .ps-zoom-chip .ps-ic {
  font-size: 17px;
  color: var(--ps-blue);
}

#ps-studio .ps-zoom-x {
  padding-left: 6px;
  border-left: 1px solid var(--ps-border);
  color: var(--ps-blue);
}

/* desktop zoom buttons in the plot's bottom-right corner (they replace the zoom chip there) */
#ps-studio .ps-zoom-ctl {
  position: absolute;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 2px;
  border: 1px solid var(--ps-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--ps-shadow-sm);
  opacity: .8;
  transition: opacity .15s;
}

#ps-studio .ps-zoom-ctl:hover,
#ps-studio .ps-zoom-ctl:focus-within {
  opacity: 1;
  box-shadow: var(--ps-shadow-md);
}

/* Settings > "Scroll and pan to adjust range" off: no zoom buttons on the chart */
#ps-studio.ps-panzoom-off .ps-zoom-ctl,
#ps-studio:not(.ps-zoom-ctl-on) .ps-zoom-ctl,
#ps-studio.ps-zoom-ctl-on .ps-chart-wrap > .ps-zoom-chip {
  display: none;
}

#ps-studio .ps-zoom-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ps-ink);
  cursor: pointer;
}

#ps-studio .ps-zoom-btn .ps-ic {
  font-size: 18px;
}

#ps-studio .ps-zoom-btn:hover:not(:disabled) {
  background: var(--ps-hover);
  color: var(--ps-blue);
}

#ps-studio .ps-zoom-btn:focus-visible {
  outline: none;
  box-shadow: var(--ps-focus);
}

#ps-studio .ps-zoom-btn:disabled {
  opacity: .35;
  cursor: default;
}

#ps-studio .ps-zoom-level {
  min-width: 34px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ps-muted);
}

#ps-studio .ps-zoom-btn[data-ps-key="zoom-home"] {
  margin-left: 2px;
  border-left: 1px solid var(--ps-border-soft);
  border-radius: 0 6px 6px 0;
}

#ps-studio .ps-gesturing .ps-zoom-ctl {
  pointer-events: none;
}

#ps-studio .ps-menu-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* touch screens: no undo and redo buttons (the chart stays compact) */
#ps-studio.ps-touch:not(.ps-wide) .ps-toolbar .ps-tb-history,
#ps-studio.ps-touch:not(.ps-wide) .ps-toolbar .ps-tb-sep {
  display: none;
}

/* point sheet: the two inputs with nudge steppers */
#ps-studio .ps-pop-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

#ps-studio .ps-step-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  border-radius: 10px;
  background: var(--ps-blue-soft);
}

#ps-studio .ps-step-cell .ps-pop-k {
  padding-left: 3px;
}

#ps-studio .ps-step {
  display: flex;
  align-items: center;
  gap: 4px;
}

#ps-studio .ps-step-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--ps-border);
  border-radius: 9px;
  background: #fff;
  color: var(--ps-blue);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#ps-studio .ps-step-btn:active {
  background: var(--ps-blue-soft2);
}

#ps-studio .ps-step-v {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#ps-studio .ps-sheet-sub {
  margin: -4px 0 8px;
  color: var(--ps-muted);
}

#ps-studio .ps-popover.ps-pop-touch:not(.ps-sheet) {
  width: 360px;
}

#ps-studio .ps-item-sheet .ps-line-sample {
  flex: 0 0 auto;
}

/* ---------- touch screens: finger-sized controls (desktop mouse layout is unchanged) ---------- */
@media (pointer: coarse) {
  #ps-studio .ps-tb-btn,
  #ps-studio .ps-export-btn {
    height: 40px;
    min-width: 40px;
  }
  #ps-studio .ps-unit-btn {
    height: 36px;
    min-width: 40px;
  }
  #ps-studio .ps-tab {
    height: 44px;
  }
  #ps-studio .ps-btn {
    height: 40px;
  }
  #ps-studio .ps-btn-sm {
    height: 36px;
    padding: 0 12px;
  }
  #ps-studio .ps-icon-btn {
    width: 36px;
    height: 36px;
  }
  #ps-studio .ps-seg-btn {
    height: 34px;
    min-width: 36px;
  }
  #ps-studio .ps-seg-icons .ps-seg-btn {
    min-width: 38px;
  }
  #ps-studio .ps-swatches {
    gap: 12px;
    padding: 4px;
  }
  #ps-studio .ps-swatch {
    width: 28px;
    height: 28px;
  }
  /* invisible 40px hit area around each swatch without spreading the row further */
  #ps-studio .ps-swatch::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
  }
  #ps-studio .ps-swatch-custom .ps-ic {
    font-size: 15px;
  }
  /* 16px text stops iOS zooming into a field on focus */
  #ps-studio input.ps-input,
  #ps-studio select,
  #ps-studio .ps-input,
  #ps-studio textarea {
    font-size: 16px;
  }
  #ps-studio .ps-input,
  #ps-studio select {
    height: 40px;
  }
  /* calculator grid: input and output boxes the same size on touch, 16px text */
  #ps-studio input.ps-calc-input,
  #ps-studio .ps-calc-v {
    height: 34px;
    font-size: 16px;
  }
  #ps-studio .ps-switch {
    min-height: 40px;
  }
  #ps-studio input.ps-range {
    height: 6px;
    margin: 17px 0;
  }
  #ps-studio input.ps-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  #ps-studio input.ps-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
  #ps-studio .ps-menu-item {
    height: 44px;
    font-size: 14px;
  }
  /* wider invisible hit target for process lines (points use a touch slop in studio.js) */
  #ps-studio .ps-svg .ps-hit-line {
    stroke-width: 24px;
  }
}

/* ---------- phones ---------- */
@media (max-width: 560px) {
  /* Flat, edge-to-edge-ish studio: nested cards otherwise eat a fifth of the chart's width. */
  .psy-page > #ps-studio {
    max-width: calc(100% - 12px);
    margin: 14px 6px 24px;
  }
  #ps-studio.ps-tiny .ps-shell {
    padding: 10px 8px 8px;
  }
  #ps-studio.ps-tiny .ps-toolbar {
    padding: 4px;
    gap: 4px;
    margin-bottom: 8px;
  }
  /* two tidy rows: title and tools on top, actions below with Export and More on the right */
  #ps-studio.ps-tiny.ps-tb-2row .ps-units {
    margin-left: auto;
  }
  #ps-studio.ps-tiny .ps-body {
    gap: 8px;
  }
  #ps-studio.ps-tiny .ps-pane {
    padding: 10px 8px;
  }
  #ps-studio.ps-tiny .ps-tab {
    padding: 0 2px;
    gap: 3px;
  }
  #ps-studio .ps-menu {
    max-width: calc(100vw - 16px);
  }
}

/* ---------- motion ---------- */
@keyframes ps-spin {
  to { transform: rotate(360deg); }
}

@keyframes ps-sheet-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes ps-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ps-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes ps-expand {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

@keyframes ps-march {
  to { stroke-dashoffset: -11; }
}

@media (prefers-reduced-motion: reduce) {
  #ps-studio *,
  #ps-studio *::before,
  #ps-studio *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Read-only grid (a mixed point's OUTPUT): no Input column; laid out like the state point grid,
   the property centred in its column and the value in the same 64px box. */
#ps-studio .ps-calc-ro .ps-calc-row {
  grid-template-columns: minmax(0, 1fr) 64px;
}

#ps-studio .ps-calc-ro .ps-calc-more {
  margin-left: 0;
}

#ps-studio .ps-calc-xrows {
  display: contents;
}

#ps-studio .ps-calc-xrows[hidden] {
  display: none;
}

#ps-studio .ps-calc-xrow {
  border-top: 1px solid #e9edf1;
}

/* the mixing rows carry longer values ("35,090 lb/h · 80.8%"): one wider box between them */
#ps-studio .ps-calc-ro .ps-calc-xrow {
  grid-template-columns: minmax(0, 1fr) auto;
}

#ps-studio .ps-calc-ro .ps-calc-xrow .ps-calc-v {
  width: auto;
  min-width: 132px;
  padding: 0 8px;
}