codex.css

1/* Peach Codex — generation and restoration view styles.2 *3 * Class names are `peach-codex-*` to avoid colliding with the existing4 * settings/overlay tokens. Colours and surfaces reuse `--peach-*` variables5 * defined in vars.css and popup.css — do not introduce new tokens here.6 */78/* Shared body padding — the overlay header eats the top inset, the rest is9 * scrollable so a long page (toggle + warnings + footnote) still fits in10 * the 320×520 popup without clipping. */11.peach-codex-body {12  padding: 12px 16px 18px;13  display: flex;14  flex-direction: column;15  gap: 12px;16}1718/* When the body hosts the ambient runes layer, give it a positioning context19 * so the absolute-positioned RecoveryRuneBackground anchors to the body. */20.peach-codex-body--runes {21  position: relative;22  isolation: isolate;23}24.peach-codex-body--runes > *:not(.peach-rune-background) {25  position: relative;26  z-index: 1;27}2829/* Recovery-words confirmation — onboarding feel, but housed in an overlay.30 * Cormorant Garamond italic on the headlines mirrors the lock screen so the31 * user lands in the same mental space as "set up recovery words". */32.peach-codex-recovery-headline {33  display: flex;34  flex-direction: column;35  gap: 6px;36  margin-top: 4px;37}38.peach-codex-recovery-title {39  font-family: "Cormorant Garamond", "Times New Roman", serif;40  font-style: italic;41  font-weight: 400;42  font-size: 1.25rem;43  letter-spacing: -0.005em;44  color: var(--peach-t0);45  margin: 0;46}47.peach-codex-recovery-body {48  margin: 0;49  font-size: 0.8125rem;50  line-height: 1.45;51  color: var(--peach-t1);52}53.peach-codex-recovery-warn {54  margin: 0;55  font-size: 0.75rem;56  line-height: 1.45;57  color: var(--peach-accent);58  font-style: italic;59}6061.peach-codex-words-grid {62  list-style: none;63  margin: 4px 0 0;64  padding: 12px;65  display: grid;66  grid-template-columns: repeat(2, 1fr);67  gap: 6px 16px;68  border: 1px solid var(--peach-t3);69  border-radius: 8px;70  background: rgba(245, 240, 234, 0.04);71}72.peach-codex-word-row {73  display: flex;74  align-items: baseline;75  gap: 6px;76}77.peach-codex-word-numeral {78  font-family: "Cormorant Garamond", "Times New Roman", serif;79  font-style: italic;80  font-size: 0.75rem;81  color: var(--peach-accent);82  width: 28px;83  flex: 0 0 28px;84  letter-spacing: 0.02em;85}86.peach-codex-word-text {87  font-family: "IBM Plex Mono", monospace;88  font-size: 0.6875rem;89  letter-spacing: 0.06em;90  color: var(--peach-t0);91  text-transform: lowercase;92}9394.peach-codex-confirm-section {95  display: flex;96  flex-direction: column;97  gap: 10px;98  margin-top: 4px;99}100.peach-codex-confirm-label {101  font-family: "IBM Plex Mono", monospace;102  font-size: 0.625rem;103  letter-spacing: 0.04em;104  color: var(--peach-t2);105  margin: 0;106}107.peach-codex-confirm-row {108  display: flex;109  align-items: center;110  gap: 8px;111}112.peach-codex-confirm-pos {113  font-family: "IBM Plex Mono", monospace;114  font-size: 0.5625rem;115  color: var(--peach-t2);116  min-width: 52px;117  letter-spacing: 0.04em;118}119.peach-codex-confirm-input {120  flex: 1;121  background: transparent;122  border: none;123  border-bottom: 1px solid var(--peach-t3);124  color: var(--peach-t0);125  font-family: "IBM Plex Mono", monospace;126  font-size: 0.75rem;127  letter-spacing: 0.06em;128  padding: 4px 2px 3px;129  outline: none;130  text-transform: lowercase;131  transition: border-color 120ms ease;132}133.peach-codex-confirm-input:focus {134  border-bottom-color: var(--peach-accent);135}136137.peach-codex-intro {138  padding: 12px;139}140141.peach-codex-blurb {142  margin: 0;143  font-size: 0.8125rem;144  line-height: 1.45;145  color: var(--peach-t1);146}147148.peach-codex-meta {149  margin: 8px 0 0;150  font-size: 0.75rem;151  color: var(--peach-t2);152  letter-spacing: 0.01em;153}154155.peach-codex-meta strong {156  color: var(--peach-t0);157  font-weight: 400;158}159160.peach-codex-toggle-desc {161  margin: 8px 0 0;162  font-size: 0.75rem;163  color: var(--peach-t2);164  line-height: 1.45;165}166167.peach-codex-error {168  margin: 0;169}170171.peach-codex-generate-btn {172  margin-top: 4px;173}174175.peach-codex-footnote {176  margin: 8px 0 0;177  font-size: 0.6875rem;178  color: var(--peach-t2);179  line-height: 1.5;180  font-style: italic;181}182183.peach-codex-done {184  padding: 12px;185  display: flex;186  flex-direction: column;187  gap: 6px;188}189190.peach-codex-verify {191  font-family: var(--font-mono, ui-monospace, monospace);192  letter-spacing: 0.04em;193  color: var(--peach-t0);194}195196/* ── Restore view — scanner ──────────────────────────────────────────── */197198.peach-codex-scanner {199  position: relative;200  width: 100%;201  aspect-ratio: 4 / 3;202  background: var(--peach-s2, rgba(0, 0, 0, 0.6));203  border-radius: 8px;204  overflow: hidden;205}206207.peach-codex-video {208  width: 100%;209  height: 100%;210  object-fit: cover;211  display: block;212}213214.peach-codex-camera-overlay {215  position: absolute;216  inset: 0;217  display: flex;218  align-items: center;219  justify-content: center;220  padding: 16px;221  background: rgba(0, 0, 0, 0.55);222  text-align: center;223}224225.peach-codex-progress-group {226  padding: 10px 12px;227  display: flex;228  flex-direction: column;229  gap: 6px;230}231232.peach-codex-progress-track {233  width: 100%;234  height: 4px;235  background: var(--peach-s2, rgba(255, 255, 255, 0.08));236  border-radius: 2px;237  overflow: hidden;238}239240.peach-codex-progress-fill {241  height: 100%;242  background: var(--peach-accent);243  transition: width 240ms var(--peach-curve-settle, cubic-bezier(0.16, 1, 0.3, 1));244}245246.peach-codex-progress-label {247  display: flex;248  justify-content: space-between;249  align-items: baseline;250  margin: 0;251  font-size: 0.75rem;252  color: var(--peach-t1);253}254255.peach-codex-verify-tag {256  font-family: var(--font-mono, ui-monospace, monospace);257  font-size: 0.6875rem;258  color: var(--peach-t2);259  letter-spacing: 0.04em;260}261262.peach-codex-hint {263  margin: 0;264  font-size: 0.75rem;265  color: var(--peach-t2);266  line-height: 1.4;267}268269.peach-codex-warning {270  margin: 4px 0 0;271}272273.peach-codex-passphrase-group {274  padding: 12px;275  display: flex;276  flex-direction: column;277  gap: 8px;278}279280.peach-codex-cancel-btn {281  margin-top: auto;282}283284/* Pro badge used in Settings → DATA → Peach Codex when free user. */285.peach-pro-badge {286  display: inline-flex;287  align-items: center;288  padding: 1px 6px;289  margin-left: 8px;290  font-family: var(--font-mono, ui-monospace, monospace);291  font-size: 9px;292  letter-spacing: 0.06em;293  text-transform: uppercase;294  color: var(--peach-accent);295  border: 0.5px solid var(--peach-accent);296  border-radius: 4px;297  vertical-align: middle;298  opacity: 0.8;299}