/* The index: categories as directories, a search at the prompt, and the apps as cards; an
   app opens in a window of its own, where TestFlight's join is a terminal session. */

.index-head { padding-top: 56px; }

.index-head h1 {
    margin-top: 16px;
    font: 66px/1.05 var(--pixel);
    text-wrap: balance;
}

@media (max-width: 700px) { .index-head h1 { font-size: 44px; } }

.index-head .sub { margin-top: 14px; max-width: 60ch; }

/* ---------- The prompt: search, filters, order ---------- */

.controls {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.find {
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(12, 9, 7, 0.5);
}

.find:focus-within { border-color: var(--dim); }
.find label { color: var(--dim); white-space: nowrap; }
.find .q { color: var(--dim); }

.find input {
    flex: 1;
    min-width: 4ch;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--phosphor);
    font: inherit;
    font-size: 16px;
    text-shadow: inherit;
}

.find input::placeholder { color: var(--faint); }
.find input::-webkit-search-cancel-button { display: none; }

/* Toggles as a shell's flags: [x] on, [ ] off. */
.flag-toggle {
    display: inline-flex;
    gap: 1ch;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dim);
    font: inherit;
    cursor: pointer;
    text-shadow: inherit;
}

.flag-toggle::before { content: "[ ]"; }
.flag-toggle[aria-pressed="true"] { color: var(--phosphor); }
.flag-toggle[aria-pressed="true"]::before { content: "[x]"; color: var(--ok); }

.order { display: flex; gap: 6px; align-items: center; color: var(--dim); }
.order button { padding: 2px 8px; border: 0; border-radius: 3px; background: none; color: var(--dim); font: inherit; cursor: pointer; text-shadow: inherit; }
.order button[aria-pressed="true"] { background: var(--phosphor); color: var(--ink); text-shadow: none; }

/* ---------- Categories: ls's directories ---------- */

.dirs { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 4px 18px; }

.dirs button {
    padding: 2px 6px;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--phosphor);
    font: inherit;
    cursor: pointer;
    text-shadow: inherit;
}

.dirs button small { margin-left: 0.6ch; color: var(--dim); font-size: 13px; }
.dirs button:hover { color: #fff8e8; }
.dirs button[aria-pressed="true"] { background: var(--phosphor); color: var(--ink); text-shadow: none; }
.dirs button[aria-pressed="true"] small { color: var(--ink); opacity: 0.7; }
.dirs.sub button { color: var(--dim); font-size: 14px; }
.dirs.sub { margin-top: 8px; padding-left: 2ch; }
.dirs.places { margin-top: 12px; }
.dirs .lab { padding: 2px 0; color: var(--dim); }
.dirs.places button { color: var(--dim); }
.dirs.places button[aria-pressed="true"] { color: var(--ink); }

.count { margin-top: 20px; color: var(--dim); font-size: 14px; }

/* ---------- The apps ---------- */

.apps {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

@media (max-width: 420px) { .apps { grid-template-columns: minmax(0, 1fr); } }

.app-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; }
.app-card:hover { border-color: var(--faint); }

.app-card .top { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.app-card img { flex: none; width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }

.app-card .name {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--phosphor);
    font: 400 17px/1.3 var(--mono);
    text-align: left;
    text-shadow: inherit;
    cursor: pointer;
}

.app-card .name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.app-card .dev { color: var(--dim); font-size: 13px; }
/* Where it's made: tapping it lists the apps made there too. */
.app-card .where {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dim);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-shadow: inherit;
    cursor: pointer;
}

.app-card .where::before { content: "@ "; color: var(--faint); }
.app-card .where:hover { color: var(--phosphor); text-decoration: underline dotted; text-underline-offset: 3px; }
.app-card .subtitle { margin-top: 2px; font-size: 14px; }
.app-card .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--dim); font-size: 13px; }
.app-card .stars { color: var(--amber); }
.app-card .note { font-size: 13px; }
.app-card .actions { margin-top: auto; gap: 8px; }

.tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--faint);
    color: var(--dim);
    font-size: 12px;
    line-height: 1.4;
}

.tag.tf { border-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--ok); }

.empty { margin-top: 32px; }

/* ---------- An app's window ---------- */

dialog.window {
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100dvh - 120px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--dim);
    border-radius: 12px;
    background: var(--glass), #110c09;
    color: var(--phosphor);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 30px rgba(236, 223, 197, 0.06);
    overflow: hidden;
}

dialog.window[open] { display: flex; flex-direction: column; }
dialog.window::backdrop { background: rgba(8, 6, 4, 0.72); }

dialog.window .titlebar .close {
    margin-left: auto;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--dim);
    font: 18px/1 var(--mono);
    cursor: pointer;
}

dialog.window .titlebar .close:hover { color: var(--phosphor); }
dialog.window .titlebar .title { margin-right: 0; }

.win-body { padding: 22px 24px 24px; overflow-y: auto; }
.win-body .top { display: flex; gap: 18px; align-items: center; }
.win-body img { width: 96px; height: 96px; border-radius: 22.5%; flex: none; }
.win-body h2 { font: 33px/1.1 var(--pixel); overflow-wrap: anywhere; }
.win-body .dev { color: var(--dim); }
.win-body .subtitle { margin-top: 18px; font-size: 17px; }
.win-body .note { margin-top: 8px; }
.win-body .facts { margin-top: 16px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 14px; }
.win-body .facts dt { color: var(--dim); }
.win-body .actions { margin-top: 22px; }
.win-body .via { margin-top: 14px; font-size: 13px; }

@media (max-width: 520px) {
    .win-body img { width: 72px; height: 72px; }
    .win-body h2 { font-size: 22px; }
}

/* TestFlight's join: lines and prompts, as the waitlist's session. */
.session { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.session:empty { display: none; }

.line { min-height: 1.6em; overflow-wrap: anywhere; }
.line.cmd-line, .line.dim { color: var(--dim); }
.line.ok { color: var(--ok); }
.line.err { color: var(--err); }

.line.busy::after {
    content: "...";
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    width: 0;
    animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots { to { width: 4ch; } }
@media (prefers-reduced-motion: reduce) { .line.busy::after { width: 3ch; animation: none; } }

.field { display: flex; align-items: center; min-height: 1.6em; }
.field label { color: var(--dim); margin-right: 1ch; white-space: nowrap; }

.field input {
    min-width: 1ch;
    max-width: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--phosphor);
    font: inherit;
    font-size: 16px;
    text-shadow: inherit;
    caret-color: transparent;
}

.field .cursor { width: 1ch; height: 1.2em; margin-left: 0; flex: none; }
.field input:disabled { color: var(--phosphor); -webkit-text-fill-color: var(--phosphor); opacity: 1; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Cloudflare's checkbox, over the app's window while it wants a click: inside the window,
   since a modal dialog leaves everything outside it inert. */
.human-check { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; }
.human-check.asking { pointer-events: auto; background: rgba(10, 7, 5, 0.72); }