:root { --bg:#06070a; --panel:#0b1220; --ink:#ffffff; --muted:#9fb4c6; --accent:#4aa3ff; --danger:#ff5b5b; --ok:#3dd08a; --warn:#ffb84d; --line:#324a66; }
*{box-sizing:border-box}
html,body{height:100%}

/* Screen-reader only helper:
   - visually hidden but available to assistive technologies
   - becomes visible when focused (useful for skip links) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Make sr-only content visible when focused (for keyboard accessibility) */
.sr-only:focus,
.sr-only:active {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: normal;
}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:10}
header h1{font-size:16px;margin:0;font-weight:600}
.chip{border:1px solid var(--line);padding:.25rem .5rem;border-radius:999px;color:var(--muted)}
.btn{border:1px solid var(--line);background:#121523;color:var(--ink);padding:.4rem .7rem;border-radius:.5rem;cursor:pointer}
.btn:hover{border-color:var(--line)}
.btn[aria-pressed="true"], .btn.active{outline:2px solid var(--accent)}
.toolbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}

.wrap{display:grid;grid-template-columns:300px 1fr;gap:12px;height:calc(100vh - 54px)}
aside{border-right:1px solid var(--line);padding:10px;background:#0f1320;overflow:auto}
main{overflow:auto;padding:12px}
.group{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--panel)}
.group>header{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--line);background:transparent;position:static}
.group>header .meta{color:var(--muted);font-size:12px;margin-left:auto}

.task {
    display: block;
    padding: .35rem .6rem;
    border-bottom: 1px dashed var(--line)
}
.task:last-child{border-bottom:none}

.topline {
    display: flex;
    align-items: center;
    gap: .4rem
}
.bullet{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;user-select:none}

.bullet.done {
    border-color: var(--ok);
    background: var(--ok)
}

.bullet.abandoned {
    border-color: var(--danger);
    background: var(--danger)
}
.bullet:focus{outline:2px solid var(--accent)}

.row {
    min-width: 0
}
.text[contenteditable]{outline:none}
.text{white-space:pre-wrap}
.muted{color:var(--muted)}
.tag{color:#b4d2ff}
.pill{display:inline-block;font-size:11px;border:1px solid var(--line);padding:0 .35rem;border-radius:4px;margin-left:.25rem;color:var(--muted)}
.indent{width:18px}
.children{margin-left:22px;border-left:1px dashed var(--line)}
.collapsed>.children{display:none}
.collapse-btn{cursor:pointer;color:var(--muted);font-size:12px;border:1px solid var(--line);border-radius:4px;padding:.1rem .3rem;margin-right:.35rem}
.menu{position:relative}
.menu button{cursor:pointer}
.menu .fly{position:absolute;top:120%;left:0;background:#0a0d16;border:1px solid var(--line);border-radius:8px;min-width:220px;box-shadow:0 10px 24px rgba(0,0,0,.35);display:none;z-index:20}
.menu.open .fly{display:block}
.fly .item{display:flex;align-items:center;justify-content:space-between;padding:.45rem .6rem;border-bottom:1px solid var(--line);cursor:pointer}
.fly .item:last-child{border-bottom:none}
.fly .item:hover{background:#141a2a}

.filters section{border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
.filters h3{font-size:12px;color:var(--muted);margin:0;padding:.4rem .6rem;border-bottom:1px solid var(--line)}
.filters .content{padding:.5rem .6rem;display:grid;gap:.35rem}
input, select{background:#0b0e18;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:.35rem .5rem}
.tagchip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px 6px;margin:2px}

:root {
    --bg: #06070a;
    --panel: #0b1220;
    --ink: #ffffff;
    --muted: #9fb4c6;
    --accent: #4aa3ff;
    --danger: #ff5b5b;
    --ok: #3dd08a;
    --warn: #ffb84d;
    --line: #324a66;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial
}

header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 10
}

header h1 {
    font-size: 16px;
    margin: 0;
    font-weight: 600
}

.chip {
    border: 1px solid var(--line);
    padding: .25rem .5rem;
    border-radius: 999px;
    color: var(--muted);
    display: none; /* hidden by default; shown on large screens only */
}

.btn {
    border: 1px solid var(--line);
    background: #121523;
    color: var(--ink);
    padding: .4rem .7rem;
    border-radius: .5rem;
    cursor: pointer;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
}

.empty-state h3 {
    margin-bottom: 1rem;
    color: var(--ink);
}

.active-filters {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--panel);
    border-radius: 4px;
    font-size: 0.9em;
}

.active-filters .filter-group {
    margin: 0.5rem 0;
}

.active-filters .filter-group strong {
    color: var(--accent);
}
.btn:hover {
    border-color: var(--line)
}

.btn[aria-pressed="true"], .btn.active {
    outline: 2px solid var(--accent)
}

.toolbar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto
}

.wrap {
    display: block; /* single-column so main fills the full width */
    gap: 12px;
    height: calc(100vh - 54px)
}

aside {
    border-right: 1px solid var(--line);
    padding: 10px;
    background: #0f1320;
    overflow: auto
}

main {
    overflow: auto;
    padding: 12px;
    min-height: calc(100vh - 54px);
}

.group {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 8px 0;
    background: var(--panel)
}

.group > header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--line);
    background: transparent;
    position: static
}

.group > header .meta {
    color: var(--muted);
    font-size: 12px;
    margin-left: auto
}

/* Task container stays as block-level padding holder; default (mobile / narrow) layout: multi-line */
.task {
    display: block;
    padding: .35rem .6rem;
    border-bottom: 1px dashed #1b2030;
}

.task:last-child {
    border-bottom: none;
}

.bullet {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
}

.bullet.done {
    border-color: var(--ok);
}

.bullet.abandoned {
    border-color: var(--danger);
}

.bullet:focus {
    outline: 2px solid var(--accent);
}

/* Default row/topline/children behavior (narrow screens): use flex/stack so meta sits beneath the topline */
.row {
    display: block;
    min-width: 0;
}

.topline {
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* Muted metadata uses the normal flow (appears under/topline on narrow screens) */
.muted {
    color: var(--muted);
    font-size: 12px;
}

/* Children keep original indentation */
.children {
    margin-left: 22px;
    border-left: 1px dashed var(--line);
}

/* Editable text keeps wrapping behavior on small screens */
.topline .text {
    min-width: 140px;
    min-height: 1.2em;
    display: inline-block;
    white-space: pre-wrap;
    overflow: visible;
}

/* --- Small-screen: hamburger + overlay + stacked task layout (default stacked) --- */
@media (max-width: 719px) {
    /* Make layout single column so main fills width */
    .wrap {
        display: block;
    }

    /* Hide the sidebar off-canvas by default (positioned above content) */
    aside {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: var(--panel);
        border-right: 1px solid var(--line);
        padding: 12px;
        transform: translateX(-110%);
        transition: transform 220ms ease;
        z-index: 60;
        overflow: auto;
        box-shadow: 16px 0 40px rgba(0,0,0,0.6);
    }

    /* Ensure main content remains accessible beneath overlay */
    main {
        position: relative;
        z-index: 10;
    }

    /* Show the hamburger button (display overrides inline style) */
    #asideToggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: .35rem .6rem;
        margin-right: .25rem;
    }

    /* When document root has .aside-open, slide the aside in and show a backdrop */
    html.aside-open aside,
    .aside-open aside {
        transform: translateX(0);
    }

    /* Backdrop overlay to dim content when aside open */
    html.aside-open main::before,
    .aside-open main::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 50;
        pointer-events: none;
    }

    /* Ensure focusable elements inside aside are on top */
    html.aside-open aside * {
        z-index: 61;
    }

    /* Keep stacked layout (muted under topline) on small screens — defaults already handle it */
}

/* --- Medium screens: behave like small screens (aside off-canvas + hamburger) --- */

/* --- Desktop: restore sidebar (two-column) while keeping tasks stacked (muted under topline) --- */
@media (min-width: 720px) {
    /* Keep default stacked layout for tasks — .muted remains under the topline */

    /* Show the small descriptive chip on desktop */
    .chip {
        display: inline-block;
    }

    /* Hide hamburger on desktop and restore aside to normal flow */
    #asideToggle { display: none !important; }
    aside {
        position: relative;
        transform: none;
        width: auto;
        box-shadow: none;
        height: auto;
    }

    /* Desktop two-column layout: 300px sidebar + main content */
    .wrap {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 12px;
        height: calc(100vh - 54px);
    }
}

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

.tag {
    color: #b4d2ff
}

.pill {
    display: inline-block;
    font-size: 11px;
    border: 1px solid var(--line);
    padding: 0 .35rem;
    border-radius: 4px;
    margin-left: .25rem;
    color: var(--muted)
}

.indent {
    width: 18px
}

.children {
    margin-left: 22px;
    border-left: 1px dashed #253050
}

/* Collapse fix: hide nested .children when parent task has .collapsed */
.collapsed .children {
    display: none
}

.collapse-btn {
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: .1rem .3rem;
    margin-right: .35rem
}

.menu {
    position: relative
}

.menu button {
    cursor: pointer
}

.menu .fly {
    position: absolute;
    top: 120%;
    left: 0;
    background: #0a0d16;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-width: 220px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    display: none;
    z-index: 20
}

.menu.open .fly {
    display: block
}

.fly .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer
}

.fly .item:last-child {
    border-bottom: none
}

.fly .item:hover {
    background: #141a2a
}

.filters section {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px
}

.filters h3 {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    padding: .4rem .6rem;
    border-bottom: 1px solid var(--line)
}

.filters .content {
    padding: .5rem .6rem;
    display: grid;
    gap: .35rem
}

input, select {
    background: #0b0e18;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .35rem .5rem
}

.tagchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 6px;
    margin: 2px
}

/* Selected state for tag filters */
.tagchip[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(110, 168, 254, .12); /* subtle accent-tinted background */
}

.search {
    display: flex;
    gap: .5rem
}

.search input {
    flex: 1
}

.statusbar {
    position: sticky;
    bottom: 0;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding: .4rem .6rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between
}

.hint {
    color: var(--muted);
    font-size: 12px
}

.kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 4px;
    color: #cbd5e1
}

.tags-suggest {
    position: absolute;
    background: #0a0e18;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    display: none;
    z-index: 50
}

.tags-suggest.open {
    display: block
}

.tags-suggest .s-item {
    padding: .25rem .5rem;
    cursor: pointer
}

.tags-suggest .s-item:hover {
    background: #141a2a
}

.tags-suggest .s-item.selected {
    background: #2563eb;
    color: #fff;
    font-weight: 500
}

.archived-banner {
    background: #0a101b;
    border: 1px dashed var(--line);
    padding: .5rem .75rem;
    border-radius: 8px;
    margin-bottom: 8px
}
.search{display:flex;gap:.5rem}
.search input{flex:1}
.statusbar{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:.4rem .6rem;color:var(--muted);display:flex;justify-content:space-between}

.hint{color:var(--muted);font-size:12px}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;border:1px solid var(--line);border-radius:4px;padding:0 4px;color:#cbd5e1}

.tags-suggest{position:absolute;background:#0a0e18;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.35);display:none;z-index:50}
.tags-suggest.open{display:block}
.tags-suggest .s-item{padding:.25rem .5rem;cursor:pointer}
.tags-suggest .s-item:hover{background:#141a2a}

.archived-banner{background:#0a101b;border:1px dashed #334; padding:.5rem .75rem;border-radius:8px;margin-bottom:8px}