@import url('./token-chart.css');

/* A paper record belongs above the scene, with its own readable typography. */
dialog.resident-card{color-scheme:light;width:min(640px,calc(100% - 40px));max-width:640px;max-height:calc(100dvh - 48px);margin:auto 28px auto auto;padding:0 36px 30px;border:1px solid #c9c4b2;border-top:4px solid #737953;border-radius:8px;background:#eee8d8;color:#303b31;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;box-shadow:0 16px 70px #0d171b66;font:16px/1.65 'Segoe UI',Arial,sans-serif;text-shadow:none}
.resident-card::backdrop{background:#17231c94;backdrop-filter:blur(4px)}
.resident-card .resident-card-tools{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#eee8d8;padding:12px 0 10px;border-bottom:1px solid #b8bba555}
.resident-card-tools span{font:11px/1.4 'Segoe UI',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#69715e}
.resident-card .resident-card-tools button{min-height:40px;padding:7px 0 7px 16px;font:13px/1.4 'Segoe UI',Arial,sans-serif;color:#485440}
.resident-card .resident-card-heading{display:flex;align-items:center;gap:26px;margin:28px 0 26px}
.resident-card .resident-card-heading img{width:140px;height:164px;object-fit:cover;flex:none;image-rendering:auto;border:1px solid #b9bda899;padding:5px;background:#dfdfcc}
.resident-card-heading div{min-width:0}
.resident-card h2{clear:none;font:400 42px/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:7px 0 10px;padding:0;overflow-wrap:anywhere;color:#303b31}
.resident-card h3{font:600 11px/1.5 'Segoe UI',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;color:#626e58}
.resident-card h3 span{font-weight:400;letter-spacing:0;text-transform:none;margin-left:10px;color:#727b66}
.resident-card p{font:16px/1.7 'Segoe UI',Arial,sans-serif;margin:0 0 16px;overflow-wrap:anywhere}
.resident-card .resident-card-ticker{font:12px/1.4 'Segoe UI',Arial,sans-serif;letter-spacing:.08em;margin:0;color:#667052}
.resident-card .resident-card-occupation{font:14px/1.5 'Segoe UI',Arial,sans-serif;color:#667052;margin:0}
.resident-card .resident-card-story{border-left:2px solid #929d73;padding:0 0 0 18px}
.resident-card .resident-card-project{border-top:1px solid #a9af9555;padding-top:22px;margin-top:24px}
.resident-card label{display:block;font:11px/1.5 'Segoe UI',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin:24px 0 9px;color:#626e58}
.resident-card .resident-card-contract{position:relative}
.resident-card textarea{display:block;width:100%;resize:none;border:1px solid #b8bda466;border-radius:8px;background:#e7e4d3;color:#384832;padding:11px 12px;font:12px/1.6 Consolas,monospace;overflow-wrap:anywhere}
.resident-card textarea:focus-visible,.resident-card a:focus-visible,.resident-card button:focus-visible{outline:2px solid #687445;outline-offset:4px}
.resident-card .resident-card-copy{display:inline-flex;align-items:center;min-height:40px;margin-top:3px;font:12px/1.4 'Segoe UI',Arial,sans-serif;padding:8px 0;text-decoration:underline;text-underline-offset:4px}
.resident-card .resident-card-small{font:12px/1.55 'Segoe UI',Arial,sans-serif;color:#59694d;margin:4px 0 0}
.resident-card .resident-card-status:empty{display:none}
.resident-card .resident-card-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:-6px}
.resident-card .resident-card-links a{display:inline-flex;align-items:center;min-height:40px;padding:5px 0;font:13px/1.5 'Segoe UI',Arial,sans-serif;text-decoration:underline;text-underline-offset:4px}
.resident-card .resident-card-market-link{margin-top:18px;padding-top:18px;border-top:1px solid #a9af9555}
.resident-card .resident-card-market-link a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid #526343;border-radius:8px;background:#445538;color:#f1eddc;font:14px/1.5 'Segoe UI',Arial,sans-serif;text-decoration:none}
.resident-card button:hover,.resident-card .resident-card-links a:hover{color:#718147}
.resident-card .resident-card-market-link a:hover{background:#36462d}

/* The first meeting is two objects of this world: an archive card for the conversation
   and a ticket stub for the resident's token. Texture sits behind the text, never on it. */
#resident-encounter{--fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .27 0 0 0 0 .17 0 0 0 .3 -.09'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");--ink:#22271e;--ink-soft:#5f573b;--ink-green:#4a3d2c;position:fixed;top:94px;right:24px;z-index:6;width:min(404px,calc(100vw - 48px));max-height:calc(100dvh - 168px);overflow:auto;overscroll-behavior:contain;padding:14px 12px 20px 8px;color:var(--ink);text-shadow:none;animation:encounter-in .22s cubic-bezier(.23,1,.32,1)}
#resident-encounter.on-left{right:auto;left:24px}
@keyframes encounter-in{from{opacity:0;transform:translateY(10px)}}
#resident-encounter .encounter-sheet{position:relative;isolation:isolate;padding:26px 24px 12px 26px;filter:drop-shadow(0 12px 16px #06100a70)}
#resident-encounter .encounter-sheet::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fibre),radial-gradient(90% 55% at 100% 0,#d8c48f55,#0000 70%),radial-gradient(70% 45% at 0 100%,#cbb58244,#0000 70%),linear-gradient(#f2e9d2,#ebe0c3);transform:rotate(-.6deg);clip-path:polygon(0 0,100% 0,100% calc(100% - 2px),96% calc(100% - 3px),92% 100%,88% 100%,85% 100%,80% calc(100% - 1px),78% calc(100% - 3px),75% calc(100% - 1px),72% calc(100% - 3px),70% calc(100% - 1px),67% calc(100% - 1px),64% calc(100% - 1px),59% calc(100% - 1px),56% 100%,51% 100%,48% calc(100% - 1px),45% calc(100% - 1px),41% calc(100% - 1px),38% calc(100% - 4px),34% 100%,31% calc(100% - 2px),28% 100%,25% 100%,21% calc(100% - 1px),18% calc(100% - 2px),15% calc(100% - 4px),12% calc(100% - 1px),7% calc(100% - 2px),5% calc(100% - 4px),2% calc(100% - 4px),0 calc(100% - 2px))}
#resident-encounter .encounter-sheet::after{content:'';position:absolute;z-index:1;top:-9px;left:calc(50% - 46px);width:92px;height:23px;background:linear-gradient(#f0e6c3d9,#e2d4a8d9);transform:rotate(-2.5deg);clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%);pointer-events:none}
#resident-encounter .encounter-heading{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
#resident-encounter .encounter-heading>div{flex:1;min-width:0}
#resident-encounter .encounter-heading :is(h2,.encounter-kicker){padding-right:96px}
#resident-encounter .hidden-name{display:inline-block;filter:blur(7px);user-select:none;animation:secret-breath 5.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#resident-encounter .hidden-name{animation:none}}
#resident-encounter .encounter-occupation{padding-right:128px}
#resident-encounter .encounter-portrait{position:absolute;right:34px;top:-4px;width:74px;padding:4px 4px 12px;background:#fbf7ec;box-shadow:0 2px 6px #2a200e40;transform:rotate(3deg)}
#resident-encounter .encounter-portrait img{display:block;width:66px;height:78px;object-fit:cover;background:#dfdac8}
#resident-encounter .encounter-portrait::after{content:'';position:absolute;top:-9px;left:14px;width:9px;height:26px;border:2px solid #8d8a80;border-radius:6px;transform:rotate(-8deg)}
#resident-encounter .encounter-kicker{display:block;color:var(--ink-soft);font:17px/1.1 Terminal,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
#resident-encounter h2{font:400 34px/1.05 Fell,Georgia,serif;color:var(--ink);margin:6px 0 2px;padding:0;letter-spacing:0;overflow-wrap:normal;white-space:normal}
#resident-encounter .encounter-occupation{margin:0;font:italic 16px/1.4 Fell,Georgia,serif;color:var(--ink-soft)}
#resident-encounter .encounter-occupation:empty{display:none}
#resident-encounter .encounter-stamp{position:absolute;z-index:1;right:16px;top:66px;padding:4px 9px 1px;border:2px solid currentColor;border-radius:3px;box-shadow:inset 0 0 0 2px #efe5cc,inset 0 0 0 3.5px currentColor;color:#8b3527d9;font:23px/1 Terminal,Consolas,monospace;letter-spacing:.04em;white-space:nowrap;transform:rotate(-8deg);mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.35'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23m)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.2 -.35'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23m)'/%3E%3C/svg%3E")}
#resident-encounter .encounter-stamp:empty{display:none}
#resident-encounter .encounter-leave{flex:none;position:relative;z-index:2;margin:-12px -12px 0 0;width:40px;min-height:40px;font:26px/1 Fell,Georgia,serif;padding:0;color:var(--ink-soft);background:none;border:0}
#resident-encounter .encounter-answer{font:18px/1.55 Fell,Georgia,serif;margin:0 0 16px;color:var(--ink)}
#resident-encounter .encounter-question{font:italic 16px/1.5 Fell,Georgia,serif;color:var(--ink-soft);margin:0 0 10px;padding-left:10px;border-left:2px solid #c3b186}
#resident-encounter .encounter-choices{display:grid;margin:0 -6px;border-top:1px solid #b3a17780}
#resident-encounter .encounter-choices:empty{display:none}
#resident-encounter .encounter-choices button{position:relative;display:block;width:100%;text-align:left;min-height:44px;padding:10px 10px 10px 32px;border:0;border-bottom:1px solid #b3a17780;color:#253022;background:none;font:16px/1.45 Fell,Georgia,serif;cursor:pointer}
#resident-encounter .encounter-choices button::before{content:'';position:absolute;left:11px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;border:1.5px solid #7a6a45;background:#f8f1dc;box-shadow:inset 0 1px 2px #00000030}
#resident-encounter .encounter-choices button:hover{background:linear-gradient(#0000 56%,#e7d185a6 56% 88%,#0000 88%)}
#resident-encounter .encounter-actions{display:flex;flex-wrap:wrap;gap:2px 16px;padding-top:8px;border:0}
#resident-encounter .encounter-actions button{display:inline-flex;align-items:center;min-height:40px;padding:4px 0;background:none;border:0;color:var(--ink-soft);font:italic 14px/1.4 Fell,Georgia,serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
#resident-encounter .encounter-actions [data-action=leave]{margin-left:auto}
#resident-encounter .encounter-actions button:hover{color:var(--ink)}
#resident-encounter button:focus-visible,#resident-encounter a:focus-visible{outline:2px solid #56683b;outline-offset:2px}
#resident-encounter .encounter-choices button:focus-visible{outline-offset:-3px}
/* The resident's ticket, stapled to the card: torn from a roll along its perforated left edge. */
#resident-encounter .encounter-token{position:relative;isolation:isolate;margin:0 -8px 16px 0;padding:12px 14px 10px 22px}
#resident-encounter .encounter-token::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fibre),linear-gradient(100deg,#f9f5e8,#f2ecd9);transform:rotate(.8deg);box-shadow:0 2px 5px #3b2f1a33;-webkit-mask:radial-gradient(circle at 0 50%,#0000 4px,#000 4.5px) 0 0/100% 12px repeat-y;mask:radial-gradient(circle at 0 50%,#0000 4px,#000 4.5px) 0 0/100% 12px repeat-y}
#resident-encounter .encounter-token::after{content:'';position:absolute;top:-5px;left:34px;width:22px;height:9px;border:2px solid #8d8a80;border-bottom:0;border-radius:8px 2px 0 0;transform:rotate(-4deg);pointer-events:none}
#resident-encounter .encounter-token h3{margin:0 0 6px;font:21px/1.1 Terminal,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-green)}
#resident-encounter .encounter-contract{display:block;margin:0 0 8px;padding:5px 6px;border:1px dashed #9c8f6c;background:#fbf8ee;color:#1d2219;font:12px/1.45 Consolas,'Courier New',monospace;letter-spacing:0;overflow-wrap:anywhere;user-select:all}
#resident-encounter .encounter-token-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
#resident-encounter .encounter-copy{min-height:40px;padding:6px 14px;border:0;border-radius:9px;background:#e0cfa8;color:var(--ink);font:16px/1 Fell,Georgia,serif;box-shadow:0 2px 0 #3a2408a6;transform:rotate(-.6deg);cursor:pointer}
#resident-encounter .encounter-copy:hover{background:#f0e1bd}
#resident-encounter .encounter-fomo{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 14px;border-radius:40% 44% 42% 46%/60% 52% 58% 50%;background:radial-gradient(circle at 34% 28%,#c8514b,#8e2226 58%,#681519);box-shadow:inset 0 -3px 7px #0000005c,inset 0 2px 3px #ffffff29,0 3px 6px #3a14086b;color:#f7e6c6;font:17px/1.2 Fell,Georgia,serif;text-decoration:none;white-space:nowrap}
#resident-encounter .encounter-fomo:hover{background:radial-gradient(circle at 34% 28%,#d25a53,#9a262a 58%,#6f171b)}
#resident-encounter .encounter-copy-status{margin:6px 0 0;font:13px/1.45 Fell,Georgia,serif;color:var(--ink-green)}
#resident-encounter .encounter-copy-status:empty{display:none}
#resident-encounter .encounter-source{display:inline-flex;align-items:center;min-height:28px;margin-top:2px;color:#44503a;font:italic 13.5px/1.3 Fell,Georgia,serif;text-underline-offset:4px}
/* The market slip printed underneath, with a perforated top edge. */
#resident-encounter .encounter-market{position:relative;isolation:isolate;margin:-2px 10px 0 16px;padding:16px 18px 8px;filter:drop-shadow(0 10px 14px #06100a66)}
#resident-encounter .encounter-market:empty{display:none}
#resident-encounter .encounter-market::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fibre),linear-gradient(#f6f2e4,#efe9d6);transform:rotate(.5deg);-webkit-mask:radial-gradient(circle at 50% 0,#0000 4.5px,#000 5px) 0 0/14px 100% repeat-x;mask:radial-gradient(circle at 50% 0,#0000 4.5px,#000 5px) 0 0/14px 100% repeat-x}
#resident-encounter .encounter-market .token-chart{margin:0;padding:0;border:0}
#resident-encounter .encounter-market .token-chart h3{margin:0;font:17px/1.2 Terminal,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#resident-encounter .encounter-market .token-chart-note{margin:0 0 2px;font:italic 14px/1.4 Fell,Georgia,serif;color:var(--ink-soft)}
#resident-encounter .encounter-market .token-chart-frame svg{min-height:0;margin:2px 0 4px}
#resident-encounter .encounter-market .token-chart-load{min-height:34px;padding:5px 14px;border:0;border-radius:9px;background:#e0cfa8;color:var(--ink);font:15px Fell,Georgia,serif;box-shadow:0 2px 0 #3a2408a6}
#resident-encounter .encounter-market .token-chart-link{min-height:34px;color:var(--ink-soft);font:italic 15px Fell,Georgia,serif}
#resident-encounter .encounter-market .token-chart-reason{margin:0 0 4px;font-size:12.5px}
#resident-encounter .encounter-tabs{display:none}
@media(prefers-reduced-motion:reduce){#resident-encounter{animation:none}}
/* Wide screens: the market slip lies beside the conversation, toward the middle of the screen. */
@media(min-width:980px){#resident-encounter{width:auto;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:14px}#resident-encounter.on-left{flex-direction:row}#resident-encounter .encounter-sheet{width:388px;flex:none}#resident-encounter .encounter-market{width:clamp(280px,26vw,360px);flex:none;margin:30px 0 0}#resident-encounter.split{left:24px;right:24px;justify-content:space-between;pointer-events:none}#resident-encounter.split>*{pointer-events:auto}}
@media(max-width:650px){dialog.resident-card{width:calc(100% - 20px);margin:auto;padding:0 22px 22px;max-height:calc(100dvh - 20px)}.resident-card .resident-card-heading{gap:18px;margin-top:22px}.resident-card .resident-card-heading img{width:105px;height:128px}.resident-card h2{font-size:32px}.resident-card p{font-size:15px}.resident-card .resident-card-occupation{font-size:12px}.resident-card-tools span{font-size:10px;letter-spacing:.07em}
 #resident-encounter,#resident-encounter.on-left{top:auto;bottom:60px;left:6px;right:6px;width:auto;max-height:min(44dvh,560px);padding:12px 8px 12px 4px}
 #resident-encounter.at-top,#resident-encounter.on-left.at-top{top:62px;bottom:auto}
 #resident-encounter .encounter-sheet{padding:22px 18px 10px 20px}
 #resident-encounter .encounter-heading :is(h2,.encounter-kicker){padding-right:84px}
 #resident-encounter .encounter-occupation{padding-right:112px}
 #resident-encounter h2{font-size:28px}
 #resident-encounter .encounter-portrait{right:32px;width:60px;padding:3px 3px 9px}
 #resident-encounter .encounter-portrait img{width:54px;height:62px}
 #resident-encounter .encounter-stamp{top:54px;right:14px;font-size:19px}
 #resident-encounter .encounter-answer{font-size:15.5px;margin-bottom:12px}
 #resident-encounter .encounter-choices button{font-size:15px;min-height:42px;padding:8px 8px 8px 30px}
 #resident-encounter .encounter-token{margin:0 -4px 12px 0;padding:10px 12px 8px 18px}
 #resident-encounter .encounter-contract{font-size:11.5px}
 #resident-encounter .encounter-market{margin:-2px 6px 0 10px;padding:14px 14px 6px}
 #resident-encounter .encounter-tabs:not([hidden]){display:flex;margin:0 0 10px;border-bottom:1px solid #b3a17780}
 #resident-encounter .encounter-tabs button{flex:1;min-height:40px;padding:4px 0 0;background:none;border:0;border-bottom:3px solid #0000;margin-bottom:-1px;color:var(--ink-soft);font:18px/1 Terminal,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
 #resident-encounter .encounter-tabs [aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink-green)}
 #resident-encounter:not(.show-market) .encounter-market,#resident-encounter.show-market .encounter-talk{display:none}}