/* First three essay experiments — a tidal field palette: deep ocean, storm
   electricity, and warm paper. Loaded after embeds.css. */
.post-body div[data-embed="naming"],
.post-body div[data-embed="divide-recombine"],
.post-body div[data-embed="containers"] {
  --ess-paper: #e8f0eb;
  --ess-ink: #12334a;
  --ess-dim: #31576a;
  --ess-faint: #657d87;
  --ess-rule: #b9ccd0;
  --ess-rule-hot: #769da9;
  --ess-accent: #d36735;
  --ess-sea: #0c3044;
  --ess-sky: #9ecbd1;
}

.post-body .ess-instruction {
  margin: 0 0 12px; padding: 9px 12px; border-left: 3px solid var(--ess-accent);
  background: color-mix(in srgb, var(--ess-paper) 72%, #c4e1de);
  color: var(--ess-ink); font-size: 13px; font-weight: 700; line-height: 1.4;
}
.post-body .ess-instruction b { color: var(--ess-accent); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; margin-right: 7px; }
.post-body .ess-jumps { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 0; }
.post-body .ess-jump { min-height:32px; padding:5px 10px; border:1px solid var(--ess-rule-hot); border-radius:4px; background:#d8e7e4; color:var(--ess-ink); font:600 12px/1.2 Manrope,sans-serif; cursor:pointer; }
.post-body .ess-jump:hover, .post-body .ess-jump:focus-visible { background:var(--ess-ink); color:#edf5f0; outline:none; }

/* naming: the label visibly peels away while a causal sketch switches on */
.ess-naming .ess-stage { background:var(--ess-sea); border-color:#17495d; }
.ess-naming .ess-plate { background:rgba(10,42,59,.86); border-color:#b7d6d6; box-shadow:0 7px 0 rgba(0,0,0,.12); }
.ess-naming .ess-mech { width:min(88%,520px); text-align:center; white-space:normal; color:#d2eeee; font-size:14px; line-height:1.35; }
.ess-naming .ess-cause { position:absolute; inset:auto 15px 15px; display:flex; justify-content:space-between; gap:12px; color:#c4e7e2; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:0; transition:opacity .45s var(--ess-ease); }
.ess-naming .ess-cause.is-on { opacity:1; }
.ess-naming .ess-phen { color:#b6d6d5; }
.ess-naming .ess-tabs { gap:5px; }
.ess-naming .ess-tabs button { border:1px solid rgba(192,222,218,.3); color:#d0e3df; }
.ess-naming .ess-tabs button[aria-selected="true"] { background:#d36735; color:#fff4e7; border-color:#d36735; }
.ess-naming .ess-tabs button:focus-visible { outline-color:#f0ba72; }
.ess-naming .ess-diagram { opacity:0; transition:opacity .55s var(--ess-ease); }
.ess-naming .ess-diagram.is-on { opacity:1; }
.ess-naming .ess-plate.is-lifted { transform:translate(-50%, calc(-50% - 104px)) rotate(-2deg); }

/* division: a play-table with a target silhouette, not an abstract gesture */
.ess-divide .ess-stage { background:#dcebe7; border-color:#8fb6bb; height:auto; aspect-ratio:680 / 320; }
.ess-divide .ess-verb { color:#31576a; background:#eff6f1; padding:5px 8px; border-radius:3px; }
.ess-divide .ess-target { fill:rgba(211,103,53,.08); pointer-events:all; stroke:#d36735; stroke-width:2; stroke-dasharray:5 5; opacity:.9; }
.ess-divide .ess-target-choice { cursor:pointer; }
.ess-divide .ess-target-choice:focus { outline:none; }
.ess-divide .ess-target-choice:focus-visible .ess-target { stroke:#12334a; stroke-width:3; }
.ess-divide .ess-target-label { fill:#a74e2c; font:700 12px Manrope,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.ess-divide .ess-part path { fill:#9bcbd0; stroke:#12334a; }
.ess-divide .ess-part.is-placed path { fill:#d36735; stroke:#89371e; }
.ess-divide .ess-part:not(.is-placed) { transition:none; }
.ess-divide .ess-part.is-placed { pointer-events:none; }
.ess-divide .ess-verb, .ess-divide .ess-success { pointer-events:none; }
.ess-divide .ess-part.is-near path { stroke:#d36735; stroke-width:2.5; }
.ess-divide .ess-label { fill:#12334a; font-size:15px; font-weight:700; }
.ess-divide .ess-piece-help { fill:#31576a; font:12px Manrope,sans-serif; }
.ess-divide .ess-success { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:6px 10px; background:#12334a; color:#e8f0eb; font-size:12px; opacity:0; transition:opacity .35s var(--ess-ease); white-space:nowrap; }
.ess-divide .ess-success.is-on { opacity:1; }

/* containers: colored qualitative water and a direct evidence event readout */
.ess-containers .ess-stage { background:linear-gradient(150deg,#e9f1ec,#c7e0de); border-color:#91b9bd; }
.ess-containers .fill { fill:#16758a; opacity:.72; }
.ess-containers .vessel.is-retired .fill { fill:#8ba5a9; }
.ess-containers .vname { font-size:13px; fill:#12334a; }
.ess-containers .vstate { fill:#31576a; font-size:10px; font-weight:700; }
.ess-containers .shelf-label { fill:#547984; }
.ess-containers .ess-evidence { margin:10px 0 0; padding:10px 12px; border:1px solid var(--ess-rule); background:#d9e9e4; color:var(--ess-dim); font-size:13px; line-height:1.4; min-height:58px; }
.ess-containers .ess-evidence b { color:var(--ess-ink); }
.ess-containers .ess-key { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; color:var(--ess-faint); font-size:11px; }
.ess-containers .ess-key i { display:inline-block; width:10px; height:10px; margin-right:4px; background:#16758a; vertical-align:-1px; }
.ess-containers .ess-key i.retired { background:#8ba5a9; }

@media (max-width:480px) {
 .post-body .ess-instruction { font-size:12.5px; margin-bottom:10px; }
 .ess-naming .ess-mech { font-size:12.5px; bottom:38px; }
 .ess-naming .ess-cause { font-size:9px; bottom:12px; }
 .ess-naming .ess-tabs button { padding:6px 8px; font-size:11.5px; }
 .ess-divide .ess-stage { height:auto; aspect-ratio:680 / 320; }
 .ess-divide .ess-success { font-size:11px; max-width:90%; white-space:normal; text-align:center; }
 .ess-containers .ess-evidence { font-size:12.5px; }
}