@import "/static/reset.css";
@import "/static/theme.css";

body {
    padding: 1rem;
}

header, main, footer {
    padding: 1rem 1.5rem;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
}

header {
    background: var(--color-primary-950);
    color: var(--color-primary-100);
    border-radius: 6px;
}

footer {
    color: var(--color-gray-400);
    padding-top: 0;
}

.join-link {
    color: var(--color-gray-400);
}

ul {
    flex-direction: column;
    display: flex;
    gap: 1.25rem;
    font-size: 1.25rem;
}

li {
    display: flex;
    gap: 1rem;
    align-items: center;
}

li img {
    width: 20px;
    aspect-ratio: 1 / 1;
}

li .favicon-fallback {
    width: 20px;
    height: 20px;
    background: var(--color-gray-900);
    border-radius: 2px;
}

.user-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-primary-900);
    font-size: 0.875rem;
}

.user-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.user-action {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-primary-900);
    color: var(--color-primary-100);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.user-action:hover {
    background: var(--color-primary-950);
    transform: translateY(-1px);
}

.user-action.admin {
    background: var(--color-green-700);
}

.user-action.admin:hover {
    background: var(--color-green-700);
    opacity: 0.9;
}

.user-action.docs {
    background: var(--color-gray-600);
}

.user-action.docs:hover {
    background: var(--color-gray-400);
}

.user-action.logout {
    background: var(--color-red-700);
}

.user-action.logout:hover {
    background: var(--color-red-700);
    opacity: 0.9;
}

.user-action i {
    font-size: 0.875rem;
}

/* Override form hiding for logout */
.user-actions form {
    display: inline !important;
}

/* Action Section Styles */
.action-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-gray-900);
}

.action-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--color-gray-100);
}

.action-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.action-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-gray-900);
    border-radius: 8px;
    border: 1px solid var(--color-gray-600);
    text-decoration: none;
    color: var(--color-gray-100);
    transition: all 0.2s ease;
}

.action-card:hover {
    background: var(--color-gray-600);
    border-color: var(--color-gray-400);
    transform: translateY(-2px);
}

.action-card-primary {
    background: var(--color-primary-900);
    border-color: var(--color-primary-900);
    color: var(--color-primary-100);
}

.action-card-primary:hover {
    background: var(--color-primary-950);
    border-color: var(--color-primary-900);
}

.action-card i {
    font-size: 1.5rem;
    opacity: 0.8;
}

.action-content {
    flex: 1;
}

.action-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.action-description {
    font-size: 0.875rem;
    opacity: 0.8;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .user-bar {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        text-align: center;
    }

    .user-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .action-cards {
        grid-template-columns: 1fr;
    }

    .action-card {
        padding: 1rem;
    }
}
/* Ring health and tier list.
   The member list on the front page is a flat list, not cards; these pages follow it. */

.health-intro {
    color: var(--color-gray-400);
    margin-bottom: 2rem;
    line-height: 1.5;
    font-size: 0.9375rem;
}

.health-list {
    gap: 1.5rem;
}

.health-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.health-site {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.score {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.score-number {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    opacity: 0.65;
}

.score-S, .score-A { color: var(--color-green-600); }
.score-B          { color: var(--color-primary-400); }
.score-C, .score-D { color: var(--color-yellow-400); }
.score-F          { color: var(--color-red-400); }
.score-none       { color: var(--color-gray-600); }

.reasons {
    gap: 0.375rem;
    font-size: 0.875rem;
    padding-left: 2.25rem;
}

.reason {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.reason-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.reason-cost {
    color: var(--color-red-300);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
}

.reason-advice {
    color: var(--color-gray-500);
    font-size: 0.8125rem;
    font-style: italic;
    overflow-wrap: anywhere;
}

.checks-key {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-gray-900);
}

.checks-key h2 {
    font-size: 1rem;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 1rem;
}

.key-list { gap: 0.75rem; font-size: 0.875rem; }

.key-item {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
}

.key-severity {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: center;
}

.key-critical { background: var(--color-red-400); }
.key-major    { background: var(--color-red-300); }
.key-minor    { background: var(--color-yellow-400); }

.reason i { flex-shrink: 0; font-size: 0.8125rem; }

.reason-critical i { color: var(--color-red-400); }
.reason-major i    { color: var(--color-red-300); }
.reason-minor i    { color: var(--color-yellow-400); }
.reason-ok i       { color: var(--color-green-600); }
.reason-none i     { color: var(--color-gray-600); }

.reason-title { color: var(--color-gray-200); }

.reason-detail {
    color: var(--color-gray-400);
    overflow-wrap: anywhere;
}

.tier-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tier-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.tier-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    flex-shrink: 0;
    border-radius: 6px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-gray-950);
}

.tier-S { background: #ff7f7f; }
.tier-A { background: #ffbf7f; }
.tier-B { background: #ffdf7f; }
.tier-C { background: #ffff7f; }
.tier-D { background: #bfff7f; }
.tier-F { background: #7fbfff; }
.tier-none { background: var(--color-gray-800); color: var(--color-gray-400); }

.tier-members {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 1;
    min-height: 3.5rem;
    background: var(--color-primary-950);
    border-radius: 6px;
}

.tier-member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    background: var(--color-gray-900);
    font-size: 0.875rem;
    text-decoration: none;
}

.tier-member img, .tier-member .favicon-fallback {
    width: 16px;
    height: 16px;
    aspect-ratio: 1 / 1;
}

.tier-member .favicon-fallback {
    background: var(--color-gray-800);
    border-radius: 2px;
}

.tier-member-plain { color: var(--color-gray-400); }

.tier-empty {
    color: var(--color-gray-600);
    align-self: center;
    padding-left: 0.5rem;
}

.tier-pending { margin-top: 1rem; }

footer { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* Ring pages: responsive.
   Everything below is scoped to .page-ring so the member listing is untouched. */

.page-ring .health-list {
    font-size: 1rem;
    gap: 1.5rem;
}

/* A long member name must push the score onto its own line rather than crush it. */
.page-ring .health-head { flex-wrap: wrap; }
.page-ring .health-site { flex: 1 1 12rem; }
.page-ring .health-site a { overflow-wrap: anywhere; }
.page-ring .tier-member span { overflow-wrap: anywhere; }

/* Nothing on these pages may push the page sideways. */
.page-ring main,
.page-ring header,
.page-ring footer { overflow-wrap: break-word; }

@media (max-width: 48rem) {
    /* At this width the frame costs more than it gives: 2.5rem of padding each side
       leaves under 300px of a 375px screen for the content itself. */
    .page-ring { padding: 0.5rem; }

    .page-ring header,
    .page-ring main,
    .page-ring footer { padding: 0.875rem 1rem; }

    .page-ring h1 { font-size: 1.25rem; }
    .page-ring .health-intro { font-size: 0.875rem; margin-bottom: 1.25rem; }
    .page-ring .health-list { gap: 1.25rem; }

    /* Indenting the reasons under the name reads well on a desktop and wastes a tenth
       of the screen on a phone. */
    .page-ring .reasons { padding-left: 1.5rem; }
    .page-ring .reason-detail,
    .page-ring .reason-advice { font-size: 0.8125rem; }

    .page-ring .tier-label { width: 2.5rem; font-size: 1.25rem; }
    .page-ring .tier-members { min-height: 2.5rem; padding: 0.375rem; gap: 0.375rem; }
    .page-ring .tier-member { font-size: 0.8125rem; padding: 0.25rem 0.5rem; }

    .page-ring .checks-key { margin-top: 2rem; padding-top: 1.5rem; }
}

@media (max-width: 22rem) {
    /* Only the narrowest phones give up the severity icons, which carry the colour that
       tells a critical fault from a cosmetic one. 375px keeps them. */
    .page-ring .reasons { padding-left: 0; }
    .page-ring .reason i { display: none; }
    .page-ring .reason-title { font-weight: 700; }
    .page-ring .tier-label { width: 2rem; font-size: 1rem; }
    .page-ring .tier-member img,
    .page-ring .tier-member .favicon-fallback { display: none; }
}