/* CardboardStrategy surfaces: framed cartons, not folded paper sheets. */
:root {
  --jupiter-plugin-primary: 227, 214, 186;
  --jupiter-plugin-background: 73, 55, 33;
  --jupiter-plugin-primaryText: 239, 228, 204;
  --jupiter-plugin-warning: 160, 90, 30;
  --jupiter-plugin-interactive: 112, 82, 46;
  --jupiter-plugin-module: 86, 66, 41;
}
.jupiter-credit { display: grid; gap: 4px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.jupiter-credit a { font-weight: 600; color: var(--ink); text-decoration: none; }
.jupiter-credit a:hover { text-decoration: underline; }
.tabs button:disabled { opacity: .6; }
.sheet {
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 22px 22px 30px;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--fold);
}
.sheet::before {
  content: '';
  position: absolute;
  inset: 5px 5px 13px;
  border: 1px solid var(--line);
  border-radius: 3px;
  opacity: .55;
  pointer-events: none;
}
.sheet::after,
.sheet.accent::after {
  content: '';
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: 7px;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0 0 5px 5px;
  background-color: var(--fold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M-3 6 3 0 9 6 15 0' fill='none' stroke='%2370522e' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  pointer-events: none;
}
.sheet.flat {
  border-style: solid;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--fold);
}
.sheet.accent { background: #e9dbbd; }
.states,
.table-scroll,
.facts {
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--fold);
}
.states > div { border-left-style: solid; }
.facts > div,
th,
td { border-color: var(--line); border-top-style: solid; border-bottom-style: solid; }
.field { border-radius: 5px; border-color: var(--line); box-shadow: inset 0 2px 0 #d4c09c66; }
.tabs { border-radius: 5px; overflow: hidden; }
.step-no { display: inline-block; padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.tile .label { padding-right: 0; }
@media (max-width: 759px) { .states > div { border-left: 0; border-top-style: solid; } }
@media (max-width: 639px) { .sheet { padding: 18px 18px 26px; } }