/* --- Artifacts service vocabulary -------------------------------------
   Layered on top of aurora.css, which supplies the Aurora Dark base:
   the body background and type ramp, the hero and section scaffolding,
   the button and form vocabulary, and the alert styles.

   This file adds what the artifacts service needs on top of that:

     * A few index-page additions (client-configuration snippets).
     * The management console shell — banner, left nav, content frame.
     * The data-presentation vocabulary the console is built from —
       stat tiles, category cards, the category rail, and tables.

   There is no inline CSS anywhere in the templates, which is what
   lets the systemd unit's Content-Security-Policy keep its
   style-src free of 'unsafe-inline'. Keep it that way: a new
   component gets a class here, never a style attribute. */


/* =====================================================================
   Index page additions
   ===================================================================== */

.hero-signed-in-note {
    margin-top: 22px;
    font-size: 13.5px;
    color: #7f90ab;
}

.kind-base-url {
    margin-top: 14px;
    font-size: 12.5px;
    color: #cbd7ea;
}

.kind-layout {
    margin-top: 14px;
    font-size: 12.5px;
    color: #7cc4ff;
    word-break: break-all;
}

.kind-hint {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #7f90ab;
}

.snippet-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 18px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 48px 0 48px;
    box-sizing: border-box;
}

.snippet-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 24px 26px;
}

.snippet-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.snippet-copy {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #9fb0ca;
}

.snippet-body {
    margin-top: 16px;
    margin-bottom: 0;
    padding: 14px 16px;
    background: rgba(4, 10, 26, 0.72);
    border: 1px solid rgba(124, 196, 255, 0.18);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #cbd7ea;
    /* Command lines carry long index URLs. Wrapping them keeps the
       whole command readable in a narrow card; a horizontal scrollbar
       would hide the half that matters behind a gesture. */
    white-space: pre-wrap;
    word-break: break-all;
}


/* =====================================================================
   Management console shell
   ===================================================================== */

.console-body {
    background-color: #060a18;
}

.console {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.console-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 16, 36, 0.92);
}

.console-banner-fill {
    flex: 1 1 auto;
}

.console-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.console-identity-name {
    font-size: 14px;
    font-weight: 600;
    color: #e8edf6;
}

.console-identity-role {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7cc4ff;
    border: 1px solid rgba(124, 196, 255, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
}

.console-signout {
    margin: 0;
}

.console-signout-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #e8edf6;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    cursor: pointer;
}

.console-signout-button:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

.console-body-row {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
}

.console-nav {
    flex: 0 0 220px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 0;
}

.console-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.console-nav-item {
    margin: 0;
}

.console-nav-link {
    display: block;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #9fb0ca;
    border-left: 3px solid transparent;
}

.console-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
}

.console-nav-link[data-active="true"] {
    color: #ffffff;
    border-left-color: #2e9bff;
    background: rgba(23, 99, 198, 0.16);
}

.console-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 36px 48px 36px;
}

.console-flash {
    margin-bottom: 20px;
}

.console-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #5c6b84;
    text-align: center;
    padding: 18px;
    font-size: 12.5px;
}

.console-page-head {
    margin-bottom: 26px;
}

.console-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: #e8edf6;
}

.console-subtitle {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #9fb0ca;
    max-width: 820px;
}

.console-section-heading {
    margin-top: 36px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7f90ab;
}

.console-form {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 28px 30px;
    max-width: 720px;
}


/* =====================================================================
   Stat tiles
   ===================================================================== */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.stat-tile {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 18px 20px;
}

.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: #e8edf6;
    word-break: break-all;
}

.stat-label {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7f90ab;
}


/* =====================================================================
   Category cards and the browse rail
   ===================================================================== */

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.category-card {
    display: block;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 22px 24px;
    color: inherit;
}

.category-card:hover {
    border-color: rgba(124, 196, 255, 0.45);
    background: rgba(23, 99, 198, 0.12);
    color: inherit;
}

.category-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.category-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #e8edf6;
}

.category-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7cc4ff;
    border: 1px solid rgba(124, 196, 255, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.category-card-copy {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #9fb0ca;
}

.category-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #cbd7ea;
}

.category-card-layout {
    margin-top: 12px;
    font-size: 12px;
    color: #7f90ab;
    word-break: break-all;
}

.category-card-layout-sep {
    margin: 0 6px;
    opacity: 0.5;
}

.category-card-empty {
    margin-top: 12px;
    font-size: 12.5px;
    color: #7f90ab;
}

.category-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.category-rail-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #9fb0ca;
}

.category-rail-item:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.category-rail-item[data-active="true"] {
    color: #04122b;
    background: #2e9bff;
    border-color: #2e9bff;
}

.category-rail-count {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.75;
}


/* =====================================================================
   Search bar
   ===================================================================== */

.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.search-input {
    flex: 1 1 280px;
    max-width: 520px;
    margin: 0;
}

.search-submit {
    margin: 0;
}

.search-clear {
    font-size: 13px;
    color: #9fb0ca;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =====================================================================
   Data tables
   ===================================================================== */

.table-frame {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.03);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.data-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7f90ab;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    white-space: nowrap;
}

.data-table tbody td {
    padding: 13px 16px;
    color: #cbd7ea;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cell-strong {
    font-weight: 600;
    color: #e8edf6;
}

.cell-muted {
    color: #7f90ab;
    white-space: nowrap;
}

.cell-link {
    font-weight: 600;
    color: #7cc4ff;
    word-break: break-all;
}

.cell-link:hover {
    color: #ffffff;
}

.cell-description {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #7f90ab;
    /* Prose breaks at word boundaries. ``break-all`` here would split
       "packages" across two lines mid-word, which is what it did
       before this rule was split in two. */
    overflow-wrap: break-word;
}

.cell-description code {
    /* A repository-relative path has no spaces to break at, so it
       does need the aggressive rule the surrounding prose does not. */
    word-break: break-all;
}

.cell-digest {
    font-size: 11.5px;
    color: #7f90ab;
    max-width: 260px;
    word-break: break-all;
}


/* =====================================================================
   Package detail
   ===================================================================== */

.breadcrumb {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #7f90ab;
}

.breadcrumb-separator {
    margin: 0 8px;
    opacity: 0.6;
}

.version-block {
    margin-top: 28px;
}

.version-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.version-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #e8edf6;
}

.version-meta {
    font-size: 12.5px;
    color: #7f90ab;
}

.inline-form {
    margin: 0;
}

.danger-button {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 999px;
    color: #f3b3b3;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.danger-button:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.7);
}

.empty-note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #9fb0ca;
}


/* =====================================================================
   Form additions
   ===================================================================== */

.form-hint {
    margin-top: 7px;
    margin-bottom: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #7f90ab;
}

.form-field--checkbox {
    margin-top: 20px;
}

.form-file {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #cbd7ea;
    font-family: inherit;
    font-size: 14px;
}

.form-file::file-selector-button {
    margin-right: 14px;
    padding: 7px 16px;
    background: rgba(46, 155, 255, 0.16);
    border: 1px solid rgba(124, 196, 255, 0.35);
    border-radius: 999px;
    color: #cbd7ea;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.form-file::file-selector-button:hover {
    background: rgba(46, 155, 255, 0.28);
    color: #ffffff;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #cbd7ea;
    cursor: pointer;
}


/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 900px) {
    .snippet-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        padding: 12px 24px 0 24px;
    }

    .console-banner {
        padding: 14px 20px;
    }

    .console-body-row {
        flex-direction: column;
    }

    .console-nav {
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 10px 0;
    }

    .console-nav-list {
        display: flex;
        flex-wrap: wrap;
    }

    .console-nav-link {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 18px;
    }

    .console-nav-link[data-active="true"] {
        border-left-color: transparent;
        border-bottom-color: #2e9bff;
    }

    .console-content {
        padding: 22px 20px 40px 20px;
    }
}