/* ── Dashboard – the landing page's hand, brought inside ─────
   Loaded after app.css and scoped to the library view, so nothing else in
   the app changes. The same vocabulary as landing.css: ink outlines, hard
   offset shadows that press in, the pastel of each thing you make, and the
   amber highlighter. Kept a notch quieter than the landing page – this is
   where teachers work, not where they are sold to. The critters that peek
   over the create tiles come from dashboard-flair.js. */

#presentations-list-view {
    --ink: #1e1b2e;
    --hl: rgba(244, 180, 71, 0.7);
    --pastel-pres: #e6ecff;
    --pastel-ws: #ddf6ec;
    --pastel-booklet: #fde7ef;
    --pastel-mark: #efe4fb;
    --pastel-quiz: #fdeecd;
}

/* ── Greeting ─────────────────────────────────────────── */
#presentations-list-view .dash-title { font-size: 1.85rem; }
/* The landing page's highlighter, swept on as the dashboard opens. */
.dash-swash {
    background-image: linear-gradient(100deg,
        rgba(244, 180, 71, 0) 2%, var(--hl) 10%, var(--hl) 90%, rgba(244, 180, 71, 0) 98%);
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 38%;
    padding: 0 0.08em;
    animation: dashSwash 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both;
}
@keyframes dashSwash {
    from { background-size: 0% 38%; }
    to   { background-size: 100% 38%; }
}

/* Time saved: an inked ticket rather than a soft chip. */
#presentations-list-view .timetape {
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 3px 0 var(--ink);
    transform: rotate(-1deg);
}
#presentations-list-view .timetape:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 0 5px 0 var(--ink);
}

/* ── Create tiles ─────────────────────────────────────── */
/* Each in the pastel of the thing it makes, the way the landing page's
   feature cards are, with a chunky inked edge that presses in. Overflow is
   let out so a critter can peek over the top. */
#presentations-list-view .qa-tile {
    overflow: visible;
    border: 2px solid var(--ink);
    border-radius: 16px;
    box-shadow: 0 3px 0 var(--ink);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
#presentations-list-view .qa-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 var(--ink);
    border-color: var(--ink);
}
#presentations-list-view .qa-tile:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--ink);
}
#presentations-list-view .qa-tile[data-action="presentation"] { background: var(--pastel-pres); }
#presentations-list-view .qa-tile[data-action="worksheet"]    { background: var(--pastel-ws); }
#presentations-list-view .qa-tile[data-action="booklet"]      { background: var(--pastel-booklet); }
#presentations-list-view .qa-tile[data-action="marking"]      { background: var(--pastel-mark); }
#presentations-list-view .qa-tile[data-action="quiz"]         { background: var(--pastel-quiz); }

/* Icon badges: solid, inked, a little tilted – the landing page's step
   numbers, in the tile's own colour. */
#presentations-list-view .qa-tile .qa-icon {
    border: 2px solid var(--ink);
    border-radius: 11px;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-4deg);
}
#presentations-list-view .qa-tile:hover .qa-icon { transform: rotate(5deg) scale(1.08); }
#presentations-list-view .qa-tile[data-action="presentation"] .qa-icon { background: #3660ff; color: #fff; }
#presentations-list-view .qa-tile[data-action="worksheet"] .qa-icon    { background: #00c78d; color: var(--ink); }
#presentations-list-view .qa-tile[data-action="booklet"] .qa-icon      { background: #e0679a; color: #fff; }
#presentations-list-view .qa-tile[data-action="marking"] .qa-icon      { background: #8657d1; color: #fff; }
#presentations-list-view .qa-tile[data-action="quiz"] .qa-icon         { background: #f4b447; color: var(--ink); }
#presentations-list-view .qa-tile .qa-label { font-weight: 800; }
#presentations-list-view .qa-tile .qa-plus { color: var(--ink); opacity: 0.35; font-weight: 500; }
#presentations-list-view .qa-tile:hover .qa-plus { color: var(--ink); opacity: 0.9; }

/* The critter: peeks over the tile's top edge on hover. The window clips
   everything below the edge, so it reads as climbing up from behind. */
.qa-peek {
    position: absolute;
    right: 34px;
    bottom: calc(100% + 1px);
    width: 44px;
    height: 30px;
    overflow: hidden;
    pointer-events: none;
}
.qa-peek svg {
    display: block;
    width: 44px;
    height: 40px;
    transform: translateY(105%);
    transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.64, 1);
}
#presentations-list-view .qa-tile:hover .qa-peek svg,
#presentations-list-view .qa-tile:focus-visible .qa-peek svg,
.qa-peek.is-hello svg { transform: translateY(12%); }
/* Blink now and then while it's up. */
.qa-peek .cr-eyes { transform-origin: 50% 50%; transform-box: fill-box; animation: crBlink 3.6s infinite; }
@keyframes crBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(0.1); }
}

/* ── Marketplace band ─────────────────────────────────── */
#presentations-list-view .mkt-band {
    border: 2px solid var(--ink);
    border-radius: 20px;
    background: #fffdf8;
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
#presentations-list-view .mkt-band:hover {
    transform: translate(-2px, -2px);
    border-color: var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
}
#presentations-list-view .mkt-band-icon {
    background: #fdeecd;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-4deg);
}
#presentations-list-view .mkt-band:hover .mkt-band-icon { transform: rotate(5deg) scale(1.06); }
#presentations-list-view .mkt-band-title { font-weight: 900; }
#presentations-list-view .mkt-band-cta {
    border: 2px solid var(--ink);
    box-shadow: 0 3px 0 var(--ink);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#presentations-list-view .mkt-band:hover .mkt-band-cta { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }

/* ── Library ──────────────────────────────────────────── */
/* Deliberately not in the hand-drawn style above: the library is where
   teachers spend their time, so it keeps app.css's quieter look – the sliding
   underline on the tabs, hairline cards. What is added here is only what
   folders need, in the same idiom. */

/* The row under the tabs: where you are, and the tools. */
.lib-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    margin: -8px 0 16px;
}
.lib-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.lib-crumbs[hidden] { display: none; }
.lib-crumb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 4px 8px;
    margin-left: -8px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    white-space: nowrap;
}
.lib-crumb span { overflow: hidden; text-overflow: ellipsis; }
.lib-crumb-icon {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.8;
    stroke-linejoin: round;
}
button.lib-crumb { cursor: pointer; }
.lib-crumb-link { color: var(--text-muted); font-weight: 600; }
.lib-crumb-link:hover { color: var(--accent); background: rgba(54, 96, 255, 0.06); }
.lib-crumb-link.is-drop { color: var(--accent); border: 1px dashed var(--accent); background: rgba(54, 96, 255, 0.08); }
.lib-crumb-sep { color: var(--text-muted); opacity: 0.6; }
.lib-crumb-here { margin-left: 0; }
.lib-crumb-here:hover { background: rgba(30, 27, 46, 0.04); }
.lib-crumb-caret { font-size: 0.65rem; color: var(--text-muted); }
.lib-crumb-rename .lib-folder-input { width: 220px; }

.lib-head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lib-new-folder { display: inline-flex; align-items: center; gap: 6px; }
.lib-new-folder[hidden] { display: none; }
.lib-new-folder svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* app.css lifts the toggle out of flow on phones to sit it on the heading
   line; in this row it already has a line of its own. */
#presentations-list-view .lib-head .view-toggle { position: static; margin: 0; align-self: center; }

/* Folders: a row across the top of the list, before the loose items –
   full width in the card grid, so they are never mistaken for one. */
.lib-folders {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
#presentations-list-view :not(.pres-grid):not(.res-grid) > .lib-folders { margin-bottom: 14px; }
.lib-folder {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    font: inherit;
    text-align: left;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.lib-folder:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
}
.lib-folder:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-folder-art { flex: none; width: 34px; height: 28px; overflow: visible; }
.lib-folder-back  { fill: #f0c46a; }
.lib-folder-front {
    fill: #f7d488;
    transform-origin: 50% 100%;
    transform-box: fill-box;
    transition: transform 0.2s ease;
}
/* The front flap tips open on hover, and further when something is held over it. */
.lib-folder:hover .lib-folder-front { transform: skewX(-6deg) scaleY(0.92); }
.lib-folder.is-drop {
    border: 1px dashed var(--accent);
    background: rgba(54, 96, 255, 0.06);
    transform: translateY(-2px);
}
.lib-folder.is-drop .lib-folder-front { transform: skewX(-12deg) scaleY(0.8); }
.lib-folder-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-folder-name {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lib-folder-count { font-size: 0.76rem; color: var(--text-muted); }
.lib-folder-new { cursor: default; border-style: dashed; }
.lib-folder-new:hover { transform: none; box-shadow: none; border-color: var(--border); }
.lib-folder-input {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}
.lib-folder-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(54, 96, 255, 0.15); }

.lib-folder-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
}
.lib-folder-empty b { color: var(--text); font-size: 0.98rem; }
.lib-folder-empty svg { vertical-align: -3px; }

/* Dragging: the card being carried fades, and the folders show they will
   take it. */
#presentations-list-view .is-dragging { opacity: 0.45; }
body.lib-dragging .lib-folder:not(.is-drop) { border-style: dashed; }

@media (max-width: 760px) {
    .lib-head { margin-top: 0; }
    .lib-folders { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 420px) {
    /* Room for the crumbs: the button keeps its icon and loses its words. */
    .lib-new-folder { font-size: 0; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lib-folder, .lib-folder-front { transition: none; }
}

/* Once the create row wraps (5 → 3 → 2 → 1 across, below 1000px), the space
   over a tile is the tile above it, so there is nowhere to peek from. */
@media (max-width: 1000px) {
    .qa-peek { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-swash { animation: none; }
    .qa-peek svg, .qa-peek .cr-eyes { transition: none; animation: none; }
    #presentations-list-view .qa-tile,
    #presentations-list-view .mkt-band { transition: none; }
}