/* instrumenta-base -- generated from packages/instrumenta-base/src by build.mjs.
   Do not edit: edit the source and rebuild. */

/* Classic skin: the PHP-rendered pages' own chrome, on top of base.css.
   Merged (U2) from three sheets that every classic page used to pick from:

     1. the launcher's page styles          (was .assets/index.css)
     2. the invite-token list                (was .assets/invite-tokens/invite-tokens.css)
     3. the shared header, nav, app grid     (was .assets/chrome.css)

   They keep their order, which is the order the launcher always loaded them in
   relative to each other. The colour tokens, the --auth-* names and the
   form/table/badge primitives are in base.css; this file holds only what is
   specific to the retro-terminal page chrome. Only the launcher, My phone and
   Contacts load it. */

/* ==== 1. launcher page ==================================================== */

/* Theme variables (dark/light + toggle overrides) live in auth.css, which
   .index.php always loads alongside this file. */

body { font-family: sans-serif; margin: 0; background-color: var(--auth-bg); color: var(--auth-text); }
/* No generic top-level `a` rule here on purpose: every link on the top-level
   page styles itself (.app-card, .i-brand, .i-nav a, .button in the header),
   and a bare `.root a { text-decoration: underline }` used to outrank all of
   them by specificity, forcing blue underlined text onto the brand link and
   every app card regardless of what those rules said. */
a { color: var(--auth-accent-hover); text-decoration: underline; }
a:visited { color: var(--auth-accent-hover); }
.directory-listing { padding: 20px 20px 40px; max-width: 800px; margin: 0 auto; }
/* The subdirectory file browser (not the top-level app grid) still gets a
   boxed, bordered look — a plain file table needs the container to read as
   a distinct panel. */
body:not(.root) .directory-listing {
    background: var(--auth-card);
    border: 2px solid var(--auth-border-strong);
    box-shadow: 3px 3px 0 var(--auth-border-strong);
    margin-top: 20px;
}
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px; color: var(--auth-muted); border-bottom: 2px solid var(--auth-border); }
td { padding: 8px 10px; border-bottom: 1px solid var(--auth-border); }
td .i-ico { margin-right: 8px; width: 20px; }
tr:hover td { background: var(--auth-hover-tint); }
.disabled { color: var(--auth-muted); text-decoration: line-through; }
.launcher-group { padding: 16px; margin-bottom: 20px; }
.launcher-group-title { margin: 0 0 12px; }
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--auth-card);
  color: var(--auth-text);
  padding: 20px;
  border: 1px solid var(--auth-border);
  border-radius: 14px;
  box-shadow: 0 20px 40px var(--auth-shadow);
  z-index: 1000;
  max-height: 90vh;
  overflow-y: auto;
  width: 90%;
  max-width: 600px;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.button {
    background: var(--auth-accent);
    color: white;
    padding: 7px 14px;
    border: 2px solid var(--auth-border-strong);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--i-mono, ui-monospace, monospace);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    box-shadow: 2px 2px 0 var(--auth-border-strong);
    transition: transform .05s, box-shadow .05s;
}
a.button, a.button:visited { color: white; text-decoration: none; display: inline-block; }
.button:hover { background: var(--auth-accent-hover); }
.button:active { transform: translate(2px, 2px); box-shadow: none; }
.button.admin { background: var(--auth-surface); color: var(--auth-text); }
.button.admin:hover { background: var(--auth-border); }
.tool-checkboxes { columns: 3; margin: 10px 0; }
.tool-checkboxes label { display: block; margin: 5px 0; }
.back-button { margin-right: 15px; }
.directory-header { display: flex; align-items: center; }
.directory-header a, .directory-header h1 { color: var(--auth-text); }

@media (max-width: 768px) {
  .directory-listing { padding: 14px 14px 30px; }
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  .modal { width: 90%; max-width: none; padding: 15px; }
  .tool-checkboxes { columns: 1; }
  .directory-header { flex-wrap: wrap; gap: 10px; }
  .back-button { margin-right: 0; margin-bottom: 10px; }
}

@media (max-width: 480px) {
  td, th { padding: 6px 8px; }
}

/* ==== 2. invite tokens ==================================================== */

/* Status colors for the admin "Invite Tokens" list in .index.php.
   Split out of auth.css because that file is loaded site-wide (BetterFlip,
   contacts, mobilelogin, etc.) and these classes are only ever used in the
   one admin panel. */
.auth-token-status-revoked { color: var(--auth-error); }
.auth-token-status-expired { color: var(--auth-muted); }

/* ==== 3. header, nav, app grid ============================================ */

/* 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; }

/* The shared account element (base/base.js) lands on the same line. */
.i-top i-account { margin-bottom: 8px; }

@media (max-width: 640px) {
    .i-top { padding: 10px 14px 0; gap: 6px 14px; align-items: center; }
    .i-nav a { padding: 6px 9px; }
    /* Phone width: brand and account share the first row, the tabs get a row of
       their own underneath (they used to run under the account control, and
       Contacts fell off the screen). */
    .i-top .i-brand { order: 1; }
    .i-top i-account, .i-top .button { order: 2; margin-left: auto; margin-bottom: 0; }
    .i-top .i-nav { order: 3; flex: 1 0 100%; align-self: stretch; overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   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-ico { width: 1.1rem; height: 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) {
    /* One card per row: two columns clipped the names ("Manage Phon", "Hora") at phone width. */
    .app-grid { grid-template-columns: minmax(0, 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);
    }
}

/* The classic icon set (site/lib/iicons.php): inline SVG that takes the text
   colour and scales with the font size. */
.i-ico {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}