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-icon {325  font-size: 18px;326  flex-shrink: 0;327  margin-top: 1px;328  line-height: 1;329}330331.peach-codex-done-item-title {332  font-size: 0.8125rem;333  font-weight: 600;334  color: var(--peach-t0);335  margin: 0 0 2px;336}337338.peach-codex-done-item-body {339  font-size: 0.75rem;340  color: var(--peach-t2);341  line-height: 1.55;342  margin: 0;343}344345.peach-codex-done-regenerate {346  font-size: 0.6875rem;347  color: var(--peach-t3);348  font-family: var(--font-mono, ui-monospace, monospace);349  text-align: center;350  margin: 4px 0 8px;351}352353/* ── Restore choose screen (CodexRestoreView, phase=choose) ─────────────── */354355.peach-codex-restore-choose {356  display: flex;357  flex-direction: column;358  gap: 12px;359  padding: 12px 0;360}361362.peach-codex-restore-headline {363  margin: 0;364  font-size: 1rem;365  font-weight: 600;366  color: var(--peach-t0);367}368369.peach-codex-restore-sub {370  margin: 0;371  font-size: 0.8125rem;372  color: var(--peach-t2);373}374375.peach-codex-restore-option {376  display: flex;377  align-items: center;378  gap: 14px;379  padding: 14px;380  border: 0.5px solid var(--peach-border, rgba(255, 255, 255, 0.12));381  border-radius: 10px;382  background: transparent;383  cursor: pointer;384  text-align: left;385  transition: background 150ms ease, border-color 150ms ease;386  width: 100%;387  color: inherit;388  font-family: inherit;389}390391.peach-codex-restore-option:hover {392  background: rgba(255, 255, 255, 0.04);393  border-color: var(--peach-accent);394}395396.peach-codex-restore-option-icon {397  font-size: 22px;398  flex-shrink: 0;399  line-height: 1;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.6875rem;421  color: var(--peach-t3);422  text-align: center;423  margin: 4px 0 0;424  font-family: var(--font-mono, ui-monospace, monospace);425  line-height: 1.5;426}427428.peach-codex-pdf-import {429  display: flex;430  flex-direction: column;431  gap: 8px;432  padding: 16px 0;433  align-items: stretch;434}435436/* ── Live Aztec gallery (generating step) ─────────────────────────────────── */437438.peach-codex-aztec-gallery {439  display: grid;440  grid-template-columns: repeat(6, 1fr);441  gap: 4px;442  padding: 12px 12px 0;443}444445.peach-codex-aztec-tile {446  width: 100%;447  aspect-ratio: 1;448  display: block;449  border-radius: 2px;450  image-rendering: pixelated;451  animation: codex-tile-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;452}453454@keyframes codex-tile-in {455  from { opacity: 0; transform: scale(0.82); }456  to   { opacity: 1; transform: scale(1); }457}