/* Components shared by every view */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:42px;padding:0 var(--s-4);
  border:1px solid transparent;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:600;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn .i{width:16px;height:16px}
.btn-sm{min-height:36px;padding:0 var(--s-3);font-size:var(--t-xs)}
.btn-block{width:100%}
.btn-primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--ink)}
.btn-on-dark{background:#fff;border-color:#fff;color:#1a1b16}
.btn-on-dark:hover{background:#f1ede4}
.btn-on-dark-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-on-dark-ghost:hover{border-color:#fff}

.text-btn{
  border:0;background:none;padding:0;
  color:var(--accent);font-size:var(--t-sm);font-weight:600;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:text-decoration-color var(--dur) var(--ease);
}
.text-btn:hover{text-decoration-color:currentColor}

.icon-btn{
  width:38px;height:38px;flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:transparent;color:var(--ink);
  transition:border-color var(--dur) var(--ease);
}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn-plain{border-color:transparent;border-radius:50%}
.icon-btn-plain:hover{border-color:var(--line)}

/* Form controls */
select,.search-input,.chat-compose input{
  appearance:none;width:100%;
  padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);font-size:var(--t-sm);
}
select{
  padding-right:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2366655c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") right 2px center/10px 6px no-repeat;
}
select option{background:var(--cream);color:var(--ink)}
input::placeholder{color:var(--muted)}

.switch{
  position:relative;width:38px;height:22px;flex:0 0 auto;
  border:0;border-radius:var(--r-pill);background:var(--paper-3);
  transition:background var(--dur) var(--ease);
}
.switch::after{
  content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);
  transition:transform var(--dur) var(--ease);
}
.switch.on{background:var(--moss)}
.switch.on::after{transform:translateX(16px)}

/* Underline tabs — filters and segmented choices */
.tab-row{display:flex;flex-wrap:wrap;gap:18px}
.chip{
  border:0;background:none;padding:7px 0;
  color:var(--muted);font-size:var(--t-sm);
  transition:color var(--dur) var(--ease);
}
.chip:hover{color:var(--ink)}
.chip.active{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}

/* Avatars */
.avatar{
  width:42px;height:42px;flex:0 0 auto;
  display:inline-grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.65);
  color:#fff;font-size:var(--t-xs);font-weight:700;
  background:var(--ink-2) center/cover no-repeat;
}
.avatar-xs{width:26px;height:26px;font-size:9px}
.avatar-sm{width:34px;height:34px;font-size:11px}
.avatar-xl{width:64px;height:64px;font-size:16px}
.avatar-xxl{width:94px;height:94px;font-size:22px}
/* Hosts without an uploaded photo get a drawn portrait (portraits.js injects .avatar-<id>). */
.avatar-me{background:var(--moss);color:var(--on-moss);border-color:transparent}
.avatar.has-photo{color:transparent}

/* City photography */
.visual-london{background:#3c5264 url("../assets/img/london-1200.jpg") center/cover no-repeat}
.visual-tokyo{background:#2d3451 url("../assets/img/tokyo-1200.jpg") center/cover no-repeat}
.visual-madrid{background:#825f82 url("../assets/img/madrid-1200.jpg") center/cover no-repeat}
.visual-istanbul{background:#56a8b7 url("../assets/img/istanbul-1200.jpg") center/cover no-repeat}

/* Pills on photography */
.live-pill{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--r-pill);
  background:rgba(19,20,17,.7);color:#fff;
  font-size:var(--t-xs);font-weight:600;
}
.live-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live-bright)}

/* Status tags */
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:600;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status-live{color:var(--live)}
.status-soon{color:var(--sun)}
.status-later{color:var(--sky)}

.verified{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:600;color:var(--moss)}
.verified .i{width:14px;height:14px;stroke-width:2}
.presence{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:500;color:var(--live)}
.presence::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.presence.away{color:var(--sun)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:0 0 auto}

/* Tags are labels, not links: quiet pills, never underlined */
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag-row span{padding:3px 10px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);font-size:var(--t-xs);cursor:default}

/* Numbers in a row */
.stat-grid{display:grid;gap:var(--s-2)}
.stat-grid-2{grid-template-columns:repeat(2,1fr)}
.stat-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-grid-4{grid-template-columns:repeat(4,1fr)}
.stat-grid>div{display:grid;gap:2px;padding:var(--s-3);border-radius:var(--r-sm);background:var(--paper-2);text-align:left}
.stat-grid strong{font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.stat-grid span{font-size:var(--t-xs);color:var(--muted)}

/* A label followed by a hairline — used on the dark host card and passport */
.rule-label{display:flex;align-items:center;gap:18px;font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.rule-label i{display:block;width:90px;height:1px;background:currentColor;opacity:.6}

/* Bordered surface */
.panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cream)}

/* Modals */
.modal-backdrop{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(24,25,21,.56);backdrop-filter:blur(12px);
}
.modal-backdrop.open{display:flex;animation:fadeIn .2s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lobby-modal,.simple-modal,.recap-modal{
  position:relative;background:var(--cream);border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  animation:modalIn .28s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-close{
  position:absolute;right:14px;top:14px;z-index:5;
  width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;
  background:color-mix(in srgb,var(--cream) 90%,transparent);color:var(--ink);
}
.modal-close .i{width:16px;height:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:auto}

.lobby-modal{width:min(900px,96vw);display:grid;grid-template-columns:.95fr 1.05fr;overflow:hidden}
.lobby-visual{position:relative;min-height:520px;padding:18px}
.lobby-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,11,9,.6))}
.modal-city{position:absolute;z-index:2;left:24px;bottom:24px;color:#fff}
.modal-city .label{color:rgba(255,255,255,.75)}
.modal-city h2{margin-top:6px;font-size:54px;font-weight:600;letter-spacing:-.05em;line-height:1}
.modal-city p{margin-top:4px;font-size:var(--t-lg)}
.lobby-body{display:flex;flex-direction:column;gap:22px;padding:30px}
.host-line{display:flex;align-items:center;gap:10px}
.host-line div{display:grid}
.host-line span{font-size:var(--t-xs);color:var(--muted)}
.modal-mission h3{margin:8px 0;font-size:var(--t-xl);font-weight:600;line-height:1.2;letter-spacing:-.04em}
.modal-mission p{color:var(--muted);font-size:var(--t-sm);line-height:1.65}

.simple-modal,.recap-modal{width:min(520px,95vw);padding:28px}
.simple-modal h2,.recap-modal h2{margin:8px 0;font-size:32px;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.simple-modal>p,.recap-modal>p{color:var(--muted);line-height:1.6}
.host-options{display:grid;gap:var(--s-2);margin:18px 0}
.host-option{
  display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.host-option:hover{border-color:var(--line-strong)}
.host-option.active{border-color:var(--ink);background:var(--paper-2)}
.host-option>span{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--paper-2)}
.host-option.active>span{background:var(--cream)}
.host-option div{display:grid}
.host-option small{font-size:var(--t-xs);color:var(--muted)}
.host-safe-note{display:grid;gap:4px;margin-bottom:var(--s-4);padding:var(--s-3) 14px;border-radius:var(--r-sm);background:var(--moss-soft)}
.host-safe-note span{font-size:var(--t-xs);line-height:1.55;color:var(--muted)}

.recap-modal{text-align:center}
.recap-mark{display:grid;place-items:center;margin-bottom:6px;color:var(--moss)}
.recap-mark .i{width:40px;height:40px;stroke-width:1.2}
.recap-modal .stat-grid{margin:18px 0}
.recap-memory{display:grid;gap:6px;padding:var(--s-4);border-radius:var(--r-sm);background:var(--accent-soft);text-align:left}
.recap-memory span{font-size:var(--t-xs);font-weight:600;color:var(--accent)}
.recap-memory strong{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.2}
.recap-modal .modal-actions{justify-content:center;margin-top:18px}

/* Toast */
.toast{
  position:fixed;right:24px;bottom:24px;z-index:160;min-width:260px;
  display:none;gap:2px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--paper);box-shadow:var(--shadow-1);
}
.toast.show{display:grid;animation:toastIn .2s var(--ease)}
.toast strong{font-size:var(--t-sm)}
.toast span{font-size:var(--t-xs);opacity:.75}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  .lobby-modal{grid-template-columns:1fr;max-height:92vh;overflow:auto}
  .lobby-visual{min-height:250px}
  .modal-city h2{font-size:38px}
  .lobby-body{padding:22px}
  .toast{left:16px;right:16px;bottom:96px;min-width:0}
}