/* ========================================================================== BASIC CHAOS — app components For native-packaged webviews (Capacitor iOS/Android, Electron) and PWAs. Requires tokens.css. Put bc-day or bc-night on as usual. Same laws as everywhere: planes not lines, no glow, words not icons, one loud moment (the top bar), total state changes. Shape follows the shape axis (bc-shape-soft / bc-shape-round on the shell or body). App-specific laws: touch targets are 44px minimum, safe areas respected, the keyboard never fights the layout. ========================================================================== */ /* Shell: full-height app frame. */ .bca-app { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--bc-font); font-size: var(--bc-text-body); -webkit-tap-highlight-color: transparent; } /* -------------------------------------------------------------------------- Top bar — the one loud moment, app edition. Ink band, sky name. Safe-area aware for the notch. -------------------------------------------------------------------------- */ .bca-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-4); background: var(--bc-ink); color: var(--bc-chalk-lift); padding: var(--bc-space-3) var(--bc-space-4); padding-top: calc(var(--bc-space-3) + env(safe-area-inset-top, 0px)); flex: none; } .bca-topbar .bc-appmark { background: none; padding: 0; font-size: 17px; } .bca-topbar-action { background: none; border: none; color: rgba(245, 246, 245, 0.7); font-family: var(--bc-font); font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); padding: var(--bc-space-3); min-height: 44px; cursor: pointer; } .bca-topbar-action:active { color: var(--bc-sky); } /* Content region between bars. */ .bca-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- Tab bar — bottom navigation. Words, not icons. The active tab is a full plane, not a tint. -------------------------------------------------------------------------- */ .bca-tabbar { display: flex; background: var(--deep); padding-bottom: env(safe-area-inset-bottom, 0px); flex: none; } .bca-tab { flex: 1; background: none; border: none; color: var(--muted); font-family: var(--bc-font); font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); min-height: 52px; cursor: pointer; } .bca-tab.is-active { background: var(--bc-ink); color: var(--bc-sky); } /* -------------------------------------------------------------------------- List rows — planes, 52px, no separators. Odd/even shade shifts do the separating; the selected row is the sky wash. -------------------------------------------------------------------------- */ .bca-list { margin: 0; padding: 0; list-style: none; } .bca-row { display: flex; align-items: center; justify-content: space-between; gap: var(--bc-space-3); min-height: 52px; padding: var(--bc-space-3) var(--bc-space-4); cursor: pointer; } .bca-list > .bca-row:nth-child(even) { background: var(--surface); } .bca-row:active, .bca-row.is-selected { background: var(--wash); } .bca-row-title { font-weight: var(--bc-weight-medium); } .bca-row-meta { color: var(--muted); font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); white-space: nowrap; } /* -------------------------------------------------------------------------- Segmented control — words in planes. Selected segment inverts fully. -------------------------------------------------------------------------- */ .bca-seg { display: flex; background: var(--deep); border-radius: var(--r-btn); } .bca-seg-item { flex: 1; background: none; border: none; color: var(--muted); font-family: var(--bc-font); font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); min-height: 44px; cursor: pointer; } .bca-seg-item.is-active { background: var(--bc-ink); color: var(--bc-sky); border-radius: var(--r-btn); } /* -------------------------------------------------------------------------- Word toggle — state as a word in a plane. ON is sky, OFF is deep. No sliding thumb; the shape axis makes it a pill in the house shape. -------------------------------------------------------------------------- */ .bca-toggle { border: none; border-radius: var(--r-btn); background: var(--deep); color: var(--muted); font-family: var(--bc-font); font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); min-height: 44px; min-width: 72px; padding: 0 var(--bc-space-4); cursor: pointer; transition: background var(--bc-speed) var(--bc-ease); } .bca-toggle.is-on { background: var(--bc-sky); color: var(--bc-ink); } /* -------------------------------------------------------------------------- Bar button — a full-width action plane. Primary is ink (day) / sky (night) via the bc-btn logic; this adds app sizing. -------------------------------------------------------------------------- */ .bca-btn-bar { display: block; border-radius: var(--r-field); width: 100%; min-height: 52px; border: none; font-family: var(--bc-font); font-size: var(--bc-text-small); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); cursor: pointer; background: var(--bc-ink); color: var(--bc-chalk-lift); } .bc-night .bca-btn-bar, .bc-quiet .bca-btn-bar { background: var(--bc-sky); color: var(--bc-ink); } .bca-btn-bar:active { opacity: 0.85; } .bca-btn-bar--danger, .bc-night .bca-btn-bar--danger, .bc-day .bca-btn-bar--danger { background: var(--danger); color: var(--bc-chalk-lift); } .bc-night .bca-btn-bar--danger { color: var(--bc-char-deep); } /* -------------------------------------------------------------------------- Sheet — bottom sheet as a lifted plane. No handle nub. Top corners follow the shape axis. A plain uppercase title does the affordance work. -------------------------------------------------------------------------- */ .bca-sheet { background: var(--surface); color: var(--text); border-radius: var(--r-plane) var(--r-plane) 0 0; padding: var(--bc-space-5) var(--bc-space-4); padding-bottom: calc(var(--bc-space-5) + env(safe-area-inset-bottom, 0px)); } .bca-sheet-title { font-size: var(--bc-text-label); font-weight: var(--bc-weight-bold); text-transform: uppercase; letter-spacing: var(--bc-tracking-label); color: var(--muted); margin: 0 0 var(--bc-space-4); } /* -------------------------------------------------------------------------- App inputs — token forms at touch size. -------------------------------------------------------------------------- */ .bca-app .bc-input, .bca-app .bc-select, .bca-app .bc-textarea { min-height: 44px; font-size: 16px; /* prevents iOS zoom-on-focus */ } /* Editor surface: the writing plane fills what's left. */ .bca-editor { display: block; width: 100%; box-sizing: border-box; flex: 1; background: var(--surface); color: var(--text); border: none; resize: none; font-family: var(--bc-font); font-size: 16px; line-height: var(--bc-leading-body); padding: var(--bc-space-4); } .bca-editor:focus { outline: none; background: var(--surface); }