/* devlog.css — the devlog's look (Deploy 75a). Shared by the devlog pages and the small cards on the front page and dashboard. */
.dl { max-width: 760px; margin: 0 auto; padding: 2.2rem 1.1rem 4rem; color: var(--text-body); }
.dl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.dl-title { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--text-white); margin: 0; }
.dl-sub { color: var(--text-muted); font-size: .92rem; margin: .3rem 0 0; }
.dl-new { padding: .55rem .9rem; border-radius: 9px; background: var(--accent); color: var(--bg-deep); font-weight: 700; font-size: .85rem; text-decoration: none; }
.dl-item { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.05rem 1.15rem; margin: 0 0 .8rem; text-decoration: none; color: inherit; transition: border-color .15s; }
.dl-item:hover { border-color: var(--accent-border); }
.dl-item h2 { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--text-white); margin: .2rem 0 .35rem; }
.dl-item p { margin: 0; font-size: .9rem; color: var(--text-body); line-height: 1.5; }
.dl-meta { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; font-size: .76rem; color: var(--text-dim); letter-spacing: .02em; }
.dl-kind { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; padding: .14rem .5rem; border-radius: 999px; background: rgba(167,139,250,.16); color: #C4B5FD; }
.dl-kind.patch { background: rgba(251,191,36,.14); color: #FBBF24; }
.dl-kind.draft { background: rgba(224,85,85,.15); color: #F87171; }
.dl-body { font-size: 1.02rem; line-height: 1.7; color: var(--text-body); }
.dl-body h2, .dl-body h3, .dl-body h4 { font-family: 'Playfair Display', serif; color: var(--text-white); margin: 1.6rem 0 .5rem; }
.dl-body h2 { font-size: 1.4rem; } .dl-body h3 { font-size: 1.15rem; } .dl-body h4 { font-size: 1rem; }
.dl-body p { margin: 0 0 1rem; }
.dl-body ul { margin: 0 0 1rem 1.2rem; padding: 0; } .dl-body li { margin: .3rem 0; }
.dl-body blockquote { margin: 0 0 1rem; padding: .4rem 1rem; border-left: 3px solid var(--accent-border); color: var(--text-light); }
.dl-body a { color: var(--accent); }
.dl-body code { font-family: 'JetBrains Mono', monospace; font-size: .88em; background: rgba(255,255,255,.06); padding: .05rem .3rem; border-radius: 4px; }
/* spoilers: hidden until tapped */
.dl-sp { position: relative; display: inline; border-radius: 4px; background: #2A2F45; color: transparent; cursor: pointer; padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dl-sp .dl-sp-in { visibility: hidden; }
.dl-sp::after { content: 'spoiler'; position: absolute; left: .4em; top: 50%; transform: translateY(-50%); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8B93B8; pointer-events: none; white-space: nowrap; }
.dl-sp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dl-sp.open { background: rgba(255,255,255,.06); color: inherit; cursor: auto; }
.dl-sp.open .dl-sp-in { visibility: visible; }
.dl-sp.open::after { content: none; }
.dl-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1.8rem 0 1rem; padding: .8rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dl-like { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-light); font: 600 .88rem/1 'Outfit', system-ui, sans-serif; cursor: pointer; }
.dl-like.on { border-color: rgba(244,114,182,.6); color: #F472B6; background: rgba(244,114,182,.08); }
.dl-like:disabled { opacity: .6; cursor: default; }
.dl-admin { margin-left: auto; display: flex; gap: .5rem; }
.dl-admin a, .dl-admin button { font-size: .8rem; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 8px; padding: .35rem .65rem; cursor: pointer; text-decoration: none; }
.dl-comments h3 { font-family: 'Playfair Display', serif; color: var(--text-white); font-size: 1.2rem; margin: 1.6rem 0 .8rem; }
.dl-c { padding: .75rem 0; border-top: 1px solid rgba(255,255,255,.05); }
.dl-c .who { font-weight: 600; color: var(--text-light); font-size: .88rem; overflow-wrap: anywhere; word-break: break-word; } /* (77c sweep, R6-04) */
.dl-c .dev { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0D1330; background: #FBBF24; border-radius: 999px; padding: .1rem .45rem; margin-left: .35rem; vertical-align: middle; }
.dl-c .ago { color: var(--text-dim); font-size: .76rem; margin-left: .4rem; }
.dl-c .txt { margin: .3rem 0 .2rem; font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; } /* (77c sweep, R6-04) a long word wraps */
.dl-c .acts { display: flex; gap: .8rem; font-size: .76rem; }
.dl-c .acts button, .dl-c .acts summary { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 0; font: inherit; }
.dl-c.hid { opacity: .45; }
.dl-replies { margin-left: 1.2rem; padding-left: .9rem; border-left: 2px solid rgba(255,255,255,.06); }
.dl-form textarea { width: 100%; min-height: 90px; background: var(--bg-deep, #0b0d16); color: var(--text-light); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; font: inherit; font-size: .94rem; resize: vertical; box-sizing: border-box; }
.dl-form .row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .5rem; flex-wrap: wrap; }
.dl-form .hint { font-size: .74rem; color: var(--text-dim); }
.dl-form button { padding: .55rem 1rem; border: 0; border-radius: 9px; background: var(--accent); color: var(--bg-deep); font-weight: 700; cursor: pointer; }
.dl-join { font-size: .9rem; color: var(--text-muted); }
.dl-join a { color: var(--accent); }
.dl-more { margin-top: 2.2rem; font-size: .88rem; }
.dl-more a { color: var(--text-light); }
/* the small card on the front page and dashboard */
.dlc { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: .95rem 1.05rem; }
.dlc-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
.dlc-h b { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.dlc-h a { font-size: .78rem; color: var(--accent); text-decoration: none; }
.dlc-p { display: block; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.05); text-decoration: none; color: inherit; }
.dlc-p:first-of-type { border-top: 0; }
.dlc-p strong { display: block; color: var(--text-white); font-size: .95rem; margin-bottom: .15rem; }
.dlc-p span { font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
.dlc-p small { display: block; margin-top: .2rem; font-size: .72rem; color: var(--text-dim); }

/* (75b) what's new since you were last here, once */
.dl-fresh { border: 1px solid var(--accent-border); border-radius: 16px; padding: .9rem .9rem .2rem; margin: 0 0 1.4rem; background: rgba(212,162,76,.05); }
.dl-fresh-h { display: flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem .2rem; }
.dl-fresh-h span { font-size: .68rem; letter-spacing: .02em; color: var(--bg-deep, #0b0d16); background: var(--accent); border-radius: 999px; padding: .05rem .5rem; }
.dl-item.fresh { border-color: rgba(212,162,76,.35); }
.dl-earlier { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 .7rem .2rem; }