/* public/css/style.css */

:root {
    --color-canvas: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-canvas-inset: #f6f8fa;
    --color-border: #d0d7de;
    --color-border-muted: #d8dee4;
    --color-fg: #1f2328;
    --color-fg-muted: #656d76;
    --color-fg-subtle: #6e7781;
    --color-link: #0969da;
    --color-tab-active: #fd8c73;
    --color-btn-bg: #f6f8fa;
    --color-btn-border: rgba(31, 35, 40, 0.15);
    --color-btn-hover: #f3f4f6;
    --color-btn-active: #eaeef2;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--color-canvas);
    color: var(--color-fg);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans",
        Helvetica,
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

body {
    margin: 0;
    background: var(--color-canvas);
    line-height: 1.5;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

button {
    font: inherit;
}

/* ---------- Layout ---------- */

.page-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 40px 0 72px;
}

/* ---------- Repository header / breadcrumb ---------- */

.repository-top {
    width: 100%;
}

.repository-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 32px;
    margin-bottom: 8px;
}

.repository-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    font-size: 20px;
    line-height: 30px;
}

.repository-name {
    color: var(--color-fg);
    font-weight: 600;
}

.repository-name-link {
    color: var(--color-fg);
}

.repository-name-link:hover {
    color: var(--color-link);
    text-decoration: none;
}

.repository-breadcrumb strong {
    color: var(--color-fg);
    font-weight: 600;
}

.repository-breadcrumb a:not(.repository-name) {
    color: var(--color-link);
}

.breadcrumb-separator {
    margin: 0 8px;
    color: var(--color-fg-muted);
}

/* ---------- Buttons (GitHub .btn) ---------- */

.github-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--color-btn-border);
    border-radius: 6px;
    background: var(--color-btn-bg);
    color: var(--color-fg);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    box-shadow:
        0 1px 0 rgba(31, 35, 40, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
}

.github-button:hover {
    background: var(--color-btn-hover);
    border-color: var(--color-btn-border);
    color: var(--color-fg);
    text-decoration: none;
    transition-duration: 0.1s;
}

.github-button:active {
    background: var(--color-btn-active);
    border-color: var(--color-btn-border);
}

.github-button svg {
    color: var(--color-fg-muted);
}

/* ---------- Tabs ---------- */

.repository-tabs {
    display: flex;
    align-items: flex-end;
    height: 54px;
    margin-top: 8px;
    border-bottom: 1px solid var(--color-border-muted);
}

.repository-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 54px;
    padding: 0 16px;
    color: var(--color-fg-muted);
    font-weight: 500;
    user-select: none;
    text-decoration: none;
}

.repository-tab.active {
    color: var(--color-fg);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--color-tab-active);
}

.repository-tab svg {
    color: var(--color-fg-muted);
}

/* ---------- Description ---------- */

.repository-description {
    margin: 16px 0 24px;
    color: var(--color-fg-muted);
    line-height: 20px;
}

/* ---------- File browser (GitHub .Box) ---------- */

.repository-files {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-canvas);
}

.repository-toolbar {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-canvas-subtle);
}

.repository-selector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-btn-border);
    border-radius: 6px;
    background: var(--color-canvas);
    color: var(--color-fg);
    font-weight: 500;
    line-height: 32px;
    box-shadow:
        0 1px 0 rgba(31, 35, 40, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.repository-selector svg {
    color: var(--color-fg-muted);
}

.repository-file-list {
    width: 100%;
}

.repository-file-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 96px;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border-muted);
    background: var(--color-canvas);
    color: var(--color-fg);
    text-decoration: none;
    transition: background 80ms ease;
}

.repository-file-row:last-child {
    border-bottom: 0;
}

.repository-file-row:hover {
    background: var(--color-canvas-subtle);
    text-decoration: none;
}

.repository-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-fg-muted);
}

.repository-file-icon svg {
    width: 16px;
    height: 16px;
}

.repository-file-name {
    min-width: 0;
    overflow: hidden;
    color: var(--color-fg);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repository-file-row:hover .repository-file-name {
    color: var(--color-link);
    text-decoration: underline;
}

.repository-file-size {
    color: var(--color-fg-muted);
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

/* ---------- README ---------- */

.readme,
.file-viewer {
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-canvas);
}

.readme-header,
.file-viewer-header {
    min-height: 44px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-canvas-subtle);
}

.readme-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--color-fg);
    font-weight: 600;
}

.readme-header svg {
    color: var(--color-fg-muted);
}

/* ---------- Discord button ---------- */

a.discord-btn {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 16px;
    border-radius: 6px;
    background-color: #5865f2;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    border: 1px solid transparent;
}

a.discord-btn:hover {
    background-color: #4752c4;
    color: #ffffff !important;
}

a.discord-btn:active {
    background-color: #3c45a5;
}

.discord-note {
    display: inline-block;
    margin-left: 12px;
    color: var(--color-fg);
    font-size: 21px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.25;
    vertical-align: middle;
}

/* ---------- Red "Source Code Usage" section ---------- */

.markdown-body .dr-source-usage,
.markdown-body .dr-source-usage *,
.readme-content .dr-source-usage,
.readme-content .dr-source-usage * {
    color: #d1242f !important;
}

/* ---------- Markdown body ---------- */

.markdown-body,
.readme-content {
    padding: 16px;
    color: var(--color-fg);
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;
}

.markdown-body > :first-child,
.readme-content > :first-child {
    margin-top: 0;
}

.markdown-body > :last-child,
.readme-content > :last-child {
    margin-bottom: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
.readme-content h1,
.readme-content h2,
.readme-content h3,
.readme-content h4,
.readme-content h5,
.readme-content h6 {
    color: var(--color-fg);
    font-weight: 600;
    line-height: 1.25;
}

.markdown-body h1,
.readme-content h1 {
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-muted);
    font-size: 2em;
}

.markdown-body h2,
.readme-content h2 {
    margin-top: 24px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-muted);
    font-size: 1.5em;
}

.markdown-body h3,
.readme-content h3 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: 1.25em;
}

.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
.readme-content h4,
.readme-content h5,
.readme-content h6 {
    margin-top: 24px;
    margin-bottom: 16px;
}

.markdown-body p,
.readme-content p {
    margin: 0 0 16px;
}

.markdown-body ul,
.markdown-body ol,
.readme-content ul,
.readme-content ol {
    margin: 0 0 16px;
    padding-left: 2em;
}

.markdown-body blockquote,
.readme-content blockquote {
    margin: 0 0 16px;
    padding: 0 1em;
    border-left: 4px solid var(--color-border);
    color: var(--color-fg-muted);
}

.markdown-body img,
.readme-content img {
    max-width: 100%;
    height: auto;
}

.markdown-body table,
.readme-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-bottom: 16px;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
}

.markdown-body th,
.markdown-body td,
.readme-content th,
.readme-content td {
    padding: 6px 13px;
    border: 1px solid var(--color-border);
}

.markdown-body th,
.readme-content th {
    background: var(--color-canvas-subtle);
    font-weight: 600;
}

.markdown-body code,
.readme-content code {
    padding: 0.2em 0.4em;
    border-radius: 6px;
    background: rgba(175, 184, 193, 0.2);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    font-size: 85%;
}

.markdown-body pre,
.readme-content pre {
    margin: 0 0 16px;
    padding: 16px;
    overflow: auto;
    border-radius: 6px;
    background: var(--color-canvas-subtle);
    line-height: 1.45;
}

.markdown-body pre code,
.readme-content pre code {
    padding: 0;
    background: transparent;
}

.markdown-body a,
.readme-content a {
    color: var(--color-link);
}

.markdown-body hr,
.readme-content hr {
    height: 1px;
    margin: 24px 0;
    border: 0;
    background: var(--color-border-muted);
}

/* ---------- File viewer ---------- */

.file-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 56px;
    padding: 8px 16px;
}

.file-viewer-file {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.file-viewer-file svg {
    color: var(--color-fg-muted);
}

.file-viewer-file strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-fg);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-viewer-meta {
    margin-left: 8px;
    color: var(--color-fg-muted);
    font-size: 12px;
    white-space: nowrap;
}

.file-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ---------- Code viewer ---------- */

.code-container {
    width: 100%;
    overflow: auto;
    background: var(--color-canvas);
}

.code-table {
    width: 100%;
    border-collapse: collapse;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    font-size: 12px;
    line-height: 1.5;
    tab-size: 4;
}

.code-row:hover {
    background: var(--color-canvas-subtle);
}

.line-number {
    min-width: 50px;
    padding: 0 16px;
    text-align: right;
    user-select: none;
    vertical-align: top;
}

.line-number-text {
    display: inline-block;
    min-width: 24px;
    color: var(--color-fg-subtle);
    font-size: 12px;
}

.line-code {
    padding: 0 16px;
    white-space: pre;
    vertical-align: top;
    color: var(--color-fg);
}

/* Fallback plain <pre> rendering */
.source-code {
    display: block;
    min-width: max-content;
    margin: 0;
    padding: 16px;
    background: var(--color-canvas);
    color: var(--color-fg);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    font-size: 12px;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
}

/* ---------- Binary ---------- */

.binary-file {
    padding: 48px 32px;
    color: var(--color-fg-muted);
    text-align: center;
}

.binary-file p {
    margin: 0 0 20px;
}

/* ---------- Error page ---------- */

.error-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 64px 0;
    text-align: center;
}

.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-fg-muted);
    font-size: 24px;
    font-weight: 600;
}

.error-page h1 {
    margin: 0 0 8px;
    color: var(--color-fg);
    font-size: 24px;
    font-weight: 600;
}

.error-page p {
    margin: 0 0 24px;
    color: var(--color-fg-muted);
}

/* ---------- Highlight.js GitHub light tokens ---------- */

.hljs {
    color: var(--color-fg);
    background: transparent;
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
    color: #cf222e;
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
    color: #8250df;
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
    color: #0550ae;
}

.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
    color: #0a3069;
}

.hljs-built_in,
.hljs-symbol {
    color: #953800;
}

.hljs-comment,
.hljs-code,
.hljs-formula {
    color: #6e7781;
}

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
    color: #0550ae;
}

.hljs-subst {
    color: var(--color-fg);
}

.hljs-section {
    color: #0550ae;
    font-weight: 700;
}

.hljs-bullet {
    color: #735c0f;
}

.hljs-emphasis {
    color: var(--color-fg);
    font-style: italic;
}

.hljs-strong {
    color: var(--color-fg);
    font-weight: 600;
}

.hljs-addition {
    color: #116329;
}

.hljs-deletion {
    color: #82071e;
}

.hljs-params,
.hljs-property {
    color: var(--color-fg);
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {

    .page-container {
        width: calc(100% - 32px);
        padding-top: 24px;
    }

    .repository-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .repository-title-row > .github-button {
        width: 100%;
    }

    .repository-file-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .repository-file-size {
        display: none;
    }

    .file-viewer-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .file-viewer-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {

    .page-container {
        width: calc(100% - 20px);
        padding-top: 16px;
    }

    .repository-breadcrumb {
        font-size: 18px;
    }

    .repository-file-row {
        padding: 8px 12px;
    }

    .markdown-body,
    .readme-content {
        padding: 14px;
        font-size: 15px;
    }
}