/* lesspoo — DevEx wedge. Muddy brown background, bright lime accent, mono everything,
   tongue-in-cheek. Personas 1 + 9 (devs who understand the joke). */
/* design review: tomi "sludge" olafsson. brief: lowercase everywhere, prompt prefix on cmds,
   tabular bullets, refactor !important, keep the dashed lines (don't let a snob convert them). */

:root[data-site="lesspoo"] {
    --lp-bg: #2a201a;
    --lp-surface: #36281e;
    --lp-fg: #f3eee0;
    --lp-muted: #b9a692;
    --lp-accent: #84cc16;
    --lp-accent-deep: #65a30d;
    --lp-warn: #fbbf24;
    --lp-rule: #4a3829;
    --lp-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", monospace;
}
html[data-site="lesspoo"], body { background: var(--lp-bg); color: var(--lp-fg); }
body {
    font-family: var(--lp-mono); margin: 0; line-height: 1.55; font-size: 15px;
    -webkit-font-smoothing: antialiased;
    /* Sludge: lowercase everywhere. brand voice. */
    text-transform: lowercase;
    font-variant-numeric: tabular-nums slashed-zero;
}
/* Numbers and addresses keep their case — only "writing" gets lowercased. */
.lp-keep-case, code, kbd, time, .lp-shell { text-transform: none; }

.lp-container { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }

.lp-header { background: var(--lp-bg); padding: 1rem 0; border-bottom: 1px dashed var(--lp-rule); }
.lp-header .lp-container { display: flex; justify-content: space-between; align-items: center; }
.lp-brand {
    color: var(--lp-fg); text-decoration: none; font-weight: 700;
    display: inline-flex; align-items: baseline; gap: 0;
}
.lp-brand-tld { color: var(--lp-accent); }
/* Sludge: lean in. .poo suffix for the brand wordmark. */
.lp-brand-suffix { color: var(--lp-muted); opacity: .55; font-weight: 400; }
.lp-nav { display: flex; align-items: center; gap: .25rem; }
.lp-nav a {
    color: var(--lp-muted); text-decoration: none; margin-left: 1rem; font-size: .9rem;
    transition: color .12s ease;
}
.lp-nav a:hover { color: var(--lp-fg); }
.lp-nav a:focus-visible { outline: 1px dashed var(--lp-accent); outline-offset: 4px; }

/* Sludge: refactor !important via specificity. */
.lp-nav a.lp-cta { color: var(--lp-accent); }
.lp-nav a.lp-cta:hover { color: var(--lp-fg); }

.lp-main { padding: 2.5rem 0 4rem; }
.lp-hero h1 {
    font-size: 2.4rem; margin: 0 0 1rem;
    font-weight: 400; letter-spacing: -.01em;
    line-height: 1.18;
    /* Just to be explicit. */
    text-transform: lowercase;
}
.lp-accent { color: var(--lp-accent); }
.lp-lede { color: var(--lp-muted); max-width: 64ch; }

.lp-shell {
    background: #14100c; color: var(--lp-fg);
    border: 1px solid var(--lp-rule); border-left: 3px solid var(--lp-accent);
    padding: 1rem 1.25rem; margin-top: 1.5rem;
    overflow-x: auto; font-size: .85rem;
    line-height: 1.7;
    /* Shell content keeps its case. */
    text-transform: none;
}
/* Sludge: every cmd line gets a faint $ prompt prefix. */
.lp-cmd::before {
    content: "$ "; color: var(--lp-muted); font-weight: 400;
}
.lp-cmd { color: var(--lp-accent); display: block; }
.lp-out { color: var(--lp-muted); display: block; padding-left: 1ch; }
.lp-ok { color: var(--lp-accent); }

.lp-actions { margin-top: 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.lp-btn {
    display: inline-block; padding: .6rem 1.1rem;
    text-decoration: none; border: 1px solid var(--lp-rule); border-radius: 0;
    font-family: var(--lp-mono);
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.lp-btn-primary { background: var(--lp-accent); color: #1a1f00; border-color: var(--lp-accent); }
.lp-btn-primary:hover { background: var(--lp-accent-deep); border-color: var(--lp-accent-deep); color: #1a1f00; }
.lp-btn-ghost { color: var(--lp-fg); }
.lp-btn-ghost:hover { color: var(--lp-accent); border-color: var(--lp-accent); }
.lp-btn:focus-visible { outline: 1px dashed var(--lp-accent); outline-offset: 3px; }

/* Bullets — Sludge: tabular column, units snap right. */
.lp-bullets { margin-top: 3rem; }
.lp-bullets ul { list-style: none; padding: 0; margin: 0; }
.lp-bullets li {
    padding: .85rem 0;
    border-bottom: 1px dashed var(--lp-rule);
    color: var(--lp-muted);
    display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; align-items: baseline;
}
.lp-bullets li strong {
    color: var(--lp-accent);
    text-align: right;
    font-variant-numeric: tabular-nums slashed-zero;
}

::selection { background: var(--lp-accent); color: #1a1f00; }

.lp-footer { padding: 2rem 0; border-top: 1px dashed var(--lp-rule); color: var(--lp-muted); font-size: .85rem; margin-top: 4rem; }
.lp-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.lp-footer a { color: var(--lp-muted); text-decoration: none; }
.lp-footer a:hover { color: var(--lp-accent); }

.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--lp-accent); color: #1a1f00;
    padding: .55rem 1rem; font-weight: 700; z-index: 1000;
    text-transform: lowercase;
}
.skip-to-content:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}