/* TraWi App — 4-tab social shell */
/* This stylesheet only loads on the app page → safe to hide the theme chrome
   so the app is full-screen like the mockup (no theme header/footer). */
#header,.mod_navigation{display:none!important}
html,body{overflow-x:clip;max-width:100%}

.trawi-app{
    --teal:#1F7A6B; --teal-dark:#14655A;
    --creme:#FBF1D9; --sand:#F2E6C7;
    --terra:#9A6A41; --gold:#E8AE48;
    --ink:#2C2722; --line:#ECE4D5;
    --r-bg:#FBE2D6; --r-tx:#C2613B;
    --h-bg:#DCEAF4; --h-tx:#4E84AC;
    --o-bg:#DCEFE1; --o-tx:#4C9A6C;
    color:var(--ink);
    font-family:"DM Sans",system-ui,sans-serif;
    /* Full-bleed wrapper: ignore the theme column width/offset entirely. */
    width:100vw;
    margin-left:calc(50% - 50vw);
}
/* Constant boxed app, centred on the viewport — uniform across all tabs */
.trawi-app-inner{
    max-width:1100px;
    margin:0 auto;
    background:var(--creme);
    border-radius:20px;
    box-shadow:0 12px 44px rgba(44,39,34,.12);
    overflow:hidden;
}

/* Login screen (guests) */
.trawi-login-screen{padding:48px 20px 56px;text-align:center}
.trawi-login-screen .trawi-app-logo img{height:72px}
.trawi-login-card{max-width:420px;margin:24px auto 0;background:#fff;border-radius:18px;
    box-shadow:0 8px 30px rgba(44,39,34,.10);padding:28px 26px;text-align:left}
.trawi-login-card .widget{margin-bottom:14px}
.trawi-login-card label{display:block;margin-bottom:5px;font-size:14px;color:#6b6258}
.trawi-login-card input{width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid var(--line);
    border-radius:10px;font:inherit;font-size:15px;background:var(--creme);outline:0}
.trawi-login-card button,.trawi-login-card .submit{width:100%;padding:12px;border:0;border-radius:30px;
    background:var(--teal);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;margin-top:6px}
.trawi-login-card a{color:var(--teal)}

/* Header + nav */
.trawi-app-header{background:#fff;border-bottom:1px solid var(--line)}
.trawi-app-logo{display:flex;justify-content:center;padding:18px 0 8px}
.trawi-app-logo img{height:140px;width:auto}
.trawi-app-nav{display:flex}
.trawi-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:10px 4px;background:none;border:0;cursor:pointer;color:#8a8178;
    font:inherit;font-size:13px;position:relative}
.trawi-tab span{font-size:12px}
.trawi-tab.is-active{color:var(--teal)}
.trawi-tab.is-active::after{content:"";position:absolute;bottom:0;left:25%;right:25%;height:3px;
    border-radius:3px 3px 0 0;background:var(--teal)}

/* Panels */
.trawi-panel{display:none;padding:18px 16px 40px}
.trawi-panel.is-active{display:block}
.trawi-panel-head{display:flex;justify-content:space-between;align-items:baseline;margin:6px 2px 18px;flex-wrap:wrap;gap:4px}
.trawi-panel-head h2{font-family:"Fraunces",Georgia,serif;font-size:26px;margin:0;font-weight:600}
.trawi-panel-sub{color:#9a9087;font-size:14px}
.trawi-empty{color:#9a9087;text-align:center;padding:40px 0}

/* Feed cards */
.trawi-feed{display:flex;flex-direction:column;gap:18px}
.trawi-card{display:flex;background:#fff;border-radius:18px;overflow:hidden;
    box-shadow:0 6px 22px rgba(44,39,34,.07)}
.trawi-card-img{flex:0 0 38%;min-height:190px;background-size:cover;background-position:center;
    background-color:var(--sand)}
.trawi-card-body{flex:1;padding:16px 18px;display:flex;flex-direction:column;min-width:0}
.trawi-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.trawi-badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:5px 11px;border-radius:20px}
.trawi-badge-hotel{background:var(--h-bg);color:var(--h-tx)}
.trawi-badge-restaurant{background:var(--r-bg);color:var(--r-tx)}
.trawi-badge-place{background:var(--o-bg);color:var(--o-tx)}
.trawi-save{background:none;border:0;cursor:pointer;color:#bdb3a6;padding:2px;line-height:0}
.trawi-save.is-saved{color:var(--terra)}
.trawi-save.is-saved svg{fill:var(--terra)}
.trawi-card-title{font-family:"Fraunces",Georgia,serif;font-size:21px;margin:10px 0 4px;font-weight:600}
.trawi-card-loc{display:flex;align-items:center;gap:5px;color:var(--r-tx);font-size:14px;margin-bottom:8px}
.trawi-card-desc{color:#5e564d;font-size:14px;line-height:1.45;margin:0 0 10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trawi-card-criteria{display:flex;gap:14px;align-items:center;margin:2px 0 12px;flex-wrap:wrap}
.trawi-card-criteria img{width:22px;height:22px;object-fit:contain;opacity:.75}
.trawi-card-foot{display:flex;justify-content:space-between;align-items:center;
    margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.trawi-card-author{display:flex;align-items:center;gap:8px;font-size:14px;color:#6b6258}
.trawi-card-author strong{color:var(--ink);font-weight:600}
.trawi-card-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--sand)}
.trawi-like{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
    color:#bdb3a6;font:inherit;font-size:14px;padding:2px}
.trawi-like.is-liked{color:#e0556b}
.trawi-like.is-liked svg{fill:#e0556b}
.trawi-like img{width:20px;height:20px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .12s,opacity .12s}
.trawi-like.is-liked img{filter:none;opacity:1}
.trawi-like:hover img{opacity:.85}
.trawi-like-count{color:var(--ink)}

/* Map */
.trawi-map-frame{width:100%;height:72vh;border:0;border-radius:16px;background:var(--sand)}

/* Profile */
.trawi-cover{height:120px;border-radius:16px;background:linear-gradient(120deg,var(--teal),#5fa77b 60%,var(--gold))}
/* own + public profile: no cover, icon actions pinned top right */
.trawi-profile--own,.trawi-profile--public{position:relative;padding-top:8px}
.trawi-profile--own .trawi-profile-head,
.trawi-profile--public .trawi-profile-head{margin-top:0;align-items:center}
.trawi-profile--own .trawi-profile-avatar,
.trawi-profile--public .trawi-profile-avatar{border-color:var(--line)}
/* public profile lives in the detail overlay — give it outer breathing room */
.trawi-profile--public{padding:14px 18px 34px}
.trawi-profile--public .trawi-profile-icons{top:14px;right:18px}
.trawi-profile--public .trawi-profile-actions{padding-bottom:0}
.trawi-profile-icons{position:absolute;top:8px;right:4px;display:flex;gap:10px;z-index:2}
.trawi-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
    border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--teal);
    cursor:pointer;text-decoration:none;padding:0}
.trawi-iconbtn:hover{border-color:var(--teal);background:var(--creme);color:var(--teal-dark)}
.trawi-profile-head{display:flex;align-items:flex-end;gap:18px;margin:-46px 4px 0;flex-wrap:wrap}
.trawi-profile-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid #fff;background:var(--sand)}
.trawi-profile-id{flex:1;min-width:160px;padding-bottom:4px}
.trawi-profile-name{font-family:"Fraunces",Georgia,serif;font-size:24px;margin:0;font-weight:600}
.trawi-profile-handle{color:var(--teal);font-size:15px}
.trawi-profile-loc{display:flex;align-items:center;gap:5px;color:#9a9087;font-size:13px;margin-top:3px}
.trawi-profile-actions{display:flex;gap:10px;padding-bottom:4px}
.trawi-btn{padding:9px 20px;border-radius:30px;border:1px solid var(--teal);background:var(--teal);
    color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.trawi-btn-ghost{background:#fff;color:var(--teal)}
.trawi-profile-bio{color:#5e564d;font-size:15px;line-height:1.5;margin:14px 4px 0}
.trawi-stats{display:flex;gap:10px;margin:18px 0 6px;flex-wrap:wrap}
@media(max-width:480px){.trawi-stats .trawi-stat{flex:1 1 40%}}
.trawi-stat{flex:1;text-align:center;background:#fff;border-radius:14px;padding:14px 6px;
    box-shadow:0 4px 16px rgba(44,39,34,.05)}
.trawi-stat strong{display:block;font-size:22px;font-family:"Fraunces",Georgia,serif}
.trawi-stat span{color:#9a9087;font-size:13px}
/* Inline profile edit */
.trawi-edit-form{display:none;background:#fff;border-radius:16px;padding:22px;margin:16px 0 4px;
    box-shadow:0 6px 22px rgba(44,39,34,.07)}
.trawi-edit-form.is-open{display:block}
.trawi-edit-avatar{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.trawi-edit-avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--sand)}
.trawi-avatar-btn{display:inline-block;padding:9px 16px;border-radius:30px;border:1px solid var(--teal);
    color:var(--teal);font-size:14px;font-weight:600;cursor:pointer}
.trawi-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.trawi-edit-form label{display:block;font-size:13px;color:#6b6258;margin:0 0 4px}
.trawi-edit-form input,.trawi-edit-form textarea{width:100%;box-sizing:border-box;padding:11px 13px;
    border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;background:var(--creme);
    color:var(--ink);outline:0;margin-bottom:10px}
.trawi-edit-form input:focus,.trawi-edit-form textarea:focus{border-color:var(--teal)}
.trawi-edit-form button[type=submit]{width:100%;margin-top:6px}

.trawi-subtabs{display:flex;gap:8px;margin:18px 0 16px;border-bottom:1px solid var(--line)}
.trawi-subtab{padding:10px 16px;background:none;border:0;border-bottom:3px solid transparent;
    color:#8a8178;font:inherit;font-size:15px;cursor:pointer;margin-bottom:-1px}
.trawi-subtab.is-active{color:var(--teal);border-bottom-color:var(--teal);font-weight:600}
.trawi-subpanel{display:none}
.trawi-subpanel.is-active{display:block}
.trawi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.trawi-grid-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(44,39,34,.06)}
.trawi-grid-img{height:120px;background-size:cover;background-position:center;background-color:var(--sand);
    position:relative;padding:8px}
.trawi-grid-img .trawi-badge{position:absolute;top:8px;left:8px}
.trawi-grid-name{font-weight:600;font-size:15px;padding:10px 12px 2px}
.trawi-grid-loc{color:var(--r-tx);font-size:13px;padding:0 12px 12px}

/* Search */
.trawi-search-box{display:flex;align-items:center;gap:10px;background:var(--creme);
    border:1px solid var(--line);border-radius:30px;padding:12px 18px;color:#9a9087}
.trawi-search-box input{flex:1;background:none;border:0;font:inherit;font-size:16px;color:var(--ink);outline:0}
.trawi-search-segments{display:flex;gap:8px;margin:16px 0 18px}
.trawi-seg{padding:8px 18px;border-radius:30px;border:1px solid var(--line);background:#fff;
    color:#6b6258;font:inherit;font-size:14px;cursor:pointer}
.trawi-seg.is-active{background:var(--teal);border-color:var(--teal);color:#fff}
.trawi-results-label{color:#9a9087;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:0 2px 12px}
.trawi-people{display:flex;flex-direction:column;gap:10px}
.trawi-person{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:12px 16px;
    box-shadow:0 4px 16px rgba(44,39,34,.05)}
.trawi-person-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--sand);flex:0 0 48px}
.trawi-person-info{flex:1;min-width:0}
.trawi-person-name{font-weight:600;font-size:16px}
.trawi-person-handle{color:var(--teal);font-size:14px}
.trawi-person-meta{color:#9a9087;font-size:13px;margin-top:2px}
.trawi-follow-btn{padding:8px 20px;border-radius:30px;border:1px solid var(--teal);background:var(--teal);
    color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.trawi-follow-btn.following{background:#fff;color:var(--teal)}
.trawi-place-results{display:flex;flex-direction:column;gap:10px}
.trawi-place-result{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:10px 14px;
    box-shadow:0 4px 16px rgba(44,39,34,.05)}
.trawi-place-thumb{width:64px;height:64px;border-radius:10px;background-size:cover;background-position:center;
    background-color:var(--sand);flex:0 0 64px}
.trawi-place-rinfo{flex:1;min-width:0}
.trawi-place-rname{font-weight:600;font-size:16px;margin:4px 0 2px}
.trawi-place-rloc{color:var(--r-tx);font-size:13px}
.trawi-place-rlike{display:flex;align-items:center;gap:5px;color:#6b6258;font-size:14px}
.trawi-place-rlike img{width:18px;height:18px;object-fit:contain}

@media(max-width:560px){
    .trawi-card{flex-direction:column}
    .trawi-card-img{flex:none;width:100%;min-height:160px}
    .trawi-panel-head h2{font-size:22px}
}

/* ===== Detail overlay (spot / member) ===== */
.trawi-detail{background:var(--creme);z-index:30}
.trawi-detail[hidden]{display:none}
.trawi-detail-active .trawi-app-header,
.trawi-detail-active .trawi-panel{display:none!important}
.trawi-detail-bar{position:sticky;top:0;z-index:2;background:rgba(251,241,217,.92);
    backdrop-filter:blur(6px);padding:12px 16px;border-bottom:1px solid var(--line)}
.trawi-detail-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
    cursor:pointer;color:var(--teal);font:inherit;font-size:15px;font-weight:600;padding:4px}
.trawi-detail-body{padding:0}

/* spot detail */
.trawi-spot-detail{padding-bottom:30px}
.trawi-detail-hero{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:16px;-webkit-overflow-scrolling:touch}
.trawi-detail-slide{flex:0 0 86%;height:240px;border-radius:18px;background-size:cover;
    background-position:center;scroll-snap-align:center;box-shadow:0 8px 24px rgba(44,39,34,.12)}
.trawi-detail-hero.is-single .trawi-detail-slide{flex:0 0 100%;height:280px}
.trawi-detail-content{padding:4px 18px}
.trawi-detail-titlerow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.trawi-verified-tag{font-size:12px;font-weight:600;color:var(--teal);background:var(--o-bg);
    padding:3px 10px;border-radius:30px}
.trawi-detail-name{font-size:26px;line-height:1.15;margin:0 0 6px}
.trawi-detail-loc{display:flex;align-items:center;gap:6px;color:#7a7167;font-size:15px;margin-bottom:14px}
.trawi-detail-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.trawi-detail-act .trawi-like{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
    border-radius:30px;padding:9px 16px;background:#fff}
.trawi-save-text{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line)!important;
    border-radius:30px;padding:9px 16px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:#6b6258}
.trawi-save-text.is-saved{color:var(--teal);border-color:var(--teal)!important}
.trawi-detail-desc{color:#5e564d;font-size:15px;line-height:1.55;margin:0 0 18px}
.trawi-detail-h3{font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:#9a9087;margin:20px 0 12px}
.trawi-detail-amen{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;margin-bottom:6px}
.trawi-amen{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;
    border-radius:14px;padding:14px 8px;box-shadow:0 4px 16px rgba(44,39,34,.05);text-align:center}
.trawi-amen img{width:34px;height:34px;object-fit:contain}
.trawi-amen span{font-size:12px;color:#6b6258;line-height:1.2}
.trawi-detail-info{background:#fff;border-radius:16px;padding:6px 18px;margin:14px 0;
    box-shadow:0 4px 16px rgba(44,39,34,.05)}
.trawi-info-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
    border-bottom:1px solid var(--line);font-size:14px}
.trawi-info-row:last-child{border-bottom:0}
.trawi-info-row span{color:#9a9087}
.trawi-info-row strong,.trawi-info-row a{color:var(--ink);text-align:right;word-break:break-word}
.trawi-info-row a{color:var(--teal);text-decoration:none}
.trawi-detail-map{display:inline-flex;align-items:center;gap:7px;margin:4px 0 6px}
.trawi-detail-author{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:18px;
    border-top:1px solid var(--line);font-size:14px;color:#6b6258;cursor:pointer}
.trawi-detail-author img{width:40px;height:40px;border-radius:50%;object-fit:cover}
/* compact variant in the title row (top right) */
.trawi-detail-titlerow{flex-wrap:wrap}
.trawi-detail-author--top{margin:0 0 0 auto;padding:0;border-top:0;font-size:13px}
.trawi-detail-author--top img{width:30px;height:30px}
.trawi-detail-author--top:hover strong{text-decoration:underline}

/* clickable affordances */
.trawi-card,.trawi-grid-card,.trawi-place-result,.trawi-person-link{cursor:pointer}
.trawi-person-link{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.trawi-card-author[data-detail]{cursor:pointer}
.trawi-card-author[data-detail]:hover strong{text-decoration:underline}
.trawi-person-name{font-weight:600}
.trawi-person-link:hover .trawi-person-name{text-decoration:underline}
.trawi-profile--public .trawi-edit-form{display:none}

/* ===== Verified / not-verified badge with tooltip ===== */
.trawi-verify{position:relative;display:inline-flex;align-items:center;vertical-align:middle;line-height:0;cursor:help}
.trawi-verify img{width:18px;height:18px;object-fit:contain}
.trawi-card-top .trawi-verify{margin-right:auto;margin-left:8px}
/* floating tooltip (JS-positioned — immune to the cards' overflow:hidden) */
.trawi-tip{position:fixed;transform:translate(-50%,calc(-100% - 7px));
    background:#2C2722;color:#fff;font-family:"DM Sans",system-ui,sans-serif;
    font-size:12px;line-height:1.3;font-weight:500;padding:6px 10px;border-radius:8px;
    white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:2147483000}
.trawi-tip.show{opacity:1}
.trawi-grid-name .trawi-verify img,.trawi-place-rname .trawi-verify img{width:16px;height:16px}
/* spot detail: icon + text pill */
.trawi-verify--label{line-height:1.2;gap:6px;font-size:12px;font-weight:600;color:var(--teal);
    background:var(--o-bg);padding:3px 10px;border-radius:30px;cursor:default}
.trawi-verify--label img{width:15px;height:15px}

/* ===== Profile social links ===== */
.trawi-profile-socials{display:flex;gap:8px;margin-top:8px}
.trawi-social{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
    border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--teal);text-decoration:none}
.trawi-social:hover{border-color:var(--teal);background:var(--creme)}

/* edit form select matches the inputs */
.trawi-edit-form select{width:100%;box-sizing:border-box;padding:11px 34px 11px 13px;
    border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;
    background-color:var(--creme);color:var(--ink);outline:0;margin-bottom:10px;
    -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236b6258' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center}
.trawi-edit-form select:focus{border-color:var(--teal)}

/* ===== Mobile polish ===== */
@media(max-width:560px){
    /* header eats a third of the screen — shrink logo, make the tab bar sticky */
    .trawi-app-logo{padding:10px 0 2px}
    .trawi-app-logo img{height:84px}
    /* sticky needs no overflow-clipping ancestor; full-width box needs no radius anyway */
    .trawi-app-inner{border-radius:0;overflow:visible;box-shadow:none}
    /* the whole header sticks with a negative top: the logo (96px) scrolls
       away, the tab bar stays pinned */
    .trawi-app-header{position:sticky;top:-96px;z-index:40}
    /* profile action icons: own row above the head instead of overlapping the name */
    .trawi-profile-icons{position:static!important;justify-content:flex-end;margin:0 0 10px}
    .trawi-profile--own,.trawi-profile--public{padding-top:4px}
    .trawi-iconbtn{width:38px;height:38px}
    /* detail overlay back bar sticks under the tab bar */
    .trawi-detail-bar{top:0}
}

/* iOS Safari: inputs under 16px trigger auto-zoom on focus — prevent it */
@media(max-width:820px){
    .trawi-app input,.trawi-app select,.trawi-app textarea{font-size:16px!important}
}
/* iOS URL bar: use dynamic viewport height where supported */
@supports(height:100dvh){
    .trawi-map-frame{height:72dvh}
}