/* Folder tiles (lib/folder.js): the library, shelf pages and profiles.
   Needs base.css tokens; the app.css-only ones have fallbacks here. */
/* Light: a folder-coloured front with a line border on a back and tab a step
   darker, so tiles stand out on paper (app.css lightens the front on the
   library's darker page).
   Kept here, not in base.css, which must stay identical to the extension's. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --folder-back: #ddd5c6; --folder-tab: #d1c8b7; --folder-front: #ede7dc; --folder-front-hover: #f2ede4; }
}
:root[data-theme="light"] { --folder-back: #ddd5c6; --folder-tab: #d1c8b7; --folder-front: #ede7dc; --folder-front-hover: #f2ede4; }
@keyframes fade { from { opacity: 0; } }
/* Boards: folder cards. Tab + back panel, the 3 newest links peeking out, a front
   flap with the name; hover/focus tips the flap open and fans the links out. */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 16px; }
.board-tile { display: block; width: 100%; text-align: left; border-radius: 12px; outline: 0; animation: fade var(--base, 240ms) var(--ease, cubic-bezier(0.4, 0, 0.22, 1)) both; }
.folder { position: relative; aspect-ratio: 1 / 0.78; perspective: 900px; perspective-origin: 50% 120%; transition: transform var(--fast, 160ms) ease-out; }
.folder > * { position: absolute; }
.folder .back { inset: 12% 0 0; background: var(--folder-back); border: 1px solid var(--border); border-radius: 10px; transition: border-color var(--fast, 160ms) ease-out; }
.folder .tab {
  top: 0; left: 0; width: 30%; height: 16%; background: var(--folder-tab);
  border-radius: 8px 8px 0 0; clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
}
.folder .peek { inset: 10% 9% 26%; pointer-events: none; }
.folder .fcard {
  position: absolute; inset: 0; border-radius: var(--radius-card, 6px); background: var(--bg-secondary); border: 1px solid var(--border);
  overflow: hidden; transform-origin: 50% 100%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 420ms var(--ease, cubic-bezier(0.4, 0, 0.22, 1));
}
.folder .fcard img { width: 100%; height: 100%; object-fit: cover; }
.folder .fcard .ph {
  height: 100%; display: flex; align-items: flex-end; padding: 8px; font-size: 11px; font-weight: 500; line-height: 1.3;
  color: var(--text-secondary); background: var(--bg-tertiary); overflow: hidden;
}
.folder .c1 { transform: translateY(-24%) scale(0.86); }
.folder .c2 { transform: translateY(-12%) scale(0.93); }
.folder .c3 { transform: translateY(0) scale(1); }
.folder .front {
  inset: 40% 0 0; background: var(--folder-front); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 3px; padding: 14px;
  transform-origin: 50% 100%; backface-visibility: hidden;
  transition: transform 420ms var(--ease, cubic-bezier(0.4, 0, 0.22, 1)), background-color var(--fast, 160ms) ease-out, border-color var(--fast, 160ms) ease-out;
}
.folder .name {
  max-width: 100%; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.03em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folder .meta { display: flex; max-width: 100%; line-height: 1.35; font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
.folder .meta .count { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.folder .meta .globe { color: var(--accent); }
/* A folder's ⋯: bottom-right of the flap, on hover / focus (always on touch screens) */
.board-item { position: relative; }
.board-item > .more {
  position: absolute; right: 6px; bottom: 6px; opacity: 0; transition: opacity var(--fast, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.22, 1));
}
.board-item:hover > .more, .board-item > .more:focus-visible, .board-item:focus-within > .more { opacity: 1; }
.board-item > .more:hover { background: var(--folder-front-hover); }
@media (hover: none) { .board-item > .more { opacity: 1; } }
/* A shelf: two more folder backs stacked behind, up and to the right; hover /
   focus fans them out (the front stays shut). A layers glyph before the count. */
.folder .stack {
  inset: 12% 0 0; background: var(--folder-back); border: 1px solid var(--border); border-radius: 10px;
  transform-origin: 0 100%; transition: transform var(--base, 240ms) var(--ease, cubic-bezier(0.4, 0, 0.22, 1)), border-color var(--fast, 160ms) ease-out;
}
.folder .stack::before {
  content: ""; position: absolute; top: -13.6%; left: -1px; width: 30%; height: 18.2%; background: inherit;
  border-radius: 8px 8px 0 0; clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
}
.folder .s1 { transform: translate(5px, -5px); }
.folder .s2 { transform: translate(10px, -10px); background: var(--folder-tab); }
:is(.board-item:hover, .board-tile:focus-visible) .shelf .s1 { transform: translate(11px, -10px) rotate(4deg); }
:is(.board-item:hover, .board-tile:focus-visible) .shelf .s2 { transform: translate(20px, -17px) rotate(8deg); }
:is(.board-item:hover, .board-tile:focus-visible) .shelf :is(.stack, .front) { border-color: var(--line-hover, var(--accent)); }
:is(.board-item:hover, .board-tile:focus-visible) .shelf .front { background: var(--folder-front-hover); }
.folder .meta svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* A shelf's boards drag into order */
.board-item[draggable="true"] { cursor: grab; }
.board-item.dragging { opacity: 0.4; }
.folder .folder-pin { position: absolute; top: 10px; right: 10px; display: flex; color: var(--text-secondary); }
.folder .folder-pin svg { width: 14px; height: 14px; stroke-width: 1.8; }
:is(.board-item:hover, .board-tile:focus-visible, .start-tile:hover, .start-tile:focus-visible, .locked .art-board) .folder:not(.shelf) .front { transform: rotateX(-36deg) translateY(6%); background: var(--folder-front-hover); border-color: var(--line-hover, var(--accent)); }
:is(.board-item:hover, .board-tile:focus-visible, .start-tile:hover, .start-tile:focus-visible, .locked .art-board) .back { border-color: var(--line-hover, var(--accent)); }
:is(.board-item:hover, .board-tile:focus-visible, .start-tile:hover, .start-tile:focus-visible, .locked .art-board) .folder:not(.shelf) .c1 { transform: translate(-18%, -34%) rotate(-7deg) scale(0.9); }
:is(.board-item:hover, .board-tile:focus-visible, .start-tile:hover, .start-tile:focus-visible, .locked .art-board) .folder:not(.shelf) .c2 { transform: translate(18%, -32%) rotate(6deg) scale(0.94); }
:is(.board-item:hover, .board-tile:focus-visible, .start-tile:hover, .start-tile:focus-visible, .locked .art-board) .folder:not(.shelf) .c3 { transform: translateY(-22%) scale(1); }
.board-tile:focus-visible .folder { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }
.board-tile:active .folder { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .board-tile { animation-delay: 0s !important; }
  .folder, .folder .fcard, .folder .front { transition-duration: 1ms; }
  :is(.board-item:hover, .board-tile:focus-visible, .start-tile:hover, .start-tile:focus-visible, .locked .art-board) .folder:not(.shelf) .front { transform: translateY(14%); }
  /* A shelf's stack stays put; only its edges light up */
  .folder .stack { transition-duration: 1ms; }
  :is(.board-item:hover, .board-tile:focus-visible) .shelf .s1 { transform: translate(5px, -5px); }
  :is(.board-item:hover, .board-tile:focus-visible) .shelf .s2 { transform: translate(10px, -10px); }
}