/* ==========================================================================
   Crawler.Ninja — directory listing for /files/
   SUPPLEMENT to main.css. The listing pages load main.css first (for the
   shared topbar, container, eyebrow, tokens and background) and then this
   file for the listing-specific table and layout.
   No JS, no inline styles, no external resources — runs under the same strict
   CSP as the rest of the site (default-src 'none'; style-src 'self').
   ========================================================================== */

/* Page layout — sits in <main class="container listing"> below the topbar */
.listing { padding: clamp(34px, 6vw, 68px) 0 clamp(48px, 7vw, 88px); }

.listing h1 {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--navy);
	margin: 0;
	word-break: break-all;
}
.listing h1 .path { font-family: var(--mono); font-weight: 600; }

/* Parent-directory link (sub-directories only) */
.parent {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--mono);
	font-size: 0.82rem;
	text-decoration: none;
	color: var(--navy);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 7px 15px;
	margin-top: 18px;
	transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}
.parent::before { content: "↑"; color: var(--accent-700); }
.parent:hover { border-color: var(--accent); color: var(--accent-700); background: var(--accent-tint); }

/* Listing table */
table#list {
	width: 100%;
	border-collapse: collapse;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow);
	margin-top: 24px;
}

#list thead th {
	text-align: left;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slate-soft);
	background: color-mix(in srgb, var(--paper) 60%, var(--paper-2));
	border-bottom: 1px solid var(--line);
	padding: 13px 18px;
	white-space: nowrap;
}

#list tbody td {
	padding: 11px 18px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}
#list tbody tr:last-child td { border-bottom: 0; }
#list tbody tr { transition: background-color 0.12s; }
#list tbody tr:hover td { background: var(--accent-tint); }

/* Name column */
#list tbody td:first-child { width: 100%; }
#list tbody td a {
	color: var(--navy);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s;
}
#list tbody td a:hover { color: var(--accent-700); }

/* File-type affordance via text glyphs (no images → no img-src needed).
   Directories link to a trailing-slash href. */
#list tbody td a::before {
	content: "📄";
	margin-right: 0.6em;
	opacity: 0.85;
	font-size: 0.95em;
}
#list tbody td a[href$="/"]::before { content: "📁"; }
#list tbody td a[href$=".gz"]::before,
#list tbody td a[href$=".zip"]::before,
#list tbody td a[href$=".bz2"]::before,
#list tbody td a[href$=".xz"]::before { content: "🗜"; }
#list tbody td a[href$=".csv"]::before,
#list tbody td a[href$=".json"]::before,
#list tbody td a[href$=".txt"]::before { content: "📊"; }

/* Size + date columns: monospace, right-aligned, muted */
#list tbody td:nth-child(2),
#list tbody td:nth-child(3),
#list thead th:nth-child(2),
#list thead th:nth-child(3) {
	font-family: var(--mono);
	font-size: 0.82rem;
	color: var(--slate);
	text-align: right;
	white-space: nowrap;
}

/* Meta line under the table */
.listing-meta {
	margin: 20px 2px 0;
	font-size: 0.85rem;
	color: var(--slate-soft);
}
.listing-meta a {
	color: var(--slate);
	text-decoration: none;
	border-bottom: 1px solid var(--accent-tint);
	transition: color 0.15s, border-color 0.15s;
}
.listing-meta a:hover { color: var(--accent-700); border-bottom-color: var(--accent); }

@media (max-width: 560px) {
	#list thead th, #list tbody td { padding-left: 12px; padding-right: 12px; }
	#list tbody td:nth-child(2), #list thead th:nth-child(2) { display: none; } /* hide size on narrow */
}