/* beans — phone first: one column, big tap targets, no frame.
   ⚠️ Plain CSS only: the box's CSP blocks inline scripts and styles. */

:root {
    --fg: #1f2328; --muted: #59636e; --bg: #fff; --soft: #f6f8fa; --line: #d1d9e0;
    --accent: #0b5cad; --bar: #24364b; --bar-fg: #fff; --warn: #fff6d6; --danger: #d1242f;
}
@media (prefers-color-scheme: dark) {
    :root {
        --fg: #e6edf3; --muted: #9198a1; --bg: #0d1117; --soft: #161b22; --line: #3d444d;
        --accent: #4493f8; --bar: #161b22; --bar-fg: #e6edf3; --warn: #3a3000; --danger: #ff7b72;
    }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5;
       color: var(--fg); background: var(--bg); }
a { color: var(--accent); }
.error { color: var(--danger); }
.warning { background: var(--warn); padding: .4rem .6rem; border-radius: .3rem; }

header { display: flex; align-items: center; padding: .6rem 1rem;
         background: var(--bar); color: var(--bar-fg); position: sticky; top: 0; }
header .site { color: var(--bar-fg); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.signout { margin-left: auto; }
.signout button { background: none; color: var(--bar-fg); border: 1px solid currentColor;
                  border-radius: .3rem; padding: .15rem .6rem; }

main { max-width: 44rem; margin: 0 auto; padding: .5rem 1rem 3rem; }
label { display: block; margin: .6rem 0; }
input[type=text], input[type=password], select, textarea {
    display: block; width: 100%; font: inherit; padding: .45rem; margin-top: .2rem;
    color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: .3rem; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; vertical-align: middle; }
button { font: inherit; padding: .45rem .9rem; border-radius: .3rem; cursor: pointer;
         border: 1px solid var(--line); background: var(--soft); color: var(--fg); }

details { margin: 1rem 0; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: .4rem; }
summary { cursor: pointer; font-weight: 600; }

.project-head { display: flex; align-items: center; gap: .4rem; margin: 1.4rem 0 .2rem; }
.project h2 { margin: 0; font-size: 1.15rem; }
.check { margin: .35rem 0; }
.hint { color: var(--muted); font-size: .9rem; }

/* The ⋯ menu next to a project name: a <details>, so it needs no script (CSP). */
details.menu { position: relative; margin: 0; padding: 0; border: none; }
details.menu summary { list-style: none; padding: 0 .6rem; font-size: 1.3rem; line-height: 1;
                       color: var(--muted); font-weight: normal; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu form { position: absolute; left: 0; top: 100%; z-index: 1; white-space: nowrap;
                    background: var(--bg); border: 1px solid var(--line); border-radius: .4rem;
                    padding: .3rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.stage { margin: .6rem 0 .2rem; font-size: .8rem; text-transform: uppercase;
         letter-spacing: .05em; color: var(--muted); }
.beans { list-style: none; margin: 0; padding: 0; }
.beans li { border-bottom: 1px solid var(--line); }
.beans a { display: block; padding: .55rem 0; text-decoration: none; color: var(--fg); }
.num { color: var(--muted); }
.more { margin-top: 2rem; }

.meta { color: var(--muted); margin-top: -.6rem; }
.moves { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; }
.read { white-space: pre-wrap; word-wrap: break-word; background: var(--soft);
        padding: .8rem; border-radius: .4rem; font-size: .9rem; }
.block { margin: 1rem 0; }
.danger summary { color: var(--danger); }