.topic-folder { position: relative; min-height: 88px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: end; gap: 5px 8px; padding: 12px; border: 1px solid var(--green); border-radius: 5px; background: var(--ink); color: var(--green); cursor: grab; touch-action: none; text-align: left; perspective: 600px; transition: transform var(--return-duration, .45s) cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color .18s ease, background-color .18s ease, opacity .3s ease; }
.topic-folder:not(.is-dragging):active { transform: scale(0.97); }
.topic-folder:hover, .topic-folder.is-returning { z-index: 2; border-color: var(--ink); background: transparent; outline: 0; }
.topic-folder.is-dragging { z-index: 3; cursor: grabbing; transition: none; transform: translate3d(var(--drag-x), var(--drag-y), 0); }
.topic-folder.is-returning { transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
.topic-folder .folder-back { position: absolute; z-index: 1; right: 4px; bottom: 4px; left: 4px; height: 88%; border: 1px solid var(--green-dim); border-radius: 0 8px 8px 8px; background: var(--green-dim); }
.topic-folder .folder-back::before { position: absolute; top: -9px; left: -1px; width: 38%; height: 9px; border: 1px solid var(--green-dim); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--green-dim); content: ""; }
.topic-folder .folder-file { position: absolute; z-index: 2; bottom: 10px; left: 15px; width: calc(100% - 30px); height: 68%; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); box-shadow: 0 2px 5px rgba(0, 0, 0, .14); transition: transform .3s ease-out; }
.topic-folder .folder-file-2 { transform: translate(5px, -5px) rotate(2deg); }
.topic-folder .folder-front { position: absolute; z-index: 4; right: 4px; bottom: 4px; left: 4px; height: 88%; border: 2px solid var(--ink); border-radius: 0 8px 8px 8px; background: var(--green); box-shadow: 0 4px 10px rgba(0, 0, 0, .22); transform-origin: bottom center; backface-visibility: hidden; transition: transform .42s cubic-bezier(.2, .8, .2, 1), background-color .3s ease-out; }
.topic-folder:hover .folder-front { transform: rotateX(-40deg); background: color-mix(in srgb, var(--green) 78%, var(--ink)); }
.topic-folder:hover .folder-file-1 { transform: translateY(-20px); }
.topic-folder:hover .folder-file-2 { transform: translateY(-25px) translate(5px, -5px) rotate(4deg); }
.topic-folder > .topic-text, .topic-folder > .folder-count { position: relative; z-index: 5; color: var(--ink); opacity: 1; transition: opacity .3s ease-out; }
.topic-folder > .topic-text { grid-column: 1; grid-row: 2; min-width: 0; }
.topic-folder > .folder-count { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; font-size: 8px; }
.topic-folder:hover > .topic-text, .topic-folder:hover > .folder-count { opacity: 0; }
.topic-folder.is-returning .folder-front { transform: rotateX(-40deg); background: color-mix(in srgb, var(--green) 78%, var(--ink)); }
.topic-folder.is-returning .folder-file-1 { transform: translateY(-20px); }
.topic-folder.is-returning .folder-file-2 { transform: translateY(-25px) translate(5px, -5px) rotate(4deg); }
.topic-folder.is-returning > .topic-text, .topic-folder.is-returning > .folder-count { opacity: 0; }
.topic-folder strong { display: block; color: inherit; font: 11px var(--mono); }
.topic-folder small { display: block; margin-top: 5px; color: inherit; font-size: 8px; }
@media (max-width: 760px) {
  .topic-folder { min-height: 70px; padding: 8px; }
  .topic-folder small { font-size: 7px; }
}
@media (max-width: 460px) {
  .topic-folder { min-height: 62px; padding: 7px 5px; }
  .topic-folder .folder-count { display: none; }
  .topic-folder strong { font-size: 8px; }
  .topic-folder small { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-item.folder-tile .folder-front, .menu-item.folder-tile .folder-file, .topic-folder, .topic-folder .folder-front, .topic-folder .folder-file, .topic-folder > .topic-text, .topic-folder > .folder-count, .folder-panel { transition: none; }
}