/* DMA student site archive - directory listing styling.

   Selectors target mod_autoindex's markup BY STRUCTURE, not by class name.

   An earlier version of this file selected `table.indexlist` with `td.indexcolname`,
   `td.indexcolsize` and friends throughout. Apache never emits any of that here: with
   `IndexOptions FancyIndexing HTMLTable` the real output - verified against the live
   server AND a local httpd:2.4 container producing byte-identical structure - is a bare

       <table>
         <tr><th valign="top">..</th><th><a href="?C=N;O=D">Name</a></th>..
         <tr><td valign="top"><img ..></td><td><a href="x.zip">x.zip</a></td>
             <td align="right">2026-08-14 21:07</td><td align="right">8.0M</td><td>&nbsp;</td>

   with no id and no classes, so not one rule in the old file matched and the listing
   rendered as unstyled browser default. Column position is the stable contract, so the
   columns are addressed with :nth-child:

       1 icon   2 name   3 last modified   4 size   5 description

   The `align`/`valign` attributes Apache writes are presentational hints, which lose to
   any author stylesheet rule - text-align below overrides them. */

:root {
    --bg:        #10131a;
    --panel:     #171b24;
    --border:    #262c38;
    --text:      #e6e9ef;
    --muted:     #98a1b3;
    --accent:    #6ea8fe;
    --accent-dim:#2b3a55;
    --row-hover: #1d2330;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg:        #f6f7f9;
        --panel:     #ffffff;
        --border:    #e2e5ea;
        --text:      #1b1f27;
        --muted:     #5c6474;
        --accent:    #1a56b8;
        --accent-dim:#d7e3f8;
        --row-hover: #f0f4fa;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 2.5rem 1.25rem 4rem;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: 980px; margin: 0 auto; }

header.site {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

header.site h1 {
    margin: 0 0 .35rem;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

header.site p {
    margin: 0;
    color: var(--muted);
    font-size: .93rem;
    max-width: 62ch;
}

.hint {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: .8rem 1rem;
    margin: 1.25rem 0 1.75rem;
    font-size: .9rem;
    color: var(--muted);
}
.hint strong { color: var(--text); }

/* ---- search box -------------------------------------------------------
   Hidden until the script in header.html reveals it, so a visitor without
   JavaScript never sees an input that would do nothing. Do NOT swap this
   for the `hidden` attribute: `display:flex`/`block` in a later rule beats
   `[hidden]`, and the box would show itself again. */

.tools { display: none; }

.tools.ready {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    padding: .75rem 0 .9rem;
    margin-bottom: 1rem;
}

#q {
    width: 100%;
    padding: .65rem .85rem;
    font: inherit;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
}
#q::placeholder { color: var(--muted); }
#q:focus { border-color: var(--accent); }

.toolsrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
    min-height: 1.6rem;
}

#count { color: var(--muted); font-size: .85rem; }

/* the Clear button is pointless until something is typed */
#clear {
    display: none;
    margin-left: auto;
    font: inherit;
    font-size: .82rem;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .2rem .7rem;
    cursor: pointer;
}
#clear:hover { color: var(--accent); border-color: var(--accent); }
.tools.filtering #clear { display: inline-block; }

tr.is-hidden { display: none; }

mark {
    background: var(--accent);
    color: #fff;
    border-radius: 2px;
    padding: 0 .1em;
}

.no-match {
    color: var(--muted);
    text-align: center;
    padding: 2rem 0 0;
    font-size: .93rem;
}

/* ---- mod_autoindex table ----------------------------------------------
   There is exactly one table on the page, so a bare element selector is
   both sufficient and immune to Apache's class emission changing. */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

th {
    text-align: left;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    padding: .7rem .9rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
th a { color: var(--muted); text-decoration: none; }
th a:hover { color: var(--accent); }

td {
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--row-hover); }

/* col 1 - icon. Noise once every row is a zip.
   Note display:none does NOT stop the fetch - measured, the browser still requests
   blank.gif, back.gif and compressed.gif. That is 3 requests for 391 rows because
   they dedupe by URL, and Ubuntu's stock alias.conf serves /icons/ anyway, so it is
   not worth chasing. Do not repeat the claim that hiding the column avoids them. */
th:nth-child(1),
td:nth-child(1) { display: none; }

/* col 2 - name */
td:nth-child(2) a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    padding: .1rem 0;
}
td:nth-child(2) a:hover { color: var(--accent); text-decoration: underline; }

/* the "Parent Directory" row leads back to the archive index - keep it, mute it */
td:nth-child(2) a[href="/"],
td:nth-child(2) a[href$="../"] { color: var(--muted); font-weight: 400; }

/* col 3 - last modified. text-align is set explicitly rather than left to Apache's
   align="right" attribute, so the rendering does not depend on a presentational hint. */
th:nth-child(3),
td:nth-child(3) { text-align: right; color: var(--muted); white-space: nowrap; font-size: .88rem; }

/* col 4 - size */
th:nth-child(4),
td:nth-child(4) { text-align: right; color: var(--muted); white-space: nowrap; }

/* col 5 - description, always empty here */
th:nth-child(5),
td:nth-child(5) { display: none; }

/* SuppressRules drops the <hr> separators, but hide them anyway in case a
   server-level IndexOptions overrides that. */
hr { display: none; }

footer.site {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .86rem;
}
footer.site code {
    background: var(--accent-dim);
    color: var(--text);
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .85em;
}

@media (max-width: 620px) {
    body { padding: 1.5rem .85rem 3rem; }
    /* last-modified is the first thing to go on a narrow screen */
    th:nth-child(3),
    td:nth-child(3) { display: none; }
    /* 53x28 at the desktop size - too small to tap reliably. The input is already
       46px tall; this brings Clear up to a comparable target. */
    #clear { padding: .55rem 1rem; font-size: .88rem; }
}