/* Approved white/frosted line-folder proposal. The action and the grid stay native. */
.mp-create-card {
  --create-plus: #b8b8b8;
  --create-focus: #62695f;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 15px;
  outline: 2px solid transparent;
  outline-offset: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: pan-y;
  transition: transform .2s ease;
}
/* Map the approved 320×340 drawing to the existing 1.43 grid cell.
 * Front is 96% of the cell width, with its bottom at 99%, just like its neighbors.
 * All artwork scales uniformly; the three 178×113 cards are never stretched. */
.mp-create-folder-stage {
  position: absolute;
  display: block;
  width: 111.3043478%;
  aspect-ratio: 320 / 340;
  left: -5.6521739%;
  bottom: -20.8852174%;
  pointer-events: none;
}
.mp-create-folder-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mp-create-folder-front {
  position: absolute;
  display: block;
  left: 6.875%;
  right: 6.875%;
  top: 43.5294118%;
  height: 43.5294118%;
  border: 1.15px solid #aeb8b1;
  border-radius: 12px 12px 15px 15px;
  z-index: 2;
  transform-origin: 50% 100%;
  overflow: hidden;
  background: linear-gradient(118deg,#ffffffed,#f6f8f5dc 52%,#e1e6e1f5);
  box-shadow: inset 0 1px 0 #fff,0 8px 16px #35473c14;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  backface-visibility: hidden;
}
.mp-create-folder-front::before { content: ""; position: absolute; inset: 4px; border: 1px solid #ffffffd9; border-radius: 10px; }
.mp-create-folder-rim { position: absolute; left: 11px; right: 11px; top: 1px; height: 1px; background: linear-gradient(90deg,transparent,#fff 24%,#d0d7d0 52%,#fff 78%,transparent); }
.mp-create-folder-sheen { position: absolute; inset: -10% -25%; background: linear-gradient(108deg,transparent 33%,#fff9 49%,transparent 65%); opacity: 0; }
.mp-create-folder-edge { position: absolute; top: 0; left: -26%; width: 25%; height: 2px; background: linear-gradient(90deg,transparent,#f1d15b,#fff7cc,transparent); opacity: 0; }
.mp-create-card-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  text-align: center;
  white-space: nowrap;
  color: #424b43;
  font-size: var(--ui-text-size);
  font-weight: 500;
}
.mp-create-card-label>svg { color: var(--create-plus); flex: none; }
.mp-create-card-label>span { line-height: 18px; }
/* Keep the earlier static opt-in for callers that only need a creation action. */
.mp-create-card[data-static-background=true] { background: color-mix(in srgb,var(--card) 90%,var(--yellow)); }
.mp-create-light { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 76% 18%,var(--card),transparent 64%),linear-gradient(135deg,#faf7e8,#f6eab1); }
.mp-create-halo { position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(ellipse at 30% 50%,#f3d65166,transparent 48%); filter: blur(14px); }
.mp-create-orbit { position: absolute; left: -10%; top: 18%; width: 120%; height: 72%; border-radius: 50%; background: conic-gradient(from 25deg,transparent 6%,#fff 22%,#e6cd62 32%,transparent 47%,#fff 68%,#bca968 77%,transparent 92%); mask-image: radial-gradient(ellipse,transparent 48%,#0009 53%,#000 55%,#0002 61%,transparent 69%); transform: rotate(-32deg); }
.mp-create-orbit-back { opacity: .5; filter: blur(5px); transform: rotate(32deg) scale(.86); }
.mp-create-orbit-front { opacity: .8; filter: blur(.5px); }
.mp-create-shimmer { position: absolute; inset: -30%; background: linear-gradient(118deg,transparent 34%,#ffffffb3 49%,transparent 64%); opacity: .4; }
@media (hover:hover) {
  .mp-create-card:not(:disabled):hover { transform: translateY(-3px); }
}
.mp-create-card:focus-visible { outline-color: var(--create-focus); }
.mp-create-card:not(:disabled):active { transform: scale(.98); }
.mp-create-card:disabled { opacity: .5; cursor: not-allowed; }
.mp-create-card[data-state=loading] { cursor: progress; }
@media (prefers-reduced-motion:reduce) {
  .mp-create-card { transition: none; }
  .mp-create-card:not(:disabled):hover,
.mp-create-card:not(:disabled):active { transform: none; }
}