/* PabUrmi Journal Workspace — standalone final layer. Kept separate from the legacy stylesheet so it always loads after the shared Liquid Glass rules. */ #page-journal { --journal-accent: var(--lg-tint); --journal-soft: color-mix(in srgb, var(--journal-accent) 13%, transparent); --journal-paper: rgba(var(--sol-base3-rgb),.60); --journal-paper-strong: rgba(var(--sol-base3-rgb),.80); --journal-line: rgba(var(--sol-base01-rgb),.18); --journal-inset: inset 0 1px 0 rgba(255,252,242,.74), inset 0 -1px 0 rgba(var(--sol-base01-rgb),.07); max-width: 62rem; margin-inline: auto; } #page-journal .journal-page-header { display:grid; gap:.35rem; padding:.65rem .5rem 1.1rem; } #page-journal .journal-page-title { color:var(--lg-ink)!important; font-size:clamp(2.15rem,5vw,3.15rem); font-weight:650; letter-spacing:-.055em; } #page-journal .journal-page-subtitle { max-width:34rem; color:var(--lg-muted)!important; font-size:.92rem; line-height:1.55; } #page-journal .journal-controls-bar { position:sticky!important; top:calc(4.25rem + var(--sat)); z-index:32; gap:.7rem; margin:0 -.5rem 1.35rem; padding:.72rem; border-radius:1.35rem!important; background:rgba(253, 246, 226,.55)!important; box-shadow:0 11px 28px rgba(33, 120, 181,.10),var(--journal-inset)!important; } #page-journal .journal-search-wrap { min-height:3rem; padding:.45rem 1rem; border:1px solid var(--journal-line)!important; border-radius:1rem; background:rgba(253, 246, 226,.64)!important; box-shadow:var(--journal-inset),0 1px 3px rgba(32, 115, 175,.05)!important; } #page-journal .journal-search-input { min-width:0; color:var(--lg-ink)!important; font-size:.86rem; } #page-journal .journal-filter-chips { gap:.4rem; padding:.05rem .05rem .12rem; } #page-journal .journal-chip { min-height:2.2rem; padding:.35rem .75rem; border:1px solid rgba(100, 122, 130,.14)!important; border-radius:.82rem!important; background:rgba(253, 246, 226,.45)!important; box-shadow:inset 0 1px 0 rgba(253, 246, 226,.56),0 1px 2px rgba(88, 110, 116,.05)!important; color:var(--lg-muted)!important; font-size:.7rem; font-weight:760; } #page-journal .journal-chip.active { background:var(--journal-accent)!important; box-shadow:inset 0 1px 0 rgba(253, 246, 226,.32),0 5px 12px color-mix(in srgb,var(--journal-accent) 21%,transparent)!important; color:#fdf6e2!important; } #page-journal .journal-timeline { gap:1.25rem; padding:0 .15rem 8rem; } #page-journal .journal-month-pill { position:sticky!important; top:calc(9.15rem + var(--sat)); z-index:22; align-self:center; margin:.35rem 0 .15rem; padding:.4rem .78rem; border-radius:999px; background:rgba(253, 246, 226,.74)!important; box-shadow:0 6px 17px rgba(34, 122, 184,.10),inset 0 1px 0 rgba(253, 246, 226,.66)!important; color:var(--lg-muted)!important; } #page-journal .journal-entry-card { --journal-accent: var(--lg-tint); display:grid; gap:1rem; overflow:hidden; padding:clamp(.95rem,2.5vw,1.35rem)!important; border:1px solid rgba(253, 246, 226,.78)!important; border-radius:1.5rem!important; background:var(--journal-paper)!important; box-shadow:0 14px 32px rgba(34, 121, 183,.10),var(--journal-inset)!important; cursor:pointer; transition:transform 190ms cubic-bezier(.2,.8,.2,1),background 190ms ease,box-shadow 190ms ease!important; } #page-journal .journal-entry-card::after { position:absolute; inset:0; pointer-events:none; content:''; border:1px solid color-mix(in srgb,var(--journal-accent) 22%,transparent); border-radius:inherit; opacity:.52; } #page-journal .journal-entry-card.theme-red { --journal-accent:#df4441; } #page-journal .journal-entry-card.theme-blue { --journal-accent:#2e92d9; } #page-journal .journal-entry-card.theme-green { --journal-accent:#97ae00; } #page-journal .journal-entry-card.theme-yellow { --journal-accent:#c99700; } #page-journal .journal-entry-card.theme-purple { --journal-accent:#6b70c4; } #page-journal .journal-entry-card:hover { transform:translateY(-2px)!important; background:var(--journal-paper-strong)!important; box-shadow:0 19px 39px rgba(33, 118, 179,.14),var(--journal-inset)!important; } #page-journal .journal-entry-card:active { transform:translateY(0) scale(.992)!important; } #page-journal .journal-card-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:.72rem; } #page-journal .journal-card-date { display:grid; min-width:3.3rem; min-height:3.3rem; place-items:center; padding:.45rem; border:1px solid color-mix(in srgb,var(--journal-accent) 20%,rgba(253, 246, 226,.6)); border-radius:1rem; background:color-mix(in srgb,var(--journal-accent) 10%,rgba(253, 246, 226,.62)); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.62); color:color-mix(in srgb,var(--journal-accent) 80%,var(--lg-ink)); font-size:.72rem; font-weight:820; text-align:center; } #page-journal .journal-card-title-wrap { min-width:0; padding-top:.12rem; } #page-journal .journal-card-kind, #journal-story-modal .journal-workspace-eyebrow, #journal-story-modal .journal-control-label { margin:0 0 .2rem; color:color-mix(in srgb,var(--lg-muted) 88%,transparent); font-size:.62rem; font-weight:800; letter-spacing:.1em; line-height:1.2; text-transform:uppercase; } #page-journal .journal-entry-title { margin:0; color:var(--lg-ink)!important; font-family:'Fraunces',serif; font-size:clamp(1.18rem,2.8vw,1.42rem); font-weight:620; line-height:1.18; letter-spacing:-.035em; overflow-wrap:anywhere; } #page-journal .journal-card-top-actions { display:inline-flex; align-items:center; justify-content:flex-end; gap:.35rem; min-height:2rem; } #page-journal .journal-entry-privacy-badge, #journal-story-modal .journal-private-label { display:inline-flex; align-items:center; min-height:1.7rem; padding:.24rem .52rem; border:1px solid rgba(100, 122, 130,.14); border-radius:999px; background:rgba(100, 122, 130,.10); color:var(--lg-muted); font-size:.62rem; font-weight:780; } #page-journal .journal-media-gallery, #journal-story-modal .journal-media-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.58rem; width:100%; } #page-journal .journal-media-gallery--single, #journal-story-modal .journal-media-gallery--single { grid-template-columns:minmax(0,1fr); } #page-journal .journal-media-figure, #journal-story-modal .journal-media-figure { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; overflow:hidden; border:1px solid rgba(253, 246, 226,.78); border-radius:1.05rem; background:linear-gradient(145deg,rgba(237, 231, 212,.68),rgba(253, 246, 226,.82)); box-shadow:0 7px 17px rgba(34, 121, 184,.10),inset 0 1px 0 rgba(253, 246, 226,.65); } #page-journal .journal-media-figure img, #journal-story-modal .journal-media-figure img { display:block; width:100%; min-height:11rem; max-height:33rem; object-fit:contain; background:rgba(7, 53, 65,.08); } #page-journal .journal-media-gallery:not(.journal-media-gallery--single) .journal-media-figure img { height:14rem; min-height:0; } #page-journal .journal-media-figure figcaption, #journal-story-modal .journal-media-figure figcaption { padding:.62rem .75rem .7rem; color:var(--lg-muted); font-size:.75rem; font-style:italic; line-height:1.45; overflow-wrap:anywhere; } #page-journal .journal-media-figure.is-broken::before, #journal-story-modal .journal-media-figure.is-broken::before { display:grid; min-height:8rem; place-items:center; content:'Image unavailable'; color:var(--lg-muted); font-size:.76rem; } #page-journal .journal-media-figure.is-broken img, #journal-story-modal .journal-media-figure.is-broken img { display:none; } #page-journal .journal-mood-showcase, #journal-story-modal .journal-mood-showcase { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.68rem; padding:.68rem .78rem; border:1px solid color-mix(in srgb,var(--journal-accent) 20%,rgba(253, 246, 226,.7)); border-radius:1rem; background:color-mix(in srgb,var(--journal-accent) 8%,rgba(253, 246, 226,.46)); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.58); } #page-journal .journal-mood-emoji, #journal-story-modal .journal-mood-emoji { display:grid; width:2.3rem; height:2.3rem; place-items:center; border-radius:.78rem; background:rgba(253, 246, 226,.58); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.72); font-size:1.25rem; } #page-journal .journal-mood-copy { min-width:0; } #page-journal .journal-mood-label, #journal-story-modal .journal-mood-label { display:block; margin-bottom:.12rem; color:var(--lg-muted); font-size:.61rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } #page-journal .journal-mood-copy p, #journal-story-modal .journal-mood-copy p { margin:0; color:var(--lg-ink); font-size:.82rem; line-height:1.4; overflow-wrap:anywhere; } #page-journal .journal-entry-excerpt { position:relative; max-height:21rem; overflow:hidden; color:var(--lg-ink); } #page-journal .journal-entry-excerpt::after { position:absolute; right:0; bottom:0; left:0; height:3rem; content:''; background:linear-gradient(transparent,color-mix(in srgb,var(--journal-paper) 96%,transparent)); pointer-events:none; } #page-journal .journal-entry-card--photo .journal-entry-excerpt, #page-journal .journal-entry-card--mood .journal-entry-excerpt { max-height:11rem; } .journal-rich-content { color:var(--lg-ink); font-size:.91rem; line-height:1.72; overflow-wrap:anywhere; } .journal-rich-content > :first-child { margin-top:0; } .journal-rich-content > :last-child { margin-bottom:0; } .journal-rich-content h1,.journal-rich-content h2,.journal-rich-content h3,.journal-rich-content h4 { margin:1.45em 0 .55em; color:var(--lg-ink)!important; font-family:'Fraunces',serif; font-weight:620; letter-spacing:-.028em; line-height:1.2; } .journal-rich-content h1 { font-size:1.75rem; }.journal-rich-content h2 { font-size:1.38rem; }.journal-rich-content h3 { font-size:1.12rem; } .journal-rich-content p { margin:0 0 .92rem; color:var(--lg-ink)!important; } .journal-rich-content strong { color:color-mix(in srgb,var(--journal-accent,var(--lg-tint)) 80%,var(--lg-ink))!important; } .journal-rich-content a { color:var(--journal-accent,var(--lg-tint)); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em; } .journal-rich-content blockquote { margin:1rem 0; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--journal-accent,var(--lg-tint)); color:var(--lg-muted); font-family:'Fraunces',serif; font-size:1.08rem; font-style:italic; line-height:1.52; } .journal-rich-content blockquote p { color:inherit!important; } .journal-rich-content ul,.journal-rich-content ol { margin:.75rem 0 1rem 1.1rem; padding:0; }.journal-rich-content li { margin:.28rem 0; padding-left:.15rem; } .journal-rich-content li input[type="checkbox"] { width:.95rem; height:.95rem; margin-right:.38rem; accent-color:var(--journal-accent,var(--lg-tint)); vertical-align:-.1rem; } .journal-rich-content hr { height:1px; margin:1.6rem 0; border:0; background:var(--journal-line,rgba(100, 122, 130,.16)); } .journal-rich-content pre { max-width:100%; margin:1rem 0; padding:.9rem 1rem; overflow:auto; border:1px solid rgba(33, 117, 178,.14); border-radius:.9rem; background:#073541; box-shadow:inset 0 1px 0 rgba(253, 246, 226,.08); color:#fdf6e2; font-size:.78rem; line-height:1.6; } .journal-rich-content :not(pre)>code { padding:.12rem .34rem; border-radius:.34rem; background:rgba(32, 117, 177,.10); color:#2178b6; font-size:.84em; } .journal-rich-content table { display:block; width:max-content; max-width:100%; margin:1rem 0; overflow-x:auto; border-collapse:separate; border-spacing:0; border:1px solid rgba(37, 133, 201,.17); border-radius:.8rem; background:rgba(253, 246, 226,.42); } .journal-rich-content th,.journal-rich-content td { min-width:6rem; padding:.55rem .7rem; border-right:1px solid rgba(37, 133, 201,.11); border-bottom:1px solid rgba(37, 133, 201,.11); text-align:left; } .journal-rich-content th { background:rgba(253, 246, 226,.68); color:var(--lg-ink); font-size:.76rem; font-weight:800; }.journal-rich-content tr:last-child td { border-bottom:0; }.journal-rich-content th:last-child,.journal-rich-content td:last-child { border-right:0; } .journal-rich-content .journal-inline-media { display:grid; gap:0; margin:1rem 0; overflow:hidden; border:1px solid rgba(253, 246, 226,.78); border-radius:1rem; background:rgba(252, 243, 219,.64); box-shadow:0 7px 17px rgba(34, 121, 184,.10),inset 0 1px 0 rgba(253, 246, 226,.66); } .journal-rich-content .journal-inline-media img { display:block; width:100%; max-height:42rem; object-fit:contain; background:rgba(7, 53, 65,.08); }.journal-rich-content .journal-inline-media figcaption { padding:.58rem .78rem .68rem; color:var(--lg-muted); font-size:.75rem; font-style:italic; } #page-journal .journal-entry-tags { display:flex; flex-wrap:wrap; gap:.35rem; } #page-journal .journal-tag { min-height:1.8rem; margin:0; padding:.25rem .56rem; border:1px solid color-mix(in srgb,var(--journal-accent) 18%,transparent); border-radius:999px; background:var(--journal-soft)!important; color:var(--journal-accent)!important; font-size:.66rem; font-weight:750; } #page-journal .journal-entry-footer { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:.78rem; border-top:1px solid rgba(37, 134, 203,.11); } #page-journal .journal-entry-actions { display:flex; align-items:center; gap:.3rem; } /* Tertiary role: transparent until touched, like the Tasks date arrows. */ #page-journal .journal-action-btn,#page-journal .journal-kebab-btn { display:inline-flex; align-items:center; justify-content:center; min-width:2.3rem; min-height:2.15rem; gap:.28rem; padding:.32rem .48rem; border:1px solid transparent; border-radius:var(--ctl-radius); background:transparent; box-shadow:none!important; color:var(--lg-muted); font-size:.73rem; font-weight:750; -webkit-tap-highlight-color:transparent; transition:background 160ms ease,color 160ms ease,border-color 160ms ease; } @media (hover:hover) and (pointer:fine) { #page-journal .journal-action-btn:hover,#page-journal .journal-kebab-btn:hover { border-color:var(--ctl-border); background:var(--ctl-bg-active); color:var(--journal-accent); } }.journal-action-btn.liked { color:#dd3835!important; }.journal-action-icon { font-size:1rem; line-height:1; }.journal-read-hint { color:color-mix(in srgb,var(--lg-muted) 80%,transparent); font-size:.68rem; font-weight:720; } #page-journal .journal-kebab-menu { top:calc(100% + .25rem); right:0; z-index:50; min-width:9rem; padding:.34rem; border:1px solid rgba(253, 246, 226,.78)!important; border-radius:.9rem; background:rgba(253, 246, 226,.86)!important; box-shadow:0 13px 30px rgba(32, 115, 175,.16),inset 0 1px 0 rgba(253, 246, 226,.72)!important; backdrop-filter:blur(20px) saturate(150%); } #page-journal .journal-kebab-menu button { width:100%; min-height:2.25rem; padding:.45rem .58rem; border:0; border-radius:.62rem; background:transparent; color:var(--lg-ink)!important; font-size:.74rem; font-weight:720; }#page-journal .journal-kebab-menu button:hover { background:rgba(38, 138, 209,.09); }#page-journal .journal-kebab-menu .danger { color:var(--lg-danger)!important; } #page-journal .journal-mood-only-note,#page-journal .journal-entry-empty-preview,#page-journal .journal-load-error { margin:0; color:var(--lg-muted); font-size:.86rem; font-style:italic; line-height:1.55; } #page-journal .journal-quote-showcase,#page-journal .journal-checklist-showcase,#page-journal .journal-gratitude-showcase,#page-journal .journal-question-showcase { padding:.9rem 1rem; border:1px solid color-mix(in srgb,var(--journal-accent) 17%,rgba(253, 246, 226,.68)); border-radius:1.05rem; background:color-mix(in srgb,var(--journal-accent) 6%,rgba(253, 246, 226,.48)); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.64); } #page-journal .journal-type-showcase-heading { display:flex; align-items:center; justify-content:space-between; gap:.65rem; margin-bottom:.48rem; } #page-journal .journal-type-showcase-label { display:block; color:color-mix(in srgb,var(--journal-accent) 72%,var(--lg-muted)); font-size:.62rem; font-weight:820; letter-spacing:.09em; text-transform:uppercase; } #page-journal .journal-quote-showcase blockquote { margin:0; color:var(--lg-ink); font-family:'Fraunces',serif; font-size:1.12rem; font-style:italic; line-height:1.45; }.journal-quote-source { margin:.52rem 0 0; color:var(--lg-muted); font-size:.75rem; font-weight:700; } #page-journal .journal-checklist-progress,#page-journal .journal-question-detail { color:var(--lg-muted); font-size:.68rem; font-weight:720; white-space:nowrap; }.journal-checklist-summary { display:grid; gap:.38rem; margin:0; padding:0; list-style:none; }.journal-checklist-summary li { display:flex; align-items:flex-start; gap:.5rem; color:var(--lg-ink); font-size:.84rem; line-height:1.42; }.journal-checklist-summary li.is-complete { color:var(--lg-muted); text-decoration:line-through; }.journal-checklist-mark { width:1rem; flex:0 0 1rem; color:var(--journal-accent); font-weight:850; text-decoration:none!important; }.journal-checklist-summary .journal-list-more { color:var(--lg-muted); font-size:.74rem; font-style:italic; } #page-journal .journal-gratitude-list { display:grid; gap:.44rem; margin:.48rem 0 0; padding:0; counter-reset:gratitude; list-style:none; }.journal-gratitude-list li { display:grid; grid-template-columns:1.35rem minmax(0,1fr); gap:.42rem; color:var(--lg-ink); font-size:.85rem; line-height:1.42; }.journal-gratitude-list li::before { display:grid; width:1.35rem; height:1.35rem; place-items:center; border-radius:50%; background:var(--journal-soft); color:var(--journal-accent); content:counter(gratitude); counter-increment:gratitude; font-size:.65rem; font-weight:820; }.journal-question-prompt { margin:.42rem 0 .52rem; color:var(--lg-ink); font-family:'Fraunces',serif; font-size:1.08rem; font-style:italic; line-height:1.4; } #page-journal .journal-empty-state { min-height:20rem; padding:3rem 1.5rem; border:1px solid rgba(253, 246, 226,.68); border-radius:1.5rem; background:rgba(253, 246, 226,.35); box-shadow:var(--journal-inset); }#page-journal .journal-empty-state span { display:grid; width:3rem; height:3rem; place-items:center; margin:0 0 .7rem; border-radius:1rem; background:var(--journal-soft); color:var(--journal-accent); font-size:1.35rem; }#page-journal .journal-empty-state h2 { margin:0 0 .38rem; color:var(--lg-ink); font-family:'Fraunces',serif; font-size:1.3rem; font-weight:620; }#page-journal .journal-empty-state p { max-width:25rem; margin:0; color:var(--lg-muted); line-height:1.55; } /* Workspace */ #journal-story-modal.journal-workspace { position:fixed; z-index:240; inset:0; display:grid; place-items:stretch; overflow:hidden; background:rgba(var(--sol-base03-rgb),.34); opacity:0; transition:opacity 180ms ease; } #journal-story-modal.journal-workspace.is-open { opacity:1; }#journal-story-modal.journal-workspace.hidden,#journal-story-modal .hidden { display:none!important; } body.journal-workspace-open { overflow:hidden; overscroll-behavior:none; } /* Flex column, not a positional grid template. The old `grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto` assumed the draft banner, mood editor and media manager were always present, but they are `.hidden` most of the time. With them out of the flow every later child shifted up two rows, so the flexible `1fr` row landed *below* the toolbar and stayed empty: the editor got `auto` (89px on a 390x844 phone) and the toolbar floated mid-screen with ~430px of dead space under it. Flex is order- and visibility-independent, so the editor keeps the slack no matter which optional panels are open. */ #journal-story-modal .journal-workspace-shell { display:flex; flex-direction:column; height:100dvh; overflow:hidden; background:radial-gradient(52rem 35rem at 100% -10%,rgba(181,137,0,.07),transparent 63%),radial-gradient(42rem 33rem at -8% 110%,rgba(42,161,152,.06),transparent 60%),rgba(var(--sol-base3-rgb),.965); backdrop-filter:blur(30px) saturate(150%); -webkit-backdrop-filter:blur(30px) saturate(150%); } #journal-story-modal .journal-workspace-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75rem; min-height:calc(4.5rem + var(--sat)); padding:max(.72rem,var(--sat)) clamp(.85rem,3vw,2rem) .72rem; border-bottom:1px solid rgba(253, 246, 226,.68); background:rgba(253, 246, 226,.48); box-shadow:inset 0 -1px 0 rgba(37, 133, 202,.05),inset 0 1px 0 rgba(253, 246, 226,.72); } #journal-story-modal .journal-workspace-heading-wrap { min-width:0; }#journal-story-modal .journal-workspace-eyebrow { margin-bottom:.05rem; } #journal-story-modal .composer-title-input { display:block; width:100%; min-height:1.8rem; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; color:var(--lg-ink)!important; font-size:clamp(1.05rem,2.8vw,1.38rem); font-weight:620; letter-spacing:-.035em; }#journal-story-modal .composer-title-input:focus { outline:none; background:transparent!important; box-shadow:none!important; }#journal-story-modal .composer-title-input::placeholder { color:color-mix(in srgb,var(--lg-muted) 68%,transparent)!important; } #journal-story-modal .journal-workspace-header-actions { display:inline-flex; align-items:center; justify-content:flex-end; gap:.45rem; }#journal-story-modal .journal-save-status { max-width:10.5rem; color:var(--lg-muted); font-size:.64rem; font-weight:650; line-height:1.25; text-align:right; } #journal-story-modal .journal-header-icon,#journal-story-modal .journal-secondary-action,#journal-story-modal .journal-tool-button,#journal-story-modal .editor-btn,#journal-story-modal .journal-inline-action,#journal-story-modal .journal-remove-control,/* Standard control, same material as the Tasks rail: shared tokens, inset highlights only. The `0 1px 2px` outer cast that used to be here made each button in the composer row read as its own floating object. */ #journal-story-modal .journal-media-remove { display:inline-flex; align-items:center; justify-content:center; min-height:2.32rem; padding:.4rem .65rem; border:1px solid var(--ctl-border); border-radius:var(--ctl-radius); background:var(--ctl-bg); box-shadow:var(--ctl-inset)!important; color:var(--lg-ink); font-size:.71rem; font-weight:760; -webkit-tap-highlight-color:transparent; transition:transform 150ms ease,background 150ms ease,border-color 150ms ease,box-shadow 150ms ease,color 150ms ease; } #journal-story-modal .journal-header-icon { width:2.45rem; padding:0; border-radius:.82rem; font-size:.92rem; } @media (hover:hover) and (pointer:fine) { #journal-story-modal .journal-header-icon:hover,#journal-story-modal .journal-secondary-action:hover,#journal-story-modal .journal-tool-button:hover,#journal-story-modal .editor-btn:hover,#journal-story-modal .journal-inline-action:hover { border-color:color-mix(in srgb,var(--lg-tint) 24%,var(--ctl-border)); background:var(--ctl-bg-active); color:var(--lg-tint); } } #journal-story-modal .journal-header-icon:active,#journal-story-modal .journal-secondary-action:active,#journal-story-modal .journal-tool-button:active,#journal-story-modal .editor-btn:active,#journal-story-modal .journal-inline-action:active { transform:scale(.97); box-shadow:inset 0 1px 2px rgba(88, 110, 116,.10)!important; } /* Primary, identical to .btn and the Tasks sheet's Create button. */ #journal-story-modal .journal-primary-action { display:inline-flex; align-items:center; justify-content:center; min-height:2.45rem; padding:.45rem .82rem; border:1px solid rgba(29, 104, 158,.30); border-radius:var(--ctl-radius); background:linear-gradient(135deg,color-mix(in srgb,var(--lg-tint) 90%,#fdf6e2),var(--lg-tint-strong)); box-shadow:0 5px 13px color-mix(in srgb,var(--lg-tint) 16%,transparent),inset 0 1px 0 rgba(253, 246, 226,.32)!important; color:#fdf6e2; font-size:.72rem; font-weight:800; transition:transform 150ms ease,box-shadow 150ms ease,filter 150ms ease; white-space:nowrap; } #journal-story-modal .journal-primary-action:hover { filter:brightness(1.04); box-shadow:0 8px 17px color-mix(in srgb,var(--lg-tint) 28%,transparent),inset 0 1px 0 rgba(253, 246, 226,.4)!important; }#journal-story-modal .journal-primary-action:active { transform:translateY(1px) scale(.98); box-shadow:0 2px 6px color-mix(in srgb,var(--lg-tint) 20%,transparent),inset 0 1px 2px rgba(30, 108, 164,.20)!important; }#journal-story-modal .journal-primary-action:disabled { cursor:wait; opacity:.62; filter:saturate(.65); } #journal-story-modal .journal-danger-action { display:inline-flex; align-items:center; justify-content:center; min-height:2.45rem; padding:.45rem .75rem; border:1px solid rgba(218, 41, 38,.18); border-radius:var(--ctl-radius); background:rgba(218, 41, 38,.10); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.56)!important; color:var(--lg-danger); font-size:.72rem; font-weight:800; } #journal-story-modal .journal-draft-banner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.52rem clamp(.85rem,3vw,2rem); border-bottom:1px solid rgba(213, 160, 0,.22); background:rgba(255, 245, 217,.66); color:#a27900; font-size:.74rem; font-weight:700; }#journal-story-modal .journal-draft-banner p { margin:0; }#journal-story-modal .journal-draft-banner>div { display:inline-flex; gap:.35rem; }#journal-story-modal .journal-inline-action { min-height:1.9rem; padding:.25rem .48rem; border-color:rgba(184, 138, 0,.18); background:rgba(253, 246, 226,.42); color:inherit; font-size:.66rem; } #journal-story-modal .journal-composer-controls { display:flex; align-items:center; gap:.48rem; min-width:0; overflow-x:auto; padding:.62rem clamp(.85rem,3vw,2rem); border-bottom:1px solid rgba(37, 134, 203,.09); background:rgba(253, 246, 226,.38); scrollbar-width:none; }#journal-story-modal .journal-composer-controls::-webkit-scrollbar { display:none; } #journal-story-modal .journal-privacy-control { display:inline-flex; align-items:center; gap:.48rem; min-height:2.28rem; padding:.3rem .48rem .3rem .64rem; border:1px solid rgba(88, 110, 116,.14); border-radius:.78rem; background:rgba(253, 246, 226,.43); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.64); color:var(--lg-muted); font-size:.68rem; font-weight:780; white-space:nowrap; }#journal-story-modal .journal-privacy-control input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }#journal-story-modal .journal-privacy-track { display:inline-flex; align-items:center; width:2.05rem; height:1.18rem; padding:.13rem; border:1px solid rgba(88, 110, 116,.14); border-radius:999px; background:rgba(100, 122, 130,.20); transition:background 150ms ease; }#journal-story-modal .journal-privacy-track>span { display:block; width:.88rem; height:.88rem; border-radius:50%; background:#fdf6e2; box-shadow:0 1px 3px rgba(7, 53, 65,.22); transition:transform 150ms ease; }#journal-story-modal .journal-privacy-control input:checked+.journal-privacy-track { background:var(--lg-tint); }#journal-story-modal .journal-privacy-control input:checked+.journal-privacy-track>span { transform:translateX(.83rem); } #journal-story-modal .journal-theme-picker { display:inline-flex; align-items:center; gap:.3rem; min-height:2.25rem; padding:.3rem .48rem; border:1px solid rgba(88, 110, 116,.14); border-radius:.78rem; background:rgba(253, 246, 226,.43); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.64); }#journal-story-modal .journal-theme-picker .journal-control-label { margin:0 .08rem 0 0; white-space:nowrap; }.journal-theme-swatch { position:relative; display:grid; width:1.25rem; height:1.25rem; place-items:center; cursor:pointer; }.journal-theme-swatch input { position:absolute; opacity:0; }.journal-theme-swatch span { display:block; width:.88rem; height:.88rem; border:2px solid rgba(253, 246, 226,.88); border-radius:50%; background:var(--swatch,var(--lg-tint)); box-shadow:0 1px 3px rgba(32, 115, 174,.14); transition:transform 150ms ease,box-shadow 150ms ease; }.journal-theme-swatch[data-theme="default"]{--swatch:#268ad1}.journal-theme-swatch[data-theme="red"]{--swatch:#df4441}.journal-theme-swatch[data-theme="blue"]{--swatch:#2e92d9}.journal-theme-swatch[data-theme="green"]{--swatch:#97ae00}.journal-theme-swatch[data-theme="yellow"]{--swatch:#c99700}.journal-theme-swatch[data-theme="purple"]{--swatch:#6b70c4}.journal-theme-swatch input:checked+span { transform:scale(1.18); box-shadow:0 0 0 2px rgba(253, 246, 226,.84),0 0 0 4px var(--swatch); } #journal-story-modal .journal-control-separator { width:1px; height:1.4rem; flex:0 0 auto; background:rgba(88, 110, 116,.14); }#journal-story-modal .journal-tool-button { min-height:2.28rem; padding-inline:.6rem; white-space:nowrap; }#journal-story-modal .journal-tool-button.is-active { border-color:color-mix(in srgb,var(--lg-tint) 25%,transparent); background:var(--lg-tint-soft); color:var(--lg-tint); }.composer-insert-wrap { position:relative; }#journal-story-modal .composer-insert-menu { position:fixed; z-index:320; max-height:min(20rem,60vh); overflow-y:auto; overscroll-behavior:contain; min-width:12rem; border:1px solid rgba(253, 246, 226,.78); border-radius:.9rem; background:rgba(253, 246, 226,.88); box-shadow:0 15px 34px rgba(33, 118, 179,.17),inset 0 1px 0 rgba(253, 246, 226,.72); backdrop-filter:blur(20px) saturate(150%); }#journal-story-modal .composer-insert-menu button { width:100%; min-height:2.35rem; padding:.42rem .65rem; border:0; border-radius:.58rem; background:transparent; color:var(--lg-ink); font-size:.74rem; font-weight:720; text-align:left; }#journal-story-modal .composer-insert-menu button:hover { background:rgba(38, 138, 209,.09); } #journal-story-modal .journal-mood-editor { display:grid; grid-template-columns:auto 3.1rem minmax(8rem,1fr) auto; align-items:center; gap:.55rem; padding:.65rem clamp(.85rem,3vw,2rem); border-bottom:1px solid rgba(37, 134, 203,.09); background:color-mix(in srgb,var(--lg-tint) 4%,rgba(253, 246, 226,.46)); }#journal-story-modal .journal-mood-editor>label { color:var(--lg-muted); font-size:.7rem; font-weight:760; white-space:nowrap; } #journal-story-modal .composer-mood-emoji-input,#journal-story-modal .composer-mood-reason-input,#journal-story-modal .journal-media-caption-field { border:1px solid rgba(88, 110, 116,.15)!important; border-radius:.72rem!important; background:rgba(253, 246, 226,.62)!important; box-shadow:inset 0 1px 2px rgba(88, 110, 116,.07),inset 0 1px 0 rgba(253, 246, 226,.58)!important; color:var(--lg-ink)!important; }.composer-mood-emoji-input { width:3.1rem; min-height:2.45rem; padding:.28rem; font-size:1.1rem; text-align:center; }.composer-mood-reason-input { min-width:0; min-height:2.45rem; padding:.45rem .68rem; font-size:.8rem; }#journal-story-modal .journal-remove-control { width:2.1rem; min-height:2.1rem; padding:0; color:var(--lg-muted); }#journal-story-modal .journal-remove-control:hover { border-color:rgba(218, 41, 38,.20); background:rgba(218, 41, 38,.09); color:var(--lg-danger); } #journal-story-modal .journal-media-manager { min-height:0; padding:.78rem clamp(.85rem,3vw,2rem); border-bottom:1px solid rgba(37, 134, 203,.09); background:rgba(253, 246, 226,.34); }#journal-story-modal .journal-media-manager-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.64rem; }#journal-story-modal .journal-media-manager-heading h2 { margin:0; color:var(--lg-ink); font-family:'Fraunces',serif; font-size:1rem; font-weight:620; letter-spacing:-.025em; }.journal-media-editor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:.58rem; max-height:20rem; overflow:auto; padding:.08rem; }.journal-media-editor-card { position:relative; display:grid; gap:.38rem; min-width:0; padding:.4rem; border:1px solid rgba(253, 246, 226,.75); border-radius:.95rem; background:rgba(253, 246, 226,.44); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.62),0 2px 7px rgba(7, 53, 65,.05); }.journal-media-editor-image { min-height:8.5rem; }.journal-media-editor-image img { min-height:8.5rem!important; height:8.5rem; }.journal-media-caption-field { width:100%; min-height:3.5rem; padding:.42rem .5rem; resize:vertical; font-size:.72rem; line-height:1.36; }#journal-story-modal .journal-media-remove { position:absolute; top:.65rem; right:.65rem; width:1.82rem; min-height:1.82rem; padding:0; border-color:rgba(253, 246, 226,.70); background:rgba(253, 246, 226,.76); color:var(--lg-danger); }.journal-media-editor-card.is-uploading { min-height:10rem; place-items:center; align-content:center; color:var(--lg-muted); font-size:.72rem; text-align:center; }.journal-media-editor-card.is-uploading p { margin:.45rem 0 0; overflow-wrap:anywhere; }.journal-media-upload-spinner { width:1.55rem; height:1.55rem; border:2px solid rgba(38, 138, 209,.22); border-top-color:var(--lg-tint); border-radius:50%; animation:journal-spin 700ms linear infinite; }@keyframes journal-spin { to { transform:rotate(360deg); } } #journal-story-modal .journal-mobile-editor-tabs { display:none; } /* The editor is the only child that takes the slack; everything else keeps its natural height. The media manager is the one optional panel that can grow without bound, so it scrolls internally rather than pushing the toolbar out of the shell. */ #journal-story-modal .journal-workspace-header,#journal-story-modal .journal-draft-banner,#journal-story-modal .journal-composer-controls,#journal-story-modal .journal-mood-editor,#journal-story-modal .journal-mobile-editor-tabs,#journal-story-modal .journal-editor-toolbar { flex:0 0 auto; } #journal-story-modal .journal-media-manager { flex:0 1 auto; max-height:38dvh; overflow-y:auto; } #journal-story-modal .journal-editor-layout { flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; overflow:hidden; }#journal-story-modal .journal-editor-pane,#journal-story-modal .journal-preview-pane,#journal-story-modal .journal-reader-content { min-width:0; min-height:0; overflow:auto; }#journal-story-modal .journal-editor-pane { background:rgba(253, 246, 226,.31); } #journal-story-modal .zen-textarea { display:block; width:100%; min-height:100%; padding:clamp(1.05rem,3vw,2.2rem)!important; resize:none; border:0!important; border-radius:0!important; outline:0; background:transparent!important; box-shadow:none!important; color:var(--lg-ink)!important; font-family:'Inter',sans-serif; font-size:clamp(.98rem,1.5vw,1.08rem); line-height:1.82; }#journal-story-modal .zen-textarea:focus { background:rgba(253, 246, 226,.18)!important; box-shadow:inset -1px 0 0 rgba(38, 138, 209,.16)!important; } #journal-story-modal .journal-preview-pane { padding:clamp(1.05rem,3vw,2.2rem); border-left:1px solid rgba(37, 134, 203,.10); background:rgba(253, 246, 226,.45); }#journal-story-modal .journal-preview-title { margin:0 0 1.1rem; color:var(--lg-ink); font-family:'Fraunces',serif; font-size:clamp(1.65rem,4vw,2.25rem); font-weight:620; line-height:1.1; letter-spacing:-.045em; }.journal-preview-empty { display:grid; min-height:100%; place-items:center; color:var(--lg-muted); font-size:.84rem; font-style:italic; text-align:center; }.journal-preview-gallery { margin:0 0 1.2rem; }.journal-preview-markdown { padding-bottom:2rem; } /* `margin-top:auto` keeps the bar on the bottom edge even in read mode, where the editor panes are hidden and nothing else is claiming the slack. */ #journal-story-modal .journal-editor-toolbar { display:flex; align-items:center; gap:.34rem; margin-top:auto; overflow-x:auto; padding:.58rem max(.8rem,env(safe-area-inset-right)) max(.58rem,var(--sab)) max(.8rem,env(safe-area-inset-left)); border-top:1px solid rgba(253, 246, 226,.75); background:rgba(253, 246, 226,.66); box-shadow:0 -8px 24px rgba(33, 119, 180,.06),inset 0 1px 0 rgba(253, 246, 226,.68); backdrop-filter:blur(18px) saturate(145%); -webkit-backdrop-filter:blur(18px) saturate(145%); scrollbar-width:none; }#journal-story-modal .journal-editor-toolbar::-webkit-scrollbar { display:none; } /* Square icon buttons, sized like the Tasks sheet's icon actions. 2.5rem keeps them a comfortable target in a row that is tapped constantly while writing. */ #journal-story-modal .editor-btn { width:2.5rem; min-width:2.5rem; min-height:2.5rem; padding:0; color:var(--lg-muted); font-size:.78rem; } @media (hover:hover) and (pointer:fine) { #journal-story-modal .editor-btn:hover { color:var(--lg-tint); } } #journal-story-modal[data-mode="read"] .journal-mood-editor,#journal-story-modal[data-mode="read"] .journal-media-manager,#journal-story-modal[data-mode="read"] .journal-editor-pane,#journal-story-modal[data-mode="read"] .journal-preview-pane { display:none!important; }#journal-story-modal[data-mode="read"] .journal-editor-layout { grid-template-columns:minmax(0,1fr); }#journal-story-modal[data-mode="read"] .journal-reader-content { display:block; width:min(100%,50rem); margin:0 auto; padding:clamp(1.25rem,4vw,3rem) clamp(1rem,4vw,2.6rem) calc(4.5rem + var(--sab)); } #journal-story-modal .journal-reader-meta { display:flex; align-items:center; gap:.5rem; margin-bottom:1.15rem; color:var(--lg-muted); font-size:.75rem; font-weight:700; }.journal-reader-story { margin:1.35rem 0; }.journal-reader-gallery { margin:1.2rem 0; }#journal-story-modal .journal-reader-gallery .journal-media-figure img { max-height:min(66dvh,48rem); }.journal-reader-fallback-block,.journal-reader-empty { color:var(--lg-muted); font-style:italic; }#journal-story-modal .journal-reader-content .journal-entry-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }#journal-story-modal .journal-reader-content .journal-tag { min-height:1.85rem; padding:.25rem .6rem; border:1px solid rgba(38, 138, 209,.16); border-radius:999px; background:rgba(38, 138, 209,.10); color:var(--lg-tint); font-size:.66rem; font-weight:750; } #journal-story-modal .journal-discard-dialog { position:absolute; z-index:280; inset:0; display:grid; place-items:center; padding:1rem; background:rgba(0, 44, 56,.25); backdrop-filter:blur(10px); }#journal-story-modal .journal-discard-card { width:min(100%,26rem); padding:1.3rem; border:1px solid rgba(253, 246, 226,.78); border-radius:1.3rem; background:rgba(253, 246, 226,.88); box-shadow:0 24px 62px rgba(31, 112, 170,.24),inset 0 1px 0 rgba(253, 246, 226,.75); }.journal-discard-card h2 { margin:0 0 .38rem; color:var(--lg-ink); font-family:'Fraunces',serif; font-size:1.42rem; font-weight:620; letter-spacing:-.035em; }.journal-discard-card>p:not(.journal-control-label) { margin:0; color:var(--lg-muted); font-size:.82rem; line-height:1.52; }.journal-discard-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; margin-top:1.1rem; } /* Journal button shadow correction: only Publish and the FAB are elevated. */ #journal-fab { background:linear-gradient(145deg,color-mix(in srgb,var(--lg-tint) 88%,#fdf6e2),var(--lg-tint-strong))!important; box-shadow:0 8px 17px color-mix(in srgb,var(--lg-tint) 25%,transparent),inset 0 1px 0 rgba(253, 246, 226,.38)!important; }#journal-fab:hover { box-shadow:0 11px 22px color-mix(in srgb,var(--lg-tint) 28%,transparent),inset 0 1px 0 rgba(253, 246, 226,.42)!important; }#journal-fab:active { box-shadow:0 2px 6px color-mix(in srgb,var(--lg-tint) 19%,transparent),inset 0 1px 2px rgba(29, 106, 160,.20)!important; } #page-journal button:focus-visible,#journal-story-modal button:focus-visible,#journal-story-modal input:focus-visible,#journal-story-modal textarea:focus-visible { outline:3px solid rgba(38, 138, 209,.30)!important; outline-offset:2px; } @media (max-width:768px) { #page-journal .journal-controls-bar { top:calc(3.75rem + var(--sat)); border-radius:1.08rem!important; }#page-journal .journal-month-pill { top:calc(8.5rem + var(--sat)); }#page-journal .journal-entry-card { gap:.82rem; border-radius:1.25rem!important; }#page-journal .journal-card-date { min-width:2.95rem; min-height:2.95rem; padding:.34rem; font-size:.67rem; }#page-journal .journal-card-header { gap:.56rem; }#page-journal .journal-media-gallery:not(.journal-media-gallery--single) .journal-media-figure img { height:10.5rem; }#page-journal .journal-entry-excerpt { max-height:17rem; } #journal-story-modal .journal-workspace-header { gap:.48rem; min-height:calc(4.15rem + var(--sat)); padding-inline:.8rem; }#journal-story-modal .journal-save-status { display:none; }#journal-story-modal .journal-workspace-header-actions { gap:.3rem; }#journal-story-modal .journal-secondary-action,#journal-story-modal .journal-primary-action { min-height:2.3rem; padding-inline:.62rem; font-size:.68rem; }#journal-story-modal .journal-composer-controls { padding-inline:.8rem; }#journal-story-modal .journal-theme-picker .journal-control-label,#journal-story-modal .journal-control-separator { display:none; }#journal-story-modal .journal-mood-editor { grid-template-columns:3rem minmax(0,1fr) auto; padding-inline:.8rem; }#journal-story-modal .journal-mood-editor>label { display:none; }#journal-story-modal .journal-media-manager { padding-inline:.8rem; }.journal-media-editor-grid { grid-template-columns:repeat(auto-fit,minmax(8.8rem,1fr)); } #journal-story-modal .journal-mobile-editor-tabs { display:grid; grid-template-columns:1fr 1fr; gap:.32rem; padding:.48rem .8rem; border-bottom:1px solid rgba(37, 134, 203,.09); background:rgba(253, 246, 226,.38); }/* Segmented control, matched to the Tasks List/Schedule switcher: a muted track with a white pill and accent text for the selected half, rather than the solid tinted slab that dominated the top of the editor. */ #journal-story-modal .journal-editor-tab { min-height:2.15rem; border:1px solid transparent; border-radius:.72rem; background:rgba(100, 122, 130,.09); box-shadow:none!important; color:var(--lg-muted); font-size:.72rem; font-weight:780; transition:background 160ms ease,color 160ms ease,border-color 160ms ease; }#journal-story-modal .journal-editor-tab.active { border-color:rgba(253, 246, 226,.72); background:rgba(253, 246, 226,.78); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.80),inset 0 -1px 0 rgba(100, 122, 130,.07)!important; color:var(--lg-tint); } #journal-story-modal .journal-editor-layout { grid-template-columns:minmax(0,1fr); }#journal-story-modal .journal-preview-pane { display:none; border-left:0; }#journal-story-modal[data-editor-view="preview"] .journal-editor-pane { display:none; }#journal-story-modal[data-editor-view="preview"] .journal-preview-pane { display:block; }#journal-story-modal[data-mode="read"] .journal-preview-pane { display:none!important; }#journal-story-modal .zen-textarea { padding:1.05rem .9rem!important; font-size:1rem; line-height:1.75; }#journal-story-modal .journal-preview-pane { padding:1.1rem .95rem; }#journal-story-modal .journal-editor-toolbar { padding-inline:.7rem; }#journal-story-modal .journal-reader-content { padding-inline:1rem!important; }#journal-story-modal .journal-reader-gallery .journal-media-figure img { max-height:54dvh; } } @media (max-width:440px) { #page-journal .journal-card-top-actions .journal-entry-privacy-badge { font-size:0; min-width:1.8rem; padding:.2rem; }#page-journal .journal-card-top-actions .journal-entry-privacy-badge::before { content:'•'; font-size:1rem; color:var(--lg-muted); }#page-journal .journal-read-hint { display:none; }#journal-story-modal .journal-workspace-eyebrow { font-size:.55rem; }#journal-story-modal .composer-title-input { font-size:1rem; }#journal-story-modal .journal-reader-edit-btn { display:none; }#journal-story-modal .journal-theme-swatch:nth-last-child(-n+2) { display:none; }#journal-story-modal .journal-tool-button { padding-inline:.48rem; font-size:.65rem; }#journal-story-modal .journal-draft-banner { align-items:flex-start; flex-direction:column; } } @media (prefers-reduced-motion:reduce) { #page-journal .journal-entry-card,#journal-story-modal.journal-workspace,#journal-story-modal .journal-primary-action,#journal-story-modal .journal-secondary-action,#journal-story-modal .journal-tool-button,.journal-theme-swatch span,#journal-story-modal .journal-privacy-track,#journal-story-modal .journal-privacy-track>span { transition:none!important; }.journal-media-upload-spinner { animation:none!important; } } @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) { #page-journal .journal-controls-bar,#page-journal .journal-entry-card,#page-journal .journal-month-pill,#journal-story-modal .journal-workspace-shell { background:rgba(253, 246, 226,.96)!important; } } /* ================================================================== Refine row, memories, insights and export Added alongside the archive-wide search, stats and export tools. ================================================================== */ #page-journal .journal-refine-row { display:flex; align-items:center; gap:.42rem; flex-wrap:wrap; padding:.1rem .05rem 0; } #page-journal .journal-refine-spacer { flex:1 1 0; min-width:0; } #page-journal .journal-range-select, #page-journal .journal-range-date, #page-journal .journal-refine-btn { min-height:2.2rem; padding:.35rem .7rem; border:1px solid rgba(100, 122, 130,.14); border-radius:.82rem; background:rgba(253, 246, 226,.55); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.56),0 1px 2px rgba(88, 110, 116,.05); color:var(--lg-muted); font-size:.7rem; font-weight:760; cursor:pointer; } /* A select sizes itself to its longest option ("Custom range…"), which on a phone pushed the Export button onto its own line. */ #page-journal .journal-range-select { max-width:9.5rem; appearance:none; padding-right:1.5rem; text-overflow:ellipsis; background-image:linear-gradient(45deg,transparent 50%,var(--lg-muted) 50%),linear-gradient(135deg,var(--lg-muted) 50%,transparent 50%); background-position:calc(100% - .74rem) 50%,calc(100% - .48rem) 50%; background-size:.26rem .26rem,.26rem .26rem; background-repeat:no-repeat; } #page-journal .journal-refine-btn:hover, #page-journal .journal-range-select:hover { border-color:color-mix(in srgb,var(--lg-tint) 26%,transparent); color:var(--lg-tint); } #page-journal .journal-custom-range { display:flex; align-items:center; gap:.3rem; color:var(--lg-muted); font-size:.68rem; } #page-journal .journal-custom-range.hidden { display:none; } #page-journal .journal-range-date { min-width:8.2rem; font-weight:640; } #page-journal .journal-result-count { padding:.1rem .3rem 0; color:var(--lg-muted); font-size:.7rem; font-weight:640; } #page-journal .journal-result-count.hidden { display:none; } #page-journal .journal-on-this-day { display:grid; gap:.6rem; margin:0 0 1.2rem; padding:.9rem 1rem 1rem; border:1px solid var(--journal-line); border-radius:1.25rem; background:var(--journal-paper); box-shadow:var(--journal-inset),0 6px 18px rgba(33, 120, 181,.07); } #page-journal .journal-on-this-day.hidden { display:none; } #page-journal .journal-on-this-day-head { display:flex; align-items:center; gap:.45rem; } #page-journal .journal-on-this-day-icon { font-size:1rem; } #page-journal .journal-on-this-day-title { color:var(--lg-ink); font-size:.86rem; font-weight:760; letter-spacing:-.01em; } #page-journal .journal-on-this-day-sub { margin-left:auto; color:var(--lg-muted); font-size:.7rem; font-weight:640; } #page-journal .journal-on-this-day-list { display:grid; gap:.4rem; } #page-journal .journal-on-this-day-item { display:flex; align-items:center; gap:.55rem; width:100%; min-height:2.6rem; padding:.45rem .7rem; border:1px solid rgba(100, 122, 130,.12); border-radius:.85rem; background:rgba(253, 246, 226,.5); text-align:left; cursor:pointer; } #page-journal .journal-on-this-day-item:hover { border-color:color-mix(in srgb,var(--lg-tint) 26%,transparent); background:rgba(253, 246, 226,.72); } #page-journal .journal-on-this-day-year { flex:0 0 auto; color:var(--lg-tint); font-size:.66rem; font-weight:780; text-transform:uppercase; letter-spacing:.04em; } #page-journal .journal-on-this-day-entry-title { flex:1 1 auto; min-width:0; overflow:hidden; color:var(--lg-ink); font-size:.8rem; font-weight:660; text-overflow:ellipsis; white-space:nowrap; } #page-journal .journal-on-this-day-mood { flex:0 0 auto; font-size:1rem; } /* Composer template menu */ #journal-story-modal .composer-insert-heading { padding:.45rem .65rem .2rem; color:var(--lg-muted); font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; } #journal-story-modal .composer-insert-item { display:flex; align-items:center; gap:.4rem; width:100%; min-height:2.35rem; padding:.42rem .65rem; border:0; border-radius:.58rem; background:transparent; color:var(--lg-ink); font-size:.74rem; font-weight:720; text-align:left; cursor:pointer; } #journal-story-modal .composer-insert-item:hover { background:rgba(38, 138, 209,.09); } #journal-story-modal .composer-insert-label { flex:1 1 auto; min-width:0; } #journal-story-modal .composer-insert-note { flex:0 0 auto; color:var(--lg-muted); font-size:.63rem; font-weight:660; font-style:italic; } #journal-story-modal .composer-insert-remove { flex:0 0 auto; padding:0 .2rem; color:var(--lg-muted); font-size:.7rem; cursor:pointer; } #journal-story-modal .composer-insert-remove:hover { color:#db312e; } #journal-story-modal .composer-insert-item--action { margin-top:.2rem; border-top:1px solid rgba(88, 110, 116,.14); border-radius:0 0 .58rem .58rem; color:var(--lg-tint); } /* Insights and export dialogs */ .journal-insights-content, .journal-export-content { display:flex; flex-direction:column; gap:.9rem; width:min(38rem,100%); max-height:86vh; } .journal-insights-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .journal-insights-head button { min-width:2rem; min-height:2rem; color:var(--lg-muted); font-size:.95rem; cursor:pointer; } .journal-insights-body { display:grid; gap:1.15rem; overflow-y:auto; padding-right:.15rem; } /* Grid and flex children default to min-width:auto, which stops the stat grid and the charts from shrinking on a narrow screen and pushes the dialog into a horizontal scroll. */ .journal-insights-body > *, .journal-stat-grid > *, .journal-export-options > * { min-width:0; } .journal-insights-loading { padding:2rem .5rem; color:var(--lg-muted); font-size:.82rem; text-align:center; } .journal-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(8rem,100%),1fr)); gap:.55rem; } .journal-stat-tile { display:grid; gap:.1rem; padding:.75rem .85rem; border:1px solid var(--journal-line,rgba(37, 133, 201,.14)); border-radius:1rem; background:rgba(253, 246, 226,.45); box-shadow:inset 0 1px 0 rgba(253, 246, 226,.6); } .journal-stat-value { overflow-wrap:anywhere; color:var(--lg-ink); font-size:1.35rem; font-weight:720; letter-spacing:-.03em; line-height:1.15; } .journal-stat-label { color:var(--lg-muted); font-size:.68rem; font-weight:760; text-transform:uppercase; letter-spacing:.05em; } .journal-stat-hint { color:var(--lg-muted); font-size:.66rem; font-weight:600; opacity:.85; } .journal-insight-section { display:grid; gap:.5rem; } .journal-insight-heading { color:var(--lg-ink); font-size:.78rem; font-weight:760; } .journal-insight-chart { position:relative; min-width:0; height:11rem; padding:.35rem; border:1px solid var(--journal-line,rgba(37, 133, 201,.14)); border-radius:1rem; background:rgba(253, 246, 226,.4); } .journal-insight-tags { display:flex; flex-wrap:wrap; gap:.4rem; } .journal-insight-tag { display:inline-flex; align-items:center; gap:.35rem; min-height:2rem; padding:.3rem .7rem; border:1px solid rgba(100, 122, 130,.16); border-radius:.8rem; background:rgba(253, 246, 226,.5); color:var(--lg-ink); font-size:.72rem; font-weight:700; cursor:pointer; } .journal-insight-tag:hover { border-color:color-mix(in srgb,var(--lg-tint) 30%,transparent); color:var(--lg-tint); } .journal-insight-tag-count { color:var(--lg-muted); font-size:.65rem; font-weight:700; } .journal-export-summary { color:var(--lg-muted); font-size:.76rem; font-weight:640; } .journal-export-options { display:grid; gap:.5rem; } .journal-export-option { display:grid; gap:.15rem; padding:.75rem .9rem; border:1px solid var(--journal-line,rgba(37, 133, 201,.14)); border-radius:1rem; background:rgba(253, 246, 226,.45); text-align:left; cursor:pointer; } .journal-export-option:hover { border-color:color-mix(in srgb,var(--lg-tint) 30%,transparent); background:rgba(253, 246, 226,.7); } .journal-export-option-title { color:var(--lg-ink); font-size:.82rem; font-weight:740; } .journal-export-option-sub { color:var(--lg-muted); font-size:.7rem; font-weight:600; } .journal-export-scope { display:flex; align-items:center; gap:.5rem; color:var(--lg-muted); font-size:.74rem; font-weight:660; } /* ================================================================== Reader legibility ------------------------------------------------------------------ Reading an entry is the one place in the app where the glass has to stop being glass. The workspace fills the viewport, so anything showing through it is the timeline the reader just left — that never reads as depth, only as text printed over other text. Worse, the app drops backdrop-filter entirely on coarse pointers (the phone build), so on the device the shell was a flat 72% wash with the list legible straight through the prose. In read mode the shell therefore goes to solid Solarized paper and the entry sits on its own slightly raised sheet, so the story has a real page under it. Compose mode keeps its translucency: there the surface behind the editor is workspace chrome, not content. ================================================================== */ #journal-story-modal[data-mode="read"] .journal-workspace-shell { background: radial-gradient(56rem 38rem at 100% -12%, rgba(181, 137, 0, .09), transparent 62%), radial-gradient(44rem 34rem at -8% 112%, rgba(42, 161, 152, .07), transparent 60%), var(--sol-base3); } #journal-story-modal[data-mode="read"] .journal-workspace-header { border-bottom-color: rgba(var(--sol-base01-rgb), .16); background: rgba(var(--sol-base3-rgb), .92); } #journal-story-modal[data-mode="read"] .journal-reader-content { /* The sheet is a touch lighter than the shell behind it, edged rather than shadowed, so the column of text reads as a page on a desk. */ background: linear-gradient(180deg, #fffdf6 0%, var(--sol-base3) 42%, #f8f1de 100%); border: 1px solid rgba(var(--sol-base01-rgb), .14); border-radius: 1.4rem; box-shadow: 0 1px 2px rgba(var(--sol-base03-rgb), .06), 0 18px 44px -26px rgba(var(--sol-base03-rgb), .28), inset 0 1px 0 rgba(255, 253, 246, .9); margin-block: clamp(.75rem, 2.5vw, 1.4rem) calc(2.5rem + var(--sab)); } /* Ink, not grey-on-grey: the story runs at base01 on base3, headings and emphasis at base02, which is the palette's own reading contrast. */ #journal-story-modal[data-mode="read"] .journal-reader-content, #journal-story-modal[data-mode="read"] .journal-rich-content { color: var(--sol-base01); } #journal-story-modal[data-mode="read"] .journal-rich-content strong, #journal-story-modal[data-mode="read"] .journal-rich-content b, #journal-story-modal[data-mode="read"] .journal-rich-content h1, #journal-story-modal[data-mode="read"] .journal-rich-content h2, #journal-story-modal[data-mode="read"] .journal-rich-content h3, #journal-story-modal[data-mode="read"] .journal-rich-content h4, #journal-story-modal[data-mode="read"] .journal-preview-title { color: var(--sol-base02) !important; } #journal-story-modal[data-mode="read"] .journal-reader-meta { color: var(--sol-base00); } /* Media and mood blocks inside the reader sit on the sheet, so they take a base2 fill instead of the translucent one used out on the wallpaper. */ #journal-story-modal[data-mode="read"] .journal-media-figure { border-color: rgba(var(--sol-base01-rgb), .16); background: linear-gradient(145deg, var(--sol-base2), #f7f0dd); } #journal-story-modal[data-mode="read"] .journal-mood-showcase { background: color-mix(in srgb, var(--journal-accent) 9%, var(--sol-base2)); border-color: color-mix(in srgb, var(--journal-accent) 22%, rgba(var(--sol-base01-rgb), .18)); } @media (min-width: 901px) { /* On a wide screen the sheet needs something to sit on, so the shell drops to base2 and the page above it stays base3. */ #journal-story-modal[data-mode="read"] .journal-workspace-shell { background: radial-gradient(56rem 38rem at 100% -12%, rgba(181, 137, 0, .10), transparent 62%), radial-gradient(44rem 34rem at -8% 112%, rgba(42, 161, 152, .07), transparent 60%), #f3ecd9; } } @media (max-width: 900px) { /* Full-bleed on a phone: a rounded card inside a full-screen shell just wastes the horizontal space the text needs. */ #journal-story-modal[data-mode="read"] .journal-reader-content { margin-block: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--sol-base3); } } /* No-blur builds: the shell is already opaque in read mode, so this only has to catch compose mode. */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) { #journal-story-modal .journal-workspace-shell { background: var(--sol-base3) !important; } }