/* GRAND EXILE desktop — apps added for the data-driven build: journal, privacy, generic
   brand, empty states, markdown prose, founder photo, compose states. */

/* ---------- shared ---------- */
.prose{font:400 16px/1.62 var(--ui);color:var(--ink2);max-width:680px}
.prose>*+*{margin-top:14px}
.prose h1,.prose h2,.prose h3,.prose h4{font:600 21px/1.25 var(--ui);letter-spacing:-.015em;color:var(--ink);margin-top:28px}
.prose h3,.prose h4{font-size:17px}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--ink);border-bottom:1px dotted var(--teal)}.prose a:hover{color:var(--teal)}
.prose ul,.prose ol{padding-left:22px}.prose li+li{margin-top:4px}
.prose code{font:13px var(--mono);background:var(--win3);border-radius:5px;padding:1px 6px;color:var(--ink)}
.prose pre{font:13px/1.6 var(--mono);background:var(--win2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow:auto}
.prose pre code{background:none;padding:0}
.prose blockquote{border-left:2px solid var(--teal);padding-left:14px;color:var(--ink)}
.prose img{max-width:100%;border-radius:10px;border:1px solid var(--line2)}
.prose hr{border:0;border-top:1px dashed var(--line2)}
.empty{display:grid;place-content:center;justify-items:start;gap:10px;height:100%;min-height:260px;padding:32px;font:13px/1.7 var(--mono);color:var(--mute)}
.empty b{font:44px/1 var(--px);color:var(--ink);font-weight:400;margin:6px 0}
.empty .p{color:var(--amber)}
.empty a{color:var(--teal);border-bottom:1px dotted}

/* ---------- founder photo: dithered at rest, resolves on hover ---------- */
.photo{position:relative;overflow:hidden;background:var(--win3)}
.photo img,.photo canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.photo canvas{image-rendering:pixelated}
.photo img{opacity:0;transition:opacity .25s linear}
.photo.live img{opacity:1}

/* ---------- journal (journalctl reader) ---------- */
.jr{display:grid;grid-template-columns:320px 1fr;height:100%}
.jr-side{border-right:1px solid var(--line);background:var(--win2);display:flex;flex-direction:column;min-height:0}
.jr-head{padding:18px 18px 12px;border-bottom:1px solid var(--line)}
.jr-head h3{font:600 21px/1.15 var(--ui);letter-spacing:-.015em;margin-top:8px}
.jr-list{list-style:none;padding:8px;display:grid;gap:2px;align-content:start;min-height:0;flex:1}
.jr-list a{display:grid;gap:3px;padding:10px 12px;border-radius:10px;transition:background .2s}
.jr-list a:hover{background:var(--line)}
.jr-list a.on{background:var(--sel)}
.jr-list time{font:11.5px var(--mono);color:var(--teal)}
.jr-list b{font:600 15px/1.3 var(--ui);color:var(--ink);letter-spacing:-.01em}
.jr-list small{font:13px/1.45 var(--ui);color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jr-main{padding:34px 40px 48px;min-height:0}
.jr-main .h-disp{font-size:44px;line-height:44px;max-width:760px}
.jr-cover{margin-top:24px;aspect-ratio:16/8;border-radius:12px;overflow:hidden;border:1px solid var(--line2);max-width:760px}
.jr-cover img{width:100%;height:100%;object-fit:cover;display:block}
.jr-lede{margin-top:18px;font:400 18px/1.5 var(--ui);color:var(--ink);max-width:680px}
.jr-main .prose{margin-top:24px}
.jr-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:22px;font:12px var(--mono)}

/* ---------- privacy (document viewer) ---------- */
.pvc{display:grid;grid-template-columns:1fr 280px;height:100%}
.pvc-main{padding:34px 40px 48px;min-height:0}
.pvc-main .h-disp{font-size:44px;line-height:44px}
.pvc-main .prose{margin-top:24px}
.pvc-side{border-left:1px solid var(--line);background:var(--win2);padding:22px 18px;display:flex;flex-direction:column;gap:16px}
.pvc-side .spec{grid-template-columns:1fr;font-size:12px}
.pvc-side .spec dt{text-align:left;border-bottom:0;padding-bottom:0;background:none}
.pvc-side .spec dd{padding-top:2px;overflow-wrap:anywhere}

/* ---------- generic brand ---------- */
.gen{display:grid;grid-template-columns:250px 1fr;height:100%}
.gen .ab-side .ic{width:66px;height:66px;border-radius:16px}
.gen .lede{margin-top:22px;max-width:640px}
.gen-proj{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:22px}
.gen-proj .tile{border-color:var(--line)}
.gen-cta{display:inline-flex;margin-top:30px}

/* ---------- gallery: real looks + empty state ---------- */
.look img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.looks.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.looks.n2{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr}
.looks.n3{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr}
.looks.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.looks.n1 .look:first-child,.looks.n2 .look:first-child,.looks.n4 .look:first-child{grid-row:auto}
.looks.many{grid-template-rows:none;grid-auto-rows:220px;overflow:auto}
.looks-empty{flex:1;position:relative;border-radius:20px;overflow:hidden;background:var(--win2);min-height:260px}
.looks-empty canvas{position:absolute;inset:0;width:100%;height:100%}
.looks-empty div{position:absolute;left:24px;bottom:22px;right:24px;display:grid;gap:6px}
.looks-empty b{font:500 26px/1.15 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.looks-empty span{font:13px/1.5 var(--ui);color:var(--ink2);max-width:380px}
.looks-empty em{font-style:normal;justify-self:start;font:11.5px var(--ui);color:var(--mute);background:var(--win);padding:3px 9px;border-radius:99px}
.mm-founder .photo{width:56px;height:56px;border-radius:50%}
.mm-founder b i{font-style:normal;font-weight:400;color:var(--mute)}
.mm-logo{width:100%;max-width:300px;aspect-ratio:1400/278;background:var(--ink);-webkit-mask:var(--logo) left center/contain no-repeat;mask:var(--logo) left center/contain no-repeat}

/* ---------- compose states ---------- */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ml-status.ok{color:var(--teal)}.ml-status.err{color:var(--rose)}
.send[disabled]{opacity:.55;transform:none;pointer-events:none}
.card .pl{display:block;margin-top:10px;font-size:11.5px;color:var(--mute)}

/* ---------- terminal brand fit ---------- */
.wf-head{flex-wrap:wrap;row-gap:8px}.wf-meta{white-space:nowrap}
.wf>.box{display:flex;flex-direction:column}
.wf>.box>.pk,.wf>.box>.term{flex:1;min-height:0}.wf>.box>.pk{overflow:hidden}

/* ---------- desk + files extras ---------- */
.fx-empty{grid-column:1/-1}
.person .pic.photo{width:84px;height:96px}
.avatar.photo{width:96px;height:96px}