/* Mechanisms: a scientific drawing desk built from original vector artifacts. */
.mechanisms-intro,.mechanisms-library,.mechanism-dialog {--c-accent:#145dc2;--c-glow:#13818b;--c-tint:#e9f2fa;--c-shadow:0 16px 42px #10375712}
html[data-theme="dark"] :is(.mechanisms-intro,.mechanisms-library,.mechanism-dialog) {--c-accent:#8bbfff;--c-glow:#8bdbe2;--c-tint:#203951;--c-shadow:0 20px 48px #0004}
:is(.mechanisms-intro,.mechanisms-library,.mechanism-dialog) :is(button,a,summary,select):focus-visible {outline:3px solid var(--c-glow,#13818b);outline-offset:4px}
:is(.mechanisms-intro,.mechanisms-library,.mechanism-dialog) :is(.c-button,.c-icon,.c-quiet) {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border:1px solid var(--line,#d4e2ec);border-radius:10px;padding:11px 18px;background:var(--surface,#fff);color:var(--ink,#243543);font:600 17px/1.4 var(--font-ui,Arial,sans-serif);text-decoration:none;cursor:pointer}
:is(.mechanisms-intro,.mechanisms-library,.mechanism-dialog) .c-primary {background:var(--ink,#243543);color:var(--paper,#fff);border-color:var(--ink,#243543)}
:is(.mechanisms-intro,.mechanisms-library,.mechanism-dialog) .c-quiet {border:0;padding:8px 0;background:none;justify-content:flex-start;font-weight:550}
:is(.mechanisms-intro,.mechanisms-library,.mechanism-dialog) button:disabled {opacity:.55;cursor:default}
:is(.mechanisms-intro,.mechanism-dialog) .commons-kicker {color:var(--c-glow,#13818b);font:550 14px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.04em}
.mechanisms-intro {padding:26px 0 22px;border-bottom:1px solid var(--line)}
.mechanisms-intro h1 {font-size:clamp(34px,3.1vw,44px);line-height:1.25;letter-spacing:-.035em;margin:8px 0 10px}
.mechanisms-intro>.wrap>p:not(.commons-kicker) {font-size:21px;color:var(--muted);max-width:760px}
.mechanism-intro-links {display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:10px}
.mechanisms-library {padding:24px 0 44px}
.mechanism-toolbar {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:20px}
.mechanism-filters {display:flex;gap:6px;flex-wrap:wrap}
.mechanism-filters button {min-height:46px;padding:9px 17px;border:1px solid transparent;border-radius:9px;color:var(--muted);font:600 17px/1.5 var(--font-ui);background:none;cursor:pointer}
.mechanism-filters [aria-pressed=true] {background:var(--c-tint);border-color:var(--line);color:var(--ink)}
#mechanism-count {font-size:16px;color:var(--muted)}
.mechanism-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mechanism-card {border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--surface);scroll-margin-top:110px;display:flex;flex-direction:column;min-width:0}
.mechanism-card[hidden] {display:none}
.mechanism-card>button {display:block;padding:4px;border:0;border-bottom:1px solid var(--line);background:#FFFFFF;cursor:pointer;width:100%}
.mechanism-card img {width:100%;height:auto;aspect-ratio:32/21;object-fit:contain;display:block}
.mechanism-card-copy {padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.mechanism-card-copy h2 {font:650 23px/1.35 var(--font-ui);letter-spacing:-.025em;margin:0 0 7px}
.mechanism-card-copy .mechanism-evidence {margin-bottom:7px}
.mechanism-card-copy p {font-size:17px;color:var(--muted);line-height:1.55;margin:0 0 10px;flex:1}
.mechanism-card-copy .c-quiet {font-size:17px}
.mechanism-evidence {display:inline-flex;font-size:14px;color:var(--c-glow);line-height:1.6}
.mechanism-boundary {margin-top:32px;padding:22px 26px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.mechanism-boundary summary,.mechanism-sources summary {cursor:pointer;min-height:36px;font-size:18px;font-weight:600}
.mechanism-boundary p {font-size:17px;line-height:1.8;color:var(--muted);max-width:1040px}
.mechanism-boundary .c-quiet {margin-right:28px;font-size:17px}
.mechanism-dialog {max-width:1320px;width:calc(100% - 40px);padding:0;max-height:calc(100dvh - 40px);overflow-y:auto;border:1px solid var(--line,#d4e2ec);border-radius:16px;background:var(--surface,#fff);color:var(--ink,#243543);box-shadow:var(--c-shadow)}
.mechanism-dialog::backdrop {background:#07131b99;backdrop-filter:blur(3px)}
.mechanism-dialog .commons-dialog-head {position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid var(--line,#d4e2ec);background:var(--surface,#fff)}
.mechanism-dialog .c-icon {width:48px;height:48px;flex-shrink:0;padding:0;border-color:transparent;background:none;font-size:26px}
.mechanism-dialog-content {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:0;align-items:start}
.mechanism-canvas {background:var(--soft);padding:18px;border-right:1px solid var(--line);align-self:start}
.mechanism-canvas>img {display:block;width:100%;height:auto;aspect-ratio:32/21;background:#FFFFFF;border:1px solid var(--line);border-radius:6px}
.mechanism-canvas>img[data-background=transparent] {background-color:#FFFFFF;background-image:linear-gradient(45deg,#E7ECF0 25%,transparent 25%),linear-gradient(-45deg,#E7ECF0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#E7ECF0 75%),linear-gradient(-45deg,transparent 75%,#E7ECF0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.mechanism-appearance {margin-top:10px}
.mechanism-appearance>summary {cursor:pointer;min-height:44px;align-content:center;color:var(--muted);font-size:16px;line-height:1.5}
.mechanism-palette-controls {display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px 14px;margin-top:16px}
.mechanism-palette-controls label {display:grid;gap:8px;font-size:16px;color:var(--muted);min-width:0}
.mechanism-palette-controls select {width:100%;font:400 16px/1.5 var(--font-ui);min-height:46px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:9px}
.mechanism-palette-controls .c-quiet {grid-column:1/-1;justify-content:flex-start;font-size:16px}
.mechanism-details {padding:20px 24px;min-width:0}
.mechanism-details h2 {font-size:29px;line-height:1.4;margin:9px 0 12px;letter-spacing:-.025em}
.mechanism-details>p {font-size:18px;line-height:1.55;color:var(--muted)}
.mechanism-evidence-note {padding:14px 16px;background:var(--soft);border-left:3px solid var(--c-glow);margin:16px 0}
.mechanism-evidence-note strong {font-size:16px}
.mechanism-evidence-note p {font-size:16px;line-height:1.65;color:var(--muted);margin:7px 0 0}
.mechanism-downloads {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mechanism-downloads .c-button {font-size:16px;text-align:center;padding:11px 12px}
.mechanism-downloads .c-primary {grid-column:1/-1}
.mechanism-downloads .c-quiet {justify-content:flex-start;grid-column:1/-1;font-size:17px}
#mechanism-feedback {font-size:16px;min-height:26px;margin:12px 0;color:var(--c-glow)}
.mechanism-sources {padding-top:16px;margin-top:14px;border-top:1px solid var(--line)}
.mechanism-sources p {font-size:15px;line-height:1.7;color:var(--muted)}
.mechanism-sources a {color:var(--ink);overflow-wrap:anywhere;text-underline-offset:4px}
.mechanism-reference {padding:14px 0;border-bottom:1px solid var(--line)}
.mechanism-reference a {font-size:16px}
.mechanism-reference span {display:block;margin-top:7px;font-size:14px;color:var(--muted)}
@media(hover:hover) {.mechanism-card:hover {border-color:var(--c-glow);box-shadow:var(--c-shadow)}.mechanism-card>button:hover img {opacity:.9}.mechanism-dialog :is(.c-button,.c-icon):hover {border-color:var(--c-glow,#13818b)}}
@media(max-width:1080px) {.mechanism-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.mechanism-dialog-content {grid-template-columns:1fr}.mechanism-canvas {border-right:0;border-bottom:1px solid var(--line)}}
@media(max-width:650px) {
  .mechanism-grid {grid-template-columns:1fr;gap:20px}
  .mechanisms-intro {padding:16px 0}
  .mechanisms-intro .commons-kicker {display:none}
  .mechanisms-intro h1 {margin:0 0 8px}
  .mechanisms-intro>.wrap>p:not(.commons-kicker) {font-size:18px;line-height:1.5;margin:0 0 8px}
  .mechanism-intro-links {gap:4px 12px;margin-top:0}
  .mechanism-intro-links .c-quiet {font-size:16px;min-height:44px}
  .mechanisms-library {padding-top:16px}
  .mechanism-toolbar {gap:8px;padding-bottom:12px;margin-bottom:16px}
  .mechanism-filters {gap:4px}
  .mechanism-filters button {padding:8px 10px;min-height:44px;font-size:16px}
  .mechanism-dialog {width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  .mechanism-canvas {padding:14px}
  .mechanism-details {padding:16px 20px}
  .mechanism-details h2 {font-size:27px;margin:0 0 6px}
  .mechanism-details>p {margin:6px 0 12px}
  .mechanism-palette-controls {grid-template-columns:minmax(0,1fr) 100px;gap:10px;margin-top:8px}
  .mechanism-downloads {grid-template-columns:1fr}
  .mechanism-downloads>* {grid-column:1!important}
  .mechanism-boundary {padding:18px}
}
@media(prefers-reduced-motion:reduce) {.mechanism-card,.mechanism-card img {transition:none!important}}