/* ============================================================ The Lane Fam — interactive explorer Dark, warm, gold-on-near-black. Cormorant for names, Inter for UI. ============================================================ */ :root{ --bg:#07070a; --bg-soft:#0d0d13; --panel:rgba(19,17,24,.74); --panel-solid:#12101a; --ink:#ece4d2; --ink-soft:rgba(236,228,210,.64); --ink-faint:rgba(236,228,210,.4); --gold:#c9a86a; --gold-bright:#f4dba3; --gold-dim:rgba(201,168,106,.38); --line:rgba(201,168,106,.22); --line-soft:rgba(201,168,106,.12); --paternal:#cbb98a; --maternal:#c69ba8; /* two lineage hues, both warm */ --serif:"Cormorant Garamond","Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --shadow:0 24px 60px -20px rgba(0,0,0,.7); --radius:14px; } *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} /* beat class-level display rules on .modal/.chat */ /* The canonical iOS-PWA WebKit nudge: making a hair taller than the layout viewport (by the top safe-area inset) forces WebKit to re-anchor position:fixed elements to the REAL screen bottom instead of a stale cached viewport. Without it the fixed shell drifts and leaves a black "chin" under the bottom nav. */ html{height:100%;min-height:calc(100% + env(safe-area-inset-top))} /* Body stays a normal, non-scrolling block. The FIXED shell is .app (a div), NOT : body's special viewport-propagation makes position:fixed on it flaky on iOS, which is exactly why StemKit wraps the shell in a div. */ body{margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased; overscroll-behavior:none;overflow:hidden;height:100%} /* The app shell (StemKit iOS-PWA pattern): a flex column pinned to all four screen edges. With the min-height nudge above, this is the community-proven layout — no JS height measurement, no 100vh/dvh math, no jitter, no chin. Topbar (fixed) · stage (flex) · bottom nav (fixed) are its flex children, always snug to the real top and bottom. z-index:2 sits above the bg canvases (z0/z1); the drawer/modal/chat overlays (z35+) still float above it. Transparent so the animated tree canvas shows through. */ .app{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column} button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none} input{font-family:inherit} ::selection{background:rgba(244,219,163,.22)} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:9px} ::-webkit-scrollbar-track{background:transparent} /* ---- backgrounds ---- */ #bg-tree{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5;transition:opacity 1.2s ease} body.explorer #bg-tree{opacity:.13} .bg-bloom{position:fixed;inset:-10%;z-index:0;pointer-events:none;background: radial-gradient(ellipse 46% 38% at 50% 46%,rgba(74,52,32,.5),transparent 66%), radial-gradient(ellipse 80% 70% at 50% 55%,rgba(18,16,22,.66),transparent 72%),var(--bg)} .bg-vignette{position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.6) 100%)} /* ---- entry portal ("do you belong?") ---- */ .intro{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.4rem;text-align:center;overflow:hidden; background:radial-gradient(ellipse at center,rgba(7,7,10,.2),rgba(7,7,10,.72)); transition:opacity .9s ease,visibility .9s} .intro.gone{opacity:0;visibility:hidden;pointer-events:none} .wordmark{margin:0;font-family:var(--serif);font-weight:300; font-size:clamp(3rem,13vw,7.5rem);line-height:.95;letter-spacing:.005em;color:#f0e8d6} .word{display:inline-block;opacity:0;transform:translateY(18px);filter:blur(6px); animation:rise 1.5s cubic-bezier(.16,1,.3,1) forwards} .word.the{animation-delay:.3s}.word.lane{animation-delay:.62s}.word.fam{animation-delay:.94s} .word.lane{font-style:italic;font-weight:400;color:transparent;margin:0 .05em; background:linear-gradient(180deg,#f4dba3 10%,#c9a86a 95%);-webkit-background-clip:text;background-clip:text} @keyframes rise{to{opacity:1;transform:none;filter:none}} @keyframes fade{to{opacity:1}} /* The archive field is a lineage constellation: cards sit in measured, collision-free positions while permanent paths explain that every item radiates from the person being searched. */ .portal-field{position:absolute;inset:0;z-index:3;pointer-events:none} .portal-lines{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible} .portal-lines .pf-link{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:0; animation:pfTrace .9s cubic-bezier(.16,1,.3,1) both} .portal-lines .pf-link-family{--link-opacity:.56;stroke:rgba(244,219,163,.56);stroke-width:1.15} .portal-lines .pf-link-kin{--link-opacity:.38;stroke:rgba(201,168,106,.48);stroke-width:.9} .portal-lines .pf-link-doc{--link-opacity:.3;stroke:rgba(201,168,106,.42);stroke-width:.8; stroke-dasharray:.025 .035} .portal-lines .pf-junction{fill:var(--gold-bright);transform-box:fill-box;transform-origin:center; animation:pfJunction .55s ease .38s both} .portal-lines .pf-junction-family{opacity:.72}.portal-lines .pf-junction-kin{opacity:.55} .portal-lines .pf-junction-doc{opacity:.42} @keyframes pfTrace{from{opacity:0;stroke-dashoffset:1}to{opacity:var(--link-opacity);stroke-dashoffset:0}} @keyframes pfJunction{from{opacity:0;transform:scale(0)}to{transform:scale(1)}} .pf-card{position:absolute;z-index:0;pointer-events:none; width:max-content;max-width:min(19rem,27vw);white-space:normal; transform:translate(-50%,-50%) scale(var(--d,1));transform-origin:center; will-change:transform,opacity,filter;padding:.54rem .78rem;border-radius:10px; border:1px solid rgba(201,168,106,.25); background:linear-gradient(160deg,rgba(29,25,31,.88),rgba(10,10,15,.84)); box-shadow:0 18px 42px -22px rgba(0,0,0,.94),inset 0 1px rgba(255,255,255,.025)} .portal-field .pf-card{left:var(--x,50%);top:var(--y,50%)} .pf-card.pf-measuring{visibility:hidden;animation:none!important} .pf-person.settled{animation:pfBreathe 7s ease-in-out infinite alternate} .pf-doc.settled,.pf-deep.settled{animation:pfArchiveBreathe 8.5s ease-in-out infinite alternate} .pf-person .pf-name{display:block;overflow:hidden;text-overflow:ellipsis;font-family:var(--serif); font-size:1.02rem;line-height:1.05;color:var(--ink)} .pf-person .pf-meta{display:block;overflow:hidden;text-overflow:ellipsis;margin-top:.16rem; font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(236,228,210,.52)} .pf-doc{width:min(19rem,27vw);border-color:rgba(201,168,106,.3)} .pf-doc .pf-type{display:block;font-size:.49rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)} .pf-doc .pf-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; margin-top:.14rem;font-size:.78rem;line-height:1.25;color:rgba(236,228,210,.7)} .pf-deep{border-style:dotted;background:linear-gradient(160deg,rgba(22,20,27,.82),rgba(9,9,14,.78))} @keyframes pfBreathe{from{opacity:.52}to{opacity:.62}} @keyframes pfArchiveBreathe{from{opacity:.44}to{opacity:.54}} /* Preserve a calm reading pool for the prompt without erasing the archive. */ .portal-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background: radial-gradient(ellipse 54% 52% at 50% 49%,rgba(7,7,10,.88),rgba(7,7,10,.42) 54%,transparent 82%)} /* Immediate family sits above the veil in a deliberate orbit. The cards use fixed CSS slots so siblings, children, spouses, and parents stay legible and never inherit the random, distant-record treatment behind them. */ .portal-family-field{position:absolute;inset:0;z-index:4;pointer-events:none} .pf-close{position:absolute;width:clamp(11.5rem,15vw,14.5rem);white-space:nowrap; transform:translate(-50%,-50%);padding:.66rem .82rem .62rem;border-radius:12px; border:1px solid rgba(201,168,106,.42);background:linear-gradient(145deg,rgba(35,29,26,.88),rgba(13,12,18,.88)); box-shadow:0 22px 54px -28px rgba(0,0,0,.95),0 0 34px -24px rgba(244,219,163,.42); opacity:0;animation:pfFamilyArrive .85s cubic-bezier(.16,1,.3,1) forwards} .pf-close:nth-child(2){animation-delay:.07s}.pf-close:nth-child(3){animation-delay:.14s} .pf-close:nth-child(4){animation-delay:.21s}.pf-close:nth-child(5){animation-delay:.28s} .pf-close:nth-child(6){animation-delay:.35s}.pf-close:nth-child(7){animation-delay:.42s} .pf-close:nth-child(8){animation-delay:.49s} .pf-close .pf-relation{display:block;margin-bottom:.22rem;font-size:.49rem;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright)} .pf-close .pf-name{display:block;overflow:hidden;text-overflow:ellipsis;font-family:var(--serif); font-size:1.13rem;line-height:1.02;color:var(--ink)} .pf-close .pf-meta{display:block;overflow:hidden;text-overflow:ellipsis;margin-top:.23rem; font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)} .pf-family-slot-1{top:12%;left:18%;--in-x:46px;--in-y:34px;--out-x:-130px;--out-y:-95px} .pf-family-slot-2{top:12%;left:82%;--in-x:-46px;--in-y:34px;--out-x:130px;--out-y:-95px} .pf-family-slot-3{top:42%;left:max(8%,8rem);--in-x:52px;--in-y:0;--out-x:-150px;--out-y:-20px} .pf-family-slot-4{top:42%;right:max(8%,8rem);--in-x:-52px;--in-y:0;--out-x:150px;--out-y:-20px} .pf-family-slot-5{top:74%;left:14%;--in-x:47px;--in-y:-32px;--out-x:-135px;--out-y:90px} .pf-family-slot-6{top:74%;left:86%;--in-x:-47px;--in-y:-32px;--out-x:135px;--out-y:90px} .pf-family-slot-7{top:91%;left:31%;--in-x:24px;--in-y:-42px;--out-x:-70px;--out-y:120px} .pf-family-slot-8{top:91%;left:69%;--in-x:-24px;--in-y:-42px;--out-x:70px;--out-y:120px} @keyframes pfFamilyArrive{ from{opacity:0;filter:blur(10px);scale:.72;translate:var(--in-x) var(--in-y)} to{opacity:.9;filter:none;scale:1;translate:0 0} } .pf-card.departing{animation:pfDepart .58s cubic-bezier(.55,.01,.78,.28) forwards!important;pointer-events:none} .portal-lines .departing{animation:pfLineDepart .46s ease-in forwards!important} @keyframes pfDepart{to{opacity:0;filter:blur(12px);scale:.68;translate:var(--out-x,0) var(--out-y,-80px);rotate:3deg}} @keyframes pfLineDepart{to{opacity:0;filter:blur(3px)}} .portal{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center; text-align:center;max-width:min(93vw,560px);padding:1.4rem} .portal .wordmark{font-size:clamp(2.1rem,7.5vw,3.9rem)} .portal-kicker{margin:.7rem 0 0;font-size:.6rem;letter-spacing:.4em;text-transform:uppercase; color:var(--gold);opacity:0;animation:fade 1s ease 1.15s forwards} .portal-ask{margin:.95rem 0 .25rem;font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.8rem,6vw,2.9rem);line-height:1;color:var(--ink); opacity:0;transform:translateY(16px);filter:blur(5px); animation:rise 1.2s cubic-bezier(.16,1,.3,1) 1.3s forwards} .portal-sub{margin:.15rem 0 1.25rem;max-width:36ch;font-size:.86rem;line-height:1.55; color:var(--ink-soft);opacity:0;animation:fade 1.1s ease 1.65s forwards} .portal-form{position:relative;display:flex;align-items:center;width:min(88vw,430px); opacity:0;transform:translateY(16px);filter:blur(5px); animation:rise 1s cubic-bezier(.16,1,.3,1) 1.9s forwards} .portal-form.portal-shake{animation:portalShake .42s cubic-bezier(.36,.07,.19,.97)} .portal-input{flex:1;padding:.95rem 3.2rem .95rem 1.4rem;border-radius:44px; border:1px solid var(--gold-dim);background:rgba(10,9,15,.74);color:var(--ink); font-family:var(--serif);font-size:1.32rem;text-align:center;outline:none; transition:border-color .3s,box-shadow .3s} .portal-input::placeholder{color:var(--ink-faint);font-style:italic} .portal-input:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(201,168,106,.1),0 0 42px -6px rgba(201,168,106,.28)} .portal-go{position:absolute;right:.42rem;width:2.5rem;height:2.5rem;border-radius:50%; display:grid;place-items:center;color:#1a1207; background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 6px 18px -6px rgba(201,168,106,.6);transition:transform .2s,filter .2s} .portal-go:hover{transform:translateX(2px);filter:brightness(1.07)} .portal-matches{width:min(88vw,430px);margin-top:.75rem;display:flex;flex-direction:column;gap:.15rem; max-height:38vh;overflow-y:auto;text-align:left;animation:fade .4s ease} .pm-h{margin:.35rem 0 .2rem;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint)} .pm-item{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem; padding:.55rem .85rem;border-radius:10px;border:1px solid transparent; transition:background .16s,border-color .16s} .pm-item:hover,.pm-item.sel{background:rgba(201,168,106,.1);border-color:var(--line)} .pm-identity{display:flex;min-width:0;align-items:baseline;gap:.45rem} .pm-name{font-family:var(--serif);font-size:1.06rem;color:var(--ink)} .pm-maiden{font-family:var(--serif);font-size:.72rem;font-style:italic;color:var(--gold);white-space:nowrap} .pm-meta{flex:none;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)} .portal-guest{margin-top:1.15rem;font-size:.72rem;letter-spacing:.14em;color:var(--ink-faint); opacity:0;animation:fade 1s ease 2.25s forwards;transition:color .25s} .portal-guest:hover{color:var(--gold-bright)} .portal-close{position:fixed;top:calc(.8rem + env(safe-area-inset-top));right:1rem;z-index:4; width:40px;height:40px;border-radius:50%;font-size:1rem;color:var(--ink-soft); border:1px solid var(--line);background:rgba(12,12,19,.6);display:none} body.explorer .portal-close{display:grid;place-items:center} @keyframes portalShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}} /* ---- topbar ---- */ .topbar{flex:none;z-index:30;display:flex;align-items:center;gap:1rem; padding:.7rem 1.1rem;padding-top:calc(.7rem + env(safe-area-inset-top)); background:linear-gradient(180deg,rgba(9,9,13,.96),rgba(9,9,13,.78)); border-bottom:1px solid var(--line-soft)} .brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.01em;flex:none;padding:.1rem .2rem} .brand-lane{font-style:italic;background:linear-gradient(180deg,#f4dba3,#c9a86a);-webkit-background-clip:text;background-clip:text;color:transparent} .brand-fam{color:var(--ink);opacity:.85;margin-left:.12em} .search-wrap{position:relative;flex:1;max-width:440px;margin:0 auto} #search{width:100%;padding:.62rem 1rem;border-radius:40px;border:1px solid var(--line); background:rgba(12,12,19,.7);color:var(--ink);font-size:.9rem;font-weight:300;outline:none; transition:border-color .25s,box-shadow .25s} #search::placeholder{color:var(--ink-faint)} #search:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(201,168,106,.08)} .search-results{position:absolute;top:calc(100% + .5rem);left:0;right:0;max-height:62vh;overflow-y:auto; background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:.4rem;z-index:31} .sr-group{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint); padding:.6rem .7rem .3rem} .sr-item{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .7rem;border-radius:9px;cursor:pointer;transition:background .15s} .sr-item:hover,.sr-item.active{background:rgba(201,168,106,.1)} .sr-name{font-family:var(--serif);font-size:1.05rem;color:var(--ink)} .sr-meta{font-size:.74rem;color:var(--ink-faint);margin-left:auto;white-space:nowrap} .tabs{display:flex;gap:.2rem;flex:none} /* desktop tabs (in the top bar) */ .tab{display:flex;align-items:center;gap:.35rem;padding:.5rem .8rem;font-size:.8rem; letter-spacing:.02em;color:var(--ink-soft);border-radius:9px;transition:color .2s,background .2s} .tab:hover{color:var(--ink)} .tab.is-active{color:var(--gold-bright);background:rgba(201,168,106,.1)} .tab-ico{display:none;width:22px;height:22px} .bottom-nav{display:none} /* mobile only (see media query) */ /* ---- views ---- */ .stage{position:relative;flex:1;min-height:0;z-index:10} .view{position:absolute;inset:0;display:none} .view.is-active{display:block} .pedigree{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none; background-image: linear-gradient(rgba(201,168,106,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(201,168,106,.035) 1px,transparent 1px); background-size:88px 88px;background-position:center} .pedigree::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at center,transparent 0 48%,rgba(7,7,10,.28) 78%,rgba(7,7,10,.56) 100%); opacity:.9} .pedigree.grabbing{cursor:grabbing} .pz{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform} .edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none} .nodes{position:absolute;top:0;left:0} .tree-hint{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);z-index:11; font-size:.72rem;letter-spacing:.06em;color:var(--ink-faint);pointer-events:none; transition:opacity .6s;text-align:center} .tree-hint.gone{opacity:0} .tree-controls{position:absolute;right:1.1rem;bottom:1.1rem;z-index:11;display:flex;flex-direction:column;gap:.35rem} .tree-controls button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line); background:var(--panel);backdrop-filter:blur(10px);color:var(--gold-bright);font-size:1.05rem; display:grid;place-items:center;transition:background .2s,border-color .2s} .tree-controls button:hover{background:rgba(201,168,106,.14);border-color:var(--gold-dim)} .tool-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line); background:var(--panel);backdrop-filter:blur(10px);color:var(--gold-bright); display:grid;place-items:center;transition:background .2s,border-color .2s} .tool-toggle:hover,.tool-toggle[aria-expanded=true]{background:rgba(201,168,106,.14);border-color:var(--gold-dim)} .tree-settings{position:absolute;left:1.1rem;bottom:1.1rem;z-index:12} .tree-panel,.connections-panel{position:absolute;left:0;bottom:calc(100% + .55rem);width:260px; padding:.85rem;background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line); border-radius:12px;box-shadow:var(--shadow)} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem; font-family:var(--serif);font-size:1.05rem;color:var(--ink)} .panel-head button,.panel-actions button,.conn-tabs button{padding:.35rem .55rem;border-radius:8px;border:1px solid var(--line); color:var(--ink-soft);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase; background:rgba(0,0,0,.16);transition:background .18s,color .18s,border-color .18s} .panel-head button:hover,.panel-actions button:hover,.conn-tabs button:hover{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(201,168,106,.1)} .range-field{display:block;margin:.65rem 0} .range-field span{display:flex;align-items:center;justify-content:space-between;font-size:.62rem; letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.35rem} .range-field b{font-size:.64rem;color:var(--gold);font-weight:400;letter-spacing:.04em} .range-field input[type=range]{width:100%;accent-color:var(--gold)} .toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.65rem 0} .toggle-grid label{display:flex;align-items:center;gap:.35rem;min-width:0;padding:.42rem .5rem;border:1px solid var(--line-soft); border-radius:8px;background:rgba(0,0,0,.14);font-size:.72rem;color:var(--ink-soft)} .toggle-grid input{accent-color:var(--gold)} .panel-actions{display:flex;justify-content:flex-end;gap:.45rem;margin-top:.8rem} /* ---- pedigree node + branch visuals live in tree.css (v21 engine) ---- */ /* ---- connections graph (the Constellation) ---- */ #view-connections{background: radial-gradient(ellipse at 50% 50%,rgba(46,35,22,.18),transparent 58%)} .connections-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none} .connections-canvas:active{cursor:grabbing} .connections-canvas.has-hover{cursor:pointer} /* the control panel */ .connections-panel{left:1.1rem;top:1.1rem;bottom:auto;width:298px;z-index:14; max-height:calc(100% - 2.2rem);display:flex;flex-direction:column;padding:.8rem .85rem} .connections-panel .panel-head{margin-bottom:.15rem;flex:none} .connections-panel.collapsed .conn-body{display:none} .connections-panel.collapsed{width:auto;min-width:216px} .conn-head-actions{display:flex;gap:.3rem;align-items:center} .conn-head-actions button{display:inline-flex;align-items:center;gap:.3rem} #conn-collapse svg{transition:transform .25s} .connections-panel.collapsed #conn-collapse svg{transform:rotate(180deg)} .conn-body{overflow-y:visible;min-height:0;padding-top:.4rem;scrollbar-width:thin} .conn-find{width:100%;margin:.1rem 0 .5rem;padding:.5rem .75rem;border-radius:9px; border:1px solid var(--line);background:rgba(12,12,19,.62);color:var(--ink); font-family:inherit;font-size:.8rem;font-weight:300;outline:none;transition:border-color .2s,box-shadow .2s} .conn-find::placeholder{color:var(--ink-faint)} .conn-find:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(201,168,106,.08)} .conn-tools{display:flex;gap:.35rem;margin-bottom:.3rem} .conn-tools button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem; padding:.45rem .5rem;border-radius:8px;border:1px solid var(--line);color:var(--ink-soft); font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;background:rgba(0,0,0,.16); transition:background .18s,color .18s,border-color .18s} .conn-tools button:hover{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(201,168,106,.1)} .conn-tools button.on{color:#1a1408;border-color:transparent; background:linear-gradient(160deg,#f4dba3,#c9a86a)} .conn-sect{margin:.7rem 0 .05rem;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-faint);display:flex;align-items:baseline;gap:.4rem} .conn-sect i{font-style:normal;opacity:.55;letter-spacing:.08em} .conn-tabs{display:flex;gap:.3rem;margin:.4rem 0} .conn-tabs button{flex:1;min-width:0;white-space:nowrap} .conn-mini-tabs button{padding:.34rem .3rem;font-size:.6rem;letter-spacing:.04em} .conn-tabs button.on{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(201,168,106,.12)} .conn-two{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;align-items:start} .conn-two .conn-tabs{margin:.4rem 0 0} .range-field.is-disabled{opacity:.38;pointer-events:none} /* legend: what the current color lens means */ .conn-legend{display:flex;flex-wrap:wrap;gap:.28rem .5rem;margin:.35rem 0 .1rem;min-height:14px} .lg-chip{display:inline-flex;align-items:center;gap:.32rem;font-size:.62rem;color:var(--ink-soft);letter-spacing:.02em} .lg-chip i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.5);flex:none} .lg-ramp{display:flex;align-items:center;gap:.45rem;width:100%;font-size:.62rem;color:var(--ink-faint)} .lg-ramp i{flex:1;height:7px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)} /* collapsible physics drawer */ .conn-physics{margin:.75rem 0 .1rem;border-top:1px solid var(--line-soft);padding-top:.55rem} .conn-physics summary{cursor:pointer;list-style:none;font-size:.58rem;letter-spacing:.22em; text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:.45rem; transition:color .2s} .conn-physics summary:hover{color:var(--gold-bright)} .conn-physics summary::-webkit-details-marker{display:none} .conn-physics summary::before{content:"▸";font-size:.7rem;color:var(--gold-dim);transition:transform .2s} .conn-physics[open] summary::before{transform:rotate(90deg)} .conn-unpin{width:100%;margin-top:.35rem;padding:.42rem .5rem;border-radius:8px;border:1px dashed var(--line); color:var(--ink-faint);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase; background:rgba(0,0,0,.12);transition:color .18s,border-color .18s} .conn-unpin:hover{color:var(--gold-bright);border-color:var(--gold-dim)} /* mode chip: trace + isolate state, top center */ .conn-chip{position:absolute;top:1.05rem;left:50%;transform:translateX(-50%);z-index:13; display:flex;align-items:center;gap:.55rem;max-width:min(620px,92%); padding:.5rem .6rem .5rem .95rem;border:1px solid var(--gold-dim);border-radius:30px; background:var(--panel);backdrop-filter:blur(14px);color:var(--ink-soft); font-size:.76rem;letter-spacing:.02em;box-shadow:var(--shadow);white-space:nowrap;overflow:hidden} .conn-chip b{color:var(--gold-bright);font-weight:500} .cc-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-bright);flex:none; box-shadow:0 0 8px rgba(244,219,163,.9);animation:ccpulse 1.4s ease-in-out infinite} @keyframes ccpulse{50%{opacity:.35}} .cc-x{flex:none;width:22px;height:22px;border-radius:50%;color:var(--ink-faint);font-size:.72rem; display:grid;place-items:center;transition:background .18s,color .18s} .cc-x:hover{background:rgba(201,168,106,.16);color:var(--gold-bright)} /* one-time hint */ .conn-hint{position:absolute;bottom:3.5rem;left:50%;transform:translateX(-50%);z-index:12; padding:.45rem 1rem;border:1px solid var(--line-soft);border-radius:30px; background:var(--panel);backdrop-filter:blur(10px);color:var(--ink-faint); font-size:.7rem;letter-spacing:.04em;pointer-events:none;transition:opacity 1.1s;text-align:center;max-width:92%} .conn-hint.gone{opacity:0} /* time travel bar (mirrors the map's timeline) */ .conn-time{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);z-index:13; display:flex;align-items:center;gap:.8rem;padding:.62rem 1rem;border-radius:40px; background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);min-width:min(520px,92vw)} .conn-time label{font-size:.74rem;color:var(--gold-bright);letter-spacing:.05em;min-width:104px;white-space:nowrap} .conn-time input[type=range]{flex:1;accent-color:var(--gold)} #conn-year-play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);color:var(--gold-bright);flex:none;font-size:.72rem} #conn-year-play:hover{background:rgba(201,168,106,.14)} #conn-time-close{width:26px;height:26px;border-radius:50%;color:var(--ink-faint);flex:none;font-size:.72rem} #conn-time-close:hover{color:var(--gold-bright);background:rgba(201,168,106,.12)} /* minimap: appears once you're zoomed in enough to be lost */ .conn-minimap{position:absolute;right:1.1rem;bottom:3.55rem;z-index:12;width:148px;height:104px; border:1px solid var(--line);border-radius:10px;background:rgba(9,9,14,.82); backdrop-filter:blur(8px);box-shadow:var(--shadow);cursor:crosshair} /* hover card */ .conn-tip{position:absolute;top:0;left:0;z-index:15;pointer-events:none;max-width:250px; padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px; background:var(--panel-solid);box-shadow:var(--shadow)} .conn-tip b{display:block;font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:1.12;color:var(--ink)} .conn-tip .ct-kin{display:block;font-size:.7rem;color:var(--gold-bright);margin-top:.18rem} .conn-tip .ct-line{display:block;font-size:.7rem;color:var(--ink-soft);margin-top:.2rem;line-height:1.4;white-space:normal} .conn-tip .ct-meta{display:block;font-size:.64rem;color:var(--ink-faint);margin-top:.22rem;letter-spacing:.04em} /* right-click / long-press menu */ .conn-menu{position:absolute;z-index:16;min-width:200px;padding:.35rem; border:1px solid var(--line);border-radius:11px;background:var(--panel-solid);box-shadow:var(--shadow)} .conn-menu .cm-name{padding:.4rem .6rem .3rem;font-family:var(--serif);font-size:1rem;color:var(--gold-bright); border-bottom:1px solid var(--line-soft);margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .conn-menu button{display:block;width:100%;text-align:left;padding:.44rem .6rem;border-radius:7px; font-size:.78rem;color:var(--ink-soft);transition:background .15s,color .15s} .conn-menu button:hover{background:rgba(201,168,106,.12);color:var(--gold-bright)} .connections-status{position:absolute;right:1.1rem;bottom:1.1rem;z-index:12; padding:.42rem .72rem;border:1px solid var(--line-soft);border-radius:30px; background:var(--panel);backdrop-filter:blur(10px);color:var(--ink-faint); font-size:.7rem;letter-spacing:.06em;pointer-events:none} #view-connections.conn-timeon .connections-status{bottom:4.4rem} #view-connections.conn-timeon .conn-minimap{bottom:6.8rem} #view-connections.conn-timeon .conn-hint{bottom:6.9rem} /* ---- person drawer ---- */ .drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);z-index:35; background:var(--panel);backdrop-filter:blur(22px);border-left:1px solid var(--line); box-shadow:var(--shadow);overflow-y:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);padding:1.3rem 1.4rem 3rem} .drawer.open{transform:none} .drawer-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:8px; color:var(--ink-soft);font-size:1rem;transition:background .2s} .drawer-close:hover{background:rgba(201,168,106,.12)} .drawer-back{position:absolute;top:1rem;left:1rem;height:32px;padding:0 .65rem;border-radius:8px; color:var(--gold-bright);font-size:.74rem;letter-spacing:.04em;border:1px solid var(--line); background:rgba(201,168,106,.06);transition:background .2s,border-color .2s} .drawer-back:hover{background:rgba(201,168,106,.14);border-color:var(--gold-dim)} .drawer-back~.pd-kicker{margin-top:2.1rem} .pd-kicker{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem} .pd-name{font-family:var(--serif);font-size:2rem;line-height:1.05;margin:.1rem 0} .pd-aka{font-size:.78rem;color:var(--ink-faint);font-style:italic;margin-bottom:.5rem} .pd-vitals{font-size:.9rem;color:var(--ink-soft);line-height:1.5;margin:.6rem 0} .pd-vitals b{color:var(--ink);font-weight:400} .pd-rel{display:inline-block;margin:.2rem 0 .8rem;padding:.32rem .7rem;border-radius:30px; border:1px solid var(--line);font-size:.76rem;color:var(--gold-bright);background:rgba(201,168,106,.06)} .pd-reid{margin-left:.5rem;padding:.05rem .35rem;border-radius:20px;font-size:.62rem;letter-spacing:.04em; color:var(--ink-faint);border:1px solid transparent;transition:color .2s,border-color .2s} .pd-reid:hover{color:var(--gold-bright);border-color:var(--line)} .pd-section{margin-top:1.3rem} .pd-h{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint); margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line-soft)} .pd-people{display:flex;flex-direction:column;gap:.15rem} .pd-person{display:flex;align-items:baseline;gap:.5rem;padding:.4rem .5rem;border-radius:8px;cursor:pointer;transition:background .15s} .pd-person:hover{background:rgba(201,168,106,.1)} .pd-person .n{font-family:var(--serif);font-size:1.05rem} .pd-person .d{font-size:.72rem;color:var(--ink-faint);margin-left:auto} .pd-person .role{font-size:.64rem;color:var(--gold);letter-spacing:.08em} .pd-docs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .pd-doc{aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:1px solid var(--line);cursor:pointer;position:relative;background:var(--bg-soft)} .pd-doc img{width:100%;height:100%;object-fit:cover;transition:transform .4s,opacity .3s;opacity:0} .pd-doc img.loaded{opacity:.92} .pd-doc:hover img{transform:scale(1.05);opacity:1} .pd-doc .tag{position:absolute;bottom:0;left:0;right:0;font-size:.58rem;padding:.3rem;background:linear-gradient(transparent,rgba(0,0,0,.8));color:var(--ink-soft);letter-spacing:.04em} .pd-actions{display:flex;gap:.5rem;margin-top:1.3rem} .pd-btn{flex:1;padding:.6rem;border-radius:10px;border:1px solid var(--line);font-size:.78rem; letter-spacing:.04em;color:var(--gold-bright);background:rgba(201,168,106,.06);transition:background .2s,border-color .2s} .pd-btn:hover{background:rgba(201,168,106,.14);border-color:var(--gold-dim)} /* ---- document reader (transcription-first; the scan is opt-in) ---- */ .modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:2vh 2vw} .modal-backdrop{position:absolute;inset:0;background:rgba(4,4,7,.86);backdrop-filter:blur(6px)} .modal-body{position:relative;z-index:1;display:flex;flex-direction:column; width:min(780px,100%);max-height:94vh;background:var(--panel-solid); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .doc-reader{overflow-y:auto;padding:2rem 2.3rem 3.8rem} .doc-kicker{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} .doc-title{font-family:var(--serif);font-size:1.7rem;line-height:1.14;margin:.35rem 0 .55rem} .doc-meta{font-size:.78rem;color:var(--ink-faint);margin-bottom:1rem;line-height:1.6} .doc-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem} .chip{font-size:.72rem;padding:.28rem .6rem;border-radius:20px;border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s} .chip:hover{background:rgba(201,168,106,.12);color:var(--gold-bright)} /* the transcription itself, typeset to match the site */ .doc-md{font-family:var(--sans);font-size:.9rem;line-height:1.72;color:var(--ink-soft); border-top:1px solid var(--line-soft);padding-top:1.2rem} .doc-md .md-h{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:1.7rem 0 .7rem} .doc-md .md-h:first-child{margin-top:0} .doc-md p{margin:0 0 1.05rem} .doc-md p:last-child,.doc-md pre:last-child,.doc-md ul:last-child{margin-bottom:0} .doc-md strong{color:var(--ink);font-weight:500} .doc-md em{color:var(--ink);font-style:italic} .doc-md u{text-decoration-color:var(--gold-dim)} .doc-md ul{margin:.3rem 0 1.1rem;padding-left:1.15rem} .doc-md li{margin:.28rem 0;padding-left:.2rem} .doc-md li::marker{color:var(--gold-dim)} .doc-md hr{border:none;border-top:1px solid var(--line-soft);margin:1.5rem 0} .doc-md .md-div{display:flex;align-items:center;gap:.8rem;margin:1.6rem 0 1.1rem; font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)} .doc-md .md-div::before,.doc-md .md-div::after{content:"";flex:1;height:1px;background:var(--line-soft)} .doc-md pre{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:.76rem;line-height:1.55;color:var(--ink-soft);white-space:pre;overflow-x:auto; background:rgba(0,0,0,.26);border:1px solid var(--line-soft);border-radius:10px;padding:1rem 1.1rem;margin:0 0 1.1rem} /* tucked-away control that reveals the scanned original */ .doc-orig{position:absolute;right:1rem;bottom:1rem;z-index:3;display:inline-flex;align-items:center;gap:.45rem; padding:.5rem .9rem;border-radius:30px;border:1px solid var(--line);background:rgba(10,10,16,.72); backdrop-filter:blur(8px);color:var(--ink-soft);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; opacity:.6;transition:opacity .25s,color .25s,border-color .25s} .doc-orig:hover{opacity:1;color:var(--gold-bright);border-color:var(--gold-dim)} .doc-orig svg{opacity:.85} /* the scan overlay — hidden until asked for, then covers the reader */ .doc-scan{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;background:#050507; opacity:0;transition:opacity .25s} .doc-scan.show{opacity:1} .doc-scan-bar{flex:none;display:flex;align-items:center;gap:.9rem;padding:.7rem 1rem;padding-right:3rem; background:var(--panel-solid);border-bottom:1px solid var(--line-soft)} .doc-scan-back{color:var(--gold-bright);font-size:.78rem;letter-spacing:.03em;padding:.35rem .6rem;border-radius:8px;transition:background .2s} .doc-scan-back:hover{background:rgba(201,168,106,.14)} .doc-scan-title{flex:1;min-width:0;font-family:var(--serif);font-size:1rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .doc-scan-open{font-size:.72rem;color:var(--ink-faint);text-decoration:none;white-space:nowrap;transition:color .2s} .doc-scan-open:hover{color:var(--gold-bright)} .doc-scan-img{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:.6rem} .doc-scan-img img{max-width:100%;max-height:100%;object-fit:contain} .modal-x{position:absolute;top:.7rem;right:.9rem;z-index:5;width:34px;height:34px;border-radius:8px; background:rgba(0,0,0,.4);color:var(--ink);font-size:1rem} .modal-x:hover{background:rgba(201,168,106,.18)} /* ---- archive grid ---- */ #view-docs{overflow-y:auto;padding:1.4rem} .docs-head{max-width:1100px;margin:0 auto 1rem;display:flex;align-items:flex-end; justify-content:space-between;gap:1rem;flex-wrap:wrap} .docs-head h2{font-family:var(--serif);font-weight:400;font-size:2rem;margin:.2rem 0} .docs-head p{color:var(--ink-faint);font-size:.84rem;margin:0} .ghost-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.05rem;border-radius:40px; border:1px solid var(--gold-dim);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-bright);background:rgba(201,168,106,.05);text-decoration:none;white-space:nowrap; transition:background .3s,border-color .3s,transform .3s} .ghost-btn:hover{background:rgba(201,168,106,.14);border-color:var(--gold);transform:translateY(-1px)} .ghost-btn svg{opacity:.85} .docs-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem} .doc-card{border-radius:11px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--bg-soft);transition:transform .3s,border-color .3s} .doc-card:hover{transform:translateY(-3px);border-color:var(--gold-dim)} .doc-card .thumb{aspect-ratio:3/4;overflow:hidden;background:#0a0a10} .doc-card .thumb img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s} .doc-card .thumb img.loaded{opacity:.9} .doc-card .cap{padding:.5rem .6rem} .doc-card .cap .t{font-size:.74rem;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .doc-card .cap .y{font-size:.66rem;color:var(--gold);margin-top:.2rem} /* ---- migration map: all Atlas styles live in map.css (v22 engine) ---- */ /* ---- chat ---- */ .chat{position:fixed;right:1.1rem;bottom:1.1rem;z-index:38;width:min(400px,94vw);height:min(560px,76vh); display:flex;flex-direction:column;background:var(--panel);backdrop-filter:blur(22px); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); transform:translateY(20px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s} .chat.open{transform:none;opacity:1} .chat-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem; border-bottom:1px solid var(--line-soft);font-family:var(--serif);font-size:1.15rem;color:var(--ink)} .chat-head button{color:var(--ink-faint);font-size:.9rem} .chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem} .msg{max-width:88%;font-size:.86rem;line-height:1.5;padding:.65rem .85rem;border-radius:13px} .msg.user{align-self:flex-end;background:rgba(201,168,106,.14);color:var(--ink);border:1px solid var(--line)} .msg.bot{align-self:flex-start;background:rgba(0,0,0,.28);color:var(--ink-soft);border:1px solid var(--line-soft)} .msg.bot b{color:var(--ink);font-weight:500} .msg-cites{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem} .cite{font-size:.7rem;padding:.24rem .55rem;border-radius:16px;border:1px solid var(--gold-dim); color:var(--gold-bright);background:rgba(201,168,106,.07);cursor:pointer;transition:background .15s} .cite:hover{background:rgba(201,168,106,.18)} .cite.doc{border-style:dashed} .chat-thinking{align-self:flex-start;color:var(--ink-faint);font-size:.8rem;font-style:italic} .chat-form{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--line-soft)} .chat-form input{flex:1;padding:.6rem .8rem;border-radius:22px;border:1px solid var(--line); background:rgba(12,12,19,.6);color:var(--ink);font-size:.85rem;outline:none} .chat-form button{width:38px;height:38px;border-radius:50%;background:linear-gradient(160deg,#f4dba3,#c9a86a);color:#1a1408;font-size:1.05rem;font-weight:600;flex:none} .chat-suggest{display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem} .chat-suggest button{text-align:left;font-size:.8rem;color:var(--gold-bright);padding:.5rem .7rem; border:1px solid var(--line);border-radius:10px;background:rgba(201,168,106,.05);transition:background .2s} .chat-suggest button:hover{background:rgba(201,168,106,.13)} /* ---- toast ---- */ .toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(10px);z-index:60; padding:.7rem 1.2rem;border-radius:30px;background:var(--panel-solid);border:1px solid var(--line); font-size:.82rem;color:var(--ink);box-shadow:var(--shadow);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%)} /* ---- caretaker editing: unlock key, in-drawer tools, add/edit form ---- */ .topbtn{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px; border:1px solid var(--line-soft);color:var(--ink-soft);background:transparent; transition:color .2s,background .2s,border-color .2s,box-shadow .3s} .topbtn:hover{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(201,168,106,.08)} .edit-key .ek-on{display:none} body:not(.editing) .add-person{display:none} body.editing .edit-key{color:#1a1408;border-color:transparent; background:linear-gradient(160deg,#f4dba3,#c9a86a);box-shadow:0 0 0 3px rgba(201,168,106,.14)} body.editing .edit-key .ek-idle{display:none} body.editing .edit-key .ek-on{display:block} /* the caretaker block inside the person drawer — dashed to read as scaffolding */ .pd-edit{margin-top:1.1rem;padding:.7rem .75rem;border:1px dashed var(--gold-dim);border-radius:12px; background:rgba(201,168,106,.045)} .pd-edit-lbl{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold); opacity:.8;margin-bottom:.55rem} .pd-edit-row{display:flex;flex-wrap:wrap;gap:.4rem} .add-chip,.pd-edit-btn{display:inline-flex;align-items:center;gap:.34rem;padding:.42rem .7rem; border-radius:20px;border:1px solid var(--line);font-size:.72rem;letter-spacing:.03em; color:var(--ink-soft);background:rgba(0,0,0,.18);transition:background .18s,color .18s,border-color .18s} .add-chip:hover,.pd-edit-btn:hover{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(201,168,106,.12)} .pd-edit-btn{color:var(--gold-bright);border-color:var(--gold-dim);background:rgba(201,168,106,.08)} .add-chip b{font-weight:600;font-size:.9em;opacity:.85} /* the add/edit/unlock panel */ .admin-panel{width:min(468px,100%);max-height:92vh;padding:1.8rem 1.9rem 1.7rem;overflow-y:auto} .ap-kicker{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem} .ap-title{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.1;margin:0 0 .2rem} .ap-sub{font-size:.82rem;color:var(--ink-faint);line-height:1.5;margin:0 0 1.3rem} .ap-sub b{color:var(--ink-soft);font-weight:400} .ef-field{margin-bottom:.95rem} .ef-row{display:flex;gap:.7rem} .ef-row .ef-field{flex:1;min-width:0} .ef-label{display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:.35rem} .ef-input{width:100%;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line); background:rgba(12,12,19,.62);color:var(--ink);font-family:inherit;font-size:.9rem;font-weight:300;outline:none; transition:border-color .2s,box-shadow .2s} .ef-input::placeholder{color:var(--ink-faint)} .ef-input:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(201,168,106,.08)} .seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:fit-content} .seg button{padding:.5rem 1rem;font-size:.8rem;color:var(--ink-soft);background:transparent; transition:background .2s,color .2s} .seg button+button{border-left:1px solid var(--line-soft)} .seg button.on{background:rgba(201,168,106,.16);color:var(--gold-bright)} .ef-toggle{display:flex;gap:1.1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line-soft)} .ef-toggle button{padding:.1rem 0 .55rem;font-size:.78rem;color:var(--ink-faint);border-bottom:2px solid transparent; margin-bottom:-1px;transition:color .2s,border-color .2s} .ef-toggle button.on{color:var(--gold-bright);border-color:var(--gold)} .ef-pick-results{margin-top:.5rem;display:flex;flex-direction:column;gap:.1rem;max-height:230px;overflow-y:auto} .ef-pick{display:flex;align-items:baseline;gap:.5rem;padding:.45rem .55rem;border-radius:8px;cursor:pointer;transition:background .15s} .ef-pick:hover{background:rgba(201,168,106,.1)} .ef-pick .n{font-family:var(--serif);font-size:1.02rem;color:var(--ink)} .ef-pick .d{font-size:.72rem;color:var(--ink-faint);margin-left:auto} .ef-picked{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:10px; border:1px solid var(--gold-dim);background:rgba(201,168,106,.08);font-size:.92rem;color:var(--ink)} .ef-picked .x{margin-left:auto;color:var(--ink-faint);font-size:.9rem} .ef-picked .x:hover{color:var(--gold-bright)} .ef-actions{display:flex;gap:.6rem;margin-top:1.5rem} .ef-save{flex:1;padding:.72rem;border-radius:11px;font-size:.82rem;font-weight:500;letter-spacing:.03em; color:#1a1408;background:linear-gradient(160deg,#f4dba3,#c9a86a);transition:filter .2s,transform .2s} .ef-save:hover{filter:brightness(1.06)} .ef-save:disabled{opacity:.5;filter:grayscale(.3);cursor:default} .ef-cancel{padding:.72rem 1.1rem;border-radius:11px;border:1px solid var(--line);font-size:.82rem; color:var(--ink-soft);background:transparent;transition:background .2s,color .2s} .ef-cancel:hover{background:rgba(201,168,106,.08);color:var(--ink)} .ef-note{font-size:.74rem;color:var(--ink-faint);line-height:1.5;margin:.2rem 0 1.2rem} .ef-err{color:var(--maternal);font-size:.78rem;margin-top:.7rem;min-height:1em} /* ---- responsive: phone layout with a native-style bottom nav ---- */ @media(max-width:720px){ /* top bar: brand + full-width search; the tabs live in the bottom nav */ .topbar{gap:.6rem;padding:.55rem .8rem;padding-top:calc(.55rem + env(safe-area-inset-top))} .brand{font-size:1.15rem} .search-wrap{max-width:none;margin:0} #search{padding:.6rem .9rem;font-size:.9rem} .tabs{display:none} /* hide the desktop top-bar tabs */ /* bottom nav — a FLEX CHILD of the shell, so it sits on the true screen bottom (no iOS fixed-position chin), with home-bar safe-area padding. */ .bottom-nav{display:flex;flex:none;justify-content:space-around;z-index:30; background:linear-gradient(0deg,rgba(7,7,10,.98),rgba(11,10,17,.92)); border-top:1px solid var(--line-soft);padding-bottom:env(safe-area-inset-bottom)} .bottom-nav .tab{flex:1;flex-direction:column;gap:3px;justify-content:center;border-radius:0; min-height:56px;padding:.42rem 0 .32rem;font-size:.54rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft);transition:color .2s} .bottom-nav .tab.is-active{color:var(--gold-bright)} .bottom-nav .tab.is-active .tab-ico{filter:drop-shadow(0 0 5px rgba(244,219,163,.45))} .bottom-nav .tab-ico{display:block} /* the stage now ends right above the nav, so floating controls just use a small bottom offset — no more --botnav math */ #view-docs{padding:1rem .8rem 1.6rem} .docs-head h2{font-size:1.6rem} .docs-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem} .tree-controls{right:.7rem;bottom:.8rem;gap:.45rem} .tree-controls button{width:44px;height:44px;font-size:1.2rem} .tree-settings{left:.7rem;bottom:.8rem} .tool-toggle{width:44px;height:44px} .tree-panel{width:min(276px,calc(100vw - 1.4rem));bottom:calc(100% + .5rem)} .tree-hint{bottom:4rem;font-size:.66rem;padding:0 1.4rem;line-height:1.4} .connections-panel{left:.7rem;right:.7rem;top:auto;bottom:.8rem;width:auto; max-height:52vh;padding:.7rem .75rem} .connections-panel.collapsed{min-width:0} .connections-status{right:.7rem;top:.8rem;bottom:auto;font-size:.64rem} .conn-chip{top:.75rem;left:.7rem;transform:none;max-width:calc(100vw - 9.5rem);font-size:.7rem} .conn-time{top:.75rem;bottom:auto;left:.7rem;right:.7rem;transform:none;min-width:0; padding:.5rem .8rem;gap:.55rem} .conn-time label{min-width:86px;font-size:.68rem} #view-connections.conn-timeon .conn-chip{top:3.9rem} #view-connections.conn-timeon .connections-status{top:3.9rem;bottom:auto} .conn-minimap{display:none} .conn-hint{bottom:auto;top:3.2rem} #view-connections.conn-timeon .conn-hint{top:6.4rem;bottom:auto} /* person drawer: full-screen sheet, sized to the measured height, with top + bottom safe areas (fixes the name hiding under the status bar) */ .drawer{width:100vw;top:0;bottom:0;height:auto; padding:calc(1rem + env(safe-area-inset-top)) 1.1rem calc(env(safe-area-inset-bottom) + 1.5rem)} .drawer-close{width:44px;height:44px;top:calc(.4rem + env(safe-area-inset-top));right:.5rem;font-size:1.1rem} .drawer-back{height:42px;top:calc(.45rem + env(safe-area-inset-top));left:.7rem;padding:0 .8rem} .drawer-back~.pd-kicker{margin-top:2.7rem} .pd-name{font-size:1.7rem} /* document reader: full-screen sheet */ .modal{padding:0} .modal-body{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0} .doc-reader{padding:calc(1.4rem + env(safe-area-inset-top)) 1.2rem calc(env(safe-area-inset-bottom) + 4.6rem)} .doc-title{font-size:1.45rem} .doc-orig{right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom))} .doc-scan-bar{padding-top:calc(.7rem + env(safe-area-inset-top))} .modal-x{width:42px;height:42px;top:calc(.4rem + env(safe-area-inset-top));right:.5rem;font-size:1.05rem} /* chat: full-screen sheet */ .chat{inset:0;width:auto;height:auto;border-radius:0} .chat-head{padding-top:calc(.9rem + env(safe-area-inset-top))} .chat-head button{width:42px;height:42px;font-size:1.1rem} .chat-form{padding-bottom:calc(.8rem + env(safe-area-inset-bottom))} .search-results{max-height:70vh} .portal{padding:1rem} .portal-kicker{letter-spacing:.3em} .portal-input{font-size:1.16rem;padding:.85rem 3rem .85rem 1.1rem} .portal-matches{max-height:22vh} .portal-family-field{inset:auto .55rem calc(.35rem + env(safe-area-inset-bottom));height:5.2rem; display:flex;align-items:flex-end;gap:.38rem;overflow:hidden} .portal-family-field .pf-close{position:relative;inset:auto;flex:1 1 0;width:0;min-width:0; transform:none;padding:.5rem .58rem} .portal-family-field .pf-close:nth-child(n+4){display:none} .portal-field .pf-card{max-width:min(15rem,calc(100vw - 2rem));padding:.46rem .62rem} .portal-field .pf-doc{width:min(15rem,calc(100vw - 2rem))} .portal-field .pf-person .pf-name{font-size:.9rem} .portal-field .pf-person .pf-meta,.portal-field .pf-doc .pf-type{font-size:.45rem} .portal-field .pf-doc .pf-title{font-size:.7rem} .portal-lines{opacity:.68} .pf-close .pf-name{font-size:.92rem} .pf-close .pf-meta{display:none} .pf-close .pf-relation{font-size:.43rem;letter-spacing:.16em} /* caretaker editor: full-screen sheet, matching the drawer/reader */ .admin-panel{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0; padding:calc(1.6rem + env(safe-area-inset-top)) 1.2rem calc(env(safe-area-inset-bottom) + 1.4rem)} .ap-title{font-size:1.5rem} .topbtn{width:38px;height:38px} } /* honor reduced motion + save battery: the ambient tree stops animating */ @media(prefers-reduced-motion:reduce){ .word,.portal-kicker,.portal-ask,.portal-sub,.portal-form,.portal-guest{ animation:none;opacity:1;transform:none;filter:none} .portal-field{animation:none} .pf-close{animation:none;opacity:.9} .pf-card.departing{animation:none!important;opacity:0} *{transition-duration:.01ms!important} }