/* Override system.css .window font stack for body content.
   system.css declares @font-face for Chicago/Chicago_12/Monaco/Geneva_9 — those font
   files are now served from /static/ alongside system.css.
   We keep Geneva/Helvetica for paragraph text (.window-pane) to avoid Inconsolata/Menlo
   rendering for prose, but let system.css Chicago_12 apply to UI elements
   (title bars, buttons, inputs, selects, field-rows). */
body {
    font-family: Geneva, 'Helvetica Neue', Arial, sans-serif;
}
.window-pane {
    font-family: Geneva, 'Helvetica Neue', Arial, sans-serif;
}

.menubar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.menubar-wrapper ul[role="menu-bar"] {
    width: 100%;
    box-sizing: border-box;
}
.menubar-wrapper ul[role="menu-bar"] > li {
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
}
.menubar-wrapper ul[role="menu-bar"] > li > a {
    font-size: 22px !important;
}

.page-content {
    margin-top: 48px;
    padding: 16px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* Desktop zoom — Chrome/Safari/Edge only; Firefox excluded (see issue #556) */
@supports not (-moz-appearance: none) {
    @media (min-width: 1280px) { .page-content { zoom: 1.1;  } }
    @media (min-width: 1440px) { .page-content { zoom: 1.25; } }
    @media (min-width: 1680px) { .page-content { zoom: 1.45; } }
    @media (min-width: 1920px) { .page-content { zoom: 1.7;  } }
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
/* Allow grid to control card width; overrides system.css .window { min-width: 320px } */
.three-col .window { min-width: 0; }

/* ── Game services hero row (Game Servers + Get Started, 50/50) ── */
.gs-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
/* ── Game services main row (Pricing | Questions, 50/50 to match hero row).
       align-items: stretch makes Questions track Pricing's height so its
       internal .window-pane scroll handles overflow when FAQ sections expand. ── */
.gs-page-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
.gs-page-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.gs-page-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gs-page-right .window {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    /* Grow to fill .gs-page-right, which the grid stretched to match
       Pricing's height. Without flex:1 the card sits at its natural
       (shorter) height and the stretched parent shows empty space. */
    flex: 1;
    min-height: 0;
}
/* Allow the FAQ pane to scroll when the card is stretched to match Pricing.
   Without min-height:0, flex children default to min-height:auto and refuse
   to shrink below their intrinsic content size, which disables overflow-y. */
.gs-page-right .window-pane {
    min-height: 0;
}
.lobby-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
}
@media (max-width: 782px) {
    .gs-hero-layout,
    .gs-page-layout {
        grid-template-columns: 1fr;
    }
}

/* Visually-hidden text accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.calc-rate-hint {
    font-size: 11px;
    color: #555;
    margin-bottom: 8px;
}
.calc-item {
    border: 1px solid #000;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.calc-item:last-child {
    margin-bottom: 0;
}
.calc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.calc-row:last-child {
    margin-bottom: 0;
}
.calc-row label {
    width: 90px;
    flex-shrink: 0;
    font-size: 11px;
}
.calc-row input[type="number"] {
    width: 80px;
}
.calc-row select {
    width: auto;
    flex-shrink: 0;
}
.calc-unit {
    font-size: 11px;
    color: #555;
    min-width: 52px;
}
.calc-fill {
    flex: 1;
}
.calc-cost {
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
}
.calc-rm {
    margin-left: 4px;
    min-width: 24px;
    text-align: center;
}
.calc-empty {
    font-size: 11px;
    color: #555;
    font-style: italic;
    margin: 0 0 4px;
}

.gs-order-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.gs-order-item:last-child {
    border-bottom: none;
}

.badge-preserved {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid #000;
    padding: 0 4px;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

/* Flash messages — used by /console/gaming/* partial responses and
   inline form feedback. Kept here so any page (cloud or gaming) that
   embeds an HTMX target can show them without extra scaffolding. */
.flash-success {
    background: #eef8ee;
    border: 1px solid #2a6a2a;
    color: #2a6a2a;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px;
}
.flash-error {
    background: #fdeeee;
    border: 1px solid #8a2a2a;
    color: #8a2a2a;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px;
}

details {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #000;
}
details:last-child {
    border-bottom: none;
}
details summary {
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}
details[open] summary {
    margin-bottom: 8px;
}

/* Add-on rows — compact info-icon reveal, overrides default <details> chrome */
details.addon-info {
    margin: 0;
    padding: 0;
    border-bottom: none;
}
details.addon-info > summary {
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
details.addon-info > summary::-webkit-details-marker {
    display: none;
}
details.addon-info[open] > summary {
    margin-bottom: 0;
}
.addon-info-icon {
    font-size: 12px;
    color: #888;
}
details.addon-info[open] .addon-info-icon {
    color: #000;
}

/* FAQ section-level accordion — outer wrapper for a group of questions */
details.faq-section > summary {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    padding: 5px 0;
    margin-bottom: 0;
}
details[open].faq-section > summary {
    margin-bottom: 4px;
}
details.faq-section > details {
    margin-left: 8px;
}
details ol,
details ul {
    margin: 4px 0;
    padding-left: 20px;
}

/* Game select — full-width dropdown */
#gs-game-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.server-detail-inline {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 10px 14px;
    background: #f8f6f0;
    border-top: 1px solid #d0ccc4;
    box-sizing: border-box;
    width: 100%;
}
.detail-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px 12px;
    flex: 1;
    align-content: start;
}
.detail-action {
    flex: 0 0 180px;
}
.server-row { cursor: pointer; }
.server-row:hover td,
.server-row.selected td { background: #000; color: #fff; }
.ping-low  { color: #006400; }
.ping-mid  { color: #886600; }
.ping-high { color: #cc0000; }
.server-row:hover td.ping-low,
.server-row:hover td.ping-mid,
.server-row:hover td.ping-high,
.server-row.selected td.ping-low,
.server-row.selected td.ping-mid,
.server-row.selected td.ping-high { color: #fff; }
.players-full  { color: #cc0000; }
.players-empty { color: #999; }
.server-row:hover td.players-full,
.server-row:hover td.players-empty,
.server-row.selected td.players-full,
.server-row.selected td.players-empty { color: #fff; }
.player-bar-track { width: 100%; height: 8px; border: 1px solid #000; background: #fff; }
.player-bar-fill  { height: 100%; background: #000; }
.sort-ind { font-size: 9px; }
.server-inet td { background: #f5f8f2; }
.server-inet:hover td,
.server-inet.selected td { background: #000; color: #fff; }
.inet-dot { color: #2a6e1a; font-size: 8px; margin-right: 2px; vertical-align: middle; }
.server-row:hover .inet-dot,
.server-row.selected .inet-dot { color: #7dca65; }

@media (max-width: 720px) {
    .two-col,
    .three-col,
    .service-nav,
    .detail-row-2,
    .detail-row-3 {
        grid-template-columns: 1fr;
    }
    .page-content {
        padding: 8px;
    }
    /* Collapse system.css .window margins inside grids so cards don't overflow */
    .service-nav .window,
    .detail-row .window,
    .detail-overview {
        margin: 0 0 8px;
    }
}

/* ── Service drill-down (marketing pages: /platform, /infrastructure, /edge) ── */

.service-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}
.service-card {
    cursor: pointer;
    user-select: none;
    /* Allow grid to control card width; overrides system.css .window { min-width: 320px } */
    min-width: 0;
}
.service-card .window-pane {
    font-size: 15px;
}

/* Active/hovered/focused card: solid black title bar (retro Mac active-window style).
   The `background` shorthand resets background-image, so no background-image:none needed. */
.service-card.active .title-bar,
.service-card:hover .title-bar,
.service-card:focus-visible .title-bar {
    background: #000;
}
.service-card.active .title-bar .title,
.service-card:hover .title-bar .title,
.service-card:focus-visible .title-bar .title {
    background: #000;
    color: #fff;
}
/* Buttons must remain visible on the black title bar */
.service-card.active .title-bar .close,
.service-card.active .title-bar .resize,
.service-card:hover .title-bar .close,
.service-card:hover .title-bar .resize,
.service-card:focus-visible .title-bar .close,
.service-card:focus-visible .title-bar .resize {
    background: #fff;
    border-color: #fff;
}
/* Distinct focus ring beyond the black title bar (keyboard users need more than hover parity) */
.service-card:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Detail panels: hidden until a card is activated via JS */
.service-detail { display: none; }
.service-detail.active { display: block; }

/* Sub-grids inside detail panels */
.detail-row {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}
.detail-row-2 { grid-template-columns: 1fr 1fr; }
.detail-row-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Allow grid to control detail window width; overrides system.css .window { min-width: 320px } */
.detail-row .window { min-width: 0; }

.detail-overview { margin-bottom: 12px; min-width: 0; }

/* ── Cloud console layout ──────────────────────────────────────────────────── */

.cloud-main > .window { margin-bottom: 12px; }
.cloud-main > .window:last-child { margin-bottom: 0; }

/* ── Resource tables ───────────────────────────────────────────────────────── */

.resource-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.resource-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    padding: 6px 10px;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}
.resource-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.resource-table tr:last-child td { border-bottom: none; }
.resource-table tr:hover td { background: #f5f5f5; cursor: pointer; }
.resource-table tr.clickable:hover td { background: #000; color: #fff; }
.resource-table .col-actions { text-align: right; white-space: nowrap; }
.resource-table .col-name { font-weight: bold; white-space: nowrap; }
.resource-table .col-mono { font-family: Monaco, monospace; font-size: 11px; }
.resource-table .col-muted { color: #666; font-size: 11px; }

/* ── Status badges ─────────────────────────────────────────────────────────── */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-running  .status-dot { background: #3a9a3a; }
.status-stopped  .status-dot { background: #ccc; }
.status-starting .status-dot { background: #e0a020; }
.status-degraded .status-dot { background: #d85e00; }
.status-error    .status-dot { background: #cc2020; }

/* ── Vendor / platform badges ──────────────────────────────────────────────── */

.vendor-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid #000;
    padding: 1px 5px;
    line-height: 1.5;
    white-space: nowrap;
}

/* ── Quota / usage bar ─────────────────────────────────────────────────────── */

.quota-bar-track {
    width: 100%;
    height: 8px;
    border: 1px solid #000;
    background: #fff;
    display: inline-block;
}
.quota-bar-fill {
    height: 100%;
    background: #000;
    display: block;
}
.quota-bar-fill.warn  { background: #cc8800; }
.quota-bar-fill.crit  { background: #cc2020; }
.quota-label {
    font-size: 10px;
    color: #555;
    margin-top: 2px;
}

/* ── Severity badges ───────────────────────────────────────────────────────── */

.severity-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid currentColor;
    padding: 1px 5px;
    line-height: 1.5;
}
.severity-high     { color: #cc6600; }
.severity-medium   { color: #aa8800; }
.severity-low      { color: #336633; }
.severity-info     { color: #336699; }

/* ── Form helpers ──────────────────────────────────────────────────────────── */

.form-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}
.form-section:last-child { border-bottom: none; margin-bottom: 0; }
.form-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 8px;
}
/* ── Cloud console action bar ──────────────────────────────────────────────── */

.action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.action-bar .spacer { flex: 1; }

/* ── Terminal / log viewer ─────────────────────────────────────────────────── */

.terminal-pane {
    background: #111;
    color: #d4d4d4;
    font-family: Monaco, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px;
    min-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.terminal-pane .log-ts { color: #666; user-select: none; }
.terminal-pane .log-err { color: #f87171; }
.terminal-pane .log-warn { color: #fbbf24; }
.terminal-pane .log-info { color: #d4d4d4; }

/* ── Price / market colours ────────────────────────────────────────────────── */

.price-down { color: #2a7a2a; }
.price-up   { color: #cc2020; }
.price-same { color: #555; }

/* ── system.css supplemental classes (defined in docs.css, absent from v0.1.11 dist) ── */

.center {
    text-align: center;
}
@media only screen and (max-width: 600px) {
    .scale-down {
        transform: scale(0.8);
    }
}
.dialog-text {
    font-family: Chicago_12;
    font-size: 1em;
    font-weight: normal;
    margin-top: 20px;
}

/* ── Stub / coming-soon ────────────────────────────────────────────────────── */

.coming-soon-pane {
    padding: 48px 16px;
    text-align: center;
    color: #888;
    font-size: 13px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — phones and tablets.

   Breakpoints (desktop-first, max-width):
     819px  small tablet portrait and below  (docs sidebar collapse)
     743px  all phones incl. large phablets  (iPhone Plus / Pro Max)
     429px  standard phone portrait          (iPhone 14 / Galaxy S23)
     389px  smaller phones                   (iPhone SE, older Android)

   Existing breakpoints kept intact:
     720px  .two-col / .three-col / .service-nav
     600px  .scale-down
═══════════════════════════════════════════════════════════════════ */

/* ── Small tablet portrait and below ── */
@media (max-width: 819px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }
    .docs-nav {
        position: static;
        top: auto;
    }
}

/* ── All phones (≤ 743px) ── */
@media (max-width: 743px) {
    /* Menubar: shrink items and allow hidden horizontal scroll */
    .menubar-wrapper ul[role="menu-bar"] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .menubar-wrapper ul[role="menu-bar"]::-webkit-scrollbar {
        display: none;
    }
    .menubar-wrapper ul[role="menu-bar"] > li {
        font-size: 14px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }
    .menubar-wrapper ul[role="menu-bar"] > li > a {
        font-size: 14px !important;
    }
    .page-content {
        margin-top: 42px;
    }

    /* Server detail: stack info and action vertically */
    .server-detail-inline {
        flex-direction: column;
        gap: 10px;
    }
    .detail-action {
        flex: none;
        width: 100%;
    }

    /* Footer dialog: max-width clamps inline width:30rem on narrow screens */
    .standard-dialog {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }
}

/* ── Standard phone portrait (≤ 429px) ── */
@media (max-width: 429px) {
    .menubar-wrapper ul[role="menu-bar"] > li {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    .menubar-wrapper ul[role="menu-bar"] > li > a {
        font-size: 12px !important;
    }
    .page-content {
        margin-top: 38px;
        padding: 6px;
    }

    /* Prevent iOS auto-zoom on focused inputs (triggered when font-size < 16px) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Pricing calculator rows: stack label above controls */
    .calc-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    .calc-row label {
        width: auto;
    }
    .calc-row input[type="number"],
    .calc-row select {
        width: 100%;
        box-sizing: border-box;
    }
    .calc-unit {
        display: none;
    }

    /* SSO provider grid: single column */
    .sso-grid {
        grid-template-columns: 1fr !important;
    }
    .sso-btn-last {
        grid-column: auto !important;
    }

    /* Console actions bar */
    .console-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* Quota bars: override inline width:140px so they fill their cell */
    .quota-bar-track {
        width: 100% !important;
        display: block;
    }

    /* Radio field-rows: allow wrapping at phone widths */
    .field-row {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Resource tables: horizontal scroll within pane */
    .window-pane:has(.resource-table) {
        overflow-x: auto;
    }
    .resource-table {
        min-width: 480px;
    }

    /* Server lobby table: horizontal scroll */
    #gs-lobby .window-pane {
        overflow-x: auto;
    }
    #gs-lobby table {
        min-width: 560px;
    }

    /* Game services config: tighten padding */
    #gs-config {
        padding: 8px 10px !important;
    }
}

/* ── Smaller phones (≤ 389px) — iPhone SE, older Android ── */
@media (max-width: 389px) {
    .menubar-wrapper ul[role="menu-bar"] > li {
        font-size: 11px !important;
        padding: 5px 6px !important;
    }
    .menubar-wrapper ul[role="menu-bar"] > li > a {
        font-size: 11px !important;
    }
    .page-content {
        padding: 4px;
    }
    .badge-preserved {
        font-size: 9px;
    }
}

/* Gaming server detail — Manage window two-column layout.
   Settings (left) stretches; Controls (right) is a fixed-width
   column with a full-width vertical button stack. Collapses to
   a single column at <=782px to match .gs-page-layout's breakpoint. */
.manage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 20px;
    align-items: start;
}
.manage-grid > section {
    min-width: 0;
}
.manage-section-title {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin: 0 0 6px;
}
.manage-controls {
    border-left: 1px dashed #bbb;
    padding-left: 16px;
}
.manage-action-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.manage-action-stack form,
.manage-action-stack button {
    width: 100%;
}
.manage-action-stack .manage-destroy {
    margin-top: 8px;
}
@media (max-width: 782px) {
    .manage-grid {
        grid-template-columns: 1fr;
    }
    .manage-controls {
        border-left: none;
        border-top: 1px dashed #bbb;
        padding-left: 0;
        padding-top: 12px;
    }
}