/* OnChocks 0.2.15 · Icon System 2.0
   Premium outline icons + restrained neon badges. No layout/business logic changes. */

:root{
  --oc-icon-cyan:#50dcff;
  --oc-icon-cyan-2:#20bfe8;
  --oc-icon-orange:#ff8758;
  --oc-icon-bg:rgba(12,39,63,.78);
  --oc-icon-border:rgba(72,205,244,.40);
  --oc-icon-glow:0 0 0 1px rgba(42,184,224,.05),0 7px 18px rgba(0,0,0,.16),inset 0 0 18px rgba(28,161,205,.05);
}

.oc-svg-icon{
  width:1em;
  height:1em;
  display:block;
  flex:0 0 auto;
  overflow:visible;
  color:inherit;
}
.oc-svg-icon path,.oc-svg-icon circle,.oc-svg-icon rect,.oc-svg-icon line,.oc-svg-icon polyline{
  fill:none!important;
  stroke:currentColor!important;
  vector-effect:non-scaling-stroke;
}

/* Main navigation: icon becomes its own small illuminated control. */
.desktop-nav>a>.oc-svg-icon,
.side-nav>a>.oc-svg-icon,
.mobile-drawer>a>.oc-svg-icon,
.mobile-drawer-logout button>.oc-svg-icon,
.profile-map-link>.oc-svg-icon{
  width:30px!important;
  height:30px!important;
  padding:6px!important;
  box-sizing:border-box!important;
  border:1px solid var(--oc-icon-border)!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,rgba(17,55,86,.92),rgba(7,28,47,.92))!important;
  color:var(--oc-icon-cyan)!important;
  box-shadow:var(--oc-icon-glow)!important;
  transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
.desktop-nav>a:hover>.oc-svg-icon,
.side-nav>a:hover>.oc-svg-icon,
.mobile-drawer>a:hover>.oc-svg-icon,
.profile-map-link:hover>.oc-svg-icon{
  border-color:rgba(80,220,255,.72)!important;
  color:#91ebff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 0 0 1px rgba(80,220,255,.08),0 0 20px rgba(32,191,232,.12)!important;
}
.desktop-nav>a.active>.oc-svg-icon,
.side-nav>a.active>.oc-svg-icon,
.mobile-drawer>a.active>.oc-svg-icon,
.profile-map-link.active>.oc-svg-icon{
  color:var(--oc-icon-orange)!important;
  border-color:rgba(255,135,88,.62)!important;
  background:linear-gradient(145deg,rgba(72,42,38,.76),rgba(22,30,45,.96))!important;
  box-shadow:0 0 0 1px rgba(255,135,88,.06),0 0 20px rgba(255,135,88,.10)!important;
}

/* Header buttons already have a circular shell: only refine their glyph. */
.round-action>.oc-svg-icon,
.reel-action>.oc-svg-icon,
.reel-create-trigger>.oc-svg-icon,
.dm-send-button>.oc-svg-icon,
.dm-new-message-button>.oc-svg-icon{
  width:20px!important;
  height:20px!important;
  color:currentColor;
}
.round-action:hover>.oc-svg-icon{color:var(--oc-icon-cyan)!important}

/* Drawer header mark. */
.mobile-drawer-headmark{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,rgba(18,63,94,.92),rgba(6,28,47,.96))!important;
  border:1px solid rgba(80,220,255,.44)!important;
  color:var(--oc-icon-cyan)!important;
  box-shadow:var(--oc-icon-glow)!important;
}
.mobile-drawer-headmark>.oc-svg-icon{width:20px!important;height:20px!important}

/* Prominent feature badges: same visual language as the Reel artwork. */
.settings-home-icon,
.settings-privacy-icon,
.map2-area-icon,
.map2-step-icon,
.map-tutorial-icon,
.roster-upload-icon,
.roster-promo>span,
.trip-context-mark,
.dm-empty>span:first-child{
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 35% 28%,rgba(58,190,231,.22),rgba(8,34,56,.94) 64%)!important;
  border:1px solid rgba(80,220,255,.48)!important;
  color:var(--oc-icon-cyan)!important;
  box-shadow:0 0 0 1px rgba(80,220,255,.04),0 8px 24px rgba(0,0,0,.18),inset 0 0 20px rgba(39,184,224,.06)!important;
}
.settings-home-icon,
.map2-area-icon,
.map2-step-icon,
.map-tutorial-icon,
.roster-upload-icon,
.roster-promo>span,
.trip-context-mark{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
.settings-privacy-icon{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
.settings-home-icon>.oc-svg-icon,
.settings-privacy-icon>.oc-svg-icon,
.map2-area-icon>.oc-svg-icon,
.map2-step-icon>.oc-svg-icon,
.map-tutorial-icon>.oc-svg-icon,
.roster-upload-icon>.oc-svg-icon,
.roster-promo>span>.oc-svg-icon,
.trip-context-mark>.oc-svg-icon{
  width:21px!important;
  height:21px!important;
}

/* Aviation accents use orange, while community/location stays cyan. */
.trip-context-tip .trip-context-mark,
.roster-upload-icon,
.roster-promo>span{
  color:var(--oc-icon-orange)!important;
  border-color:rgba(255,135,88,.48)!important;
  background:radial-gradient(circle at 35% 28%,rgba(255,135,88,.18),rgba(30,31,42,.96) 66%)!important;
}
.trip-meeting-card .trip-context-mark{color:var(--oc-icon-cyan)!important}

/* Contextual/direct icons that don't already have a wrapper get a compact badge. */
.post-share-option>.oc-svg-icon,
.dm-share-preview>div>.oc-svg-icon,
.map2-admin>div>.oc-svg-icon,
.map-privacy-note>.oc-svg-icon,
.privacy-callout>.oc-svg-icon,
.identity-private-note>.oc-svg-icon{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  padding:8px!important;
  box-sizing:border-box!important;
  border-radius:50%!important;
  color:var(--oc-icon-cyan)!important;
  background:rgba(11,42,66,.78)!important;
  border:1px solid rgba(80,220,255,.38)!important;
  box-shadow:var(--oc-icon-glow)!important;
}

/* Meeting time icon stays inline and intentionally small. */
.trip-meeting-time>.oc-svg-icon{
  display:inline-block!important;
  width:15px!important;
  height:15px!important;
  margin-right:4px!important;
  vertical-align:-2px!important;
  color:var(--oc-icon-cyan)!important;
}

/* Search / composer / action glyphs stay light and uncluttered. */
.explore-search>.oc-svg-icon,
.dm-thread-search span>.oc-svg-icon,
.dm-user-search span>.oc-svg-icon{
  width:18px!important;
  height:18px!important;
  color:rgba(137,176,209,.88)!important;
}

/* Keep icon circles comfortably tappable without growing the surrounding rows. */
@media (max-width:720px){
  .mobile-drawer>a>.oc-svg-icon,
  .mobile-drawer-logout button>.oc-svg-icon{width:32px!important;height:32px!important;padding:6px!important}
  .settings-home-icon,.map2-area-icon,.map2-step-icon,.map-tutorial-icon,.roster-upload-icon,.roster-promo>span,.trip-context-mark{
    width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important
  }
}

@media (prefers-reduced-motion:reduce){
  .desktop-nav>a>.oc-svg-icon,.side-nav>a>.oc-svg-icon,.mobile-drawer>a>.oc-svg-icon,.profile-map-link>.oc-svg-icon{transition:none!important}
}


/* OnChocks 0.2.15 H02 · Mobile nav parity with desktop.
   Dedicated wrapper avoids Safari rendering SVG backgrounds as rounded squares. */
@media (max-width:720px){
  .mobile-drawer>a,
  .mobile-drawer-logout button{
    column-gap:13px!important;
  }

  .mobile-drawer .oc-mobile-nav-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    flex:0 0 36px!important;
    display:grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
    border-radius:999px!important;
    border:1px solid rgba(72,205,244,.42)!important;
    background:linear-gradient(145deg,rgba(13,48,75,.92),rgba(7,27,45,.96))!important;
    color:rgba(126,220,244,.94)!important;
    box-shadow:0 0 0 1px rgba(40,184,224,.04),inset 0 0 14px rgba(39,184,224,.05)!important;
  }

  .mobile-drawer .oc-mobile-nav-icon>.oc-svg-icon,
  .mobile-drawer-logout .oc-mobile-nav-icon>.oc-svg-icon{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    box-shadow:none!important;
    transform:none!important;
  }

  .mobile-drawer>a:hover>.oc-mobile-nav-icon,
  .mobile-drawer>a:focus-visible>.oc-mobile-nav-icon{
    border-color:rgba(80,220,255,.72)!important;
    color:#9cecff!important;
    background:linear-gradient(145deg,rgba(15,55,84,.96),rgba(7,29,48,.98))!important;
  }

  .mobile-drawer>a.active{
    background:linear-gradient(90deg,rgba(34,61,88,.84),rgba(15,43,70,.74))!important;
    border-color:rgba(255,135,88,.28)!important;
    box-shadow:inset 3px 0 0 rgba(255,135,88,.92),inset 0 0 0 1px rgba(255,135,88,.04)!important;
  }
  .mobile-drawer>a.active>.oc-mobile-nav-icon{
    border-color:rgba(255,135,88,.68)!important;
    color:var(--oc-icon-orange)!important;
    background:linear-gradient(145deg,rgba(62,39,38,.88),rgba(20,31,45,.98))!important;
    box-shadow:0 0 0 1px rgba(255,135,88,.05),inset 0 0 13px rgba(255,135,88,.05)!important;
  }

  .mobile-drawer>a:not(.active)>.oc-mobile-nav-icon{
    opacity:.94!important;
  }

  .mobile-drawer-headmark{
    width:36px!important;
    height:36px!important;
  }
  .mobile-drawer-headmark>.oc-svg-icon{
    width:19px!important;
    height:19px!important;
  }
}