
/*
 * CARPATHIAN HAVEN
 * Main Stylesheet
 *
 * 01. Fonts
 * 02. Base & Typography
 * 03. Layout
 * 04. Header & Navigation
 * 05. Hero
 * 06. Buttons
 * 07. Project Stages
 * 08. Progress
 * 09. Content Sections
 * 10. Footer
 * 11. Operating System
 * 12. Authentication
 * 13. Responsive Layout
 */


/* ==========================================================
   01. FONTS
   ========================================================== */

@font-face {
    font-display: swap;
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/pt-sans-v18-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/pt-sans-v18-latin-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Sans Narrow";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/pt-sans-narrow-v19-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Sans Narrow";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/pt-sans-narrow-v19-latin-700.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "PT Mono";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/pt-mono-v14-latin-regular.woff2") format("woff2");
}


/* ==========================================================
   02. BASE & TYPOGRAPHY
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #1d2528;
    color: #e8e5dc;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

h1,
h2,
h3,
h4 {
    font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.15;
}

p {
    line-height: 1.6;
}

small {
    color: #8d9898;
}

.public-site a {
    color: inherit;
}

.public-site h1,
.public-site h2,
.public-site h3,
.public-site h4,
.public-site p {
    margin-top: 0;
}

/* Compact labels */

.header-nav,
.eyebrow,
.status-pill,
.stage-subtitle,
.progress-caption,
.join-note {
    font-family: "PT Sans Narrow", Arial, sans-serif;
}

.eyebrow {
    margin-bottom: 16px;
    color: #aac6b2;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

a {
  color: #e8e5dc;
}

a:hover {
  color: #f2f1ee;
}


/* ==========================================================
   03. LAYOUT
   ========================================================== */

.container {
    width: min(1100px, calc(100% - 48px));
    margin-inline: auto;
}

.content-narrow {
    max-width: 730px;
}

.section {
    padding: 96px 0;
}

.section-alternate {
    background: #252f31;
}

.section h2 {
    margin-bottom: 32px;
    font-size: clamp(2rem, 4vw, 3rem);
}

.section p {
    max-width: 730px;
}

.section-intro {
    margin-bottom: 40px;
    color: #bdc9c4;
    font-size: 1.15rem;
}


/* ==========================================================
   04. HEADER & NAVIGATION
   ========================================================== */

.site-header {
    border-bottom: 1px solid #394548;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.site-brand {
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.header-nav a {
    color: #c1cbc6;
    font-size: 0.9rem;
    text-decoration: none;
}

.header-nav a:hover {
    color: #ffffff;
}


/* ==========================================================
   05. HERO
   ========================================================== */

.hero {
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 110px 0;
    background: linear-gradient(
        135deg,
        #243731 0%,
        #1d2528 75%
    );
}

.hero-content {
    max-width: 1100px;
}

.hero h1 {
    margin-bottom: 24px;
    font-size: clamp(3.5rem, 9vw, 7rem);
    letter-spacing: -0.025em;
}

.hero-lead {
    max-width: 690px;
    margin-bottom: 24px;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    line-height: 1.45;
}

.hero-principle {
    color: #adc5b5;
    font-size: 1.05rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}


/* ==========================================================
   06. BUTTONS
   ========================================================== */

/* Standard form buttons */

button {
    padding: 12px 20px;
    border: 0;
    border-radius: 4px;
    background: #9dbba7;
    color: #17221c;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

button:hover {
    background: #b7d0bd;
}

/* Public website link buttons */

.public-site .button {
    display: inline-block;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.public-site .button-primary {
    background: #a9c5af;
    color: #17251e;
}

.public-site .button-primary:hover {
    background: #c0d6c4;
}

.public-site .button-secondary {
    border-color: #799486;
    color: #e8e5dc;
}

.public-site .button-secondary:hover {
    background: #35443f;
}


/* ==========================================================
   07. PROJECT STAGES
   ========================================================== */

.stage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.stage-card {
    padding: 24px;
    border: 1px solid #43514e;
    border-radius: 5px;
    background: #1d282a;
}

.stage-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 30px;
}

.stage-number {
    color: #9eb8a8;
    font-family: "PT Mono", monospace;
    font-size: 0.85rem;
}

.status-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status-active {
    background: #385744;
    color: #c7e8ce;
}

.status-planned {
    background: #3b4548;
    color: #c1c9c9;
}

.stage-card h3 {
    margin-bottom: 12px;
    font-size: 1.5rem;
}

.stage-subtitle {
    color: #aac6b2;
    font-style: italic;
}

.stage-card p:last-child {
    margin-bottom: 0;
    color: #bec9c4;
    font-size: 0.94rem;
}


/* ==========================================================
   08. PROGRESS
   ========================================================== */

.progress-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 70px;
    align-items: start;
}

.progress-highlight {
    margin-bottom: 0;
    color: #aac6b2;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 9rem;
    font-weight: 700;
    line-height: 1;
}

.progress-caption {
    max-width: 240px;
    color: #bdc9c4;
}

.progress-details h3 {
    font-size: 1.7rem;
}

.progress-details h4 {
    margin-top: 28px;
    font-size: 1.2rem;
}

.progress-details li {
    margin-bottom: 7px;
}


/* ==========================================================
   09. CONTENT SECTIONS
   ========================================================== */

/* Highlighted statements */

.statement {
    margin: 36px 0;
    padding: 12px 0 12px 24px;
    border-left: 3px solid #a9c5af;
    color: #e7efe9;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
}

/* Join section */

.join-section {
    text-align: center;
}

.join-section .section-intro,
.join-section p {
    margin-right: auto;
    margin-left: auto;
}

.join-note {
    margin-top: 30px;
    color: #aac6b2;
    font-size: 0.9rem;
}


/* ==========================================================
   10. FOOTER
   ========================================================== */

.site-footer {
    padding: 28px 0;
    border-top: 1px solid #394548;
    color: #aab7b1;
    font-size: 0.85rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}


/* ==========================================================
   11. OPERATING SYSTEM
   ========================================================== */

/* Temporary member-area layout */

.site-container {
    max-width: 900px;
    margin: 100px auto;
    padding: 0 24px;
}

.site-container h1 {
    margin-bottom: 8px;
    font-size: 2.5rem;
}

.status {
    margin-top: 32px;
    color: #9dbba7;
}


/* ==========================================================
   12. AUTHENTICATION
   ========================================================== */

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 360px;
    margin: 28px 0;
}

.login-form label {
    font-size: 0.9rem;
}

.login-form input {
    padding: 12px;
    border: 1px solid #556064;
    border-radius: 4px;
    background: #283236;
    color: #e8e5dc;
    font: inherit;
}

.login-error {
    color: #f0a6a6;
}


/* ==========================================================
   13. RESPONSIVE LAYOUT
   ========================================================== */

@media (max-width: 950px) {

    .stage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .container {
        width: min(100% - 32px, 1100px);
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 18px 0;
    }

    .header-nav {
        gap: 18px;
    }

    .hero {
        min-height: auto;
        padding: 90px 0;
    }

    .section {
        padding: 64px 0;
    }

    .stage-grid,
    .progress-layout {
        grid-template-columns: 1fr;
    }

    .progress-layout {
        gap: 30px;
    }

    .progress-highlight {
        font-size: 6rem;
    }

    .footer-inner {
        flex-direction: column;
        gap: 4px;
    }

}


/* ==========================================================
   14. MEMBERSHIP APPLICATION
   ========================================================== */

.application-container {
    max-width: 760px;
}

.application-container h1 {
    margin-bottom: 24px;
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.application-container > p {
    max-width: 650px;
}

.application-form {
    margin-top: 48px;
}

.application-form fieldset {
    min-width: 0;
    margin: 0 0 40px;
    padding: 0;
    border: 0;
}

.application-form legend {
    width: 100%;
    margin-bottom: 28px;
    padding: 0 0 12px;
    border-bottom: 1px solid #43514e;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
}

.form-field {
    margin-bottom: 30px;
}

.form-field > label,
.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #556064;
    border-radius: 4px;
    background: #283236;
    color: #e8e5dc;
    font: inherit;
}

.form-field textarea {
    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: 2px solid #a9c5af;
    outline-offset: 2px;
}

.field-help {
    margin: 4px 0 10px;
    color: #bdc9c4;
    font-size: 0.9rem;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0;
    font-weight: 400;
    cursor: pointer;
}

.choice input {
    flex-shrink: 0;
    margin-top: 7px;
    accent-color: #a9c5af;
}

.form-consent {
    margin-bottom: 32px;
    padding-top: 20px;
    border-top: 1px solid #43514e;
}

.form-errors {
    margin: 30px 0;
    padding: 16px 20px;
    border: 1px solid #9a5555;
    border-radius: 4px;
    background: #3b292b;
    color: #f2c3c3;
}

.form-errors p {
    margin: 0 0 8px;
}

.form-errors ul {
    margin-bottom: 0;
}

/* Hidden spam-trap field */

.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ==========================================================
   15. ADMINISTRATION
   ========================================================== */

.admin-container {
    width: min(1200px, calc(100% - 48px));
    margin: 60px auto;
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
}

.admin-header h1 {
    margin: 0 0 12px;
    font-size: 2.8rem;
}

.admin-header a {
    color: #aac6b2;
}

.admin-applications-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Application list */

.admin-applications-list {
    border: 1px solid #43514e;
    border-radius: 5px;
    overflow: hidden;
}

.admin-applications-list h2 {
    margin: 0;
    padding: 16px 20px;
    background: #252f31;
    font-size: 1.5rem;
}

.admin-application-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-top: 1px solid #394548;
    color: #e8e5dc;
    text-decoration: none;
}

.admin-application-item:hover {
    background: #283638;
}

.admin-application-item.selected {
    background: #30423c;
    border-left: 3px solid #a9c5af;
    padding-left: 17px;
}

.admin-application-item strong {
    font-size: 1rem;
}

.admin-application-item > span {
    overflow-wrap: anywhere;
    font-size: 0.9rem;
}

.admin-application-meta {
    color: #aab7b1;
    font-size: 0.85rem;
}

.admin-application-item .admin-application-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

/* Review status */

.status-pending {
    background: #63522d;
    color: #f1dcaa;
}

.status-approved {
    background: #385744;
    color: #c7e8ce;
}

.status-rejected {
    background: #59383a;
    color: #edc2c2;
}

/* Application details */

.admin-application-detail {
    min-width: 0;
    padding: 32px;
    border: 1px solid #43514e;
    border-radius: 5px;
    background: #252f31;
}

.admin-application-detail h2 {
    margin: 0 0 24px;
    font-size: 2.4rem;
}

.admin-application-detail h3 {
    margin: 36px 0 20px;
    color: #aac6b2;
    font-size: 1.6rem;
}

.admin-application-detail h4 {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.admin-application-detail hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid #43514e;
}

.admin-application-id {
    color: #aab7b1;
    font-family: "PT Mono", monospace;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.admin-answer {
    margin-bottom: 24px;
}

.admin-answer p {
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-answer ul {
    margin: 0;
    padding-left: 22px;
}

.admin-review-note {
    margin-top: 30px;
    padding: 16px;
    border-left: 3px solid #a9c5af;
    background: #304039;
    color: #d0e3d5;
}

/* Small screens */

@media (max-width: 750px) {

    .admin-container {
        width: min(100% - 32px, 1200px);
        margin: 32px auto;
    }

    .admin-header {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .admin-applications-layout {
        grid-template-columns: 1fr;
    }

    .admin-application-detail {
        padding: 22px;
    }

}


/* ==========================================================
   16. APPLICATION REVIEW ACTIONS
   ========================================================== */

.admin-review-actions {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid #43514e;
}

.admin-review-actions h3 {
    margin-top: 0;
}

.admin-review-actions select {
    display: block;
    width: 100%;
    max-width: 360px;
    padding: 12px;
    border: 1px solid #556064;
    border-radius: 4px;
    background: #283236;
    color: #e8e5dc;
    font: inherit;
}

.admin-review-actions button {
    margin: 0 10px 12px 0;
}

.button-danger {
    background: #684143;
    color: #f5dddd;
}

.button-danger:hover {
    background: #855054;
}

.admin-review-success,
.admin-review-error {
    margin: 20px 0;
    padding: 14px 18px;
    border-radius: 4px;
}

.admin-review-success {
    border: 1px solid #547963;
    background: #304039;
    color: #d0e3d5;
}

.admin-review-error {
    border: 1px solid #9a5555;
    background: #3b292b;
    color: #f2c3c3;
}

/* Password setup invitations */

.admin-invite-form {
    margin-top: 24px;
}


/* ==========================================================
   17. MARKDOWN DOCUMENTS
   ========================================================== */

.markdown-document {
    line-height: 1.75;
}

.markdown-document h1 {
    margin: 0 0 28px;
    font-size: 2.6rem;
}

.markdown-document h2 {
    margin: 38px 0 16px;
    font-size: 1.8rem;
}

.markdown-document h3 {
    margin: 30px 0 12px;
    font-size: 1.35rem;
}

.markdown-document p {
    margin: 0 0 20px;
}

.markdown-document ul,
.markdown-document ol {
    margin: 0 0 24px;
    padding-left: 26px;
}

.markdown-document li {
    margin-bottom: 6px;
}

.markdown-document a {
    color: #aac6b2;
}

.markdown-document img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 28px auto;
    border-radius: 4px;
}

.markdown-document blockquote {
    margin: 28px 0;
    padding: 8px 24px;
    border-left: 3px solid #a9c5af;
    color: #cbd8d0;
}

.markdown-document code {
    font-family: "PT Mono", monospace;
    font-size: 0.9em;
}

.markdown-document pre {
    max-width: 100%;
    padding: 20px;
    overflow-x: auto;
    border-radius: 4px;
    background: #151c1e;
}

.markdown-document pre code {
    font-size: 0.85rem;
}

.markdown-document table {
    width: 100%;
    margin: 24px 0;
    border-collapse: collapse;
}

.markdown-document th,
.markdown-document td {
    padding: 10px 12px;
    border: 1px solid #43514e;
    text-align: left;
}


/* ==========================================================
   18. ARCHIVE WORKSPACE
   ========================================================== */

/* Main four-column layout */

.archive-page {
    background: #192124;
}

.archive-workspace {
    display: grid;
    grid-template-columns:
        84px
        260px
        280px
        minmax(0, 1fr);
    min-height: 100vh;
}

/* Primary application navigation */

.workspace-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 20px 8px;
    border-right: 1px solid #384447;
    background: #202a2d;
}

.workspace-brand {
    display: block;
    margin-bottom: 32px;
    color: #b7d0bd;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.workspace-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 4px;
    border-radius: 4px;
    color: #adbcb6;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.workspace-nav-item:hover,
.workspace-nav-item.active {
    background: #35463e;
    color: #e8f0e9;
}

.workspace-nav-item.disabled {
    opacity: 0.45;
    cursor: default;
}

.workspace-nav-icon {
    font-size: 1.5rem;
    line-height: 1.2;
}

.workspace-nav-bottom {
    margin-top: 1em;
    padding-top: 1em;
    text-align: center;
    border-top: 1px solid #43514e;
}

.workspace-user {
    display: block;
    margin-bottom: 12px;
    color: #aab7b1;
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.workspace-logout {
    padding: 8px 6px;
    background: transparent;
    color: #b7c7bd;
    font-size: 0.8rem;
}

.workspace-logout:hover {
    background: #35463e;
    color: #ffffff;
}

/* Archive navigation tree */

.archive-sidebar {
    min-width: 0;
    border-right: 1px solid #384447;
    background: #263236;
}

.archive-sidebar-header {
    padding: 24px 18px;
    border-bottom: 1px solid #43514e;
}

.archive-sidebar-header h2 {
    margin: 0 0 4px;
    font-size: 1.6rem;
}

.archive-sidebar-header > span {
    color: #a6b7ae;
    font-size: 0.8rem;
}

.archive-tree {
    padding: 16px 8px;
}

.archive-tree details {
    min-width: 0;
}

.archive-tree summary {
    cursor: pointer;
    overflow-wrap: anywhere;
}

.archive-stage > summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 2px;
    border-radius: 4px;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    list-style: none;
}

.archive-stage > summary::-webkit-details-marker,
.archive-milestone > summary::-webkit-details-marker {
    display: none;
}

.archive-stage > summary::before {
    content: "▸";
    color: #a5b9ac;
}

.archive-stage[open] > summary::before {
    content: "▾";
}

.archive-tree summary:hover {
    background: #35443f;
}

.archive-tree-number {
    color: #9eb8a8;
    font-family: "PT Mono", monospace;
    font-size: 0.75rem;
    line-height: 1.9;
}

.archive-tree-title {
    flex: 1;
}

.tree-status {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: #6b7777;
}

.tree-status.active {
    background: #a9c5af;
}

.tree-status.completed {
    background: #8aa5c0;
}

.archive-milestone {
    margin-left: 24px;
}

.archive-milestone > summary {
    padding: 9px 6px;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 0.94rem;
    list-style: none;
    border-radius: 3px;
}

.archive-milestone > summary::before {
    content: "▸ ";
    color: #9eb8a8;
}

.archive-milestone[open] > summary::before {
    content: "▾ ";
}

.archive-dossier-list {
    padding: 4px 0 12px 10px;
}

.archive-dossier-link {
    display: block;
    margin-bottom: 3px;
    padding: 8px 10px;
    border-radius: 3px;
    color: #bdc9c4;
    font-size: 0.87rem;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.archive-dossier-link:hover {
    background: #34433f;
    color: #ffffff;
}

.archive-dossier-link.selected {
    background: #3e5348;
    color: #f4f4ed;
    font-weight: 700;
}

/* Discussion column */

.archive-discussion {
    min-width: 0;
    padding: 24px 18px;
    border-right: 1px solid #384447;
    background: #202a2d;
}

.archive-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #43514e;
}

.archive-panel-heading h2 {
    margin: 0;
    font-size: 1.45rem;
}

.archive-panel-heading span {
    color: #9aaba3;
    font-size: 0.8rem;
}

.archive-discussion-empty {
    padding: 28px 4px;
    color: #9faea7;
    font-size: 0.9rem;
}

.archive-discussion-empty p {
    margin: 0 0 16px;
}

/* Reading area */

.archive-reading-area {
    min-width: 0;
    padding: 30px;
    background: #192124;
}

.archive-paper {
    max-width: 920px;
    min-height: calc(100vh - 60px);
    margin: 0 auto;
    padding: 54px clamp(24px, 5vw, 72px);
    background: #f1ede4;
    color: #293630;
    border-radius: 3px;
    box-shadow: 0 8px 30px #00000025;
}

.archive-document-header {
    margin-bottom: 40px;
    padding-bottom: 18px;
    border-bottom: 1px solid #d0cdc2;
}

.archive-document-label {
    margin: 0 0 12px;
    color: #62736a;
    font-family: "PT Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.archive-document-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    color: #6b766d;
    font-size: 0.8rem;
}

.archive-document-status {
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Light Markdown document theme */

.archive-paper .markdown-document {
    color: #293630;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.archive-paper .markdown-document h1,
.archive-paper .markdown-document h2,
.archive-paper .markdown-document h3 {
    color: #25352e;
}

.archive-paper .markdown-document h1 {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
}

.archive-paper .markdown-document h2 {
    border-bottom: 1px solid #d0cdc2;
    padding-bottom: 10px;
}

.archive-paper .markdown-document a {
    color: #346649;
}

.archive-paper .markdown-document blockquote {
    border-left-color: #799d81;
    color: #55695a;
}

.archive-paper .markdown-document pre {
    background: #e0e0d8;
    color: #293630;
}

.archive-paper .markdown-document code {
    color: #345842;
}

.archive-paper .markdown-document th,
.archive-paper .markdown-document td {
    border-color: #c4c9be;
}

.archive-paper .markdown-document img {
    max-width: 100%;
    height: auto;
}

.archive-no-document {
    max-width: 700px;
    margin: 80px auto;
    color: #c3d0c7;
}

/* Responsive archive layout */

@media (max-width: 1250px) {

    .archive-workspace {
        grid-template-columns:
            76px
            230px
            minmax(0, 1fr);
    }

    .archive-discussion {
        grid-column: 2 / -1;
        grid-row: 2;
        border-top: 1px solid #384447;
        border-right: 0;
    }

    .archive-reading-area {
        grid-column: 3;
        grid-row: 1;
    }

}

@media (max-width: 800px) {

    .archive-workspace {
        display: flex;
        flex-direction: column;
    }

    .workspace-nav {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid #384447;
    }

    .workspace-brand {
        margin: 0 18px 0 0;
    }

    .workspace-nav-item {
        min-width: 62px;
        padding: 8px;
    }

    .workspace-user {
        display: none;
    }

    .archive-sidebar {
        border-right: 0;
        border-bottom: 1px solid #384447;
    }

    .archive-reading-area {
        padding: 16px;
    }

    .archive-paper {
        min-height: 0;
        padding: 30px 24px;
    }

    .archive-discussion {
        border-top: 1px solid #384447;
    }

}


/* ==========================================================
   19. DOSSIER COMMENTS
   ========================================================== */

.archive-comment-list {
    margin-top: 20px;
}

.archive-comment {
    padding: 18px 0;
    border-bottom: 1px solid #384447;
}

.archive-comment:first-child {
    padding-top: 4px;
}

.archive-comment-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.archive-comment-author {
    color: #d7e4d9;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.archive-comment-date {
    color: #91a49a;
    font-family: "PT Mono", monospace;
    font-size: 0.7rem;
    white-space: nowrap;
}

.archive-comment-body {
    color: #c6d1cb;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.archive-comment-edited {
    margin: 10px 0 0;
    color: #91a49a;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 0.75rem;
    font-style: italic;
}


/* ==========================================================
   20. COMMENT SUBMISSION
   ========================================================== */

.archive-comment-form {
    margin: 24px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid #43514e;
}

.archive-comment-form label {
    display: block;
    margin-bottom: 12px;
    color: #d7e4d9;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.archive-comment-form textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #55645d;
    border-radius: 4px;
    background: #182124;
    color: #e8ede8;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
}

.archive-comment-form textarea:focus {
    outline: 2px solid #91b59b;
    outline-offset: 2px;
}

.archive-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.archive-comment-form-footer span {
    color: #9aaba3;
    font-size: 0.75rem;
}

.archive-comment-form-footer button {
    padding: 10px 14px;
    background: #567663;
    color: #ffffff;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.archive-comment-form-footer button:hover {
    background: #688f76;
}

.archive-comment-error {
    padding: 10px 12px;
    border: 1px solid #9a5555;
    border-radius: 4px;
    background: #3b292b;
    color: #f2c3c3;
    font-size: 0.85rem;
}

/* ==========================================================
   21. COMMENT EDITING
   ========================================================== */

.archive-comment-edit-link {
    color: #aac6b2;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 0.8rem;
    text-decoration: none;
}

.archive-comment-edit-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.archive-comment-edit-form {
    margin: 12px 0;
}

.archive-comment-edit-form label {
    display: block;
    margin-bottom: 8px;
    color: #d7e4d9;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-weight: 700;
}

.archive-comment-edit-form textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #55645d;
    border-radius: 4px;
    background: #182124;
    color: #e8ede8;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
}

.archive-comment-edit-form textarea:focus {
    outline: 2px solid #91b59b;
    outline-offset: 2px;
}

.archive-comment-edit-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.archive-comment-edit-actions button {
    padding: 9px 14px;
    border: 0;
    border-radius: 4px;
    background: #567663;
    color: #ffffff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.archive-comment-edit-actions button:hover {
    background: #688f76;
}

.archive-comment-edit-actions a {
    color: #aabcb1;
    font-size: 0.85rem;
    text-decoration: none;
}

.archive-comment-edit-actions a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.archive-comment:target {
    scroll-margin-top: 24px;
}

/* ==========================================================
   22. COMMENT MODERATION
   ========================================================== */

.archive-comment-removed {
    padding: 12px 0;
    color: #91a49a;
    font-size: 0.85rem;
    font-style: italic;
}

.archive-comment-removed p {
    margin: 0 0 6px;
}

.archive-comment-removed time {
    font-family: "PT Mono", monospace;
    font-size: 0.7rem;
    font-style: normal;
}

.archive-comment-moderation {
    margin-top: 12px;
}

.archive-moderation-link {
    color: #b69b98;
    font-size: 0.78rem;
    text-decoration: none;
}

.archive-moderation-link:hover {
    color: #edb9b4;
    text-decoration: underline;
}

.archive-comment-moderation label {
    display: block;
    margin-bottom: 8px;
    color: #d7e4d9;
    font-size: 0.85rem;
}

.archive-comment-moderation textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid #55645d;
    border-radius: 4px;
    background: #182124;
    color: #e8ede8;
    font: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.archive-comment-edit-actions .archive-moderation-confirm {
    background: #70494a;
}

.archive-comment-edit-actions .archive-moderation-confirm:hover {
    background: #925c5e;
}


/* ==========================================================
   23. MEMBER DIRECTORY
   ========================================================== */

.member-directory-workspace {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 100vh;
}

.member-directory-main {
    min-width: 0;
    padding: 48px clamp(24px, 5vw, 80px);
    background: #192124;
}

.member-directory-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.member-directory-header {
    margin-bottom: 40px;
}

.member-directory-eyebrow {
    margin: 0 0 12px;
    color: #a2b9ac;
    font-family: "PT Mono", monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.member-directory-header h1 {
    margin: 0 0 12px;
    color: #e8ede8;
    font-size: 2.5rem;
}

.member-directory-header > p {
    color: #b7c7bd;
}

.member-directory-header .member-directory-count {
    margin-top: 20px;
    color: #9eb8a8;
    font-size: 0.85rem;
}

.member-directory-list {
    border-top: 1px solid #43514e;
}

.member-directory-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
    padding: 24px 4px;
    border-bottom: 1px solid #43514e;
}

.member-directory-identity h2 {
    margin: 0 0 6px;
    color: #e4ebe5;
    font-size: 1.3rem;
}

.member-directory-identity p {
    margin: 0;
    color: #9fb2a6;
    font-size: 0.85rem;
}

.member-directory-contact {
    overflow-wrap: anywhere;
}

.member-directory-contact a {
    color: #b1d1bb;
    text-decoration: none;
}

.member-directory-contact a:hover {
    text-decoration: underline;
}

.member-contact-private {
    color: #82948b;
    font-size: 0.85rem;
    font-style: italic;
}

.member-directory-privacy {
    margin-top: 32px;
    color: #91a49a;
    font-size: 0.82rem;
    line-height: 1.6;
}

@media (max-width: 800px) {
    .member-directory-workspace {
        display: flex;
        flex-direction: column;
    }

    .member-directory-workspace .workspace-nav {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid #384447;
    }

    .member-directory-main {
        padding: 30px 20px;
    }
}


/* ==========================================================
   24. PERSONAL ACCOUNT SETTINGS
   ========================================================== */

.member-settings-container {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.member-settings-form {
    padding: 30px;
    border: 1px solid #43514e;
    border-radius: 4px;
    background: #263236;
}

.member-settings-field {
    margin-bottom: 28px;
}

.member-settings-field > label,
.member-settings-privacy legend {
    display: block;
    margin-bottom: 10px;
    color: #e4ebe5;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.member-settings-field input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border: 1px solid #55645d;
    border-radius: 4px;
    background: #182124;
    color: #e8ede8;
    font: inherit;
}

.member-settings-field input:focus,
.member-settings-checkbox input:focus {
    outline: 2px solid #91b59b;
    outline-offset: 2px;
}

.member-settings-help {
    margin: 9px 0 0;
    color: #9fb2a6;
    font-size: 0.85rem;
    line-height: 1.5;
}

.member-settings-readonly {
    margin: 0;
    padding: 12px;
    border: 1px solid #43514e;
    border-radius: 4px;
    background: #202a2d;
    color: #bbc9c0;
    overflow-wrap: anywhere;
}

.member-settings-privacy {
    margin: 0 0 30px;
    padding: 24px 0 0;
    border: 0;
    border-top: 1px solid #43514e;
}

.member-settings-privacy legend {
    padding-top: 20px;
}

.member-settings-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #e4ebe5;
    cursor: pointer;
}

.member-settings-checkbox input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #91b59b;
}

.member-settings-save {
    padding: 12px 20px;
    border: 0;
    border-radius: 4px;
    background: #567663;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.member-settings-save:hover {
    background: #688f76;
}

.member-settings-success,
.member-settings-error {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 4px;
}

.member-settings-success {
    border: 1px solid #547963;
    background: #304039;
    color: #d0e3d5;
}

.member-settings-error {
    border: 1px solid #9a5555;
    background: #3b292b;
    color: #f2c3c3;
}

@media (max-width: 600px) {
    .member-settings-form {
        padding: 20px;
    }
}


/* ==========================================================
   25. ADMINISTRATOR OVERVIEW
   ========================================================== */

.member-admin-overview {
    margin-bottom: 56px;
    padding: 28px;
    border: 1px solid #43514e;
    border-radius: 4px;
    background: #202a2d;
}

.member-admin-header {
    margin-bottom: 24px;
}

.member-admin-header h2 {
    margin: 8px 0 0;
    color: #e8ede8;
    font-size: 1.6rem;
}

.member-admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.member-admin-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 20px 16px;
    border: 1px solid #3e4d49;
    border-radius: 4px;
    background: #263236;
}

.member-admin-stat strong {
    color: #e8ede8;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 2rem;
    line-height: 1;
}

.member-admin-stat > span {
    color: #a9bbae;
    font-size: 0.82rem;
    line-height: 1.4;
}

.member-admin-review-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-radius: 4px;
    background: #35493e;
    color: #edf3eb;
    font-weight: 700;
    text-decoration: none;
}

.member-admin-review-link:hover {
    background: #45604e;
    color: #ffffff;
}

.member-admin-pending {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    background: #665a82;
    color: #f5edff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 950px) {
    .member-admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .member-admin-overview {
        padding: 20px;
    }

    .member-admin-stats {
        grid-template-columns: 1fr;
    }

    .member-admin-pending {
        margin: 8px 0 0;
    }
}


/* ==========================================================
   26. PASSWORD MANAGEMENT
   ========================================================== */

.member-password-section {
    margin-top: 48px;
    scroll-margin-top: 24px;
}

.member-password-section h2 {
    margin: 0 0 12px;
    color: #e8ede8;
    font-size: 1.65rem;
}

.member-password-section > .member-settings-help {
    margin-bottom: 24px;
    max-width: 580px;
}

.member-password-section .member-settings-field input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border: 1px solid #55645d;
    border-radius: 4px;
    background: #182124;
    color: #e8ede8;
    font: inherit;
}

.member-password-section input[type="password"]:focus {
    outline: 2px solid #91b59b;
    outline-offset: 2px;
}

.member-password-section .member-settings-success,
.member-password-section .member-settings-error {
    margin-top: 20px;
}


/* ==========================================================
   27. ACCOUNT DELETION
   ========================================================== */

.member-deletion-section {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid #43514e;
    scroll-margin-top: 24px;
}

.member-deletion-section h2 {
    margin: 0 0 12px;
    color: #e8ede8;
    font-size: 1.65rem;
}

.member-deletion-section > p {
    color: #b7c7bd;
    line-height: 1.6;
}

.member-deletion-explanation {
    margin: 24px 0;
    padding: 22px;
    border: 1px solid #665453;
    border-radius: 4px;
    background: #302a2b;
}

.member-deletion-explanation h3 {
    margin: 0 0 14px;
    color: #e8d8d6;
    font-size: 1.1rem;
}

.member-deletion-explanation ul {
    margin: 0 0 20px;
    padding-left: 22px;
    color: #d1c5c1;
    line-height: 1.7;
}

.member-deletion-explanation p {
    margin: 12px 0 0;
    color: #d1c5c1;
    line-height: 1.6;
}

.member-deletion-form {
    border-color: #665453;
}

.member-deletion-form input[type="password"],
.member-deletion-form input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    border: 1px solid #665453;
    border-radius: 4px;
    background: #182124;
    color: #e8ede8;
    font: inherit;
}

.member-deletion-form .member-settings-checkbox {
    margin-bottom: 28px;
}

.member-deletion-button {
    padding: 12px 20px;
    border: 0;
    border-radius: 4px;
    background: #70494a;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.member-deletion-button:hover {
    background: #925c5e;
}


/* ==========================================================
   28. UNSEEN ARCHIVE ACTIVITY
   ========================================================== */

.archive-dossier-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
}

.archive-dossier-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.archive-activity-tag {
    display: inline-block;
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 3px;
    background: #665a82;
    color: #f5edff;
    font-family: "PT Sans Narrow", Arial, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.archive-dossier-link.selected .archive-activity-tag {
    background: #796998;
}

.archive-panel-heading .archive-activity-tag {
    color: #f5edff;
}


/* ==========================================================
   29. STAGE AND MILESTONE DOCUMENT LINKS
   ========================================================== */

.archive-tree-document-link {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.archive-tree-document-link:hover {
    color: #d6e9d9;
    text-decoration: underline;
}

.archive-tree-document-link.selected {
    color: #d2e8d4;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.archive-tree-document-link:focus-visible {
    outline: 2px solid #a9c5af;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ==========================================================
   30. STAGE AND MILESTONE READING LAYOUT
   ========================================================== */

/*
 * Stage and milestone documents have no discussion panel.
 * The reading pane occupies the available space.
 *
 * Adjust grid-column values if the existing workspace
 * uses explicitly assigned grid tracks.
 */

.archive-workspace--document .archive-reading-area {
    grid-column: span 2;
}