/* ============================================================
   HOOMANING v1.11.1 — Open Field visual identity integration
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

:root {
  --bg:#101416;
  --surface:#191F22;
  --surface-2:#222A2E;
  --line:#343D40;
  --paper:#F6F2E8;
  --ink:#15171A;
  --text:#F6F2E8;
  --text-dim:#AAB2B3;
  --text-faint:#737D81;
  --ochre:#8EA3FF;
  --ochre-dim:#6173C7;
  --sage:#76D9B8;
  --sage-dim:#438B76;
  --periwinkle:#76D9B8;
  --signal:#FF8B66;
  --support:#FFD36A;
  --success:#68D5A8;
  --warning:#F1B84B;
  --error:#FF777D;
  --font-sans:'Rubik',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

body { background:#0B0F11; }
#app { background:var(--bg); border-color:var(--line); }
@media (min-width:561px) { body { background:#0B0F11; } }
:focus-visible { outline-color:#AFC0FF; }

/* Official topbar lockup */
.topbar { min-height:58px; }
.hm-brand-mark { display:flex; align-items:center; line-height:0; }
.hm-brand-logo { width:134px; height:auto; display:block; }
@media (max-width:420px) {
  .topbar { padding-left:16px; padding-right:16px; }
  .hm-brand-logo { width:120px; }
}

/* Open Field controls — restrained, product-first */
.search-input:focus { border-color:var(--ochre); box-shadow:0 0 0 2px rgba(142,163,255,.10); }
.chip.selected,.seg.selected,.range-btn.active { background:var(--ochre); border-color:var(--ochre); color:var(--ink); }
.add-btn { background:var(--ochre); color:var(--ink); }
.tab.active { color:var(--ochre); }
.v19-sound-button.on { color:var(--ochre); border-color:rgba(142,163,255,.42); background:rgba(142,163,255,.06); }
.activity-icon-wrap,.suggest-icon,.v20-result-icon { color:var(--ochre); border-color:rgba(142,163,255,.20); background:rgba(142,163,255,.045); }
.feedback-type.selected { border-color:var(--ochre); color:var(--ochre); box-shadow:inset 0 0 0 1px rgba(142,163,255,.13); }
.awareness-progress { stroke:var(--secondary,var(--sage)); }
.awareness-kicker { color:var(--sage); }

/* Hero pattern supports the v1.7 human-universe visual instead of replacing it. */
.log-human-universe.hm-open-field-hero {
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(16,20,22,.68),rgba(16,20,22,.68)),
    url('assets/brand/patterns/Hoomaning_Hero_Dark.svg');
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 70px rgba(142,163,255,.025);
}
.human-earth { color:var(--sage) !important; }
.human-orbit-icon.love { color:var(--signal) !important; }
.human-orbit-icon.connect { color:var(--ochre) !important; }
.human-orbit-icon.express { color:var(--sage) !important; }
.human-orbit-icon.sleep { color:#AFC0FF !important; }
.human-orbit-icon.eat { color:var(--support) !important; }
.human-orbit-icon.move { color:var(--sage) !important; }
.human-orbit-icon.work { color:var(--signal) !important; }

/* Subtle official micro pattern only in branded/empty moments, never under forms. */
.receipt-universe.hm-micro-pattern {
  background-image:
    linear-gradient(rgba(25,31,34,.91),rgba(25,31,34,.91)),
    url('assets/brand/patterns/Hoomaning_Micro_Dark.svg');
  background-size:auto,360px auto;
  border-color:rgba(142,163,255,.62);
}
.receipt-universe .u-label { color:#AFC0FF; }
.receipt-universe .u-text { color:var(--text); }
.empty-state.hm-empty-pattern {
  background-image:
    linear-gradient(rgba(25,31,34,.92),rgba(25,31,34,.92)),
    url('assets/brand/patterns/Hoomaning_Micro_Dark.svg');
  background-size:auto,320px auto;
}

/* Receipt keeps its tactile paper moment, but uses official signal/support accents. */
.receipt-eyebrow { color:#6173C7; }
.receipt-divider { border-color:rgba(21,23,26,.18); }
.receipt .danger-ghost { color:#B24E45; }

/* Context: cleaner density, high-signal only. */
.v21-context-block .chip-row { gap:8px; }
.v21-context-block .field-label { color:var(--text-faint); }

/* Mobile post-log: center the stack; close is thumb-friendly below, not floating over it. */
@media (max-width:700px) {
  .receipt-overlay {
    align-items:center !important;
    justify-content:center !important;
    padding-top:max(12px,env(safe-area-inset-top)) !important;
    padding-bottom:12px !important;
    overflow:hidden !important;
  }
  .v20-receipt-shell {
    position:relative !important;
    width:100% !important;
    max-height:100% !important;
    overflow-y:auto !important;
    padding:16px 12px 84px !important;
    -webkit-overflow-scrolling:touch;
  }
  .v20-receipt-shell .post-log-cluster {
    min-height:0;
    margin:auto;
    padding:0 !important;
    gap:20px !important;
    justify-content:center;
  }
  .post-log-cluster .receipt,
  .post-log-cluster .universe-wrap { max-width:330px; }
  .v20-receipt-close {
    position:absolute !important;
    top:auto !important;
    right:auto !important;
    left:50% !important;
    bottom:14px !important;
    transform:translateX(-50%) !important;
    width:50px !important;
    height:50px !important;
    border-color:rgba(142,163,255,.42) !important;
    background:var(--surface-2) !important;
    box-shadow:0 10px 30px rgba(0,0,0,.34) !important;
  }
}

@media (min-width:701px) {
  .v20-receipt-shell { padding-top:48px !important; }
  .v20-receipt-close { top:4px !important; right:12px !important; }
}