/* Compose Plot primitives; do not redefine its colors, type or controls. */
.hard-library { grid-template-columns: 180px minmax(0, 1fr); max-width: 1160px; gap: var(--s-7); padding-block: var(--s-6); }
.hard-library-main { min-width: 0; }
.hard-library-main h1 { font-size: clamp(2rem, 3.2vw, 3.5rem); line-height: 1.08; }
.hard-library-main :is(section, details), .hard-setup { scroll-margin-top: 90px; }
.hard-setup { position: sticky; top: 88px; align-self: start; max-height: calc(100dvh - 110px); overflow: auto; padding: var(--s-4); min-width: 0; }
.hard-setup .button { width: 100%; white-space: normal; text-align: center; }
.hard-setup-part { padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.hard-detail { border-top: 1px solid var(--hairline); padding-block: var(--s-3); }
.hard-detail summary { cursor: pointer; line-height: 1.5; }
.hard-detail[open] > :not(summary) { margin-top: var(--s-3); }
.hard-detail .code-block { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; }
.hard-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto; gap: var(--s-3); align-items: end; margin-block: var(--s-4); }
.hard-search .input { width: 100%; min-width: 0; }
.hard-rule { border-top: 1px solid var(--hairline); padding: var(--s-4) 0; }
.hard-rule summary { cursor: pointer; display: list-item; }
.hard-rule summary .tag { margin-right: var(--s-2); }
.hard-rule[open] { padding-bottom: var(--s-5); }
.hard-rule:target { outline: 2px solid var(--color-action); outline-offset: 5px; }
.hard-rule-content { padding-top: var(--s-4); }
.hard-rule dl { display: grid; gap: var(--s-3); }
.hard-rule dt { font-weight: 600; }
.hard-rule dd { margin: 0; }
.hard-steps { padding-left: 1.3em; }
.hard-steps li + li { margin-top: var(--s-3); }
.hard-table-wrap { overflow-x: auto; }
.hard-table { width: 100%; border-collapse: collapse; }
.hard-table :is(th, td) { text-align: left; vertical-align: top; padding: var(--s-3); border-bottom: 1px solid var(--hairline); overflow-wrap: anywhere; }
.hard-mobile-nav { display: none; flex-wrap: wrap; gap: var(--s-3); }
.hard-mobile-nav .link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-2); }
.hard-review { width: calc(100vw - 40px); max-width: 1480px; height: calc(100dvh - 40px); max-height: none; margin: auto; padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-3); }
.hard-review::backdrop { background: rgb(0 0 0 / .65); }
.hard-review[open] { display: flex; flex-direction: column; overflow: hidden; }
.hard-review .hard-workspace-body { flex: 1; min-height: 0; }
.hard-review :is(.hard-workspace-input, .hard-workspace-output) { overflow-y: auto; }
.hard-review :is(.hard-workspace-input, .hard-workspace-output) > * { flex-shrink: 0; }
.hard-review .hard-workspace-bar { flex-shrink: 0; }
.hard-local main { height: 100dvh; display: flex; flex-direction: column; }
.hard-local .hard-workspace-bar { flex-shrink: 0; }
.hard-local .hard-workspace-body { flex: 1; min-height: 0; }
.hard-local :is(.hard-workspace-input, .hard-workspace-output) { overflow-y: auto; }
.hard-local :is(.hard-workspace-input, .hard-workspace-output) > * { flex-shrink: 0; }
.page-research :is(#attribution, #limitations) > .o-section-inner { display: flex; flex-direction: column; gap: var(--s-3); }
.hard-workspace-bar { display: flex; gap: var(--s-4); justify-content: space-between; align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--hairline); }
.hard-workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.hard-workspace-input, .hard-workspace-output { min-width: 0; padding: var(--s-5); }
.hard-workspace-output { border-left: 1px solid var(--hairline); background: var(--bg-tinted); }
.hard-workspace-body .m-field { display: grid; gap: var(--s-2); }
.hard-workspace-body .input { width: 100%; }
.hard-workspace-body textarea { resize: vertical; min-height: 100px; }
.hard-workspace-body .code-block { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; }
.hard-consent { display: flex; gap: var(--s-3); align-items: flex-start; }
.hard-consent input { margin-top: 4px; flex-shrink: 0; }
.hard-workspace-body .button:disabled { opacity: .5; cursor: not-allowed; }
.hard-result { padding: var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-2); background: var(--surface); }
.hard-result p + p { margin-top: var(--s-2); }
.hard-workspace-body [hidden], .hard-library [hidden] { display: none !important; }
.hard-library code, .hard-workspace-body code { overflow-wrap: anywhere; }
@media (max-width: 1199px) {
 .hard-library { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
 .hard-library > .ds-toc { display: none; }
 .hard-mobile-nav { display: flex; }
}
@media (max-width: 760px) {
 .hard-library { display: flex; flex-direction: column; padding-inline: var(--s-4); }
 .hard-library-main { display: block; width: 100%; }
 .hard-library-main > section { width: 100%; }
 .hard-library-main > #overview { order: 0; }
 .hard-setup { order: -2; position: static; max-height: none; width: 100%; }
 .hard-search { grid-template-columns: 1fr; }
 .hard-workspace-body { grid-template-columns: 1fr; }
 .hard-workspace-output { border-left: 0; border-top: 1px solid var(--hairline); }
 .hard-review { width: 100%; height: 100dvh; border-radius: 0; }
 .hard-review .hard-workspace-body { overflow-y: auto; display: block; }
 .hard-review :is(.hard-workspace-input, .hard-workspace-output) { overflow-y: visible; }
 .hard-local main { height: auto; }
 .hard-local .hard-workspace-body { display: block; }
 .hard-local :is(.hard-workspace-input, .hard-workspace-output) { overflow-y: visible; }
 .hard-workspace-bar { padding: var(--s-3); }
 .hard-workspace-bar h2 { font-size: 1rem; }
 .hard-workspace-input, .hard-workspace-output { padding: var(--s-4); }
}
@media print { .hard-library { display: block; } .hard-setup, .hard-library .ds-toc, .hard-search { display: none; } }

.hard-library-main > #overview { padding-bottom: var(--s-5); border-bottom: 1px solid var(--hairline); }
.hard-library-main > #rules { padding-top: var(--s-5); }
.hard-library-main > #rules .ds-section-head { margin-bottom: var(--s-3); }
.hard-copy-status:empty { margin: 0; height: 0; }
.research-install .hard-detail { padding-block: var(--s-2); }
.hard-library :is(p, dd) { max-width: 70ch; }
.hard-library .ds-toc-link { padding-block: var(--s-2); }
@media (min-width: 761px) and (max-width: 1199px) { .hard-library { gap: var(--s-4); } }