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}58.peach-codex-recovery-warn {59  margin: 0;60  font-size: 0.75rem;61  line-height: 1.45;62  color: var(--peach-accent);63  font-style: italic;64}6566.peach-codex-words-grid {67  list-style: none;68  margin: 4px 0 0;69  padding: 12px;70  display: grid;71  grid-template-columns: repeat(2, 1fr);72  gap: 6px 16px;73  border: 1px solid var(--peach-t3);74  border-radius: 8px;75  background: rgba(245, 240, 234, 0.04);76}77.peach-codex-word-row {78  display: flex;79  align-items: baseline;80  gap: 6px;81}82.peach-codex-word-numeral {83  font-family: "Cormorant Garamond", "Times New Roman", serif;84  font-style: italic;85  font-size: 0.75rem;86  color: var(--peach-accent);87  width: 28px;88  flex: 0 0 28px;89  letter-spacing: 0.02em;90}91.peach-codex-word-text {92  font-family: "IBM Plex Mono", monospace;93  font-size: 0.6875rem;94  letter-spacing: 0.06em;95  color: var(--peach-t0);96  text-transform: lowercase;97}9899.peach-codex-confirm-section {100  display: flex;101  flex-direction: column;102  gap: 10px;103  margin-top: 4px;104}105.peach-codex-confirm-label {106  font-family: "IBM Plex Mono", monospace;107  font-size: 0.625rem;108  letter-spacing: 0.04em;109  color: var(--peach-t2);110  margin: 0;111}112.peach-codex-confirm-row {113  display: flex;114  align-items: center;115  gap: 8px;116}117.peach-codex-confirm-pos {118  font-family: "IBM Plex Mono", monospace;119  font-size: 0.5625rem;120  color: var(--peach-t2);121  min-width: 52px;122  letter-spacing: 0.04em;123}124.peach-codex-confirm-input {125  flex: 1;126  background: transparent;127  border: none;128  border-bottom: 1px solid var(--peach-t3);129  color: var(--peach-t0);130  font-family: "IBM Plex Mono", monospace;131  font-size: 0.75rem;132  letter-spacing: 0.06em;133  padding: 4px 2px 3px;134  outline: none;135  text-transform: lowercase;136  transition: border-color 120ms ease;137}138.peach-codex-confirm-input:focus {139  border-bottom-color: var(--peach-accent);140}141142.peach-codex-intro {143  padding: 12px;144}145146.peach-codex-blurb {147  margin: 0;148  font-size: 0.8125rem;149  line-height: 1.45;150  color: var(--peach-t1);151}152153.peach-codex-meta {154  margin: 8px 0 0;155  font-size: 0.75rem;156  color: var(--peach-t2);157  letter-spacing: 0.01em;158}159160.peach-codex-meta strong {161  color: var(--peach-t0);162  font-weight: 400;163}164165.peach-codex-meta-hint {166  margin-top: 6px;167  line-height: 1.5;168  color: var(--peach-t3, var(--peach-t2));169  opacity: 0.8;170}171172.peach-codex-toggle-desc {173  margin: 8px 0 0;174  font-size: 0.75rem;175  color: var(--peach-t2);176  line-height: 1.45;177}178179.peach-codex-error {180  margin: 0;181}182183.peach-codex-generate-btn {184  margin-top: 4px;185}186187.peach-codex-footnote {188  margin: 8px 0 0;189  font-size: 0.6875rem;190  color: var(--peach-t2);191  line-height: 1.5;192  font-style: italic;193}194195.peach-codex-done {196  padding: 12px;197  display: flex;198  flex-direction: column;199  gap: 6px;200}201202.peach-codex-verify {203  font-family: var(--font-mono, ui-monospace, monospace);204  letter-spacing: 0.04em;205  color: var(--peach-t0);206}207208/* ── Restore view — scanner ──────────────────────────────────────────── */209210.peach-codex-scanner {211  position: relative;212  width: 100%;213  aspect-ratio: 4 / 3;214  background: var(--peach-s2, rgba(0, 0, 0, 0.6));215  border-radius: 8px;216  overflow: hidden;217}218219.peach-codex-video {220  width: 100%;221  height: 100%;222  object-fit: cover;223  display: block;224}225226.peach-codex-camera-overlay {227  position: absolute;228  inset: 0;229  display: flex;230  align-items: center;231  justify-content: center;232  padding: 16px;233  background: rgba(0, 0, 0, 0.55);234  text-align: center;235}236237.peach-codex-progress-group {238  padding: 10px 12px;239  display: flex;240  flex-direction: column;241  gap: 6px;242}243244.peach-codex-progress-track {245  width: 100%;246  height: 4px;247  background: var(--peach-s2, rgba(255, 255, 255, 0.08));248  border-radius: 2px;249  overflow: hidden;250}251252.peach-codex-progress-fill {253  height: 100%;254  background: var(--peach-accent);255  transition: width 240ms var(--peach-curve-settle, cubic-bezier(0.16, 1, 0.3, 1));256}257258.peach-codex-progress-label {259  display: flex;260  justify-content: space-between;261  align-items: baseline;262  margin: 0;263  font-size: 0.75rem;264  color: var(--peach-t1);265}266267.peach-codex-verify-tag {268  font-family: var(--font-mono, ui-monospace, monospace);269  font-size: 0.6875rem;270  color: var(--peach-t2);271  letter-spacing: 0.04em;272}273274.peach-codex-hint {275  margin: 0;276  font-size: 0.75rem;277  color: var(--peach-t2);278  line-height: 1.4;279}280281.peach-codex-warning {282  margin: 4px 0 0;283}284285.peach-codex-worst-stripe {286  margin-top: -2px;287  color: var(--peach-t3);288  font-size: 0.6875rem;289}290291.peach-codex-passphrase-group {292  padding: 12px;293  display: flex;294  flex-direction: column;295  gap: 8px;296}297298.peach-codex-cancel-btn {299  margin-top: auto;300}301302/* Pro badge used in Settings → DATA → Peach Codex when free user. */303.peach-pro-badge {304  display: inline-flex;305  align-items: center;306  padding: 1px 6px;307  margin-left: 8px;308  font-family: var(--font-mono, ui-monospace, monospace);309  font-size: 9px;310  letter-spacing: 0.06em;311  text-transform: uppercase;312  color: var(--peach-accent);313  border: 0.5px solid var(--peach-accent);314  border-radius: 4px;315  vertical-align: middle;316  opacity: 0.8;317}318319/* ── Done-screen storage guidance (CodexGenerateView, step=done) ────────── */320321.peach-codex-done-guidance {322  display: flex;323  flex-direction: column;324  gap: 8px;325  margin: 8px 0 2px;326  text-align: left;327}328329.peach-codex-done-item {330  display: flex;331  gap: 8px;332  align-items: flex-start;333}334335.peach-codex-done-item-title {336  font-size: 0.75rem;337  font-weight: 600;338  color: var(--peach-t0);339  margin: 0 0 1px;340}341342.peach-codex-done-item-body {343  font-size: 0.6875rem;344  color: var(--peach-t2);345  line-height: 1.35;346  margin: 0;347}348349.peach-codex-done-regenerate {350  font-size: 0.6875rem;351  color: var(--peach-t3);352  font-family: var(--font-mono, ui-monospace, monospace);353  line-height: 1.25;354  text-align: center;355  margin: 0 0 6px;356}357358/* ── Restore choose screen (CodexRestoreView, phase=choose) ─────────────── */359360.peach-codex-restore-choose {361  display: flex;362  flex-direction: column;363  gap: 12px;364  padding: 12px 0;365}366367.peach-codex-restore-headline {368  margin: 0;369  font-size: 1rem;370  font-weight: 600;371  color: var(--peach-t0);372}373374.peach-codex-restore-sub {375  margin: 0;376  font-size: 0.8125rem;377  color: var(--peach-t2);378}379380.peach-codex-restore-option {381  display: flex;382  align-items: center;383  gap: 14px;384  padding: 14px;385  border: 0.5px solid var(--peach-border, rgba(255, 255, 255, 0.12));386  border-radius: 10px;387  background: transparent;388  cursor: pointer;389  text-align: left;390  transition: background 150ms ease, border-color 150ms ease;391  width: 100%;392  color: inherit;393  font-family: inherit;394}395396.peach-codex-restore-option:hover {397  background: rgba(255, 255, 255, 0.04);398  border-color: var(--peach-accent);399}400401.peach-codex-restore-option-icon {402  flex-shrink: 0;403  width: 28px;404  height: 28px;405  display: inline-flex;406  align-items: center;407  justify-content: center;408  color: var(--peach-accent);409  border-radius: 8px;410  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);411  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);412}413414.peach-codex-restore-option-icon svg {415  display: block;416}417418.peach-codex-restore-option:hover .peach-codex-restore-option-icon {419  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);420  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);421}422423.peach-codex-restore-option-content {424  display: flex;425  flex-direction: column;426  gap: 2px;427}428429.peach-codex-restore-option-title {430  font-size: 0.875rem;431  font-weight: 600;432  color: var(--peach-t0);433}434435.peach-codex-restore-option-sub {436  font-size: 0.75rem;437  color: var(--peach-t2);438}439440.peach-codex-restore-guidance {441  font-size: 0.75rem;442  color: var(--peach-t2);443  text-align: center;444  margin: 8px 0 0;445  line-height: 1.5;446}447448.peach-codex-pdf-import {449  display: flex;450  flex-direction: column;451  gap: 8px;452  padding: 16px 0;453  align-items: stretch;454}455456.peach-codex-pdf-shortfall {457  display: flex;458  flex-direction: column;459  gap: 10px;460  padding: 14px 12px;461}462463.peach-codex-pdf-shortfall-copy {464  margin: 0;465  font-size: 0.75rem;466  color: var(--peach-t2);467  line-height: 1.5;468}469470.peach-codex-pdf-shortfall-actions {471  display: flex;472  gap: 8px;473  flex-wrap: wrap;474}475476/* ── Live Aztec gallery (generating step) ─────────────────────────────────── */477478.peach-codex-aztec-gallery {479  display: grid;480  grid-template-columns: repeat(6, 1fr);481  gap: 4px;482  padding: 12px 12px 0;483}484485.peach-codex-aztec-tile {486  width: 100%;487  aspect-ratio: 1;488  display: block;489  border-radius: 2px;490  image-rendering: pixelated;491  animation: codex-tile-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;492}493494@keyframes codex-tile-in {495  from { opacity: 0; transform: scale(0.82); }496  to   { opacity: 1; transform: scale(1); }497}