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-meta-hint {161  margin-top: 6px;162  line-height: 1.5;163  color: var(--peach-t3, var(--peach-t2));164  opacity: 0.8;165}166167.peach-codex-toggle-desc {168  margin: 8px 0 0;169  font-size: 0.75rem;170  color: var(--peach-t2);171  line-height: 1.45;172}173174.peach-codex-error {175  margin: 0;176}177178.peach-codex-generate-btn {179  margin-top: 4px;180}181182.peach-codex-footnote {183  margin: 8px 0 0;184  font-size: 0.6875rem;185  color: var(--peach-t2);186  line-height: 1.5;187  font-style: italic;188}189190.peach-codex-done {191  padding: 12px;192  display: flex;193  flex-direction: column;194  gap: 6px;195}196197.peach-codex-verify {198  font-family: var(--font-mono, ui-monospace, monospace);199  letter-spacing: 0.04em;200  color: var(--peach-t0);201}202203/* ── Restore view — scanner ──────────────────────────────────────────── */204205.peach-codex-scanner {206  position: relative;207  width: 100%;208  aspect-ratio: 4 / 3;209  background: var(--peach-s2, rgba(0, 0, 0, 0.6));210  border-radius: 8px;211  overflow: hidden;212}213214.peach-codex-video {215  width: 100%;216  height: 100%;217  object-fit: cover;218  display: block;219}220221.peach-codex-camera-overlay {222  position: absolute;223  inset: 0;224  display: flex;225  align-items: center;226  justify-content: center;227  padding: 16px;228  background: rgba(0, 0, 0, 0.55);229  text-align: center;230}231232.peach-codex-progress-group {233  padding: 10px 12px;234  display: flex;235  flex-direction: column;236  gap: 6px;237}238239.peach-codex-progress-track {240  width: 100%;241  height: 4px;242  background: var(--peach-s2, rgba(255, 255, 255, 0.08));243  border-radius: 2px;244  overflow: hidden;245}246247.peach-codex-progress-fill {248  height: 100%;249  background: var(--peach-accent);250  transition: width 240ms var(--peach-curve-settle, cubic-bezier(0.16, 1, 0.3, 1));251}252253.peach-codex-progress-label {254  display: flex;255  justify-content: space-between;256  align-items: baseline;257  margin: 0;258  font-size: 0.75rem;259  color: var(--peach-t1);260}261262.peach-codex-verify-tag {263  font-family: var(--font-mono, ui-monospace, monospace);264  font-size: 0.6875rem;265  color: var(--peach-t2);266  letter-spacing: 0.04em;267}268269.peach-codex-hint {270  margin: 0;271  font-size: 0.75rem;272  color: var(--peach-t2);273  line-height: 1.4;274}275276.peach-codex-warning {277  margin: 4px 0 0;278}279280.peach-codex-passphrase-group {281  padding: 12px;282  display: flex;283  flex-direction: column;284  gap: 8px;285}286287.peach-codex-cancel-btn {288  margin-top: auto;289}290291/* Pro badge used in Settings → DATA → Peach Codex when free user. */292.peach-pro-badge {293  display: inline-flex;294  align-items: center;295  padding: 1px 6px;296  margin-left: 8px;297  font-family: var(--font-mono, ui-monospace, monospace);298  font-size: 9px;299  letter-spacing: 0.06em;300  text-transform: uppercase;301  color: var(--peach-accent);302  border: 0.5px solid var(--peach-accent);303  border-radius: 4px;304  vertical-align: middle;305  opacity: 0.8;306}307308/* ── Done-screen storage guidance (CodexGenerateView, step=done) ────────── */309310.peach-codex-done-guidance {311  display: flex;312  flex-direction: column;313  gap: 14px;314  margin: 16px 0 8px;315  text-align: left;316}317318.peach-codex-done-item {319  display: flex;320  gap: 12px;321  align-items: flex-start;322}323324.peach-codex-done-item-title {325  font-size: 0.8125rem;326  font-weight: 600;327  color: var(--peach-t0);328  margin: 0 0 2px;329}330331.peach-codex-done-item-body {332  font-size: 0.75rem;333  color: var(--peach-t2);334  line-height: 1.55;335  margin: 0;336}337338.peach-codex-done-regenerate {339  font-size: 0.6875rem;340  color: var(--peach-t3);341  font-family: var(--font-mono, ui-monospace, monospace);342  text-align: center;343  margin: 4px 0 8px;344}345346/* ── Restore choose screen (CodexRestoreView, phase=choose) ─────────────── */347348.peach-codex-restore-choose {349  display: flex;350  flex-direction: column;351  gap: 12px;352  padding: 12px 0;353}354355.peach-codex-restore-headline {356  margin: 0;357  font-size: 1rem;358  font-weight: 600;359  color: var(--peach-t0);360}361362.peach-codex-restore-sub {363  margin: 0;364  font-size: 0.8125rem;365  color: var(--peach-t2);366}367368.peach-codex-restore-option {369  display: flex;370  align-items: center;371  gap: 14px;372  padding: 14px;373  border: 0.5px solid var(--peach-border, rgba(255, 255, 255, 0.12));374  border-radius: 10px;375  background: transparent;376  cursor: pointer;377  text-align: left;378  transition: background 150ms ease, border-color 150ms ease;379  width: 100%;380  color: inherit;381  font-family: inherit;382}383384.peach-codex-restore-option:hover {385  background: rgba(255, 255, 255, 0.04);386  border-color: var(--peach-accent);387}388389.peach-codex-restore-option-icon {390  font-size: 22px;391  flex-shrink: 0;392  line-height: 1;393}394395.peach-codex-restore-option-content {396  display: flex;397  flex-direction: column;398  gap: 2px;399}400401.peach-codex-restore-option-title {402  font-size: 0.875rem;403  font-weight: 600;404  color: var(--peach-t0);405}406407.peach-codex-restore-option-sub {408  font-size: 0.75rem;409  color: var(--peach-t2);410}411412.peach-codex-restore-guidance {413  font-size: 0.6875rem;414  color: var(--peach-t3);415  text-align: center;416  margin: 4px 0 0;417  font-family: var(--font-mono, ui-monospace, monospace);418  line-height: 1.5;419}420421.peach-codex-pdf-import {422  display: flex;423  flex-direction: column;424  gap: 8px;425  padding: 16px 0;426  align-items: stretch;427}428429/* ── Live Aztec gallery (generating step) ─────────────────────────────────── */430431.peach-codex-aztec-gallery {432  display: grid;433  grid-template-columns: repeat(6, 1fr);434  gap: 4px;435  padding: 12px 12px 0;436}437438.peach-codex-aztec-tile {439  width: 100%;440  aspect-ratio: 1;441  display: block;442  border-radius: 2px;443  image-rendering: pixelated;444  animation: codex-tile-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;445}446447@keyframes codex-tile-in {448  from { opacity: 0; transform: scale(0.82); }449  to   { opacity: 1; transform: scale(1); }450}