/* ═══ Foldable panes (panes.js) ═════════════════════════════════════════════════════════════
   A card that folds: the bar is the handle (pointer, a faint hover), a round chevron sits at its right
   (up = open, down = folded, like "Adjust your goal"), and the title's dash turns into a ">" while
   folded. Folded, only the bar shows. Tokens only; the palette editor drives the colors. */
.cpane.pn > .cpane__bar { position: relative; padding-right: 46px !important; cursor: pointer; }   /* views set bar padding with ids; the chevron needs its room */
.cpane.pn > .cpane__bar:hover { background-color: color-mix(in srgb, var(--text) 3%, transparent); }
.pn-tg {
  position: absolute; right: 10px; top: min(50%, 26px); width: 28px;   /* a bar that wraps keeps it on its first line */
  height: 28px; margin-top: -14px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--soft-line, var(--border)); border-radius: 999px;
  background: var(--surface-2, transparent); color: var(--text-2); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pn-tg:hover, .cpane.pn > .cpane__bar:hover .pn-tg { color: var(--text); border-color: var(--border-hover, var(--soft-line, var(--border))); }
.pn-tg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-tg__c {
  width: 7px; height: 7px; margin-top: 3px; border: solid currentColor; border-width: 2px 2px 0 0;
  transform: rotate(-45deg); transition: transform .2s ease, margin .2s ease;
}
.cpane.pn.is-folded .pn-tg__c { transform: rotate(135deg); margin-top: -3px; }

/* the title's dash (cockpit.css .cpane__title::before) drawn with borders, so it can bend into a ">" */
.cpane.pn > .cpane__bar .cpane__title::before {
  width: 13px; height: 0; border-radius: 1px; background: transparent; opacity: .85;
  border: 0 solid var(--accent); border-top-width: 2px;
  transition: width .2s ease, height .2s ease, border-right-width .2s ease, transform .2s ease, margin .2s ease;
}
.cpane.pn.is-folded > .cpane__bar .cpane__title::before {
  width: 6px; height: 6px; margin: 0 5px 0 0; border-right-width: 2px; transform: rotate(45deg);
}

/* folded: only the bar */
.cpane.pn.is-folded > :not(.cpane__bar) { display: none !important; }
.cpane.pn.is-folded { min-height: 0 !important; height: auto !important; }
.cpane.pn.is-folded.pn--inrow { align-self: start; }   /* beside another card (grid or flex row): don't stretch to its height */
.cpane.pn.is-folded > .cpane__bar { border-bottom-color: transparent; }

/* the one-line summary a folded card may show beside its title (panes.js CEFPanes.summary); views style its type */
.pn-sum { display: none; }
.pn.is-folded .pn-sum { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body[data-text-size="large"] .pn-tg { width: 30px; height: 30px; margin-top: -15px; }
body[data-text-size="xlarge"] .pn-tg { width: 32px; height: 32px; margin-top: -16px; }
@media (max-width: 640px) { .cpane.pn > .cpane__bar { padding-right: 44px !important; } .pn-tg { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .pn-tg__c, .cpane.pn > .cpane__bar .cpane__title::before { transition: none; } }
@media print { .pn-tg { display: none; } .cpane.pn.is-folded > :not(.cpane__bar) { display: revert !important; } }