/* =========================================================
   Default Server Identification Page — style.css
   Dark theme, card grid, environment badges, warning banner
   No external dependencies.
   ========================================================= */

/* ---------------------------------------------------------
   Design tokens
   --------------------------------------------------------- */
:root {
    --bg-page:          #0d0d0d;
    --bg-card:          #1a1a1a;
    --bg-card-hover:    #222222;
    --border:           #2e2e2e;
    --text-primary:     #e8e8e8;
    --text-label:       #888888;

    --warning-bg:       #1a0800;
    --warning-border:   #cc4400;
    --warning-text:     #ff8844;

    --env-production:   #cc2222;
    --env-staging:      #cc8800;
    --env-development:  #228822;
    --env-neutral:      #444466;

    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Mono',
                 Consolas, Menlo, 'DejaVu Sans Mono', monospace;

    --radius:   6px;
    --gap:      1.25rem;
}

/* ---------------------------------------------------------
   Reset / base
   --------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-mono);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------
   Access warning banner
   --------------------------------------------------------- */
.access-warning {
    background:    var(--warning-bg);
    border-bottom: 2px solid var(--warning-border);
    color:         var(--warning-text);
    padding:       0.75rem 1.5rem;
    text-align:    center;
    font-size:     0.78rem;
    font-weight:   700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height:   1.5;
}

/* ---------------------------------------------------------
   Page container
   --------------------------------------------------------- */
.container {
    max-width:  900px;
    width:      100%;
    margin:     0 auto;
    padding:    2rem 1.5rem 3rem;
    flex: 1;
}

/* ---------------------------------------------------------
   Page header
   --------------------------------------------------------- */
.page-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

.page-header h1 {
    font-size:     1.4rem;
    font-weight:   700;
    letter-spacing: 0.04em;
    color:         var(--text-primary);
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   Card grid
   --------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
}

/* ---------------------------------------------------------
   Individual card
   --------------------------------------------------------- */
.card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1.25rem 1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0.5rem;
    transition:    background 0.15s ease;
}

.card:hover {
    background: var(--bg-card-hover);
}

.card-label {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-label);
}

.card-value {
    font-size:   1.05rem;
    font-weight: 400;
    color:       var(--text-primary);
    word-break:  break-word;
}

/* ---------------------------------------------------------
   Environment badge
   --------------------------------------------------------- */
.env-badge {
    display:       inline-block;
    padding:       0.25em 0.75em;
    border-radius: var(--radius);
    font-size:     0.9rem;
    font-weight:   700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width:         fit-content;
}

.env-production {
    background: var(--env-production);
    color:      #fff;
}

.env-staging {
    background: var(--env-staging);
    color:      #000;
}

.env-development {
    background: var(--env-development);
    color:      #fff;
}

.env-neutral {
    background: var(--env-neutral);
    color:      #cccccc;
}

/* ---------------------------------------------------------
   Page footer
   --------------------------------------------------------- */
.page-footer {
    text-align:  center;
    padding:     1rem 1.5rem;
    font-size:   0.7rem;
    color:       #444;
    border-top:  1px solid var(--border);
    letter-spacing: 0.04em;
}