/* Shared chrome: the header + navigation strip used on the launcher, My
   phone, and Contacts (lib/ichrome.php renders the nav; each page keeps its
   own header wrapper). Retro-computing treatment on purpose: square
   corners, hard 2px borders, offset drop-shadows instead of blur, and a
   monospace face for chrome text (brand, nav, app names) — body copy stays
   in the normal system font, so the "chrome vs. content" contrast reads
   like an old toolbar around a normal document. Colour still comes
   entirely from .assets/auth.css's --auth-* variables, so light/dark keeps
   working for free.

   Also carries a readability bump for the two user-facing app pages: a
   larger base font and larger heading than the platform default, since
   these are the pages a first-time user lands on. The fleet console
   (fleet.css) intentionally does not load this file. */

:root {
    --i-mono: ui-monospace, SFMono-Regular, "Courier New", monospace;
}

.i-top {
    flex: none;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 20px;
    padding: 12px 20px 0;
    background: var(--auth-card);
    border-bottom: 2px solid var(--auth-border-strong);
}

.i-brand, .i-brand:visited, .i-brand:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--auth-text);
    font-family: var(--i-mono);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.i-brand img { width: 22px; height: 22px; border-radius: 0; display: block; image-rendering: pixelated; }

.i-top h1 {
    margin: 0 0 10px;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.i-nav {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    align-self: flex-end;
}

/* Folder-tab look: an active tab's border matches the header's own border
   on three sides but turns --auth-card (the header's own background) along
   the bottom, so it visually fuses with the content below instead of
   sitting inside a box of its own. */
.i-nav a {
    color: var(--auth-muted);
    text-decoration: none;
    padding: 6px 14px;
    font-family: var(--i-mono);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
}
.i-nav a:hover { color: var(--auth-text); }
.i-nav a.on {
    color: var(--auth-text);
    background: var(--auth-card);
    border-color: var(--auth-border-strong);
    border-bottom: 2px solid var(--auth-card);
}

.i-who {
    color: var(--auth-muted);
    font-family: var(--i-mono);
    font-size: .82rem;
    padding-bottom: 10px;
}

/* The launcher's own Sign in/Account/Admin buttons (.button, in index.css)
   sit in this same flex-end header row; give them the same 10px landing
   as the brand and username so the row's bottom edges line up. */
.i-top .button { margin-bottom: 10px; }

@media (max-width: 640px) {
    .i-top { padding: 10px 14px 0; gap: 6px 14px; }
    .i-nav a { padding: 6px 9px; }
}

/* ---------------------------------------------------------------------------
   Launcher grid — one app per card, in manifest order. Square corners, a
   boxed icon tile (like an old desktop icon slot), and a hard offset
   shadow that "presses in" on hover instead of lifting or fading.
   --------------------------------------------------------------------------- */

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px 16px;
    margin: 22px auto 0;
}

.app-card, .app-card:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--auth-surface);
    border: 2px solid var(--auth-border-strong);
    border-radius: 0;
    color: var(--auth-text);
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--auth-border-strong);
    transition: transform .05s, box-shadow .05s;
}
.app-card:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--auth-border-strong);
}
.app-card:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.app-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--auth-bg);
    border: 2px solid var(--auth-border-strong);
}
.app-icon i { font-size: 1.1rem; color: var(--auth-accent); }
.app-icon img { width: 26px; height: 26px; object-fit: contain; }

.app-text { min-width: 0; }

.app-card .app-name {
    display: block;
    font-family: var(--i-mono);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card .app-desc {
    display: block;
    font-size: .78rem;
    color: var(--auth-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card.disabled {
    opacity: .5;
    cursor: default;
}

.launcher-intro {
    max-width: 800px;
    margin: 14px auto 0;
    color: var(--auth-muted);
    font-size: .9rem;
}

.launcher-apps {
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .app-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------------------------------------------------------------------------
   Dialogs — desktop only. Below 769px the account/admin modal keeps the
   original soft rounded look from index.css/auth.css, untouched. At 769px
   and up it picks up the same retro-computing treatment already applied to
   the header and launcher grid above: square corners, a hard offset shadow
   instead of blur, and monospace uppercase chrome text — one consistent
   language across the desktop page instead of a modern dialog floating over
   a retro grid.
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .modal.auth-modal {
        border-radius: 0;
        border: 2px solid var(--auth-border-strong);
        box-shadow: 4px 4px 0 var(--auth-border-strong);
    }
    .auth-modal h2, .auth-modal h3 {
        font-family: var(--i-mono);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .auth-modal input, .auth-modal select {
        border-radius: 0;
        border: 2px solid var(--auth-border-strong);
    }
    .auth-modal .auth-btn {
        border-radius: 0;
        border: 2px solid var(--auth-border-strong);
        font-family: var(--i-mono);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        box-shadow: 2px 2px 0 var(--auth-border-strong);
        transition: transform .05s, box-shadow .05s;
    }
    .auth-modal .auth-btn:active {
        transform: translate(2px, 2px);
        box-shadow: none;
    }
    .auth-token-item, .auth-list-row, .auth-checkbox-list {
        border-radius: 0;
        border: 2px solid var(--auth-border);
    }
}