/* ==========================================
   STAGIT-NG — SAGE / FOREST LIGHT THEME
   ========================================== */

:root {
    color-scheme: light;

    --bg: #f5f8f4;
    --surface: #ffffff;
    --surface-hover: #edf5ec;
    --surface-raised: #ffffff;

    --border: #dce8da;
    --border-soft: #eaf0e8;

    --text: #29382e;
    --text-secondary: #687a6b;
    --muted: #94a397;

    --accent: #388052;
    --accent-hover: #23663c;

    --green: #348454;
    --red: #c45d5d;
    --purple: #8064a4;
    --orange: #b47b3e;

    --radius: 8px;
    --transition: 160ms ease;
}

/* Base */

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    padding: 32px clamp(16px, 4vw, 64px);
    color: var(--text);
    background: var(--bg);
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
    font-size: 13px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
    margin: 0;
    color: #263a2c;
    font-weight: 600;
}

img, h1, h2 {
    vertical-align: middle;
}

img {
    border: 0;
    max-width: 100%;
}

/* Links */

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

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

a:target {
    background: #dceedd;
    color: #245d38;
    border-radius: 4px;
}

a.d, a.h, a.i, a.line {
    text-decoration: none;
}

#blob a {
    color: var(--text-secondary);
}

#blob a:hover {
    color: var(--accent-hover);
}

/* Loading */

#stagit-ng-status {
    color: var(--muted);
    padding: 12px 0;
}

/* Main content */

#content {
    max-width: 1500px;
    margin: 0 20px;
}

#content table {
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Tables */

table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: inherit;
}

table thead td {
    color: #667c69;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--border);
    padding: 5px 6px;
}

table td {
    padding: 7px 12px;
}

#content table td {
    vertical-align: top;
    white-space: nowrap;
}

/* Table hover */

#branches tr,
#tags tr,
#index tr,
#log tr,
#files tr,
#blame tr,
#diffstat tr,
table.ssdiff tr {
    transition: background var(--transition);
}

#branches tr:hover td,
#tags tr:hover td,
#index tr:hover td,
#log tr:hover td,
#files tr:hover td,
#blame tr:hover td,
#diffstat tr:hover td,
table.ssdiff tr:hover td {
    background-color: var(--surface-hover);
}

/* Log */

#log tr td:nth-child(2) {
    white-space: normal;
}

/* Fixed-width cells */

.cw {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.cmsg {
    width: clamp(16ch, calc(100vw - 36ch), 90ch);
}

.cdesc {
    width: clamp(16ch, calc(100vw - 36ch), 90ch);
}

.cdate {
    width: 14ch;
    color: var(--muted);
}

.cgx {
    width: clamp(12ch, calc(100vw - 30ch), 33ch);
}

.csize {
    min-width: 6ch;
    text-align: right;
    color: var(--text-secondary);
}

.cstat {
    min-width: 14ch;
    text-align: right;
    color: var(--text-secondary);
}

/* File and branch names */

#files td:nth-child(2),
#branches td:nth-child(1),
#tags td:nth-child(1),
#index td:nth-child(1) {
    min-width: 100px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Git graph */

#graph {
    color: var(--green);
}

#graph td {
    color: var(--text-secondary);
}

/* Hover reveal */

@media (hover: hover) {
    #content table td,
    #graph td {
        position: relative;
    }

    td:hover > .cmsg > *,
    td:hover > .cdesc > * {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        width: max-content;
        max-width: min(90vw, calc(100vw - 16ch));
        padding: 0 0.6em;
        overflow: visible;
        white-space: normal;
        background-color: var(--surface-raised);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 5px;
        box-shadow: 0 5px 15px #294a3018;
        -webkit-user-drag: none;
    }

    td:hover > .cmsg ~ .refs,
    #graph td.gm:hover .gmi > .gmt ~ .refs,
    #graph td.gm:focus-within .gmi > .gmt ~ .refs {
        visibility: hidden;
    }
}

/* Code viewer */

pre,
#blob {
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    overflow-x: auto;
    line-height: 1.7;
}

code {
    color: #36734a;
}

/* Diff colors */

table.ssdiff td {
    border-color: var(--border-soft);
}

ins {
    background: #e1f3e4;
    color: #246a3b;
    text-decoration: none;
}

del {
    background: #fae9e7;
    color: #ad4646;
    text-decoration: none;
}

/* Selection */

::selection {
    background: #b8dfbd;
    color: #204b2b;
}

/* Scrollbars */

* {
    scrollbar-width: thin;
    scrollbar-color: #b7cbb7 var(--bg);
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #b7cbb7;
    border-radius: 10px;
    border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
    background: #8eae91;
}

/* Mobile */

@media (max-width: 700px) {
    body {
        padding: 18px 12px;
        font-size: 12px;
    }

    #content {
        overflow-x: auto;
    }

    pre,
    #blob {
        padding: 12px;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}