/* Hausu UI system. Green = action, purple = community, coral = attention. */
:root {
  --ui-action: var(--green);
  --ui-community: var(--purple);
  --ui-attention: var(--orange);
  --ui-surface: var(--white);
  --ui-canvas: var(--paper);
  --ui-ink: var(--ink);
  --ui-radius: 8px;
  --ui-radius-small: 4px;
  --ui-border: 2px solid var(--ui-ink);
  --ui-shadow: 6px 6px 0 var(--ui-ink);
}

body { background: var(--ui-canvas); }

/* Header */
.app-header {
  height: 78px;
  padding: 0 max(24px,calc((100% - 1240px)/2));
  border-bottom: 5px solid var(--ui-community);
  background: var(--ui-ink);
  color: var(--ui-surface);
  box-shadow: none;
}
.app-header::after { display: none; }
.app-header .brand { color: var(--ui-surface); }
.app-header .brand::after { color: var(--ui-attention); }
.app-header .brand-type small { border:1px solid var(--ui-surface);border-radius:1px;background:var(--ui-attention);color:var(--ui-ink);box-shadow:3px 3px 0 var(--ui-community); }
.app-header .brand:hover .brand-type small { animation:hausu-badge-wobble .42s ease-in-out; }
@keyframes hausu-badge-wobble {
  0%,100% { transform:rotate(-3deg) translateY(0); }
  32% { transform:rotate(4deg) translateY(-2px); }
  68% { transform:rotate(-5deg) translateY(1px); }
}
.app-header .app-nav { gap:2px;padding:4px;border:1px solid rgba(255,255,255,.2);border-radius:var(--ui-radius-small);background:rgba(255,255,255,.05);box-shadow:none; }
.app-header .app-nav button { padding:9px 15px;border:1px solid transparent;border-radius:1px;color:rgba(255,255,255,.68); }
.app-header .app-nav button:hover { border-color:rgba(255,255,255,.2);background:rgba(170,140,255,.16);color:var(--ui-surface); }
.app-header .app-nav button.active { border-color:var(--ui-ink);background:var(--ui-surface);color:var(--ui-ink);box-shadow:3px 3px 0 var(--ui-attention); }
.app-header .avatar { border-color:var(--ui-surface);background-color:var(--ui-community);box-shadow:3px 3px 0 var(--ui-community); }

/* Footer mirrors the header, closing the page with the same brand frame. */
.app-footer { margin-top:90px;padding:42px max(24px,calc((100% - 1240px)/2)) 22px;border-top:5px solid var(--ui-community);background:var(--ui-ink);color:var(--ui-surface); }
.footer-brand { position:relative;width:max-content;color:var(--ui-surface);text-decoration:none;font-size:22px;font-weight:850;letter-spacing:-.04em; }
.footer-brand::after { content:'FIRST FLAT CLUB · LDN';position:absolute;left:0;bottom:-12px;color:var(--ui-attention);font:800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;white-space:nowrap; }
.footer-brand .brand-type { display:flex;align-items:center;gap:9px; }
.footer-brand .brand-type small { margin:0;padding:5px 7px 6px;border:1px solid var(--ui-surface);border-radius:1px;background:var(--ui-attention);color:var(--ui-ink);box-shadow:3px 3px 0 var(--ui-community);font-size:8px;line-height:1;letter-spacing:.08em;transform:rotate(-3deg); }
.footer-brand:hover .brand-type small { animation:hausu-badge-wobble .42s ease-in-out; }
.footer-top { grid-template-columns:1fr 2fr auto;align-items:center; }
.footer-top p { color:var(--ui-surface); }
.footer-top nav { flex-direction:row;gap:2px;padding:4px;border:1px solid rgba(255,255,255,.2);border-radius:var(--ui-radius-small);background:rgba(255,255,255,.05); }
.footer-top nav button { padding:9px 15px;border:1px solid transparent;border-radius:1px;color:rgba(255,255,255,.68);font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase; }
.footer-top nav button:hover { border-color:rgba(255,255,255,.2);background:rgba(170,140,255,.16);color:var(--ui-surface); }
.footer-top nav button.active { border-color:var(--ui-ink);background:var(--ui-surface);color:var(--ui-ink);box-shadow:3px 3px 0 var(--ui-attention); }
.footer-bottom { border-top-color:rgba(255,255,255,.18); }

/* Surfaces */
.assistant-search,.onboarding,.project-card,.friend-card,.empty,.room-card,.search-result,.no-search-results,.profile-nudge,.match-flash,dialog { border-radius:var(--ui-radius); }
.assistant-search,.onboarding,.room-card,dialog { border:var(--ui-border); }
.project-card,.friend-card,.empty,.search-result { border:1px solid rgba(24,38,31,.28); }
.assistant-search { background:var(--ui-community);box-shadow:8px 8px 0 var(--ui-ink); }
.project-card,.project-card:nth-child(3n+2),.project-card:nth-child(3n+3) { border-top:5px solid var(--ui-community);background:var(--ui-surface); }
.friend-card,.friend-card:nth-child(3n+2) { background:var(--ui-surface); }
.project-card:hover,.friend-card:hover { border-color:var(--ui-ink);box-shadow:var(--ui-shadow); }

/* Controls */
.primary,.secondary,.google-button,.dev-button,.assistant-box,.assistant-actions,.assistant-box button,.mic-button,.window-actions button,.window-actions a,.listing-question input,.listing-question button,.project-picker,.project-picker button,.invite-link,.invite-link button,dialog input,dialog textarea { border-radius:var(--ui-radius-small)!important; }
.primary,.secondary,.google-button { border:var(--ui-border);box-shadow:4px 4px 0 var(--ui-ink); }
.primary,.assistant-box button[type="submit"],.window-actions .save-listing,.yes,.chips input:checked + span,.window-tabs button.active { background:var(--ui-action);color:var(--ui-ink); }
.secondary { background:var(--ui-surface);color:var(--ui-ink); }
.primary:active,.secondary:active,.google-button:active { transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ui-ink); }
.query-chips span,.window-facts span,.facts span,.project-card .tag,.chips span { border-radius:99px; }

/* Purple: people, collaboration and AI. */
.avatar,.member,.friend-avatar,.ai-avatar { background-color:var(--ui-community); }
.window-description-panel { border-left-color:var(--ui-community); }

/* Coral: moments that require attention. */
.window-close,.nope,.risk-badge.high,.value-chip.above_market>b,.mic-button.listening { background:var(--ui-attention)!important; }
.nope { color:var(--ui-ink); }

/* Remove one-off decoration. */
.onboarding::before { display:none; }
.onboarding-head h2::after { content:''; }
.onboarding-head>strong { border:0;background:var(--ui-action);transform:none; }
.onboarding-tasks i { border-radius:var(--ui-radius-small);background:var(--ui-canvas)!important;transform:none!important; }

@media(max-width:760px) {
  .app-header { height:auto;min-height:68px;padding:10px 14px 8px; }
  .app-header .app-nav { width:100%;margin-top:6px; }
  .app-header .app-nav button { flex:1;padding:7px 8px; }
  .footer-top { grid-template-columns:1fr;align-items:start; }
  .footer-top nav { width:100%; }
  .footer-top nav button { flex:1;padding:8px; }
}

@media(prefers-reduced-motion:reduce) {
  .app-header .brand:hover .brand-type small,.footer-brand:hover .brand-type small { animation:none; }
}