:root {
    --bg:       #f6f5f0;
    --surface:  #ffffff;
    --border:   #ddd;
    --text:     #1a1a1a;
    --muted:    #6b7280;
    --accent:   #2563eb;
    --accent-h: #1d4ed8;
    --danger:   #dc2626;
    --r:        5px;
    --font:     system-ui, -apple-system, sans-serif;
    --mono:     ui-monospace, monospace;

    --bug-bg:   #fee2e2; --bug-fg:   #b91c1c;
    --feat-bg:  #dcfce7; --feat-fg:  #15803d;
    --q-bg:     #ede9fe; --q-fg:     #7c3aed;

    --open-fg:   #15803d;
    --closed-fg: #6b7280;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:      #111827;
        --surface: #1f2937;
        --border:  #374151;
        --text:    #f9fafb;
        --muted:   #9ca3af;

        --bug-bg:  #450a0a; --bug-fg:  #fca5a5;
        --feat-bg: #052e16; --feat-fg: #86efac;
        --q-bg:    #2e1065; --q-fg:    #c4b5fd;
    }
}

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

body {
    font-family: var(--font);
    background:  var(--bg);
    color:       var(--text);
    line-height: 1.6;
    padding:     0 1rem 3rem;
}

.container { max-width: 780px; margin: 0 auto; }

/* ── Header ── */
header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         .875rem 0;
    border-bottom:   1px solid var(--border);
    margin-bottom:   1.5rem;
}

.wordmark {
    font-weight: 700;
    font-size:   1.05rem;
    color:       var(--text);
    text-decoration: none;
    letter-spacing: -.02em;
}

nav {
    display:     flex;
    align-items: center;
    gap:         .875rem;
    font-size:   .875rem;
}

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

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

/* ── Buttons ── */
.btn {
    display:         inline-flex;
    align-items:     center;
    padding:         .35rem .8rem;
    border:          1px solid var(--border);
    border-radius:   var(--r);
    background:      var(--surface);
    color:           var(--text);
    font-size:       .875rem;
    font-family:     var(--font);
    text-decoration: none;
    cursor:          pointer;
    white-space:     nowrap;
}
.btn:hover { background: var(--bg); }

.btn-primary {
    background:   var(--accent);
    color:        #fff;
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); }

.btn-danger {
    background:   var(--danger);
    color:        #fff;
    border-color: var(--danger);
}

.btn-tiny {
    padding:   .1rem .35rem;
    font-size: .75rem;
}

/* ── Badges ── */
.badge {
    display:       inline-block;
    padding:       .15rem .45rem;
    border-radius: 3px;
    font-size:     .7rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space:   nowrap;
}
.type-bug      { background: var(--bug-bg);  color: var(--bug-fg);  }
.type-feature  { background: var(--feat-bg); color: var(--feat-fg); }
.type-question { background: var(--q-bg);    color: var(--q-fg);    }

.status-pill {
    font-size:   .8rem;
    font-weight: 600;
}
.status-open   { color: var(--open-fg);   }
.status-closed { color: var(--closed-fg); }

.project-tag {
    font-size:  .8rem;
    color:      var(--muted);
}

/* ── Toolbar / Filters ── */
.toolbar {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
    margin-bottom: 1rem;
}

.toolbar form {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
    flex:        1;
}

.status-tabs { display: flex; gap: 0; }

.tab {
    padding:         .3rem .7rem;
    font-size:       .875rem;
    color:           var(--muted);
    text-decoration: none;
    border:          1px solid var(--border);
    margin-left:     -1px;
    background:      var(--surface);
}
.tab:first-child { border-radius: var(--r) 0 0 var(--r); }
.tab:last-child  { border-radius: 0 var(--r) var(--r) 0; }
.tab.active { color: var(--text); background: var(--bg); font-weight: 600; }
.tab:hover:not(.active) { color: var(--text); }

select {
    padding:     .3rem .6rem;
    border:      1px solid var(--border);
    border-radius: var(--r);
    background:  var(--surface);
    color:       var(--text);
    font-size:   .875rem;
    font-family: var(--font);
    cursor:      pointer;
}

/* ── Issue list ── */
.issue-list {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        .4rem;
}

.issue-row {
    display:         flex;
    align-items:     baseline;
    gap:             .65rem;
    padding:         .75rem .875rem;
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--r);
    text-decoration: none;
    color:           var(--text);
    flex-wrap:       wrap;
}
.issue-row:hover { border-color: var(--accent); }

.issue-title { flex: 1; font-weight: 500; min-width: 0; }

.issue-meta { font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* ── Issue detail ── */
.page-header {
    margin-bottom: .75rem;
}

.back {
    font-size:       .875rem;
    color:           var(--muted);
    text-decoration: none;
}
.back:hover { color: var(--text); }

.issue-view { }

.issue-headline {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
    margin-bottom: .4rem;
}

.issue-title-full {
    font-size:   1.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .35rem;
}

.issue-byline {
    font-size:    .85rem;
    color:        var(--muted);
    margin-bottom: .75rem;
}

.body-text {
    background:   var(--surface);
    border:       1px solid var(--border);
    border-radius: var(--r);
    padding:      .875rem 1rem;
    white-space:  pre-wrap;
    font-size:    .95rem;
    margin-bottom: 1rem;
}

.admin-actions {
    display:       flex;
    gap:           .5rem;
    flex-wrap:     wrap;
    margin-bottom: 1.25rem;
}

/* ── Comments ── */
.comments-section { margin-top: 1.5rem; }

.comments-heading {
    font-size:     .95rem;
    font-weight:   600;
    color:         var(--muted);
    margin-bottom: .75rem;
}

.comment {
    border-left: 3px solid var(--border);
    padding:     .5rem .75rem;
    margin-bottom: .875rem;
}

.comment-meta {
    font-size:    .8rem;
    color:        var(--muted);
    margin-bottom: .25rem;
    display:      flex;
    align-items:  center;
    gap:          .5rem;
    flex-wrap:    wrap;
}

.comment-body { font-size: .95rem; }

.comment-form { margin-top: 1.25rem; }

/* ── Forms ── */
.issue-form, .comment-form {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.field { display: flex; flex-direction: column; gap: .3rem; }

.field-row {
    display: flex;
    gap:     1rem;
    flex-wrap: wrap;
}
.field-row .field { flex: 1; min-width: 10rem; }

label {
    font-size:   .875rem;
    font-weight: 600;
}

.muted { color: var(--muted); font-weight: 400; }

input[type=text], select, textarea {
    width:         100%;
    padding:       .45rem .75rem;
    border:        1px solid var(--border);
    border-radius: var(--r);
    background:    var(--surface);
    color:         var(--text);
    font-size:     .95rem;
    font-family:   var(--font);
}

input:focus, select:focus, textarea:focus {
    outline:        2px solid var(--accent);
    outline-offset: 1px;
    border-color:   transparent;
}

textarea { min-height: 110px; resize: vertical; }

.form-actions { display: flex; gap: .5rem; align-items: center; }

/* ── Misc ── */
.empty {
    text-align:  center;
    color:       var(--muted);
    padding:     3rem 0;
    font-size:   .95rem;
}

.alert {
    padding:       .7rem 1rem;
    background:    var(--bug-bg);
    color:         var(--bug-fg);
    border:        1px solid currentColor;
    border-radius: var(--r);
    font-size:     .9rem;
    margin-bottom: 1rem;
}

.alert-ok {
    background: var(--feat-bg);
    color:      var(--feat-fg);
}

/* ── Admin page ── */
.user-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9rem;
    margin-bottom:   1.5rem;
}

.user-table th {
    text-align:    left;
    padding:       .4rem .6rem;
    border-bottom: 2px solid var(--border);
    font-size:     .8rem;
    color:         var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.user-table td {
    padding:       .5rem .6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.muted-cell { color: var(--muted); font-size: .85rem; }

.admin-tag {
    font-size:    .7rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:        var(--muted);
    margin-left:  .3rem;
}

.add-heading { font-size: 1rem; margin-bottom: .6rem; }

.add-row {
    display: flex;
    gap:     .5rem;
    max-width: 420px;
}

.add-row input { flex: 1; }

/* ── Landing / sign-in ── */
.landing {
    max-width:   440px;
    margin:      3rem auto 0;
    text-align:  center;
    padding:     2rem 1.5rem;
    background:  var(--surface);
    border:      1px solid var(--border);
    border-radius: 8px;
}

.landing-title {
    font-size:     1.5rem;
    margin-bottom: .75rem;
}

.landing-copy {
    color:         var(--muted);
    font-size:     .95rem;
    margin-bottom: .6rem;
}

.btn-google {
    display:       inline-flex;
    align-items:   center;
    gap:           .5rem;
    padding:       .6rem 1.4rem;
    font-size:     .95rem;
    font-weight:   600;
    margin:        1.25rem 0 1rem;
}

.landing-note {
    font-size: .8rem;
    color:     var(--muted);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }