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-passphrase-group {286  padding: 12px;287  display: flex;288  flex-direction: column;289  gap: 8px;290}291292.peach-codex-cancel-btn {293  margin-top: auto;294}295296/* Pro badge used in Settings → DATA → Peach Codex when free user. */297.peach-pro-badge {298  display: inline-flex;299  align-items: center;300  padding: 1px 6px;301  margin-left: 8px;302  font-family: var(--font-mono, ui-monospace, monospace);303  font-size: 9px;304  letter-spacing: 0.06em;305  text-transform: uppercase;306  color: var(--peach-accent);307  border: 0.5px solid var(--peach-accent);308  border-radius: 4px;309  vertical-align: middle;310  opacity: 0.8;311}312313/* ── Done-screen storage guidance (CodexGenerateView, step=done) ────────── */314315.peach-codex-done-guidance {316  display: flex;317  flex-direction: column;318  gap: 8px;319  margin: 8px 0 2px;320  text-align: left;321}322323.peach-codex-done-item {324  display: flex;325  gap: 8px;326  align-items: flex-start;327}328329.peach-codex-done-item-title {330  font-size: 0.75rem;331  font-weight: 600;332  color: var(--peach-t0);333  margin: 0 0 1px;334}335336.peach-codex-done-item-body {337  font-size: 0.6875rem;338  color: var(--peach-t2);339  line-height: 1.35;340  margin: 0;341}342343.peach-codex-done-regenerate {344  font-size: 0.6875rem;345  color: var(--peach-t3);346  font-family: var(--font-mono, ui-monospace, monospace);347  line-height: 1.25;348  text-align: center;349  margin: 0 0 6px;350}351352/* ── Restore choose screen (CodexRestoreView, phase=choose) ─────────────── */353354.peach-codex-restore-choose {355  display: flex;356  flex-direction: column;357  gap: 12px;358  padding: 12px 0;359}360361.peach-codex-restore-headline {362  margin: 0;363  font-size: 1rem;364  font-weight: 600;365  color: var(--peach-t0);366}367368.peach-codex-restore-sub {369  margin: 0;370  font-size: 0.8125rem;371  color: var(--peach-t2);372}373374.peach-codex-restore-option {375  display: flex;376  align-items: center;377  gap: 14px;378  padding: 14px;379  border: 0.5px solid var(--peach-border, rgba(255, 255, 255, 0.12));380  border-radius: 10px;381  background: transparent;382  cursor: pointer;383  text-align: left;384  transition: background 150ms ease, border-color 150ms ease;385  width: 100%;386  color: inherit;387  font-family: inherit;388}389390.peach-codex-restore-option:hover {391  background: rgba(255, 255, 255, 0.04);392  border-color: var(--peach-accent);393}394395.peach-codex-restore-option-icon {396  flex-shrink: 0;397  width: 28px;398  height: 28px;399  display: inline-flex;400  align-items: center;401  justify-content: center;402  color: var(--peach-accent);403  border-radius: 8px;404  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);405  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);406}407408.peach-codex-restore-option-icon svg {409  display: block;410}411412.peach-codex-restore-option:hover .peach-codex-restore-option-icon {413  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);414  border-color: color-mix(in srgb, var(--peach-accent) 36%, transparent);415}416417.peach-codex-restore-option-content {418  display: flex;419  flex-direction: column;420  gap: 2px;421}422423.peach-codex-restore-option-title {424  font-size: 0.875rem;425  font-weight: 600;426  color: var(--peach-t0);427}428429.peach-codex-restore-option-sub {430  font-size: 0.75rem;431  color: var(--peach-t2);432}433434.peach-codex-restore-guidance {435  font-size: 0.75rem;436  color: var(--peach-t2);437  text-align: center;438  margin: 8px 0 0;439  line-height: 1.5;440}441442.peach-codex-pdf-import {443  display: flex;444  flex-direction: column;445  gap: 8px;446  padding: 16px 0;447  align-items: stretch;448}449450/* ── Live Aztec gallery (generating step) ─────────────────────────────────── */451452.peach-codex-aztec-gallery {453  display: grid;454  grid-template-columns: repeat(6, 1fr);455  gap: 4px;456  padding: 12px 12px 0;457}458459.peach-codex-aztec-tile {460  width: 100%;461  aspect-ratio: 1;462  display: block;463  border-radius: 2px;464  image-rendering: pixelated;465  animation: codex-tile-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;466}467468@keyframes codex-tile-in {469  from { opacity: 0; transform: scale(0.82); }470  to   { opacity: 1; transform: scale(1); }471}