/* ================================================================================ ML Software, LLC Copyright 2026. All rights reserved. Life IQ | lifeiq.mlsoftware.com assets/css/truth.css Platform: IQ Platform Created : 2026-07-28 Updated : 2026-08-05 Version : 3.2.0 The truth ledger. Every selector is namespaced .liq-truth- , a prefix that did not exist before this file, so nothing here can collide with or duplicate anything in product.css or projects.css. Loads after projects.css and before mobile-tabs.css. NO COLOUR ZONES ON THE COUNT. The open count is plain text at every value. A number that turns red every morning stops registering and starts reading as a verdict on the person rather than a fact about the week - which is the same reason the trust bar has no bands. The one place heat is allowed is a truth pushed three or more times. That is not a mood, it is a measurement, and it earns the emphasis. Outcome colour mapping: open dim - a fact, not an accusation said signal - green. It got done. not_needed dim - closed, counts against nothing avoided necessary- yellow. Honest, and not the same as a lie. lied noise - red. The only one that gets red. Every colour is a token read. No hex anywhere in this file. Version History: 2.0.1 - 2026-07-29 : overflow-x:hidden -> clip; hidden forces overflow-y:auto and added a stray scrollbar. 2.0.0 - 2026-07-29 : Follows truth.js 2.0.0 from tracker to log. Dropped: .liq-truth-count / -sub (the pending headline), .is-hot (the pushed- three-times emphasis), .liq-truth-reflect, and the said/lied action tints. All of it styled a model that no longer exists. Added: the three-cell tally, the question/option blocks in the form, and an 'unsaid' card and pill variant. STILL NO RED. Not on lied, not on the counts. Every one of these is something the user chose to write down about themselves, and a screen that punishes the writing down gets no more entries. Outcome is carried by a left border and a pill, and the only colour is green on told. 1.0.1 - 2026-07-28 : Same horizontal-overflow fix as projects.css 1.0.1 - min-width:0 on every flex child holding variable content, and overflow-x:hidden on the wrap. A flex child will not shrink below its content width without it, so the scope row pushed the whole page sideways. Truth text now breaks rather than pushes. Actions drop to 2 columns on a phone; six across 390px was unreadable. 1.0.0 - 2026-07-28 : Initial version. ================================================================================ */ /* ============================================================================ Version History: 3.2.0 - 2026-08-05 : Spine colour for "Journal entry" (Truth.cfc 2.2.0). Grey, same as Thought and for the same reason - it is the default and it claims nothing, so a hue would be the stylesheet claiming something on the writer's behalf. 3.1.0 - 2026-08-05 : Spine colour for "Thought" (Truth.cfc 2.1.0). Grey, and the only kind whose label is not tinted - it is the one entry that claims nothing, and a colour would be claiming something on its behalf. It also means a month of plain thoughts reads as quiet rather than as a column of signals. 3.0.0 - 2026-08-05 : Rewritten for the journal (truth.js 2.0.0). Everything below is new. The previous rules styled a ledger - outcome pills, an avoided counter, a "push it" button, an open count - and none of those controls exist any more. Kept as a full replacement rather than an append, because leaving rules for markup nothing emits is how this codebase has repeatedly ended up with people editing CSS that matches nothing. ============================================================================ */ .liq-truth-wrap { padding-bottom: 24px; } /* ---------------------------------------------------------------------------- The resurfaced entry Dashed, and tinted with the kind-neutral violet, because it is the one thing on the screen that is not part of writing. It should read as something arriving rather than something to act on. -------------------------------------------------------------------------- */ .liq-tr-older { margin-bottom: 16px; padding: 12px 13px; border: 1px dashed var(--border-light, var(--border)); border-radius: 10px; background: rgba(167, 139, 250, 0.05); } .liq-tr-older-lbl { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #a78bfa; } .liq-tr-older-txt { margin: 0; font-size: var(--font-min-body, 16px); line-height: 1.6; color: var(--text-secondary); } .liq-tr-older-meta { margin: 7px 0 0; font-size: var(--font-min-secondary, 13px); color: var(--text-dim); } /* ---------------------------------------------------------------------------- The write box Always on screen, never behind a button. This screen exists to be written in, and putting the writing surface one tap away is how a journal becomes a thing you mean to keep rather than one you keep. -------------------------------------------------------------------------- */ .liq-tr-form { margin-bottom: 16px; padding: 13px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; } .liq-tr-form .form-input { margin-bottom: 9px; } .liq-tr-text { display: block; width: 100%; min-height: 104px; max-height: 320px; resize: vertical; line-height: 1.55; /* 16px or iOS zooms the page when the box takes focus - and this is the one field on this screen a person will be in for minutes. */ font-size: var(--font-min-body, 16px); } .liq-tr-acts { display: flex; gap: 8px; } .liq-tr-acts .btn { flex: 1 1 0; min-height: var(--touch-target-touch, 44px); } .liq-tr-acts .btn-primary { flex: 2 1 0; } /* ---------------------------------------------------------------------------- Filter chips -------------------------------------------------------------------------- */ /* Scrolls sideways rather than wrapping. Eight kinds would wrap to three rows on a phone and push the entries below the fold on a screen whose whole point is reading them. */ .liq-tr-chips { display: flex; gap: 6px; margin-bottom: 4px; padding-bottom: 10px; overflow-x: auto; /* clip, never hidden - hidden on one axis forces auto on the other. */ overflow-y: clip; -webkit-overflow-scrolling: touch; } .liq-tr-chip { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-dim); font-family: inherit; font-size: var(--font-min-secondary, 13px); white-space: nowrap; cursor: pointer; } .liq-tr-chip.is-on { border-color: var(--accent-bord, var(--accent)); background: var(--accent-dim, rgba(74, 158, 255, 0.18)); color: var(--accent-light, var(--accent)); } /* ---------------------------------------------------------------------------- Entries -------------------------------------------------------------------------- */ .liq-tr-month { margin: 18px 0 8px 2px; font-family: var(--font-display, inherit); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); } /* A coloured spine per kind. Over a year this gives the list a texture - you can see whether a stretch was mostly flaws or mostly epiphanies without reading a word, which is the only reporting this screen should ever have. */ .liq-tr-ent { margin-bottom: 16px; padding-left: 12px; border-left: 2px solid var(--border-light, var(--border)); } .liq-tr-kind { margin: 0 0 5px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .liq-tr-body { margin: 0; font-size: var(--font-min-body, 16px); line-height: 1.6; color: var(--text-primary); /* Written prose, kept as written. A person's line breaks in a journal are part of what they wrote. */ white-space: pre-wrap; word-break: break-word; } .liq-tr-date { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: var(--font-min-secondary, 13px); color: var(--text-dim); } /* Quiet, and only reachable by looking. Edit and Delete are not what this screen is for. */ .liq-tr-edit { padding: 0; border: none; background: none; color: var(--text-dim); font-family: inherit; font-size: var(--font-min-secondary, 13px); text-decoration: underline; cursor: pointer; } .liq-tr-edit.is-danger { color: var(--noise, var(--text-dim)); } .liq-tr-empty { padding: 24px 4px; color: var(--text-dim); font-size: var(--font-min-body, 16px); } .liq-tr-empty p { margin: 0 0 12px; } /* ---------------------------------------------------------------------------- Kind colours Deliberately reusing the app's existing meanings where they fit - amber for a flaw is the same amber that means "needs attention" elsewhere, green for character building is the same green as signal. Violet and teal are unclaimed and carry the two that have no equivalent anywhere else. -------------------------------------------------------------------------- */ /* Grey, and no tint on the label. Every other kind asserts something and gets a colour for it; this one asserts nothing, so giving it a hue would be the stylesheet making a claim the writer did not. */ .liq-tr-ent.k-journal-entry { border-left-color: var(--border-light, var(--border)); } .liq-tr-ent.k-thought { border-left-color: var(--border-light, var(--border)); } .liq-tr-ent.k-epiphany { border-left-color: #a78bfa; } .liq-tr-ent.k-epiphany .liq-tr-kind { color: #a78bfa; } .liq-tr-ent.k-self-realization { border-left-color: #2dd4bf; } .liq-tr-ent.k-self-realization .liq-tr-kind { color: #2dd4bf; } .liq-tr-ent.k-personal-truth { border-left-color: var(--accent); } .liq-tr-ent.k-personal-truth .liq-tr-kind { color: var(--accent-light, var(--accent)); } .liq-tr-ent.k-character-flaw { border-left-color: var(--necessary); } .liq-tr-ent.k-character-flaw .liq-tr-kind { color: var(--necessary); } .liq-tr-ent.k-character-building { border-left-color: var(--signal); } .liq-tr-ent.k-character-building .liq-tr-kind { color: var(--signal); } .liq-tr-ent.k-said-it { border-left-color: var(--text-secondary); } .liq-tr-ent.k-left-unsaid { border-left-color: var(--noise); } .liq-tr-ent.k-left-unsaid .liq-tr-kind { color: var(--noise); } .liq-tr-ent.k-pattern { border-left-color: var(--dragon, var(--necessary)); } .liq-tr-ent.k-pattern .liq-tr-kind { color: var(--dragon, var(--necessary)); }