@import "carnet-entry.css";
:root { color-scheme:dark; --bg:#0b0e1a; --surface:#121731; --border:rgba(128,158,255,.25); --text:#e3e6ff; --muted:rgba(171,160,255,.7); --accent:#809eff; --violet:#6e4aff; --bold:#bcd4ff; --head:'Space Grotesk',sans-serif; }
* { box-sizing:border-box; } body { background:radial-gradient(circle at 15% 0,#1d2450 0,var(--bg) 40%); color:var(--text); font-family:Inter,Arial,sans-serif; line-height:1.7; margin:0; min-height:100vh; }
.journal-wrap { margin:0 auto; max-width:1080px; padding:0 24px; } .journal-hero { border-bottom:1px solid var(--border); padding:32px 0 70px; }
.journal-heading { align-items:center; display:flex; gap:28px; } .journal-brand { align-items:center; color:var(--text); display:inline-flex; flex:none; padding:4px; text-decoration:none; } .journal-brand img { height:168px; object-fit:contain; width:168px; } .journal-brand-closed { display:none; } .journal-brand:hover .journal-brand-open,.journal-brand:focus-visible .journal-brand-open { display:none; } .journal-brand:hover .journal-brand-closed,.journal-brand:focus-visible .journal-brand-closed { display:block; }
.journal-heading-copy { min-width:0; } .journal-kicker { color:var(--accent); font-size:.72rem; letter-spacing:.14em; margin:0 0 16px; text-transform:uppercase; } h1 { font-family:var(--head); font-size:clamp(2.4rem,6vw,4rem); letter-spacing:-.07em; line-height:.9; margin:0; } h1 em { color:var(--accent); font-style:normal; } .journal-intro { color:var(--muted); font-size:1.1rem; margin-bottom:0; max-width:520px; }
.journal-controls { margin:28px 0 44px; padding:0; } .research-layout { align-items:start; display:grid; gap:28px; grid-template-columns:minmax(0,1fr) auto; } .research-fields { min-width:0; } .research-actions { align-items:flex-end; display:flex; flex-direction:column; gap:10px; } .search-label,.date-label { color:var(--muted); display:block; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; } input { background:#0b0e1a; border:1px solid var(--border); border-radius:5px; color:var(--text); font:inherit; margin-left:8px; padding:8px 10px; } .search-label input { width:min(100%,480px); }
.tag-picker { position:relative; } .tag-toggle { align-items:center; display:inline-flex; font-size:.75rem; gap:8px; letter-spacing:.04em; text-transform:uppercase; } .tag-toggle-value { color:var(--accent); max-width:16ch; overflow:hidden; text-overflow:ellipsis; text-transform:none; white-space:nowrap; } .tag-toggle.filtered { border-color:var(--accent); } .tag-toggle-caret { border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; height:0; transition:transform .15s ease; width:0; } .tag-toggle[aria-expanded="true"] .tag-toggle-caret { transform:rotate(180deg); }
.tag-panel { backdrop-filter:blur(10px); background:#151a38f5; border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 40px rgba(5,6,12,.55); display:flex; flex-wrap:wrap; gap:6px; max-height:46vh; max-width:min(520px,calc(100vw - 48px)); overflow-y:auto; padding:12px; position:absolute; right:0; top:calc(100% + 8px); width:max-content; z-index:4; } .tag-panel[hidden] { display:none; } .tag-panel .tag { font-size:.72rem; letter-spacing:.02em; padding:4px 10px; } .tag-panel .tag-any { background:transparent; color:var(--muted); } .tag-panel .tag-any:hover,.tag-panel .tag-any.active { background:var(--violet); color:var(--text); } .tag-panel-empty { color:var(--muted); font-size:.75rem; margin:0; }
button,.tag { background:#202952; border:1px solid var(--border); border-radius:999px; color:var(--text); cursor:pointer; font:inherit; padding:6px 11px; } button:hover,.tag.active { background:var(--violet); border-color:var(--accent); }
#sort { align-items:center; display:inline-flex; gap:8px; } .sort-logo { height:20px; object-fit:contain; width:20px; }
.date-filter { align-items:center; display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } .date-filter .date-label { display:inline-block; } input[type="date"] { cursor:pointer; font-size:.85rem; margin-left:0; padding:7px 9px; } input[type="date"]:disabled { color:var(--muted); cursor:not-allowed; opacity:.55; } input[type="date"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.7; } input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity:1; } .date-clear { font-size:.72rem; letter-spacing:.04em; padding:5px 10px; text-transform:uppercase; } .date-clear[hidden] { display:none; }
.journal-stream { display:grid; gap:28px; } .entry { border-bottom:2px solid var(--violet); padding:4px 0 24px; position:relative; } .entry-meta { color:var(--muted); display:flex; flex-wrap:wrap; font-size:.75rem; gap:12px; letter-spacing:.06em; text-transform:uppercase; } .entry-head { align-items:flex-start; display:flex; gap:16px; justify-content:space-between; margin-bottom:14px; } .entry-heading { min-width:0; } .entry-title { font-family:var(--head); font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.2; margin:8px 0 0; } .entry-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; } .entry-tags span { color:var(--muted); font-size:.8rem; } .entry-actions { align-items:center; display:flex; flex:none; gap:6px; } .entry-icon { align-items:center; background:#202952; border:1px solid var(--border); border-radius:999px; color:var(--text); cursor:pointer; display:inline-flex; height:34px; justify-content:center; padding:0; transition:background .15s ease,border-color .15s ease,opacity .2s ease; width:34px; } .entry-icon:hover,.entry-icon:focus-visible { background:var(--violet); border-color:var(--accent); } .entry-icon img,.entry-icon svg { height:16px; object-fit:contain; width:16px; } .entry-share.copied { opacity:.6; } .entry-detail-back { align-items:center; background:#202952; border:1px solid var(--border); border-radius:999px; display:inline-flex; height:56px; justify-content:center; justify-self:start; margin:40px 0; padding:8px; text-decoration:none; transition:background .15s ease,transform .15s ease; width:56px; } .entry-detail-back img { height:40px; object-fit:contain; width:40px; } .entry-detail-back:hover,.entry-detail-back:focus-visible { background:var(--violet); border-color:var(--accent); box-shadow:0 0 0 4px #809eff33; transform:scale(1.08); } .empty-state { color:var(--muted); padding:50px 0; text-align:center; }
  
   
.tag-tinted { border-color:var(--tag); color:var(--tag); } .tag-tinted:hover,.tag-tinted.active { background:var(--tag); border-color:var(--tag); color:var(--tag-ink); }
.entry-tinted { border-bottom-color:transparent; } .entry-tinted::after { background:linear-gradient(90deg,var(--entry-a),var(--entry-b)); bottom:-2px; content:""; height:2px; left:0; position:absolute; right:0; }
.entry-tinted .entry-title { color:var(--entry-a); }
@supports ((background-clip:text) or (-webkit-background-clip:text)) { .entry-gradient .entry-title { -webkit-background-clip:text; background-clip:text; background-image:linear-gradient(95deg,var(--entry-a),var(--entry-b)); color:transparent; } }
.entry-tags span.tinted { color:var(--tag); }
/* Folded entries: up to the editor's preview cut, or a clipped, fading excerpt when there is none. */
.entry-body hr[data-preview-cut] { display:none; }
.entry-collapsed .entry-body.has-cut hr[data-preview-cut] ~ * { display:none; }
.entry-collapsed .entry-body:not(.has-cut) { -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent); max-height:220px; overflow:hidden; }
.entry-collapsed .entry-body { cursor:pointer; }
.journal-toolbar { align-items:center; display:flex; flex-direction:row; gap:8px; justify-content:flex-end; } .journal-toolbar[hidden] { display:none; } .journal-toolbar button { font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
.toolbar-icon { align-items:center; display:inline-flex; height:49px; justify-content:center; padding:6px; width:49px; } .toolbar-icon img { height:34px; object-fit:contain; width:34px; }
.go-to-top { align-items:center; background:transparent; border:0; bottom:24px; display:flex; height:28px; justify-content:center; opacity:0; padding:0; pointer-events:none; position:fixed; right:24px; transform:translateY(12px); transition:opacity .25s ease,transform .25s ease; width:28px; z-index:20; } .go-to-top.is-visible { animation:go-to-top-bounce 7s ease-in-out 1.5s infinite; opacity:1; pointer-events:auto; transform:translateY(0); } .go-to-top:hover,.go-to-top:focus-visible { filter:drop-shadow(0 0 6px var(--accent)); } .go-to-top img { height:100%; object-fit:contain; width:100%; } @keyframes go-to-top-bounce { 0%,82%,100% { transform:translateY(0); } 86% { transform:translateY(-8px); } 90% { transform:translateY(0); } 94% { transform:translateY(-4px); } 97% { transform:translateY(0); } }
.visually-hidden { clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
@media (max-width:600px) { .journal-heading { align-items:flex-start; flex-direction:column; gap:16px; } .research-layout { grid-template-columns:1fr; } .research-actions { align-items:flex-start; } .tag-panel { left:0; right:auto; } .journal-wrap { padding:0 16px; } .search-label input { display:block; margin:7px 0 0; width:100%; } .date-filter { gap:8px; } .go-to-top { bottom:16px; right:16px; } }