/* A focused restyle of the three native folding-mode choices. */
.fold-page .fold-mode-picker { gap: 12px; margin-bottom: 28px; }
.fold-page .fold-mode-picker legend { margin-bottom: 14px; color: #393933; font-size: 12px; }
.fold-page .fold-mode-picker label { display: block; }
.fold-page .fold-mode-picker label > .fold-mode-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  height: 100%;
  min-height: 100px;
  padding: 19px 18px;
  border: 1px solid #cecec3;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f7f7f1);
  color: #373731;
  box-shadow: 0 4px 12px #17171004;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fold-page .fold-mode-picker .fold-mode-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #dfdfd4;
  border-radius: 11px;
  background: #eeeee6;
  color: #59594f;
}
.fold-page .fold-mode-picker .fold-mode-icon svg {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fold-page .fold-mode-picker .fold-mode-copy { display: block; min-width: 0; flex: 1; }
.fold-page .fold-mode-picker .fold-mode-title {
  display: block;
  margin: 0;
  color: #30302b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.2px;
}
.fold-page .fold-mode-picker .fold-mode-description { display: block; margin-top: 5px; color: #68685d; font-size: 11px; line-height: 1.5; }
.fold-page .fold-mode-picker .fold-mode-check {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #b7b7aa;
  border-radius: 50%;
  color: #20201b;
}
.fold-page .fold-mode-picker .fold-mode-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.fold-page .fold-mode-picker input:checked + .fold-mode-option {
  border-color: #f76835;
  background: linear-gradient(135deg, #30302d, #20201e);
  color: #f6f4ec;
  box-shadow: inset 0 0 0 1px #f76835, 0 7px 18px #17171012;
}
.fold-page .fold-mode-picker input:checked + .fold-mode-option .fold-mode-title { color: #fffaf0; font-weight: 600; }
.fold-page .fold-mode-picker input:checked + .fold-mode-option .fold-mode-description { color: #c6c5b9; }
.fold-page .fold-mode-picker input:checked + .fold-mode-option .fold-mode-icon { border-color: #f768354d; background: #f7683514; color: #ffad88; }
.fold-page .fold-mode-picker input:checked + .fold-mode-option .fold-mode-check { border-color: #ff956a; background: #ff956a; }
.fold-page .fold-mode-picker input:checked + .fold-mode-option .fold-mode-check svg { opacity: 1; }
.fold-page .fold-mode-picker input:focus-visible + .fold-mode-option { outline: 3px solid #b34420; outline-offset: 4px; }
.fold-page .fold-mode-picker input:disabled + .fold-mode-option { opacity: .6; cursor: wait; }
@media (hover: hover) and (pointer: fine) {
  .fold-page .fold-mode-picker label:hover > .fold-mode-option { border-color: #b55731; transform: translateY(-2px); box-shadow: 0 7px 18px #1717100c; }
  .fold-page .fold-mode-picker label:hover > input:checked + .fold-mode-option { border-color: #ff956a; }
  .fold-page .fold-mode-picker label:hover > input:disabled + .fold-mode-option { transform: none; }
}
@media (max-width: 900px) {
  .fold-page .fold-mode-picker label > .fold-mode-option { align-items: flex-start; flex-direction: column; gap: 12px; min-height: 138px; padding: 17px; }
  .fold-page .fold-mode-picker .fold-mode-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .fold-page .fold-mode-picker .fold-mode-icon svg { width: 27px; height: 27px; }
  .fold-page .fold-mode-picker .fold-mode-copy { flex: none; width: 100%; }
  .fold-page .fold-mode-picker .fold-mode-check { position: absolute; top: 15px; right: 15px; width: 18px; height: 18px; }
}
@media (max-width: 600px) {
  .fold-page .fold-mode-picker { gap: 8px; margin-bottom: 24px; }
  .fold-page .fold-mode-picker label > .fold-mode-option { min-height: 114px; gap: 10px; padding: 14px 12px 12px; border-radius: 12px; }
  .fold-page .fold-mode-picker .fold-mode-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 8px; }
  .fold-page .fold-mode-picker .fold-mode-icon svg { width: 24px; height: 24px; }
  .fold-page .fold-mode-picker .fold-mode-title { min-height: 2.8em; font-size: 12px; line-height: 1.4; }
  .fold-page .fold-mode-picker .fold-mode-description { display: none; }
  .fold-page .fold-mode-picker .fold-mode-check { top: 11px; right: 10px; width: 16px; height: 16px; }
  .fold-page .fold-mode-picker .fold-mode-check svg { width: 10px; height: 10px; }
}
@media (max-width: 400px) {
  .fold-page .fold-mode-picker label > .fold-mode-option { padding-inline: 10px; }
  .fold-page .fold-mode-picker .fold-mode-check { top: 10px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fold-page .fold-mode-picker label > .fold-mode-option { transition: none; }
  .fold-page .fold-mode-picker label:hover > .fold-mode-option { transform: none; }
}