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.peach-codex-body--done {30  gap: 8px;31  padding-top: 8px;32}3334/* Recovery-words confirmation — onboarding feel, but housed in an overlay.35 * Cormorant Garamond italic on the headlines mirrors the lock screen so the36 * user lands in the same mental space as "set up recovery words". */37.peach-codex-recovery-headline {38  display: flex;39  flex-direction: column;40  gap: 6px;41  margin-top: 4px;42}43.peach-codex-recovery-title {44  font-family: "Cormorant Garamond", "Times New Roman", serif;45  font-style: italic;46  font-weight: 400;47  font-size: 1.25rem;48  letter-spacing: -0.005em;49  color: var(--peach-t0);50  margin: 0;51}52.peach-codex-recovery-body {53  margin: 0;54  font-size: 0.8125rem;55  line-height: 1.45;56  color: var(--peach-t1);57}5859.peach-codex-words-grid {60  list-style: none;61  margin: 4px 0 0;62  padding: 12px;63  display: grid;64  grid-template-columns: repeat(2, 1fr);65  gap: 6px 16px;66  border: 1px solid var(--peach-t3);67  border-radius: 8px;68  background: rgba(245, 240, 234, 0.04);69}70.peach-codex-word-row {71  display: flex;72  align-items: baseline;73  gap: 6px;74}75.peach-codex-word-numeral {76  font-family: "Cormorant Garamond", "Times New Roman", serif;77  font-style: italic;78  font-size: 0.75rem;79  color: var(--peach-accent);80  width: 28px;81  flex: 0 0 28px;82  letter-spacing: 0.02em;83}84.peach-codex-word-text {85  font-family: "IBM Plex Mono", monospace;86  font-size: 0.6875rem;87  letter-spacing: 0.06em;88  color: var(--peach-t0);89  text-transform: lowercase;90}9192.peach-codex-confirm-section {93  display: flex;94  flex-direction: column;95  gap: 10px;96  margin-top: 4px;97}98.peach-codex-confirm-label {99  font-family: "IBM Plex Mono", monospace;100  font-size: 0.625rem;101  letter-spacing: 0.04em;102  color: var(--peach-t2);103  margin: 0;104}105.peach-codex-confirm-row {106  display: flex;107  align-items: center;108  gap: 8px;109}110.peach-codex-confirm-pos {111  font-family: "IBM Plex Mono", monospace;112  font-size: 0.5625rem;113  color: var(--peach-t2);114  min-width: 52px;115  letter-spacing: 0.04em;116}117.peach-codex-confirm-input {118  flex: 1;119  background: transparent;120  border: none;121  border-bottom: 1px solid var(--peach-t3);122  color: var(--peach-t0);123  font-family: "IBM Plex Mono", monospace;124  font-size: 0.75rem;125  letter-spacing: 0.06em;126  padding: 4px 2px 3px;127  outline: none;128  text-transform: lowercase;129  transition: border-color 120ms ease;130}131.peach-codex-confirm-input:focus {132  border-bottom-color: var(--peach-accent);133}134135.peach-codex-intro {136  padding: 12px;137}138139.peach-codex-blurb {140  margin: 0;141  font-size: 0.8125rem;142  line-height: 1.45;143  color: var(--peach-t1);144}145146.peach-codex-meta {147  margin: 8px 0 0;148  font-size: 0.75rem;149  color: var(--peach-t2);150  letter-spacing: 0.01em;151}152153.peach-codex-meta strong {154  color: var(--peach-t0);155  font-weight: 400;156}157158.peach-codex-error {159  margin: 0;160}161162.peach-codex-generate-btn {163  margin-top: 4px;164}165166.peach-codex-footnote {167  margin: 8px 0 0;168  font-size: 0.6875rem;169  color: var(--peach-t2);170  line-height: 1.5;171  font-style: italic;172}173174.peach-codex-done {175  padding: 12px;176  display: flex;177  flex-direction: column;178  gap: 6px;179}180181.peach-codex-verify {182  font-family: var(--font-mono, ui-monospace, monospace);183  letter-spacing: 0.04em;184  color: var(--peach-t0);185}186187/* ── Restore view — scanner ──────────────────────────────────────────── */188189.peach-codex-scanner {190  position: relative;191  width: 100%;192  aspect-ratio: 4 / 3;193  background: var(--peach-s2, rgba(0, 0, 0, 0.6));194  border-radius: 8px;195  overflow: hidden;196}197198.peach-codex-video {199  width: 100%;200  height: 100%;201  object-fit: cover;202  display: block;203}204205.peach-codex-camera-overlay {206  position: absolute;207  inset: 0;208  display: flex;209  align-items: center;210  justify-content: center;211  padding: 16px;212  background: rgba(0, 0, 0, 0.55);213  text-align: center;214}215216.peach-codex-progress-group {217  padding: 10px 12px;218  display: flex;219  flex-direction: column;220  gap: 6px;221}222223.peach-codex-progress-track {224  width: 100%;225  height: 4px;226  background: var(--peach-s2, rgba(255, 255, 255, 0.08));227  border-radius: 2px;228  overflow: hidden;229}230231.peach-codex-progress-fill {232  height: 100%;233  background: var(--peach-accent);234  transition: width 240ms var(--peach-curve-settle, cubic-bezier(0.16, 1, 0.3, 1));235}236237.peach-codex-progress-label {238  display: flex;239  justify-content: space-between;240  align-items: baseline;241  margin: 0;242  font-size: 0.75rem;243  color: var(--peach-t1);244}245246.peach-codex-verify-tag {247  font-family: var(--font-mono, ui-monospace, monospace);248  font-size: 0.6875rem;249  color: var(--peach-t2);250  letter-spacing: 0.04em;251}252253.peach-codex-hint {254  margin: 0;255  font-size: 0.75rem;256  color: var(--peach-t2);257  line-height: 1.4;258}259260.peach-codex-warning {261  margin: 4px 0 0;262}263264.peach-codex-worst-stripe {265  margin-top: -2px;266  color: var(--peach-t3);267  font-size: 0.6875rem;268}269270.peach-codex-passphrase-group {271  padding: 12px;272  display: flex;273  flex-direction: column;274  gap: 8px;275}276277.peach-codex-cancel-btn {278  margin-top: auto;279}280281/* Pro badge used in Settings → DATA → Peach Codex when free user. */282.peach-pro-badge {283  display: inline-flex;284  align-items: center;285  padding: 1px 6px;286  margin-left: 8px;287  font-family: var(--font-mono, ui-monospace, monospace);288  font-size: 9px;289  letter-spacing: 0.06em;290  text-transform: uppercase;291  color: var(--peach-accent);292  border: 0.5px solid var(--peach-accent);293  border-radius: 4px;294  vertical-align: middle;295  opacity: 0.8;296}297298/* ── Done-screen storage guidance (CodexGenerateView, step=done) ────────── */299300.peach-codex-done-guidance {301  display: flex;302  flex-direction: column;303  gap: 8px;304  margin: 8px 0 2px;305  text-align: left;306}307308.peach-codex-done-item {309  display: flex;310  gap: 8px;311  align-items: flex-start;312}313314.peach-codex-done-item-title {315  font-size: 0.75rem;316  font-weight: 600;317  color: var(--peach-t0);318  margin: 0 0 1px;319}320321.peach-codex-done-item-body {322  font-size: 0.6875rem;323  color: var(--peach-t2);324  line-height: 1.35;325  margin: 0;326}327328.peach-codex-done-regenerate {329  font-size: 0.6875rem;330  color: var(--peach-t3);331  font-family: var(--font-mono, ui-monospace, monospace);332  line-height: 1.25;333  text-align: center;334  margin: 0 0 6px;335}336337/* ── Restore choose screen (CodexRestoreView, phase=choose) ─────────────── */338339.peach-codex-restore-choose {340  display: flex;341  flex-direction: column;342  gap: 12px;343  padding: 12px 0;344}345346.peach-codex-restore-headline {347  margin: 0;348  font-size: 1rem;349  font-weight: 600;350  color: var(--peach-t0);351}352353.peach-codex-restore-sub {354  margin: 0;355  font-size: 0.8125rem;356  color: var(--peach-t2);357}358359.peach-codex-restore-option {360  display: flex;361  align-items: center;362  gap: 14px;363  padding: 14px;364  border: 0.5px solid var(--peach-border, rgba(255, 255, 255, 0.12));365  border-radius: 10px;366  background: transparent;367  cursor: pointer;368  text-align: left;369  transition: background 150ms ease, border-color 150ms ease;370  width: 100%;371  color: inherit;372  font-family: inherit;373}374375.peach-codex-restore-option:hover {376  background: rgba(255, 255, 255, 0.04);377  border-color: var(--peach-accent);378}379380.peach-codex-restore-option-icon {381  flex-shrink: 0;382  width: 28px;383  height: 28px;384  display: inline-flex;385  align-items: center;386  justify-content: center;387  color: var(--peach-accent);388  border-radius: 8px;389  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);390  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);391}392393.peach-codex-restore-option-icon svg {394  display: block;395}396397.peach-codex-restore-option:hover .peach-codex-restore-option-icon {398  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);399  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);400}401402.peach-codex-restore-option-content {403  display: flex;404  flex-direction: column;405  gap: 2px;406}407408.peach-codex-restore-option-title {409  font-size: 0.875rem;410  font-weight: 600;411  color: var(--peach-t0);412}413414.peach-codex-restore-option-sub {415  font-size: 0.75rem;416  color: var(--peach-t2);417}418419.peach-codex-restore-guidance {420  font-size: 0.75rem;421  color: var(--peach-t2);422  text-align: center;423  margin: 8px 0 0;424  line-height: 1.5;425}426427.peach-codex-pdf-import {428  display: flex;429  flex-direction: column;430  gap: 8px;431  padding: 16px 0;432  align-items: stretch;433}434435.peach-codex-pdf-shortfall {436  display: flex;437  flex-direction: column;438  gap: 10px;439  padding: 14px 12px;440}441442.peach-codex-pdf-shortfall-copy {443  margin: 0;444  font-size: 0.75rem;445  color: var(--peach-t2);446  line-height: 1.5;447}448449.peach-codex-pdf-shortfall-actions {450  display: flex;451  gap: 8px;452  flex-wrap: wrap;453}454455/* ── Live Aztec gallery (generating step) ─────────────────────────────────── */456457.peach-codex-aztec-gallery {458  display: grid;459  grid-template-columns: repeat(6, 1fr);460  gap: 4px;461  padding: 12px 12px 0;462}463464.peach-codex-aztec-tile {465  width: 100%;466  aspect-ratio: 1;467  display: block;468  border-radius: 2px;469  image-rendering: pixelated;470  animation: codex-tile-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;471}472473@keyframes codex-tile-in {474  from { opacity: 0; transform: scale(0.82); }475  to   { opacity: 1; transform: scale(1); }476}