.row{display:flex;align-items:center;gap:var(--sp-2,.5rem);flex-wrap:wrap} textarea{min-height:18rem;line-height:1.65;font-size:.97rem} .diary-rich-source{width:100%;box-sizing:border-box} .diary-rich-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2,.5rem);margin:.35rem 0 .45rem} .diary-rich-bar .diary-entry-label{margin:0;font-weight:600} .diary-rich-bar .btn{min-height:31px} .diary-rich #tui-diary{margin-top:.35rem} /* ..idea.. marker highlight in the WYSIWYG editor — signals a wrapped sentence will be lifted into Ideas on save. Matches the amber Ideas accent. */ .idea-mark{background:rgba(210,153,29,.18);border-bottom:2px solid #d2991d;padding:0 .12em;cursor:help} .idea-mark.idea-planned{background:rgba(63,185,80,.18);border-bottom-color:#3fb950} .idea-mark.idea-archived{background:rgba(139,148,158,.15);border-bottom-color:var(--muted,#8b949e)} /* Paired slash-slash reflection highlight: a cooler blue than the idea yellow so the two capture modes read distinctly. */ .note-mark{background:rgba(88,166,255,.14);border-bottom:2px solid #58a6ff;padding:0 .12em;cursor:help;font-style:italic} /* Forward leg: a reflection that has LANDED on a step in Steps — a solid underline (vs the dashed-feel capture highlight) so "captured" vs "landed" reads at a glance, mirroring how a planned idea shows green. Distinct hue from the idea-status greens so the two overlays never blur. */ .note-mark.note-attached{background:rgba(88,166,255,.22);border-bottom-style:solid;border-bottom-width:3px} /* Command-result receipt (,, grammar / ..! palette): a third paired-marker overlay, mirroring idea-mark/note-mark, so a command's result is one atomic backspace-deletable element instead of ordinary editable text — "they ran a command, they got a result". */ .cmd-result-mark{background:rgba(63,185,80,.14);border-bottom:2px solid #3fb950;padding:0 .12em;cursor:default;font-family:ui-monospace,monospace;font-size:.92em} .cmd-result-mark.cmd-result-err{background:rgba(248,81,73,.14);border-bottom-color:#f85149} .diary-rich .toastui-editor-defaultUI{;overflow:hidden} .diary-rich .toastui-editor-contents{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.97rem;line-height:1.65;letter-spacing:0} .diary-rich .toastui-editor-contents p,.diary-rich .toastui-editor-contents li,.diary-rich .toastui-editor-contents td{font-size:.97rem;line-height:1.65} .diary-rich.diary-full{position:fixed;inset:0;z-index:99999;margin:0;padding:1rem 1.4rem;background:var(--panel2);overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-1,.25rem)} .diary-rich.diary-full .diary-rich-bar{flex:0 0 auto;margin:.2rem 0 .5rem} .diary-rich.diary-full #tui-diary{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:0} .diary-rich.diary-full .toastui-editor-defaultUI{flex:1 1 auto;min-height:0;height:auto!important;display:flex;flex-direction:column} /* Toast's internals must also flex+scroll or long entries overflow the overflow:hidden full-screen modal and become unreachable (the full-screen scroll bug). */ .diary-rich.diary-full .toastui-editor-main{flex:1 1 auto;min-height:0} .diary-rich.diary-full .toastui-editor-md-container,.diary-rich.diary-full .toastui-editor-ww-container{height:100%;min-height:0} .diary-rich.diary-full .toastui-editor-md-container .toastui-editor,.diary-rich.diary-full .toastui-editor-ww-container .toastui-editor{height:100%;min-height:0;overflow-y:auto} .diary-rich.diary-full #diary-fullscreen-btn{position:fixed;top:.5rem;right:.6rem;z-index:100001;width:2.1rem;height:2.1rem;min-width:0;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1} body.pe-fullscreen .fb-launch,body.pe-fullscreen .fb-overlay,body.pe-fullscreen .ws-switch{display:none!important} /* mood: a segmented control of COLOUR swatches matching the year-in-pixels palette (red→green), so picking a mood here mirrors how it shows on /entry and /year. */ .mood-row{display:flex;gap:var(--sp-2,.5rem);align-items:center;flex-wrap:wrap;margin:.2rem 0 .4rem} .mood-btn{display:inline-block;width:2.5rem;height:2.5rem;border:1px solid var(--border2);cursor:pointer;padding:0;box-shadow:inset 0 0 0 3px var(--row-hover,#1b1f25);transition:transform .08s ease,box-shadow .12s ease} .mood-btn:hover{transform:translateY(-1px) scale(1.04)} .mood-btn.sel{border-color:var(--text-hi);box-shadow:inset 0 0 0 3px var(--row-hover,#1b1f25),0 0 0 2px var(--text-hi)} .mood-cur{color:var(--muted);font-size:.8rem} /* the small mood colour swatch shown in the /entry list (matches a year pixel) */ .mood-dot{display:inline-block;width:15px;height:15px;vertical-align:-3px;box-shadow:inset 0 0 0 2px var(--row-hover,#1b1f25)} /* year-in-pixels (mood) */ .yp-wrap{padding:.35rem 0} /* The whole year fits the container width — 53 week-columns × 7 day-rows scale down to square cells, no horizontal scroll. aspect-ratio gives the grid its height so the rows have something to divide; cells stretch to fill their track (no fixed px size). */ .yp{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;width:100%;aspect-ratio:53/7} /* Empty/unlogged days are a visibly distinct grey (not the near-background #1b222d) and every cell carries a faint inner border, so the grid structure — and the gaps where no mood was logged — stay clearly visible the way the Pixels app shows them. */ .yp i,.yp-cell,.yp-mgrid i{min-width:0;min-height:0;background:var(--border2,#2d343f);box-shadow:inset 0 0 0 3px var(--row-hover,#1b1f25);transition:transform .1s ease} /* The /year page uses a chunkier 14-row grid: 27 week-and-a-bit columns of square cells that fill the width, so the pixels are larger and the page feels meatier. */ .yp.tall{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(27,minmax(0,1fr));aspect-ratio:auto} .yp.tall i,.yp.tall .yp-cell{aspect-ratio:1} /* Each day pixel is a clickable anchor to that day's editor. block+relative so the hover card positions off the CELL (both the continuous .yp grid AND the month .yp-mgrid — the selector must NOT be scoped to .yp or month cells stay position:static and the tip escapes to a distant ancestor, mispositioning + clipping above the viewport). */ .yp-cell{display:block;position:relative;cursor:pointer;text-decoration:none} .yp i:hover,.yp-cell:hover,.yp-cell:focus-visible{transform:scale(1.4);z-index:3;outline:none} .yp-cell:focus-visible{box-shadow:inset 0 0 0 3px var(--row-hover,#1b1f25),0 0 0 2px var(--text-hi)} .yp-future{cursor:default} /* Hover card: date + mood, shown on hover/focus of a pixel. Positioned above the cell. Nowrap + compact. The native title stays as a no-hover-CSS fallback. Centered by default. */ .yp-cell .yp-tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.85);transform-origin:bottom center;white-space:nowrap;background:var(--panel2,#0d1117);color:var(--text-hi,#f0f6fc);border:1px solid var(--border2,#2d343f);padding:.2rem .45rem;font-size:.72rem;line-height:1.2;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .1s ease;z-index:5} .yp-cell:hover .yp-tip,.yp-cell:focus-visible .yp-tip{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)} /* EDGE-SAFE (pure CSS, no JS): a centered tip on the CONTINUOUS grid's left/right column would overflow the grid — and clip past a narrow viewport. .yp.tall is a fixed 27-col grid whose ONLY children are the cells, so nth-child(27n) = the right column and nth-child(27n+1) = the left column exactly. Re-anchor those edge tips to their own side (open inward) instead of centre, so nothing crosses the grid/viewport boundary. (Month view: the 7-col mini-grids sit in narrow ~11rem blocks centred in the page, far from the viewport edge, and their grid also holds weekday-header spans — so nth-child edge-detection doesn't apply cleanly and isn't needed; those tips have ample room on both sides.) */ .yp.tall .yp-cell:nth-child(27n+1) .yp-tip{left:0;right:auto;transform:translateX(0) scale(.85);transform-origin:bottom left} .yp.tall .yp-cell:nth-child(27n+1):hover .yp-tip,.yp.tall .yp-cell:nth-child(27n+1):focus-visible .yp-tip{transform:translateX(0) scale(1)} .yp.tall .yp-cell:nth-child(27n) .yp-tip{left:auto;right:0;transform:translateX(0) scale(.85);transform-origin:bottom right} .yp.tall .yp-cell:nth-child(27n):hover .yp-tip,.yp.tall .yp-cell:nth-child(27n):focus-visible .yp-tip{transform:translateX(0) scale(1)} /* Layout toggle (continuous ↔ by month). */ .yp-toggle{display:inline-flex;gap:0;margin:0 0 1rem;border:1px solid var(--border2,#2d343f);overflow:hidden} .yp-tg{padding:.3rem .7rem;font-size:.82rem;color:var(--muted);text-decoration:none;background:transparent} .yp-tg+.yp-tg{border-left:1px solid var(--border2,#2d343f)} .yp-tg:hover{color:var(--text-hi)} .yp-tg.sel{background:var(--row-hover,#1b1f25);color:var(--text-hi)} /* Month-grouped layout: 12 blocks, each a Mon→Sun weekday-aligned mini calendar. */ .yp-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:var(--sp-4,1rem)} .yp-month h4{margin:0 0 .35rem;font-size:.85rem;color:var(--muted);font-weight:600} .yp-mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .yp-mgrid .yp-cell,.yp-mgrid i{aspect-ratio:1} .yp-wd{font-size:.6rem;color:var(--muted);text-align:center;line-height:1} .yp-pad{background:transparent!important;box-shadow:none!important} .yp-legend{display:flex;align-items:center;gap:var(--sp-1,.25rem);font-size:.72rem;color:var(--muted);margin-top:.6rem} .yp-legend i{display:inline-block;width:12px;height:12px} .yp-year{margin:0 0 1.6rem} .yp-year h3{margin:0 0 .5rem;font-size:1.05rem;color:var(--text-hi)} .day-nav{display:flex;justify-content:space-between;gap:var(--sp-2,.5rem);margin:0 0 1rem} /* Prev/next share the row equally so the switcher is symmetric regardless of the differing label lengths ("← Previous day" vs "Next day →"). */ /* Prev/next are 25% taller than other buttons (25→31) for a comfortable day-switcher. */ .day-nav .btn{flex:1;min-height:31px} /* ── ..! command palette (theme-var only; no hardcoded palette) ──────────── */ .cmdp{position:absolute;z-index:100050;min-width:19rem;max-width:26rem;background:var(--panel2,#0d1117);border:1px solid var(--border2,#30363d);box-shadow:0 10px 34px rgba(0,0,0,.45);overflow:hidden;font-size:.9rem} .cmdp-hd{display:flex;align-items:center;gap:var(--sp-2,.5rem);padding:.4rem .6rem;border-bottom:1px solid var(--border2,#30363d);color:var(--muted,#8b949e);font-size:.78rem} .cmdp-grammar-hd .cmdp-type{font-weight:700;font-size:.66rem;letter-spacing:.04em;background:var(--green-dim,#238636);color:#fff;padding:.08rem .35rem} .cmdp-grammar-hd.bad .cmdp-type{background:var(--red-hi,#f85149)} .cmdp-grammar-hd .cmdp-active{color:var(--text,#c9d1d9);font-weight:600} .cmdp-grammar-hd .cmdp-req{color:var(--red-hi,#f85149);font-weight:700} .cmdp-grammar-hd .cmdp-valid{margin-left:auto;font-weight:700} .cmdp-grammar-hd:not(.bad) .cmdp-valid{color:var(--green-hi,#3fb950)} .cmdp-grammar-hd.bad .cmdp-valid{color:var(--red-hi,#f85149)} .cmdp-picker{display:flex;align-items:stretch;gap:var(--sp-2,.5rem);padding:.5rem .6rem;border-bottom:1px solid var(--border2,#30363d)} .cmdp-picker input{min-width:0;flex:1;background:var(--panel,#161b22);color:var(--text,#c9d1d9);border:1px solid var(--input-border,#30363d);padding:.4rem .55rem;font:inherit;color-scheme:light dark} .cmdp-picker button{flex:none;border:1px solid var(--green-hi,#3fb950);background:var(--green-dim,#238636);color:#fff;padding:.4rem .7rem;font:inherit;font-weight:650;cursor:pointer} .cmdp-list{max-height:15rem;overflow-y:auto} .cmdp-item{display:flex;width:100%;box-sizing:border-box;align-items:center;gap:var(--sp-2,.5rem);padding:.4rem .6rem;cursor:pointer;color:var(--text,#c9d1d9);background:transparent;border:0;text-align:left;font:inherit} .cmdp-item:hover,.cmdp-item.sel{background:var(--row-hover,#1b1f25)} .cmdp-item:focus-visible{outline:2px solid var(--link,#58a6ff);outline-offset:-2px} .cmdp-item .cmdp-emoji{width:1.2rem;text-align:center} .cmdp-item .cmdp-title{font-weight:600} .cmdp-item .cmdp-desc{color:var(--muted,#8b949e);font-size:.78rem;margin-left:auto;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmdp-empty{padding:.6rem;color:var(--muted,#8b949e)} .cmdp-flow{padding:.6rem} .cmdp-flow label{display:block;color:var(--muted,#8b949e);font-size:.8rem;margin-bottom:.25rem} .cmdp-flow .cmdp-prompt{color:var(--text,#c9d1d9);margin-bottom:.45rem;font-size:.85rem} .cmdp-flow input,.cmdp-flow select,.cmdp-flow textarea{width:100%;box-sizing:border-box;background:var(--panel,#161b22);color:var(--text,#c9d1d9);border:1px solid var(--input-border,#30363d);padding:.4rem .55rem;font-size:.9rem} .cmdp-flow .cmdp-actions{display:flex;gap:var(--sp-2,.5rem);margin-top:.5rem} .cmdp-err{color:var(--red-hi,#f85149);font-size:.78rem;margin-top:.35rem} .cmdp-refl-inp{width:calc(100% - 1.2rem);box-sizing:border-box;margin:.1rem .6rem .5rem;background:var(--panel,#161b22);color:var(--text,#c9d1d9);border:1px solid var(--input-border,#30363d);padding:.4rem .55rem;font-size:.9rem} .cmdp .cmdp-actions{display:flex;gap:var(--sp-2,.5rem);padding:0 .6rem .6rem} .ins-form{display:flex;gap:var(--sp-2,.5rem);align-items:flex-end;flex-wrap:wrap;margin:.2rem 0 .4rem} .ins-form label{display:flex;flex-direction:column;gap:var(--sp-1,.25rem);font-size:.82rem;color:var(--muted)} .ins-form input[type=text]{background:var(--panel,#161b22);color:var(--text,#c9d1d9);border:1px solid var(--input-border,#30363d);padding:.45rem .6rem;font-size:.95rem;min-width:12rem} .ins-chips{display:flex;gap:var(--sp-1,.25rem);flex-wrap:wrap;margin:.1rem 0 .3rem} .ins-chip{background:var(--row-hover,#1b1f25);color:var(--text,#c9d1d9);border:1px solid var(--border2,#30363d);border-radius:var(--r-pill);padding:.15rem .6rem;font-size:.8rem;cursor:pointer;text-decoration:none} .ins-chip:hover{border-color:var(--text-hi)} /* one co-occurrence row: term + a lift bar + the day/lift figures */ .co-row{display:grid;grid-template-columns:9rem 1fr auto;align-items:center;gap:var(--sp-2,.5rem);padding:.28rem 0;border-bottom:1px solid var(--border2,#21262d)} .co-row:last-child{border-bottom:none} .co-term{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .co-bar{position:relative;height:1.1rem;background:var(--row-hover,#1b1f25);border-radius:var(--r);overflow:hidden} .co-bar>i{position:absolute;inset:0 auto 0 0;background:var(--accent,#3fb950);opacity:.85} .co-fig{font-size:.8rem;color:var(--muted);white-space:nowrap} .co-fig b{color:var(--text,#c9d1d9)} .ins-note{color:var(--muted);font-size:.82rem;margin:.3rem 0 0} /* Section 2 header + show/hide slider for the health cards */ .ins-bio-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2,.5rem)} .ins-bio-head h3{margin:0} .ins-bio-tog{position:relative;display:inline-block;width:2.4rem;height:1.3rem;flex:0 0 auto;cursor:pointer} .ins-bio-tog input{opacity:0;width:0;height:0;position:absolute} .ins-bio-tog span{position:absolute;inset:0;background:var(--border2,#30363d);border-radius:var(--r-pill);transition:background .15s} .ins-bio-tog span::before{content:"";position:absolute;left:2px;top:2px;width:1.05rem;height:1.05rem;background:#fff;border-radius:50%;transition:transform .15s} .ins-bio-tog input:checked+span{background:var(--accent,#3fb950)} .ins-bio-tog input:checked+span::before{transform:translateX(1.1rem)} @media(max-width:520px){ .co-row{grid-template-columns:6.5rem 1fr;grid-template-areas:"term fig" "bar bar";row-gap:var(--sp-1,.25rem)} .co-term{grid-area:term}.co-fig{grid-area:fig;text-align:right}.co-bar{grid-area:bar} } .fp-form textarea{min-height:0;font-size:.95rem} .fp-form label.checkbox{display:flex;align-items:center;gap:var(--sp-2,.5rem)} .fp-form label.checkbox input{width:auto;margin:0;flex:none} .day-chips{display:flex;gap:var(--sp-1,.25rem);flex-wrap:wrap} .day-chip{font-size:.8rem;background:transparent;border:1px solid var(--border2,#30363d);color:var(--muted,#8b949e);padding:.34rem .6rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .12s ease,color .12s ease} .day-chip input{display:none} .day-chip:hover{border-color:var(--text,#c9d1d9);color:var(--text,#c9d1d9)} .day-chip:has(input:checked){border-color:var(--primary,#2ea043);color:var(--primary,#2ea043)} .xfn-cfg{display:flex;flex-direction:column;gap:var(--sp-2,.5rem)} .xfn-row{display:flex;align-items:center;gap:var(--sp-2,.5rem);flex-wrap:wrap} /* Vertical alignment of the "Send via" label against its Email/Chat toggles. THE ACTUAL CAUSE (found only by inspecting the FULL page cascade, not an isolated component — earlier rounds guessed emoji/line-box and never fixed it): the app shell ships a GLOBAL rule 'label{display:block;margin:1rem 0 .25rem}'. Our channel toggles are