/* ════════════════════════════════════════════════════════════════════════
   study-page-trash.css: the Trash tab on the Space home
   (public/js/study/study-page-trash.js). A deleted page waits here for 30 days.
   The rows are the home's own (.sp-row in study-pages.css, and its .sp-ico
   icon), so the list looks like the one it sits beside. Tokens and the tactile
   .k-btn come from /css/shared/khio-ui.css, so light and dark follow
   html[data-theme] with nothing to redo here.
   ════════════════════════════════════════════════════════════════════════ */

/* While Trash is the open tab its list stands in for the pages' (and for the
   first-visit card, which would otherwise show over it). */
.sp-home.is-trash .sp-listhead, .sp-home.is-trash .sp-list, .sp-home.is-trash .sp-note, .sp-home.is-trash .sp-first { display: none !important; }
.sp-home:not(.is-trash) .spt { display: none !important; }

/* The line above the list: how long a page stays, and Empty trash. */
.spt-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px 14px; border-bottom: 1px solid var(--k-line); }
.spt-hint { margin: 0; font-size: 14px; line-height: 1.4; color: var(--k-ink-3); }
.spt-clear { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--k-bad); font: 500 14px var(--k-sans); cursor: pointer; transition: background .15s ease; }
.spt-clear:hover { background: color-mix(in srgb, var(--k-bad) 10%, transparent); }
.spt-clear svg { width: 15px; height: 15px; }

/* A page in Trash: its icon, its name, when it went and how long it has left,
   then Restore and Delete forever. A hairline between rows steps aside for a hover. */
.spt-list { list-style: none; margin: 4px 0 0; padding: 0; }
.spt-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 8px 12px 14px; border-radius: 14px; transition: background .15s ease; }
.spt-row + .spt-row::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--k-line); transition: opacity .15s ease; }
.spt-row:hover, .spt-row:focus-within { background: var(--k-hover); }
.spt-row:hover::before, .spt-row:focus-within::before, .spt-row:hover + .spt-row::before, .spt-row:focus-within + .spt-row::before { opacity: 0; }
.spt-row:hover .sp-ico { background: color-mix(in srgb, var(--k-ink) 8%, transparent); }
.spt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spt-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spt-title.is-untitled { color: var(--k-ink-3); font-weight: 500; }
.spt-text small { font-size: 13.5px; color: var(--k-ink-3); }
.spt-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.spt-forever { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--k-ink-2); font: 500 14px var(--k-sans); cursor: pointer; transition: background .15s ease, color .15s ease; }
.spt-forever:hover { background: color-mix(in srgb, var(--k-bad) 10%, transparent); color: var(--k-bad); }

/* One plain line: loading, empty, nothing matching, or could not load. */
.spt-line { margin: 0; padding: 56px 0; text-align: center; font-size: 15px; color: var(--k-ink-3); }

.spt-clear:focus-visible, .spt-forever:focus-visible, .spt-line .sp-link:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }

@media (max-width: 720px) {
    .spt-bar { flex-direction: column; align-items: flex-start; padding-left: 0; }
    .spt-row { flex-wrap: wrap; }
    .spt-actions { width: 100%; padding-left: 50px; }
}