/* One Dark - the test side of the UI experiment (see CLAUDE.md). Applied when carries data-ui="e", which the script in base.html's head sets for the test side before paint. Everything here overrides the compiled Tailwind bundle, nothing is rebuilt. Fold the winner into tailwind.input.css and delete this file when the experiment ends. The look: Atom One Dark's surfaces - the tree-view blue-grey (#21252b) as ground with the editor colour (#282c34) for cards - so cards read as a tonal step with no hairline and no shadow, everything a touch squarer, chips as tinted blocks instead of outlined pills. The hero loses its gradient text and green-to-amber wash; the phrase is set in the italic serif the edit feed uses for article names, in white. Brand green and amber stay on the button, the marks and the chips. Light mode is One Light's step: a light cool grey (#f2f3f5) as ground, white cards. */ /* ── Hero ── */ html[data-ui="e"] .pp-hero { background-image: none; } html[data-ui="e"] .pp-hero-accent { background-image: none; color: inherit; font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic; font-weight: 400; } /* ── Ground and nav ── On the root as well as the body: the body is only viewport-high (h-full), so past it the canvas shows the root's colour. */ html[data-ui="e"], html[data-ui="e"] body { background-color: #f2f3f5; } html.dark[data-ui="e"], html.dark[data-ui="e"] body { background-color: #21252b; } html[data-ui="e"] .pp-nav { background-color: rgba(242,243,245,.85); border-color: rgba(0,0,0,.06); } html.dark[data-ui="e"] .pp-nav { background-color: rgba(33,37,43,.8); border-color: rgba(255,255,255,.07); } /* ── Surfaces ── */ html[data-ui="e"] .pp-card, html[data-ui="e"] .pp-thread-feed > [id^="comment-"] { border-radius: .5rem; border-color: transparent; box-shadow: none; background-color: #ffffff; } html.dark[data-ui="e"] .pp-card, html.dark[data-ui="e"] .pp-thread-feed > [id^="comment-"] { background-color: #282c34; } /* ── Buttons and chips ── */ html[data-ui="e"] .btn-primary, html[data-ui="e"] .pp-foot-btn, html[data-ui="e"] .pp-vote-btn { border-radius: .375rem; box-shadow: none; } html[data-ui="e"] .pp-learning-chip, html[data-ui="e"] .pp-brand-chip, html[data-ui="e"] .pp-tag-chip, html[data-ui="e"] .pp-tag-pill, html[data-ui="e"] .badge { border-radius: .25rem; } html[data-ui="e"] .pp-learning-chip, html[data-ui="e"] .pp-brand-chip, html[data-ui="e"] .badge { border-color: transparent; background-color: color-mix(in srgb, currentColor 13%, transparent); } /* light: outline buttons and boxes sit on white cards, so keep a faint edge */ html:not(.dark)[data-ui="e"] .pp-foot-btn, html:not(.dark)[data-ui="e"] .pp-vote-btn { border-color: #dcdde1; } html:not(.dark)[data-ui="e"] .pp-check { border-color: #c6c8ce; }