@font-face {
  font-family: 'Departure Mono';
  src: url('./fonts/DepartureMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Baithout: 8-bit adventure interface.  This file intentionally replaces
   the previous web skin while retaining the existing Django-powered screens. */
:root{
  --delivery-read:#4ade80;--delivery-sent:#facc15;--delivery-sent-border:#854d0e;--delivery-failed:#ff6b6b;
  --night:#110d1c;--ink:#fbf7ff;--muted:#b5a8cc;--line:#32264d;--line-bright:#5e4b85;
  --panel:#191329;--panel-2:#221a36;--panel-3:#2d2247;--purple:#ff8a65;--violet:#ff6b4a;
  --cyan:#70d6ff;--lime:#64e8b9;--gold:#ffd166;--pink:#ff8cc6;--red:#ff9e9e;--shadow:#07040e;
  --pixel:'Departure Mono',ui-monospace,monospace;--copy:var(--pixel);--field: #140f22;--selection: #2d1c2e;--accent-soft: #2e1b24;--primary: #ff8a65;--on-primary: #240b04;--scrim: #07040ecc;--danger-soft: #331820;--media-background: #090610;--on-media: #ffffff;--media-scrim: #07040ee8;color-scheme: dark;--media-accent: #ff8a65;
}
html:not(.dark){--delivery-read:#15803d;--delivery-sent:#facc15;--delivery-sent-border:#854d0e;--delivery-failed:#dc2626;--night:#faf5ea;--ink:#1e162b;--muted:#5a4e6e;--line:#decfc0;--line-bright:#8c7b8e;--panel:#fffdf9;--panel-2:#f4ede0;--panel-3:#ede3d2;--shadow:#d4c3b0;--purple:#b02e1c;--violet:#ff784f;--cyan:#16598a;--lime:#0d6852;--gold:#78520a;--pink:#942663;--red:#a6242f;--field: #f4ede0;--selection: #f7e0d4;--accent-soft: #fce6dc;--primary: #ff784f;--on-primary: #240b04;--scrim: #110d1c73;--danger-soft: #ffe2e5;--media-background: #090610;--on-media: #ffffff;--media-scrim: #07040ee8;color-scheme: light;--media-accent: #ff8a65}
*{box-sizing:border-box}
html{background:var(--night)}
body{font-synthesis:none;background:var(--night);color:var(--ink);font-family:var(--copy);margin:0;min-height:100vh}
body.app-body{background-color:var(--night);background-image:linear-gradient(color-mix(in srgb,var(--panel-2) 1.96%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--panel-2) 1.96%,transparent) 1px,transparent 1px),radial-gradient(circle at 58% -10%,var(--selection) 0,transparent 38%);background-size:5px 5px,5px 5px,auto}
button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
button{color:inherit}button:disabled{cursor:wait;filter:saturate(.3);opacity:.6}img,video{max-width:100%}
.app-shell{display:grid;grid-template-columns:238px minmax(0,760px) 300px;margin:0 auto;max-width:1400px;min-height:100vh}
.left-rail,.right-rail{background:color-mix(in srgb,var(--panel) 90.98%,transparent);border-color:var(--line);border-style:solid;backdrop-filter:blur(12px)}
.left-rail{border-width:0 2px 0 0;display:flex;flex-direction:column;padding:26px 18px 17px}.right-rail{border-width:0 0 0 2px;padding:25px 18px}.main-content{background:color-mix(in srgb,var(--night) 81.18%,transparent);min-width:0}
.brand{align-items:center;color:var(--ink);display:inline-flex;font-family:var(--pixel);font-size:15px;gap:9px;letter-spacing:-1px;text-decoration:none;text-shadow:none}.brand-mark{align-items:center;background:var(--primary);border:2px solid var(--purple);border-radius:0;box-shadow:3px 3px 0 var(--shadow);color:var(--on-primary);display:flex;font-family:var(--pixel);font-size:17px;height:34px;justify-content:center;line-height:1;width:34px}.brand-tagline{color:var(--cyan);font-family:var(--pixel);font-size:11px;letter-spacing:1px;line-height:1.9;margin:15px 0 26px;text-align:center}
.main-nav{display:grid;gap:7px}.nav-link{align-items:center;background:transparent;border:1px solid transparent;color:var(--muted);display:flex;font-family:var(--pixel);font-size:11px;gap:11px;line-height:1.7;padding:13px 11px;text-align:left}.nav-link span{color:var(--gold);font-family:var(--copy);font-size:20px;line-height:0;width:23px}.nav-link:hover,.nav-link.active{background:var(--selection);border-color:var(--purple);color:var(--ink);box-shadow:inset 3px 0 var(--pink)}.nav-link.active span{color:var(--cyan)}.notification-count{align-items:center;background:var(--primary);border-radius:0;color:var(--on-primary);display:inline-flex;font-family:var(--pixel);font-size:11px;height:17px;justify-content:center;margin-left:auto;min-width:17px;padding:2px}.theme-toggle,.logout-button{align-items:center;background:transparent;border:1px solid transparent;color:var(--muted);display:flex;font-size:12px;gap:9px;margin-top:13px;padding:9px 10px;text-align:left;width:100%}.theme-toggle{border-color:var(--line);font-family:var(--pixel);font-size:11px}.theme-toggle span{font-size:17px}.theme-toggle small{color:var(--pink);font-size:15px;margin-left:auto}.logout-button span{color:var(--red);font-size:18px}.theme-toggle:hover,.logout-button:hover{border-color:var(--line-bright);color:var(--ink)}.new-post{background:var(--primary);border:2px solid var(--purple);box-shadow:3px 3px 0 var(--shadow);color:var(--on-primary);font-family:var(--pixel);font-size:11px;line-height:1.7;margin-top:16px;padding:14px 9px;text-shadow:none;width:100%}.new-post:hover{filter:brightness(1.15);transform:translate(-1px,-1px)}.me-mini{align-items:center;background:transparent;border:0;border-top:1px solid var(--line);display:flex;gap:9px;margin-top:auto;padding:18px 5px 1px;text-align:left}.me-mini>span:nth-child(2){display:grid;gap:3px;min-width:0}.me-mini strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me-mini small{color:var(--muted);font-size:11px}.me-mini b{color:var(--muted);margin-left:auto}
.avatar{align-items:center;background:var(--panel-2);border:2px solid var(--line);border-radius:0;box-shadow:2px 2px 0 var(--shadow);color:var(--purple);display:flex;flex:0 0 39px;font-family:var(--pixel);font-size:13px;height:39px;justify-content:center;overflow:hidden;width:39px;background-position:center;background-repeat:no-repeat;background-size:cover}.avatar-me{border-color:var(--line);box-shadow:2px 2px 0 var(--shadow)}.avatar[style*="background-image"]{background-position:center;background-size:cover}
.view-header{align-items:end;border-bottom:2px solid var(--line);display:flex;justify-content:space-between;min-height:124px;padding:29px 28px 22px}.eyebrow{color:var(--cyan);font-family:var(--pixel);font-size:11px;letter-spacing:.4px;line-height:1.7;margin:0 0 13px}.view-header h1{font-family:var(--pixel);font-size:20px;letter-spacing:-1.6px;line-height:1.5;margin:0;text-shadow:2px 2px var(--shadow)}.view-header h1 em{color:var(--gold);font-style:normal}.header-action{background:transparent;border:0;color:var(--gold);font-family:var(--pixel);font-size:11px;line-height:1.8;padding:8px}.header-action:hover{color:var(--cyan)}.header-actions{align-items:center;display:flex;gap:7px}.nearby-status{color:var(--muted);font-size:11px;margin:10px 28px 0}.nearby-status:not(:empty)::before{color:var(--gold);content:'⌖ '}
.quest-filter-row{display:flex;gap:7px;overflow:auto;padding:15px 22px 2px}.quest-filter,.detail-share,.rating-choice{background:var(--panel);border:1px solid var(--line);border-radius:0;color:var(--muted);font-family:var(--pixel);font-size:11px;line-height:1.7;padding:9px 10px;white-space:nowrap}.quest-filter.active,.quest-filter:hover{background:var(--selection);border-color:var(--purple);color:var(--purple)}.home-quest-section{padding:18px 20px 4px}.home-section-heading,.side-heading,.detail-heading{align-items:center;display:flex;justify-content:space-between}.home-section-heading h2,.side-heading h3,.detail-heading h2{font-family:var(--pixel);font-size:11px;line-height:1.7;margin:0}.home-section-heading button,.side-heading button{background:transparent;border:0;color:var(--cyan);font-family:var(--pixel);font-size:11px;padding:6px}.home-quest-list{display:grid;gap:8px;margin-top:10px}.home-quest-loading,.empty{background:var(--panel);border:1px dashed var(--line-bright);color:var(--muted);font-size:13px;line-height:1.45;margin:0;padding:21px;text-align:center}.home-quest-card{align-items:stretch;background:var(--panel);border:1px solid var(--line);box-shadow:3px 3px 0 var(--shadow);color:var(--ink);display:flex;gap:10px;overflow:hidden;padding:0;text-align:left}.home-quest-card:hover{border-color:var(--cyan);transform:translate(-1px,-1px)}.home-quest-art{align-items:center;background:linear-gradient(135deg,var(--panel-2),var(--selection));display:flex;flex:0 0 94px;justify-content:center;min-height:80px;overflow:hidden;position:relative}.home-quest-art img{height:100%;object-fit:cover;width:100%}.home-quest-art>span{color:var(--gold);font-family:var(--pixel);font-size:22px}.home-quest-art small{background:var(--panel);border:1px solid var(--lime);bottom:5px;color:var(--cyan);font-family:var(--pixel);font-size:11px;left:5px;line-height:1.5;padding:4px;position:absolute}.home-quest-copy{display:flex;flex:1;flex-direction:column;justify-content:center;min-width:0}.home-quest-copy strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-quest-copy small{color:var(--muted);font-size:11px;margin-top:4px}.home-quest-copy em{color:var(--lime);font-family:var(--pixel);font-size:11px;font-style:normal;margin-top:6px}.home-quest-arrow{align-self:center;color:var(--gold);font-size:28px;padding:0 10px}
.composer{background:var(--panel);border:1px solid var(--line-bright);box-shadow:4px 4px 0 var(--shadow);margin:20px}.composer-top{display:flex;gap:11px;padding:15px}.composer textarea{background:var(--field);border:1px solid var(--line);color:var(--ink);font-family:var(--copy);font-size:16px;min-height:62px;padding:10px;resize:vertical;width:100%}.composer textarea::placeholder,.comment-form textarea::placeholder,.message-form input::placeholder{color:var(--muted)}.composer-actions{align-items:center;border-top:1px solid var(--line);display:flex;gap:8px;padding:11px}.media-label,.select-kind{background:var(--panel-2);border:1px solid var(--line-bright);color:var(--ink);font-family:var(--pixel);font-size:11px;line-height:1.5;padding:9px}.media-label input{display:none}.post-button,.submit,.request-button,.approve{background:var(--primary);border:1px solid var(--purple);box-shadow:2px 2px var(--shadow);color:var(--on-primary);font-family:var(--pixel);font-size:11px;line-height:1.7;margin-left:auto;padding:10px 12px;text-shadow:none}.post-button:hover,.submit:hover,.request-button:hover,.approve:hover{filter:brightness(1.14)}.media-preview{margin:0 15px}.media-preview-file{background:var(--media-background);border:1px solid var(--line);position:relative}.media-preview-file img,.media-preview-file video{display:block;max-height:360px;object-fit:contain;width:100%}.media-preview-remove{background:var(--red);border:1px solid var(--line-bright);color:var(--night);font-size:22px;position:absolute;right:9px;top:9px}.media-preview-meta{align-items:center;background:var(--media-scrim);bottom:0;color:var(--on-media);display:flex;font-size:11px;gap:8px;justify-content:space-between;left:0;padding:9px;position:absolute;right:0}.media-preview-meta button{background:var(--primary);border:0;color:var(--on-primary);font-family:var(--pixel);font-size:11px;padding:7px}
.feed{padding:0 20px 34px}.post{background:var(--panel);border:1px solid var(--line);box-shadow:3px 3px 0 var(--shadow);margin:13px 0;padding:16px}.post-head,.post-person{align-items:center;display:flex;gap:10px}.post-person{background:transparent;border:0;color:var(--ink);padding:0;text-align:left}.person-line{display:flex;flex-direction:column;gap:2px}.person-line strong{font-size:15px}.person-line>span,.person-line small{color:var(--muted);font-size:11px}.post-person:hover strong,.comment-person:hover{color:var(--cyan)}.recommendation-tag,.quest-post-tag{border:1px solid var(--line);color:var(--cyan);display:inline-block;font-family:var(--pixel);font-size:11px;line-height:1.7;margin:13px 0 -3px;padding:5px}.quest-post-tag{border-color:var(--line-bright);color:var(--purple)}.post-body{font-size:17px;line-height:1.5;margin:15px 0}.post-media{background:var(--media-background);border:1px solid var(--line);display:block;margin-top:12px;max-height:600px;object-fit:contain;width:100%}.post-meta{color:var(--muted);font-family:var(--pixel);font-size:11px;margin:9px 0}.post-actions{align-items:center;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px;margin-top:12px;padding-top:8px}.post-actions button,.comment-controls button{background:transparent;border:0;color:var(--muted);font-size:12px;padding:7px}.post-actions button:hover,.post-actions button.liked{background:var(--selection);color:var(--purple)}.post-manage{border-left:1px solid var(--line);display:flex;margin-left:auto}.post-manage button:last-child{color:var(--red)}.comments{display:grid;gap:6px;margin-top:8px}.comment{background:var(--panel);color:var(--ink);font-size:12px;line-height:1.45;padding:8px}.comment-person{background:transparent;border:0;color:var(--gold);font-size:12px;font-weight:700;padding:0}.comment-controls{display:inline-flex;margin-left:4px}.comment-form{display:flex;gap:7px}.comment-form textarea,.message-form input,.modal-inner input,.modal-inner textarea,.modal-inner select{background:var(--field);border:1px solid var(--line-bright);color:var(--ink);font-family:var(--copy);font-size:13px;min-width:0;padding:9px;width:100%}.comment-form button{background:var(--primary);border:1px solid var(--line-bright);color:var(--on-primary);font-family:var(--pixel);font-size:11px;padding:8px}
.explore-grid{display:grid;gap:12px;padding:20px}.discover-search{display:flex;gap:7px;margin:15px 20px 0}.discover-search input{background:var(--field);border:1px solid var(--line-bright);color:var(--ink);font-size:14px;min-width:0;padding:10px;flex:1}.discover-search button{background:var(--primary);border:1px solid var(--line-bright);color:var(--on-primary);font-family:var(--pixel);font-size:11px;padding:0 13px}.event-card{background:var(--panel);border:1px solid var(--line);box-shadow:3px 3px var(--shadow);padding:16px}.event-card:hover{border-color:var(--cyan);transform:translate(-1px,-1px)}.event-top{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.event-card h2{font-family:var(--pixel);font-size:13px;line-height:1.7;margin:0}.event-card>p{color:var(--muted);font-size:13px;line-height:1.45}.date-chip{background:var(--accent-soft);border:1px solid var(--line);color:var(--purple);font-family:var(--pixel);font-size:11px;line-height:1.5;padding:6px;white-space:nowrap}.event-card footer{align-items:center;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:space-between;margin-top:12px;padding-top:11px}.event-host-link{background:transparent;border:0;color:var(--muted);font-size:11px;line-height:1.4;padding:0;text-align:left}.event-host-link:hover{color:var(--cyan)}.event-card footer>b,.attendance-state,.you-host{background:var(--panel-2);border:1px solid var(--line-bright);color:var(--cyan);font-family:var(--pixel);font-size:11px;line-height:1.6;padding:8px;text-transform:uppercase}.people-results{border-bottom:1px solid var(--line);padding-bottom:12px}.search-person,.event-person,.suggestion-person,.rating-person{align-items:center;background:transparent;border:0;color:var(--ink);display:flex;gap:9px;padding:9px 0;text-align:left;width:100%}.search-person>span:last-child,.event-person>span:last-child,.suggestion-info{display:flex;flex-direction:column;gap:3px}.search-person small,.event-person small,.suggestion-info span{color:var(--muted);font-size:11px}.search-person:hover strong,.event-person:hover strong{color:var(--cyan)}
.event-hero{background:linear-gradient(135deg,var(--panel-2),var(--panel));border-bottom:2px solid var(--line-bright);padding:27px}.back-link{background:transparent;border:0;color:var(--cyan);font-family:var(--pixel);font-size:11px;line-height:1.8;padding:0}.event-hero h1{font-family:var(--pixel);font-size:22px;line-height:1.55;margin:14px 0}.event-hero>p:not(.eyebrow){color:var(--ink);line-height:1.5;margin:0;max-width:620px}.event-hero-footer{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-top:20px}.event-host{align-items:center;background:transparent;border:0;color:var(--ink);display:flex;gap:9px;text-align:left}.event-host span{display:flex;flex-direction:column;font-size:12px;gap:3px}.event-host small{color:var(--ink);font-size:11px}.event-hero-actions{align-items:center;display:flex;gap:7px}.detail-share{color:var(--ink)}.event-detail{padding:20px}.detail-section{margin-bottom:24px}.detail-heading{border-bottom:1px solid var(--line);gap:10px;padding-bottom:9px}.detail-heading h2{font-family:var(--pixel);font-size:11px}.detail-heading h2 span{color:var(--gold)}.detail-heading p,.detail-heading>span{color:var(--muted);font-size:11px;margin:0}.quest-row{border-bottom:1px solid var(--line);display:grid;gap:9px;grid-template-columns:96px 1fr;padding:13px 0}.quest-kind{background:var(--panel-2);color:var(--ink);font-family:var(--pixel);font-size:11px;height:max-content;line-height:1.8;padding:7px}.quest-kind.main{background:var(--selection);color:var(--purple)}.quest-row h3{font-size:15px;margin:0}.quest-row h3 small{color:var(--lime);font-family:var(--pixel);font-size:11px}.quest-row p{color:var(--muted);font-size:12px;line-height:1.5;margin:5px 0}.quest-submit,.quest-submission-state{background:var(--primary);border:1px solid var(--purple);color:var(--on-primary);font-family:var(--pixel);font-size:11px;margin-top:8px;padding:8px}.quest-submission-state{background:var(--panel-2);color:var(--cyan)}.event-moments .post{margin:11px 0}.attendee-list{display:grid;gap:3px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.event-person{background:var(--panel);border:1px solid var(--line);padding:9px}.host-console,.rating-panel{background:var(--panel);border:1px solid var(--line);padding:16px}.host-console-title{align-items:start;display:flex;gap:12px;justify-content:space-between}.host-console-title>p{color:var(--muted);font-size:11px;margin:0;max-width:220px;text-align:right}.request-list{border-top:1px solid var(--line);margin-top:14px}.request{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:8px;justify-content:space-between;padding:10px 0}.request-actions{display:flex;gap:6px}.deny{background:transparent;border:1px solid var(--red);color:var(--red);font-family:var(--pixel);font-size:11px;padding:9px}.rating-list{display:grid;gap:10px}.rating-row{align-items:center;border-top:1px solid var(--line);display:flex;gap:12px;justify-content:space-between;padding-top:10px}.rating-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}.rating-choice.selected,.rating-choice:hover{background:var(--selection);border-color:var(--purple);color:var(--purple)}
.reel-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));padding:20px}.reel{background:var(--media-background);border:1px solid var(--line-bright);display:flex;flex-direction:column;min-height:300px;overflow:hidden;padding:13px;position:relative}.reel-media{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.reel-overlay{background:linear-gradient(transparent,var(--media-scrim) 75%);inset:0;position:absolute;color: var(--on-media)}.reel-content{margin-top:auto;position:relative}.reel-person{background:transparent;border:0;color:var(--on-media);font-size:13px;font-weight:700;padding:0}.reel-body{color:var(--on-media);font-size:14px;line-height:1.4;margin:5px 0}.reel-share{background:var(--primary);border:1px solid var(--line-bright);color:var(--on-primary);font-family:var(--pixel);font-size:11px;padding:8px}
.chats-layout{background:var(--panel);display:grid;grid-template-columns:235px minmax(0,1fr);min-height:650px}.conversation-list{background:var(--panel);border-right:1px solid var(--line);padding:14px 10px}.conversation-list-top{align-items:center;display:flex;justify-content:space-between;padding:4px 6px 13px}.conversation-list-top p,.conversation-count{color:var(--cyan);font-family:var(--pixel);font-size:11px;line-height:1.7;margin:0}.conversation-list-top h2{font-family:var(--pixel);font-size:11px;line-height:1.7;margin:7px 0 0}.new-chat,.new-chat-inline{background:var(--primary);border:1px solid var(--line-bright);color:var(--on-primary);font-family:var(--pixel);font-size:16px;height:34px;width:34px}.conversation{align-items:center;background:transparent;border:1px solid transparent;color:var(--ink);display:flex;gap:9px;margin:4px 0;padding:10px 7px;text-align:left;width:100%}.conversation:hover,.conversation.active{background:var(--selection);border-color:var(--purple)}.conversation-copy{display:block;flex:1;min-width:0}.conversation-top{align-items:center;display:flex;justify-content:space-between}.conversation strong{font-size:13px}.conversation time,.conversation small{color:var(--muted);font-size:11px}.conversation small{display:block;margin-top:4px}.conversation i{background:var(--pink);height:6px;width:6px}.chat-panel{background:var(--night);display:flex;flex-direction:column}.chat-empty{color:var(--muted);margin:auto;padding:30px}.chat-thread-header{align-items:center;background:var(--panel);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:14px}.chat-thread-person{align-items:center;background:transparent;border:0;color:var(--ink);display:flex;gap:9px;text-align:left}.chat-thread-person span{display:flex;flex-direction:column;gap:3px}.chat-thread-person strong{font-size:14px}.chat-thread-person small{color:var(--muted);font-size:11px}.chat-thread-tools{align-items:center;display:flex;gap:9px}.chat-thread-presence{color:var(--lime)}.chat-manage,.message-more{background:transparent;border:0;color:var(--muted)}.messages{display:flex;flex:1;flex-direction:column;gap:9px;max-height:calc(100vh - 290px);min-height:440px;overflow-y:auto;padding:18px}.message{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:0;font-size:14px;line-height:1.45;max-width:78%;padding:10px;position:relative;color: var(--ink)}.message.mine{align-self:flex-end;background:var(--selection);border-color:var(--line-bright);color: var(--ink)}.message p{margin:0}.message small{color:var(--muted);font-family:var(--pixel);font-size:11px}.message-form{align-items:center;background:var(--panel);border-top:1px solid var(--line);display:flex;gap:7px;padding:10px}.message-form input{flex:1}.message-form>button{background:var(--primary);border:1px solid var(--line-bright);color:var(--on-primary);font-family:var(--pixel);font-size:11px;padding:11px}
.profile-hero{background:var(--panel);padding:28px}.profile-top{align-items:flex-start;display:flex;justify-content:space-between}.profile-avatar-button{background:transparent;border:0;cursor:zoom-in;height:116px;padding:0;position:relative;width:116px}.profile-avatar-button .profile-avatar{border:3px solid var(--cyan);box-shadow:4px 4px var(--shadow);font-size:30px;height:112px;width:112px}.profile-avatar-hint{align-items:center;background:var(--primary);border:1px solid var(--line-bright);border-radius:0;color:var(--on-primary);display:flex;font-family:var(--pixel);font-size:11px;height:24px;justify-content:center;position:absolute;right:-2px;bottom:-2px;width:24px}.profile-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.edit-profile{background:var(--panel-2);border:1px solid var(--line-bright);color:var(--ink);font-family:var(--pixel);font-size:11px;line-height:1.8;padding:9px}.edit-profile:hover{background:var(--selection);color: var(--purple)}.profile-hero h1{font-family:var(--pixel);font-size:20px;line-height:1.6;margin:20px 0 4px}.profile-handle,.profile-bio{color:var(--ink);font-size:14px;margin:0}.profile-bio{line-height:1.5;margin-top:16px;max-width:600px}.scores{display:flex;gap:8px;margin-top:18px}.score{background:var(--panel);border:1px solid var(--line-bright);box-shadow:2px 2px var(--shadow);min-width:120px;padding:12px}.score strong{color:var(--gold);font-family:var(--pixel);font-size:14px}.score span{color:var(--muted);display:block;font-family:var(--pixel);font-size:11px;line-height:1.7;margin-top:10px}.profile-tabs{align-items:center;background:var(--panel);border-bottom:1px solid var(--line);display:flex;gap:2px;overflow:auto;padding:11px 20px;white-space:nowrap}.profile-tabs button{background:transparent;border:0;color:var(--muted);font-family:var(--pixel);font-size:11px;padding:9px}.profile-tabs button.active{background:var(--selection);color:var(--purple)}.profile-tabs button small{color:var(--cyan);font-size:11px}.profile-following{color:var(--gold);font-family:var(--pixel);font-size:11px;margin-left:auto}.profile-events{display:grid;gap:9px;padding:19px}.profile-event-card{align-items:center;background:var(--panel);border:1px solid var(--line);color:var(--ink);display:flex;gap:10px;padding:11px;text-align:left}.profile-event-date{background:var(--accent-soft);color:var(--purple);font-family:var(--pixel);font-size:11px;line-height:1.7;padding:7px}.profile-event-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.profile-event-copy strong{font-size:14px}.profile-event-copy small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-event-arrow{color:var(--cyan);font-size:24px}
.quest-card{background:linear-gradient(145deg,var(--selection),var(--panel));border:2px solid var(--line);box-shadow:4px 4px var(--shadow);color:var(--ink);padding:17px}.quest-card p{font-family:var(--pixel);font-size:11px;line-height:1.8;margin:0;color:var(--purple)}.quest-card h3{font-family:var(--pixel);font-size:11px;line-height:1.7;margin:12px 0}.quest-card span{font-family:var(--pixel);font-size:11px;line-height:1.7}.side-section{border-top:1px solid var(--line);margin-top:25px;padding-top:17px}.side-heading{margin-bottom:9px}.suggestion{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:6px;padding:9px 0}.follow-button{background:transparent;border:1px solid var(--line-bright);color:var(--ink);font-family:var(--pixel);font-size:11px;line-height:1.7;padding:7px}.follow-button:hover,.follow-button.following{border-color:var(--lime);color:var(--lime)}.mini-event{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:9px;padding:10px 0}.event-mark{align-items:center;background:var(--selection);color:var(--gold);display:flex;font-size:17px;height:31px;justify-content:center;width:31px}.mini-event>div{display:grid;gap:3px}.mini-event strong{font-size:13px}.mini-event span{color:var(--muted);font-size:11px}.side-section .empty{font-size:11px;padding:18px}
dialog{background:var(--panel);border:2px solid var(--line-bright);box-shadow:7px 7px var(--shadow);color:var(--ink);max-height:calc(100vh - 30px);max-width:680px;padding:0;width:min(680px,calc(100vw - 28px))}dialog::backdrop{background:var(--scrim)}.modal-close{background:var(--panel-2);border:1px solid var(--line-bright);color:var(--ink);font-size:22px;height:30px;position:absolute;right:8px;top:8px;width:30px;z-index:2}.modal-inner,.share-dialog,.profile-photo-modal{padding:28px}.modal-inner h2,.share-dialog h2,.profile-photo-modal h2{font-family:var(--pixel);font-size:15px;line-height:1.7;margin:0}.modal-inner p,.share-dialog>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.5}.modal-inner label{display:block;font-family:var(--pixel);font-size:11px;line-height:1.7;margin-top:14px}.modal-inner textarea{min-height:95px}.modal-inner .submit{margin-top:15px}.modal-actions{display:grid;gap:6px;margin-top:15px}.modal-action{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-size:12px;padding:10px;text-align:left}.modal-action.danger{color:var(--red)}.share-link-field{color:var(--muted);display:block;font-size:11px;margin-top:15px}.share-link-field input{background:var(--field);border:1px solid var(--line-bright);color:var(--ink);display:block;margin-top:5px;padding:10px;width:100%}.share-options{display:flex;gap:7px;margin-top:12px}.share-copy{background:transparent;border:1px solid var(--line-bright);color:var(--ink);font-family:var(--pixel);font-size:11px;padding:10px}.profile-photo-preview,.profile-photo-placeholder{border:2px solid var(--cyan);display:block;margin:18px auto 0;max-height:min(56vh,380px);max-width:100%;object-fit:contain}.profile-photo-placeholder{align-items:center;background:var(--panel-2);color:var(--purple);display:flex;font-family:var(--pixel);font-size:60px;height:260px;justify-content:center;width:260px}.post-modal{max-width:1060px;width:min(1060px,calc(100vw - 28px))}.post-detail-dialog{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);min-height:500px}.post-detail-media{align-items:center;background:var(--media-background);display:flex;justify-content:center}.post-detail-media img,.post-detail-media video{max-height:calc(100vh - 36px);object-fit:contain;width:100%}.post-detail-content{display:flex;flex-direction:column;overflow:auto;padding:24px}.post-detail-body{font-size:16px;line-height:1.5}.post-detail-actions{border-bottom:1px solid var(--line);border-top:1px solid var(--line);display:flex;gap:5px;padding:8px 0}.post-detail-actions button{background:transparent;border:0;color:var(--muted);font-size:12px;padding:8px}.post-detail-replies{flex:1}.post-detail-comment{border-bottom:1px solid var(--line);padding:10px 0}.post-detail-comment p{font-size:13px;line-height:1.5;margin-left:44px}.post-detail-comment-form{display:flex;gap:6px;margin-top:10px}.post-detail-comment-form textarea{background:var(--field);border:1px solid var(--line);color:var(--ink);flex:1;padding:9px}.post-detail-comment-form button{background:var(--primary);border:1px solid var(--line-bright);color:var(--on-primary);font-family:var(--pixel);font-size:11px;padding:9px}
/* Authentication screen uses the same 8-bit art direction. */
.login-body{font-synthesis:none;background:var(--night);min-height:100vh}.login-layout{display:grid;grid-template-columns:minmax(320px,.92fr) minmax(450px,1.08fr);min-height:100vh}.login-art{background-color:var(--night);background-image:linear-gradient(color-mix(in srgb,var(--night) 3.14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--night) 3.14%,transparent) 1px,transparent 1px),radial-gradient(circle at 65% 43%,var(--night) 0,transparent 28%);background-size:6px 6px,6px 6px,auto;overflow:hidden;padding:40px;position:relative}.login-theme{background:var(--panel);border:1px solid var(--line-bright);color:var(--ink);font-family:var(--pixel);font-size:11px;padding:9px;position:absolute;right:25px;top:25px}.login-wordmark{margin-top:120px;position:relative;z-index:1}.login-wordmark p{color:var(--cyan);font-family:var(--pixel);font-size:11px;line-height:1.9;margin:0}.login-wordmark h1{color:var(--ink);font-family:var(--pixel);font-size:38px;letter-spacing:-3px;line-height:1.35;margin:15px 0;text-shadow:4px 4px var(--shadow)}.login-wordmark h1 em{color:var(--gold);font-style:normal}.login-wordmark span{color:var(--pink);font-size:26px}.login-quote{color:var(--ink);font-size:16px;line-height:1.5;max-width:300px;position:relative;z-index:1}.login-orbit{border:2px dashed color-mix(in srgb,var(--line-bright) 37.65%,transparent);border-radius:50%;position:absolute}.orbit-a{height:420px;right:-180px;top:160px;width:420px}.orbit-b{height:260px;right:-55px;top:250px;width:260px}.auth-panel{align-items:center;background:var(--panel);display:flex;justify-content:center;padding:45px}.auth-inner{max-width:510px;width:100%}.auth-inner .eyebrow{color:var(--pink)}.auth-inner h2{font-family:var(--pixel);font-size:24px;line-height:1.6;margin:0}.auth-sub,.auth-note{color:var(--muted);font-size:15px;line-height:1.5}.auth-inner label{display:block;font-family:var(--pixel);font-size:11px;line-height:1.8;margin-top:18px}.auth-inner input{background:var(--field);border:1px solid var(--line-bright);color:var(--ink);font-family:var(--copy);font-size:18px;margin-top:7px;padding:13px;width:100%}.form-error{color:var(--red);font-size:14px;min-height:20px}.auth-submit{background:var(--primary);border:2px solid var(--purple);box-shadow:3px 3px var(--shadow);color:var(--on-primary);font-family:var(--pixel);font-size:11px;line-height:1.8;margin-top:15px;padding:16px;width:100%}.auth-switch{text-align:center}.auth-switch button{background:transparent;border:0;color:var(--cyan);font-family:var(--pixel);font-size:11px;padding:5px}.auth-note{text-align:center}
@media(max-width:1120px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.right-rail{display:none}.view-header{padding-left:23px;padding-right:23px}}
@media(max-width:720px){body.app-body{padding-bottom:66px}.app-shell{display:block}.left-rail,.right-rail{display:none}.main-content{min-height:100vh}.mobile-top{align-items:center;background:var(--night);border-bottom:2px solid var(--line);display:flex;justify-content:space-between;padding:12px 15px}.mobile-top .brand{font-size:11px}.mobile-top>div{display:flex;gap:6px}.mobile-theme,.mobile-logout,.notification-bell,.icon-button{align-items:center;background:var(--panel-2);border:1px solid var(--line-bright);color:var(--ink);display:inline-flex;font-size:16px;height:32px;justify-content:center;width:32px}.notification-bell{position:relative}.notification-bell .notification-count{position:absolute;right:-5px;top:-5px}.view-header{align-items:flex-start;gap:12px;min-height:0;padding:20px 15px}.view-header h1{font-size:15px}.header-action{font-size:11px;padding:5px;text-align:right}.header-actions{align-items:flex-end;flex-direction:column}.quest-filter-row{padding:13px 13px 1px}.home-quest-section{padding:14px 13px 3px}.home-quest-art{flex-basis:81px;min-height:72px;background: linear-gradient(135deg,var(--panel-2),var(--selection))}.composer{margin:14px 13px}.composer-top{padding:11px}.composer .avatar{display:none}.composer-actions{flex-wrap:wrap}.post-button{margin-left:auto}.feed{padding:0 13px 15px}.post{margin:10px 0;padding:13px}.reel-grid{grid-template-columns:1fr;padding:13px}.explore-grid{padding:13px}.discover-search{margin:13px}.event-hero{padding:20px;background: linear-gradient(135deg,var(--panel-2),var(--panel))}.event-hero h1{font-size:15px}.event-hero-footer{align-items:flex-start;flex-direction:column}.event-hero-actions{width:100%}.detail-share,.detail-request{flex:1;text-align:center}.event-detail{padding:14px;padding-bottom:12px}.quest-row{grid-template-columns:1fr}.quest-kind{width:max-content;background: var(--panel-2);color: var(--ink)}.rating-row{align-items:flex-start;flex-direction:column}.rating-actions{justify-content:flex-start}.host-console-title,.request{align-items:flex-start;flex-direction:column}.host-console-title>p{text-align:left}.request-actions{align-self:flex-end}.profile-hero{padding:19px;background: var(--panel)}.profile-avatar-button{height:94px;width:94px}.profile-avatar-button .profile-avatar{height:90px;width:90px}.profile-hero h1{font-size:15px;margin-top:15px}.scores{gap:5px}.score{min-width:0;padding:9px}.score strong{font-size:11px}.score span{font-size:11px}.profile-tabs{padding:9px}.profile-tabs button{font-size:11px;padding:8px 6px}.profile-following{display:none}.profile-events{padding:13px}.chats-layout{display:block;min-height:calc(100vh - 124px)}.conversation-list{border-right:0;padding:12px}.chat-panel{min-height:calc(100vh - 124px)}.messages{max-height:calc(100vh - 270px);min-height:calc(100vh - 340px);padding:13px}.message{max-width:86%;background: var(--panel-2);color: var(--ink)}.mobile-nav{background:var(--night);border-top:2px solid var(--line);bottom:0;display:flex;height:65px;justify-content:space-around;left:0;position:fixed;right:0;z-index:5}.mobile-nav button{align-items:center;background:transparent;border:0;color:var(--muted);display:flex;flex:1;flex-direction:column;font-family:var(--pixel);font-size:15px;justify-content:center;line-height:1.1;padding:4px;position:relative}.mobile-nav .notification-count{position:absolute;top:4px;right:calc(50% - 16px);font-size:11px;height:14px;min-width:14px;padding:1px 2px}.mobile-nav button small{font-family:var(--pixel);font-size:11px;margin-top:5px}.mobile-nav button.active{color:var(--cyan)}.mobile-nav .plus{background:var(--primary);border:2px solid var(--line-bright);color:var(--on-primary);flex:0 0 46px;height:46px;margin-top:-14px;box-shadow:3px 3px var(--shadow)}.mobile-nav button:nth-child(4),.mobile-nav button:nth-child(6){display:none}.post-detail-dialog{display:block;min-height:0}.post-detail-media{max-height:50vh}.post-detail-content{padding:18px}.post-modal{width:calc(100vw - 16px)}.login-layout{display:block}.login-art{min-height:255px;padding:24px}.login-art .brand{font-size:12px}.login-wordmark{margin-top:55px}.login-wordmark h1{font-size:25px}.login-quote{display:none}.auth-panel{padding:28px 20px}.auth-inner h2{font-size:18px}.auth-sub,.auth-note{font-size:14px}.auth-inner input{font-size:17px}.login-theme{right:16px;top:19px}}
@media(min-width:721px){.mobile-top,.mobile-nav{display:none}}

/* Readability pass: retain the pixel scale while making everyday labels easier to read. */
.nav-link{font-size:11px}.brand-tagline{font-size:11px}.eyebrow{font-size:11px}.home-section-heading h2,.side-heading h3,.detail-heading h2{font-size:11px}.home-section-heading button,.side-heading button,.quest-filter,.detail-share,.rating-choice,.media-label,.select-kind{font-size:11px}.home-quest-art small,.home-quest-copy em,.post-button,.submit,.request-button,.approve{font-size:11px}.quest-card p,.quest-card span{font-size:11px}.quest-card h3{font-size:12px}.event-card h2{font-size:15px}.score span{font-size:11px}.quest-kind{font-size:11px;background: var(--panel-2);color: var(--ink)}
@media(max-width:720px){.view-header h1{font-size:17px}.profile-tabs button{font-size:11px}.mobile-nav button small{font-size:11px}.mobile-top .brand{font-size:12px}.home-quest-copy strong{font-size:14px}}

/* Baithout DMs: familiar, Instagram-inspired messaging without changing the rest of the pixel world. */
.chats-layout{background:var(--panel);border:1px solid var(--line);border-radius:18px;grid-template-columns:275px minmax(0,1fr);margin:18px;min-height:650px;overflow:hidden}.conversation-list{background:var(--panel);border-right-color:var(--line);padding:15px 10px}.conversation-list-top{border-bottom:1px solid var(--line);padding:6px 7px 16px}.conversation-list-top p,.conversation-count{color:var(--muted);font-family:var(--copy);font-size:11px;font-weight:700;letter-spacing:.2px}.conversation-list-top h2{font-family:var(--copy);font-size:20px;line-height:1.2;margin:6px 0 0}.new-chat,.new-chat-inline{align-items:center;background:var(--primary);border:0;border-radius:50%;box-shadow:none;display:inline-flex;font-family:var(--copy);font-size:22px;font-weight:600;justify-content:center;color: var(--on-primary)}.conversation{border:0;border-radius:12px;gap:11px;margin:4px 0;padding:10px;text-decoration:none}.conversation:hover,.conversation.active{background:var(--selection);border:0;box-shadow:none;transform:none}.conversation .avatar,.chat-thread-person .avatar{border:2px solid var(--line-bright);border-radius:50%;box-shadow:none}.conversation strong{font-family:var(--copy);font-size:14px;font-weight:700}.conversation time,.conversation small{font-family:var(--copy);font-size:11px}.conversation small{margin-top:3px}.conversation i{background:var(--selection);border-radius:50%;height:7px;width:7px}.chat-panel{background:var(--night)}.chat-empty{align-items:center;display:flex;flex-direction:column;font-family:var(--copy);gap:7px;text-align:center}.chat-empty>span{align-items:center;background:var(--panel-2);border-radius:50%;color:var(--purple);display:flex;font-size:24px;height:50px;justify-content:center;width:50px}.chat-empty strong{color:var(--ink);font-size:16px}.chat-empty p{font-size:13px;margin:0}.chat-thread-header{background:var(--panel);border-bottom-color:var(--line);padding:13px 17px}.chat-thread-person .avatar{height:42px;width:42px}.chat-thread-person strong{font-family:var(--copy);font-size:15px}.chat-thread-person small{font-family:var(--copy);font-size:11px}.chat-thread-presence{font-size:12px}.chat-manage{align-items:center;background:var(--panel-2);border-radius:50%;color:var(--ink);display:flex;font-size:15px;height:32px;justify-content:center;width:32px}.messages{background:radial-gradient(circle at top,var(--night) 0,transparent 42%),var(--night);gap:7px;max-height:calc(100vh - 300px);padding:20px}.message{background:var(--panel-2);border:0;border-radius:18px 18px 18px 5px;box-shadow:none;color:var(--ink);font-family:var(--copy);font-size:14px;max-width:72%;padding:10px 12px}.message.mine{background:var(--selection);border:0;border-radius:18px 18px 5px 18px;color: var(--ink);border-color: var(--line-bright)}.message small{color:var(--ink);font-family:var(--copy);font-size:11px}.message.mine small{color:var(--muted)}.message-more{border-radius:50%;color:var(--ink);padding:3px;position:absolute;right:-29px;top:6px}.message-form{background:var(--panel);border-top-color:var(--line);gap:8px;padding:12px}.message-compose-mark{display:none}.message-form input{background:var(--field);border:1px solid var(--line);border-radius:24px;color:var(--ink);font-family:var(--copy);font-size:14px;padding:11px 15px}.message-form>button{background:var(--primary);border:0;border-radius:22px;box-shadow:none;color:var(--on-primary);font-family:var(--copy);font-size:13px;font-weight:800;padding:10px 15px}
@media(max-width:720px){.chats-layout{border:0;border-radius:0;margin:0;min-height:calc(100vh - 132px)}.conversation-list{padding:14px 12px}.conversation-list-top{padding:4px 3px 14px}.conversation-list-top h2{font-size:19px}.conversation{padding:11px 7px}.conversation .avatar{height:44px;width:44px}.chat-thread-header{padding:12px 14px}.messages{max-height:calc(100vh - 265px);min-height:calc(100vh - 335px);padding:16px}.message{font-size:15px;max-width:82%;background: var(--panel-2);color: var(--ink)}.message-form{padding:10px}.message-form>button{font-size:0;height:40px;padding:0;width:40px;background: var(--primary);color: var(--on-primary)}.message-form>button span{font-size:21px}.chat-empty{padding:28px 20px}}

/* Keep the original pixel-chat art direction; only the mobile navigation between inbox and thread changes. */
.chats-layout{background:var(--panel);border:0;border-radius:0;grid-template-columns:235px minmax(0,1fr);margin:0;min-height:650px;overflow:visible}.conversation-list{background:var(--panel);border-right:1px solid var(--line);padding:14px 10px}.conversation-list-top{border:0;padding:4px 6px 13px}.conversation-list-top p,.conversation-count{color:var(--cyan);font-family:var(--pixel);font-size:11px;font-weight:400;letter-spacing:normal;line-height:1.7;margin:0}.conversation-list-top h2{font-family:var(--pixel);font-size:11px;line-height:1.7;margin:7px 0 0}.new-chat,.new-chat-inline{align-items:normal;background:var(--primary);border:1px solid var(--line-bright);border-radius:0;box-shadow:none;display:block;font-family:var(--pixel);font-size:16px;font-weight:400;height:34px;width:34px;color: var(--on-primary)}.conversation{background:transparent;border:1px solid transparent;border-radius:0;gap:9px;margin:4px 0;padding:10px 7px}.conversation:hover,.conversation.active{background:var(--selection);border-color:var(--purple);box-shadow:none;transform:none}.conversation .avatar,.chat-thread-person .avatar{border:2px solid var(--line-bright);border-radius:0;box-shadow:2px 2px var(--shadow)}.conversation strong{font-family:var(--copy);font-size:13px;font-weight:700}.conversation time,.conversation small{font-family:var(--copy);font-size:11px}.conversation small{margin-top:4px}.conversation i{background:var(--pink);border-radius:0;height:6px;width:6px}.chat-panel{background:var(--night)}.chat-empty{align-items:normal;display:block;font-family:var(--copy);gap:0;text-align:left}.chat-empty>span{align-items:normal;background:transparent;border-radius:0;color:inherit;display:inline;font-size:inherit;height:auto;justify-content:normal;width:auto}.chat-empty strong{color:inherit;font-size:inherit}.chat-empty p{font-size:inherit;margin:1em 0}.chat-thread-header{background:var(--panel);border-bottom:1px solid var(--line);padding:14px}.chat-thread-person .avatar{height:39px;width:39px}.chat-thread-person strong{font-family:var(--copy);font-size:14px}.chat-thread-person small{font-family:var(--copy);font-size:11px}.chat-thread-presence{font-size:inherit}.chat-manage{align-items:normal;background:transparent;border-radius:0;color:var(--muted);display:block;font-size:inherit;height:auto;justify-content:normal;width:auto}.messages{background:var(--night);gap:9px;max-height:calc(100vh - 290px);padding:18px}.message{background:var(--panel-2);border:1px solid var(--line);border-radius:0;box-shadow:none;font-family:var(--copy);font-size:14px;max-width:78%;padding:10px;color: var(--ink)}.message.mine{background:var(--selection);border:1px solid var(--line-bright);border-radius:0;color: var(--ink);border-color: var(--line-bright)}.message small{color:var(--muted);font-family:var(--pixel);font-size:11px}.message.mine small{color:var(--muted)}.message-more{border-radius:0;color:var(--muted);padding:0;position:static}.message-form{background:var(--panel);border-top:1px solid var(--line);gap:7px;padding:10px}.message-compose-mark{display:inline}.message-form input{background:var(--field);border:1px solid var(--line-bright);border-radius:0;color:var(--ink);font-family:var(--copy);font-size:13px;padding:9px}.message-form>button{background:var(--primary);border:1px solid var(--line-bright);border-radius:0;box-shadow:none;color:var(--on-primary);font-family:var(--pixel);font-size:11px;font-weight:400;padding:11px}.chat-list-back{display:none}
@media(max-width:720px){.chats-layout{display:block;min-height:calc(100vh - 124px)}.chats-layout:not(.chat-open) .chat-panel{display:none}.chats-layout.chat-open .conversation-list{display:none}.chats-layout.chat-open .chat-panel{display:flex;min-height:calc(100vh - 124px)}.chat-list-back{align-items:center;background:var(--selection);border:1px solid var(--line-bright);color:var(--cyan);display:flex;font-size:25px;height:34px;justify-content:center;line-height:1;padding:0;width:34px}.chat-thread-header{gap:8px}.messages{max-height:calc(100vh - 270px);min-height:calc(100vh - 340px);padding:13px}.message{font-size:14px;max-width:86%;background: var(--panel-2);color: var(--ink)}.message-form{padding:10px}.message-form>button{font-size:11px;height:auto;padding:11px;width:auto;background: var(--primary);color: var(--on-primary)}.message-form>button span{font-size:inherit}.chat-empty{padding:30px}}

/* Mobile controls stay within reach: navigation never scrolls away, and a chat composer stays above it. */
@media(max-width:720px){html:has(.chats-layout.chat-open),body.app-body:has(.chats-layout.chat-open){height:100%;overflow:hidden}body.app-body:has(.chats-layout.chat-open){padding-bottom:0}.app-shell:has(.chats-layout.chat-open){height:100vh;height:100dvh;min-height:0;overflow:hidden}.mobile-nav{bottom:0!important;height:calc(65px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);position:fixed!important;z-index:50}.main-content:has(.chats-layout.chat-open){display:flex;flex-direction:column;height:calc(100vh - 65px);height:calc(100dvh - 65px - env(safe-area-inset-bottom));min-height:0;overflow:hidden}.main-content:has(.chats-layout.chat-open) .view-header{display:none}.main-content:has(.chats-layout.chat-open) #view{display:flex;flex:1 1 0;min-height:0;overflow:hidden}.chats-layout.chat-open{display:flex;flex:1 1 0;height:auto;min-height:0;overflow:hidden}.chats-layout.chat-open .chat-panel{display:flex;flex:1 1 0;height:auto;min-height:0;overflow:hidden}.chats-layout.chat-open .messages{-webkit-overflow-scrolling:touch;flex:1 1 0;max-height:none!important;min-height:0!important;overflow-y:auto;overscroll-behavior:contain}.chats-layout.chat-open .message-form{flex:0 0 auto;margin-top:auto;position:relative;z-index:2}}

/* Force native mobile buttons to use the app palette instead of a browser's default light control skin. */
@media(max-width:720px){.notification-row{appearance:none!important;-webkit-appearance:none!important;background:var(--panel)!important;color:var(--ink)!important}.notification-row.unread{background:linear-gradient(90deg,var(--selection),var(--selection))!important}.notification-row strong{color:var(--ink)!important}.notification-row small{color:var(--muted)!important}}

/* Notifications were previously supplied by the retired stylesheet. Keep every state on the dark pixel palette. */
.notifications-list{display:grid;gap:9px;padding:18px 20px 30px}.notification-row{align-items:center;background:var(--panel);border:1px solid var(--line);box-shadow:3px 3px 0 var(--shadow);color:var(--ink);display:flex;gap:12px;padding:13px;text-align:left;width:100%}.notification-row.unread{background:linear-gradient(90deg,var(--selection),var(--selection));border-color:var(--purple);box-shadow:inset 3px 0 var(--pink),3px 3px 0 var(--shadow)}.notification-row:hover{background:var(--selection);border-color:var(--cyan);transform:translate(-1px,-1px)}.notification-row>span:last-child{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}.notification-row strong{color:var(--ink);font-family:var(--pixel);font-size:11px;line-height:1.8}.notification-row small{color:var(--muted);font-family:var(--copy);font-size:12px;line-height:1.35}.notification-symbol{align-items:center;background:var(--selection);border:1px solid var(--line);box-shadow:2px 2px var(--shadow);color:var(--purple);display:flex;flex:0 0 36px;font-family:var(--copy);font-size:18px;height:36px;justify-content:center;width:36px}.notification-row.unread .notification-symbol{background:var(--selection);border-color:var(--purple);color:var(--purple);box-shadow:2px 2px var(--shadow)}@media(max-width:720px){.notifications-list{padding:13px 13px 80px}.notification-row{gap:10px;padding:12px}.notification-row strong{font-size:11px}.notification-row small{font-size:11px}}

/* Shared layout rules for narrow screens, long content and native controls. */
.reel-player { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 480px; object-fit: contain; background: var(--media-background); }
.reel-content { padding-top: 12px; min-width: 0; }
.reel-actions { flex-wrap: wrap; gap: 8px; }
.post-actions.reel-actions button { min-height: 44px; min-width: 44px; }
[hidden] { display: none !important; }
body { overflow-wrap: anywhere; }
button, input, textarea, select { min-width: 0; }
button { touch-action: manipulation; }
input, textarea, select { max-width: 100%; }
.avatar, .brand-mark { flex-shrink: 0; }
.view-header > div, .post-person, .person-line, .event-top > div,
.event-host, .event-host > span, .profile-actions, .chat-thread-person,
.chat-thread-person > span, .suggestion-info, .mini-event > div { min-width: 0; }
.view-header > div { flex: 1; }
.view-header h1, .event-card h2, .profile-hero h1 { overflow-wrap: anywhere; }
.header-action { flex-shrink: 0; white-space: normal; line-height: 1.8; }
.header-actions { flex-wrap: wrap; }
.post-person { max-width: 100%; }
.person-line { overflow-wrap: anywhere; }
.post-body, .post-detail-body, .post-detail-comment > p, .message p, .comment > span { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-actions, .post-detail-actions, .post-manage, .event-card footer,
.profile-actions, .profile-tabs, .event-hero-actions, .share-options { flex-wrap: wrap; }
.post-actions button, .post-detail-actions button, .comment-controls button { min-height: 36px; }
.message-form input { min-width: 0; width: 0; }
.message-form .chat-attach { background: transparent; color: var(--cyan); border: 0; font: 26px var(--copy); padding: 4px; min-width: 32px; }
.chat-attachment-draft { padding: 12px; display: grid; gap: 8px; background: var(--panel); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.chat-attachment-draft[hidden] { display: none; }
.chat-attachment-draft small { color: var(--muted); line-height: 1.5; }
.chat-attachment-draft button, .chat-attachment button { background: transparent; color: inherit; border: 1px solid var(--line-bright); padding: 8px; text-align: left; }
.chat-attachment { display: grid; gap: 8px; max-width: min(280px, 60vw); padding-bottom: 8px; overflow-wrap: anywhere; }
.chat-attachment img, .chat-attachment video { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 220px; object-fit: contain; }
.chat-attachment .chat-photo-open { padding: 0; border: 0; }
.chat-attachment a { color: inherit; text-decoration: underline; padding: 5px 0; }
/* Give expanded chat photos their own viewport instead of the generic form dialog. */
dialog.chat-photo-dialog {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(960px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  height: calc(100vh - 24px); height: calc(100dvh - 24px);
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  overflow: hidden; background: var(--media-background); border: 1px solid var(--line); color: var(--ink);
}
dialog.chat-photo-dialog[open] { display: flex; flex-direction: column; }
.chat-photo-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 16px; padding: 8px 12px; background: var(--panel); }
.chat-photo-header h2 { margin: 0; font-size: 16px; line-height: 24px; }
.chat-photo-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; }
.chat-photo-stage { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.chat-photo-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.chat-photo-dialog::backdrop { background: var(--scrim); }
@media (max-width: 720px), (max-height: 520px) {
  dialog.chat-photo-dialog {
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh; margin: 0; border: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}
.comment-form, .post-detail-comment-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.comment-form textarea, .post-detail-comment-form textarea {
  width: 100%; min-height: 96px; max-height: 240px; padding: 12px;
  font-family: var(--copy); font-size: 16px; line-height: 1.5; resize: vertical;
}
.comment-form textarea::placeholder, .post-detail-comment-form textarea::placeholder { color: var(--muted); }
.comment-form button, .post-detail-comment-form button {
  justify-self: end; min-width: 88px; min-height: 44px; padding: 12px 16px; font-size:11px;
}
.event-title-link { background: transparent; border: 0; font: inherit; line-height: inherit; padding: 0; text-align: left; }
.event-title-link:hover { color: var(--cyan); }
.event-card footer { gap: 12px; }
.event-host-link { overflow-wrap: anywhere; }
.event-top { gap: 12px; }
.date-chip { flex-shrink: 0; background: var(--accent-soft); color: var(--purple); border: 1px solid var(--line); }
.home-quest-copy strong { white-space: normal; overflow: visible; line-height: 1.35; }
.home-quest-art small { font-size:11px; line-height: 1.6; background: var(--panel); color: var(--cyan); }
.profile-top { gap: 14px; }
.profile-actions { justify-content: flex-end; }
.profile-event-copy { min-width: 0; }
.post-detail-page .post-detail-dialog { grid-template-columns: minmax(0, 1fr); }
.post-detail-page .post-detail-media { max-height: 420px; overflow: hidden; }
.post-detail-page .post-detail-media img, .post-detail-page .post-detail-media video { max-height: 420px; }
.post-detail-content { min-width: 0; }
.post-detail-replies { min-height: 0; }
.post-detail-comment-form { position: sticky; bottom: 0; background: var(--panel); padding-top: 10px; }
.post-detail-media-fallback { padding: 40px; color: var(--gold); font-size: 48px; }
dialog { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
body:has(dialog[open]) { overflow: hidden; }
.modal-close { height: 36px; width: 36px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-bright); }
.modal-inner h2, .share-dialog h2, .profile-photo-modal h2 { padding-right: 24px; }
.modal-inner label { font-family: var(--copy); font-size: 15px; }
.modal-inner input, .modal-inner textarea, .modal-inner select { font-size: 16px; }
.proof-card { border: 1px solid var(--line); padding: 14px; margin-top: 14px; }
.proof-card img, .proof-card video { display: block; max-height: 300px; width: 100%; object-fit: contain; background: var(--night); }
.proof-card h3 { color: var(--gold); margin-top: 0; }
.proof-card p { line-height: 1.5; }
.chat-thread-person { flex: 1; }
.chat-thread-tools, .chat-list-back { flex-shrink: 0; }
.chat-list-empty { display: grid; gap: 12px; padding: 20px 8px; }
.new-chat-inline { height: auto; width: auto; min-height: 44px; font-size:11px; padding: 12px; }
.auth-inner label { font-family: var(--copy); font-size: 16px; }
.auth-inner input { font-size: 18px; }
.form-error { color: var(--red); line-height: 1.5; }
.auth-submit { min-height: 48px; background: var(--primary); color: var(--on-primary); border: 2px solid var(--purple); }
@media (min-width: 721px) {
  .left-rail { position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; }
  .chats-layout { min-height: 480px; height: calc(100dvh - 155px); overflow: hidden; }
  .conversation-list { min-height: 0; overflow-y: auto; }
  .chat-panel { min-height: 0; overflow: hidden; }
  .messages { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .message-form { flex-shrink: 0; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .app-shell { grid-template-columns: 185px minmax(0, 1fr); }
  .left-rail { padding: 20px 10px; }
  .left-rail .brand { font-size: 11px; }
  .nav-link { padding: 11px 7px; font-size:11px; gap: 5px; }
  .brand-tagline { font-size:11px; }
  .chats-layout { grid-template-columns: 185px minmax(0, 1fr); }
  .view-header { padding: 22px 18px; flex-wrap: wrap; }
  .view-header h1 { font-size: 18px; }
  .post-modal .post-detail-dialog { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body.app-body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .main-content { min-height: calc(100dvh - 76px); }
  .mobile-top { padding: 10px 12px; gap: 8px; flex-shrink: 0; }
  .mobile-top .brand { font-size: 11px; gap: 7px; }
  .mobile-logout { display: none; }
  .notification-bell, .icon-button { width: 40px; height: 40px; }
  .mobile-nav { height: calc(70px + env(safe-area-inset-bottom)); }
  .mobile-nav button { min-width: 0; min-height: 48px; padding: 6px 2px; }
  .mobile-nav button[data-view=reels] { display: flex; }
  .mobile-nav button[data-action=compose] { display: none; }
  .mobile-nav button small { font-family: var(--copy); font-size: 12px; }
  .view-header { flex-wrap: wrap; gap: 10px; }
  .view-header h1 { font-size: 16px; line-height: 1.7; }
  .view-header .header-action { min-height: 36px; font-size:11px; text-align: left; }
  .header-actions { flex-direction: row; align-items: center; }
  .quest-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .quest-filter { flex: 1; min-height: 40px; padding: 8px 5px; }
  .home-section-heading h2 { font-size:11px; }
  .home-quest-art { flex-basis: 75px; background: linear-gradient(135deg,var(--panel-2),var(--selection)); }
  .home-quest-copy { padding: 9px; }
  .home-quest-copy strong { font-size: 15px; }
  .home-quest-copy small { font-size: 12px; line-height: 1.4; }
  .composer-actions { gap: 9px; padding: 10px; }
  .media-label, .select-kind, .post-button { min-height: 38px; }
  .post-actions { gap: 4px; }
  .post-actions button { font-size: 14px; padding: 5px 8px; }
  .post-manage { margin-left: auto; }
  .post-detail-dialog { display: block; }
  .post-detail-content { padding: 18px 14px; }
  .post-detail-media img, .post-detail-media video { max-height: 45dvh; }
  .modal-inner, .share-dialog, .profile-photo-modal { padding: 26px 18px; }
  .share-options > button { flex: 1 1 120px; min-height: 44px; }
  .comment-form textarea, .message-form input, .post-detail-comment-form textarea { font-size: 16px; }
  .notifications-list { padding-bottom: 20px; }
  .notification-row strong { font-family: var(--copy); font-size: 16px; line-height: 1.4; }
  .notification-row small { font-size: 13px; }
  .main-content:has(.chats-layout.chat-open) { height: calc(100dvh - 70px - env(safe-area-inset-bottom)); }.chat-list-back, .chat-manage{ min-width: 40px; min-height: 40px; }
  .message-compose-mark { display: none; }
  .message-form > button { min-height: 44px; }
  .login-art { min-height: 0; padding: 22px; }
  .login-wordmark { margin-top: 28px; }
  .login-wordmark h1 { font-size: 24px; }
  .login-wordmark span { display: none; }
  .auth-panel { padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); }
}
.follow-button, .side-heading > button { flex-shrink: 0; white-space: nowrap; }
.suggestion-person { flex: 1; min-width: 0; }
.suggestion-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-header .people-search-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.view-header:has(.people-search-icon) .header-actions { flex: 0 0 auto; max-width: 100%; }
.scores { flex-wrap: wrap; }
.scores .score { flex: 1 1 110px; min-width: 0; }
.score-link { text-align: left; cursor: pointer; }
.score-link:hover { background: var(--panel-3); border-color: var(--cyan); }
.people-directory .discover-search { margin: 16px 0; padding: 0; display: flex; gap: 8px; }
.people-directory .discover-search input { flex: 1; min-width: 0; font-size: 16px; }
.people-directory .discover-search button { min-width: 44px; min-height: 44px; }
.people-directory .picker-person { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px; text-align: left; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-bright); }
.people-directory .picker-person:hover { background: var(--panel-3); border-color: var(--cyan); }
.directory-person-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.directory-person-copy small { display: block; color: var(--muted); margin-top: 4px; }
.people-directory .avatar { flex-shrink: 0; }
.chat-thread-presence { font-size: 12px; white-space: nowrap; }
.chat-thread-presence[hidden] { display: none; }
.conversation-copy .chat-thread-presence { display: block; margin-top: 4px; }
.conversation-copy .chat-thread-presence[hidden] { display: none; }
@media (max-width: 720px) {
  .profile-top { flex-wrap: wrap; }
  .view-header:has(.people-search-icon) > div:first-child { flex: 1 1 220px; }
}
.notification-permission { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--panel-2); border: 1px solid var(--line-bright); color: var(--muted); margin: 16px; padding: 14px; font-size: 14px; line-height: 1.5; }
.notification-permission:empty { display: none; }
.notification-permission > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.notification-permission button { min-height: 44px; background: var(--primary); border: 1px solid var(--purple); color: var(--on-primary); padding: 10px 12px; font-family: var(--copy); font-size: 14px; }

/* Shared geometry and type hierarchy for the Departure Mono interface. */
:root {
  --page-inset: 24px;
  --card-inset: 16px;
  --control-height: 48px;
  --text-small: 12px;
  --text-body: 16px;
  --text-section: 20px;
  --text-title: 30px;
}
body { font-size: var(--text-body); line-height: 1.5; }
button { font-weight: 400; }
.brand { font-size: 20px; letter-spacing: 0; white-space: nowrap; text-shadow: none; }
.brand-mark, .avatar { flex-shrink: 0; }
.brand-tagline { line-height: 1.6; letter-spacing: 0; }
.nav-link { min-height: 48px; font-size: 13px; gap: 8px; }
.nav-link span { flex: 0 0 20px; text-align: center; }
.left-rail, .right-rail { padding-top: 24px; }
.view-header { padding: 24px var(--page-inset); gap: 16px; }
.view-header h1, .profile-hero h1, .event-hero h1, .auth-inner h2 { font-size: var(--text-title); line-height: 1.3; letter-spacing: 0; }
.eyebrow { font-size: 11px; line-height: 16px; margin-bottom: 8px; }
.home-section-heading, .side-heading, .detail-heading { gap: 12px; }
.home-section-heading h2, .detail-heading h2, .event-card h2 { font-size: var(--text-section); line-height: 1.4; }
.side-heading h3 { font-size: 14px; line-height: 20px; }
.home-section-heading button, .side-heading button, .header-action { min-height: 44px; flex-shrink: 0; font-size: 12px; }
.quest-filter-row { padding: 16px var(--page-inset) 0; gap: 8px; }
.quest-filter { min-height: 44px; padding: 10px 16px; font-size: 12px; line-height: 20px; }
.home-quest-section { padding: 16px var(--page-inset) 0; }
.home-quest-list { gap: 12px; margin-top: 8px; }
.home-quest-card { gap: 0; min-height: 104px; }
.home-quest-art { flex-basis: 104px; background: linear-gradient(135deg,var(--panel-2),var(--selection)); }
.home-quest-copy { padding: 12px 16px; }
.home-quest-copy strong { font-size: 16px; line-height: 24px; white-space: normal; overflow: hidden; display: block; }
.home-quest-copy small { font-size: 12px; line-height: 18px; }
.home-quest-copy em { font-size: 11px; line-height: 16px; }
.home-quest-arrow { padding: 0 12px 0 0; }
.composer, .notification-permission { margin: 20px var(--page-inset); }
.feed { padding: 0 var(--page-inset) 32px; }
.post { padding: var(--card-inset); margin: 16px 0; }
.post-body { font-size: 16px; line-height: 24px; margin: 16px 0; }
.person-line strong { font-size: 15px; line-height: 22px; }
.person-line > span, .person-line small { font-size: 12px; line-height: 18px; }
.post-actions { gap: 8px; }
.post-actions button, .comment-controls button { min-height: 44px; font-size: 13px; }
.comment-form { align-items: flex-end; gap: 8px; }
.comment-form button { min-height: 48px; font-size: 13px; padding: 12px; background: var(--primary); color: var(--on-primary); }
.comment-form textarea { font-size: 16px; line-height: 24px; padding: 12px; }
.discover-search { margin: 16px var(--page-inset) 0; gap: 8px; align-items: stretch; }
.discover-search input { min-height: var(--control-height); font-size: 16px; line-height: 24px; padding: 11px 12px; }
.discover-search button { min-height: var(--control-height); font-size: 13px; padding: 12px 16px; background: var(--primary); color: var(--on-primary); }
.search-interface { padding: 0 var(--page-inset); }
.search-interface .discover-search { margin: 20px 0 0; padding: 0; display: flex; gap: 8px; }
.search-input-wrap { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; background: var(--field); border: 1px solid var(--line-bright); }
.search-input-wrap:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.search-interface .search-input-wrap input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; padding: 12px 44px 12px 40px; outline: none; }
.search-input-wrap input::-webkit-search-cancel-button { display: none; }
.search-field-icon { position: absolute; left: 12px; color: var(--cyan); pointer-events: none; display: flex; }
.search-field-icon svg { width: 18px; height: 18px; }
.search-interface .search-clear { position: absolute; right: 0; width: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); box-shadow: none; font-size: 23px; }
.search-interface .search-clear[hidden] { display: none; }
.search-hint { margin: 12px 0 20px; color: var(--muted); font-size: 12px; line-height: 19px; }
.search-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.search-tabs button { min-height: 48px; padding: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 15px; line-height: 22px; }
.search-tabs button[aria-selected="true"] { background: var(--panel-2); border-color: var(--cyan); color: var(--cyan); box-shadow: inset 0 -2px var(--cyan); }
.search-summary { margin: 20px var(--page-inset) 0; font-size: 12px; line-height: 20px; color: var(--muted); }
.search-results { align-items: start; }
.search-results .search-person { margin: 0; padding: 16px; width: 100%; min-width: 0; min-height: 100px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; }
.search-results .search-person > span:not(.avatar):not(.search-person-arrow) { min-width: 0; flex: 1; }
.search-results .search-person strong { display: block; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.search-results .search-person small { display: block; font-size: 12px; line-height: 19px; color: var(--muted); overflow-wrap: anywhere; margin-top: 4px; }
.search-results .search-person-arrow { flex: 0 0 auto; color: var(--cyan); font-size: 22px; }
.search-empty { grid-column: 1 / -1; width: 100%; text-align: center; padding: 40px 16px; color: var(--muted); }
.search-empty > span { font-size: 32px; color: var(--cyan); }
.search-empty h2 { font-size: 19px; line-height: 28px; color: var(--ink); margin: 16px 0 8px; }
.search-empty p { font-size: 13px; line-height: 22px; overflow-wrap: anywhere; }
.search-footer { margin: 0 var(--page-inset) 24px; text-align: center; }
.search-footer:empty, .nearby-status:empty { display: none; }
.search-footer p { font-size: 12px; line-height: 20px; color: var(--muted); }
.search-footer button { min-height: 48px; width: 100%; padding: 12px; background: var(--panel); border: 1px solid var(--line-bright); color: var(--cyan); font-size: 13px; }
.search-spinner { display: inline-block; width: 26px; height: 26px; border: 2px solid var(--line-bright); border-top-color: var(--cyan); border-radius: 50%; animation: search-spin .8s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .search-spinner { animation: none; } }
@media (max-width: 600px) {
  .view-header:has(+ .search-interface) { flex-direction: column; align-items: stretch; gap: 16px; }
  .view-header:has(+ .search-interface) .header-actions { width: 100%; gap: 8px; }
  .view-header:has(+ .search-interface) .header-action { flex: 1; min-height: 44px; border: 1px solid var(--line); background: var(--panel); }
}
@media (max-width: 400px) { .search-interface .discover-search > button { padding: 12px; } .search-interface .search-input-wrap input { padding-left: 12px; } .search-field-icon { display: none; } }
.explore-grid, .profile-events { padding: 20px var(--page-inset); gap: 16px; }
.event-card { padding: var(--card-inset); }
.event-hero, .profile-hero { padding: 24px var(--page-inset); }
.event-hero-actions { gap: 8px; align-items: stretch; }
.event-hero-actions > button { flex: 1 1 120px; margin-left: 0; }
.post-button, .submit, .request-button, .approve, .auth-submit, .new-post { min-height: var(--control-height); font-size: 14px; line-height: 20px; padding: 12px 16px; }
.detail-share, .rating-choice, .follow-button { min-height: 44px; font-size: 12px; line-height: 20px; }

/* Post-adventure recognition: collectible badges rather than vote buttons. */
.badge-giver { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.badge-giver .rating-person { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0; text-align: left; background: transparent; color: var(--ink); border: 0; }
.badge-giver .rating-person > span:not(.avatar) { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.badge-giver .rating-person strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.badge-giver .rating-person small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.adventure-badge-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.adventure-badge { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; min-height: 150px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); color: var(--ink); text-align: center; }
.adventure-badge strong { font-family: var(--pixel); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.adventure-badge small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.adventure-badge.selected, .adventure-badge.earned { background: var(--selection); border-color: var(--purple); }
.adventure-badge:focus-visible, .badge-remove:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.badge-emoji { display: block; font-size: 36px; line-height: 1.2; }
.badge-given { color: var(--purple); font-size: 12px; font-weight: bold; }
.badge-receipt, .adventure-badge-shelf p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.badge-remove { min-height: 44px; padding: 8px; color: var(--muted); background: transparent; border: 0; text-decoration: underline; }
.adventure-badge-shelf { margin: 24px 0; }
.adventure-badge-shelf h3 { font-size: 14px; }
.badge-giver[aria-busy="true"] .adventure-badge { opacity: .65; }
@media (prefers-reduced-motion: no-preference) {
  .adventure-badge.selected .badge-emoji { animation: adventure-badge-pop 320ms ease-out; }
  @keyframes adventure-badge-pop { 0% { transform: scale(.7) rotate(-12deg); } 65% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1); } }
}
@media (max-width: 380px) { .adventure-badge-choices { gap: 6px; } .adventure-badge { padding: 10px 6px; } }
.scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.scores .score { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 16px; min-height: 96px; }
.score strong { display: block; font-size: 28px; line-height: 36px; overflow-wrap: anywhere; }
.score span { font-size: 11px; line-height: 16px; margin-top: 4px; }
.profile-bio { font-size: 16px; line-height: 24px; }
.profile-tabs { padding: 12px var(--page-inset); gap: 8px; }
.profile-tabs button { flex: 1 1 90px; white-space: normal; min-height: 44px; font-size: 13px; line-height: 20px; }
.profile-actions { gap: 8px; }
.notification-permission { padding: 16px; }
.notification-permission button { min-height: 48px; background: var(--primary); color: var(--on-primary); }
.notifications-list { padding: 20px var(--page-inset); }
.notification-row strong { font-size: 15px; line-height: 24px; }
.notification-row small { font-size: 12px; line-height: 18px; }
.conversation-list-top h2 { font-size: 22px; line-height: 30px; }
.chat-thread-person { min-width: 0; gap: 12px; }
.chat-thread-person strong { font-size: 16px; line-height: 22px; }
.message-form { gap: 8px; padding: 12px; }
.message-form input { min-height: 48px; padding: 11px 12px; font-size: 16px; line-height: 24px; }
.message-form > button { min-height: 48px; padding: 12px; }
.message small { font-family: var(--copy); font-size: 11px; line-height: 16px; }
.modal-inner, .share-dialog, .profile-photo-modal { padding: 24px; }
.modal-inner h2, .share-dialog h2, .profile-photo-modal h2 { font-size: 22px; line-height: 30px; }
.modal-inner label, .auth-inner label { font-size: 12px; line-height: 18px; margin-top: 16px; }
.modal-inner input:not([type=file]):not([type=checkbox]), .modal-inner select, .auth-inner input { min-height: 52px; font-size: 16px; line-height: 24px; padding: 13px 12px; margin-top: 8px; }
.modal-inner textarea { min-height: 120px; padding: 12px; font-size: 16px; line-height: 24px; margin-top: 8px; }
.login-wordmark h1 { font-size: 44px; line-height: 1.3; letter-spacing: 0; }
@media (min-width: 721px) and (max-width: 1100px) {
  .scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 721px) and (max-width: 900px) {
  .left-rail .brand { font-size: 17px; }
  .nav-link { font-size: 11px; }
  .chats-layout { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --page-inset: 16px; --text-section: 18px; --text-title: 26px; }
  .mobile-top { padding: 12px var(--page-inset); }
  .mobile-top .brand { font-size: 18px; }
  .notification-bell, .icon-button { width: 44px; height: 44px; }
  .view-header { min-height: 112px; padding: 20px var(--page-inset); align-items: center; }
  .view-header h1 { line-height: 1.3; }
  .view-header .header-action { min-height: 44px; }
  .view-header:has(.people-search-icon) > div:first-child { flex: 1 1 180px; }
  .quest-filter-row { gap: 4px; }
  .quest-filter { flex: 1 1 auto; padding: 10px 8px; font-size: 11px; }
  .home-section-heading h2 { font-size: 18px; }
  .home-quest-art { flex-basis: 84px; background: linear-gradient(135deg,var(--panel-2),var(--selection)); }
  .home-quest-copy { padding: 12px; }
  .home-quest-copy strong { font-size: 14px; line-height: 20px; }
  .home-quest-art small { font-size: 11px; left: 4px; right: 4px; white-space: normal; text-align: center; padding: 4px 2px; background: var(--panel); color: var(--cyan); }
  .home-quest-arrow { display: none; }
  .scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-tabs { gap: 4px; }
  .modal-inner, .share-dialog, .profile-photo-modal { padding: 24px var(--page-inset); }
  .mobile-nav button small { font-size: 11px; line-height: 16px; }.chat-list-back, .chat-manage{ min-width: 44px; min-height: 44px; }
  .chat-thread-header { gap: 8px; padding: 12px; }
  .chat-thread-person { gap: 8px; }
  .message-form > button { flex-shrink: 0; }
  .login-wordmark h1 { font-size: 32px; }
}

/* Keep presence from competing with the contact name on narrow screens. */
.chat-thread-tools { flex-direction: column-reverse; gap: 4px; }
.chat-thread-person strong { overflow-wrap: anywhere; }

.edit-profile { min-height: 44px; font-size: 12px; line-height: 20px; background: var(--panel-2); color: var(--ink); }

/* Match secondary form actions and detail widgets to the shared controls. */
.modal-close { width: 44px; height: 44px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-bright); }
.modal-inner h2, .share-dialog h2, .profile-photo-modal h2 { padding-right: 36px; }
.location-capture { display: block; width: 100%; min-height: 48px; margin-top: 12px; padding: 12px; border: 1px solid var(--line-bright); background: var(--panel-2); color: var(--cyan); font-size: 13px; line-height: 20px; }
.location-capture-status { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
.place-picker { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; width: 100%; min-width: 0; margin-top: 8px; }
.place-picker input { min-width: 0; width: 100%; margin: 0 !important; border-right: 0; }
.place-toggle { min-height: 44px; border: 1px solid var(--line-bright); background: var(--panel-2); color: var(--ink); font-size: 21px; }
.place-options { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 260px; overflow-y: auto; border: 1px solid var(--line-bright); background: var(--panel); box-shadow: 3px 4px 0 var(--line); }
.place-options[hidden] { display: none; }
.place-options.place-options-above { top: auto; bottom: calc(100% + 4px); }
.place-options [role="option"] { display: block; width: 100%; min-height: 44px; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 12px; line-height: 19px; text-align: left; overflow-wrap: anywhere; }
.place-options [role="option"]:hover, .place-options [role="option"][aria-selected="true"] { background: var(--panel-2); color: var(--cyan); }
.place-help, .place-credit { display: block; padding: 8px 12px; color: var(--muted); font-size: 11px; line-height: 17px; }
.place-credit a { color: inherit; text-decoration: underline; }
.place-toggle:focus-visible, .place-options button:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
#event-form > .submit { width: 100%; margin: 20px 0 0; }
.share-link-field { font-size: 12px; line-height: 18px; }
.share-link-field input { min-height: 52px; font-size: 16px; line-height: 24px; padding: 12px; }
.share-copy, .deny { min-height: 44px; font-size: 12px; line-height: 20px; }
.request-actions, .host-console-title { flex-wrap: wrap; gap: 8px; }
.request-actions > button { margin-left: 0; flex: 1 1 auto; }
.quest-row h3 { font-size: 18px; line-height: 26px; }
.quest-row p { font-size: 14px; line-height: 22px; }

/* Unread is a persistent state, distinct from the selected conversation. */
.unread-count, .notification-count {
  align-items: center; background: var(--primary); border: 1px solid var(--purple);
  border-radius: 12px; color: var(--on-primary); display: inline-flex; flex: 0 0 auto;
  font-family: var(--copy); font-size: 12px; font-weight: 700; line-height: 18px;
  justify-content: center; min-width: 24px; height: auto; padding: 2px 6px;
}
.unread-count[hidden], .notification-count[hidden] { display: none !important; }
.chat-nav > .unread-count { margin-left: auto; }
.conversation-list-top h2 { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.conversation-count { align-items: center; display: flex; justify-content: space-between; gap: 8px; }
.conversation.unread { background: var(--selection); border-color: var(--purple); box-shadow: inset 3px 0 var(--shadow); }
.conversation.unread:hover, .conversation.unread.active { background: var(--selection); border-color: var(--purple); }
.conversation.unread strong { color: var(--ink); }
.conversation.unread small { color: var(--muted); }
.conversation > .unread-count { align-self: center; }
.conversation-top { gap: 8px; min-width: 0; }
.conversation-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-top time { flex: 0 0 auto; }
@media (min-width: 721px) { .chats-layout { grid-template-columns: 280px minmax(0, 1fr); } }
.notification-row.unread { border-color: var(--purple); box-shadow: inset 3px 0 var(--shadow), 3px 3px 0 var(--shadow); }
.notification-row .unread-label { color: var(--red) !important; font-size: 11px; }
@media (max-width: 720px) {
  .mobile-nav .unread-count { position: absolute; top: 3px; right: calc(50% - 24px); font-size: 11px; min-width: 20px; padding: 0 4px; }
  .chat-thread-person { flex: 1; min-width: 0; }
  .chat-thread-person > span:last-child { min-width: 0; }
  .chat-thread-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-thread-tools { flex-shrink: 0; gap: 6px; }
}
@media (max-width: 720px) {
  .request-actions { width: 100%; }
}

/* Event discovery scopes and RSVP status, shared by desktop and mobile browsers. */
.event-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.event-filters[hidden] { display: none; }
.event-filters > button { min-height: 44px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; overflow-wrap: anywhere; }
.event-filters > button[aria-selected="true"] { border-color: var(--purple); background: var(--panel-3); color: var(--ink); box-shadow: inset 0 -3px var(--purple); }
.event-card.event-going { border-color: var(--purple); background: var(--panel-2); box-shadow: inset 3px 0 var(--purple), 3px 3px 0 var(--shadow); }
.event-card .event-top > div { min-width: 0; }
.event-card .event-title-link, .event-card .event-host-link { overflow-wrap: anywhere; }
.event-attendance-badge { display: inline-flex; max-width: 100%; margin-bottom: 8px; padding: 5px 8px; border: 1px solid var(--line-bright); background: var(--panel-3); color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.event-going .event-attendance-badge { border-color: var(--purple); color: var(--ink); box-shadow: inset 3px 0 var(--purple); }
.event-card footer { flex-wrap: wrap; }
.event-card footer .event-host-link { flex: 1 1 180px; min-width: 0; }
.search-empty [data-action="explore-events"] { min-height: 44px; margin: 8px; }

/* The Adventure Loop keeps plans, objectives and progression in primary navigation. */
.adventure-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--page-inset); border-bottom:1px solid var(--line); background:var(--panel); }
.adventure-topbar > div { display:flex; gap:8px; }
.adventure-topbar .brand { font-size:14px; }
.adventure-topbar button { min-height:44px; min-width:44px; }
.mobile-nav.adventure-nav button:nth-child(n) { display:flex; }
.radar-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
.plan-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
.radar-filters > button, .plan-filters > button { font-size:12px; padding:10px 4px; }
.event-card[data-event-id] { cursor:pointer; }
.quest-event-link, .post-open-link { min-height:44px; padding:8px; text-align:left; }
.quest-event-link { color:var(--ink); background:var(--panel-3); border-color:var(--purple); max-width:100%; overflow-wrap:anywhere; }
.post-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.post-open-link { border:0; background:transparent; color:var(--cyan); font:inherit; }
button.mini-event { width:100%; border:0; border-bottom:1px solid var(--line); text-align:left; font:inherit; background:transparent; color:var(--ink); }
button.mini-event > span:last-child { display:grid; gap:3px; min-width:0; }
.reply-sheet-handle { display:none; }
.post-modal { transition:transform 180ms ease-out; }
.post-modal .reply-sheet-handle { position:sticky; top:0; z-index:3; display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; min-height:44px; padding:9px 48px; border:0; background:var(--panel); color:var(--muted); touch-action:none; user-select:none; cursor:grab; }
.reply-sheet-handle span { width:36px; height:4px; border-radius:2px; background:var(--muted); }
.reply-sheet-handle small { font:10px var(--copy); }
.post-modal .modal-close { z-index:4; min-height:44px; min-width:44px; }
@media (prefers-reduced-motion:reduce) { .post-modal { transition:none; } }
@media (max-width:420px) { .radar-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.quest-plans-controls { padding:0 var(--page-inset); }
.plan-card { border:1px solid var(--line); background:var(--panel); }
.plan-card .event-card { box-shadow:none; }
.plan-objectives { padding:16px; display:grid; gap:16px; }
.plan-objective { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.plan-objective > span { flex:1; min-width:140px; }
.plan-objective strong, .plan-objective small { display:block; line-height:1.6; }
.plan-objective small { color:var(--muted); margin-top:4px; }
.plan-objective button { min-height:44px; }
.passport-progress { margin-top:20px; padding:16px; background:var(--panel-2); border:1px solid var(--purple); }
.passport-progress h3 { font-size:16px; }
.passport-progress p { font-size:12px; color:var(--muted); line-height:1.6; }
.xp-track { height:10px; background:var(--line); overflow:hidden; }
.xp-track > span { display:block; height:100%; background:var(--purple); }
.studio-form select { width:100%; min-height:44px; background:var(--panel); color:var(--ink); border:1px solid var(--line); padding:10px; margin-bottom:16px; }
.adventure-topbar button { border:1px solid var(--line-bright); background:var(--panel-3); color:var(--ink); font-family:var(--pixel); }

.log-tabs { position:sticky; top:max(4px,env(safe-area-inset-top)); z-index:10; margin:0 8px 8px; padding:4px; gap:4px; border:1px solid var(--line-bright); border-radius:24px; background:color-mix(in srgb,var(--panel) 80%,transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.log-tabs > button { border:0; border-radius:20px; background:transparent; }
.log-tabs > button[aria-selected="true"] { box-shadow:none; background:var(--panel-3); color:var(--ink); }
@supports not (background:color-mix(in srgb,#000 80%,transparent)) { .log-tabs { background:var(--panel); } }
@media (prefers-reduced-transparency:reduce) { .log-tabs { background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; } }
.log-snips-intro { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:0 var(--page-inset); }
.log-snips-intro p { flex:1; color:var(--muted); font-size:12px; line-height:1.6; }
.log-snips-intro button { min-height:44px; }
.event-cover-preview[hidden] { display:none; }
.event-cover-preview img, .event-detail-cover { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; margin:16px 0; background:var(--panel-3); }
.event-card-cover { display:block; width:100%; padding:0; margin-bottom:16px; border:0; border-radius:12px; overflow:hidden; background:var(--panel-3); }
.event-card-cover img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }

/* Shared appearance controls share one preference on auth and app pages. */
.theme-toggle, .mobile-theme, .login-theme { min-height:44px; }
.theme-toggle small { color:var(--purple); font-size:12px; }
.mobile-theme { min-width:44px; }
.login-theme { position:fixed; z-index:5; display:flex; align-items:center; gap:8px; }
.appearance-settings { margin:20px var(--page-inset); padding:20px; background:var(--panel); border:1px solid var(--line); }
.appearance-settings h2 { font-size:16px; line-height:24px; margin:0; }
.account-settings section { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.account-settings .appearance-settings { margin:0; }
.account-settings .danger-action { background:var(--panel); color:var(--red); border-color:var(--red); }
.account-settings a, .policy-page a, .auth-note a { color:var(--purple); }
.policy-page { max-width:800px; margin:auto; padding:32px 20px; line-height:1.8; }
.policy-page section { margin-top:32px; padding:20px; background:var(--panel); border:1px solid var(--line); }
.appearance-settings p { color:var(--muted); font-size:12px; line-height:20px; margin:8px 0 0; }
.theme-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.theme-options button { flex:1; min-width:80px; min-height:44px; border:1px solid var(--line-bright); padding:10px; background:var(--panel); color:var(--ink); }
.theme-options button[aria-pressed=true] { background:var(--selection); color:var(--purple); border-color:var(--purple); }
.notification-row.unread { box-shadow:inset 3px 0 var(--purple), 3px 3px 0 var(--shadow); }
.conversation.unread { box-shadow:inset 3px 0 var(--purple); }
.media-preview-remove { background:var(--panel); color:var(--red); border-color:var(--red); }
.reel-fallback, .reel .post-actions button { color:var(--on-media); }
.reel .post-actions button:hover, .reel .post-actions button.liked { background:var(--media-scrim); color:var(--media-accent); }
.post-detail-media-fallback { color:var(--media-accent); }
@media (max-width:380px) {
  .adventure-topbar { padding-inline:8px; gap:4px; }
  .adventure-topbar .brand { font-size:12px; gap:4px; }
  .adventure-topbar .brand-mark { width:28px; height:28px; font-size:14px; }
  .adventure-topbar > div { gap:4px; }
}

.conversation-entry { position: relative; }
.conversation-entry > .conversation { padding-right: 50px; }
.chat-list-menu { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; min-height: 44px; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.chat-list-menu:focus-visible { outline: 2px solid var(--purple); outline-offset: -3px; }
.chat-preference-badges { color: var(--purple); font-size: 11px; }

/* Two-line inbox rows; keep the separate options button's 44px hit area. */
.conversation { min-height: 56px; padding: 8px 10px; margin: 2px 0; }
.conversation-avatar { display: inline-flex; flex: 0 0 auto; position: relative; }
.conversation-avatar .chat-thread-presence { position: absolute; bottom: 0; right: 0; display: block; width: 8px; height: 8px; border: 1px solid var(--panel); border-radius: 50%; background: var(--lime); font-size: 0; line-height: 0; }
.conversation-avatar .chat-thread-presence[hidden] { display: none; }
.conversation-top { line-height: 18px; }
.conversation-top strong { flex: 1; min-width: 0; }
.conversation-top .chat-preference-badges { flex: 0 0 auto; display: inline-flex; gap: 2px; }
.conversation-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conversation small { flex: 1; min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; }
.conversation-bottom .unread-count { flex: 0 0 auto; }
.messages { padding: 12px; gap: 5px; }
.message { flex-shrink: 0; padding: 7px 11px; max-width: 75%; min-height: 44px; min-width: 44px; }
.message small { display: block; margin-top: 2px; line-height: 14px; }
/* Place message options in the unused side gutter, without adding a text row. */
.message-more { position: absolute; top: 50%; right: -44px; left: auto; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; }
.message.mine .message-more { left: -44px; right: auto; }
.message-more:focus-visible { outline: 2px solid var(--purple); outline-offset: -3px; }.new-chat, .new-chat-inline, .chat-manage, .chat-list-back{ min-width: 44px; min-height: 44px; }
.chat-thread-person { min-height: 44px; }

/* Keep Passports short enough to reach posts on the first screen. */
.profile-hero { padding: 12px var(--page-inset) 8px; }
.profile-hero .profile-top { align-items: center; gap: 10px; }
.profile-hero .profile-avatar-button { flex: 0 0 56px; width: 56px; height: 56px; }
.profile-hero .profile-avatar-button .profile-avatar { width: 56px; height: 56px; border: 0; border-radius: 50%; box-shadow: none; font-size: 22px; }
.profile-hero .profile-avatar-hint { width: 18px; height: 18px; font-size: 10px; }
.profile-identity { flex: 1; min-width: 0; }
.profile-hero h1 { font-size: 20px; line-height: 26px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-hero .profile-handle { color: var(--muted); font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-hero .profile-actions { gap: 4px; flex-wrap: nowrap; }
.profile-icon-button, .profile-more > summary { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--ink); cursor: pointer; }
.profile-more { position: relative; }
.profile-more > summary { list-style: none; }
.profile-more > summary::-webkit-details-marker, .profile-bio > summary::-webkit-details-marker { display: none; }
.profile-options { position: absolute; top: 100%; right: 0; z-index: 12; width: max-content; max-width: min(250px,80vw); padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px var(--shadow); }
.profile-options button { display: block; min-height: 44px; padding: 8px 12px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font-size: 13px; }
.profile-hero .profile-bio { margin: 6px 0 0; font-size: 13px; line-height: 19px; }
.profile-bio > summary { display: flex; align-items: center; gap: 4px; min-height: 44px; list-style: none; cursor: pointer; }
.profile-bio > summary > span:first-child { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.profile-bio[open] > summary > span:first-child { display: block; }
.profile-hero .passport-progress { margin: 6px 0 0; padding: 6px 0; background: transparent; border: 0; }
.passport-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.passport-summary h3 { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 18px; }
.passport-summary > span { color: var(--muted); font-size: 12px; line-height: 18px; }
.profile-hero .xp-track { height: 4px; border-radius: 2px; }
.profile-hero .scores { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-top: 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-hero .scores .score { align-items: center; min-height: 52px; padding: 6px 2px; text-align: center; background: transparent; border: 0; box-shadow: none; }
.profile-hero .score strong { font-size: 20px; line-height: 24px; }
.profile-hero .score span { font-size: 11px; line-height: 16px; margin: 0; }
.profile-relationship { display: flex; gap: 8px; margin-top: 8px; }
.profile-relationship > button { flex: 1; min-height: 44px; padding: 6px 8px; border-radius: 14px; }
.profile-hero .adventure-badge-shelf { margin: 8px 0 0; }
.profile-hero .adventure-badge-shelf h3 { color: var(--muted); font-size: 12px; line-height: 18px; margin: 0 0 6px; }
.profile-badge-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-badge-chip { display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 5px 8px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); font-size: 12px; line-height: 18px; }
.profile-badge-chip strong { color: var(--purple); font-size: 12px; }
.profile-hero + .profile-tabs { padding: 6px var(--page-inset); }

/* Four across in profile grids; full posts live in the scrollable viewer. */
.profile-media-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; }
.profile-media-grid > div { min-width: 0; }
.profile-grid-tile { display: block; position: relative; width: 100%; aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: var(--panel-2); color: var(--ink); overflow: hidden; }
.profile-grid-tile > img, .profile-grid-tile > video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.profile-grid-play { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--media-background); color: var(--on-media); font-size: 12px; }
.profile-grid-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 6px; color: var(--purple); }
.profile-grid-fallback small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 15px; color: var(--ink); }
.profile-hero + .profile-tabs > button { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 12px; }
.profile-media-modal { width: min(680px,calc(100vw - 16px)); max-width: 680px; padding: 0; overflow: hidden; }
.profile-viewer-toolbar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 58px 6px 16px; background: var(--panel); }
.profile-viewer-toolbar h2 { font-size: 16px; margin: 0; }
.profile-viewer-toolbar small { font-size: 11px; color: var(--muted); }
.profile-media-feed { height: min(78dvh,900px); overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.profile-media-feed > .post { margin: 0; border-radius: 0; }
.profile-media-feed img.post-media { width: 100%; aspect-ratio: 1; object-fit: cover; }
.profile-media-feed video { display: block; width: 100%; max-height: 65dvh; object-fit: contain; background: var(--media-background); }
.profile-media-modal .modal-close { z-index: 4; min-height: 44px; min-width: 44px; }
.google-sign-in { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
.google-button { min-height:44px; max-width:100%; overflow:hidden; }
.google-continue { display:flex; align-items:center; justify-content:center; gap:12px; background:var(--panel); border:1px solid var(--line-bright); border-radius:4px; color:var(--ink); cursor:pointer; font:inherit; min-height:44px; padding:10px 18px; width:100%; }
.google-icon { flex-shrink:0; }
.google-continue:disabled { cursor:wait; opacity:.65; }
.google-status { color:var(--muted); font-size:12px; line-height:1.6; margin:10px 0 0; overflow-wrap:anywhere; }
[data-google-button] { margin-top:16px; }
[data-google-settings] p { overflow-wrap:anywhere; }

/* Outgoing delivery dots match the native chat; labels also expose their meaning. */
.message-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.message-meta > small { margin-top: 0; }
.message-status { display: inline-flex; align-items: center; gap: 5px; min-height: 14px; color: var(--muted); font-size: 11px; line-height: 15px; }
.message-status-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--delivery-failed); }
.message-status-read .message-status-dot { background: var(--delivery-read); }
.message-status-sent .message-status-dot { background: var(--delivery-sent); border: 1px solid var(--delivery-sent-border); }
.message-retry-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.message-retry-controls > button { min-height: 44px; padding: 6px 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; text-decoration: underline; }
.message-retry-controls > button:first-child { color: var(--red); }